commit 8d6e72a8ad1188d28a58950ecf59c2923dc0ebb1
Author: guangyin <guangyin@hanbangtang.com>
Date:   Tue May 16 13:37:15 2023 +0800

    初始化页面搭建

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..cbd65ca
--- /dev/null
+++ b/README.md
@@ -0,0 +1,28 @@
+# hbt-template-ui
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### 本框架采用ts与法  具体依赖vue-property-decorator
+```
+see vue-property-decorator用法详解 （https://blog.csdn.net/weixin_44116302/article/details/111225763#PropSync_141）
+```
+
+### 采用模块联邦
+```
+远程引用需要先在global.d.ts中注册
+例：如需使用远程地图
+1.在global.d.ts中注册  declare module 'common/map';
+2.在页面中引用
+@Component({
+  components:{MapComponent:()=>import("common/map") }
+})
+3.在html中应用 <MapComponent :id="'testID'" @onMapLoaded="getMap($event)"></MapComponent>
+```
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..e955840
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..de07ef4
--- /dev/null
+++ b/package.json
@@ -0,0 +1,83 @@
+{
+  "name": "test",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve --mode development",
+    "build": "vue-cli-service build --mode production",
+    "test": "vue-cli-service build --mode test",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@turf/turf": "^6.5.0",
+    "@types/webpack-env": "^1.18.0",
+    "animate.css": "^4.1.1",
+    "axios": "^1.3.4",
+    "core-js": "^3.8.3",
+    "echarts": "^5.4.2",
+    "echarts-wordcloud": "^2.1.0",
+    "element-ui": "^2.15.13",
+    "file-saver": "^2.0.5",
+    "hbt-common": "0.0.3",
+    "jquery": "^3.6.4",
+    "layui-layer": "^1.0.9",
+    "mockjs": "^1.1.0",
+    "moment": "^2.29.4",
+    "screenfull": "^6.0.2",
+    "vue": "^2.6.14",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^9.1.2",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "compression-webpack-plugin": "^5.0.2",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "html-loader": "^4.2.0",
+    "sass": "^1.32.7",
+    "sass-loader": "^12.0.0",
+    "svg-sprite-loader": "^6.0.11",
+    "typescript": "~4.5.5",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended",
+      "@vue/typescript/recommended"
+    ],
+    "parserOptions": {
+      "ecmaVersion": 2020
+    },
+    "rules": {
+      "@typescript-eslint/no-explicit-any": [
+        "off"
+      ],
+      "vue/no-unused-components": "off",
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": "off"
+    }
+  },
+  "globals": {
+    "ue": true
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
diff --git a/public/ac.min.js b/public/ac.min.js
new file mode 100644
index 0000000..9661997
--- /dev/null
+++ b/public/ac.min.js
@@ -0,0 +1,513 @@
+var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.arrayIteratorImpl=function(v){var D=0;return function(){return D<v.length?{done:!1,value:v[D++]}:{done:!0}}};$jscomp.arrayIterator=function(v){return{next:$jscomp.arrayIteratorImpl(v)}};$jscomp.ASSUME_ES5=!1;$jscomp.ASSUME_NO_NATIVE_MAP=!1;$jscomp.ASSUME_NO_NATIVE_SET=!1;$jscomp.SIMPLE_FROUND_POLYFILL=!1;$jscomp.ISOLATE_POLYFILLS=!1;$jscomp.FORCE_POLYFILL_PROMISE=!1;$jscomp.FORCE_POLYFILL_PROMISE_WHEN_NO_UNHANDLED_REJECTION=!1;
+$jscomp.defineProperty=$jscomp.ASSUME_ES5||"function"==typeof Object.defineProperties?Object.defineProperty:function(v,D,I){if(v==Array.prototype||v==Object.prototype)return v;v[D]=I.value;return v};$jscomp.getGlobal=function(v){v=["object"==typeof globalThis&&globalThis,v,"object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global];for(var D=0;D<v.length;++D){var I=v[D];if(I&&I.Math==Math)return I}throw Error("Cannot find global object");};$jscomp.global=$jscomp.getGlobal(this);
+$jscomp.IS_SYMBOL_NATIVE="function"===typeof Symbol&&"symbol"===typeof Symbol("x");$jscomp.TRUST_ES6_POLYFILLS=!$jscomp.ISOLATE_POLYFILLS||$jscomp.IS_SYMBOL_NATIVE;$jscomp.polyfills={};$jscomp.propertyToPolyfillSymbol={};$jscomp.POLYFILL_PREFIX="$jscp$";var $jscomp$lookupPolyfilledValue=function(v,D){var I=$jscomp.propertyToPolyfillSymbol[D];if(null==I)return v[D];I=v[I];return void 0!==I?I:v[D]};
+$jscomp.polyfill=function(v,D,I,E){D&&($jscomp.ISOLATE_POLYFILLS?$jscomp.polyfillIsolated(v,D,I,E):$jscomp.polyfillUnisolated(v,D,I,E))};$jscomp.polyfillUnisolated=function(v,D,I,E){I=$jscomp.global;v=v.split(".");for(E=0;E<v.length-1;E++){var O=v[E];if(!(O in I))return;I=I[O]}v=v[v.length-1];E=I[v];D=D(E);D!=E&&null!=D&&$jscomp.defineProperty(I,v,{configurable:!0,writable:!0,value:D})};
+$jscomp.polyfillIsolated=function(v,D,I,E){var O=v.split(".");v=1===O.length;E=O[0];E=!v&&E in $jscomp.polyfills?$jscomp.polyfills:$jscomp.global;for(var T=0;T<O.length-1;T++){var F=O[T];if(!(F in E))return;E=E[F]}O=O[O.length-1];I=$jscomp.IS_SYMBOL_NATIVE&&"es6"===I?E[O]:null;D=D(I);null!=D&&(v?$jscomp.defineProperty($jscomp.polyfills,O,{configurable:!0,writable:!0,value:D}):D!==I&&(void 0===$jscomp.propertyToPolyfillSymbol[O]&&(I=1E9*Math.random()>>>0,$jscomp.propertyToPolyfillSymbol[O]=$jscomp.IS_SYMBOL_NATIVE?
+$jscomp.global.Symbol(O):$jscomp.POLYFILL_PREFIX+I+"$"+O),$jscomp.defineProperty(E,$jscomp.propertyToPolyfillSymbol[O],{configurable:!0,writable:!0,value:D})))};$jscomp.initSymbol=function(){};$jscomp.iteratorPrototype=function(v){v={next:v};v[Symbol.iterator]=function(){return this};return v};$jscomp.underscoreProtoCanBeSet=function(){var v={a:!0},D={};try{return D.__proto__=v,D.a}catch(I){}return!1};
+$jscomp.setPrototypeOf=$jscomp.TRUST_ES6_POLYFILLS&&"function"==typeof Object.setPrototypeOf?Object.setPrototypeOf:$jscomp.underscoreProtoCanBeSet()?function(v,D){v.__proto__=D;if(v.__proto__!==D)throw new TypeError(v+" is not extensible");return v}:null;$jscomp.makeIterator=function(v){var D="undefined"!=typeof Symbol&&Symbol.iterator&&v[Symbol.iterator];return D?D.call(v):$jscomp.arrayIterator(v)};$jscomp.generator={};
+$jscomp.generator.ensureIteratorResultIsObject_=function(v){if(!(v instanceof Object))throw new TypeError("Iterator result "+v+" is not an object");};$jscomp.generator.Context=function(){this.isRunning_=!1;this.yieldAllIterator_=null;this.yieldResult=void 0;this.nextAddress=1;this.finallyAddress_=this.catchAddress_=0;this.finallyContexts_=this.abruptCompletion_=null};
+$jscomp.generator.Context.prototype.start_=function(){if(this.isRunning_)throw new TypeError("Generator is already running");this.isRunning_=!0};$jscomp.generator.Context.prototype.stop_=function(){this.isRunning_=!1};$jscomp.generator.Context.prototype.jumpToErrorHandler_=function(){this.nextAddress=this.catchAddress_||this.finallyAddress_};$jscomp.generator.Context.prototype.next_=function(v){this.yieldResult=v};
+$jscomp.generator.Context.prototype.throw_=function(v){this.abruptCompletion_={exception:v,isException:!0};this.jumpToErrorHandler_()};$jscomp.generator.Context.prototype.return=function(v){this.abruptCompletion_={return:v};this.nextAddress=this.finallyAddress_};$jscomp.generator.Context.prototype.jumpThroughFinallyBlocks=function(v){this.abruptCompletion_={jumpTo:v};this.nextAddress=this.finallyAddress_};$jscomp.generator.Context.prototype.yield=function(v,D){this.nextAddress=D;return{value:v}};
+$jscomp.generator.Context.prototype.yieldAll=function(v,D){v=$jscomp.makeIterator(v);var I=v.next();$jscomp.generator.ensureIteratorResultIsObject_(I);if(I.done)this.yieldResult=I.value,this.nextAddress=D;else return this.yieldAllIterator_=v,this.yield(I.value,D)};$jscomp.generator.Context.prototype.jumpTo=function(v){this.nextAddress=v};$jscomp.generator.Context.prototype.jumpToEnd=function(){this.nextAddress=0};
+$jscomp.generator.Context.prototype.setCatchFinallyBlocks=function(v,D){this.catchAddress_=v;void 0!=D&&(this.finallyAddress_=D)};$jscomp.generator.Context.prototype.setFinallyBlock=function(v){this.catchAddress_=0;this.finallyAddress_=v||0};$jscomp.generator.Context.prototype.leaveTryBlock=function(v,D){this.nextAddress=v;this.catchAddress_=D||0};
+$jscomp.generator.Context.prototype.enterCatchBlock=function(v){this.catchAddress_=v||0;v=this.abruptCompletion_.exception;this.abruptCompletion_=null;return v};$jscomp.generator.Context.prototype.enterFinallyBlock=function(v,D,I){I?this.finallyContexts_[I]=this.abruptCompletion_:this.finallyContexts_=[this.abruptCompletion_];this.catchAddress_=v||0;this.finallyAddress_=D||0};
+$jscomp.generator.Context.prototype.leaveFinallyBlock=function(v,D){D=this.finallyContexts_.splice(D||0)[0];if(D=this.abruptCompletion_=this.abruptCompletion_||D){if(D.isException)return this.jumpToErrorHandler_();void 0!=D.jumpTo&&this.finallyAddress_<D.jumpTo?(this.nextAddress=D.jumpTo,this.abruptCompletion_=null):this.nextAddress=this.finallyAddress_}else this.nextAddress=v};$jscomp.generator.Context.prototype.forIn=function(v){return new $jscomp.generator.Context.PropertyIterator(v)};
+$jscomp.generator.Context.PropertyIterator=function(v){this.object_=v;this.properties_=[];for(var D in v)this.properties_.push(D);this.properties_.reverse()};$jscomp.generator.Context.PropertyIterator.prototype.getNext=function(){for(;0<this.properties_.length;){var v=this.properties_.pop();if(v in this.object_)return v}return null};$jscomp.generator.Engine_=function(v){this.context_=new $jscomp.generator.Context;this.program_=v};
+$jscomp.generator.Engine_.prototype.next_=function(v){this.context_.start_();if(this.context_.yieldAllIterator_)return this.yieldAllStep_(this.context_.yieldAllIterator_.next,v,this.context_.next_);this.context_.next_(v);return this.nextStep_()};
+$jscomp.generator.Engine_.prototype.return_=function(v){this.context_.start_();var D=this.context_.yieldAllIterator_;if(D)return this.yieldAllStep_("return"in D?D["return"]:function(I){return{value:I,done:!0}},v,this.context_.return);this.context_.return(v);return this.nextStep_()};
+$jscomp.generator.Engine_.prototype.throw_=function(v){this.context_.start_();if(this.context_.yieldAllIterator_)return this.yieldAllStep_(this.context_.yieldAllIterator_["throw"],v,this.context_.next_);this.context_.throw_(v);return this.nextStep_()};
+$jscomp.generator.Engine_.prototype.yieldAllStep_=function(v,D,I){try{var E=v.call(this.context_.yieldAllIterator_,D);$jscomp.generator.ensureIteratorResultIsObject_(E);if(!E.done)return this.context_.stop_(),E;var O=E.value}catch(T){return this.context_.yieldAllIterator_=null,this.context_.throw_(T),this.nextStep_()}this.context_.yieldAllIterator_=null;I.call(this.context_,O);return this.nextStep_()};
+$jscomp.generator.Engine_.prototype.nextStep_=function(){for(;this.context_.nextAddress;)try{var v=this.program_(this.context_);if(v)return this.context_.stop_(),{value:v.value,done:!1}}catch(D){this.context_.yieldResult=void 0,this.context_.throw_(D)}this.context_.stop_();if(this.context_.abruptCompletion_){v=this.context_.abruptCompletion_;this.context_.abruptCompletion_=null;if(v.isException)throw v.exception;return{value:v.return,done:!0}}return{value:void 0,done:!0}};
+$jscomp.generator.Generator_=function(v){this.next=function(D){return v.next_(D)};this.throw=function(D){return v.throw_(D)};this.return=function(D){return v.return_(D)};this[Symbol.iterator]=function(){return this}};$jscomp.generator.createGenerator=function(v,D){D=new $jscomp.generator.Generator_(new $jscomp.generator.Engine_(D));$jscomp.setPrototypeOf&&v.prototype&&$jscomp.setPrototypeOf(D,v.prototype);return D};
+$jscomp.asyncExecutePromiseGenerator=function(v){function D(E){return v.next(E)}function I(E){return v.throw(E)}return new Promise(function(E,O){function T(F){F.done?E(F.value):Promise.resolve(F.value).then(D,I).then(T,O)}T(v.next())})};$jscomp.asyncExecutePromiseGeneratorFunction=function(v){return $jscomp.asyncExecutePromiseGenerator(v())};$jscomp.asyncExecutePromiseGeneratorProgram=function(v){return $jscomp.asyncExecutePromiseGenerator(new $jscomp.generator.Generator_(new $jscomp.generator.Engine_(v)))};
+$jscomp.polyfill("Array.prototype.includes",function(v){return v?v:function(D,I){var E=this;E instanceof String&&(E=String(E));var O=E.length;I=I||0;for(0>I&&(I=Math.max(I+O,0));I<O;I++){var T=E[I];if(T===D||Object.is(T,D))return!0}return!1}},"es7","es3");$jscomp.polyfill("Promise.prototype.finally",function(v){return v?v:function(D){return this.then(function(I){return Promise.resolve(D()).then(function(){return I})},function(I){return Promise.resolve(D()).then(function(){throw I;})})}},"es9","es3");
+var acapi=function(v){function D(a){function b(c,e){return c.reduce(function(d,h){var g;Array.isArray(h)&&(g=b(h,e+1));return g>d?g:d},e)}return b(a,1)}function I(a){let b=a.length,c=Array(b),e;for(let d=0;d<b;d++)e=a.charCodeAt(d),e=48<=e&&58>e?e-48:(e&223)-65+10,c[d]=e;return c.reduce((d,h)=>16*d+h,0)}function E(a){if(void 0!=a){var b=[];if(/^(rgb|RGB)/.test(a)){a=a.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");for(let c of a)b.push(Number((Number(c)/255).toFixed(1)))}else if(/^#/.test(a)){if(/^#[0-9A-F]{3}$/i.test(a)){let c=
+"#";a.replace(/[0-9A-F]/ig,function(e){c+=e+e});a=c}/^#[0-9A-F]{6}$/i.test(a)&&a.replace(/[0-9A-F]{2}/ig,function(c){c=I(c);b.push(Number((c/255).toFixed(1)))})}else a instanceof Array&&(b=a);3==b.length&&b.push(1);return b}}function O(a){if(void 0!=a){var b,c=D(a);2==c?b=[[a]]:3==c?b=[a]:4==c&&(b=a);if(b)for(let e of b)for(let d of e)for(let h of d)2==h.length&&h.push(0);return b}}function T(a){if(void 0!=a)return 1==D(a)?[a]:a}function F(a){return a instanceof Array?a:[a]}function K(a){let b=[];
+if(a instanceof Array)for(let c in a)b[c]=a[c].toString();else b=[a.toString()];return b}function S(a){switch(typeof a){case "undefined":return!0;case "string":if(0===a.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g,"").length)return!0;break;case "boolean":if(!a)return!0;break;case "number":if(isNaN(a))return!0;break;case "object":if(null===a||0===a.length)return!0;for(var b in a)return!1;return!0}return!1}function pa(a,b){for(a=a.toString();a.length<b;)a="0"+a;return a}function Ga(a,b){let c,e=0;return function(...d){const h=
+this,g=+new Date,q=b-(g-e);0>=q?(e=g,a.apply(h,d),c&&(clearTimeout(c),c=null)):c||(c=setTimeout(()=>{e=+new Date;c=null;a.apply(h,d)},q))}}function Ha(a){switch(a){case da.StartingProcess:return"starting process...";case da.CheckingBusy:return"checking...";case da.ProcessStartFailed:return"process start failed!";case da.ProcessStarted:return"process started";case da.LoadingProject:return"loading project...";case da.ProjectLoaded:return"project loaded"}}function wa(a){"string"===typeof a&&(a=document.getElementById(a));
+return a}function Ia(a){return R.isIOSDevice&&R.isInWeixinBrowser?!1:a==sa.abnormal||a==sa.instance_disconnected}function aa(a,b){return void 0!==a&&null!==a?a:b}function xa(a){return a.keyCode===ea.Shift&&"ShiftRight"===a.code?ea.RightShift:a.keyCode===ea.Control&&"ControlRight"===a.code?ea.RightControl:a.keyCode===ea.Alt&&"AltRight"===a.code?ea.RightAlt:a.keyCode}var p={None:0,Camera_PlayAnimation:1,Camera_StopAnimation:2,Misc_EnterReportMode:3,Misc_ExitReportMode:4,Misc_SetDateTime:5,Camera_GetCamera:6,
+Camera_SetState:7,Camera_Set:8,Camera_LookAtBBox:9,Coord_World2Screen:10,Coord_Screen2World:11,InfoTree_SetVisibility:12,InfoTree_Show:13,InfoTree_Hide:14,InfoTree_EnableXRay:15,InfoTree_DisableXRay:16,TileLayer_Add:17,HeatMap_Add:18,HeatMap_Update:19,HeatMap_AddPoints:20,HeatMap_RemovePoints:21,HeatMap_Delete:22,HeatMap_Show:23,HeatMap_Hide:24,HeatMap_Focus:25,HighlightArea_Add:26,HighlightArea_Delete:27,HighlightArea_Update:28,Polygon3D_Add:29,Polygon3D_Delete:30,Misc_AddImageButton:31,Misc_DeleteImageButton:32,
+Misc_AddAnimatedImageButton:33,Settings_SetMainUIVisibility:34,Settings_SetMousePickMask:35,Tag_Add:36,Tag_Delete:37,Tag_Update:38,Tag_Clear:39,Tag_Focus:40,Beam_Add:41,Beam_Update:42,Beam_Delete:43,Beam_Clear:44,Beam_Focus:45,Beam_Show:350,Beam_Hide:351,Beam_ShowAll:352,Beam_HideAll:353,RadiationPoint_Add:46,RadiationPoint_Update:47,RadiationPoint_Delete:48,RadiationPoint_Clear:49,Polygon_Add:50,Polygon_Update:51,Polygon_Delete:52,Polygon_Clear:53,Polygon_Highlight:54,Polygon_StopHighlight:325,Polygon_Glow:55,
+Polygon_Focus:56,Tag_FocusAll:57,Tag_Show:58,Tag_Hide:59,Tag_ShowAll:60,Tag_HideAll:61,RadiationPoint_Focus:62,RadiationPoint_FocusAll:63,RadiationPoint_Show:64,RadiationPoint_Hide:65,RadiationPoint_ShowAll:66,RadiationPoint_HideAll:67,Polygon_Show:68,Polygon_Hide:69,Polygon3D_Update:70,Polygon3D_Clear:71,Polygon3D_Focus:72,Polygon3D_Show:73,Polygon3D_Hide:74,Polygon3D_Highlight:75,Polygon3D_Glow:76,Polygon3D_StopGlow:77,HighlightArea_Clear:78,HighlightArea_Focus:79,HighlightArea_Show:80,HighlightArea_Hide:81,
+Misc_GetVersion:82,TileLayer_Update:83,TileLayer_Delete:84,TileLayer_Focus:85,TileLayer_EnableXRay:86,TileLayer_DisableXRay:87,TileLayer_Show:88,TileLayer_Hide:89,Tag_Get:90,RadiationPoint_Get:91,Polygon_Get:92,Polygon3D_Get:93,HighlightArea_Get:94,TileLayer_Get:95,Beam_Get:96,HeatMap_Get:97,Settings_GetMapMode:98,Settings_SetMapMode:99,Settings_SetMapURL:100,Settings_SetWMTSLayerVisible:320,TileLayer_Actor_Show:101,TileLayer_Actor_Hide:102,TileLayer_Actor_Focus:103,TileLayer_Actor_Highlight:104,
+TileLayer_Actor_StopHightlight:105,CustomObject_Add:106,CustomObject_Update:107,CustomObject_Delete:108,CustomObject_Get:109,CustomObject_Focus:110,CustomObject_Show:111,CustomObject_Hide:112,CustomObject_SetTintColor:326,HeatMap_Clear:113,CustomTag_Clear:39,CustomTag_Delete:37,CustomTag_Focus:40,CustomTag_FocusAll:57,CustomTag_Show:58,CustomTag_Hide:59,CustomTag_ShowAll:60,CustomTag_HideAll:61,CustomTag_Add:114,CustomTag_Update:115,CustomTag_Get:116,Polyline_Add:117,Polyline_Update:118,Polyline_Delete:119,
+Polyline_Clear:120,Polyline_Focus:121,Polyline_Get:122,Polyline_Show:123,Polyline_Hide:124,Polyline_ShowAll:125,Polyline_HideAll:126,VideoProjection_Add:127,VideoProjection_Update:128,VideoProjection_Delete:129,VideoProjection_Show:130,VideoProjection_Hide:131,VideoProjection_Get:132,VideoProjection_Focus:133,Misc_PlayVideo:134,Misc_StopPlayVideo:135,Weather_SetParams:136,Weather_GetParams:137,Weather_SetDate:138,Weather_GetDate:139,ODLine_Add:140,ODLine_Update:141,ODLine_Delete:142,ODLine_Clear:143,
+ODLine_Focus:144,ODLine_Get:145,ODLine_Show:146,ODLine_Hide:147,ODLine_ShowAll:148,ODLine_HideAll:149,Misc_SetWindowResolution:150,Misc_CallBPFunction:151,Settings_SetHighlightColor:152,InfoTree_ShowByGroupId:153,InfoTree_HideByGroupId:154,InfoTree_HighlightByGroupId:155,InfoTree_DeleteByGroupId:156,EditHelper_Start:157,EditHelper_Quit:158,EditHelper_Finish:159,EditHelper_SetParam:160,Settings_SetFovX:161,TileLayer_Actor_ShowAll:162,TileLayer_Actor_HideAll:163,CameraTour_Add:164,CameraTour_Update:165,
+CameraTour_Play:166,CameraTour_Stop:167,CameraTour_Delete:168,Tag_PopupWindow_Show:169,Tag_PopupWindow_Hide:170,Tag_PopupWindow_ShowAll:171,Tag_PopupWindow_HideAll:172,Settings_SetOceanColor:173,Misc_ShowAllFoliages:174,Misc_HideAllFoliages:175,Tools_StartPolygonClip:176,Tools_StopClip:177,TileLayer_SetAllowClip:178,Panorama_Add:179,Panorama_Update:180,Panorama_Delete:181,Panorama_Clear:182,Panorama_Focus:183,Panorama_Get:184,Decal_Add:185,Decal_Update:186,Decal_Delete:187,Decal_Clear:188,Decal_Focus:189,
+Decal_FocusAll:190,Decal_Get:191,Misc_PlayMovie:192,Misc_StopMovie:193,Tools_SetMeasurement:194,Tools_StartMeasurement:195,Tools_StopMeasurement:196,Viewshed_Add:197,Viewshed_Update:198,Viewshed_Focus:199,Viewshed_Delete:200,Viewshed_Clear:201,Viewshed_Get:202,TileLayer_SetStyle:203,Tools_LineIntersect:204,Coord_PCS2GCS:205,Coord_GCS2PCS:206,DynamicWater_Add:207,DynamicWater_Update:208,DynamicWater_Focus:209,DynamicWater_Delete:210,DynamicWater_Clear:211,DynamicWater_Get:212,DynamicWater_Show:213,
+DynamicWater_Hide:214,Quit:215,TileLayer_Actor_Unhighlight:216,InfoTree_Get:217,Reset:218,SaveProject:225,CustomObject_Clear:219,CustomObject_Highlight:220,CustomObject_Unhighlight:221,CustomObject_StopHighlight:222,CustomObject_CallFunction:223,CustomObject_AddByTileLayer:224,Tools_StartPlaneClip:226,Tools_StopPlaneClip:228,Tools_StartVolumeClip:229,Tools_UpdateVolumeClip:230,Tools_StopVolumeClip:231,Tools_StartSkylineAnalysis:232,Tools_StopSkylineAnalysis:233,Tools_ExportSkyline:234,Tools_StartViewshedAnalysis:235,
+Tools_StopViewshedAnalysis:236,Camera_Move:237,TileLayer_SetCollision:238,TileLayer_Modifier_Add:239,TileLayer_Modifier_Update:240,TileLayer_Modifier_Delete:241,TileLayer_Modifier_Clear:242,Misc_StartProcess:243,Settings_SetCampassVisible:244,Tools_StartGeometryEdit:245,Tools_StopGeometryEdit:246,Settings_SetEnableInteract:247,Camera_PauseAnimation:248,Camera_ResumeAnimation:249,Settings_SetInteractiveMode:250,CameraTour_Pause:251,CameraTour_Resume:252,Settings_SetTerrainAlpha:253,CustomMesh_Add:254,
+CustomMesh_Delete:255,CustomMesh_Clear:256,CustomMesh_Update:257,CustomMesh_Get:258,CustomMesh_Focus:259,CustomMesh_Show:260,CustomMesh_Hide:261,CustomMesh_ShowAll:262,CustomMesh_HideAll:263,Settings_EnableCameraMovingEvent:264,Marker_Add:265,Marker_Update:266,Marker_Get:267,Marker_Delete:268,Marker_Clear:269,Marker_Focus:270,Marker_FocusAll:271,Marker_Show:272,Marker_Hide:273,Marker_ShowAll:274,Marker_HideAll:275,Marker_ShowPopupWindow:276,Marker_HidePopupWindow:277,Marker_ShowAllPopupWindow:278,
+Marker_HideAllPopupWindow:279,TileLayer_SetViewportVisible:280,TileLayer_GetObjectIDs:281,Polygon3D_StopHighlight:282,Tools_StartFloodFill:283,Tools_StopFloodFill:284,FloodFill_Add:285,FloodFill_Delete:286,FloodFill_Clear:287,FloodFill_Update:288,FloodFill_Get:289,FloodFill_Focus:290,FloodFill_Show:291,FloodFill_Hide:292,FloodFill_ShowAll:293,FloodFill_HideAll:294,Cesium3DTile_Add:295,Cesium3DTile_Delete:296,Cesium3DTile_Clear:297,Cesium3DTile_Update:298,Cesium3DTile_Get:299,Cesium3DTile_Focus:300,
+Cesium3DTile_Show:301,Cesium3DTile_Hide:302,Cesium3DTile_ShowAll:303,Cesium3DTile_HideAll:304,TileLayer_GetActorInfoFromDB:305,ShapeFileLayer_Add:306,ShapeFileLayer_Delete:307,ShapeFileLayer_Clear:308,ShapeFileLayer_Update:309,ShapeFileLayer_Get:310,ShapeFileLayer_Focus:311,ShapeFileLayer_Show:312,ShapeFileLayer_Hide:313,ShapeFileLayer_ShowAll:314,ShapeFileLayer_HideAll:315,ShapeFileLayer_OpenShapeFileLayer:316,Weather_SimulateTime:317,TileLayer_Actor_GetInfo:318,Camera_GetAnimationList:319,TileLayer_CutPolygon_Add:321,
+TileLayer_CutPolygon_Update:322,TileLayer_CutPolygon_Delete:323,TileLayer_CutPolygon_Clear:324,Marker3D_Add:327,Marker3D_Delete:328,Marker3D_Clear:329,Marker3D_Update:330,Marker3D_Get:331,Marker3D_Focus:332,Marker3D_Show:333,Marker3D_Hide:334,Marker3D_ShowAll:335,Marker3D_HideAll:336,Camera_GetAnimationImage:337,Tools_ReplaceTexture:338,Tools_RestoreTexture:339,Light_Add:340,Light_Delete:341,Light_Update:343,Light_Get:344,Light_Clear:342,Light_Focus:345,Light_Show:346,Light_Hide:347,Light_ShowAll:348,
+Light_HideAll:349,WaterMesh_Add:354,WaterMesh_Update:355,WaterMesh_Delete:356,WaterMesh_Clear:357,WaterMesh_Get:358,WaterMesh_Focus:359,WaterMesh_Show:360,WaterMesh_Hide:361,WaterMesh_ShowAll:362,WaterMesh_HideAll:363,CustomObject_StartMove:364,CustomObject_StopMove:365,CustomObject_OverrideMaterial:366,CustomObject_RestoreMaterial:367,Settings_SetReport:368,Settings_GetReport:369,Settings_SetControl:370,Settings_GetControl:371,Settings_SetPostProcess:372,Settings_GetPostProcess:373,Settings_SetCamera:374,
+Settings_GetCamera:375,CustomObject_SetViewportVisible:376,WaterFlowField_Add:377,WaterFlowField_Update:378,WaterFlowField_Delete:379,WaterFlowField_Clear:380,WaterFlowField_Get:381,WaterFlowField_Focus:382,WaterFlowField_Show:383,WaterFlowField_Hide:384,TileLayer_SetViewHeightRange:385,Tools_StartVisiblityAnalysis:386,Tools_StopVisiblityAnalysis:387,Tools_StartViewDomeAnalysis:388,Tools_StopViewDomeAnalysis:389,Tools_StartCutFillAnalysis:390,Tools_StopCutFillAnalysis:391,Tools_StartSunshineAnalysis:392,
+Tools_StopSunshineAnalysis:393,Tools_StartTerrainSlopeAnalysis:394,Tools_StopTerrainSlopeAnalysis:395,Tools_StartContourLineAnalysis:396,Tools_StopContourLineAnalysis:397,TileLayer_GetAllFlattenData:398,Marker_SetupPOIAttachment:399,HeatMap3D_Add:400,HeatMap3D_Update:401,HeatMap3D_Focus:402,HeatMap3D_Delete:403,HeatMap3D_Show:404,HeatMap3D_Hide:405,HeatMap3D_Get:406,HeatMap3D_Clear:407,ShapeFileLayer_HighlightFeature:408,ShapeFileLayer_UnHighlightFeature:409,ShapeFileLayer_FocusFeature:410,ShapeFileLayer_GetFeatureInfo:411,
+Misc_EnterMultiViewport:412,Misc_ExitMultiViewport:413,Misc_SetActivateMultiViewport:414,Misc_GetActivateMultiViewport:415,Panorama_Enter:416,Panorama_Exit:417,Panorama_Switch:418,VTPKService_Get:419,VTPKService_Set:420,SimulateTest__:421,Settings_CursorAutoSync:422,InfoTree_Focus:423,Marker_ShowByGroupId:424,Marker_HideByGroupId:425,Marker_DeleteByGroupId:426,ImageryLayer_Init:427,ImageryLayer_Add:428,Camera_LockBBox:429,Camera_UnLockBBox:430,Settings_SetWMTSLayerOpacity:431,Camera_EnterEarthCapture:432,
+Camera_ExitEarthCapture:433,Tools_AnalysisPopupAttributes:434,Tools_AnalysisCloseAttributes:435,ImageryLayer_Show:436,ImageryLayer_Hide:437,ImageryLayer_Delete:438,Settings_GetInteractiveMode:439,VideoProjection_Clear:440,Misc_UpdateMultiViewport:441,Misc_downloadPakFiles:442,Settings_SetCampassPosition:443,Polygon3D_ShowAll:444,Polygon3D_HideAll:445,GeoJSONLayer_Add:446,GeoJSONLayer_Show:447,GeoJSONLayer_Hide:448,GeoJSONLayer_Delete:449,Vehicle_Add:450,Vehicle_Update:451,Vehicle_AddWayPoints:452,
+Vehicle_ClearWayPoints:453,Vehicle_Focus:454,Vehicle_Show:455,Vehicle_Hide:456,Vehicle_Get:457,Vehicle_Delete:458,Vehicle_Clear:459,Vehicle_MoveTo:460,Misc_ConvexHull2D:461,HeatMap_AddVoxels:462,TileLayer_GetCollision:463,TileLayer_SetPointSize:464,Misc_QueryActorOrMaterial:465,CustomObject_StartGlow:466,CustomObject_StopGlow:467,Coord_Transform:468,RegisterJsCommunication:469,UnRegisterJsCommunication:470,Vehicle_CallBatchFunction:471,Camera_FlyAround:472,Marker3D_ShowByGroupId:473,Marker3D_HideByGroupId:474,
+Marker3D_DeleteByGroupId:475,Camera_EnterWorldAnimation:476,Camera_ExitWorldAnimation:477,TileLayer_SetDecalAttach:478,Command_End:1E4},ya=!1;(()=>{if(!ya){ya=!0;for(let a in p)p[p[a]]=a}})();const qa={MouseClick:1,MouseMove:2,MouseHover:4},ba={V1:1,V2:2,V3:4,V4:8,All:255};class Ja{constructor(a,b){this.id=a;this.visible=b}}class Ka{constructor(a,b,c,e){this.id=a.toString();this.coordinate=b;this.radius=c;this.heatValue=e}}class La{constructor(a,b,c,e,d,h,g,q,k,f,l,t,w,r){this.id=a.toString();this.coordinate=
+b;this.imagePath=c;this.imageSize=e;this.url=d;this.text=h;this.range=g||[1,1E5];this.showLine=!!q;this.textColor=k||[0,0,0,1];this.textBackgroundColor=f||[1,1,1,.85];this.textBorderColor=l||[0,0,0,0];this.textRange=t||1E5;this.hoverImagePath=w;this.autoHidePopupWindow=r||!0}}class Ma{constructor(a,b,c){this.url=a;this.width=b;this.height=c}}class Na{constructor(a,b,c,e,d,h,g,q){this.id=a.toString();this.coordinate=b;this.contentURL=c.url;this.contentSize=[c.width,c.height];this.popupURL=e.url;this.popupSize=
+[e.width,e.height];this.pivot=d;this.range=h;this.autoHidePopupWindow=g||!0;this.popupPos=q}}class Oa{constructor(a,b,c,e,d,h){this.id=a.toString();this.coordinates=O(b);this.color=E(c);this.heightRange=e;this.intensity=d;this.depthTest=h||!0}}class Pa{constructor(a,b,c,e,d,h,g,q){this.id=a.toString();this.x=b;this.y=c;this.width=e;this.height=d;this.normalImage=h;this.hoverImage=g;this.tooltip=q}}class Qa{constructor(a,b,c,e,d,h,g,q,k){this.id=a.toString();this.x=b;this.y=c;this.width=e;this.height=
+d;this.imageSequecePath=h;this.imageSequeceLength=g;this.loop=!!q;this.interactable=!!k}}class Ra{constructor(a,b,c,e,d,h,g){this.id=a.toString();this.duration=b;this.thickness=c;this.interval=e;this.velocity=d;this.color=E(h);this.coordinates=g}}class Sa{constructor(a,b,c,e,d,h){this.id=a.toString();this.coordinate=b;this.radius=c;this.rippleNumber=e;this.color=E(d);this.brightness=h}}class Ta{constructor(a,b,c,e,d,h,g,q){this.id=a.toString();this.style=b;this.coordinates=O(c);this.color=E(e);this.height=
+d;this.intensity=h;this.tillingX=g;this.tillingY=q}}class Ua{constructor(a,b,c,e,d,h,g,q,k,f){this.id=a.toString();this.color=E(b);this.coordinates=c;this.style=void 0==e?0:e;if(0>this.style||5<this.style)this.style=0;this.thickness=void 0==d?20:d;this.brightness=void 0==h?.5:h;this.flowRate=void 0==g?.5:g;this.tiling=q||0;this.depthTest=k||!0;this.shape=void 0==f?0:f}}class Va{constructor(a,b,c,e,d,h,g,q,k,f,l,t,w,r,y,u,A){this.id=a.toString();this.color=E(b);this.coordinates=c;this.flowRate=void 0==
+e?.5:e;this.brightness=void 0==d?.5:d;this.bendDegree=void 0==h?.5:h;this.tiling=g||0;this.lineThickness=void 0==q?20:q;this.flowPointSizeScale=void 0==k?20:k;this.labelSizeScale=void 0==f?100:f;this.lineShape=void 0==l?1:l;this.lineStyle=t||0;this.flowShape=w||0;this.startPointShape=r||0;this.endPointShape=y||0;this.startLabelShape=u||0;this.endLabelShape=A||0;this.endLabelStyle=this.startLabelStyle=this.endPointStyle=this.startPointStyle=this.flowStyle=0}}class Wa{constructor(a,b,c,e,d,h,g,q){this.id=
+a.toString();this.color=E(b);this.coordinates=O(c);this.framecolor=E(e);this.framethickness=d;this.depthTest=h||!0;this.brightness=g;this.style=q;if(0>this.style||10<this.style)this.style=0}}class Xa{constructor(a,b,c,e,d,h){this.id=a.toString();this.imagePath=b;this.coordinate=c;this.yaw=e;this.groupId=d||"";this.userData=h||""}}class Ya{constructor(a,b,c,e,d,h,g,q){this.id=a.toString();this.order=b;this.texturePath=c;this.location=e;this.rotation=d;this.scale=h;this.groupId=g;this.userData=q}}class Za{constructor(a,
+b,c,e,d){this.id=a.toString();this.fileName=b;this.location=c;this.rotation=e;this.scale=d}}class $a{constructor(a,b,c,e,d,h,g){this.id=a;this.pakFilePath=b;this.assetPath=c;this.location=e;this.rotation=d;this.scale=h;this.smoothMotion=g}}class ab{constructor(a,b,c,e,d,h,g){this.id=a;this.tileLayerId=b;this.objectId=c;this.location=e;this.rotation=d;this.scale=h;this.smoothMotion=g}}class bb{constructor(a,b,c,e,d,h,g){this.id=a;this.videoURL=b;this.location=c;this.rotation=e;this.fov=d;this.aspectRatio=
+h;this.distance=g}}class cb{constructor(a,b,c,e,d){this.id=a;this.coordinates=O(b);this.style=c;this.groupId=e;this.userData=d}}class db{constructor(a,b,c,e,d){this.actorTag=a;this.objectName=b;this.functionName=c;this.paramType=e;this.paramValue=d}}class fa{constructor(a,b){this.tileLayerId=a;this.tileLayerActorNames=K(b)}}class eb{constructor(a,b,c,e){this.index=a;this.time=b;this.location=c;this.rotation=e}}class fb{constructor(a,b,c){this.id=a.toString();this.name=b.toString();this.keyFrames=
+c}}class gb{constructor(){this.queue=[];this.dataMap=new Map}enqueue(a){if(null==a||void 0==a||!a.callbackIndex)return!1;this.queue.push(a.callbackIndex);this.dataMap.set(a.callbackIndex,a);return!0}dequeue(){if(0!=this.queue.length){const a=this.queue.shift();return this.dataMap.get(a)}}removeData(a){this.dataMap.has(a)&&this.dataMap.delete(a)}dataSize(){return this.dataMap.size}queueSize(){return this.queue.length}}class hb extends gb{constructor(a){super();this.onSendAPI=a;this.timer=null;this.isMainThreadBusy=
+!1}onMainThreadBusy(a){this.isMainThreadBusy=a.busy}push(a){if(a.__noResponse)this.onSendAPI(a);else 0==this.dataSize()?(this.enqueue(a),this.callNext()):1E4<this.dataSize()?console.warn("The api queue has exceeded 10000, and subsequent calls will be ignored!"):this.enqueue(a)}callNext(a){a&&this.removeData(a);this.timer&&clearTimeout(this.timer);0!=this.dataSize()&&(a=this.dequeue())&&(this._callNextForTimeout(3E3),this.onSendAPI(a))}_callNextForTimeout(a){this.timer=setTimeout(()=>{this.isMainThreadBusy?
+this._callNextForTimeout(5E3):this.callNext()},a)}}class Q{constructor(a,b,c){this.int=a;this.type=b;this.colorProps=c;this._useBatchUpdate=!1;this._tempUpdateData=[]}_checkCommand(a){a=this.type+a;let b=p[a];void 0==b&&this.int.logWithColor("red",`Invalid command: ${a}`);return b}_convertFilePath(a){return this.int.resourcesPath?a.replace("@path:",this.int.resourcesPath+"/"):a}_processProps(a){a=F(a);for(var b of a)for(let e in b)"string"==typeof b[e]&&b[e].startsWith("@path:")&&(b[e]=this._convertFilePath(b[e]));
+for(let e of a)"string"!=typeof e.id&&(e.id=e.id.toString());if(this.colorProps){b=this.colorProps.split("|");for(var c of a)for(let e of b)c.hasOwnProperty(e)&&(c[e]=E(c[e]))}if(-1!=["Polygon","Polygon3D","HighlightArea","DynamicWater"].indexOf(this.type))for(let e of a)e.coordinates=O(e.coordinates);for(let e of a)e.hasOwnProperty("userData")&&(c=e.userData,this._isJsonString(c)&&(e.userData=c.replace(/"/g,"~!@~!@~!@")))}_isJsonString(a){try{return"string"===typeof a?(JSON.parse(a),!0):!1}catch(b){return!1}}_add(a,
+b){this._processProps(a);return this.int.call({command:this._checkCommand("_Add"),data:F(a)},b)}_update(a,b){this._processProps(a);return this.int.call({command:this._checkCommand("_Update"),data:F(a)},b)}_delete(a,b){return this.int.call({command:this._checkCommand("_Delete"),ids:K(a)},b)}_clear(a){return this.int.call0(this._checkCommand("_Clear"),a)}_get(a,b){return this.int.call({command:this._checkCommand("_Get"),ids:K(a)},b)}_focus(a,b,c,e,d){"function"==typeof c&&(d=c,c=void 0);"function"==
+typeof e&&(d=e,e=null);return this.int.call({command:this._checkCommand("_Focus"),ids:K(a),distance:b||0,flyTime:c,rotation:e},d)}_focusAll(a,b,c,e){"function"==typeof b&&(e=b,b=void 0);"function"==typeof c&&(e=c,c=null);return this.int.call({command:this._checkCommand("_FocusAll"),ids:[],distance:a||0,flyTime:b,rotation:c},e)}_show(a,b){return this.int.call({command:this._checkCommand("_Show"),ids:K(a)},b)}_showAll(a){return this.int.call0(this._checkCommand("_ShowAll"),a)}_hide(a,b){return this.int.call({command:this._checkCommand("_Hide"),
+ids:K(a)},b)}_hideAll(a){return this.int.call0(this._checkCommand("_HideAll"),a)}_updateOneProp(a,b,c,e){if(this._useBatchUpdate){e=!1;for(var d of this._tempUpdateData)if(d.id==a.toString()){e=!0;d[b]=c;break}e||(e={},e.id=a.toString(),e[b]=c,this._tempUpdateData.push(e))}else return d={},d.id=a.toString(),d[b]=c,this.update(d,e)}updateBegin(){this._useBatchUpdate=!0;this._tempUpdateData=[]}updateEnd(a){a=this.update(this._tempUpdateData,a);this._tempUpdateData=null;this._useBatchUpdate=!1;return a}test(){alert("test")}}
+class ib extends Q{constructor(a){super(a,"Beam","color")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}showAll(a){return super._showAll(a)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}setDuration(a,b,c){return super._updateOneProp(a,"duration",b,c)}setThickness(a,b,c){return super._updateOneProp(a,
+"thickness",b,c)}setInterval(a,b,c){return super._updateOneProp(a,"interval",b,c)}setVelocity(a,b,c){return super._updateOneProp(a,"velocity",b,c)}setColor(a,b,c){return super._updateOneProp(a,"color",E(b),c)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",b,c)}}class jb extends Q{constructor(a){super(a,"CameraTour")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}play(a,b){return this.int.call({command:p.CameraTour_Play,
+ids:K(a)},b)}pause(a){return this.int.call0(p.CameraTour_Pause,a)}resume(a){return this.int.call0(p.CameraTour_Resume,a)}stop(a){return this.int.call({command:p.CameraTour_Stop},a)}setUserData(a,b,c){return super._updateOneProp(a,"userData",b,c)}setDuration(a,b,c){return super._updateOneProp(a,"duration",b,c)}setKeyFrames(a,b,c){return super._updateOneProp(a,"keyFrames",b,c)}setName(a,b,c){return super._updateOneProp(a,"name",b,c)}}class kb extends Q{constructor(a){super(a,"Cesium3DTile")}add(a,b){return super._add(a,
+b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}setTileURL(a,b,c){return super._updateOneProp(a,"tileURL",b,c)}}class lb extends Q{constructor(a){super(a,"CustomMesh","color")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,
+b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",b,c)}setIndices(a,b,c){return super._updateOneProp(a,"indices",b,c)}setColor(a,b,c){return super._updateOneProp(a,"color",b,c)}}class mb extends Q{constructor(a){super(a,"CustomObject")}add(a,b){return super._add(a,
+b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d,h){"function"==typeof c&&(h=c,c=void 0);"function"==typeof e&&(h=e,e=null);"function"==typeof d&&(h=d,d=0);1<d&&(e=2==d?[-45,0,0]:3==d?[0,0,0]:4==d?[-90,0,0]:5==d?[90,0,0]:6==d?[0,90,0]:7==d?[0,270,0]:[0,0,0]);!S(a)&&-1==b&&S(c)&&S(e)&&S(d)&&(d=1,b=0);return this.int.call({command:p.CustomObject_Focus,ids:K(a),distance:b||0,flyTime:c,rotation:e||null,follow:d||0},h)}show(a,
+b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}addByTileLayer(a,b){if(a instanceof Array)for(let c of a)this._fixTileLayerProperty(c);else this._fixTileLayerProperty(a);return this.int.call({command:p.CustomObject_AddByTileLayer,data:F(a)},b)}_fixTileLayerProperty(a){a.tileLayerId instanceof Array||(a.tileLayerId=F(a.tileLayerId));a.objectId instanceof Array||(a.objectId=F(a.objectId))}highlight(a,b){return this.int.call({command:p.CustomObject_Highlight,
+ids:K(a)},b)}unhighlight(a,b){return"undefined"==typeof a||"function"==typeof a?("function"==typeof a&&(b=a),this.int.call({command:p.CustomObject_StopHighlight},b)):this.int.call({command:p.CustomObject_Unhighlight,ids:K(a)},b)}glow(a,b){if(a instanceof Array)for(let c of a){let e;e=E(c.color);c.colors=[{color:[e[0]/2,e[1]/2,e[2]/2],value:0},{color:c.color,value:1}]}else o.colors=[{color:o.color,value:0},{color:o.color,value:1}];return this.int.call({command:p.CustomObject_StartGlow,data:F(a)},b)}stopGlow(a,
+b){return this.int.call({command:p.CustomObject_StopGlow,ids:K(a)},b)}getBPFunction(a,b){return this.int.call({command:p.Misc_QueryActorOrMaterial,idOrPaths:F(a)},b)}callBPFunction(a,b,c,e,d,h){this.callFunction(a,b,c,e,d,h)}callFunction(a,b,c,e,d,h){return this.int.call({command:p.CustomObject_CallFunction,data:F({id:a.toString(),functionName:b,paramType:c,paramValue:e,parameters:d})},h)}callBatchBPFunction(a,b){this.callFunction4CustomObjectArr(a,b)}callBatchFunction(a,b){this.callFunction4CustomObjectArr(a,
+b)}callFunction4CustomObjectArr(a,b){return this.int.call({command:p.CustomObject_CallFunction,data:F(a)},b)}setLocation(a,b,c,e){return"function"==typeof c?super._updateOneProp(a,"location",b,c):"number"==typeof c?this.int.call({command:p.CustomObject_Update,data:[{id:a,location:b,smoothTime:c}]},e):super._updateOneProp(a,"location",b,e)}setSmoothTime(a,b,c){return super._updateOneProp(a,"smoothTime",b,c)}moveTo(a,b){return this.int.call({command:p.CustomObject_Update,data:F(a)},b)}setRotation(a,
+b,c){return super._updateOneProp(a,"rotation",b,c)}setLocalRotation(a,b,c){return super._updateOneProp(a,"localRotation",b,c)}setScale(a,b,c){return super._updateOneProp(a,"scale",b,c)}setSmoothMotion(a,b,c){return super._updateOneProp(a,"smoothMotion",b,c)}setTintColor(a,b,c){a={ids:F(a),color:E(b)};return this.int.call({command:p.CustomObject_SetTintColor,data:F(a)},c)}overrideMaterial(a,b){return this.int.call({command:p.CustomObject_OverrideMaterial,data:F(a)},b)}restoreMaterial(a,b){return this.int.call({command:p.CustomObject_RestoreMaterial,
+ids:F(a)},b)}setViewportVisible(a,b,c){let e=[];e.push({viewportIndex:1,viewportVisible:!!(b&ba.V1)});e.push({viewportIndex:2,viewportVisible:!!(b&ba.V2)});e.push({viewportIndex:3,viewportVisible:!!(b&ba.V3)});e.push({viewportIndex:4,viewportVisible:!!(b&ba.V4)});return this.int.call({command:p.CustomObject_SetViewportVisible,id:a,data:e},c)}startMove(a,b,c,e){return this.int.call({command:p.CustomObject_StartMove,id:a,coordinateType:b,data:F(c)},e)}stopMove(a,b){return this.int.call({command:p.CustomObject_StopMove,
+id:a},b)}}class nb extends Q{constructor(a){super(a,"CustomTag")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}focusAll(a,b,c,e){return super._focusAll(a,b,c,e)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}setAutoHidePopupWindow(a,b,
+c){return super._updateOneProp(a,"autoHidePopupWindow",b,c)}}class ob extends Q{constructor(a){super(a,"Decal")}add(a,b){this._fixMarkerData(a);return super._add(a,b)}_fixMarkerProperty(a){S(a.rotation)&&(a.rotation=[-90,0,-90])}_fixMarkerData(a){if(a instanceof Array)for(let b of a)this._fixMarkerProperty(b);else this._fixMarkerProperty(a)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}focusAll(a,
+b,c,e){return super._focusAll(a,b,c,e)}get(a,b){return super._get(a,b)}}class pb extends Q{constructor(a){super(a,"DynamicWater")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}focusAll(a,b,c,e){return super._focusAll(a,b,c,e)}get(a,b){return super._get(a,b)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",O(b),c)}setMaterialPath(a,b,c){return super._updateOneProp(a,
+"materialPath",b,c)}setStyle(a,b,c){return super._updateOneProp(a,"style",b,c)}}class qb extends Q{constructor(a){super(a,"FloodFill","color")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}setRange(a,
+b,c,e){b instanceof Array&&c instanceof Array?0<b.length&&0<c.length?this.update({id:a,min:b,max:c},e):console.error("\u6570\u7ec4\u53c2\u6570\u4e0d\u80fd\u4e3a\u7a7a."):console.error("\u6570\u7ec4\u53c2\u6570\u683c\u5f0f\u4e0d\u6b63\u786e.")}setMin(a,b,c){return super._updateOneProp(a,"min",b,c)}setMax(a,b,c){return super._updateOneProp(a,"max",b,c)}setSeed(a,b,c){return super._updateOneProp(a,"seed",b,c)}setElevation(a,b,c){return super._updateOneProp(a,"elevation",b,c)}setColor(a,b,c){return super._updateOneProp(a,
+"color",E(b),c)}setPrecision(a,b,c){return super._updateOneProp(a,"precision",b,c)}}class rb extends Q{constructor(a){super(a,"GeoJSONLayer")}load(a,b){return super._add(a,b)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}delete(a,b){return super._delete(a,b)}}class sb extends Q{constructor(a){super(a,"HeatMap")}_checkBBox(a){if(a instanceof Array){if(6!=a.length||a[0]>a[3]||a[1]>a[4]||a[2]>a[5])return!1}else return!1;return!0}add(a,b,c,e,d,h,g,q,k,f,l){return this._checkBBox(b)?
+"undefined"==typeof d||"function"==typeof d?this.int.call({command:p.HeatMap_Add,id:a.toString(),bbox:b,range:c,data:F(e),style:-1},l):0==d?this.int.call({command:p.HeatMap_Add,id:a.toString(),bbox:b,range:c,data:F(e),style:0,textureSize:h,opacityMode:g,opacityRange:q,blur:k,colors:f},l):this.int.call({command:p.HeatMap_Add,id:a.toString(),bbox:b,range:c,data:F(e),style:-1},l):(this.int.logWithColor("red","Invalid bbox value"),!1)}update(a,b,c,e,d){a={command:p.HeatMap_Update,id:a.toString()};if(b){if(!this._checkBBox(b))return this.int.logWithColor("red",
+"Invalid bbox value"),!1;a.bbox=b}c&&(a.range=c);e&&(a.data=F(e));return this.int.call(a,d)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}addPoints(a,b,c){return this.int.call({command:p.HeatMap_AddPoints,id:a,data:F(b)},c)}removePoints(a,b,c){return this.int.call({command:p.HeatMap_RemovePoints,id:a,pointIds:F(b)},c)}setRange(a,
+b,c){return this.int.call({command:p.HeatMap_Update,id:a,range:b},c)}setBBox(a,b,c){return this._checkBBox(b)?this.int.call({command:p.HeatMap_Update,id:a,bbox:b},c):(this.int.logWithColor("red","Invalid bbox value"),!1)}}class tb extends Q{constructor(a){super(a,"HeatMap3D")}_checkBBox(a){if(a instanceof Array){if(6!=a.length||a[0]>a[3]||a[1]>a[4]||a[2]>a[5])return!1}else return!1;return!0}add(a,b){return this.int.call({command:p.HeatMap3D_Add,data:F(a)},b)}addVoxels(a,b){return this.int.call({command:p.HeatMap_AddVoxels,
+data:F(a)},b)}update(a,b){return this.int.call({command:p.HeatMap3D_Update,data:F(a)},b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}setDisplayMode(a,b,c){return this.int.call({command:p.HeatMap3D_Update,id:a,displayMode:b},c)}}class ub extends Q{constructor(a){super(a,"HighlightArea","color")}add(a,b){return super._add(a,b)}update(a,
+b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}setColor(a,b,c){return super._updateOneProp(a,"color",E(b),c)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",b,c)}setHeightRange(a,b,c){return super._updateOneProp(a,"heightRange",b,c)}setIntensity(a,b,c){return super._updateOneProp(a,
+"intensity",b,c)}setDepthTest(a,b,c){return super._updateOneProp(a,"depthTest",b,c)}}class vb extends Q{constructor(a){super(a,"ImageryLayer")}init(a,b){return this.int.call({command:p.ImageryLayer_Init,xmlPath:a.xmlUrl,layerName:a.layerName,tileMatrixName:a.tileMatrixName,ogcEPSG:a.ogcEPSG,cachePath:a.cachePath,mapMode:a.mapMode,renderMode:a.renderMode},b)}add(a,b){const c=this;return $jscomp.asyncExecutePromiseGeneratorFunction(function*(){return a instanceof Array?new Promise(e=>$jscomp.asyncExecutePromiseGeneratorFunction(function*(){let d;
+for(let h of a)if(d=yield c.addOne(h,b),0!=d.result){e(d);break}e(d)})):c.addOne(a,b)})}addOne(a,b){return this.int.call({command:p.ImageryLayer_Add,id:a.id,url:a.url,xmlPath:a.xmlPath,layerName:a.layerName,tileMatrixName:a.tileMatrixName,ogcEPSG:a.ogcEPSG},b)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}delete(a,b){return super._delete(a,b)}}class wb extends Q{constructor(a){super(a,"Light","color")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,
+b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}}class xb extends Q{constructor(a){super(a,"Marker","fontColor|fontOutlineColor|textBackgroundColor|lineColor")}add(a,b){this._fixMarkerData(a);return super._add(a,b)}_fixMarkerProperty(a){a.textColor&&(a.fontColor=a.textColor);
+a.url&&(a.popupURL=a.url);a.dispalyMode&&(a.displayMode=a.dispalyMode);S(a.displayMode)&&(a.displayMode=4);a.popupURL&&!a.popupSize&&(a.popupSize=[600,400]);0==a.showLine&&(a.lineSize=[0,0]);1!=a.showLine||null!=a.lineSize&&void 0!=a.lineSize||(a.lineSize=[2,100]);4==a.displayMode&&0<a.autoDisplayModeSwitchFirstRatio&&0<a.autoDisplayModeSwitchSecondRatio&&(a.autoDisplayModeSwitchRatio=[a.autoDisplayModeSwitchFirstRatio,a.autoDisplayModeSwitchSecondRatio])}_fixMarkerData(a){if(a instanceof Array)for(let b of a)this._fixMarkerProperty(b);
+else this._fixMarkerProperty(a)}update(a,b){this._fixMarkerData(a);return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}focusAll(a,b,c,e){return super._focusAll(a,b,c,e)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}showPopupWindow(a,b){return this.int.call({command:p.Marker_ShowPopupWindow,ids:K(a)},b)}hidePopupWindow(a,
+b){return this.int.call({command:p.Marker_HidePopupWindow,ids:K(a)},b)}showAllPopupWindow(a){return this.int.call0(p.Marker_ShowAllPopupWindow,a)}hideAllPopupWindow(a){return this.int.call0(p.Marker_HideAllPopupWindow,a)}get(a,b){return super._get(a,b)}setGroupId(a,b,c){return super._updateOneProp(a,"groupId",b,c)}setUserData(a,b,c){return super._updateOneProp(a,"userData",b,c)}setAnchors(a,b,c){return this.setScreenOffset(a,b,c)}setScreenOffset(a,b,c){return super._updateOneProp(a,"anchors",b,c)}setCoordinate(a,
+b,c){return super._updateOneProp(a,"coordinate",b,c)}setImagePath(a,b,c){return super._updateOneProp(a,"imagePath",b,c)}setImageSize(a,b,c){return super._updateOneProp(a,"imageSize",b,c)}setHoverImagePath(a,b,c){return super._updateOneProp(a,"hoverImagePath",b,c)}setURL(a,b,c){return super._updateOneProp(a,"url",b,c)}setText(a,b,c){return super._updateOneProp(a,"text",b,c)}setTextOffset(a,b,c){return super._updateOneProp(a,"textOffset",b,c)}setFontSize(a,b,c){return super._updateOneProp(a,"fontSize",
+b,c)}setFontOutlineSize(a,b,c){return super._updateOneProp(a,"fontOutlineSize",b,c)}setRange(a,b,c){return super._updateOneProp(a,"range",b,c)}setTextRange(a,b,c){return super._updateOneProp(a,"textRange",b,c)}setFontColor(a,b,c){return super._updateOneProp(a,"fontColor",b,c)}setFontOutlineColor(a,b,c){return super._updateOneProp(a,"fontOutlineColor",b,c)}setTextBackgroundColor(a,b,c){return super._updateOneProp(a,"textBackgroundColor",b,c)}setAutoHidePopupWindow(a,b,c){return super._updateOneProp(a,
+"autoHidePopupWindow",b,c)}setPopupURL(a,b,c){return super._updateOneProp(a,"popupURL",b,c)}setPopupSize(a,b,c){return super._updateOneProp(a,"popupSize",b,c)}setPopupOffset(a,b,c){return super._updateOneProp(a,"popupOffset",b,c)}setLineSize(a,b,c){return super._updateOneProp(a,"lineSize",b,c)}setLineColor(a,b,c){return super._updateOneProp(a,"lineColor",b,c)}setLineOffset(a,b,c){return super._updateOneProp(a,"lineOffset",b,c)}setPriority(a,b,c){return super._updateOneProp(a,"priority",b,c)}setOcclusionCull(a,
+b,c){return super._updateOneProp(a,"occlusionCull",b,c)}setAttachCustomObject(a,b){return this.int.call({command:p.Marker_SetupPOIAttachment,data:F(a)},b)}showByGroupId(a,b){return this.int.call({command:p.Marker_ShowByGroupId,ids:F(a)},b)}hideByGroupId(a,b){return this.int.call({command:p.Marker_HideByGroupId,ids:F(a)},b)}deleteByGroupId(a,b){return this.int.call({command:p.Marker_DeleteByGroupId,ids:F(a)},b)}}class yb extends Q{constructor(a){super(a,"Marker3D","textColor|textOutlineColor")}add(a,
+b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}showByGroupId(a,b){return this.int.call({command:p.Marker3D_ShowByGroupId,groupId:a},b)}hideByGroupId(a,b){return this.int.call({command:p.Marker3D_HideByGroupId,
+groupId:a},b)}deleteByGroupId(a,b){return this.int.call({command:p.Marker3D_DeleteByGroupId,groupId:a},b)}}class zb extends Q{constructor(a){super(a,"ODLine","color")}add(a,b){this._fixODlineData(a);return super._add(a,b)}_fixODlineProperty(a){a.intensity&&(a.brightness=a.intensity)}_fixODlineData(a){if(a instanceof Array)for(let b of a)this._fixODlineProperty(b);else this._fixODlineProperty(a)}update(a,b){this._fixODlineData(a);return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,
+b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",b,c)}setColor(a,b,c){return super._updateOneProp(a,"color",E(b),c)}setFlowRate(a,b,c){return super._updateOneProp(a,"flowRate",b,c)}setBrightness(a,b,c){return super._updateOneProp(a,"brightness",b,c)}setTiling(a,b,c){return super._updateOneProp(a,
+"tiling",b,c)}setBendDegree(a,b,c){return super._updateOneProp(a,"bendDegree",b,c)}setLineThickness(a,b,c){return super._updateOneProp(a,"lineThickness",b,c)}setflowPointSizeScale(a,b,c){return super._updateOneProp(a,"flowPointSizeScale",b,c)}setLabelSizeScale(a,b,c){return super._updateOneProp(a,"labelSizeScale",b,c)}setLineShape(a,b,c){return super._updateOneProp(a,"lineShape",b,c)}setLineStyle(a,b,c){return super._updateOneProp(a,"lineStyle",b,c)}setFlowShape(a,b,c){return super._updateOneProp(a,
+"flowShape",b,c)}setStartPointShape(a,b,c){return super._updateOneProp(a,"startPointShape",b,c)}setEndPointShape(a,b,c){return super._updateOneProp(a,"endPointShape",b,c)}setStartLabelShape(a,b,c){return super._updateOneProp(a,"startLabelShape",b,c)}setEndLabelShape(a,b,c){return super._updateOneProp(a,"endLabelShape",b,c)}}class Ab extends Q{constructor(a){super(a,"Panorama")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,
+b,c,e,d){return super._focus(a,b,c,e,d)}get(a,b){return super._get(a,b)}enter(a,b){return this.int.call({command:p.Panorama_Enter,ids:K(a)},b)}exit(a){return this.int.call({command:p.Panorama_Exit},a)}switchMode(a){return this.int.call({command:p.Panorama_Switch},a)}}class Bb extends Q{constructor(a){super(a,"Polygon","color|frameColor")}add(a,b){this._fixPolygonData(a);return super._add(a,b)}_fixPolygonProperty(a){a.intensity&&(a.brightness=a.intensity)}_fixPolygonData(a){if(a instanceof Array)for(let b of a)this._fixPolygonProperty(b);
+else this._fixPolygonProperty(a)}update(a,b){this._fixPolygonData(a);return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}glow(a,b,c){return this.int.call({command:p.Polygon_Glow,ids:K(a),duration:b},c)}highlight(a,b){return this.int.call({command:p.Polygon_Highlight,ids:K(a)},b)}stopHighlight(a,b){return this.int.call({command:p.Polygon_StopHighlight,
+ids:K(a)},b)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",O(b),c)}setColor(a,b,c){return super._updateOneProp(a,"color",E(b),c)}setDepthTest(a,b,c){return super._updateOneProp(a,"depthTest",b,c)}}class Cb extends Q{constructor(a){super(a,"Polygon3D","color")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,
+b){return super._hide(a,b)}get(a,b){return super._get(a,b)}showAll(a){return super._showAll(a)}hideAll(a){return super._hideAll(a)}highlight(a,b){return this.int.call({command:p.Polygon3D_Highlight,ids:K(a)},b)}stopHighlight(a,b){return this.int.call({command:p.Polygon3D_StopHighlight,ids:K(a)},b)}glow(a,b,c){return this.int.call({command:p.Polygon3D_Glow,ids:K(a),duration:b},c)}stopGlow(a,b){return this.int.call({command:p.Polygon3D_StopGlow,ids:K(a)},b)}setStyle(a,b,c){return super._updateOneProp(a,
+"style",b,c)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",b,c)}setColor(a,b,c){return super._updateOneProp(a,"color",E(b),c)}setHeight(a,b,c){return super._updateOneProp(a,"height",b,c)}setIntensity(a,b,c){return super._updateOneProp(a,"intensity",b,c)}setTillingX(a,b,c){return super._updateOneProp(a,"tillingX",b,c)}setTillingY(a,b,c){return super._updateOneProp(a,"tillingY",b,c)}}class Db extends Q{constructor(a){super(a,"Polyline","color")}add(a,b){this._fixPolylineData(a);
+return super._add(a,b)}_fixPolylineProperty(a){a.intensity&&(a.brightness=a.intensity)}_fixPolylineData(a){if(a instanceof Array)for(let b of a)this._fixPolylineProperty(b);else this._fixPolylineProperty(a)}update(a,b){this._fixPolylineData(a);return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}get(a,
+b){return super._get(a,b)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",b,c)}setStyle(a,b,c){return super._updateOneProp(a,"style",b,c)}setThickness(a,b,c){return super._updateOneProp(a,"thickness",b,c)}setColor(a,b,c){return super._updateOneProp(a,"color",E(b),c)}setFlowRate(a,b,c){return super._updateOneProp(a,"flowRate",b,c)}setBrightness(a,b,c){return super._updateOneProp(a,"brightness",b,c)}setShape(a,b,c){return super._updateOneProp(a,"shape",b,c)}setDepth(a,b,c){return super._updateOneProp(a,
+"depthTest",b,c)}}class Eb extends Q{constructor(a){super(a,"RadiationPoint","color")}add(a,b){this._fixRadiationPointData(a);return super._add(a,b)}_fixRadiationPointProperty(a){a.intensity&&(a.brightness=a.intensity)}_fixRadiationPointData(a){if(a instanceof Array)for(let b of a)this._fixRadiationPointProperty(b);else this._fixRadiationPointProperty(a)}update(a,b){this._fixRadiationPointData(a);return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,
+b,c,e,d){return super._focus(a,b,c,e,d)}focusAll(a,b,c,e){return super._focusAll(a,b,c,e)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}showAll(a){return super._showAll(a)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}setCoordinate(a,b,c){return super._updateOneProp(a,"coordinate",b,c)}setRadius(a,b,c){return super._updateOneProp(a,"radius",b,c)}setRippleNumber(a,b,c){return super._updateOneProp(a,"rippleNumber",b,c)}setColor(a,b,c){return super._updateOneProp(a,
+"color",E(b),c)}setBrightness(a,b,c){return super._updateOneProp(a,"brightness",b,c)}setAutoHeight(a,b,c){return super._updateOneProp(a,"autoHeight",b,c)}}class Fb extends Q{constructor(a){super(a,"ShapeFileLayer","color")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}_fix_property(a){if(a instanceof Array){let b=[];for(let c of a)S(c.cacheAllField)&&(c.cacheAllField=!1,b.push(c));a=b}else S(a.cacheAllField)&&(a.cacheAllField=!1);return a}delete(a,b){return super._delete(a,
+b)}clear(a){return super._clear(a)}get(a,b){return super._get(a,b)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}showAll(a){return super._showAll(a)}hideAll(a){return super._hideAll(a)}open(a,b){return this.int.call({command:p.ShapeFileLayer_OpenShapeFileLayer,data:F(a)},b)}highlightFeature(a,b,c){return this.int.call({command:p.ShapeFileLayer_HighlightFeature,data:F({shpId:a,featureIds:[b]})},c)}stopHighlightFeature(a,b,c){return this.int.call({command:p.ShapeFileLayer_UnHighlightFeature,
+data:F({shpId:a,featureIds:[b]})},c)}highlightFeatures(a,b){return this.int.call({command:p.ShapeFileLayer_HighlightFeature,data:F(a)},b)}stopHighlightFeatures(a,b){return this.int.call({command:p.ShapeFileLayer_UnHighlightFeature,data:F(a)},b)}focusFeature(a,b,c,e,d,h){return this.int.call({command:p.ShapeFileLayer_FocusFeature,data:F({shpId:a,featureIds:[b]}),distance:c,flyTime:e,rotation:d},h)}getFeature(a,b){return this.int.call({command:p.ShapeFileLayer_GetFeatureInfo,data:F(a)},b)}}class Gb extends Q{constructor(a){super(a,
+"Tag","textColor|textBackgroundColor|textBorderColor")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}focusAll(a,b,c,e){return super._focusAll(a,b,c,e)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}setCoordinate(a,b,c){return super._updateOneProp(a,
+"coordinate",b,c)}setImagePath(a,b,c){return super._updateOneProp(a,"imagePath",b,c)}setImageSize(a,b,c){return super._updateOneProp(a,"imageSize",b,c)}setText(a,b,c){return super._updateOneProp(a,"text",b,c)}setRange(a,b,c){return super._updateOneProp(a,"range",b,c)}setTextColor(a,b,c){return super._updateOneProp(a,"textColor",b,c)}setTextBackgroundColor(a,b,c){return super._updateOneProp(a,"textBackgroundColor",b,c)}setTextBorderColor(a,b,c){return super._updateOneProp(a,"textBorderColor",b,c)}setShowLine(a,
+b,c){return super._updateOneProp(a,"showLine",b,c)}setAutoHidePopupWindow(a,b,c){return super._updateOneProp(a,"autoHidePopupWindow",b,c)}setURL(a,b,c){return super._updateOneProp(a,"url",b,c)}showPopupWindow(a,b){return this.int.call({command:p.Tag_PopupWindow_Show,ids:K(a)},b)}hidePopupWindow(a,b){return this.int.call({command:p.Tag_PopupWindow_Hide,ids:K(a)},b)}showAllPopupWindow(a){return this.int.call0(p.Tag_PopupWindow_ShowAll,a)}hideAllPopupWindow(a){return this.int.call0(p.Tag_PopupWindow_HideAll,
+a)}}class Hb extends Q{constructor(a){super(a,"TileLayer")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}getAllFlattenInfo(a){return this.int.call({command:p.TileLayer_GetAllFlattenData},a)}getActorInfoFromDB(a,b){return this.int.call({command:p.TileLayer_GetActorInfoFromDB,data:F(a)},b)}enableXRay(a,
+b,c){return this.int.call({command:p.TileLayer_EnableXRay,ids:K(a),color:E(b)},c)}disableXRay(a,b){return this.int.call({command:p.TileLayer_DisableXRay,ids:K(a)},b)}enableClip(a,b){let c=[];a=F(a);for(let e of a)c.push({id:e,allowClip:!0});return this.int.call({command:p.TileLayer_SetAllowClip,data:c},b)}disableClip(a,b){let c=[];a=F(a);for(let e of a)c.push({id:e,allowClip:!1});return this.int.call({command:p.TileLayer_SetAllowClip,data:c},b)}setFileName(a,b,c){return super._updateOneProp(a,"fileName",
+b,c)}setLocation(a,b,c){return super._updateOneProp(a,"location",b,c)}setTranslation(a,b,c){return this.setLocation(a,b,c)}setRotation(a,b,c){return super._updateOneProp(a,"rotation",b,c)}setScale(a,b,c){return super._updateOneProp(a,"scale",b,c)}showActor(a,b,c){a=new fa(a,b);return this.int.call({command:p.TileLayer_Actor_Show,data:F(a)},c)}showActors(a,b){let c=[];if(a instanceof Array)for(let d=0;d<a.length;d++){var e=a[d];e={tileLayerId:e.id,tileLayerActorNames:K(e.objectIds)};c.push(e)}else a=
+{tileLayerId:a.id,tileLayerActorNames:K(a.objectIds)},c.push(a);return this.int.call({command:p.TileLayer_Actor_Show,data:c},b)}hideActor(a,b,c){a=new fa(a,b);return this.int.call({command:p.TileLayer_Actor_Hide,data:F(a)},c)}hideActors(a,b){let c=[];if(a instanceof Array)for(let d=0;d<a.length;d++){var e=a[d];e={tileLayerId:e.id,tileLayerActorNames:K(e.objectIds)};c.push(e)}else a={tileLayerId:a.id,tileLayerActorNames:K(a.objectIds)},c.push(a);return this.int.call({command:p.TileLayer_Actor_Hide,
+data:c},b)}focusActor(a,b,c,e,d,h){a=new fa(a,b);return this.int.call({command:p.TileLayer_Actor_Focus,data:F(a),distance:c,flyTime:e,rotation:d},h)}focusActors(a,b,c,e,d){a=new fa(a.id,a.objectIds);return this.int.call({command:p.TileLayer_Actor_Focus,data:F(a),distance:b,flyTime:c,rotation:e},d)}highlightActor(a,b,c){a=new fa(a,b);return this.int.call({command:p.TileLayer_Actor_Highlight,data:F(a)},c)}stopHighlightActor(a,b,c){let e=void 0==a;"function"==typeof a&&(c=a,e=!0);if(e)return this.stopHighlightActors(c);
+if(S(a)||S(b))console.error("\u53c2\u6570\u4e0d\u80fd\u4e3a\u7a7a!");else return this.stopHighlightActors({id:a,objectIds:[b]},c)}highlightActors(a,b){return this.int.call({command:p.TileLayer_Actor_Highlight,data:this._fix_highlight_actors_data(a)},b)}stopHighlightActors(a,b){let c=!a;"function"==typeof a&&(b=a,c=!0);return c?this.int.call0(p.TileLayer_Actor_StopHightlight,b):this.int.call({command:p.TileLayer_Actor_Unhighlight,data:this._fix_highlight_actors_data(a)},b)}_fix_highlight_actors_data(a){if(S(a))console.error("\u53c2\u6570\u4e0d\u80fd\u4e3a\u7a7a!");
+else{var b=[];if(a instanceof Array)for(let c=0;c<a.length;c++){let e=new fa(a[c].id,a[c].objectIds);b.push(e)}else a=new fa(a.id,a.objectIds),b.push(a);return b}}stopHighlightAllActors(a){return this.int.call0(p.TileLayer_Actor_StopHightlight,a)}showAllActors(a,b){return this.int.call({command:p.TileLayer_Actor_ShowAll,ids:K(a)},b)}hideAllActors(a,b){return this.int.call({command:p.TileLayer_Actor_HideAll,ids:K(a)},b)}setStyle(a,b,c,e,d,h,g,q){return this.int.call({command:p.TileLayer_SetStyle,ids:K(a),
+style:b,color:E(c),saturation:e,brightness:d,contrast:h,contrastbase:g},q)}setCollision(a,b,c,e,d,h){a=K(a);let g=[];for(let q of a)g.push({id:q,enableCollision:b,enableMouseRoma:c,enableFunctionInteract:e,enableCharacterCollision:d});return this.int.call({command:p.TileLayer_SetCollision,data:g},h)}getCollision(a,b){return this.int.call({command:p.TileLayer_GetCollision,ids:K(a)},b)}addModifiers(a,b){return this.int.call({command:p.TileLayer_Modifier_Add,data:F(a)},b)}addModifierByShapeFile(a,b){return this.int.call({command:p.TileLayer_Modifier_Add,
+data:F(a)},b)}addModifier(a,b,c,e,d){this.addModifiers([{id:a,tileLayerId:b,coordinates:c,ententBufferSize:e}])}updateModifier(a,b,c,e,d){return this.int.call({command:p.TileLayer_Modifier_Update,data:F([{id:a,tileLayerId:b,coordinates:c,ententBufferSize:e}])},d)}deleteModifier(a,b,c){return this.int.call({command:p.TileLayer_Modifier_Delete,id:a,tileLayerId:b},c)}clearModifier(a,b){return this.int.call({command:p.TileLayer_Modifier_Clear,ids:K(a)},b)}setViewportVisible(a,b,c){let e=[];e.push({viewportIndex:1,
+viewportVisible:!!(b&ba.V1)});e.push({viewportIndex:2,viewportVisible:!!(b&ba.V2)});e.push({viewportIndex:3,viewportVisible:!!(b&ba.V3)});e.push({viewportIndex:4,viewportVisible:!!(b&ba.V4)});return this.int.call({command:p.TileLayer_SetViewportVisible,id:a,data:e},c)}getObjectIDs(a,b){return this.int.call({command:p.TileLayer_GetObjectIDs,ids:K(a)},b)}getActorInfo(a,b){return this.int.call({command:p.TileLayer_Actor_GetInfo,data:F(a)},b)}addHoleByShapeFile(a,b){return this.int.call({command:p.TileLayer_CutPolygon_Add,
+data:F(a)},b)}addHole(a,b){return this.int.call({command:p.TileLayer_CutPolygon_Add,data:F(a)},b)}updateHole(a,b,c,e,d){return this.int.call({command:p.TileLayer_CutPolygon_Update,data:F({id:a,tileLayerId:b,coordinates:c,isReverseCut:e})},d)}deleteHole(a,b,c){return this.int.call({command:p.TileLayer_CutPolygon_Delete,id:a,tileLayerId:b},c)}clearHole(a,b){return this.int.call({command:p.TileLayer_CutPolygon_Clear,ids:K(a)},b)}setViewHeightRange(a,b,c,e){return this.int.call({command:p.TileLayer_SetViewHeightRange,
+data:[{id:a,minVisibleHeight:b,maxVisibleHeight:c}]},e)}setPointCloudSize(a,b,c){return this.int.call({command:p.TileLayer_SetPointSize,data:[{tileLayerId:a,size:b}]},c)}setEnableDecal(a,b){return this.int.call({command:p.TileLayer_SetDecalAttach,data:a},b)}}class Ib extends Q{constructor(a){super(a,"Vehicle")}add(a,b){this._fixVehicleData(a);return super._add(a,b)}_fixVehicleData(a){if(a instanceof Array)for(let b of a)this._fixVehicleProperty(b);else this._fixVehicleProperty(a)}_fixVehicleProperty(a){0<
+a.colorType?a.initFunctionInfos=[{functionName:"setVehicleColor",parameters:[{paramType:2,paramValue:a.colorType}]}]:a.colorType=0}update(a,b){this._fixVehicleData(a);return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d,h,g){return this.int.call({command:p.Vehicle_Focus,ids:F(a),distance:c,flyTime:e,rotation:d,distanceRotation:h,followEnabled:b},g)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,
+b)}setWayPoint(a,b){return this.int.call({command:p.Vehicle_AddWayPoints,data:F(a)},b)}moveTo(a,b){return this.int.call({command:p.Vehicle_MoveTo,data:F(a)},b)}start(a,b){if(S(a))console.error("\u53c2\u6570\u4e0d\u80fd\u4e3a\u7a7a!");else{if(0<=a.timeStamp)a.active=!0;else if(a instanceof Array)for(let c of a)c.active=!0;else{console.error("\u53c2\u6570\u975e\u6cd5!");return}return this.int.call({command:p.Vehicle_Update,data:F(a)},b)}}pause(a,b){a=this._fixIds(a,!1);if(!S(a))return this.int.call({command:p.Vehicle_Update,
+data:a},b)}resume(a,b){a=this._fixIds(a,!0);if(!S(a))return this.int.call({command:p.Vehicle_Update,data:a},b)}stop(a,b){a=this._fixIds(a,!1);if(!S(a))return this.int.call({command:p.Vehicle_Update,data:a},b)}_fixIds(a,b){let c=[];if(S(a))console.error("\u53c2\u6570\u4e0d\u80fd\u4e3a\u7a7a!");else{if(a instanceof Array){let e=!1;for(let d of a){if("string"!=typeof d){e=!0;break}c.push({id:d,active:b})}if(e){console.error("\u53c2\u6570\u975e\u6cd5!");return}return c}if("string"!==typeof a||S(a))console.error("\u53c2\u6570\u975e\u6cd5!");
+else return c.push({id:a,active:b}),c}}callBatchFunction(a,b){return this.int.call({command:p.Vehicle_CallBatchFunction,data:F(a)},b)}}class Jb extends Q{constructor(a){super(a,"VideoProjection","frustumColor")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}setVideoURL(a,
+b,c){return super._updateOneProp(a,"videoURL",b,c)}setLocation(a,b,c){return super._updateOneProp(a,"location",b,c)}setRotation(a,b,c){return super._updateOneProp(a,"rotation",b,c)}setFovy(a,b,c){return super._updateOneProp(a,"fov",b,c)}setAspectRatio(a,b,c){return super._updateOneProp(a,"aspectRatio",b,c)}setDistance(a,b,c){return super._updateOneProp(a,"distance",b,c)}setDepthCulling(a,b,c){return super._updateOneProp(a,"depthCulling",b,c)}setFrustumColor(a,b,c){return super._updateOneProp(a,"frustumColor",
+b,c)}}class Kb extends Q{constructor(a){super(a,"WaterFlowField")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}}class Lb extends Q{constructor(a){super(a,"WaterMesh","waterColor")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,
+b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}showAll(a){return super._showAll(a)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",b,c)}setIndices(a,b,c){return super._updateOneProp(a,"indices",b,c)}setNormals(a,b,c){return super._updateOneProp(a,"normals",b,c)}setWaterColor(a,b,c){return super._updateOneProp(a,
+"waterColor",b,c)}setWaterSpeed(a,b,c){return super._updateOneProp(a,"waterSpeed",b,c)}setWaterUVRepeat(a,b,c){return super._updateOneProp(a,"waterUVRepeat",b,c)}setWaterDirection(a,b,c){return super._updateOneProp(a,"waterDirection",b,c)}setWaterWaveScale(a,b,c){return super._updateOneProp(a,"waveScale",b,c)}}var za="en",ta={},Aa={VersionMismatch:["\u8b66\u544a\uff1a\n--------------------------------------------------\n    ac.min.js\u6587\u4ef6\u7248\u672c\uff08{0}\uff09\u548c\u4e91\u6e32\u67d3\u670d\u52a1\u5668\u7248\u672c\uff08{1}\uff09\u4e0d\u4e00\u81f4\uff0c\n    \u53ef\u80fd\u9020\u6210\u63a5\u53e3\u8c03\u7528\u9519\u8bef\u6216\u5d29\u6e83\uff0c\u8bf7\u786e\u8ba4!",
+"Warning:\n--------------------------------------------- -----\n The version of the ac.min.js file ({0}) and the version of the cloud rendering server ({1}) are inconsistent,\n may cause interface call errors or crashes, please confirm!"],Disconnect:["\u8fde\u63a5\u65ad\u5f00","Disconnect"],TimeConsuming:["\u8017\u65f6\uff1a","TimeConsuming: "],RequestTime:["\u8bf7\u6c42\u65f6\u95f4\uff1a","RequestTime: "],ResponseTime:["\u54cd\u5e94\u65f6\u95f4\uff1a","ResponseTime: "],MessageLength:["\u6d88\u606f\u957f\u5ea6\uff1a",
+"MessageLength: "],DomLoading:["DOM\u5c1a\u5728\u52a0\u8f7d\u4e2d\uff0c\u6b64\u65f6\u4e0d\u80fd\u521d\u59cb\u5316DigitalTwinPlayer!","DOM is still loading, cannot initialize DigitalTwinPlayer at this time!"],CannotChangeProject:["\u5f53\u524d\u5b9e\u4f8b\u5df2\u8bbe\u7f6e\u9501\u5b9a\u5de5\u7a0b\uff0c\u65e0\u6cd5\u901a\u8fc7API\u63a5\u53e3\u5207\u6362\u5de5\u7a0b","The current instance has been set to lock the project, and the project cannot be switched through the API interface"],InstanceNotExist:["\u5bf9\u5e94\u7684\u5b9e\u4f8b\u4e0d\u5b58\u5728\uff0c\u8bf7\u786e\u8ba4",
+"The corresponding instance does not exist, please confirm"],ProjectNotExist:["\u5bf9\u5e94\u7684\u5de5\u7a0b\u4e0d\u5b58\u5728\uff0c\u8bf7\u786e\u8ba4","The corresponding project does not exist, please confirm"],JSQueue:["JS\u961f\u5217\uff1a","JS queue:"],BackQueue:["\u540e\u53f0\u961f\u5217\uff1a","Background queue:"],Execting:["\u6b63\u5728\u6267\u884c\uff1a","Executing: "],PleaseWait:["\uff0c\u8bf7\u7a0d\u5019...",", Please wait..."],DisconnectForIdle:["\u957f\u65f6\u95f4\u672a\u4f7f\u7528\u8fde\u63a5\u5df2\u65ad\u5f00",
+"Disconnected after a long time of inactivity"],NodeInfo:["\u6e32\u67d3\u8282\u70b9\u4fe1\u606f\uff1a","Render node information:"],Host:["\u4e3b\u673a\u540d\u79f0\uff1a","Host: "],HostAddress:["\u4e3b\u673a\u5730\u5740\uff1a","Host address:"],Project:["\u5de5\u7a0b\uff1a","Project: "],ProjectId:["\u5de5\u7a0bID\uff1a","ProjectId: "],IID:["\u5b9e\u4f8bID\uff1a","IID: "],Adaptive:["\u81ea\u9002\u5e94\uff1a","Adaptive: "],LimitMaxRes:["\u9650\u5236\u6700\u5927\u5206\u8fa8\u7387\uff1a","Limit max resolution: "],
+Resolution:["\u5206\u8fa8\u7387\uff1a","Resolution: "],Destroyed:["destroyed - \u7528\u6237\u9500\u6bc1","destroyed - user destroyed"],Reconnect5s:["\u5c06\u57285\u79d2\u540e\u91cd\u65b0\u8fde\u63a5...","Will reconnect in 5 seconds..."],RestartAndRetry:["\u5f53\u524d\u5b9e\u4f8b\u6b63\u5fd9\u65e0\u6cd5\u8fde\u63a5\uff01\n\u662f\u5426\u7acb\u5373\u91cd\u542f\u8be5\u5b9e\u4f8b\u4ee5\u8fdb\u884c\u8fde\u63a5\uff1f","The current instance is busy and cannot be connected! \nDo you want to restart this instance now to connect?"],
+EnterFullscreen:["\u8fdb\u5165\u5168\u5c4f","enter fullscreen"],ExitFullscreen:["\u9000\u51fa\u5168\u5c4f","exit fullscreen"],TriggerSysTouch:["\u89e6\u53d1\u4e86\u7cfb\u7edf\u89e6\u6478\u64cd\u4f5c\uff0c\u5c06\u624b\u52a8\u53d1\u9001TouchEnd\u4e8b\u4ef6","The system touch operation is triggered, and the TouchEnd event will be sent manually"],RestartInstNow:["\u7acb\u5373\u91cd\u542f\u5b9e\u4f8b","Reboot instance"],LeftClickTip:["\u9f20\u6807\u5de6\u952e\u70b9\u51fb\uff1a\u56de\u5230\u4fdd\u5b58\u7684\u4f4d\u7f6e\u6216\u8005\u5de5\u7a0b\u521d\u59cb\u4f4d\u7f6e",
+"Click with the left mouse button: return to the saved position or the initial position of the project"],RightClickTip:["\u9f20\u6807\u53f3\u952e\u70b9\u51fb\uff1a\u4fdd\u5b58\u5f53\u524d\u7684\u76f8\u673a\u4f4d\u7f6e","Right mouse click: save the current camera position"],MiddleClickTip:["\u9f20\u6807\u4e2d\u952e\u70b9\u51fb\uff1a\u5c06\u5f53\u524d\u4f4d\u7f6e\u8bbe\u7f6e\u4e3a\u5de5\u7a0b\u521d\u59cb\u4f4d\u7f6e\u5e76\u8df3\u8f6c","Middle mouse click: set the current position as the initial position of the project and jump"],
+Close:["\u5173\u95ed","Close"],Connections:["\u8fde\u63a5\u4e2a\u6570","Connections"],ConnInfo:["\u8fde\u63a5\u4fe1\u606f\uff1a","ConnInfo:"],Duration:["\u8fd0\u884c\u65f6\u957f\uff1a","Duration:"],Received:["\u63a5\u6536\u6570\u636e\uff1a","Received:"],ReceivedFrames:["\u63a5\u6536\u5e27\u6570\uff1a","Frames:"],Dropped:["\u4e22\u5305\u4e22\u5e27\uff1a","Dropped:"],DroppedTip:["\u4e22\u5305\u6570\u91cf / \u4e22\u5e27\u6570\u91cf","Number of dropped packets / Number of dropped frames"],DecodeTimeTip:["\u6d4f\u89c8\u5668\u89e3\u7801\u65f6\u95f4",
+"browser decoding time"],DecodingTime:["\u89e3\u7801\u65f6\u95f4\uff1a","DecTime:"],DecodeFrames:["\u89e3\u7801\u5e27\u6570\uff1a","DecFrame:"],DecodeFramesTip:["\u5df2\u89e3\u7801\u7684\u5e27\u6570 / \u5df2\u89e3\u7801\u7684\u5173\u952e\u5e27\u6570\u91cf","Decoded Frames / Decoded Keyframes"],Bitrate:["\u7801\u7387\uff1a","Bitrate:"],FPS:["\u5e27\u7387\uff1a","FPS:"],QP:["QP\uff1a","QP:"],FPSTip:["\u6e32\u67d3\u5e27\u7387/\u89c6\u9891\u5e27\u7387","Rendering frame rate/video frame rate"],MaxQP:["QP\u4e0a\u9650\uff1a",
+"MaxQP:"],MaxQPTip:["\u503c\u8d8a\u5927\uff0c\u753b\u8d28\u8d8a\u7c97\u7cd9\uff0c\u9700\u8981\u7684\u5e26\u5bbd\u8d8a\u5c0f","The larger the value, the rougher the picture quality and the smaller the required bandwidth"],MaxBitrate:["\u7801\u7387\u4e0a\u9650\uff1a","MaxBitrate:"]};String.prototype.format=function(){if(0==arguments.length)return this;for(var a=this,b=0;b<arguments.length;b++)a=a.replace(new RegExp("\\{"+b+"\\}","g"),arguments[b]);return a};class H{}H.onLanguageChangedCallbacks=[];
+H.setLanguage=a=>{za="zh"===a?"zh":"en";ta={};a="zh"==za;for(let b in Aa){let c=Aa[b];ta[b]=a?c[0]:c[1]}for(let b of H.onLanguageChangedCallbacks)"function"==typeof b&&b()};H.getString=a=>ta[a];class Mb{constructor(a){this.int=a;this._useOldDataFormat=!1}useOldDataFormat(a){this._useOldDataFormat=a||!0}get(a){return this.int.call0(p.Camera_GetCamera,a)}_setByArray(a,b,c){return this.set(a[0],a[1],a[2],a[3],a[4],b,c)}_setByObject(a,b,c){return this.set(a.x,a.y,a.z,a.pitch,a.yaw,b,c)}set(a,b,c,e,d,
+h,g){if(a instanceof Array&&5<=a.length)return this._setByArray(a,b,c);if("object"==typeof a&&a.hasOwnProperty("x"))return this._setByObject(a,b,c);"function"==typeof h&&(g=h,h=void 0);if(this._useOldDataFormat){let q=e;e=d;d=q}return this.int.call({command:p.Camera_Set,coordinate:[a,b,c],pitch:e||0,yaw:d||0,flyTime:h},g)}lookAt(a,b,c,e,d,h,g,q){"function"==typeof g&&(q=g,g=void 0);if(this._useOldDataFormat){let k=d;d=h;h=k}return this.int.call({command:p.Camera_Set,coordinate:[a,b,c],distance:e,
+pitch:d||0,yaw:h||0,flyTime:g},q)}lookAtBBox(a,b,c,e,d){"function"==typeof e&&(d=e,e=void 0);if(this._useOldDataFormat){let h=b;b=c;c=h}return this.int.call({command:p.Camera_LookAtBBox,bbox:a,pitch:b||0,yaw:c||0,flyTime:e},d)}playAnimation(a,b){return this.int.call({command:p.Camera_PlayAnimation,id:a},b)}stopAnimation(a){return this.int.call0(p.Camera_StopAnimation,a)}pauseAnimation(a){return this.int.call0(p.Camera_PauseAnimation,a)}resumeAnimation(a){return this.int.call0(p.Camera_ResumeAnimation,
+a)}getAnimationList(a){return this.int.call0(p.Camera_GetAnimationList,a)}getAnimationImage(a,b){return this.int.call({command:p.Camera_GetAnimationImage,name:a},b)}moveForward(a){return this.int.call({command:p.Camera_Move,moveForward:!0},a)}moveBackward(a){return this.int.call({command:p.Camera_Move,moveBackward:!0},a)}moveLeft(a){return this.int.call({command:p.Camera_Move,moveLeft:!0},a)}moveRight(a){return this.int.call({command:p.Camera_Move,moveRight:!0},a)}moveUp(a){return this.int.call({command:p.Camera_Move,
+moveUp:!0},a)}moveDown(a){return this.int.call({command:p.Camera_Move,moveDown:!0},a)}turnLeft(a){return this.int.call({command:p.Camera_Move,turnLeft:!0},a)}turnRight(a){return this.int.call({command:p.Camera_Move,turnRight:!0},a)}turnUp(a){return this.int.call({command:p.Camera_Move,turnUp:!0},a)}turnDown(a){return this.int.call({command:p.Camera_Move,turnDown:!0},a)}stop(a){return this.int.call({command:p.Camera_Move,stop:!0},a)}getEulerAngle(a,b){const c=360/(2*Math.PI);let e=b[0]-a[0],d=b[1]-
+a[1];return[Math.atan2(b[2]-a[2],Math.sqrt(e*e+d*d))*c,Math.atan2(e,d)*c-90,0]}lockByBBox(a,b){return this.int.call({command:p.Camera_LockBBox,bbox:a},b)}unlock(a){return this.int.call({command:p.Camera_UnLockBBox},a)}flyAround(a,b,c,e,d){return this.int.call({command:p.Camera_FlyAround,coordinate:a,rotation:b||[0,90,0],distance:c||1E3,time:e||10},d)}enterWorld(a){return this.int.call({command:p.Camera_ExitWorldAnimation},a)}exitWorld(a){return this.int.call({command:p.Camera_EnterWorldAnimation},
+a)}}class Nb{constructor(a){this.int=a}screen2World(a,b,c){return this.int.call({command:p.Coord_Screen2World,screenPosition:[a,b]},c)}world2Screen(a,b,c,e){return this.int.call({command:p.Coord_World2Screen,worldlocation:[a,b,c]},e)}gcs2pcs(a,b,c){"function"==typeof b&&(c=b);S(b)&&(b=1);if(1==b)return this.int.call({command:p.Coord_GCS2PCS,coordinates:T(a)},c);2==b?this.transform(T(a),2,0,c):3==b?this.transform(T(a),3,0,c):console.error("\u672a\u77e5\u5750\u6807\u7cfb\u7c7b\u578b")}pcs2gcs(a,b,c){"function"==
+typeof b&&(c=b);S(b)&&(b=1);if(1==b)return this.int.call({command:p.Coord_PCS2GCS,coordinates:T(a)},c);2==b?this.transform(T(a),0,2,c):3==b?this.transform(T(a),0,3,c):console.error("\u672a\u77e5\u5750\u6807\u7cfb\u7c7b\u578b")}transform(a,b,c,e){return this.int.call({command:p.Coord_Transform,coordinates:T(a),src:b,dest:c},e)}}class Ob{constructor(a){this.int=a}start(a){return this.int.call0(p.EditHelper_Start,a)}cancel(a){return this.int.call0(p.EditHelper_Quit,a)}finish(a,b){return this.int.call({command:p.EditHelper_Finish,
+withOffset:a||!0},b)}setParam(a,b,c,e){return this.int.call({command:p.EditHelper_SetParam,lineType:a,buildType:b,color:E(c)},e)}}class Pb{constructor(a){this.int=a}setVisibility(a,b){return this.int.call({command:p.InfoTree_SetVisibility,layers:F(a)},b)}show(a,b){return this.int.call({command:p.InfoTree_Show,ids:K(a)},b)}hide(a,b){return this.int.call({command:p.InfoTree_Hide,ids:K(a)},b)}enableXRay(a,b,c){return this.int.call({command:p.InfoTree_EnableXRay,ids:F(a),color:E(b)},c)}disableXRay(a,
+b){return this.int.call({command:p.InfoTree_DisableXRay,ids:F(a)},b)}showByGroupId(a,b){return this.int.call({command:p.InfoTree_ShowByGroupId,ids:K(a)},b)}hideByGroupId(a,b){return this.int.call({command:p.InfoTree_HideByGroupId,ids:K(a)},b)}highlightByGroupId(a,b){return this.int.call({command:p.InfoTree_HighlightByGroupId,ids:K(a)},b)}deleteByGroupId(a,b){return this.int.call({command:p.InfoTree_DeleteByGroupId,ids:K(a)},b)}get(a){return this.int.call0(p.InfoTree_Get,a)}focus(a,b){return this.int.call({command:p.InfoTree_Focus,
+ids:K(a)},b)}}class Qb{constructor(a){this.int=a;this.apiVersion="5.4";this.apiVersionServer=""}isApiVersionMatched(){return"5.4"==this.apiVersionServer}addImageButtons(a,b){return this.int.call({command:p.Misc_AddImageButton,data:F(a)},b)}deleteImageButtons(a,b){return this.int.call({command:p.Misc_DeleteImageButton,ids:K(a)},b)}addAnimatedImageButtons(a,b){return this.int.call({command:p.Misc_AddAnimatedImageButton,data:F(a)},b)}setApiVersionReceived(a){this.int.onApiVersionReceived=a}playVideo(a,
+b,c,e,d,h,g){return this.int.call({command:p.Misc_PlayVideo,data:[{id:a.toString(),position:[b,c],size:[e,d],url:h}]},g)}stopPlayVideo(a,b){return this.int.call({command:p.Misc_StopPlayVideo,ids:K(a)},b)}playMovie(a,b,c){"function"==typeof b&&(c=b,b=!1);return this.int.call({command:p.Misc_PlayMovie,loop:b,url:a},c)}stopMovie(a){return this.int.call({command:p.Misc_StopMovie},a)}setWindowResolution(a,b,c){return this.int.call({command:p.Misc_SetWindowResolution,cx:a,cy:b,mode:0},c)}callBPFunction(a,
+b){return this.int.call({command:p.Misc_CallBPFunction,data:F(a)},b)}enterReportMode(a){return this.int.call0(p.Misc_EnterReportMode)}exitReportMode(a){return this.int.call0(p.Misc_ExitReportMode,a)}showAllFoliages(a){return this.int.call0(p.Misc_ShowAllFoliages,a)}hideAllFoliages(a){return this.int.call0(p.Misc_HideAllFoliages,a)}startProcess(a,b,c,e){"function"==typeof c&&(e=c,c=!0);return this.int.call({command:p.Misc_StartProcess,appName:a,commandLine:b,visible:c},e)}enterMultiViewportMode(a,
+b,c,e){if(null==b||void 0==b)b="#DEA309";if(null==c||void 0==c)c=2;return this.int.call({command:p.Misc_EnterMultiViewport,type:a,lineColor:E(b),lineThickness:c},e)}exitMultiViewportMode(a){return this.int.call({command:p.Misc_ExitMultiViewport},a)}setActiveViewport(a,b){return this.int.call({command:p.Misc_SetActivateMultiViewport,viewIndex:F(a)},b)}getActiveViewport(a){return this.int.call({command:p.Misc_GetActivateMultiViewport},a)}setMultiviewportInteractSync(a,b){this.setCameraFollow4Viewport(a,
+b)}setCameraFollow4Viewport(a,b){return this.int.call({command:p.Misc_UpdateMultiViewport,moverTogether:a},b)}downloadPakFiles(a,b){return this.int.call({command:p.Misc_downloadPakFiles,ids:F(a)},b)}getConvexPolygon(a,b){return this.int.call({command:p.Misc_ConvexHull2D,data:F(a)},b)}getMaterial(a,b){return this.int.call({command:p.Misc_QueryActorOrMaterial,idOrPaths:F(a)},b)}getBPFunction(a,b){return this.int.call({command:p.Misc_QueryActorOrMaterial,idOrPaths:F(a)},b)}startPolygonClip(a,b,c){return this.int.tools.startPolygonClip(a,
+b,c)}stopClip(a){return this.int.tools.stopClip(a)}playAnimation(a,b){return this.int.camera.playAnimation(a,b)}stopAnimation(a){return this.int.camera.stopAnimation(a)}setDateTime(a,b,c,e,d,h,g){return this.int.weather.setDateTime(a,b,c,e,d,h,g)}setQueryToolState(a,b){return this.int.call({"c.ommand":p.Settings_SetMousePickMask,mouseClick:a},b)}setCampassVisible(a,b){return this.int.settings.setCampassVisible(a,b)}setMainUIVisibility(a,b){return this.int.settings.setMainUIVisibility(a,b)}setMousePickMask(a,
+b){return this.int.settings.setMousePickMask(a,b)}}class Rb{constructor(a){this.int=a}setMapMode(a,b,c){b=b||{};return this.int.call({command:p.Settings_SetMapMode,mode:a,serviceType:b.serviceType||0,coordType:b.coordType||0,mapPoint:b.mapPoint||[0,0],longitude:b.longitude||0,latitude:b.latitude||0,cache:b.cache||":memory:",style:b.style||"mapbox://styles/mapbox/streets-v10",groundHeight:b.groundHeight||0,renderMode:b.renderMode||0,decalMode:b.decalMode||1,serverURL:b.serverURL,coordOrder:b.coordOrder,
+maxLevel:b.maxLevel},c)}getMapMode(a){return this.int.call0(p.Settings_GetMapMode,a)}setWMTSLayerVisible(a,b){this.setwmtsLayerVisible(a,b)}setwmtsLayerVisible(a,b){return this.int.call({command:p.Settings_SetWMTSLayerVisible,data:F(a)},b)}setWMTSLayerOpacity(a,b){return this.int.call({command:p.Settings_SetWMTSLayerOpacity,data:F(a)},b)}setMapURL(a,b){return this.int.call({command:p.Settings_SetMapURL,url:a},b)}highlightColor(a,b){return this.setHighlightColor(a,b)}setHighlightColor(a,b){return this.int.call({command:p.Settings_SetHighlightColor,
+color:E(a)},b)}setFovX(a,b){return this.int.call({command:p.Settings_SetFovX,value:a},b)}setOceanColor(a,b){return this.int.call({command:p.Settings_SetOceanColor,color:E(a)},b)}setEnableInteract(a,b){return this.int.call({command:p.Settings_SetEnableInteract,enableInteract:a},b)}setInteractiveMode(a,b){return this.int.call({command:p.Settings_SetInteractiveMode,mode:a},b)}getInteractiveMode(a){return this.int.call({command:p.Settings_GetInteractiveMode},a)}setCampassVisible(a,b){return this.int.call({command:p.Settings_SetCampassVisible,
+visible:a},b)}setCampassPosition(a,b,c){return this.int.call({command:p.Settings_SetCampassPosition,position:[a,b]},c)}restoreCampassPosition(a){this.setCampassPosition(-1,-1)}setMainUIVisibility(a,b){return this.int.call({command:p.Settings_SetMainUIVisibility,visible:a},b)}setMousePickMask(a,b){let c=!1,e=!1,d=!1;a&qa.MouseClick&&(c=!0);a&qa.MouseMove&&(e=!0);a&qa.MouseHover&&(d=!0);return this.int.call({command:p.Settings_SetMousePickMask,mouseClick:c,mouseMove:e,mouseHover:d},b)}setTerrainAlpha(a,
+b){return this.int.call({command:p.Settings_SetTerrainAlpha,alpha:a},b)}setEnableCameraMovingEvent(a,b,c){return this.int.call({command:p.Settings_EnableCameraMovingEvent,bEnable:a,monitorThreshold:b},c)}setLabelLayer(a,b){return this.int.call({command:p.VTPKService_Set,vtpk:a},b)}getLabelLayer(a){return this.int.call({command:p.VTPKService_Get},a)}removeLabelLayer(a){return this.int.call({command:p.VTPKService_Set,vtpk:""},a)}setRenderedCursorVisible(a,b){this.setCursorAutoSync(a,b)}setCursorAutoSync(a,
+b){return this.int.call({command:p.Settings_CursorAutoSync,useSoftwareCursor:a},b)}}class Sb{constructor(a){this.int=a}setReportMode(a,b,c,e){return this.int.call({command:p.Settings_SetReport,alignment:a,playMode:b,moveInOtherView:c},e)}getReportMode(a){return this.int.call({command:p.Settings_GetReport},a)}setControlMode(a,b,c,e,d){return this.int.call({command:p.Settings_SetControl,speed:a,yawSpeed:b,rotateSelf:c,useFemale:e},d)}getControlMode(a){return this.int.call({command:p.Settings_GetControl},
+a)}setPostProcessMode(a,b){let c=1E3,e=1E3;0<=a.terrainGlobalAlpha&&1>=a.terrainGlobalAlpha&&(c=1E3*a.terrainGlobalAlpha);0<=a.osgbGlobalAlpha&&1>=a.osgbGlobalAlpha&&(e=1E3*a.osgbGlobalAlpha);return this.int.call({command:p.Settings_SetPostProcess,contrast:a.contrast,saturation:a.saturation,lensFlareIntensity:a.lensFlareIntensity,ambientIntensity:a.ambientIntensity,bloomIntensity:a.bloomIntensity,lutMode:a.lutMode,lutIntensity:a.lutIntensity,darkCorner:a.darkCorner,screenPercentage:a.screenPercentage,
+terrainGlobalAlpha:c,terrainGlobalLitStatus:a.terrainGlobalLitStatus,osgbGlobalLitStatus:a.osgbGlobalLitStatus,osgbGlobalAlpha:e,antiAliasing:a.antiAliasing,tonemapper:a.tonemapper,postProcessEffects:a.postProcessEffects,dofMode:a.dofMode,wireThickness:a.wireThickness,receiveDecalMode:a.receiveDecalMode},b)}getPostProcessMode(a){return this.int.call({command:p.Settings_GetPostProcess},a)}setCameraMode(a,b,c,e,d){e&&"function"==typeof e&&(d=e);return this.int.call({command:p.Settings_SetCamera,nearClipPlane:a,
+fovH:b,minCamHeight:c,maxCamHeight:e},d)}getCameraMode(a){return this.int.call({command:p.Settings_GetCamera},a)}setMapMode(a,b,c){b=b||{};return this.int.call({command:p.Settings_SetMapMode,mode:a,serviceType:b.serviceType||0,coordType:b.coordType||0,mapPoint:b.mapPoint||[0,0],longitude:b.longitude||0,latitude:b.latitude||0,cache:b.cache||":memory:",style:b.style||"mapbox://styles/mapbox/streets-v10",groundHeight:b.groundHeight||0,renderMode:b.renderMode||0,decalMode:b.decalMode||1,serverURL:b.serverURL,
+coordOrder:b.coordOrder,maxLevel:b.maxLevel},c)}getMapMode(a){return this.int.call0(p.Settings_GetMapMode,a)}}class Tb{constructor(a){this.int=a}startPolygonClip(a,b,c){return this.int.call({command:p.Tools_StartPolygonClip,data:F({id:"0",coordinates:O(a),toggleImageCut:b})},c)}startPlaneClip(a,b,c,e,d){return this.int.call({command:p.Tools_StartPlaneClip,location:a,rotation:b,isShowPlane:c,isEdit:e},d)}startVolumeClip(a,b,c,e,d,h){return this.int.call({command:p.Tools_StartVolumeClip,bbox:a,rotation:d,
+value:b,isShowPlane:c,isEdit:e},h)}updateVolumeClip(a,b,c,e,d,h){return this.int.call({command:p.Tools_UpdateVolumeClip,bbox:a,rotation:d,value:b,isShowPlane:c,isEdit:e},h)}stopClip(a){return this.stopPolygonClip(a)}stopPolygonClip(a){return this.int.call0(p.Tools_StopClip,a)}stopPlaneClip(a){return this.int.call({command:p.Tools_StopPlaneClip},a)}stopVolumeClip(a){return this.int.call({command:p.Tools_StopVolumeClip},a)}setMeasurement(a,b,c){b=b||{};return this.int.call({command:p.Tools_SetMeasurement,
+type:a,pointSize:b.pointSize,textSize:b.textSize,textColor:E(b.textColor),pointColor:E(b.pointColor),lineColor:E(b.lineColor),areaColor:E(b.areaColor),showCoordinateText:b.showCoordinateText},c)}startMeasurement(a){return this.int.call0(p.Tools_StartMeasurement,a)}stopMeasurement(a){return this.int.call0(p.Tools_StopMeasurement,a)}lineIntersect(a,b,c){return this.int.call({command:p.Tools_LineIntersect,data:[{start:a,end:b}],highPrecision:!1,returnDetails:!0},c)}linesIntersect(a,b,c,e){return this.int.call({command:p.Tools_LineIntersect,
+data:F(a),highPrecision:b,returnDetails:c},e)}startGeometryEdit(a,b,c){return this.int.call({command:p.Tools_StartGeometryEdit,id:a,type:b},c)}stopGeometryEdit(a){return this.int.call0(p.Tools_StopGeometryEdit,a)}startSkylineAnalysis(a,b){a=a||{};a.outlineColor&&(a.outlineColor=E(a.outlineColor));a.sceneColor&&(a.sceneColor=E(a.sceneColor));a.skylineColor&&(a.skylineColor=E(a.skylineColor));a.backgroundColor&&(a.backgroundColor=E(a.backgroundColor));if(a.tileLayers){a.tileLayers=F(a.tileLayers);for(let c of a.tileLayers)c.hasOwnProperty("color")&&
+(c.color=E(c.color))}a.command=p.Tools_StartSkylineAnalysis;return this.int.call(a,b)}stopSkylineAnalysis(a){return this.int.call0(p.Tools_StopSkylineAnalysis,a)}exportSkyline(a,b,c,e){c=c||{};c.skylineColor&&(c.skylineColor=E(c.skylineColor));c.backgroundColor&&(c.backgroundColor=E(c.backgroundColor));if(c.tileLayers){c.tileLayers=F(c.tileLayers);for(let d of c.tileLayer)d.hasOwnProperty("color")&&(d.color=E(d.color))}return this.int.call({command:p.Tools_ExportSkyline,path:a,size:b,skylineColor:c.skylineColor,
+backgroundColor:c.backgroundColor},e)}startViewshedAnalysis(a,b){a=a||{};a.visibleColor&&(a.visibleColor=E(a.visibleColor));a.invisibleColor&&(a.invisibleColor=E(a.invisibleColor));a.command=p.Tools_StartViewshedAnalysis;return this.int.call(a,b)}stopViewshedAnalysis(a){return this.int.call0(p.Tools_StopViewshedAnalysis,a)}startVisiblityAnalysis(a,b){a=a||{};a.visibleColor&&(a.visibleColor=E(a.visibleColor));a.invisibleColor&&(a.invisibleColor=E(a.invisibleColor));a.command=p.Tools_StartVisiblityAnalysis;
+return this.int.call(a,b)}stopVisiblityAnalysis(a){return this.int.call0(p.Tools_StopVisiblityAnalysis,a)}startViewDomeAnalysis(a,b){a=a||{};a.visibleColor&&(a.visibleColor=E(a.visibleColor));a.invisibleColor&&(a.invisibleColor=E(a.invisibleColor));a.command=p.Tools_StartViewDomeAnalysis;return this.int.call(a,b)}stopViewDomeAnalysis(a){return this.int.call0(p.Tools_StopViewDomeAnalysis,a)}startCutFillAnalysis(a,b){a=a||{};a.cutLineColor&&(a.cutLineColor=E(a.cutLineColor));a.fillLineColor&&(a.fillLineColor=
+E(a.fillLineColor));a.cutPointColor&&(a.cutPointColor=E(a.cutPointColor));a.fillPointColor&&(a.fillPointColor=E(a.fillPointColor));a.gridColor&&(a.gridColor=E(a.gridColor));a.command=p.Tools_StartCutFillAnalysis;return this.int.call(a,b)}stopCutFillAnalysis(a){return this.int.call0(p.Tools_StopCutFillAnalysis,a)}startSunshineAnalysis(a,b){var c=/^(0?[0-9]|1[0-9]|[2][0-3]):(0?[0-9]|[1-5][0-9])$/;if(null==a||void 0==a)console.error("\u53c2\u6570\u4e0d\u80fd\u4e3a\u7a7a");else{let e=a.startTime,d=a.endTime;
+if(null==e||""==e||null==d||""==d)console.error("\u65f6\u95f4\u53c2\u6570\u683c\u5f0f\u4e0d\u6b63\u786e");else if(e.match(c)&&d.match(c))if(e.split(":"))if(a.startHour=parseInt(e.split(":")[0]),a.startMinute=parseInt(e.split(":")[1]),d.split(":"))if(a.endHour=parseInt(d.split(":")[0]),a.endMinute=parseInt(d.split(":")[1]),a.startHour>a.endHour)console.error("\u5f00\u59cb\u65f6\u95f4\u4e0d\u80fd\u5927\u4e8e\u7ed3\u675f\u65f6\u95f4");else{if(a.startHour==a.endHour){if(a.startMinute==a.endMinute){console.error("\u5f00\u59cb\u65f6\u95f4\u4e0d\u80fd\u7b49\u4e8e\u7ed3\u675f\u65f6\u95f4");
+return}if(a.startMinute>a.endMinute){console.error("\u5f00\u59cb\u65f6\u95f4\u4e0d\u80fd\u5927\u4e8e\u7ed3\u675f\u65f6\u95f4");return}}S(a.groundElevation)||(c=a.groundElevation,!isNaN(parseFloat(c))&&isFinite(c)&&(a.undersideHeight=a.groundElevation,delete a.groundElevation));a.command=p.Tools_StartSunshineAnalysis;return this.int.call(a,b)}else console.error("\u53c2\u6570endTime\u65f6\u95f4\u683c\u5f0f\u4e0d\u6b63\u786e");else console.error("\u53c2\u6570startTime\u65f6\u95f4\u683c\u5f0f\u4e0d\u6b63\u786e");
+else console.error("\u65f6\u95f4\u53c2\u6570\u683c\u5f0f\u4e0d\u6b63\u786e")}}stopSunshineAnalysis(a){return this.int.call0(p.Tools_StopSunshineAnalysis,a)}startTerrainSlopeAnalysis(a,b){a.command=p.Tools_StartTerrainSlopeAnalysis;return this.int.call(a,b)}stopTerrainSlopeAnalysis(a){return this.int.call0(p.Tools_StopTerrainSlopeAnalysis,a)}startContourLineAnalysis(a,b){a.command=p.Tools_StartContourLineAnalysis;return this.int.call(a,b)}stopContourLineAnalysis(a){return this.int.call0(p.Tools_StopContourLineAnalysis,
+a)}startFloodFill(a,b){a=a||{};a.color&&(a.color=E(a.color));a.command=p.Tools_StartFloodFill;return this.int.call(a,b)}stopFloodFill(a){return this.int.call0(p.Tools_StopFloodFill,a)}replaceTextureByVideo(a,b,c){return this.int.call({command:p.Tools_ReplaceTexture,texturePackage:a,newTexture:b,type:1},c)}replaceTextureByImage(a,b,c){return this.int.call({command:p.Tools_ReplaceTexture,texturePackage:a,newTexture:b,type:2},c)}replaceTextureByUrl(a,b,c){return this.int.call({command:p.Tools_ReplaceTexture,
+texturePackage:a,newTexture:b,type:3},c)}restoreTexture(a,b){return this.int.call({command:p.Tools_RestoreTexture,ids:F(a)},b)}showPanel(a,b,c){this.showAnalysisPanel(a,b,c)}hidePanel(a){this.hideAnalysisPanel(a)}showAnalysisPanel(a,b,c){return this.int.call({command:p.Tools_AnalysisPopupAttributes,type:a,position:b},c)}hideAnalysisPanel(a){return this.int.call({command:p.Tools_AnalysisCloseAttributes},a)}}class Ub{constructor(a){this.int=a}getParams(a){return this.int.call0(p.Weather_GetParams,a)}_setParam(a,
+b){return this.int.call({command:p.Weather_SetParams,data:a},b)}setDateTime(a,b,c,e,d,h,g){return this.int.call({command:p.Weather_SetDate,year:a,month:b,day:c,hour:e,minute:d,daynightLoop:h},g)}getDateTime(a){return this.int.call0(p.Weather_GetDate,a)}simulateTime(a,b,c,e){let d=0,h=0,g=0,q=0;a instanceof Array?(0<a.length&&(d=a[0]),1<a.length&&(h=a[1])):d=parseInt(a);b instanceof Array?(0<b.length&&(g=b[0]),1<b.length&&(q=b[1])):g=parseInt(b);return this.int.call({command:p.Weather_SimulateTime,
+startHour:d,startMinute:h,endHour:g,endMinute:q,duration:c},e)}setCloudThickness(a,b){return this.int.call({command:p.Weather_SetParams,cloudThickness:a},b)}setCloudDensity(a,b){return this.int.call({command:p.Weather_SetParams,cloudDensity:a},b)}setCloudHeight(a,b){return this.int.call({command:p.Weather_SetParams,cloudHeight:a},b)}setRainParam(a,b,c,e){return this.int.call({command:p.Weather_SetParams,rainsnow:0,rainsnowStrength:a,rainsnowSpeed:b,raindropSize:c},e)}setSnowParam(a,b,c,e){return this.int.call({command:p.Weather_SetParams,
+rainsnow:1,rainsnowStrength:a,rainsnowSpeed:b,snowflakeSize:c},e)}disableRainSnow(a){return this.int.call({command:p.Weather_SetParams,rainsnowStrength:0},a)}setFogParam(a,b,c,e,d){return this.int.call({command:p.Weather_SetParams,fogDensity:a,fogGroundDensity:b,fogGroundHeight:c,fogDistance:e},d)}setSunIntensity(a,b){return this.int.call({command:p.Weather_SetParams,sunIntensity:a},b)}setMoonIntensity(a,b){return this.int.call({command:p.Weather_SetParams,moonIntensity:a},b)}setAmbientLightIntensity(a,
+b){return this.int.call({command:p.Weather_SetParams,ambientLightIntensity:a},b)}setTemperature(a,b){return this.int.call({command:p.Weather_SetParams,temperature:a},b)}setShadowIntensity(a,b){return this.int.call({command:p.Weather_SetParams,shadowIntensity:a},b)}setShadowQuality(a,b){return this.int.call({command:p.Weather_SetParams,shadowQuality:a},b)}setShadowDistance(a,b){return this.int.call({command:p.Weather_SetParams,shadowDistance:a},b)}setDarkMode(a,b){return this.int.call({command:p.Weather_SetParams,
+darkMode:!!a},b)}setSunSize(a,b){return this.int.call({command:p.Weather_SetParams,sunSize:a},b)}setMoonSize(a,b){return this.int.call({command:p.Weather_SetParams,moonSize:a},b)}}var ua=null;class ra{constructor(a,b){ua=this;this.options=b||{};(this.player=this.options.player)||H.setLanguage();"function"==typeof ra.__onApiConstructed&&ra.__onApiConstructed(this);this.isConnected=this.isCalledInCEF="object"==typeof ue&&"object"==typeof ue.dtspoi;this.callbackMap=new Map;this.websocket=null;this.callbackIndex=
+0;this.tickMarkerId="___tick_delegate_marker___";!this.player&&a&&(this.url=`ws://${a}`,this.connectWebSocket());this.initInterface();this.apiQueue=new hb(c=>this.sendApi(c))}setHost(a,b){this.url=`ws://${a}:${b}`}connectWebSocket(){if(!this.player){this.log(`Connecting: ${this.url}`);if("undefined"==typeof window)this.websocket=new (require("ws"))(this.url);else{if(!("WebSocket"in window)){console.error("Not Support WebSocket!");return}this.websocket=new WebSocket(this.url)}this.websocket.onopen=
+()=>this.onConnectionOpen();this.websocket.onmessage=a=>this.onConnectionMessage(a.data);this.websocket.onclose=a=>this.onConnectionClose(a);this.websocket.onerror=a=>this.onConnectionError(a)}}setEventCallback(a){this.options.onEvent=a}destroy(){this.isDestroyed=!0;this.player&&this.player.destroy();this.websocket&&(this.websocket.close(),this.websocket=null)}reset(a){return this.call0(p.Reset,a)}saveProject(a){return this.call0(p.SaveProject,a)}registerTick(a,b,c){b=b||{};"__execute__"!=a&&(b.func=
+"tick");this.call({command:p.RegisterJsCommunication,id:this.tickMarkerId,url:a,func:b.func,x:b.x||4,y:b.y||4,width:b.width||400,height:b.height||300,visible:b.visible||!1},c)}removeTick(a){this.call({command:p.UnRegisterJsCommunication,ids:[this.tickMarkerId]},a)}showTickWindow(a,b){this.isCalledInCEF?ue.dtspoi.showtickwindow(a):a?this.registerTick("__show__",{},b):this.registerTick("",{},b)}executeJsInTickPage(a,b){this.registerTick("__execute__",{func:a},b)}getVersion(){return"5.4.0508"}initInterface(){this.camera=
+new Mb(this);this.coord=new Nb(this);this.layers=this.infoTree=new Pb(this);this.ct=this.cameraTour=new jb(this);this.tl=this.tileLayer=new Hb(this);this.tag=new Gb(this);this.marker=new xb(this);this.marker3d=new yb(this);this.ctag=this.customTag=new nb(this);this.rp=this.radiationPoint=new Eb(this);this.cm=this.customMesh=new lb(this);this.wm=this.waterMesh=new Lb(this);this.waterFlowField=new Kb(this);this.wff=this.WaterFlowField;this.line=this.polyline=new Db(this);this.ol=this.odline=new zb(this);
+this.p3d=this.polygon3d=new Cb(this);this.polygon=new Bb(this);this.hm=this.heatmap=new sb(this);this.hm3d=this.heatmap3d=new tb(this);this.beam=new ib(this);this.ha=this.highlightArea=new ub(this);this.co=this.customObject=new mb(this);this.vp=this.videoProjection=new Jb(this);this.panorama=new Ab(this);this.decal=new ob(this);this.dw=this.dynamicWater=new pb(this);this.ff=this.floodFill=new qb(this);this.c3d=this.cesium3DTileset=new kb(this);this.shapeFile=this.shp=this.shapeFileLayer=new Fb(this);
+this.light=new wb(this);this.imagery=this.imageryLayer=new vb(this);this.geoJSON=this.geoJSONLayer=new rb(this);this.vc=this.vehicle=new Ib(this);this.misc=new Qb(this);this.tools=new Tb(this);this.settings=new Rb(this);this.weather=new Ub(this);this.eh=this.editHelper=new Ob(this);this.sp=this.settingsPanel=new Sb(this)}_getCallbackIndex(){return++this.callbackIndex}call0(a,b){return this.call({command:a},b)}call(a,b){if(!this.isConnected)return this.logWithColor("red","Not connected!"),b?void 0:
+Promise.reject("Not connected!");if(void 0==a.command||a.command==p.None)return this.logWithColor("red","command is undefined or None"),b?void 0:Promise.reject("command is undefined or None");a.timestamp=Date.now();a.callbackIndex=this._getCallbackIndex();a.__command=p[a.command]||"Unknown";a.__version=this.getVersion();null===b&&(a.__noResponse=!0);let c=a.command+"_"+a.callbackIndex;b&&"function"==typeof b&&(this.callbackMap[c]=b);if(this.isCalledInCEF&&null===b)return delete a.__noResponse,this.callbackMap[c]=
+null,this.sendApi(a),a;let e=JSON.stringify(a);this.log("");this.logWithColor("RoyalBlue",`Request: ${p[a.command]||"Unknown"}`,!0);this.logWithColor("green","\uff08"+(new Date(a.timestamp)).toLocaleTimeString()+"\uff09");this.logWithColor("gray",`${e}`);if(b||null===b)this.apiQueue.push(a);else return new Promise(d=>{this.callbackMap[c]=d;this.apiQueue.push(a)})}sendApi(a){this.isCalledInCEF?ue.dtspoi.execute(JSON.stringify(a)):this.player?this.player.sendApi(a):this.sendStringByWS(a)}sendStringByWS(a){if(a){a=
+JSON.stringify(a);var b=a.length;if(16777216>=b)this.websocket.send(a);else{var c=Math.ceil(b/16777216),e=[];for(let d=0;d<c;d++)e[d]=(0==d?"__MI_SECTION_START__":d==c-1?"__MI_SECTION_END__":"__MI_SECTION__")+a.substr(16777216*d,d==c-1?b-16777216*d:16777216);for(let d of e)this.websocket.send(d)}}}viewHome(a){switch(a){case 0:this.savedCamera?this.camera.set(this.savedCamera,0):this.initialCameraPosition&&this.camera.set(this.initialCameraPosition,0);break;case 1:this.savedCamera=null;this.viewHome(0);
+break;case 2:this.camera.get(b=>this.savedCamera=b.camera)}}onReady(){if("function"==typeof this.options.onReady)this.options.onReady();this.call({command:p.Misc_GetVersion});if(this.player)this.player.onApiReady()}log(a,b,c){if("function"==typeof this.options.onLog)this.options.onLog(a,b,c)}logWithColor(a,b,c){this.log(b,c,a)}onConnectionOpen(){this.isConnected=!0;this.logWithColor("blue","Connected!")}onConnectionClose(a){this.isConnected=!1;this.logWithColor("red",`Connection closed! code: ${a.code||
+"-"}, reason: ${1006==a.code?H.getString("Disconnect"):a.reason||a.message||"-"}`);this.log("");this.logWithColor("SpringGreen","Reconnecting...");this.isDestroyed||this.player||this.connectWebSocket()}onConnectionError(a){console.error("WebSocket error observed")}onConnectionMessage(a,b){a=a.replace(/~!@~!@~!@/g,'\\"');this.log("");let c=null;try{c=JSON.parse(a)}catch(d){this.isCalledInCEF?(document.writeln(d.message),document.writeln("<hr>"),document.writeln(a)):(console.error(d.message),this.log("Response: [Unknown]"));
+return}if(c.command==p.Misc_GetVersion){this.misc.apiVersionServer=c.version||c.versionType;if("5.4"!=this.misc.apiVersionServer){var e=H.getString("VersionMismatch").format("5.4",this.misc.apiVersionServer);console.warn(e);"undefined"!=typeof window&&alert(e)}if("function"==typeof this.options.onApiVersion)this.options.onApiVersion(this.misc.apiVersionServer)}if(c.command)this.apiQueue.callNext(c.callbackIndex),e=Date.now()-c.timestamp,this.logWithColor("RoyalBlue",`Response: ${p[c.command]||"Unknown"}`,
+!0),this.logWithColor("green",` (${H.getString("TimeConsuming")}${e}ms)`),this.logWithColor("gray",`${H.getString("RequestTime")}${(new Date(c.timestamp)).toLocaleTimeString()}`,!0),this.logWithColor("gray",`  ${H.getString("ResponseTime")}${(new Date(Date.now())).toLocaleTimeString()}`,!0),this.logWithColor("gray",`  ${H.getString("MessageLength")}${a.length}`),a=c.command+"_"+c.callbackIndex,(e=this.callbackMap[a])?(e(c),delete this.callbackMap[a]):null===e&&"function"===typeof tick_next&&tick_next(c,
+b);else if(c.eventtype)if(this.log("Response: Event"),"CompleteInitialization"==c.eventtype)this.log("The initialization is complete, now you can call the interfaces in onReady callback function."),this.initialCameraPosition=c.InitialCamera,c.ResourcesPath&&(this.resourcesPath=c.ResourcesPath,this.log("ResourcesPath:"+this.resourcesPath)),this.onReady();else if("NodeConfiguration"==c.eventtype)this.resourcesPath=c.ResourcesPath,this.log("ResourcesPath:"+this.resourcesPath);else if("MainThreadBusy"==
+c.eventtype)this.apiQueue.onMainThreadBusy(c),this.player&&this.player.onMainThreadBusy(c);else{if("function"==typeof this.options.onEvent)this.options.onEvent(c)}else this.log("Response: [Unknown]");b=JSON.stringify(c,(d,h)=>h instanceof Array?JSON.stringify(h):h,"\t").replace(/"\[/g,"[").replace(/\]"/g,"]").replace(/\\"/g,'"').replace(/""/g,'"');this.logWithColor("gray",b)}quit(){return this.call0(p.Quit)}test(a,b,c){return this.call({command:p.SimulateTest__,type:a,int32Val:b},c)}}const V={WS_Disconnected:0,
+WS_Connecting:1,WS_Connected:2,RTC_Opened:3,Video_LoadedMetaData:4,OnReady:5},da={StartingProcess:0,CheckingBusy:1,ConfirmBusy:2,ProcessStartFailed:3,ProcessStarted:4,LoadingProject:5,ProjectLoaded:6};class Vb{constructor(){"undefined"!=typeof navigator&&(this.isUnix="Mac68K"==navigator.platform||"MacPPC"==navigator.platform||"Macintosh"==navigator.platform||"MacIntel"==navigator.platform||-1!=navigator.platform.indexOf("Linux"),this.isChrome=-1!=navigator.userAgent.indexOf("Chrome"),this.isMobileDevice=
+/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent),this.isIOSDevice=/iPhone|iPad|iPod/i.test(navigator.userAgent),this.isSafari=/Safari/i.test(navigator.userAgent),this.isAndroidDevice=/Android/i.test(navigator.userAgent),this.isInWeixinBrowser)}fullscreen(a){a&&(a.requestFullscreen?a.requestFullscreen():a.mozRequestFullScreen?a.mozRequestFullScreen():a.msRequestFullscreen?a.msRequestFullscreen:a.webkitRequestFullscreen&&a.webkitRequestFullscreen())}exitFullscreen(){document.exitFullscreen?
+document.exitFullscreen():document.msExitFullscreen||(document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitCancelFullScreen&&document.webkitCancelFullScreen())}isFullscreen(){return document.fullscreen||document.mozFullScreen||document.webkitIsFullScreen}isFunction(a){return"function"==typeof a}}var R=new Vb;const sa={abnormal:1006,invalid_message:1008,no_free_instance:1013,out_of_control:4E3,instance_disconnected:4001,instance_not_found:4002,instance_start_failed:4003,webrtc_connection_error:4004,
+one_client_allowed:4005,timeout:4006,iid_required:4007,locked:4008,invalid_project:4009,kicked:4100,syncing_data:4101,instance_killed_by_user:4102,invalid_password:4103,nodeservice_stopped:4105,instance_is_busy:4107,ip_not_authorized:4108,invalid_token:4109};aa.EMPTY_OBJECT=Object.freeze({});class ka{}ka.doParamsCompatibility=a=>{a.apiOptions=a.apiOptions||{};a.events=a.events||{};a.ui=a.ui||{};"undefined"!=typeof a.showMarker&&(a.showStatus=a.showMarker,delete a.showMarker);"undefined"!=typeof a.actionEventHander&&
+(a.onaction=a.actionEventHander,delete a.actionEventHander);"undefined"!=typeof a.useBuiltinCursor&&(a.useBuiltinCursors=a.useBuiltinCursor,delete a.useBuiltinCursor);"undefined"!=typeof a.keyEventReceiver&&(a.keyEventTarget=a.keyEventReceiver,delete a.keyEventReceiver);"undefined"!=typeof a.ui.debugTouchPanel&&(a.ui.debugEventsPanel=a.ui.debugTouchPanel,delete a.ui.debugTouchPanel);var b=(c,e)=>{let d=a[c];d&&(a.events[e]=d,delete a[c])};b("onclose","onConnClose");b("onloaded","onVideoLoaded");b("onvideostatus",
+"onRtcStatsReport");b("onaction","mouseKeyListener");b=(c,e)=>{let d=a.events.mouseKeyListener[c];d&&(a.events.mouseKeyListener[e]=d,delete a.events.mouseKeyListener[c])};a.events.mouseKeyListener&&(b("onmouseenter","onMouseEnter"),b("onmouseleave","onMouseLeave"),b("onmousemove","onMouseMove"),b("onmousedown","onMouseDown"),b("onmouseup","onMouseUp"),b("onkeydown","onKeyDown"),b("onkeyup","onKeyUp"),b("onkeypress","onKeyPress"));b=(c,e)=>{"undefined"!=typeof a[c]&&(a.ui[e]=a[c],delete a[c])};b("showStartupInfo",
+"startupInfo");b("showStatus","statusButton");b("showFullscreenButton","fullscreenButton");b("showHomeButton","homeButton");b("showTaskList","taskListBar")};ka.setDefaultParamValues=a=>{a.keyEventTarget=aa(a.keyEventTarget,"video");a.useBuiltinCursors=aa(a.useBuiltinCursors,!0);a.ui.startupInfo=aa(a.ui.startupInfo,!0);a.ui.statusIndicator=aa(a.ui.statusIndicator,!0);a.ui.statusButton=aa(a.ui.statusButton,!1);a.ui.fullscreenButton=aa(a.ui.fullscreenButton,!1);a.ui.homeButton=aa(a.ui.homeButton,!1);
+a.ui.taskListBar=aa(a.ui.taskListBar,1);a.ui.debugEventsPanel=aa(a.ui.debugEventsPanel,!1);a.offer=1};ka.processParams=a=>{ka.doParamsCompatibility(a);ka.setDefaultParamValues(a)};class Wb{constructor(a){this.options=a;this.checkParamsMap=new Map}resetInteractTimestamp(a){this.timeOfLastInteraction=a}connect(a){window.WebSocket=window.WebSocket||window.MozWebSocket;window.WebSocket?(this.websocket=new WebSocket(a),this.websocket.onopen=()=>{if(this.options.onopen)this.options.onopen();setInterval(()=>
+{this.timeOfLastInteraction&&this.send({type:"ping",time:this.timeOfLastInteraction})},3E3)},this.websocket.onmessage=b=>{if(b=JSON.parse(b.data)){switch(b.type){case "checkParamsResult":this.onCheckParamsResponse(b);return;case "detectResponse":this.send(b);return}if(this.options.onmessage)this.options.onmessage(b)}},this.websocket.onerror=b=>{if(this.options.onerror)this.options.onerror(b)},this.websocket.onclose=b=>{this.websocket=void 0;if(this.options.onclose)this.options.onclose(b)}):alert("Your browser does not support WebSocket")}isOpened(){return this.websocket&&
+1===this.websocket.readyState}send(a){a&&this.isOpened()&&this.websocket.send(JSON.stringify(a))}close(a){console.log(`call SignallingConnection.close: ${a||" "}`);this.isOpened()&&(this.websocket.close(a),this.websocket=null)}sendReady(){this.send({type:"ready"})}sendCandidate(a){a.candidate&&a.candidate.candidate&&this.send({type:"iceCandidate",candidate:a.candidate})}sendOffer(a,b){this.send({type:"offer",sdp:a,hasVideo:b})}updateParams(a){this.send({type:"updateParams",data:a})}checkParams(a){a.timestamp=
+Date.now();return new Promise(b=>{this.checkParamsMap[a.timestamp]=b;this.send({type:"checkParams",data:a});this.timerOfCheckParams=setTimeout(()=>{let c=this.checkParamsMap[a.timestamp];c&&(delete this.checkParamsMap[a.timestamp],c(null))},1E3)})}onCheckParamsResponse(a){let b=this.checkParamsMap[a.timestamp];b&&(clearTimeout(this.timerOfCheckParams),delete this.checkParamsMap[a.timestamp],b(a))}}(function(a){"object"===typeof v&&"undefined"!==typeof module?module.exports=a():"function"===typeof define&&
+define.amd?define([],a):("undefined"!==typeof window?window:"undefined"!==typeof global?global:"undefined"!==typeof self?self:this).adapter=a()})(function(){return function(){function a(b,c,e){function d(q,k){if(!c[q]){if(!b[q]){var f="function"==typeof require&&require;if(!k&&f)return f(q,!0);if(h)return h(q,!0);k=Error("Cannot find module '"+q+"'");throw k.code="MODULE_NOT_FOUND",k;}k=c[q]={exports:{}};b[q][0].call(k.exports,function(l){return d(b[q][1][l]||l)},k,k.exports,a,b,c,e)}return c[q].exports}
+for(var h="function"==typeof require&&require,g=0;g<e.length;g++)d(e[g]);return d}return a}()({1:[function(a,b,c){a=(0,a("./adapter_factory.js").adapterFactory)({window:"undefined"==typeof window?{}:window});b.exports=a},{"./adapter_factory.js":2}],2:[function(a,b,c){function e(l){if(l&&l.__esModule)return l;var t={};if(null!=l)for(var w in l)Object.prototype.hasOwnProperty.call(l,w)&&(t[w]=l[w]);t.default=l;return t}Object.defineProperty(c,"__esModule",{value:!0});c.adapterFactory=function(){var l=
+(0<arguments.length&&void 0!==arguments[0]?arguments[0]:{}).window,t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{shimChrome:!0,shimFirefox:!0,shimEdge:!0,shimSafari:!0},w=d.log,r=d.detectBrowser(l),y={browserDetails:r,commonShim:f,extractVersion:d.extractVersion,disableLog:d.disableLog,disableWarnings:d.disableWarnings};switch(r.browser){case "chrome":if(!h||!h.shimPeerConnection||!t.shimChrome){w("Chrome shim is not included in this adapter release.");break}if(null===r.version){w("Chrome shim can not determine version, not shimming.");
+break}w("adapter.js shimming chrome.");y.browserShim=h;h.shimGetUserMedia(l);h.shimMediaStream(l);h.shimPeerConnection(l);h.shimOnTrack(l);h.shimAddTrackRemoveTrack(l);h.shimGetSendersWithDtmf(l);h.shimGetStats(l);h.shimSenderReceiverGetStats(l);h.fixNegotiationNeeded(l);f.shimRTCIceCandidate(l);f.shimConnectionState(l);f.shimMaxMessageSize(l);f.shimSendThrowTypeError(l);f.removeAllowExtmapMixed(l);break;case "firefox":if(!q||!q.shimPeerConnection||!t.shimFirefox){w("Firefox shim is not included in this adapter release.");
+break}w("adapter.js shimming firefox.");y.browserShim=q;q.shimGetUserMedia(l);q.shimPeerConnection(l);q.shimOnTrack(l);q.shimRemoveStream(l);q.shimSenderGetStats(l);q.shimReceiverGetStats(l);q.shimRTCDataChannel(l);q.shimAddTransceiver(l);q.shimGetParameters(l);q.shimCreateOffer(l);q.shimCreateAnswer(l);f.shimRTCIceCandidate(l);f.shimConnectionState(l);f.shimMaxMessageSize(l);f.shimSendThrowTypeError(l);break;case "edge":if(!g||!g.shimPeerConnection||!t.shimEdge){w("MS edge shim is not included in this adapter release.");
+break}w("adapter.js shimming edge.");y.browserShim=g;g.shimGetUserMedia(l);g.shimGetDisplayMedia(l);g.shimPeerConnection(l);g.shimReplaceTrack(l);f.shimMaxMessageSize(l);f.shimSendThrowTypeError(l);break;case "safari":if(!k||!t.shimSafari){w("Safari shim is not included in this adapter release.");break}w("adapter.js shimming safari.");y.browserShim=k;k.shimRTCIceServerUrls(l);k.shimCreateOfferLegacy(l);k.shimCallbacksAPI(l);k.shimLocalStreamsAPI(l);k.shimRemoteStreamsAPI(l);k.shimTrackEventTransceiver(l);
+k.shimGetUserMedia(l);k.shimAudioContext(l);f.shimRTCIceCandidate(l);f.shimMaxMessageSize(l);f.shimSendThrowTypeError(l);f.removeAllowExtmapMixed(l);break;default:w("Unsupported browser!")}return y};b=a("./utils");var d=e(b);b=a("./chrome/chrome_shim");var h=e(b);b=a("./edge/edge_shim");var g=e(b);b=a("./firefox/firefox_shim");var q=e(b);b=a("./safari/safari_shim");var k=e(b);a=a("./common_shim");var f=e(a)},{"./chrome/chrome_shim":3,"./common_shim":6,"./edge/edge_shim":7,"./firefox/firefox_shim":11,
+"./safari/safari_shim":14,"./utils":15}],3:[function(a,b,c){function e(f,l,t){l in f?Object.defineProperty(f,l,{value:t,enumerable:!0,configurable:!0,writable:!0}):f[l]=t;return f}function d(f){f.RTCPeerConnection.prototype.getLocalStreams=function(){var y=this;this._shimmedLocalStreams=this._shimmedLocalStreams||{};return Object.keys(this._shimmedLocalStreams).map(function(u){return y._shimmedLocalStreams[u][0]})};var l=f.RTCPeerConnection.prototype.addTrack;f.RTCPeerConnection.prototype.addTrack=
+function(y,u){if(!u)return l.apply(this,arguments);this._shimmedLocalStreams=this._shimmedLocalStreams||{};var A=l.apply(this,arguments);this._shimmedLocalStreams[u.id]?-1===this._shimmedLocalStreams[u.id].indexOf(A)&&this._shimmedLocalStreams[u.id].push(A):this._shimmedLocalStreams[u.id]=[u,A];return A};var t=f.RTCPeerConnection.prototype.addStream;f.RTCPeerConnection.prototype.addStream=function(y){var u=this;this._shimmedLocalStreams=this._shimmedLocalStreams||{};y.getTracks().forEach(function(n){if(u.getSenders().find(function(x){return x.track===
+n}))throw new DOMException("Track already exists.","InvalidAccessError");});var A=this.getSenders();t.apply(this,arguments);var m=this.getSenders().filter(function(n){return-1===A.indexOf(n)});this._shimmedLocalStreams[y.id]=[y].concat(m)};var w=f.RTCPeerConnection.prototype.removeStream;f.RTCPeerConnection.prototype.removeStream=function(y){this._shimmedLocalStreams=this._shimmedLocalStreams||{};delete this._shimmedLocalStreams[y.id];return w.apply(this,arguments)};var r=f.RTCPeerConnection.prototype.removeTrack;
+f.RTCPeerConnection.prototype.removeTrack=function(y){var u=this;this._shimmedLocalStreams=this._shimmedLocalStreams||{};y&&Object.keys(this._shimmedLocalStreams).forEach(function(A){var m=u._shimmedLocalStreams[A].indexOf(y);-1!==m&&u._shimmedLocalStreams[A].splice(m,1);1===u._shimmedLocalStreams[A].length&&delete u._shimmedLocalStreams[A]});return r.apply(this,arguments)}}Object.defineProperty(c,"__esModule",{value:!0});c.shimGetDisplayMedia=c.shimGetUserMedia=void 0;var h="function"===typeof Symbol&&
+"symbol"===typeof Symbol.iterator?function(f){return typeof f}:function(f){return f&&"function"===typeof Symbol&&f.constructor===Symbol&&f!==Symbol.prototype?"symbol":typeof f},g=a("./getusermedia");Object.defineProperty(c,"shimGetUserMedia",{enumerable:!0,get:function(){return g.shimGetUserMedia}});var q=a("./getdisplaymedia");Object.defineProperty(c,"shimGetDisplayMedia",{enumerable:!0,get:function(){return q.shimGetDisplayMedia}});c.shimMediaStream=function(f){f.MediaStream=f.MediaStream||f.webkitMediaStream};
+c.shimOnTrack=function(f){if("object"!==("undefined"===typeof f?"undefined":h(f))||!f.RTCPeerConnection||"ontrack"in f.RTCPeerConnection.prototype)k.wrapPeerConnectionEvent(f,"track",function(t){t.transceiver||Object.defineProperty(t,"transceiver",{value:{receiver:t.receiver}});return t});else{Object.defineProperty(f.RTCPeerConnection.prototype,"ontrack",{get:function(){return this._ontrack},set:function(t){this._ontrack&&this.removeEventListener("track",this._ontrack);this.addEventListener("track",
+this._ontrack=t)},enumerable:!0,configurable:!0});var l=f.RTCPeerConnection.prototype.setRemoteDescription;f.RTCPeerConnection.prototype.setRemoteDescription=function(){var t=this;this._ontrackpoly||(this._ontrackpoly=function(w){w.stream.addEventListener("addtrack",function(r){var y=void 0;y=f.RTCPeerConnection.prototype.getReceivers?t.getReceivers().find(function(A){return A.track&&A.track.id===r.track.id}):{track:r.track};var u=new Event("track");u.track=r.track;u.receiver=y;u.transceiver={receiver:y};
+u.streams=[w.stream];t.dispatchEvent(u)});w.stream.getTracks().forEach(function(r){var y=void 0;y=f.RTCPeerConnection.prototype.getReceivers?t.getReceivers().find(function(A){return A.track&&A.track.id===r.id}):{track:r};var u=new Event("track");u.track=r;u.receiver=y;u.transceiver={receiver:y};u.streams=[w.stream];t.dispatchEvent(u)})},this.addEventListener("addstream",this._ontrackpoly));return l.apply(this,arguments)}}};c.shimGetSendersWithDtmf=function(f){if("object"===("undefined"===typeof f?
+"undefined":h(f))&&f.RTCPeerConnection&&!("getSenders"in f.RTCPeerConnection.prototype)&&"createDTMFSender"in f.RTCPeerConnection.prototype){var l=function(A,m){return{track:m,get dtmf(){void 0===this._dtmf&&(this._dtmf="audio"===m.kind?A.createDTMFSender(m):null);return this._dtmf},_pc:A}};if(!f.RTCPeerConnection.prototype.getSenders){f.RTCPeerConnection.prototype.getSenders=function(){this._senders=this._senders||[];return this._senders.slice()};var t=f.RTCPeerConnection.prototype.addTrack;f.RTCPeerConnection.prototype.addTrack=
+function(A,m){var n=t.apply(this,arguments);n||(n=l(this,A),this._senders.push(n));return n};var w=f.RTCPeerConnection.prototype.removeTrack;f.RTCPeerConnection.prototype.removeTrack=function(A){w.apply(this,arguments);var m=this._senders.indexOf(A);-1!==m&&this._senders.splice(m,1)}}var r=f.RTCPeerConnection.prototype.addStream;f.RTCPeerConnection.prototype.addStream=function(A){var m=this;this._senders=this._senders||[];r.apply(this,[A]);A.getTracks().forEach(function(n){m._senders.push(l(m,n))})};
+var y=f.RTCPeerConnection.prototype.removeStream;f.RTCPeerConnection.prototype.removeStream=function(A){var m=this;this._senders=this._senders||[];y.apply(this,[A]);A.getTracks().forEach(function(n){var x=m._senders.find(function(z){return z.track===n});x&&m._senders.splice(m._senders.indexOf(x),1)})}}else if("object"===("undefined"===typeof f?"undefined":h(f))&&f.RTCPeerConnection&&"getSenders"in f.RTCPeerConnection.prototype&&"createDTMFSender"in f.RTCPeerConnection.prototype&&f.RTCRtpSender&&!("dtmf"in
+f.RTCRtpSender.prototype)){var u=f.RTCPeerConnection.prototype.getSenders;f.RTCPeerConnection.prototype.getSenders=function(){var A=this,m=u.apply(this,[]);m.forEach(function(n){return n._pc=A});return m};Object.defineProperty(f.RTCRtpSender.prototype,"dtmf",{get:function(){void 0===this._dtmf&&(this._dtmf="audio"===this.track.kind?this._pc.createDTMFSender(this.track):null);return this._dtmf}})}};c.shimGetStats=function(f){if(f.RTCPeerConnection){var l=f.RTCPeerConnection.prototype.getStats;f.RTCPeerConnection.prototype.getStats=
+function(){var t=this,w=Array.prototype.slice.call(arguments),r=w[0],y=w[1];w=w[2];if(0<arguments.length&&"function"===typeof r)return l.apply(this,arguments);if(0===l.length&&(0===arguments.length||"function"!==typeof r))return l.apply(this,[]);var u=function(m){var n={};m.result().forEach(function(x){var z={id:x.id,timestamp:x.timestamp,type:{localcandidate:"local-candidate",remotecandidate:"remote-candidate"}[x.type]||x.type};x.names().forEach(function(B){z[B]=x.stat(B)});n[z.id]=z});return n},
+A=function(m){return new Map(Object.keys(m).map(function(n){return[n,m[n]]}))};return 2<=arguments.length?l.apply(this,[function(m){y(A(u(m)))},r]):(new Promise(function(m,n){l.apply(t,[function(x){m(A(u(x)))},n])})).then(y,w)}}};c.shimSenderReceiverGetStats=function(f){if("object"===("undefined"===typeof f?"undefined":h(f))&&f.RTCPeerConnection&&f.RTCRtpSender&&f.RTCRtpReceiver){if(!("getStats"in f.RTCRtpSender.prototype)){var l=f.RTCPeerConnection.prototype.getSenders;l&&(f.RTCPeerConnection.prototype.getSenders=
+function(){var y=this,u=l.apply(this,[]);u.forEach(function(A){return A._pc=y});return u});var t=f.RTCPeerConnection.prototype.addTrack;t&&(f.RTCPeerConnection.prototype.addTrack=function(){var y=t.apply(this,arguments);y._pc=this;return y});f.RTCRtpSender.prototype.getStats=function(){var y=this;return this._pc.getStats().then(function(u){return k.filterStats(u,y.track,!0)})}}if(!("getStats"in f.RTCRtpReceiver.prototype)){var w=f.RTCPeerConnection.prototype.getReceivers;w&&(f.RTCPeerConnection.prototype.getReceivers=
+function(){var y=this,u=w.apply(this,[]);u.forEach(function(A){return A._pc=y});return u});k.wrapPeerConnectionEvent(f,"track",function(y){y.receiver._pc=y.srcElement;return y});f.RTCRtpReceiver.prototype.getStats=function(){var y=this;return this._pc.getStats().then(function(u){return k.filterStats(u,y.track,!1)})}}if("getStats"in f.RTCRtpSender.prototype&&"getStats"in f.RTCRtpReceiver.prototype){var r=f.RTCPeerConnection.prototype.getStats;f.RTCPeerConnection.prototype.getStats=function(){if(0<
+arguments.length&&arguments[0]instanceof f.MediaStreamTrack){var y=arguments[0],u=void 0,A=void 0,m=void 0;this.getSenders().forEach(function(n){n.track===y&&(u?m=!0:u=n)});this.getReceivers().forEach(function(n){n.track===y&&(A?m=!0:A=n);return n.track===y});return m||u&&A?Promise.reject(new DOMException("There are more than one sender or receiver for the track.","InvalidAccessError")):u?u.getStats():A?A.getStats():Promise.reject(new DOMException("There is no sender or receiver for the track.","InvalidAccessError"))}return r.apply(this,
+arguments)}}}};c.shimAddTrackRemoveTrackWithNative=d;c.shimAddTrackRemoveTrack=function(f){function l(n,x){var z=x.sdp;Object.keys(n._reverseStreams||[]).forEach(function(B){B=n._reverseStreams[B];z=z.replace(new RegExp(n._streams[B.id].id,"g"),B.id)});return new RTCSessionDescription({type:x.type,sdp:z})}function t(n,x){var z=x.sdp;Object.keys(n._reverseStreams||[]).forEach(function(B){B=n._reverseStreams[B];z=z.replace(new RegExp(B.id,"g"),n._streams[B.id].id)});return new RTCSessionDescription({type:x.type,
+sdp:z})}if(f.RTCPeerConnection){var w=k.detectBrowser(f);if(f.RTCPeerConnection.prototype.addTrack&&65<=w.version)return d(f);var r=f.RTCPeerConnection.prototype.getLocalStreams;f.RTCPeerConnection.prototype.getLocalStreams=function(){var n=this,x=r.apply(this);this._reverseStreams=this._reverseStreams||{};return x.map(function(z){return n._reverseStreams[z.id]})};var y=f.RTCPeerConnection.prototype.addStream;f.RTCPeerConnection.prototype.addStream=function(n){var x=this;this._streams=this._streams||
+{};this._reverseStreams=this._reverseStreams||{};n.getTracks().forEach(function(B){if(x.getSenders().find(function(C){return C.track===B}))throw new DOMException("Track already exists.","InvalidAccessError");});if(!this._reverseStreams[n.id]){var z=new f.MediaStream(n.getTracks());this._streams[n.id]=z;this._reverseStreams[z.id]=n;n=z}y.apply(this,[n])};var u=f.RTCPeerConnection.prototype.removeStream;f.RTCPeerConnection.prototype.removeStream=function(n){this._streams=this._streams||{};this._reverseStreams=
+this._reverseStreams||{};u.apply(this,[this._streams[n.id]||n]);delete this._reverseStreams[this._streams[n.id]?this._streams[n.id].id:n.id];delete this._streams[n.id]};f.RTCPeerConnection.prototype.addTrack=function(n,x){var z=this;if("closed"===this.signalingState)throw new DOMException("The RTCPeerConnection's signalingState is 'closed'.","InvalidStateError");var B=[].slice.call(arguments,1);if(1!==B.length||!B[0].getTracks().find(function(C){return C===n}))throw new DOMException("The adapter.js addTrack polyfill only supports a single  stream which is associated with the specified track.",
+"NotSupportedError");if(this.getSenders().find(function(C){return C.track===n}))throw new DOMException("Track already exists.","InvalidAccessError");this._streams=this._streams||{};this._reverseStreams=this._reverseStreams||{};(B=this._streams[x.id])?(B.addTrack(n),Promise.resolve().then(function(){z.dispatchEvent(new Event("negotiationneeded"))})):(B=new f.MediaStream([n]),this._streams[x.id]=B,this._reverseStreams[B.id]=x,this.addStream(B));return this.getSenders().find(function(C){return C.track===
+n})};["createOffer","createAnswer"].forEach(function(n){var x=f.RTCPeerConnection.prototype[n],z=e({},n,function(){var B=this,C=arguments;return arguments.length&&"function"===typeof arguments[0]?x.apply(this,[function(G){G=l(B,G);C[0].apply(null,[G])},function(G){C[1]&&C[1].apply(null,G)},arguments[2]]):x.apply(this,arguments).then(function(G){return l(B,G)})});f.RTCPeerConnection.prototype[n]=z[n]});var A=f.RTCPeerConnection.prototype.setLocalDescription;f.RTCPeerConnection.prototype.setLocalDescription=
+function(){if(!arguments.length||!arguments[0].type)return A.apply(this,arguments);arguments[0]=t(this,arguments[0]);return A.apply(this,arguments)};var m=Object.getOwnPropertyDescriptor(f.RTCPeerConnection.prototype,"localDescription");Object.defineProperty(f.RTCPeerConnection.prototype,"localDescription",{get:function(){var n=m.get.apply(this);return""===n.type?n:l(this,n)}});f.RTCPeerConnection.prototype.removeTrack=function(n){var x=this;if("closed"===this.signalingState)throw new DOMException("The RTCPeerConnection's signalingState is 'closed'.",
+"InvalidStateError");if(!n._pc)throw new DOMException("Argument 1 of RTCPeerConnection.removeTrack does not implement interface RTCRtpSender.","TypeError");if(n._pc!==this)throw new DOMException("Sender was not created by this connection.","InvalidAccessError");this._streams=this._streams||{};var z=void 0;Object.keys(this._streams).forEach(function(B){x._streams[B].getTracks().find(function(C){return n.track===C})&&(z=x._streams[B])});z&&(1===z.getTracks().length?this.removeStream(this._reverseStreams[z.id]):
+z.removeTrack(n.track),this.dispatchEvent(new Event("negotiationneeded")))}}};c.shimPeerConnection=function(f){var l=k.detectBrowser(f);!f.RTCPeerConnection&&f.webkitRTCPeerConnection&&(f.RTCPeerConnection=f.webkitRTCPeerConnection);if(f.RTCPeerConnection){var t=0===f.RTCPeerConnection.prototype.addIceCandidate.length;53>l.version&&["setLocalDescription","setRemoteDescription","addIceCandidate"].forEach(function(r){var y=f.RTCPeerConnection.prototype[r],u=e({},r,function(){arguments[0]=new ("addIceCandidate"===
+r?f.RTCIceCandidate:f.RTCSessionDescription)(arguments[0]);return y.apply(this,arguments)});f.RTCPeerConnection.prototype[r]=u[r]});var w=f.RTCPeerConnection.prototype.addIceCandidate;f.RTCPeerConnection.prototype.addIceCandidate=function(){return t||arguments[0]?78>l.version&&arguments[0]&&""===arguments[0].candidate?Promise.resolve():w.apply(this,arguments):(arguments[1]&&arguments[1].apply(null),Promise.resolve())}}};c.fixNegotiationNeeded=function(f){var l=k.detectBrowser(f);k.wrapPeerConnectionEvent(f,
+"negotiationneeded",function(t){var w=t.target;if(!(72>l.version||w.getConfiguration&&"plan-b"===w.getConfiguration().sdpSemantics)||"stable"===w.signalingState)return t})};var k=function(f){if(f&&f.__esModule)return f;var l={};if(null!=f)for(var t in f)Object.prototype.hasOwnProperty.call(f,t)&&(l[t]=f[t]);l.default=f;return l}(a("../utils.js"))},{"../utils.js":15,"./getdisplaymedia":4,"./getusermedia":5}],4:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});c.shimGetDisplayMedia=
+function(e,d){e.navigator.mediaDevices&&"getDisplayMedia"in e.navigator.mediaDevices||!e.navigator.mediaDevices||("function"!==typeof d?console.error("shimGetDisplayMedia: getSourceId argument is not a function"):e.navigator.mediaDevices.getDisplayMedia=function(h){return d(h).then(function(g){var q=h.video&&h.video.width,k=h.video&&h.video.height;h.video={mandatory:{chromeMediaSource:"desktop",chromeMediaSourceId:g,maxFrameRate:h.video&&h.video.frameRate||3}};q&&(h.video.mandatory.maxWidth=q);k&&
+(h.video.mandatory.maxHeight=k);return e.navigator.mediaDevices.getUserMedia(h)})})}},{}],5:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});var e="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(g){return typeof g}:function(g){return g&&"function"===typeof Symbol&&g.constructor===Symbol&&g!==Symbol.prototype?"symbol":typeof g};c.shimGetUserMedia=function(g){var q=g&&g.navigator;if(q.mediaDevices){var k=d.detectBrowser(g),f=function(r){if("object"!==("undefined"===
+typeof r?"undefined":e(r))||r.mandatory||r.optional)return r;var y={};Object.keys(r).forEach(function(u){if("require"!==u&&"advanced"!==u&&"mediaSource"!==u){var A="object"===e(r[u])?r[u]:{ideal:r[u]};void 0!==A.exact&&"number"===typeof A.exact&&(A.min=A.max=A.exact);var m=function(x,z){return x?x+z.charAt(0).toUpperCase()+z.slice(1):"deviceId"===z?"sourceId":z};if(void 0!==A.ideal){y.optional=y.optional||[];var n={};"number"===typeof A.ideal?(n[m("min",u)]=A.ideal,y.optional.push(n),n={},n[m("max",
+u)]=A.ideal):n[m("",u)]=A.ideal;y.optional.push(n)}void 0!==A.exact&&"number"!==typeof A.exact?(y.mandatory=y.mandatory||{},y.mandatory[m("",u)]=A.exact):["min","max"].forEach(function(x){void 0!==A[x]&&(y.mandatory=y.mandatory||{},y.mandatory[m(x,u)]=A[x])})}});r.advanced&&(y.optional=(y.optional||[]).concat(r.advanced));return y},l=function(r,y){if(61<=k.version)return y(r);if((r=JSON.parse(JSON.stringify(r)))&&"object"===e(r.audio)){var u=function(n,x,z){x in n&&!(z in n)&&(n[z]=n[x],delete n[x])};
+r=JSON.parse(JSON.stringify(r));u(r.audio,"autoGainControl","googAutoGainControl");u(r.audio,"noiseSuppression","googNoiseSuppression");r.audio=f(r.audio)}if(r&&"object"===e(r.video)){var A=r.video.facingMode;A=A&&("object"===("undefined"===typeof A?"undefined":e(A))?A:{ideal:A});u=66>k.version;if(!(!A||"user"!==A.exact&&"environment"!==A.exact&&"user"!==A.ideal&&"environment"!==A.ideal||q.mediaDevices.getSupportedConstraints&&q.mediaDevices.getSupportedConstraints().facingMode&&!u)){delete r.video.facingMode;
+var m=void 0;if("environment"===A.exact||"environment"===A.ideal)m=["back","rear"];else if("user"===A.exact||"user"===A.ideal)m=["front"];if(m)return q.mediaDevices.enumerateDevices().then(function(n){n=n.filter(function(z){return"videoinput"===z.kind});var x=n.find(function(z){return m.some(function(B){return z.label.toLowerCase().includes(B)})});!x&&n.length&&m.includes("back")&&(x=n[n.length-1]);x&&(r.video.deviceId=A.exact?{exact:x.deviceId}:{ideal:x.deviceId});r.video=f(r.video);h("chrome: "+
+JSON.stringify(r));return y(r)})}r.video=f(r.video)}h("chrome: "+JSON.stringify(r));return y(r)},t=function(r){return 64<=k.version?r:{name:{PermissionDeniedError:"NotAllowedError",PermissionDismissedError:"NotAllowedError",InvalidStateError:"NotAllowedError",DevicesNotFoundError:"NotFoundError",ConstraintNotSatisfiedError:"OverconstrainedError",TrackStartError:"NotReadableError",MediaDeviceFailedDueToShutdown:"NotAllowedError",MediaDeviceKillSwitchOn:"NotAllowedError",TabCaptureError:"AbortError",
+ScreenCaptureError:"AbortError",DeviceCaptureError:"AbortError"}[r.name]||r.name,message:r.message,constraint:r.constraint||r.constraintName,toString:function(){return this.name+(this.message&&": ")+this.message}}};q.getUserMedia=function(r,y,u){l(r,function(A){q.webkitGetUserMedia(A,y,function(m){u&&u(t(m))})})}.bind(q);if(q.mediaDevices.getUserMedia){var w=q.mediaDevices.getUserMedia.bind(q.mediaDevices);q.mediaDevices.getUserMedia=function(r){return l(r,function(y){return w(y).then(function(u){if(y.audio&&
+!u.getAudioTracks().length||y.video&&!u.getVideoTracks().length)throw u.getTracks().forEach(function(A){A.stop()}),new DOMException("","NotFoundError");return u},function(u){return Promise.reject(t(u))})})}}}};var d=function(g){if(g&&g.__esModule)return g;var q={};if(null!=g)for(var k in g)Object.prototype.hasOwnProperty.call(g,k)&&(q[k]=g[k]);q.default=g;return q}(a("../utils.js")),h=d.log},{"../utils.js":15}],6:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});var e="function"===
+typeof Symbol&&"symbol"===typeof Symbol.iterator?function(g){return typeof g}:function(g){return g&&"function"===typeof Symbol&&g.constructor===Symbol&&g!==Symbol.prototype?"symbol":typeof g};c.shimRTCIceCandidate=function(g){if(g.RTCIceCandidate&&!(g.RTCIceCandidate&&"foundation"in g.RTCIceCandidate.prototype)){var q=g.RTCIceCandidate;g.RTCIceCandidate=function(k){"object"===("undefined"===typeof k?"undefined":e(k))&&k.candidate&&0===k.candidate.indexOf("a=")&&(k=JSON.parse(JSON.stringify(k)),k.candidate=
+k.candidate.substr(2));if(k.candidate&&k.candidate.length){var f=new q(k);k=d.default.parseCandidate(k.candidate);var l=Object.assign(f,k);l.toJSON=function(){return{candidate:l.candidate,sdpMid:l.sdpMid,sdpMLineIndex:l.sdpMLineIndex,usernameFragment:l.usernameFragment}};return l}return new q(k)};g.RTCIceCandidate.prototype=q.prototype;h.wrapPeerConnectionEvent(g,"icecandidate",function(k){k.candidate&&Object.defineProperty(k,"candidate",{value:new g.RTCIceCandidate(k.candidate),writable:"false"});
+return k})}};c.shimMaxMessageSize=function(g){if(g.RTCPeerConnection){var q=h.detectBrowser(g);"sctp"in g.RTCPeerConnection.prototype||Object.defineProperty(g.RTCPeerConnection.prototype,"sctp",{get:function(){return"undefined"===typeof this._sctp?null:this._sctp}});var k=function(r){if(!r||!r.sdp)return!1;r=d.default.splitSections(r.sdp);r.shift();return r.some(function(y){return(y=d.default.parseMLine(y))&&"application"===y.kind&&-1!==y.protocol.indexOf("SCTP")})},f=function(r){r=r.sdp.match(/mozilla...THIS_IS_SDPARTA-(\d+)/);
+if(null===r||2>r.length)return-1;r=parseInt(r[1],10);return r!==r?-1:r},l=function(r){var y=65536;"firefox"===q.browser&&(y=57>q.version?-1===r?16384:2147483637:60>q.version?57===q.version?65535:65536:2147483637);return y},t=function(r,y){var u=65536;"firefox"===q.browser&&57===q.version&&(u=65535);r=d.default.matchPrefix(r.sdp,"a=max-message-size:");0<r.length?u=parseInt(r[0].substr(19),10):"firefox"===q.browser&&-1!==y&&(u=2147483637);return u},w=g.RTCPeerConnection.prototype.setRemoteDescription;
+g.RTCPeerConnection.prototype.setRemoteDescription=function(){this._sctp=null;"chrome"===q.browser&&76<=q.version&&"plan-b"===this.getConfiguration().sdpSemantics&&Object.defineProperty(this,"sctp",{get:function(){return"undefined"===typeof this._sctp?null:this._sctp},enumerable:!0,configurable:!0});if(k(arguments[0])){var r=f(arguments[0]),y=l(r);r=t(arguments[0],r);var u=void 0;u=0===y&&0===r?Number.POSITIVE_INFINITY:0===y||0===r?Math.max(y,r):Math.min(y,r);y={};Object.defineProperty(y,"maxMessageSize",
+{get:function(){return u}});this._sctp=y}return w.apply(this,arguments)}}};c.shimSendThrowTypeError=function(g){function q(f,l){var t=f.send;f.send=function(){var w=arguments[0];w=w.length||w.size||w.byteLength;if("open"===f.readyState&&l.sctp&&w>l.sctp.maxMessageSize)throw new TypeError("Message too large (can send a maximum of "+l.sctp.maxMessageSize+" bytes)");return t.apply(f,arguments)}}if(g.RTCPeerConnection&&"createDataChannel"in g.RTCPeerConnection.prototype){var k=g.RTCPeerConnection.prototype.createDataChannel;
+g.RTCPeerConnection.prototype.createDataChannel=function(){var f=k.apply(this,arguments);q(f,this);return f};h.wrapPeerConnectionEvent(g,"datachannel",function(f){q(f.channel,f.target);return f})}};c.shimConnectionState=function(g){if(g.RTCPeerConnection&&!("connectionState"in g.RTCPeerConnection.prototype)){var q=g.RTCPeerConnection.prototype;Object.defineProperty(q,"connectionState",{get:function(){return{completed:"connected",checking:"connecting"}[this.iceConnectionState]||this.iceConnectionState},
+enumerable:!0,configurable:!0});Object.defineProperty(q,"onconnectionstatechange",{get:function(){return this._onconnectionstatechange||null},set:function(k){this._onconnectionstatechange&&(this.removeEventListener("connectionstatechange",this._onconnectionstatechange),delete this._onconnectionstatechange);k&&this.addEventListener("connectionstatechange",this._onconnectionstatechange=k)},enumerable:!0,configurable:!0});["setLocalDescription","setRemoteDescription"].forEach(function(k){var f=q[k];
+q[k]=function(){this._connectionstatechangepoly||(this._connectionstatechangepoly=function(l){var t=l.target;if(t._lastConnectionState!==t.connectionState){t._lastConnectionState=t.connectionState;var w=new Event("connectionstatechange",l);t.dispatchEvent(w)}return l},this.addEventListener("iceconnectionstatechange",this._connectionstatechangepoly));return f.apply(this,arguments)}})}};c.removeAllowExtmapMixed=function(g){if(g.RTCPeerConnection){var q=h.detectBrowser(g);if(!("chrome"===q.browser&&
+71<=q.version||"safari"===q.browser&&605<=q.version)){var k=g.RTCPeerConnection.prototype.setRemoteDescription;g.RTCPeerConnection.prototype.setRemoteDescription=function(f){f&&f.sdp&&-1!==f.sdp.indexOf("\na=extmap-allow-mixed")&&(f.sdp=f.sdp.split("\n").filter(function(l){return"a=extmap-allow-mixed"!==l.trim()}).join("\n"));return k.apply(this,arguments)}}}};var d=(b=a("sdp"))&&b.__esModule?b:{default:b},h=function(g){if(g&&g.__esModule)return g;var q={};if(null!=g)for(var k in g)Object.prototype.hasOwnProperty.call(g,
+k)&&(q[k]=g[k]);q.default=g;return q}(a("./utils"))},{"./utils":15,sdp:17}],7:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});c.shimGetDisplayMedia=c.shimGetUserMedia=void 0;var e=a("./getusermedia");Object.defineProperty(c,"shimGetUserMedia",{enumerable:!0,get:function(){return e.shimGetUserMedia}});var d=a("./getdisplaymedia");Object.defineProperty(c,"shimGetDisplayMedia",{enumerable:!0,get:function(){return d.shimGetDisplayMedia}});c.shimPeerConnection=function(k){var f=h.detectBrowser(k);
+if(k.RTCIceGatherer&&(k.RTCIceCandidate||(k.RTCIceCandidate=function(w){return w}),k.RTCSessionDescription||(k.RTCSessionDescription=function(w){return w}),15025>f.version)){var l=Object.getOwnPropertyDescriptor(k.MediaStreamTrack.prototype,"enabled");Object.defineProperty(k.MediaStreamTrack.prototype,"enabled",{set:function(w){l.set.call(this,w);var r=new Event("enabled");r.enabled=w;this.dispatchEvent(r)}})}!k.RTCRtpSender||"dtmf"in k.RTCRtpSender.prototype||Object.defineProperty(k.RTCRtpSender.prototype,
+"dtmf",{get:function(){void 0===this._dtmf&&("audio"===this.track.kind?this._dtmf=new k.RTCDtmfSender(this):"video"===this.track.kind&&(this._dtmf=null));return this._dtmf}});k.RTCDtmfSender&&!k.RTCDTMFSender&&(k.RTCDTMFSender=k.RTCDtmfSender);var t=(0,q.default)(k,f.version);k.RTCPeerConnection=function(w){w&&w.iceServers&&(w.iceServers=(0,g.filterIceServers)(w.iceServers,f.version),h.log("ICE servers after filtering:",w.iceServers));return new t(w)};k.RTCPeerConnection.prototype=t.prototype};c.shimReplaceTrack=
+function(k){!k.RTCRtpSender||"replaceTrack"in k.RTCRtpSender.prototype||(k.RTCRtpSender.prototype.replaceTrack=k.RTCRtpSender.prototype.setTrack)};var h=function(k){if(k&&k.__esModule)return k;var f={};if(null!=k)for(var l in k)Object.prototype.hasOwnProperty.call(k,l)&&(f[l]=k[l]);f.default=k;return f}(a("../utils")),g=a("./filtericeservers"),q=(a=a("rtcpeerconnection-shim"))&&a.__esModule?a:{default:a}},{"../utils":15,"./filtericeservers":8,"./getdisplaymedia":9,"./getusermedia":10,"rtcpeerconnection-shim":16}],
+8:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});c.filterIceServers=function(d,h){var g=!1;d=JSON.parse(JSON.stringify(d));return d.filter(function(q){if(q&&(q.urls||q.url)){var k=q.urls||q.url;q.url&&!q.urls&&e.deprecated("RTCIceServer.url","RTCIceServer.urls");var f="string"===typeof k;f&&(k=[k]);k=k.filter(function(l){return 0===l.indexOf("stun:")?!1:(l=l.startsWith("turn")&&!l.startsWith("turn:[")&&l.includes("transport=udp"))&&!g?g=!0:l&&!g});delete q.url;q.urls=f?k[0]:k;return!!k.length}})};
+var e=function(d){if(d&&d.__esModule)return d;var h={};if(null!=d)for(var g in d)Object.prototype.hasOwnProperty.call(d,g)&&(h[g]=d[g]);h.default=d;return h}(a("../utils"))},{"../utils":15}],9:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});c.shimGetDisplayMedia=function(e){"getDisplayMedia"in e.navigator&&e.navigator.mediaDevices&&!(e.navigator.mediaDevices&&"getDisplayMedia"in e.navigator.mediaDevices)&&(e.navigator.mediaDevices.getDisplayMedia=e.navigator.getDisplayMedia.bind(e.navigator))}},
+{}],10:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});c.shimGetUserMedia=function(e){e=e&&e.navigator;var d=function(g){return{name:{PermissionDeniedError:"NotAllowedError"}[g.name]||g.name,message:g.message,constraint:g.constraint,toString:function(){return this.name}}},h=e.mediaDevices.getUserMedia.bind(e.mediaDevices);e.mediaDevices.getUserMedia=function(g){return h(g).catch(function(q){return Promise.reject(d(q))})}}},{}],11:[function(a,b,c){function e(k,f,l){f in k?Object.defineProperty(k,
+f,{value:l,enumerable:!0,configurable:!0,writable:!0}):k[f]=l;return k}Object.defineProperty(c,"__esModule",{value:!0});c.shimGetDisplayMedia=c.shimGetUserMedia=void 0;var d="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(k){return typeof k}:function(k){return k&&"function"===typeof Symbol&&k.constructor===Symbol&&k!==Symbol.prototype?"symbol":typeof k},h=a("./getusermedia");Object.defineProperty(c,"shimGetUserMedia",{enumerable:!0,get:function(){return h.shimGetUserMedia}});
+var g=a("./getdisplaymedia");Object.defineProperty(c,"shimGetDisplayMedia",{enumerable:!0,get:function(){return g.shimGetDisplayMedia}});c.shimOnTrack=function(k){"object"===("undefined"===typeof k?"undefined":d(k))&&k.RTCTrackEvent&&"receiver"in k.RTCTrackEvent.prototype&&!("transceiver"in k.RTCTrackEvent.prototype)&&Object.defineProperty(k.RTCTrackEvent.prototype,"transceiver",{get:function(){return{receiver:this.receiver}}})};c.shimPeerConnection=function(k){var f=q.detectBrowser(k);if("object"===
+("undefined"===typeof k?"undefined":d(k))&&(k.RTCPeerConnection||k.mozRTCPeerConnection)){!k.RTCPeerConnection&&k.mozRTCPeerConnection&&(k.RTCPeerConnection=k.mozRTCPeerConnection);53>f.version&&["setLocalDescription","setRemoteDescription","addIceCandidate"].forEach(function(r){var y=k.RTCPeerConnection.prototype[r],u=e({},r,function(){arguments[0]=new ("addIceCandidate"===r?k.RTCIceCandidate:k.RTCSessionDescription)(arguments[0]);return y.apply(this,arguments)});k.RTCPeerConnection.prototype[r]=
+u[r]});if(68>f.version){var l=k.RTCPeerConnection.prototype.addIceCandidate;k.RTCPeerConnection.prototype.addIceCandidate=function(){return arguments[0]?arguments[0]&&""===arguments[0].candidate?Promise.resolve():l.apply(this,arguments):(arguments[1]&&arguments[1].apply(null),Promise.resolve())}}var t={inboundrtp:"inbound-rtp",outboundrtp:"outbound-rtp",candidatepair:"candidate-pair",localcandidate:"local-candidate",remotecandidate:"remote-candidate"},w=k.RTCPeerConnection.prototype.getStats;k.RTCPeerConnection.prototype.getStats=
+function(){var r=Array.prototype.slice.call(arguments),y=r[1],u=r[2];return w.apply(this,[r[0]||null]).then(function(A){if(53>f.version&&!y)try{A.forEach(function(m){m.type=t[m.type]||m.type})}catch(m){if("TypeError"!==m.name)throw m;A.forEach(function(n,x){A.set(x,Object.assign({},n,{type:t[n.type]||n.type}))})}return A}).then(y,u)}}};c.shimSenderGetStats=function(k){if("object"===("undefined"===typeof k?"undefined":d(k))&&k.RTCPeerConnection&&k.RTCRtpSender&&!(k.RTCRtpSender&&"getStats"in k.RTCRtpSender.prototype)){var f=
+k.RTCPeerConnection.prototype.getSenders;f&&(k.RTCPeerConnection.prototype.getSenders=function(){var t=this,w=f.apply(this,[]);w.forEach(function(r){return r._pc=t});return w});var l=k.RTCPeerConnection.prototype.addTrack;l&&(k.RTCPeerConnection.prototype.addTrack=function(){var t=l.apply(this,arguments);t._pc=this;return t});k.RTCRtpSender.prototype.getStats=function(){return this.track?this._pc.getStats(this.track):Promise.resolve(new Map)}}};c.shimReceiverGetStats=function(k){if("object"===("undefined"===
+typeof k?"undefined":d(k))&&k.RTCPeerConnection&&k.RTCRtpSender&&!(k.RTCRtpSender&&"getStats"in k.RTCRtpReceiver.prototype)){var f=k.RTCPeerConnection.prototype.getReceivers;f&&(k.RTCPeerConnection.prototype.getReceivers=function(){var l=this,t=f.apply(this,[]);t.forEach(function(w){return w._pc=l});return t});q.wrapPeerConnectionEvent(k,"track",function(l){l.receiver._pc=l.srcElement;return l});k.RTCRtpReceiver.prototype.getStats=function(){return this._pc.getStats(this.track)}}};c.shimRemoveStream=
+function(k){!k.RTCPeerConnection||"removeStream"in k.RTCPeerConnection.prototype||(k.RTCPeerConnection.prototype.removeStream=function(f){var l=this;q.deprecated("removeStream","removeTrack");this.getSenders().forEach(function(t){t.track&&f.getTracks().includes(t.track)&&l.removeTrack(t)})})};c.shimRTCDataChannel=function(k){k.DataChannel&&!k.RTCDataChannel&&(k.RTCDataChannel=k.DataChannel)};c.shimAddTransceiver=function(k){if("object"===("undefined"===typeof k?"undefined":d(k))&&k.RTCPeerConnection){var f=
+k.RTCPeerConnection.prototype.addTransceiver;f&&(k.RTCPeerConnection.prototype.addTransceiver=function(){this.setParametersPromises=[];var l=arguments[1],t=l&&"sendEncodings"in l;t&&l.sendEncodings.forEach(function(y){if("rid"in y&&!/^[a-z0-9]{0,16}$/i.test(y.rid))throw new TypeError("Invalid RID value provided.");if("scaleResolutionDownBy"in y&&!(1<=parseFloat(y.scaleResolutionDownBy)))throw new RangeError("scale_resolution_down_by must be >= 1.0");if("maxFramerate"in y&&!(0<=parseFloat(y.maxFramerate)))throw new RangeError("max_framerate must be >= 0.0");
+});var w=f.apply(this,arguments);if(t){var r=w.sender;t=r.getParameters();"encodings"in t||(t.encodings=l.sendEncodings,r.sendEncodings=l.sendEncodings,this.setParametersPromises.push(r.setParameters(t).then(function(){delete r.sendEncodings}).catch(function(){delete r.sendEncodings})))}return w})}};c.shimGetParameters=function(k){if("object"===("undefined"===typeof k?"undefined":d(k))&&k.RTCRtpSender){var f=k.RTCRtpSender.prototype.getParameters;f&&(k.RTCRtpSender.prototype.getParameters=function(){var l=
+f.apply(this,arguments);return"sendEncodings"in this?Object.assign({},{encodings:this.sendEncodings},l):l})}};c.shimCreateOffer=function(k){if("object"===("undefined"===typeof k?"undefined":d(k))&&k.RTCPeerConnection){var f=k.RTCPeerConnection.prototype.createOffer;k.RTCPeerConnection.prototype.createOffer=function(){var l=this,t=arguments;return this.setParametersPromises&&this.setParametersPromises.length?Promise.all(this.setParametersPromises).then(function(){return f.apply(l,t)}).finally(function(){l.setParametersPromises=
+[]}):f.apply(this,arguments)}}};c.shimCreateAnswer=function(k){if("object"===("undefined"===typeof k?"undefined":d(k))&&k.RTCPeerConnection){var f=k.RTCPeerConnection.prototype.createAnswer;k.RTCPeerConnection.prototype.createAnswer=function(){var l=this,t=arguments;return this.setParametersPromises&&this.setParametersPromises.length?Promise.all(this.setParametersPromises).then(function(){return f.apply(l,t)}).finally(function(){l.setParametersPromises=[]}):f.apply(this,arguments)}}};var q=function(k){if(k&&
+k.__esModule)return k;var f={};if(null!=k)for(var l in k)Object.prototype.hasOwnProperty.call(k,l)&&(f[l]=k[l]);f.default=k;return f}(a("../utils"))},{"../utils":15,"./getdisplaymedia":12,"./getusermedia":13}],12:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});c.shimGetDisplayMedia=function(e,d){e.navigator.mediaDevices&&"getDisplayMedia"in e.navigator.mediaDevices||!e.navigator.mediaDevices||(e.navigator.mediaDevices.getDisplayMedia=function(h){if(!h||!h.video)return h=new DOMException("getDisplayMedia without video constraints is undefined"),
+h.name="NotFoundError",h.code=8,Promise.reject(h);!0===h.video?h.video={mediaSource:d}:h.video.mediaSource=d;return e.navigator.mediaDevices.getUserMedia(h)})}},{}],13:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});var e="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(h){return typeof h}:function(h){return h&&"function"===typeof Symbol&&h.constructor===Symbol&&h!==Symbol.prototype?"symbol":typeof h};c.shimGetUserMedia=function(h){var g=d.detectBrowser(h),
+q=h&&h.navigator;h=h&&h.MediaStreamTrack;q.getUserMedia=function(w,r,y){d.deprecated("navigator.getUserMedia","navigator.mediaDevices.getUserMedia");q.mediaDevices.getUserMedia(w).then(r,y)};if(!(55<g.version&&"autoGainControl"in q.mediaDevices.getSupportedConstraints())){var k=function(w,r,y){r in w&&!(y in w)&&(w[y]=w[r],delete w[r])},f=q.mediaDevices.getUserMedia.bind(q.mediaDevices);q.mediaDevices.getUserMedia=function(w){"object"===("undefined"===typeof w?"undefined":e(w))&&"object"===e(w.audio)&&
+(w=JSON.parse(JSON.stringify(w)),k(w.audio,"autoGainControl","mozAutoGainControl"),k(w.audio,"noiseSuppression","mozNoiseSuppression"));return f(w)};if(h&&h.prototype.getSettings){var l=h.prototype.getSettings;h.prototype.getSettings=function(){var w=l.apply(this,arguments);k(w,"mozAutoGainControl","autoGainControl");k(w,"mozNoiseSuppression","noiseSuppression");return w}}if(h&&h.prototype.applyConstraints){var t=h.prototype.applyConstraints;h.prototype.applyConstraints=function(w){"audio"===this.kind&&
+"object"===("undefined"===typeof w?"undefined":e(w))&&(w=JSON.parse(JSON.stringify(w)),k(w,"autoGainControl","mozAutoGainControl"),k(w,"noiseSuppression","mozNoiseSuppression"));return t.apply(this,[w])}}}};var d=function(h){if(h&&h.__esModule)return h;var g={};if(null!=h)for(var q in h)Object.prototype.hasOwnProperty.call(h,q)&&(g[q]=h[q]);g.default=h;return g}(a("../utils"))},{"../utils":15}],14:[function(a,b,c){function e(g){return g&&void 0!==g.video?Object.assign({},g,{video:h.compactObject(g.video)}):
+g}Object.defineProperty(c,"__esModule",{value:!0});var d="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(g){return typeof g}:function(g){return g&&"function"===typeof Symbol&&g.constructor===Symbol&&g!==Symbol.prototype?"symbol":typeof g};c.shimLocalStreamsAPI=function(g){if("object"===("undefined"===typeof g?"undefined":d(g))&&g.RTCPeerConnection){"getLocalStreams"in g.RTCPeerConnection.prototype||(g.RTCPeerConnection.prototype.getLocalStreams=function(){this._localStreams||
+(this._localStreams=[]);return this._localStreams});if(!("addStream"in g.RTCPeerConnection.prototype)){var q=g.RTCPeerConnection.prototype.addTrack;g.RTCPeerConnection.prototype.addStream=function(k){var f=this;this._localStreams||(this._localStreams=[]);this._localStreams.includes(k)||this._localStreams.push(k);k.getAudioTracks().forEach(function(l){return q.call(f,l,k)});k.getVideoTracks().forEach(function(l){return q.call(f,l,k)})};g.RTCPeerConnection.prototype.addTrack=function(k){for(var f=this,
+l=arguments.length,t=Array(1<l?l-1:0),w=1;w<l;w++)t[w-1]=arguments[w];t&&t.forEach(function(r){f._localStreams?f._localStreams.includes(r)||f._localStreams.push(r):f._localStreams=[r]});return q.apply(this,arguments)}}"removeStream"in g.RTCPeerConnection.prototype||(g.RTCPeerConnection.prototype.removeStream=function(k){var f=this;this._localStreams||(this._localStreams=[]);var l=this._localStreams.indexOf(k);if(-1!==l){this._localStreams.splice(l,1);var t=k.getTracks();this.getSenders().forEach(function(w){t.includes(w.track)&&
+f.removeTrack(w)})}})}};c.shimRemoteStreamsAPI=function(g){if("object"===("undefined"===typeof g?"undefined":d(g))&&g.RTCPeerConnection&&("getRemoteStreams"in g.RTCPeerConnection.prototype||(g.RTCPeerConnection.prototype.getRemoteStreams=function(){return this._remoteStreams?this._remoteStreams:[]}),!("onaddstream"in g.RTCPeerConnection.prototype))){Object.defineProperty(g.RTCPeerConnection.prototype,"onaddstream",{get:function(){return this._onaddstream},set:function(k){var f=this;this._onaddstream&&
+(this.removeEventListener("addstream",this._onaddstream),this.removeEventListener("track",this._onaddstreampoly));this.addEventListener("addstream",this._onaddstream=k);this.addEventListener("track",this._onaddstreampoly=function(l){l.streams.forEach(function(t){f._remoteStreams||(f._remoteStreams=[]);if(!f._remoteStreams.includes(t)){f._remoteStreams.push(t);var w=new Event("addstream");w.stream=t;f.dispatchEvent(w)}})})}});var q=g.RTCPeerConnection.prototype.setRemoteDescription;g.RTCPeerConnection.prototype.setRemoteDescription=
+function(){var k=this;this._onaddstreampoly||this.addEventListener("track",this._onaddstreampoly=function(f){f.streams.forEach(function(l){k._remoteStreams||(k._remoteStreams=[]);if(!(0<=k._remoteStreams.indexOf(l))){k._remoteStreams.push(l);var t=new Event("addstream");t.stream=l;k.dispatchEvent(t)}})});return q.apply(k,arguments)}}};c.shimCallbacksAPI=function(g){if("object"===("undefined"===typeof g?"undefined":d(g))&&g.RTCPeerConnection){g=g.RTCPeerConnection.prototype;var q=g.createOffer,k=g.createAnswer,
+f=g.setLocalDescription,l=g.setRemoteDescription,t=g.addIceCandidate;g.createOffer=function(r,y){var u=q.apply(this,[2<=arguments.length?arguments[2]:arguments[0]]);if(!y)return u;u.then(r,y);return Promise.resolve()};g.createAnswer=function(r,y){var u=k.apply(this,[2<=arguments.length?arguments[2]:arguments[0]]);if(!y)return u;u.then(r,y);return Promise.resolve()};var w=function(r,y,u){r=f.apply(this,[r]);if(!u)return r;r.then(y,u);return Promise.resolve()};g.setLocalDescription=w;w=function(r,y,
+u){r=l.apply(this,[r]);if(!u)return r;r.then(y,u);return Promise.resolve()};g.setRemoteDescription=w;w=function(r,y,u){r=t.apply(this,[r]);if(!u)return r;r.then(y,u);return Promise.resolve()};g.addIceCandidate=w}};c.shimGetUserMedia=function(g){var q=g&&g.navigator;if(q.mediaDevices&&q.mediaDevices.getUserMedia){g=q.mediaDevices;var k=g.getUserMedia.bind(g);q.mediaDevices.getUserMedia=function(f){return k(e(f))}}!q.getUserMedia&&q.mediaDevices&&q.mediaDevices.getUserMedia&&(q.getUserMedia=function(f,
+l,t){q.mediaDevices.getUserMedia(f).then(l,t)}.bind(q))};c.shimConstraints=e;c.shimRTCIceServerUrls=function(g){var q=g.RTCPeerConnection;g.RTCPeerConnection=function(k,f){if(k&&k.iceServers){for(var l=[],t=0;t<k.iceServers.length;t++){var w=k.iceServers[t];!w.hasOwnProperty("urls")&&w.hasOwnProperty("url")?(h.deprecated("RTCIceServer.url","RTCIceServer.urls"),w=JSON.parse(JSON.stringify(w)),w.urls=w.url,delete w.url,l.push(w)):l.push(k.iceServers[t])}k.iceServers=l}return new q(k,f)};g.RTCPeerConnection.prototype=
+q.prototype;"generateCertificate"in g.RTCPeerConnection&&Object.defineProperty(g.RTCPeerConnection,"generateCertificate",{get:function(){return q.generateCertificate}})};c.shimTrackEventTransceiver=function(g){"object"===("undefined"===typeof g?"undefined":d(g))&&g.RTCTrackEvent&&"receiver"in g.RTCTrackEvent.prototype&&!("transceiver"in g.RTCTrackEvent.prototype)&&Object.defineProperty(g.RTCTrackEvent.prototype,"transceiver",{get:function(){return{receiver:this.receiver}}})};c.shimCreateOfferLegacy=
+function(g){var q=g.RTCPeerConnection.prototype.createOffer;g.RTCPeerConnection.prototype.createOffer=function(k){if(k){"undefined"!==typeof k.offerToReceiveAudio&&(k.offerToReceiveAudio=!!k.offerToReceiveAudio);var f=this.getTransceivers().find(function(l){return"audio"===l.receiver.track.kind});!1===k.offerToReceiveAudio&&f?"sendrecv"===f.direction?f.setDirection?f.setDirection("sendonly"):f.direction="sendonly":"recvonly"===f.direction&&(f.setDirection?f.setDirection("inactive"):f.direction="inactive"):
+!0!==k.offerToReceiveAudio||f||this.addTransceiver("audio");"undefined"!==typeof k.offerToReceiveVideo&&(k.offerToReceiveVideo=!!k.offerToReceiveVideo);f=this.getTransceivers().find(function(l){return"video"===l.receiver.track.kind});!1===k.offerToReceiveVideo&&f?"sendrecv"===f.direction?f.setDirection?f.setDirection("sendonly"):f.direction="sendonly":"recvonly"===f.direction&&(f.setDirection?f.setDirection("inactive"):f.direction="inactive"):!0!==k.offerToReceiveVideo||f||this.addTransceiver("video")}return q.apply(this,
+arguments)}};c.shimAudioContext=function(g){"object"!==("undefined"===typeof g?"undefined":d(g))||g.AudioContext||(g.AudioContext=g.webkitAudioContext)};var h=function(g){if(g&&g.__esModule)return g;var q={};if(null!=g)for(var k in g)Object.prototype.hasOwnProperty.call(g,k)&&(q[k]=g[k]);q.default=g;return q}(a("../utils"))},{"../utils":15}],15:[function(a,b,c){function e(f,l,t){return(f=f.match(l))&&f.length>=t&&parseInt(f[t],10)}function d(f){return"[object Object]"!==Object.prototype.toString.call(f)?
+f:Object.keys(f).reduce(function(l,t){var w="[object Object]"===Object.prototype.toString.call(f[t]),r=w?d(f[t]):f[t];w=w&&!Object.keys(r).length;if(void 0===r||w)return l;w=Object;var y=w.assign,u={};t in u?Object.defineProperty(u,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):u[t]=r;return y.call(w,l,u)},{})}function h(f,l,t){l&&!t.has(l.id)&&(t.set(l.id,l),Object.keys(l).forEach(function(w){w.endsWith("Id")?h(f,f.get(l[w]),t):w.endsWith("Ids")&&l[w].forEach(function(r){h(f,f.get(r),t)})}))}
+Object.defineProperty(c,"__esModule",{value:!0});var g="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(f){return typeof f}:function(f){return f&&"function"===typeof Symbol&&f.constructor===Symbol&&f!==Symbol.prototype?"symbol":typeof f};c.extractVersion=e;c.wrapPeerConnectionEvent=function(f,l,t){if(f.RTCPeerConnection){f=f.RTCPeerConnection.prototype;var w=f.addEventListener;f.addEventListener=function(y,u){if(y!==l)return w.apply(this,arguments);var A=function(m){(m=t(m))&&
+(u.handleEvent?u.handleEvent(m):u(m))};this._eventMap=this._eventMap||{};this._eventMap[l]||(this._eventMap[l]=new Map);this._eventMap[l].set(u,A);return w.apply(this,[y,A])};var r=f.removeEventListener;f.removeEventListener=function(y,u){if(y!==l||!this._eventMap||!this._eventMap[l]||!this._eventMap[l].has(u))return r.apply(this,arguments);var A=this._eventMap[l].get(u);this._eventMap[l].delete(u);0===this._eventMap[l].size&&delete this._eventMap[l];0===Object.keys(this._eventMap).length&&delete this._eventMap;
+return r.apply(this,[y,A])};Object.defineProperty(f,"on"+l,{get:function(){return this["_on"+l]},set:function(y){this["_on"+l]&&(this.removeEventListener(l,this["_on"+l]),delete this["_on"+l]);y&&this.addEventListener(l,this["_on"+l]=y)},enumerable:!0,configurable:!0})}};c.disableLog=function(f){return"boolean"!==typeof f?Error("Argument type: "+("undefined"===typeof f?"undefined":g(f))+". Please use a boolean."):(q=f)?"adapter.js logging disabled":"adapter.js logging enabled"};c.disableWarnings=
+function(f){if("boolean"!==typeof f)return Error("Argument type: "+("undefined"===typeof f?"undefined":g(f))+". Please use a boolean.");k=!f;return"adapter.js deprecation warnings "+(f?"disabled":"enabled")};c.log=function(){"object"!==("undefined"===typeof window?"undefined":g(window))||q||"undefined"!==typeof console&&"function"===typeof console.log&&console.log.apply(console,arguments)};c.deprecated=function(f,l){k&&console.warn(f+" is deprecated, please use "+l+" instead.")};c.detectBrowser=function(f){var l=
+f.navigator,t={browser:null,version:null};if("undefined"===typeof f||!f.navigator)return t.browser="Not a browser.",t;l.mozGetUserMedia?(t.browser="firefox",t.version=e(l.userAgent,/Firefox\/(\d+)\./,1)):l.webkitGetUserMedia||!1===f.isSecureContext&&f.webkitRTCPeerConnection&&!f.RTCIceGatherer?(t.browser="chrome",t.version=e(l.userAgent,/Chrom(e|ium)\/(\d+)\./,2)):l.mediaDevices&&l.userAgent.match(/Edge\/(\d+).(\d+)$/)?(t.browser="edge",t.version=e(l.userAgent,/Edge\/(\d+).(\d+)$/,2)):f.RTCPeerConnection&&
+l.userAgent.match(/AppleWebKit\/(\d+)\./)?(t.browser="safari",t.version=e(l.userAgent,/AppleWebKit\/(\d+)\./,1),t.supportsUnifiedPlan=f.RTCRtpTransceiver&&"currentDirection"in f.RTCRtpTransceiver.prototype):t.browser="Not a supported browser.";return t};c.compactObject=d;c.walkStats=h;c.filterStats=function(f,l,t){var w=t?"outbound-rtp":"inbound-rtp",r=new Map;if(null===l)return r;var y=[];f.forEach(function(u){"track"===u.type&&u.trackIdentifier===l.id&&y.push(u)});y.forEach(function(u){f.forEach(function(A){A.type===
+w&&A.trackId===u.id&&h(f,A,r)})});return r};var q=!0,k=!0},{}],16:[function(a,b,c){function e(l,t,w,r,y){t=f.writeRtpDescription(l.kind,t);t+=f.writeIceParameters(l.iceGatherer.getLocalParameters());t+=f.writeDtlsParameters(l.dtlsTransport.getLocalParameters(),"offer"===w?"actpass":y||"active");t+="a=mid:"+l.mid+"\r\n";t=l.rtpSender&&l.rtpReceiver?t+"a=sendrecv\r\n":l.rtpSender?t+"a=sendonly\r\n":l.rtpReceiver?t+"a=recvonly\r\n":t+"a=inactive\r\n";l.rtpSender&&(w=l.rtpSender._initialTrackId||l.rtpSender.track.id,
+l.rtpSender._initialTrackId=w,r="msid:"+(r?r.id:"-")+" "+w+"\r\n",t=t+("a="+r)+("a=ssrc:"+l.sendEncodingParameters[0].ssrc+" "+r),l.sendEncodingParameters[0].rtx&&(t+="a=ssrc:"+l.sendEncodingParameters[0].rtx.ssrc+" "+r,t+="a=ssrc-group:FID "+l.sendEncodingParameters[0].ssrc+" "+l.sendEncodingParameters[0].rtx.ssrc+"\r\n"));t+="a=ssrc:"+l.sendEncodingParameters[0].ssrc+" cname:"+f.localCName+"\r\n";l.rtpSender&&l.sendEncodingParameters[0].rtx&&(t+="a=ssrc:"+l.sendEncodingParameters[0].rtx.ssrc+" cname:"+
+f.localCName+"\r\n");return t}function d(l,t){var w=!1;l=JSON.parse(JSON.stringify(l));return l.filter(function(r){if(r&&(r.urls||r.url)){var y=r.urls||r.url;r.url&&!r.urls&&console.warn("RTCIceServer.url is deprecated! Use urls instead.");var u="string"===typeof y;u&&(y=[y]);y=y.filter(function(A){return 0!==A.indexOf("turn:")||-1===A.indexOf("transport=udp")||-1!==A.indexOf("turn:[")||w?0===A.indexOf("stun:")&&14393<=t&&-1===A.indexOf("?transport=udp"):w=!0});delete r.url;r.urls=u?y[0]:y;return!!y.length}})}
+function h(l,t){var w={codecs:[],headerExtensions:[],fecMechanisms:[]},r=function(u,A){u=parseInt(u,10);for(var m=0;m<A.length;m++)if(A[m].payloadType===u||A[m].preferredPayloadType===u)return A[m]},y=function(u,A,m,n){u=r(u.parameters.apt,m);A=r(A.parameters.apt,n);return u&&A&&u.name.toLowerCase()===A.name.toLowerCase()};l.codecs.forEach(function(u){for(var A=0;A<t.codecs.length;A++){var m=t.codecs[A];if(u.name.toLowerCase()===m.name.toLowerCase()&&u.clockRate===m.clockRate&&("rtx"!==u.name.toLowerCase()||
+!u.parameters||!m.parameters.apt||y(u,m,l.codecs,t.codecs))){m=JSON.parse(JSON.stringify(m));m.numChannels=Math.min(u.numChannels,m.numChannels);w.codecs.push(m);m.rtcpFeedback=m.rtcpFeedback.filter(function(n){for(var x=0;x<u.rtcpFeedback.length;x++)if(u.rtcpFeedback[x].type===n.type&&u.rtcpFeedback[x].parameter===n.parameter)return!0;return!1});break}}});l.headerExtensions.forEach(function(u){for(var A=0;A<t.headerExtensions.length;A++){var m=t.headerExtensions[A];if(u.uri===m.uri){w.headerExtensions.push(m);
+break}}});return w}function g(l,t,w){return-1!=={offer:{setLocalDescription:["stable","have-local-offer"],setRemoteDescription:["stable","have-remote-offer"]},answer:{setLocalDescription:["have-remote-offer","have-local-pranswer"],setRemoteDescription:["have-local-offer","have-remote-pranswer"]}}[t][l].indexOf(w)}function q(l,t){var w=l.getRemoteCandidates().find(function(r){return t.foundation===r.foundation&&t.ip===r.ip&&t.port===r.port&&t.priority===r.priority&&t.protocol===r.protocol&&t.type===
+r.type});w||l.addRemoteCandidate(t);return!w}function k(l,t){t=Error(t);t.name=l;t.code={NotSupportedError:9,InvalidStateError:11,InvalidAccessError:15,TypeError:void 0,OperationError:void 0}[l];return t}var f=a("sdp");b.exports=function(l,t){function w(m,n){n.addTrack(m);n.dispatchEvent(new l.MediaStreamTrackEvent("addtrack",{track:m}))}function r(m,n){n.removeTrack(m);n.dispatchEvent(new l.MediaStreamTrackEvent("removetrack",{track:m}))}function y(m,n,x,z){var B=new Event("track");B.track=n;B.receiver=
+x;B.transceiver={receiver:x};B.streams=z;l.setTimeout(function(){m._dispatchEvent("track",B)})}var u=function(m){var n=this,x=document.createDocumentFragment();["addEventListener","removeEventListener","dispatchEvent"].forEach(function(B){n[B]=x[B].bind(x)});this.canTrickleIceCandidates=null;this.needNegotiation=!1;this.localStreams=[];this.remoteStreams=[];this._remoteDescription=this._localDescription=null;this.signalingState="stable";this.iceGatheringState=this.connectionState=this.iceConnectionState=
+"new";m=JSON.parse(JSON.stringify(m||{}));this.usingBundle="max-bundle"===m.bundlePolicy;if("negotiate"===m.rtcpMuxPolicy)throw k("NotSupportedError","rtcpMuxPolicy 'negotiate' is not supported");m.rtcpMuxPolicy||(m.rtcpMuxPolicy="require");switch(m.iceTransportPolicy){case "all":case "relay":break;default:m.iceTransportPolicy="all"}switch(m.bundlePolicy){case "balanced":case "max-compat":case "max-bundle":break;default:m.bundlePolicy="balanced"}m.iceServers=d(m.iceServers||[],t);this._iceGatherers=
+[];if(m.iceCandidatePoolSize)for(var z=m.iceCandidatePoolSize;0<z;z--)this._iceGatherers.push(new l.RTCIceGatherer({iceServers:m.iceServers,gatherPolicy:m.iceTransportPolicy}));else m.iceCandidatePoolSize=0;this._config=m;this.transceivers=[];this._sdpSessionId=f.generateSessionId();this._sdpSessionVersion=0;this._dtlsRole=void 0;this._isClosed=!1};Object.defineProperty(u.prototype,"localDescription",{configurable:!0,get:function(){return this._localDescription}});Object.defineProperty(u.prototype,
+"remoteDescription",{configurable:!0,get:function(){return this._remoteDescription}});u.prototype.onicecandidate=null;u.prototype.onaddstream=null;u.prototype.ontrack=null;u.prototype.onremovestream=null;u.prototype.onsignalingstatechange=null;u.prototype.oniceconnectionstatechange=null;u.prototype.onconnectionstatechange=null;u.prototype.onicegatheringstatechange=null;u.prototype.onnegotiationneeded=null;u.prototype.ondatachannel=null;u.prototype._dispatchEvent=function(m,n){if(!this._isClosed&&
+(this.dispatchEvent(n),"function"===typeof this["on"+m]))this["on"+m](n)};u.prototype._emitGatheringStateChange=function(){var m=new Event("icegatheringstatechange");this._dispatchEvent("icegatheringstatechange",m)};u.prototype.getConfiguration=function(){return this._config};u.prototype.getLocalStreams=function(){return this.localStreams};u.prototype.getRemoteStreams=function(){return this.remoteStreams};u.prototype._createTransceiver=function(m,n){var x=0<this.transceivers.length;m={track:null,
+iceGatherer:null,iceTransport:null,dtlsTransport:null,localCapabilities:null,remoteCapabilities:null,rtpSender:null,rtpReceiver:null,kind:m,mid:null,sendEncodingParameters:null,recvEncodingParameters:null,stream:null,associatedRemoteMediaStreams:[],wantReceive:!0};this.usingBundle&&x?(m.iceTransport=this.transceivers[0].iceTransport,m.dtlsTransport=this.transceivers[0].dtlsTransport):(x=this._createIceAndDtlsTransports(),m.iceTransport=x.iceTransport,m.dtlsTransport=x.dtlsTransport);n||this.transceivers.push(m);
+return m};u.prototype.addTrack=function(m,n){if(this._isClosed)throw k("InvalidStateError","Attempted to call addTrack on a closed peerconnection.");if(this.transceivers.find(function(B){return B.track===m}))throw k("InvalidAccessError","Track already exists.");for(var x,z=0;z<this.transceivers.length;z++)this.transceivers[z].track||this.transceivers[z].kind!==m.kind||(x=this.transceivers[z]);x||(x=this._createTransceiver(m.kind));this._maybeFireNegotiationNeeded();-1===this.localStreams.indexOf(n)&&
+this.localStreams.push(n);x.track=m;x.stream=n;x.rtpSender=new l.RTCRtpSender(m,x.dtlsTransport);return x.rtpSender};u.prototype.addStream=function(m){var n=this;if(15025<=t)m.getTracks().forEach(function(z){n.addTrack(z,m)});else{var x=m.clone();m.getTracks().forEach(function(z,B){var C=x.getTracks()[B];z.addEventListener("enabled",function(G){C.enabled=G.enabled})});x.getTracks().forEach(function(z){n.addTrack(z,x)})}};u.prototype.removeTrack=function(m){if(this._isClosed)throw k("InvalidStateError",
+"Attempted to call removeTrack on a closed peerconnection.");if(!(m instanceof l.RTCRtpSender))throw new TypeError("Argument 1 of RTCPeerConnection.removeTrack does not implement interface RTCRtpSender.");var n=this.transceivers.find(function(z){return z.rtpSender===m});if(!n)throw k("InvalidAccessError","Sender was not created by this connection.");var x=n.stream;n.rtpSender.stop();n.rtpSender=null;n.track=null;n.stream=null;-1===this.transceivers.map(function(z){return z.stream}).indexOf(x)&&-1<
+this.localStreams.indexOf(x)&&this.localStreams.splice(this.localStreams.indexOf(x),1);this._maybeFireNegotiationNeeded()};u.prototype.removeStream=function(m){var n=this;m.getTracks().forEach(function(x){var z=n.getSenders().find(function(B){return B.track===x});z&&n.removeTrack(z)})};u.prototype.getSenders=function(){return this.transceivers.filter(function(m){return!!m.rtpSender}).map(function(m){return m.rtpSender})};u.prototype.getReceivers=function(){return this.transceivers.filter(function(m){return!!m.rtpReceiver}).map(function(m){return m.rtpReceiver})};
+u.prototype._createIceGatherer=function(m,n){var x=this;if(n&&0<m)return this.transceivers[0].iceGatherer;if(this._iceGatherers.length)return this._iceGatherers.shift();var z=new l.RTCIceGatherer({iceServers:this._config.iceServers,gatherPolicy:this._config.iceTransportPolicy});Object.defineProperty(z,"state",{value:"new",writable:!0});this.transceivers[m].bufferedCandidateEvents=[];this.transceivers[m].bufferCandidates=function(B){var C=!B.candidate||0===Object.keys(B.candidate).length;z.state=C?
+"completed":"gathering";null!==x.transceivers[m].bufferedCandidateEvents&&x.transceivers[m].bufferedCandidateEvents.push(B)};z.addEventListener("localcandidate",this.transceivers[m].bufferCandidates);return z};u.prototype._gather=function(m,n){var x=this,z=this.transceivers[n].iceGatherer;if(!z.onlocalcandidate){var B=this.transceivers[n].bufferedCandidateEvents;this.transceivers[n].bufferedCandidateEvents=null;z.removeEventListener("localcandidate",this.transceivers[n].bufferCandidates);z.onlocalcandidate=
+function(C){if(!(x.usingBundle&&0<n)){var G=new Event("icecandidate");G.candidate={sdpMid:m,sdpMLineIndex:n};var M=C.candidate;if(C=!M||0===Object.keys(M).length){if("new"===z.state||"gathering"===z.state)z.state="completed"}else"new"===z.state&&(z.state="gathering"),M.component=1,M.ufrag=z.getLocalParameters().usernameFragment,M=f.writeCandidate(M),G.candidate=Object.assign(G.candidate,f.parseCandidate(M)),G.candidate.candidate=M,G.candidate.toJSON=function(){return{candidate:G.candidate.candidate,
+sdpMid:G.candidate.sdpMid,sdpMLineIndex:G.candidate.sdpMLineIndex,usernameFragment:G.candidate.usernameFragment}};M=f.getMediaSections(x._localDescription.sdp);M[G.candidate.sdpMLineIndex]=C?M[G.candidate.sdpMLineIndex]+"a=end-of-candidates\r\n":M[G.candidate.sdpMLineIndex]+("a="+G.candidate.candidate+"\r\n");x._localDescription.sdp=f.getDescription(x._localDescription.sdp)+M.join("");M=x.transceivers.every(function(Y){return Y.iceGatherer&&"completed"===Y.iceGatherer.state});"gathering"!==x.iceGatheringState&&
+(x.iceGatheringState="gathering",x._emitGatheringStateChange());C||x._dispatchEvent("icecandidate",G);M&&(x._dispatchEvent("icecandidate",new Event("icecandidate")),x.iceGatheringState="complete",x._emitGatheringStateChange())}};l.setTimeout(function(){B.forEach(function(C){z.onlocalcandidate(C)})},0)}};u.prototype._createIceAndDtlsTransports=function(){var m=this,n=new l.RTCIceTransport(null);n.onicestatechange=function(){m._updateIceConnectionState();m._updateConnectionState()};var x=new l.RTCDtlsTransport(n);
+x.ondtlsstatechange=function(){m._updateConnectionState()};x.onerror=function(){Object.defineProperty(x,"state",{value:"failed",writable:!0});m._updateConnectionState()};return{iceTransport:n,dtlsTransport:x}};u.prototype._disposeIceAndDtlsTransports=function(m){var n=this.transceivers[m].iceGatherer;n&&(delete n.onlocalcandidate,delete this.transceivers[m].iceGatherer);if(n=this.transceivers[m].iceTransport)delete n.onicestatechange,delete this.transceivers[m].iceTransport;if(n=this.transceivers[m].dtlsTransport)delete n.ondtlsstatechange,
+delete n.onerror,delete this.transceivers[m].dtlsTransport};u.prototype._transceive=function(m,n,x){var z=h(m.localCapabilities,m.remoteCapabilities);n&&m.rtpSender&&(z.encodings=m.sendEncodingParameters,z.rtcp={cname:f.localCName,compound:m.rtcpParameters.compound},m.recvEncodingParameters.length&&(z.rtcp.ssrc=m.recvEncodingParameters[0].ssrc),m.rtpSender.send(z));x&&m.rtpReceiver&&0<z.codecs.length&&("video"===m.kind&&m.recvEncodingParameters&&15019>t&&m.recvEncodingParameters.forEach(function(B){delete B.rtx}),
+z.encodings=m.recvEncodingParameters.length?m.recvEncodingParameters:[{}],z.rtcp={compound:m.rtcpParameters.compound},m.rtcpParameters.cname&&(z.rtcp.cname=m.rtcpParameters.cname),m.sendEncodingParameters.length&&(z.rtcp.ssrc=m.sendEncodingParameters[0].ssrc),m.rtpReceiver.receive(z))};u.prototype.setLocalDescription=function(m){var n=this;if(-1===["offer","answer"].indexOf(m.type))return Promise.reject(k("TypeError",'Unsupported type "'+m.type+'"'));if(!g("setLocalDescription",m.type,n.signalingState)||
+n._isClosed)return Promise.reject(k("InvalidStateError","Can not set local "+m.type+" in state "+n.signalingState));if("offer"===m.type){var x=f.splitSections(m.sdp);var z=x.shift();x.forEach(function(C,G){C=f.parseRtpParameters(C);n.transceivers[G].localCapabilities=C});n.transceivers.forEach(function(C,G){n._gather(C.mid,G)})}else if("answer"===m.type){x=f.splitSections(n._remoteDescription.sdp);z=x.shift();var B=0<f.matchPrefix(z,"a=ice-lite").length;x.forEach(function(C,G){var M=n.transceivers[G],
+Y=M.iceGatherer,L=M.iceTransport,J=M.dtlsTransport,P=M.localCapabilities,U=M.remoteCapabilities;if(!(f.isRejected(C)&&0===f.matchPrefix(C,"a=bundle-only").length||M.rejected)){var Z=f.getIceParameters(C,z);C=f.getDtlsParameters(C,z);B&&(C.role="server");n.usingBundle&&0!==G||(n._gather(M.mid,G),"new"===L.state&&L.start(Y,Z,B?"controlling":"controlled"),"new"===J.state&&J.start(C));G=h(P,U);n._transceive(M,0<G.codecs.length,!1)}})}n._localDescription={type:m.type,sdp:m.sdp};"offer"===m.type?n._updateSignalingState("have-local-offer"):
+n._updateSignalingState("stable");return Promise.resolve()};u.prototype.setRemoteDescription=function(m){var n=this;if(-1===["offer","answer"].indexOf(m.type))return Promise.reject(k("TypeError",'Unsupported type "'+m.type+'"'));if(!g("setRemoteDescription",m.type,n.signalingState)||n._isClosed)return Promise.reject(k("InvalidStateError","Can not set remote "+m.type+" in state "+n.signalingState));var x={};n.remoteStreams.forEach(function(L){x[L.id]=L});var z=[],B=f.splitSections(m.sdp),C=B.shift(),
+G=0<f.matchPrefix(C,"a=ice-lite").length,M=0<f.matchPrefix(C,"a=group:BUNDLE ").length;n.usingBundle=M;var Y=f.matchPrefix(C,"a=ice-options:")[0];n.canTrickleIceCandidates=Y?0<=Y.substr(14).split(" ").indexOf("trickle"):!1;B.forEach(function(L,J){var P=f.splitLines(L),U=f.getKind(L),Z=f.isRejected(L)&&0===f.matchPrefix(L,"a=bundle-only").length,la=P[0].substr(2).split(" ")[2];P=f.getDirection(L,C);var W=f.parseMsid(L),na=f.getMid(L)||f.generateIdentifier();if(Z||"application"===U&&("DTLS/SCTP"===
+la||"UDP/DTLS/SCTP"===la))n.transceivers[J]={mid:na,kind:U,protocol:la,rejected:!0};else{!Z&&n.transceivers[J]&&n.transceivers[J].rejected&&(n.transceivers[J]=n._createTransceiver(U,!0));var Ba=f.parseRtpParameters(L);if(!Z){var oa=f.getIceParameters(L,C);var Ca=f.getDtlsParameters(L,C);Ca.role="client"}la=f.parseRtpEncodingParameters(L);var Da=f.parseRtcpParameters(L),Ea=0<f.matchPrefix(L,"a=end-of-candidates",C).length,ma=f.matchPrefix(L,"a=candidate:").map(function(X){return f.parseCandidate(X)}).filter(function(X){return 1===
+X.component});("offer"===m.type||"answer"===m.type)&&!Z&&M&&0<J&&n.transceivers[J]&&(n._disposeIceAndDtlsTransports(J),n.transceivers[J].iceGatherer=n.transceivers[0].iceGatherer,n.transceivers[J].iceTransport=n.transceivers[0].iceTransport,n.transceivers[J].dtlsTransport=n.transceivers[0].dtlsTransport,n.transceivers[J].rtpSender&&n.transceivers[J].rtpSender.setTransport(n.transceivers[0].dtlsTransport),n.transceivers[J].rtpReceiver&&n.transceivers[J].rtpReceiver.setTransport(n.transceivers[0].dtlsTransport));
+if("offer"!==m.type||Z)"answer"!==m.type||Z||(N=n.transceivers[J],ja=N.iceGatherer,U=N.iceTransport,na=N.dtlsTransport,ha=N.rtpReceiver,Z=N.sendEncodingParameters,L=N.localCapabilities,n.transceivers[J].recvEncodingParameters=la,n.transceivers[J].remoteCapabilities=Ba,n.transceivers[J].rtcpParameters=Da,ma.length&&"new"===U.state&&(!G&&!Ea||M&&0!==J?ma.forEach(function(X){q(N.iceTransport,X)}):U.setRemoteCandidates(ma)),M&&0!==J||("new"===U.state&&U.start(ja,oa,"controlling"),"new"===na.state&&na.start(Ca)),
+!h(N.localCapabilities,N.remoteCapabilities).codecs.filter(function(X){return"rtx"===X.name.toLowerCase()}).length&&N.sendEncodingParameters[0].rtx&&delete N.sendEncodingParameters[0].rtx,n._transceive(N,"sendrecv"===P||"recvonly"===P,"sendrecv"===P||"sendonly"===P),!ha||"sendrecv"!==P&&"sendonly"!==P?delete N.rtpReceiver:(P=ha.track,W?(x[W.stream]||(x[W.stream]=new l.MediaStream),w(P,x[W.stream]),z.push([P,ha,x[W.stream]])):(x.default||(x.default=new l.MediaStream),w(P,x.default),z.push([P,ha,x.default]))));
+else{var N=n.transceivers[J]||n._createTransceiver(U);N.mid=na;N.iceGatherer||(N.iceGatherer=n._createIceGatherer(J,M));ma.length&&"new"===N.iceTransport.state&&(!Ea||M&&0!==J?ma.forEach(function(X){q(N.iceTransport,X)}):N.iceTransport.setRemoteCandidates(ma));L=l.RTCRtpReceiver.getCapabilities(U);15019>t&&(L.codecs=L.codecs.filter(function(X){return"rtx"!==X.name}));Z=N.sendEncodingParameters||[{ssrc:1001*(2*J+2)}];oa=!1;if("sendrecv"===P||"sendonly"===P){oa=!N.rtpReceiver;var ha=N.rtpReceiver||
+new l.RTCRtpReceiver(N.dtlsTransport,U);if(oa){P=ha.track;if(!W||"-"!==W.stream)if(W){x[W.stream]||(x[W.stream]=new l.MediaStream,Object.defineProperty(x[W.stream],"id",{get:function(){return W.stream}}));Object.defineProperty(P,"id",{get:function(){return W.track}});var ja=x[W.stream]}else x.default||(x.default=new l.MediaStream),ja=x.default;ja&&(w(P,ja),N.associatedRemoteMediaStreams.push(ja));z.push([P,ha,ja])}}else N.rtpReceiver&&N.rtpReceiver.track&&(N.associatedRemoteMediaStreams.forEach(function(X){var Fa=
+X.getTracks().find(function(Xb){return Xb.id===N.rtpReceiver.track.id});Fa&&r(Fa,X)}),N.associatedRemoteMediaStreams=[]);N.localCapabilities=L;N.remoteCapabilities=Ba;N.rtpReceiver=ha;N.rtcpParameters=Da;N.sendEncodingParameters=Z;N.recvEncodingParameters=la;n._transceive(n.transceivers[J],!1,oa)}}});void 0===n._dtlsRole&&(n._dtlsRole="offer"===m.type?"active":"passive");n._remoteDescription={type:m.type,sdp:m.sdp};"offer"===m.type?n._updateSignalingState("have-remote-offer"):n._updateSignalingState("stable");
+Object.keys(x).forEach(function(L){var J=x[L];if(J.getTracks().length){if(-1===n.remoteStreams.indexOf(J)){n.remoteStreams.push(J);var P=new Event("addstream");P.stream=J;l.setTimeout(function(){n._dispatchEvent("addstream",P)})}z.forEach(function(U){J.id===U[2].id&&y(n,U[0],U[1],[J])})}});z.forEach(function(L){L[2]||y(n,L[0],L[1],[])});l.setTimeout(function(){n&&n.transceivers&&n.transceivers.forEach(function(L){L.iceTransport&&"new"===L.iceTransport.state&&0<L.iceTransport.getRemoteCandidates().length&&
+(console.warn("Timeout for addRemoteCandidate. Consider sending an end-of-candidates notification"),L.iceTransport.addRemoteCandidate({}))})},4E3);return Promise.resolve()};u.prototype.close=function(){this.transceivers.forEach(function(m){m.iceTransport&&m.iceTransport.stop();m.dtlsTransport&&m.dtlsTransport.stop();m.rtpSender&&m.rtpSender.stop();m.rtpReceiver&&m.rtpReceiver.stop()});this._isClosed=!0;this._updateSignalingState("closed")};u.prototype._updateSignalingState=function(m){this.signalingState=
+m;m=new Event("signalingstatechange");this._dispatchEvent("signalingstatechange",m)};u.prototype._maybeFireNegotiationNeeded=function(){var m=this;"stable"===this.signalingState&&!0!==this.needNegotiation&&(this.needNegotiation=!0,l.setTimeout(function(){if(m.needNegotiation){m.needNegotiation=!1;var n=new Event("negotiationneeded");m._dispatchEvent("negotiationneeded",n)}},0))};u.prototype._updateIceConnectionState=function(){var m={"new":0,closed:0,checking:0,connected:0,completed:0,disconnected:0,
+failed:0};this.transceivers.forEach(function(x){x.iceTransport&&!x.rejected&&m[x.iceTransport.state]++});var n="new";0<m.failed?n="failed":0<m.checking?n="checking":0<m.disconnected?n="disconnected":0<m.new?n="new":0<m.connected?n="connected":0<m.completed&&(n="completed");n!==this.iceConnectionState&&(this.iceConnectionState=n,n=new Event("iceconnectionstatechange"),this._dispatchEvent("iceconnectionstatechange",n))};u.prototype._updateConnectionState=function(){var m={"new":0,closed:0,connecting:0,
+connected:0,completed:0,disconnected:0,failed:0};this.transceivers.forEach(function(x){x.iceTransport&&x.dtlsTransport&&!x.rejected&&(m[x.iceTransport.state]++,m[x.dtlsTransport.state]++)});m.connected+=m.completed;var n="new";0<m.failed?n="failed":0<m.connecting?n="connecting":0<m.disconnected?n="disconnected":0<m.new?n="new":0<m.connected&&(n="connected");n!==this.connectionState&&(this.connectionState=n,n=new Event("connectionstatechange"),this._dispatchEvent("connectionstatechange",n))};u.prototype.createOffer=
+function(m){var n=this;if(n._isClosed)return Promise.reject(k("InvalidStateError","Can not call createOffer after close"));var x=n.transceivers.filter(function(C){return"audio"===C.kind}).length,z=n.transceivers.filter(function(C){return"video"===C.kind}).length;if(m){if(m.mandatory||m.optional)throw new TypeError("Legacy mandatory/optional constraints not supported.");void 0!==m.offerToReceiveAudio&&(x=!0===m.offerToReceiveAudio?1:!1===m.offerToReceiveAudio?0:m.offerToReceiveAudio);void 0!==m.offerToReceiveVideo&&
+(z=!0===m.offerToReceiveVideo?1:!1===m.offerToReceiveVideo?0:m.offerToReceiveVideo)}for(n.transceivers.forEach(function(C){"audio"===C.kind?(x--,0>x&&(C.wantReceive=!1)):"video"===C.kind&&(z--,0>z&&(C.wantReceive=!1))});0<x||0<z;)0<x&&(n._createTransceiver("audio"),x--),0<z&&(n._createTransceiver("video"),z--);var B=f.writeSessionBoilerplate(n._sdpSessionId,n._sdpSessionVersion++);n.transceivers.forEach(function(C,G){var M=C.track,Y=C.kind,L=C.mid||f.generateIdentifier();C.mid=L;C.iceGatherer||(C.iceGatherer=
+n._createIceGatherer(G,n.usingBundle));L=l.RTCRtpSender.getCapabilities(Y);15019>t&&(L.codecs=L.codecs.filter(function(J){return"rtx"!==J.name}));L.codecs.forEach(function(J){"H264"===J.name&&void 0===J.parameters["level-asymmetry-allowed"]&&(J.parameters["level-asymmetry-allowed"]="1");C.remoteCapabilities&&C.remoteCapabilities.codecs&&C.remoteCapabilities.codecs.forEach(function(P){J.name.toLowerCase()===P.name.toLowerCase()&&J.clockRate===P.clockRate&&(J.preferredPayloadType=P.payloadType)})});
+L.headerExtensions.forEach(function(J){(C.remoteCapabilities&&C.remoteCapabilities.headerExtensions||[]).forEach(function(P){J.uri===P.uri&&(J.id=P.id)})});G=C.sendEncodingParameters||[{ssrc:1001*(2*G+1)}];M&&15019<=t&&"video"===Y&&!G[0].rtx&&(G[0].rtx={ssrc:G[0].ssrc+1});C.wantReceive&&(C.rtpReceiver=new l.RTCRtpReceiver(C.dtlsTransport,Y));C.localCapabilities=L;C.sendEncodingParameters=G});"max-compat"!==n._config.bundlePolicy&&(B+="a=group:BUNDLE "+n.transceivers.map(function(C){return C.mid}).join(" ")+
+"\r\n");B+="a=ice-options:trickle\r\n";n.transceivers.forEach(function(C,G){B+=e(C,C.localCapabilities,"offer",C.stream,n._dtlsRole);B+="a=rtcp-rsize\r\n";!C.iceGatherer||"new"===n.iceGatheringState||0!==G&&n.usingBundle||(C.iceGatherer.getLocalCandidates().forEach(function(M){M.component=1;B+="a="+f.writeCandidate(M)+"\r\n"}),"completed"===C.iceGatherer.state&&(B+="a=end-of-candidates\r\n"))});m=new l.RTCSessionDescription({type:"offer",sdp:B});return Promise.resolve(m)};u.prototype.createAnswer=
+function(){var m=this;if(m._isClosed)return Promise.reject(k("InvalidStateError","Can not call createAnswer after close"));if("have-remote-offer"!==m.signalingState&&"have-local-pranswer"!==m.signalingState)return Promise.reject(k("InvalidStateError","Can not call createAnswer in signalingState "+m.signalingState));var n=f.writeSessionBoilerplate(m._sdpSessionId,m._sdpSessionVersion++);m.usingBundle&&(n+="a=group:BUNDLE "+m.transceivers.map(function(B){return B.mid}).join(" ")+"\r\n");n+="a=ice-options:trickle\r\n";
+var x=f.getMediaSections(m._remoteDescription.sdp).length;m.transceivers.forEach(function(B,C){if(!(C+1>x))if(B.rejected)"application"===B.kind?n="DTLS/SCTP"===B.protocol?n+"m=application 0 DTLS/SCTP 5000\r\n":n+("m=application 0 "+B.protocol+" webrtc-datachannel\r\n"):"audio"===B.kind?n+="m=audio 0 UDP/TLS/RTP/SAVPF 0\r\na=rtpmap:0 PCMU/8000\r\n":"video"===B.kind&&(n+="m=video 0 UDP/TLS/RTP/SAVPF 120\r\na=rtpmap:120 VP8/90000\r\n"),n+="c=IN IP4 0.0.0.0\r\na=inactive\r\na=mid:"+B.mid+"\r\n";else{if(B.stream){var G;
+"audio"===B.kind?G=B.stream.getAudioTracks()[0]:"video"===B.kind&&(G=B.stream.getVideoTracks()[0]);G&&15019<=t&&"video"===B.kind&&!B.sendEncodingParameters[0].rtx&&(B.sendEncodingParameters[0].rtx={ssrc:B.sendEncodingParameters[0].ssrc+1})}C=h(B.localCapabilities,B.remoteCapabilities);!C.codecs.filter(function(M){return"rtx"===M.name.toLowerCase()}).length&&B.sendEncodingParameters[0].rtx&&delete B.sendEncodingParameters[0].rtx;n+=e(B,C,"answer",B.stream,m._dtlsRole);B.rtcpParameters&&B.rtcpParameters.reducedSize&&
+(n+="a=rtcp-rsize\r\n")}});var z=new l.RTCSessionDescription({type:"answer",sdp:n});return Promise.resolve(z)};u.prototype.addIceCandidate=function(m){var n=this,x;return m&&void 0===m.sdpMLineIndex&&!m.sdpMid?Promise.reject(new TypeError("sdpMLineIndex or sdpMid required")):new Promise(function(z,B){if(n._remoteDescription)if(m&&""!==m.candidate){var C=m.sdpMLineIndex;if(m.sdpMid)for(var G=0;G<n.transceivers.length;G++)if(n.transceivers[G].mid===m.sdpMid){C=G;break}var M=n.transceivers[C];if(M){if(M.rejected)return z();
+G=0<Object.keys(m.candidate).length?f.parseCandidate(m.candidate):{};if("tcp"===G.protocol&&(0===G.port||9===G.port)||G.component&&1!==G.component)return z();if((0===C||0<C&&M.iceTransport!==n.transceivers[0].iceTransport)&&!q(M.iceTransport,G))return B(k("OperationError","Can not add ICE candidate"));B=m.candidate.trim();0===B.indexOf("a=")&&(B=B.substr(2));x=f.getMediaSections(n._remoteDescription.sdp);x[C]+="a="+(G.type?B:"end-of-candidates")+"\r\n";n._remoteDescription.sdp=f.getDescription(n._remoteDescription.sdp)+
+x.join("")}else return B(k("OperationError","Can not add ICE candidate"))}else for(C=0;C<n.transceivers.length&&(n.transceivers[C].rejected||(n.transceivers[C].iceTransport.addRemoteCandidate({}),x=f.getMediaSections(n._remoteDescription.sdp),x[C]+="a=end-of-candidates\r\n",n._remoteDescription.sdp=f.getDescription(n._remoteDescription.sdp)+x.join(""),!n.usingBundle));C++);else return B(k("InvalidStateError","Can not add ICE candidate without a remote description"));z()})};u.prototype.getStats=function(m){if(m&&
+m instanceof l.MediaStreamTrack){var n=null;this.transceivers.forEach(function(z){z.rtpSender&&z.rtpSender.track===m?n=z.rtpSender:z.rtpReceiver&&z.rtpReceiver.track===m&&(n=z.rtpReceiver)});if(!n)throw k("InvalidAccessError","Invalid selector.");return n.getStats()}var x=[];this.transceivers.forEach(function(z){["rtpSender","rtpReceiver","iceGatherer","iceTransport","dtlsTransport"].forEach(function(B){z[B]&&x.push(z[B].getStats())})});return Promise.all(x).then(function(z){var B=new Map;z.forEach(function(C){C.forEach(function(G){B.set(G.id,
+G)})});return B})};["RTCRtpSender","RTCRtpReceiver","RTCIceGatherer","RTCIceTransport","RTCDtlsTransport"].forEach(function(m){if((m=l[m])&&m.prototype&&m.prototype.getStats){var n=m.prototype.getStats;m.prototype.getStats=function(){return n.apply(this).then(function(x){var z=new Map;Object.keys(x).forEach(function(B){var C=x[B];x[B].type={inboundrtp:"inbound-rtp",outboundrtp:"outbound-rtp",candidatepair:"candidate-pair",localcandidate:"local-candidate",remotecandidate:"remote-candidate"}[C.type]||
+C.type;z.set(B,x[B])});return z})}}});var A=["createOffer","createAnswer"];A.forEach(function(m){var n=u.prototype[m];u.prototype[m]=function(){var x=arguments;return"function"===typeof x[0]||"function"===typeof x[1]?n.apply(this,[arguments[2]]).then(function(z){"function"===typeof x[0]&&x[0].apply(null,[z])},function(z){"function"===typeof x[1]&&x[1].apply(null,[z])}):n.apply(this,arguments)}});A=["setLocalDescription","setRemoteDescription","addIceCandidate"];A.forEach(function(m){var n=u.prototype[m];
+u.prototype[m]=function(){var x=arguments;return"function"===typeof x[1]||"function"===typeof x[2]?n.apply(this,arguments).then(function(){"function"===typeof x[1]&&x[1].apply(null)},function(z){"function"===typeof x[2]&&x[2].apply(null,[z])}):n.apply(this,arguments)}});["getStats"].forEach(function(m){var n=u.prototype[m];u.prototype[m]=function(){var x=arguments;return"function"===typeof x[1]?n.apply(this,arguments).then(function(){"function"===typeof x[1]&&x[1].apply(null)}):n.apply(this,arguments)}});
+return u}},{sdp:17}],17:[function(a,b,c){var e={generateIdentifier:function(){return Math.random().toString(36).substr(2,10)}};e.localCName=e.generateIdentifier();e.splitLines=function(d){return d.trim().split("\n").map(function(h){return h.trim()})};e.splitSections=function(d){return d.split("\nm=").map(function(h,g){return(0<g?"m="+h:h).trim()+"\r\n"})};e.getDescription=function(d){return(d=e.splitSections(d))&&d[0]};e.getMediaSections=function(d){d=e.splitSections(d);d.shift();return d};e.matchPrefix=
+function(d,h){return e.splitLines(d).filter(function(g){return 0===g.indexOf(h)})};e.parseCandidate=function(d){d=0===d.indexOf("a=candidate:")?d.substring(12).split(" "):d.substring(10).split(" ");for(var h={foundation:d[0],component:parseInt(d[1],10),protocol:d[2].toLowerCase(),priority:parseInt(d[3],10),ip:d[4],address:d[4],port:parseInt(d[5],10),type:d[7]},g=8;g<d.length;g+=2)switch(d[g]){case "raddr":h.relatedAddress=d[g+1];break;case "rport":h.relatedPort=parseInt(d[g+1],10);break;case "tcptype":h.tcpType=
+d[g+1];break;case "ufrag":h.ufrag=d[g+1];h.usernameFragment=d[g+1];break;default:h[d[g]]=d[g+1]}return h};e.writeCandidate=function(d){var h=[];h.push(d.foundation);h.push(d.component);h.push(d.protocol.toUpperCase());h.push(d.priority);h.push(d.address||d.ip);h.push(d.port);var g=d.type;h.push("typ");h.push(g);"host"!==g&&d.relatedAddress&&d.relatedPort&&(h.push("raddr"),h.push(d.relatedAddress),h.push("rport"),h.push(d.relatedPort));d.tcpType&&"tcp"===d.protocol.toLowerCase()&&(h.push("tcptype"),
+h.push(d.tcpType));if(d.usernameFragment||d.ufrag)h.push("ufrag"),h.push(d.usernameFragment||d.ufrag);return"candidate:"+h.join(" ")};e.parseIceOptions=function(d){return d.substr(14).split(" ")};e.parseRtpMap=function(d){d=d.substr(9).split(" ");var h={payloadType:parseInt(d.shift(),10)};d=d[0].split("/");h.name=d[0];h.clockRate=parseInt(d[1],10);h.channels=3===d.length?parseInt(d[2],10):1;h.numChannels=h.channels;return h};e.writeRtpMap=function(d){var h=d.payloadType;void 0!==d.preferredPayloadType&&
+(h=d.preferredPayloadType);var g=d.channels||d.numChannels||1;return"a=rtpmap:"+h+" "+d.name+"/"+d.clockRate+(1!==g?"/"+g:"")+"\r\n"};e.parseExtmap=function(d){d=d.substr(9).split(" ");return{id:parseInt(d[0],10),direction:0<d[0].indexOf("/")?d[0].split("/")[1]:"sendrecv",uri:d[1]}};e.writeExtmap=function(d){return"a=extmap:"+(d.id||d.preferredId)+(d.direction&&"sendrecv"!==d.direction?"/"+d.direction:"")+" "+d.uri+"\r\n"};e.parseFmtp=function(d){for(var h={},g=d.substr(d.indexOf(" ")+1).split(";"),
+q=0;q<g.length;q++)d=g[q].trim().split("="),h[d[0].trim()]=d[1];return h};e.writeFmtp=function(d){var h="",g=d.payloadType;void 0!==d.preferredPayloadType&&(g=d.preferredPayloadType);if(d.parameters&&Object.keys(d.parameters).length){var q=[];Object.keys(d.parameters).forEach(function(k){d.parameters[k]?q.push(k+"="+d.parameters[k]):q.push(k)});h+="a=fmtp:"+g+" "+q.join(";")+"\r\n"}return h};e.parseRtcpFb=function(d){d=d.substr(d.indexOf(" ")+1).split(" ");return{type:d.shift(),parameter:d.join(" ")}};
+e.writeRtcpFb=function(d){var h="",g=d.payloadType;void 0!==d.preferredPayloadType&&(g=d.preferredPayloadType);d.rtcpFeedback&&d.rtcpFeedback.length&&d.rtcpFeedback.forEach(function(q){h+="a=rtcp-fb:"+g+" "+q.type+(q.parameter&&q.parameter.length?" "+q.parameter:"")+"\r\n"});return h};e.parseSsrcMedia=function(d){var h=d.indexOf(" "),g={ssrc:parseInt(d.substr(7,h-7),10)},q=d.indexOf(":",h);-1<q?(g.attribute=d.substr(h+1,q-h-1),g.value=d.substr(q+1)):g.attribute=d.substr(h+1);return g};e.parseSsrcGroup=
+function(d){d=d.substr(13).split(" ");return{semantics:d.shift(),ssrcs:d.map(function(h){return parseInt(h,10)})}};e.getMid=function(d){if(d=e.matchPrefix(d,"a=mid:")[0])return d.substr(6)};e.parseFingerprint=function(d){d=d.substr(14).split(" ");return{algorithm:d[0].toLowerCase(),value:d[1]}};e.getDtlsParameters=function(d,h){return{role:"auto",fingerprints:e.matchPrefix(d+h,"a=fingerprint:").map(e.parseFingerprint)}};e.writeDtlsParameters=function(d,h){var g="a=setup:"+h+"\r\n";d.fingerprints.forEach(function(q){g+=
+"a=fingerprint:"+q.algorithm+" "+q.value+"\r\n"});return g};e.parseCryptoLine=function(d){d=d.substr(9).split(" ");return{tag:parseInt(d[0],10),cryptoSuite:d[1],keyParams:d[2],sessionParams:d.slice(3)}};e.writeCryptoLine=function(d){return"a=crypto:"+d.tag+" "+d.cryptoSuite+" "+("object"===typeof d.keyParams?e.writeCryptoKeyParams(d.keyParams):d.keyParams)+(d.sessionParams?" "+d.sessionParams.join(" "):"")+"\r\n"};e.parseCryptoKeyParams=function(d){if(0!==d.indexOf("inline:"))return null;d=d.substr(7).split("|");
+return{keyMethod:"inline",keySalt:d[0],lifeTime:d[1],mkiValue:d[2]?d[2].split(":")[0]:void 0,mkiLength:d[2]?d[2].split(":")[1]:void 0}};e.writeCryptoKeyParams=function(d){return d.keyMethod+":"+d.keySalt+(d.lifeTime?"|"+d.lifeTime:"")+(d.mkiValue&&d.mkiLength?"|"+d.mkiValue+":"+d.mkiLength:"")};e.getCryptoParameters=function(d,h){return e.matchPrefix(d+h,"a=crypto:").map(e.parseCryptoLine)};e.getIceParameters=function(d,h){var g=e.matchPrefix(d+h,"a=ice-ufrag:")[0];d=e.matchPrefix(d+h,"a=ice-pwd:")[0];
+return g&&d?{usernameFragment:g.substr(12),password:d.substr(10)}:null};e.writeIceParameters=function(d){return"a=ice-ufrag:"+d.usernameFragment+"\r\na=ice-pwd:"+d.password+"\r\n"};e.parseRtpParameters=function(d){for(var h={codecs:[],headerExtensions:[],fecMechanisms:[],rtcp:[]},g=e.splitLines(d)[0].split(" "),q=3;q<g.length;q++){var k=g[q],f=e.matchPrefix(d,"a=rtpmap:"+k+" ")[0];if(f){f=e.parseRtpMap(f);var l=e.matchPrefix(d,"a=fmtp:"+k+" ");f.parameters=l.length?e.parseFmtp(l[0]):{};f.rtcpFeedback=
+e.matchPrefix(d,"a=rtcp-fb:"+k+" ").map(e.parseRtcpFb);h.codecs.push(f);switch(f.name.toUpperCase()){case "RED":case "ULPFEC":h.fecMechanisms.push(f.name.toUpperCase())}}}e.matchPrefix(d,"a=extmap:").forEach(function(t){h.headerExtensions.push(e.parseExtmap(t))});return h};e.writeRtpDescription=function(d,h){var g="";g+="m="+d+" ";g+=0<h.codecs.length?"9":"0";g+=" UDP/TLS/RTP/SAVPF ";g+=h.codecs.map(function(k){return void 0!==k.preferredPayloadType?k.preferredPayloadType:k.payloadType}).join(" ")+
+"\r\n";g+="c=IN IP4 0.0.0.0\r\n";g+="a=rtcp:9 IN IP4 0.0.0.0\r\n";h.codecs.forEach(function(k){g+=e.writeRtpMap(k);g+=e.writeFmtp(k);g+=e.writeRtcpFb(k)});var q=0;h.codecs.forEach(function(k){k.maxptime>q&&(q=k.maxptime)});0<q&&(g+="a=maxptime:"+q+"\r\n");g+="a=rtcp-mux\r\n";h.headerExtensions&&h.headerExtensions.forEach(function(k){g+=e.writeExtmap(k)});return g};e.parseRtpEncodingParameters=function(d){var h=[],g=e.parseRtpParameters(d),q=-1!==g.fecMechanisms.indexOf("RED"),k=-1!==g.fecMechanisms.indexOf("ULPFEC"),
+f=e.matchPrefix(d,"a=ssrc:").map(function(r){return e.parseSsrcMedia(r)}).filter(function(r){return"cname"===r.attribute}),l=0<f.length&&f[0].ssrc,t;f=e.matchPrefix(d,"a=ssrc-group:FID").map(function(r){return r.substr(17).split(" ").map(function(y){return parseInt(y,10)})});0<f.length&&1<f[0].length&&f[0][0]===l&&(t=f[0][1]);g.codecs.forEach(function(r){"RTX"===r.name.toUpperCase()&&r.parameters.apt&&(r={ssrc:l,codecPayloadType:parseInt(r.parameters.apt,10)},l&&t&&(r.rtx={ssrc:t}),h.push(r),q&&(r=
+JSON.parse(JSON.stringify(r)),r.fec={ssrc:l,mechanism:k?"red+ulpfec":"red"},h.push(r)))});0===h.length&&l&&h.push({ssrc:l});var w=e.matchPrefix(d,"b=");w.length&&(w=0===w[0].indexOf("b=TIAS:")?parseInt(w[0].substr(7),10):0===w[0].indexOf("b=AS:")?950*parseInt(w[0].substr(5),10)-16E3:void 0,h.forEach(function(r){r.maxBitrate=w}));return h};e.parseRtcpParameters=function(d){var h={},g=e.matchPrefix(d,"a=ssrc:").map(function(q){return e.parseSsrcMedia(q)}).filter(function(q){return"cname"===q.attribute})[0];
+g&&(h.cname=g.value,h.ssrc=g.ssrc);g=e.matchPrefix(d,"a=rtcp-rsize");h.reducedSize=0<g.length;h.compound=0===g.length;d=e.matchPrefix(d,"a=rtcp-mux");h.mux=0<d.length;return h};e.parseMsid=function(d){var h=e.matchPrefix(d,"a=msid:");if(1===h.length)return d=h[0].substr(7).split(" "),{stream:d[0],track:d[1]};d=e.matchPrefix(d,"a=ssrc:").map(function(g){return e.parseSsrcMedia(g)}).filter(function(g){return"msid"===g.attribute});if(0<d.length)return d=d[0].value.split(" "),{stream:d[0],track:d[1]}};
+e.parseSctpDescription=function(d){var h=e.parseMLine(d),g=e.matchPrefix(d,"a=max-message-size:"),q;0<g.length&&(q=parseInt(g[0].substr(19),10));isNaN(q)&&(q=65536);g=e.matchPrefix(d,"a=sctp-port:");if(0<g.length)return{port:parseInt(g[0].substr(12),10),protocol:h.fmt,maxMessageSize:q};if(0<e.matchPrefix(d,"a=sctpmap:").length)return d=e.matchPrefix(d,"a=sctpmap:")[0].substr(10).split(" "),{port:parseInt(d[0],10),protocol:d[1],maxMessageSize:q}};e.writeSctpDescription=function(d,h){d="DTLS/SCTP"!==
+d.protocol?["m="+d.kind+" 9 "+d.protocol+" "+h.protocol+"\r\n","c=IN IP4 0.0.0.0\r\n","a=sctp-port:"+h.port+"\r\n"]:["m="+d.kind+" 9 "+d.protocol+" "+h.port+"\r\n","c=IN IP4 0.0.0.0\r\n","a=sctpmap:"+h.port+" "+h.protocol+" 65535\r\n"];void 0!==h.maxMessageSize&&d.push("a=max-message-size:"+h.maxMessageSize+"\r\n");return d.join("")};e.generateSessionId=function(){return Math.random().toString().substr(2,21)};e.writeSessionBoilerplate=function(d,h,g){h=void 0!==h?h:2;d=d?d:e.generateSessionId();return"v=0\r\no="+
+(g||"thisisadapterortc")+" "+d+" "+h+" IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\n"};e.writeMediaSection=function(d,h,g,q){h=e.writeRtpDescription(d.kind,h);h+=e.writeIceParameters(d.iceGatherer.getLocalParameters());h+=e.writeDtlsParameters(d.dtlsTransport.getLocalParameters(),"offer"===g?"actpass":"active");h+="a=mid:"+d.mid+"\r\n";h=d.direction?h+("a="+d.direction+"\r\n"):d.rtpSender&&d.rtpReceiver?h+"a=sendrecv\r\n":d.rtpSender?h+"a=sendonly\r\n":d.rtpReceiver?h+"a=recvonly\r\n":h+"a=inactive\r\n";d.rtpSender&&
+(g="msid:"+q.id+" "+d.rtpSender.track.id+"\r\n",h=h+("a="+g)+("a=ssrc:"+d.sendEncodingParameters[0].ssrc+" "+g),d.sendEncodingParameters[0].rtx&&(h+="a=ssrc:"+d.sendEncodingParameters[0].rtx.ssrc+" "+g,h+="a=ssrc-group:FID "+d.sendEncodingParameters[0].ssrc+" "+d.sendEncodingParameters[0].rtx.ssrc+"\r\n"));h+="a=ssrc:"+d.sendEncodingParameters[0].ssrc+" cname:"+e.localCName+"\r\n";d.rtpSender&&d.sendEncodingParameters[0].rtx&&(h+="a=ssrc:"+d.sendEncodingParameters[0].rtx.ssrc+" cname:"+e.localCName+
+"\r\n");return h};e.getDirection=function(d,h){d=e.splitLines(d);for(var g=0;g<d.length;g++)switch(d[g]){case "a=sendrecv":case "a=sendonly":case "a=recvonly":case "a=inactive":return d[g].substr(2)}return h?e.getDirection(h):"sendrecv"};e.getKind=function(d){return e.splitLines(d)[0].split(" ")[0].substr(2)};e.isRejected=function(d){return"0"===d.split(" ",2)[1]};e.parseMLine=function(d){d=e.splitLines(d)[0].substr(2).split(" ");return{kind:d[0],port:parseInt(d[1],10),protocol:d[2],fmt:d.slice(3).join(" ")}};
+e.parseOLine=function(d){d=e.matchPrefix(d,"o=")[0].substr(2).split(" ");return{username:d[0],sessionId:d[1],sessionVersion:parseInt(d[2],10),netType:d[3],addressType:d[4],address:d[5]}};e.isValidSDP=function(d){if("string"!==typeof d||0===d.length)return!1;d=e.splitLines(d);for(var h=0;h<d.length;h++)if(2>d[h].length||"="!==d[h].charAt(1))return!1;return!0};"object"===typeof b&&(b.exports=e)},{}]},{},[1])(1)});class Yb{constructor(a){this.FrameDisplayDeltaTimeMs=this.BrowserReceiptTimeMs=this.UETransmissionTimeMs=
+this.UECaptureToSendMs=this.UEEncodeMs=this.UEReceiptTimeMs=this.TestStartTimeMs=null;this.onReady=a}reset(){this.FrameDisplayDeltaTimeMs=this.BrowserReceiptTimeMs=this.UETransmissionTimeMs=this.UEEncodeMs=this.UECaptureToSendMs=this.UEReceiptTimeMs=this.TestStartTimeMs=null}start(){this.reset();this.TestStartTimeMs=Date.now();if(this.onReady)this.onReady()}setUETimings(a){this.UEReceiptTimeMs=a.ReceiptTimeMs;this.UEEncodeMs=a.EncodeMs;this.UECaptureToSendMs=a.CaptureToSendMs;this.UETransmissionTimeMs=
+a.TransmissionTimeMs;this.BrowserReceiptTimeMs=Date.now();this.latencyTimingsReady()}setFrameDisplayDeltaTime(a){null==this.FrameDisplayDeltaTimeMs&&(this.FrameDisplayDeltaTimeMs=Math.round(a),this.latencyTimingsReady())}latencyTimingsReady(){if(this.BrowserReceiptTimeMs){var a=this.BrowserReceiptTimeMs-this.TestStartTimeMs,b=this.UECaptureToSendMs,c=this.UETransmissionTimeMs-this.UEReceiptTimeMs,e=a-c,d={latencyExcludingDecode:a,encodeLatency:this.UEEncodeMs.toFixed(1),uePixelStreamLatency:b.toFixed(1),
+ueTestDuration:c.toFixed(1),networkLatency:e.toFixed(1)};this.FrameDisplayDeltaTimeMs&&this.BrowserReceiptTimeMs&&(d.endToEndLatency=this.FrameDisplayDeltaTimeMs+e+("string"===typeof b?0:b),d.browserSideLatency=this.FrameDisplayDeltaTimeMs+(a-e-c),d.endToEndLatency=d.endToEndLatency.toFixed(1),d.browserSideLatency=d.browserSideLatency.toFixed(1));if(this.onReady)this.onReady(d)}}}class Zb{constructor(a){this.useStats=a.useStats;this.events=a.events;this.webRtcConfig=a.peerConnectionOptions||{};this.webRtcConfig.sdpSemantics=
+"unified-plan";this.tnClient=this.dcClient=this.pcClient=null;this.sdpConstraints={offerToReceiveAudio:0,offerToReceiveVideo:1,voiceActivityDetection:!1};this.dataChannelOptions={ordered:!0};this.lastStats={};this.playerId=0;this.latencyTestTimings=new Yb(this.events.onLatencyTimingsReady);this._bSendingAPI=!1;this._apiSendingQueue=[]}setVideo(a){this.video=a}logStartupInfo(a){if(this.events.onlog)this.events.onlog(a)}setupPeerConnection(){this.pcClient||(this.pcClient=new RTCPeerConnection(this.webRtcConfig),
+this.pcClient.addTransceiver("video",{direction:"recvonly"}),this.pcClient.onsignalingstatechange=a=>this.onStateChanged(a),this.pcClient.oniceconnectionstatechange=a=>this.onStateChanged(a),this.pcClient.onicegatheringstatechange=a=>this.onStateChanged(a),this.pcClient.ontrack=a=>this.events.ontrack(a),this.pcClient.onicecandidate=a=>this.events.onicecandidate(a),this.pcClient.ondatachannel=a=>{this.dcClient=a.channel;this.setupDataChannelCallbacks()})}close(){this.dcClient&&"open"==this.dcClient.readyState&&
+(this.dcClient.close(),this.dcClient=null);this.pcClient&&(this.pcClient.close(),this.pcClient=null);this.clearStatsTimer()}setupDataChannelCallbacks(){this.dcClient.binaryType="arraybuffer";this.dcClient.onopen=a=>{this.isDatachannelOpened=!0;if(this.events&&this.events.ondatachannelopen)this.events.ondatachannelopen(a);this.logStartupInfo("video: loading...")};this.dcClient.onclose=a=>{this.isDatachannelOpened=!1;this.clearStatsTimer();if(this.events&&this.events.ondatachannelclose)this.events.ondatachannelclose(a)};
+this.dcClient.onerror=a=>{this.isDatachannelOpened=!1;this.logStartupInfo("channel error");if(this.events&&this.events.ondatachannelerror)this.events.ondatachannelerror(a)};this.dcClient.onmessage=a=>this.onDatachannelMessage(a)}createOffer(){this.close();this.setupPeerConnection();try{this.dcClient=this.pcClient.createDataChannel("cirrus",this.dataChannelOptions),this.setupDataChannelCallbacks(),this.logStartupInfo("channel created")}catch(a){this.logStartupInfo("no channel"),this.dcClient=null}this.pcClient.createOffer(this.sdpConstraints).then(a=>
+{a.sdp=a.sdp.replace("useinbandfec=1","useinbandfec=1;stereo=1;sprop-maxcapturerate=48000");this.pcClient.setLocalDescription(a);this.events.onOfferCreated(a)},()=>{this.logStartupInfo("couldn't create offer")})}onReceiveOffer(a){a=new RTCSessionDescription(a);this.setupPeerConnection();this.pcClient.setRemoteDescription(a).then(()=>{this.pcClient.createAnswer().then(b=>this.pcClient.setLocalDescription(b)).then(()=>{if(this.events.onAnswerCreated)this.events.onAnswerCreated(this.pcClient.currentLocalDescription)}).then(()=>
+{let b=this.pcClient.getReceivers();for(let c of b)c.playoutDelayHint=0}).catch(b=>console.error("createAnswer() failed:",b))});this.setupLiveStats()}onIceCandidate(a){a=new RTCIceCandidate(a);this.pcClient.addIceCandidate(a).then(b=>{this.logStartupInfo("candidate added")})}onReceiveAnswer(a){this.playerId=a.playerId;this.logStartupInfo(`received answer: ${this.playerId}`);a=new RTCSessionDescription(a);this.pcClient.setRemoteDescription(a);a=this.pcClient.getReceivers();for(let b of a)b.playoutDelayHint=
+0;this.setupLiveStats()}setupLiveStats(){this.clearStatsTimer();this.useStats&&!this.aggregateStatsIntervalId&&(this.aggregateStatsIntervalId=setInterval(()=>{this.pcClient&&this.pcClient.getStats(null).then(a=>this.processLiveStats(a))},1E3))}onStateChanged(a){this.signalingState!=this.pcClient.signalingState&&(this.signalingState=this.pcClient.signalingState,this.logStartupInfo(`__signaling: ${this.signalingState}`));this.iceConnectionState!=this.pcClient.iceConnectionState&&(this.iceConnectionState=
+this.pcClient.iceConnectionState,this.logStartupInfo(`__ice_connection: ${this.iceConnectionState}`),"disconnected"!=this.iceConnectionState||this.isDatachannelOpened||this.logStartupInfo("\u8fde\u63a5\u5efa\u7acb\u5931\u8d25\uff0c\u8bf7\u68c0\u67e5\u670d\u52a1\u5668\u7aef\u53e3\u8bbe\u7f6e"),"failed"!=this.iceConnectionState||this.isDatachannelOpened||this.logStartupInfo("\u8fde\u63a5\u5efa\u7acb\u5931\u8d25\uff0c\u65e0\u53ef\u7528\u7684\u5019\u9009\u8fde\u63a5"));this.iceGatheringState!=this.pcClient.iceGatheringState&&
+(this.iceGatheringState=this.pcClient.iceGatheringState,this.logStartupInfo(`__ice_gathering: ${this.iceGatheringState}`))}clearStatsTimer(){this.aggregateStatsIntervalId&&(clearInterval(this.aggregateStatsIntervalId),this.aggregateStatsIntervalId=void 0)}send(a){return this.dcClient&&"open"==this.dcClient.readyState?(this.dcClient.send(a),!0):!1}requestInitialSettings(){this.send((new Uint8Array([7])).buffer)}requestQualityControl(){this.send((new Uint8Array([1])).buffer)}sendEnableIntervalSendQP(a){this.send((new Uint8Array([11,
+a?1:0])).buffer)}_continueSendAPI(){if(0<this._apiSendingQueue.length){let a=this._apiSendingQueue.shift();this.sendApi(a)}}sendApi(a){if(this._bSendingAPI)this._apiSendingQueue.push(a);else{this._bSendingAPI=!0;a.__playerId=this.playerId;var b=JSON.stringify(a),c=b.length,e=this.pcClient.sctp?Math.min(this.pcClient.sctp.maxMessageSize,65536):65536,d=(e-4)/2;if(c>d){this.numOfEventCalls=0;let g=Math.ceil(c/d),q=[];for(var h=0;h<g;h++){let t=h==g-1?c-h*d:d;q[h]={type:0==h?1:h==g-1?3:2,stringLength:t,
+content:b.substr(h*d,t)}}let k=0,f=t=>{for(t=this.dcClient.bufferedAmount;k<q.length;){var w=q[k++];let r=new DataView(new ArrayBuffer(4+2*w.stringLength)),y=0;r.setUint8(y,52);y++;r.setUint8(y,w.type);y++;r.setUint16(y,w.stringLength,!0);y+=2;w=w.content;for(let u=0;u<w.length;u++)r.setUint16(y,w.charCodeAt(u),!0),y+=2;t+=r.byteLength;this.send(r.buffer);if(k==g-1)console.log(`api(command: ${a.command}) slices send finished. bufferedamountlow calls: ${this.numOfEventCalls}`),this.dcClient.onbufferedamountlow=
+null,this._bSendingAPI=!1,setTimeout(()=>this._continueSendAPI(),100);else if(t>l)break}},l=Math.max(8*e,1048576);this.dcClient.bufferedAmountLowThreshold=e;this.dcClient.onbufferedamountlow=t=>{this.numOfEventCalls++;f()};console.log(`sending api(command: ${a.command}) slices, count: ${g}`);f()}else{e=new DataView(new ArrayBuffer(4+2*c));d=0;e.setUint8(d,52);d++;e.setUint8(d,0);d++;e.setUint16(d,c,!0);d+=2;for(h=0;h<c;h++)e.setUint16(d,b.charCodeAt(h),!0),d+=2;this.send(e.buffer);this._bSendingAPI=
+!1;this._continueSendAPI()}}}sendDescriptor(a,b){b=JSON.stringify(b);let c=new DataView(new ArrayBuffer(3+2*b.length)),e=0;c.setUint8(e,a);e++;c.setUint16(e,b.length,!0);e+=2;for(a=0;a<b.length;a++)c.setUint16(e,b.charCodeAt(a),!0),e+=2;this.send(c.buffer)}updateRenderResolution(a,b){a={Console:"setres "+a+"x"+b+"w"};console.log(JSON.stringify(a));this.sendDescriptor(50,a)}updateParams(a){a.encodeMaxQP&&this.sendDescriptor(50,{Console:"PixelStreaming.Encoder.MaxQP "+a.encodeMaxQP});a.keyframeInterval&&
+this.sendDescriptor(50,{Console:"PixelStreaming.Encoder.KeyframeInterval "+a.keyframeInterval});a.maxBitrate&&this.sendDescriptor(50,{Console:"PixelStreaming.WebRTC.MaxBitrate "+a.maxBitrate})}processLiveStats(a){let b={};a.forEach(c=>{"inbound-rtp"!=c.type||c.isRemote||"video"!=c.mediaType&&!c.id.toLowerCase().includes("video")||(b.timestamp=c.timestamp,b.timestampStart=this.lastStats&&this.lastStats.timestampStart?this.lastStats.timestampStart:c.timestamp,b.bytesReceived=c.bytesReceived,b.packetsLost=
+c.packetsLost,b.framesDropped=c.framesDropped,b.framesPerSecond=c.framesPerSecond,b.framesReceived=c.framesReceived,b.framesDecoded=c.framesDecoded,b.keyFramesDecoded=c.keyFramesDecoded,b.frameWidth=c.frameWidth,b.frameHeight=c.frameHeight,this.lastStats&&(b.bitrate=8*(b.bytesReceived-this.lastStats.bytesReceived)/(b.timestamp-this.lastStats.timestamp)));"track"==c.type&&c.frameWidth&&(c.framesDropped&&(b.framesDropped=c.framesDropped),c.framesReceived&&(b.framesReceived=c.framesReceived),b.frameWidth=
+c.frameWidth,b.frameHeight=c.frameHeight);"candidate-pair"==c.type&&c.hasOwnProperty("currentRoundTripTime")&&0!=c.currentRoundTripTime&&(b.currentRoundTripTime=c.currentRoundTripTime)});this.lastStats.receiveToCompositeMs&&(b.receiveToCompositeMs=this.lastStats.receiveToCompositeMs,this.latencyTestTimings.setFrameDisplayDeltaTime(this.lastStats.receiveToCompositeMs));this.lastStats=b;this.events.onstats(this.lastStats)}onDatachannelMessage(a){var b=new Uint8Array(a.data);switch(b[0]){case 0:this.events.ondatachannelmessage("QualityControlOwnership",
+1==b[1]);break;case 1:if((a=(new TextDecoder("utf-16")).decode(a.data.slice(1)))&&""!=a)this.events.ondatachannelmessage("ResponseAPI",a);break;case 101:b=b[1];a=(new TextDecoder("utf-8")).decode(a.data.slice(2));switch(b){case 0:this.events.ondatachannelmessage("ResponseAPI",a);break;case 1:this.reponse_api_json_string=a;break;case 2:this.reponse_api_json_string+=a;break;case 3:this.reponse_api_json_string+=a,this.events.ondatachannelmessage("ResponseAPI",this.reponse_api_json_string)}break;case 6:a=
+(new TextDecoder("utf-16")).decode(a.data.slice(1));a=JSON.parse(a);this.latencyTestTimings.setUETimings(a);break;case 7:a=(new TextDecoder("utf-16")).decode(a.data.slice(1));a=JSON.parse(a);if(a.Encoder)this.events.ondatachannelmessage("InitialSettings",a);break;case 5:this.events.ondatachannelmessage("VideoEncoderAvgQP",a)}}startLatencyTest(){this.video&&(this.latencyTestTimings.start(),this.sendDescriptor(6,{StartTime:this.latencyTestTimings.TestStartTimeMs}))}}class ia{constructor(a){this.player=
+a;this.uid=a.uid;this.container=a.container}appendElement(a){this.container.appendChild(a);this.setNeedReposUI()}removeElement(a){this.container.removeChild(a)}get(a){return wa(a+"_"+this.uid)}getValue(a){let b;return null==(b=this.get(a))?void 0:b.value}setValue(a,b){(a=this.get(a))&&(a.value=b)}setText(a,b){(a=this.get(a))&&(a.innerText=b)}setHtml(a,b){(a=this.get(a))&&(a.innerHTML=b)}resize(){this.player.resize()}setNeedReposUI(){this.player.bNeedReposUI=!0}}class $b extends ia{constructor(a){super(a);
+this.el=document.createElement("pre");this.el.id=`eventsPanel_${this.uid}`;this.el.className="__eventsPanel";this.el.oncontextmenu=new Function("return false");this.el.onselectstart=new Function("return false");this.appendElement(this.el)}destroy(){this.el&&(this.removeElement(this.el),this.el=null)}appendText(a){if(this.el){let b=this.el.innerText;b+=a+"\n";this.el.innerText=b;this.el.scrollTop=this.el.scrollHeight+100}}setPosition(a){a||(a=this.container.getBoundingClientRect());this.el&&(this.el.style.width=
+`${a.width}px`)}}class ca{}ca.Information='<svg width="22" height="22" viewBox="0 0 32 32"><g transform="translate(1878 2755)"><rect width="32" height="32" transform="translate(-1878 -2755)" fill="none"/><path d="M11,22A11,11,0,0,1,3.222,3.222,11,11,0,1,1,18.779,18.778,10.929,10.929,0,0,1,11,22ZM8.5,10a.5.5,0,0,0-.5.5v2a.5.5,0,0,0,.5.5H10v5.5a.5.5,0,0,0,.5.5h2a.5.5,0,0,0,.5-.5v-8a.5.5,0,0,0-.5-.5ZM11,4a2,2,0,1,0,2,2A2,2,0,0,0,11,4Z" transform="translate(-1873 -2750)" fill="#3c3b3c"/></g></svg>';ca.FullScreenEnter=
+'<svg width="22" height="22" viewBox="0 0 32 32"><g id="cloud_icon_fullscreen_def" transform="translate(1787 2755)"><rect width="32" height="32" transform="translate(-1787 -2755)" fill="none"/><g transform="translate(0 -0.5)"><g transform="translate(-1780 -2747.5)"><rect width="10" height="10" transform="translate(-2 -2)" fill="none"/><path d="M12,0H7A1,1,0,0,0,6,1V6" transform="translate(-6)" fill="none" stroke="#3c3b3c" stroke-width="2"/><path d="M6,6.5,0,1" transform="translate(0.5 -0.5)" fill="none" stroke="#3c3b3c" stroke-width="2"/></g><g transform="translate(-1782 -2737.5)"><rect width="10" height="10" fill="none"/><path d="M12,6H7A1,1,0,0,1,6,5V0" transform="translate(-4 2)" fill="none" stroke="#3c3b3c" stroke-width="2"/><path d="M6,1,0,6.5" transform="translate(2.5 1)" fill="none" stroke="#3c3b3c" stroke-width="2"/></g><g transform="translate(-1770 -2749.5)"><rect width="10" height="10" fill="none"/><path d="M6,0h5a1,1,0,0,1,1,1V6" transform="translate(-4 2)" fill="none" stroke="#3c3b3c" stroke-width="2"/><path d="M0,6.5,6,1" transform="translate(1.5 1.5)" fill="none" stroke="#3c3b3c" stroke-width="2"/></g><g transform="translate(-1770 -2737.5)"><rect width="10" height="10" fill="none"/><path d="M6,6h5a1,1,0,0,0,1-1V0" transform="translate(-4 2)" fill="none" stroke="#3c3b3c" stroke-width="2"/><path d="M0,1,6,6.5" transform="translate(1.5 1)" fill="none" stroke="#3c3b3c" stroke-width="2"/></g></g></g></svg>';
+ca.FullScreenExit='<svg width="22" height="22" viewBox="0 0 32 32"><g id="cloud_icon_exotfullsc_def" transform="translate(1744 2755)"><rect width="32" height="32" transform="translate(-1744 -2755)" fill="none"/><g transform="translate(0 -1)"><g transform="translate(-1739 -2749)"><rect width="10" height="10" fill="none"/><path d="M6,6h5a1,1,0,0,0,1-1V0" transform="translate(-4 2)" fill="none" stroke="#3c3b3c" stroke-width="2"/><path d="M0,1,6,6.5" transform="translate(1.5 1)" fill="none" stroke="#3c3b3c" stroke-width="2"/></g><g transform="translate(-1739 -2737)"><rect width="10" height="10" fill="none"/><path d="M6,0h5a1,1,0,0,1,1,1V6" transform="translate(-4 2)" fill="none" stroke="#3c3b3c" stroke-width="2"/><path d="M0,6.5,6,1" transform="translate(1.5 1.5)" fill="none" stroke="#3c3b3c" stroke-width="2"/></g><g transform="translate(-1727 -2749)"><rect width="10" height="10" fill="none"/><path d="M12,6H7A1,1,0,0,1,6,5V0" transform="translate(-4 2)" fill="none" stroke="#3c3b3c" stroke-width="2"/><path d="M6,1,0,6.5" transform="translate(2.5 1)" fill="none" stroke="#3c3b3c" stroke-width="2"/></g><g transform="translate(-1727 -2737)"><rect width="10" height="10" fill="none"/><path d="M12,0H7A1,1,0,0,0,6,1V6" transform="translate(-4 2)" fill="none" stroke="#3c3b3c" stroke-width="2"/><path d="M6,6.5,0,1" transform="translate(2.5 1.5)" fill="none" stroke="#3c3b3c" stroke-width="2"/></g></g></g></svg>';
+ca.InitialCamera='<svg width="22" height="22" viewBox="0 0 32 32"><g id="cloud_icon_initialpos_def" transform="translate(1831 2755)"><rect width="32" height="32" transform="translate(-1831 -2755)" fill="none"/><path d="M18.667,22.222H1.333A1.333,1.333,0,0,1,0,20.893V8.24A1.319,1.319,0,0,1,.5,7.2L9.167.292a1.335,1.335,0,0,1,1.666,0L19.5,7.2A1.319,1.319,0,0,1,20,8.24V20.893A1.333,1.333,0,0,1,18.667,22.222ZM9,12.11a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1v-6a1,1,0,0,0-1-1Z" transform="translate(-1825 -2751.11)" fill="#3c3b3c" stroke="rgba(0,0,0,0)" stroke-width="1"/></g></svg>';
+class ac extends ia{constructor(a){super(a);this.create()}create(){if(!this.el){this.el=document.createElement("button");this.el.id=`fullscreeButton_${this.uid}`;this.el.className="__fullscreeButton";if(R.isIOSDevice||R.isSafari)this.el.style.backgroundSize="cover";this.el.innerHTML=ca.FullScreenEnter;this.el.title=H.getString("EnterFullscreen");this.el.oncontextmenu=new Function("return false");this.el.onselectstart=new Function("return false");this.el.onclick=()=>this.player.fullscreen=!this.player.fullscreen;
+this.el.onmousedown=a=>{1==a.button&&a.preventDefault()};this.appendElement(this.el);document.addEventListener("fullscreenchange",()=>{this.el.title=H.getString("ExitFullscreen");this.el.innerHTML=R.isFullscreen()?ca.FullScreenExit:ca.FullScreenEnter;this.player.resize()})}}destroy(){this.el&&(this.removeElement(this.el),this.el=null)}setPosition(a,b){a||(a=this.container.getBoundingClientRect());this.el&&(this.el.style.left=`${b?38:5}px`,this.el.style.top=`${a.height-32}px`)}}const ea={BackSpace:8,
+Shift:16,Control:17,Alt:18,RightShift:253,RightControl:254,RightAlt:255};class bc extends ia{constructor(a,b){super(a);this.video=null;this.useBuiltinCursors=b.useBuiltinCursors;this.keyEventTargetStr=b.keyEventTarget;this.keyEventTarget="document"==b.keyEventTarget?document:"none"==b.keyEventTarget?null:"video";this.callOnUserInteraction=()=>this.player.resetInteractTimestamp();this.fakeMouseWithTouches=!1;this.onMButtonDoubleClick=b.onMButtonDoubleClick;this.mouseKeyListener=b.mouseKeyListener;
+this.onActionEnable=!0;this.onEvents=b.onEvents;this.onVideoLoaded=b.onVideoLoaded;document.addEventListener("WeixinJSBridgeReady",()=>{R.isInWeixinBrowser=!0;this.video.play()});this.create()}isVideoLoaded(){return!!this._isVideoLoaded}create(){this.video&&this.destroy();this.video||(this.video=document.createElement("video"),this.video.id=`streamingVideo_${this.uid}`,this.video.style="position:absolute;",this.video.playsInline=!0,this.video.muted=!0,this.video.autoplay=!0,this.video.disablepictureinpicture=
+!0,"video"===this.keyEventTarget&&(this.video.tabIndex=1,this.keyEventTarget=this.video),this.appendElement(this.video),this.player.logStartupInfo("video element created"),this._isVideoLoaded=!1,this.video.addEventListener("loadedmetadata",()=>{this._isVideoLoaded=!0;this.video.onmouseenter({button:0,x:0,y:0});this.onVideoLoaded()},!0),this.setCursor());if("requestVideoFrameCallback"in HTMLVideoElement.prototype){const a=(b,c)=>{c.receiveTime&&c.expectedDisplayTime&&(this.rtc.lastStats.receiveToCompositeMs=
+c.presentationTime-c.receiveTime);this.video&&this.video.requestVideoFrameCallback(a)};this.video.requestVideoFrameCallback(a)}}setWebRtcPlayer(a){(!this.video||R.isAndroidDevice||R.isIOSDevice&&!R.isInWeixinBrowser)&&this.create();this.rtc=a;this.rtc.setVideo(this.video)}setActionEventEnabled(a){this.onActionEnable=a}destroy(){this.video&&(this.removeElement(this.video),this.video=null)}valid(){return!!this.video}videoWidth(){let a;return null==(a=this.video)?void 0:a.videoWidth}videoHeight(){let a;
+return null==(a=this.video)?void 0:a.videoHeight}clientWidth(){let a;return null==(a=this.video)?void 0:a.clientWidth}clientHeight(){let a;return null==(a=this.video)?void 0:a.clientHeight}setTrack(a){let b=a.streams[0];this.player.logStartupInfo("track: "+a.track.kind);"audio"==a.track.kind?(a=document.createElement("Audio"),a.autoplay=!0,a.srcObject=b,a.play(),this.player.logStartupInfo("audio element created")):"video"==a.track.kind&&this.video.srcObject!==b&&(this.video.srcObject=b)}setKeyEventTarget(a){this.keyEventTargetStr!=
+a&&(this.clearKeyboardEvents(),"video"==a?(this.video&&(this.video.tabIndex=1),this.keyEventTarget=this.video,this.video.focus()):"document"==a?(this.keyEventTarget=document,this.video.focus()):this.keyEventTarget&&(this.keyEventTarget=null),this.keyEventTargetStr=a,this.registerKeyboardEvents())}clearKeyboardEvents(){this.keyEventTarget&&(this.keyEventTarget.onkeydown=null,this.keyEventTarget.onkeyup=null,this.keyEventTarget.onkeypress=null)}registerKeyboardEvents(){this.keyEventTarget&&(this.keyEventTarget.onkeydown=
+a=>{112<=a.keyCode&&123>=a.keyCode||a.ctrlKey||this.sendKeydown(a);if(a.keyCode===ea.BackSpace)this.keyEventTarget.onkeypress({charCode:ea.BackSpace});this.callActionEventHander(5,a)},this.keyEventTarget.onkeyup=a=>{112<=a.keyCode&&123>=a.keyCode||a.ctrlKey||this.sendKeyup(a);this.callActionEventHander(6,a)},this.keyEventTarget.onkeypress=a=>{112<=a.keyCode&&123>=a.keyCode||this.sendKeypress(a);this.callActionEventHander(7,a)})}setCursor(){if(this.video)if(this.useBuiltinCursors)switch(this.mouseDownButton){case 0:this.video.setAttribute("class",
+"streamingVideoCursorPan");break;case 1:this.video.setAttribute("class","streamingVideoCursorMove");break;case 2:this.video.setAttribute("class","streamingVideoCursorRotate");break;default:this.video.setAttribute("class","streamingVideoCursorPointer")}else this.video.setAttribute("class","streamingVideoNoCursor")}callActionEventHander(a,b){if(this.mouseKeyListener&&this.onActionEnable)switch(a){case 0:if(R.isFunction(this.mouseKeyListener.onMouseEnter))this.mouseKeyListener.onMouseEnter(b);break;
+case 1:if(R.isFunction(this.mouseKeyListener.onMouseLeave))this.mouseKeyListener.onMouseLeave(b);break;case 2:if(R.isFunction(this.mouseKeyListener.onMouseMove))this.mouseKeyListener.onMouseMove(b);break;case 3:if(R.isFunction(this.mouseKeyListener.onMouseDown))this.mouseKeyListener.onMouseDown(b);break;case 4:if(R.isFunction(this.mouseKeyListener.onMouseUp))this.mouseKeyListener.onMouseUp(b);break;case 5:if(R.isFunction(this.mouseKeyListener.onKeyDown))this.mouseKeyListener.onKeyDown(b);break;case 6:if(R.isFunction(this.mouseKeyListener.onKeyUp))this.mouseKeyListener.onKeyUp(b);
+break;case 7:if(R.isFunction(this.mouseKeyListener.onKeyPress))this.mouseKeyListener.onKeyPress(b)}}isMiddleDoubleClick(a){if(1==a.button){if(this.lastMClickTimestamp&&200>a.timeStamp-this.lastMClickTimestamp)return!0;this.lastMClickTimestamp=a.timeStamp}else this.lastMClickTimestamp=void 0;return!1}registerMouseEvents(){this.video.onmouseenter=a=>{this.sendMouseEnter();a.buttons&1&&this.sendMouseDown(0,a.offsetX,a.offsetY);a.buttons&2&&this.sendMouseDown(2,a.offsetX,a.offsetY);a.buttons&4&&this.sendMouseDown(1,
+a.offsetX,a.offsetY);a.buttons&8&&this.sendMouseDown(3,a.offsetX,a.offsetY);a.buttons&16&&this.sendMouseDown(4,a.offsetX,a.offsetY);this.callActionEventHander(0,a)};this.video.onmouseleave=a=>{this.sendMouseLeave();a.buttons&1&&this.sendMouseUp(0,a.offsetX,a.offsetY);a.buttons&2&&this.sendMouseUp(2,a.offsetX,a.offsetY);a.buttons&4&&this.sendMouseUp(1,a.offsetX,a.offsetY);a.buttons&8&&this.sendMouseUp(3,a.offsetX,a.offsetYy);a.buttons&16&&this.sendMouseUp(4,a.offsetX,a.offsetY);this.callActionEventHander(1,
+a)};this.video.onmousemove=a=>{this.sendMouseMove(a.offsetX,a.offsetY,a.movementX,a.movementY);a.preventDefault();if(0==this.mouseDownButton||2==this.mouseDownButton)this.setCursor(),this.mouseDownButton=void 0;this.callActionEventHander(2,a)};this.video.onmousedown=a=>{this.keyEventTarget==this.video&&this.video.focus();this.sendMouseEnter();this.isMiddleDoubleClick(a)&&this.onMButtonDoubleClick?(this.onMButtonDoubleClick(a.offsetX,a.offsetY),a.preventDefault()):(this.mouseDownButton=a.button,this.sendMouseDown(a.button,
+a.offsetX,a.offsetY),a.preventDefault(),0!=a.button&&2!=a.button&&this.setCursor(),this.callActionEventHander(3,a))};this.video.onmouseup=a=>{this.mouseDownButton=void 0;this.sendMouseUp(a.button,a.offsetX,a.offsetY);a.preventDefault();this.setCursor();this.callActionEventHander(4,a)};this.video.oncontextmenu=a=>{a.preventDefault()};"onmousewheel"in this.video?this.video.addEventListener("mousewheel",a=>{this.sendMouseWheel(a.wheelDelta,a.offsetX,a.offsetY);a.preventDefault()},{passive:!1}):this.video.addEventListener("DOMMouseScroll",
+a=>{this.sendMouseWheel(-120*a.detail,a.offsetX,a.offsetY);a.preventDefault()},!1)}registerTouchEvents(){this.ongoingTouches=[];this.copyTouch=({identifier:b,clientX:c,clientY:e,force:d})=>({identifier:b,clientX:c,clientY:e,force:d});this.ongoingTouchIndexById=b=>{for(let c=0;c<this.ongoingTouches.length;c++)if(this.ongoingTouches[c].identifier==b)return c;return-1};if(this.fakeMouseWithTouches){var a=void 0;this.video.addEventListener("touchstart",b=>{let c=this.container.getBoundingClientRect();
+if(void 0===a){let e=b.changedTouches[0];a={id:e.identifier,x:e.clientX-c.left,y:e.clientY-c.top};this.video.onmouseenter(b);this.sendMouseDown(0,a.x,a.y)}b.preventDefault()},{passive:!1});this.video.addEventListener("touchend",b=>{let c=this.container.getBoundingClientRect();for(let e=0;e<b.changedTouches.length;e++){let d=b.changedTouches[e];if(d.identifier===a.id){this.sendMouseUp(0,d.clientX-c.left,d.clientY-c.top);this.video.onmouseleave(b);a=void 0;break}}b.preventDefault()},{passive:!1});this.video.addEventListener("touchmove",
+b=>{var c=this.container.getBoundingClientRect();for(var e=0;e<b.touches.length;e++){let d=b.touches[e];if(d.identifier===a.id){e=d.clientX-c.left;c=d.clientY-c.top;this.sendMouseMove(e,c,e-a.x,c-a.y);a.x=e;a.y=c;break}}b.preventDefault()},{passive:!1})}else this.video.addEventListener("touchstart",b=>{b.preventDefault();null==this||this.onEvents(`ongoingTouches: ${this.ongoingTouches.length}, touches: ${b.touches.length}, changedTouches: ${b.changedTouches.length}`);this.ongoingTouches.length>b.touches.length-
+b.changedTouches.length&&(this.onEvents&&this.onEvents(H.getString("TriggerSysTouch")),this.sendTouch(81,this.ongoingTouches),this.ongoingTouches=[]);b=b.changedTouches;for(let c=0;c<b.length;c++)this.ongoingTouches.push(this.copyTouch(b[c]));this.sendTouch(80,b)},{passive:!1}),this.video.addEventListener("touchend",b=>{b.preventDefault();b=b.changedTouches;this.sendTouch(81,b);for(let c=0;c<b.length;c++){let e=this.ongoingTouchIndexById(b[c].identifier);0<=e&&this.ongoingTouches.splice(e,1)}},{passive:!1}),
+this.video.addEventListener("touchmove",b=>{b.preventDefault();this.sendTouch(82,b.touches)},{passive:!1})}resize(a){this.playerAspectRatio=this.container.clientHeight/this.container.clientWidth;this.videoAspectRatio=a?this.playerAspectRatio:this.videoHeight()/this.videoWidth()}normalizeAndQuantizeUnsigned(a,b){if(this.playerAspectRatio>this.videoAspectRatio){let c=this.playerAspectRatio/this.videoAspectRatio;a/=this.container.clientWidth;b=c*(b/this.container.clientHeight-.5)+.5}else a=this.videoAspectRatio/
+this.playerAspectRatio*(a/this.container.clientWidth-.5)+.5,b/=this.container.clientHeight;return 0>a||1<a||0>b||1<b?{inRange:!1,x:65535,y:65535}:{inRange:!0,x:65536*a,y:65536*b}}normalizeAndQuantizeSigned(a,b){if(this.playerAspectRatio>this.videoAspectRatio){let c=this.playerAspectRatio/this.videoAspectRatio;a/=.5*this.container.clientWidth;b=c*b/(.5*this.container.clientHeight);return{x:32767*a,y:32767*b}}return{x:this.videoAspectRatio/this.playerAspectRatio*a/(.5*this.container.clientWidth)*32767,
+y:b/(.5*this.container.clientHeight)*32767}}sendTouch(a,b){this.callOnUserInteraction();var c=new DataView(new ArrayBuffer(2+10*b.length));c.setUint8(0,a);c.setUint8(1,b.length);let e=2,d=[];for(let h=0;h<b.length;h++){let g=b[h],q=g.clientX-this.video.offsetLeft,k=g.clientY-this.video.offsetTop,f=this.normalizeAndQuantizeUnsigned(q,k),l=this.ongoingTouchIndexById(g.identifier);0>l?null==this||this.onEvents("can't figure out which touch to continue"):(c.setUint16(e,f.x,!0),e+=2,c.setUint16(e,f.y,
+!0),e+=2,c.setInt32(e,l,!0),e+=4,c.setUint8(e,255*g.force,!0),e+=1,c.setUint8(e,f.inRange?1:0,!0),e+=1,this.onEvents&&d.push(`{${l} (${parseInt(q)},${parseInt(k)})->(${parseInt(f.x)},${parseInt(f.y)}) ${255*g.force} ${f.inRange?1:0}}`))}this.rtc.send(c.buffer);this.onEvents&&(c="",80==a?c="start":82==a?c="move":81==a&&(c="end"),a=`[${c}] N${b.length} ${d.join(",")}}`,this.onEvents(a))}sendKeydown(a){this.callOnUserInteraction();let b=xa(a),c;null==(c=this.onEvents)||c.call(this,`Send KeyDown, Code:${b}, Repeat:${a.repeat}`);
+this.rtc.send((new Uint8Array([60,b,a.repeat])).buffer)}sendKeyup(a){this.callOnUserInteraction();a=xa(a);let b;null==(b=this.onEvents)||b.call(this,`Send KeyUp:${a}`);this.rtc.send((new Uint8Array([61,a])).buffer)}sendKeypress(a){this.callOnUserInteraction();var b;null==(b=this.onEvents)||b.call(this,`Send KeyPress:${a.charCode}`);b=new DataView(new ArrayBuffer(3));b.setUint8(0,62);b.setUint16(1,a.charCode,!0);this.rtc.send(b.buffer)}sendMouseEnter(){this.callOnUserInteraction();var a;null==(a=this.onEvents)||
+a.call(this,"Send MouseEnter");a=new DataView(new ArrayBuffer(1));a.setUint8(0,70);this.rtc.send(a.buffer)}sendMouseLeave(){this.callOnUserInteraction();var a;null==(a=this.onEvents)||a.call(this,"Send MouseLeave");a=new DataView(new ArrayBuffer(1));a.setUint8(0,71);this.rtc.send(a.buffer)}sendMouseMove(a,b,c,e){this.callOnUserInteraction();if(this.normalizeAndQuantizeUnsigned){var d;null==(d=this.onEvents)||d.call(this,`Send MouseMove, X:${a}, Y:${b}, DeltaX:${c}, DeltaY:${e}`);a=this.normalizeAndQuantizeUnsigned(a,
+b);c=this.normalizeAndQuantizeSigned(c,e);e=new DataView(new ArrayBuffer(9));e.setUint8(0,74);e.setUint16(1,a.x,!0);e.setUint16(3,a.y,!0);e.setInt16(5,c.x,!0);e.setInt16(7,c.y,!0);this.rtc.send(e.buffer)}}sendMouseDown(a,b,c){this.callOnUserInteraction();if(this.normalizeAndQuantizeUnsigned){var e;null==(e=this.onEvents)||e.call(this,`Send MouseDown, Button:${a}, X:${b}, Y:${c}`);b=this.normalizeAndQuantizeUnsigned(b,c);c=new DataView(new ArrayBuffer(6));c.setUint8(0,72);c.setUint8(1,a);c.setUint16(2,
+b.x,!0);c.setUint16(4,b.y,!0);this.rtc.send(c.buffer)}}sendMouseUp(a,b,c){if(this.normalizeAndQuantizeUnsigned){var e;null==(e=this.onEvents)||e.call(this,`Send MouseUp, Button:${a}, X:${b}, Y:${c}`);b=this.normalizeAndQuantizeUnsigned(b,c);c=new DataView(new ArrayBuffer(6));c.setUint8(0,73);c.setUint8(1,a);c.setUint16(2,b.x,!0);c.setUint16(4,b.y,!0);this.rtc.send(c.buffer)}}sendMouseWheel(a,b,c){this.callOnUserInteraction();if(this.normalizeAndQuantizeUnsigned){var e;null==(e=this.onEvents)||e.call(this,
+`Send MouseWheel, Delta:${a}, X:${b}, Y:${c}`);b=this.normalizeAndQuantizeUnsigned(b,c);c=new DataView(new ArrayBuffer(7));c.setUint8(0,75);c.setInt16(1,a,!0);c.setUint16(3,b.x,!0);c.setUint16(5,b.y,!0);this.rtc.send(c.buffer)}}}class cc extends ia{constructor(a,b,c){super(a);this.updateConnectionCount(b);this.createButton(c)}createButton(a){if(!this.elButton){this.elButton=document.createElement("button");this.elButton.id=`liveStatusSwitchButton_${this.uid}`;this.elButton.innerHTML=ca.Information;
+this.elButton.title=a;this.elButton.className="__liveStatusSwitchButton";if(R.isIOSDevice||R.isSafari)this.elButton.style.backgroundSize="cover";this.elButton.oncontextmenu=new Function("return false");this.elButton.onselectstart=new Function("return false");this.elButton.onclick=()=>this.setPanelVisible();this.elButton.onmousedown=b=>{1==b.button&&b.preventDefault()};this.appendElement(this.elButton)}}createPanel(){if(!this.elPanel){var a='<table border="0" cellspacing="0" cellpadding="0" style="position:absolute !important;padding:4px;left:0px;top:0px;width:100%;height:100%;">'+
+`<tr><td height="22" align="right" width="66" title="${H.getString("Connections")}-PlayerId-QualityControl">${H.getString("ConnInfo")}</td><td><span id="i_connections_${this.uid}">1</span>-<span id="i_playerId_${this.uid}">1</span></td><td align="right"><a id="i_hide_panel_${this.uid}" href="javascript:">${H.getString("Close")}</a></td></tr>`+`<tr><td height="22" align="right">${H.getString("Duration")}</td><td colspan="2" id="i_duration_${this.uid}">00:00:00</td></tr>`+`<tr><td height="22" align="right">${H.getString("Resolution")}</td><td colspan="2" id="i_resolution_${this.uid}">1920 x 1080</td></tr>`+
+`<tr><td height="22" align="right">${H.getString("Received")}</td><td colspan="2" id="i_bytesReceived_${this.uid}">0 kB</td></tr>`+`<tr><td height="22" align="right">${H.getString("ReceivedFrames")}</td><td colspan="2" id="i_framesReceived_${this.uid}">0</td></tr>`+`<tr><td height="22" align="right" title="${H.getString("DroppedTip")}">${H.getString("Dropped")}</td><td colspan="2"><span id="i_packetsLost_${this.uid}">0</span> / <span id="i_frameDropped_${this.uid}">0</span></td></tr>`+`<tr><td height="22" align="right" title="${H.getString("DecodeTimeTip")}">${H.getString("DecodingTime")}</td><td colspan="2"><span id="i_compositeTime_${this.uid}"></span></td></tr>`+
+`<tr><td height="22" align="right" title="${H.getString("DecodeFramesTip")}">${H.getString("DecodeFrames")}</td><td colspan="2"><span id="i_framesDecoded_${this.uid}" title="number of frames decoded">0</span> / <span id="i_keyframesDecoded_${this.uid}" title="Number of keyframes decoded">0</span></td></tr>`+`<tr><td height="22" align="right">${H.getString("Bitrate")}</td><td colspan="2" id="i_bitrate_${this.uid}">-</td></tr>`+`<tr><td height="22" align="right" title="${H.getString("FPSTip")}">${H.getString("FPS")}</td><td colspan="2" title="${H.getString("FPSTip")}"><span id="i_framerateRender_${this.uid}">-</span> / <span id="i_framerateVideo_${this.uid}">-</span></td></tr>`+
+`<tr><td height="22" align="right">${H.getString("QP")}</td><td colspan="2" id="i_qp_${this.uid}">0</td></tr>`+`<tr><td height="22" align="right" title="${H.getString("MaxQPTip")}">${H.getString("MaxQP")}</td><td colspan="2"><select id="i_settings_maxQP_${this.uid}" style="width:84px;"></select></td></tr>`+`<tr><td height="22" align="right" title="Mbps">${H.getString("MaxBitrate")}</td><td colspan="2"><select id="i_settings_maxBitrate_${this.uid}" style="width:84px;"></select></td></tr>`+"</table>";
+this.elPanel=document.createElement("div");this.elPanel.innerHTML=a;this.elPanel.id=`liveStatusPanel_${this.uid}`;this.elPanel.className="__liveStatusPanel __fadeinComp";this.elPanel.oncontextmenu=new Function("return false");this.elPanel.onselectstart=new Function("return false");this.appendElement(this.elPanel);this.get("i_hide_panel").onclick=()=>this.setPanelVisible();for(a=29;40>=a;a++)this.get("i_settings_maxQP").add(new Option(a,a));this.get("i_settings_maxQP").onchange=()=>{let b={encodeMaxQP:this.getValue("i_settings_maxQP")};
+this.player.rtc.updateParams(b);this.player.signallingConnection.updateParams(b);this.get("i_settings_maxQP").blur()};for(a=10;100>=a;a+=5)this.get("i_settings_maxBitrate").add(new Option(a,a));this.get("i_settings_maxBitrate").onchange=()=>{let b={maxBitrate:this.getValue("i_settings_maxBitrate")};this.player.rtc.updateParams(b);this.player.signallingConnection.updateParams(b);this.get("i_settings_maxBitrate").blur()}}}setPosition(a){a||(a=this.container.getBoundingClientRect());this.elButton&&(this.elButton.style.top=
+`${a.height-32}px`);if(this.elPanel)if(this.customPosX&&this.customPosY)this.elPanel.style.left=this.customPosX+"px",this.elPanel.style.top=this.customPosY+"px";else{let b=this.elPanel.getBoundingClientRect();this.elPanel.style.left="5px";this.elPanel.style.top=`${a.height-b.height-42}px`}}destroy(){this.updateLatencyTestUI=!1;this.visible&&this.setPanelVisible();this.elPanel&&(this.removeElement(this.elPanel),this.elPanel=null);this.elButton&&(this.removeElement(this.elButton),this.elButton=null)}setPanelVisible(a,
+b){this.customPosX=a;this.customPosY=b;if(this.elPanel)if("none"==this.elPanel.style.display)this.updateConnectionCount(),this.elPanel.style.display="block",this.elPanel.className="__liveStatusPanel __fadeinComp",this.visible=!0,this.player.rtc.sendEnableIntervalSendQP(!0);else{this.elPanel.className="__liveStatusPanel __fadeoutComp";setTimeout(()=>{this.visible=!1;this.elPanel.style.display="none";this.player.rtc.sendEnableIntervalSendQP(!1);this.setNeedReposUI();this.resize()},500);return}else this.createPanel(),
+this.visible=!0,this.resize(),this.updateConnectionCount(),this.player.rtc.requestInitialSettings(),this.player.rtc.sendEnableIntervalSendQP(!0);this.setNeedReposUI();this.resize()}adjustMaxQP(a){return 18==a?(this.get("i_settings_maxQP")&&this.get("i_settings_maxQP").add(new Option(18,18)),18):0>a?40:0<=a&&29>a?29:40<a?40:a}adjustMaxBitrate(a){return 300==a?(this.get("i_settings_maxBitrate")&&this.get("i_settings_maxBitrate").add(new Option(300,300)),300):10>a?10:100<a?100:a}formatNumber(a,b){return"undefined"==
+typeof a?"-":(new Intl.NumberFormat(window.navigator.language,{maximumFractionDigits:b||0})).format(a)}processValue(a){return a}updateButtonTip(a){this.elButton&&(this.elButton.title=a)}updateConnectionCount(a){void 0!=a&&(this.playersCount=a);this.setText("i_connections",this.playersCount);this.updatePlayerId()}updatePlayerId(){this.setText("i_playerId",this.player.playerId+(this.player.isQualityController()?"-QC":""))}updateWebRtcStats(a){if(this.visible){var b=(a.timestamp-a.timestampStart)/1E3,
+c=new Intl.NumberFormat(window.navigator.language,{maximumFractionDigits:0,minimumIntegerDigits:2}),e=[],d=[60,60];for(let h=0;h<d.length;h++)e.push(b%d[h]),b/=d[h];e.push(b);b=c.format(e[0]);d=c.format(Math.floor(e[1]));c=c.format(Math.floor([e[2]]));this.setText("i_duration",c+":"+d+":"+b);this.setText("i_resolution",a.frameWidth&&a.frameHeight?a.frameWidth+" x "+a.frameHeight:"-");c="B";e=a.bytesReceived||0;b=["kB","MB","GB"];for(d=0;d<b.length&&!(1E5>e);d++)e/=1E3,c=b[d];this.setText("i_bytesReceived",
+this.formatNumber(e)+" "+c);this.setText("i_framesReceived",this.processValue(a.framesReceived));this.setText("i_framesDecoded",a.framesDecoded);this.setText("i_keyframesDecoded",this.processValue(a.keyFramesDecoded));this.updateVideoFramerate(this.formatNumber(a.framesPerSecond));this.updateBitrate(a.bitrate);this.setText("i_packetsLost",this.processValue(a.packetsLost));this.setText("i_frameDropped",this.processValue(a.framesDropped));this.setText("i_compositeTime",this.formatNumber(a.receiveToCompositeMs,
+1))}}updateVideoFramerate(a){let b=this.get("i_framerateVideo");b.style.color=10>a?"red":20>a?"orange":"rgb(128,255,0)";b.innerText=a}updateBitrate(a){let b=this.get("i_bitrate");a?1E3<a?(b.style.color="rgb(128,255,0)",b.innerText=this.formatNumber(a/1E3,1)+" Mbps"):(b.style.color=100>a?"red":1E3>a?"orange":"rgb(128,255,0)",b.innerText=this.formatNumber(a)+" kbps"):b.innerText="-"}updateInitialSettings(a){let b=this.adjustMaxQP(a.Encoder.MaxQP);this.setValue("i_settings_maxQP",b);a=this.adjustMaxBitrate(a.WebRTC.MaxBitrate/
+1E3/1E3);this.setValue("i_settings_maxBitrate",a)}updateQPAndRenderFPS(a,b){let c=this.get("i_qp");c.style.color=35<a?"red":26<a?"orange":"rgb(128,255,0)";c.innerText=a;this.get("i_framerateRender").innerText=this.processValue(b)}}class dc extends ia{constructor(a){super(a);this.bDelayClear=!1;this.create()}create(){this.el=document.createElement("pre");this.el.id=`startupInfoPanel_${this.uid}`;this.el.className="__startupInfoPanel";this.el.oncontextmenu=new Function("return false");this.el.onselectstart=
+new Function("return false");this.appendElement(this.el);this._visible=!0}destroy(){this.el&&(this.removeElement(this.el),this.el=null)}setVisible(a){!this._visible&&a&&this.el&&(this.el.innerText="");this._visible!=a&&this.el&&((this._visible=a)?(this.el.className="__startupInfoPanel",this.el.style.display="block"):this.el.style.display="none",this.setNeedReposUI())}hide(){this.el.className="__startupInfoPanel __fadeoutComp";setTimeout(()=>this.setVisible(!1),500)}setDelayClear(a){this.bDelayClear=
+a}log(a){if(this.el){if(this.bDelayClear)this.bDelayClear=!1,this.el.innerText=a+"\n";else{let b=this.el.innerText;b+=a+"\n";this.el.innerText=b}this.el.scrollTop=this.el.scrollHeight+100}}setPosition(a){a||(a=this.container.getBoundingClientRect());this.el&&(this.el.style.height=`${a.height-20}px`)}}class ec extends ia{constructor(a){super(a);this.create()}create(){this.el||(this.el=document.createElement("i"),this.el.id=`statusIndicator_${this.uid}`,this.el.className="__statusIndicator",this.appendElement(this.el))}destroy(){this.el&&
+(this.removeElement(this.el),this.el=null)}setStatus(a){let b="Red",c=this.get("statusIndicator");switch(a){case V.WS_Disconnected:b="Red";c&&(c.style.display="inline-block");break;case V.WS_Connecting:b="RGB(200,200,200)";break;case V.WS_Connected:b="Yellow";break;case V.RTC_Opened:b="RGB(0,128,255)";break;case V.OnReady:b="RGB(0,255,0)",this.hide()}this.lastStatus=a;c&&(c.style.backgroundColor=b)}hide(){let a=this.get("statusIndicator");a&&(a.style.display="none")}}class fc{constructor(){this.css("@keyframes __fadeoutframes {0%{opacity:1;} 100%{opacity:0;}}.__fadeoutComp {animation-duration:600ms; animation-name:__fadeoutframes;}@keyframes __fadeinframes {0%{opacity:0;} 100%{opacity:0.65;}}.__fadeinComp {animation-duration:100ms; animation-name:__fadeinframes;}@keyframes twinkling{0%{opacity:0;}100%{opacity:1;}}.__statusIndicator {position:absolute;display:block;left:5px;top:5px;width:6px;height:6px;border-radius:50%;background-color:red;animation:twinkling 0.25s infinite ease-in-out;}.__startupInfoPanel { position:absolute;left:3px;top:0px;width:400px;background-color:transparent !important;text-shadow:black 0.1em 0.1em 0.2em;color:white;font-family:Verdana;font-size:12px !important;overflow:auto;}.__liveStatusPanel {position:absolute;left:5px;top:10px;width:164px;height:300px;background-color:rgba(50,50,50,0.8);color:#00FF00;font-family:Verdana;font-size:10px;box-shadow:0px 0px 5px 5px rgba(200,200,200,0.5);-moz-border-radius:8px;-webkit-border-radius:8px;}.__liveStatusPanel a:link { color: rgb(0,255,128); text-decoration: none; }.__liveStatusPanel a:hover { color: yellow; background:transparent; }.__liveStatusPanel input {background:transparent; border:1px solid gray; color: #00FF00;}.__liveStatusPanel select {background:transparent; border:1px solid gray; color: #00FF00;}.__liveStatusPanel option {background:#333; color: #00FF00;}.__liveStatusSwitchButton{position:absolute;padding:0;left:6px;width:26px;height:26px;opacity:0.65;cursor:pointer;background-size:conver;}.__fullscreeButton {position:absolute;padding:0;left:38px;width:26px;height:26px;opacity:0.65;cursor:pointer;background-size:conver;}.__viewHomeButton {position:absolute;padding:0;left:70px;width:26px;height:26px;opacity:0.65;cursor:pointer;background-size:conver;}.__taskWaiting {position:absolute;z-index:30;text-align:center;padding-left:5px;text-shadow:black 0.1em 0.1em 0.2em;color:lime;font-family:Verdana;font-size:12px !important;overflow:hidden;display:none;}.__eventsPanel {position:absolute;left:3px;top:0px;width:600px;height:200px;background-color:rgba(64,64,64,0.5) !important;text-shadow:black 0.1em 0.1em 0.2em;color:white;font-family:Verdana;font-size:12px !important;overflow:auto;}.streamingVideoNoCursor {width:100%;height:100%;}.streamingVideoCursorMove {width:100%;height:100%;cursor:move;}.streamingVideoCursorPan {width:100%;height:100%;cursor:url(data:application/octet-stream;base64,AAACAAEAICAAAA8ADwCoDAAAFgAAACgAAAAgAAAAQAAAAAEAGAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////8AAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAD///////8AAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////////////////////////////////////////////4B///+Af///AH///gA///wAP//8AB///gAf//8AH//+AB///gA///8k///////////////////////////////////////////////////////////////////////w==),auto;}.streamingVideoCursorPointer {width:100%;height:100%;cursor:url(data:application/octet-stream;base64,AAACAAEAICAAAA0ACACoDAAAFgAAACgAAAAgAAAAQAAAAAEAGAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAD///////8AAAD///////8AAAD///////8AAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAD///////8AAAD///////8AAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAD///////8AAAD///////8AAAAAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAD///////8AAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////////////////////////////////////////////4B///+Af///AH///gA///wAP//8AB//+AAf//AAD//wAA//+AAP//4AD//+AF///gT///4f///+H////h////8////////////////////////////////////////w==),auto;}.streamingVideoCursorRotate {width:100%;height:100%;cursor:url(data:application/octet-stream;base64,AAACAAEAICAAAA8ADwCoDAAAFgAAACgAAAAgAAAAQAAAAAEAGAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAD///////////////////////////////////////8AAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAD///////////////////////////////////////////8AAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////8AAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////8AAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////8AAAD///8AAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAD///////8AAAD///////8AAAD///////8AAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////////////////////////////////////////////4B///+Af///AH//hgAh/wwAMP4cABh+HgAYfh8AGH4eABh+HgA4eAck4BwP//A+H//4fz///P/////////////////////////////////////////////////////w==),auto;}")}css(a){let b=
+document.createElement("style");try{b.appendChild(document.createTextNode(a))}catch(c){b.styleSheet.cssText=a}(a=document.getElementsByTagName("head")[0])?a.appendChild(b):console.error("[Cloud] No head element found, cannot create css.")}}class gc extends ia{constructor(a){super(a);this.elContainer=document.createElement("div");this.elContainer.id=`taskWaiting_${this.uid}`;this.elContainer.className="__taskWaiting";this.elContainer.oncontextmenu=new Function("return false");this.elContainer.onselectstart=
+new Function("return false");this.appendElement(this.elContainer);this.elText=document.createElement("div");this.elText.style.marginBottom="15px";this.elText.innerText="dddd";this.elContainer.appendChild(this.elText);this.elButton=document.createElement("input");this.elButton.type="button";this.elButton.value=H.getString("RestartInstNow");this.elButton.onclick=()=>{this.player.setInstanceOptions({iid:this.player.options.iid,reset:!0})};this.elContainer.appendChild(this.elButton);H.onLanguageChangedCallbacks.push(()=>
+{this.elButton.value=H.getString("RestartInstNow")});this.setMode(0)}setMode(a){this._mode=a;0===a?this.elContainer.style.background="transparent":(this.elContainer.style.background="rgba(64,64,64,0.5)",this.elContainer.style.height="26px",this.elContainer.style.lineHeight="26px")}destroy(){this.elContainer&&(this.removeElement(this.elContainer),this.elContainer=null)}updateText(a){this.elText&&(this.elText.innerText=a,this.show())}show(){this.elContainer.className="__taskWaiting";this.elContainer.style.display=
+"block"}hide(){this.elContainer.className="__taskWaiting __fadeoutComp";setTimeout(()=>this.elContainer.style.display="none",500)}setPosition(a,b,c,e){if(this.elContainer)if(a||(a=this.container.getBoundingClientRect()),0==this._mode){var d=a.width/2-150;0>d&&(d=10);this.elContainer.style.left=d+"px";this.elContainer.style.top=a.height/2+"px"}else d=0,b&&d++,c&&d++,e&&d++,a=a.height-32,this.elContainer.style.left=(0==d?5:1==d?38:2==d?70:102)+"px",this.elContainer.style.top=a+"px"}}class hc extends ia{constructor(a){super(a);
+this.create()}create(){if(!this.el){var a=[];a.push(H.getString("LeftClickTip"));a.push(H.getString("RightClickTip"));a.push(H.getString("MiddleClickTip"));a=a.join("\n");this.el=document.createElement("button");this.el.id=`viewHomeButton_${this.uid}`;this.el.className="__viewHomeButton";if(R.isIOSDevice||R.isSafari)this.el.style.backgroundSize="cover";this.el.innerHTML=ca.InitialCamera;this.el.title=a;this.el.oncontextmenu=new Function("return false");this.el.onselectstart=new Function("return false");
+this.el.onclick=b=>this.player.viewHome(0);this.el.onmousedown=b=>{0!=b.button&&this.player.viewHome(b.button);b.preventDefault()};this.appendElement(this.el)}}destroy(){this.el&&(this.removeElement(this.el),this.el=null)}setPosition(a,b,c){a||(a=this.container.getBoundingClientRect());if(this.el){let e=5;if(b&&c)e=70;else if(b||c)e=38;this.el.style.left=e+"px";this.el.style.top=`${a.height-32}px`}}}var va=0;class ic{constructor(a,b){if(a){this.host=a;this.options=b;ka.processParams(this.options);
+H.setLanguage();this.uid=++va;this.options.apiOptions.player=this;this.api=new ra(null,this.options.apiOptions);if(this.options.domId)if(a=wa(this.options.domId))this.container=document.createElement("div"),this.container.style="position:relative;width:100%;height:100%;",a.innerHTML="",a.appendChild(this.container);else if("loading"==document.readyState){console.error(H.getString("DomLoading"));return}if(this.hasVideo=!!this.container)this.styleManager=new fc,this.createWidgetsInConstructor(),this.canAdaptiveResolution=
+!1,this.lastResizeTime=Date.now(),this.orientationChangeTimeout=void 0;this.constructUrlAndConnect();this.resetInteractTimestamp()}else console.error("[DigitalTwinPlayer] The parameter `host` cannot be empty!")}constructUrlAndConnect(){this.logStartupInfo(`host: ${this.host}`);this.useHttps="https:"==location.protocol||this.options.useHttps;this.url=`${this.useHttps?"wss":"ws"}://${this.host}/player?hasVideo=${this.hasVideo}`;this.options.offer&&(this.url+="&offer=1");this.options.iid&&(this.url+=
+"&iid="+this.options.iid);this.options.pid&&(this.url+="&pid="+this.options.pid);this.options.password&&(this.url+="&password="+this.options.password);if("object"==typeof this.options.urlExtraInfo)for(let a in this.options.urlExtraInfo)this.url+="&"+a+"="+this.options.urlExtraInfo[a];this.options.reset&&(this.url+="&reset=1",this.options.reset=!1);setTimeout(()=>this.connectSignallingServer(),200)}callEvent(a,b,c){a=this.options.events[a];"function"==typeof a&&a(b,c)}getHost(){return this.host}getAPI(){return this.api}getInstanceInfo(){return this.paramInfo}getVideoElement(){let a;
+return null==(a=this.htmlVideo)?void 0:a.video}getVideoElementSize(){let a=this.getVideoElement();return{width:null==a?void 0:a.clientWidth,height:null==a?void 0:a.clientHeight}}getVideoStreamSize(){return{width:this.htmlVideo.videoWidth(),height:this.htmlVideo.videoHeight()}}getVideoSize(){return this.getVideoStreamSize()}screen2World(a,b,c){let e=this.getVideoElementSize(),d=this.getVideoStreamSize(),h=0,g=0,q=d.height/d.width;e.height/e.width>q?g=-(e.width*q-e.height)/2:h=-(e.height/q-e.width)/
+2;a=d.width/(e.width-2*h)*(a-h);b=d.height/(e.height-2*g)*(b-g);return this.getAPI().coord.screen2World(a,b,c)}world2Screen(a,b,c,e){const d=this;return $jscomp.asyncExecutePromiseGeneratorFunction(function*(){let h=yield __g.coord.world2Screen(a,b,c,e),g=d.getVideoElementSize(),q=d.getVideoStreamSize(),k=0,f=0,l=q.height/q.width;g.height/g.width>l?f=-(g.width*l-g.height)/2:k=-(g.height/l-g.width)/2;h.screenPosition=[h.screenPosition[0]/(q.width/(g.width-2*k))+k,h.screenPosition[1]/(q.height/(g.height-
+2*f))+f];return h})}setResolution(a,b){if(this.streamerAdaptive){window.devicePixelRatio&&(a*=window.devicePixelRatio,b*=window.devicePixelRatio);if(4096<a||4096<b)b=a/b,1<=b?(a=4096,b=4096/b):(a=4096*b,b=4096);this.streamerAdaptive&&this.streamerLimitMaxResolution&&(a>this.streamerResX||b>this.streamerResY)&&(b=a/b,b>=this.streamerResX/this.streamerResY?(a=this.streamerResX,b=this.streamerResX/b):(a=this.streamerResY*b,b=this.streamerResY));a=Math.floor(a);b=Math.floor(b);var c=this.htmlVideo.videoWidth(),
+e=this.htmlVideo.videoHeight();if(a!=c&&a+1!=c&&a-1!=c||b!=e&&b+1!=e&&b-1!=e){if(this.lastWidth&&this.lastHeight&&(c=Math.abs(this.lastWidth-a),e=Math.abs(this.lastHeight-b),(0!=c||0!=e)&&4>c&&4>e))return;this.lastWidth=a;this.lastHeight=b;this.rtc&&this.rtc.updateRenderResolution(a,b);return[a,b]}}}destroy(a){console.log(`call DigitalTwinPlayer.destroy: ${a||" "}`);if(!this.isDestroyed){va--;this.isDestroyed=!0;this.destroyReason=a;var b;null==(b=this.rtc)||b.close();var c;null==(c=this.signallingConnection)||
+c.close()}}setKeyEventTarget(a){let b;null==(b=this.htmlVideo)||b.setKeyEventTarget(a)}setKeyEventReceiver(a){this.setKeyEventTarget(a)}resize(){if(this.container){this.rect=this.container.getBoundingClientRect();if(this.bNeedReposUI||!this.oldRect||this.oldRect.width!=this.rect.width||this.oldRect.height!=this.rect.height){this.bNeedReposUI=!1;this.oldRect=this.rect;let b;null==(b=this.startupInfo)||b.setPosition(this.rect);let c;null==(c=this.liveStatus)||c.setPosition(this.rect);let e;null==(e=
+this.fullscreenButton)||e.setPosition(this.rect,this.options.ui.statusButton);let d;null==(d=this.homeButton)||d.setPosition(this.rect,this.options.ui.statusButton,this.options.ui.fullscreenButton);let h;null==(h=this.taskListBar)||h.setPosition(this.rect,this.options.ui.statusButton,this.options.ui.fullscreenButton,this.options.ui.homeButton)}if(this.htmlVideo.valid()){this.canAdaptiveResolution&&(console.warn("set res..."),this.setResolution(this.htmlVideo.clientWidth(),this.htmlVideo.clientHeight()));
+var a;null==(a=this.htmlVideo)||a.resize(this.streamerAdaptive&&this.canAdaptiveResolution)}}}setInstanceOptions(a){const b=this;return $jscomp.asyncExecutePromiseGeneratorFunction(function*(){var c=a.pid==b.options.pid&&a.iid==b.options.iid||!a.pid&&a.iid==b.options.iid||!a.iid&&a.pid==b.options.pid;if(c&&!a.reset)b.api.log("setInstanceOptions: no change.");else{if(!c){c=(!a.iid||a.iid==b.options.iid)&&a.pid!=b.options.pid;if(b.streamerLocked&&c){b.api.log(H.getString("CannotChangeProject"));return}c=
+yield b.signallingConnection.checkParams(a);if(null!==c){if(!1===c.iid){b.api.log(`iid(${a.iid})${H.getString("InstanceNotExist")}`);return}if(!1===c.pid){b.api.log(`pid(${a.pid})${H.getString("ProjectNotExist")}`);return}}}b.destroy();b.options.iid=a.iid;b.options.pid=a.pid;b.options.reset=a.reset;b.constructUrlAndConnect()}})}set fullscreen(a){a?R.fullscreen(this.container):R.exitFullscreen()}get fullscreen(){return!!document.fullscreenElement}setActionEventEnabled(a){let b;null==(b=this.htmlVideo)||
+b.setActionEventEnabled(a)}onApiReady(){this.setStatus(V.OnReady);let a;null==(a=this.signallingConnection)||a.sendReady();1==this.options.ui.mainUI?this.api.settings.setMainUIVisibility(!0):0==this.options.ui.mainUI&&this.api.settings.setMainUIVisibility(!1);1==this.options.ui.campass?this.api.settings.setCampassVisible(!0):0==this.options.ui.campass&&this.api.settings.setCampassVisible(!1)}sendApi(a){if(a){let b;null==(b=this.rtc)||b.sendApi(a)}}onMainThreadBusy(a){if(1===a.busy){let b="BUSY! ",
+c=this.api.apiQueue.queueSize(),e=this.api.apiQueue.dataSize();0<c&&(b+=`${H.getString("JSQueue")}${c}/${e}\uff0c`);1<a.taskCount&&(b+=`${H.getString("BackQueue")}${a.taskCount}\uff0c`);b+=`${H.getString("Execting")}${p[a.currentTask]}${H.getString("PleaseWait")}`;this.hasVideo&&(this.htmlVideo.isVideoLoaded()&&this.options.ui.taskListBar||!this.htmlVideo.isVideoLoaded())&&this.taskListBar.updateText(b)}else this.taskListBar.hide()}viewHome(a){this.api.viewHome(a)}resetInteractTimestamp(){let a=Date.now();
+this.timeOfLastInteraction=a;let b;null==(b=this.signallingConnection)||b.resetInteractTimestamp(a)}receiveParamInfo(a){this.paramInfo=a;let b=a.project,c=a.nodeIP,e=a.hostName;this.options.iid=a.iid;this.options.pid=a.pid;this.streamerAdaptive=a.adjustResolution;this.streamerLimitMaxResolution=a.limitMaxResolution;this.streamerResX=a.resX;this.streamerResY=a.resY;this.streamerLocked=a.locked;if(this.kickOutInMinutes=a.kickOutInMinutes){let h=setInterval(()=>{if(Date.now()-this.timeOfLastInteraction>
+6E4*this.kickOutInMinutes){let g=H.getString("DisconnectForIdle");this.destroy(g);console.warn(g);clearInterval(h)}},2E4)}this.nodeInfoArray=[`${H.getString("NodeInfo")}`];e&&this.nodeInfoArray.push(`\t${H.getString("Host")}`+e);c&&this.nodeInfoArray.push(`\t${H.getString("HostAddress")}`+c);b&&this.nodeInfoArray.push(`\t\u3000${H.getString("Project")}`+b);this.options.pid&&this.nodeInfoArray.push(`\t${H.getString("ProjectId")}`+this.options.pid);this.nodeInfoArray.push(`\t${H.getString("IID")}`+
+this.options.iid);this.nodeInfoArray.push(`\t${H.getString("Adaptive")}`+this.streamerAdaptive);this.nodeInfoArray.push(`\t${H.getString("LimitMaxRes")}`+this.streamerLimitMaxResolution);this.nodeInfoArray.push(`\t${H.getString("Resolution")}${this.streamerResX}x${this.streamerResY}`);let d;null==(d=this.liveStatus)||d.updateButtonTip(this.nodeInfoArray.join("\n"));this.api.log(this.nodeInfoArray.join("\n\t"))}logStartupInfo(a){if(a){var b=new Date;a=`[${pa(b.getHours(),2)+":"+pa(b.getMinutes(),2)+
+":"+pa(b.getSeconds(),2)+"."+pa(b.getMilliseconds(),3)}] ${a}`;var c;null==(c=this.startupInfo)||c.log(a);1<va&&(a=`[${this.uid}] `+a);console.log("[DEBUG]"+a);this.api.log(a)}}setStatus(a,b){this.cloudStatus=a;let c;null==(c=this.statusIndicator)||c.setStatus(a);switch(a){case V.WS_Disconnected:if(this.isDestroyed){console.log("destroyed.");break}b&&(this.logStartupInfo(b),console.warn(b));break;case V.WS_Connecting:this.logStartupInfo(`connecting with ${this.useHttps?"wss":"ws"}...`);break;case V.WS_Connected:this.logStartupInfo("connected");
+break;case V.OnReady:let e;null==(e=this.startupInfo)||e.hide();this.options.ui.debugEventsPanel&&!this.eventsPanel&&(this.eventsPanel=new $b(this),this.eventsPanel.appendText("Start recording events here:"));this.resize()}}createWidgetsInConstructor(){this.taskListBar=new gc(this);this.htmlVideo=new bc(this,{keyEventTarget:this.options.keyEventTarget,useBuiltinCursors:this.options.useBuiltinCursors,mouseKeyListener:this.options.events.mouseKeyListener,onEvents:a=>{let b;return null==(b=this.eventsPanel)?
+void 0:b.appendText(a)},onVideoLoaded:()=>{this.logStartupInfo("video: loadedmetadata");this.createWidgets();this.callEvent("onVideoLoaded");this.resize()},onMButtonDoubleClick:(a,b)=>{let c;null==(c=this.liveStatus)||c.setPanelVisible(a,b)}});this.options.ui.statusIndicator&&(this.statusIndicator=new ec(this));this.options.ui.startupInfo&&(this.startupInfo=new dc(this),this.logStartupInfo("sdk version: "+this.api.getVersion()),this.logStartupInfo("uid: "+this.uid));this.resizeObserver=new ResizeObserver(Ga(()=>
+this.resize(),500));this.resizeObserver.observe(this.container)}createWidgets(){this.options.ui.statusButton&&(this.liveStatus=new cc(this,this.playerCount,this.nodeInfoArray.join("\n")));this.options.ui.fullscreenButton&&(this.fullscreenButton=new ac(this));this.options.ui.homeButton&&(this.homeButton=new hc(this));this.taskListBar&&this.taskListBar.setMode(1)}destroyWidgets(){this.liveStatus&&(this.liveStatus.destroy(),this.liveStatus=null);this.fullscreenButton&&(this.fullscreenButton.destroy(),
+this.fullscreenButton=null);this.homeButton&&(this.homeButton.destroy(),this.homeButton=null);this.eventsPanel&&(this.eventsPanel.destroy(),this.eventsPanel=null);this.taskListBar&&(this.taskListBar.destroy(),this.taskListBar=null)}isQualityController(){return this.bQualityController}initWebRtcPlayer(a){H.setLanguage(a.language);this.rtc=new Zb({useStats:this.hasVideo&&(this.options.ui.statusButton||this.options.events.onRtcStatsReport),peerConnectionOptions:a.peerConnectionOptions,events:{onlog:b=>
+this.logStartupInfo(b),ontrack:b=>{let c;null==(c=this.htmlVideo)||c.setTrack(b)},onicecandidate:b=>{let c;return null==(c=this.signallingConnection)?void 0:c.sendCandidate(b)},onOfferCreated:b=>{let c;return null==(c=this.signallingConnection)?void 0:c.sendOffer(b.sdp,this.hasVideo)},onAnswerCreated:b=>{let c;return null==(c=this.signallingConnection)?void 0:c.send(b)},onstats:b=>{let c;null==(c=this.liveStatus)||c.updateWebRtcStats(b);this.callEvent("onRtcStatsReport",b)},ondatachannelopen:()=>
+{this.setStatus(V.RTC_Opened);this.hasVideo&&(this.rtc.requestQualityControl(),this.liveStatus&&this.rtc.requestInitialSettings());this.api.onConnectionOpen()},ondatachannelclose:b=>this.api.onConnectionClose(b),ondatachannelerror:b=>this.api.onConnectionClose(b.error),ondatachannelmessage:(b,c)=>{switch(b){case "ResponseAPI":this.api.onConnectionMessage(c);break;case "InitialSettings":let e;null==(e=this.liveStatus)||e.updateInitialSettings(c);break;case "VideoEncoderAvgQP":let d;if(null==(d=this.liveStatus)?
+0:d.visible)b=(new TextDecoder("utf-16")).decode(c.data.slice(1)),(b=JSON.parse(b))&&this.liveStatus.updateQPAndRenderFPS(b.qp,b.renderFPS);break;case "QualityControlOwnership":this.bQualityController=c;let h;null==(h=this.liveStatus)||h.updatePlayerId()}}}});this.hasVideo&&this.htmlVideo.setWebRtcPlayer(this.rtc);this.logStartupInfo("setting up...");this.options.offer&&this.rtc.createOffer();this.hasVideo&&(this.htmlVideo.registerKeyboardEvents(),this.htmlVideo.registerMouseEvents(),this.htmlVideo.registerTouchEvents())}connectSignallingServer(){this.setStatus(V.WS_Connecting);
+this.signallingConnection=new Wb({onopen:()=>this.setStatus(V.WS_Connected),onclose:a=>this.handleSignallingClose(a),onerror:()=>{this.setStatus(V.WS_Disconnected)},onmessage:a=>{switch(a.type){case "config":this.initWebRtcPlayer(a);break;case "answer":this.playerId=a.playerId;this.rtc&&this.rtc.onReceiveAnswer(a);break;case "offer":this.playerId=a.playerId;this.rtc&&this.rtc.onReceiveOffer(a);break;case "iceCandidate":this.rtc&&this.rtc.onIceCandidate(a.candidate);break;case "paramInfo":this.receiveParamInfo(a);
+break;case "status":this.handleSignallingMessage_Status(a);break;case "playerCount":this.handleSignallingMessage_PlayerCount(a)}}});this.signallingConnection.connect(this.url)}handleSignallingClose(a){this.destroyWidgets();this.callEvent("onConnClose",a);this.startupInfo&&this.startupInfo.setVisible(!0);this.api.onConnectionClose(a);this.rtc&&this.rtc.close();let b="";this.isDestroyed?(b=H.getString("Destroyed"),b=this.destroyReason?b+(": "+this.destroyReason):b+"."):(b="closed: ",a.code&&(b+=a.code),
+a.reason?b+=" "+a.reason:1006==a.code&&(b+=" "+H.getString("Disconnect")));this.setStatus(V.WS_Disconnected,b);Ia(a.code)||this.destroy();this.isDestroyed||(this.logStartupInfo(H.getString("Reconnect5s")),this.startupInfo.setDelayClear(!0),setTimeout(()=>this.connectSignallingServer(),5E3));a.code==sa.instance_is_busy&&confirm(H.getString("RestartAndRetry"))&&this.setInstanceOptions({iid:this.busyIId,reset:!0})}handleSignallingMessage_Status(a){let b=Ha(a.state);b&&this.logStartupInfo(b);a.state===
+da.StartFailed?(console.error(a.info),this.options.ui.startupInfo&&setTimeout(()=>alert(a.info),500)):a.state==da.ConfirmBusy&&(this.busyIId=a.info)}handleSignallingMessage_PlayerCount(a){this.playerCount=a.count;let b;null==(b=this.liveStatus)||b.updateConnectionCount(this.playerCount);(this.canAdaptiveResolution=1===a.count)&&this.resize()}}v.APIErrorCode={OK:0,InvalidParameters:1,InternalError:2,ResourceNotFound:3,AcpProjWKTNotSet:4,CoordinateConversionFailed:5,IDExists:6,InvalidRequestType:7,
+InvalidRequestString:8,NoCommand:9,DataTypeNotSupport:10,InvalidOperation:11,ProjectNotOpened:12,CodeMax:65535};v.ActionMode={None:0,Follow:1,FollowBehindAndAbove:2,FollowBehind:3,FollowAbove:4,FollowBellow:5,FollowLeft:6,FollowRight:7};v.AnimatedImageButtonData=Qa;v.BPFuncParamType={Bool:0,UInt8:1,Int32:2,Float:3,Double:4,String:5,Color:6,Vector2D:7,Vector:8,Rotator:9,IntArray:10,StringArray:11,VectorArray:12,Coordinate:13,CoordinateArray:14,FloatArray:15};v.BPFunctionData=db;v.BeamData=Ra;v.CameraTourData=
+fb;v.CameraTourKeyFrame=eb;v.CloudStatus=V;v.Color={LightPink:"RGB(255,182,193)",Pink:"RGB(255,192,203)",Crimson:"RGB(220,20,60)",LavenderBlush:"RGB(255,240,245)",PaleVioletRed:"RGB(219,112,147)",HotPink:"RGB(255,105,180)",DeepPink:"RGB(255,20,147)",MediumVioletRed:"RGB(199,21,133)",Orchid:"RGB(218,112,214)",Thistle:"RGB(216,191,216)",plum:"RGB(221,160,221)",Violet:"RGB(238,130,238)",Magenta:"RGB(255,0,255)",Fuchsia:"RGB(255,0,255)",DarkMagenta:"RGB(139,0,139)",Purple:"RGB(128,0,128)",MediumOrchid:"RGB(186,85,211)",
+DarkVoilet:"RGB(148,0,211)",DarkOrchid:"RGB(153,50,204)",Indigo:"RGB(75,0,130)",BlueViolet:"RGB(138,43,226)",MediumPurple:"RGB(147,112,219)",MediumSlateBlue:"RGB(123,104,238)",SlateBlue:"RGB(106,90,205)",DarkSlateBlue:"RGB(72,61,139)",Lavender:"RGB(230,230,250)",GhostWhite:"RGB(248,248,255)",Blue:"RGB(0,0,255)",MediumBlue:"RGB(0,0,205)",MidnightBlue:"RGB(25,25,112)",DarkBlue:"RGB(0,0,139)",Navy:"RGB(0,0,128)",RoyalBlue:"RGB(65,105,225)",CornflowerBlue:"RGB(100,149,237)",LightSteelBlue:"RGB(176,196,222)",
+LightSlateGray:"RGB(119,136,153)",SlateGray:"RGB(112,128,144)",DoderBlue:"RGB(30,144,255)",AliceBlue:"RGB(240,248,255)",SteelBlue:"RGB(70,130,180)",LightSkyBlue:"RGB(135,206,250)",SkyBlue:"RGB(135,206,235)",DeepSkyBlue:"RGB(0,191,255)",LightBLue:"RGB(173,216,230)",PowDerBlue:"RGB(176,224,230)",CadetBlue:"RGB(95,158,160)",Azure:"RGB(240,255,255)",LightCyan:"RGB(225,255,255)",PaleTurquoise:"RGB(175,238,238)",Cyan:"RGB(0,255,255)",Aqua:"RGB(212,242,231)",DarkTurquoise:"RGB(0,206,209)",DarkSlateGray:"RGB(47,79,79)",
+DarkCyan:"RGB(0,139,139)",Teal:"RGB(0,128,128)",MediumTurquoise:"RGB(72,209,204)",LightSeaGreen:"RGB(32,178,170)",Turquoise:"RGB(64,224,208)",Auqamarin:"RGB(127,255,170)",MediumAquamarine:"RGB(0,250,154)",MediumSpringGreen:"RGB(0,255,127)",MintCream:"RGB(245,255,250)",SpringGreen:"RGB(60,179,113)",SeaGreen:"RGB(46,139,87)",Honeydew:"RGB(240,255,240)",LightGreen:"RGB(144,238,144)",PaleGreen:"RGB(152,251,152)",DarkSeaGreen:"RGB(143,188,143)",LimeGreen:"RGB(50,205,50)",Lime:"RGB(0,255,0)",ForestGreen:"RGB(34,139,34)",
+Green:"RGB(0,128,0)",DarkGreen:"RGB(0,100,0)",Chartreuse:"RGB(127,255,0)",LawnGreen:"RGB(124,252,0)",GreenYellow:"RGB(173,255,47)",OliveDrab:"RGB(85,107,47)",Beige:"RGB(245,245,220)",LightGoldenrodYellow:"RGB(250,250,210)",Ivory:"RGB(255,255,240)",LightYellow:"RGB(255,255,224)",Yellow:"RGB(255,255,0)",Olive:"RGB(128,128,0)",DarkKhaki:"RGB(189,183,107)",LemonChiffon:"RGB(255,250,205)",PaleGodenrod:"RGB(238,232,170)",Khaki:"RGB(240,230,140)",Gold:"RGB(255,215,0)",Cornislk:"RGB(255,248,220)",GoldEnrod:"RGB(218,165,32)",
+FloralWhite:"RGB(255,250,240)",OldLace:"RGB(253,245,230)",Wheat:"RGB(245,222,179)",Moccasin:"RGB(255,228,181)",Orange:"RGB(255,165,0)",PapayaWhip:"RGB(255,239,213)",BlanchedAlmond:"RGB(255,235,205)",NavajoWhite:"RGB(255,222,173)",AntiqueWhite:"RGB(250,235,215)",Tan:"RGB(210,180,140)",BrulyWood:"RGB(222,184,135)",Bisque:"RGB(255,228,196)",DarkOrange:"RGB(255,140,0)",Linen:"RGB(250,240,230)",Peru:"RGB(205,133,63)",PeachPuff:"RGB(255,218,185)",SandyBrown:"RGB(244,164,96)",Chocolate:"RGB(210,105,30)",
+SaddleBrown:"RGB(139,69,19)",SeaShell:"RGB(255,245,238)",Sienna:"RGB(160,82,45)",LightSalmon:"RGB(255,160,122)",Coral:"RGB(255,127,80)",OrangeRed:"RGB(255,69,0)",DarkSalmon:"RGB(233,150,122)",Tomato:"RGB(255,99,71)",MistyRose:"RGB(255,228,225)",Salmon:"RGB(250,128,114)",Snow:"RGB(255,250,250)",LightCoral:"RGB(240,128,128)",RosyBrown:"RGB(188,143,143)",IndianRed:"RGB(205,92,92)",Red:"RGB(255,0,0)",Brown:"RGB(165,42,42)",FireBrick:"RGB(178,34,34)",DarkRed:"RGB(139,0,0)",Maroon:"RGB(128,0,0)",White:"RGB(255,255,255)",
+WhiteSmoke:"RGB(245,245,245)",Gainsboro:"RGB(220,220,220)",LightGrey:"RGB(211,211,211)",Silver:"RGB(192,192,192)",DarkGray:"RGB(169,169,169)",Gray:"RGB(128,128,128)",DimGray:"RGB(105,105,105)",Black:"RGB(0,0,0)"};v.CommandType=p;v.CustomObjectData=$a;v.CustomObjectData2=ab;v.CustomTagData=Na;v.DecalData=Ya;v.DigitalTwinAPI=ra;v.DigitalTwinPlayer=ic;v.DynamicWaterData=cb;v.HeatMapPointData=Ka;v.HighlightAreaData=Oa;v.ImageButtonData=Pa;v.LayerVisibleData=Ja;v.MapMode={Campass:0,SmallMap:1,BigMap:2};
+v.MeasurementMode={Coordinate:1,Linear:2,Horizontal:3,Vertical:4,MultiPoint:5,TerrainArea:6};v.MousePickMask=qa;v.ODLineData=Va;v.PanelType={ViewshedAnalysis:0,SkylineAnalysis:1,ViewDomeAnalysis:2,VisiblityAnalysis:3,FloodFillAnalysis:4,SolarAnalysis:5,CutFillAnalysis:6,TerrainSlopeAnalysi:7,ContourLineAnalysis:8};v.PanoramaData=Xa;v.Polygon3DData=Ta;v.Polygon3DStyle={Wave:0,LoopLine:1,Gradual:2,DynamicGradual:3,WaveTransparent:4,WideWave:5,RotateArrow:6,RotateLine:7,RotateGradual:8,SingleColor:9,
+SingleColorWithLight:10};v.PolygonData=Wa;v.PolygonStyle={SingleColor:0,CirclePoint:1,Volumn:2,Gradual:3,DynamicGradual:4,WaveTransparent:5,WideWave:6,RotateArrow:7,RotateLine:8,RotateGradual:9,OnTerrain:10};v.PolylineData=Ua;v.PolylineStyle={Arrow:0,Arrow1:1,Flow:2,Beam:3,Normal:4,OnTerrain:5,DottedNormal:6,DottedCircle:7};v.RadiationPointData=Sa;v.RendererType={SimpleRenderer:0,UniqueValueRenderer:1,ClassBreaksRenderer:2};v.TagData=La;v.TileLayerActorData=fa;v.TileLayerData=Za;v.VERSION="5.4";v.VehicleViewMode=
+{FirstPerson:0,ThirdPerson:1};v.VideoProjectionData=bb;v.Viewport=ba;v.WaterFlowFieldStyle={HeatMap:0,Water:1};v.WebUIData=Ma;v.__onCefResponse=function(a,b){if(ua)ua.onConnectionMessage(a,b)};Object.defineProperty(v,"__esModule",{value:!0});return v}({});
+(()=>{if("undefined"!=typeof module&&module.exports)module.exports=acapi;else if("function"==typeof define&&define.amd)define(function(){return acapi});else{window.AcApiVersion=acapi.VERSION;acapi.AirCityAPI=acapi.DigitalTwinAPI;acapi.AirCityPlayer=acapi.DigitalTwinPlayer;for(let v in acapi)"VERSION"!=v&&(window[v]=acapi[v]);acapi.DigitalTwinAPI.__onApiConstructed=v=>window.__g=v}})();
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..74859eb
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..488e080
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="./favicon.ico">
+    <title></title>
+  </head>
+  <body>
+    <script type="JavaScript" src="./ac.min.js"></script>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..07d2c4f
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,71 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<style lang="scss">
+
+video{
+    object-fit: cover;
+}
+@font-face {
+    font-family: "Microsoft Yahei";
+    src: url("assets/fonts/微软雅黑.ttf");
+}
+@font-face {
+    font-family: "logo";
+    src: url("assets/fonts/三极韵律圆体.ttf");
+}
+
+*{
+  padding: 0;
+  margin: 0;
+  font-family: "Microsoft Yahei";
+  box-sizing: border-box;
+}
+
+body{
+  width: 100vw;
+  height: 100vh;
+  #app{
+    width: 100%;
+    height: 100%;
+    color: $font-color;
+  }
+}
+ul,li{
+  list-style: none;
+}
+
+@font-face {
+    font-family: number;
+    src: url("./assets/common/fonts/DIN-Regular.otf");
+}
+@font-face {
+    font-family: en;
+    src: url("./assets/common/fonts/Roboto-Regular.ttf");
+}
+
+//滚动条
+::-webkit-scrollbar {
+  width:0px;
+  height: 0px;
+}
+
+/*滑动轨道*/
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+}
+
+/*滑块*/
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(90deg, #33F8F4 0%, #229A97 50%, #1E9895 100%);;
+  border-radius: 12px;
+
+}
+.header-box .nav-box .nav-block{
+  transition: all .5s;
+}
+</style>
diff --git a/src/assets/ac.min.js b/src/assets/ac.min.js
new file mode 100644
index 0000000..9661997
--- /dev/null
+++ b/src/assets/ac.min.js
@@ -0,0 +1,513 @@
+var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.arrayIteratorImpl=function(v){var D=0;return function(){return D<v.length?{done:!1,value:v[D++]}:{done:!0}}};$jscomp.arrayIterator=function(v){return{next:$jscomp.arrayIteratorImpl(v)}};$jscomp.ASSUME_ES5=!1;$jscomp.ASSUME_NO_NATIVE_MAP=!1;$jscomp.ASSUME_NO_NATIVE_SET=!1;$jscomp.SIMPLE_FROUND_POLYFILL=!1;$jscomp.ISOLATE_POLYFILLS=!1;$jscomp.FORCE_POLYFILL_PROMISE=!1;$jscomp.FORCE_POLYFILL_PROMISE_WHEN_NO_UNHANDLED_REJECTION=!1;
+$jscomp.defineProperty=$jscomp.ASSUME_ES5||"function"==typeof Object.defineProperties?Object.defineProperty:function(v,D,I){if(v==Array.prototype||v==Object.prototype)return v;v[D]=I.value;return v};$jscomp.getGlobal=function(v){v=["object"==typeof globalThis&&globalThis,v,"object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global];for(var D=0;D<v.length;++D){var I=v[D];if(I&&I.Math==Math)return I}throw Error("Cannot find global object");};$jscomp.global=$jscomp.getGlobal(this);
+$jscomp.IS_SYMBOL_NATIVE="function"===typeof Symbol&&"symbol"===typeof Symbol("x");$jscomp.TRUST_ES6_POLYFILLS=!$jscomp.ISOLATE_POLYFILLS||$jscomp.IS_SYMBOL_NATIVE;$jscomp.polyfills={};$jscomp.propertyToPolyfillSymbol={};$jscomp.POLYFILL_PREFIX="$jscp$";var $jscomp$lookupPolyfilledValue=function(v,D){var I=$jscomp.propertyToPolyfillSymbol[D];if(null==I)return v[D];I=v[I];return void 0!==I?I:v[D]};
+$jscomp.polyfill=function(v,D,I,E){D&&($jscomp.ISOLATE_POLYFILLS?$jscomp.polyfillIsolated(v,D,I,E):$jscomp.polyfillUnisolated(v,D,I,E))};$jscomp.polyfillUnisolated=function(v,D,I,E){I=$jscomp.global;v=v.split(".");for(E=0;E<v.length-1;E++){var O=v[E];if(!(O in I))return;I=I[O]}v=v[v.length-1];E=I[v];D=D(E);D!=E&&null!=D&&$jscomp.defineProperty(I,v,{configurable:!0,writable:!0,value:D})};
+$jscomp.polyfillIsolated=function(v,D,I,E){var O=v.split(".");v=1===O.length;E=O[0];E=!v&&E in $jscomp.polyfills?$jscomp.polyfills:$jscomp.global;for(var T=0;T<O.length-1;T++){var F=O[T];if(!(F in E))return;E=E[F]}O=O[O.length-1];I=$jscomp.IS_SYMBOL_NATIVE&&"es6"===I?E[O]:null;D=D(I);null!=D&&(v?$jscomp.defineProperty($jscomp.polyfills,O,{configurable:!0,writable:!0,value:D}):D!==I&&(void 0===$jscomp.propertyToPolyfillSymbol[O]&&(I=1E9*Math.random()>>>0,$jscomp.propertyToPolyfillSymbol[O]=$jscomp.IS_SYMBOL_NATIVE?
+$jscomp.global.Symbol(O):$jscomp.POLYFILL_PREFIX+I+"$"+O),$jscomp.defineProperty(E,$jscomp.propertyToPolyfillSymbol[O],{configurable:!0,writable:!0,value:D})))};$jscomp.initSymbol=function(){};$jscomp.iteratorPrototype=function(v){v={next:v};v[Symbol.iterator]=function(){return this};return v};$jscomp.underscoreProtoCanBeSet=function(){var v={a:!0},D={};try{return D.__proto__=v,D.a}catch(I){}return!1};
+$jscomp.setPrototypeOf=$jscomp.TRUST_ES6_POLYFILLS&&"function"==typeof Object.setPrototypeOf?Object.setPrototypeOf:$jscomp.underscoreProtoCanBeSet()?function(v,D){v.__proto__=D;if(v.__proto__!==D)throw new TypeError(v+" is not extensible");return v}:null;$jscomp.makeIterator=function(v){var D="undefined"!=typeof Symbol&&Symbol.iterator&&v[Symbol.iterator];return D?D.call(v):$jscomp.arrayIterator(v)};$jscomp.generator={};
+$jscomp.generator.ensureIteratorResultIsObject_=function(v){if(!(v instanceof Object))throw new TypeError("Iterator result "+v+" is not an object");};$jscomp.generator.Context=function(){this.isRunning_=!1;this.yieldAllIterator_=null;this.yieldResult=void 0;this.nextAddress=1;this.finallyAddress_=this.catchAddress_=0;this.finallyContexts_=this.abruptCompletion_=null};
+$jscomp.generator.Context.prototype.start_=function(){if(this.isRunning_)throw new TypeError("Generator is already running");this.isRunning_=!0};$jscomp.generator.Context.prototype.stop_=function(){this.isRunning_=!1};$jscomp.generator.Context.prototype.jumpToErrorHandler_=function(){this.nextAddress=this.catchAddress_||this.finallyAddress_};$jscomp.generator.Context.prototype.next_=function(v){this.yieldResult=v};
+$jscomp.generator.Context.prototype.throw_=function(v){this.abruptCompletion_={exception:v,isException:!0};this.jumpToErrorHandler_()};$jscomp.generator.Context.prototype.return=function(v){this.abruptCompletion_={return:v};this.nextAddress=this.finallyAddress_};$jscomp.generator.Context.prototype.jumpThroughFinallyBlocks=function(v){this.abruptCompletion_={jumpTo:v};this.nextAddress=this.finallyAddress_};$jscomp.generator.Context.prototype.yield=function(v,D){this.nextAddress=D;return{value:v}};
+$jscomp.generator.Context.prototype.yieldAll=function(v,D){v=$jscomp.makeIterator(v);var I=v.next();$jscomp.generator.ensureIteratorResultIsObject_(I);if(I.done)this.yieldResult=I.value,this.nextAddress=D;else return this.yieldAllIterator_=v,this.yield(I.value,D)};$jscomp.generator.Context.prototype.jumpTo=function(v){this.nextAddress=v};$jscomp.generator.Context.prototype.jumpToEnd=function(){this.nextAddress=0};
+$jscomp.generator.Context.prototype.setCatchFinallyBlocks=function(v,D){this.catchAddress_=v;void 0!=D&&(this.finallyAddress_=D)};$jscomp.generator.Context.prototype.setFinallyBlock=function(v){this.catchAddress_=0;this.finallyAddress_=v||0};$jscomp.generator.Context.prototype.leaveTryBlock=function(v,D){this.nextAddress=v;this.catchAddress_=D||0};
+$jscomp.generator.Context.prototype.enterCatchBlock=function(v){this.catchAddress_=v||0;v=this.abruptCompletion_.exception;this.abruptCompletion_=null;return v};$jscomp.generator.Context.prototype.enterFinallyBlock=function(v,D,I){I?this.finallyContexts_[I]=this.abruptCompletion_:this.finallyContexts_=[this.abruptCompletion_];this.catchAddress_=v||0;this.finallyAddress_=D||0};
+$jscomp.generator.Context.prototype.leaveFinallyBlock=function(v,D){D=this.finallyContexts_.splice(D||0)[0];if(D=this.abruptCompletion_=this.abruptCompletion_||D){if(D.isException)return this.jumpToErrorHandler_();void 0!=D.jumpTo&&this.finallyAddress_<D.jumpTo?(this.nextAddress=D.jumpTo,this.abruptCompletion_=null):this.nextAddress=this.finallyAddress_}else this.nextAddress=v};$jscomp.generator.Context.prototype.forIn=function(v){return new $jscomp.generator.Context.PropertyIterator(v)};
+$jscomp.generator.Context.PropertyIterator=function(v){this.object_=v;this.properties_=[];for(var D in v)this.properties_.push(D);this.properties_.reverse()};$jscomp.generator.Context.PropertyIterator.prototype.getNext=function(){for(;0<this.properties_.length;){var v=this.properties_.pop();if(v in this.object_)return v}return null};$jscomp.generator.Engine_=function(v){this.context_=new $jscomp.generator.Context;this.program_=v};
+$jscomp.generator.Engine_.prototype.next_=function(v){this.context_.start_();if(this.context_.yieldAllIterator_)return this.yieldAllStep_(this.context_.yieldAllIterator_.next,v,this.context_.next_);this.context_.next_(v);return this.nextStep_()};
+$jscomp.generator.Engine_.prototype.return_=function(v){this.context_.start_();var D=this.context_.yieldAllIterator_;if(D)return this.yieldAllStep_("return"in D?D["return"]:function(I){return{value:I,done:!0}},v,this.context_.return);this.context_.return(v);return this.nextStep_()};
+$jscomp.generator.Engine_.prototype.throw_=function(v){this.context_.start_();if(this.context_.yieldAllIterator_)return this.yieldAllStep_(this.context_.yieldAllIterator_["throw"],v,this.context_.next_);this.context_.throw_(v);return this.nextStep_()};
+$jscomp.generator.Engine_.prototype.yieldAllStep_=function(v,D,I){try{var E=v.call(this.context_.yieldAllIterator_,D);$jscomp.generator.ensureIteratorResultIsObject_(E);if(!E.done)return this.context_.stop_(),E;var O=E.value}catch(T){return this.context_.yieldAllIterator_=null,this.context_.throw_(T),this.nextStep_()}this.context_.yieldAllIterator_=null;I.call(this.context_,O);return this.nextStep_()};
+$jscomp.generator.Engine_.prototype.nextStep_=function(){for(;this.context_.nextAddress;)try{var v=this.program_(this.context_);if(v)return this.context_.stop_(),{value:v.value,done:!1}}catch(D){this.context_.yieldResult=void 0,this.context_.throw_(D)}this.context_.stop_();if(this.context_.abruptCompletion_){v=this.context_.abruptCompletion_;this.context_.abruptCompletion_=null;if(v.isException)throw v.exception;return{value:v.return,done:!0}}return{value:void 0,done:!0}};
+$jscomp.generator.Generator_=function(v){this.next=function(D){return v.next_(D)};this.throw=function(D){return v.throw_(D)};this.return=function(D){return v.return_(D)};this[Symbol.iterator]=function(){return this}};$jscomp.generator.createGenerator=function(v,D){D=new $jscomp.generator.Generator_(new $jscomp.generator.Engine_(D));$jscomp.setPrototypeOf&&v.prototype&&$jscomp.setPrototypeOf(D,v.prototype);return D};
+$jscomp.asyncExecutePromiseGenerator=function(v){function D(E){return v.next(E)}function I(E){return v.throw(E)}return new Promise(function(E,O){function T(F){F.done?E(F.value):Promise.resolve(F.value).then(D,I).then(T,O)}T(v.next())})};$jscomp.asyncExecutePromiseGeneratorFunction=function(v){return $jscomp.asyncExecutePromiseGenerator(v())};$jscomp.asyncExecutePromiseGeneratorProgram=function(v){return $jscomp.asyncExecutePromiseGenerator(new $jscomp.generator.Generator_(new $jscomp.generator.Engine_(v)))};
+$jscomp.polyfill("Array.prototype.includes",function(v){return v?v:function(D,I){var E=this;E instanceof String&&(E=String(E));var O=E.length;I=I||0;for(0>I&&(I=Math.max(I+O,0));I<O;I++){var T=E[I];if(T===D||Object.is(T,D))return!0}return!1}},"es7","es3");$jscomp.polyfill("Promise.prototype.finally",function(v){return v?v:function(D){return this.then(function(I){return Promise.resolve(D()).then(function(){return I})},function(I){return Promise.resolve(D()).then(function(){throw I;})})}},"es9","es3");
+var acapi=function(v){function D(a){function b(c,e){return c.reduce(function(d,h){var g;Array.isArray(h)&&(g=b(h,e+1));return g>d?g:d},e)}return b(a,1)}function I(a){let b=a.length,c=Array(b),e;for(let d=0;d<b;d++)e=a.charCodeAt(d),e=48<=e&&58>e?e-48:(e&223)-65+10,c[d]=e;return c.reduce((d,h)=>16*d+h,0)}function E(a){if(void 0!=a){var b=[];if(/^(rgb|RGB)/.test(a)){a=a.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");for(let c of a)b.push(Number((Number(c)/255).toFixed(1)))}else if(/^#/.test(a)){if(/^#[0-9A-F]{3}$/i.test(a)){let c=
+"#";a.replace(/[0-9A-F]/ig,function(e){c+=e+e});a=c}/^#[0-9A-F]{6}$/i.test(a)&&a.replace(/[0-9A-F]{2}/ig,function(c){c=I(c);b.push(Number((c/255).toFixed(1)))})}else a instanceof Array&&(b=a);3==b.length&&b.push(1);return b}}function O(a){if(void 0!=a){var b,c=D(a);2==c?b=[[a]]:3==c?b=[a]:4==c&&(b=a);if(b)for(let e of b)for(let d of e)for(let h of d)2==h.length&&h.push(0);return b}}function T(a){if(void 0!=a)return 1==D(a)?[a]:a}function F(a){return a instanceof Array?a:[a]}function K(a){let b=[];
+if(a instanceof Array)for(let c in a)b[c]=a[c].toString();else b=[a.toString()];return b}function S(a){switch(typeof a){case "undefined":return!0;case "string":if(0===a.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g,"").length)return!0;break;case "boolean":if(!a)return!0;break;case "number":if(isNaN(a))return!0;break;case "object":if(null===a||0===a.length)return!0;for(var b in a)return!1;return!0}return!1}function pa(a,b){for(a=a.toString();a.length<b;)a="0"+a;return a}function Ga(a,b){let c,e=0;return function(...d){const h=
+this,g=+new Date,q=b-(g-e);0>=q?(e=g,a.apply(h,d),c&&(clearTimeout(c),c=null)):c||(c=setTimeout(()=>{e=+new Date;c=null;a.apply(h,d)},q))}}function Ha(a){switch(a){case da.StartingProcess:return"starting process...";case da.CheckingBusy:return"checking...";case da.ProcessStartFailed:return"process start failed!";case da.ProcessStarted:return"process started";case da.LoadingProject:return"loading project...";case da.ProjectLoaded:return"project loaded"}}function wa(a){"string"===typeof a&&(a=document.getElementById(a));
+return a}function Ia(a){return R.isIOSDevice&&R.isInWeixinBrowser?!1:a==sa.abnormal||a==sa.instance_disconnected}function aa(a,b){return void 0!==a&&null!==a?a:b}function xa(a){return a.keyCode===ea.Shift&&"ShiftRight"===a.code?ea.RightShift:a.keyCode===ea.Control&&"ControlRight"===a.code?ea.RightControl:a.keyCode===ea.Alt&&"AltRight"===a.code?ea.RightAlt:a.keyCode}var p={None:0,Camera_PlayAnimation:1,Camera_StopAnimation:2,Misc_EnterReportMode:3,Misc_ExitReportMode:4,Misc_SetDateTime:5,Camera_GetCamera:6,
+Camera_SetState:7,Camera_Set:8,Camera_LookAtBBox:9,Coord_World2Screen:10,Coord_Screen2World:11,InfoTree_SetVisibility:12,InfoTree_Show:13,InfoTree_Hide:14,InfoTree_EnableXRay:15,InfoTree_DisableXRay:16,TileLayer_Add:17,HeatMap_Add:18,HeatMap_Update:19,HeatMap_AddPoints:20,HeatMap_RemovePoints:21,HeatMap_Delete:22,HeatMap_Show:23,HeatMap_Hide:24,HeatMap_Focus:25,HighlightArea_Add:26,HighlightArea_Delete:27,HighlightArea_Update:28,Polygon3D_Add:29,Polygon3D_Delete:30,Misc_AddImageButton:31,Misc_DeleteImageButton:32,
+Misc_AddAnimatedImageButton:33,Settings_SetMainUIVisibility:34,Settings_SetMousePickMask:35,Tag_Add:36,Tag_Delete:37,Tag_Update:38,Tag_Clear:39,Tag_Focus:40,Beam_Add:41,Beam_Update:42,Beam_Delete:43,Beam_Clear:44,Beam_Focus:45,Beam_Show:350,Beam_Hide:351,Beam_ShowAll:352,Beam_HideAll:353,RadiationPoint_Add:46,RadiationPoint_Update:47,RadiationPoint_Delete:48,RadiationPoint_Clear:49,Polygon_Add:50,Polygon_Update:51,Polygon_Delete:52,Polygon_Clear:53,Polygon_Highlight:54,Polygon_StopHighlight:325,Polygon_Glow:55,
+Polygon_Focus:56,Tag_FocusAll:57,Tag_Show:58,Tag_Hide:59,Tag_ShowAll:60,Tag_HideAll:61,RadiationPoint_Focus:62,RadiationPoint_FocusAll:63,RadiationPoint_Show:64,RadiationPoint_Hide:65,RadiationPoint_ShowAll:66,RadiationPoint_HideAll:67,Polygon_Show:68,Polygon_Hide:69,Polygon3D_Update:70,Polygon3D_Clear:71,Polygon3D_Focus:72,Polygon3D_Show:73,Polygon3D_Hide:74,Polygon3D_Highlight:75,Polygon3D_Glow:76,Polygon3D_StopGlow:77,HighlightArea_Clear:78,HighlightArea_Focus:79,HighlightArea_Show:80,HighlightArea_Hide:81,
+Misc_GetVersion:82,TileLayer_Update:83,TileLayer_Delete:84,TileLayer_Focus:85,TileLayer_EnableXRay:86,TileLayer_DisableXRay:87,TileLayer_Show:88,TileLayer_Hide:89,Tag_Get:90,RadiationPoint_Get:91,Polygon_Get:92,Polygon3D_Get:93,HighlightArea_Get:94,TileLayer_Get:95,Beam_Get:96,HeatMap_Get:97,Settings_GetMapMode:98,Settings_SetMapMode:99,Settings_SetMapURL:100,Settings_SetWMTSLayerVisible:320,TileLayer_Actor_Show:101,TileLayer_Actor_Hide:102,TileLayer_Actor_Focus:103,TileLayer_Actor_Highlight:104,
+TileLayer_Actor_StopHightlight:105,CustomObject_Add:106,CustomObject_Update:107,CustomObject_Delete:108,CustomObject_Get:109,CustomObject_Focus:110,CustomObject_Show:111,CustomObject_Hide:112,CustomObject_SetTintColor:326,HeatMap_Clear:113,CustomTag_Clear:39,CustomTag_Delete:37,CustomTag_Focus:40,CustomTag_FocusAll:57,CustomTag_Show:58,CustomTag_Hide:59,CustomTag_ShowAll:60,CustomTag_HideAll:61,CustomTag_Add:114,CustomTag_Update:115,CustomTag_Get:116,Polyline_Add:117,Polyline_Update:118,Polyline_Delete:119,
+Polyline_Clear:120,Polyline_Focus:121,Polyline_Get:122,Polyline_Show:123,Polyline_Hide:124,Polyline_ShowAll:125,Polyline_HideAll:126,VideoProjection_Add:127,VideoProjection_Update:128,VideoProjection_Delete:129,VideoProjection_Show:130,VideoProjection_Hide:131,VideoProjection_Get:132,VideoProjection_Focus:133,Misc_PlayVideo:134,Misc_StopPlayVideo:135,Weather_SetParams:136,Weather_GetParams:137,Weather_SetDate:138,Weather_GetDate:139,ODLine_Add:140,ODLine_Update:141,ODLine_Delete:142,ODLine_Clear:143,
+ODLine_Focus:144,ODLine_Get:145,ODLine_Show:146,ODLine_Hide:147,ODLine_ShowAll:148,ODLine_HideAll:149,Misc_SetWindowResolution:150,Misc_CallBPFunction:151,Settings_SetHighlightColor:152,InfoTree_ShowByGroupId:153,InfoTree_HideByGroupId:154,InfoTree_HighlightByGroupId:155,InfoTree_DeleteByGroupId:156,EditHelper_Start:157,EditHelper_Quit:158,EditHelper_Finish:159,EditHelper_SetParam:160,Settings_SetFovX:161,TileLayer_Actor_ShowAll:162,TileLayer_Actor_HideAll:163,CameraTour_Add:164,CameraTour_Update:165,
+CameraTour_Play:166,CameraTour_Stop:167,CameraTour_Delete:168,Tag_PopupWindow_Show:169,Tag_PopupWindow_Hide:170,Tag_PopupWindow_ShowAll:171,Tag_PopupWindow_HideAll:172,Settings_SetOceanColor:173,Misc_ShowAllFoliages:174,Misc_HideAllFoliages:175,Tools_StartPolygonClip:176,Tools_StopClip:177,TileLayer_SetAllowClip:178,Panorama_Add:179,Panorama_Update:180,Panorama_Delete:181,Panorama_Clear:182,Panorama_Focus:183,Panorama_Get:184,Decal_Add:185,Decal_Update:186,Decal_Delete:187,Decal_Clear:188,Decal_Focus:189,
+Decal_FocusAll:190,Decal_Get:191,Misc_PlayMovie:192,Misc_StopMovie:193,Tools_SetMeasurement:194,Tools_StartMeasurement:195,Tools_StopMeasurement:196,Viewshed_Add:197,Viewshed_Update:198,Viewshed_Focus:199,Viewshed_Delete:200,Viewshed_Clear:201,Viewshed_Get:202,TileLayer_SetStyle:203,Tools_LineIntersect:204,Coord_PCS2GCS:205,Coord_GCS2PCS:206,DynamicWater_Add:207,DynamicWater_Update:208,DynamicWater_Focus:209,DynamicWater_Delete:210,DynamicWater_Clear:211,DynamicWater_Get:212,DynamicWater_Show:213,
+DynamicWater_Hide:214,Quit:215,TileLayer_Actor_Unhighlight:216,InfoTree_Get:217,Reset:218,SaveProject:225,CustomObject_Clear:219,CustomObject_Highlight:220,CustomObject_Unhighlight:221,CustomObject_StopHighlight:222,CustomObject_CallFunction:223,CustomObject_AddByTileLayer:224,Tools_StartPlaneClip:226,Tools_StopPlaneClip:228,Tools_StartVolumeClip:229,Tools_UpdateVolumeClip:230,Tools_StopVolumeClip:231,Tools_StartSkylineAnalysis:232,Tools_StopSkylineAnalysis:233,Tools_ExportSkyline:234,Tools_StartViewshedAnalysis:235,
+Tools_StopViewshedAnalysis:236,Camera_Move:237,TileLayer_SetCollision:238,TileLayer_Modifier_Add:239,TileLayer_Modifier_Update:240,TileLayer_Modifier_Delete:241,TileLayer_Modifier_Clear:242,Misc_StartProcess:243,Settings_SetCampassVisible:244,Tools_StartGeometryEdit:245,Tools_StopGeometryEdit:246,Settings_SetEnableInteract:247,Camera_PauseAnimation:248,Camera_ResumeAnimation:249,Settings_SetInteractiveMode:250,CameraTour_Pause:251,CameraTour_Resume:252,Settings_SetTerrainAlpha:253,CustomMesh_Add:254,
+CustomMesh_Delete:255,CustomMesh_Clear:256,CustomMesh_Update:257,CustomMesh_Get:258,CustomMesh_Focus:259,CustomMesh_Show:260,CustomMesh_Hide:261,CustomMesh_ShowAll:262,CustomMesh_HideAll:263,Settings_EnableCameraMovingEvent:264,Marker_Add:265,Marker_Update:266,Marker_Get:267,Marker_Delete:268,Marker_Clear:269,Marker_Focus:270,Marker_FocusAll:271,Marker_Show:272,Marker_Hide:273,Marker_ShowAll:274,Marker_HideAll:275,Marker_ShowPopupWindow:276,Marker_HidePopupWindow:277,Marker_ShowAllPopupWindow:278,
+Marker_HideAllPopupWindow:279,TileLayer_SetViewportVisible:280,TileLayer_GetObjectIDs:281,Polygon3D_StopHighlight:282,Tools_StartFloodFill:283,Tools_StopFloodFill:284,FloodFill_Add:285,FloodFill_Delete:286,FloodFill_Clear:287,FloodFill_Update:288,FloodFill_Get:289,FloodFill_Focus:290,FloodFill_Show:291,FloodFill_Hide:292,FloodFill_ShowAll:293,FloodFill_HideAll:294,Cesium3DTile_Add:295,Cesium3DTile_Delete:296,Cesium3DTile_Clear:297,Cesium3DTile_Update:298,Cesium3DTile_Get:299,Cesium3DTile_Focus:300,
+Cesium3DTile_Show:301,Cesium3DTile_Hide:302,Cesium3DTile_ShowAll:303,Cesium3DTile_HideAll:304,TileLayer_GetActorInfoFromDB:305,ShapeFileLayer_Add:306,ShapeFileLayer_Delete:307,ShapeFileLayer_Clear:308,ShapeFileLayer_Update:309,ShapeFileLayer_Get:310,ShapeFileLayer_Focus:311,ShapeFileLayer_Show:312,ShapeFileLayer_Hide:313,ShapeFileLayer_ShowAll:314,ShapeFileLayer_HideAll:315,ShapeFileLayer_OpenShapeFileLayer:316,Weather_SimulateTime:317,TileLayer_Actor_GetInfo:318,Camera_GetAnimationList:319,TileLayer_CutPolygon_Add:321,
+TileLayer_CutPolygon_Update:322,TileLayer_CutPolygon_Delete:323,TileLayer_CutPolygon_Clear:324,Marker3D_Add:327,Marker3D_Delete:328,Marker3D_Clear:329,Marker3D_Update:330,Marker3D_Get:331,Marker3D_Focus:332,Marker3D_Show:333,Marker3D_Hide:334,Marker3D_ShowAll:335,Marker3D_HideAll:336,Camera_GetAnimationImage:337,Tools_ReplaceTexture:338,Tools_RestoreTexture:339,Light_Add:340,Light_Delete:341,Light_Update:343,Light_Get:344,Light_Clear:342,Light_Focus:345,Light_Show:346,Light_Hide:347,Light_ShowAll:348,
+Light_HideAll:349,WaterMesh_Add:354,WaterMesh_Update:355,WaterMesh_Delete:356,WaterMesh_Clear:357,WaterMesh_Get:358,WaterMesh_Focus:359,WaterMesh_Show:360,WaterMesh_Hide:361,WaterMesh_ShowAll:362,WaterMesh_HideAll:363,CustomObject_StartMove:364,CustomObject_StopMove:365,CustomObject_OverrideMaterial:366,CustomObject_RestoreMaterial:367,Settings_SetReport:368,Settings_GetReport:369,Settings_SetControl:370,Settings_GetControl:371,Settings_SetPostProcess:372,Settings_GetPostProcess:373,Settings_SetCamera:374,
+Settings_GetCamera:375,CustomObject_SetViewportVisible:376,WaterFlowField_Add:377,WaterFlowField_Update:378,WaterFlowField_Delete:379,WaterFlowField_Clear:380,WaterFlowField_Get:381,WaterFlowField_Focus:382,WaterFlowField_Show:383,WaterFlowField_Hide:384,TileLayer_SetViewHeightRange:385,Tools_StartVisiblityAnalysis:386,Tools_StopVisiblityAnalysis:387,Tools_StartViewDomeAnalysis:388,Tools_StopViewDomeAnalysis:389,Tools_StartCutFillAnalysis:390,Tools_StopCutFillAnalysis:391,Tools_StartSunshineAnalysis:392,
+Tools_StopSunshineAnalysis:393,Tools_StartTerrainSlopeAnalysis:394,Tools_StopTerrainSlopeAnalysis:395,Tools_StartContourLineAnalysis:396,Tools_StopContourLineAnalysis:397,TileLayer_GetAllFlattenData:398,Marker_SetupPOIAttachment:399,HeatMap3D_Add:400,HeatMap3D_Update:401,HeatMap3D_Focus:402,HeatMap3D_Delete:403,HeatMap3D_Show:404,HeatMap3D_Hide:405,HeatMap3D_Get:406,HeatMap3D_Clear:407,ShapeFileLayer_HighlightFeature:408,ShapeFileLayer_UnHighlightFeature:409,ShapeFileLayer_FocusFeature:410,ShapeFileLayer_GetFeatureInfo:411,
+Misc_EnterMultiViewport:412,Misc_ExitMultiViewport:413,Misc_SetActivateMultiViewport:414,Misc_GetActivateMultiViewport:415,Panorama_Enter:416,Panorama_Exit:417,Panorama_Switch:418,VTPKService_Get:419,VTPKService_Set:420,SimulateTest__:421,Settings_CursorAutoSync:422,InfoTree_Focus:423,Marker_ShowByGroupId:424,Marker_HideByGroupId:425,Marker_DeleteByGroupId:426,ImageryLayer_Init:427,ImageryLayer_Add:428,Camera_LockBBox:429,Camera_UnLockBBox:430,Settings_SetWMTSLayerOpacity:431,Camera_EnterEarthCapture:432,
+Camera_ExitEarthCapture:433,Tools_AnalysisPopupAttributes:434,Tools_AnalysisCloseAttributes:435,ImageryLayer_Show:436,ImageryLayer_Hide:437,ImageryLayer_Delete:438,Settings_GetInteractiveMode:439,VideoProjection_Clear:440,Misc_UpdateMultiViewport:441,Misc_downloadPakFiles:442,Settings_SetCampassPosition:443,Polygon3D_ShowAll:444,Polygon3D_HideAll:445,GeoJSONLayer_Add:446,GeoJSONLayer_Show:447,GeoJSONLayer_Hide:448,GeoJSONLayer_Delete:449,Vehicle_Add:450,Vehicle_Update:451,Vehicle_AddWayPoints:452,
+Vehicle_ClearWayPoints:453,Vehicle_Focus:454,Vehicle_Show:455,Vehicle_Hide:456,Vehicle_Get:457,Vehicle_Delete:458,Vehicle_Clear:459,Vehicle_MoveTo:460,Misc_ConvexHull2D:461,HeatMap_AddVoxels:462,TileLayer_GetCollision:463,TileLayer_SetPointSize:464,Misc_QueryActorOrMaterial:465,CustomObject_StartGlow:466,CustomObject_StopGlow:467,Coord_Transform:468,RegisterJsCommunication:469,UnRegisterJsCommunication:470,Vehicle_CallBatchFunction:471,Camera_FlyAround:472,Marker3D_ShowByGroupId:473,Marker3D_HideByGroupId:474,
+Marker3D_DeleteByGroupId:475,Camera_EnterWorldAnimation:476,Camera_ExitWorldAnimation:477,TileLayer_SetDecalAttach:478,Command_End:1E4},ya=!1;(()=>{if(!ya){ya=!0;for(let a in p)p[p[a]]=a}})();const qa={MouseClick:1,MouseMove:2,MouseHover:4},ba={V1:1,V2:2,V3:4,V4:8,All:255};class Ja{constructor(a,b){this.id=a;this.visible=b}}class Ka{constructor(a,b,c,e){this.id=a.toString();this.coordinate=b;this.radius=c;this.heatValue=e}}class La{constructor(a,b,c,e,d,h,g,q,k,f,l,t,w,r){this.id=a.toString();this.coordinate=
+b;this.imagePath=c;this.imageSize=e;this.url=d;this.text=h;this.range=g||[1,1E5];this.showLine=!!q;this.textColor=k||[0,0,0,1];this.textBackgroundColor=f||[1,1,1,.85];this.textBorderColor=l||[0,0,0,0];this.textRange=t||1E5;this.hoverImagePath=w;this.autoHidePopupWindow=r||!0}}class Ma{constructor(a,b,c){this.url=a;this.width=b;this.height=c}}class Na{constructor(a,b,c,e,d,h,g,q){this.id=a.toString();this.coordinate=b;this.contentURL=c.url;this.contentSize=[c.width,c.height];this.popupURL=e.url;this.popupSize=
+[e.width,e.height];this.pivot=d;this.range=h;this.autoHidePopupWindow=g||!0;this.popupPos=q}}class Oa{constructor(a,b,c,e,d,h){this.id=a.toString();this.coordinates=O(b);this.color=E(c);this.heightRange=e;this.intensity=d;this.depthTest=h||!0}}class Pa{constructor(a,b,c,e,d,h,g,q){this.id=a.toString();this.x=b;this.y=c;this.width=e;this.height=d;this.normalImage=h;this.hoverImage=g;this.tooltip=q}}class Qa{constructor(a,b,c,e,d,h,g,q,k){this.id=a.toString();this.x=b;this.y=c;this.width=e;this.height=
+d;this.imageSequecePath=h;this.imageSequeceLength=g;this.loop=!!q;this.interactable=!!k}}class Ra{constructor(a,b,c,e,d,h,g){this.id=a.toString();this.duration=b;this.thickness=c;this.interval=e;this.velocity=d;this.color=E(h);this.coordinates=g}}class Sa{constructor(a,b,c,e,d,h){this.id=a.toString();this.coordinate=b;this.radius=c;this.rippleNumber=e;this.color=E(d);this.brightness=h}}class Ta{constructor(a,b,c,e,d,h,g,q){this.id=a.toString();this.style=b;this.coordinates=O(c);this.color=E(e);this.height=
+d;this.intensity=h;this.tillingX=g;this.tillingY=q}}class Ua{constructor(a,b,c,e,d,h,g,q,k,f){this.id=a.toString();this.color=E(b);this.coordinates=c;this.style=void 0==e?0:e;if(0>this.style||5<this.style)this.style=0;this.thickness=void 0==d?20:d;this.brightness=void 0==h?.5:h;this.flowRate=void 0==g?.5:g;this.tiling=q||0;this.depthTest=k||!0;this.shape=void 0==f?0:f}}class Va{constructor(a,b,c,e,d,h,g,q,k,f,l,t,w,r,y,u,A){this.id=a.toString();this.color=E(b);this.coordinates=c;this.flowRate=void 0==
+e?.5:e;this.brightness=void 0==d?.5:d;this.bendDegree=void 0==h?.5:h;this.tiling=g||0;this.lineThickness=void 0==q?20:q;this.flowPointSizeScale=void 0==k?20:k;this.labelSizeScale=void 0==f?100:f;this.lineShape=void 0==l?1:l;this.lineStyle=t||0;this.flowShape=w||0;this.startPointShape=r||0;this.endPointShape=y||0;this.startLabelShape=u||0;this.endLabelShape=A||0;this.endLabelStyle=this.startLabelStyle=this.endPointStyle=this.startPointStyle=this.flowStyle=0}}class Wa{constructor(a,b,c,e,d,h,g,q){this.id=
+a.toString();this.color=E(b);this.coordinates=O(c);this.framecolor=E(e);this.framethickness=d;this.depthTest=h||!0;this.brightness=g;this.style=q;if(0>this.style||10<this.style)this.style=0}}class Xa{constructor(a,b,c,e,d,h){this.id=a.toString();this.imagePath=b;this.coordinate=c;this.yaw=e;this.groupId=d||"";this.userData=h||""}}class Ya{constructor(a,b,c,e,d,h,g,q){this.id=a.toString();this.order=b;this.texturePath=c;this.location=e;this.rotation=d;this.scale=h;this.groupId=g;this.userData=q}}class Za{constructor(a,
+b,c,e,d){this.id=a.toString();this.fileName=b;this.location=c;this.rotation=e;this.scale=d}}class $a{constructor(a,b,c,e,d,h,g){this.id=a;this.pakFilePath=b;this.assetPath=c;this.location=e;this.rotation=d;this.scale=h;this.smoothMotion=g}}class ab{constructor(a,b,c,e,d,h,g){this.id=a;this.tileLayerId=b;this.objectId=c;this.location=e;this.rotation=d;this.scale=h;this.smoothMotion=g}}class bb{constructor(a,b,c,e,d,h,g){this.id=a;this.videoURL=b;this.location=c;this.rotation=e;this.fov=d;this.aspectRatio=
+h;this.distance=g}}class cb{constructor(a,b,c,e,d){this.id=a;this.coordinates=O(b);this.style=c;this.groupId=e;this.userData=d}}class db{constructor(a,b,c,e,d){this.actorTag=a;this.objectName=b;this.functionName=c;this.paramType=e;this.paramValue=d}}class fa{constructor(a,b){this.tileLayerId=a;this.tileLayerActorNames=K(b)}}class eb{constructor(a,b,c,e){this.index=a;this.time=b;this.location=c;this.rotation=e}}class fb{constructor(a,b,c){this.id=a.toString();this.name=b.toString();this.keyFrames=
+c}}class gb{constructor(){this.queue=[];this.dataMap=new Map}enqueue(a){if(null==a||void 0==a||!a.callbackIndex)return!1;this.queue.push(a.callbackIndex);this.dataMap.set(a.callbackIndex,a);return!0}dequeue(){if(0!=this.queue.length){const a=this.queue.shift();return this.dataMap.get(a)}}removeData(a){this.dataMap.has(a)&&this.dataMap.delete(a)}dataSize(){return this.dataMap.size}queueSize(){return this.queue.length}}class hb extends gb{constructor(a){super();this.onSendAPI=a;this.timer=null;this.isMainThreadBusy=
+!1}onMainThreadBusy(a){this.isMainThreadBusy=a.busy}push(a){if(a.__noResponse)this.onSendAPI(a);else 0==this.dataSize()?(this.enqueue(a),this.callNext()):1E4<this.dataSize()?console.warn("The api queue has exceeded 10000, and subsequent calls will be ignored!"):this.enqueue(a)}callNext(a){a&&this.removeData(a);this.timer&&clearTimeout(this.timer);0!=this.dataSize()&&(a=this.dequeue())&&(this._callNextForTimeout(3E3),this.onSendAPI(a))}_callNextForTimeout(a){this.timer=setTimeout(()=>{this.isMainThreadBusy?
+this._callNextForTimeout(5E3):this.callNext()},a)}}class Q{constructor(a,b,c){this.int=a;this.type=b;this.colorProps=c;this._useBatchUpdate=!1;this._tempUpdateData=[]}_checkCommand(a){a=this.type+a;let b=p[a];void 0==b&&this.int.logWithColor("red",`Invalid command: ${a}`);return b}_convertFilePath(a){return this.int.resourcesPath?a.replace("@path:",this.int.resourcesPath+"/"):a}_processProps(a){a=F(a);for(var b of a)for(let e in b)"string"==typeof b[e]&&b[e].startsWith("@path:")&&(b[e]=this._convertFilePath(b[e]));
+for(let e of a)"string"!=typeof e.id&&(e.id=e.id.toString());if(this.colorProps){b=this.colorProps.split("|");for(var c of a)for(let e of b)c.hasOwnProperty(e)&&(c[e]=E(c[e]))}if(-1!=["Polygon","Polygon3D","HighlightArea","DynamicWater"].indexOf(this.type))for(let e of a)e.coordinates=O(e.coordinates);for(let e of a)e.hasOwnProperty("userData")&&(c=e.userData,this._isJsonString(c)&&(e.userData=c.replace(/"/g,"~!@~!@~!@")))}_isJsonString(a){try{return"string"===typeof a?(JSON.parse(a),!0):!1}catch(b){return!1}}_add(a,
+b){this._processProps(a);return this.int.call({command:this._checkCommand("_Add"),data:F(a)},b)}_update(a,b){this._processProps(a);return this.int.call({command:this._checkCommand("_Update"),data:F(a)},b)}_delete(a,b){return this.int.call({command:this._checkCommand("_Delete"),ids:K(a)},b)}_clear(a){return this.int.call0(this._checkCommand("_Clear"),a)}_get(a,b){return this.int.call({command:this._checkCommand("_Get"),ids:K(a)},b)}_focus(a,b,c,e,d){"function"==typeof c&&(d=c,c=void 0);"function"==
+typeof e&&(d=e,e=null);return this.int.call({command:this._checkCommand("_Focus"),ids:K(a),distance:b||0,flyTime:c,rotation:e},d)}_focusAll(a,b,c,e){"function"==typeof b&&(e=b,b=void 0);"function"==typeof c&&(e=c,c=null);return this.int.call({command:this._checkCommand("_FocusAll"),ids:[],distance:a||0,flyTime:b,rotation:c},e)}_show(a,b){return this.int.call({command:this._checkCommand("_Show"),ids:K(a)},b)}_showAll(a){return this.int.call0(this._checkCommand("_ShowAll"),a)}_hide(a,b){return this.int.call({command:this._checkCommand("_Hide"),
+ids:K(a)},b)}_hideAll(a){return this.int.call0(this._checkCommand("_HideAll"),a)}_updateOneProp(a,b,c,e){if(this._useBatchUpdate){e=!1;for(var d of this._tempUpdateData)if(d.id==a.toString()){e=!0;d[b]=c;break}e||(e={},e.id=a.toString(),e[b]=c,this._tempUpdateData.push(e))}else return d={},d.id=a.toString(),d[b]=c,this.update(d,e)}updateBegin(){this._useBatchUpdate=!0;this._tempUpdateData=[]}updateEnd(a){a=this.update(this._tempUpdateData,a);this._tempUpdateData=null;this._useBatchUpdate=!1;return a}test(){alert("test")}}
+class ib extends Q{constructor(a){super(a,"Beam","color")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}showAll(a){return super._showAll(a)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}setDuration(a,b,c){return super._updateOneProp(a,"duration",b,c)}setThickness(a,b,c){return super._updateOneProp(a,
+"thickness",b,c)}setInterval(a,b,c){return super._updateOneProp(a,"interval",b,c)}setVelocity(a,b,c){return super._updateOneProp(a,"velocity",b,c)}setColor(a,b,c){return super._updateOneProp(a,"color",E(b),c)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",b,c)}}class jb extends Q{constructor(a){super(a,"CameraTour")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}play(a,b){return this.int.call({command:p.CameraTour_Play,
+ids:K(a)},b)}pause(a){return this.int.call0(p.CameraTour_Pause,a)}resume(a){return this.int.call0(p.CameraTour_Resume,a)}stop(a){return this.int.call({command:p.CameraTour_Stop},a)}setUserData(a,b,c){return super._updateOneProp(a,"userData",b,c)}setDuration(a,b,c){return super._updateOneProp(a,"duration",b,c)}setKeyFrames(a,b,c){return super._updateOneProp(a,"keyFrames",b,c)}setName(a,b,c){return super._updateOneProp(a,"name",b,c)}}class kb extends Q{constructor(a){super(a,"Cesium3DTile")}add(a,b){return super._add(a,
+b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}setTileURL(a,b,c){return super._updateOneProp(a,"tileURL",b,c)}}class lb extends Q{constructor(a){super(a,"CustomMesh","color")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,
+b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",b,c)}setIndices(a,b,c){return super._updateOneProp(a,"indices",b,c)}setColor(a,b,c){return super._updateOneProp(a,"color",b,c)}}class mb extends Q{constructor(a){super(a,"CustomObject")}add(a,b){return super._add(a,
+b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d,h){"function"==typeof c&&(h=c,c=void 0);"function"==typeof e&&(h=e,e=null);"function"==typeof d&&(h=d,d=0);1<d&&(e=2==d?[-45,0,0]:3==d?[0,0,0]:4==d?[-90,0,0]:5==d?[90,0,0]:6==d?[0,90,0]:7==d?[0,270,0]:[0,0,0]);!S(a)&&-1==b&&S(c)&&S(e)&&S(d)&&(d=1,b=0);return this.int.call({command:p.CustomObject_Focus,ids:K(a),distance:b||0,flyTime:c,rotation:e||null,follow:d||0},h)}show(a,
+b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}addByTileLayer(a,b){if(a instanceof Array)for(let c of a)this._fixTileLayerProperty(c);else this._fixTileLayerProperty(a);return this.int.call({command:p.CustomObject_AddByTileLayer,data:F(a)},b)}_fixTileLayerProperty(a){a.tileLayerId instanceof Array||(a.tileLayerId=F(a.tileLayerId));a.objectId instanceof Array||(a.objectId=F(a.objectId))}highlight(a,b){return this.int.call({command:p.CustomObject_Highlight,
+ids:K(a)},b)}unhighlight(a,b){return"undefined"==typeof a||"function"==typeof a?("function"==typeof a&&(b=a),this.int.call({command:p.CustomObject_StopHighlight},b)):this.int.call({command:p.CustomObject_Unhighlight,ids:K(a)},b)}glow(a,b){if(a instanceof Array)for(let c of a){let e;e=E(c.color);c.colors=[{color:[e[0]/2,e[1]/2,e[2]/2],value:0},{color:c.color,value:1}]}else o.colors=[{color:o.color,value:0},{color:o.color,value:1}];return this.int.call({command:p.CustomObject_StartGlow,data:F(a)},b)}stopGlow(a,
+b){return this.int.call({command:p.CustomObject_StopGlow,ids:K(a)},b)}getBPFunction(a,b){return this.int.call({command:p.Misc_QueryActorOrMaterial,idOrPaths:F(a)},b)}callBPFunction(a,b,c,e,d,h){this.callFunction(a,b,c,e,d,h)}callFunction(a,b,c,e,d,h){return this.int.call({command:p.CustomObject_CallFunction,data:F({id:a.toString(),functionName:b,paramType:c,paramValue:e,parameters:d})},h)}callBatchBPFunction(a,b){this.callFunction4CustomObjectArr(a,b)}callBatchFunction(a,b){this.callFunction4CustomObjectArr(a,
+b)}callFunction4CustomObjectArr(a,b){return this.int.call({command:p.CustomObject_CallFunction,data:F(a)},b)}setLocation(a,b,c,e){return"function"==typeof c?super._updateOneProp(a,"location",b,c):"number"==typeof c?this.int.call({command:p.CustomObject_Update,data:[{id:a,location:b,smoothTime:c}]},e):super._updateOneProp(a,"location",b,e)}setSmoothTime(a,b,c){return super._updateOneProp(a,"smoothTime",b,c)}moveTo(a,b){return this.int.call({command:p.CustomObject_Update,data:F(a)},b)}setRotation(a,
+b,c){return super._updateOneProp(a,"rotation",b,c)}setLocalRotation(a,b,c){return super._updateOneProp(a,"localRotation",b,c)}setScale(a,b,c){return super._updateOneProp(a,"scale",b,c)}setSmoothMotion(a,b,c){return super._updateOneProp(a,"smoothMotion",b,c)}setTintColor(a,b,c){a={ids:F(a),color:E(b)};return this.int.call({command:p.CustomObject_SetTintColor,data:F(a)},c)}overrideMaterial(a,b){return this.int.call({command:p.CustomObject_OverrideMaterial,data:F(a)},b)}restoreMaterial(a,b){return this.int.call({command:p.CustomObject_RestoreMaterial,
+ids:F(a)},b)}setViewportVisible(a,b,c){let e=[];e.push({viewportIndex:1,viewportVisible:!!(b&ba.V1)});e.push({viewportIndex:2,viewportVisible:!!(b&ba.V2)});e.push({viewportIndex:3,viewportVisible:!!(b&ba.V3)});e.push({viewportIndex:4,viewportVisible:!!(b&ba.V4)});return this.int.call({command:p.CustomObject_SetViewportVisible,id:a,data:e},c)}startMove(a,b,c,e){return this.int.call({command:p.CustomObject_StartMove,id:a,coordinateType:b,data:F(c)},e)}stopMove(a,b){return this.int.call({command:p.CustomObject_StopMove,
+id:a},b)}}class nb extends Q{constructor(a){super(a,"CustomTag")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}focusAll(a,b,c,e){return super._focusAll(a,b,c,e)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}setAutoHidePopupWindow(a,b,
+c){return super._updateOneProp(a,"autoHidePopupWindow",b,c)}}class ob extends Q{constructor(a){super(a,"Decal")}add(a,b){this._fixMarkerData(a);return super._add(a,b)}_fixMarkerProperty(a){S(a.rotation)&&(a.rotation=[-90,0,-90])}_fixMarkerData(a){if(a instanceof Array)for(let b of a)this._fixMarkerProperty(b);else this._fixMarkerProperty(a)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}focusAll(a,
+b,c,e){return super._focusAll(a,b,c,e)}get(a,b){return super._get(a,b)}}class pb extends Q{constructor(a){super(a,"DynamicWater")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}focusAll(a,b,c,e){return super._focusAll(a,b,c,e)}get(a,b){return super._get(a,b)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",O(b),c)}setMaterialPath(a,b,c){return super._updateOneProp(a,
+"materialPath",b,c)}setStyle(a,b,c){return super._updateOneProp(a,"style",b,c)}}class qb extends Q{constructor(a){super(a,"FloodFill","color")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}setRange(a,
+b,c,e){b instanceof Array&&c instanceof Array?0<b.length&&0<c.length?this.update({id:a,min:b,max:c},e):console.error("\u6570\u7ec4\u53c2\u6570\u4e0d\u80fd\u4e3a\u7a7a."):console.error("\u6570\u7ec4\u53c2\u6570\u683c\u5f0f\u4e0d\u6b63\u786e.")}setMin(a,b,c){return super._updateOneProp(a,"min",b,c)}setMax(a,b,c){return super._updateOneProp(a,"max",b,c)}setSeed(a,b,c){return super._updateOneProp(a,"seed",b,c)}setElevation(a,b,c){return super._updateOneProp(a,"elevation",b,c)}setColor(a,b,c){return super._updateOneProp(a,
+"color",E(b),c)}setPrecision(a,b,c){return super._updateOneProp(a,"precision",b,c)}}class rb extends Q{constructor(a){super(a,"GeoJSONLayer")}load(a,b){return super._add(a,b)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}delete(a,b){return super._delete(a,b)}}class sb extends Q{constructor(a){super(a,"HeatMap")}_checkBBox(a){if(a instanceof Array){if(6!=a.length||a[0]>a[3]||a[1]>a[4]||a[2]>a[5])return!1}else return!1;return!0}add(a,b,c,e,d,h,g,q,k,f,l){return this._checkBBox(b)?
+"undefined"==typeof d||"function"==typeof d?this.int.call({command:p.HeatMap_Add,id:a.toString(),bbox:b,range:c,data:F(e),style:-1},l):0==d?this.int.call({command:p.HeatMap_Add,id:a.toString(),bbox:b,range:c,data:F(e),style:0,textureSize:h,opacityMode:g,opacityRange:q,blur:k,colors:f},l):this.int.call({command:p.HeatMap_Add,id:a.toString(),bbox:b,range:c,data:F(e),style:-1},l):(this.int.logWithColor("red","Invalid bbox value"),!1)}update(a,b,c,e,d){a={command:p.HeatMap_Update,id:a.toString()};if(b){if(!this._checkBBox(b))return this.int.logWithColor("red",
+"Invalid bbox value"),!1;a.bbox=b}c&&(a.range=c);e&&(a.data=F(e));return this.int.call(a,d)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}addPoints(a,b,c){return this.int.call({command:p.HeatMap_AddPoints,id:a,data:F(b)},c)}removePoints(a,b,c){return this.int.call({command:p.HeatMap_RemovePoints,id:a,pointIds:F(b)},c)}setRange(a,
+b,c){return this.int.call({command:p.HeatMap_Update,id:a,range:b},c)}setBBox(a,b,c){return this._checkBBox(b)?this.int.call({command:p.HeatMap_Update,id:a,bbox:b},c):(this.int.logWithColor("red","Invalid bbox value"),!1)}}class tb extends Q{constructor(a){super(a,"HeatMap3D")}_checkBBox(a){if(a instanceof Array){if(6!=a.length||a[0]>a[3]||a[1]>a[4]||a[2]>a[5])return!1}else return!1;return!0}add(a,b){return this.int.call({command:p.HeatMap3D_Add,data:F(a)},b)}addVoxels(a,b){return this.int.call({command:p.HeatMap_AddVoxels,
+data:F(a)},b)}update(a,b){return this.int.call({command:p.HeatMap3D_Update,data:F(a)},b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}setDisplayMode(a,b,c){return this.int.call({command:p.HeatMap3D_Update,id:a,displayMode:b},c)}}class ub extends Q{constructor(a){super(a,"HighlightArea","color")}add(a,b){return super._add(a,b)}update(a,
+b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}setColor(a,b,c){return super._updateOneProp(a,"color",E(b),c)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",b,c)}setHeightRange(a,b,c){return super._updateOneProp(a,"heightRange",b,c)}setIntensity(a,b,c){return super._updateOneProp(a,
+"intensity",b,c)}setDepthTest(a,b,c){return super._updateOneProp(a,"depthTest",b,c)}}class vb extends Q{constructor(a){super(a,"ImageryLayer")}init(a,b){return this.int.call({command:p.ImageryLayer_Init,xmlPath:a.xmlUrl,layerName:a.layerName,tileMatrixName:a.tileMatrixName,ogcEPSG:a.ogcEPSG,cachePath:a.cachePath,mapMode:a.mapMode,renderMode:a.renderMode},b)}add(a,b){const c=this;return $jscomp.asyncExecutePromiseGeneratorFunction(function*(){return a instanceof Array?new Promise(e=>$jscomp.asyncExecutePromiseGeneratorFunction(function*(){let d;
+for(let h of a)if(d=yield c.addOne(h,b),0!=d.result){e(d);break}e(d)})):c.addOne(a,b)})}addOne(a,b){return this.int.call({command:p.ImageryLayer_Add,id:a.id,url:a.url,xmlPath:a.xmlPath,layerName:a.layerName,tileMatrixName:a.tileMatrixName,ogcEPSG:a.ogcEPSG},b)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}delete(a,b){return super._delete(a,b)}}class wb extends Q{constructor(a){super(a,"Light","color")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,
+b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}}class xb extends Q{constructor(a){super(a,"Marker","fontColor|fontOutlineColor|textBackgroundColor|lineColor")}add(a,b){this._fixMarkerData(a);return super._add(a,b)}_fixMarkerProperty(a){a.textColor&&(a.fontColor=a.textColor);
+a.url&&(a.popupURL=a.url);a.dispalyMode&&(a.displayMode=a.dispalyMode);S(a.displayMode)&&(a.displayMode=4);a.popupURL&&!a.popupSize&&(a.popupSize=[600,400]);0==a.showLine&&(a.lineSize=[0,0]);1!=a.showLine||null!=a.lineSize&&void 0!=a.lineSize||(a.lineSize=[2,100]);4==a.displayMode&&0<a.autoDisplayModeSwitchFirstRatio&&0<a.autoDisplayModeSwitchSecondRatio&&(a.autoDisplayModeSwitchRatio=[a.autoDisplayModeSwitchFirstRatio,a.autoDisplayModeSwitchSecondRatio])}_fixMarkerData(a){if(a instanceof Array)for(let b of a)this._fixMarkerProperty(b);
+else this._fixMarkerProperty(a)}update(a,b){this._fixMarkerData(a);return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}focusAll(a,b,c,e){return super._focusAll(a,b,c,e)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}showPopupWindow(a,b){return this.int.call({command:p.Marker_ShowPopupWindow,ids:K(a)},b)}hidePopupWindow(a,
+b){return this.int.call({command:p.Marker_HidePopupWindow,ids:K(a)},b)}showAllPopupWindow(a){return this.int.call0(p.Marker_ShowAllPopupWindow,a)}hideAllPopupWindow(a){return this.int.call0(p.Marker_HideAllPopupWindow,a)}get(a,b){return super._get(a,b)}setGroupId(a,b,c){return super._updateOneProp(a,"groupId",b,c)}setUserData(a,b,c){return super._updateOneProp(a,"userData",b,c)}setAnchors(a,b,c){return this.setScreenOffset(a,b,c)}setScreenOffset(a,b,c){return super._updateOneProp(a,"anchors",b,c)}setCoordinate(a,
+b,c){return super._updateOneProp(a,"coordinate",b,c)}setImagePath(a,b,c){return super._updateOneProp(a,"imagePath",b,c)}setImageSize(a,b,c){return super._updateOneProp(a,"imageSize",b,c)}setHoverImagePath(a,b,c){return super._updateOneProp(a,"hoverImagePath",b,c)}setURL(a,b,c){return super._updateOneProp(a,"url",b,c)}setText(a,b,c){return super._updateOneProp(a,"text",b,c)}setTextOffset(a,b,c){return super._updateOneProp(a,"textOffset",b,c)}setFontSize(a,b,c){return super._updateOneProp(a,"fontSize",
+b,c)}setFontOutlineSize(a,b,c){return super._updateOneProp(a,"fontOutlineSize",b,c)}setRange(a,b,c){return super._updateOneProp(a,"range",b,c)}setTextRange(a,b,c){return super._updateOneProp(a,"textRange",b,c)}setFontColor(a,b,c){return super._updateOneProp(a,"fontColor",b,c)}setFontOutlineColor(a,b,c){return super._updateOneProp(a,"fontOutlineColor",b,c)}setTextBackgroundColor(a,b,c){return super._updateOneProp(a,"textBackgroundColor",b,c)}setAutoHidePopupWindow(a,b,c){return super._updateOneProp(a,
+"autoHidePopupWindow",b,c)}setPopupURL(a,b,c){return super._updateOneProp(a,"popupURL",b,c)}setPopupSize(a,b,c){return super._updateOneProp(a,"popupSize",b,c)}setPopupOffset(a,b,c){return super._updateOneProp(a,"popupOffset",b,c)}setLineSize(a,b,c){return super._updateOneProp(a,"lineSize",b,c)}setLineColor(a,b,c){return super._updateOneProp(a,"lineColor",b,c)}setLineOffset(a,b,c){return super._updateOneProp(a,"lineOffset",b,c)}setPriority(a,b,c){return super._updateOneProp(a,"priority",b,c)}setOcclusionCull(a,
+b,c){return super._updateOneProp(a,"occlusionCull",b,c)}setAttachCustomObject(a,b){return this.int.call({command:p.Marker_SetupPOIAttachment,data:F(a)},b)}showByGroupId(a,b){return this.int.call({command:p.Marker_ShowByGroupId,ids:F(a)},b)}hideByGroupId(a,b){return this.int.call({command:p.Marker_HideByGroupId,ids:F(a)},b)}deleteByGroupId(a,b){return this.int.call({command:p.Marker_DeleteByGroupId,ids:F(a)},b)}}class yb extends Q{constructor(a){super(a,"Marker3D","textColor|textOutlineColor")}add(a,
+b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}showByGroupId(a,b){return this.int.call({command:p.Marker3D_ShowByGroupId,groupId:a},b)}hideByGroupId(a,b){return this.int.call({command:p.Marker3D_HideByGroupId,
+groupId:a},b)}deleteByGroupId(a,b){return this.int.call({command:p.Marker3D_DeleteByGroupId,groupId:a},b)}}class zb extends Q{constructor(a){super(a,"ODLine","color")}add(a,b){this._fixODlineData(a);return super._add(a,b)}_fixODlineProperty(a){a.intensity&&(a.brightness=a.intensity)}_fixODlineData(a){if(a instanceof Array)for(let b of a)this._fixODlineProperty(b);else this._fixODlineProperty(a)}update(a,b){this._fixODlineData(a);return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,
+b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",b,c)}setColor(a,b,c){return super._updateOneProp(a,"color",E(b),c)}setFlowRate(a,b,c){return super._updateOneProp(a,"flowRate",b,c)}setBrightness(a,b,c){return super._updateOneProp(a,"brightness",b,c)}setTiling(a,b,c){return super._updateOneProp(a,
+"tiling",b,c)}setBendDegree(a,b,c){return super._updateOneProp(a,"bendDegree",b,c)}setLineThickness(a,b,c){return super._updateOneProp(a,"lineThickness",b,c)}setflowPointSizeScale(a,b,c){return super._updateOneProp(a,"flowPointSizeScale",b,c)}setLabelSizeScale(a,b,c){return super._updateOneProp(a,"labelSizeScale",b,c)}setLineShape(a,b,c){return super._updateOneProp(a,"lineShape",b,c)}setLineStyle(a,b,c){return super._updateOneProp(a,"lineStyle",b,c)}setFlowShape(a,b,c){return super._updateOneProp(a,
+"flowShape",b,c)}setStartPointShape(a,b,c){return super._updateOneProp(a,"startPointShape",b,c)}setEndPointShape(a,b,c){return super._updateOneProp(a,"endPointShape",b,c)}setStartLabelShape(a,b,c){return super._updateOneProp(a,"startLabelShape",b,c)}setEndLabelShape(a,b,c){return super._updateOneProp(a,"endLabelShape",b,c)}}class Ab extends Q{constructor(a){super(a,"Panorama")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,
+b,c,e,d){return super._focus(a,b,c,e,d)}get(a,b){return super._get(a,b)}enter(a,b){return this.int.call({command:p.Panorama_Enter,ids:K(a)},b)}exit(a){return this.int.call({command:p.Panorama_Exit},a)}switchMode(a){return this.int.call({command:p.Panorama_Switch},a)}}class Bb extends Q{constructor(a){super(a,"Polygon","color|frameColor")}add(a,b){this._fixPolygonData(a);return super._add(a,b)}_fixPolygonProperty(a){a.intensity&&(a.brightness=a.intensity)}_fixPolygonData(a){if(a instanceof Array)for(let b of a)this._fixPolygonProperty(b);
+else this._fixPolygonProperty(a)}update(a,b){this._fixPolygonData(a);return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}glow(a,b,c){return this.int.call({command:p.Polygon_Glow,ids:K(a),duration:b},c)}highlight(a,b){return this.int.call({command:p.Polygon_Highlight,ids:K(a)},b)}stopHighlight(a,b){return this.int.call({command:p.Polygon_StopHighlight,
+ids:K(a)},b)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",O(b),c)}setColor(a,b,c){return super._updateOneProp(a,"color",E(b),c)}setDepthTest(a,b,c){return super._updateOneProp(a,"depthTest",b,c)}}class Cb extends Q{constructor(a){super(a,"Polygon3D","color")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,
+b){return super._hide(a,b)}get(a,b){return super._get(a,b)}showAll(a){return super._showAll(a)}hideAll(a){return super._hideAll(a)}highlight(a,b){return this.int.call({command:p.Polygon3D_Highlight,ids:K(a)},b)}stopHighlight(a,b){return this.int.call({command:p.Polygon3D_StopHighlight,ids:K(a)},b)}glow(a,b,c){return this.int.call({command:p.Polygon3D_Glow,ids:K(a),duration:b},c)}stopGlow(a,b){return this.int.call({command:p.Polygon3D_StopGlow,ids:K(a)},b)}setStyle(a,b,c){return super._updateOneProp(a,
+"style",b,c)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",b,c)}setColor(a,b,c){return super._updateOneProp(a,"color",E(b),c)}setHeight(a,b,c){return super._updateOneProp(a,"height",b,c)}setIntensity(a,b,c){return super._updateOneProp(a,"intensity",b,c)}setTillingX(a,b,c){return super._updateOneProp(a,"tillingX",b,c)}setTillingY(a,b,c){return super._updateOneProp(a,"tillingY",b,c)}}class Db extends Q{constructor(a){super(a,"Polyline","color")}add(a,b){this._fixPolylineData(a);
+return super._add(a,b)}_fixPolylineProperty(a){a.intensity&&(a.brightness=a.intensity)}_fixPolylineData(a){if(a instanceof Array)for(let b of a)this._fixPolylineProperty(b);else this._fixPolylineProperty(a)}update(a,b){this._fixPolylineData(a);return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}get(a,
+b){return super._get(a,b)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",b,c)}setStyle(a,b,c){return super._updateOneProp(a,"style",b,c)}setThickness(a,b,c){return super._updateOneProp(a,"thickness",b,c)}setColor(a,b,c){return super._updateOneProp(a,"color",E(b),c)}setFlowRate(a,b,c){return super._updateOneProp(a,"flowRate",b,c)}setBrightness(a,b,c){return super._updateOneProp(a,"brightness",b,c)}setShape(a,b,c){return super._updateOneProp(a,"shape",b,c)}setDepth(a,b,c){return super._updateOneProp(a,
+"depthTest",b,c)}}class Eb extends Q{constructor(a){super(a,"RadiationPoint","color")}add(a,b){this._fixRadiationPointData(a);return super._add(a,b)}_fixRadiationPointProperty(a){a.intensity&&(a.brightness=a.intensity)}_fixRadiationPointData(a){if(a instanceof Array)for(let b of a)this._fixRadiationPointProperty(b);else this._fixRadiationPointProperty(a)}update(a,b){this._fixRadiationPointData(a);return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,
+b,c,e,d){return super._focus(a,b,c,e,d)}focusAll(a,b,c,e){return super._focusAll(a,b,c,e)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}showAll(a){return super._showAll(a)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}setCoordinate(a,b,c){return super._updateOneProp(a,"coordinate",b,c)}setRadius(a,b,c){return super._updateOneProp(a,"radius",b,c)}setRippleNumber(a,b,c){return super._updateOneProp(a,"rippleNumber",b,c)}setColor(a,b,c){return super._updateOneProp(a,
+"color",E(b),c)}setBrightness(a,b,c){return super._updateOneProp(a,"brightness",b,c)}setAutoHeight(a,b,c){return super._updateOneProp(a,"autoHeight",b,c)}}class Fb extends Q{constructor(a){super(a,"ShapeFileLayer","color")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}_fix_property(a){if(a instanceof Array){let b=[];for(let c of a)S(c.cacheAllField)&&(c.cacheAllField=!1,b.push(c));a=b}else S(a.cacheAllField)&&(a.cacheAllField=!1);return a}delete(a,b){return super._delete(a,
+b)}clear(a){return super._clear(a)}get(a,b){return super._get(a,b)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}showAll(a){return super._showAll(a)}hideAll(a){return super._hideAll(a)}open(a,b){return this.int.call({command:p.ShapeFileLayer_OpenShapeFileLayer,data:F(a)},b)}highlightFeature(a,b,c){return this.int.call({command:p.ShapeFileLayer_HighlightFeature,data:F({shpId:a,featureIds:[b]})},c)}stopHighlightFeature(a,b,c){return this.int.call({command:p.ShapeFileLayer_UnHighlightFeature,
+data:F({shpId:a,featureIds:[b]})},c)}highlightFeatures(a,b){return this.int.call({command:p.ShapeFileLayer_HighlightFeature,data:F(a)},b)}stopHighlightFeatures(a,b){return this.int.call({command:p.ShapeFileLayer_UnHighlightFeature,data:F(a)},b)}focusFeature(a,b,c,e,d,h){return this.int.call({command:p.ShapeFileLayer_FocusFeature,data:F({shpId:a,featureIds:[b]}),distance:c,flyTime:e,rotation:d},h)}getFeature(a,b){return this.int.call({command:p.ShapeFileLayer_GetFeatureInfo,data:F(a)},b)}}class Gb extends Q{constructor(a){super(a,
+"Tag","textColor|textBackgroundColor|textBorderColor")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}focusAll(a,b,c,e){return super._focusAll(a,b,c,e)}show(a,b){return super._show(a,b)}showAll(a){return super._showAll(a)}hide(a,b){return super._hide(a,b)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}setCoordinate(a,b,c){return super._updateOneProp(a,
+"coordinate",b,c)}setImagePath(a,b,c){return super._updateOneProp(a,"imagePath",b,c)}setImageSize(a,b,c){return super._updateOneProp(a,"imageSize",b,c)}setText(a,b,c){return super._updateOneProp(a,"text",b,c)}setRange(a,b,c){return super._updateOneProp(a,"range",b,c)}setTextColor(a,b,c){return super._updateOneProp(a,"textColor",b,c)}setTextBackgroundColor(a,b,c){return super._updateOneProp(a,"textBackgroundColor",b,c)}setTextBorderColor(a,b,c){return super._updateOneProp(a,"textBorderColor",b,c)}setShowLine(a,
+b,c){return super._updateOneProp(a,"showLine",b,c)}setAutoHidePopupWindow(a,b,c){return super._updateOneProp(a,"autoHidePopupWindow",b,c)}setURL(a,b,c){return super._updateOneProp(a,"url",b,c)}showPopupWindow(a,b){return this.int.call({command:p.Tag_PopupWindow_Show,ids:K(a)},b)}hidePopupWindow(a,b){return this.int.call({command:p.Tag_PopupWindow_Hide,ids:K(a)},b)}showAllPopupWindow(a){return this.int.call0(p.Tag_PopupWindow_ShowAll,a)}hideAllPopupWindow(a){return this.int.call0(p.Tag_PopupWindow_HideAll,
+a)}}class Hb extends Q{constructor(a){super(a,"TileLayer")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}getAllFlattenInfo(a){return this.int.call({command:p.TileLayer_GetAllFlattenData},a)}getActorInfoFromDB(a,b){return this.int.call({command:p.TileLayer_GetActorInfoFromDB,data:F(a)},b)}enableXRay(a,
+b,c){return this.int.call({command:p.TileLayer_EnableXRay,ids:K(a),color:E(b)},c)}disableXRay(a,b){return this.int.call({command:p.TileLayer_DisableXRay,ids:K(a)},b)}enableClip(a,b){let c=[];a=F(a);for(let e of a)c.push({id:e,allowClip:!0});return this.int.call({command:p.TileLayer_SetAllowClip,data:c},b)}disableClip(a,b){let c=[];a=F(a);for(let e of a)c.push({id:e,allowClip:!1});return this.int.call({command:p.TileLayer_SetAllowClip,data:c},b)}setFileName(a,b,c){return super._updateOneProp(a,"fileName",
+b,c)}setLocation(a,b,c){return super._updateOneProp(a,"location",b,c)}setTranslation(a,b,c){return this.setLocation(a,b,c)}setRotation(a,b,c){return super._updateOneProp(a,"rotation",b,c)}setScale(a,b,c){return super._updateOneProp(a,"scale",b,c)}showActor(a,b,c){a=new fa(a,b);return this.int.call({command:p.TileLayer_Actor_Show,data:F(a)},c)}showActors(a,b){let c=[];if(a instanceof Array)for(let d=0;d<a.length;d++){var e=a[d];e={tileLayerId:e.id,tileLayerActorNames:K(e.objectIds)};c.push(e)}else a=
+{tileLayerId:a.id,tileLayerActorNames:K(a.objectIds)},c.push(a);return this.int.call({command:p.TileLayer_Actor_Show,data:c},b)}hideActor(a,b,c){a=new fa(a,b);return this.int.call({command:p.TileLayer_Actor_Hide,data:F(a)},c)}hideActors(a,b){let c=[];if(a instanceof Array)for(let d=0;d<a.length;d++){var e=a[d];e={tileLayerId:e.id,tileLayerActorNames:K(e.objectIds)};c.push(e)}else a={tileLayerId:a.id,tileLayerActorNames:K(a.objectIds)},c.push(a);return this.int.call({command:p.TileLayer_Actor_Hide,
+data:c},b)}focusActor(a,b,c,e,d,h){a=new fa(a,b);return this.int.call({command:p.TileLayer_Actor_Focus,data:F(a),distance:c,flyTime:e,rotation:d},h)}focusActors(a,b,c,e,d){a=new fa(a.id,a.objectIds);return this.int.call({command:p.TileLayer_Actor_Focus,data:F(a),distance:b,flyTime:c,rotation:e},d)}highlightActor(a,b,c){a=new fa(a,b);return this.int.call({command:p.TileLayer_Actor_Highlight,data:F(a)},c)}stopHighlightActor(a,b,c){let e=void 0==a;"function"==typeof a&&(c=a,e=!0);if(e)return this.stopHighlightActors(c);
+if(S(a)||S(b))console.error("\u53c2\u6570\u4e0d\u80fd\u4e3a\u7a7a!");else return this.stopHighlightActors({id:a,objectIds:[b]},c)}highlightActors(a,b){return this.int.call({command:p.TileLayer_Actor_Highlight,data:this._fix_highlight_actors_data(a)},b)}stopHighlightActors(a,b){let c=!a;"function"==typeof a&&(b=a,c=!0);return c?this.int.call0(p.TileLayer_Actor_StopHightlight,b):this.int.call({command:p.TileLayer_Actor_Unhighlight,data:this._fix_highlight_actors_data(a)},b)}_fix_highlight_actors_data(a){if(S(a))console.error("\u53c2\u6570\u4e0d\u80fd\u4e3a\u7a7a!");
+else{var b=[];if(a instanceof Array)for(let c=0;c<a.length;c++){let e=new fa(a[c].id,a[c].objectIds);b.push(e)}else a=new fa(a.id,a.objectIds),b.push(a);return b}}stopHighlightAllActors(a){return this.int.call0(p.TileLayer_Actor_StopHightlight,a)}showAllActors(a,b){return this.int.call({command:p.TileLayer_Actor_ShowAll,ids:K(a)},b)}hideAllActors(a,b){return this.int.call({command:p.TileLayer_Actor_HideAll,ids:K(a)},b)}setStyle(a,b,c,e,d,h,g,q){return this.int.call({command:p.TileLayer_SetStyle,ids:K(a),
+style:b,color:E(c),saturation:e,brightness:d,contrast:h,contrastbase:g},q)}setCollision(a,b,c,e,d,h){a=K(a);let g=[];for(let q of a)g.push({id:q,enableCollision:b,enableMouseRoma:c,enableFunctionInteract:e,enableCharacterCollision:d});return this.int.call({command:p.TileLayer_SetCollision,data:g},h)}getCollision(a,b){return this.int.call({command:p.TileLayer_GetCollision,ids:K(a)},b)}addModifiers(a,b){return this.int.call({command:p.TileLayer_Modifier_Add,data:F(a)},b)}addModifierByShapeFile(a,b){return this.int.call({command:p.TileLayer_Modifier_Add,
+data:F(a)},b)}addModifier(a,b,c,e,d){this.addModifiers([{id:a,tileLayerId:b,coordinates:c,ententBufferSize:e}])}updateModifier(a,b,c,e,d){return this.int.call({command:p.TileLayer_Modifier_Update,data:F([{id:a,tileLayerId:b,coordinates:c,ententBufferSize:e}])},d)}deleteModifier(a,b,c){return this.int.call({command:p.TileLayer_Modifier_Delete,id:a,tileLayerId:b},c)}clearModifier(a,b){return this.int.call({command:p.TileLayer_Modifier_Clear,ids:K(a)},b)}setViewportVisible(a,b,c){let e=[];e.push({viewportIndex:1,
+viewportVisible:!!(b&ba.V1)});e.push({viewportIndex:2,viewportVisible:!!(b&ba.V2)});e.push({viewportIndex:3,viewportVisible:!!(b&ba.V3)});e.push({viewportIndex:4,viewportVisible:!!(b&ba.V4)});return this.int.call({command:p.TileLayer_SetViewportVisible,id:a,data:e},c)}getObjectIDs(a,b){return this.int.call({command:p.TileLayer_GetObjectIDs,ids:K(a)},b)}getActorInfo(a,b){return this.int.call({command:p.TileLayer_Actor_GetInfo,data:F(a)},b)}addHoleByShapeFile(a,b){return this.int.call({command:p.TileLayer_CutPolygon_Add,
+data:F(a)},b)}addHole(a,b){return this.int.call({command:p.TileLayer_CutPolygon_Add,data:F(a)},b)}updateHole(a,b,c,e,d){return this.int.call({command:p.TileLayer_CutPolygon_Update,data:F({id:a,tileLayerId:b,coordinates:c,isReverseCut:e})},d)}deleteHole(a,b,c){return this.int.call({command:p.TileLayer_CutPolygon_Delete,id:a,tileLayerId:b},c)}clearHole(a,b){return this.int.call({command:p.TileLayer_CutPolygon_Clear,ids:K(a)},b)}setViewHeightRange(a,b,c,e){return this.int.call({command:p.TileLayer_SetViewHeightRange,
+data:[{id:a,minVisibleHeight:b,maxVisibleHeight:c}]},e)}setPointCloudSize(a,b,c){return this.int.call({command:p.TileLayer_SetPointSize,data:[{tileLayerId:a,size:b}]},c)}setEnableDecal(a,b){return this.int.call({command:p.TileLayer_SetDecalAttach,data:a},b)}}class Ib extends Q{constructor(a){super(a,"Vehicle")}add(a,b){this._fixVehicleData(a);return super._add(a,b)}_fixVehicleData(a){if(a instanceof Array)for(let b of a)this._fixVehicleProperty(b);else this._fixVehicleProperty(a)}_fixVehicleProperty(a){0<
+a.colorType?a.initFunctionInfos=[{functionName:"setVehicleColor",parameters:[{paramType:2,paramValue:a.colorType}]}]:a.colorType=0}update(a,b){this._fixVehicleData(a);return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d,h,g){return this.int.call({command:p.Vehicle_Focus,ids:F(a),distance:c,flyTime:e,rotation:d,distanceRotation:h,followEnabled:b},g)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,
+b)}setWayPoint(a,b){return this.int.call({command:p.Vehicle_AddWayPoints,data:F(a)},b)}moveTo(a,b){return this.int.call({command:p.Vehicle_MoveTo,data:F(a)},b)}start(a,b){if(S(a))console.error("\u53c2\u6570\u4e0d\u80fd\u4e3a\u7a7a!");else{if(0<=a.timeStamp)a.active=!0;else if(a instanceof Array)for(let c of a)c.active=!0;else{console.error("\u53c2\u6570\u975e\u6cd5!");return}return this.int.call({command:p.Vehicle_Update,data:F(a)},b)}}pause(a,b){a=this._fixIds(a,!1);if(!S(a))return this.int.call({command:p.Vehicle_Update,
+data:a},b)}resume(a,b){a=this._fixIds(a,!0);if(!S(a))return this.int.call({command:p.Vehicle_Update,data:a},b)}stop(a,b){a=this._fixIds(a,!1);if(!S(a))return this.int.call({command:p.Vehicle_Update,data:a},b)}_fixIds(a,b){let c=[];if(S(a))console.error("\u53c2\u6570\u4e0d\u80fd\u4e3a\u7a7a!");else{if(a instanceof Array){let e=!1;for(let d of a){if("string"!=typeof d){e=!0;break}c.push({id:d,active:b})}if(e){console.error("\u53c2\u6570\u975e\u6cd5!");return}return c}if("string"!==typeof a||S(a))console.error("\u53c2\u6570\u975e\u6cd5!");
+else return c.push({id:a,active:b}),c}}callBatchFunction(a,b){return this.int.call({command:p.Vehicle_CallBatchFunction,data:F(a)},b)}}class Jb extends Q{constructor(a){super(a,"VideoProjection","frustumColor")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}setVideoURL(a,
+b,c){return super._updateOneProp(a,"videoURL",b,c)}setLocation(a,b,c){return super._updateOneProp(a,"location",b,c)}setRotation(a,b,c){return super._updateOneProp(a,"rotation",b,c)}setFovy(a,b,c){return super._updateOneProp(a,"fov",b,c)}setAspectRatio(a,b,c){return super._updateOneProp(a,"aspectRatio",b,c)}setDistance(a,b,c){return super._updateOneProp(a,"distance",b,c)}setDepthCulling(a,b,c){return super._updateOneProp(a,"depthCulling",b,c)}setFrustumColor(a,b,c){return super._updateOneProp(a,"frustumColor",
+b,c)}}class Kb extends Q{constructor(a){super(a,"WaterFlowField")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}get(a,b){return super._get(a,b)}}class Lb extends Q{constructor(a){super(a,"WaterMesh","waterColor")}add(a,b){return super._add(a,b)}update(a,b){return super._update(a,b)}delete(a,
+b){return super._delete(a,b)}clear(a){return super._clear(a)}focus(a,b,c,e,d){return super._focus(a,b,c,e,d)}show(a,b){return super._show(a,b)}hide(a,b){return super._hide(a,b)}showAll(a){return super._showAll(a)}hideAll(a){return super._hideAll(a)}get(a,b){return super._get(a,b)}setCoordinates(a,b,c){return super._updateOneProp(a,"coordinates",b,c)}setIndices(a,b,c){return super._updateOneProp(a,"indices",b,c)}setNormals(a,b,c){return super._updateOneProp(a,"normals",b,c)}setWaterColor(a,b,c){return super._updateOneProp(a,
+"waterColor",b,c)}setWaterSpeed(a,b,c){return super._updateOneProp(a,"waterSpeed",b,c)}setWaterUVRepeat(a,b,c){return super._updateOneProp(a,"waterUVRepeat",b,c)}setWaterDirection(a,b,c){return super._updateOneProp(a,"waterDirection",b,c)}setWaterWaveScale(a,b,c){return super._updateOneProp(a,"waveScale",b,c)}}var za="en",ta={},Aa={VersionMismatch:["\u8b66\u544a\uff1a\n--------------------------------------------------\n    ac.min.js\u6587\u4ef6\u7248\u672c\uff08{0}\uff09\u548c\u4e91\u6e32\u67d3\u670d\u52a1\u5668\u7248\u672c\uff08{1}\uff09\u4e0d\u4e00\u81f4\uff0c\n    \u53ef\u80fd\u9020\u6210\u63a5\u53e3\u8c03\u7528\u9519\u8bef\u6216\u5d29\u6e83\uff0c\u8bf7\u786e\u8ba4!",
+"Warning:\n--------------------------------------------- -----\n The version of the ac.min.js file ({0}) and the version of the cloud rendering server ({1}) are inconsistent,\n may cause interface call errors or crashes, please confirm!"],Disconnect:["\u8fde\u63a5\u65ad\u5f00","Disconnect"],TimeConsuming:["\u8017\u65f6\uff1a","TimeConsuming: "],RequestTime:["\u8bf7\u6c42\u65f6\u95f4\uff1a","RequestTime: "],ResponseTime:["\u54cd\u5e94\u65f6\u95f4\uff1a","ResponseTime: "],MessageLength:["\u6d88\u606f\u957f\u5ea6\uff1a",
+"MessageLength: "],DomLoading:["DOM\u5c1a\u5728\u52a0\u8f7d\u4e2d\uff0c\u6b64\u65f6\u4e0d\u80fd\u521d\u59cb\u5316DigitalTwinPlayer!","DOM is still loading, cannot initialize DigitalTwinPlayer at this time!"],CannotChangeProject:["\u5f53\u524d\u5b9e\u4f8b\u5df2\u8bbe\u7f6e\u9501\u5b9a\u5de5\u7a0b\uff0c\u65e0\u6cd5\u901a\u8fc7API\u63a5\u53e3\u5207\u6362\u5de5\u7a0b","The current instance has been set to lock the project, and the project cannot be switched through the API interface"],InstanceNotExist:["\u5bf9\u5e94\u7684\u5b9e\u4f8b\u4e0d\u5b58\u5728\uff0c\u8bf7\u786e\u8ba4",
+"The corresponding instance does not exist, please confirm"],ProjectNotExist:["\u5bf9\u5e94\u7684\u5de5\u7a0b\u4e0d\u5b58\u5728\uff0c\u8bf7\u786e\u8ba4","The corresponding project does not exist, please confirm"],JSQueue:["JS\u961f\u5217\uff1a","JS queue:"],BackQueue:["\u540e\u53f0\u961f\u5217\uff1a","Background queue:"],Execting:["\u6b63\u5728\u6267\u884c\uff1a","Executing: "],PleaseWait:["\uff0c\u8bf7\u7a0d\u5019...",", Please wait..."],DisconnectForIdle:["\u957f\u65f6\u95f4\u672a\u4f7f\u7528\u8fde\u63a5\u5df2\u65ad\u5f00",
+"Disconnected after a long time of inactivity"],NodeInfo:["\u6e32\u67d3\u8282\u70b9\u4fe1\u606f\uff1a","Render node information:"],Host:["\u4e3b\u673a\u540d\u79f0\uff1a","Host: "],HostAddress:["\u4e3b\u673a\u5730\u5740\uff1a","Host address:"],Project:["\u5de5\u7a0b\uff1a","Project: "],ProjectId:["\u5de5\u7a0bID\uff1a","ProjectId: "],IID:["\u5b9e\u4f8bID\uff1a","IID: "],Adaptive:["\u81ea\u9002\u5e94\uff1a","Adaptive: "],LimitMaxRes:["\u9650\u5236\u6700\u5927\u5206\u8fa8\u7387\uff1a","Limit max resolution: "],
+Resolution:["\u5206\u8fa8\u7387\uff1a","Resolution: "],Destroyed:["destroyed - \u7528\u6237\u9500\u6bc1","destroyed - user destroyed"],Reconnect5s:["\u5c06\u57285\u79d2\u540e\u91cd\u65b0\u8fde\u63a5...","Will reconnect in 5 seconds..."],RestartAndRetry:["\u5f53\u524d\u5b9e\u4f8b\u6b63\u5fd9\u65e0\u6cd5\u8fde\u63a5\uff01\n\u662f\u5426\u7acb\u5373\u91cd\u542f\u8be5\u5b9e\u4f8b\u4ee5\u8fdb\u884c\u8fde\u63a5\uff1f","The current instance is busy and cannot be connected! \nDo you want to restart this instance now to connect?"],
+EnterFullscreen:["\u8fdb\u5165\u5168\u5c4f","enter fullscreen"],ExitFullscreen:["\u9000\u51fa\u5168\u5c4f","exit fullscreen"],TriggerSysTouch:["\u89e6\u53d1\u4e86\u7cfb\u7edf\u89e6\u6478\u64cd\u4f5c\uff0c\u5c06\u624b\u52a8\u53d1\u9001TouchEnd\u4e8b\u4ef6","The system touch operation is triggered, and the TouchEnd event will be sent manually"],RestartInstNow:["\u7acb\u5373\u91cd\u542f\u5b9e\u4f8b","Reboot instance"],LeftClickTip:["\u9f20\u6807\u5de6\u952e\u70b9\u51fb\uff1a\u56de\u5230\u4fdd\u5b58\u7684\u4f4d\u7f6e\u6216\u8005\u5de5\u7a0b\u521d\u59cb\u4f4d\u7f6e",
+"Click with the left mouse button: return to the saved position or the initial position of the project"],RightClickTip:["\u9f20\u6807\u53f3\u952e\u70b9\u51fb\uff1a\u4fdd\u5b58\u5f53\u524d\u7684\u76f8\u673a\u4f4d\u7f6e","Right mouse click: save the current camera position"],MiddleClickTip:["\u9f20\u6807\u4e2d\u952e\u70b9\u51fb\uff1a\u5c06\u5f53\u524d\u4f4d\u7f6e\u8bbe\u7f6e\u4e3a\u5de5\u7a0b\u521d\u59cb\u4f4d\u7f6e\u5e76\u8df3\u8f6c","Middle mouse click: set the current position as the initial position of the project and jump"],
+Close:["\u5173\u95ed","Close"],Connections:["\u8fde\u63a5\u4e2a\u6570","Connections"],ConnInfo:["\u8fde\u63a5\u4fe1\u606f\uff1a","ConnInfo:"],Duration:["\u8fd0\u884c\u65f6\u957f\uff1a","Duration:"],Received:["\u63a5\u6536\u6570\u636e\uff1a","Received:"],ReceivedFrames:["\u63a5\u6536\u5e27\u6570\uff1a","Frames:"],Dropped:["\u4e22\u5305\u4e22\u5e27\uff1a","Dropped:"],DroppedTip:["\u4e22\u5305\u6570\u91cf / \u4e22\u5e27\u6570\u91cf","Number of dropped packets / Number of dropped frames"],DecodeTimeTip:["\u6d4f\u89c8\u5668\u89e3\u7801\u65f6\u95f4",
+"browser decoding time"],DecodingTime:["\u89e3\u7801\u65f6\u95f4\uff1a","DecTime:"],DecodeFrames:["\u89e3\u7801\u5e27\u6570\uff1a","DecFrame:"],DecodeFramesTip:["\u5df2\u89e3\u7801\u7684\u5e27\u6570 / \u5df2\u89e3\u7801\u7684\u5173\u952e\u5e27\u6570\u91cf","Decoded Frames / Decoded Keyframes"],Bitrate:["\u7801\u7387\uff1a","Bitrate:"],FPS:["\u5e27\u7387\uff1a","FPS:"],QP:["QP\uff1a","QP:"],FPSTip:["\u6e32\u67d3\u5e27\u7387/\u89c6\u9891\u5e27\u7387","Rendering frame rate/video frame rate"],MaxQP:["QP\u4e0a\u9650\uff1a",
+"MaxQP:"],MaxQPTip:["\u503c\u8d8a\u5927\uff0c\u753b\u8d28\u8d8a\u7c97\u7cd9\uff0c\u9700\u8981\u7684\u5e26\u5bbd\u8d8a\u5c0f","The larger the value, the rougher the picture quality and the smaller the required bandwidth"],MaxBitrate:["\u7801\u7387\u4e0a\u9650\uff1a","MaxBitrate:"]};String.prototype.format=function(){if(0==arguments.length)return this;for(var a=this,b=0;b<arguments.length;b++)a=a.replace(new RegExp("\\{"+b+"\\}","g"),arguments[b]);return a};class H{}H.onLanguageChangedCallbacks=[];
+H.setLanguage=a=>{za="zh"===a?"zh":"en";ta={};a="zh"==za;for(let b in Aa){let c=Aa[b];ta[b]=a?c[0]:c[1]}for(let b of H.onLanguageChangedCallbacks)"function"==typeof b&&b()};H.getString=a=>ta[a];class Mb{constructor(a){this.int=a;this._useOldDataFormat=!1}useOldDataFormat(a){this._useOldDataFormat=a||!0}get(a){return this.int.call0(p.Camera_GetCamera,a)}_setByArray(a,b,c){return this.set(a[0],a[1],a[2],a[3],a[4],b,c)}_setByObject(a,b,c){return this.set(a.x,a.y,a.z,a.pitch,a.yaw,b,c)}set(a,b,c,e,d,
+h,g){if(a instanceof Array&&5<=a.length)return this._setByArray(a,b,c);if("object"==typeof a&&a.hasOwnProperty("x"))return this._setByObject(a,b,c);"function"==typeof h&&(g=h,h=void 0);if(this._useOldDataFormat){let q=e;e=d;d=q}return this.int.call({command:p.Camera_Set,coordinate:[a,b,c],pitch:e||0,yaw:d||0,flyTime:h},g)}lookAt(a,b,c,e,d,h,g,q){"function"==typeof g&&(q=g,g=void 0);if(this._useOldDataFormat){let k=d;d=h;h=k}return this.int.call({command:p.Camera_Set,coordinate:[a,b,c],distance:e,
+pitch:d||0,yaw:h||0,flyTime:g},q)}lookAtBBox(a,b,c,e,d){"function"==typeof e&&(d=e,e=void 0);if(this._useOldDataFormat){let h=b;b=c;c=h}return this.int.call({command:p.Camera_LookAtBBox,bbox:a,pitch:b||0,yaw:c||0,flyTime:e},d)}playAnimation(a,b){return this.int.call({command:p.Camera_PlayAnimation,id:a},b)}stopAnimation(a){return this.int.call0(p.Camera_StopAnimation,a)}pauseAnimation(a){return this.int.call0(p.Camera_PauseAnimation,a)}resumeAnimation(a){return this.int.call0(p.Camera_ResumeAnimation,
+a)}getAnimationList(a){return this.int.call0(p.Camera_GetAnimationList,a)}getAnimationImage(a,b){return this.int.call({command:p.Camera_GetAnimationImage,name:a},b)}moveForward(a){return this.int.call({command:p.Camera_Move,moveForward:!0},a)}moveBackward(a){return this.int.call({command:p.Camera_Move,moveBackward:!0},a)}moveLeft(a){return this.int.call({command:p.Camera_Move,moveLeft:!0},a)}moveRight(a){return this.int.call({command:p.Camera_Move,moveRight:!0},a)}moveUp(a){return this.int.call({command:p.Camera_Move,
+moveUp:!0},a)}moveDown(a){return this.int.call({command:p.Camera_Move,moveDown:!0},a)}turnLeft(a){return this.int.call({command:p.Camera_Move,turnLeft:!0},a)}turnRight(a){return this.int.call({command:p.Camera_Move,turnRight:!0},a)}turnUp(a){return this.int.call({command:p.Camera_Move,turnUp:!0},a)}turnDown(a){return this.int.call({command:p.Camera_Move,turnDown:!0},a)}stop(a){return this.int.call({command:p.Camera_Move,stop:!0},a)}getEulerAngle(a,b){const c=360/(2*Math.PI);let e=b[0]-a[0],d=b[1]-
+a[1];return[Math.atan2(b[2]-a[2],Math.sqrt(e*e+d*d))*c,Math.atan2(e,d)*c-90,0]}lockByBBox(a,b){return this.int.call({command:p.Camera_LockBBox,bbox:a},b)}unlock(a){return this.int.call({command:p.Camera_UnLockBBox},a)}flyAround(a,b,c,e,d){return this.int.call({command:p.Camera_FlyAround,coordinate:a,rotation:b||[0,90,0],distance:c||1E3,time:e||10},d)}enterWorld(a){return this.int.call({command:p.Camera_ExitWorldAnimation},a)}exitWorld(a){return this.int.call({command:p.Camera_EnterWorldAnimation},
+a)}}class Nb{constructor(a){this.int=a}screen2World(a,b,c){return this.int.call({command:p.Coord_Screen2World,screenPosition:[a,b]},c)}world2Screen(a,b,c,e){return this.int.call({command:p.Coord_World2Screen,worldlocation:[a,b,c]},e)}gcs2pcs(a,b,c){"function"==typeof b&&(c=b);S(b)&&(b=1);if(1==b)return this.int.call({command:p.Coord_GCS2PCS,coordinates:T(a)},c);2==b?this.transform(T(a),2,0,c):3==b?this.transform(T(a),3,0,c):console.error("\u672a\u77e5\u5750\u6807\u7cfb\u7c7b\u578b")}pcs2gcs(a,b,c){"function"==
+typeof b&&(c=b);S(b)&&(b=1);if(1==b)return this.int.call({command:p.Coord_PCS2GCS,coordinates:T(a)},c);2==b?this.transform(T(a),0,2,c):3==b?this.transform(T(a),0,3,c):console.error("\u672a\u77e5\u5750\u6807\u7cfb\u7c7b\u578b")}transform(a,b,c,e){return this.int.call({command:p.Coord_Transform,coordinates:T(a),src:b,dest:c},e)}}class Ob{constructor(a){this.int=a}start(a){return this.int.call0(p.EditHelper_Start,a)}cancel(a){return this.int.call0(p.EditHelper_Quit,a)}finish(a,b){return this.int.call({command:p.EditHelper_Finish,
+withOffset:a||!0},b)}setParam(a,b,c,e){return this.int.call({command:p.EditHelper_SetParam,lineType:a,buildType:b,color:E(c)},e)}}class Pb{constructor(a){this.int=a}setVisibility(a,b){return this.int.call({command:p.InfoTree_SetVisibility,layers:F(a)},b)}show(a,b){return this.int.call({command:p.InfoTree_Show,ids:K(a)},b)}hide(a,b){return this.int.call({command:p.InfoTree_Hide,ids:K(a)},b)}enableXRay(a,b,c){return this.int.call({command:p.InfoTree_EnableXRay,ids:F(a),color:E(b)},c)}disableXRay(a,
+b){return this.int.call({command:p.InfoTree_DisableXRay,ids:F(a)},b)}showByGroupId(a,b){return this.int.call({command:p.InfoTree_ShowByGroupId,ids:K(a)},b)}hideByGroupId(a,b){return this.int.call({command:p.InfoTree_HideByGroupId,ids:K(a)},b)}highlightByGroupId(a,b){return this.int.call({command:p.InfoTree_HighlightByGroupId,ids:K(a)},b)}deleteByGroupId(a,b){return this.int.call({command:p.InfoTree_DeleteByGroupId,ids:K(a)},b)}get(a){return this.int.call0(p.InfoTree_Get,a)}focus(a,b){return this.int.call({command:p.InfoTree_Focus,
+ids:K(a)},b)}}class Qb{constructor(a){this.int=a;this.apiVersion="5.4";this.apiVersionServer=""}isApiVersionMatched(){return"5.4"==this.apiVersionServer}addImageButtons(a,b){return this.int.call({command:p.Misc_AddImageButton,data:F(a)},b)}deleteImageButtons(a,b){return this.int.call({command:p.Misc_DeleteImageButton,ids:K(a)},b)}addAnimatedImageButtons(a,b){return this.int.call({command:p.Misc_AddAnimatedImageButton,data:F(a)},b)}setApiVersionReceived(a){this.int.onApiVersionReceived=a}playVideo(a,
+b,c,e,d,h,g){return this.int.call({command:p.Misc_PlayVideo,data:[{id:a.toString(),position:[b,c],size:[e,d],url:h}]},g)}stopPlayVideo(a,b){return this.int.call({command:p.Misc_StopPlayVideo,ids:K(a)},b)}playMovie(a,b,c){"function"==typeof b&&(c=b,b=!1);return this.int.call({command:p.Misc_PlayMovie,loop:b,url:a},c)}stopMovie(a){return this.int.call({command:p.Misc_StopMovie},a)}setWindowResolution(a,b,c){return this.int.call({command:p.Misc_SetWindowResolution,cx:a,cy:b,mode:0},c)}callBPFunction(a,
+b){return this.int.call({command:p.Misc_CallBPFunction,data:F(a)},b)}enterReportMode(a){return this.int.call0(p.Misc_EnterReportMode)}exitReportMode(a){return this.int.call0(p.Misc_ExitReportMode,a)}showAllFoliages(a){return this.int.call0(p.Misc_ShowAllFoliages,a)}hideAllFoliages(a){return this.int.call0(p.Misc_HideAllFoliages,a)}startProcess(a,b,c,e){"function"==typeof c&&(e=c,c=!0);return this.int.call({command:p.Misc_StartProcess,appName:a,commandLine:b,visible:c},e)}enterMultiViewportMode(a,
+b,c,e){if(null==b||void 0==b)b="#DEA309";if(null==c||void 0==c)c=2;return this.int.call({command:p.Misc_EnterMultiViewport,type:a,lineColor:E(b),lineThickness:c},e)}exitMultiViewportMode(a){return this.int.call({command:p.Misc_ExitMultiViewport},a)}setActiveViewport(a,b){return this.int.call({command:p.Misc_SetActivateMultiViewport,viewIndex:F(a)},b)}getActiveViewport(a){return this.int.call({command:p.Misc_GetActivateMultiViewport},a)}setMultiviewportInteractSync(a,b){this.setCameraFollow4Viewport(a,
+b)}setCameraFollow4Viewport(a,b){return this.int.call({command:p.Misc_UpdateMultiViewport,moverTogether:a},b)}downloadPakFiles(a,b){return this.int.call({command:p.Misc_downloadPakFiles,ids:F(a)},b)}getConvexPolygon(a,b){return this.int.call({command:p.Misc_ConvexHull2D,data:F(a)},b)}getMaterial(a,b){return this.int.call({command:p.Misc_QueryActorOrMaterial,idOrPaths:F(a)},b)}getBPFunction(a,b){return this.int.call({command:p.Misc_QueryActorOrMaterial,idOrPaths:F(a)},b)}startPolygonClip(a,b,c){return this.int.tools.startPolygonClip(a,
+b,c)}stopClip(a){return this.int.tools.stopClip(a)}playAnimation(a,b){return this.int.camera.playAnimation(a,b)}stopAnimation(a){return this.int.camera.stopAnimation(a)}setDateTime(a,b,c,e,d,h,g){return this.int.weather.setDateTime(a,b,c,e,d,h,g)}setQueryToolState(a,b){return this.int.call({"c.ommand":p.Settings_SetMousePickMask,mouseClick:a},b)}setCampassVisible(a,b){return this.int.settings.setCampassVisible(a,b)}setMainUIVisibility(a,b){return this.int.settings.setMainUIVisibility(a,b)}setMousePickMask(a,
+b){return this.int.settings.setMousePickMask(a,b)}}class Rb{constructor(a){this.int=a}setMapMode(a,b,c){b=b||{};return this.int.call({command:p.Settings_SetMapMode,mode:a,serviceType:b.serviceType||0,coordType:b.coordType||0,mapPoint:b.mapPoint||[0,0],longitude:b.longitude||0,latitude:b.latitude||0,cache:b.cache||":memory:",style:b.style||"mapbox://styles/mapbox/streets-v10",groundHeight:b.groundHeight||0,renderMode:b.renderMode||0,decalMode:b.decalMode||1,serverURL:b.serverURL,coordOrder:b.coordOrder,
+maxLevel:b.maxLevel},c)}getMapMode(a){return this.int.call0(p.Settings_GetMapMode,a)}setWMTSLayerVisible(a,b){this.setwmtsLayerVisible(a,b)}setwmtsLayerVisible(a,b){return this.int.call({command:p.Settings_SetWMTSLayerVisible,data:F(a)},b)}setWMTSLayerOpacity(a,b){return this.int.call({command:p.Settings_SetWMTSLayerOpacity,data:F(a)},b)}setMapURL(a,b){return this.int.call({command:p.Settings_SetMapURL,url:a},b)}highlightColor(a,b){return this.setHighlightColor(a,b)}setHighlightColor(a,b){return this.int.call({command:p.Settings_SetHighlightColor,
+color:E(a)},b)}setFovX(a,b){return this.int.call({command:p.Settings_SetFovX,value:a},b)}setOceanColor(a,b){return this.int.call({command:p.Settings_SetOceanColor,color:E(a)},b)}setEnableInteract(a,b){return this.int.call({command:p.Settings_SetEnableInteract,enableInteract:a},b)}setInteractiveMode(a,b){return this.int.call({command:p.Settings_SetInteractiveMode,mode:a},b)}getInteractiveMode(a){return this.int.call({command:p.Settings_GetInteractiveMode},a)}setCampassVisible(a,b){return this.int.call({command:p.Settings_SetCampassVisible,
+visible:a},b)}setCampassPosition(a,b,c){return this.int.call({command:p.Settings_SetCampassPosition,position:[a,b]},c)}restoreCampassPosition(a){this.setCampassPosition(-1,-1)}setMainUIVisibility(a,b){return this.int.call({command:p.Settings_SetMainUIVisibility,visible:a},b)}setMousePickMask(a,b){let c=!1,e=!1,d=!1;a&qa.MouseClick&&(c=!0);a&qa.MouseMove&&(e=!0);a&qa.MouseHover&&(d=!0);return this.int.call({command:p.Settings_SetMousePickMask,mouseClick:c,mouseMove:e,mouseHover:d},b)}setTerrainAlpha(a,
+b){return this.int.call({command:p.Settings_SetTerrainAlpha,alpha:a},b)}setEnableCameraMovingEvent(a,b,c){return this.int.call({command:p.Settings_EnableCameraMovingEvent,bEnable:a,monitorThreshold:b},c)}setLabelLayer(a,b){return this.int.call({command:p.VTPKService_Set,vtpk:a},b)}getLabelLayer(a){return this.int.call({command:p.VTPKService_Get},a)}removeLabelLayer(a){return this.int.call({command:p.VTPKService_Set,vtpk:""},a)}setRenderedCursorVisible(a,b){this.setCursorAutoSync(a,b)}setCursorAutoSync(a,
+b){return this.int.call({command:p.Settings_CursorAutoSync,useSoftwareCursor:a},b)}}class Sb{constructor(a){this.int=a}setReportMode(a,b,c,e){return this.int.call({command:p.Settings_SetReport,alignment:a,playMode:b,moveInOtherView:c},e)}getReportMode(a){return this.int.call({command:p.Settings_GetReport},a)}setControlMode(a,b,c,e,d){return this.int.call({command:p.Settings_SetControl,speed:a,yawSpeed:b,rotateSelf:c,useFemale:e},d)}getControlMode(a){return this.int.call({command:p.Settings_GetControl},
+a)}setPostProcessMode(a,b){let c=1E3,e=1E3;0<=a.terrainGlobalAlpha&&1>=a.terrainGlobalAlpha&&(c=1E3*a.terrainGlobalAlpha);0<=a.osgbGlobalAlpha&&1>=a.osgbGlobalAlpha&&(e=1E3*a.osgbGlobalAlpha);return this.int.call({command:p.Settings_SetPostProcess,contrast:a.contrast,saturation:a.saturation,lensFlareIntensity:a.lensFlareIntensity,ambientIntensity:a.ambientIntensity,bloomIntensity:a.bloomIntensity,lutMode:a.lutMode,lutIntensity:a.lutIntensity,darkCorner:a.darkCorner,screenPercentage:a.screenPercentage,
+terrainGlobalAlpha:c,terrainGlobalLitStatus:a.terrainGlobalLitStatus,osgbGlobalLitStatus:a.osgbGlobalLitStatus,osgbGlobalAlpha:e,antiAliasing:a.antiAliasing,tonemapper:a.tonemapper,postProcessEffects:a.postProcessEffects,dofMode:a.dofMode,wireThickness:a.wireThickness,receiveDecalMode:a.receiveDecalMode},b)}getPostProcessMode(a){return this.int.call({command:p.Settings_GetPostProcess},a)}setCameraMode(a,b,c,e,d){e&&"function"==typeof e&&(d=e);return this.int.call({command:p.Settings_SetCamera,nearClipPlane:a,
+fovH:b,minCamHeight:c,maxCamHeight:e},d)}getCameraMode(a){return this.int.call({command:p.Settings_GetCamera},a)}setMapMode(a,b,c){b=b||{};return this.int.call({command:p.Settings_SetMapMode,mode:a,serviceType:b.serviceType||0,coordType:b.coordType||0,mapPoint:b.mapPoint||[0,0],longitude:b.longitude||0,latitude:b.latitude||0,cache:b.cache||":memory:",style:b.style||"mapbox://styles/mapbox/streets-v10",groundHeight:b.groundHeight||0,renderMode:b.renderMode||0,decalMode:b.decalMode||1,serverURL:b.serverURL,
+coordOrder:b.coordOrder,maxLevel:b.maxLevel},c)}getMapMode(a){return this.int.call0(p.Settings_GetMapMode,a)}}class Tb{constructor(a){this.int=a}startPolygonClip(a,b,c){return this.int.call({command:p.Tools_StartPolygonClip,data:F({id:"0",coordinates:O(a),toggleImageCut:b})},c)}startPlaneClip(a,b,c,e,d){return this.int.call({command:p.Tools_StartPlaneClip,location:a,rotation:b,isShowPlane:c,isEdit:e},d)}startVolumeClip(a,b,c,e,d,h){return this.int.call({command:p.Tools_StartVolumeClip,bbox:a,rotation:d,
+value:b,isShowPlane:c,isEdit:e},h)}updateVolumeClip(a,b,c,e,d,h){return this.int.call({command:p.Tools_UpdateVolumeClip,bbox:a,rotation:d,value:b,isShowPlane:c,isEdit:e},h)}stopClip(a){return this.stopPolygonClip(a)}stopPolygonClip(a){return this.int.call0(p.Tools_StopClip,a)}stopPlaneClip(a){return this.int.call({command:p.Tools_StopPlaneClip},a)}stopVolumeClip(a){return this.int.call({command:p.Tools_StopVolumeClip},a)}setMeasurement(a,b,c){b=b||{};return this.int.call({command:p.Tools_SetMeasurement,
+type:a,pointSize:b.pointSize,textSize:b.textSize,textColor:E(b.textColor),pointColor:E(b.pointColor),lineColor:E(b.lineColor),areaColor:E(b.areaColor),showCoordinateText:b.showCoordinateText},c)}startMeasurement(a){return this.int.call0(p.Tools_StartMeasurement,a)}stopMeasurement(a){return this.int.call0(p.Tools_StopMeasurement,a)}lineIntersect(a,b,c){return this.int.call({command:p.Tools_LineIntersect,data:[{start:a,end:b}],highPrecision:!1,returnDetails:!0},c)}linesIntersect(a,b,c,e){return this.int.call({command:p.Tools_LineIntersect,
+data:F(a),highPrecision:b,returnDetails:c},e)}startGeometryEdit(a,b,c){return this.int.call({command:p.Tools_StartGeometryEdit,id:a,type:b},c)}stopGeometryEdit(a){return this.int.call0(p.Tools_StopGeometryEdit,a)}startSkylineAnalysis(a,b){a=a||{};a.outlineColor&&(a.outlineColor=E(a.outlineColor));a.sceneColor&&(a.sceneColor=E(a.sceneColor));a.skylineColor&&(a.skylineColor=E(a.skylineColor));a.backgroundColor&&(a.backgroundColor=E(a.backgroundColor));if(a.tileLayers){a.tileLayers=F(a.tileLayers);for(let c of a.tileLayers)c.hasOwnProperty("color")&&
+(c.color=E(c.color))}a.command=p.Tools_StartSkylineAnalysis;return this.int.call(a,b)}stopSkylineAnalysis(a){return this.int.call0(p.Tools_StopSkylineAnalysis,a)}exportSkyline(a,b,c,e){c=c||{};c.skylineColor&&(c.skylineColor=E(c.skylineColor));c.backgroundColor&&(c.backgroundColor=E(c.backgroundColor));if(c.tileLayers){c.tileLayers=F(c.tileLayers);for(let d of c.tileLayer)d.hasOwnProperty("color")&&(d.color=E(d.color))}return this.int.call({command:p.Tools_ExportSkyline,path:a,size:b,skylineColor:c.skylineColor,
+backgroundColor:c.backgroundColor},e)}startViewshedAnalysis(a,b){a=a||{};a.visibleColor&&(a.visibleColor=E(a.visibleColor));a.invisibleColor&&(a.invisibleColor=E(a.invisibleColor));a.command=p.Tools_StartViewshedAnalysis;return this.int.call(a,b)}stopViewshedAnalysis(a){return this.int.call0(p.Tools_StopViewshedAnalysis,a)}startVisiblityAnalysis(a,b){a=a||{};a.visibleColor&&(a.visibleColor=E(a.visibleColor));a.invisibleColor&&(a.invisibleColor=E(a.invisibleColor));a.command=p.Tools_StartVisiblityAnalysis;
+return this.int.call(a,b)}stopVisiblityAnalysis(a){return this.int.call0(p.Tools_StopVisiblityAnalysis,a)}startViewDomeAnalysis(a,b){a=a||{};a.visibleColor&&(a.visibleColor=E(a.visibleColor));a.invisibleColor&&(a.invisibleColor=E(a.invisibleColor));a.command=p.Tools_StartViewDomeAnalysis;return this.int.call(a,b)}stopViewDomeAnalysis(a){return this.int.call0(p.Tools_StopViewDomeAnalysis,a)}startCutFillAnalysis(a,b){a=a||{};a.cutLineColor&&(a.cutLineColor=E(a.cutLineColor));a.fillLineColor&&(a.fillLineColor=
+E(a.fillLineColor));a.cutPointColor&&(a.cutPointColor=E(a.cutPointColor));a.fillPointColor&&(a.fillPointColor=E(a.fillPointColor));a.gridColor&&(a.gridColor=E(a.gridColor));a.command=p.Tools_StartCutFillAnalysis;return this.int.call(a,b)}stopCutFillAnalysis(a){return this.int.call0(p.Tools_StopCutFillAnalysis,a)}startSunshineAnalysis(a,b){var c=/^(0?[0-9]|1[0-9]|[2][0-3]):(0?[0-9]|[1-5][0-9])$/;if(null==a||void 0==a)console.error("\u53c2\u6570\u4e0d\u80fd\u4e3a\u7a7a");else{let e=a.startTime,d=a.endTime;
+if(null==e||""==e||null==d||""==d)console.error("\u65f6\u95f4\u53c2\u6570\u683c\u5f0f\u4e0d\u6b63\u786e");else if(e.match(c)&&d.match(c))if(e.split(":"))if(a.startHour=parseInt(e.split(":")[0]),a.startMinute=parseInt(e.split(":")[1]),d.split(":"))if(a.endHour=parseInt(d.split(":")[0]),a.endMinute=parseInt(d.split(":")[1]),a.startHour>a.endHour)console.error("\u5f00\u59cb\u65f6\u95f4\u4e0d\u80fd\u5927\u4e8e\u7ed3\u675f\u65f6\u95f4");else{if(a.startHour==a.endHour){if(a.startMinute==a.endMinute){console.error("\u5f00\u59cb\u65f6\u95f4\u4e0d\u80fd\u7b49\u4e8e\u7ed3\u675f\u65f6\u95f4");
+return}if(a.startMinute>a.endMinute){console.error("\u5f00\u59cb\u65f6\u95f4\u4e0d\u80fd\u5927\u4e8e\u7ed3\u675f\u65f6\u95f4");return}}S(a.groundElevation)||(c=a.groundElevation,!isNaN(parseFloat(c))&&isFinite(c)&&(a.undersideHeight=a.groundElevation,delete a.groundElevation));a.command=p.Tools_StartSunshineAnalysis;return this.int.call(a,b)}else console.error("\u53c2\u6570endTime\u65f6\u95f4\u683c\u5f0f\u4e0d\u6b63\u786e");else console.error("\u53c2\u6570startTime\u65f6\u95f4\u683c\u5f0f\u4e0d\u6b63\u786e");
+else console.error("\u65f6\u95f4\u53c2\u6570\u683c\u5f0f\u4e0d\u6b63\u786e")}}stopSunshineAnalysis(a){return this.int.call0(p.Tools_StopSunshineAnalysis,a)}startTerrainSlopeAnalysis(a,b){a.command=p.Tools_StartTerrainSlopeAnalysis;return this.int.call(a,b)}stopTerrainSlopeAnalysis(a){return this.int.call0(p.Tools_StopTerrainSlopeAnalysis,a)}startContourLineAnalysis(a,b){a.command=p.Tools_StartContourLineAnalysis;return this.int.call(a,b)}stopContourLineAnalysis(a){return this.int.call0(p.Tools_StopContourLineAnalysis,
+a)}startFloodFill(a,b){a=a||{};a.color&&(a.color=E(a.color));a.command=p.Tools_StartFloodFill;return this.int.call(a,b)}stopFloodFill(a){return this.int.call0(p.Tools_StopFloodFill,a)}replaceTextureByVideo(a,b,c){return this.int.call({command:p.Tools_ReplaceTexture,texturePackage:a,newTexture:b,type:1},c)}replaceTextureByImage(a,b,c){return this.int.call({command:p.Tools_ReplaceTexture,texturePackage:a,newTexture:b,type:2},c)}replaceTextureByUrl(a,b,c){return this.int.call({command:p.Tools_ReplaceTexture,
+texturePackage:a,newTexture:b,type:3},c)}restoreTexture(a,b){return this.int.call({command:p.Tools_RestoreTexture,ids:F(a)},b)}showPanel(a,b,c){this.showAnalysisPanel(a,b,c)}hidePanel(a){this.hideAnalysisPanel(a)}showAnalysisPanel(a,b,c){return this.int.call({command:p.Tools_AnalysisPopupAttributes,type:a,position:b},c)}hideAnalysisPanel(a){return this.int.call({command:p.Tools_AnalysisCloseAttributes},a)}}class Ub{constructor(a){this.int=a}getParams(a){return this.int.call0(p.Weather_GetParams,a)}_setParam(a,
+b){return this.int.call({command:p.Weather_SetParams,data:a},b)}setDateTime(a,b,c,e,d,h,g){return this.int.call({command:p.Weather_SetDate,year:a,month:b,day:c,hour:e,minute:d,daynightLoop:h},g)}getDateTime(a){return this.int.call0(p.Weather_GetDate,a)}simulateTime(a,b,c,e){let d=0,h=0,g=0,q=0;a instanceof Array?(0<a.length&&(d=a[0]),1<a.length&&(h=a[1])):d=parseInt(a);b instanceof Array?(0<b.length&&(g=b[0]),1<b.length&&(q=b[1])):g=parseInt(b);return this.int.call({command:p.Weather_SimulateTime,
+startHour:d,startMinute:h,endHour:g,endMinute:q,duration:c},e)}setCloudThickness(a,b){return this.int.call({command:p.Weather_SetParams,cloudThickness:a},b)}setCloudDensity(a,b){return this.int.call({command:p.Weather_SetParams,cloudDensity:a},b)}setCloudHeight(a,b){return this.int.call({command:p.Weather_SetParams,cloudHeight:a},b)}setRainParam(a,b,c,e){return this.int.call({command:p.Weather_SetParams,rainsnow:0,rainsnowStrength:a,rainsnowSpeed:b,raindropSize:c},e)}setSnowParam(a,b,c,e){return this.int.call({command:p.Weather_SetParams,
+rainsnow:1,rainsnowStrength:a,rainsnowSpeed:b,snowflakeSize:c},e)}disableRainSnow(a){return this.int.call({command:p.Weather_SetParams,rainsnowStrength:0},a)}setFogParam(a,b,c,e,d){return this.int.call({command:p.Weather_SetParams,fogDensity:a,fogGroundDensity:b,fogGroundHeight:c,fogDistance:e},d)}setSunIntensity(a,b){return this.int.call({command:p.Weather_SetParams,sunIntensity:a},b)}setMoonIntensity(a,b){return this.int.call({command:p.Weather_SetParams,moonIntensity:a},b)}setAmbientLightIntensity(a,
+b){return this.int.call({command:p.Weather_SetParams,ambientLightIntensity:a},b)}setTemperature(a,b){return this.int.call({command:p.Weather_SetParams,temperature:a},b)}setShadowIntensity(a,b){return this.int.call({command:p.Weather_SetParams,shadowIntensity:a},b)}setShadowQuality(a,b){return this.int.call({command:p.Weather_SetParams,shadowQuality:a},b)}setShadowDistance(a,b){return this.int.call({command:p.Weather_SetParams,shadowDistance:a},b)}setDarkMode(a,b){return this.int.call({command:p.Weather_SetParams,
+darkMode:!!a},b)}setSunSize(a,b){return this.int.call({command:p.Weather_SetParams,sunSize:a},b)}setMoonSize(a,b){return this.int.call({command:p.Weather_SetParams,moonSize:a},b)}}var ua=null;class ra{constructor(a,b){ua=this;this.options=b||{};(this.player=this.options.player)||H.setLanguage();"function"==typeof ra.__onApiConstructed&&ra.__onApiConstructed(this);this.isConnected=this.isCalledInCEF="object"==typeof ue&&"object"==typeof ue.dtspoi;this.callbackMap=new Map;this.websocket=null;this.callbackIndex=
+0;this.tickMarkerId="___tick_delegate_marker___";!this.player&&a&&(this.url=`ws://${a}`,this.connectWebSocket());this.initInterface();this.apiQueue=new hb(c=>this.sendApi(c))}setHost(a,b){this.url=`ws://${a}:${b}`}connectWebSocket(){if(!this.player){this.log(`Connecting: ${this.url}`);if("undefined"==typeof window)this.websocket=new (require("ws"))(this.url);else{if(!("WebSocket"in window)){console.error("Not Support WebSocket!");return}this.websocket=new WebSocket(this.url)}this.websocket.onopen=
+()=>this.onConnectionOpen();this.websocket.onmessage=a=>this.onConnectionMessage(a.data);this.websocket.onclose=a=>this.onConnectionClose(a);this.websocket.onerror=a=>this.onConnectionError(a)}}setEventCallback(a){this.options.onEvent=a}destroy(){this.isDestroyed=!0;this.player&&this.player.destroy();this.websocket&&(this.websocket.close(),this.websocket=null)}reset(a){return this.call0(p.Reset,a)}saveProject(a){return this.call0(p.SaveProject,a)}registerTick(a,b,c){b=b||{};"__execute__"!=a&&(b.func=
+"tick");this.call({command:p.RegisterJsCommunication,id:this.tickMarkerId,url:a,func:b.func,x:b.x||4,y:b.y||4,width:b.width||400,height:b.height||300,visible:b.visible||!1},c)}removeTick(a){this.call({command:p.UnRegisterJsCommunication,ids:[this.tickMarkerId]},a)}showTickWindow(a,b){this.isCalledInCEF?ue.dtspoi.showtickwindow(a):a?this.registerTick("__show__",{},b):this.registerTick("",{},b)}executeJsInTickPage(a,b){this.registerTick("__execute__",{func:a},b)}getVersion(){return"5.4.0508"}initInterface(){this.camera=
+new Mb(this);this.coord=new Nb(this);this.layers=this.infoTree=new Pb(this);this.ct=this.cameraTour=new jb(this);this.tl=this.tileLayer=new Hb(this);this.tag=new Gb(this);this.marker=new xb(this);this.marker3d=new yb(this);this.ctag=this.customTag=new nb(this);this.rp=this.radiationPoint=new Eb(this);this.cm=this.customMesh=new lb(this);this.wm=this.waterMesh=new Lb(this);this.waterFlowField=new Kb(this);this.wff=this.WaterFlowField;this.line=this.polyline=new Db(this);this.ol=this.odline=new zb(this);
+this.p3d=this.polygon3d=new Cb(this);this.polygon=new Bb(this);this.hm=this.heatmap=new sb(this);this.hm3d=this.heatmap3d=new tb(this);this.beam=new ib(this);this.ha=this.highlightArea=new ub(this);this.co=this.customObject=new mb(this);this.vp=this.videoProjection=new Jb(this);this.panorama=new Ab(this);this.decal=new ob(this);this.dw=this.dynamicWater=new pb(this);this.ff=this.floodFill=new qb(this);this.c3d=this.cesium3DTileset=new kb(this);this.shapeFile=this.shp=this.shapeFileLayer=new Fb(this);
+this.light=new wb(this);this.imagery=this.imageryLayer=new vb(this);this.geoJSON=this.geoJSONLayer=new rb(this);this.vc=this.vehicle=new Ib(this);this.misc=new Qb(this);this.tools=new Tb(this);this.settings=new Rb(this);this.weather=new Ub(this);this.eh=this.editHelper=new Ob(this);this.sp=this.settingsPanel=new Sb(this)}_getCallbackIndex(){return++this.callbackIndex}call0(a,b){return this.call({command:a},b)}call(a,b){if(!this.isConnected)return this.logWithColor("red","Not connected!"),b?void 0:
+Promise.reject("Not connected!");if(void 0==a.command||a.command==p.None)return this.logWithColor("red","command is undefined or None"),b?void 0:Promise.reject("command is undefined or None");a.timestamp=Date.now();a.callbackIndex=this._getCallbackIndex();a.__command=p[a.command]||"Unknown";a.__version=this.getVersion();null===b&&(a.__noResponse=!0);let c=a.command+"_"+a.callbackIndex;b&&"function"==typeof b&&(this.callbackMap[c]=b);if(this.isCalledInCEF&&null===b)return delete a.__noResponse,this.callbackMap[c]=
+null,this.sendApi(a),a;let e=JSON.stringify(a);this.log("");this.logWithColor("RoyalBlue",`Request: ${p[a.command]||"Unknown"}`,!0);this.logWithColor("green","\uff08"+(new Date(a.timestamp)).toLocaleTimeString()+"\uff09");this.logWithColor("gray",`${e}`);if(b||null===b)this.apiQueue.push(a);else return new Promise(d=>{this.callbackMap[c]=d;this.apiQueue.push(a)})}sendApi(a){this.isCalledInCEF?ue.dtspoi.execute(JSON.stringify(a)):this.player?this.player.sendApi(a):this.sendStringByWS(a)}sendStringByWS(a){if(a){a=
+JSON.stringify(a);var b=a.length;if(16777216>=b)this.websocket.send(a);else{var c=Math.ceil(b/16777216),e=[];for(let d=0;d<c;d++)e[d]=(0==d?"__MI_SECTION_START__":d==c-1?"__MI_SECTION_END__":"__MI_SECTION__")+a.substr(16777216*d,d==c-1?b-16777216*d:16777216);for(let d of e)this.websocket.send(d)}}}viewHome(a){switch(a){case 0:this.savedCamera?this.camera.set(this.savedCamera,0):this.initialCameraPosition&&this.camera.set(this.initialCameraPosition,0);break;case 1:this.savedCamera=null;this.viewHome(0);
+break;case 2:this.camera.get(b=>this.savedCamera=b.camera)}}onReady(){if("function"==typeof this.options.onReady)this.options.onReady();this.call({command:p.Misc_GetVersion});if(this.player)this.player.onApiReady()}log(a,b,c){if("function"==typeof this.options.onLog)this.options.onLog(a,b,c)}logWithColor(a,b,c){this.log(b,c,a)}onConnectionOpen(){this.isConnected=!0;this.logWithColor("blue","Connected!")}onConnectionClose(a){this.isConnected=!1;this.logWithColor("red",`Connection closed! code: ${a.code||
+"-"}, reason: ${1006==a.code?H.getString("Disconnect"):a.reason||a.message||"-"}`);this.log("");this.logWithColor("SpringGreen","Reconnecting...");this.isDestroyed||this.player||this.connectWebSocket()}onConnectionError(a){console.error("WebSocket error observed")}onConnectionMessage(a,b){a=a.replace(/~!@~!@~!@/g,'\\"');this.log("");let c=null;try{c=JSON.parse(a)}catch(d){this.isCalledInCEF?(document.writeln(d.message),document.writeln("<hr>"),document.writeln(a)):(console.error(d.message),this.log("Response: [Unknown]"));
+return}if(c.command==p.Misc_GetVersion){this.misc.apiVersionServer=c.version||c.versionType;if("5.4"!=this.misc.apiVersionServer){var e=H.getString("VersionMismatch").format("5.4",this.misc.apiVersionServer);console.warn(e);"undefined"!=typeof window&&alert(e)}if("function"==typeof this.options.onApiVersion)this.options.onApiVersion(this.misc.apiVersionServer)}if(c.command)this.apiQueue.callNext(c.callbackIndex),e=Date.now()-c.timestamp,this.logWithColor("RoyalBlue",`Response: ${p[c.command]||"Unknown"}`,
+!0),this.logWithColor("green",` (${H.getString("TimeConsuming")}${e}ms)`),this.logWithColor("gray",`${H.getString("RequestTime")}${(new Date(c.timestamp)).toLocaleTimeString()}`,!0),this.logWithColor("gray",`  ${H.getString("ResponseTime")}${(new Date(Date.now())).toLocaleTimeString()}`,!0),this.logWithColor("gray",`  ${H.getString("MessageLength")}${a.length}`),a=c.command+"_"+c.callbackIndex,(e=this.callbackMap[a])?(e(c),delete this.callbackMap[a]):null===e&&"function"===typeof tick_next&&tick_next(c,
+b);else if(c.eventtype)if(this.log("Response: Event"),"CompleteInitialization"==c.eventtype)this.log("The initialization is complete, now you can call the interfaces in onReady callback function."),this.initialCameraPosition=c.InitialCamera,c.ResourcesPath&&(this.resourcesPath=c.ResourcesPath,this.log("ResourcesPath:"+this.resourcesPath)),this.onReady();else if("NodeConfiguration"==c.eventtype)this.resourcesPath=c.ResourcesPath,this.log("ResourcesPath:"+this.resourcesPath);else if("MainThreadBusy"==
+c.eventtype)this.apiQueue.onMainThreadBusy(c),this.player&&this.player.onMainThreadBusy(c);else{if("function"==typeof this.options.onEvent)this.options.onEvent(c)}else this.log("Response: [Unknown]");b=JSON.stringify(c,(d,h)=>h instanceof Array?JSON.stringify(h):h,"\t").replace(/"\[/g,"[").replace(/\]"/g,"]").replace(/\\"/g,'"').replace(/""/g,'"');this.logWithColor("gray",b)}quit(){return this.call0(p.Quit)}test(a,b,c){return this.call({command:p.SimulateTest__,type:a,int32Val:b},c)}}const V={WS_Disconnected:0,
+WS_Connecting:1,WS_Connected:2,RTC_Opened:3,Video_LoadedMetaData:4,OnReady:5},da={StartingProcess:0,CheckingBusy:1,ConfirmBusy:2,ProcessStartFailed:3,ProcessStarted:4,LoadingProject:5,ProjectLoaded:6};class Vb{constructor(){"undefined"!=typeof navigator&&(this.isUnix="Mac68K"==navigator.platform||"MacPPC"==navigator.platform||"Macintosh"==navigator.platform||"MacIntel"==navigator.platform||-1!=navigator.platform.indexOf("Linux"),this.isChrome=-1!=navigator.userAgent.indexOf("Chrome"),this.isMobileDevice=
+/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent),this.isIOSDevice=/iPhone|iPad|iPod/i.test(navigator.userAgent),this.isSafari=/Safari/i.test(navigator.userAgent),this.isAndroidDevice=/Android/i.test(navigator.userAgent),this.isInWeixinBrowser)}fullscreen(a){a&&(a.requestFullscreen?a.requestFullscreen():a.mozRequestFullScreen?a.mozRequestFullScreen():a.msRequestFullscreen?a.msRequestFullscreen:a.webkitRequestFullscreen&&a.webkitRequestFullscreen())}exitFullscreen(){document.exitFullscreen?
+document.exitFullscreen():document.msExitFullscreen||(document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitCancelFullScreen&&document.webkitCancelFullScreen())}isFullscreen(){return document.fullscreen||document.mozFullScreen||document.webkitIsFullScreen}isFunction(a){return"function"==typeof a}}var R=new Vb;const sa={abnormal:1006,invalid_message:1008,no_free_instance:1013,out_of_control:4E3,instance_disconnected:4001,instance_not_found:4002,instance_start_failed:4003,webrtc_connection_error:4004,
+one_client_allowed:4005,timeout:4006,iid_required:4007,locked:4008,invalid_project:4009,kicked:4100,syncing_data:4101,instance_killed_by_user:4102,invalid_password:4103,nodeservice_stopped:4105,instance_is_busy:4107,ip_not_authorized:4108,invalid_token:4109};aa.EMPTY_OBJECT=Object.freeze({});class ka{}ka.doParamsCompatibility=a=>{a.apiOptions=a.apiOptions||{};a.events=a.events||{};a.ui=a.ui||{};"undefined"!=typeof a.showMarker&&(a.showStatus=a.showMarker,delete a.showMarker);"undefined"!=typeof a.actionEventHander&&
+(a.onaction=a.actionEventHander,delete a.actionEventHander);"undefined"!=typeof a.useBuiltinCursor&&(a.useBuiltinCursors=a.useBuiltinCursor,delete a.useBuiltinCursor);"undefined"!=typeof a.keyEventReceiver&&(a.keyEventTarget=a.keyEventReceiver,delete a.keyEventReceiver);"undefined"!=typeof a.ui.debugTouchPanel&&(a.ui.debugEventsPanel=a.ui.debugTouchPanel,delete a.ui.debugTouchPanel);var b=(c,e)=>{let d=a[c];d&&(a.events[e]=d,delete a[c])};b("onclose","onConnClose");b("onloaded","onVideoLoaded");b("onvideostatus",
+"onRtcStatsReport");b("onaction","mouseKeyListener");b=(c,e)=>{let d=a.events.mouseKeyListener[c];d&&(a.events.mouseKeyListener[e]=d,delete a.events.mouseKeyListener[c])};a.events.mouseKeyListener&&(b("onmouseenter","onMouseEnter"),b("onmouseleave","onMouseLeave"),b("onmousemove","onMouseMove"),b("onmousedown","onMouseDown"),b("onmouseup","onMouseUp"),b("onkeydown","onKeyDown"),b("onkeyup","onKeyUp"),b("onkeypress","onKeyPress"));b=(c,e)=>{"undefined"!=typeof a[c]&&(a.ui[e]=a[c],delete a[c])};b("showStartupInfo",
+"startupInfo");b("showStatus","statusButton");b("showFullscreenButton","fullscreenButton");b("showHomeButton","homeButton");b("showTaskList","taskListBar")};ka.setDefaultParamValues=a=>{a.keyEventTarget=aa(a.keyEventTarget,"video");a.useBuiltinCursors=aa(a.useBuiltinCursors,!0);a.ui.startupInfo=aa(a.ui.startupInfo,!0);a.ui.statusIndicator=aa(a.ui.statusIndicator,!0);a.ui.statusButton=aa(a.ui.statusButton,!1);a.ui.fullscreenButton=aa(a.ui.fullscreenButton,!1);a.ui.homeButton=aa(a.ui.homeButton,!1);
+a.ui.taskListBar=aa(a.ui.taskListBar,1);a.ui.debugEventsPanel=aa(a.ui.debugEventsPanel,!1);a.offer=1};ka.processParams=a=>{ka.doParamsCompatibility(a);ka.setDefaultParamValues(a)};class Wb{constructor(a){this.options=a;this.checkParamsMap=new Map}resetInteractTimestamp(a){this.timeOfLastInteraction=a}connect(a){window.WebSocket=window.WebSocket||window.MozWebSocket;window.WebSocket?(this.websocket=new WebSocket(a),this.websocket.onopen=()=>{if(this.options.onopen)this.options.onopen();setInterval(()=>
+{this.timeOfLastInteraction&&this.send({type:"ping",time:this.timeOfLastInteraction})},3E3)},this.websocket.onmessage=b=>{if(b=JSON.parse(b.data)){switch(b.type){case "checkParamsResult":this.onCheckParamsResponse(b);return;case "detectResponse":this.send(b);return}if(this.options.onmessage)this.options.onmessage(b)}},this.websocket.onerror=b=>{if(this.options.onerror)this.options.onerror(b)},this.websocket.onclose=b=>{this.websocket=void 0;if(this.options.onclose)this.options.onclose(b)}):alert("Your browser does not support WebSocket")}isOpened(){return this.websocket&&
+1===this.websocket.readyState}send(a){a&&this.isOpened()&&this.websocket.send(JSON.stringify(a))}close(a){console.log(`call SignallingConnection.close: ${a||" "}`);this.isOpened()&&(this.websocket.close(a),this.websocket=null)}sendReady(){this.send({type:"ready"})}sendCandidate(a){a.candidate&&a.candidate.candidate&&this.send({type:"iceCandidate",candidate:a.candidate})}sendOffer(a,b){this.send({type:"offer",sdp:a,hasVideo:b})}updateParams(a){this.send({type:"updateParams",data:a})}checkParams(a){a.timestamp=
+Date.now();return new Promise(b=>{this.checkParamsMap[a.timestamp]=b;this.send({type:"checkParams",data:a});this.timerOfCheckParams=setTimeout(()=>{let c=this.checkParamsMap[a.timestamp];c&&(delete this.checkParamsMap[a.timestamp],c(null))},1E3)})}onCheckParamsResponse(a){let b=this.checkParamsMap[a.timestamp];b&&(clearTimeout(this.timerOfCheckParams),delete this.checkParamsMap[a.timestamp],b(a))}}(function(a){"object"===typeof v&&"undefined"!==typeof module?module.exports=a():"function"===typeof define&&
+define.amd?define([],a):("undefined"!==typeof window?window:"undefined"!==typeof global?global:"undefined"!==typeof self?self:this).adapter=a()})(function(){return function(){function a(b,c,e){function d(q,k){if(!c[q]){if(!b[q]){var f="function"==typeof require&&require;if(!k&&f)return f(q,!0);if(h)return h(q,!0);k=Error("Cannot find module '"+q+"'");throw k.code="MODULE_NOT_FOUND",k;}k=c[q]={exports:{}};b[q][0].call(k.exports,function(l){return d(b[q][1][l]||l)},k,k.exports,a,b,c,e)}return c[q].exports}
+for(var h="function"==typeof require&&require,g=0;g<e.length;g++)d(e[g]);return d}return a}()({1:[function(a,b,c){a=(0,a("./adapter_factory.js").adapterFactory)({window:"undefined"==typeof window?{}:window});b.exports=a},{"./adapter_factory.js":2}],2:[function(a,b,c){function e(l){if(l&&l.__esModule)return l;var t={};if(null!=l)for(var w in l)Object.prototype.hasOwnProperty.call(l,w)&&(t[w]=l[w]);t.default=l;return t}Object.defineProperty(c,"__esModule",{value:!0});c.adapterFactory=function(){var l=
+(0<arguments.length&&void 0!==arguments[0]?arguments[0]:{}).window,t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{shimChrome:!0,shimFirefox:!0,shimEdge:!0,shimSafari:!0},w=d.log,r=d.detectBrowser(l),y={browserDetails:r,commonShim:f,extractVersion:d.extractVersion,disableLog:d.disableLog,disableWarnings:d.disableWarnings};switch(r.browser){case "chrome":if(!h||!h.shimPeerConnection||!t.shimChrome){w("Chrome shim is not included in this adapter release.");break}if(null===r.version){w("Chrome shim can not determine version, not shimming.");
+break}w("adapter.js shimming chrome.");y.browserShim=h;h.shimGetUserMedia(l);h.shimMediaStream(l);h.shimPeerConnection(l);h.shimOnTrack(l);h.shimAddTrackRemoveTrack(l);h.shimGetSendersWithDtmf(l);h.shimGetStats(l);h.shimSenderReceiverGetStats(l);h.fixNegotiationNeeded(l);f.shimRTCIceCandidate(l);f.shimConnectionState(l);f.shimMaxMessageSize(l);f.shimSendThrowTypeError(l);f.removeAllowExtmapMixed(l);break;case "firefox":if(!q||!q.shimPeerConnection||!t.shimFirefox){w("Firefox shim is not included in this adapter release.");
+break}w("adapter.js shimming firefox.");y.browserShim=q;q.shimGetUserMedia(l);q.shimPeerConnection(l);q.shimOnTrack(l);q.shimRemoveStream(l);q.shimSenderGetStats(l);q.shimReceiverGetStats(l);q.shimRTCDataChannel(l);q.shimAddTransceiver(l);q.shimGetParameters(l);q.shimCreateOffer(l);q.shimCreateAnswer(l);f.shimRTCIceCandidate(l);f.shimConnectionState(l);f.shimMaxMessageSize(l);f.shimSendThrowTypeError(l);break;case "edge":if(!g||!g.shimPeerConnection||!t.shimEdge){w("MS edge shim is not included in this adapter release.");
+break}w("adapter.js shimming edge.");y.browserShim=g;g.shimGetUserMedia(l);g.shimGetDisplayMedia(l);g.shimPeerConnection(l);g.shimReplaceTrack(l);f.shimMaxMessageSize(l);f.shimSendThrowTypeError(l);break;case "safari":if(!k||!t.shimSafari){w("Safari shim is not included in this adapter release.");break}w("adapter.js shimming safari.");y.browserShim=k;k.shimRTCIceServerUrls(l);k.shimCreateOfferLegacy(l);k.shimCallbacksAPI(l);k.shimLocalStreamsAPI(l);k.shimRemoteStreamsAPI(l);k.shimTrackEventTransceiver(l);
+k.shimGetUserMedia(l);k.shimAudioContext(l);f.shimRTCIceCandidate(l);f.shimMaxMessageSize(l);f.shimSendThrowTypeError(l);f.removeAllowExtmapMixed(l);break;default:w("Unsupported browser!")}return y};b=a("./utils");var d=e(b);b=a("./chrome/chrome_shim");var h=e(b);b=a("./edge/edge_shim");var g=e(b);b=a("./firefox/firefox_shim");var q=e(b);b=a("./safari/safari_shim");var k=e(b);a=a("./common_shim");var f=e(a)},{"./chrome/chrome_shim":3,"./common_shim":6,"./edge/edge_shim":7,"./firefox/firefox_shim":11,
+"./safari/safari_shim":14,"./utils":15}],3:[function(a,b,c){function e(f,l,t){l in f?Object.defineProperty(f,l,{value:t,enumerable:!0,configurable:!0,writable:!0}):f[l]=t;return f}function d(f){f.RTCPeerConnection.prototype.getLocalStreams=function(){var y=this;this._shimmedLocalStreams=this._shimmedLocalStreams||{};return Object.keys(this._shimmedLocalStreams).map(function(u){return y._shimmedLocalStreams[u][0]})};var l=f.RTCPeerConnection.prototype.addTrack;f.RTCPeerConnection.prototype.addTrack=
+function(y,u){if(!u)return l.apply(this,arguments);this._shimmedLocalStreams=this._shimmedLocalStreams||{};var A=l.apply(this,arguments);this._shimmedLocalStreams[u.id]?-1===this._shimmedLocalStreams[u.id].indexOf(A)&&this._shimmedLocalStreams[u.id].push(A):this._shimmedLocalStreams[u.id]=[u,A];return A};var t=f.RTCPeerConnection.prototype.addStream;f.RTCPeerConnection.prototype.addStream=function(y){var u=this;this._shimmedLocalStreams=this._shimmedLocalStreams||{};y.getTracks().forEach(function(n){if(u.getSenders().find(function(x){return x.track===
+n}))throw new DOMException("Track already exists.","InvalidAccessError");});var A=this.getSenders();t.apply(this,arguments);var m=this.getSenders().filter(function(n){return-1===A.indexOf(n)});this._shimmedLocalStreams[y.id]=[y].concat(m)};var w=f.RTCPeerConnection.prototype.removeStream;f.RTCPeerConnection.prototype.removeStream=function(y){this._shimmedLocalStreams=this._shimmedLocalStreams||{};delete this._shimmedLocalStreams[y.id];return w.apply(this,arguments)};var r=f.RTCPeerConnection.prototype.removeTrack;
+f.RTCPeerConnection.prototype.removeTrack=function(y){var u=this;this._shimmedLocalStreams=this._shimmedLocalStreams||{};y&&Object.keys(this._shimmedLocalStreams).forEach(function(A){var m=u._shimmedLocalStreams[A].indexOf(y);-1!==m&&u._shimmedLocalStreams[A].splice(m,1);1===u._shimmedLocalStreams[A].length&&delete u._shimmedLocalStreams[A]});return r.apply(this,arguments)}}Object.defineProperty(c,"__esModule",{value:!0});c.shimGetDisplayMedia=c.shimGetUserMedia=void 0;var h="function"===typeof Symbol&&
+"symbol"===typeof Symbol.iterator?function(f){return typeof f}:function(f){return f&&"function"===typeof Symbol&&f.constructor===Symbol&&f!==Symbol.prototype?"symbol":typeof f},g=a("./getusermedia");Object.defineProperty(c,"shimGetUserMedia",{enumerable:!0,get:function(){return g.shimGetUserMedia}});var q=a("./getdisplaymedia");Object.defineProperty(c,"shimGetDisplayMedia",{enumerable:!0,get:function(){return q.shimGetDisplayMedia}});c.shimMediaStream=function(f){f.MediaStream=f.MediaStream||f.webkitMediaStream};
+c.shimOnTrack=function(f){if("object"!==("undefined"===typeof f?"undefined":h(f))||!f.RTCPeerConnection||"ontrack"in f.RTCPeerConnection.prototype)k.wrapPeerConnectionEvent(f,"track",function(t){t.transceiver||Object.defineProperty(t,"transceiver",{value:{receiver:t.receiver}});return t});else{Object.defineProperty(f.RTCPeerConnection.prototype,"ontrack",{get:function(){return this._ontrack},set:function(t){this._ontrack&&this.removeEventListener("track",this._ontrack);this.addEventListener("track",
+this._ontrack=t)},enumerable:!0,configurable:!0});var l=f.RTCPeerConnection.prototype.setRemoteDescription;f.RTCPeerConnection.prototype.setRemoteDescription=function(){var t=this;this._ontrackpoly||(this._ontrackpoly=function(w){w.stream.addEventListener("addtrack",function(r){var y=void 0;y=f.RTCPeerConnection.prototype.getReceivers?t.getReceivers().find(function(A){return A.track&&A.track.id===r.track.id}):{track:r.track};var u=new Event("track");u.track=r.track;u.receiver=y;u.transceiver={receiver:y};
+u.streams=[w.stream];t.dispatchEvent(u)});w.stream.getTracks().forEach(function(r){var y=void 0;y=f.RTCPeerConnection.prototype.getReceivers?t.getReceivers().find(function(A){return A.track&&A.track.id===r.id}):{track:r};var u=new Event("track");u.track=r;u.receiver=y;u.transceiver={receiver:y};u.streams=[w.stream];t.dispatchEvent(u)})},this.addEventListener("addstream",this._ontrackpoly));return l.apply(this,arguments)}}};c.shimGetSendersWithDtmf=function(f){if("object"===("undefined"===typeof f?
+"undefined":h(f))&&f.RTCPeerConnection&&!("getSenders"in f.RTCPeerConnection.prototype)&&"createDTMFSender"in f.RTCPeerConnection.prototype){var l=function(A,m){return{track:m,get dtmf(){void 0===this._dtmf&&(this._dtmf="audio"===m.kind?A.createDTMFSender(m):null);return this._dtmf},_pc:A}};if(!f.RTCPeerConnection.prototype.getSenders){f.RTCPeerConnection.prototype.getSenders=function(){this._senders=this._senders||[];return this._senders.slice()};var t=f.RTCPeerConnection.prototype.addTrack;f.RTCPeerConnection.prototype.addTrack=
+function(A,m){var n=t.apply(this,arguments);n||(n=l(this,A),this._senders.push(n));return n};var w=f.RTCPeerConnection.prototype.removeTrack;f.RTCPeerConnection.prototype.removeTrack=function(A){w.apply(this,arguments);var m=this._senders.indexOf(A);-1!==m&&this._senders.splice(m,1)}}var r=f.RTCPeerConnection.prototype.addStream;f.RTCPeerConnection.prototype.addStream=function(A){var m=this;this._senders=this._senders||[];r.apply(this,[A]);A.getTracks().forEach(function(n){m._senders.push(l(m,n))})};
+var y=f.RTCPeerConnection.prototype.removeStream;f.RTCPeerConnection.prototype.removeStream=function(A){var m=this;this._senders=this._senders||[];y.apply(this,[A]);A.getTracks().forEach(function(n){var x=m._senders.find(function(z){return z.track===n});x&&m._senders.splice(m._senders.indexOf(x),1)})}}else if("object"===("undefined"===typeof f?"undefined":h(f))&&f.RTCPeerConnection&&"getSenders"in f.RTCPeerConnection.prototype&&"createDTMFSender"in f.RTCPeerConnection.prototype&&f.RTCRtpSender&&!("dtmf"in
+f.RTCRtpSender.prototype)){var u=f.RTCPeerConnection.prototype.getSenders;f.RTCPeerConnection.prototype.getSenders=function(){var A=this,m=u.apply(this,[]);m.forEach(function(n){return n._pc=A});return m};Object.defineProperty(f.RTCRtpSender.prototype,"dtmf",{get:function(){void 0===this._dtmf&&(this._dtmf="audio"===this.track.kind?this._pc.createDTMFSender(this.track):null);return this._dtmf}})}};c.shimGetStats=function(f){if(f.RTCPeerConnection){var l=f.RTCPeerConnection.prototype.getStats;f.RTCPeerConnection.prototype.getStats=
+function(){var t=this,w=Array.prototype.slice.call(arguments),r=w[0],y=w[1];w=w[2];if(0<arguments.length&&"function"===typeof r)return l.apply(this,arguments);if(0===l.length&&(0===arguments.length||"function"!==typeof r))return l.apply(this,[]);var u=function(m){var n={};m.result().forEach(function(x){var z={id:x.id,timestamp:x.timestamp,type:{localcandidate:"local-candidate",remotecandidate:"remote-candidate"}[x.type]||x.type};x.names().forEach(function(B){z[B]=x.stat(B)});n[z.id]=z});return n},
+A=function(m){return new Map(Object.keys(m).map(function(n){return[n,m[n]]}))};return 2<=arguments.length?l.apply(this,[function(m){y(A(u(m)))},r]):(new Promise(function(m,n){l.apply(t,[function(x){m(A(u(x)))},n])})).then(y,w)}}};c.shimSenderReceiverGetStats=function(f){if("object"===("undefined"===typeof f?"undefined":h(f))&&f.RTCPeerConnection&&f.RTCRtpSender&&f.RTCRtpReceiver){if(!("getStats"in f.RTCRtpSender.prototype)){var l=f.RTCPeerConnection.prototype.getSenders;l&&(f.RTCPeerConnection.prototype.getSenders=
+function(){var y=this,u=l.apply(this,[]);u.forEach(function(A){return A._pc=y});return u});var t=f.RTCPeerConnection.prototype.addTrack;t&&(f.RTCPeerConnection.prototype.addTrack=function(){var y=t.apply(this,arguments);y._pc=this;return y});f.RTCRtpSender.prototype.getStats=function(){var y=this;return this._pc.getStats().then(function(u){return k.filterStats(u,y.track,!0)})}}if(!("getStats"in f.RTCRtpReceiver.prototype)){var w=f.RTCPeerConnection.prototype.getReceivers;w&&(f.RTCPeerConnection.prototype.getReceivers=
+function(){var y=this,u=w.apply(this,[]);u.forEach(function(A){return A._pc=y});return u});k.wrapPeerConnectionEvent(f,"track",function(y){y.receiver._pc=y.srcElement;return y});f.RTCRtpReceiver.prototype.getStats=function(){var y=this;return this._pc.getStats().then(function(u){return k.filterStats(u,y.track,!1)})}}if("getStats"in f.RTCRtpSender.prototype&&"getStats"in f.RTCRtpReceiver.prototype){var r=f.RTCPeerConnection.prototype.getStats;f.RTCPeerConnection.prototype.getStats=function(){if(0<
+arguments.length&&arguments[0]instanceof f.MediaStreamTrack){var y=arguments[0],u=void 0,A=void 0,m=void 0;this.getSenders().forEach(function(n){n.track===y&&(u?m=!0:u=n)});this.getReceivers().forEach(function(n){n.track===y&&(A?m=!0:A=n);return n.track===y});return m||u&&A?Promise.reject(new DOMException("There are more than one sender or receiver for the track.","InvalidAccessError")):u?u.getStats():A?A.getStats():Promise.reject(new DOMException("There is no sender or receiver for the track.","InvalidAccessError"))}return r.apply(this,
+arguments)}}}};c.shimAddTrackRemoveTrackWithNative=d;c.shimAddTrackRemoveTrack=function(f){function l(n,x){var z=x.sdp;Object.keys(n._reverseStreams||[]).forEach(function(B){B=n._reverseStreams[B];z=z.replace(new RegExp(n._streams[B.id].id,"g"),B.id)});return new RTCSessionDescription({type:x.type,sdp:z})}function t(n,x){var z=x.sdp;Object.keys(n._reverseStreams||[]).forEach(function(B){B=n._reverseStreams[B];z=z.replace(new RegExp(B.id,"g"),n._streams[B.id].id)});return new RTCSessionDescription({type:x.type,
+sdp:z})}if(f.RTCPeerConnection){var w=k.detectBrowser(f);if(f.RTCPeerConnection.prototype.addTrack&&65<=w.version)return d(f);var r=f.RTCPeerConnection.prototype.getLocalStreams;f.RTCPeerConnection.prototype.getLocalStreams=function(){var n=this,x=r.apply(this);this._reverseStreams=this._reverseStreams||{};return x.map(function(z){return n._reverseStreams[z.id]})};var y=f.RTCPeerConnection.prototype.addStream;f.RTCPeerConnection.prototype.addStream=function(n){var x=this;this._streams=this._streams||
+{};this._reverseStreams=this._reverseStreams||{};n.getTracks().forEach(function(B){if(x.getSenders().find(function(C){return C.track===B}))throw new DOMException("Track already exists.","InvalidAccessError");});if(!this._reverseStreams[n.id]){var z=new f.MediaStream(n.getTracks());this._streams[n.id]=z;this._reverseStreams[z.id]=n;n=z}y.apply(this,[n])};var u=f.RTCPeerConnection.prototype.removeStream;f.RTCPeerConnection.prototype.removeStream=function(n){this._streams=this._streams||{};this._reverseStreams=
+this._reverseStreams||{};u.apply(this,[this._streams[n.id]||n]);delete this._reverseStreams[this._streams[n.id]?this._streams[n.id].id:n.id];delete this._streams[n.id]};f.RTCPeerConnection.prototype.addTrack=function(n,x){var z=this;if("closed"===this.signalingState)throw new DOMException("The RTCPeerConnection's signalingState is 'closed'.","InvalidStateError");var B=[].slice.call(arguments,1);if(1!==B.length||!B[0].getTracks().find(function(C){return C===n}))throw new DOMException("The adapter.js addTrack polyfill only supports a single  stream which is associated with the specified track.",
+"NotSupportedError");if(this.getSenders().find(function(C){return C.track===n}))throw new DOMException("Track already exists.","InvalidAccessError");this._streams=this._streams||{};this._reverseStreams=this._reverseStreams||{};(B=this._streams[x.id])?(B.addTrack(n),Promise.resolve().then(function(){z.dispatchEvent(new Event("negotiationneeded"))})):(B=new f.MediaStream([n]),this._streams[x.id]=B,this._reverseStreams[B.id]=x,this.addStream(B));return this.getSenders().find(function(C){return C.track===
+n})};["createOffer","createAnswer"].forEach(function(n){var x=f.RTCPeerConnection.prototype[n],z=e({},n,function(){var B=this,C=arguments;return arguments.length&&"function"===typeof arguments[0]?x.apply(this,[function(G){G=l(B,G);C[0].apply(null,[G])},function(G){C[1]&&C[1].apply(null,G)},arguments[2]]):x.apply(this,arguments).then(function(G){return l(B,G)})});f.RTCPeerConnection.prototype[n]=z[n]});var A=f.RTCPeerConnection.prototype.setLocalDescription;f.RTCPeerConnection.prototype.setLocalDescription=
+function(){if(!arguments.length||!arguments[0].type)return A.apply(this,arguments);arguments[0]=t(this,arguments[0]);return A.apply(this,arguments)};var m=Object.getOwnPropertyDescriptor(f.RTCPeerConnection.prototype,"localDescription");Object.defineProperty(f.RTCPeerConnection.prototype,"localDescription",{get:function(){var n=m.get.apply(this);return""===n.type?n:l(this,n)}});f.RTCPeerConnection.prototype.removeTrack=function(n){var x=this;if("closed"===this.signalingState)throw new DOMException("The RTCPeerConnection's signalingState is 'closed'.",
+"InvalidStateError");if(!n._pc)throw new DOMException("Argument 1 of RTCPeerConnection.removeTrack does not implement interface RTCRtpSender.","TypeError");if(n._pc!==this)throw new DOMException("Sender was not created by this connection.","InvalidAccessError");this._streams=this._streams||{};var z=void 0;Object.keys(this._streams).forEach(function(B){x._streams[B].getTracks().find(function(C){return n.track===C})&&(z=x._streams[B])});z&&(1===z.getTracks().length?this.removeStream(this._reverseStreams[z.id]):
+z.removeTrack(n.track),this.dispatchEvent(new Event("negotiationneeded")))}}};c.shimPeerConnection=function(f){var l=k.detectBrowser(f);!f.RTCPeerConnection&&f.webkitRTCPeerConnection&&(f.RTCPeerConnection=f.webkitRTCPeerConnection);if(f.RTCPeerConnection){var t=0===f.RTCPeerConnection.prototype.addIceCandidate.length;53>l.version&&["setLocalDescription","setRemoteDescription","addIceCandidate"].forEach(function(r){var y=f.RTCPeerConnection.prototype[r],u=e({},r,function(){arguments[0]=new ("addIceCandidate"===
+r?f.RTCIceCandidate:f.RTCSessionDescription)(arguments[0]);return y.apply(this,arguments)});f.RTCPeerConnection.prototype[r]=u[r]});var w=f.RTCPeerConnection.prototype.addIceCandidate;f.RTCPeerConnection.prototype.addIceCandidate=function(){return t||arguments[0]?78>l.version&&arguments[0]&&""===arguments[0].candidate?Promise.resolve():w.apply(this,arguments):(arguments[1]&&arguments[1].apply(null),Promise.resolve())}}};c.fixNegotiationNeeded=function(f){var l=k.detectBrowser(f);k.wrapPeerConnectionEvent(f,
+"negotiationneeded",function(t){var w=t.target;if(!(72>l.version||w.getConfiguration&&"plan-b"===w.getConfiguration().sdpSemantics)||"stable"===w.signalingState)return t})};var k=function(f){if(f&&f.__esModule)return f;var l={};if(null!=f)for(var t in f)Object.prototype.hasOwnProperty.call(f,t)&&(l[t]=f[t]);l.default=f;return l}(a("../utils.js"))},{"../utils.js":15,"./getdisplaymedia":4,"./getusermedia":5}],4:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});c.shimGetDisplayMedia=
+function(e,d){e.navigator.mediaDevices&&"getDisplayMedia"in e.navigator.mediaDevices||!e.navigator.mediaDevices||("function"!==typeof d?console.error("shimGetDisplayMedia: getSourceId argument is not a function"):e.navigator.mediaDevices.getDisplayMedia=function(h){return d(h).then(function(g){var q=h.video&&h.video.width,k=h.video&&h.video.height;h.video={mandatory:{chromeMediaSource:"desktop",chromeMediaSourceId:g,maxFrameRate:h.video&&h.video.frameRate||3}};q&&(h.video.mandatory.maxWidth=q);k&&
+(h.video.mandatory.maxHeight=k);return e.navigator.mediaDevices.getUserMedia(h)})})}},{}],5:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});var e="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(g){return typeof g}:function(g){return g&&"function"===typeof Symbol&&g.constructor===Symbol&&g!==Symbol.prototype?"symbol":typeof g};c.shimGetUserMedia=function(g){var q=g&&g.navigator;if(q.mediaDevices){var k=d.detectBrowser(g),f=function(r){if("object"!==("undefined"===
+typeof r?"undefined":e(r))||r.mandatory||r.optional)return r;var y={};Object.keys(r).forEach(function(u){if("require"!==u&&"advanced"!==u&&"mediaSource"!==u){var A="object"===e(r[u])?r[u]:{ideal:r[u]};void 0!==A.exact&&"number"===typeof A.exact&&(A.min=A.max=A.exact);var m=function(x,z){return x?x+z.charAt(0).toUpperCase()+z.slice(1):"deviceId"===z?"sourceId":z};if(void 0!==A.ideal){y.optional=y.optional||[];var n={};"number"===typeof A.ideal?(n[m("min",u)]=A.ideal,y.optional.push(n),n={},n[m("max",
+u)]=A.ideal):n[m("",u)]=A.ideal;y.optional.push(n)}void 0!==A.exact&&"number"!==typeof A.exact?(y.mandatory=y.mandatory||{},y.mandatory[m("",u)]=A.exact):["min","max"].forEach(function(x){void 0!==A[x]&&(y.mandatory=y.mandatory||{},y.mandatory[m(x,u)]=A[x])})}});r.advanced&&(y.optional=(y.optional||[]).concat(r.advanced));return y},l=function(r,y){if(61<=k.version)return y(r);if((r=JSON.parse(JSON.stringify(r)))&&"object"===e(r.audio)){var u=function(n,x,z){x in n&&!(z in n)&&(n[z]=n[x],delete n[x])};
+r=JSON.parse(JSON.stringify(r));u(r.audio,"autoGainControl","googAutoGainControl");u(r.audio,"noiseSuppression","googNoiseSuppression");r.audio=f(r.audio)}if(r&&"object"===e(r.video)){var A=r.video.facingMode;A=A&&("object"===("undefined"===typeof A?"undefined":e(A))?A:{ideal:A});u=66>k.version;if(!(!A||"user"!==A.exact&&"environment"!==A.exact&&"user"!==A.ideal&&"environment"!==A.ideal||q.mediaDevices.getSupportedConstraints&&q.mediaDevices.getSupportedConstraints().facingMode&&!u)){delete r.video.facingMode;
+var m=void 0;if("environment"===A.exact||"environment"===A.ideal)m=["back","rear"];else if("user"===A.exact||"user"===A.ideal)m=["front"];if(m)return q.mediaDevices.enumerateDevices().then(function(n){n=n.filter(function(z){return"videoinput"===z.kind});var x=n.find(function(z){return m.some(function(B){return z.label.toLowerCase().includes(B)})});!x&&n.length&&m.includes("back")&&(x=n[n.length-1]);x&&(r.video.deviceId=A.exact?{exact:x.deviceId}:{ideal:x.deviceId});r.video=f(r.video);h("chrome: "+
+JSON.stringify(r));return y(r)})}r.video=f(r.video)}h("chrome: "+JSON.stringify(r));return y(r)},t=function(r){return 64<=k.version?r:{name:{PermissionDeniedError:"NotAllowedError",PermissionDismissedError:"NotAllowedError",InvalidStateError:"NotAllowedError",DevicesNotFoundError:"NotFoundError",ConstraintNotSatisfiedError:"OverconstrainedError",TrackStartError:"NotReadableError",MediaDeviceFailedDueToShutdown:"NotAllowedError",MediaDeviceKillSwitchOn:"NotAllowedError",TabCaptureError:"AbortError",
+ScreenCaptureError:"AbortError",DeviceCaptureError:"AbortError"}[r.name]||r.name,message:r.message,constraint:r.constraint||r.constraintName,toString:function(){return this.name+(this.message&&": ")+this.message}}};q.getUserMedia=function(r,y,u){l(r,function(A){q.webkitGetUserMedia(A,y,function(m){u&&u(t(m))})})}.bind(q);if(q.mediaDevices.getUserMedia){var w=q.mediaDevices.getUserMedia.bind(q.mediaDevices);q.mediaDevices.getUserMedia=function(r){return l(r,function(y){return w(y).then(function(u){if(y.audio&&
+!u.getAudioTracks().length||y.video&&!u.getVideoTracks().length)throw u.getTracks().forEach(function(A){A.stop()}),new DOMException("","NotFoundError");return u},function(u){return Promise.reject(t(u))})})}}}};var d=function(g){if(g&&g.__esModule)return g;var q={};if(null!=g)for(var k in g)Object.prototype.hasOwnProperty.call(g,k)&&(q[k]=g[k]);q.default=g;return q}(a("../utils.js")),h=d.log},{"../utils.js":15}],6:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});var e="function"===
+typeof Symbol&&"symbol"===typeof Symbol.iterator?function(g){return typeof g}:function(g){return g&&"function"===typeof Symbol&&g.constructor===Symbol&&g!==Symbol.prototype?"symbol":typeof g};c.shimRTCIceCandidate=function(g){if(g.RTCIceCandidate&&!(g.RTCIceCandidate&&"foundation"in g.RTCIceCandidate.prototype)){var q=g.RTCIceCandidate;g.RTCIceCandidate=function(k){"object"===("undefined"===typeof k?"undefined":e(k))&&k.candidate&&0===k.candidate.indexOf("a=")&&(k=JSON.parse(JSON.stringify(k)),k.candidate=
+k.candidate.substr(2));if(k.candidate&&k.candidate.length){var f=new q(k);k=d.default.parseCandidate(k.candidate);var l=Object.assign(f,k);l.toJSON=function(){return{candidate:l.candidate,sdpMid:l.sdpMid,sdpMLineIndex:l.sdpMLineIndex,usernameFragment:l.usernameFragment}};return l}return new q(k)};g.RTCIceCandidate.prototype=q.prototype;h.wrapPeerConnectionEvent(g,"icecandidate",function(k){k.candidate&&Object.defineProperty(k,"candidate",{value:new g.RTCIceCandidate(k.candidate),writable:"false"});
+return k})}};c.shimMaxMessageSize=function(g){if(g.RTCPeerConnection){var q=h.detectBrowser(g);"sctp"in g.RTCPeerConnection.prototype||Object.defineProperty(g.RTCPeerConnection.prototype,"sctp",{get:function(){return"undefined"===typeof this._sctp?null:this._sctp}});var k=function(r){if(!r||!r.sdp)return!1;r=d.default.splitSections(r.sdp);r.shift();return r.some(function(y){return(y=d.default.parseMLine(y))&&"application"===y.kind&&-1!==y.protocol.indexOf("SCTP")})},f=function(r){r=r.sdp.match(/mozilla...THIS_IS_SDPARTA-(\d+)/);
+if(null===r||2>r.length)return-1;r=parseInt(r[1],10);return r!==r?-1:r},l=function(r){var y=65536;"firefox"===q.browser&&(y=57>q.version?-1===r?16384:2147483637:60>q.version?57===q.version?65535:65536:2147483637);return y},t=function(r,y){var u=65536;"firefox"===q.browser&&57===q.version&&(u=65535);r=d.default.matchPrefix(r.sdp,"a=max-message-size:");0<r.length?u=parseInt(r[0].substr(19),10):"firefox"===q.browser&&-1!==y&&(u=2147483637);return u},w=g.RTCPeerConnection.prototype.setRemoteDescription;
+g.RTCPeerConnection.prototype.setRemoteDescription=function(){this._sctp=null;"chrome"===q.browser&&76<=q.version&&"plan-b"===this.getConfiguration().sdpSemantics&&Object.defineProperty(this,"sctp",{get:function(){return"undefined"===typeof this._sctp?null:this._sctp},enumerable:!0,configurable:!0});if(k(arguments[0])){var r=f(arguments[0]),y=l(r);r=t(arguments[0],r);var u=void 0;u=0===y&&0===r?Number.POSITIVE_INFINITY:0===y||0===r?Math.max(y,r):Math.min(y,r);y={};Object.defineProperty(y,"maxMessageSize",
+{get:function(){return u}});this._sctp=y}return w.apply(this,arguments)}}};c.shimSendThrowTypeError=function(g){function q(f,l){var t=f.send;f.send=function(){var w=arguments[0];w=w.length||w.size||w.byteLength;if("open"===f.readyState&&l.sctp&&w>l.sctp.maxMessageSize)throw new TypeError("Message too large (can send a maximum of "+l.sctp.maxMessageSize+" bytes)");return t.apply(f,arguments)}}if(g.RTCPeerConnection&&"createDataChannel"in g.RTCPeerConnection.prototype){var k=g.RTCPeerConnection.prototype.createDataChannel;
+g.RTCPeerConnection.prototype.createDataChannel=function(){var f=k.apply(this,arguments);q(f,this);return f};h.wrapPeerConnectionEvent(g,"datachannel",function(f){q(f.channel,f.target);return f})}};c.shimConnectionState=function(g){if(g.RTCPeerConnection&&!("connectionState"in g.RTCPeerConnection.prototype)){var q=g.RTCPeerConnection.prototype;Object.defineProperty(q,"connectionState",{get:function(){return{completed:"connected",checking:"connecting"}[this.iceConnectionState]||this.iceConnectionState},
+enumerable:!0,configurable:!0});Object.defineProperty(q,"onconnectionstatechange",{get:function(){return this._onconnectionstatechange||null},set:function(k){this._onconnectionstatechange&&(this.removeEventListener("connectionstatechange",this._onconnectionstatechange),delete this._onconnectionstatechange);k&&this.addEventListener("connectionstatechange",this._onconnectionstatechange=k)},enumerable:!0,configurable:!0});["setLocalDescription","setRemoteDescription"].forEach(function(k){var f=q[k];
+q[k]=function(){this._connectionstatechangepoly||(this._connectionstatechangepoly=function(l){var t=l.target;if(t._lastConnectionState!==t.connectionState){t._lastConnectionState=t.connectionState;var w=new Event("connectionstatechange",l);t.dispatchEvent(w)}return l},this.addEventListener("iceconnectionstatechange",this._connectionstatechangepoly));return f.apply(this,arguments)}})}};c.removeAllowExtmapMixed=function(g){if(g.RTCPeerConnection){var q=h.detectBrowser(g);if(!("chrome"===q.browser&&
+71<=q.version||"safari"===q.browser&&605<=q.version)){var k=g.RTCPeerConnection.prototype.setRemoteDescription;g.RTCPeerConnection.prototype.setRemoteDescription=function(f){f&&f.sdp&&-1!==f.sdp.indexOf("\na=extmap-allow-mixed")&&(f.sdp=f.sdp.split("\n").filter(function(l){return"a=extmap-allow-mixed"!==l.trim()}).join("\n"));return k.apply(this,arguments)}}}};var d=(b=a("sdp"))&&b.__esModule?b:{default:b},h=function(g){if(g&&g.__esModule)return g;var q={};if(null!=g)for(var k in g)Object.prototype.hasOwnProperty.call(g,
+k)&&(q[k]=g[k]);q.default=g;return q}(a("./utils"))},{"./utils":15,sdp:17}],7:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});c.shimGetDisplayMedia=c.shimGetUserMedia=void 0;var e=a("./getusermedia");Object.defineProperty(c,"shimGetUserMedia",{enumerable:!0,get:function(){return e.shimGetUserMedia}});var d=a("./getdisplaymedia");Object.defineProperty(c,"shimGetDisplayMedia",{enumerable:!0,get:function(){return d.shimGetDisplayMedia}});c.shimPeerConnection=function(k){var f=h.detectBrowser(k);
+if(k.RTCIceGatherer&&(k.RTCIceCandidate||(k.RTCIceCandidate=function(w){return w}),k.RTCSessionDescription||(k.RTCSessionDescription=function(w){return w}),15025>f.version)){var l=Object.getOwnPropertyDescriptor(k.MediaStreamTrack.prototype,"enabled");Object.defineProperty(k.MediaStreamTrack.prototype,"enabled",{set:function(w){l.set.call(this,w);var r=new Event("enabled");r.enabled=w;this.dispatchEvent(r)}})}!k.RTCRtpSender||"dtmf"in k.RTCRtpSender.prototype||Object.defineProperty(k.RTCRtpSender.prototype,
+"dtmf",{get:function(){void 0===this._dtmf&&("audio"===this.track.kind?this._dtmf=new k.RTCDtmfSender(this):"video"===this.track.kind&&(this._dtmf=null));return this._dtmf}});k.RTCDtmfSender&&!k.RTCDTMFSender&&(k.RTCDTMFSender=k.RTCDtmfSender);var t=(0,q.default)(k,f.version);k.RTCPeerConnection=function(w){w&&w.iceServers&&(w.iceServers=(0,g.filterIceServers)(w.iceServers,f.version),h.log("ICE servers after filtering:",w.iceServers));return new t(w)};k.RTCPeerConnection.prototype=t.prototype};c.shimReplaceTrack=
+function(k){!k.RTCRtpSender||"replaceTrack"in k.RTCRtpSender.prototype||(k.RTCRtpSender.prototype.replaceTrack=k.RTCRtpSender.prototype.setTrack)};var h=function(k){if(k&&k.__esModule)return k;var f={};if(null!=k)for(var l in k)Object.prototype.hasOwnProperty.call(k,l)&&(f[l]=k[l]);f.default=k;return f}(a("../utils")),g=a("./filtericeservers"),q=(a=a("rtcpeerconnection-shim"))&&a.__esModule?a:{default:a}},{"../utils":15,"./filtericeservers":8,"./getdisplaymedia":9,"./getusermedia":10,"rtcpeerconnection-shim":16}],
+8:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});c.filterIceServers=function(d,h){var g=!1;d=JSON.parse(JSON.stringify(d));return d.filter(function(q){if(q&&(q.urls||q.url)){var k=q.urls||q.url;q.url&&!q.urls&&e.deprecated("RTCIceServer.url","RTCIceServer.urls");var f="string"===typeof k;f&&(k=[k]);k=k.filter(function(l){return 0===l.indexOf("stun:")?!1:(l=l.startsWith("turn")&&!l.startsWith("turn:[")&&l.includes("transport=udp"))&&!g?g=!0:l&&!g});delete q.url;q.urls=f?k[0]:k;return!!k.length}})};
+var e=function(d){if(d&&d.__esModule)return d;var h={};if(null!=d)for(var g in d)Object.prototype.hasOwnProperty.call(d,g)&&(h[g]=d[g]);h.default=d;return h}(a("../utils"))},{"../utils":15}],9:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});c.shimGetDisplayMedia=function(e){"getDisplayMedia"in e.navigator&&e.navigator.mediaDevices&&!(e.navigator.mediaDevices&&"getDisplayMedia"in e.navigator.mediaDevices)&&(e.navigator.mediaDevices.getDisplayMedia=e.navigator.getDisplayMedia.bind(e.navigator))}},
+{}],10:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});c.shimGetUserMedia=function(e){e=e&&e.navigator;var d=function(g){return{name:{PermissionDeniedError:"NotAllowedError"}[g.name]||g.name,message:g.message,constraint:g.constraint,toString:function(){return this.name}}},h=e.mediaDevices.getUserMedia.bind(e.mediaDevices);e.mediaDevices.getUserMedia=function(g){return h(g).catch(function(q){return Promise.reject(d(q))})}}},{}],11:[function(a,b,c){function e(k,f,l){f in k?Object.defineProperty(k,
+f,{value:l,enumerable:!0,configurable:!0,writable:!0}):k[f]=l;return k}Object.defineProperty(c,"__esModule",{value:!0});c.shimGetDisplayMedia=c.shimGetUserMedia=void 0;var d="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(k){return typeof k}:function(k){return k&&"function"===typeof Symbol&&k.constructor===Symbol&&k!==Symbol.prototype?"symbol":typeof k},h=a("./getusermedia");Object.defineProperty(c,"shimGetUserMedia",{enumerable:!0,get:function(){return h.shimGetUserMedia}});
+var g=a("./getdisplaymedia");Object.defineProperty(c,"shimGetDisplayMedia",{enumerable:!0,get:function(){return g.shimGetDisplayMedia}});c.shimOnTrack=function(k){"object"===("undefined"===typeof k?"undefined":d(k))&&k.RTCTrackEvent&&"receiver"in k.RTCTrackEvent.prototype&&!("transceiver"in k.RTCTrackEvent.prototype)&&Object.defineProperty(k.RTCTrackEvent.prototype,"transceiver",{get:function(){return{receiver:this.receiver}}})};c.shimPeerConnection=function(k){var f=q.detectBrowser(k);if("object"===
+("undefined"===typeof k?"undefined":d(k))&&(k.RTCPeerConnection||k.mozRTCPeerConnection)){!k.RTCPeerConnection&&k.mozRTCPeerConnection&&(k.RTCPeerConnection=k.mozRTCPeerConnection);53>f.version&&["setLocalDescription","setRemoteDescription","addIceCandidate"].forEach(function(r){var y=k.RTCPeerConnection.prototype[r],u=e({},r,function(){arguments[0]=new ("addIceCandidate"===r?k.RTCIceCandidate:k.RTCSessionDescription)(arguments[0]);return y.apply(this,arguments)});k.RTCPeerConnection.prototype[r]=
+u[r]});if(68>f.version){var l=k.RTCPeerConnection.prototype.addIceCandidate;k.RTCPeerConnection.prototype.addIceCandidate=function(){return arguments[0]?arguments[0]&&""===arguments[0].candidate?Promise.resolve():l.apply(this,arguments):(arguments[1]&&arguments[1].apply(null),Promise.resolve())}}var t={inboundrtp:"inbound-rtp",outboundrtp:"outbound-rtp",candidatepair:"candidate-pair",localcandidate:"local-candidate",remotecandidate:"remote-candidate"},w=k.RTCPeerConnection.prototype.getStats;k.RTCPeerConnection.prototype.getStats=
+function(){var r=Array.prototype.slice.call(arguments),y=r[1],u=r[2];return w.apply(this,[r[0]||null]).then(function(A){if(53>f.version&&!y)try{A.forEach(function(m){m.type=t[m.type]||m.type})}catch(m){if("TypeError"!==m.name)throw m;A.forEach(function(n,x){A.set(x,Object.assign({},n,{type:t[n.type]||n.type}))})}return A}).then(y,u)}}};c.shimSenderGetStats=function(k){if("object"===("undefined"===typeof k?"undefined":d(k))&&k.RTCPeerConnection&&k.RTCRtpSender&&!(k.RTCRtpSender&&"getStats"in k.RTCRtpSender.prototype)){var f=
+k.RTCPeerConnection.prototype.getSenders;f&&(k.RTCPeerConnection.prototype.getSenders=function(){var t=this,w=f.apply(this,[]);w.forEach(function(r){return r._pc=t});return w});var l=k.RTCPeerConnection.prototype.addTrack;l&&(k.RTCPeerConnection.prototype.addTrack=function(){var t=l.apply(this,arguments);t._pc=this;return t});k.RTCRtpSender.prototype.getStats=function(){return this.track?this._pc.getStats(this.track):Promise.resolve(new Map)}}};c.shimReceiverGetStats=function(k){if("object"===("undefined"===
+typeof k?"undefined":d(k))&&k.RTCPeerConnection&&k.RTCRtpSender&&!(k.RTCRtpSender&&"getStats"in k.RTCRtpReceiver.prototype)){var f=k.RTCPeerConnection.prototype.getReceivers;f&&(k.RTCPeerConnection.prototype.getReceivers=function(){var l=this,t=f.apply(this,[]);t.forEach(function(w){return w._pc=l});return t});q.wrapPeerConnectionEvent(k,"track",function(l){l.receiver._pc=l.srcElement;return l});k.RTCRtpReceiver.prototype.getStats=function(){return this._pc.getStats(this.track)}}};c.shimRemoveStream=
+function(k){!k.RTCPeerConnection||"removeStream"in k.RTCPeerConnection.prototype||(k.RTCPeerConnection.prototype.removeStream=function(f){var l=this;q.deprecated("removeStream","removeTrack");this.getSenders().forEach(function(t){t.track&&f.getTracks().includes(t.track)&&l.removeTrack(t)})})};c.shimRTCDataChannel=function(k){k.DataChannel&&!k.RTCDataChannel&&(k.RTCDataChannel=k.DataChannel)};c.shimAddTransceiver=function(k){if("object"===("undefined"===typeof k?"undefined":d(k))&&k.RTCPeerConnection){var f=
+k.RTCPeerConnection.prototype.addTransceiver;f&&(k.RTCPeerConnection.prototype.addTransceiver=function(){this.setParametersPromises=[];var l=arguments[1],t=l&&"sendEncodings"in l;t&&l.sendEncodings.forEach(function(y){if("rid"in y&&!/^[a-z0-9]{0,16}$/i.test(y.rid))throw new TypeError("Invalid RID value provided.");if("scaleResolutionDownBy"in y&&!(1<=parseFloat(y.scaleResolutionDownBy)))throw new RangeError("scale_resolution_down_by must be >= 1.0");if("maxFramerate"in y&&!(0<=parseFloat(y.maxFramerate)))throw new RangeError("max_framerate must be >= 0.0");
+});var w=f.apply(this,arguments);if(t){var r=w.sender;t=r.getParameters();"encodings"in t||(t.encodings=l.sendEncodings,r.sendEncodings=l.sendEncodings,this.setParametersPromises.push(r.setParameters(t).then(function(){delete r.sendEncodings}).catch(function(){delete r.sendEncodings})))}return w})}};c.shimGetParameters=function(k){if("object"===("undefined"===typeof k?"undefined":d(k))&&k.RTCRtpSender){var f=k.RTCRtpSender.prototype.getParameters;f&&(k.RTCRtpSender.prototype.getParameters=function(){var l=
+f.apply(this,arguments);return"sendEncodings"in this?Object.assign({},{encodings:this.sendEncodings},l):l})}};c.shimCreateOffer=function(k){if("object"===("undefined"===typeof k?"undefined":d(k))&&k.RTCPeerConnection){var f=k.RTCPeerConnection.prototype.createOffer;k.RTCPeerConnection.prototype.createOffer=function(){var l=this,t=arguments;return this.setParametersPromises&&this.setParametersPromises.length?Promise.all(this.setParametersPromises).then(function(){return f.apply(l,t)}).finally(function(){l.setParametersPromises=
+[]}):f.apply(this,arguments)}}};c.shimCreateAnswer=function(k){if("object"===("undefined"===typeof k?"undefined":d(k))&&k.RTCPeerConnection){var f=k.RTCPeerConnection.prototype.createAnswer;k.RTCPeerConnection.prototype.createAnswer=function(){var l=this,t=arguments;return this.setParametersPromises&&this.setParametersPromises.length?Promise.all(this.setParametersPromises).then(function(){return f.apply(l,t)}).finally(function(){l.setParametersPromises=[]}):f.apply(this,arguments)}}};var q=function(k){if(k&&
+k.__esModule)return k;var f={};if(null!=k)for(var l in k)Object.prototype.hasOwnProperty.call(k,l)&&(f[l]=k[l]);f.default=k;return f}(a("../utils"))},{"../utils":15,"./getdisplaymedia":12,"./getusermedia":13}],12:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});c.shimGetDisplayMedia=function(e,d){e.navigator.mediaDevices&&"getDisplayMedia"in e.navigator.mediaDevices||!e.navigator.mediaDevices||(e.navigator.mediaDevices.getDisplayMedia=function(h){if(!h||!h.video)return h=new DOMException("getDisplayMedia without video constraints is undefined"),
+h.name="NotFoundError",h.code=8,Promise.reject(h);!0===h.video?h.video={mediaSource:d}:h.video.mediaSource=d;return e.navigator.mediaDevices.getUserMedia(h)})}},{}],13:[function(a,b,c){Object.defineProperty(c,"__esModule",{value:!0});var e="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(h){return typeof h}:function(h){return h&&"function"===typeof Symbol&&h.constructor===Symbol&&h!==Symbol.prototype?"symbol":typeof h};c.shimGetUserMedia=function(h){var g=d.detectBrowser(h),
+q=h&&h.navigator;h=h&&h.MediaStreamTrack;q.getUserMedia=function(w,r,y){d.deprecated("navigator.getUserMedia","navigator.mediaDevices.getUserMedia");q.mediaDevices.getUserMedia(w).then(r,y)};if(!(55<g.version&&"autoGainControl"in q.mediaDevices.getSupportedConstraints())){var k=function(w,r,y){r in w&&!(y in w)&&(w[y]=w[r],delete w[r])},f=q.mediaDevices.getUserMedia.bind(q.mediaDevices);q.mediaDevices.getUserMedia=function(w){"object"===("undefined"===typeof w?"undefined":e(w))&&"object"===e(w.audio)&&
+(w=JSON.parse(JSON.stringify(w)),k(w.audio,"autoGainControl","mozAutoGainControl"),k(w.audio,"noiseSuppression","mozNoiseSuppression"));return f(w)};if(h&&h.prototype.getSettings){var l=h.prototype.getSettings;h.prototype.getSettings=function(){var w=l.apply(this,arguments);k(w,"mozAutoGainControl","autoGainControl");k(w,"mozNoiseSuppression","noiseSuppression");return w}}if(h&&h.prototype.applyConstraints){var t=h.prototype.applyConstraints;h.prototype.applyConstraints=function(w){"audio"===this.kind&&
+"object"===("undefined"===typeof w?"undefined":e(w))&&(w=JSON.parse(JSON.stringify(w)),k(w,"autoGainControl","mozAutoGainControl"),k(w,"noiseSuppression","mozNoiseSuppression"));return t.apply(this,[w])}}}};var d=function(h){if(h&&h.__esModule)return h;var g={};if(null!=h)for(var q in h)Object.prototype.hasOwnProperty.call(h,q)&&(g[q]=h[q]);g.default=h;return g}(a("../utils"))},{"../utils":15}],14:[function(a,b,c){function e(g){return g&&void 0!==g.video?Object.assign({},g,{video:h.compactObject(g.video)}):
+g}Object.defineProperty(c,"__esModule",{value:!0});var d="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(g){return typeof g}:function(g){return g&&"function"===typeof Symbol&&g.constructor===Symbol&&g!==Symbol.prototype?"symbol":typeof g};c.shimLocalStreamsAPI=function(g){if("object"===("undefined"===typeof g?"undefined":d(g))&&g.RTCPeerConnection){"getLocalStreams"in g.RTCPeerConnection.prototype||(g.RTCPeerConnection.prototype.getLocalStreams=function(){this._localStreams||
+(this._localStreams=[]);return this._localStreams});if(!("addStream"in g.RTCPeerConnection.prototype)){var q=g.RTCPeerConnection.prototype.addTrack;g.RTCPeerConnection.prototype.addStream=function(k){var f=this;this._localStreams||(this._localStreams=[]);this._localStreams.includes(k)||this._localStreams.push(k);k.getAudioTracks().forEach(function(l){return q.call(f,l,k)});k.getVideoTracks().forEach(function(l){return q.call(f,l,k)})};g.RTCPeerConnection.prototype.addTrack=function(k){for(var f=this,
+l=arguments.length,t=Array(1<l?l-1:0),w=1;w<l;w++)t[w-1]=arguments[w];t&&t.forEach(function(r){f._localStreams?f._localStreams.includes(r)||f._localStreams.push(r):f._localStreams=[r]});return q.apply(this,arguments)}}"removeStream"in g.RTCPeerConnection.prototype||(g.RTCPeerConnection.prototype.removeStream=function(k){var f=this;this._localStreams||(this._localStreams=[]);var l=this._localStreams.indexOf(k);if(-1!==l){this._localStreams.splice(l,1);var t=k.getTracks();this.getSenders().forEach(function(w){t.includes(w.track)&&
+f.removeTrack(w)})}})}};c.shimRemoteStreamsAPI=function(g){if("object"===("undefined"===typeof g?"undefined":d(g))&&g.RTCPeerConnection&&("getRemoteStreams"in g.RTCPeerConnection.prototype||(g.RTCPeerConnection.prototype.getRemoteStreams=function(){return this._remoteStreams?this._remoteStreams:[]}),!("onaddstream"in g.RTCPeerConnection.prototype))){Object.defineProperty(g.RTCPeerConnection.prototype,"onaddstream",{get:function(){return this._onaddstream},set:function(k){var f=this;this._onaddstream&&
+(this.removeEventListener("addstream",this._onaddstream),this.removeEventListener("track",this._onaddstreampoly));this.addEventListener("addstream",this._onaddstream=k);this.addEventListener("track",this._onaddstreampoly=function(l){l.streams.forEach(function(t){f._remoteStreams||(f._remoteStreams=[]);if(!f._remoteStreams.includes(t)){f._remoteStreams.push(t);var w=new Event("addstream");w.stream=t;f.dispatchEvent(w)}})})}});var q=g.RTCPeerConnection.prototype.setRemoteDescription;g.RTCPeerConnection.prototype.setRemoteDescription=
+function(){var k=this;this._onaddstreampoly||this.addEventListener("track",this._onaddstreampoly=function(f){f.streams.forEach(function(l){k._remoteStreams||(k._remoteStreams=[]);if(!(0<=k._remoteStreams.indexOf(l))){k._remoteStreams.push(l);var t=new Event("addstream");t.stream=l;k.dispatchEvent(t)}})});return q.apply(k,arguments)}}};c.shimCallbacksAPI=function(g){if("object"===("undefined"===typeof g?"undefined":d(g))&&g.RTCPeerConnection){g=g.RTCPeerConnection.prototype;var q=g.createOffer,k=g.createAnswer,
+f=g.setLocalDescription,l=g.setRemoteDescription,t=g.addIceCandidate;g.createOffer=function(r,y){var u=q.apply(this,[2<=arguments.length?arguments[2]:arguments[0]]);if(!y)return u;u.then(r,y);return Promise.resolve()};g.createAnswer=function(r,y){var u=k.apply(this,[2<=arguments.length?arguments[2]:arguments[0]]);if(!y)return u;u.then(r,y);return Promise.resolve()};var w=function(r,y,u){r=f.apply(this,[r]);if(!u)return r;r.then(y,u);return Promise.resolve()};g.setLocalDescription=w;w=function(r,y,
+u){r=l.apply(this,[r]);if(!u)return r;r.then(y,u);return Promise.resolve()};g.setRemoteDescription=w;w=function(r,y,u){r=t.apply(this,[r]);if(!u)return r;r.then(y,u);return Promise.resolve()};g.addIceCandidate=w}};c.shimGetUserMedia=function(g){var q=g&&g.navigator;if(q.mediaDevices&&q.mediaDevices.getUserMedia){g=q.mediaDevices;var k=g.getUserMedia.bind(g);q.mediaDevices.getUserMedia=function(f){return k(e(f))}}!q.getUserMedia&&q.mediaDevices&&q.mediaDevices.getUserMedia&&(q.getUserMedia=function(f,
+l,t){q.mediaDevices.getUserMedia(f).then(l,t)}.bind(q))};c.shimConstraints=e;c.shimRTCIceServerUrls=function(g){var q=g.RTCPeerConnection;g.RTCPeerConnection=function(k,f){if(k&&k.iceServers){for(var l=[],t=0;t<k.iceServers.length;t++){var w=k.iceServers[t];!w.hasOwnProperty("urls")&&w.hasOwnProperty("url")?(h.deprecated("RTCIceServer.url","RTCIceServer.urls"),w=JSON.parse(JSON.stringify(w)),w.urls=w.url,delete w.url,l.push(w)):l.push(k.iceServers[t])}k.iceServers=l}return new q(k,f)};g.RTCPeerConnection.prototype=
+q.prototype;"generateCertificate"in g.RTCPeerConnection&&Object.defineProperty(g.RTCPeerConnection,"generateCertificate",{get:function(){return q.generateCertificate}})};c.shimTrackEventTransceiver=function(g){"object"===("undefined"===typeof g?"undefined":d(g))&&g.RTCTrackEvent&&"receiver"in g.RTCTrackEvent.prototype&&!("transceiver"in g.RTCTrackEvent.prototype)&&Object.defineProperty(g.RTCTrackEvent.prototype,"transceiver",{get:function(){return{receiver:this.receiver}}})};c.shimCreateOfferLegacy=
+function(g){var q=g.RTCPeerConnection.prototype.createOffer;g.RTCPeerConnection.prototype.createOffer=function(k){if(k){"undefined"!==typeof k.offerToReceiveAudio&&(k.offerToReceiveAudio=!!k.offerToReceiveAudio);var f=this.getTransceivers().find(function(l){return"audio"===l.receiver.track.kind});!1===k.offerToReceiveAudio&&f?"sendrecv"===f.direction?f.setDirection?f.setDirection("sendonly"):f.direction="sendonly":"recvonly"===f.direction&&(f.setDirection?f.setDirection("inactive"):f.direction="inactive"):
+!0!==k.offerToReceiveAudio||f||this.addTransceiver("audio");"undefined"!==typeof k.offerToReceiveVideo&&(k.offerToReceiveVideo=!!k.offerToReceiveVideo);f=this.getTransceivers().find(function(l){return"video"===l.receiver.track.kind});!1===k.offerToReceiveVideo&&f?"sendrecv"===f.direction?f.setDirection?f.setDirection("sendonly"):f.direction="sendonly":"recvonly"===f.direction&&(f.setDirection?f.setDirection("inactive"):f.direction="inactive"):!0!==k.offerToReceiveVideo||f||this.addTransceiver("video")}return q.apply(this,
+arguments)}};c.shimAudioContext=function(g){"object"!==("undefined"===typeof g?"undefined":d(g))||g.AudioContext||(g.AudioContext=g.webkitAudioContext)};var h=function(g){if(g&&g.__esModule)return g;var q={};if(null!=g)for(var k in g)Object.prototype.hasOwnProperty.call(g,k)&&(q[k]=g[k]);q.default=g;return q}(a("../utils"))},{"../utils":15}],15:[function(a,b,c){function e(f,l,t){return(f=f.match(l))&&f.length>=t&&parseInt(f[t],10)}function d(f){return"[object Object]"!==Object.prototype.toString.call(f)?
+f:Object.keys(f).reduce(function(l,t){var w="[object Object]"===Object.prototype.toString.call(f[t]),r=w?d(f[t]):f[t];w=w&&!Object.keys(r).length;if(void 0===r||w)return l;w=Object;var y=w.assign,u={};t in u?Object.defineProperty(u,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):u[t]=r;return y.call(w,l,u)},{})}function h(f,l,t){l&&!t.has(l.id)&&(t.set(l.id,l),Object.keys(l).forEach(function(w){w.endsWith("Id")?h(f,f.get(l[w]),t):w.endsWith("Ids")&&l[w].forEach(function(r){h(f,f.get(r),t)})}))}
+Object.defineProperty(c,"__esModule",{value:!0});var g="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(f){return typeof f}:function(f){return f&&"function"===typeof Symbol&&f.constructor===Symbol&&f!==Symbol.prototype?"symbol":typeof f};c.extractVersion=e;c.wrapPeerConnectionEvent=function(f,l,t){if(f.RTCPeerConnection){f=f.RTCPeerConnection.prototype;var w=f.addEventListener;f.addEventListener=function(y,u){if(y!==l)return w.apply(this,arguments);var A=function(m){(m=t(m))&&
+(u.handleEvent?u.handleEvent(m):u(m))};this._eventMap=this._eventMap||{};this._eventMap[l]||(this._eventMap[l]=new Map);this._eventMap[l].set(u,A);return w.apply(this,[y,A])};var r=f.removeEventListener;f.removeEventListener=function(y,u){if(y!==l||!this._eventMap||!this._eventMap[l]||!this._eventMap[l].has(u))return r.apply(this,arguments);var A=this._eventMap[l].get(u);this._eventMap[l].delete(u);0===this._eventMap[l].size&&delete this._eventMap[l];0===Object.keys(this._eventMap).length&&delete this._eventMap;
+return r.apply(this,[y,A])};Object.defineProperty(f,"on"+l,{get:function(){return this["_on"+l]},set:function(y){this["_on"+l]&&(this.removeEventListener(l,this["_on"+l]),delete this["_on"+l]);y&&this.addEventListener(l,this["_on"+l]=y)},enumerable:!0,configurable:!0})}};c.disableLog=function(f){return"boolean"!==typeof f?Error("Argument type: "+("undefined"===typeof f?"undefined":g(f))+". Please use a boolean."):(q=f)?"adapter.js logging disabled":"adapter.js logging enabled"};c.disableWarnings=
+function(f){if("boolean"!==typeof f)return Error("Argument type: "+("undefined"===typeof f?"undefined":g(f))+". Please use a boolean.");k=!f;return"adapter.js deprecation warnings "+(f?"disabled":"enabled")};c.log=function(){"object"!==("undefined"===typeof window?"undefined":g(window))||q||"undefined"!==typeof console&&"function"===typeof console.log&&console.log.apply(console,arguments)};c.deprecated=function(f,l){k&&console.warn(f+" is deprecated, please use "+l+" instead.")};c.detectBrowser=function(f){var l=
+f.navigator,t={browser:null,version:null};if("undefined"===typeof f||!f.navigator)return t.browser="Not a browser.",t;l.mozGetUserMedia?(t.browser="firefox",t.version=e(l.userAgent,/Firefox\/(\d+)\./,1)):l.webkitGetUserMedia||!1===f.isSecureContext&&f.webkitRTCPeerConnection&&!f.RTCIceGatherer?(t.browser="chrome",t.version=e(l.userAgent,/Chrom(e|ium)\/(\d+)\./,2)):l.mediaDevices&&l.userAgent.match(/Edge\/(\d+).(\d+)$/)?(t.browser="edge",t.version=e(l.userAgent,/Edge\/(\d+).(\d+)$/,2)):f.RTCPeerConnection&&
+l.userAgent.match(/AppleWebKit\/(\d+)\./)?(t.browser="safari",t.version=e(l.userAgent,/AppleWebKit\/(\d+)\./,1),t.supportsUnifiedPlan=f.RTCRtpTransceiver&&"currentDirection"in f.RTCRtpTransceiver.prototype):t.browser="Not a supported browser.";return t};c.compactObject=d;c.walkStats=h;c.filterStats=function(f,l,t){var w=t?"outbound-rtp":"inbound-rtp",r=new Map;if(null===l)return r;var y=[];f.forEach(function(u){"track"===u.type&&u.trackIdentifier===l.id&&y.push(u)});y.forEach(function(u){f.forEach(function(A){A.type===
+w&&A.trackId===u.id&&h(f,A,r)})});return r};var q=!0,k=!0},{}],16:[function(a,b,c){function e(l,t,w,r,y){t=f.writeRtpDescription(l.kind,t);t+=f.writeIceParameters(l.iceGatherer.getLocalParameters());t+=f.writeDtlsParameters(l.dtlsTransport.getLocalParameters(),"offer"===w?"actpass":y||"active");t+="a=mid:"+l.mid+"\r\n";t=l.rtpSender&&l.rtpReceiver?t+"a=sendrecv\r\n":l.rtpSender?t+"a=sendonly\r\n":l.rtpReceiver?t+"a=recvonly\r\n":t+"a=inactive\r\n";l.rtpSender&&(w=l.rtpSender._initialTrackId||l.rtpSender.track.id,
+l.rtpSender._initialTrackId=w,r="msid:"+(r?r.id:"-")+" "+w+"\r\n",t=t+("a="+r)+("a=ssrc:"+l.sendEncodingParameters[0].ssrc+" "+r),l.sendEncodingParameters[0].rtx&&(t+="a=ssrc:"+l.sendEncodingParameters[0].rtx.ssrc+" "+r,t+="a=ssrc-group:FID "+l.sendEncodingParameters[0].ssrc+" "+l.sendEncodingParameters[0].rtx.ssrc+"\r\n"));t+="a=ssrc:"+l.sendEncodingParameters[0].ssrc+" cname:"+f.localCName+"\r\n";l.rtpSender&&l.sendEncodingParameters[0].rtx&&(t+="a=ssrc:"+l.sendEncodingParameters[0].rtx.ssrc+" cname:"+
+f.localCName+"\r\n");return t}function d(l,t){var w=!1;l=JSON.parse(JSON.stringify(l));return l.filter(function(r){if(r&&(r.urls||r.url)){var y=r.urls||r.url;r.url&&!r.urls&&console.warn("RTCIceServer.url is deprecated! Use urls instead.");var u="string"===typeof y;u&&(y=[y]);y=y.filter(function(A){return 0!==A.indexOf("turn:")||-1===A.indexOf("transport=udp")||-1!==A.indexOf("turn:[")||w?0===A.indexOf("stun:")&&14393<=t&&-1===A.indexOf("?transport=udp"):w=!0});delete r.url;r.urls=u?y[0]:y;return!!y.length}})}
+function h(l,t){var w={codecs:[],headerExtensions:[],fecMechanisms:[]},r=function(u,A){u=parseInt(u,10);for(var m=0;m<A.length;m++)if(A[m].payloadType===u||A[m].preferredPayloadType===u)return A[m]},y=function(u,A,m,n){u=r(u.parameters.apt,m);A=r(A.parameters.apt,n);return u&&A&&u.name.toLowerCase()===A.name.toLowerCase()};l.codecs.forEach(function(u){for(var A=0;A<t.codecs.length;A++){var m=t.codecs[A];if(u.name.toLowerCase()===m.name.toLowerCase()&&u.clockRate===m.clockRate&&("rtx"!==u.name.toLowerCase()||
+!u.parameters||!m.parameters.apt||y(u,m,l.codecs,t.codecs))){m=JSON.parse(JSON.stringify(m));m.numChannels=Math.min(u.numChannels,m.numChannels);w.codecs.push(m);m.rtcpFeedback=m.rtcpFeedback.filter(function(n){for(var x=0;x<u.rtcpFeedback.length;x++)if(u.rtcpFeedback[x].type===n.type&&u.rtcpFeedback[x].parameter===n.parameter)return!0;return!1});break}}});l.headerExtensions.forEach(function(u){for(var A=0;A<t.headerExtensions.length;A++){var m=t.headerExtensions[A];if(u.uri===m.uri){w.headerExtensions.push(m);
+break}}});return w}function g(l,t,w){return-1!=={offer:{setLocalDescription:["stable","have-local-offer"],setRemoteDescription:["stable","have-remote-offer"]},answer:{setLocalDescription:["have-remote-offer","have-local-pranswer"],setRemoteDescription:["have-local-offer","have-remote-pranswer"]}}[t][l].indexOf(w)}function q(l,t){var w=l.getRemoteCandidates().find(function(r){return t.foundation===r.foundation&&t.ip===r.ip&&t.port===r.port&&t.priority===r.priority&&t.protocol===r.protocol&&t.type===
+r.type});w||l.addRemoteCandidate(t);return!w}function k(l,t){t=Error(t);t.name=l;t.code={NotSupportedError:9,InvalidStateError:11,InvalidAccessError:15,TypeError:void 0,OperationError:void 0}[l];return t}var f=a("sdp");b.exports=function(l,t){function w(m,n){n.addTrack(m);n.dispatchEvent(new l.MediaStreamTrackEvent("addtrack",{track:m}))}function r(m,n){n.removeTrack(m);n.dispatchEvent(new l.MediaStreamTrackEvent("removetrack",{track:m}))}function y(m,n,x,z){var B=new Event("track");B.track=n;B.receiver=
+x;B.transceiver={receiver:x};B.streams=z;l.setTimeout(function(){m._dispatchEvent("track",B)})}var u=function(m){var n=this,x=document.createDocumentFragment();["addEventListener","removeEventListener","dispatchEvent"].forEach(function(B){n[B]=x[B].bind(x)});this.canTrickleIceCandidates=null;this.needNegotiation=!1;this.localStreams=[];this.remoteStreams=[];this._remoteDescription=this._localDescription=null;this.signalingState="stable";this.iceGatheringState=this.connectionState=this.iceConnectionState=
+"new";m=JSON.parse(JSON.stringify(m||{}));this.usingBundle="max-bundle"===m.bundlePolicy;if("negotiate"===m.rtcpMuxPolicy)throw k("NotSupportedError","rtcpMuxPolicy 'negotiate' is not supported");m.rtcpMuxPolicy||(m.rtcpMuxPolicy="require");switch(m.iceTransportPolicy){case "all":case "relay":break;default:m.iceTransportPolicy="all"}switch(m.bundlePolicy){case "balanced":case "max-compat":case "max-bundle":break;default:m.bundlePolicy="balanced"}m.iceServers=d(m.iceServers||[],t);this._iceGatherers=
+[];if(m.iceCandidatePoolSize)for(var z=m.iceCandidatePoolSize;0<z;z--)this._iceGatherers.push(new l.RTCIceGatherer({iceServers:m.iceServers,gatherPolicy:m.iceTransportPolicy}));else m.iceCandidatePoolSize=0;this._config=m;this.transceivers=[];this._sdpSessionId=f.generateSessionId();this._sdpSessionVersion=0;this._dtlsRole=void 0;this._isClosed=!1};Object.defineProperty(u.prototype,"localDescription",{configurable:!0,get:function(){return this._localDescription}});Object.defineProperty(u.prototype,
+"remoteDescription",{configurable:!0,get:function(){return this._remoteDescription}});u.prototype.onicecandidate=null;u.prototype.onaddstream=null;u.prototype.ontrack=null;u.prototype.onremovestream=null;u.prototype.onsignalingstatechange=null;u.prototype.oniceconnectionstatechange=null;u.prototype.onconnectionstatechange=null;u.prototype.onicegatheringstatechange=null;u.prototype.onnegotiationneeded=null;u.prototype.ondatachannel=null;u.prototype._dispatchEvent=function(m,n){if(!this._isClosed&&
+(this.dispatchEvent(n),"function"===typeof this["on"+m]))this["on"+m](n)};u.prototype._emitGatheringStateChange=function(){var m=new Event("icegatheringstatechange");this._dispatchEvent("icegatheringstatechange",m)};u.prototype.getConfiguration=function(){return this._config};u.prototype.getLocalStreams=function(){return this.localStreams};u.prototype.getRemoteStreams=function(){return this.remoteStreams};u.prototype._createTransceiver=function(m,n){var x=0<this.transceivers.length;m={track:null,
+iceGatherer:null,iceTransport:null,dtlsTransport:null,localCapabilities:null,remoteCapabilities:null,rtpSender:null,rtpReceiver:null,kind:m,mid:null,sendEncodingParameters:null,recvEncodingParameters:null,stream:null,associatedRemoteMediaStreams:[],wantReceive:!0};this.usingBundle&&x?(m.iceTransport=this.transceivers[0].iceTransport,m.dtlsTransport=this.transceivers[0].dtlsTransport):(x=this._createIceAndDtlsTransports(),m.iceTransport=x.iceTransport,m.dtlsTransport=x.dtlsTransport);n||this.transceivers.push(m);
+return m};u.prototype.addTrack=function(m,n){if(this._isClosed)throw k("InvalidStateError","Attempted to call addTrack on a closed peerconnection.");if(this.transceivers.find(function(B){return B.track===m}))throw k("InvalidAccessError","Track already exists.");for(var x,z=0;z<this.transceivers.length;z++)this.transceivers[z].track||this.transceivers[z].kind!==m.kind||(x=this.transceivers[z]);x||(x=this._createTransceiver(m.kind));this._maybeFireNegotiationNeeded();-1===this.localStreams.indexOf(n)&&
+this.localStreams.push(n);x.track=m;x.stream=n;x.rtpSender=new l.RTCRtpSender(m,x.dtlsTransport);return x.rtpSender};u.prototype.addStream=function(m){var n=this;if(15025<=t)m.getTracks().forEach(function(z){n.addTrack(z,m)});else{var x=m.clone();m.getTracks().forEach(function(z,B){var C=x.getTracks()[B];z.addEventListener("enabled",function(G){C.enabled=G.enabled})});x.getTracks().forEach(function(z){n.addTrack(z,x)})}};u.prototype.removeTrack=function(m){if(this._isClosed)throw k("InvalidStateError",
+"Attempted to call removeTrack on a closed peerconnection.");if(!(m instanceof l.RTCRtpSender))throw new TypeError("Argument 1 of RTCPeerConnection.removeTrack does not implement interface RTCRtpSender.");var n=this.transceivers.find(function(z){return z.rtpSender===m});if(!n)throw k("InvalidAccessError","Sender was not created by this connection.");var x=n.stream;n.rtpSender.stop();n.rtpSender=null;n.track=null;n.stream=null;-1===this.transceivers.map(function(z){return z.stream}).indexOf(x)&&-1<
+this.localStreams.indexOf(x)&&this.localStreams.splice(this.localStreams.indexOf(x),1);this._maybeFireNegotiationNeeded()};u.prototype.removeStream=function(m){var n=this;m.getTracks().forEach(function(x){var z=n.getSenders().find(function(B){return B.track===x});z&&n.removeTrack(z)})};u.prototype.getSenders=function(){return this.transceivers.filter(function(m){return!!m.rtpSender}).map(function(m){return m.rtpSender})};u.prototype.getReceivers=function(){return this.transceivers.filter(function(m){return!!m.rtpReceiver}).map(function(m){return m.rtpReceiver})};
+u.prototype._createIceGatherer=function(m,n){var x=this;if(n&&0<m)return this.transceivers[0].iceGatherer;if(this._iceGatherers.length)return this._iceGatherers.shift();var z=new l.RTCIceGatherer({iceServers:this._config.iceServers,gatherPolicy:this._config.iceTransportPolicy});Object.defineProperty(z,"state",{value:"new",writable:!0});this.transceivers[m].bufferedCandidateEvents=[];this.transceivers[m].bufferCandidates=function(B){var C=!B.candidate||0===Object.keys(B.candidate).length;z.state=C?
+"completed":"gathering";null!==x.transceivers[m].bufferedCandidateEvents&&x.transceivers[m].bufferedCandidateEvents.push(B)};z.addEventListener("localcandidate",this.transceivers[m].bufferCandidates);return z};u.prototype._gather=function(m,n){var x=this,z=this.transceivers[n].iceGatherer;if(!z.onlocalcandidate){var B=this.transceivers[n].bufferedCandidateEvents;this.transceivers[n].bufferedCandidateEvents=null;z.removeEventListener("localcandidate",this.transceivers[n].bufferCandidates);z.onlocalcandidate=
+function(C){if(!(x.usingBundle&&0<n)){var G=new Event("icecandidate");G.candidate={sdpMid:m,sdpMLineIndex:n};var M=C.candidate;if(C=!M||0===Object.keys(M).length){if("new"===z.state||"gathering"===z.state)z.state="completed"}else"new"===z.state&&(z.state="gathering"),M.component=1,M.ufrag=z.getLocalParameters().usernameFragment,M=f.writeCandidate(M),G.candidate=Object.assign(G.candidate,f.parseCandidate(M)),G.candidate.candidate=M,G.candidate.toJSON=function(){return{candidate:G.candidate.candidate,
+sdpMid:G.candidate.sdpMid,sdpMLineIndex:G.candidate.sdpMLineIndex,usernameFragment:G.candidate.usernameFragment}};M=f.getMediaSections(x._localDescription.sdp);M[G.candidate.sdpMLineIndex]=C?M[G.candidate.sdpMLineIndex]+"a=end-of-candidates\r\n":M[G.candidate.sdpMLineIndex]+("a="+G.candidate.candidate+"\r\n");x._localDescription.sdp=f.getDescription(x._localDescription.sdp)+M.join("");M=x.transceivers.every(function(Y){return Y.iceGatherer&&"completed"===Y.iceGatherer.state});"gathering"!==x.iceGatheringState&&
+(x.iceGatheringState="gathering",x._emitGatheringStateChange());C||x._dispatchEvent("icecandidate",G);M&&(x._dispatchEvent("icecandidate",new Event("icecandidate")),x.iceGatheringState="complete",x._emitGatheringStateChange())}};l.setTimeout(function(){B.forEach(function(C){z.onlocalcandidate(C)})},0)}};u.prototype._createIceAndDtlsTransports=function(){var m=this,n=new l.RTCIceTransport(null);n.onicestatechange=function(){m._updateIceConnectionState();m._updateConnectionState()};var x=new l.RTCDtlsTransport(n);
+x.ondtlsstatechange=function(){m._updateConnectionState()};x.onerror=function(){Object.defineProperty(x,"state",{value:"failed",writable:!0});m._updateConnectionState()};return{iceTransport:n,dtlsTransport:x}};u.prototype._disposeIceAndDtlsTransports=function(m){var n=this.transceivers[m].iceGatherer;n&&(delete n.onlocalcandidate,delete this.transceivers[m].iceGatherer);if(n=this.transceivers[m].iceTransport)delete n.onicestatechange,delete this.transceivers[m].iceTransport;if(n=this.transceivers[m].dtlsTransport)delete n.ondtlsstatechange,
+delete n.onerror,delete this.transceivers[m].dtlsTransport};u.prototype._transceive=function(m,n,x){var z=h(m.localCapabilities,m.remoteCapabilities);n&&m.rtpSender&&(z.encodings=m.sendEncodingParameters,z.rtcp={cname:f.localCName,compound:m.rtcpParameters.compound},m.recvEncodingParameters.length&&(z.rtcp.ssrc=m.recvEncodingParameters[0].ssrc),m.rtpSender.send(z));x&&m.rtpReceiver&&0<z.codecs.length&&("video"===m.kind&&m.recvEncodingParameters&&15019>t&&m.recvEncodingParameters.forEach(function(B){delete B.rtx}),
+z.encodings=m.recvEncodingParameters.length?m.recvEncodingParameters:[{}],z.rtcp={compound:m.rtcpParameters.compound},m.rtcpParameters.cname&&(z.rtcp.cname=m.rtcpParameters.cname),m.sendEncodingParameters.length&&(z.rtcp.ssrc=m.sendEncodingParameters[0].ssrc),m.rtpReceiver.receive(z))};u.prototype.setLocalDescription=function(m){var n=this;if(-1===["offer","answer"].indexOf(m.type))return Promise.reject(k("TypeError",'Unsupported type "'+m.type+'"'));if(!g("setLocalDescription",m.type,n.signalingState)||
+n._isClosed)return Promise.reject(k("InvalidStateError","Can not set local "+m.type+" in state "+n.signalingState));if("offer"===m.type){var x=f.splitSections(m.sdp);var z=x.shift();x.forEach(function(C,G){C=f.parseRtpParameters(C);n.transceivers[G].localCapabilities=C});n.transceivers.forEach(function(C,G){n._gather(C.mid,G)})}else if("answer"===m.type){x=f.splitSections(n._remoteDescription.sdp);z=x.shift();var B=0<f.matchPrefix(z,"a=ice-lite").length;x.forEach(function(C,G){var M=n.transceivers[G],
+Y=M.iceGatherer,L=M.iceTransport,J=M.dtlsTransport,P=M.localCapabilities,U=M.remoteCapabilities;if(!(f.isRejected(C)&&0===f.matchPrefix(C,"a=bundle-only").length||M.rejected)){var Z=f.getIceParameters(C,z);C=f.getDtlsParameters(C,z);B&&(C.role="server");n.usingBundle&&0!==G||(n._gather(M.mid,G),"new"===L.state&&L.start(Y,Z,B?"controlling":"controlled"),"new"===J.state&&J.start(C));G=h(P,U);n._transceive(M,0<G.codecs.length,!1)}})}n._localDescription={type:m.type,sdp:m.sdp};"offer"===m.type?n._updateSignalingState("have-local-offer"):
+n._updateSignalingState("stable");return Promise.resolve()};u.prototype.setRemoteDescription=function(m){var n=this;if(-1===["offer","answer"].indexOf(m.type))return Promise.reject(k("TypeError",'Unsupported type "'+m.type+'"'));if(!g("setRemoteDescription",m.type,n.signalingState)||n._isClosed)return Promise.reject(k("InvalidStateError","Can not set remote "+m.type+" in state "+n.signalingState));var x={};n.remoteStreams.forEach(function(L){x[L.id]=L});var z=[],B=f.splitSections(m.sdp),C=B.shift(),
+G=0<f.matchPrefix(C,"a=ice-lite").length,M=0<f.matchPrefix(C,"a=group:BUNDLE ").length;n.usingBundle=M;var Y=f.matchPrefix(C,"a=ice-options:")[0];n.canTrickleIceCandidates=Y?0<=Y.substr(14).split(" ").indexOf("trickle"):!1;B.forEach(function(L,J){var P=f.splitLines(L),U=f.getKind(L),Z=f.isRejected(L)&&0===f.matchPrefix(L,"a=bundle-only").length,la=P[0].substr(2).split(" ")[2];P=f.getDirection(L,C);var W=f.parseMsid(L),na=f.getMid(L)||f.generateIdentifier();if(Z||"application"===U&&("DTLS/SCTP"===
+la||"UDP/DTLS/SCTP"===la))n.transceivers[J]={mid:na,kind:U,protocol:la,rejected:!0};else{!Z&&n.transceivers[J]&&n.transceivers[J].rejected&&(n.transceivers[J]=n._createTransceiver(U,!0));var Ba=f.parseRtpParameters(L);if(!Z){var oa=f.getIceParameters(L,C);var Ca=f.getDtlsParameters(L,C);Ca.role="client"}la=f.parseRtpEncodingParameters(L);var Da=f.parseRtcpParameters(L),Ea=0<f.matchPrefix(L,"a=end-of-candidates",C).length,ma=f.matchPrefix(L,"a=candidate:").map(function(X){return f.parseCandidate(X)}).filter(function(X){return 1===
+X.component});("offer"===m.type||"answer"===m.type)&&!Z&&M&&0<J&&n.transceivers[J]&&(n._disposeIceAndDtlsTransports(J),n.transceivers[J].iceGatherer=n.transceivers[0].iceGatherer,n.transceivers[J].iceTransport=n.transceivers[0].iceTransport,n.transceivers[J].dtlsTransport=n.transceivers[0].dtlsTransport,n.transceivers[J].rtpSender&&n.transceivers[J].rtpSender.setTransport(n.transceivers[0].dtlsTransport),n.transceivers[J].rtpReceiver&&n.transceivers[J].rtpReceiver.setTransport(n.transceivers[0].dtlsTransport));
+if("offer"!==m.type||Z)"answer"!==m.type||Z||(N=n.transceivers[J],ja=N.iceGatherer,U=N.iceTransport,na=N.dtlsTransport,ha=N.rtpReceiver,Z=N.sendEncodingParameters,L=N.localCapabilities,n.transceivers[J].recvEncodingParameters=la,n.transceivers[J].remoteCapabilities=Ba,n.transceivers[J].rtcpParameters=Da,ma.length&&"new"===U.state&&(!G&&!Ea||M&&0!==J?ma.forEach(function(X){q(N.iceTransport,X)}):U.setRemoteCandidates(ma)),M&&0!==J||("new"===U.state&&U.start(ja,oa,"controlling"),"new"===na.state&&na.start(Ca)),
+!h(N.localCapabilities,N.remoteCapabilities).codecs.filter(function(X){return"rtx"===X.name.toLowerCase()}).length&&N.sendEncodingParameters[0].rtx&&delete N.sendEncodingParameters[0].rtx,n._transceive(N,"sendrecv"===P||"recvonly"===P,"sendrecv"===P||"sendonly"===P),!ha||"sendrecv"!==P&&"sendonly"!==P?delete N.rtpReceiver:(P=ha.track,W?(x[W.stream]||(x[W.stream]=new l.MediaStream),w(P,x[W.stream]),z.push([P,ha,x[W.stream]])):(x.default||(x.default=new l.MediaStream),w(P,x.default),z.push([P,ha,x.default]))));
+else{var N=n.transceivers[J]||n._createTransceiver(U);N.mid=na;N.iceGatherer||(N.iceGatherer=n._createIceGatherer(J,M));ma.length&&"new"===N.iceTransport.state&&(!Ea||M&&0!==J?ma.forEach(function(X){q(N.iceTransport,X)}):N.iceTransport.setRemoteCandidates(ma));L=l.RTCRtpReceiver.getCapabilities(U);15019>t&&(L.codecs=L.codecs.filter(function(X){return"rtx"!==X.name}));Z=N.sendEncodingParameters||[{ssrc:1001*(2*J+2)}];oa=!1;if("sendrecv"===P||"sendonly"===P){oa=!N.rtpReceiver;var ha=N.rtpReceiver||
+new l.RTCRtpReceiver(N.dtlsTransport,U);if(oa){P=ha.track;if(!W||"-"!==W.stream)if(W){x[W.stream]||(x[W.stream]=new l.MediaStream,Object.defineProperty(x[W.stream],"id",{get:function(){return W.stream}}));Object.defineProperty(P,"id",{get:function(){return W.track}});var ja=x[W.stream]}else x.default||(x.default=new l.MediaStream),ja=x.default;ja&&(w(P,ja),N.associatedRemoteMediaStreams.push(ja));z.push([P,ha,ja])}}else N.rtpReceiver&&N.rtpReceiver.track&&(N.associatedRemoteMediaStreams.forEach(function(X){var Fa=
+X.getTracks().find(function(Xb){return Xb.id===N.rtpReceiver.track.id});Fa&&r(Fa,X)}),N.associatedRemoteMediaStreams=[]);N.localCapabilities=L;N.remoteCapabilities=Ba;N.rtpReceiver=ha;N.rtcpParameters=Da;N.sendEncodingParameters=Z;N.recvEncodingParameters=la;n._transceive(n.transceivers[J],!1,oa)}}});void 0===n._dtlsRole&&(n._dtlsRole="offer"===m.type?"active":"passive");n._remoteDescription={type:m.type,sdp:m.sdp};"offer"===m.type?n._updateSignalingState("have-remote-offer"):n._updateSignalingState("stable");
+Object.keys(x).forEach(function(L){var J=x[L];if(J.getTracks().length){if(-1===n.remoteStreams.indexOf(J)){n.remoteStreams.push(J);var P=new Event("addstream");P.stream=J;l.setTimeout(function(){n._dispatchEvent("addstream",P)})}z.forEach(function(U){J.id===U[2].id&&y(n,U[0],U[1],[J])})}});z.forEach(function(L){L[2]||y(n,L[0],L[1],[])});l.setTimeout(function(){n&&n.transceivers&&n.transceivers.forEach(function(L){L.iceTransport&&"new"===L.iceTransport.state&&0<L.iceTransport.getRemoteCandidates().length&&
+(console.warn("Timeout for addRemoteCandidate. Consider sending an end-of-candidates notification"),L.iceTransport.addRemoteCandidate({}))})},4E3);return Promise.resolve()};u.prototype.close=function(){this.transceivers.forEach(function(m){m.iceTransport&&m.iceTransport.stop();m.dtlsTransport&&m.dtlsTransport.stop();m.rtpSender&&m.rtpSender.stop();m.rtpReceiver&&m.rtpReceiver.stop()});this._isClosed=!0;this._updateSignalingState("closed")};u.prototype._updateSignalingState=function(m){this.signalingState=
+m;m=new Event("signalingstatechange");this._dispatchEvent("signalingstatechange",m)};u.prototype._maybeFireNegotiationNeeded=function(){var m=this;"stable"===this.signalingState&&!0!==this.needNegotiation&&(this.needNegotiation=!0,l.setTimeout(function(){if(m.needNegotiation){m.needNegotiation=!1;var n=new Event("negotiationneeded");m._dispatchEvent("negotiationneeded",n)}},0))};u.prototype._updateIceConnectionState=function(){var m={"new":0,closed:0,checking:0,connected:0,completed:0,disconnected:0,
+failed:0};this.transceivers.forEach(function(x){x.iceTransport&&!x.rejected&&m[x.iceTransport.state]++});var n="new";0<m.failed?n="failed":0<m.checking?n="checking":0<m.disconnected?n="disconnected":0<m.new?n="new":0<m.connected?n="connected":0<m.completed&&(n="completed");n!==this.iceConnectionState&&(this.iceConnectionState=n,n=new Event("iceconnectionstatechange"),this._dispatchEvent("iceconnectionstatechange",n))};u.prototype._updateConnectionState=function(){var m={"new":0,closed:0,connecting:0,
+connected:0,completed:0,disconnected:0,failed:0};this.transceivers.forEach(function(x){x.iceTransport&&x.dtlsTransport&&!x.rejected&&(m[x.iceTransport.state]++,m[x.dtlsTransport.state]++)});m.connected+=m.completed;var n="new";0<m.failed?n="failed":0<m.connecting?n="connecting":0<m.disconnected?n="disconnected":0<m.new?n="new":0<m.connected&&(n="connected");n!==this.connectionState&&(this.connectionState=n,n=new Event("connectionstatechange"),this._dispatchEvent("connectionstatechange",n))};u.prototype.createOffer=
+function(m){var n=this;if(n._isClosed)return Promise.reject(k("InvalidStateError","Can not call createOffer after close"));var x=n.transceivers.filter(function(C){return"audio"===C.kind}).length,z=n.transceivers.filter(function(C){return"video"===C.kind}).length;if(m){if(m.mandatory||m.optional)throw new TypeError("Legacy mandatory/optional constraints not supported.");void 0!==m.offerToReceiveAudio&&(x=!0===m.offerToReceiveAudio?1:!1===m.offerToReceiveAudio?0:m.offerToReceiveAudio);void 0!==m.offerToReceiveVideo&&
+(z=!0===m.offerToReceiveVideo?1:!1===m.offerToReceiveVideo?0:m.offerToReceiveVideo)}for(n.transceivers.forEach(function(C){"audio"===C.kind?(x--,0>x&&(C.wantReceive=!1)):"video"===C.kind&&(z--,0>z&&(C.wantReceive=!1))});0<x||0<z;)0<x&&(n._createTransceiver("audio"),x--),0<z&&(n._createTransceiver("video"),z--);var B=f.writeSessionBoilerplate(n._sdpSessionId,n._sdpSessionVersion++);n.transceivers.forEach(function(C,G){var M=C.track,Y=C.kind,L=C.mid||f.generateIdentifier();C.mid=L;C.iceGatherer||(C.iceGatherer=
+n._createIceGatherer(G,n.usingBundle));L=l.RTCRtpSender.getCapabilities(Y);15019>t&&(L.codecs=L.codecs.filter(function(J){return"rtx"!==J.name}));L.codecs.forEach(function(J){"H264"===J.name&&void 0===J.parameters["level-asymmetry-allowed"]&&(J.parameters["level-asymmetry-allowed"]="1");C.remoteCapabilities&&C.remoteCapabilities.codecs&&C.remoteCapabilities.codecs.forEach(function(P){J.name.toLowerCase()===P.name.toLowerCase()&&J.clockRate===P.clockRate&&(J.preferredPayloadType=P.payloadType)})});
+L.headerExtensions.forEach(function(J){(C.remoteCapabilities&&C.remoteCapabilities.headerExtensions||[]).forEach(function(P){J.uri===P.uri&&(J.id=P.id)})});G=C.sendEncodingParameters||[{ssrc:1001*(2*G+1)}];M&&15019<=t&&"video"===Y&&!G[0].rtx&&(G[0].rtx={ssrc:G[0].ssrc+1});C.wantReceive&&(C.rtpReceiver=new l.RTCRtpReceiver(C.dtlsTransport,Y));C.localCapabilities=L;C.sendEncodingParameters=G});"max-compat"!==n._config.bundlePolicy&&(B+="a=group:BUNDLE "+n.transceivers.map(function(C){return C.mid}).join(" ")+
+"\r\n");B+="a=ice-options:trickle\r\n";n.transceivers.forEach(function(C,G){B+=e(C,C.localCapabilities,"offer",C.stream,n._dtlsRole);B+="a=rtcp-rsize\r\n";!C.iceGatherer||"new"===n.iceGatheringState||0!==G&&n.usingBundle||(C.iceGatherer.getLocalCandidates().forEach(function(M){M.component=1;B+="a="+f.writeCandidate(M)+"\r\n"}),"completed"===C.iceGatherer.state&&(B+="a=end-of-candidates\r\n"))});m=new l.RTCSessionDescription({type:"offer",sdp:B});return Promise.resolve(m)};u.prototype.createAnswer=
+function(){var m=this;if(m._isClosed)return Promise.reject(k("InvalidStateError","Can not call createAnswer after close"));if("have-remote-offer"!==m.signalingState&&"have-local-pranswer"!==m.signalingState)return Promise.reject(k("InvalidStateError","Can not call createAnswer in signalingState "+m.signalingState));var n=f.writeSessionBoilerplate(m._sdpSessionId,m._sdpSessionVersion++);m.usingBundle&&(n+="a=group:BUNDLE "+m.transceivers.map(function(B){return B.mid}).join(" ")+"\r\n");n+="a=ice-options:trickle\r\n";
+var x=f.getMediaSections(m._remoteDescription.sdp).length;m.transceivers.forEach(function(B,C){if(!(C+1>x))if(B.rejected)"application"===B.kind?n="DTLS/SCTP"===B.protocol?n+"m=application 0 DTLS/SCTP 5000\r\n":n+("m=application 0 "+B.protocol+" webrtc-datachannel\r\n"):"audio"===B.kind?n+="m=audio 0 UDP/TLS/RTP/SAVPF 0\r\na=rtpmap:0 PCMU/8000\r\n":"video"===B.kind&&(n+="m=video 0 UDP/TLS/RTP/SAVPF 120\r\na=rtpmap:120 VP8/90000\r\n"),n+="c=IN IP4 0.0.0.0\r\na=inactive\r\na=mid:"+B.mid+"\r\n";else{if(B.stream){var G;
+"audio"===B.kind?G=B.stream.getAudioTracks()[0]:"video"===B.kind&&(G=B.stream.getVideoTracks()[0]);G&&15019<=t&&"video"===B.kind&&!B.sendEncodingParameters[0].rtx&&(B.sendEncodingParameters[0].rtx={ssrc:B.sendEncodingParameters[0].ssrc+1})}C=h(B.localCapabilities,B.remoteCapabilities);!C.codecs.filter(function(M){return"rtx"===M.name.toLowerCase()}).length&&B.sendEncodingParameters[0].rtx&&delete B.sendEncodingParameters[0].rtx;n+=e(B,C,"answer",B.stream,m._dtlsRole);B.rtcpParameters&&B.rtcpParameters.reducedSize&&
+(n+="a=rtcp-rsize\r\n")}});var z=new l.RTCSessionDescription({type:"answer",sdp:n});return Promise.resolve(z)};u.prototype.addIceCandidate=function(m){var n=this,x;return m&&void 0===m.sdpMLineIndex&&!m.sdpMid?Promise.reject(new TypeError("sdpMLineIndex or sdpMid required")):new Promise(function(z,B){if(n._remoteDescription)if(m&&""!==m.candidate){var C=m.sdpMLineIndex;if(m.sdpMid)for(var G=0;G<n.transceivers.length;G++)if(n.transceivers[G].mid===m.sdpMid){C=G;break}var M=n.transceivers[C];if(M){if(M.rejected)return z();
+G=0<Object.keys(m.candidate).length?f.parseCandidate(m.candidate):{};if("tcp"===G.protocol&&(0===G.port||9===G.port)||G.component&&1!==G.component)return z();if((0===C||0<C&&M.iceTransport!==n.transceivers[0].iceTransport)&&!q(M.iceTransport,G))return B(k("OperationError","Can not add ICE candidate"));B=m.candidate.trim();0===B.indexOf("a=")&&(B=B.substr(2));x=f.getMediaSections(n._remoteDescription.sdp);x[C]+="a="+(G.type?B:"end-of-candidates")+"\r\n";n._remoteDescription.sdp=f.getDescription(n._remoteDescription.sdp)+
+x.join("")}else return B(k("OperationError","Can not add ICE candidate"))}else for(C=0;C<n.transceivers.length&&(n.transceivers[C].rejected||(n.transceivers[C].iceTransport.addRemoteCandidate({}),x=f.getMediaSections(n._remoteDescription.sdp),x[C]+="a=end-of-candidates\r\n",n._remoteDescription.sdp=f.getDescription(n._remoteDescription.sdp)+x.join(""),!n.usingBundle));C++);else return B(k("InvalidStateError","Can not add ICE candidate without a remote description"));z()})};u.prototype.getStats=function(m){if(m&&
+m instanceof l.MediaStreamTrack){var n=null;this.transceivers.forEach(function(z){z.rtpSender&&z.rtpSender.track===m?n=z.rtpSender:z.rtpReceiver&&z.rtpReceiver.track===m&&(n=z.rtpReceiver)});if(!n)throw k("InvalidAccessError","Invalid selector.");return n.getStats()}var x=[];this.transceivers.forEach(function(z){["rtpSender","rtpReceiver","iceGatherer","iceTransport","dtlsTransport"].forEach(function(B){z[B]&&x.push(z[B].getStats())})});return Promise.all(x).then(function(z){var B=new Map;z.forEach(function(C){C.forEach(function(G){B.set(G.id,
+G)})});return B})};["RTCRtpSender","RTCRtpReceiver","RTCIceGatherer","RTCIceTransport","RTCDtlsTransport"].forEach(function(m){if((m=l[m])&&m.prototype&&m.prototype.getStats){var n=m.prototype.getStats;m.prototype.getStats=function(){return n.apply(this).then(function(x){var z=new Map;Object.keys(x).forEach(function(B){var C=x[B];x[B].type={inboundrtp:"inbound-rtp",outboundrtp:"outbound-rtp",candidatepair:"candidate-pair",localcandidate:"local-candidate",remotecandidate:"remote-candidate"}[C.type]||
+C.type;z.set(B,x[B])});return z})}}});var A=["createOffer","createAnswer"];A.forEach(function(m){var n=u.prototype[m];u.prototype[m]=function(){var x=arguments;return"function"===typeof x[0]||"function"===typeof x[1]?n.apply(this,[arguments[2]]).then(function(z){"function"===typeof x[0]&&x[0].apply(null,[z])},function(z){"function"===typeof x[1]&&x[1].apply(null,[z])}):n.apply(this,arguments)}});A=["setLocalDescription","setRemoteDescription","addIceCandidate"];A.forEach(function(m){var n=u.prototype[m];
+u.prototype[m]=function(){var x=arguments;return"function"===typeof x[1]||"function"===typeof x[2]?n.apply(this,arguments).then(function(){"function"===typeof x[1]&&x[1].apply(null)},function(z){"function"===typeof x[2]&&x[2].apply(null,[z])}):n.apply(this,arguments)}});["getStats"].forEach(function(m){var n=u.prototype[m];u.prototype[m]=function(){var x=arguments;return"function"===typeof x[1]?n.apply(this,arguments).then(function(){"function"===typeof x[1]&&x[1].apply(null)}):n.apply(this,arguments)}});
+return u}},{sdp:17}],17:[function(a,b,c){var e={generateIdentifier:function(){return Math.random().toString(36).substr(2,10)}};e.localCName=e.generateIdentifier();e.splitLines=function(d){return d.trim().split("\n").map(function(h){return h.trim()})};e.splitSections=function(d){return d.split("\nm=").map(function(h,g){return(0<g?"m="+h:h).trim()+"\r\n"})};e.getDescription=function(d){return(d=e.splitSections(d))&&d[0]};e.getMediaSections=function(d){d=e.splitSections(d);d.shift();return d};e.matchPrefix=
+function(d,h){return e.splitLines(d).filter(function(g){return 0===g.indexOf(h)})};e.parseCandidate=function(d){d=0===d.indexOf("a=candidate:")?d.substring(12).split(" "):d.substring(10).split(" ");for(var h={foundation:d[0],component:parseInt(d[1],10),protocol:d[2].toLowerCase(),priority:parseInt(d[3],10),ip:d[4],address:d[4],port:parseInt(d[5],10),type:d[7]},g=8;g<d.length;g+=2)switch(d[g]){case "raddr":h.relatedAddress=d[g+1];break;case "rport":h.relatedPort=parseInt(d[g+1],10);break;case "tcptype":h.tcpType=
+d[g+1];break;case "ufrag":h.ufrag=d[g+1];h.usernameFragment=d[g+1];break;default:h[d[g]]=d[g+1]}return h};e.writeCandidate=function(d){var h=[];h.push(d.foundation);h.push(d.component);h.push(d.protocol.toUpperCase());h.push(d.priority);h.push(d.address||d.ip);h.push(d.port);var g=d.type;h.push("typ");h.push(g);"host"!==g&&d.relatedAddress&&d.relatedPort&&(h.push("raddr"),h.push(d.relatedAddress),h.push("rport"),h.push(d.relatedPort));d.tcpType&&"tcp"===d.protocol.toLowerCase()&&(h.push("tcptype"),
+h.push(d.tcpType));if(d.usernameFragment||d.ufrag)h.push("ufrag"),h.push(d.usernameFragment||d.ufrag);return"candidate:"+h.join(" ")};e.parseIceOptions=function(d){return d.substr(14).split(" ")};e.parseRtpMap=function(d){d=d.substr(9).split(" ");var h={payloadType:parseInt(d.shift(),10)};d=d[0].split("/");h.name=d[0];h.clockRate=parseInt(d[1],10);h.channels=3===d.length?parseInt(d[2],10):1;h.numChannels=h.channels;return h};e.writeRtpMap=function(d){var h=d.payloadType;void 0!==d.preferredPayloadType&&
+(h=d.preferredPayloadType);var g=d.channels||d.numChannels||1;return"a=rtpmap:"+h+" "+d.name+"/"+d.clockRate+(1!==g?"/"+g:"")+"\r\n"};e.parseExtmap=function(d){d=d.substr(9).split(" ");return{id:parseInt(d[0],10),direction:0<d[0].indexOf("/")?d[0].split("/")[1]:"sendrecv",uri:d[1]}};e.writeExtmap=function(d){return"a=extmap:"+(d.id||d.preferredId)+(d.direction&&"sendrecv"!==d.direction?"/"+d.direction:"")+" "+d.uri+"\r\n"};e.parseFmtp=function(d){for(var h={},g=d.substr(d.indexOf(" ")+1).split(";"),
+q=0;q<g.length;q++)d=g[q].trim().split("="),h[d[0].trim()]=d[1];return h};e.writeFmtp=function(d){var h="",g=d.payloadType;void 0!==d.preferredPayloadType&&(g=d.preferredPayloadType);if(d.parameters&&Object.keys(d.parameters).length){var q=[];Object.keys(d.parameters).forEach(function(k){d.parameters[k]?q.push(k+"="+d.parameters[k]):q.push(k)});h+="a=fmtp:"+g+" "+q.join(";")+"\r\n"}return h};e.parseRtcpFb=function(d){d=d.substr(d.indexOf(" ")+1).split(" ");return{type:d.shift(),parameter:d.join(" ")}};
+e.writeRtcpFb=function(d){var h="",g=d.payloadType;void 0!==d.preferredPayloadType&&(g=d.preferredPayloadType);d.rtcpFeedback&&d.rtcpFeedback.length&&d.rtcpFeedback.forEach(function(q){h+="a=rtcp-fb:"+g+" "+q.type+(q.parameter&&q.parameter.length?" "+q.parameter:"")+"\r\n"});return h};e.parseSsrcMedia=function(d){var h=d.indexOf(" "),g={ssrc:parseInt(d.substr(7,h-7),10)},q=d.indexOf(":",h);-1<q?(g.attribute=d.substr(h+1,q-h-1),g.value=d.substr(q+1)):g.attribute=d.substr(h+1);return g};e.parseSsrcGroup=
+function(d){d=d.substr(13).split(" ");return{semantics:d.shift(),ssrcs:d.map(function(h){return parseInt(h,10)})}};e.getMid=function(d){if(d=e.matchPrefix(d,"a=mid:")[0])return d.substr(6)};e.parseFingerprint=function(d){d=d.substr(14).split(" ");return{algorithm:d[0].toLowerCase(),value:d[1]}};e.getDtlsParameters=function(d,h){return{role:"auto",fingerprints:e.matchPrefix(d+h,"a=fingerprint:").map(e.parseFingerprint)}};e.writeDtlsParameters=function(d,h){var g="a=setup:"+h+"\r\n";d.fingerprints.forEach(function(q){g+=
+"a=fingerprint:"+q.algorithm+" "+q.value+"\r\n"});return g};e.parseCryptoLine=function(d){d=d.substr(9).split(" ");return{tag:parseInt(d[0],10),cryptoSuite:d[1],keyParams:d[2],sessionParams:d.slice(3)}};e.writeCryptoLine=function(d){return"a=crypto:"+d.tag+" "+d.cryptoSuite+" "+("object"===typeof d.keyParams?e.writeCryptoKeyParams(d.keyParams):d.keyParams)+(d.sessionParams?" "+d.sessionParams.join(" "):"")+"\r\n"};e.parseCryptoKeyParams=function(d){if(0!==d.indexOf("inline:"))return null;d=d.substr(7).split("|");
+return{keyMethod:"inline",keySalt:d[0],lifeTime:d[1],mkiValue:d[2]?d[2].split(":")[0]:void 0,mkiLength:d[2]?d[2].split(":")[1]:void 0}};e.writeCryptoKeyParams=function(d){return d.keyMethod+":"+d.keySalt+(d.lifeTime?"|"+d.lifeTime:"")+(d.mkiValue&&d.mkiLength?"|"+d.mkiValue+":"+d.mkiLength:"")};e.getCryptoParameters=function(d,h){return e.matchPrefix(d+h,"a=crypto:").map(e.parseCryptoLine)};e.getIceParameters=function(d,h){var g=e.matchPrefix(d+h,"a=ice-ufrag:")[0];d=e.matchPrefix(d+h,"a=ice-pwd:")[0];
+return g&&d?{usernameFragment:g.substr(12),password:d.substr(10)}:null};e.writeIceParameters=function(d){return"a=ice-ufrag:"+d.usernameFragment+"\r\na=ice-pwd:"+d.password+"\r\n"};e.parseRtpParameters=function(d){for(var h={codecs:[],headerExtensions:[],fecMechanisms:[],rtcp:[]},g=e.splitLines(d)[0].split(" "),q=3;q<g.length;q++){var k=g[q],f=e.matchPrefix(d,"a=rtpmap:"+k+" ")[0];if(f){f=e.parseRtpMap(f);var l=e.matchPrefix(d,"a=fmtp:"+k+" ");f.parameters=l.length?e.parseFmtp(l[0]):{};f.rtcpFeedback=
+e.matchPrefix(d,"a=rtcp-fb:"+k+" ").map(e.parseRtcpFb);h.codecs.push(f);switch(f.name.toUpperCase()){case "RED":case "ULPFEC":h.fecMechanisms.push(f.name.toUpperCase())}}}e.matchPrefix(d,"a=extmap:").forEach(function(t){h.headerExtensions.push(e.parseExtmap(t))});return h};e.writeRtpDescription=function(d,h){var g="";g+="m="+d+" ";g+=0<h.codecs.length?"9":"0";g+=" UDP/TLS/RTP/SAVPF ";g+=h.codecs.map(function(k){return void 0!==k.preferredPayloadType?k.preferredPayloadType:k.payloadType}).join(" ")+
+"\r\n";g+="c=IN IP4 0.0.0.0\r\n";g+="a=rtcp:9 IN IP4 0.0.0.0\r\n";h.codecs.forEach(function(k){g+=e.writeRtpMap(k);g+=e.writeFmtp(k);g+=e.writeRtcpFb(k)});var q=0;h.codecs.forEach(function(k){k.maxptime>q&&(q=k.maxptime)});0<q&&(g+="a=maxptime:"+q+"\r\n");g+="a=rtcp-mux\r\n";h.headerExtensions&&h.headerExtensions.forEach(function(k){g+=e.writeExtmap(k)});return g};e.parseRtpEncodingParameters=function(d){var h=[],g=e.parseRtpParameters(d),q=-1!==g.fecMechanisms.indexOf("RED"),k=-1!==g.fecMechanisms.indexOf("ULPFEC"),
+f=e.matchPrefix(d,"a=ssrc:").map(function(r){return e.parseSsrcMedia(r)}).filter(function(r){return"cname"===r.attribute}),l=0<f.length&&f[0].ssrc,t;f=e.matchPrefix(d,"a=ssrc-group:FID").map(function(r){return r.substr(17).split(" ").map(function(y){return parseInt(y,10)})});0<f.length&&1<f[0].length&&f[0][0]===l&&(t=f[0][1]);g.codecs.forEach(function(r){"RTX"===r.name.toUpperCase()&&r.parameters.apt&&(r={ssrc:l,codecPayloadType:parseInt(r.parameters.apt,10)},l&&t&&(r.rtx={ssrc:t}),h.push(r),q&&(r=
+JSON.parse(JSON.stringify(r)),r.fec={ssrc:l,mechanism:k?"red+ulpfec":"red"},h.push(r)))});0===h.length&&l&&h.push({ssrc:l});var w=e.matchPrefix(d,"b=");w.length&&(w=0===w[0].indexOf("b=TIAS:")?parseInt(w[0].substr(7),10):0===w[0].indexOf("b=AS:")?950*parseInt(w[0].substr(5),10)-16E3:void 0,h.forEach(function(r){r.maxBitrate=w}));return h};e.parseRtcpParameters=function(d){var h={},g=e.matchPrefix(d,"a=ssrc:").map(function(q){return e.parseSsrcMedia(q)}).filter(function(q){return"cname"===q.attribute})[0];
+g&&(h.cname=g.value,h.ssrc=g.ssrc);g=e.matchPrefix(d,"a=rtcp-rsize");h.reducedSize=0<g.length;h.compound=0===g.length;d=e.matchPrefix(d,"a=rtcp-mux");h.mux=0<d.length;return h};e.parseMsid=function(d){var h=e.matchPrefix(d,"a=msid:");if(1===h.length)return d=h[0].substr(7).split(" "),{stream:d[0],track:d[1]};d=e.matchPrefix(d,"a=ssrc:").map(function(g){return e.parseSsrcMedia(g)}).filter(function(g){return"msid"===g.attribute});if(0<d.length)return d=d[0].value.split(" "),{stream:d[0],track:d[1]}};
+e.parseSctpDescription=function(d){var h=e.parseMLine(d),g=e.matchPrefix(d,"a=max-message-size:"),q;0<g.length&&(q=parseInt(g[0].substr(19),10));isNaN(q)&&(q=65536);g=e.matchPrefix(d,"a=sctp-port:");if(0<g.length)return{port:parseInt(g[0].substr(12),10),protocol:h.fmt,maxMessageSize:q};if(0<e.matchPrefix(d,"a=sctpmap:").length)return d=e.matchPrefix(d,"a=sctpmap:")[0].substr(10).split(" "),{port:parseInt(d[0],10),protocol:d[1],maxMessageSize:q}};e.writeSctpDescription=function(d,h){d="DTLS/SCTP"!==
+d.protocol?["m="+d.kind+" 9 "+d.protocol+" "+h.protocol+"\r\n","c=IN IP4 0.0.0.0\r\n","a=sctp-port:"+h.port+"\r\n"]:["m="+d.kind+" 9 "+d.protocol+" "+h.port+"\r\n","c=IN IP4 0.0.0.0\r\n","a=sctpmap:"+h.port+" "+h.protocol+" 65535\r\n"];void 0!==h.maxMessageSize&&d.push("a=max-message-size:"+h.maxMessageSize+"\r\n");return d.join("")};e.generateSessionId=function(){return Math.random().toString().substr(2,21)};e.writeSessionBoilerplate=function(d,h,g){h=void 0!==h?h:2;d=d?d:e.generateSessionId();return"v=0\r\no="+
+(g||"thisisadapterortc")+" "+d+" "+h+" IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\n"};e.writeMediaSection=function(d,h,g,q){h=e.writeRtpDescription(d.kind,h);h+=e.writeIceParameters(d.iceGatherer.getLocalParameters());h+=e.writeDtlsParameters(d.dtlsTransport.getLocalParameters(),"offer"===g?"actpass":"active");h+="a=mid:"+d.mid+"\r\n";h=d.direction?h+("a="+d.direction+"\r\n"):d.rtpSender&&d.rtpReceiver?h+"a=sendrecv\r\n":d.rtpSender?h+"a=sendonly\r\n":d.rtpReceiver?h+"a=recvonly\r\n":h+"a=inactive\r\n";d.rtpSender&&
+(g="msid:"+q.id+" "+d.rtpSender.track.id+"\r\n",h=h+("a="+g)+("a=ssrc:"+d.sendEncodingParameters[0].ssrc+" "+g),d.sendEncodingParameters[0].rtx&&(h+="a=ssrc:"+d.sendEncodingParameters[0].rtx.ssrc+" "+g,h+="a=ssrc-group:FID "+d.sendEncodingParameters[0].ssrc+" "+d.sendEncodingParameters[0].rtx.ssrc+"\r\n"));h+="a=ssrc:"+d.sendEncodingParameters[0].ssrc+" cname:"+e.localCName+"\r\n";d.rtpSender&&d.sendEncodingParameters[0].rtx&&(h+="a=ssrc:"+d.sendEncodingParameters[0].rtx.ssrc+" cname:"+e.localCName+
+"\r\n");return h};e.getDirection=function(d,h){d=e.splitLines(d);for(var g=0;g<d.length;g++)switch(d[g]){case "a=sendrecv":case "a=sendonly":case "a=recvonly":case "a=inactive":return d[g].substr(2)}return h?e.getDirection(h):"sendrecv"};e.getKind=function(d){return e.splitLines(d)[0].split(" ")[0].substr(2)};e.isRejected=function(d){return"0"===d.split(" ",2)[1]};e.parseMLine=function(d){d=e.splitLines(d)[0].substr(2).split(" ");return{kind:d[0],port:parseInt(d[1],10),protocol:d[2],fmt:d.slice(3).join(" ")}};
+e.parseOLine=function(d){d=e.matchPrefix(d,"o=")[0].substr(2).split(" ");return{username:d[0],sessionId:d[1],sessionVersion:parseInt(d[2],10),netType:d[3],addressType:d[4],address:d[5]}};e.isValidSDP=function(d){if("string"!==typeof d||0===d.length)return!1;d=e.splitLines(d);for(var h=0;h<d.length;h++)if(2>d[h].length||"="!==d[h].charAt(1))return!1;return!0};"object"===typeof b&&(b.exports=e)},{}]},{},[1])(1)});class Yb{constructor(a){this.FrameDisplayDeltaTimeMs=this.BrowserReceiptTimeMs=this.UETransmissionTimeMs=
+this.UECaptureToSendMs=this.UEEncodeMs=this.UEReceiptTimeMs=this.TestStartTimeMs=null;this.onReady=a}reset(){this.FrameDisplayDeltaTimeMs=this.BrowserReceiptTimeMs=this.UETransmissionTimeMs=this.UEEncodeMs=this.UECaptureToSendMs=this.UEReceiptTimeMs=this.TestStartTimeMs=null}start(){this.reset();this.TestStartTimeMs=Date.now();if(this.onReady)this.onReady()}setUETimings(a){this.UEReceiptTimeMs=a.ReceiptTimeMs;this.UEEncodeMs=a.EncodeMs;this.UECaptureToSendMs=a.CaptureToSendMs;this.UETransmissionTimeMs=
+a.TransmissionTimeMs;this.BrowserReceiptTimeMs=Date.now();this.latencyTimingsReady()}setFrameDisplayDeltaTime(a){null==this.FrameDisplayDeltaTimeMs&&(this.FrameDisplayDeltaTimeMs=Math.round(a),this.latencyTimingsReady())}latencyTimingsReady(){if(this.BrowserReceiptTimeMs){var a=this.BrowserReceiptTimeMs-this.TestStartTimeMs,b=this.UECaptureToSendMs,c=this.UETransmissionTimeMs-this.UEReceiptTimeMs,e=a-c,d={latencyExcludingDecode:a,encodeLatency:this.UEEncodeMs.toFixed(1),uePixelStreamLatency:b.toFixed(1),
+ueTestDuration:c.toFixed(1),networkLatency:e.toFixed(1)};this.FrameDisplayDeltaTimeMs&&this.BrowserReceiptTimeMs&&(d.endToEndLatency=this.FrameDisplayDeltaTimeMs+e+("string"===typeof b?0:b),d.browserSideLatency=this.FrameDisplayDeltaTimeMs+(a-e-c),d.endToEndLatency=d.endToEndLatency.toFixed(1),d.browserSideLatency=d.browserSideLatency.toFixed(1));if(this.onReady)this.onReady(d)}}}class Zb{constructor(a){this.useStats=a.useStats;this.events=a.events;this.webRtcConfig=a.peerConnectionOptions||{};this.webRtcConfig.sdpSemantics=
+"unified-plan";this.tnClient=this.dcClient=this.pcClient=null;this.sdpConstraints={offerToReceiveAudio:0,offerToReceiveVideo:1,voiceActivityDetection:!1};this.dataChannelOptions={ordered:!0};this.lastStats={};this.playerId=0;this.latencyTestTimings=new Yb(this.events.onLatencyTimingsReady);this._bSendingAPI=!1;this._apiSendingQueue=[]}setVideo(a){this.video=a}logStartupInfo(a){if(this.events.onlog)this.events.onlog(a)}setupPeerConnection(){this.pcClient||(this.pcClient=new RTCPeerConnection(this.webRtcConfig),
+this.pcClient.addTransceiver("video",{direction:"recvonly"}),this.pcClient.onsignalingstatechange=a=>this.onStateChanged(a),this.pcClient.oniceconnectionstatechange=a=>this.onStateChanged(a),this.pcClient.onicegatheringstatechange=a=>this.onStateChanged(a),this.pcClient.ontrack=a=>this.events.ontrack(a),this.pcClient.onicecandidate=a=>this.events.onicecandidate(a),this.pcClient.ondatachannel=a=>{this.dcClient=a.channel;this.setupDataChannelCallbacks()})}close(){this.dcClient&&"open"==this.dcClient.readyState&&
+(this.dcClient.close(),this.dcClient=null);this.pcClient&&(this.pcClient.close(),this.pcClient=null);this.clearStatsTimer()}setupDataChannelCallbacks(){this.dcClient.binaryType="arraybuffer";this.dcClient.onopen=a=>{this.isDatachannelOpened=!0;if(this.events&&this.events.ondatachannelopen)this.events.ondatachannelopen(a);this.logStartupInfo("video: loading...")};this.dcClient.onclose=a=>{this.isDatachannelOpened=!1;this.clearStatsTimer();if(this.events&&this.events.ondatachannelclose)this.events.ondatachannelclose(a)};
+this.dcClient.onerror=a=>{this.isDatachannelOpened=!1;this.logStartupInfo("channel error");if(this.events&&this.events.ondatachannelerror)this.events.ondatachannelerror(a)};this.dcClient.onmessage=a=>this.onDatachannelMessage(a)}createOffer(){this.close();this.setupPeerConnection();try{this.dcClient=this.pcClient.createDataChannel("cirrus",this.dataChannelOptions),this.setupDataChannelCallbacks(),this.logStartupInfo("channel created")}catch(a){this.logStartupInfo("no channel"),this.dcClient=null}this.pcClient.createOffer(this.sdpConstraints).then(a=>
+{a.sdp=a.sdp.replace("useinbandfec=1","useinbandfec=1;stereo=1;sprop-maxcapturerate=48000");this.pcClient.setLocalDescription(a);this.events.onOfferCreated(a)},()=>{this.logStartupInfo("couldn't create offer")})}onReceiveOffer(a){a=new RTCSessionDescription(a);this.setupPeerConnection();this.pcClient.setRemoteDescription(a).then(()=>{this.pcClient.createAnswer().then(b=>this.pcClient.setLocalDescription(b)).then(()=>{if(this.events.onAnswerCreated)this.events.onAnswerCreated(this.pcClient.currentLocalDescription)}).then(()=>
+{let b=this.pcClient.getReceivers();for(let c of b)c.playoutDelayHint=0}).catch(b=>console.error("createAnswer() failed:",b))});this.setupLiveStats()}onIceCandidate(a){a=new RTCIceCandidate(a);this.pcClient.addIceCandidate(a).then(b=>{this.logStartupInfo("candidate added")})}onReceiveAnswer(a){this.playerId=a.playerId;this.logStartupInfo(`received answer: ${this.playerId}`);a=new RTCSessionDescription(a);this.pcClient.setRemoteDescription(a);a=this.pcClient.getReceivers();for(let b of a)b.playoutDelayHint=
+0;this.setupLiveStats()}setupLiveStats(){this.clearStatsTimer();this.useStats&&!this.aggregateStatsIntervalId&&(this.aggregateStatsIntervalId=setInterval(()=>{this.pcClient&&this.pcClient.getStats(null).then(a=>this.processLiveStats(a))},1E3))}onStateChanged(a){this.signalingState!=this.pcClient.signalingState&&(this.signalingState=this.pcClient.signalingState,this.logStartupInfo(`__signaling: ${this.signalingState}`));this.iceConnectionState!=this.pcClient.iceConnectionState&&(this.iceConnectionState=
+this.pcClient.iceConnectionState,this.logStartupInfo(`__ice_connection: ${this.iceConnectionState}`),"disconnected"!=this.iceConnectionState||this.isDatachannelOpened||this.logStartupInfo("\u8fde\u63a5\u5efa\u7acb\u5931\u8d25\uff0c\u8bf7\u68c0\u67e5\u670d\u52a1\u5668\u7aef\u53e3\u8bbe\u7f6e"),"failed"!=this.iceConnectionState||this.isDatachannelOpened||this.logStartupInfo("\u8fde\u63a5\u5efa\u7acb\u5931\u8d25\uff0c\u65e0\u53ef\u7528\u7684\u5019\u9009\u8fde\u63a5"));this.iceGatheringState!=this.pcClient.iceGatheringState&&
+(this.iceGatheringState=this.pcClient.iceGatheringState,this.logStartupInfo(`__ice_gathering: ${this.iceGatheringState}`))}clearStatsTimer(){this.aggregateStatsIntervalId&&(clearInterval(this.aggregateStatsIntervalId),this.aggregateStatsIntervalId=void 0)}send(a){return this.dcClient&&"open"==this.dcClient.readyState?(this.dcClient.send(a),!0):!1}requestInitialSettings(){this.send((new Uint8Array([7])).buffer)}requestQualityControl(){this.send((new Uint8Array([1])).buffer)}sendEnableIntervalSendQP(a){this.send((new Uint8Array([11,
+a?1:0])).buffer)}_continueSendAPI(){if(0<this._apiSendingQueue.length){let a=this._apiSendingQueue.shift();this.sendApi(a)}}sendApi(a){if(this._bSendingAPI)this._apiSendingQueue.push(a);else{this._bSendingAPI=!0;a.__playerId=this.playerId;var b=JSON.stringify(a),c=b.length,e=this.pcClient.sctp?Math.min(this.pcClient.sctp.maxMessageSize,65536):65536,d=(e-4)/2;if(c>d){this.numOfEventCalls=0;let g=Math.ceil(c/d),q=[];for(var h=0;h<g;h++){let t=h==g-1?c-h*d:d;q[h]={type:0==h?1:h==g-1?3:2,stringLength:t,
+content:b.substr(h*d,t)}}let k=0,f=t=>{for(t=this.dcClient.bufferedAmount;k<q.length;){var w=q[k++];let r=new DataView(new ArrayBuffer(4+2*w.stringLength)),y=0;r.setUint8(y,52);y++;r.setUint8(y,w.type);y++;r.setUint16(y,w.stringLength,!0);y+=2;w=w.content;for(let u=0;u<w.length;u++)r.setUint16(y,w.charCodeAt(u),!0),y+=2;t+=r.byteLength;this.send(r.buffer);if(k==g-1)console.log(`api(command: ${a.command}) slices send finished. bufferedamountlow calls: ${this.numOfEventCalls}`),this.dcClient.onbufferedamountlow=
+null,this._bSendingAPI=!1,setTimeout(()=>this._continueSendAPI(),100);else if(t>l)break}},l=Math.max(8*e,1048576);this.dcClient.bufferedAmountLowThreshold=e;this.dcClient.onbufferedamountlow=t=>{this.numOfEventCalls++;f()};console.log(`sending api(command: ${a.command}) slices, count: ${g}`);f()}else{e=new DataView(new ArrayBuffer(4+2*c));d=0;e.setUint8(d,52);d++;e.setUint8(d,0);d++;e.setUint16(d,c,!0);d+=2;for(h=0;h<c;h++)e.setUint16(d,b.charCodeAt(h),!0),d+=2;this.send(e.buffer);this._bSendingAPI=
+!1;this._continueSendAPI()}}}sendDescriptor(a,b){b=JSON.stringify(b);let c=new DataView(new ArrayBuffer(3+2*b.length)),e=0;c.setUint8(e,a);e++;c.setUint16(e,b.length,!0);e+=2;for(a=0;a<b.length;a++)c.setUint16(e,b.charCodeAt(a),!0),e+=2;this.send(c.buffer)}updateRenderResolution(a,b){a={Console:"setres "+a+"x"+b+"w"};console.log(JSON.stringify(a));this.sendDescriptor(50,a)}updateParams(a){a.encodeMaxQP&&this.sendDescriptor(50,{Console:"PixelStreaming.Encoder.MaxQP "+a.encodeMaxQP});a.keyframeInterval&&
+this.sendDescriptor(50,{Console:"PixelStreaming.Encoder.KeyframeInterval "+a.keyframeInterval});a.maxBitrate&&this.sendDescriptor(50,{Console:"PixelStreaming.WebRTC.MaxBitrate "+a.maxBitrate})}processLiveStats(a){let b={};a.forEach(c=>{"inbound-rtp"!=c.type||c.isRemote||"video"!=c.mediaType&&!c.id.toLowerCase().includes("video")||(b.timestamp=c.timestamp,b.timestampStart=this.lastStats&&this.lastStats.timestampStart?this.lastStats.timestampStart:c.timestamp,b.bytesReceived=c.bytesReceived,b.packetsLost=
+c.packetsLost,b.framesDropped=c.framesDropped,b.framesPerSecond=c.framesPerSecond,b.framesReceived=c.framesReceived,b.framesDecoded=c.framesDecoded,b.keyFramesDecoded=c.keyFramesDecoded,b.frameWidth=c.frameWidth,b.frameHeight=c.frameHeight,this.lastStats&&(b.bitrate=8*(b.bytesReceived-this.lastStats.bytesReceived)/(b.timestamp-this.lastStats.timestamp)));"track"==c.type&&c.frameWidth&&(c.framesDropped&&(b.framesDropped=c.framesDropped),c.framesReceived&&(b.framesReceived=c.framesReceived),b.frameWidth=
+c.frameWidth,b.frameHeight=c.frameHeight);"candidate-pair"==c.type&&c.hasOwnProperty("currentRoundTripTime")&&0!=c.currentRoundTripTime&&(b.currentRoundTripTime=c.currentRoundTripTime)});this.lastStats.receiveToCompositeMs&&(b.receiveToCompositeMs=this.lastStats.receiveToCompositeMs,this.latencyTestTimings.setFrameDisplayDeltaTime(this.lastStats.receiveToCompositeMs));this.lastStats=b;this.events.onstats(this.lastStats)}onDatachannelMessage(a){var b=new Uint8Array(a.data);switch(b[0]){case 0:this.events.ondatachannelmessage("QualityControlOwnership",
+1==b[1]);break;case 1:if((a=(new TextDecoder("utf-16")).decode(a.data.slice(1)))&&""!=a)this.events.ondatachannelmessage("ResponseAPI",a);break;case 101:b=b[1];a=(new TextDecoder("utf-8")).decode(a.data.slice(2));switch(b){case 0:this.events.ondatachannelmessage("ResponseAPI",a);break;case 1:this.reponse_api_json_string=a;break;case 2:this.reponse_api_json_string+=a;break;case 3:this.reponse_api_json_string+=a,this.events.ondatachannelmessage("ResponseAPI",this.reponse_api_json_string)}break;case 6:a=
+(new TextDecoder("utf-16")).decode(a.data.slice(1));a=JSON.parse(a);this.latencyTestTimings.setUETimings(a);break;case 7:a=(new TextDecoder("utf-16")).decode(a.data.slice(1));a=JSON.parse(a);if(a.Encoder)this.events.ondatachannelmessage("InitialSettings",a);break;case 5:this.events.ondatachannelmessage("VideoEncoderAvgQP",a)}}startLatencyTest(){this.video&&(this.latencyTestTimings.start(),this.sendDescriptor(6,{StartTime:this.latencyTestTimings.TestStartTimeMs}))}}class ia{constructor(a){this.player=
+a;this.uid=a.uid;this.container=a.container}appendElement(a){this.container.appendChild(a);this.setNeedReposUI()}removeElement(a){this.container.removeChild(a)}get(a){return wa(a+"_"+this.uid)}getValue(a){let b;return null==(b=this.get(a))?void 0:b.value}setValue(a,b){(a=this.get(a))&&(a.value=b)}setText(a,b){(a=this.get(a))&&(a.innerText=b)}setHtml(a,b){(a=this.get(a))&&(a.innerHTML=b)}resize(){this.player.resize()}setNeedReposUI(){this.player.bNeedReposUI=!0}}class $b extends ia{constructor(a){super(a);
+this.el=document.createElement("pre");this.el.id=`eventsPanel_${this.uid}`;this.el.className="__eventsPanel";this.el.oncontextmenu=new Function("return false");this.el.onselectstart=new Function("return false");this.appendElement(this.el)}destroy(){this.el&&(this.removeElement(this.el),this.el=null)}appendText(a){if(this.el){let b=this.el.innerText;b+=a+"\n";this.el.innerText=b;this.el.scrollTop=this.el.scrollHeight+100}}setPosition(a){a||(a=this.container.getBoundingClientRect());this.el&&(this.el.style.width=
+`${a.width}px`)}}class ca{}ca.Information='<svg width="22" height="22" viewBox="0 0 32 32"><g transform="translate(1878 2755)"><rect width="32" height="32" transform="translate(-1878 -2755)" fill="none"/><path d="M11,22A11,11,0,0,1,3.222,3.222,11,11,0,1,1,18.779,18.778,10.929,10.929,0,0,1,11,22ZM8.5,10a.5.5,0,0,0-.5.5v2a.5.5,0,0,0,.5.5H10v5.5a.5.5,0,0,0,.5.5h2a.5.5,0,0,0,.5-.5v-8a.5.5,0,0,0-.5-.5ZM11,4a2,2,0,1,0,2,2A2,2,0,0,0,11,4Z" transform="translate(-1873 -2750)" fill="#3c3b3c"/></g></svg>';ca.FullScreenEnter=
+'<svg width="22" height="22" viewBox="0 0 32 32"><g id="cloud_icon_fullscreen_def" transform="translate(1787 2755)"><rect width="32" height="32" transform="translate(-1787 -2755)" fill="none"/><g transform="translate(0 -0.5)"><g transform="translate(-1780 -2747.5)"><rect width="10" height="10" transform="translate(-2 -2)" fill="none"/><path d="M12,0H7A1,1,0,0,0,6,1V6" transform="translate(-6)" fill="none" stroke="#3c3b3c" stroke-width="2"/><path d="M6,6.5,0,1" transform="translate(0.5 -0.5)" fill="none" stroke="#3c3b3c" stroke-width="2"/></g><g transform="translate(-1782 -2737.5)"><rect width="10" height="10" fill="none"/><path d="M12,6H7A1,1,0,0,1,6,5V0" transform="translate(-4 2)" fill="none" stroke="#3c3b3c" stroke-width="2"/><path d="M6,1,0,6.5" transform="translate(2.5 1)" fill="none" stroke="#3c3b3c" stroke-width="2"/></g><g transform="translate(-1770 -2749.5)"><rect width="10" height="10" fill="none"/><path d="M6,0h5a1,1,0,0,1,1,1V6" transform="translate(-4 2)" fill="none" stroke="#3c3b3c" stroke-width="2"/><path d="M0,6.5,6,1" transform="translate(1.5 1.5)" fill="none" stroke="#3c3b3c" stroke-width="2"/></g><g transform="translate(-1770 -2737.5)"><rect width="10" height="10" fill="none"/><path d="M6,6h5a1,1,0,0,0,1-1V0" transform="translate(-4 2)" fill="none" stroke="#3c3b3c" stroke-width="2"/><path d="M0,1,6,6.5" transform="translate(1.5 1)" fill="none" stroke="#3c3b3c" stroke-width="2"/></g></g></g></svg>';
+ca.FullScreenExit='<svg width="22" height="22" viewBox="0 0 32 32"><g id="cloud_icon_exotfullsc_def" transform="translate(1744 2755)"><rect width="32" height="32" transform="translate(-1744 -2755)" fill="none"/><g transform="translate(0 -1)"><g transform="translate(-1739 -2749)"><rect width="10" height="10" fill="none"/><path d="M6,6h5a1,1,0,0,0,1-1V0" transform="translate(-4 2)" fill="none" stroke="#3c3b3c" stroke-width="2"/><path d="M0,1,6,6.5" transform="translate(1.5 1)" fill="none" stroke="#3c3b3c" stroke-width="2"/></g><g transform="translate(-1739 -2737)"><rect width="10" height="10" fill="none"/><path d="M6,0h5a1,1,0,0,1,1,1V6" transform="translate(-4 2)" fill="none" stroke="#3c3b3c" stroke-width="2"/><path d="M0,6.5,6,1" transform="translate(1.5 1.5)" fill="none" stroke="#3c3b3c" stroke-width="2"/></g><g transform="translate(-1727 -2749)"><rect width="10" height="10" fill="none"/><path d="M12,6H7A1,1,0,0,1,6,5V0" transform="translate(-4 2)" fill="none" stroke="#3c3b3c" stroke-width="2"/><path d="M6,1,0,6.5" transform="translate(2.5 1)" fill="none" stroke="#3c3b3c" stroke-width="2"/></g><g transform="translate(-1727 -2737)"><rect width="10" height="10" fill="none"/><path d="M12,0H7A1,1,0,0,0,6,1V6" transform="translate(-4 2)" fill="none" stroke="#3c3b3c" stroke-width="2"/><path d="M6,6.5,0,1" transform="translate(2.5 1.5)" fill="none" stroke="#3c3b3c" stroke-width="2"/></g></g></g></svg>';
+ca.InitialCamera='<svg width="22" height="22" viewBox="0 0 32 32"><g id="cloud_icon_initialpos_def" transform="translate(1831 2755)"><rect width="32" height="32" transform="translate(-1831 -2755)" fill="none"/><path d="M18.667,22.222H1.333A1.333,1.333,0,0,1,0,20.893V8.24A1.319,1.319,0,0,1,.5,7.2L9.167.292a1.335,1.335,0,0,1,1.666,0L19.5,7.2A1.319,1.319,0,0,1,20,8.24V20.893A1.333,1.333,0,0,1,18.667,22.222ZM9,12.11a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1v-6a1,1,0,0,0-1-1Z" transform="translate(-1825 -2751.11)" fill="#3c3b3c" stroke="rgba(0,0,0,0)" stroke-width="1"/></g></svg>';
+class ac extends ia{constructor(a){super(a);this.create()}create(){if(!this.el){this.el=document.createElement("button");this.el.id=`fullscreeButton_${this.uid}`;this.el.className="__fullscreeButton";if(R.isIOSDevice||R.isSafari)this.el.style.backgroundSize="cover";this.el.innerHTML=ca.FullScreenEnter;this.el.title=H.getString("EnterFullscreen");this.el.oncontextmenu=new Function("return false");this.el.onselectstart=new Function("return false");this.el.onclick=()=>this.player.fullscreen=!this.player.fullscreen;
+this.el.onmousedown=a=>{1==a.button&&a.preventDefault()};this.appendElement(this.el);document.addEventListener("fullscreenchange",()=>{this.el.title=H.getString("ExitFullscreen");this.el.innerHTML=R.isFullscreen()?ca.FullScreenExit:ca.FullScreenEnter;this.player.resize()})}}destroy(){this.el&&(this.removeElement(this.el),this.el=null)}setPosition(a,b){a||(a=this.container.getBoundingClientRect());this.el&&(this.el.style.left=`${b?38:5}px`,this.el.style.top=`${a.height-32}px`)}}const ea={BackSpace:8,
+Shift:16,Control:17,Alt:18,RightShift:253,RightControl:254,RightAlt:255};class bc extends ia{constructor(a,b){super(a);this.video=null;this.useBuiltinCursors=b.useBuiltinCursors;this.keyEventTargetStr=b.keyEventTarget;this.keyEventTarget="document"==b.keyEventTarget?document:"none"==b.keyEventTarget?null:"video";this.callOnUserInteraction=()=>this.player.resetInteractTimestamp();this.fakeMouseWithTouches=!1;this.onMButtonDoubleClick=b.onMButtonDoubleClick;this.mouseKeyListener=b.mouseKeyListener;
+this.onActionEnable=!0;this.onEvents=b.onEvents;this.onVideoLoaded=b.onVideoLoaded;document.addEventListener("WeixinJSBridgeReady",()=>{R.isInWeixinBrowser=!0;this.video.play()});this.create()}isVideoLoaded(){return!!this._isVideoLoaded}create(){this.video&&this.destroy();this.video||(this.video=document.createElement("video"),this.video.id=`streamingVideo_${this.uid}`,this.video.style="position:absolute;",this.video.playsInline=!0,this.video.muted=!0,this.video.autoplay=!0,this.video.disablepictureinpicture=
+!0,"video"===this.keyEventTarget&&(this.video.tabIndex=1,this.keyEventTarget=this.video),this.appendElement(this.video),this.player.logStartupInfo("video element created"),this._isVideoLoaded=!1,this.video.addEventListener("loadedmetadata",()=>{this._isVideoLoaded=!0;this.video.onmouseenter({button:0,x:0,y:0});this.onVideoLoaded()},!0),this.setCursor());if("requestVideoFrameCallback"in HTMLVideoElement.prototype){const a=(b,c)=>{c.receiveTime&&c.expectedDisplayTime&&(this.rtc.lastStats.receiveToCompositeMs=
+c.presentationTime-c.receiveTime);this.video&&this.video.requestVideoFrameCallback(a)};this.video.requestVideoFrameCallback(a)}}setWebRtcPlayer(a){(!this.video||R.isAndroidDevice||R.isIOSDevice&&!R.isInWeixinBrowser)&&this.create();this.rtc=a;this.rtc.setVideo(this.video)}setActionEventEnabled(a){this.onActionEnable=a}destroy(){this.video&&(this.removeElement(this.video),this.video=null)}valid(){return!!this.video}videoWidth(){let a;return null==(a=this.video)?void 0:a.videoWidth}videoHeight(){let a;
+return null==(a=this.video)?void 0:a.videoHeight}clientWidth(){let a;return null==(a=this.video)?void 0:a.clientWidth}clientHeight(){let a;return null==(a=this.video)?void 0:a.clientHeight}setTrack(a){let b=a.streams[0];this.player.logStartupInfo("track: "+a.track.kind);"audio"==a.track.kind?(a=document.createElement("Audio"),a.autoplay=!0,a.srcObject=b,a.play(),this.player.logStartupInfo("audio element created")):"video"==a.track.kind&&this.video.srcObject!==b&&(this.video.srcObject=b)}setKeyEventTarget(a){this.keyEventTargetStr!=
+a&&(this.clearKeyboardEvents(),"video"==a?(this.video&&(this.video.tabIndex=1),this.keyEventTarget=this.video,this.video.focus()):"document"==a?(this.keyEventTarget=document,this.video.focus()):this.keyEventTarget&&(this.keyEventTarget=null),this.keyEventTargetStr=a,this.registerKeyboardEvents())}clearKeyboardEvents(){this.keyEventTarget&&(this.keyEventTarget.onkeydown=null,this.keyEventTarget.onkeyup=null,this.keyEventTarget.onkeypress=null)}registerKeyboardEvents(){this.keyEventTarget&&(this.keyEventTarget.onkeydown=
+a=>{112<=a.keyCode&&123>=a.keyCode||a.ctrlKey||this.sendKeydown(a);if(a.keyCode===ea.BackSpace)this.keyEventTarget.onkeypress({charCode:ea.BackSpace});this.callActionEventHander(5,a)},this.keyEventTarget.onkeyup=a=>{112<=a.keyCode&&123>=a.keyCode||a.ctrlKey||this.sendKeyup(a);this.callActionEventHander(6,a)},this.keyEventTarget.onkeypress=a=>{112<=a.keyCode&&123>=a.keyCode||this.sendKeypress(a);this.callActionEventHander(7,a)})}setCursor(){if(this.video)if(this.useBuiltinCursors)switch(this.mouseDownButton){case 0:this.video.setAttribute("class",
+"streamingVideoCursorPan");break;case 1:this.video.setAttribute("class","streamingVideoCursorMove");break;case 2:this.video.setAttribute("class","streamingVideoCursorRotate");break;default:this.video.setAttribute("class","streamingVideoCursorPointer")}else this.video.setAttribute("class","streamingVideoNoCursor")}callActionEventHander(a,b){if(this.mouseKeyListener&&this.onActionEnable)switch(a){case 0:if(R.isFunction(this.mouseKeyListener.onMouseEnter))this.mouseKeyListener.onMouseEnter(b);break;
+case 1:if(R.isFunction(this.mouseKeyListener.onMouseLeave))this.mouseKeyListener.onMouseLeave(b);break;case 2:if(R.isFunction(this.mouseKeyListener.onMouseMove))this.mouseKeyListener.onMouseMove(b);break;case 3:if(R.isFunction(this.mouseKeyListener.onMouseDown))this.mouseKeyListener.onMouseDown(b);break;case 4:if(R.isFunction(this.mouseKeyListener.onMouseUp))this.mouseKeyListener.onMouseUp(b);break;case 5:if(R.isFunction(this.mouseKeyListener.onKeyDown))this.mouseKeyListener.onKeyDown(b);break;case 6:if(R.isFunction(this.mouseKeyListener.onKeyUp))this.mouseKeyListener.onKeyUp(b);
+break;case 7:if(R.isFunction(this.mouseKeyListener.onKeyPress))this.mouseKeyListener.onKeyPress(b)}}isMiddleDoubleClick(a){if(1==a.button){if(this.lastMClickTimestamp&&200>a.timeStamp-this.lastMClickTimestamp)return!0;this.lastMClickTimestamp=a.timeStamp}else this.lastMClickTimestamp=void 0;return!1}registerMouseEvents(){this.video.onmouseenter=a=>{this.sendMouseEnter();a.buttons&1&&this.sendMouseDown(0,a.offsetX,a.offsetY);a.buttons&2&&this.sendMouseDown(2,a.offsetX,a.offsetY);a.buttons&4&&this.sendMouseDown(1,
+a.offsetX,a.offsetY);a.buttons&8&&this.sendMouseDown(3,a.offsetX,a.offsetY);a.buttons&16&&this.sendMouseDown(4,a.offsetX,a.offsetY);this.callActionEventHander(0,a)};this.video.onmouseleave=a=>{this.sendMouseLeave();a.buttons&1&&this.sendMouseUp(0,a.offsetX,a.offsetY);a.buttons&2&&this.sendMouseUp(2,a.offsetX,a.offsetY);a.buttons&4&&this.sendMouseUp(1,a.offsetX,a.offsetY);a.buttons&8&&this.sendMouseUp(3,a.offsetX,a.offsetYy);a.buttons&16&&this.sendMouseUp(4,a.offsetX,a.offsetY);this.callActionEventHander(1,
+a)};this.video.onmousemove=a=>{this.sendMouseMove(a.offsetX,a.offsetY,a.movementX,a.movementY);a.preventDefault();if(0==this.mouseDownButton||2==this.mouseDownButton)this.setCursor(),this.mouseDownButton=void 0;this.callActionEventHander(2,a)};this.video.onmousedown=a=>{this.keyEventTarget==this.video&&this.video.focus();this.sendMouseEnter();this.isMiddleDoubleClick(a)&&this.onMButtonDoubleClick?(this.onMButtonDoubleClick(a.offsetX,a.offsetY),a.preventDefault()):(this.mouseDownButton=a.button,this.sendMouseDown(a.button,
+a.offsetX,a.offsetY),a.preventDefault(),0!=a.button&&2!=a.button&&this.setCursor(),this.callActionEventHander(3,a))};this.video.onmouseup=a=>{this.mouseDownButton=void 0;this.sendMouseUp(a.button,a.offsetX,a.offsetY);a.preventDefault();this.setCursor();this.callActionEventHander(4,a)};this.video.oncontextmenu=a=>{a.preventDefault()};"onmousewheel"in this.video?this.video.addEventListener("mousewheel",a=>{this.sendMouseWheel(a.wheelDelta,a.offsetX,a.offsetY);a.preventDefault()},{passive:!1}):this.video.addEventListener("DOMMouseScroll",
+a=>{this.sendMouseWheel(-120*a.detail,a.offsetX,a.offsetY);a.preventDefault()},!1)}registerTouchEvents(){this.ongoingTouches=[];this.copyTouch=({identifier:b,clientX:c,clientY:e,force:d})=>({identifier:b,clientX:c,clientY:e,force:d});this.ongoingTouchIndexById=b=>{for(let c=0;c<this.ongoingTouches.length;c++)if(this.ongoingTouches[c].identifier==b)return c;return-1};if(this.fakeMouseWithTouches){var a=void 0;this.video.addEventListener("touchstart",b=>{let c=this.container.getBoundingClientRect();
+if(void 0===a){let e=b.changedTouches[0];a={id:e.identifier,x:e.clientX-c.left,y:e.clientY-c.top};this.video.onmouseenter(b);this.sendMouseDown(0,a.x,a.y)}b.preventDefault()},{passive:!1});this.video.addEventListener("touchend",b=>{let c=this.container.getBoundingClientRect();for(let e=0;e<b.changedTouches.length;e++){let d=b.changedTouches[e];if(d.identifier===a.id){this.sendMouseUp(0,d.clientX-c.left,d.clientY-c.top);this.video.onmouseleave(b);a=void 0;break}}b.preventDefault()},{passive:!1});this.video.addEventListener("touchmove",
+b=>{var c=this.container.getBoundingClientRect();for(var e=0;e<b.touches.length;e++){let d=b.touches[e];if(d.identifier===a.id){e=d.clientX-c.left;c=d.clientY-c.top;this.sendMouseMove(e,c,e-a.x,c-a.y);a.x=e;a.y=c;break}}b.preventDefault()},{passive:!1})}else this.video.addEventListener("touchstart",b=>{b.preventDefault();null==this||this.onEvents(`ongoingTouches: ${this.ongoingTouches.length}, touches: ${b.touches.length}, changedTouches: ${b.changedTouches.length}`);this.ongoingTouches.length>b.touches.length-
+b.changedTouches.length&&(this.onEvents&&this.onEvents(H.getString("TriggerSysTouch")),this.sendTouch(81,this.ongoingTouches),this.ongoingTouches=[]);b=b.changedTouches;for(let c=0;c<b.length;c++)this.ongoingTouches.push(this.copyTouch(b[c]));this.sendTouch(80,b)},{passive:!1}),this.video.addEventListener("touchend",b=>{b.preventDefault();b=b.changedTouches;this.sendTouch(81,b);for(let c=0;c<b.length;c++){let e=this.ongoingTouchIndexById(b[c].identifier);0<=e&&this.ongoingTouches.splice(e,1)}},{passive:!1}),
+this.video.addEventListener("touchmove",b=>{b.preventDefault();this.sendTouch(82,b.touches)},{passive:!1})}resize(a){this.playerAspectRatio=this.container.clientHeight/this.container.clientWidth;this.videoAspectRatio=a?this.playerAspectRatio:this.videoHeight()/this.videoWidth()}normalizeAndQuantizeUnsigned(a,b){if(this.playerAspectRatio>this.videoAspectRatio){let c=this.playerAspectRatio/this.videoAspectRatio;a/=this.container.clientWidth;b=c*(b/this.container.clientHeight-.5)+.5}else a=this.videoAspectRatio/
+this.playerAspectRatio*(a/this.container.clientWidth-.5)+.5,b/=this.container.clientHeight;return 0>a||1<a||0>b||1<b?{inRange:!1,x:65535,y:65535}:{inRange:!0,x:65536*a,y:65536*b}}normalizeAndQuantizeSigned(a,b){if(this.playerAspectRatio>this.videoAspectRatio){let c=this.playerAspectRatio/this.videoAspectRatio;a/=.5*this.container.clientWidth;b=c*b/(.5*this.container.clientHeight);return{x:32767*a,y:32767*b}}return{x:this.videoAspectRatio/this.playerAspectRatio*a/(.5*this.container.clientWidth)*32767,
+y:b/(.5*this.container.clientHeight)*32767}}sendTouch(a,b){this.callOnUserInteraction();var c=new DataView(new ArrayBuffer(2+10*b.length));c.setUint8(0,a);c.setUint8(1,b.length);let e=2,d=[];for(let h=0;h<b.length;h++){let g=b[h],q=g.clientX-this.video.offsetLeft,k=g.clientY-this.video.offsetTop,f=this.normalizeAndQuantizeUnsigned(q,k),l=this.ongoingTouchIndexById(g.identifier);0>l?null==this||this.onEvents("can't figure out which touch to continue"):(c.setUint16(e,f.x,!0),e+=2,c.setUint16(e,f.y,
+!0),e+=2,c.setInt32(e,l,!0),e+=4,c.setUint8(e,255*g.force,!0),e+=1,c.setUint8(e,f.inRange?1:0,!0),e+=1,this.onEvents&&d.push(`{${l} (${parseInt(q)},${parseInt(k)})->(${parseInt(f.x)},${parseInt(f.y)}) ${255*g.force} ${f.inRange?1:0}}`))}this.rtc.send(c.buffer);this.onEvents&&(c="",80==a?c="start":82==a?c="move":81==a&&(c="end"),a=`[${c}] N${b.length} ${d.join(",")}}`,this.onEvents(a))}sendKeydown(a){this.callOnUserInteraction();let b=xa(a),c;null==(c=this.onEvents)||c.call(this,`Send KeyDown, Code:${b}, Repeat:${a.repeat}`);
+this.rtc.send((new Uint8Array([60,b,a.repeat])).buffer)}sendKeyup(a){this.callOnUserInteraction();a=xa(a);let b;null==(b=this.onEvents)||b.call(this,`Send KeyUp:${a}`);this.rtc.send((new Uint8Array([61,a])).buffer)}sendKeypress(a){this.callOnUserInteraction();var b;null==(b=this.onEvents)||b.call(this,`Send KeyPress:${a.charCode}`);b=new DataView(new ArrayBuffer(3));b.setUint8(0,62);b.setUint16(1,a.charCode,!0);this.rtc.send(b.buffer)}sendMouseEnter(){this.callOnUserInteraction();var a;null==(a=this.onEvents)||
+a.call(this,"Send MouseEnter");a=new DataView(new ArrayBuffer(1));a.setUint8(0,70);this.rtc.send(a.buffer)}sendMouseLeave(){this.callOnUserInteraction();var a;null==(a=this.onEvents)||a.call(this,"Send MouseLeave");a=new DataView(new ArrayBuffer(1));a.setUint8(0,71);this.rtc.send(a.buffer)}sendMouseMove(a,b,c,e){this.callOnUserInteraction();if(this.normalizeAndQuantizeUnsigned){var d;null==(d=this.onEvents)||d.call(this,`Send MouseMove, X:${a}, Y:${b}, DeltaX:${c}, DeltaY:${e}`);a=this.normalizeAndQuantizeUnsigned(a,
+b);c=this.normalizeAndQuantizeSigned(c,e);e=new DataView(new ArrayBuffer(9));e.setUint8(0,74);e.setUint16(1,a.x,!0);e.setUint16(3,a.y,!0);e.setInt16(5,c.x,!0);e.setInt16(7,c.y,!0);this.rtc.send(e.buffer)}}sendMouseDown(a,b,c){this.callOnUserInteraction();if(this.normalizeAndQuantizeUnsigned){var e;null==(e=this.onEvents)||e.call(this,`Send MouseDown, Button:${a}, X:${b}, Y:${c}`);b=this.normalizeAndQuantizeUnsigned(b,c);c=new DataView(new ArrayBuffer(6));c.setUint8(0,72);c.setUint8(1,a);c.setUint16(2,
+b.x,!0);c.setUint16(4,b.y,!0);this.rtc.send(c.buffer)}}sendMouseUp(a,b,c){if(this.normalizeAndQuantizeUnsigned){var e;null==(e=this.onEvents)||e.call(this,`Send MouseUp, Button:${a}, X:${b}, Y:${c}`);b=this.normalizeAndQuantizeUnsigned(b,c);c=new DataView(new ArrayBuffer(6));c.setUint8(0,73);c.setUint8(1,a);c.setUint16(2,b.x,!0);c.setUint16(4,b.y,!0);this.rtc.send(c.buffer)}}sendMouseWheel(a,b,c){this.callOnUserInteraction();if(this.normalizeAndQuantizeUnsigned){var e;null==(e=this.onEvents)||e.call(this,
+`Send MouseWheel, Delta:${a}, X:${b}, Y:${c}`);b=this.normalizeAndQuantizeUnsigned(b,c);c=new DataView(new ArrayBuffer(7));c.setUint8(0,75);c.setInt16(1,a,!0);c.setUint16(3,b.x,!0);c.setUint16(5,b.y,!0);this.rtc.send(c.buffer)}}}class cc extends ia{constructor(a,b,c){super(a);this.updateConnectionCount(b);this.createButton(c)}createButton(a){if(!this.elButton){this.elButton=document.createElement("button");this.elButton.id=`liveStatusSwitchButton_${this.uid}`;this.elButton.innerHTML=ca.Information;
+this.elButton.title=a;this.elButton.className="__liveStatusSwitchButton";if(R.isIOSDevice||R.isSafari)this.elButton.style.backgroundSize="cover";this.elButton.oncontextmenu=new Function("return false");this.elButton.onselectstart=new Function("return false");this.elButton.onclick=()=>this.setPanelVisible();this.elButton.onmousedown=b=>{1==b.button&&b.preventDefault()};this.appendElement(this.elButton)}}createPanel(){if(!this.elPanel){var a='<table border="0" cellspacing="0" cellpadding="0" style="position:absolute !important;padding:4px;left:0px;top:0px;width:100%;height:100%;">'+
+`<tr><td height="22" align="right" width="66" title="${H.getString("Connections")}-PlayerId-QualityControl">${H.getString("ConnInfo")}</td><td><span id="i_connections_${this.uid}">1</span>-<span id="i_playerId_${this.uid}">1</span></td><td align="right"><a id="i_hide_panel_${this.uid}" href="javascript:">${H.getString("Close")}</a></td></tr>`+`<tr><td height="22" align="right">${H.getString("Duration")}</td><td colspan="2" id="i_duration_${this.uid}">00:00:00</td></tr>`+`<tr><td height="22" align="right">${H.getString("Resolution")}</td><td colspan="2" id="i_resolution_${this.uid}">1920 x 1080</td></tr>`+
+`<tr><td height="22" align="right">${H.getString("Received")}</td><td colspan="2" id="i_bytesReceived_${this.uid}">0 kB</td></tr>`+`<tr><td height="22" align="right">${H.getString("ReceivedFrames")}</td><td colspan="2" id="i_framesReceived_${this.uid}">0</td></tr>`+`<tr><td height="22" align="right" title="${H.getString("DroppedTip")}">${H.getString("Dropped")}</td><td colspan="2"><span id="i_packetsLost_${this.uid}">0</span> / <span id="i_frameDropped_${this.uid}">0</span></td></tr>`+`<tr><td height="22" align="right" title="${H.getString("DecodeTimeTip")}">${H.getString("DecodingTime")}</td><td colspan="2"><span id="i_compositeTime_${this.uid}"></span></td></tr>`+
+`<tr><td height="22" align="right" title="${H.getString("DecodeFramesTip")}">${H.getString("DecodeFrames")}</td><td colspan="2"><span id="i_framesDecoded_${this.uid}" title="number of frames decoded">0</span> / <span id="i_keyframesDecoded_${this.uid}" title="Number of keyframes decoded">0</span></td></tr>`+`<tr><td height="22" align="right">${H.getString("Bitrate")}</td><td colspan="2" id="i_bitrate_${this.uid}">-</td></tr>`+`<tr><td height="22" align="right" title="${H.getString("FPSTip")}">${H.getString("FPS")}</td><td colspan="2" title="${H.getString("FPSTip")}"><span id="i_framerateRender_${this.uid}">-</span> / <span id="i_framerateVideo_${this.uid}">-</span></td></tr>`+
+`<tr><td height="22" align="right">${H.getString("QP")}</td><td colspan="2" id="i_qp_${this.uid}">0</td></tr>`+`<tr><td height="22" align="right" title="${H.getString("MaxQPTip")}">${H.getString("MaxQP")}</td><td colspan="2"><select id="i_settings_maxQP_${this.uid}" style="width:84px;"></select></td></tr>`+`<tr><td height="22" align="right" title="Mbps">${H.getString("MaxBitrate")}</td><td colspan="2"><select id="i_settings_maxBitrate_${this.uid}" style="width:84px;"></select></td></tr>`+"</table>";
+this.elPanel=document.createElement("div");this.elPanel.innerHTML=a;this.elPanel.id=`liveStatusPanel_${this.uid}`;this.elPanel.className="__liveStatusPanel __fadeinComp";this.elPanel.oncontextmenu=new Function("return false");this.elPanel.onselectstart=new Function("return false");this.appendElement(this.elPanel);this.get("i_hide_panel").onclick=()=>this.setPanelVisible();for(a=29;40>=a;a++)this.get("i_settings_maxQP").add(new Option(a,a));this.get("i_settings_maxQP").onchange=()=>{let b={encodeMaxQP:this.getValue("i_settings_maxQP")};
+this.player.rtc.updateParams(b);this.player.signallingConnection.updateParams(b);this.get("i_settings_maxQP").blur()};for(a=10;100>=a;a+=5)this.get("i_settings_maxBitrate").add(new Option(a,a));this.get("i_settings_maxBitrate").onchange=()=>{let b={maxBitrate:this.getValue("i_settings_maxBitrate")};this.player.rtc.updateParams(b);this.player.signallingConnection.updateParams(b);this.get("i_settings_maxBitrate").blur()}}}setPosition(a){a||(a=this.container.getBoundingClientRect());this.elButton&&(this.elButton.style.top=
+`${a.height-32}px`);if(this.elPanel)if(this.customPosX&&this.customPosY)this.elPanel.style.left=this.customPosX+"px",this.elPanel.style.top=this.customPosY+"px";else{let b=this.elPanel.getBoundingClientRect();this.elPanel.style.left="5px";this.elPanel.style.top=`${a.height-b.height-42}px`}}destroy(){this.updateLatencyTestUI=!1;this.visible&&this.setPanelVisible();this.elPanel&&(this.removeElement(this.elPanel),this.elPanel=null);this.elButton&&(this.removeElement(this.elButton),this.elButton=null)}setPanelVisible(a,
+b){this.customPosX=a;this.customPosY=b;if(this.elPanel)if("none"==this.elPanel.style.display)this.updateConnectionCount(),this.elPanel.style.display="block",this.elPanel.className="__liveStatusPanel __fadeinComp",this.visible=!0,this.player.rtc.sendEnableIntervalSendQP(!0);else{this.elPanel.className="__liveStatusPanel __fadeoutComp";setTimeout(()=>{this.visible=!1;this.elPanel.style.display="none";this.player.rtc.sendEnableIntervalSendQP(!1);this.setNeedReposUI();this.resize()},500);return}else this.createPanel(),
+this.visible=!0,this.resize(),this.updateConnectionCount(),this.player.rtc.requestInitialSettings(),this.player.rtc.sendEnableIntervalSendQP(!0);this.setNeedReposUI();this.resize()}adjustMaxQP(a){return 18==a?(this.get("i_settings_maxQP")&&this.get("i_settings_maxQP").add(new Option(18,18)),18):0>a?40:0<=a&&29>a?29:40<a?40:a}adjustMaxBitrate(a){return 300==a?(this.get("i_settings_maxBitrate")&&this.get("i_settings_maxBitrate").add(new Option(300,300)),300):10>a?10:100<a?100:a}formatNumber(a,b){return"undefined"==
+typeof a?"-":(new Intl.NumberFormat(window.navigator.language,{maximumFractionDigits:b||0})).format(a)}processValue(a){return a}updateButtonTip(a){this.elButton&&(this.elButton.title=a)}updateConnectionCount(a){void 0!=a&&(this.playersCount=a);this.setText("i_connections",this.playersCount);this.updatePlayerId()}updatePlayerId(){this.setText("i_playerId",this.player.playerId+(this.player.isQualityController()?"-QC":""))}updateWebRtcStats(a){if(this.visible){var b=(a.timestamp-a.timestampStart)/1E3,
+c=new Intl.NumberFormat(window.navigator.language,{maximumFractionDigits:0,minimumIntegerDigits:2}),e=[],d=[60,60];for(let h=0;h<d.length;h++)e.push(b%d[h]),b/=d[h];e.push(b);b=c.format(e[0]);d=c.format(Math.floor(e[1]));c=c.format(Math.floor([e[2]]));this.setText("i_duration",c+":"+d+":"+b);this.setText("i_resolution",a.frameWidth&&a.frameHeight?a.frameWidth+" x "+a.frameHeight:"-");c="B";e=a.bytesReceived||0;b=["kB","MB","GB"];for(d=0;d<b.length&&!(1E5>e);d++)e/=1E3,c=b[d];this.setText("i_bytesReceived",
+this.formatNumber(e)+" "+c);this.setText("i_framesReceived",this.processValue(a.framesReceived));this.setText("i_framesDecoded",a.framesDecoded);this.setText("i_keyframesDecoded",this.processValue(a.keyFramesDecoded));this.updateVideoFramerate(this.formatNumber(a.framesPerSecond));this.updateBitrate(a.bitrate);this.setText("i_packetsLost",this.processValue(a.packetsLost));this.setText("i_frameDropped",this.processValue(a.framesDropped));this.setText("i_compositeTime",this.formatNumber(a.receiveToCompositeMs,
+1))}}updateVideoFramerate(a){let b=this.get("i_framerateVideo");b.style.color=10>a?"red":20>a?"orange":"rgb(128,255,0)";b.innerText=a}updateBitrate(a){let b=this.get("i_bitrate");a?1E3<a?(b.style.color="rgb(128,255,0)",b.innerText=this.formatNumber(a/1E3,1)+" Mbps"):(b.style.color=100>a?"red":1E3>a?"orange":"rgb(128,255,0)",b.innerText=this.formatNumber(a)+" kbps"):b.innerText="-"}updateInitialSettings(a){let b=this.adjustMaxQP(a.Encoder.MaxQP);this.setValue("i_settings_maxQP",b);a=this.adjustMaxBitrate(a.WebRTC.MaxBitrate/
+1E3/1E3);this.setValue("i_settings_maxBitrate",a)}updateQPAndRenderFPS(a,b){let c=this.get("i_qp");c.style.color=35<a?"red":26<a?"orange":"rgb(128,255,0)";c.innerText=a;this.get("i_framerateRender").innerText=this.processValue(b)}}class dc extends ia{constructor(a){super(a);this.bDelayClear=!1;this.create()}create(){this.el=document.createElement("pre");this.el.id=`startupInfoPanel_${this.uid}`;this.el.className="__startupInfoPanel";this.el.oncontextmenu=new Function("return false");this.el.onselectstart=
+new Function("return false");this.appendElement(this.el);this._visible=!0}destroy(){this.el&&(this.removeElement(this.el),this.el=null)}setVisible(a){!this._visible&&a&&this.el&&(this.el.innerText="");this._visible!=a&&this.el&&((this._visible=a)?(this.el.className="__startupInfoPanel",this.el.style.display="block"):this.el.style.display="none",this.setNeedReposUI())}hide(){this.el.className="__startupInfoPanel __fadeoutComp";setTimeout(()=>this.setVisible(!1),500)}setDelayClear(a){this.bDelayClear=
+a}log(a){if(this.el){if(this.bDelayClear)this.bDelayClear=!1,this.el.innerText=a+"\n";else{let b=this.el.innerText;b+=a+"\n";this.el.innerText=b}this.el.scrollTop=this.el.scrollHeight+100}}setPosition(a){a||(a=this.container.getBoundingClientRect());this.el&&(this.el.style.height=`${a.height-20}px`)}}class ec extends ia{constructor(a){super(a);this.create()}create(){this.el||(this.el=document.createElement("i"),this.el.id=`statusIndicator_${this.uid}`,this.el.className="__statusIndicator",this.appendElement(this.el))}destroy(){this.el&&
+(this.removeElement(this.el),this.el=null)}setStatus(a){let b="Red",c=this.get("statusIndicator");switch(a){case V.WS_Disconnected:b="Red";c&&(c.style.display="inline-block");break;case V.WS_Connecting:b="RGB(200,200,200)";break;case V.WS_Connected:b="Yellow";break;case V.RTC_Opened:b="RGB(0,128,255)";break;case V.OnReady:b="RGB(0,255,0)",this.hide()}this.lastStatus=a;c&&(c.style.backgroundColor=b)}hide(){let a=this.get("statusIndicator");a&&(a.style.display="none")}}class fc{constructor(){this.css("@keyframes __fadeoutframes {0%{opacity:1;} 100%{opacity:0;}}.__fadeoutComp {animation-duration:600ms; animation-name:__fadeoutframes;}@keyframes __fadeinframes {0%{opacity:0;} 100%{opacity:0.65;}}.__fadeinComp {animation-duration:100ms; animation-name:__fadeinframes;}@keyframes twinkling{0%{opacity:0;}100%{opacity:1;}}.__statusIndicator {position:absolute;display:block;left:5px;top:5px;width:6px;height:6px;border-radius:50%;background-color:red;animation:twinkling 0.25s infinite ease-in-out;}.__startupInfoPanel { position:absolute;left:3px;top:0px;width:400px;background-color:transparent !important;text-shadow:black 0.1em 0.1em 0.2em;color:white;font-family:Verdana;font-size:12px !important;overflow:auto;}.__liveStatusPanel {position:absolute;left:5px;top:10px;width:164px;height:300px;background-color:rgba(50,50,50,0.8);color:#00FF00;font-family:Verdana;font-size:10px;box-shadow:0px 0px 5px 5px rgba(200,200,200,0.5);-moz-border-radius:8px;-webkit-border-radius:8px;}.__liveStatusPanel a:link { color: rgb(0,255,128); text-decoration: none; }.__liveStatusPanel a:hover { color: yellow; background:transparent; }.__liveStatusPanel input {background:transparent; border:1px solid gray; color: #00FF00;}.__liveStatusPanel select {background:transparent; border:1px solid gray; color: #00FF00;}.__liveStatusPanel option {background:#333; color: #00FF00;}.__liveStatusSwitchButton{position:absolute;padding:0;left:6px;width:26px;height:26px;opacity:0.65;cursor:pointer;background-size:conver;}.__fullscreeButton {position:absolute;padding:0;left:38px;width:26px;height:26px;opacity:0.65;cursor:pointer;background-size:conver;}.__viewHomeButton {position:absolute;padding:0;left:70px;width:26px;height:26px;opacity:0.65;cursor:pointer;background-size:conver;}.__taskWaiting {position:absolute;z-index:30;text-align:center;padding-left:5px;text-shadow:black 0.1em 0.1em 0.2em;color:lime;font-family:Verdana;font-size:12px !important;overflow:hidden;display:none;}.__eventsPanel {position:absolute;left:3px;top:0px;width:600px;height:200px;background-color:rgba(64,64,64,0.5) !important;text-shadow:black 0.1em 0.1em 0.2em;color:white;font-family:Verdana;font-size:12px !important;overflow:auto;}.streamingVideoNoCursor {width:100%;height:100%;}.streamingVideoCursorMove {width:100%;height:100%;cursor:move;}.streamingVideoCursorPan {width:100%;height:100%;cursor:url(data:application/octet-stream;base64,AAACAAEAICAAAA8ADwCoDAAAFgAAACgAAAAgAAAAQAAAAAEAGAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////8AAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAD///////8AAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////////////////////////////////////////////4B///+Af///AH///gA///wAP//8AB///gAf//8AH//+AB///gA///8k///////////////////////////////////////////////////////////////////////w==),auto;}.streamingVideoCursorPointer {width:100%;height:100%;cursor:url(data:application/octet-stream;base64,AAACAAEAICAAAA0ACACoDAAAFgAAACgAAAAgAAAAQAAAAAEAGAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAD///////8AAAD///////8AAAD///////8AAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAD///////8AAAD///////8AAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAD///////8AAAD///////8AAAAAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAD///////8AAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////////////////////////////////////////////4B///+Af///AH///gA///wAP//8AB//+AAf//AAD//wAA//+AAP//4AD//+AF///gT///4f///+H////h////8////////////////////////////////////////w==),auto;}.streamingVideoCursorRotate {width:100%;height:100%;cursor:url(data:application/octet-stream;base64,AAACAAEAICAAAA8ADwCoDAAAFgAAACgAAAAgAAAAQAAAAAEAGAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAD///////////////////////////////////////8AAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAD///////////////////////////////////////////8AAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////8AAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////8AAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////8AAAD///8AAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAD///////8AAAD///////8AAAD///////8AAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////////////////////////////////////////////4B///+Af///AH//hgAh/wwAMP4cABh+HgAYfh8AGH4eABh+HgA4eAck4BwP//A+H//4fz///P/////////////////////////////////////////////////////w==),auto;}")}css(a){let b=
+document.createElement("style");try{b.appendChild(document.createTextNode(a))}catch(c){b.styleSheet.cssText=a}(a=document.getElementsByTagName("head")[0])?a.appendChild(b):console.error("[Cloud] No head element found, cannot create css.")}}class gc extends ia{constructor(a){super(a);this.elContainer=document.createElement("div");this.elContainer.id=`taskWaiting_${this.uid}`;this.elContainer.className="__taskWaiting";this.elContainer.oncontextmenu=new Function("return false");this.elContainer.onselectstart=
+new Function("return false");this.appendElement(this.elContainer);this.elText=document.createElement("div");this.elText.style.marginBottom="15px";this.elText.innerText="dddd";this.elContainer.appendChild(this.elText);this.elButton=document.createElement("input");this.elButton.type="button";this.elButton.value=H.getString("RestartInstNow");this.elButton.onclick=()=>{this.player.setInstanceOptions({iid:this.player.options.iid,reset:!0})};this.elContainer.appendChild(this.elButton);H.onLanguageChangedCallbacks.push(()=>
+{this.elButton.value=H.getString("RestartInstNow")});this.setMode(0)}setMode(a){this._mode=a;0===a?this.elContainer.style.background="transparent":(this.elContainer.style.background="rgba(64,64,64,0.5)",this.elContainer.style.height="26px",this.elContainer.style.lineHeight="26px")}destroy(){this.elContainer&&(this.removeElement(this.elContainer),this.elContainer=null)}updateText(a){this.elText&&(this.elText.innerText=a,this.show())}show(){this.elContainer.className="__taskWaiting";this.elContainer.style.display=
+"block"}hide(){this.elContainer.className="__taskWaiting __fadeoutComp";setTimeout(()=>this.elContainer.style.display="none",500)}setPosition(a,b,c,e){if(this.elContainer)if(a||(a=this.container.getBoundingClientRect()),0==this._mode){var d=a.width/2-150;0>d&&(d=10);this.elContainer.style.left=d+"px";this.elContainer.style.top=a.height/2+"px"}else d=0,b&&d++,c&&d++,e&&d++,a=a.height-32,this.elContainer.style.left=(0==d?5:1==d?38:2==d?70:102)+"px",this.elContainer.style.top=a+"px"}}class hc extends ia{constructor(a){super(a);
+this.create()}create(){if(!this.el){var a=[];a.push(H.getString("LeftClickTip"));a.push(H.getString("RightClickTip"));a.push(H.getString("MiddleClickTip"));a=a.join("\n");this.el=document.createElement("button");this.el.id=`viewHomeButton_${this.uid}`;this.el.className="__viewHomeButton";if(R.isIOSDevice||R.isSafari)this.el.style.backgroundSize="cover";this.el.innerHTML=ca.InitialCamera;this.el.title=a;this.el.oncontextmenu=new Function("return false");this.el.onselectstart=new Function("return false");
+this.el.onclick=b=>this.player.viewHome(0);this.el.onmousedown=b=>{0!=b.button&&this.player.viewHome(b.button);b.preventDefault()};this.appendElement(this.el)}}destroy(){this.el&&(this.removeElement(this.el),this.el=null)}setPosition(a,b,c){a||(a=this.container.getBoundingClientRect());if(this.el){let e=5;if(b&&c)e=70;else if(b||c)e=38;this.el.style.left=e+"px";this.el.style.top=`${a.height-32}px`}}}var va=0;class ic{constructor(a,b){if(a){this.host=a;this.options=b;ka.processParams(this.options);
+H.setLanguage();this.uid=++va;this.options.apiOptions.player=this;this.api=new ra(null,this.options.apiOptions);if(this.options.domId)if(a=wa(this.options.domId))this.container=document.createElement("div"),this.container.style="position:relative;width:100%;height:100%;",a.innerHTML="",a.appendChild(this.container);else if("loading"==document.readyState){console.error(H.getString("DomLoading"));return}if(this.hasVideo=!!this.container)this.styleManager=new fc,this.createWidgetsInConstructor(),this.canAdaptiveResolution=
+!1,this.lastResizeTime=Date.now(),this.orientationChangeTimeout=void 0;this.constructUrlAndConnect();this.resetInteractTimestamp()}else console.error("[DigitalTwinPlayer] The parameter `host` cannot be empty!")}constructUrlAndConnect(){this.logStartupInfo(`host: ${this.host}`);this.useHttps="https:"==location.protocol||this.options.useHttps;this.url=`${this.useHttps?"wss":"ws"}://${this.host}/player?hasVideo=${this.hasVideo}`;this.options.offer&&(this.url+="&offer=1");this.options.iid&&(this.url+=
+"&iid="+this.options.iid);this.options.pid&&(this.url+="&pid="+this.options.pid);this.options.password&&(this.url+="&password="+this.options.password);if("object"==typeof this.options.urlExtraInfo)for(let a in this.options.urlExtraInfo)this.url+="&"+a+"="+this.options.urlExtraInfo[a];this.options.reset&&(this.url+="&reset=1",this.options.reset=!1);setTimeout(()=>this.connectSignallingServer(),200)}callEvent(a,b,c){a=this.options.events[a];"function"==typeof a&&a(b,c)}getHost(){return this.host}getAPI(){return this.api}getInstanceInfo(){return this.paramInfo}getVideoElement(){let a;
+return null==(a=this.htmlVideo)?void 0:a.video}getVideoElementSize(){let a=this.getVideoElement();return{width:null==a?void 0:a.clientWidth,height:null==a?void 0:a.clientHeight}}getVideoStreamSize(){return{width:this.htmlVideo.videoWidth(),height:this.htmlVideo.videoHeight()}}getVideoSize(){return this.getVideoStreamSize()}screen2World(a,b,c){let e=this.getVideoElementSize(),d=this.getVideoStreamSize(),h=0,g=0,q=d.height/d.width;e.height/e.width>q?g=-(e.width*q-e.height)/2:h=-(e.height/q-e.width)/
+2;a=d.width/(e.width-2*h)*(a-h);b=d.height/(e.height-2*g)*(b-g);return this.getAPI().coord.screen2World(a,b,c)}world2Screen(a,b,c,e){const d=this;return $jscomp.asyncExecutePromiseGeneratorFunction(function*(){let h=yield __g.coord.world2Screen(a,b,c,e),g=d.getVideoElementSize(),q=d.getVideoStreamSize(),k=0,f=0,l=q.height/q.width;g.height/g.width>l?f=-(g.width*l-g.height)/2:k=-(g.height/l-g.width)/2;h.screenPosition=[h.screenPosition[0]/(q.width/(g.width-2*k))+k,h.screenPosition[1]/(q.height/(g.height-
+2*f))+f];return h})}setResolution(a,b){if(this.streamerAdaptive){window.devicePixelRatio&&(a*=window.devicePixelRatio,b*=window.devicePixelRatio);if(4096<a||4096<b)b=a/b,1<=b?(a=4096,b=4096/b):(a=4096*b,b=4096);this.streamerAdaptive&&this.streamerLimitMaxResolution&&(a>this.streamerResX||b>this.streamerResY)&&(b=a/b,b>=this.streamerResX/this.streamerResY?(a=this.streamerResX,b=this.streamerResX/b):(a=this.streamerResY*b,b=this.streamerResY));a=Math.floor(a);b=Math.floor(b);var c=this.htmlVideo.videoWidth(),
+e=this.htmlVideo.videoHeight();if(a!=c&&a+1!=c&&a-1!=c||b!=e&&b+1!=e&&b-1!=e){if(this.lastWidth&&this.lastHeight&&(c=Math.abs(this.lastWidth-a),e=Math.abs(this.lastHeight-b),(0!=c||0!=e)&&4>c&&4>e))return;this.lastWidth=a;this.lastHeight=b;this.rtc&&this.rtc.updateRenderResolution(a,b);return[a,b]}}}destroy(a){console.log(`call DigitalTwinPlayer.destroy: ${a||" "}`);if(!this.isDestroyed){va--;this.isDestroyed=!0;this.destroyReason=a;var b;null==(b=this.rtc)||b.close();var c;null==(c=this.signallingConnection)||
+c.close()}}setKeyEventTarget(a){let b;null==(b=this.htmlVideo)||b.setKeyEventTarget(a)}setKeyEventReceiver(a){this.setKeyEventTarget(a)}resize(){if(this.container){this.rect=this.container.getBoundingClientRect();if(this.bNeedReposUI||!this.oldRect||this.oldRect.width!=this.rect.width||this.oldRect.height!=this.rect.height){this.bNeedReposUI=!1;this.oldRect=this.rect;let b;null==(b=this.startupInfo)||b.setPosition(this.rect);let c;null==(c=this.liveStatus)||c.setPosition(this.rect);let e;null==(e=
+this.fullscreenButton)||e.setPosition(this.rect,this.options.ui.statusButton);let d;null==(d=this.homeButton)||d.setPosition(this.rect,this.options.ui.statusButton,this.options.ui.fullscreenButton);let h;null==(h=this.taskListBar)||h.setPosition(this.rect,this.options.ui.statusButton,this.options.ui.fullscreenButton,this.options.ui.homeButton)}if(this.htmlVideo.valid()){this.canAdaptiveResolution&&(console.warn("set res..."),this.setResolution(this.htmlVideo.clientWidth(),this.htmlVideo.clientHeight()));
+var a;null==(a=this.htmlVideo)||a.resize(this.streamerAdaptive&&this.canAdaptiveResolution)}}}setInstanceOptions(a){const b=this;return $jscomp.asyncExecutePromiseGeneratorFunction(function*(){var c=a.pid==b.options.pid&&a.iid==b.options.iid||!a.pid&&a.iid==b.options.iid||!a.iid&&a.pid==b.options.pid;if(c&&!a.reset)b.api.log("setInstanceOptions: no change.");else{if(!c){c=(!a.iid||a.iid==b.options.iid)&&a.pid!=b.options.pid;if(b.streamerLocked&&c){b.api.log(H.getString("CannotChangeProject"));return}c=
+yield b.signallingConnection.checkParams(a);if(null!==c){if(!1===c.iid){b.api.log(`iid(${a.iid})${H.getString("InstanceNotExist")}`);return}if(!1===c.pid){b.api.log(`pid(${a.pid})${H.getString("ProjectNotExist")}`);return}}}b.destroy();b.options.iid=a.iid;b.options.pid=a.pid;b.options.reset=a.reset;b.constructUrlAndConnect()}})}set fullscreen(a){a?R.fullscreen(this.container):R.exitFullscreen()}get fullscreen(){return!!document.fullscreenElement}setActionEventEnabled(a){let b;null==(b=this.htmlVideo)||
+b.setActionEventEnabled(a)}onApiReady(){this.setStatus(V.OnReady);let a;null==(a=this.signallingConnection)||a.sendReady();1==this.options.ui.mainUI?this.api.settings.setMainUIVisibility(!0):0==this.options.ui.mainUI&&this.api.settings.setMainUIVisibility(!1);1==this.options.ui.campass?this.api.settings.setCampassVisible(!0):0==this.options.ui.campass&&this.api.settings.setCampassVisible(!1)}sendApi(a){if(a){let b;null==(b=this.rtc)||b.sendApi(a)}}onMainThreadBusy(a){if(1===a.busy){let b="BUSY! ",
+c=this.api.apiQueue.queueSize(),e=this.api.apiQueue.dataSize();0<c&&(b+=`${H.getString("JSQueue")}${c}/${e}\uff0c`);1<a.taskCount&&(b+=`${H.getString("BackQueue")}${a.taskCount}\uff0c`);b+=`${H.getString("Execting")}${p[a.currentTask]}${H.getString("PleaseWait")}`;this.hasVideo&&(this.htmlVideo.isVideoLoaded()&&this.options.ui.taskListBar||!this.htmlVideo.isVideoLoaded())&&this.taskListBar.updateText(b)}else this.taskListBar.hide()}viewHome(a){this.api.viewHome(a)}resetInteractTimestamp(){let a=Date.now();
+this.timeOfLastInteraction=a;let b;null==(b=this.signallingConnection)||b.resetInteractTimestamp(a)}receiveParamInfo(a){this.paramInfo=a;let b=a.project,c=a.nodeIP,e=a.hostName;this.options.iid=a.iid;this.options.pid=a.pid;this.streamerAdaptive=a.adjustResolution;this.streamerLimitMaxResolution=a.limitMaxResolution;this.streamerResX=a.resX;this.streamerResY=a.resY;this.streamerLocked=a.locked;if(this.kickOutInMinutes=a.kickOutInMinutes){let h=setInterval(()=>{if(Date.now()-this.timeOfLastInteraction>
+6E4*this.kickOutInMinutes){let g=H.getString("DisconnectForIdle");this.destroy(g);console.warn(g);clearInterval(h)}},2E4)}this.nodeInfoArray=[`${H.getString("NodeInfo")}`];e&&this.nodeInfoArray.push(`\t${H.getString("Host")}`+e);c&&this.nodeInfoArray.push(`\t${H.getString("HostAddress")}`+c);b&&this.nodeInfoArray.push(`\t\u3000${H.getString("Project")}`+b);this.options.pid&&this.nodeInfoArray.push(`\t${H.getString("ProjectId")}`+this.options.pid);this.nodeInfoArray.push(`\t${H.getString("IID")}`+
+this.options.iid);this.nodeInfoArray.push(`\t${H.getString("Adaptive")}`+this.streamerAdaptive);this.nodeInfoArray.push(`\t${H.getString("LimitMaxRes")}`+this.streamerLimitMaxResolution);this.nodeInfoArray.push(`\t${H.getString("Resolution")}${this.streamerResX}x${this.streamerResY}`);let d;null==(d=this.liveStatus)||d.updateButtonTip(this.nodeInfoArray.join("\n"));this.api.log(this.nodeInfoArray.join("\n\t"))}logStartupInfo(a){if(a){var b=new Date;a=`[${pa(b.getHours(),2)+":"+pa(b.getMinutes(),2)+
+":"+pa(b.getSeconds(),2)+"."+pa(b.getMilliseconds(),3)}] ${a}`;var c;null==(c=this.startupInfo)||c.log(a);1<va&&(a=`[${this.uid}] `+a);console.log("[DEBUG]"+a);this.api.log(a)}}setStatus(a,b){this.cloudStatus=a;let c;null==(c=this.statusIndicator)||c.setStatus(a);switch(a){case V.WS_Disconnected:if(this.isDestroyed){console.log("destroyed.");break}b&&(this.logStartupInfo(b),console.warn(b));break;case V.WS_Connecting:this.logStartupInfo(`connecting with ${this.useHttps?"wss":"ws"}...`);break;case V.WS_Connected:this.logStartupInfo("connected");
+break;case V.OnReady:let e;null==(e=this.startupInfo)||e.hide();this.options.ui.debugEventsPanel&&!this.eventsPanel&&(this.eventsPanel=new $b(this),this.eventsPanel.appendText("Start recording events here:"));this.resize()}}createWidgetsInConstructor(){this.taskListBar=new gc(this);this.htmlVideo=new bc(this,{keyEventTarget:this.options.keyEventTarget,useBuiltinCursors:this.options.useBuiltinCursors,mouseKeyListener:this.options.events.mouseKeyListener,onEvents:a=>{let b;return null==(b=this.eventsPanel)?
+void 0:b.appendText(a)},onVideoLoaded:()=>{this.logStartupInfo("video: loadedmetadata");this.createWidgets();this.callEvent("onVideoLoaded");this.resize()},onMButtonDoubleClick:(a,b)=>{let c;null==(c=this.liveStatus)||c.setPanelVisible(a,b)}});this.options.ui.statusIndicator&&(this.statusIndicator=new ec(this));this.options.ui.startupInfo&&(this.startupInfo=new dc(this),this.logStartupInfo("sdk version: "+this.api.getVersion()),this.logStartupInfo("uid: "+this.uid));this.resizeObserver=new ResizeObserver(Ga(()=>
+this.resize(),500));this.resizeObserver.observe(this.container)}createWidgets(){this.options.ui.statusButton&&(this.liveStatus=new cc(this,this.playerCount,this.nodeInfoArray.join("\n")));this.options.ui.fullscreenButton&&(this.fullscreenButton=new ac(this));this.options.ui.homeButton&&(this.homeButton=new hc(this));this.taskListBar&&this.taskListBar.setMode(1)}destroyWidgets(){this.liveStatus&&(this.liveStatus.destroy(),this.liveStatus=null);this.fullscreenButton&&(this.fullscreenButton.destroy(),
+this.fullscreenButton=null);this.homeButton&&(this.homeButton.destroy(),this.homeButton=null);this.eventsPanel&&(this.eventsPanel.destroy(),this.eventsPanel=null);this.taskListBar&&(this.taskListBar.destroy(),this.taskListBar=null)}isQualityController(){return this.bQualityController}initWebRtcPlayer(a){H.setLanguage(a.language);this.rtc=new Zb({useStats:this.hasVideo&&(this.options.ui.statusButton||this.options.events.onRtcStatsReport),peerConnectionOptions:a.peerConnectionOptions,events:{onlog:b=>
+this.logStartupInfo(b),ontrack:b=>{let c;null==(c=this.htmlVideo)||c.setTrack(b)},onicecandidate:b=>{let c;return null==(c=this.signallingConnection)?void 0:c.sendCandidate(b)},onOfferCreated:b=>{let c;return null==(c=this.signallingConnection)?void 0:c.sendOffer(b.sdp,this.hasVideo)},onAnswerCreated:b=>{let c;return null==(c=this.signallingConnection)?void 0:c.send(b)},onstats:b=>{let c;null==(c=this.liveStatus)||c.updateWebRtcStats(b);this.callEvent("onRtcStatsReport",b)},ondatachannelopen:()=>
+{this.setStatus(V.RTC_Opened);this.hasVideo&&(this.rtc.requestQualityControl(),this.liveStatus&&this.rtc.requestInitialSettings());this.api.onConnectionOpen()},ondatachannelclose:b=>this.api.onConnectionClose(b),ondatachannelerror:b=>this.api.onConnectionClose(b.error),ondatachannelmessage:(b,c)=>{switch(b){case "ResponseAPI":this.api.onConnectionMessage(c);break;case "InitialSettings":let e;null==(e=this.liveStatus)||e.updateInitialSettings(c);break;case "VideoEncoderAvgQP":let d;if(null==(d=this.liveStatus)?
+0:d.visible)b=(new TextDecoder("utf-16")).decode(c.data.slice(1)),(b=JSON.parse(b))&&this.liveStatus.updateQPAndRenderFPS(b.qp,b.renderFPS);break;case "QualityControlOwnership":this.bQualityController=c;let h;null==(h=this.liveStatus)||h.updatePlayerId()}}}});this.hasVideo&&this.htmlVideo.setWebRtcPlayer(this.rtc);this.logStartupInfo("setting up...");this.options.offer&&this.rtc.createOffer();this.hasVideo&&(this.htmlVideo.registerKeyboardEvents(),this.htmlVideo.registerMouseEvents(),this.htmlVideo.registerTouchEvents())}connectSignallingServer(){this.setStatus(V.WS_Connecting);
+this.signallingConnection=new Wb({onopen:()=>this.setStatus(V.WS_Connected),onclose:a=>this.handleSignallingClose(a),onerror:()=>{this.setStatus(V.WS_Disconnected)},onmessage:a=>{switch(a.type){case "config":this.initWebRtcPlayer(a);break;case "answer":this.playerId=a.playerId;this.rtc&&this.rtc.onReceiveAnswer(a);break;case "offer":this.playerId=a.playerId;this.rtc&&this.rtc.onReceiveOffer(a);break;case "iceCandidate":this.rtc&&this.rtc.onIceCandidate(a.candidate);break;case "paramInfo":this.receiveParamInfo(a);
+break;case "status":this.handleSignallingMessage_Status(a);break;case "playerCount":this.handleSignallingMessage_PlayerCount(a)}}});this.signallingConnection.connect(this.url)}handleSignallingClose(a){this.destroyWidgets();this.callEvent("onConnClose",a);this.startupInfo&&this.startupInfo.setVisible(!0);this.api.onConnectionClose(a);this.rtc&&this.rtc.close();let b="";this.isDestroyed?(b=H.getString("Destroyed"),b=this.destroyReason?b+(": "+this.destroyReason):b+"."):(b="closed: ",a.code&&(b+=a.code),
+a.reason?b+=" "+a.reason:1006==a.code&&(b+=" "+H.getString("Disconnect")));this.setStatus(V.WS_Disconnected,b);Ia(a.code)||this.destroy();this.isDestroyed||(this.logStartupInfo(H.getString("Reconnect5s")),this.startupInfo.setDelayClear(!0),setTimeout(()=>this.connectSignallingServer(),5E3));a.code==sa.instance_is_busy&&confirm(H.getString("RestartAndRetry"))&&this.setInstanceOptions({iid:this.busyIId,reset:!0})}handleSignallingMessage_Status(a){let b=Ha(a.state);b&&this.logStartupInfo(b);a.state===
+da.StartFailed?(console.error(a.info),this.options.ui.startupInfo&&setTimeout(()=>alert(a.info),500)):a.state==da.ConfirmBusy&&(this.busyIId=a.info)}handleSignallingMessage_PlayerCount(a){this.playerCount=a.count;let b;null==(b=this.liveStatus)||b.updateConnectionCount(this.playerCount);(this.canAdaptiveResolution=1===a.count)&&this.resize()}}v.APIErrorCode={OK:0,InvalidParameters:1,InternalError:2,ResourceNotFound:3,AcpProjWKTNotSet:4,CoordinateConversionFailed:5,IDExists:6,InvalidRequestType:7,
+InvalidRequestString:8,NoCommand:9,DataTypeNotSupport:10,InvalidOperation:11,ProjectNotOpened:12,CodeMax:65535};v.ActionMode={None:0,Follow:1,FollowBehindAndAbove:2,FollowBehind:3,FollowAbove:4,FollowBellow:5,FollowLeft:6,FollowRight:7};v.AnimatedImageButtonData=Qa;v.BPFuncParamType={Bool:0,UInt8:1,Int32:2,Float:3,Double:4,String:5,Color:6,Vector2D:7,Vector:8,Rotator:9,IntArray:10,StringArray:11,VectorArray:12,Coordinate:13,CoordinateArray:14,FloatArray:15};v.BPFunctionData=db;v.BeamData=Ra;v.CameraTourData=
+fb;v.CameraTourKeyFrame=eb;v.CloudStatus=V;v.Color={LightPink:"RGB(255,182,193)",Pink:"RGB(255,192,203)",Crimson:"RGB(220,20,60)",LavenderBlush:"RGB(255,240,245)",PaleVioletRed:"RGB(219,112,147)",HotPink:"RGB(255,105,180)",DeepPink:"RGB(255,20,147)",MediumVioletRed:"RGB(199,21,133)",Orchid:"RGB(218,112,214)",Thistle:"RGB(216,191,216)",plum:"RGB(221,160,221)",Violet:"RGB(238,130,238)",Magenta:"RGB(255,0,255)",Fuchsia:"RGB(255,0,255)",DarkMagenta:"RGB(139,0,139)",Purple:"RGB(128,0,128)",MediumOrchid:"RGB(186,85,211)",
+DarkVoilet:"RGB(148,0,211)",DarkOrchid:"RGB(153,50,204)",Indigo:"RGB(75,0,130)",BlueViolet:"RGB(138,43,226)",MediumPurple:"RGB(147,112,219)",MediumSlateBlue:"RGB(123,104,238)",SlateBlue:"RGB(106,90,205)",DarkSlateBlue:"RGB(72,61,139)",Lavender:"RGB(230,230,250)",GhostWhite:"RGB(248,248,255)",Blue:"RGB(0,0,255)",MediumBlue:"RGB(0,0,205)",MidnightBlue:"RGB(25,25,112)",DarkBlue:"RGB(0,0,139)",Navy:"RGB(0,0,128)",RoyalBlue:"RGB(65,105,225)",CornflowerBlue:"RGB(100,149,237)",LightSteelBlue:"RGB(176,196,222)",
+LightSlateGray:"RGB(119,136,153)",SlateGray:"RGB(112,128,144)",DoderBlue:"RGB(30,144,255)",AliceBlue:"RGB(240,248,255)",SteelBlue:"RGB(70,130,180)",LightSkyBlue:"RGB(135,206,250)",SkyBlue:"RGB(135,206,235)",DeepSkyBlue:"RGB(0,191,255)",LightBLue:"RGB(173,216,230)",PowDerBlue:"RGB(176,224,230)",CadetBlue:"RGB(95,158,160)",Azure:"RGB(240,255,255)",LightCyan:"RGB(225,255,255)",PaleTurquoise:"RGB(175,238,238)",Cyan:"RGB(0,255,255)",Aqua:"RGB(212,242,231)",DarkTurquoise:"RGB(0,206,209)",DarkSlateGray:"RGB(47,79,79)",
+DarkCyan:"RGB(0,139,139)",Teal:"RGB(0,128,128)",MediumTurquoise:"RGB(72,209,204)",LightSeaGreen:"RGB(32,178,170)",Turquoise:"RGB(64,224,208)",Auqamarin:"RGB(127,255,170)",MediumAquamarine:"RGB(0,250,154)",MediumSpringGreen:"RGB(0,255,127)",MintCream:"RGB(245,255,250)",SpringGreen:"RGB(60,179,113)",SeaGreen:"RGB(46,139,87)",Honeydew:"RGB(240,255,240)",LightGreen:"RGB(144,238,144)",PaleGreen:"RGB(152,251,152)",DarkSeaGreen:"RGB(143,188,143)",LimeGreen:"RGB(50,205,50)",Lime:"RGB(0,255,0)",ForestGreen:"RGB(34,139,34)",
+Green:"RGB(0,128,0)",DarkGreen:"RGB(0,100,0)",Chartreuse:"RGB(127,255,0)",LawnGreen:"RGB(124,252,0)",GreenYellow:"RGB(173,255,47)",OliveDrab:"RGB(85,107,47)",Beige:"RGB(245,245,220)",LightGoldenrodYellow:"RGB(250,250,210)",Ivory:"RGB(255,255,240)",LightYellow:"RGB(255,255,224)",Yellow:"RGB(255,255,0)",Olive:"RGB(128,128,0)",DarkKhaki:"RGB(189,183,107)",LemonChiffon:"RGB(255,250,205)",PaleGodenrod:"RGB(238,232,170)",Khaki:"RGB(240,230,140)",Gold:"RGB(255,215,0)",Cornislk:"RGB(255,248,220)",GoldEnrod:"RGB(218,165,32)",
+FloralWhite:"RGB(255,250,240)",OldLace:"RGB(253,245,230)",Wheat:"RGB(245,222,179)",Moccasin:"RGB(255,228,181)",Orange:"RGB(255,165,0)",PapayaWhip:"RGB(255,239,213)",BlanchedAlmond:"RGB(255,235,205)",NavajoWhite:"RGB(255,222,173)",AntiqueWhite:"RGB(250,235,215)",Tan:"RGB(210,180,140)",BrulyWood:"RGB(222,184,135)",Bisque:"RGB(255,228,196)",DarkOrange:"RGB(255,140,0)",Linen:"RGB(250,240,230)",Peru:"RGB(205,133,63)",PeachPuff:"RGB(255,218,185)",SandyBrown:"RGB(244,164,96)",Chocolate:"RGB(210,105,30)",
+SaddleBrown:"RGB(139,69,19)",SeaShell:"RGB(255,245,238)",Sienna:"RGB(160,82,45)",LightSalmon:"RGB(255,160,122)",Coral:"RGB(255,127,80)",OrangeRed:"RGB(255,69,0)",DarkSalmon:"RGB(233,150,122)",Tomato:"RGB(255,99,71)",MistyRose:"RGB(255,228,225)",Salmon:"RGB(250,128,114)",Snow:"RGB(255,250,250)",LightCoral:"RGB(240,128,128)",RosyBrown:"RGB(188,143,143)",IndianRed:"RGB(205,92,92)",Red:"RGB(255,0,0)",Brown:"RGB(165,42,42)",FireBrick:"RGB(178,34,34)",DarkRed:"RGB(139,0,0)",Maroon:"RGB(128,0,0)",White:"RGB(255,255,255)",
+WhiteSmoke:"RGB(245,245,245)",Gainsboro:"RGB(220,220,220)",LightGrey:"RGB(211,211,211)",Silver:"RGB(192,192,192)",DarkGray:"RGB(169,169,169)",Gray:"RGB(128,128,128)",DimGray:"RGB(105,105,105)",Black:"RGB(0,0,0)"};v.CommandType=p;v.CustomObjectData=$a;v.CustomObjectData2=ab;v.CustomTagData=Na;v.DecalData=Ya;v.DigitalTwinAPI=ra;v.DigitalTwinPlayer=ic;v.DynamicWaterData=cb;v.HeatMapPointData=Ka;v.HighlightAreaData=Oa;v.ImageButtonData=Pa;v.LayerVisibleData=Ja;v.MapMode={Campass:0,SmallMap:1,BigMap:2};
+v.MeasurementMode={Coordinate:1,Linear:2,Horizontal:3,Vertical:4,MultiPoint:5,TerrainArea:6};v.MousePickMask=qa;v.ODLineData=Va;v.PanelType={ViewshedAnalysis:0,SkylineAnalysis:1,ViewDomeAnalysis:2,VisiblityAnalysis:3,FloodFillAnalysis:4,SolarAnalysis:5,CutFillAnalysis:6,TerrainSlopeAnalysi:7,ContourLineAnalysis:8};v.PanoramaData=Xa;v.Polygon3DData=Ta;v.Polygon3DStyle={Wave:0,LoopLine:1,Gradual:2,DynamicGradual:3,WaveTransparent:4,WideWave:5,RotateArrow:6,RotateLine:7,RotateGradual:8,SingleColor:9,
+SingleColorWithLight:10};v.PolygonData=Wa;v.PolygonStyle={SingleColor:0,CirclePoint:1,Volumn:2,Gradual:3,DynamicGradual:4,WaveTransparent:5,WideWave:6,RotateArrow:7,RotateLine:8,RotateGradual:9,OnTerrain:10};v.PolylineData=Ua;v.PolylineStyle={Arrow:0,Arrow1:1,Flow:2,Beam:3,Normal:4,OnTerrain:5,DottedNormal:6,DottedCircle:7};v.RadiationPointData=Sa;v.RendererType={SimpleRenderer:0,UniqueValueRenderer:1,ClassBreaksRenderer:2};v.TagData=La;v.TileLayerActorData=fa;v.TileLayerData=Za;v.VERSION="5.4";v.VehicleViewMode=
+{FirstPerson:0,ThirdPerson:1};v.VideoProjectionData=bb;v.Viewport=ba;v.WaterFlowFieldStyle={HeatMap:0,Water:1};v.WebUIData=Ma;v.__onCefResponse=function(a,b){if(ua)ua.onConnectionMessage(a,b)};Object.defineProperty(v,"__esModule",{value:!0});return v}({});
+(()=>{if("undefined"!=typeof module&&module.exports)module.exports=acapi;else if("function"==typeof define&&define.amd)define(function(){return acapi});else{window.AcApiVersion=acapi.VERSION;acapi.AirCityAPI=acapi.DigitalTwinAPI;acapi.AirCityPlayer=acapi.DigitalTwinPlayer;for(let v in acapi)"VERSION"!=v&&(window[v]=acapi[v]);acapi.DigitalTwinAPI.__onApiConstructed=v=>window.__g=v}})();
diff --git a/src/assets/fonts/DIN-Regular.otf b/src/assets/fonts/DIN-Regular.otf
new file mode 100644
index 0000000..cb5f1c5
Binary files /dev/null and b/src/assets/fonts/DIN-Regular.otf differ
diff --git a/src/assets/fonts/三极韵律圆体.ttf b/src/assets/fonts/三极韵律圆体.ttf
new file mode 100644
index 0000000..f5fe806
Binary files /dev/null and b/src/assets/fonts/三极韵律圆体.ttf differ
diff --git a/src/assets/fonts/微软雅黑.ttf b/src/assets/fonts/微软雅黑.ttf
new file mode 100644
index 0000000..ea3c090
Binary files /dev/null and b/src/assets/fonts/微软雅黑.ttf differ
diff --git a/src/assets/icons/png/env/env-title-bg.png b/src/assets/icons/png/env/env-title-bg.png
new file mode 100644
index 0000000..dfb6ba1
Binary files /dev/null and b/src/assets/icons/png/env/env-title-bg.png differ
diff --git a/src/assets/icons/png/env/env-title-icon.png b/src/assets/icons/png/env/env-title-icon.png
new file mode 100644
index 0000000..7356a7b
Binary files /dev/null and b/src/assets/icons/png/env/env-title-icon.png differ
diff --git a/src/assets/icons/png/logo.png b/src/assets/icons/png/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/src/assets/icons/png/logo.png differ
diff --git a/src/assets/icons/png/point.png b/src/assets/icons/png/point.png
new file mode 100644
index 0000000..be3aa15
Binary files /dev/null and b/src/assets/icons/png/point.png differ
diff --git a/src/assets/icons/svg/404.svg b/src/assets/icons/svg/404.svg
new file mode 100644
index 0000000..6df5019
--- /dev/null
+++ b/src/assets/icons/svg/404.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M121.718 73.272v9.953c3.957-7.584 6.199-16.05 6.199-24.995C127.917 26.079 99.273 0 63.958 0 28.644 0 0 26.079 0 58.23c0 .403.028.806.028 1.21l22.97-25.953h13.34l-19.76 27.187h6.42V53.77l13.728-19.477v49.361H22.998V73.272H2.158c5.951 20.284 23.608 36.208 45.998 41.399-1.44 3.3-5.618 11.263-12.565 12.674-8.607 1.764 23.358.428 46.163-13.178 17.519-4.611 31.938-15.849 39.77-30.513h-13.506V73.272H85.02V59.464l22.998-25.977h13.008l-19.429 27.187h6.421v-7.433l13.727-19.402v39.433h-.027zm-78.24 2.822a10.516 10.516 0 0 1-.996-4.535V44.548c0-1.613.332-3.124.996-4.535a11.66 11.66 0 0 1 2.713-3.68c1.134-1.032 2.49-1.864 4.04-2.468 1.55-.605 3.21-.908 4.982-.908h11.292c1.77 0 3.431.303 4.981.908 1.522.604 2.85 1.41 3.986 2.418l-12.26 16.303v-2.898a1.96 1.96 0 0 0-.665-1.512c-.443-.403-.996-.604-1.66-.604-.665 0-1.218.201-1.661.604a1.96 1.96 0 0 0-.664 1.512v9.071L44.364 77.606a10.556 10.556 0 0 1-.886-1.512zm35.73-4.535c0 1.613-.332 3.124-.997 4.535a11.66 11.66 0 0 1-2.712 3.68c-1.134 1.032-2.49 1.864-4.04 2.469-1.55.604-3.21.907-4.982.907H55.185c-1.77 0-3.431-.303-4.981-.907-1.55-.605-2.906-1.437-4.041-2.47a12.49 12.49 0 0 1-1.384-1.512l13.727-18.217v6.375c0 .605.222 1.109.665 1.512.442.403.996.604 1.66.604.664 0 1.218-.201 1.66-.604a1.96 1.96 0 0 0 .665-1.512V53.87L75.97 36.838c.913.932 1.66 1.99 2.214 3.175.664 1.41.996 2.922.996 4.535v27.011h.028z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/blind-plate.svg b/src/assets/icons/svg/blind-plate.svg
new file mode 100644
index 0000000..6f2eaa6
--- /dev/null
+++ b/src/assets/icons/svg/blind-plate.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/mangbanchoudu</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/mangbanchoudu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="减去-97" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)" fill-rule="nonzero">
+            <path d="M9,18 C4.03194995,17.993939 0.0060609562,13.9680501 0,9 C0.00551112896,4.03172183 4.03172183,0.00551112896 9,0 C13.9682782,0.00551112896 17.9944889,4.03172183 18,9 C17.9944889,13.9682782 13.9682782,17.9944889 9,18 L9,18 Z M4,6.49999814 C2.61928813,6.49999814 1.5,7.61928813 1.5,8.99999814 C1.5,10.3807119 2.61928813,11.4999981 4,11.4999981 L5.26,11.4999981 C6.09464592,12.7491839 7.49763726,13.4994466 9,13.4999981 C10.5030713,13.5001144 11.9069604,12.7497728 12.742,11.4999981 L14,11.4999981 C15.3807119,11.4999981 16.5,10.3807119 16.5,8.99999814 C16.5,7.61928813 15.3807119,6.49999814 14,6.49999814 L12.741,6.49999814 C11.9068276,5.24927077 10.5023846,4.49863317 8.999,4.49999814 C7.49663726,4.5005534 6.09364592,5.25081615 5.259,6.49999814 L4,6.49999814 Z M8.908,12.5 C7.00112221,12.4725695 5.47619789,10.9069387 5.499,9 C5.47619789,7.09306125 7.00112221,5.52743053 8.908,5.5 C9.80519577,5.50016869 10.6647839,5.86043193 11.294,6.5 L9,6.5 C7.61928813,6.5 6.5,7.61928813 6.5,9 C6.5,10.3807119 7.61928813,11.5 9,11.5 L11.293,11.5 C10.6637197,12.1394733 9.80417319,12.4997191 8.907,12.5 L8.908,12.5 Z M9.608,11.6 C9.43844858,11.6 9.301,11.7374486 9.301,11.907 C9.30427495,12.0740411 9.44092775,12.2075781 9.608,12.207 C9.68842771,12.2083406 9.7660247,12.1773264 9.8233717,12.1209196 C9.88071869,12.0645127 9.91301117,11.9874389 9.913,11.907 C9.91326679,11.825497 9.88100792,11.7472553 9.82337631,11.6896237 C9.76574471,11.6319921 9.68750296,11.5997332 9.606,11.6 L9.608,11.6 Z M8.008,11.5 C7.83883834,11.4999991 7.70155102,11.6368392 7.701,11.806 C7.70126478,11.8871564 7.73375819,11.9648836 7.79133195,12.0220823 C7.84890572,12.079281 7.92684362,12.1112657 8.008,12.111 C8.17644685,12.111 8.313,11.9744468 8.313,11.806 C8.31300043,11.7246702 8.28062401,11.646686 8.22302141,11.589271 C8.16541882,11.531856 8.08732937,11.4997342 8.006,11.5 L8.008,11.5 Z M6.608,10.528 C6.52756112,10.5279888 6.45048732,10.5602813 6.39408044,10.6176283 C6.33767357,10.6749753 6.30665935,10.7525723 6.308,10.833 C6.308,10.9986854 6.44231458,11.133 6.608,11.133 C6.77507225,11.1335781 6.91172505,11.0000411 6.915,10.833 C6.9147659,10.7504337 6.8811757,10.6714659 6.82185831,10.6140316 C6.76254091,10.5565973 6.68253092,10.5255712 6.6,10.528 L6.608,10.528 Z M5.997,8.699 C5.82839152,8.69955101 5.6919991,8.83639062 5.692,9.005 C5.69199642,9.17377343 5.82823015,9.3109005 5.997,9.312 C6.16655142,9.312 6.304,9.17455142 6.304,9.005 C6.30347233,8.9234033 6.27048215,8.84537364 6.21231619,8.78814584 C6.15415023,8.73091804 6.07559449,8.69920092 5.994,8.7 L5.997,8.699 Z M6.608,6.999 C6.44111899,7.00173515 6.30743036,7.13809755 6.308,7.305 C6.30665935,7.38542771 6.33767357,7.4630247 6.39408044,7.5203717 C6.45048732,7.57771869 6.52756112,7.61001117 6.608,7.61 C6.68915638,7.61026565 6.76709428,7.57828095 6.82466805,7.52108226 C6.88224181,7.46388357 6.91473522,7.38615638 6.915,7.305 C6.91449072,7.22252076 6.88081426,7.14371577 6.82155854,7.08634118 C6.76230281,7.02896659 6.68245276,6.99784909 6.6,7 L6.608,6.999 Z M8.008,5.899 C7.83939152,5.89955101 7.7029991,6.03639062 7.703,6.205 C7.703,6.28589103 7.73513384,6.36346897 7.79233243,6.42066757 C7.84953103,6.47786616 7.92710897,6.51 8.008,6.51 C8.08915638,6.51026565 8.16709428,6.47828095 8.22466805,6.42108226 C8.28224181,6.36388357 8.31473522,6.28615638 8.315,6.205 C8.31449072,6.12252076 8.28081426,6.04371577 8.22155854,5.98634118 C8.16230281,5.92896659 8.08245276,5.89784909 8,5.9 L8.008,5.899 Z M9.608,5.799 C9.43955315,5.799 9.303,5.93555315 9.303,6.104 C9.30273435,6.18515638 9.33471905,6.26309428 9.39191774,6.32066805 C9.44911643,6.37824181 9.52684362,6.41073522 9.608,6.411 C9.77755142,6.411 9.915,6.27355142 9.915,6.104 C9.91449717,6.02160756 9.88078903,5.9428994 9.82150172,5.88568243 C9.7622144,5.82846547 9.68235828,5.79757511 9.6,5.8 L9.608,5.799 Z M14.008,10.499 L9.008,10.499 C8.17957288,10.499 7.508,9.82742712 7.508,8.999 C7.508,8.17057288 8.17957288,7.499 9.008,7.499 L14.008,7.499 C14.8364271,7.499 15.508,8.17057288 15.508,8.999 C15.5082719,9.39838799 15.3492564,9.78139383 15.0661902,10.0631461 C14.7831239,10.3448984 14.3993824,10.5021302 14,10.5000214 L14.008,10.499 Z M4.763,10.499 L4,10.499 C3.17157288,10.499 2.5,9.82742712 2.5,8.999 C2.5,8.17057288 3.17157288,7.499 4,7.499 L4.758,7.499 C4.58693943,7.9805894 4.49967641,8.48793253 4.5,8.999 C4.49903422,9.50995158 4.58562021,10.0172914 4.756,10.499 L4.763,10.499 Z" id="减去_97"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/bounds.svg b/src/assets/icons/svg/bounds.svg
new file mode 100644
index 0000000..a917e66
--- /dev/null
+++ b/src/assets/icons/svg/bounds.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/电子围栏</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/电子围栏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-2">
+            <g id="icon/层级图标/背景" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)">
+                <circle id="椭圆形" cx="9" cy="9" r="9"></circle>
+            </g>
+            <g id="shandian" transform="translate(7.500000, 7.000000)" fill="#3B414A" fill-rule="nonzero">
+                <path d="M2.64726105,5.87889324 L4.95040861,2.6975867 C5.0408373,2.57259039 5.00416664,2.40365972 4.86833162,2.32038778 C4.81986788,2.29062197 4.76291202,2.27474907 4.70465762,2.27477385 L2.89378001,2.27477385 L2.89378001,0.272004007 C2.89378001,0.121813949 2.76159286,0 2.59849484,0 C2.49971446,0 2.40755784,0.0454371335 2.35274385,0.121106757 L0.0495962843,3.3024133 C-0.0408324004,3.42740961 -0.00416174485,3.59625188 0.131577279,3.67961222 C0.180067918,3.70940566 0.237053843,3.72530839 0.295347275,3.72531455 L2.10622489,3.72531455 L2.10622489,5.72799599 C2.10622489,5.87818605 2.23841204,6 2.40151006,6 C2.50029044,6 2.59254306,5.95456287 2.64726105,5.87889324 Z" id="路径"></path>
+            </g>
+            <rect id="矩形" fill="#3B414A" x="8" y="4" width="1" height="2" rx="0.5"></rect>
+            <rect id="矩形" fill="#3B414A" x="8" y="14" width="1" height="2" rx="0.5"></rect>
+            <rect id="矩形" fill="#3B414A" transform="translate(5.000000, 8.500000) rotate(-270.000000) translate(-5.000000, -8.500000) " x="4.5" y="7.5" width="1" height="2" rx="0.5"></rect>
+            <rect id="矩形" fill="#3B414A" transform="translate(5.000000, 11.500000) rotate(-270.000000) translate(-5.000000, -11.500000) " x="4.5" y="10.5" width="1" height="2" rx="0.5"></rect>
+            <rect id="矩形" fill="#3B414A" transform="translate(15.000000, 8.500000) rotate(-270.000000) translate(-15.000000, -8.500000) " x="14.5" y="7.5" width="1" height="2" rx="0.5"></rect>
+            <rect id="矩形" fill="#3B414A" transform="translate(15.000000, 11.500000) rotate(-270.000000) translate(-15.000000, -11.500000) " x="14.5" y="10.5" width="1" height="2" rx="0.5"></rect>
+            <rect id="矩形" fill="#3B414A" x="11" y="4" width="1" height="2" rx="0.5"></rect>
+            <rect id="矩形" fill="#3B414A" x="11" y="14" width="1" height="2" rx="0.5"></rect>
+            <path d="M9.02424024,14.7121 L6.23032,14.7121 C5.7098358,14.7121 5.2879,14.2901642 5.2879,13.76968 L5.2879,6.23032 C5.2879,5.7098358 5.7098358,5.2879 6.23032,5.2879 L13.76968,5.2879 C14.2901642,5.2879 14.7121,5.7098358 14.7121,6.23032 L14.7121,13.76968 C14.7121,14.2901642 14.2901642,14.7121 13.76968,14.7121 L11.1884773,14.7121 L11.1884773,14.7121" id="路径" stroke="#3B414A"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/break-road.svg b/src/assets/icons/svg/break-road.svg
new file mode 100644
index 0000000..71d07cf
--- /dev/null
+++ b/src/assets/icons/svg/break-road.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/duanlu</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/duanlu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="减去-56" transform="translate(1.001000, 1.000000)" fill="url(#linearGradient-1)" fill-rule="nonzero">
+            <path d="M9,18 C4.02943725,18 0,13.9705627 0,9 C0,4.02943725 4.02943725,0 9,0 C13.9705627,0 18,4.02943725 18,9 C17.9944889,13.9682782 13.9682782,17.9944889 9,18 L9,18 Z M10.667,12.2 L10.667,13 L13.167,13 L13.167,12.2 L12.334,12.2 L12.334,9.8 L14,9.8 L14,5 L4,5 L4,9.8 L5.669,9.8 L5.669,12.2 L4.836,12.2 L4.836,13 L7.336,13 L7.336,12.2 L6.5,12.2 L6.5,9.8 L11.5,9.8 L11.5,12.2 L10.667,12.2 Z M12.625,9 L10.825,9 L12.052,5.8 L13.168,5.8 L13.168,7.582 L12.626,8.999 L12.625,9 Z M9.549,9 L7.749,9 L8.976,5.8 L10.776,5.8 L9.55,9 L9.549,9 Z M6.475,9 L4.834,9 L4.834,8.589 L5.902,5.801 L7.702,5.801 L6.476,9.001 L6.475,9 Z" id="减去_56"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/car.svg b/src/assets/icons/svg/car.svg
new file mode 100644
index 0000000..ae5bc2b
--- /dev/null
+++ b/src/assets/icons/svg/car.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/车辆定位</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/车辆定位" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon/层级图标/背景" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)">
+            <circle id="椭圆形" cx="9" cy="9" r="9"></circle>
+        </g>
+        <g id="cheliang-" transform="translate(4.227739, 5.396378)" fill="#3B414A" fill-rule="nonzero">
+            <path d="M4.53191587,0.0917283545 C5.35016287,-0.0305761182 6.18204489,-0.0305761182 7.00029189,0.0917283545 C7.57567092,0.20680416 8.15104994,0.298864804 8.69190623,0.448463351 C9.09434001,0.551000412 9.41591664,0.8530217 9.54346719,1.2482402 C9.77745466,1.90800815 10.0229497,2.56202231 10.2799523,3.21028268 C10.3259827,3.31960469 10.4640736,3.48071082 10.5446267,3.46920324 C11.0010077,3.39208369 11.4354199,3.69361684 11.522771,4.14815049 C11.5517716,4.26529397 11.5517716,4.38774201 11.522771,4.50488549 L10.8668389,4.68325299 C10.9074706,4.91158702 10.93437,5.14215265 10.947392,5.37370782 L10.947392,8.56130762 C10.9399874,8.75404208 10.8714756,8.93942697 10.7517631,9.09065633 C10.1445593,9.20778764 9.52171814,9.21946591 8.91055026,9.12517907 C8.48476978,8.85475093 8.74944413,8.4002015 8.61135316,8.03195892 L3.01866903,8.03195892 C2.90934701,8.42321666 2.84605532,9.07914875 2.71947193,9.12517907 C2.09514895,9.23459972 1.45655171,9.23459972 0.832228726,9.12517907 C0.699752025,8.9492529 0.627155005,8.73549501 0.625092276,8.5152773 C0.590569535,8.05497408 0.590569535,7.61768602 0.590569535,7.16889038 C0.590569535,6.33459079 0.590569535,5.5002912 0.625092276,4.66023782 L0.0151905081,4.4991317 C-0.00506350271,4.4062444 -0.00506350271,4.31008328 0.0151905081,4.21719597 C0.187804216,3.75689275 0.417955827,3.40015776 1.01059622,3.45194187 C1.07964171,3.45194187 1.21197888,3.3138509 1.25225541,3.21028268 C1.47220343,2.69743451 1.66427649,2.17307506 1.82763444,1.63949794 C2.04893063,0.851236002 2.7376876,0.284159427 3.55377152,0.21831174 C3.87022999,0.160773838 4.19819603,0.120497306 4.51465449,0.0687131934 L4.53191587,0.0917283545 Z M1.98874057,3.64757074 C4.4699207,4.17261846 7.03351811,4.17261846 9.51469823,3.64757074 C9.30180799,3.00890002 9.08891775,2.43927478 8.93931921,1.86389576 C8.8476577,1.41154336 8.44564425,1.08944825 7.98419002,1.09864165 C6.79315544,1.04685754 5.59636706,1.00658101 4.40533248,0.995073426 C4.01618776,1.01032871 3.63007762,1.07017578 3.25457443,1.17344092 C3.08154269,1.20887601 2.93011332,1.31259476 2.83454774,1.46113044 C2.51233548,2.15733906 2.27067629,2.87656284 1.98874057,3.64757074 Z M2.47781274,6.36335974 C2.68367634,6.37448908 2.89013951,6.3629117 3.0934683,6.328837 C3.25247328,6.29214512 3.38841963,6.18966249 3.46746467,6.04690128 C3.49623362,5.96059442 3.36389644,5.74770418 3.24882064,5.69592007 C2.78079451,5.47664163 2.30051505,5.28452984 1.81037307,5.12054105 C1.56871388,5.03998798 1.29253195,5.05724935 1.23499404,5.39672298 C1.11991824,5.89730273 1.23499404,6.17348466 1.60899041,6.25403773 C1.90243371,6.31157563 2.18436944,6.32308321 2.50658169,6.35185216 L2.47781274,6.36335974 Z M9.11193292,6.36335974 C9.4149449,6.34174189 9.71652364,6.30332421 10.015278,6.24828394 C10.4468123,6.1504695 10.3547516,5.7994883 10.343244,5.49453741 C10.3317365,5.18958653 10.1706303,5.04574177 9.93472492,5.11478726 C9.34393088,5.29048574 8.76697148,5.50973031 8.20858784,5.77071935 C7.95542107,5.89154894 8.04748172,6.22526878 8.33517123,6.28856047 C8.59247053,6.32715152 8.85186085,6.35020844 9.11193292,6.35760595 L9.11193292,6.36335974 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/check-point.svg b/src/assets/icons/svg/check-point.svg
new file mode 100644
index 0000000..bf8e8bb
--- /dev/null
+++ b/src/assets/icons/svg/check-point.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/卡口设施</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/卡口设施" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon/层级图标/背景" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)">
+            <circle id="椭圆形" cx="9" cy="9" r="9"></circle>
+        </g>
+        <g id="24gf-gate" transform="translate(4.652810, 5.381973)" fill="#3B414A" fill-rule="nonzero">
+            <path d="M10.385853,2.02350107 C10.5847489,1.80129697 10.6946142,1.51348871 10.6943801,1.21527034 C10.6943801,0.545200663 10.1491791,0 9.47910939,0 C8.80903971,0 8.26383904,0.545200652 8.26383904,1.21527034 C8.26360453,1.51348871 8.37346988,1.80129697 8.5723658,2.02350107 C8.38182322,2.13125468 8.26396578,2.33316751 8.26383904,2.55206771 L8.26383904,3.47514149 C8.12550966,3.2623386 7.96232401,3.06677079 7.77773091,2.89257127 L7.77773091,2.18748661 C7.77773091,2.05325156 7.66891189,1.94443255 7.53467684,1.94443255 C7.40044179,1.94443255 7.29162278,2.05325156 7.29162278,2.18748661 L7.29162278,2.51052066 C7.09427577,2.3828623 6.88447724,2.27557086 6.66545474,2.19029693 C6.55216018,2.14601662 6.43665737,2.10760864 6.3194065,2.07522602 L6.3194065,1.21527034 C6.31940649,1.08103529 6.21058748,0.972216293 6.07635244,0.972216293 C5.94211739,0.972216293 5.83329838,1.08103529 5.83329837,1.21527034 L5.83329837,1.97633339 C5.51062194,1.93379901 5.18375853,1.93379901 4.86108209,1.97633339 L4.86108209,1.21527034 C4.86108209,1.08103529 4.75226308,0.972216278 4.61802803,0.972216278 C4.48379298,0.972216278 4.37497397,1.08103529 4.37497397,1.21527034 L4.37497397,2.07522602 C4.26321973,2.10616477 4.15308586,2.14249629 4.04457234,2.18422058 C3.82003351,2.27059572 3.60506943,2.38005048 3.40313747,2.51082447 L3.40313747,2.18748661 C3.40313746,2.05325156 3.29431845,1.94443255 3.1600834,1.94443255 C3.02584835,1.94443255 2.91702933,2.05325156 2.91702933,2.18748661 L2.91702933,2.89257127 C2.73239508,3.06670402 2.56920481,3.26225187 2.43092119,3.47506554 L2.43092119,2.55206771 C2.43079445,2.33316751 2.31293701,2.13125468 2.12239443,2.02350107 C2.32115258,1.80124075 2.43088035,1.51343865 2.43054142,1.21527034 C2.43054142,0.545200663 1.88534077,0 1.21527108,0 C0.545201388,0 3.73466435e-07,0.545200663 3.73466435e-07,1.21527034 C-0.000233765158,1.51348871 0.109631584,1.80129697 0.308527505,2.02350107 C0.117984924,2.13125468 0.000127483938,2.33316751 3.73466435e-07,2.55206771 L3.73466435e-07,8.99300051 C3.73466435e-07,9.12723556 0.108819759,9.23605457 0.243054812,9.23605457 L2.18748736,9.23605457 C2.32172241,9.23605457 2.43054142,9.12723556 2.43054142,8.99300051 L2.43054142,8.74994644 L8.26383904,8.74994644 L8.26383904,8.99300051 C8.26383904,9.05746246 8.28944645,9.11928421 8.33502793,9.16486569 C8.38060941,9.21044717 8.44243116,9.23605457 8.50689311,9.23605457 L10.4513257,9.23605457 C10.5855607,9.23605457 10.6943801,9.12723556 10.6943801,8.99300051 L10.6943801,2.55206771 C10.694253,2.33316751 10.5763955,2.13125468 10.385853,2.02350107 L10.385853,2.02350107 Z M2.91664956,7.77773017 L2.43054142,7.77773017 L2.43054142,5.10413542 C2.43054142,4.56842906 2.60022354,4.05877507 2.91664956,3.62454379 L2.91664956,7.77773017 Z M4.37497397,4.37497322 L4.13191989,4.37497322 C4.06745794,4.37497322 4.00563619,4.40058063 3.96005471,4.44616211 C3.91447323,4.49174359 3.88886582,4.55356535 3.88886583,4.61802729 L3.88886583,5.59024356 C3.88886583,5.72447861 3.99768484,5.83329762 4.13191989,5.83329762 L4.37497397,5.83329762 L4.37497397,7.77773017 L3.40275769,7.77773017 L3.40275769,3.11177566 C3.64767096,2.91105262 3.92328797,2.75104755 4.21903959,2.63789619 C4.2704354,2.61814804 4.32233757,2.59981771 4.3747461,2.5829052 L4.37497397,4.37497322 Z M5.83329837,7.77773017 L4.86108209,7.77773017 L4.86108209,5.83329762 L5.83329837,5.83329762 L5.83329837,7.77773017 Z M5.83329837,4.37497322 L4.86108209,4.37497322 L4.86108209,2.46753047 C5.18326999,2.41810922 5.51111047,2.41810922 5.83329837,2.46753047 L5.83329837,4.37497322 Z M7.29162278,8.26383831 L6.80551464,8.26383831 L6.80551464,7.77773017 L6.3194065,7.77773017 L6.3194065,5.83329762 L6.56246057,5.83329762 C6.69669563,5.83329762 6.80551464,5.72447861 6.80551464,5.59024356 L6.80551464,4.61802729 C6.80551464,4.55356535 6.77990724,4.49174359 6.73432576,4.44616211 C6.68874428,4.40058063 6.62692252,4.37497322 6.56246057,4.37497322 L6.3194065,4.37497322 L6.3194065,2.58328497 C6.67367409,2.69772072 7.00341472,2.8774036 7.29162278,3.11306688 L7.29162278,8.26383831 Z M8.26383904,7.77773017 L7.77773091,7.77773017 L7.77773091,3.62773388 C8.08473858,4.05110368 8.26383904,4.55878286 8.26383904,5.10413542 L8.26383904,7.77773017 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/company.svg b/src/assets/icons/svg/company.svg
new file mode 100644
index 0000000..1e7d543
--- /dev/null
+++ b/src/assets/icons/svg/company.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.001" height="18" viewBox="0 0 18.001 18"><defs><style>.a{fill:url(#a);}</style><linearGradient id="a" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#f0f7fc"/><stop offset="1" stop-color="#c2edff"/></linearGradient></defs><path class="a" d="M330,1642a9,9,0,1,1,9-9A9.01,9.01,0,0,1,330,1642Zm-5.06-5.116a.353.353,0,1,0,0,.706H335.06a.353.353,0,1,0,0-.706H334.7v-4.944a1.431,1.431,0,0,0-1.446-1.412h-2.169v-.706a1.431,1.431,0,0,0-1.445-1.412h-2.892a1.431,1.431,0,0,0-1.446,1.412v7.062Zm9.037,0h-2.893v-5.65h2.169a.716.716,0,0,1,.724.706v4.943Zm-1.808-2.119a.353.353,0,1,0,0,.706h.724a.353.353,0,1,0,0-.706Zm0-2.119a.353.353,0,1,0,0,.706h.724a.353.353,0,1,0,0-.706Zm-1.807,4.237h-4.338v-7.062a.716.716,0,0,1,.724-.706h2.892a.715.715,0,0,1,.723.706v7.061Zm-3.254-2.119a.353.353,0,1,0,0,.706h2.169a.353.353,0,1,0,0-.706Zm0-2.119a.353.353,0,1,0,0,.706h2.169a.353.353,0,1,0,0-.706Zm0-2.119a.353.353,0,1,0,0,.706h2.169a.353.353,0,1,0,0-.706Z" transform="translate(-320.999 -1624)"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/dangrous.svg b/src/assets/icons/svg/dangrous.svg
new file mode 100644
index 0000000..5a3df8c
--- /dev/null
+++ b/src/assets/icons/svg/dangrous.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/重大危险源</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/重大危险源" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon/层级图标/背景" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)">
+            <circle id="椭圆形" cx="9" cy="9" r="9"></circle>
+        </g>
+        <g id="weixianhuaxuepin" transform="translate(4.720264, 4.186453)" fill="#3B414A" fill-rule="nonzero">
+            <path d="M5.1964988,0 C3.47900791,0 2.08688122,1.16627025 2.08688122,2.60487754 C2.08688122,3.36444255 2.4770564,4.04577613 3.09603396,4.52187494 L3.09603396,5.5441208 C3.09603396,5.94935307 3.42745372,6.28060918 3.83252233,6.28060918 C4.1425021,6.28060918 4.40796524,6.08584892 4.5161472,5.81318456 C4.52531239,6.21039729 4.85165857,6.53281553 5.2511626,6.53281553 C5.6503393,6.53281553 5.97684914,6.21039729 5.985687,5.81318456 C6.0937053,6.08584892 6.3593321,6.28060918 6.66931188,6.28060918 C7.07568977,6.27970911 7.40490018,5.9504987 7.40580025,5.5441208 L7.40580025,4.43709695 C7.96209447,3.96639905 8.30628003,3.31943493 8.30628003,2.60487754 C8.30628003,1.16627025 6.91382602,0 5.1964988,0 M3.88718613,3.26640776 C3.35050039,3.26640776 2.91543064,2.83133801 2.91543064,2.29465227 C2.91543064,1.75796653 3.35050039,1.32289678 3.88718613,1.32289678 C4.42387187,1.32289678 4.85894162,1.75796653 4.85894162,2.29465227 C4.85894162,2.83133801 4.42387187,3.26640776 3.88718613,3.26640776 M5.84100795,5.15885555 L4.5521533,5.15885555 L4.5521533,4.9235066 L5.1964988,3.80862687 L5.84100795,4.93414477 L5.84100795,5.15885555 L5.84100795,5.15885555 Z M6.5161223,3.26640776 C6.16594185,3.27092281 5.84041531,3.0866802 5.66402572,2.78413525 C5.48763613,2.4815903 5.48766763,2.10754102 5.66410817,1.80502578 C5.84054871,1.50251054 6.16610628,1.31832276 6.51628596,1.32289678 C7.04805302,1.32984269 7.47547507,1.76292063 7.47543028,2.29473305 C7.4753855,2.82654547 7.04789052,3.25955142 6.5161223,3.26640776" id="形状"></path>
+            <path d="M10.5427497,9.36289485 C10.6079024,9.03195153 10.4795841,8.69271012 10.2117185,8.48773114 C9.94385294,8.28275216 9.58286549,8.24756177 9.28045507,8.39694815 C8.97804465,8.54633452 8.78662388,8.85440658 8.78663412,9.19170222 L2.23123294,6.17242722 C2.37540096,6.01074189 2.4550365,5.80166221 2.45496174,5.58503683 C2.45484273,5.20517565 2.21269812,4.86761675 1.85291341,4.74575827 C1.49312869,4.6238998 1.09569325,4.74483401 0.864762752,5.04643911 C0.633832258,5.34804421 0.620748495,5.76326564 0.832232364,6.07881136 C0.364956534,6.10725933 0.000432369947,6.49429295 0,6.96243375 C-0.000480623742,7.41797325 0.344346637,7.79974055 0.797586142,7.84546171 C1.25082565,7.89118287 1.66495236,7.58597609 1.75546145,7.13951828 L8.30775301,10.1573203 C8.16594824,10.318476 8.08774597,10.5257935 8.08778848,10.7404554 C8.08778152,11.1204528 8.32994159,11.4581975 8.68983948,11.5801462 C9.04973736,11.7020949 9.44732934,11.5811252 9.67832053,11.2793952 C9.90931172,10.9776651 9.92232813,10.5622814 9.71068153,10.2466809 C10.1780671,10.2183839 10.5426536,9.83113627 10.5427497,9.36289485" id="路径"></path>
+            <path d="M0.000164166937,9.36289485 C0.00103242126,8.90722081 0.347187673,8.52640987 0.800712693,8.48219857 C1.25423771,8.43798728 1.66742261,8.74477495 1.75627978,9.19170222 L8.31151728,6.17242722 C8.16740862,6.01071776 8.08783234,5.80164071 8.08795215,5.58503683 C8.08807116,5.20517565 8.33021577,4.86761675 8.69000048,4.74575827 C9.0497852,4.6238998 9.44722065,4.74483401 9.67815114,5.04643911 C9.90908163,5.34804421 9.9221654,5.76326564 9.71068153,6.07881136 C10.1779574,6.10725933 10.5424815,6.49429295 10.5429139,6.96243375 C10.5433945,7.41797325 10.1985673,7.79974055 9.74532775,7.84546171 C9.29208824,7.89118287 8.87796153,7.58597609 8.78745244,7.13951828 L2.23532455,10.1573203 C2.37709623,10.3184841 2.45524321,10.5258093 2.45512541,10.7404554 C2.45490167,11.1202505 2.21274681,11.4576994 1.85301573,11.5795103 C1.49328464,11.7013213 1.09592561,11.5804225 0.864996248,11.2788997 C0.634066889,10.9773769 0.620889998,10.5622419 0.832232364,10.2466809 C0.364883892,10.2183046 0.000341647427,9.83110396 0.000164166937,9.36289485" id="路径"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/dangrousFile.svg b/src/assets/icons/svg/dangrousFile.svg
new file mode 100644
index 0000000..3672f77
--- /dev/null
+++ b/src/assets/icons/svg/dangrousFile.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/32/企业应急档案</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/32/企业应急档案" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M13.558,25.001 L6.001,25.001 C4.8964305,25.001 4.001,24.1055695 4.001,23.001 L4.001,7.001 C4.001,5.8964305 4.8964305,5.001 6.001,5.001 L20.001,5.001 C21.1055695,5.001 22.001,5.8964305 22.001,7.001 L22.001,12.779 C21.5106367,12.9043437 21.0867173,13.2123561 20.816,13.64 L13.558,25.001 Z M7.843,19.001 C7.29071525,19.001 6.843,19.4487153 6.843,20.001 C6.843,20.5532847 7.29071525,21.001 7.843,21.001 L14.16,21.001 C14.7122847,21.001 15.16,20.5532847 15.16,20.001 C15.16,19.4487153 14.7122847,19.001 14.16,19.001 L7.843,19.001 Z M7.843,14.001 C7.29071525,14.001 6.843,14.4487153 6.843,15.001 C6.843,15.5532847 7.29071525,16.001 7.843,16.001 L17.159,16.001 C17.7112847,16.001 18.159,15.5532847 18.159,15.001 C18.159,14.4487153 17.7112847,14.001 17.159,14.001 L7.843,14.001 Z M7.843,9.001 C7.29071525,9.001 6.843,9.44871525 6.843,10.001 C6.843,10.5532847 7.29071525,11.001 7.843,11.001 L18.159,11.001 C18.7112847,11.001 19.159,10.5532847 19.159,10.001 C19.159,9.44871525 18.7112847,9.001 18.159,9.001 L7.843,9.001 Z" id="减去_108" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
+        <g id="组_1039" transform="translate(16.069594, 15.870000)" fill-rule="nonzero">
+            <path d="M5.31540634,3.871 C5.31540634,3.53327788 5.58918422,3.2595 5.92690634,3.2595 C6.26462847,3.2595 6.53840634,3.53327788 6.53840634,3.871 L6.53840634,6.317 C6.53840634,6.65472212 6.26462847,6.9285 5.92690634,6.9285 C5.58918422,6.9285 5.31540634,6.65472212 5.31540634,6.317 L5.31540634,3.871 Z M5.92640634,8.457 C5.67927991,8.457 5.45648714,8.30813463 5.36191595,8.07981958 C5.26734476,7.85150453 5.31961932,7.58870253 5.4943641,7.41395776 C5.66910887,7.23921298 5.93191087,7.18693841 6.16022592,7.28150961 C6.38854097,7.3760808 6.53740634,7.59887357 6.53740634,7.846 C6.53632796,8.18144145 6.26583347,8.45371844 5.93040634,8.457 L5.92640634,8.457 Z" id="路径_533" fill="url(#linearGradient-2)"></path>
+            <path d="M10.9364063,10.1470008 L0.941406342,10.1470008 C0.602547321,10.1474485 0.290750123,9.96198292 0.129406342,9.664 C-0.050035689,9.34356736 -0.0423871262,8.95119609 0.149406342,8.638 L2.55840634,4.66 L5.13040634,0.457 C5.30347139,0.17808095 5.60621228,0.00600061713 5.93440634,0 C6.25714981,0.00287784855 6.5541074,0.176864538 6.71440634,0.457 L9.25440634,4.657 L11.6954063,8.635 C11.8990822,8.93635107 11.916846,9.32638228 11.7414063,9.645 C11.5887752,9.95035473 11.2777719,10.1442972 10.9364063,10.1470008 Z M5.92540634,1.66997812 C5.85438413,1.67042869 5.7889168,1.70849109 5.75340634,1.77 L1.66240634,8.586 C1.62678555,8.64769405 1.62667009,8.72367843 1.66210325,8.78548044 C1.6975364,8.84728245 1.76316862,8.8855715 1.83440634,8.886 L10.0174063,8.886 C10.0884651,8.88521898 10.153773,8.84679069 10.1889637,8.78505269 C10.2241543,8.72331469 10.2239422,8.64753996 10.1884063,8.586 L6.10040634,1.768 C6.0638527,1.70633022 5.99708765,1.6689418 5.92540634,1.66997812 Z" id="减去_64" fill="url(#linearGradient-3)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/empty-car.svg b/src/assets/icons/svg/empty-car.svg
new file mode 100644
index 0000000..8428e34
--- /dev/null
+++ b/src/assets/icons/svg/empty-car.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/空载车辆</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/空载车辆" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <g id="icon/层级图标/背景" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)">
+                <circle id="椭圆形" cx="9" cy="9" r="9"></circle>
+            </g>
+            <path d="M7.3734792,12.4495161 C8.09877289,12.4495161 8.6867396,13.0477084 8.6867396,13.7856158 C8.6867396,14.5235233 8.09877289,15.1217156 7.3734792,15.1217156 C6.64818551,15.1217156 6.0602188,14.5235233 6.0602188,13.7856158 C6.0602188,13.0477084 6.64818551,12.4495161 7.3734792,12.4495161 Z M10.4377535,11.0627414 L10.4377535,13.7856158 L9.12449307,13.7856158 C9.12449307,12.8017454 8.34053133,12.0041496 7.3734792,12.0041496 C6.42500424,12.0041496 5.65276609,12.7714048 5.62342292,13.7291378 C4.86991241,13.5304208 4.30920494,12.8306664 4.30920494,12.0041496 L4.30920494,11.0627414 L10.4377535,11.0627414 Z M13.0642743,12.4495161 C13.789568,12.4495161 14.3775347,13.0477084 14.3775347,13.7856158 C14.3775347,14.5235233 13.789568,15.1217156 13.0642743,15.1217156 C12.3389806,15.1217156 11.7510139,14.5235233 11.7510139,13.7856158 C11.7510139,13.0477084 12.3389806,12.4495161 13.0642743,12.4495161 Z M13.5841065,6.65996819 C13.9945004,6.66323015 14.4048943,6.71542155 14.8152881,7.55048387 L15.6907951,9.77731672 L15.6907951,12.0041496 C15.6907951,12.6662009 15.3309891,13.2468336 14.800555,13.5538582 C14.6888868,12.6794923 13.9541313,12.0041496 13.0642743,12.0041496 C12.0972221,12.0041496 11.3132604,12.8017454 11.3132604,13.7856158 L10.8755069,13.7856158 L10.8755069,6.65975073 Z" id="形状结合" fill="#3B414A"></path>
+            <rect id="矩形" stroke="#3B414A" fill="#D8D8D8" x="4.80920494" y="10" width="5.12854853" height="1"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/envFile.svg b/src/assets/icons/svg/envFile.svg
new file mode 100644
index 0000000..049ccf5
--- /dev/null
+++ b/src/assets/icons/svg/envFile.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/32/企业环保档案</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/32/企业环保档案" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M17.849,25.038 L17.542,25.038 C16.9190896,25.0368977 16.4145503,24.5319111 16.414,23.909 L16.414,23.339 C16.7914246,23.9830994 17.2760548,24.5580271 17.847,25.039 L17.849,25.038 Z M14.73,25.038 L11.336,25.038 C10.712699,25.0374486 10.2075514,24.532301 10.207,23.909 L10.207,8.128 C10.2081023,7.5050896 10.7130889,7.00055027 11.336,7 L14.73,7 C15.3529111,7.00055027 15.8578977,7.5050896 15.859,8.128 L15.859,17.928 C15.6308478,18.6045953 15.5149826,19.3139737 15.516,20.028 C15.5149826,20.7420263 15.6308478,21.4514047 15.859,22.128 L15.859,23.913 C15.8562492,24.5347383 15.3517441,25.0374559 14.73,25.038 L14.73,25.038 Z M13.037,21.662 C12.8868002,21.6614511 12.742676,21.7212627 12.637,21.828 C12.5304523,21.9338034 12.4706752,22.0778446 12.4709987,22.228 C12.4715504,22.538708 12.723292,22.7904496 13.034,22.7910024 C13.1841776,22.7914366 13.3282602,22.7316423 13.434,22.625 C13.5408327,22.5193882 13.6006617,22.375222 13.6000054,22.225 C13.6004366,22.0748224 13.5406423,21.9307398 13.434,21.825 C13.3286641,21.7198301 13.18585,21.6608339 13.037,21.6609997 L13.037,21.662 Z M12.614,9.249 C12.5764306,9.249 12.5404143,9.26399156 12.5139427,9.29065087 C12.4874712,9.31731017 12.4727336,9.35343151 12.4729964,9.391 L12.4729964,18.136 C12.4729964,18.2138721 12.5361279,18.277 12.614,18.277 L13.46,18.277 C13.5378721,18.277 13.6010036,18.2138721 13.6010036,18.136 L13.6010036,9.391 C13.6012664,9.35343151 13.5865288,9.31731017 13.5600573,9.29065087 C13.5335857,9.26399156 13.4975694,9.249 13.46,9.249 L12.614,9.249 Z M8.523,25.039 L5.129,25.039 C4.50569904,25.0384486 4.00055135,24.533301 4,23.91 L4,8.129 C4.00110225,7.5060896 4.50608886,7.00155027 5.129,7.001 L8.523,7.001 C9.14591114,7.00155027 9.65089775,7.5060896 9.652,8.129 L9.652,23.91 C9.65089775,24.5329104 9.14591114,25.0374497 8.523,25.038 L8.523,25.039 Z M6.831,21.663 C6.68080024,21.6624511 6.53667596,21.7222627 6.431,21.829 C6.32426266,21.934676 6.26445108,22.0788002 6.26499625,22.229 C6.26609995,22.5398697 6.51812881,22.7914517 6.829,22.7920024 C6.97917757,22.7924366 7.12326019,22.7326423 7.229,22.626 C7.33554767,22.5201966 7.39532477,22.3761554 7.39500132,22.226 C7.39500132,22.0759107 7.33526589,21.9319923 7.229,21.826 C7.1235834,21.7202178 6.98034022,21.6608331 6.831,21.6609996 L6.831,21.663 Z M6.407,9.25 C6.36943057,9.25 6.33341428,9.26499156 6.30694272,9.29165087 C6.28047115,9.31831017 6.26573355,9.35443151 6.26599645,9.392 L6.26599645,18.137 C6.26599645,18.2148721 6.32912785,18.278 6.407,18.278 L7.253,18.278 C7.33103556,18.278 7.39445045,18.2150336 7.395,18.137 L7.395,9.392 C7.395,9.31357557 7.33142443,9.25 7.253,9.25 L6.407,9.25 Z M16.414,16.716 L16.414,8.13 C16.4145513,7.50725132 16.9192513,7.00255135 17.542,7.002 L20.937,7.002 C21.5597487,7.00255135 22.0644487,7.50725132 22.065,8.13 L22.065,13.48 L22.055,13.48 C21.2882705,13.4797635 20.5275461,13.615184 19.808,13.88 L19.808,9.393 C19.8082664,9.35543151 19.7935288,9.31931017 19.7670573,9.29265087 C19.7405857,9.26599156 19.7045694,9.25099906 19.667,9.251 L18.821,9.251 C18.7425756,9.251 18.679,9.31457557 18.679,9.393 L18.679,14.423 C17.7468963,14.9878757 16.9693714,15.7750209 16.416,16.714 L16.414,16.716 Z" id="减去_113" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
+        <path d="M22.014,25.019 C19.2537187,25.0162439 17.0167561,22.7792813 17.014,20.019 C17.0173061,17.2589468 19.2539468,15.0223061 22.014,15.019 C24.7740532,15.0223061 27.0106939,17.2589468 27.014,20.019 C27.0112439,22.7792813 24.7742813,25.0162439 22.014,25.019 L22.014,25.019 Z M22.014,16.019 C19.804861,16.019 18.014,17.809861 18.014,20.019 C18.014,22.228139 19.804861,24.019 22.014,24.019 C24.223139,24.019 26.014,22.228139 26.014,20.019 C26.014,17.809861 24.223139,16.019 22.014,16.019 Z" id="减去_114" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
+        <path d="M21.791,21.829 C21.560155,21.8223916 21.3311859,21.7854068 21.11,21.719 C21.0321147,21.6881664 20.9702747,21.6267519 20.9389041,21.5490813 C20.9075335,21.4714108 20.9093754,21.3842756 20.944,21.308 C20.9757446,21.2308636 21.0372351,21.1697747 21.114578,21.1385365 C21.1919209,21.1072983 21.2785891,21.1085468 21.355,21.142 C21.4996709,21.1774473 21.6472902,21.19954 21.796,21.208 C22.0823623,21.2134978 22.3652498,21.1445849 22.617,21.008 C22.9783477,20.7923583 23.2729038,20.4808418 23.468,20.108 C23.7776252,19.5249975 23.9888021,18.8948455 24.093,18.243 L23.879,18.243 C23.0679576,18.2057735 22.255265,18.2560639 21.455,18.393 C21.1801558,18.4481268 20.9225882,18.5685079 20.704,18.744 C20.5057252,18.920305 20.3661437,19.1530572 20.304,19.411 C20.2370676,19.7022644 20.2474093,20.0059634 20.334,20.292 C20.3621905,20.3928914 20.4060588,20.4887268 20.464,20.576 C20.5271251,20.6698148 20.5345504,20.7904412 20.4834081,20.8912898 C20.4322658,20.9921385 20.3305613,21.057423 20.217576,21.0619287 C20.1045907,21.0664344 19.9980105,21.0094559 19.939,20.913 C19.8514486,20.7763959 19.7840865,20.6278625 19.739,20.472 C19.6157997,20.0720734 19.6040443,19.6461127 19.705,19.24 C19.8021748,18.8613955 20.0112806,18.5209016 20.305,18.263 C20.5961816,18.0267498 20.9386686,17.8620136 21.305,17.782 C22.1503291,17.6329384 23.0095645,17.5779366 23.867,17.618 L24.147,17.618 C24.302381,17.6175069 24.4516188,17.6786405 24.562,17.788 L24.582,17.808 C24.6823005,17.9340454 24.7277061,18.0951273 24.708,18.255 L24.708,18.265 C24.5998309,19.02025 24.3591348,19.7504633 23.997,20.422 C23.7448519,20.8885947 23.3691266,21.2767749 22.911,21.544 C22.5686605,21.735717 22.1812771,21.8323901 21.789,21.824" id="路径_622" fill="url(#linearGradient-3)" fill-rule="nonzero"></path>
+        <path d="M20.146,22.576 L20.126,22.576 C20.0435339,22.5708701 19.966528,22.5330312 19.9120789,22.4708841 C19.8576298,22.408737 19.8302434,22.3274247 19.836,22.245 C19.8788798,21.5225608 20.1868954,20.8413658 20.701,20.332 L20.737,20.292 C21.0497141,19.9681558 21.4090041,19.69279 21.803,19.475 C22.0451768,19.3363329 22.3156004,19.2542827 22.594,19.235 C22.7056455,19.2267829 22.813194,19.2787521 22.876133,19.3713314 C22.939072,19.4639107 22.9478396,19.583035 22.899133,19.6838314 C22.8504265,19.7846278 22.7516455,19.8517829 22.64,19.86 C22.4461114,19.8756909 22.2580248,19.9337212 22.089,20.03 C21.7668311,20.2147107 21.4688788,20.4387627 21.202,20.697 L21.168,20.737 C20.7483345,21.14734 20.4963244,21.6991244 20.461,22.285 C20.4467541,22.4465831 20.3131731,22.571546 20.151,22.575" id="路径_623" fill="url(#linearGradient-4)" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/fixed.svg b/src/assets/icons/svg/fixed.svg
new file mode 100644
index 0000000..d2e8012
--- /dev/null
+++ b/src/assets/icons/svg/fixed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><defs><style>.a{fill:none;}.b{fill:currentColor;}</style></defs><path class="a" d="M0,0H30V30H0Z"/><path class="b" d="M357.7,372.8m-4.442,0a4.442,4.442,0,1,0,4.442-4.442A4.442,4.442,0,0,0,353.259,372.8Z" transform="translate(-342.922 -357.584)"/><path class="b" d="M121.147,124.715A11.558,11.558,0,1,0,132.7,136.273,11.558,11.558,0,0,0,121.147,124.715Zm0,1.873a9.685,9.685,0,1,1-9.685,9.684A9.684,9.684,0,0,1,121.147,126.588Z" transform="translate(-106.369 -121.051)"/><path class="b" d="M488.492,10.667a.939.939,0,0,1,.94.937v2.9a.94.94,0,0,1-1.88,0V11.6A.939.939,0,0,1,488.492,10.667Zm0,24.6a.939.939,0,0,1,.94.937v2.9a.94.94,0,0,1-1.88,0V36.2a.939.939,0,0,1,.94-.937Z" transform="translate(-473.271 -10.353)"/><path class="b" d="M10.667,488.492a.939.939,0,0,1,.937-.94h2.9a.94.94,0,0,1,0,1.88H11.6A.939.939,0,0,1,10.667,488.492Zm24.6,0a.939.939,0,0,1,.937-.94h2.9a.94.94,0,0,1,0,1.88H36.2a.939.939,0,0,1-.937-.94Z" transform="translate(-10.353 -473.271)"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/forbid-space.svg b/src/assets/icons/svg/forbid-space.svg
new file mode 100644
index 0000000..7d5bf8f
--- /dev/null
+++ b/src/assets/icons/svg/forbid-space.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/shouxiankongjian</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/shouxiankongjian" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="减去-71" transform="translate(1.001000, 1.000000)" fill="url(#linearGradient-1)" fill-rule="nonzero">
+            <path d="M9,18 C4.02943725,18 0,13.9705627 0,9 C0,4.02943725 4.02943725,0 9,0 C13.9705627,0 18,4.02943725 18,9 C17.9944889,13.9682782 13.9682782,17.9944889 9,18 L9,18 Z M9,3.18799931 C8.90923436,3.1878525 8.81998688,3.21128427 8.741,3.256 L4.289,5.827 C4.12998511,5.92022778 4.03220843,6.09067119 4.03199934,6.275 L4.03199934,11.414 C4.03170537,11.5992476 4.12998402,11.7706638 4.29,11.864 L8.743,14.435 C8.90338817,14.5243809 9.09861183,14.5243809 9.259,14.435 L13.71,11.865 C13.8698499,11.7724725 13.9681978,11.6016978 13.9680009,11.417 L13.9680009,6.277 C13.968349,6.09200007 13.8700084,5.92085694 13.71,5.828 L9.259,3.257 C9.18009098,3.21197788 9.09084923,3.18820305 9,3.18799931 L9,3.18799931 Z M8.722,13.788 L8.722,13.788 L4.588,11.422 L4.569,6.607 L6.714,7.907 L6.714,9.874 C6.71371678,10.0547981 6.80973402,10.2220662 6.966,10.313 L8.724,11.326 L8.724,13.783 L8.722,13.788 Z M9.277,13.788 L9.277,11.335 L11.035,10.315 C11.1906404,10.224904 11.2866245,10.0588363 11.287,9.879 L11.287,7.939 L13.416,6.645 L13.433,11.391 L9.279,13.791 L9.277,13.788 Z M9.002,10.854 L9.002,10.854 L7.472,9.97 L9.001,8.844 L10.524,9.97 L9.003,10.854 L9.002,10.854 Z M7.268,9.529 L7.268,7.851 L8.761,6.987 L8.761,8.426 L7.27,9.526 L7.268,9.529 Z M10.731,9.529 L10.731,9.529 L9.24,8.429 L9.24,6.99 L10.732,7.852 L10.732,9.53 L10.731,9.529 Z M11.083,7.416 L11.083,7.416 C11.0678779,7.40517139 11.052189,7.39515716 11.036,7.386 L9.252,6.356 C9.17579537,6.31159189 9.08919982,6.28813175 9.001,6.288 C8.9124987,6.28823867 8.8256078,6.31168542 8.749,6.356 L6.965,7.387 L6.94,7.402 L4.867,6.141 L8.981,3.741 L13.172,6.141 L11.084,7.412 L11.083,7.416 Z" id="减去_71"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/four-color.svg b/src/assets/icons/svg/four-color.svg
new file mode 100644
index 0000000..b3d39a5
--- /dev/null
+++ b/src/assets/icons/svg/four-color.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#f0f7fc"/>
+      <stop offset="1" stop-color="#c2edff"/>
+    </linearGradient>
+  </defs>
+  <path id="减去_59" data-name="减去 59" d="M-1586-715a9.01,9.01,0,0,1-9-9,9.01,9.01,0,0,1,9-9,9.01,9.01,0,0,1,9,9A9.01,9.01,0,0,1-1586-715Zm1-8.5a.5.5,0,0,0-.5.5v3a.5.5,0,0,0,.5.5h3a.5.5,0,0,0,.5-.5v-3a.5.5,0,0,0-.5-.5Zm-5,0a.5.5,0,0,0-.5.5v3a.5.5,0,0,0,.5.5h3a.5.5,0,0,0,.5-.5v-3a.5.5,0,0,0-.5-.5Zm5-5a.5.5,0,0,0-.5.5v3a.5.5,0,0,0,.5.5h3a.5.5,0,0,0,.5-.5v-3a.5.5,0,0,0-.5-.5Zm-5,0a.5.5,0,0,0-.5.5v3a.5.5,0,0,0,.5.5h3a.5.5,0,0,0,.5-.5v-3a.5.5,0,0,0-.5-.5Zm7,8h-1a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5h1a.5.5,0,0,1,.5.5v1A.5.5,0,0,1-1583-720.5Zm-5,0h-1a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5h1a.5.5,0,0,1,.5.5v1A.5.5,0,0,1-1588-720.5Zm5-5h-1a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5h1a.5.5,0,0,1,.5.5v1A.5.5,0,0,1-1583-725.5Zm-5,0h-1a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5h1a.5.5,0,0,1,.5.5v1A.5.5,0,0,1-1588-725.5Z" transform="translate(1595 733)" fill="url(#linear-gradient)"/>
+</svg>
diff --git a/src/assets/icons/svg/four-color2.svg b/src/assets/icons/svg/four-color2.svg
new file mode 100644
index 0000000..b3d39a5
--- /dev/null
+++ b/src/assets/icons/svg/four-color2.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#f0f7fc"/>
+      <stop offset="1" stop-color="#c2edff"/>
+    </linearGradient>
+  </defs>
+  <path id="减去_59" data-name="减去 59" d="M-1586-715a9.01,9.01,0,0,1-9-9,9.01,9.01,0,0,1,9-9,9.01,9.01,0,0,1,9,9A9.01,9.01,0,0,1-1586-715Zm1-8.5a.5.5,0,0,0-.5.5v3a.5.5,0,0,0,.5.5h3a.5.5,0,0,0,.5-.5v-3a.5.5,0,0,0-.5-.5Zm-5,0a.5.5,0,0,0-.5.5v3a.5.5,0,0,0,.5.5h3a.5.5,0,0,0,.5-.5v-3a.5.5,0,0,0-.5-.5Zm5-5a.5.5,0,0,0-.5.5v3a.5.5,0,0,0,.5.5h3a.5.5,0,0,0,.5-.5v-3a.5.5,0,0,0-.5-.5Zm-5,0a.5.5,0,0,0-.5.5v3a.5.5,0,0,0,.5.5h3a.5.5,0,0,0,.5-.5v-3a.5.5,0,0,0-.5-.5Zm7,8h-1a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5h1a.5.5,0,0,1,.5.5v1A.5.5,0,0,1-1583-720.5Zm-5,0h-1a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5h1a.5.5,0,0,1,.5.5v1A.5.5,0,0,1-1588-720.5Zm5-5h-1a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5h1a.5.5,0,0,1,.5.5v1A.5.5,0,0,1-1583-725.5Zm-5,0h-1a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5h1a.5.5,0,0,1,.5.5v1A.5.5,0,0,1-1588-725.5Z" transform="translate(1595 733)" fill="url(#linear-gradient)"/>
+</svg>
diff --git a/src/assets/icons/svg/fq-wrw.svg b/src/assets/icons/svg/fq-wrw.svg
new file mode 100644
index 0000000..0960f2f
--- /dev/null
+++ b/src/assets/icons/svg/fq-wrw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18"><defs><style>.a{fill:url(#a);}</style><linearGradient id="a" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#f0f7fc"/><stop offset="1" stop-color="#c2edff"/></linearGradient></defs><path class="a" d="M330,1642a9,9,0,1,1,9-9A9.01,9.01,0,0,1,330,1642Zm-1.4-9.57h0l1.479.01a.71.71,0,0,1,.632.762v.072l0,.971a1,1,0,0,0,0,.223v.2a5.1,5.1,0,0,0,.93,2.973,3.744,3.744,0,0,0,1.569,1.281.3.3,0,0,0,.117.023.321.321,0,0,0,.294-.211.336.336,0,0,0-.179-.43,3.11,3.11,0,0,1-1.3-1.064,4.412,4.412,0,0,1-.8-2.57v-.254l0-.023a.236.236,0,0,1,0-.074l0-.027v-.189l1.082.01a.282.282,0,0,1,.24.307v.6a.668.668,0,0,0,0,.146v.109a3.119,3.119,0,0,0,.571,1.824,2.275,2.275,0,0,0,.975.793.268.268,0,0,0,.116.025.315.315,0,0,0,.294-.209.341.341,0,0,0-.178-.434,1.652,1.652,0,0,1-.7-.578,2.432,2.432,0,0,1-.443-1.418v-.16l0-.023,0-.027v-.652a.933.933,0,0,0-.868-.973l-1.085-.006v-.24a1.534,1.534,0,0,0-.36-1,1.206,1.206,0,0,0-.755-.418v-1.857a.368.368,0,0,1,.355-.375.532.532,0,0,1,.5.4,3.133,3.133,0,0,0,.861,1.518,2.173,2.173,0,0,0,1.493.572c.075,0,.151,0,.228-.008a.33.33,0,0,0,.289-.361.324.324,0,0,0-.314-.3.124.124,0,0,0-.027,0c-.06.006-.12.008-.178.008a1.909,1.909,0,0,1-1.74-1.605,1.176,1.176,0,0,0-1.113-.889,1.019,1.019,0,0,0-.988,1.039v1.832l-.969.008c0-.012,0-.023,0-.033v-2.93a.651.651,0,0,1,.633-.666h2.562a.656.656,0,0,1,.636.656,1.414,1.414,0,0,0,1.35,1.428c.288,0,.366.008.417.012.07,0,.116.006.308.006h.936a.332.332,0,0,0,0-.664h-.936c-.183,0-.219,0-.273,0-.077-.006-.168-.01-.442-.014a.759.759,0,0,1-.726-.77,1.306,1.306,0,0,0-1.268-1.316h-2.563a1.3,1.3,0,0,0-1.267,1.332v2.93c0,.008,0,.018,0,.027h-.119a.25.25,0,0,0-.079.01h-.026a1.2,1.2,0,0,0-.9.43,1.539,1.539,0,0,0-.359,1v.072l0,1.02,0,.023a.21.21,0,0,1,0,.078l0,.023v.252a4.416,4.416,0,0,1-.8,2.572,3.07,3.07,0,0,1-1.3,1.063.34.34,0,0,0-.178.432.317.317,0,0,0,.294.211.3.3,0,0,0,.116-.025,3.733,3.733,0,0,0,1.57-1.277,5.114,5.114,0,0,0,.93-2.975v-.2a.943.943,0,0,0,0-.223l0-.971v-.072a.711.711,0,0,1,.631-.762Zm6.035-1.057a.332.332,0,0,0,0,.664h.835a.332.332,0,0,0,0-.664Z" transform="translate(-321 -1624)"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/fs-wrw.svg b/src/assets/icons/svg/fs-wrw.svg
new file mode 100644
index 0000000..1c3c41d
--- /dev/null
+++ b/src/assets/icons/svg/fs-wrw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18"><defs><style>.a{fill:url(#a);}</style><linearGradient id="a" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#f0f7fc"/><stop offset="1" stop-color="#c2edff"/></linearGradient></defs><path class="a" d="M330,1642a9,9,0,1,1,9-9A9.011,9.011,0,0,1,330,1642Zm-5.257-5.1a.23.23,0,0,0-.2.109.19.19,0,0,0-.019.158.212.212,0,0,0,.111.127,2.686,2.686,0,0,0,1.246.332,1.261,1.261,0,0,0,.128,0,2.252,2.252,0,0,0,.708-.164,1.646,1.646,0,0,1,.646-.137h.057a1,1,0,0,1,.383.08l.018.008a1.863,1.863,0,0,0,.613.145,1.619,1.619,0,0,0,.234.014,2.28,2.28,0,0,0,.766-.141,2.085,2.085,0,0,1,.749-.135h.012a1.5,1.5,0,0,1,.7.16l.006,0a1.577,1.577,0,0,0,.726.172c.04,0,.081,0,.122,0a2.205,2.205,0,0,0,.9-.25,1.194,1.194,0,0,1,.537-.148,1.275,1.275,0,0,1,.146.008,1.637,1.637,0,0,1,.342.088,4.1,4.1,0,0,0,.692.182,6.323,6.323,0,0,0,.824.092h.008a.226.226,0,0,0,.232-.2.2.2,0,0,0-.057-.15.253.253,0,0,0-.161-.072,5.835,5.835,0,0,1-.757-.08,4.358,4.358,0,0,1-.622-.166,1.921,1.921,0,0,0-.438-.109,1.176,1.176,0,0,0-.215-.016,1.6,1.6,0,0,0-.741.2,1.691,1.691,0,0,1-.719.205h-.087a1.127,1.127,0,0,1-.538-.127,1.936,1.936,0,0,0-.9-.205h-.046a2.572,2.572,0,0,0-.873.158,1.756,1.756,0,0,1-.616.117c-.059,0-.121,0-.186-.01a1.581,1.581,0,0,1-.477-.111l-.005,0-.019-.01a1.444,1.444,0,0,0-.586-.113h-.032a2.2,2.2,0,0,0-.808.164l-.005,0a1.725,1.725,0,0,1-.566.137l-.1,0a2.2,2.2,0,0,1-1.022-.277l-.009,0A.254.254,0,0,0,324.743,1636.9Zm-.066-1.121a.244.244,0,0,0-.2.1.2.2,0,0,0-.026.158.213.213,0,0,0,.1.133,2.787,2.787,0,0,0,1.336.377,2.563,2.563,0,0,0,.274-.018,1.936,1.936,0,0,0,.542-.154,1.363,1.363,0,0,1,.438-.127c.061-.006.118-.008.172-.008a1.5,1.5,0,0,1,.562.119,2.431,2.431,0,0,0,.9.178,1.9,1.9,0,0,0,.782-.156,1.657,1.657,0,0,1,.64-.139h.07a1.736,1.736,0,0,1,.642.119,2.371,2.371,0,0,0,.853.148h.03a2.344,2.344,0,0,0,.8-.146,1.673,1.673,0,0,1,.641-.111h.078a10.305,10.305,0,0,1,1.156.143c.216.033.426.068.643.109a.128.128,0,0,0,.046.008.227.227,0,0,0,.224-.172.194.194,0,0,0-.032-.154.229.229,0,0,0-.147-.094c-.223-.041-.437-.076-.654-.111l-.044-.006a10.4,10.4,0,0,0-1.177-.145h-.108a2.126,2.126,0,0,0-.785.139,1.9,1.9,0,0,1-.645.119h-.058a1.8,1.8,0,0,1-.646-.117l-.01-.006a2.263,2.263,0,0,0-.806-.145.56.56,0,0,0-.08,0,1.984,1.984,0,0,0-.811.172,1.4,1.4,0,0,1-.595.121,2.011,2.011,0,0,1-.732-.148,1.986,1.986,0,0,0-.728-.15,1.886,1.886,0,0,0-.231.012,1.857,1.857,0,0,0-.569.158l-.005,0a1.4,1.4,0,0,1-.411.121,1.554,1.554,0,0,1-.213.012,2.285,2.285,0,0,1-1.1-.314A.249.249,0,0,0,324.677,1635.777Zm4.5-6.781h0l1.562.01a.689.689,0,0,1,.666.7v.959a.687.687,0,0,0,0,.205v.189a4.306,4.306,0,0,0,.981,2.738,3.868,3.868,0,0,0,1.656,1.182.329.329,0,0,0,.122.021.337.337,0,0,0,.311-.2.28.28,0,0,0,0-.229.314.314,0,0,0-.186-.168,3.2,3.2,0,0,1-1.369-.982,3.71,3.71,0,0,1-.846-2.367v-.234l0-.023a.179.179,0,0,1,0-.068l0-.021v-.176l1.142.008a.273.273,0,0,1,.253.285v.555a.622.622,0,0,0,0,.135v.1a2.646,2.646,0,0,0,.6,1.682,2.427,2.427,0,0,0,1.029.732.373.373,0,0,0,.123.02.333.333,0,0,0,.311-.191.286.286,0,0,0,0-.232.3.3,0,0,0-.185-.164,1.77,1.77,0,0,1-.743-.535,2.042,2.042,0,0,1-.467-1.309v-.148l0-.021,0-.023v-.6a.915.915,0,0,0-.916-.9l-1.145-.006v-.225a1.294,1.294,0,0,0-.38-.914,1.332,1.332,0,0,0-.8-.389c-.011-.006-.575-.023-.656-.023h-.011l-1.022.006c-.007-.006-.209-.008-.4-.008-.125,0-.259,0-.264,0h-.127a.286.286,0,0,0-.083.014H328.3a1.33,1.33,0,0,0-.949.395,1.306,1.306,0,0,0-.379.914v.07l0,.939,0,.023a.2.2,0,0,1,0,.068l0,.025v.229a3.732,3.732,0,0,1-.846,2.373,3.233,3.233,0,0,1-1.369.982.308.308,0,0,0-.186.164.288.288,0,0,0,0,.232.335.335,0,0,0,.31.193.432.432,0,0,0,.123-.02,3.886,3.886,0,0,0,1.656-1.184,4.3,4.3,0,0,0,.981-2.742v-.186a.8.8,0,0,0,0-.205v-.963a.69.69,0,0,1,.666-.7Z" transform="translate(-321 -1624)"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/fullScreen.svg b/src/assets/icons/svg/fullScreen.svg
new file mode 100644
index 0000000..70a0d53
--- /dev/null
+++ b/src/assets/icons/svg/fullScreen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><defs><style>.a{fill:currentColor;}</style></defs><g transform="translate(-48 -48)"><path class="a" d="M197.719,192h-4.684A1.034,1.034,0,0,0,192,193.034v4.458a1.034,1.034,0,1,0,2.069,0v-3.423h3.65a1.034,1.034,0,0,0,0-2.069Zm13.447,0h-4.683a1.034,1.034,0,1,0,0,2.069h3.649v3.423a1.034,1.034,0,1,0,2.069,0v-4.458A1.034,1.034,0,0,0,211.166,192Zm-13.447,18.941h-3.65v-3.424a1.034,1.034,0,1,0-2.069,0v4.459a1.034,1.034,0,0,0,1.034,1.034h4.684a1.034,1.034,0,0,0,0-2.069Zm13.447-4.459a1.034,1.034,0,0,0-1.034,1.034v3.424h-3.649a1.034,1.034,0,1,0,0,2.069h4.683a1.034,1.034,0,0,0,1.034-1.034v-4.459A1.034,1.034,0,0,0,211.166,206.483Z" transform="translate(-139.345 -139.345)"/><path class="a" d="M75.931,48H50.069A2.071,2.071,0,0,0,48,50.069V75.931A2.071,2.071,0,0,0,50.069,78H75.931A2.071,2.071,0,0,0,78,75.931V50.069A2.071,2.071,0,0,0,75.931,48ZM50.069,75.931V50.069H75.931l0,25.862Z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/gas-env.svg b/src/assets/icons/svg/gas-env.svg
new file mode 100644
index 0000000..c70dd34
--- /dev/null
+++ b/src/assets/icons/svg/gas-env.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18"><defs><style>.a{fill:url(#a);}</style><linearGradient id="a" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#f0f7fc"/><stop offset="1" stop-color="#c2edff"/></linearGradient></defs><path class="a" d="M330,1642a9,9,0,1,1,9-9A9.01,9.01,0,0,1,330,1642Zm-.559-8.029a2.453,2.453,0,0,0-.534.059,2.38,2.38,0,0,0-1.187.678,2.369,2.369,0,0,0-.4.557,2.49,2.49,0,0,0-.2.543,1.652,1.652,0,0,0-.333.277,1.541,1.541,0,0,0-.269.418,1.567,1.567,0,0,0-.123.482,1.54,1.54,0,0,0,.043.508,1.482,1.482,0,0,0,.207.467,1.509,1.509,0,0,0,.337.367,1.6,1.6,0,0,0,.437.236,1.629,1.629,0,0,0,.5.086h3.232a1.837,1.837,0,0,0,1.151-.406,1.839,1.839,0,0,0,.671-1.664,1.834,1.834,0,0,0-.536-1.076,1.849,1.849,0,0,0-1.062-.512c-.007-.014-.015-.027-.025-.043a2.422,2.422,0,0,0-.489-.5,2.383,2.383,0,0,0-.6-.33,2.473,2.473,0,0,0-.668-.145C329.548,1633.973,329.494,1633.971,329.44,1633.971Zm6.132-3.549a.281.281,0,0,0-.09.014.275.275,0,0,0-.091.053.256.256,0,0,0-.063.078.282.282,0,0,0-.03.1.26.26,0,0,0,.01.1,5.658,5.658,0,0,1,.271,1.35,5.58,5.58,0,0,1-.062,1.35,5.586,5.586,0,0,1-1.083,2.484.221.221,0,0,0-.037.068.207.207,0,0,0-.018.072.254.254,0,0,0,0,.074.246.246,0,0,0,.024.07.266.266,0,0,0,.042.064.251.251,0,0,0,.057.047.242.242,0,0,0,.069.031.3.3,0,0,0,.076.012.207.207,0,0,0,.061-.01.174.174,0,0,0,.058-.02.272.272,0,0,0,.052-.035.268.268,0,0,0,.043-.045,6.144,6.144,0,0,0,.96-5.686.248.248,0,0,0-.055-.09.262.262,0,0,0-.082-.061.31.31,0,0,0-.1-.025Zm-5.74-1.656a3.6,3.6,0,0,0-1.634.391,3.61,3.61,0,0,0-1.512,1.451,3.576,3.576,0,0,0-.453,2,3.56,3.56,0,0,0,.225,1.035.245.245,0,0,0,.041.072.226.226,0,0,0,.059.057.413.413,0,0,0,.072.035.29.29,0,0,0,.082.012v.008h.007a.229.229,0,0,0,.058-.01.166.166,0,0,0,.061-.021.246.246,0,0,0,.053-.037.264.264,0,0,0,.044-.049.308.308,0,0,0,.031-.059.258.258,0,0,0,.015-.064.252.252,0,0,0,0-.066.246.246,0,0,0-.016-.062,3.068,3.068,0,0,1-.122-1.756,3.1,3.1,0,0,1,.315-.822,2.978,2.978,0,0,1,.55-.709,3.077,3.077,0,0,1,.732-.521,3.015,3.015,0,0,1,.833-.281,3.12,3.12,0,0,1,.556-.051,2.579,2.579,0,0,1,.325.018,3.059,3.059,0,0,1,2.732,3.035.266.266,0,0,0,.021.105.271.271,0,0,0,.059.086.286.286,0,0,0,.086.059.247.247,0,0,0,.105.021.268.268,0,0,0,.193-.08.258.258,0,0,0,.058-.086.251.251,0,0,0,.022-.105,3.636,3.636,0,0,0-.156-1.049,3.593,3.593,0,0,0-3.06-2.533A3.17,3.17,0,0,0,329.832,1628.766Zm-.061,2.365a1.4,1.4,0,0,0-.272.027,1.368,1.368,0,0,0-.4.156,1.4,1.4,0,0,0-.341.283,1.338,1.338,0,0,0-.08,1.637.275.275,0,0,0,.043.049.237.237,0,0,0,.054.035.352.352,0,0,0,.061.023.363.363,0,0,0,.065.008.3.3,0,0,0,.074-.01.215.215,0,0,0,.067-.031.305.305,0,0,0,.057-.045.36.36,0,0,0,.043-.061.263.263,0,0,0,.025-.072.272.272,0,0,0,0-.072.333.333,0,0,0-.015-.072.251.251,0,0,0-.034-.064.821.821,0,0,1-.108-.227.76.76,0,0,1-.034-.24.811.811,0,0,1,.158-.463.878.878,0,0,1,.179-.174.9.9,0,0,1,.219-.107.819.819,0,0,1,.241-.035.776.776,0,0,1,.246.041.731.731,0,0,1,.221.113.793.793,0,0,1,.171.174.763.763,0,0,1,.112.217.778.778,0,0,1,.039.246c0,.012,0,.027,0,.041v.039l0,.039,0,.021,0,.02a.258.258,0,0,0,0,.109.251.251,0,0,0,.04.1.259.259,0,0,0,.073.074.288.288,0,0,0,.1.043.533.533,0,0,0,.057,0,.461.461,0,0,0,.052,0,.282.282,0,0,0,.1-.041.275.275,0,0,0,.074-.074.239.239,0,0,0,.042-.1,1.344,1.344,0,0,0-.361-1.211,1.354,1.354,0,0,0-.361-.26,1.323,1.323,0,0,0-.425-.125A1.466,1.466,0,0,0,329.771,1631.131ZM330,1626.4c-.115,0-.23,0-.343.01a6.113,6.113,0,0,0-1.828.387,6.134,6.134,0,0,0-3.967,5.742.258.258,0,0,0,.021.105.288.288,0,0,0,.145.145.244.244,0,0,0,.105.021.25.25,0,0,0,.106-.021.253.253,0,0,0,.086-.061.258.258,0,0,0,.059-.084.274.274,0,0,0,.021-.105,5.59,5.59,0,0,1,5.282-5.584c.1-.006.21-.01.313-.01a5.494,5.494,0,0,1,1.346.166,5.586,5.586,0,0,1,2.847,1.727.246.246,0,0,0,.086.066.262.262,0,0,0,.1.025h.02a.3.3,0,0,0,.083-.012.287.287,0,0,0,.094-.057.272.272,0,0,0,.065-.084.252.252,0,0,0,.026-.1.249.249,0,0,0-.014-.1.289.289,0,0,0-.054-.1,6.259,6.259,0,0,0-1.435-1.2A6.178,6.178,0,0,0,330,1626.4Zm1.146,11.7h-3.221a1.022,1.022,0,0,1-.324-.055,1,1,0,0,1-.5-.389.993.993,0,0,1,.093-1.211.99.99,0,0,1,.258-.205.2.2,0,0,0,.04-.025.3.3,0,0,0,.052-.033.271.271,0,0,0,.061-.072.289.289,0,0,0,.032-.09,1.831,1.831,0,0,1,.476-.939,1.8,1.8,0,0,1,.415-.324,1.878,1.878,0,0,1,.5-.2,1.951,1.951,0,0,1,.412-.045c.038,0,.078,0,.124,0a1.918,1.918,0,0,1,.516.111,1.865,1.865,0,0,1,.46.256,1.91,1.91,0,0,1,.171.145,1.945,1.945,0,0,0-.558.244,1.851,1.851,0,0,0-.458.43.245.245,0,0,0-.046.1.267.267,0,0,0-.006.1.273.273,0,0,0,.033.1.279.279,0,0,0,.072.08.267.267,0,0,0,.166.055.233.233,0,0,0,.037,0,.248.248,0,0,0,.1-.035.224.224,0,0,0,.081-.07,1.307,1.307,0,0,1,.715-.475,1.319,1.319,0,0,1,.317-.039,1.093,1.093,0,0,1,.112.006,1.266,1.266,0,0,1,.426.115,1.224,1.224,0,0,1,.363.248,1.29,1.29,0,0,1,.357,1.2,1.334,1.334,0,0,1-.167.412,1.317,1.317,0,0,1-.661.529,1.336,1.336,0,0,1-.428.074h-.019Z" transform="translate(-321 -1624)"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/gas-monitor.svg b/src/assets/icons/svg/gas-monitor.svg
new file mode 100644
index 0000000..fb2a254
--- /dev/null
+++ b/src/assets/icons/svg/gas-monitor.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/气体监测</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/气体监测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <g id="icon/层级图标/背景" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)">
+                <circle id="椭圆形" cx="9" cy="9" r="9"></circle>
+            </g>
+            <path d="M8.40249666,14.1437584 C7.92416339,14.1420593 7.53450296,14.5190265 7.53103575,14.9868417 C7.53103575,15.4530477 7.92056828,15.8309473 8.40249666,15.8309473 C8.88123699,15.8326486 9.27106629,15.4550587 9.27395757,14.9868417 C9.27106628,14.5187892 8.88106628,14.1414935 8.40249666,14.1437584 Z M11.5975033,14.1437629 C11.1191701,14.1420593 10.7295096,14.5190265 10.7260424,14.9868417 C10.7260424,15.4530477 11.1166249,15.8309473 11.5975033,15.8309473 C12.0762437,15.8326486 12.466073,15.4550587 12.4689642,14.9868417 C12.465497,14.5190265 12.0758366,14.1420593 11.5975033,14.1437629 Z M7.42332279,5.38776855 C6.18196967,6.97268507 6.76069215,8.08510754 7.5739357,9.09302624 L7.75787209,9.31543699 C8.65643103,10.3854606 9.08835635,12.019493 6.08994617,13.2411935 C7.42043043,11.801537 6.6587764,10.3625178 5.75828922,9.31543699 C4.85876617,8.26835615 5.09015474,6.30484057 7.42332279,5.38776855 Z M10.5760136,5.38776855 C9.24263702,7.08999188 10.0091117,8.24732531 10.9105629,9.31543699 C11.8091219,10.3854606 12.2410472,12.019493 9.24263702,13.2411935 C10.5731213,11.801537 9.81146725,10.3625178 8.91098008,9.31543699 C8.01145702,8.26835615 8.24284559,6.30484057 10.5760136,5.38776855 Z M13.7287045,5.38776855 C12.3953279,7.08999188 13.1618025,8.24732531 14.0632538,9.31543699 C14.9618127,10.3854606 15.3937381,12.019493 12.3953279,13.2411935 C13.7258121,11.801537 12.9641581,10.3625178 12.0636709,9.31543699 C11.1641479,8.26835615 11.3955364,6.30484057 13.7287045,5.38776855 Z" id="形状结合" fill="#3B414A"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/ground-env.svg b/src/assets/icons/svg/ground-env.svg
new file mode 100644
index 0000000..329621c
--- /dev/null
+++ b/src/assets/icons/svg/ground-env.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18.002" viewBox="0 0 18 18.002"><defs><style>.a{fill:url(#a);}</style><linearGradient id="a" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#f0f7fc"/><stop offset="1" stop-color="#c2edff"/></linearGradient></defs><path class="a" d="M330,1642a9,9,0,1,1,9-9A9.011,9.011,0,0,1,330,1642Zm1.006-8.988a.391.391,0,0,0-.389.393v4.1a.39.39,0,0,0,.389.389h2.979a1.719,1.719,0,0,0,1.708-1.914l-.3-2.623a.389.389,0,0,0-.386-.346Zm-5.426,0a.392.392,0,0,0-.385.346l-.3,2.623a1.718,1.718,0,0,0,1.707,1.914h2.95a.393.393,0,0,0,.276-.113.387.387,0,0,0,.113-.275v-4.1a.391.391,0,0,0-.389-.393Zm5.426-4.4a.389.389,0,0,0-.389.389v2.984a.389.389,0,0,0,.389.389h3.867a.384.384,0,0,0,.29-.129.392.392,0,0,0,.1-.3l-.207-1.807a1.716,1.716,0,0,0-1.707-1.523Zm-3.767,0a1.719,1.719,0,0,0-1.707,1.523l-.206,1.807a.387.387,0,0,0,.386.432h3.838a.386.386,0,0,0,.389-.389V1629a.389.389,0,0,0-.389-.389Zm6.745,8.5H331.4v-3.324h3.263l.26,2.277a.94.94,0,0,1-.934,1.047Zm-4.821,0H326.6a.94.94,0,0,1-.934-1.047l.259-2.277h3.236v3.324Zm5.274-5.52H331.4v-2.207h1.951a.94.94,0,0,1,.934.834l.157,1.373Zm-5.273,0h-3.015l.157-1.373a.939.939,0,0,1,.934-.834h1.924v2.207Z" transform="translate(-321 -1624)"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/heatmap.svg b/src/assets/icons/svg/heatmap.svg
new file mode 100644
index 0000000..65233cc
--- /dev/null
+++ b/src/assets/icons/svg/heatmap.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="智慧应急" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="智慧化工园区/智慧应急-事故研判" transform="translate(-1384.000000, -860.000000)">
+            <g id="编组-15" transform="translate(1368.000000, 680.000000)">
+                <g id="icon/20px/层级图标/视频监控" transform="translate(16.000000, 180.000000)">
+                    <g id="icon/层级图标/背景" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)">
+                        <circle id="椭圆形" cx="9" cy="9" r="9"></circle>
+                    </g>
+                    <g id="relitu" transform="translate(10.000000, 10.000000) scale(1, -1) translate(-10.000000, -10.000000) translate(4.564469, 4.564329)" fill="#3B414A" fill-rule="nonzero">
+                        <path d="M8.30174143,10.7660559 C6.89281374,10.0383999 4.5786645,10.5174643 3.16973682,10.3297522 C1.76080912,10.1420401 0.851239033,8.84110125 0.372174627,7.49885121 C-0.853389525,4.06640185 1.20057193,3.13508906 2.87113691,3.21046379 C4.54242664,3.2880128 3.84376087,1.57323763 6.18617562,0.292591945 C8.52859038,-0.988053752 9.16057852,2.30524224 8.90039074,3.05319151 C8.6394782,3.80114078 8.45973845,4.51575122 10.2274209,6.38997294 C11.9951033,8.26491939 9.71066911,11.4951615 8.30174143,10.7660559 Z M9.46352697,6.43853165 C7.91617068,4.87088217 7.89225369,4.20483046 8.15751477,3.5003666 C8.38581324,2.89012118 8.258256,0.14039296 6.25792656,1.20216203 C4.25759713,2.26465585 4.85914548,3.97870626 3.4415207,3.93522084 C2.02317118,3.8917354 0.0800975449,4.67447302 1.08533556,7.44521919 C1.47815388,8.5280062 2.39859532,9.39409087 3.59299493,9.5303452 C4.78739453,9.66732427 6.73336719,9.32958749 7.92196873,9.90431983 C9.11057029,10.4797769 10.9456551,7.94022824 9.46352697,6.43853165 Z M6.90151082,8.41421935 C6.16805669,8.13953643 6.00571112,7.21257217 6.22386299,6.44867825 C6.44273961,5.68333482 5.77451362,4.62663905 5.4643176,4.03306303 C5.15484634,3.43731274 5.87815388,2.09868649 6.64639634,1.89358025 C7.89370321,1.560192 7.26533886,3.52210931 7.31752136,4.83174529 C7.37115338,6.14138126 9.23957704,6.99442031 9.22000859,7.7960016 C9.20044016,8.59758288 7.63424018,8.68962703 6.90151082,8.41421935 Z M5.0106197,7.35824834 C4.36703544,7.94167776 3.54661047,8.24824998 2.71676366,7.96921853 C1.88836637,7.68946231 1.3361015,6.32909334 1.97968575,5.75436101 C3.291496,4.58170411 3.42919983,5.80944254 4.49894122,5.28834223 C5.56795787,4.76796667 5.65347919,6.77481892 5.0106197,7.35824834 Z" id="形状"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/heavy-car.svg b/src/assets/icons/svg/heavy-car.svg
new file mode 100644
index 0000000..feb835d
--- /dev/null
+++ b/src/assets/icons/svg/heavy-car.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/重载车辆</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/重载车辆" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <g id="icon/层级图标/背景" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)">
+                <circle id="椭圆形" cx="9" cy="9" r="9"></circle>
+            </g>
+            <path d="M7.3734792,12.4495161 C8.09877289,12.4495161 8.6867396,13.0477084 8.6867396,13.7856158 C8.6867396,14.5235233 8.09877289,15.1217156 7.3734792,15.1217156 C6.64818551,15.1217156 6.0602188,14.5235233 6.0602188,13.7856158 C6.0602188,13.0477084 6.64818551,12.4495161 7.3734792,12.4495161 Z M13.0642743,12.4495161 C13.789568,12.4495161 14.3775347,13.0477084 14.3775347,13.7856158 C14.3775347,14.5235233 13.789568,15.1217156 13.0642743,15.1217156 C12.3389806,15.1217156 11.7510139,14.5235233 11.7510139,13.7856158 C11.7510139,13.0477084 12.3389806,12.4495161 13.0642743,12.4495161 Z M8.6867396,4.87828445 C9.64979723,4.87828445 10.4377535,5.67994427 10.4377535,6.65975073 L10.4377535,13.7856158 L9.12449307,13.7856158 C9.12449307,12.8017454 8.34053133,12.0041496 7.3734792,12.0041496 C6.42500424,12.0041496 5.65276609,12.7714048 5.62342292,13.7291378 C4.86991241,13.5304208 4.30920494,12.8306664 4.30920494,12.0041496 L4.30920494,6.65975073 C4.30920494,5.67994427 5.09716118,4.87828445 6.0602188,4.87828445 L8.6867396,4.87828445 Z M13.5841065,6.65996819 C13.9945004,6.66323015 14.4048943,6.71542155 14.8152881,7.55048387 L15.6907951,9.77731672 L15.6907951,12.0041496 C15.6907951,12.6662009 15.3309891,13.2468336 14.800555,13.5538582 C14.6888868,12.6794923 13.9541313,12.0041496 13.0642743,12.0041496 C12.0972221,12.0041496 11.3132604,12.8017454 11.3132604,13.7856158 L10.8755069,13.7856158 L10.8755069,6.65975073 L13.5841065,6.65996819 Z M7.34314653,10 C7.0496786,10 6.81177584,10.2379028 6.81177584,10.5313707 C6.81177584,10.8248386 7.0496786,11.0627414 7.34314653,11.0627414 C7.63661446,11.0627414 7.87451723,10.8248386 7.87451723,10.5313707 C7.87451723,10.2379028 7.63661446,10 7.34314653,10 Z M7.34314653,5.74903446 C7.0496786,5.74903446 6.81177584,5.98693722 6.81177584,6.28040515 L6.81177584,8.40588792 C6.81177584,8.69935585 7.0496786,8.93725861 7.34314653,8.93725861 C7.63661446,8.93725861 7.87451723,8.69935585 7.87451723,8.40588792 L7.87451723,6.28040515 C7.87451723,5.98693722 7.63661446,5.74903446 7.34314653,5.74903446 Z" id="形状结合" fill="#3B414A"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/hidden-dangrous.svg b/src/assets/icons/svg/hidden-dangrous.svg
new file mode 100644
index 0000000..b7d6002
--- /dev/null
+++ b/src/assets/icons/svg/hidden-dangrous.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/ct_yinhuan</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/ct_yinhuan" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.001,1 C14.9715627,1 19.001,5.02943725 19.001,10 C18.9954889,14.9682782 14.9692782,18.9944889 10.001,19 C5.03043725,19 1.001,14.9705627 1.001,10 C1.001,5.02943725 5.03043725,1 10.001,1 Z M10.5144958,5.08615771 C10.0409155,4.80200955 9.42665523,4.95557461 9.14250707,5.42915488 L4.90869745,12.4855042 C4.81544821,12.6409196 4.76619038,12.8187561 4.76619038,13 C4.76619038,13.5522847 5.21390563,14 5.76619038,14 L14.2338096,14 C14.4150536,14 14.59289,13.9507422 14.7483054,13.8574929 C15.2218856,13.5733448 15.3754507,12.9590845 15.0913025,12.4855042 L10.8574929,5.42915488 C10.7730432,5.28840527 10.6552454,5.17060747 10.5144958,5.08615771 Z M10,11.5 C10.2761424,11.5 10.5,11.7238576 10.5,12 C10.5,12.2761424 10.2761424,12.5 10,12.5 C9.72385763,12.5 9.5,12.2761424 9.5,12 C9.5,11.7238576 9.72385763,11.5 10,11.5 Z M10,7.5 C10.2761424,7.5 10.5,7.72385763 10.5,8 L10.5,10 C10.5,10.2761424 10.2761424,10.5 10,10.5 C9.72385763,10.5 9.5,10.2761424 9.5,10 L9.5,8 C9.5,7.72385763 9.72385763,7.5 10,7.5 Z" id="形状结合" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/hide.svg b/src/assets/icons/svg/hide.svg
new file mode 100644
index 0000000..e088914
--- /dev/null
+++ b/src/assets/icons/svg/hide.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><defs><style>.a{fill:currentColor;}.b{fill:none;}</style></defs><g transform="translate(0 2)"><rect class="a" width="30" height="3" rx="1.5"/><rect class="a" width="30" height="3" rx="1.5" transform="translate(0 22)"/><rect class="a" width="15" height="3" rx="1.5" transform="translate(0 15)"/><rect class="a" width="15" height="3" rx="1.5" transform="translate(0 7)"/><path class="a" d="M7.738.9A1,1,0,0,1,9.262.9L15.6,8.352A1,1,0,0,1,14.838,10H2.162A1,1,0,0,1,1.4,8.352Z" transform="translate(30 4) rotate(90)"/></g><rect class="b" width="30" height="30"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/high-sky.svg b/src/assets/icons/svg/high-sky.svg
new file mode 100644
index 0000000..0825f9e
--- /dev/null
+++ b/src/assets/icons/svg/high-sky.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/gaokong</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/gaokong" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="减去-68" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)" fill-rule="nonzero">
+            <path d="M9,18 C4.03194995,17.993939 0.0060609562,13.9680501 0,9 C0.00551112896,4.03172183 4.03172183,0.00551112896 9,0 C13.9682782,0.00551112896 17.9944889,4.03172183 18,9 C17.9944889,13.9682782 13.9682782,17.9944889 9,18 L9,18 Z M9,11.861 L9,11.861 L11.83,14.449 C11.919086,14.5347709 12.0320308,14.5915919 12.154,14.612 C12.1856627,14.6252796 12.2196653,14.6320007 12.254,14.6320007 C12.3388649,14.6304939 12.4194271,14.5943674 12.477,14.532 C12.5331482,14.4642094 12.5620263,14.3779317 12.558,14.29 L12.558,14.127 L11.748,9.759 L14.741,9.759 C15.014,9.759 15.146,9.653 15.146,9.435 L15.146,9.274 C15.121956,9.0736202 14.9417705,8.92947179 14.741,8.95 L11.667,8.95 L11.267,7.009 L13.128,7.009 C13.2355107,7.013888 13.3401171,6.97331719 13.4162171,6.89721713 C13.4923172,6.82111707 13.532888,6.71651068 13.528,6.609 L13.528,6.527 C13.5332016,6.41940296 13.4927318,6.31461106 13.4165604,6.23843961 C13.3403889,6.16226816 13.235597,6.1217984 13.128,6.127 L11.105,6.127 L10.62,3.7 C10.607247,3.58881994 10.5422428,3.49038493 10.445,3.435 L10.431,3.424 C10.411,3.407 10.393,3.392 10.377,3.377 L7.869,3.377 L7.789,3.458 L7.708,3.538 L7.708,3.62 L7.223,6.047 L5.123,6.047 C5.014663,6.04231387 4.90939501,6.08365176 4.83319529,6.16080399 C4.75699556,6.23795621 4.71696848,6.34372957 4.723,6.452 L4.723,6.532 C4.71696848,6.64027043 4.75699556,6.74604379 4.83319529,6.82319601 C4.90939501,6.90034824 5.014663,6.94168613 5.123,6.937 L6.983,6.937 L6.583,8.878 L3.266,8.878 C3.15848932,8.873112 3.05388293,8.91368281 2.97778287,8.98978287 C2.90168281,9.06588293 2.861112,9.17048932 2.866,9.278 L2.866,9.36 C2.861112,9.46751068 2.90168281,9.57211707 2.97778287,9.64821713 C3.05388293,9.72431719 3.15848932,9.764888 3.266,9.76 L6.421,9.76 L5.451,14.128 L5.451,14.291 C5.451,14.45 5.451,14.615 5.693,14.615 L5.854,14.615 C5.97960724,14.6126148 6.09748075,14.5538617 6.175,14.455 L9.009,11.864 L9,11.861 Z M11.507,12.993 L11.507,12.993 L9.73,11.378 L10.944,10.246 L11.51,12.993 L11.507,12.993 Z M6.573,12.993 L6.573,12.993 L7.139,10.246 L8.353,11.378 L6.576,12.993 L6.573,12.993 Z M9.08,10.728 L9.08,10.728 L8.191,9.92 L9.971,9.92 L9.082,10.728 L9.08,10.728 Z M10.699,8.948 L7.463,8.948 L7.863,7.007 L10.29,7.007 L10.69,8.947 L10.699,8.948 Z M10.213,6.036 L8.03,6.036 L8.43,4.175 L9.805,4.175 L10.205,6.035 L10.213,6.036 Z" id="减去_68"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/hoisting.svg b/src/assets/icons/svg/hoisting.svg
new file mode 100644
index 0000000..85fff5f
--- /dev/null
+++ b/src/assets/icons/svg/hoisting.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/diaozhuang</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/diaozhuang" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="减去-65" transform="translate(2.000000, 1.000000)" fill="url(#linearGradient-1)" fill-rule="nonzero">
+            <path d="M9,18 C4.03172183,17.9944889 0.00551112896,13.9682782 0,9 C0.00551112896,4.03172183 4.03172183,0.00551112896 9,0 C13.9682782,0.00551112896 17.9944889,4.03172183 18,9 C17.9944889,13.9682782 13.9682782,17.9944889 9,18 L9,18 Z M7.969,12.616 L10.369,12.616 C10.5366635,13.0468584 10.9477574,13.3339528 11.41,13.343 C11.8752107,13.3424873 12.2909335,13.0524388 12.452,12.616 L14.102,12.616 C14.3188198,12.6154504 14.4944504,12.4398198 14.495,12.223 L14.495,8.883 C14.492818,8.75998307 14.4351043,8.64455576 14.338,8.569 L11.823,6.643 C11.7568518,6.58840897 11.6726518,6.56058017 11.587,6.565 L9.642,6.565 C9.42534202,6.5649993 9.24955129,6.74034272 9.249,6.957 L9.249,9.61 L7.422,9.61 L8.64,5.896 L10.04,4.403 L10.04,4.603 C10.0426898,4.80407356 10.1942405,4.97189246 10.394,4.995 L10.414,4.995 C10.4929913,5.00507986 10.5521365,5.07236831 10.552,5.152 C10.552,5.24 10.526,5.292 10.474,5.309 C10.4527752,5.32125087 10.4284796,5.32715122 10.404,5.326 C10.2967298,5.31462688 10.1965473,5.26700495 10.12,5.191 L9.629,5.799 C9.84389813,5.99225434 10.1210513,6.10190906 10.41,6.108 C10.5692021,6.10861629 10.7261235,6.07015854 10.867,5.996 C11.1994942,5.81319322 11.3922265,5.45088786 11.358,5.073 C11.3312079,4.74636236 11.1381165,4.4565363 10.847,4.306 L10.847,3.406 C10.8461037,3.24103373 10.7452378,3.09309709 10.592,3.032 C10.5456607,3.01443518 10.4965557,3.00529149 10.447,3.005 C10.3379765,3.00567624 10.233953,3.05082531 10.159,3.13 L3.99,9.73 C3.92568793,9.8068506 3.89030844,9.90379041 3.89,10.004 L3.89,12.224 C3.89054961,12.4408198 4.06618016,12.6164504 4.283,12.617 L5.894,12.617 C6.0612164,13.0482096 6.47258167,13.3354935 6.935,13.344 C7.39993612,13.3433603 7.81530229,13.0532823 7.976,12.617 L7.969,12.616 Z M11.407,12.538 C11.323301,12.5388144 11.2428073,12.505856 11.1837145,12.446575 C11.1246218,12.3872941 11.0919195,12.3066959 11.093,12.223 C11.0921903,12.1394764 11.1250123,12.059138 11.1840752,12.0000752 C11.243138,11.9410123 11.3234764,11.9081903 11.407,11.909 C11.4906959,11.9079195 11.5712941,11.9406218 11.630575,11.9997145 C11.689856,12.0588073 11.7228144,12.139301 11.722,12.223 C11.7228143,12.3069642 11.6897505,12.3877123 11.6302821,12.4469925 C11.5708136,12.5062727 11.4899612,12.5390805 11.406,12.538 L11.407,12.538 Z M6.92800007,12.538 C6.84430105,12.5388144 6.76380726,12.505856 6.70471454,12.446575 C6.64562181,12.3872941 6.61291947,12.3066959 6.614,12.223 C6.61319034,12.1394764 6.64601233,12.059138 6.70507518,12.0000752 C6.76413803,11.9410123 6.84447644,11.9081903 6.92800007,11.909 C7.01152356,11.9081903 7.09186197,11.9410123 7.15092482,12.0000752 C7.20998767,12.059138 7.24280966,12.1394764 7.242,12.223 C7.24308585,12.3068714 7.21024725,12.3876253 7.15093627,12.4469363 C7.09162529,12.5062472 7.01087136,12.5390859 6.927,12.538 L6.92800007,12.538 Z M10.386,11.811 L7.97,11.811 C7.80455442,11.3900711 7.40122494,11.1107822 6.949,11.104 C6.49649526,11.1106502 6.09280635,11.3899145 5.927,11.811 L4.67,11.811 L4.67,10.376 L9.642,10.376 C9.85865728,10.3754487 10.0340007,10.199658 10.034,9.983 L10.034,7.351 L11.469,7.351 L13.709,9.08 L13.709,11.81 L12.432,11.81 C12.2661936,11.3889145 11.8625047,11.1096502 11.41,11.103 C10.9552912,11.1019191 10.547959,11.3839797 10.389,11.81 L10.386,11.811 Z M11.231,8.004 L11.231,8.004 L10.753,8.629 L12.641,10.074 L13.119,9.45 L11.23,8 L11.231,8.004 Z M6.594,9.61 L5.179,9.61 L7.36,7.252 L6.594,9.609 L6.594,9.61 Z" id="减去_65"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/icon_car_0.svg b/src/assets/icons/svg/icon_car_0.svg
new file mode 100644
index 0000000..7dcc578
--- /dev/null
+++ b/src/assets/icons/svg/icon_car_0.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/32/访客车辆</title>
+    <defs>
+        <linearGradient x1="50%" y1="0.751031195%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#C4EEFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0.751031195%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#C4EEFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0.751031195%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#C4EEFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0.751031195%" x2="50%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#C4EEFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="智慧化工园区/封闭园区-首页" transform="translate(-165.000000, -334.000000)" fill-rule="nonzero">
+            <g id="组件/指标/图标+指标+提示文字" transform="translate(165.000000, 333.000000)">
+                <g id="编组" transform="translate(0.000000, 1.000000)">
+                    <path d="M26.7846097,13.1547005 L26.7846097,20.8452995 C26.7846097,21.5598306 26.4034118,22.2200847 25.7846097,22.5773503 L17.3923048,27.4226497 C16.7735027,27.7799153 16.011107,27.7799153 15.3923048,27.4226497 L7,22.5773503 C6.38119785,22.2200847 6,21.5598306 6,20.8452995 L6,13.1547005" id="路径" stroke="url(#linearGradient-1)"></path>
+                    <polyline id="路径-2" stroke="url(#linearGradient-2)" points="14.2452902 19.1728187 16.3923048 23.1728187 18.5393195 19.1728187"></polyline>
+                    <circle id="椭圆形" stroke="url(#linearGradient-3)" cx="16.1004998" cy="9.79680461" r="4.79680461"></circle>
+                    <path d="M9.21189899,20 C10.6064298,16.3957395 12.90263,14.5936092 16.1004998,14.5936092 C19.2983695,14.5936092 21.6691371,16.3957395 23.2128024,20" id="路径-7" stroke="url(#linearGradient-4)"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/icon_car_1.svg b/src/assets/icons/svg/icon_car_1.svg
new file mode 100644
index 0000000..86fe81d
--- /dev/null
+++ b/src/assets/icons/svg/icon_car_1.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/32/普通车辆</title>
+    <defs>
+        <linearGradient x1="50%" y1="0.751031195%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#C4EEFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0.751031195%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#C4EEFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0.751031195%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#C4EEFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="智慧化工园区/封闭园区-首页" transform="translate(-50.000000, -334.000000)">
+            <g id="组件/指标/图标+指标+提示文字" transform="translate(50.000000, 333.000000)">
+                <g id="编组" transform="translate(0.000000, 1.000000)">
+                    <path d="M26.7846097,13.1547005 L26.7846097,20.8452995 C26.7846097,21.5598306 26.4034118,22.2200847 25.7846097,22.5773503 L17.3923048,27.4226497 C16.7735027,27.7799153 16.011107,27.7799153 15.3923048,27.4226497 L7,22.5773503 C6.38119785,22.2200847 6,21.5598306 6,20.8452995 L6,13.1547005" id="路径" stroke="url(#linearGradient-1)" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero"></path>
+                    <path d="M9.90034217,19.0136184 L8.56990481,13.8141154 C8.53940457,13.694917 8.55392553,13.5686576 8.6106893,13.4594954 L10.2163868,10.3715819 L10.2163868,10.3715819 L11.2463406,6.70753811 C11.488842,5.84484317 12.2755886,5.24875728 13.1717189,5.24875728 L20.0147356,5.24875728 C20.9482197,5.24875728 21.7575543,5.89451367 21.9648154,6.80469787 L22.7770429,10.3715819 L22.7770429,10.3715819 L24.4324946,13.4609689 C24.4904892,13.5691978 24.5066315,13.6949829 24.4778445,13.8143486 L23.2345161,18.9698438 C23.0535808,19.7200972 22.3822697,20.2487573 21.6105068,20.2487573 C20.8839325,20.2487573 20.2949276,19.6597524 20.2949276,18.933178 L20.2949276,18.8762963 C20.2949276,18.118307 19.6804558,17.5038352 18.9224665,17.5038352 L14.1387124,17.5038352 C13.3807231,17.5038352 12.7662514,18.118307 12.7662514,18.8762963 L12.7662514,18.973825 C12.7662514,19.6779506 12.1954448,20.2487573 11.4913191,20.2487573 C10.7411314,20.2487573 10.0863072,19.740391 9.90034217,19.0136184 Z" id="路径-3" stroke="url(#linearGradient-2)" fill-rule="nonzero"></path>
+                    <line x1="10.2641418" y1="10.3923245" x2="22.8923048" y2="10.5" id="路径-4" stroke="url(#linearGradient-3)" fill-rule="nonzero"></line>
+                    <rect id="矩形" fill="#DBF5FF" x="11.5344815" y="12.6780388" width="2.85714286" height="1.14285714" rx="0.571428571"></rect>
+                    <rect id="矩形" fill="#DBF5FF" x="18.5344815" y="12.6780388" width="2.85714286" height="1.14285714" rx="0.571428571"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/icon_car_2.svg b/src/assets/icons/svg/icon_car_2.svg
new file mode 100644
index 0000000..81d7e17
--- /dev/null
+++ b/src/assets/icons/svg/icon_car_2.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/32/危化品车辆</title>
+    <defs>
+        <linearGradient x1="50%" y1="0.751031195%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#C4EEFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0.751031195%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#C4EEFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0.751031195%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#C4EEFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="智慧化工园区/封闭园区-首页" transform="translate(-280.000000, -334.000000)" fill-rule="nonzero">
+            <g id="组件/指标/图标+指标+提示文字" transform="translate(280.000000, 333.000000)">
+                <g id="编组" transform="translate(0.000000, 1.000000)">
+                    <path d="M18.6886842,21.5 C18.1581579,21.5 17.6828947,21.2589041 17.3623684,20.8863014 C17.0418421,21.2589041 16.5665789,21.5 16.0360526,21.5 C15.5055263,21.5 15.0302632,21.2589041 14.7097368,20.8863014 C14.3892105,21.2589041 13.9139473,21.5 13.3834211,21.5 C12.4218421,21.5 11.6371053,20.7219178 11.6371053,19.7684931 L11.6371053,19.0452055 C8.92921052,18.2780822 7.625,16.5684931 7.625,13.8287671 C7.625,9.2369863 11.3939474,5.5 16.025,5.5 C20.6560526,5.5 24.425,9.2369863 24.425,13.8287671 C24.425,16.5684931 23.1207895,18.2780822 20.435,19.0342466 L20.435,19.7575342 C20.435,20.7219178 19.6502632,21.5 18.6886842,21.5 Z" id="路径" stroke="url(#linearGradient-1)"></path>
+                    <path d="M12.1681419,11.1818182 C10.6769139,11.1818182 9.45681818,12.3883573 9.45681818,13.8931419 C9.45681818,15.3979266 10.6633573,16.5909091 12.1681419,16.5909091 C13.6729266,16.5909091 14.8659091,15.38437 14.8659091,13.8931419 C14.8659091,12.4019139 13.65937,11.1818182 12.1681419,11.1818182 Z" id="路径" stroke="url(#linearGradient-2)"></path>
+                    <path d="M19.8886364,11.1818182 C18.3936615,11.1818182 17.1840909,12.3883573 17.1840909,13.8931419 C17.1840909,15.3979266 18.3936615,16.5909091 19.8886364,16.5909091 C21.3836112,16.5909091 22.5931818,15.38437 22.5931818,13.8931419 C22.5931818,12.4019139 21.3836112,11.1818182 19.8886364,11.1818182 Z" id="路径" stroke="url(#linearGradient-2)"></path>
+                    <path d="M26.3923048,13.1547005 L26.3923048,20.8452995 C26.3923048,21.5598306 26.011107,22.2200847 25.3923048,22.5773503 L17,27.4226497 C16.3811978,27.7799153 15.6188022,27.7799153 15,27.4226497 L6.60769515,22.5773503 C5.988893,22.2200847 5.60769515,21.5598306 5.60769515,20.8452995 L5.60769515,13.1547005" id="路径" stroke="url(#linearGradient-3)" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/infoFile.svg b/src/assets/icons/svg/infoFile.svg
new file mode 100644
index 0000000..9190e40
--- /dev/null
+++ b/src/assets/icons/svg/infoFile.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/32/企业基本信息</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/32/企业基本信息" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M15.701,6.001 C15.2413609,5.99172687 14.785498,6.08570161 14.367,6.276 L6.592,10.164 C5.858,10.532 5.858,11.13 6.592,11.498 L14.367,15.386 C15.2192369,15.7526559 16.1847631,15.7526559 17.037,15.386 L24.814,11.501 C25.548,11.133 25.548,10.535 24.814,10.167 L17.034,6.279 C16.6160466,6.08781613 16.1605317,5.99281751 15.701,6.001 L15.701,6.001 Z" id="路径_1259-path" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
+        <path d="M15.701,20.412 C15.1251303,20.4209411 14.5547617,20.2988658 14.033,20.055 L6.414,16.247 C6.04507379,16.0622608 5.89576075,15.6134262 6.0805,15.2445 C6.26523925,14.8755738 6.71407379,14.7262608 7.083,14.911 L14.7,18.721 C15.3410973,18.9821226 16.0589027,18.9821226 16.7,18.721 L24.317,14.913 C24.5563139,14.7851624 24.8461661,14.7973347 25.0739193,14.9447866 C25.3016725,15.0922386 25.4314126,15.3517188 25.4127223,15.6223926 C25.394032,15.8930663 25.2298584,16.1322514 24.984,16.247 L17.365,20.055 C16.8445688,20.2986056 16.275558,20.420683 15.701,20.412 Z" id="路径_1259-path" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
+        <path d="M15.701,25.038 C15.1251303,25.0469411 14.5547617,24.9248658 14.033,24.681 L6.416,20.871 C6.0595067,20.680567 5.9195021,20.2408752 6.10025176,19.8793759 C6.28100141,19.5178766 6.71675765,19.3660651 7.083,19.537 L14.7,23.347 C15.3410973,23.6081226 16.0589027,23.6081226 16.7,23.347 L24.317,19.537 C24.6832423,19.3660651 25.1189986,19.5178766 25.2997482,19.8793759 C25.4804979,20.2408752 25.3404933,20.680567 24.984,20.871 L17.365,24.681 C16.8446274,24.9248836 16.2756285,25.0473004 15.701,25.039 L15.701,25.038 Z" id="路径_1259-path" fill="url(#linearGradient-3)" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/layer.svg b/src/assets/icons/svg/layer.svg
new file mode 100644
index 0000000..c0b2dda
--- /dev/null
+++ b/src/assets/icons/svg/layer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M69.143,64H66.286A2.286,2.286,0,0,0,64,66.286v2.857a2.286,2.286,0,0,0,2.286,2.286h4.571a.571.571,0,0,0,.571-.571V66.286A2.286,2.286,0,0,0,69.143,64Zm-2.857,8.571A2.286,2.286,0,0,0,64,74.857v2.857A2.286,2.286,0,0,0,66.286,80h2.857a2.286,2.286,0,0,0,2.286-2.286V73.143a.571.571,0,0,0-.571-.571ZM77.714,64H74.857a2.286,2.286,0,0,0-2.286,2.286v4.571a.571.571,0,0,0,.571.571h4.571A2.286,2.286,0,0,0,80,69.143V66.286A2.286,2.286,0,0,0,77.714,64Zm0,8.571H73.143a.571.571,0,0,0-.571.571v4.571A2.286,2.286,0,0,0,74.857,80h2.857A2.286,2.286,0,0,0,80,77.714V74.857A2.286,2.286,0,0,0,77.714,72.571Z" transform="translate(-64 -64)"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/make-ground.svg b/src/assets/icons/svg/make-ground.svg
new file mode 100644
index 0000000..89d4944
--- /dev/null
+++ b/src/assets/icons/svg/make-ground.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/dongtu</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/dongtu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="dongtu" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)" fill-rule="nonzero">
+            <path d="M9,18 C4.02943725,18 0,13.9705627 0,9 C0,4.02943725 4.02943725,0 9,0 C13.9705627,0 18,4.02943725 18,9 C17.9944889,13.9682782 13.9682782,17.9944889 9,18 L9,18 Z M7.577,11.648 L7.577,11.648 L9.777,13.763 C9.79323003,13.7758828 9.81104122,13.7866367 9.83,13.795 C9.91909039,13.8442324 10.0183204,13.8722905 10.12,13.877 C10.1741388,13.8767485 10.2279825,13.8690084 10.28,13.854 C10.4225444,13.7962209 10.5401184,13.6899793 10.612,13.554 C10.6126803,13.5479506 10.6147325,13.5421363 10.618,13.537 C10.6213002,13.5318797 10.6233551,13.5260575 10.624,13.52 L11.619,10.147 L13.483,9.447 C13.5345675,9.55425462 13.6420201,9.62344175 13.761,9.626 C13.7951561,9.62619423 13.8290555,9.62009233 13.861,9.608 L15.52,9.036 C15.6807461,8.98187075 15.7674756,8.80796475 15.714,8.647 L15.565,8.213 C15.5201474,8.086491 15.3991919,8.00303174 15.265,8.006 C15.2342068,8.00604023 15.2035727,8.01041653 15.174,8.019 L13.516,8.59 C13.3589695,8.64833013 13.2741154,8.81847575 13.322,8.979 L8.771,10.717 L6.885,11.426 C6.56936413,10.6116028 5.68459366,10.1724882 4.84510776,10.4135946 C4.00562186,10.6547009 3.48870727,11.4963896 3.65332968,12.3541589 C3.81795209,13.2119283 4.60973582,13.8024526 5.47883532,13.7156487 C6.34793482,13.6288447 7.00728181,12.8933844 6.999,12.02 C7.00079235,11.9703673 6.99676491,11.9206956 6.987,11.872 L7.581,11.644 L7.577,11.648 Z M4.226,7.314 C4.126,7.361 4.063,7.422 4.05099466,7.495 C4.05047274,7.58703696 4.088994,7.67498174 4.157,7.737 C4.257,7.845 6.479,10.337 6.822,10.664 C6.91667596,10.7934545 7.06231254,10.8761032 7.222,10.891 C7.28657829,10.8899064 7.35062606,10.8791194 7.412,10.859 L11.643,9.235 C11.6831394,9.21985644 11.7131241,9.18574887 11.723,9.144 L12.272,7.691 C12.2931692,7.60107178 12.2737929,7.50638387 12.219,7.432 C12.1581785,7.37227266 12.0751371,7.34072417 11.99,7.345 C11.9740186,7.34390782 11.9579814,7.34390782 11.942,7.345 L4.222,7.311 L4.226,7.314 Z M6.026,5.714 C5.93148858,5.71269608 5.84025575,5.74861451 5.772,5.814 L5.097,6.489 C5.02482128,6.54500953 4.99764064,6.64156168 5.03,6.727 C5.08430182,6.84615503 5.20627913,6.91965927 5.337,6.912 L10.951,6.946 C11.0659448,6.95359136 11.1759138,6.8980321 11.238,6.801 C11.2795042,6.72407194 11.2748816,6.63046456 11.226,6.558 L9.557,4.042 C9.49096942,3.95199106 9.3845471,3.90065353 9.273,3.905 C9.17497251,3.9023021 9.07980701,3.93821361 9.008,4.005 L7.156,6.098 C7.08927686,6.17189231 6.99351914,6.2128269 6.894,6.21 C6.81057369,6.21167845 6.72919503,6.18408047 6.664,6.132 L6.252,5.789 C6.18717452,5.73798446 6.10645198,5.711431 6.024,5.714 L6.026,5.714 Z M10.108,13.4360086 C10.090989,13.4343978 10.0745701,13.4289249 10.06,13.42 L8.081,11.499 L10.871,10.424 L11.077,10.344 L10.185,13.374 L10.173,13.387 C10.1605027,13.4043705 10.1449085,13.4192867 10.127,13.431 C10.120539,13.4344252 10.1133113,13.4361461 10.106,13.4360086 L10.108,13.4360086 Z M5.279,13.1230005 C4.67148678,13.1230005 4.179,12.6305132 4.179,12.023 C4.179,11.4154868 4.67148678,10.923 5.279,10.923 C5.88651322,10.923 6.379,11.4154868 6.379,12.023 C6.379,12.3149115 6.26297034,12.5948524 6.05646399,12.8011712 C5.84995764,13.00749 5.56991136,13.1232654 5.278,13.1230005 L5.279,13.1230005 Z M5.279,11.499 C4.98862904,11.499552 4.75363257,11.7352941 4.75399999,12.0256654 C4.75436827,12.3160367 4.98996127,12.5511826 5.2803327,12.5509991 C5.57070413,12.5508153 5.806,12.3153715 5.806,12.025 C5.80573546,11.8853223 5.74992618,11.7514853 5.65087795,11.6529999 C5.55182973,11.5545144 5.41767696,11.4994687 5.278,11.5 L5.279,11.499 Z" id="减去_51"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/normal.svg b/src/assets/icons/svg/normal.svg
new file mode 100644
index 0000000..28f1a38
--- /dev/null
+++ b/src/assets/icons/svg/normal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0 0 26 26"><defs><style>.a{fill:none;}.b{fill:url(#a);}</style><linearGradient id="a" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#f0f7fc"/><stop offset="1" stop-color="#c2edff"/></linearGradient></defs><g transform="translate(-1775.4 -389.4)"><rect class="a" width="26" height="26" transform="translate(1775.4 389.4)"/><g transform="translate(1777.199 389.837)"><g transform="translate(0)"><path class="b" d="M139.274,73.783a.674.674,0,0,0-.674.674v6.361a2.982,2.982,0,0,1-1.5,2.583l-6.746,3.856a2.987,2.987,0,0,1-2.953,0L120.656,83.4a2.982,2.982,0,0,1-1.5-2.583V74.595a.674.674,0,0,0-1.348,0v6.223a4.332,4.332,0,0,0,2.178,3.753l6.746,3.856a4.341,4.341,0,0,0,4.291,0l6.746-3.856a4.332,4.332,0,0,0,2.178-3.753V74.457A.674.674,0,0,0,139.274,73.783Zm-19.049-2.3,2.23.4a.762.762,0,0,0,.907-.542.7.7,0,0,0-.6-.816l-2.23-.4a.777.777,0,0,0-.907.542.68.68,0,0,0-.006.24A.736.736,0,0,0,120.225,71.482Zm2.629-4.785,1.42,1.6a.833.833,0,0,0,1.084.108.647.647,0,0,0,.12-.975l-1.42-1.6a.832.832,0,0,0-1.084-.108.66.66,0,0,0-.279.646A.621.621,0,0,0,122.854,66.7Zm5.383.017a.779.779,0,0,0,1.528-.091l-.006-2.047a.725.725,0,0,0-.753-.707.737.737,0,0,0-.786.679l.006,2.047A.423.423,0,0,0,128.237,66.715Zm4.306,1.842a.831.831,0,0,0,1.084-.063l1.5-1.533a.65.65,0,0,0-.069-.981.831.831,0,0,0-1.083.063l-1.5,1.533a.648.648,0,0,0-.182.564A.662.662,0,0,0,132.542,68.557Zm1.831,3.017a.765.765,0,0,0,.878.582l2.246-.309a.7.7,0,0,0,.644-.786.765.765,0,0,0-.878-.582l-2.246.309A.7.7,0,0,0,134.373,71.573Z" transform="translate(-117.81 -63.869)"/><path class="b" d="M274.346,244.79h-.06a4.585,4.585,0,0,0-3.157,1.234,4.175,4.175,0,0,0-1.341,3.063v3.448h9.058v-3.448A4.406,4.406,0,0,0,274.346,244.79Zm3.173,6.361h-6.405v-2.064a3.055,3.055,0,0,1,3.173-2.913h.06a3.055,3.055,0,0,1,3.173,2.913Z" transform="translate(-263.242 -239.839)"/></g><path class="b" d="M-1658.974-1460.531a.492.492,0,0,1-.21-.678.528.528,0,0,1,.7-.2l.02.011a4.679,4.679,0,0,0,2.53.651,3.876,3.876,0,0,0,1.281-.322,4.712,4.712,0,0,1,1.839-.4,3.152,3.152,0,0,1,1.44.286,3.432,3.432,0,0,0,1.091.274,3.732,3.732,0,0,0,1.813-.257,5.484,5.484,0,0,1,2.082-.372,4.327,4.327,0,0,1,2.037.483,2.872,2.872,0,0,0,.732.265.581.581,0,0,1,.449.568.43.43,0,0,1-.449.449,3.617,3.617,0,0,1-1.188-.383,3.294,3.294,0,0,0-1.595-.381,4.663,4.663,0,0,0-1.721.316,4.751,4.751,0,0,1-2.264.311,4.473,4.473,0,0,1-1.386-.347,2.069,2.069,0,0,0-1.035-.209,3.656,3.656,0,0,0-1.459.32,4.9,4.9,0,0,1-1.6.391c-.1.008-.193.011-.289.011A5.862,5.862,0,0,1-1658.974-1460.531Zm2.847-1.779a6.013,6.013,0,0,1-3.02-.893.49.49,0,0,1-.177-.686.528.528,0,0,1,.711-.171,4.694,4.694,0,0,0,2.971.718,3,3,0,0,0,.931-.283,4,4,0,0,1,1.3-.379,4.073,4.073,0,0,1,2.162.324,4.314,4.314,0,0,0,1.665.352,2.912,2.912,0,0,0,1.343-.283,4.434,4.434,0,0,1,1.835-.413,4.856,4.856,0,0,1,2,.339,4.656,4.656,0,0,0,.788.232.611.611,0,0,1,.449.586.394.394,0,0,1-.449.422,5.321,5.321,0,0,1-1.15-.3,3.774,3.774,0,0,0-1.612-.277,3.407,3.407,0,0,0-1.448.328,4.244,4.244,0,0,1-1.771.369,5.326,5.326,0,0,1-2.033-.421,3.08,3.08,0,0,0-1.659-.263,2.969,2.969,0,0,0-.987.293,3.966,3.966,0,0,1-1.229.369,4.9,4.9,0,0,1-.6.038Z" transform="translate(1662.352 1478.369)"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/peo.svg b/src/assets/icons/svg/peo.svg
new file mode 100644
index 0000000..65f4827
--- /dev/null
+++ b/src/assets/icons/svg/peo.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="封闭园区" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标切图" transform="translate(-93.000000, -113.000000)">
+            <g id="icon/20px/层级图标/视频监控" transform="translate(93.000000, 113.000000)">
+                <g id="icon/层级图标/背景" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)">
+                    <circle id="椭圆形" cx="9" cy="9" r="9"></circle>
+                </g>
+                <path d="M12.6268996,8.67787638 C13.9682164,8.67787638 15.0537507,9.7426092 15.0537507,11.0561906 C15.0537507,11.9319115 14.2448004,13.1245937 12.6268996,14.6342373 C11.0089988,13.1245937 10.2000484,11.9319115 10.2000484,11.0561906 C10.2000484,9.74260918 11.2871236,8.67787638 12.6268996,8.67787638 Z M9.06765185,10.056344 C9.30505432,10.056344 9.53776861,10.0764165 9.76419016,10.1149569 C9.68867773,10.3710835 9.64871908,10.640925 9.64871908,10.9199136 C9.64871908,11.7650806 10.262718,12.8508234 11.4907158,14.177142 L4.94624925,14.1777466 C4.94624925,11.9015588 6.79146405,10.056344 9.06765185,10.056344 Z M12.6194876,9.85950161 C11.9960842,9.85950161 11.4907158,10.36487 11.4907158,10.9882734 C11.4907158,11.6116769 11.9960842,12.1170453 12.6194876,12.1170453 C13.2428911,12.1170453 13.7482595,11.6116769 13.7482595,10.9882734 C13.7482595,10.36487 13.2428911,9.85950161 12.6194876,9.85950161 Z M8.99256201,5.36576265 C10.2594846,5.36576265 11.2859518,6.37168836 11.2859518,7.61263213 C11.2859518,7.88513567 11.2364249,8.1463063 11.1457136,8.38798079 C10.6241259,8.68127688 10.2022352,9.12468988 9.94083167,9.65795549 C9.65283161,9.78754174 9.3312542,9.85950161 8.99256201,9.85950161 C7.72624354,9.85950161 6.6997764,8.85357591 6.6997764,7.61263213 C6.6997764,6.37168834 7.72624352,5.36576265 8.99256201,5.36576265 Z" id="形状" fill="#3B414A"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/plan-line.svg b/src/assets/icons/svg/plan-line.svg
new file mode 100644
index 0000000..b75764b
--- /dev/null
+++ b/src/assets/icons/svg/plan-line.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/规划线</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/规划线" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon/层级图标/背景" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)">
+            <circle id="椭圆形" cx="9" cy="9" r="9"></circle>
+        </g>
+        <g id="guihua" transform="translate(5.121814, 5.127224)" fill="#3B414A" fill-rule="nonzero">
+            <path d="M9.64020481,7.30979538 L7.73023009,5.39982066 C7.61309775,5.2833832 7.42392464,5.2833832 7.3067923,5.39982066 L5.39681758,7.30979538 C5.28038011,7.42692772 5.28038011,7.61610084 5.39681758,7.73323317 L7.3067923,9.65822342 C7.42392464,9.77466089 7.61309775,9.77466089 7.73023009,9.65822342 L9.64020481,7.7482487 C9.70085261,7.69146848 9.73526896,7.61210122 9.73526896,7.52902204 C9.73526896,7.44594286 9.70085261,7.36657561 9.64020481,7.30979538 Z M6.66713095,7.30979538 L6.4539105,7.52301584 C6.33677816,7.6394533 6.14760505,7.6394533 6.03047271,7.52301584 C5.91403524,7.4058835 5.91403524,7.21671038 6.03047271,7.09957804 L6.24369316,6.88635759 C6.3608255,6.76992013 6.54999861,6.76992013 6.66713095,6.88635759 C6.78440326,7.0026624 6.78574493,7.19183892 6.67013405,7.30979538 L6.66713095,7.30979538 Z M7.94044743,7.73323317 L7.30378918,8.36989142 C7.18665684,8.48632888 6.99748373,8.48632888 6.88035139,8.36989142 C6.76391393,8.25275908 6.76391393,8.06358597 6.88035139,7.94645363 L7.51700964,7.30979538 C7.59040249,7.22409396 7.70564017,7.18676365 7.81534375,7.21315248 C7.92504733,7.23954131 8.0107015,7.32519548 8.03709033,7.43489906 C8.06347916,7.54460264 8.02614885,7.65984032 7.94044743,7.73323317 Z M2.42074061,4.33672153 L4.33071533,2.42674681 C4.44715279,2.30961447 4.44715279,2.12044136 4.33071533,2.00330902 L2.42074061,0.0873280991 C2.30360827,-0.0291093664 2.11443516,-0.0291093664 1.99730282,0.0873280991 L0.0873280991,2.00030592 C-0.0291093664,2.11743826 -0.0291093664,2.30661137 0.0873280991,2.42374371 L1.99730282,4.33371843 C2.11360763,4.45099074 2.30278415,4.45233241 2.42074061,4.33672153 Z M2.63396106,3.7000633 C2.51480979,3.80210187 2.33719596,3.79524144 2.22627055,3.68431602 C2.11534513,3.57339061 2.1084847,3.39577678 2.21052327,3.27662551 C2.32765561,3.16018804 2.51682872,3.16018804 2.63396106,3.27662551 C2.75039853,3.39375784 2.75039853,3.58293096 2.63396106,3.7000633 L2.63396106,3.7000633 Z M1.36064459,2.8501846 C1.24420712,2.73305226 1.24420712,2.54387915 1.36064459,2.42674681 L1.99730282,1.79008858 C2.11443516,1.67365111 2.30360827,1.67365111 2.42074061,1.79008858 C2.53717807,1.90722092 2.53717807,2.09639403 2.42074061,2.21352637 L1.78408238,2.8501846 C1.66695004,2.96662207 1.47777693,2.96662207 1.36064459,2.8501846 L1.36064459,2.8501846 Z M8.15667098,3.27362239 C8.27380332,3.39005986 8.46297643,3.39005986 8.58010877,3.27362239 L9.2107608,2.64297036 C9.27068301,2.58585015 9.30436804,2.50652734 9.30386278,2.42374371 C9.30352532,2.3449603 9.27224762,2.26946239 9.21676702,2.21352637 L7.51700964,0.513768991 C7.46040614,0.455042711 7.38235036,0.421866189 7.30078608,0.421866189 C7.21922181,0.421866189 7.14116602,0.455042711 7.08456253,0.513768991 L6.4539105,1.14442102 C6.33747303,1.26155336 6.33747303,1.45072647 6.4539105,1.56785881 L8.15667098,3.27362239 Z M7.73023009,3.7000633 L6.03047271,2.00030592 C5.91334037,1.88386845 5.72416726,1.88386845 5.60703492,2.00030592 L0.423675858,7.18366498 C0.360321429,7.24678538 0.328395147,7.33485788 0.336585811,7.42391337 L0.486741061,8.9735155 C0.500470086,9.11671533 0.613820674,9.23006592 0.757020502,9.24379495 L2.30662263,9.3939502 C2.39567813,9.40214086 2.48375062,9.37021457 2.54687102,9.30686015 L7.73023009,4.12350109 C7.84666755,4.00636875 7.84666755,3.81719564 7.73023009,3.7000633 L7.73023009,3.7000633 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/powerFile.svg b/src/assets/icons/svg/powerFile.svg
new file mode 100644
index 0000000..7e23b57
--- /dev/null
+++ b/src/assets/icons/svg/powerFile.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/32/企业能源档案</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/32/企业能源档案" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M15.51,21.856 L5.91,21.856 C4.86202635,21.8527062 4.01329381,21.0039737 4.01,19.956 L4.01,6.908 C4.01329381,5.86002635 4.86202635,5.01129381 5.91,5.008 L9.17,5.008 C10.2179737,5.01129381 11.0667062,5.86002635 11.07,6.908 L11.07,7.179 L21.133,7.179 C22.1809737,7.18229381 23.0297062,8.03102635 23.033,9.079 L23.033,10.979 L23.027,10.979 C22.9217129,10.978883 22.8182488,11.0064734 22.727,11.059 L15.806,15.059 C15.6202074,15.1681618 15.5060757,15.3675117 15.506,15.583 L15.506,21.853 L15.51,21.856 Z" id="减去_115" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
+        <path d="M23.036,13.982 L18.187,16.782 L18.187,22.382 L23.035,25.182 L27.887,22.382 L27.887,16.782 L23.036,13.982 Z M23.268,13.044 L28.58,16.112 C28.7229957,16.1945569 28.811346,16.346885 28.812,16.512 L28.812,22.652 C28.811346,22.817115 28.7229957,22.9694431 28.58,23.052 L23.268,26.122 C23.1244379,26.2048856 22.9475621,26.2048856 22.804,26.122 L17.487,23.054 C17.3440043,22.9714431 17.255654,22.819115 17.255,22.654 L17.255,16.515 C17.255654,16.349885 17.3440043,16.1975569 17.487,16.115 L22.804,13.045 C22.9475621,12.9621144 23.1244379,12.9621144 23.268,13.045 L23.268,13.044 Z M21.696,19.996 C21.538687,19.9958931 21.3921423,19.9160862 21.3067069,19.7839946 C21.2212716,19.651903 21.208583,19.4855195 21.273,19.342 L22.613,16.351 C22.7179341,16.1171074 22.9926074,16.0125659 23.2265,16.1175 C23.4603926,16.2224341 23.5649341,16.4971074 23.46,16.731 L22.412,19.068 L24.376,19.068 C24.5324837,19.0678396 24.6785072,19.1465648 24.7643762,19.277384 C24.8502453,19.4082032 24.8643912,19.5734922 24.802,19.717 L23.462,22.811 C23.3995205,22.9682319 23.2564116,23.0789921 23.0885358,23.1000457 C22.9206599,23.1210992 22.754632,23.0491083 22.6552607,22.9121743 C22.5558894,22.7752404 22.538929,22.5950729 22.611,22.442 L23.67,19.996 L21.696,19.996 Z" id="路径_628" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/qxs-jk.svg b/src/assets/icons/svg/qxs-jk.svg
new file mode 100644
index 0000000..ce2f33f
--- /dev/null
+++ b/src/assets/icons/svg/qxs-jk.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.001" height="18.002" viewBox="0 0 18.001 18.002"><defs><style>.a{fill:url(#a);}</style><linearGradient id="a" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#f0f7fc"/><stop offset="1" stop-color="#c2edff"/></linearGradient></defs><path class="a" d="M356.056,1668.018a8.971,8.971,0,1,1,3.5-.707A8.941,8.941,0,0,1,356.056,1668.018ZM353,1654.994a2.158,2.158,0,0,0-2.158,2.158v5.249a2.153,2.153,0,0,0,.633,1.525,2.149,2.149,0,0,0,1.526.634h6.045a2.16,2.16,0,0,0,2.159-2.158v-5.249a2.149,2.149,0,0,0-.634-1.526,2.143,2.143,0,0,0-1.526-.633H355.7v-.8h-2.152v.8Zm5.278,8.8h-4.51a2.154,2.154,0,0,1-1.526-.633,2.149,2.149,0,0,1-.634-1.526v-1.574a2.474,2.474,0,0,1,.232-.112,2.4,2.4,0,0,1,.265-.094,2.283,2.283,0,0,1,.3-.065,2.209,2.209,0,0,1,.324-.023l.082,0,.071,0h.01l.081.007.083.011a1.824,1.824,0,0,1,.392.1,2.068,2.068,0,0,1,.335.166,3.036,3.036,0,0,1,.3.208c.093.073.182.149.273.227.106.091.211.18.323.266a2.812,2.812,0,0,0,.359.234,1.922,1.922,0,0,0,.424.167,2.05,2.05,0,0,0,.518.063,1.946,1.946,0,0,0,.508-.063,1.644,1.644,0,0,0,.4-.166,2.113,2.113,0,0,0,.329-.232c.094-.078.182-.161.268-.241l.024-.022c.073-.069.159-.151.249-.229a2.655,2.655,0,0,1,.275-.209,1.77,1.77,0,0,1,.321-.167,1.728,1.728,0,0,1,.39-.1l.076-.01h.007l.068-.006.065,0h.009l.077,0h.1l.1.007.115.011.015,0h.013l.1.012a1.978,1.978,0,0,1,.265.051,2.193,2.193,0,0,1,.249.08c.072.027.145.058.23.1.07.035.138.072.2.11v1.49a2.159,2.159,0,0,1-2.158,2.158Zm-2.306-3.334a2.049,2.049,0,0,1-.518-.063,1.888,1.888,0,0,1-.424-.167,2.64,2.64,0,0,1-.359-.234c-.1-.078-.2-.161-.3-.242l-.028-.024c-.085-.073-.176-.15-.273-.227a3.169,3.169,0,0,0-.3-.207,1.919,1.919,0,0,0-.335-.166,1.785,1.785,0,0,0-.392-.1l-.082-.011-.082-.007-.081,0h-.082a2.219,2.219,0,0,0-.324.023,2.288,2.288,0,0,0-.3.065,2.337,2.337,0,0,0-.265.093,2.532,2.532,0,0,0-.232.112v-1.381a2.161,2.161,0,0,1,1.942-2.147v.022H355.7v-.032h2.575a2.16,2.16,0,0,1,2.158,2.158v1.464c-.073-.042-.138-.078-.2-.11s-.15-.069-.23-.1a2.368,2.368,0,0,0-.249-.08,1.946,1.946,0,0,0-.265-.05l-.125-.016-.115-.011-.093-.006h-.013c-.034,0-.068,0-.1,0h-.077l-.075,0-.076.006-.067.009h-.008a1.72,1.72,0,0,0-.39.1,1.811,1.811,0,0,0-.321.167,2.541,2.541,0,0,0-.275.21c-.087.075-.171.153-.249.228-.094.089-.191.18-.292.264a2.194,2.194,0,0,1-.329.232,1.642,1.642,0,0,1-.4.166A1.946,1.946,0,0,1,355.968,1660.459Z" transform="translate(-347.056 -1650.016)"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/real-line.svg b/src/assets/icons/svg/real-line.svg
new file mode 100644
index 0000000..7735195
--- /dev/null
+++ b/src/assets/icons/svg/real-line.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/实控线</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/实控线" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon/层级图标/背景" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)">
+            <circle id="椭圆形" cx="9" cy="9" r="9"></circle>
+        </g>
+        <g id="kongzhi" transform="translate(3.999297, 3.998828)" fill="#3B414A" fill-rule="nonzero">
+            <path d="M6.00070315,12 C2.69166764,12 0,9.30833236 0,6.00070315 C0,2.69307395 2.69166764,0 6.00070315,0 C9.30973866,0 12.0014063,2.69166764 12.0014063,6.00070315 C12.0014063,9.30973866 9.30973866,12 6.00070315,12 Z M6.00070315,1.09129263 C3.29356615,1.09129263 1.09129263,3.29356615 1.09129263,6.00070315 C1.09129263,8.70784015 3.29356615,10.9101137 6.00070315,10.9101137 C8.70784015,10.9101137 10.9101137,8.70784015 10.9101137,6.00070315 C10.9101137,3.29356615 8.70784015,1.09129263 6.00070315,1.09129263 Z" id="形状"></path>
+            <path d="M6.00070315,1.69178484 L7.80077347,3.49185515 L4.20063284,3.49185515 L6.00070315,1.69178484 L6.00070315,1.69178484 Z M6.00070315,10.3096215 L7.80077347,8.50955115 L4.20063284,8.50955115 L6.00070315,10.3096215 Z M1.69178484,6.00070315 L3.49185515,4.20063284 L3.49185515,7.80077347 L1.69178484,6.00070315 L1.69178484,6.00070315 Z M10.3096215,6.00070315 L8.50955115,4.20063284 L8.50955115,7.80077347 L10.3096215,6.00070315 L10.3096215,6.00070315 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/safe-building.svg b/src/assets/icons/svg/safe-building.svg
new file mode 100644
index 0000000..b05aef2
--- /dev/null
+++ b/src/assets/icons/svg/safe-building.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/应急设施</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/应急设施" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon/层级图标/背景" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)">
+            <circle id="椭圆形" cx="9" cy="9" r="9"></circle>
+        </g>
+        <path d="M10.5,4.28867513 L14.6961524,6.71132487 C15.0055535,6.88995766 15.1961524,7.22008468 15.1961524,7.57735027 L15.1961524,12.4226497 C15.1961524,12.7799153 15.0055535,13.1100423 14.6961524,13.2886751 L10.5,15.7113249 C10.1905989,15.8899577 9.80940108,15.8899577 9.5,15.7113249 L5.30384758,13.2886751 C4.9944465,13.1100423 4.80384758,12.7799153 4.80384758,12.4226497 L4.80384758,7.57735027 C4.80384758,7.22008468 4.9944465,6.88995766 5.30384758,6.71132487 L9.5,4.28867513 C9.80940108,4.11004234 10.1905989,4.11004234 10.5,4.28867513 Z M11,7 L9,7 L9,9 L7,9 L7,11 L8.999,11 L9,13 L11,13 L10.999,11 L13,11 L13,9 L11,9 L11,7 Z" id="形状结合" fill="#3B414A"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/safe-goods.svg b/src/assets/icons/svg/safe-goods.svg
new file mode 100644
index 0000000..4e145d1
--- /dev/null
+++ b/src/assets/icons/svg/safe-goods.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/应急物资</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/应急物资" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon/层级图标/背景" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)">
+            <circle id="椭圆形" cx="9" cy="9" r="9"></circle>
+        </g>
+        <g id="wuziguanli" transform="translate(5.000000, 5.000000)" fill="#3B414A" fill-rule="nonzero">
+            <path d="M2.91024551,4.56413707 L7.3120656,4.56413707 C7.44209926,4.56342355 7.54747683,4.45845411 7.54867743,4.32843309 L7.54867743,0.221412583 C7.53983974,0.0970994929 7.43669971,0.000592233672 7.3120656,8.36968377e-06 L2.91024551,8.36968377e-06 C2.78164804,-0.00105915706 2.67541197,0.100123683 2.67023352,0.228612446 L2.67023352,4.33563296 C2.67546442,4.46408232 2.7816853,4.56520643 2.91024551,4.56413707 Z M3.77848892,1.52848729 C3.78072949,1.39646689 3.88855279,1.29069961 4.02060103,1.29099128 L6.20501025,1.29099128 C6.33659496,1.29099128 6.44365158,1.39691884 6.44502225,1.52848729 L6.44502225,1.94457924 L4.02070104,1.94457924 C3.88899109,1.94575271 3.78094359,1.84056878 3.77858893,1.70888379 L3.77848892,1.52848729 Z M4.42652133,5.21760169 L0.240012003,5.21760169 C0.108675877,5.21650617 0.0012645741,5.3219857 0,5.45331132 L0,9.77102776 C0.00520175366,9.90241351 0.115808038,10.0047799 0.247212366,9.99982333 L4.43382169,9.99982333 C4.56515781,10.000933 4.67256912,9.89545352 4.67383369,9.7641279 L4.67383369,5.45341132 C4.6737791,5.38936993 4.64742131,5.32816191 4.60093005,5.2841146 C4.55396078,5.23963363 4.49118208,5.2157333 4.42652133,5.21771589 L4.42652133,5.21760169 Z M3.55827792,6.94078253 C3.55592325,7.07246752 3.44787576,7.17765145 3.31616581,7.17647798 L1.35946798,7.17647798 C1.22775803,7.17765145 1.11971053,7.07246752 1.11735587,6.94078253 L1.11735587,6.76218599 C1.11861925,6.62946051 1.22672758,6.52260992 1.35946798,6.52289002 L3.31626582,6.52289002 C3.44831406,6.52259836 3.55613735,6.62836563 3.55837792,6.76038603 L3.55827792,6.94078253 Z M9.7521876,5.21771589 L5.56607831,5.21771589 C5.43474218,5.21660617 5.32733088,5.3220857 5.3260663,5.45341132 L5.3260663,9.77112776 C5.33132116,9.90251442 5.44197349,10.0048372 5.57337866,9.99982333 L9.759988,9.99982333 C9.89132412,10.000933 9.99873543,9.89545352 10,9.7641279 L10,5.45341132 C9.99994541,5.38936993 9.97358762,5.32816191 9.92709635,5.2841146 C9.88000372,5.2395086 9.81701973,5.21559867 9.7521876,5.21771589 L9.7521876,5.21771589 Z M8.88394419,6.94088253 C8.88158938,7.0732786 8.77244036,7.17875068 8.640032,7.17657797 L6.68373418,7.17657797 C6.55202425,7.17775144 6.44397676,7.07256752 6.44162208,6.94088253 L6.44162208,6.76228599 C6.44386266,6.6302656 6.55168595,6.52449833 6.68373418,6.52478999 L8.64053202,6.52478999 C8.77258026,6.52449832 8.88040356,6.63026559 8.88264413,6.76228599 L8.88394419,6.94088253 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/safe-line.svg b/src/assets/icons/svg/safe-line.svg
new file mode 100644
index 0000000..451f0aa
--- /dev/null
+++ b/src/assets/icons/svg/safe-line.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/安全线</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/安全线" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon/层级图标/背景" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)">
+            <circle id="椭圆形" cx="9" cy="9" r="9"></circle>
+        </g>
+        <path d="M10,4.52419428 L14.2849888,6.51539636 L14.2849888,9.50219948 C14.2849888,12.2645043 12.4597202,14.8511149 10,15.4758057 C7.54027978,14.8413541 5.71501121,12.2645043 5.71501121,9.50219948 L5.71501121,6.51539636 L10,4.52419428 Z M12.4050773,8.18170871 C12.2158454,8.04979758 11.9393358,8.07611388 11.787476,8.24048781 L9.31965693,10.9102078 L8.212524,9.71189175 C8.06066416,9.54751782 7.78415464,9.52120152 7.59492271,9.65311264 C7.40569077,9.78502377 7.37539469,10.0252103 7.52725453,10.1895842 L8.97767365,11.7595259 C9.15353701,11.9498813 9.48707976,11.9498813 9.66294312,11.7595259 L12.4727455,8.71818025 C12.6246053,8.55380633 12.5943092,8.31361983 12.4050773,8.18170871 Z" id="形状结合" fill="#3B414A"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/safe-route.svg b/src/assets/icons/svg/safe-route.svg
new file mode 100644
index 0000000..81e6554
--- /dev/null
+++ b/src/assets/icons/svg/safe-route.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/疏散路线</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/疏散路线" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <g id="icon/层级图标/背景" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)">
+                <circle id="椭圆形" cx="9" cy="9" r="9"></circle>
+            </g>
+            <path d="M10.5643083,6.06152676 C10.9464834,6.10273162 11.3379297,6.08006894 11.7242253,6.06564725 C11.9549726,6.05637614 12.1146415,6.14908711 12.2506176,6.3190572 C12.7193229,6.90519647 13.1921488,7.48824538 13.6577639,8.07644489 C13.8431858,8.31028252 13.8246436,8.62446965 13.616559,8.77589756 C13.3682997,8.95616886 13.1694862,8.8490362 12.9995161,8.63992149 C12.6904796,8.26083668 12.3505394,7.9013242 12.0837378,7.49545623 C11.8128158,7.07825693 11.4800865,6.91446758 10.942363,7.06589547 C11.3513213,7.5788961 11.7458579,8.07438465 12.1414247,8.56884309 C12.6667867,9.22709088 13.1993597,9.87915795 13.7133904,10.5456467 C13.8473063,10.7197373 13.9874028,10.7784542 14.200638,10.7733036 C14.7466026,10.7588819 15.2925671,10.7660928 15.8395617,10.7691831 C16.2155561,10.7712434 16.4535143,10.9916894 16.4638155,11.3388405 C16.4741167,11.6684794 16.2207068,11.9311605 15.8539834,11.9342508 C15.0576993,11.9414617 14.2614152,11.9332207 13.464101,11.9321906 C13.1725765,11.9321906 12.9438895,11.8209374 12.7594977,11.5870998 C12.4288286,11.1688704 12.0827077,10.7630024 11.7324663,10.3406525 C11.3121767,10.7805145 10.9083689,11.2111053 10.4932299,11.6324252 C10.375796,11.7529494 10.4005189,11.8745038 10.4283322,12.0094497 C10.5746095,12.7212638 10.7208868,13.433078 10.8640737,14.1448921 C10.8980677,14.3128019 10.9238208,14.4817419 10.8815858,14.6527421 C10.8146279,14.9236641 10.646718,15.1029053 10.367555,15.1245379 C10.0925125,15.1461704 9.90812071,14.9823811 9.84322305,14.7269109 C9.72166869,14.2417235 9.62174687,13.7524157 9.5187347,13.2631079 C9.38584899,12.629583 9.2581139,11.9939979 9.12831856,11.3594429 C9.06754138,11.0617377 9.12316795,10.8052374 9.34773448,10.5786106 L9.6043111,10.3049416 L10.1007535,9.74112164 C10.1841933,9.64944079 10.2295187,9.57527203 10.130627,9.45165743 C9.83498207,9.07978348 9.55375884,8.69657819 9.19527647,8.33088497 C9.19527647,8.55133103 9.20351745,8.77177707 9.19321622,8.991193 C9.17364391,9.40015134 9.00573407,9.5783624 8.60295646,9.58660338 C8.01166658,9.59896485 7.41934657,9.59793472 6.82805671,9.58763348 C6.50974909,9.58248287 6.30990547,9.38469951 6.30783028,9.11377749 C6.30578498,8.83152414 6.51695993,8.6450721 6.85071938,8.64198173 C7.2493765,8.63786124 7.64700349,8.63477088 8.0456606,8.64404198 C8.21872106,8.64816247 8.3062814,8.59871663 8.28155848,8.41432482 C8.27846811,8.39166214 8.28567897,8.36796934 8.28052836,8.34633679 C8.11879924,7.54387195 8.47728161,7.02778095 9.11801734,6.5652563 C9.57333115,6.23664746 9.98950033,5.99971946 10.5643083,6.06152676 Z M5.82059763,10.184074 C6.03280271,10.3499236 6.07400759,10.6476288 5.88549531,10.8855869 C5.6526878,11.1781415 5.39103688,11.4480334 5.13968717,11.7282265 C5.20149448,11.8415399 5.30450665,11.7900338 5.3827959,11.7900338 C6.22440536,11.7941543 7.06601483,11.7910639 7.90659416,11.7941543 C8.15176314,11.7951844 8.39075138,11.8271182 8.51230576,12.0846486 C8.68845657,12.4565225 8.42680565,12.8170652 7.95810025,12.8222158 C7.17314747,12.832517 6.38922484,12.8253061 5.60427208,12.8253061 L5.06860877,12.8253061 C5.35189225,13.1343426 5.57748892,13.3846622 5.80823618,13.6308613 C5.95039299,13.7822892 6.01735089,13.9532894 5.96893517,14.1603439 C5.88858568,14.5095552 5.51465148,14.6537722 5.26742226,14.4003623 C4.72011112,13.8388186 4.18937071,13.2613593 3.67588417,12.6687276 C3.45234775,12.4101671 3.51518518,12.1031908 3.73254087,11.860082 C4.20948724,11.326479 4.70188544,10.8052374 5.19119325,10.2819355 C5.37146455,10.0893028 5.57954914,9.9955617 5.82059763,10.184074 Z M8.43710688,4.8737964 C8.92538459,4.86246505 9.29828866,5.2436101 9.3054995,5.76382159 C9.31271035,6.29433428 8.93877616,6.72801554 8.46595027,6.73728662 C8.00754609,6.7455276 7.60270824,6.29639453 7.60476067,5.78133365 C7.60682875,5.3002668 7.9879738,4.88512774 8.43710688,4.8737964 Z" id="形状结合" fill="#3B414A"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/safeFile.svg b/src/assets/icons/svg/safeFile.svg
new file mode 100644
index 0000000..2cd9527
--- /dev/null
+++ b/src/assets/icons/svg/safeFile.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/32/企业安全档案</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/32/企业安全档案" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M18.523,23.765 L6.006,23.765 C5.46730256,23.780142 5.01786925,23.3566461 5.001,22.818 L5.001,7.947 C5.01840759,7.40874887 5.46768056,6.98585112 6.006,7.001 L11.749,7.001 C12.1413301,6.99545418 12.5011554,7.21829612 12.671,7.572 L12.847,7.956 L21.997,7.956 C22.5337691,7.94365694 22.9801232,8.36635427 22.997,8.903 L22.997,11.049 C23.5330145,11.0366387 23.9790513,11.4581435 23.997,11.994 L23.997,14.894 C23.712,14.857 23.397,14.82 23.057,14.784 C23.036,14.784 23.014,14.784 22.992,14.784 C22.0597486,14.8251928 21.1325457,14.9439364 20.22,15.139 C19.364,15.328 18.557,15.539 17.82,15.752 C17.6522344,15.7987619 17.5356225,15.9508468 17.534,16.125 C17.534,16.637 17.534,17.108 17.524,17.563 L17.524,17.583 L17.524,17.844 C17.492,20.624 17.473,22.301 18.524,23.765 L18.523,23.765 Z M13.231,9.211 L13.231,9.211 L13.89,11.049 L21.659,11.049 L21.659,9.211 L13.231,9.211 Z" id="减去_110" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
+        <path d="M23.427,23.773 C23.3017514,23.849134 23.1601876,23.8943796 23.014,23.905 C22.8673738,23.8944056 22.7255749,23.8480549 22.601,23.77 C20.301,22.562 20.236,21.903 20.272,18.685 C20.272,18.365 20.28,18.6 20.281,18.234 C20.5539357,18.0757777 20.8455125,17.9521598 21.149,17.866 C21.7561337,17.7138446 22.3791189,17.6339575 23.005,17.628 C23.9415285,17.6363777 24.8655925,17.8436189 25.716,18.236 C25.716,18.649 25.724,18.455 25.728,18.809 C25.774,22.044 25.719,22.409 23.428,23.774 M26.909,18.801 C26.903,18.39 26.897,17.942 26.896,17.451 C26.89407,17.3260822 26.8096161,17.2175568 26.689,17.185 C25.4984853,16.8415598 24.2785368,16.6098901 23.045,16.493 C23.0293537,16.4918692 23.0136463,16.4918692 22.998,16.493 C22.3324597,16.5223189 21.6705112,16.606944 21.019,16.746 C20.419,16.879 19.838,17.027 19.306,17.184 C19.1881559,17.2191297 19.1070237,17.3270355 19.106,17.45 C19.106,17.893 19.106,18.3 19.097,18.678 C19.06,21.891 19.047,23.094 22.325,24.834 C22.5355342,24.9586622 22.7744124,25.0275032 23.019,25.034 C23.2620012,25.0254257 23.4990807,24.956707 23.709,24.834 C26.975,23.134 26.961,22.129 26.909,18.795 M24.72,18.595 L22.427,20.871 L21.427,19.947 C21.276,19.802 21.016,20.323 20.88,20.522 C20.744,20.721 20.728,20.902 20.88,21.048 L22.164,22.235 C22.31798,22.379777 22.55802,22.379777 22.712,22.235 L25.272,19.704 C25.423,19.559 25.4,19.379 25.272,19.179 C25.144,18.979 24.872,18.458 24.725,18.604" id="路径_613" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/show.svg b/src/assets/icons/svg/show.svg
new file mode 100644
index 0000000..1e12287
--- /dev/null
+++ b/src/assets/icons/svg/show.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><defs><style>.a{fill:currentColor;}.b{fill:none;}</style></defs><g transform="translate(-1821 -24)"><g transform="translate(-14 -1)"><rect class="a" width="30" height="3" rx="1.5" transform="translate(1835 27)"/><rect class="a" width="30" height="3" rx="1.5" transform="translate(1835 49)"/><rect class="a" width="15" height="3" rx="1.5" transform="translate(1850 42)"/><rect class="a" width="15" height="3" rx="1.5" transform="translate(1850 34)"/><path class="a" d="M7.738.9A1,1,0,0,1,9.262.9L15.6,8.352A1,1,0,0,1,14.838,10H2.162A1,1,0,0,1,1.4,8.352Z" transform="translate(1835 48) rotate(-90)"/></g><rect class="b" width="30" height="30" transform="translate(1821 24)"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/speed.svg b/src/assets/icons/svg/speed.svg
new file mode 100644
index 0000000..a7bfb79
--- /dev/null
+++ b/src/assets/icons/svg/speed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><style>.a,.b{fill:none;}.a{stroke:#fff;}</style></defs><g transform="translate(0.832 -9)"><path class="a" d="M114.156,107.265a3.975,3.975,0,0,0,1.476-5.49,4.131,4.131,0,0,0-5.581-1.49c-1.6.906-1.1,3.238-2.071,5.436a8.54,8.54,0,0,0-.939-5.462,3.975,3.975,0,0,0-5.49-1.476,4.131,4.131,0,0,0-1.49,5.581c.906,1.6,3.238,1.1,5.436,2.071a8.541,8.541,0,0,0-5.462.939,3.975,3.975,0,0,0-1.476,5.49,4.131,4.131,0,0,0,5.581,1.49c1.6-.906,1.1-3.236,2.069-5.433a8.546,8.546,0,0,0,.94,5.459,3.975,3.975,0,0,0,5.49,1.476,4.131,4.131,0,0,0,1.49-5.581c-.906-1.6-3.236-1.1-5.433-2.07A8.546,8.546,0,0,0,114.156,107.265Zm-7.06,1.568a1.514,1.514,0,1,1,1.514-1.514A1.514,1.514,0,0,1,107.1,108.833Z" transform="translate(-98.08 -88.319)"/><rect class="b" width="20" height="20" transform="translate(-0.832 9)"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/tail-spin.svg b/src/assets/icons/svg/tail-spin.svg
new file mode 100644
index 0000000..423591f
--- /dev/null
+++ b/src/assets/icons/svg/tail-spin.svg
@@ -0,0 +1,32 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
+            <stop stop-color="#FFA900" stop-opacity="0" offset="0%"/>
+            <stop stop-color="#FFA900" stop-opacity=".631" offset="63.146%"/>
+            <stop stop-color="#FFA900" offset="100%"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)">
+            <path d="M35 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="4">
+                <animateTransform
+                        attributeName="transform"
+                        type="rotate"
+                        from="0 18 18"
+                        to="360 18 18"
+                        dur="0.9s"
+                        repeatCount="indefinite" />
+            </path>
+            <circle fill="#FFA900" cx="35" cy="18" r="2">
+                <animateTransform
+                        attributeName="transform"
+                        type="rotate"
+                        from="0 18 18"
+                        to="360 18 18"
+                        dur="0.9s"
+                        repeatCount="indefinite" />
+            </circle>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/icons/svg/tc_cheliang.svg b/src/assets/icons/svg/tc_cheliang.svg
new file mode 100644
index 0000000..bd697cc
--- /dev/null
+++ b/src/assets/icons/svg/tc_cheliang.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/16/tc_cheliang</title>
+    <g id="icon/16/tc_cheliang" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="cheliang-" transform="translate(1.000000, 3.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M5.4958382,0.10958891 C6.48812342,-0.0365296368 7.49694378,-0.0365296368 8.48922899,0.10958891 C9.18698909,0.247071286 9.88474918,0.357057187 10.5406437,0.535784276 C11.0286737,0.658286472 11.4186485,1.01911475 11.5733286,1.49128679 C11.8570844,2.27951908 12.1547953,3.06087725 12.4664615,3.8353613 C12.5222823,3.96596956 12.6897448,4.15844488 12.7874312,4.14469665 C13.3408828,4.05256104 13.8676929,4.41280613 13.9736233,4.95584266 C14.0087922,5.09579531 14.0087922,5.24208538 13.9736233,5.38203803 L13.1781768,5.59513571 C13.2274507,5.86792899 13.2600714,6.14338837 13.2758632,6.42002997 L13.2758632,10.2282918 C13.2668837,10.4585538 13.1837997,10.6800353 13.0386248,10.8607107 C12.3022709,11.0006488 11.5469536,11.014601 10.8057925,10.9019554 C10.28945,10.5788718 10.6104197,10.0358165 10.4429573,9.59587285 L3.66072916,9.59587285 C3.52815474,10.0633129 3.45140113,10.8469625 3.29789391,10.9019554 C2.54077965,11.0326815 1.76635506,11.0326815 1.00924081,10.9019554 C0.848586783,10.6917744 0.760548637,10.4363954 0.758047173,10.1732988 C0.716181567,9.62336933 0.716181567,9.1009363 0.716181567,8.56475503 C0.716181567,7.56800781 0.716181567,6.57126058 0.758047173,5.56763924 L0.018421475,5.37516391 C-0.00614049167,5.26419039 -0.00614049167,5.14930561 0.018421475,5.03833209 C0.227749503,4.48840258 0.50685354,4.06220722 1.22554643,4.12407429 C1.30927765,4.12407429 1.46976247,3.95909544 1.51860567,3.8353613 C1.78533585,3.22265575 2.01826216,2.59619754 2.21636577,1.95872687 C2.48473086,1.01698135 3.31998399,0.339488505 4.30964604,0.260819524 C4.69341409,0.192078336 5.09113735,0.143959504 5.4749054,0.0820924352 L5.4958382,0.10958891 Z M2.41173859,4.35779433 C5.42065688,4.98507482 8.52952231,4.98507482 11.5384406,4.35779433 C11.2802694,3.59476714 11.0220981,2.91422938 10.8406805,2.2268175 C10.7295229,1.68638694 10.2420026,1.30157624 9.68239875,1.3125597 C8.23803536,1.25069263 6.78669437,1.2025738 5.34233098,1.18882556 C4.87041656,1.20705122 4.40218218,1.2785512 3.94681079,1.40192324 C3.73697582,1.44425795 3.55333797,1.56817192 3.43744593,1.74562918 C3.04670028,2.57739756 2.75364104,3.43666241 2.41173859,4.35779433 Z M3.00483467,7.6023784 C3.25448472,7.61567474 3.50486187,7.60184312 3.75143797,7.56113369 C3.94426275,7.51729748 4.1091244,7.39486031 4.20498203,7.22430187 C4.23987003,7.12119008 4.07938521,6.86684769 3.93983319,6.80498062 C3.37225958,6.54300616 2.7898264,6.31348802 2.19543296,6.11756874 C1.90237372,6.02133108 1.56744888,6.04195343 1.49767287,6.44752644 C1.35812085,7.04557478 1.49767287,7.37553248 1.95121693,7.47177014 C2.30707458,7.54051133 2.64897702,7.55425957 3.03972267,7.58863016 L3.00483467,7.6023784 Z M11.0500085,7.6023784 C11.4174701,7.5765513 11.7831935,7.53065327 12.1454919,7.46489602 C12.6688119,7.348036 12.5571703,6.92871476 12.5432151,6.56438646 C12.5292599,6.20005817 12.3338871,6.0282052 12.0478055,6.11069462 C11.3313516,6.3206036 10.631675,6.58253759 9.95452519,6.89434416 C9.64751075,7.03870066 9.75915236,7.43739955 10.1080324,7.51301486 C10.4200584,7.55912003 10.7346201,7.58666639 11.0500085,7.59550428 L11.0500085,7.6023784 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/tc_ranliao.svg b/src/assets/icons/svg/tc_ranliao.svg
new file mode 100644
index 0000000..6a04b20
--- /dev/null
+++ b/src/assets/icons/svg/tc_ranliao.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/16/tc_ranliao</title>
+    <g id="icon/16/tc_ranliao" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M2,9 L2,8 L14,8 L14,9 L13.0931667,9 L12.0183,12.0500699 L4.02078852,12.0500699 L3.12707803,9 L2,9 Z M6.00973538,14.0500699 C6.56202012,14.0500699 7.00973538,13.6023547 7.00973538,13.0500699 C7.00973538,12.4977852 6.56202012,12.0500699 6.00973538,12.0500699 C5.45745063,12.0500699 5.00973538,12.4977852 5.00973538,13.0500699 C5.00973538,13.6023547 5.45745063,14.0500699 6.00973538,14.0500699 Z M9.98983941,14.0500699 C10.5421242,14.0500699 10.9898394,13.6023547 10.9898394,13.0500699 C10.9898394,12.4977852 10.5421242,12.0500699 9.98983941,12.0500699 C9.43755466,12.0500699 8.98983941,12.4977852 8.98983941,13.0500699 C8.98983941,13.6023547 9.43755466,14.0500699 9.98983941,14.0500699 Z M3.97611601,2.70119272 L7.04163726,1.85280773 L8.67143081,3.88064436 C8.74824853,3.97590612 8.8632505,4.03699325 8.98948312,4.04852718 C9.11526653,4.05707084 9.23925302,4.01947876 9.33628594,3.94301305 L10.1125492,3.2966855 L11.4467518,3.2966855 L13.0931667,6.98902352 L3.12707803,6.98902352 L3.97611601,2.70119272 Z" id="形状结合" fill="#FFFFFF"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/tc_renyuan.svg b/src/assets/icons/svg/tc_renyuan.svg
new file mode 100644
index 0000000..14439ec
--- /dev/null
+++ b/src/assets/icons/svg/tc_renyuan.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/16/tc_renyuan</title>
+    <g id="icon/16/tc_renyuan" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="gongren" transform="translate(3.000000, 2.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M10,11.5341044 C10,12.3237241 8.16000578,13 8.16000578,13 L6.9933343,12.8903776 C6.9933343,12.8903776 5.76726393,12.7179326 5,12.7179326 C4.23386316,12.7179326 3.0066657,12.8903776 3.0066657,12.8903776 L2.24561514,12.997465 C2.24561514,12.997465 0,12.3208478 0,11.5341044 L0,11.1526846 C0,10.4188187 0.850667508,9.67820906 1.8476381,9.11022308 C1.89592896,9.08277685 2.49504187,12.8981288 2.49504187,12.8981288 L3.16000577,12.8903775 C3.16000577,12.8903775 2.64805336,8.95108691 2.70001445,8.92430691 C2.97598902,8.78236323 3.15754933,8.64932455 3.4290156,8.53919835 C3.52971546,8.49793962 4.01113568,8.20391226 3.74182242,7.41213138 C3.11808724,6.69711547 2.6931942,6.0043458 2.6931942,4.4421203 L7.32126993,4.4421203 C7.32126993,5.98816081 6.88552518,6.68734923 6.26590815,7.40335639 L6.26949168,7.40335639 C6.00610279,8.30157472 6.42732561,8.51459586 6.49440105,8.5390196 C6.76303518,8.63889206 7.03046998,8.79498948 7.29999999,8.92430693 C7.36678644,8.95630316 6.83999421,12.8903776 6.83999421,12.8903776 L7.52001469,12.8819276 C7.52001469,12.8819276 8.09110966,9.07905561 8.1495153,9.11121435 C9.16160028,9.66844283 10,10.4038362 10,11.1526846 L10,11.5341044 Z M7.63810823,2.79687359 C7.63810823,1.00160694 5.46419619,0.104054868 5.46419619,0.104054868 C5.15631672,-0.051880052 4.85070584,-0.0163575804 4.53580382,0.104054868 C4.53580382,0.104054868 2.36180509,0.892146993 2.36180509,2.79687359 C2.36180509,3.08163846 1.90224725,3.02050599 1.7501932,3.92125931 L8.24993687,3.92125931 C7.97322537,3.01428224 7.63810823,3.08163846 7.63810823,2.79687359 L7.63810823,2.79687359 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/tc_yongdian.svg b/src/assets/icons/svg/tc_yongdian.svg
new file mode 100644
index 0000000..ec16908
--- /dev/null
+++ b/src/assets/icons/svg/tc_yongdian.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/16/tc_yongdian</title>
+    <g id="icon/16/tc_yongdian" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M9.07430076,1.42678924 L9.06453157,1.44025488 L3.54282859,8.64833079 C3.38467337,8.87170193 3.348765,9.15131191 3.48606169,9.39870998 L3.51721748,9.4499322 C3.65055369,9.67699979 3.88554224,9.80215099 4.14983835,9.80215101 L7.09115578,9.80188697 L6.3819656,13.9801947 L6.3721964,14.0216478 C6.30354807,14.3485195 6.46724796,14.6339382 6.75636309,14.7704427 L6.79306355,14.7862847 L6.80124855,14.7913013 C6.88045818,14.8330183 6.96679667,14.8565172 7.05551145,14.863118 L7.10910996,14.8652303 C7.32191981,14.8652303 7.51703953,14.7815321 7.66727378,14.6312978 C7.68846143,14.6100975 7.70780562,14.5871318 7.72509681,14.5626495 L12.7971532,7.39074598 C12.8401213,7.33012381 12.8698118,7.26111594 12.8842837,7.18823337 C12.9159676,7.02770187 12.9159676,6.87139487 12.878475,6.72142464 C12.868989,6.68322597 12.8552621,6.64620758 12.8375501,6.61105922 L12.812203,6.56458958 C12.6783387,6.33937021 12.4444063,6.2150111 12.1811663,6.2150111 L9.66203618,6.21474708 L10.376243,2.00528355 C10.3811704,1.97614661 10.3836434,1.94664747 10.3836359,1.91709683 L10.3825797,1.86957105 C10.368322,1.58626463 10.228121,1.34045075 9.96857743,1.23114147 L9.95088728,1.22454068 L9.93530939,1.21529955 C9.63061637,1.05159966 9.28579046,1.14506702 9.07403673,1.42678924 L9.07430076,1.42678924 Z" id="路径" fill="#FFFFFF"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/tc_yongshui.svg b/src/assets/icons/svg/tc_yongshui.svg
new file mode 100644
index 0000000..6ebe34e
--- /dev/null
+++ b/src/assets/icons/svg/tc_yongshui.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/16/tc_yongshui</title>
+    <g id="icon/16/tc_yongshui" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M7.9997907,2 C8.13639639,2.15858661 8.27174917,2.31818064 8.40583721,2.47876813 C8.83456225,2.99085953 9.25017612,3.51306036 9.65230573,4.04489282 C9.53806214,4.21513123 9.4328732,4.38067273 9.33481512,4.54246771 C8.79738507,5.42901627 8.50089624,6.16039153 8.50089624,6.65457138 C8.50089624,8.32258193 9.85983859,9.67151142 11.5320468,9.67151142 C11.87081,9.67151142 12.1967261,9.61614146 12.5010953,9.51396603 C12.5,11.9973998 10.4823256,14 8,14 C5.51746511,14 3.5,11.9973998 3.5,9.52109679 C3.5,8.78744491 3.9401628,7.70165634 4.73802326,6.38549985 C5.07374419,5.8315633 5.46576744,5.24804565 5.9025814,4.64507741 C6.44105711,3.90472403 7.00523993,3.18220812 7.59416279,2.47876813 C7.73732558,2.30715721 7.8731628,2.14709507 7.9997907,2 Z M11.5319642,3.25995456 C11.5859239,3.32259688 11.6393888,3.38563712 11.6923541,3.44906979 C11.9249808,3.72693125 12.1478352,4.01232777 12.3605351,4.30477016 C12.5330783,4.54294489 12.687929,4.77343657 12.82054,4.99224361 C13.1356979,5.5121304 13.3095639,5.94110104 13.3095639,6.23081627 C13.3095639,7.20896536 12.5125748,8 11.5320468,8 C10.5514362,8 9.7545298,7.20896535 9.7545298,6.23081627 C9.7545298,5.941021 9.92839577,5.51213041 10.2435537,4.99224361 C10.3761647,4.77343657 10.5310154,4.54294489 10.7035586,4.30477016 C10.9162585,4.01232777 11.1391128,3.72693125 11.3717396,3.44906979 C11.4282895,3.38128282 11.4819457,3.31805767 11.5319642,3.25995456 Z" id="形状结合" fill="#FFFFFF"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/tc_zhengqi.svg b/src/assets/icons/svg/tc_zhengqi.svg
new file mode 100644
index 0000000..41c28c2
--- /dev/null
+++ b/src/assets/icons/svg/tc_zhengqi.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/16/tc_zhengqi</title>
+    <g id="icon/16/tc_zhengqi" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M6.14205943,12.0612872 C5.58574461,12.0593348 5.13255874,12.4924983 5.12852629,13.0300529 C5.12852629,13.5657585 5.58156339,13.9999934 6.14205943,13.9999934 C6.69884768,14.0019483 7.15222993,13.5680693 7.15559257,13.0300529 C7.15222992,12.4922256 6.69864913,12.0586846 6.14205943,12.0612872 Z M9.85794057,12.0612923 C9.30162575,12.0593348 8.84843989,12.4924983 8.84440743,13.0300529 C8.84440743,13.5657585 9.29866566,13.9999934 9.85794057,13.9999934 C10.4147288,14.0019483 10.8681111,13.5680693 10.8714737,13.0300529 C10.8674413,12.4924983 10.4142554,12.0593348 9.85794057,12.0612923 Z M5.00325313,2 C3.45249924,3.95598192 4.34393044,5.28584458 5.39234323,6.51318479 C6.43739212,7.74272191 6.93973322,9.62034738 3.45249924,11.0241727 C4.99988924,9.36989968 4.11406453,7.71635899 3.06677304,6.51318479 C2.02060285,5.31001059 2.28971415,3.05378434 5.00325313,2 Z M8.6699198,2 C7.11916591,3.95598192 8.0105971,5.28584458 9.05900989,6.51318479 C10.1040588,7.74272191 10.6063999,9.62034738 7.11916591,11.0241727 C8.66655591,9.36989968 7.7807312,7.71635899 6.73343971,6.51318479 C5.68726951,5.31001059 5.95638082,3.05378434 8.6699198,2 Z M12.3365865,2 C9.62304748,3.05378434 9.35393618,5.31001059 10.4001064,6.51318479 C11.4473979,7.71635899 12.3332226,9.36989968 10.7858326,11.0241727 C14.2730666,9.62034738 13.7707255,7.74272191 12.7256766,6.51318479 C11.6772638,5.28584458 10.7858326,3.95598192 12.3377078,2.00146461 L12.3365865,2 Z" id="形状结合" fill="#FFFFFF"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/tz-wrw.svg b/src/assets/icons/svg/tz-wrw.svg
new file mode 100644
index 0000000..1fde56c
--- /dev/null
+++ b/src/assets/icons/svg/tz-wrw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18.947" viewBox="0 0 18 18.947"><defs><style>.a{fill:url(#a);}</style><linearGradient id="a" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#f0f7fc"/><stop offset="1" stop-color="#c2edff"/></linearGradient></defs><path class="a" d="M330,1642.947a9.486,9.486,0,1,1,9-9.473A9.256,9.256,0,0,1,330,1642.947Zm-3.07-14.143-2.869,5.012,2.81,5.049,5.678.033,2.869-5.012-2.81-5.047-5.679-.035Zm5.121,9.2h0l-4.67-.029-2.311-4.152,2.359-4.121,4.67.029,2.311,4.15L332.05,1638Zm-3.748-3.65-.928.445,0,.967.981.6.79-.959-.838-1.055Zm3.336.041-1.007.568-.045.781,1,.582.791-1.023-.739-.908Zm-1.7-1.922-1.171.752-.107,1.254,1.322.727,1.073-1.473-1.117-1.26Zm-2.271-.078h0a5.344,5.344,0,0,0-.948.592l-.024.76.96.684.709-.982Zm3.987-1.311-1.048.588-.024.764,1.081.643.77-.9-.778-1.094Z" transform="translate(-321 -1624)"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/use-e.svg b/src/assets/icons/svg/use-e.svg
new file mode 100644
index 0000000..c960260
--- /dev/null
+++ b/src/assets/icons/svg/use-e.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/linshiyongdian</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/linshiyongdian" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="减去-70" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)" fill-rule="nonzero">
+            <path d="M9,18 C4.03172183,17.9944889 0.00551112896,13.9682782 0,9 C0.00551112896,4.03172183 4.03172183,0.00551112896 9,0 C13.9682782,0.00551112896 17.9944889,4.03172183 18,9 C17.9944889,13.9682782 13.9682782,17.9944889 9,18 L9,18 Z M4.991,4.04 C4.588775,4.04055175 4.263,4.36677462 4.263,4.769 L4.263,13.514 C4.26355084,13.9158349 4.58916509,14.2414492 4.991,14.242 L13.007,14.242 C13.4092254,14.242 13.7354483,13.916225 13.736,13.514 L13.736,4.769 C13.7354492,4.3666128 13.4093872,4.04055084 13.007,4.04 L4.991,4.04 Z M13.008,13.514 L4.991,13.514 L4.991,4.769 L5.356,4.769 L5.356,8.049 L12.644,8.049 L12.644,4.769 L13.008,4.769 L13.008,13.513 L13.008,13.514 Z M8.521,8.776 L8.521,8.776 L7.177,10.683 L8.999,11.146 L8.055,13.076 L10.821,10.487 L8.999,10.212 L10.059,8.776 L8.521,8.776 Z M11.914,7.319 L6.084,7.319 L6.084,4.768 L11.914,4.768 L11.914,7.318 L11.914,7.319 Z M10.548,5.497 L10.548,6.59 L11.276,6.59 L11.276,5.5 L10.548,5.497 Z M8.725,5.497 L8.725,6.59 L9.454,6.59 L9.454,5.5 L8.725,5.497 Z M6.903,5.497 L6.903,6.59 L7.632,6.59 L7.632,5.5 L6.903,5.497 Z" id="减去_70"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/use-fire.svg b/src/assets/icons/svg/use-fire.svg
new file mode 100644
index 0000000..ab6eb7b
--- /dev/null
+++ b/src/assets/icons/svg/use-fire.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/donghuo</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/donghuo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="减去-59" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)" fill-rule="nonzero">
+            <path d="M9,18 C4.03172183,17.9944889 0.00551112896,13.9682782 0,9 C0.00551112896,4.03172183 4.03172183,0.00551112896 9,0 C13.9682782,0.00551112896 17.9944889,4.03172183 18,9 C17.9944889,13.9682782 13.9682782,17.9944889 9,18 L9,18 Z M5.866,6.311 C5.7931235,6.88914646 5.60107536,7.44588177 5.302,7.946 C5.06603033,8.36790963 4.88585671,8.81867982 4.766,9.287 C4.461,10.81 5.077,11.826 6.966,12.91 C6.4439462,12.0554506 6.52186815,10.96374 7.16,10.192 C7.46854371,9.73021709 7.68767075,9.21462406 7.806,8.672 L7.806,8.672 L7.806,8.678 C8.07044007,9.07672027 8.16241118,9.5654295 8.061,10.033 C8.63838075,9.30107021 8.90552388,8.37181428 8.805,7.445 C10.499142,8.69738234 11.0802013,10.9677326 10.196,12.88 C11.82,11.952 12.676,10.787 12.738,9.416 C12.6751166,7.84564831 11.9657499,6.37117881 10.778,5.342 C11.0613289,5.88981442 10.9850486,6.5545993 10.585,7.024 C9.849,4.209 8.015,3.633 7.997,3.624 C8.18,4.8 7.608,6.186 6.25,7.862 C6.25941943,7.31922796 6.1255896,6.78356373 5.862,6.309 L5.866,6.311 Z" id="减去_59"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/video.svg b/src/assets/icons/svg/video.svg
new file mode 100644
index 0000000..96e8c3a
--- /dev/null
+++ b/src/assets/icons/svg/video.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/20px/层级图标/视频监控</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F0F7FC" offset="0%"></stop>
+            <stop stop-color="#C2EDFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon/20px/层级图标/视频监控" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <g id="icon/层级图标/背景" transform="translate(1.000000, 1.000000)" fill="url(#linearGradient-1)">
+                <circle id="椭圆形" cx="9" cy="9" r="9"></circle>
+            </g>
+            <path d="M7.66031333,11.888661 L6.47949465,11.888661 L6.47949465,10.3985248 L5.33340592,10.1905988 L5.33340592,14.9728964 L6.47949465,14.5916987 L6.47949465,12.9282909 L8.3201826,12.9282909 L9.32735148,11.576772 L8.00761295,10.8836854 L7.66031333,11.888661 Z M13.6338667,12.20055 L16.3080737,10.5024878 L7.97288299,5.02710365 L7.00044407,5.02710365 L5.68070553,7.10636345 L5.68070553,7.79945005 L13.0087274,12.2352043 L13.6338667,12.2352043 L13.6338667,12.20055 Z M12.6266978,12.5470933 L6.30584484,8.45788232 L5.64597557,9.15096892 L12.9739974,13.5867232 L13.6338667,13.5867232 L13.9811663,13.2401799 L14.3284659,12.2352043 C14.3284659,12.2352043 13.356027,12.9282909 13.321297,12.9282909 C12.9392675,12.6857106 12.6266978,12.5470933 12.6266978,12.5470933 L12.6266978,12.5470933 Z" id="形状" fill="#3B414A"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/water-env.svg b/src/assets/icons/svg/water-env.svg
new file mode 100644
index 0000000..3256918
--- /dev/null
+++ b/src/assets/icons/svg/water-env.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18"><defs><style>.a{fill:url(#a);}</style><linearGradient id="a" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#f0f7fc"/><stop offset="1" stop-color="#c2edff"/></linearGradient></defs><path class="a" d="M330,1642a9,9,0,1,1,9-9A9.01,9.01,0,0,1,330,1642Zm-3.489-4.051a4.921,4.921,0,0,0,3.631,1.619,4.8,4.8,0,0,0,1.964-.422,5.532,5.532,0,0,0,3.169-5.107,5.767,5.767,0,0,0-1.2-3.244,22.365,22.365,0,0,0-3.573-3.807l-.362-.324-.363.324a22.234,22.234,0,0,0-3.572,3.807,5.421,5.421,0,0,0,.306,7.152Zm3.633.984a4.407,4.407,0,0,1-3.463-1.729l.009-.027c.118-.387.236-.781.351-1.176l.016-.043a.665.665,0,0,0,.232.039h.008a.537.537,0,0,1,.079,0,7.08,7.08,0,0,0,1.327.129,3.8,3.8,0,0,0,2.767-.967,8.719,8.719,0,0,0,1.6-1.953,3.394,3.394,0,0,0,.4-1.467c-.23.311-.6.436-1.278.436-.4,0-.892-.041-1.464-.092l-.046,0c-.471-.043-1-.09-1.61-.121a1.3,1.3,0,0,0-.151-.006c-.025,0-.051,0-.077,0a1.776,1.776,0,0,0-1.3.57,4.615,4.615,0,0,0-.756,2.955c0,.057,0,.109,0,.164-.04.09-.078.174-.112.252l-.337.8,0,.012a4.752,4.752,0,0,1,.325-5.543,19.641,19.641,0,0,1,3.164-3.371l.321-.285.321.285a19.674,19.674,0,0,1,3.163,3.371,5.1,5.1,0,0,1,1.063,2.871A4.746,4.746,0,0,1,330.143,1638.934Zm-1.375-3.283a5.994,5.994,0,0,1-1.019-.086l-.027-.006a.569.569,0,0,1-.42-.209c.066-.148.128-.275.192-.395a3.248,3.248,0,0,1,.356-.547,1.95,1.95,0,0,1,.225-.236l.066-.057.063-.049.134-.09a2.149,2.149,0,0,1,.6-.24,4.375,4.375,0,0,1,.633-.094c.121-.01.241-.02.357-.025.286-.021.556-.041.795-.08a3.93,3.93,0,0,0,.454-.1,2.875,2.875,0,0,0,.34-.115c.1-.045.165-.074.209-.1l.074-.037-.075.031c-.069.031-.139.057-.215.084a3.324,3.324,0,0,1-.343.094,4.056,4.056,0,0,1-.454.068c-.247.025-.526.027-.822.029l-.329,0a4.648,4.648,0,0,0-.659.057,2.207,2.207,0,0,0-.668.223,1.417,1.417,0,0,0-.158.09l-.077.055-.068.053a2,2,0,0,0-.27.246,3.69,3.69,0,0,0-.424.566l-.006.01a2.894,2.894,0,0,1,.593-1.916,1.618,1.618,0,0,1,1.165-.5l.086,0c.054,0,.1,0,.134,0,.8.043,1.441.113,1.954.17l.057.006a10.71,10.71,0,0,0,1.086.09l.078,0a1.575,1.575,0,0,0,.671-.15c-.023.039-.046.084-.069.129l-.027.055a6.915,6.915,0,0,1-1.779,2.176A3.6,3.6,0,0,1,328.768,1635.65Z" transform="translate(-321 -1624)"/></svg>
\ No newline at end of file
diff --git a/src/assets/img/angleMark.png b/src/assets/img/angleMark.png
new file mode 100644
index 0000000..cdd33d2
Binary files /dev/null and b/src/assets/img/angleMark.png differ
diff --git a/src/assets/img/avatar.jpg b/src/assets/img/avatar.jpg
new file mode 100644
index 0000000..150c17b
Binary files /dev/null and b/src/assets/img/avatar.jpg differ
diff --git a/src/assets/img/bar_chart_bg.png b/src/assets/img/bar_chart_bg.png
new file mode 100644
index 0000000..b47614f
Binary files /dev/null and b/src/assets/img/bar_chart_bg.png differ
diff --git a/src/assets/img/big_bg.png b/src/assets/img/big_bg.png
new file mode 100644
index 0000000..2460421
Binary files /dev/null and b/src/assets/img/big_bg.png differ
diff --git a/src/assets/img/blue-warning-bg.png b/src/assets/img/blue-warning-bg.png
new file mode 100644
index 0000000..1baf6c9
Binary files /dev/null and b/src/assets/img/blue-warning-bg.png differ
diff --git a/src/assets/img/close/bo.png b/src/assets/img/close/bo.png
new file mode 100644
index 0000000..ebc689f
Binary files /dev/null and b/src/assets/img/close/bo.png differ
diff --git a/src/assets/img/code.jpg b/src/assets/img/code.jpg
new file mode 100644
index 0000000..d4d1db5
Binary files /dev/null and b/src/assets/img/code.jpg differ
diff --git a/src/assets/img/dealBg.png b/src/assets/img/dealBg.png
new file mode 100644
index 0000000..c00b9c2
Binary files /dev/null and b/src/assets/img/dealBg.png differ
diff --git a/src/assets/img/eme/eme_Fireaxe.png b/src/assets/img/eme/eme_Fireaxe.png
new file mode 100644
index 0000000..7e91926
Binary files /dev/null and b/src/assets/img/eme/eme_Fireaxe.png differ
diff --git a/src/assets/img/eme/eme_extinguisher.png b/src/assets/img/eme/eme_extinguisher.png
new file mode 100644
index 0000000..9e91088
Binary files /dev/null and b/src/assets/img/eme/eme_extinguisher.png differ
diff --git a/src/assets/img/eme/eme_medicinebag.png b/src/assets/img/eme/eme_medicinebag.png
new file mode 100644
index 0000000..2336af2
Binary files /dev/null and b/src/assets/img/eme/eme_medicinebag.png differ
diff --git a/src/assets/img/eme/fuzi.png b/src/assets/img/eme/fuzi.png
new file mode 100644
index 0000000..9e04bb0
Binary files /dev/null and b/src/assets/img/eme/fuzi.png differ
diff --git a/src/assets/img/eme/mhq.png b/src/assets/img/eme/mhq.png
new file mode 100644
index 0000000..80358b9
Binary files /dev/null and b/src/assets/img/eme/mhq.png differ
diff --git a/src/assets/img/eme/wz.png b/src/assets/img/eme/wz.png
new file mode 100644
index 0000000..bf5a03a
Binary files /dev/null and b/src/assets/img/eme/wz.png differ
diff --git a/src/assets/img/eme/xfz-icon.png b/src/assets/img/eme/xfz-icon.png
new file mode 100644
index 0000000..8a2d758
Binary files /dev/null and b/src/assets/img/eme/xfz-icon.png differ
diff --git a/src/assets/img/energy/dian.png b/src/assets/img/energy/dian.png
new file mode 100644
index 0000000..1fed5df
Binary files /dev/null and b/src/assets/img/energy/dian.png differ
diff --git a/src/assets/img/energy/energyCardBg.png b/src/assets/img/energy/energyCardBg.png
new file mode 100644
index 0000000..37b0ff6
Binary files /dev/null and b/src/assets/img/energy/energyCardBg.png differ
diff --git a/src/assets/img/energy/energyTitle.png b/src/assets/img/energy/energyTitle.png
new file mode 100644
index 0000000..c23cbd8
Binary files /dev/null and b/src/assets/img/energy/energyTitle.png differ
diff --git a/src/assets/img/energy/green-arr.png b/src/assets/img/energy/green-arr.png
new file mode 100644
index 0000000..709dac3
Binary files /dev/null and b/src/assets/img/energy/green-arr.png differ
diff --git a/src/assets/img/energy/mei.png b/src/assets/img/energy/mei.png
new file mode 100644
index 0000000..402b05e
Binary files /dev/null and b/src/assets/img/energy/mei.png differ
diff --git a/src/assets/img/energy/red-arr.png b/src/assets/img/energy/red-arr.png
new file mode 100644
index 0000000..27338f8
Binary files /dev/null and b/src/assets/img/energy/red-arr.png differ
diff --git a/src/assets/img/energy/shui.png b/src/assets/img/energy/shui.png
new file mode 100644
index 0000000..f0a40bc
Binary files /dev/null and b/src/assets/img/energy/shui.png differ
diff --git a/src/assets/img/energy/zq.png b/src/assets/img/energy/zq.png
new file mode 100644
index 0000000..eaa99ab
Binary files /dev/null and b/src/assets/img/energy/zq.png differ
diff --git a/src/assets/img/env/BenzeneExceedance.png b/src/assets/img/env/BenzeneExceedance.png
new file mode 100644
index 0000000..7082b14
Binary files /dev/null and b/src/assets/img/env/BenzeneExceedance.png differ
diff --git a/src/assets/img/env/EthanolExceedance.png b/src/assets/img/env/EthanolExceedance.png
new file mode 100644
index 0000000..ba7fe4a
Binary files /dev/null and b/src/assets/img/env/EthanolExceedance.png differ
diff --git a/src/assets/img/env/HCLExceedance.png b/src/assets/img/env/HCLExceedance.png
new file mode 100644
index 0000000..1a7f1d9
Binary files /dev/null and b/src/assets/img/env/HCLExceedance.png differ
diff --git a/src/assets/img/env/NOExceedance.png b/src/assets/img/env/NOExceedance.png
new file mode 100644
index 0000000..a7a7530
Binary files /dev/null and b/src/assets/img/env/NOExceedance.png differ
diff --git a/src/assets/img/env/clean-count.png b/src/assets/img/env/clean-count.png
new file mode 100644
index 0000000..ef59223
Binary files /dev/null and b/src/assets/img/env/clean-count.png differ
diff --git a/src/assets/img/env/clean-year.png b/src/assets/img/env/clean-year.png
new file mode 100644
index 0000000..542eb7b
Binary files /dev/null and b/src/assets/img/env/clean-year.png differ
diff --git a/src/assets/img/env/clean.png b/src/assets/img/env/clean.png
new file mode 100644
index 0000000..7ef15a5
Binary files /dev/null and b/src/assets/img/env/clean.png differ
diff --git a/src/assets/img/env/count.png b/src/assets/img/env/count.png
new file mode 100644
index 0000000..5575c7a
Binary files /dev/null and b/src/assets/img/env/count.png differ
diff --git a/src/assets/img/env/cycle-bg.png b/src/assets/img/env/cycle-bg.png
new file mode 100644
index 0000000..2befa6e
Binary files /dev/null and b/src/assets/img/env/cycle-bg.png differ
diff --git a/src/assets/img/env/formaldehydeExcessRate.png b/src/assets/img/env/formaldehydeExcessRate.png
new file mode 100644
index 0000000..b1863f8
Binary files /dev/null and b/src/assets/img/env/formaldehydeExcessRate.png differ
diff --git a/src/assets/img/env/gas-year.png b/src/assets/img/env/gas-year.png
new file mode 100644
index 0000000..fa14e6e
Binary files /dev/null and b/src/assets/img/env/gas-year.png differ
diff --git a/src/assets/img/env/gas.png b/src/assets/img/env/gas.png
new file mode 100644
index 0000000..b95cd17
Binary files /dev/null and b/src/assets/img/env/gas.png differ
diff --git a/src/assets/img/env/methanolExceedance.png b/src/assets/img/env/methanolExceedance.png
new file mode 100644
index 0000000..9248362
Binary files /dev/null and b/src/assets/img/env/methanolExceedance.png differ
diff --git a/src/assets/img/env/waste-year.png b/src/assets/img/env/waste-year.png
new file mode 100644
index 0000000..487a4f3
Binary files /dev/null and b/src/assets/img/env/waste-year.png differ
diff --git a/src/assets/img/env/waste.png b/src/assets/img/env/waste.png
new file mode 100644
index 0000000..d0fb1da
Binary files /dev/null and b/src/assets/img/env/waste.png differ
diff --git a/src/assets/img/env/waterImg.png b/src/assets/img/env/waterImg.png
new file mode 100644
index 0000000..15a6df2
Binary files /dev/null and b/src/assets/img/env/waterImg.png differ
diff --git a/src/assets/img/heatmap.png b/src/assets/img/heatmap.png
new file mode 100644
index 0000000..526d318
Binary files /dev/null and b/src/assets/img/heatmap.png differ
diff --git a/src/assets/img/long_line.png b/src/assets/img/long_line.png
new file mode 100644
index 0000000..a0c7564
Binary files /dev/null and b/src/assets/img/long_line.png differ
diff --git a/src/assets/img/middle_line.png b/src/assets/img/middle_line.png
new file mode 100644
index 0000000..0bccaf7
Binary files /dev/null and b/src/assets/img/middle_line.png differ
diff --git a/src/assets/img/park/lighting-icon.png b/src/assets/img/park/lighting-icon.png
new file mode 100644
index 0000000..addf052
Binary files /dev/null and b/src/assets/img/park/lighting-icon.png differ
diff --git a/src/assets/img/park/yichuli.png b/src/assets/img/park/yichuli.png
new file mode 100644
index 0000000..230d07d
Binary files /dev/null and b/src/assets/img/park/yichuli.png differ
diff --git a/src/assets/img/permitBg.png b/src/assets/img/permitBg.png
new file mode 100644
index 0000000..9ef1d45
Binary files /dev/null and b/src/assets/img/permitBg.png differ
diff --git a/src/assets/img/person.png b/src/assets/img/person.png
new file mode 100644
index 0000000..8db5bc1
Binary files /dev/null and b/src/assets/img/person.png differ
diff --git a/src/assets/img/phone-gray.png b/src/assets/img/phone-gray.png
new file mode 100644
index 0000000..3924067
Binary files /dev/null and b/src/assets/img/phone-gray.png differ
diff --git a/src/assets/img/phone.png b/src/assets/img/phone.png
new file mode 100644
index 0000000..b3e7057
Binary files /dev/null and b/src/assets/img/phone.png differ
diff --git a/src/assets/img/red-warning-bg.png b/src/assets/img/red-warning-bg.png
new file mode 100644
index 0000000..239363d
Binary files /dev/null and b/src/assets/img/red-warning-bg.png differ
diff --git a/src/assets/img/safety/company.png b/src/assets/img/safety/company.png
new file mode 100644
index 0000000..f263b6e
Binary files /dev/null and b/src/assets/img/safety/company.png differ
diff --git a/src/assets/img/safety/fxx.png b/src/assets/img/safety/fxx.png
new file mode 100644
index 0000000..2a2ed5e
Binary files /dev/null and b/src/assets/img/safety/fxx.png differ
diff --git a/src/assets/img/safety/shigong.png b/src/assets/img/safety/shigong.png
new file mode 100644
index 0000000..ef3edae
Binary files /dev/null and b/src/assets/img/safety/shigong.png differ
diff --git a/src/assets/img/safety/zdwxy.png b/src/assets/img/safety/zdwxy.png
new file mode 100644
index 0000000..98cbb5a
Binary files /dev/null and b/src/assets/img/safety/zdwxy.png differ
diff --git a/src/assets/img/search-icon.png b/src/assets/img/search-icon.png
new file mode 100644
index 0000000..8611db4
Binary files /dev/null and b/src/assets/img/search-icon.png differ
diff --git a/src/assets/img/short_line.png b/src/assets/img/short_line.png
new file mode 100644
index 0000000..dd318ee
Binary files /dev/null and b/src/assets/img/short_line.png differ
diff --git a/src/assets/img/subTitle.png b/src/assets/img/subTitle.png
new file mode 100644
index 0000000..9105e61
Binary files /dev/null and b/src/assets/img/subTitle.png differ
diff --git a/src/assets/img/yellow-warning-bg.png b/src/assets/img/yellow-warning-bg.png
new file mode 100644
index 0000000..d1e7e73
Binary files /dev/null and b/src/assets/img/yellow-warning-bg.png differ
diff --git a/src/assets/style/pageCommon.component.scss b/src/assets/style/pageCommon.component.scss
new file mode 100644
index 0000000..879da04
--- /dev/null
+++ b/src/assets/style/pageCommon.component.scss
@@ -0,0 +1,2767 @@
+@mixin side-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .margin-top-50 {
+    margin-top: 50px;
+  }
+  .margin-top-40 {
+    margin-top: 40px;
+  }
+  .content-block {
+    height: 170px;
+  }
+  width: 330px;
+  height: 100%;
+}
+
+//滚动条样式
+@mixin scrollStyle($width) {
+  &::-webkit-scrollbar {
+    width: $width !important;
+    height: 100% !important;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: rgba(255, 255, 255, 0.68);
+  }
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    -webkit-border-radius: 2px;
+    background: transparent;
+  }
+}
+
+.line-chart {
+  height: 100px;
+}
+
+.env-left {
+  @include side-container;
+
+}
+
+.env-right {
+  @include side-container;
+
+  .margin-top-20 {
+    margin-top: 20px;
+  }
+
+  .right-top {
+    display: flex;
+    justify-content: space-between;
+    padding: 16px 0 10px 9px;
+
+    &-item {
+      display: flex;
+      flex-direction: column;
+      cursor: pointer;
+
+      .value {
+        color: #7FB0FF;
+        font-family: 'logo';
+      }
+
+      .level {
+        color: #e8e8e8;
+        font-family: 'logo';
+
+        .point {
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          display: inline-block;
+          margin-right: 4px;
+          position: relative;
+          top: -2px;
+        }
+
+        .yellow {
+          background: #D0DE78;
+        }
+
+        .green {
+          background: #88E29F;
+        }
+
+        .blue {
+          background: #0646b5;
+        }
+
+        .orange {
+          background-color: #ff7000
+        }
+
+        .red {
+          background-color: #b90303
+        }
+
+        .zi {
+          background-color: #ad22be
+        }
+      }
+
+      .label {
+        color: #e8e8e8;
+        font-family: 'logo';
+        font-size: 14px;
+        text-align: center;
+      }
+
+      &-sub {
+        width: 104px;
+        background: url("~@/assets/img/middle_line.png") no-repeat 50% 50%;
+        background-position: bottom;
+        padding-bottom: 12px;
+        margin-bottom: 9px;
+        text-align: center;
+      }
+    }
+  }
+
+  .right-middle {
+    display: flex;
+    flex-wrap: wrap;
+
+    .square-box {
+      width: 110px;
+      height: 70px;
+      background-size: cover;
+      padding: 13px 0 13px 0;
+      text-align: left;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      margin-right: 7px;
+
+      b {
+        font-size: 24px;
+        font-family: DINPro;
+        color: #ffffff;
+      }
+
+      img {
+        margin-right: 10px;
+        width: 26px;
+        height: 26px;
+      }
+
+      .text-style {
+        font-size: 12px;
+        width: 73px;
+      }
+
+      .icon-style {
+        position: relative;
+        top: 4px;
+      }
+
+      &:nth-child(3n) {
+        width: 88px;
+        margin-left: 0;
+
+        .text-style {
+          font-size: 12px;
+          width: 50px;
+        }
+      }
+    }
+  }
+
+  .cycle-box {
+    padding-top: 30px;
+  }
+
+  .right-cycle-box-con {
+    margin-bottom: 30px;
+
+    .right-cycle-box {
+      background: url("~@/assets/img/env/cycle-bg.png") 50% 50% no-repeat;
+      width: 65px;
+      height: 65px;
+      background-size: cover;
+      text-align: center;
+      margin-right: 67px;
+      margin-bottom: 14px;
+
+      .con-style-top {
+        height: 50%;
+        line-height: 2.4;
+        font-size: 16px;
+        font-weight: bold;
+      }
+
+      .con-style-bottom {
+        height: 50%;
+        line-height: 2;
+        color: #BBBBBB;
+      }
+
+    }
+
+    &:nth-child(3n) {
+      .right-cycle-box {
+        margin-right: 0;
+      }
+    }
+
+    &:nth-child(n+4) {
+      margin-bottom: 0;
+    }
+
+    .word-ellipsis {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 64px;
+      color: #BBBBBB;
+      font-size: 12px;
+    }
+
+  }
+}
+
+.box-content {
+  display: flex;
+  flex-direction: column;
+  height: 1px;
+  flex: 1.78;
+}
+
+
+.d-flex {
+  display: flex;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.is-justify-start {
+  justify-content: start;
+}
+
+.is-justify-space-between {
+  justify-content: space-between;
+}
+
+.is-justify-space-around {
+  justify-content: space-around;
+}
+
+.equipment-content {
+  padding: 30px 0 0 40px;
+}
+
+.env-small-label {
+  font-family: "logo";
+  font-size: 14px;
+}
+
+.env-number-stlye {
+  font-family: number;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.radio-style {
+  width: 240px;
+  margin: 10px auto 0;
+
+  .el-radio-group {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .el-radio-button__orig-radio + .el-radio-button__inner {
+    width: 70px;
+    height: 24px;
+    border-radius: 12px 12px 12px 12px;
+    font-size: 12px;
+    color: #ffffff;
+    border: 1px solid rgba(255, 255, 255, 0);
+    background: transparent;
+    text-align: center;
+    margin-bottom: 5px;
+    padding: 0;
+    line-height: 22px;
+    font-family: "logo";
+
+    &:focus {
+      border: none;
+    }
+  }
+
+  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    background: rgba(208, 208, 208, 0.4);
+    border: 1px solid #ffffff;
+    padding: 0;
+  }
+
+  &-two-btns {
+    width: 170px;
+  }
+
+  &-auto {
+    width: 100%;
+  }
+}
+
+.tabs-style {
+  width: 100%;
+  margin: 10px auto 0;
+
+  .el-radio-group {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .el-radio-button__orig-radio + .el-radio-button__inner {
+    width: 78px;
+    height: 24px;
+    font-size: 12px;
+    color: #ffffff;
+    background: transparent;
+    border-radius: 4px 4px 0px 0px;
+    text-align: center;
+    margin-bottom: 5px;
+    padding: 0;
+    line-height: 22px;
+    border: none;
+    box-shadow: none;
+
+    &:focus {
+      border: none;
+      box-shadow: none;
+    }
+  }
+
+  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    background: linear-gradient(180deg, #E8E8E8 0%, rgba(232, 232, 232, 0) 100%);
+    border: none;
+    box-shadow: none;
+    padding: 0;
+  }
+
+}
+
+@mixin imgStyle {
+  width: 28px;
+  height: 22px;
+  background-size: cover;
+  margin: 5px auto;
+}
+
+.formaldehydeExcessRate {
+  background: url("~@/assets/img/env/formaldehydeExcessRate.png") 50% 50% no-repeat;
+  @include imgStyle
+}
+
+.methanolExceedance {
+  background: url("~@/assets/img/env/methanolExceedance.png") 50% 50% no-repeat;
+  @include imgStyle
+}
+
+.NOExceedance {
+  background: url("~@/assets/img/env/NOExceedance.png") 50% 50% no-repeat;
+  @include imgStyle
+}
+
+
+.HCLExceedance {
+  background: url("~@/assets/img/env/HCLExceedance.png") 50% 50% no-repeat;
+  @include imgStyle
+}
+
+.BenzeneExceedance {
+  background: url("~@/assets/img/env/BenzeneExceedance.png") 50% 50% no-repeat;
+  @include imgStyle
+}
+
+.EthanolExceedance {
+  background: url("~@/assets/img/env/EthanolExceedance.png") 50% 50% no-repeat;
+  @include imgStyle
+}
+
+.env-left, .env-right {
+  .card-box {
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 40px;
+    @mixin commonItemStyle {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+      margin-bottom: 30px;
+      &-top {
+        padding-bottom: 7px;
+        font-family: 'logo';
+        width: 50px;
+        background: url("~@/assets/img/short_line.png") 50% 50% no-repeat;
+        background-position: bottom;
+        margin-bottom: 7px;
+      }
+      &-top-long {
+        padding-bottom: 7px;
+        font-family: 'logo';
+        width: 105px;
+        background: url("~@/assets/img/long_line.png") 50% 50% no-repeat;
+        background-position: bottom;
+        margin-bottom: 7px;
+      }
+      &-bottom {
+        font-family: 'logo';
+      }
+    }
+
+    &-item {
+      @include commonItemStyle;
+      margin-right: 80px;
+
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+
+      /*
+      &-top{
+        padding-bottom: 7px;
+        font-family: 'logo';
+        width: 50px;
+        background: url("~@/assets/img/short_line.png") 50% 50% no-repeat;
+        background-position: bottom;
+        margin-bottom: 7px;
+      }
+      &-bottom{
+        font-family: 'logo';
+      }*/
+
+    }
+
+    &-item-2 {
+      @include commonItemStyle;
+      margin-right: 20px;
+      margin-bottom: 0;
+
+      &:nth-child(2n) {
+        margin-right: 0;
+      }
+    }
+
+    &-item-4 {
+      @include commonItemStyle;
+      margin-right: 40px;
+
+      &:nth-child(4n) {
+        margin-right: 0;
+      }
+    }
+
+    &-item-5 {
+      @include commonItemStyle;
+      margin-right: 20px;
+
+      &:nth-child(5n) {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+
+.line-chart-air, .bar-chart-air {
+  height: 168px;
+  flex: 1;
+}
+
+.right-pie-chart {
+  height: 230px;
+  background: url('~@/assets/img/bar_chart_bg.png') 35% 50% no-repeat;
+}
+
+.right-pie-chart-water {
+  height: 230px;
+  background: url('~@/assets/img/bar_chart_bg.png') 35% 50% no-repeat;
+}
+
+.margin-top-23 {
+  margin-top: 23px;
+}
+
+.linear-gradient {
+  position: relative;
+  height: 16px;
+  flex: 1;
+
+  .line {
+    position: absolute;
+    width: 100%;
+    height: 10px;
+    top: 3px;
+    background: linear-gradient(90deg, rgba(157, 213, 172, 1) 0%, rgba(106, 205, 132, 1) 20%, rgba(197, 195, 122, 1) 20%, rgba(204, 217, 117, 1) 40%, rgba(202, 147, 85, 1) 40%, rgba(209, 93, 93, 1) 60%, rgba(208, 83, 145, 1) 60%, rgba(78, 13, 88, 1) 80%, rgba(75, 43, 43, 1) 80%, rgba(46, 6, 6, 1) 100%);
+  }
+
+  .shu {
+    width: 1px;
+    background: #FFFFFF;
+    height: 16px;
+    position: absolute;
+    left: 40%;
+  }
+
+  .background {
+    position: absolute;
+    height: 10px;
+    top: 3px;
+    background: #979797;
+    left: 40%;
+    width: 60%;
+
+  }
+}
+
+.air-bar-style {
+  display: flex;
+}
+
+.air-number-style {
+  font-family: 'DINPro';
+  font-size: 12px;
+  color: #FFFFFF;
+  width: 30px;
+  padding-left: 8px;
+  flex: 0;
+}
+
+.air-top5-content {
+  width: 100%;
+  margin-top: 20px;
+  cursor: pointer;
+
+  p {
+    font-size: 12px;
+    margin-bottom: 6px;
+  }
+
+}
+
+.right-bar-chart {
+  height: 600px;
+  //flex: 1;
+}
+
+.hidden-bar-chart-top {
+  height: 400px;
+
+}
+
+.d-flex {
+  position: relative;
+
+  .chartPart {
+    flex: 1;
+    height: 200px;
+    position: relative;
+
+    .charts-style {
+      height: 240px;
+    }
+  }
+
+  .chart-bg-center {
+    position: absolute;
+    border-radius: 50%;
+    width: 90px;
+    height: 90px;
+    background-color: transparent;
+    left: 25.5%;
+    margin-top: 30.5%;
+    z-index: 10;
+  }
+
+
+  .cod {
+    background: #B8ECFF;
+
+    &-border {
+      border: 5px solid #B8ECFF;
+    }
+  }
+
+  .ph {
+    background: #07D1FF;
+
+    &-border {
+      border: 5px solid #07D1FF;
+    }
+  }
+
+  .rjy {
+    background: #3078EA;
+
+    &-border {
+      border: 5px solid #3078EA;
+    }
+  }
+
+  .gmsj {
+    background: #83D37B;
+
+    &-border {
+      border: 5px solid #83D37B;
+    }
+  }
+
+  .shxyl {
+    background: #E4E24F;
+
+    &-border {
+      border: 5px solid #E4E24F;
+    }
+  }
+
+  .ad {
+    background: #D3A83B;
+
+    &-border {
+      border: 5px solid #D3A83B;
+    }
+  }
+
+  .hff {
+    background: #FFC1C1;
+
+    &-border {
+      border: 5px solid #FFC1C1;
+    }
+  }
+
+  .hg {
+    background: #FF3D3D;
+
+    &-border {
+      border: 5px solid #FF3D3D;
+    }
+  }
+
+  .pb {
+    background: #E93AFF;
+
+    &-border {
+      border: 5px solid #E93AFF;
+    }
+  }
+
+  .oil {
+    background: #6800C4;
+
+    &-border {
+      border: 5px solid #6800C4;
+    }
+  }
+}
+
+.flex-1-1-0 {
+  flex: 1 1 0;
+}
+
+.flex-0 {
+  flex: 0;
+}
+
+.img-con {
+  position: relative;
+  padding: 8px;
+  margin-top: 30px;
+  @mixin angleMark {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: url("~@/assets/img/angleMark.png") no-repeat;
+  }
+
+  .left-top-m {
+    @include angleMark;
+    top: 0;
+    left: 0;
+    transform: rotate(90deg);
+  }
+
+  .left-bottom-m {
+    @include angleMark;
+    bottom: 4px;
+    left: 0;
+  }
+
+  .right-top-m {
+    @include angleMark;
+    right: 0;
+    top: 0;
+    transform: rotate(-180deg);
+  }
+
+  .right-bottom-m {
+    @include angleMark;
+    right: 0;
+    bottom: 4px;
+    transform: rotate(270deg);
+  }
+}
+
+.typePart {
+  width: 30%;
+  margin-top: 32px;
+
+  .el-radio-button__orig-radio + .el-radio-button__inner {
+    width: 124px;
+    height: 22px;
+    border-radius: 8px 8px 8px 8px;
+    opacity: 1;
+    font-size: 12px;
+    color: #ffffff;
+    border: 0;
+    line-height: 3px;
+    background: transparent;
+    text-align: left;
+    padding-left: 20px;
+  }
+
+  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    background: rgba(208, 208, 208, 0.4);
+    opacity: 1;
+    border: 1px solid #B8ECFF;
+    font-size: 12px;
+    color: #ffffff;
+    line-height: 4px;
+
+  }
+
+  .check-box-color {
+    width: 12px;
+    height: 8px;
+    border-radius: 4px;
+    display: inline-block;
+    margin-right: 10px;
+  }
+
+  .check-box-text {
+    display: inline-block;
+  }
+
+
+}
+
+.bar-chart-gas {
+  height: 412px;
+}
+
+.gas-left-bar-con {
+  height: 700px;
+}
+
+.margin-top-30 {
+  margin-top: 30px;
+}
+
+.margin-bottom-30 {
+  margin-bottom: 30px;
+}
+
+.height-auto {
+  height: auto;
+}
+
+.padding-top-20 {
+  padding-top: 20px !important;
+}
+
+.risk-box {
+  display: flex;
+  margin-top: 20px;
+  margin-bottom: 14px;
+
+  .risk-item {
+    display: flex;
+    align-items: center;
+
+    p:nth-child(2) {
+      font-size: 12px;
+    }
+  }
+}
+
+.zdwxy {
+  width: 32px;
+  height: 32px;
+  background: url("~@/assets/img/safety/zdwxy.png") no-repeat;
+  margin-right: 18px;
+}
+
+.fxx {
+  width: 32px;
+  height: 32px;
+  background: url("~@/assets/img/safety/fxx.png") no-repeat;
+  margin-right: 18px;
+}
+
+.company-icon {
+  width: 32px;
+  height: 32px;
+  background: url("~@/assets/img/safety/company.png") no-repeat;
+  margin-right: 14px;
+}
+
+.sg-icon {
+  width: 32px;
+  height: 32px;
+  background: url("~@/assets/img/safety/shigong.png") no-repeat;
+  margin-right: 14px;
+}
+
+.font-size-16 {
+  font-size: 16px;
+}
+
+.font-size-14 {
+  font-size: 14px;
+}
+
+.risk-pie-chart {
+  width: 48%;
+  height: 146px;
+  flex: 1;
+}
+
+.spe-bar-chart-top {
+  height: 276px;
+  flex: 1;
+}
+
+.spe-bar-chart-bottom {
+  height: 300px;
+  flex: 1;
+}
+
+.risk-line-chart {
+  height: 168px;
+  flex: 1;
+}
+
+.risk-title {
+  display: flex;
+  background: rgba(128, 128, 128, 0.8);
+  margin-top: 20px;
+
+  &-item {
+    width: 50%;
+    flex: 1;
+    padding-left: 30px;
+    height: 34px;
+    font-size: 14px;
+    color: #E8E8E8;
+    line-height: 34px;
+  }
+}
+
+.risk-list {
+  height: 100%;
+  overflow-y: auto;
+  @include scrollStyle(2px);
+
+  &-box {
+    display: flex;
+    background: none;
+    opacity: 0;
+
+    &-item {
+      width: 50%;
+      padding-left: 30px;
+      flex: 1;
+      height: 34px;
+      font-size: 12px;
+      color: #E8E8E8;
+      line-height: 34px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      word-break: break-all;
+      white-space: nowrap;
+      cursor: pointer;
+    }
+
+    &:nth-child(2n) {
+      background: rgba(128, 128, 128, 0.3);
+    }
+  }
+}
+
+.risk-pie-chart-all {
+  width: 100%;
+  height: 1px;
+  flex: 1;
+}
+
+.risk-line-chart-all {
+  height: 190px;
+  width: 100%;
+  flex: 1;
+}
+
+.flex-15 {
+  flex: 1.5;
+}
+
+.cycle-icon {
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #FFFFFF;
+  margin-right: 14px;
+  margin-left: 8px;
+}
+
+.level-1 {
+  background: #7FB0FF;
+}
+
+.level-1-text {
+  color: #7FB0FF;
+}
+
+.level-2 {
+  background: #FADFA4;
+}
+
+.level-2-text {
+  color: #FADFA4;
+}
+
+.level-3 {
+  background: #C9FFD7;
+}
+
+.level-3-text {
+  color: #C9FFD7;
+}
+
+.level-4 {
+  background: #FFFFFF;
+}
+
+.level-4-text {
+  color: #FFFFFF;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+.risk-info {
+  font-size: 14px;
+
+  .content-style {
+    margin-bottom: 20px;
+    display: flex;
+
+    span {
+      &:first-child {
+        width: 40%;
+      }
+
+      &:last-child {
+        width: 60%;
+      }
+
+    }
+
+
+    .hazard-style {
+      cursor: pointer;
+      color: #7FB0FF;
+    }
+
+    .bg-gray {
+      width: 100%;
+      height: 186px;
+      padding: 30px 20px;
+      background: rgba(255, 255, 255, 0.2);
+
+      div:first-child {
+        margin-bottom: 23px;
+      }
+
+      .inside-con {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        ul {
+          flex: 1;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            font-size: 14px;
+            margin-bottom: 20px;
+
+            span:first-child {
+              width: 40%;
+            }
+
+            span:last-child {
+              width: 70%;
+            }
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+          }
+        }
+
+      }
+    }
+  }
+
+  &.hidden {
+    .content-style {
+      span {
+        &:first-child {
+          width: 30%;
+        }
+
+        &:last-child {
+          width: 70%;
+        }
+
+      }
+
+      &.col-3 {
+        .cycle-icon {
+          width: 10px;
+          height: 10px;
+        }
+
+        .red {
+          color: #DD7171;
+        }
+
+        .red-bg {
+          background: #DD7171;
+        }
+
+        span {
+          display: flex;
+          align-items: center;
+
+          &:first-child {
+            width: 30%;
+          }
+
+          &:last-child {
+            width: 30%;
+          }
+
+          &:nth-child(2) {
+            width: 40%;
+          }
+        }
+      }
+
+      .link-style {
+        color: #7FB0FF;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.specification-card {
+  padding: 0 16px;
+  margin-top: 16px;
+  height: 710px;
+  @include scrollStyle(2px);
+  overflow-y: auto;
+
+  .mgb10 {
+    margin-bottom: 10px;
+    color: #FFF;
+    display: flex;
+    flex-wrap: wrap;
+
+    span {
+      align-self: flex-start;
+      width: 70px;
+      flex: none
+    }
+
+    .el-button--small {
+      padding: 0;
+      color: #58BFFF;
+    }
+  }
+
+  .inner-title {
+    position: relative;
+    font-size: 14px;
+    color: #FFF9E9;
+    padding-left: 4px;
+    margin: 20px 0 10px;
+    /*    &::before{
+          content: "";
+          display: block;
+          width: 6px;
+          height: 8px;
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          background: #FFC001;
+          border-radius: 3px;
+        }*/
+  }
+
+  .label-group {
+    width: 100%;
+    border: 1px solid #E8E8E8;
+    color: #FFF9E9;
+    font-size: 12px;
+    display: flex;
+
+    &.half {
+      width: 50%;
+    }
+
+    &.third {
+      width: 33.3%;
+    }
+
+    .label {
+      min-width: 130px;
+      padding: 0 20px;
+      border-right: 1px solid #E8E8E8;
+      background: rgba(128, 128, 128, 0.6);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .content-block {
+      width: 1px;
+      flex: 1;
+      //line-height: 100%;
+      padding: 10px 20px;
+    }
+  }
+}
+
+.safe {
+  @mixin font-style {
+    font-size: 12px;
+    font-weight: 400;
+    cursor: default;
+  }
+
+  .el-step__head.is-finish {
+    border-color: #7FB0FF;
+  }
+
+  .el-step__title.is-finish {
+    color: #7FB0FF;
+    @include font-style;
+  }
+
+  .is-finish {
+    .el-step__icon.is-text {
+      background: #7FB0FF;
+    }
+
+    .el-step__icon-inner {
+      font-weight: bold;
+      color: rgb(34 34 34);
+      line-height: 14px;
+      background-clip: text;
+      text-fill-color: rgba(153, 153, 153, 0.55);
+    }
+  }
+
+  .el-step__head.is-process {
+    border-color: #E8E8E8;
+  }
+
+  .el-step__title.is-process {
+    color: #E8E8E8;
+    @include font-style;
+  }
+
+  .is-process {
+    .el-step__icon.is-text {
+      background: #E8E8E8;
+    }
+
+    .el-step__icon-inner {
+      font-weight: bold;
+      color: rgb(34 34 34);
+      line-height: 14px;
+      background-clip: text;
+      text-fill-color: rgba(153, 153, 153, 0.55);
+    }
+  }
+
+  .el-step__head.is-wait {
+    border-color: #999999;
+  }
+
+  .el-step__title.is-wait {
+    color: #999999;
+    @include font-style;
+  }
+
+  .is-wait {
+    .el-step__icon.is-text {
+      background: transparent;
+    }
+
+    .el-step__icon-inner {
+      font-weight: bold;
+      color: rgba(153, 153, 153, 1);
+      line-height: 14px;
+      background-clip: text;
+      text-fill-color: rgba(153, 153, 153, 0.55);
+    }
+  }
+
+  .el-step.is-center .el-step__line {
+    left: 68%;
+    right: -33%;
+    top: 14px;
+  }
+
+  .el-step__icon {
+    width: 30px;
+    height: 30px;
+  }
+}
+
+.el-collapse {
+  border: none;
+
+  .el-collapse-item__header, .el-collapse-item__wrap {
+    background: transparent;
+    color: #A5A6A8;
+    font-size: 16px;
+
+    .el-collapse-item__content {
+      color: #A5A6A8;
+    }
+  }
+
+  .el-collapse-item__header {
+    border-bottom: 1px solid #A5A6A8;
+  }
+
+  .el-collapse-item__wrap {
+    border: none;
+  }
+
+  .el-collapse-item__arrow {
+    margin: 0 8px;
+  }
+
+  .el-icon-arrow-right:before {
+    content: "\e790";
+  }
+
+  .el-collapse-item__arrow.is-active {
+    transform: rotate(180deg);
+  }
+
+  .avatar-style {
+    //width: 88px;
+    height: 132px;
+    margin-right: 16px;
+  }
+
+  .item-content {
+    padding-top: 20px;
+    color: #FFFFFF;
+    align-items: center;
+
+    .collapse-top {
+      display: flex;
+      align-items: center;
+
+      span {
+        font-size: 14px;
+
+        &:first-child {
+          font-size: 20px;
+        }
+      }
+    }
+
+    .collapse-bottom {
+      margin-top: 40px;
+      display: flex;
+      flex-wrap: wrap;
+
+      span {
+        width: 50%;
+        margin-bottom: 20px;
+
+        &:nth-child(n+3) {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  .info-content {
+    display: flex;
+    flex-wrap: wrap;
+    color: #FFFFFF;
+    margin-top: 20px;
+
+    span {
+      width: 33%;
+      margin-bottom: 20px;
+
+      &:nth-child(n+4) {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .order-content {
+    margin-top: 20px;
+
+    h3 {
+      color: #FFFFFF;
+      font-size: 16px;
+      font-weight: 400;
+      margin-bottom: 20px;
+    }
+
+    img.code {
+      width: 88px;
+      height: 88px;
+      border: 3px solid #ffffff;
+      border-radius: 5px;
+      margin-right: 20px;
+    }
+
+    &-item {
+      border-bottom: 1px solid #D8D8D8;
+      margin-bottom: 20px;
+
+      span {
+        width: 50%;
+        margin-bottom: 20px;
+      }
+    }
+
+    .margin-bottom-10 {
+      margin-bottom: 10px;
+    }
+  }
+
+  .card-info {
+    position: relative;
+
+    &-book {
+      position: absolute;
+      top: 15px;
+      right: 0;
+      color: #7DAEFF;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      img {
+        position: relative;
+        top: 2px;
+      }
+    }
+
+    .el-collapse-item__header {
+      font-size: 14px;
+    }
+
+    .el-collapse .el-collapse-item__header {
+      border: none;
+    }
+  }
+
+  .goods-info {
+    border: 1px solid rgba(212, 229, 255, 0.3);
+    margin-top: 6px;
+    padding: 20px;
+
+    span {
+      width: 50%;
+      margin-bottom: 20px;
+
+      &:nth-child(2n), &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+  }
+
+}
+
+.margin-left-40 {
+  margin-left: 40px;
+}
+
+.tabs-energy {
+  display: flex;
+  margin: 0 auto;
+  text-align: center;
+  font-size: 14px;
+
+  &-item {
+    cursor: pointer;
+
+    &-text {
+      padding: 5px 10px;
+    }
+
+    .under-line {
+      width: 40%;
+      height: 1px;
+      border: 1px solid transparent;
+      margin: 0 auto;
+    }
+
+    .active {
+      border: 1px solid #FFFFFF;
+    }
+  }
+
+}
+
+.subTitle {
+  width: 330px;
+  height: 50px;
+  background: url("~@/assets/img/subTitle.png") no-repeat bottom;
+  text-align: center;
+  line-height: 50px;
+  font-size: 18px;
+
+}
+
+.two-item-line {
+  width: 50%;
+  text-align: center;
+  color: #FFFFFF;
+  padding: 23px 26px 10px 26px;
+
+  .num-style {
+    padding-bottom: 8px;
+    border-bottom: 1px solid #D8D8D8;
+    font-size: 20px;
+  }
+
+  .text-style {
+    margin-top: 8px;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.8);
+  }
+}
+
+.sub-title-legend {
+  width: 100%;
+  text-align: center;
+  padding: 10px 0;
+  padding-bottom: 0;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.8);
+  margin-top: 10px;
+}
+
+.energyRightTitle {
+  width: 332px;
+  height: 42px;
+  background: url("~@/assets/img/energy/energyTitle.png") no-repeat 50% 50%;
+  line-height: 42px;
+  font-size: 14px;
+  padding: 0 12px;
+
+}
+
+.center-box {
+  position: absolute;
+  left: -300%;
+  display: flex;
+  top: 0;
+
+  &-card-bg {
+    width: 264px;
+    height: 148px;
+    background: url("~@/assets/img/energy/energyCardBg.png") no-repeat 50% 50%;
+    padding: 8px 16px;
+  }
+
+  &-card-title {
+    font-size: 14px;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.73);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > img {
+      margin-right: 4px;
+    }
+  }
+
+  &-card-bottom {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.73);
+    margin-top: 12px;
+
+    > div {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+}
+
+.center-box-park {
+  position: absolute;
+  left: -290%;
+  display: flex;
+
+  &-card-title {
+    font-size: 20px;
+    text-align: center;
+  }
+
+  &-card-bg-park {
+    width: 241px;
+    height: 120px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 4px 4px 4px 4px;
+    padding: 20px 30px;
+    margin-right: 20px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &-card-bottom {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.73);
+    margin-top: 12px;
+
+    > div {
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 32px;
+        height: 32px;
+        margin-right: 13px;
+      }
+
+      .num-style {
+        font-family: DINPro;
+        font-size: 20px;
+        color: #FFFFFF;
+        text-shadow: 1px 1px 2px #C2EDFF;
+      }
+    }
+  }
+}
+
+.four-items {
+  left: -332%;
+}
+
+.company-list {
+  height: 200px;
+  overflow-y: auto;
+  @include scrollStyle(2px);
+
+}
+
+.company-list-box {
+  border-left: 4px solid #ffffff;
+  background: rgba(255, 255, 255, 0.15);
+  width: 330px;
+  height: 72px;
+  padding: 12px 32px;
+  margin-top: 5px;
+  font-size: 14px;
+
+  .top {
+    margin-bottom: 5px;
+  }
+}
+
+.steam-right-chart {
+  height: 300px;
+}
+
+.group-title {
+  margin-bottom: 12px;
+  font-size: 16px;
+}
+
+.group-title-plan {
+  margin-bottom: 2px;
+  font-size: 16px;
+  margin-top: 20px;
+}
+
+
+.personList {
+  font-size: 14px;
+
+  & > div {
+    display: flex;
+
+    .has-border {
+      border: 1px solid #cccccc;
+      margin-right: -1px;
+      margin-bottom: -1px;
+    }
+  }
+
+  .head-style {
+    background: rgba(255, 255, 255, 0.15);
+    width: 106px;
+    padding: 5px 20px;
+  }
+
+  &-content {
+    padding: 5px 20px;
+    width: 79%;
+  }
+}
+
+.env-right .right-top-item .value.white-color {
+  color: #FFFFFF;
+  font-size: 20px;
+}
+
+.env-right .right-top-item .level .point.red.large {
+  background: #FF5959;
+  width: 8px;
+  height: 8px;
+  top: -14px;
+}
+
+.line-chart-emergency {
+  height: 100%;
+}
+
+.last-time {
+  font-size: 14px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.blue-button {
+  width: 328px;
+  height: 34px;
+  background: #7FB0FF;
+  border-radius: 18px;
+  color: #000000;
+  text-align: center;
+  line-height: 34px;
+  cursor: pointer;
+}
+
+.emergency-part {
+  .charts-box {
+    width: 100%;
+    height: 1px;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    .text {
+      font-size: 16px;
+      font-weight: 500;
+      color: rgba($color: $font-color, $alpha: 0.9);
+      line-height: 22px;
+      text-align: center;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+
+      .count {
+        font-size: 32px;
+        color: $font-color;
+        line-height: 45px;
+      }
+    }
+  }
+
+  .pop-box {
+    width: 450px;
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    border: 1px solid #FFFFFF;
+    background: rgba($color: #000000, $alpha: 0.6);
+    color: #E8E8E8;
+    padding: 30px;
+    font-size: 14px;
+    position: absolute;
+
+    top: 40%;
+    transform: translate(-50%, -50%);
+
+    .border {
+      width: 8px;
+      height: 8px;
+      position: absolute;
+      border-left: 1px solid #FFF;
+      border-top: 1px solid #FFF;
+
+      &.l-t {
+        top: 10px;
+        left: 10px;
+      }
+
+      &.r-t {
+        top: 10px;
+        right: 10px;
+        transform: rotate(90deg);
+      }
+
+      &.r-b {
+        bottom: 10px;
+        right: 10px;
+        transform: rotate(180deg);
+      }
+
+      &.l-b {
+        bottom: 10px;
+        left: 10px;
+        transform: rotate(270deg);
+      }
+    }
+
+    .title {
+      font-size: 16px;
+      border-bottom: 1px solid #B1B1B1;
+      padding-bottom: 8px;
+    }
+
+    .close {
+      position: absolute;
+      cursor: pointer;
+      right: 20px;
+      top: 20px;
+      color: #FFF;
+      font-size: 26px;
+    }
+
+    .item-radius-style {
+      .el-input__inner {
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 20px;
+        border: 1px solid rgba(255, 255, 255, 0.6);
+        color: #d7d7d7;
+      }
+
+      .el-textarea__inner {
+        color: #d7d7d7;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 5px;
+        border: 1px solid rgba(255, 255, 255, 0.6);
+      }
+
+    }
+
+    .item-radius-style.el-select {
+      width: 100%;
+    }
+
+    .el-form-item__label {
+      color: #FFFFFF;
+    }
+
+    .btn-group {
+      justify-content: space-evenly;
+
+      .btn-style {
+        width: 96px;
+        height: 34px;
+        background: rgba(255, 255, 255, 0.15);
+        border-radius: 17px;
+        border: 1px solid #FFFFFF;
+        text-align: center;
+        line-height: 34px;
+        cursor: pointer;
+      }
+
+      .cancel {
+        background: rgba(255, 255, 255, 0);
+      }
+    }
+
+    @mixin commonTableStyle {
+      span {
+        padding: 10px;
+
+        &:first-child, &:nth-child(3), &:nth-child(4), &:nth-child(5) {
+          width: 160px;
+        }
+
+        &:nth-child(2) {
+          width: 320px;
+        }
+
+        &:last-child {
+          width: 240px;
+        }
+      }
+    }
+
+    .head {
+      margin-top: 20px;
+      display: flex;
+      @include commonTableStyle;
+      background: rgba(216, 216, 216, 0.3);
+
+      span {
+        border: 1px solid #7B7974;
+        margin-left: -1px;
+      }
+    }
+
+    .tbody {
+      max-height: 400px;
+      overflow-y: auto;
+      @include scrollStyle(2px);
+
+      .tr {
+        cursor: pointer;
+        display: flex;
+        @include commonTableStyle;
+
+        &:nth-child(2n) {
+          background: rgba(216, 216, 216, 0.1);
+        }
+      }
+    }
+
+    .el-pagination {
+      text-align: right;
+      margin-top: 10px;
+    }
+
+    .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
+      background-color: transparent;
+      border: 1px solid #ffffff;
+      color: #FFFFFF;
+
+      &:hover {
+        color: #FFFFFF;
+      }
+    }
+
+    .el-pagination.is-background .el-pager li:not(.disabled).active {
+      background-color: rgba(216, 216, 216, 0.3);
+    }
+  }
+
+  .left-position {
+    left: 270%;
+  }
+
+  .right-position {
+    width: 306px;
+    left: -170%;
+  }
+
+  .right-log-position {
+    width: 1200px;
+    left: -170%;
+  }
+}
+
+.plan-card {
+  width: 330px;
+  height: 290px;
+  position: relative;
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%);
+  border-radius: 6px;
+  padding: 28px 20px;
+
+  .border {
+    width: 8px;
+    height: 8px;
+    position: absolute;
+    border-left: 1px solid #FFF;
+    border-top: 1px solid #FFF;
+
+    &.l-t {
+      top: 10px;
+      left: 10px;
+    }
+
+    &.r-t {
+      top: 10px;
+      right: 10px;
+      transform: rotate(90deg);
+    }
+
+    &.r-b {
+      bottom: 10px;
+      right: 10px;
+      transform: rotate(180deg);
+    }
+
+    &.l-b {
+      bottom: 10px;
+      left: 10px;
+      transform: rotate(270deg);
+    }
+  }
+
+  ul.plan li {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .position-icon {
+    width: 16px;
+    height: 16px;
+    background: url("~@/assets/icons/png/point.png");
+    margin-left: 8px;
+  }
+
+  .plan-btn {
+    width: 64px;
+    height: 24px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 16px;
+    border: 1px solid #FFFFFF;
+    cursor: pointer;
+    text-align: center;
+    font-size: 14px;
+    margin-right: 8px;
+  }
+
+  .phone-btn {
+    width: 90px;
+    height: 24px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 16px;
+    border: 1px solid #FFFFFF;
+    cursor: pointer;
+    text-align: center;
+    font-size: 14px;
+    margin-left: 8px;
+  }
+
+  .el-timeline-item {
+    .el-timeline-item__content {
+      color: #FFFFFF;
+    }
+
+    &:nth-child(n+2) {
+      .el-timeline-item__content {
+        color: #7B7974;
+      }
+    }
+  }
+
+}
+
+
+.plan-head {
+  margin-top: 16px;
+  display: flex;
+  font-size: 14px;
+
+  span.span-item {
+    padding: 10px;
+
+    &:first-child {
+      width: 100px;
+      padding-left: 20px;
+    }
+
+    &:nth-child(2) {
+      width: 130px;
+    }
+  }
+
+  span.span-item-2 {
+    padding: 10px;
+
+    &:first-child {
+      width: 130px;
+      padding-left: 20px;
+    }
+
+    &:nth-child(2) {
+      width: auto;
+    }
+  }
+
+  span.span-item-3 {
+    padding: 10px;
+    width: 80px;
+
+    &:first-child {
+      width: 150px;
+      padding-left: 20px;
+    }
+
+  }
+  span.span-item-half {
+    padding: 10px;
+    width: 50%;
+  }
+
+  background: rgba(216, 216, 216, 0.3);
+}
+
+.plan-head-tbody {
+  max-height: 400px;
+  overflow-y: auto;
+  font-size: 14px;
+  @include scrollStyle(2px);
+
+  .tr {
+    display: flex;
+    cursor: pointer;
+
+    span.span-item {
+      padding: 10px;
+
+      &:first-child {
+        width: 100px;
+        padding-left: 20px;
+      }
+
+      &:nth-child(2) {
+        width: 150px;
+      }
+    }
+
+    span.span-item-2 {
+      padding: 10px;
+
+      &:first-child {
+        width: 130px;
+        padding-left: 20px;
+      }
+
+      &:nth-child(2) {
+        width: auto;
+      }
+    }
+
+    span.span-item-3 {
+      padding: 10px;
+      width: 80px;
+
+      &:first-child {
+        width: 150px;
+        padding-left: 20px;
+      }
+
+
+    }
+    span.span-item-half {
+      padding: 10px;
+      width: 50%;
+    }
+    &:nth-child(2n) {
+      background: rgba(216, 216, 216, 0.1);
+    }
+  }
+}
+
+.green-check {
+  .el-checkbox__label {
+    color: #ffffff;
+    font-size: 14px;
+  }
+
+  .el-checkbox__inner {
+    border-radius: 50%;
+    width: 14px;
+    height: 14px;
+  }
+
+  .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: #80ED30;
+    border-color: #80ED30;
+  }
+
+  .el-checkbox__input.is-checked + .el-checkbox__label {
+    color: #80ED30;
+  }
+
+  .el-checkbox__inner::after {
+    border-color: #000000;
+  }
+
+  .el-checkbox__input.is-checked .el-checkbox__inner::after {
+    //border: 1px solid #000;
+  }
+}
+
+.plan-center {
+  position: absolute;
+  left: 150%;
+
+  .progress-center {
+    width: 840px;
+    height: 60px;
+    background: rgba(0, 0, 0, 0.7);
+    box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.5);
+    border-radius: 41px;
+    border: 2px solid #FFAA59;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+
+    .middle {
+      width: 420px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .center-btn {
+      width: 92px;
+      height: 32px;
+      background: rgba(255, 169, 0, 0.15);
+      border-radius: 16px;
+      border: 1px solid #FFA900;
+      font-size: 14px;
+      text-align: center;
+      line-height: 32px;
+      color: #FFA900;
+      cursor: pointer;
+      justify-content: center;
+
+      i.el-icon-switch-button {
+        margin-right: 5px;
+      }
+    }
+
+    .orange {
+      background-color: #FFA900;
+      display: inline-block;
+      margin-right: 8px;
+    }
+
+    .center-btn.white-color {
+      background-color: #FFA900;
+    }
+
+    .cycle-box {
+      border: 2px solid rgba(255, 255, 255, 0.4);
+      border-radius: 50%;
+      width: 18px;
+      height: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .line {
+      width: 80px;
+      height: 1px;
+      border: 1px solid rgba(255, 255, 255, 0.4);
+    }
+
+    .active {
+      border-color: #FFA900;
+      color: #FFA900;
+
+      &.bg-orange {
+        background: #FFA900;
+
+        i.el-icon-check {
+          color: rgba(0, 0, 0, 0.7);
+          font-weight: bold;
+        }
+      }
+    }
+
+    .white-color {
+      i.el-icon-switch-button, span {
+        color: #FFFFFF;
+      }
+    }
+
+    .progress-title {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.4);
+
+      span {
+        margin-top: 5px;
+
+        &:nth-child(2) {
+          margin-left: 130px;
+          margin-right: 130px;
+        }
+      }
+    }
+  }
+}
+
+svg.loading-icon {
+  width: 10px;
+  height: 10px;
+}
+
+.person-icon {
+  width: 32px;
+  height: 32px;
+  background: url("~@/assets/img/env/count.png") no-repeat;
+  margin-right: 14px;
+}
+
+.radio-box {
+  display: flex;
+  justify-content: center;
+
+  span {
+    cursor: pointer;
+    width: 96px;
+    height: 24px;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0);
+    font-size: 12px;
+    text-align: center;
+    line-height: 22px;
+  }
+
+  span.active {
+    border-color: #FFFFFF;
+  }
+}
+
+.group-title-plan-search {
+  margin-bottom: 2px;
+  font-size: 16px;
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  & > span {
+    width: 150px;
+  }
+
+  .item-radius-style {
+    .el-input__inner {
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 20px;
+      border: 1px solid rgba(255, 255, 255, 0.6);
+      color: #d7d7d7;
+    }
+
+    .el-textarea__inner {
+      color: #d7d7d7;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 5px;
+      border: 1px solid rgba(255, 255, 255, 0.6);
+    }
+
+    .el-icon-search {
+      cursor: pointer;
+    }
+
+  }
+
+}
+
+.short-report {
+  height: 22px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #FFFFFF;
+  line-height: 22px;
+  text-align: center;
+  text-shadow: 0 0 2px #9EC3FF;
+  margin-bottom: 5px;
+}
+
+.short-report-line {
+  width: 186px;
+  height: 3px;
+  margin: 2px auto;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
+
+}
+
+.short-card {
+  position: relative;
+
+  .border {
+    width: 8px;
+    height: 8px;
+    position: absolute;
+    border-left: 1px solid #FFF;
+    border-top: 1px solid #FFF;
+
+    &.l-t {
+      top: -4px;
+      left: -4px;
+    }
+
+    &.r-t {
+      top: -4px;
+      right: -4px;
+      transform: rotate(90deg);
+    }
+
+    &.r-b {
+      bottom: -4px;
+      right: -4px;
+      transform: rotate(180deg);
+    }
+
+    &.l-b {
+      bottom: -4px;
+      left: -4px;
+      transform: rotate(270deg);
+    }
+  }
+
+  &-bg {
+    height: 36px;
+    background: rgba(255, 255, 255, 0.1);
+    padding: 0 15px;
+
+    .orange {
+      background: #FFA900;
+      margin-left: 0;
+    }
+
+    .text {
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 14px;
+    }
+
+    .count {
+      font-size: 14px;
+    }
+  }
+}
+
+.margin-top-0 {
+  margin-top: 0;
+}
+
+.margin-bottom-20 {
+  margin-bottom: 20px;
+}
+
+.task-list {
+  height: 400px;
+  overflow-y: auto;
+  @include scrollStyle(2px);
+
+  .task-item {
+    width: 330px;
+    height: 92px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 6px;
+    margin-bottom: 10px;
+    font-size: 14px;
+    padding: 8px 16px;
+    cursor: pointer;
+
+    &-top {
+      align-items: start;
+    }
+  }
+}
+
+.text-left {
+  text-align: right;
+}
+
+.margin-top-16 {
+  margin-top: 16px;
+}
+
+.link {
+  position: relative;
+  display: block;
+  padding: 1px;
+  font-size: 12px;
+  font-weight: bold;
+  text-decoration: none;
+  color: #7DAEFF;
+}
+
+.link:after,
+.link:before {
+  content: "";
+  display: block;
+  position: absolute;
+  -webkit-transition: all 0.5s ease-in-out;
+  transition: all 0.5s ease-in-out;
+  left: 20px;
+}
+
+.link:before {
+  top: -7px;
+  width: 0;
+  height: 0;
+  left: 56px;
+  border-width: 8px;
+  border-style: solid;
+  border-color: transparent transparent transparent #7DAEFF;
+}
+
+.link:after {
+  top: 50%;
+  right: 1em;
+  width: 40px;
+  height: 0.2em;
+  -webkit-transform: translate(0, -0.1em);
+  transform: translate(0, -0.1em);
+  background-color: #7DAEFF;
+}
+
+.goods-part {
+  .search-style {
+    .el-input__inner {
+      border-radius: 20px;
+      background: transparent;
+      color: #FFFFFF;
+
+      &:focus {
+        border-color: #FFFFFF;
+      }
+    }
+  }
+
+  .goods-item {
+    width: 48px;
+    height: 48px;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 4px;
+    border: 1px solid #666666;
+    margin-right: 4px;
+    margin-bottom: 4px;
+
+    &-inside {
+      width: 42px;
+      height: 42px;
+      background-color: rgba(255, 255, 255, 0.15);
+
+      .bg {
+        position: absolute;
+        bottom: 2px;
+        width: 88%;
+        height: 4px;
+        padding: 1px;
+        margin: 0 5px;
+        border-radius: 4px;
+        background-color: #131313;
+        display: flex;
+        align-items: center;
+      }
+
+      .bg-line {
+        background-color: #131313;
+      }
+
+      .inner {
+        height: 100%;
+        border-radius: 4px;
+        transition: all 0.5s cubic-bezier(0, 0.64, 0.36, 1);
+      }
+
+      .line {
+        width: 80%;
+        background-color: rgba(255, 255, 255, 0.4);
+      }
+
+
+    }
+  }
+
+  .red {
+    background-color: rgba(255, 89, 89, 0.3) !important;
+    border-color: rgba(255, 89, 89, 0.3);
+  }
+
+  .red-line {
+    background-color: rgba(255, 89, 89, 0.7) !important;
+  }
+
+  .red-border {
+    border-color: rgba(255, 89, 89, 0.3);
+  }
+
+  .orange {
+    background-color: rgba(255, 158, 55, 0.3);
+    border-color: rgba(255, 158, 55, 0.3);
+  }
+
+  .orange-line {
+    background-color: rgba(255, 158, 55, 0.7) !important;
+  }
+
+  .orange-border {
+    border-color: rgba(255, 158, 55, 0.3);
+  }
+
+  .yellow {
+    background-color: rgba(255, 237, 98, 0.3);
+    border-color: rgba(255, 237, 98, 0.3);
+  }
+
+  .yellow-line {
+    background-color: rgba(255, 237, 98, 0.7) !important;
+  }
+
+  .yellow-border {
+    border-color: rgba(255, 237, 98, 0.3);
+  }
+
+  .blue {
+    background-color: rgba(125, 174, 255, 0.3);
+    border-color: rgba(125, 174, 255, 0.3);
+  }
+
+  .blue-line {
+    background-color: rgba(125, 174, 255, 0.7) !important;
+  }
+
+  .blue-border {
+    border-color: rgba(125, 174, 255, 0.3);
+  }
+
+}
+
+.line-gray {
+  width: 40px;
+  height: 1px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  position: relative;
+  right: -62px;
+}
+
+.line-blue {
+  width: 80px;
+  height: 1px;
+  border: 1px solid #7DAEFF;
+  position: relative;
+  margin-left: 10px;
+}
+
+.round-style {
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  border-radius: 50%;
+  margin-left: 72px;
+  margin-right: 6px;
+}
+
+.is-judgment {
+  margin-left: 0;
+}
+
+.is-justify-space-center {
+  justify-content: center;
+}
+
+.red-bag {
+  width: 40px;
+  height: 18px;
+  background: #FF5959;
+  border-radius: 9px;
+  color: #FFFFFF;
+  text-align: center;
+  line-height: 18px;
+  font-size: 12px;
+}
+
+.tooltip {
+  .left-icon {
+    margin-right: 16px;
+  }
+
+  .content {
+    width: 128px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    p {
+      font-size: 12px;
+    }
+
+    .title {
+      font-size: 14px;
+    }
+  }
+}
+.el-tooltip__popper.is-dark{
+  background: rgba(0, 0, 0, 0.8);
+  box-shadow: 0px 10px 10px -4px rgba(0,0,0,0.8);
+  border-radius: 4px;
+  border: 1px solid #666666;
+}
+.tooltip-line {
+  &.bg {
+    width: 100%;
+    height: 8px;
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.15);
+    display: flex;
+    align-items: center;
+    margin-top: 8px;
+  }
+
+  &.bg-line {
+    background-color: rgba(255, 255, 255, 0.15);
+
+    .inner {
+      height: 100%;
+      border-radius: 4px;
+      transition: all 0.5s cubic-bezier(0, 0.64, 0.36, 1);
+    }
+
+    .line {
+      width: 80%;
+      background-color: rgba(255, 255, 255, 0.4);
+    }
+
+    .red-line {
+      background-color: rgba(255, 89, 89, 0.7) !important;
+    }
+
+    .orange-line {
+      background-color: rgba(255, 158, 55, 0.7) !important;
+    }
+
+    .yellow-line {
+      background-color: rgba(255, 237, 98, 0.7) !important;
+    }
+
+    .blue-line {
+      background-color: rgba(125, 174, 255, 0.7) !important;
+    }
+  }
+
+
+}
+.text-right{
+  text-align: right;
+}
+.padding-right{
+  &-30{
+    padding-right: 30px !important;
+  }
+}
+.is-justify-content-end{
+  justify-content: flex-end;
+}
+.goods-part{
+  .cycle-icon{
+    background: rgba(255,255,255,0.7);
+    &.red {
+      background-color: rgba(255, 89, 89, 1);
+    }
+    &.orange {
+      background-color: rgba(255, 158, 55, 1);
+    }
+    &.yellow {
+      background-color: rgba(255, 237, 98, 1);
+    }
+    &.blue {
+      background-color: rgba(125, 174, 255, 1);
+    }
+  }
+}
+.statistics-item{
+  width: 48.5%;
+  height: 40px;
+  background: rgba(255,255,255,0.1);
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+.emergency-part .pop-box.left-list-position{
+    width: 960px;
+    left: 280%;
+  z-index: 9999999;
+  & .head span:first-child,
+  & .head span:nth-child(4),
+  & .head span:nth-child(5){
+    width: 250px;
+  }
+  & .tbody .tr span:first-child,
+  & .tbody .tr span:nth-child(4),
+  & .tbody .tr span:nth-child(5){
+    width: 250px;
+  }
+  & .head span:nth-child(2),& .tbody .tr span:nth-child(2),
+  & .head span:nth-child(3),
+  & .tbody .tr span:nth-child(3){
+    width: 150px;
+  }
+  .cycle-icon{
+    background: rgba(255,255,255,0.7);
+    &.red {
+      background-color: rgba(255, 89, 89, 1);
+    }
+    &.orange {
+      background-color: rgba(255, 158, 55, 1);
+    }
+    &.yellow {
+      background-color: rgba(255, 237, 98, 1);
+    }
+    &.blue {
+      background-color: rgba(125, 174, 255, 1);
+    }
+  }
+  .pop-list-style{
+    align-items: center;
+  }
+  .search-style {
+    width: 300px;
+    .el-input__inner {
+      border-radius: 20px;
+      background: transparent;
+      color: #FFFFFF;
+
+      &:focus {
+        border-color: #FFFFFF;
+      }
+    }
+  }
+  .blue{
+    color: #7DAEFF;
+    cursor: pointer;
+  }
+}
+
+
diff --git a/src/assets/video/camera.mp4 b/src/assets/video/camera.mp4
new file mode 100644
index 0000000..acb08b5
Binary files /dev/null and b/src/assets/video/camera.mp4 differ
diff --git a/src/bootstrap.ts b/src/bootstrap.ts
new file mode 100644
index 0000000..43cfa3c
--- /dev/null
+++ b/src/bootstrap.ts
@@ -0,0 +1,120 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import SvgComponent from "hbt-common/components/svg.component.vue"
+import EchartsComponent from "hbt-common/components/echarts.component.vue"
+import "@/assets/common/icons";
+import 'animate.css';
+import Mock from "mockjs"
+import { MockData } from './mock';
+import 'echarts-wordcloud';
+
+Vue.config.productionTip = false;
+document.title = process.env.VUE_APP_TITLE || '汉邦唐全真数字服务平台';
+
+if(process.env.NODE_ENV==="development"){
+  Mock.mock(/getPeopleList/, "get", MockData.getPeopleList());
+  Mock.mock(/getExpertList/, "get", MockData.getPeopleList());
+  Mock.mock(/getCarList/, "get", MockData.getCarList());
+  Mock.mock(/getStopCarList/, "get", MockData.getStopCarList());
+  Mock.mock(/getBlackCarList/, "get", MockData.getBlackCarList());
+  Mock.mock(/getCameraList/, "get", MockData.getCameraList());
+  Mock.mock(/getCompanyList/, "get", MockData.getCompanyList());
+  Mock.mock(/getBounds/, "get", MockData.getBounds());
+  Mock.mock(/getRealBounds/, "get", MockData.getRealBounds());
+  Mock.mock(/getSafeBounds/, "get", MockData.getSafeBounds());
+  Mock.mock(/getPlanBounds/, "get", MockData.getPlanBounds());
+  Mock.mock(/getSafeLine/, "get", MockData.getSafeLine());
+  Mock.mock(/getRiskList/, "get", MockData.getRiskList());
+  Mock.mock(/getRiskDetail/, "post", (options)=>MockData.getRiskDetail(options));
+  Mock.mock(/getSepList/, "get", MockData.getSepList());
+  Mock.mock(/getHiddenList/, "get", MockData.hiddenList());
+  Mock.mock(/getGasData/, "get", MockData.getRandomData());
+  Mock.mock(/getRoilData/, "get", MockData.getRandomData());
+  Mock.mock(/getBadGasData/, "get", MockData.getRandomData());
+  Mock.mock(/getCleanWaterData/, "get", MockData.getRandomData());
+  Mock.mock(/getWaterEnvData/, "get", MockData.getRandomData());
+  Mock.mock(/getTzWrwData/, "get", MockData.getRandomData());
+  Mock.mock(/getBadWaterData/, "get", MockData.getRandomData());
+  Mock.mock(/getDangrousWorkData/, "get", MockData.getDangrousWork());
+  Mock.mock(/getFourList/, "get", MockData.getFourList());
+  Mock.mock(/getParkFourList/, "get", MockData.getFourList2());
+  Mock.mock(/getCheckPoint/, "get", MockData.getCheckPoint());
+  Mock.mock(/getStoreList/, "get", MockData.getStoreList());
+  Mock.mock(/getBuildingList/, "get", MockData.getBuildingList());
+  Mock.mock(/getDangrous/, "get", MockData.getDangrous());
+  Mock.mock(/getWaringList/, "get", MockData.getWaringList());
+  Mock.mock(/getHiddenDangrous/, "get", MockData.getHiddenDangrous());
+  
+
+}
+
+// 批量引入本地svg
+const svgs = require.context("./assets/icons/svg",false,/\.svg$/);
+const requireAll = (requireContext:any) => {
+    requireContext.keys().map(requireContext);
+}
+requireAll(svgs)
+
+// 全局注册组件
+Vue.component("hbt-svg",SvgComponent)
+Vue.component("hbt-echarts",EchartsComponent)
+Vue.directive("runNumber",{
+  bind:(el,binding)=>{
+    const num = binding.value;
+    // 2s 加载完
+    let step = 0;
+    const add = ()=>{
+      el.innerText ="" + Math.round(Math.random() * num);
+      step++;
+      if(step<10){
+        setTimeout(()=>{
+          add();
+        },50)
+      }else{
+        el.innerText ="" + num;
+        step=0;
+      }
+    }
+    add();
+  },
+  update:(el,binding)=>{
+    const num = binding.value;
+    // 2s 加载完
+    let step = 0;
+    const add = ()=>{
+      el.innerText ="" + Math.round(Math.random() * num);
+      step++;
+      if(step<10){
+        setTimeout(()=>{
+          add();
+        },50)
+      }else{
+        el.innerText ="" + num;
+        step=0;
+      }
+    }
+    add();
+  },
+  unbind:(el,binding)=>{
+    //
+  }
+})
+Vue.directive("list",{
+  bind:(el,binding)=>{
+    const timer = (binding.value+1)*100
+    setTimeout(()=>{
+      el.classList.add("animate__fadeInRight")
+    },timer)
+  },
+})
+
+Vue.use(ElementUI);
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
diff --git a/src/components/closePark/boundsManager/left.component.vue b/src/components/closePark/boundsManager/left.component.vue
new file mode 100644
index 0000000..6a05097
--- /dev/null
+++ b/src/components/closePark/boundsManager/left.component.vue
@@ -0,0 +1,214 @@
+<template>
+    <div class="bounds-left animate__animated animate__fadeInLeft">
+        <TitleComponent>封闭设施</TitleComponent>
+        <div class="tab-box">
+            <div class="tab " :class="{active:index===currentTab}" @click="tabChange(index)" v-for="(item,index) in tabs" :key="index">{{item}}</div>
+        </div>
+
+
+        <div class="list-box">
+            <div class="list">
+                <span>摄像头编号</span><span>摄像头类型</span>
+            </div>
+            <div class="list-scroll-box">
+                <div class="list  animate__animated " @click="onSelect(item)" v-list="index" v-for="(item,index) in cameraList" :key="index">
+
+                <el-tooltip effect="dark" :content="item.id" placement="top-start">
+                     <span>{{item.id}}</span>
+                </el-tooltip>
+                <span>{{item.remark}}</span>
+
+                </div>
+            </div>
+        </div>
+        <TitleComponent>告警信息</TitleComponent>
+        <div class="warning-box">
+            <WarningListComponent @getItem="showWaring" :dataList="warningList"></WarningListComponent>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import {Component,Emit,PropSync,Vue} from 'vue-property-decorator';
+import TitleComponent from '@/components/title.component.vue';
+import WarningListComponent from '@/components/warningList.component.vue';
+import CloseService from '@/service/close.service';
+@Component({
+    components:{
+        TitleComponent,
+        WarningListComponent,
+    },
+    directives:{
+        list:{
+            bind:(el,binding)=>{
+                const timer = (binding.value+1)*500
+                setTimeout(()=>{
+                    el.classList.add("animate__fadeInRight")
+                },timer)
+            },
+        }
+    }
+})
+export default class CloseParkBoundsLeftComponent extends Vue {
+    public closeService = new CloseService()
+    public tabs = ["周界监控","卡口监控"];
+    public currentTab = 0;
+    get warningList(){
+      return this.$store.state.warningList
+    }
+    @Emit("onSelect")
+    onSelect(item){
+      //
+    }
+    mounted(){
+        // this.getCameraList()
+    }
+    public tabChange(index){
+        if(index===this.currentTab){
+            return
+        }
+        this.currentTab = index
+    }
+    get cameraList(){
+        return this.$store.state.cameraList.filter(item=>item.type===this.currentTab)
+    }
+  //展示告警信息
+  showWaring(item){
+
+    const levelMap = {
+      1:'一级',
+      2:'二级',
+      3:'三级',
+    }
+    const levelClassMap = {
+      3:'blue',
+      2:'yellow',
+      1:'red',
+    }
+    console.log(item)
+    this.getItem(Object.assign(item,{
+      type:'非法闯入告警',
+      level:item.level,
+      levelClass:levelClassMap[item.level],
+      levelName:levelMap[item.level],
+      content:'非法闯入',
+      time:'2023年1月20日  14:33:33',
+      equipment:'北区广场监测点',
+      tableHeader:[
+        {
+          'prop':'alarmSubject',
+          'label':'告警主体',
+          'width':'90px',
+        }, {
+          'prop':'COD',
+          'label':'COD',
+        }, {
+          'prop':'standard',
+          'label':'标准值',
+        },
+      ],
+      tableData: [{
+        'alarmSubject': '排放量',
+        'COD': '456m<sup>3</sup>',
+        'standard': '466m<sup>3</sup>',
+      }, {
+        'alarmSubject': '排放浓度',
+        'COD': '2.6mg/L',
+        'standard': '2.5mg/L',
+      }, {
+        'alarmSubject': '排放时间',
+        'COD': '2023.3.31 05:03:45',
+        'standard': '8:00-22:00',
+      }, {
+        'alarmSubject': '排放浓度',
+        'COD': '2.6mg/L',
+        'standard': '2.5mg/L',
+      }, {
+        'alarmSubject': '排放时间',
+        'COD': '2023.3.31 05:03:45',
+        'standard': '8:00-22:00',
+      }]
+    }))
+  }
+  //点击告警信息
+  @Emit()
+  getItem(item) {
+    // console.log('item', item)
+  }
+}
+</script>
+<style lang="scss" scoped>
+.full{
+    width: 100%;
+}
+.bounds-left{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .list-box{
+        width: 100%;
+        height: 200px;
+        margin: 25px 0;
+        display: flex;
+        font-size: 14px;
+        flex-direction: column;
+        .list-scroll-box{
+            flex: 1;
+            height: 1px;
+            overflow-y: auto;
+            .list{
+                background: none;
+                opacity: 0;
+                cursor: pointer;
+            }
+        }
+        .list{
+            background: rgba($color: #D8D8D8, $alpha: 0.4);
+            color: rgba($color: $font-color, $alpha: 0.8);
+            height: 32px;
+            display: flex;
+            align-items: center;
+            span{
+                flex: 1;
+                padding-left: 20px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                &:last-child{
+                    flex: 2;
+                }
+            }
+        }
+    }
+    .warning-box{
+        width: 100%;
+        height: 1px;
+        flex: 1;
+        margin-top: 30px;
+    }
+
+    .tab-box{
+        width: 100%;
+        height: 24px;
+        margin-top: 25px;
+        display: flex;
+        color: $font-color;
+        justify-content: center;
+        .tab{
+            width: 72px;
+            height: 24px;
+            border-radius: 12px;
+            cursor: pointer;
+            line-height: 22px;
+            text-align: center;
+            font-size: 12px;
+            border: 1px solid transparent;
+            &:hover,&.active{
+                border: 1px solid $font-color;
+            }
+        }
+
+    }
+
+}
+</style>
diff --git a/src/components/closePark/boundsManager/right.component.vue b/src/components/closePark/boundsManager/right.component.vue
new file mode 100644
index 0000000..5337bb9
--- /dev/null
+++ b/src/components/closePark/boundsManager/right.component.vue
@@ -0,0 +1,160 @@
+<template>
+    <div class="bounds-right  animate__animated animate__fadeInRight">
+        <TitleComponent>告警数量变化</TitleComponent>
+        <hbt-echarts  className="charts-box" :options="lineOpt"  @onChartInit="getEcharts($event)"></hbt-echarts>
+        <TitleComponent>周界设备盘点</TitleComponent>
+        <hbt-echarts  className="charts-box" :options="barOpt"  @onChartInit="getBarEcharts($event)"></hbt-echarts>
+        <TitleComponent>监控设备在线</TitleComponent>
+        <div class="charts-box">
+            <div class="text">
+                <div class="count">{{count}}%</div>
+                设备在线
+            </div>
+            <el-progress type="circle" :width="200" define-back-color="rgba(255,255,255,0.16)" :format="textFormat" :stroke-width="20" :percentage="count" :color="colors"></el-progress>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import {Component,Emit,PropSync,Vue} from 'vue-property-decorator';
+import TitleComponent from '@/components/title.component.vue';
+import echartsOpt from "@/utils/echarts"
+import CloseService from '@/service/close.service';
+
+@Component({
+    components:{
+        TitleComponent,
+    },
+})
+export default class CloseParkBoundsRightComponent extends Vue {
+    public closeService = new CloseService();
+    public lineOpt = JSON.parse(JSON.stringify(echartsOpt.closeLineOpt));
+    public barOpt = JSON.parse(JSON.stringify(echartsOpt.closeBarOpt));
+    public colors = [
+        {color: '#FF5959', percentage: 20},
+        {color: '#FFA900', percentage: 40},
+        {color: '#FADFA4', percentage: 60},
+        {color: '#C9FFD7', percentage: 80},
+        {color: '#76c893', percentage: 100}
+    ];
+    public count = 0;
+    public chart:any;
+    public chart2:any;
+    public timer:any;
+    public tabs = ["废气收集","废水收集"];
+    public currentTab = 0;
+    created(){
+        this.lineOpt.grid.top=45;
+        this.lineOpt.grid.bottom=15;
+        this.lineOpt.legend.top=15;
+        this.lineOpt.series = [{
+            name: '周界告警',
+            type: 'line',
+            smooth:true,
+            symbol:"circle",
+            areaStyle: {},
+            data: [30, 47, 28, 34,22,82,67]
+        },{
+            name: '卡口告警',
+            type: 'line',
+            smooth:true,
+            symbol:"circle",
+            areaStyle: {},
+            data: [30, 47, 28, 34,22,82,67].reverse()
+        }]
+    }
+
+    public getCount(data){
+        this.count = 0;
+        setTimeout(()=>{
+            const timer = setInterval(()=>{
+                if(this.count<data){
+                    this.count++
+                }else{
+                    clearInterval(timer)
+                }
+            },20)
+        },400)
+
+    }
+    public textFormat(data){
+        return ""
+    }
+    public tabChange(index){
+        if(index===this.currentTab){
+            return
+        }
+        this.currentTab = index
+    }
+    public getEcharts(echart){
+        echart.resize()
+        this.chart = echart;
+
+        this.timer =setInterval(()=>{
+            this.changePieChange();
+            this.getCount(this.count)
+        },4000)
+    }
+    public getBarEcharts(echart){
+        echart.resize()
+        this.chart2 = echart;
+    }
+    public chartResize(){
+        this.chart.resize();
+        this.chart2.resize();
+    }
+    public changePieChange() {
+        this.chart.clear();
+        this.chart.setOption(this.lineOpt)
+        this.chart2.clear();
+        this.chart2.setOption(this.barOpt)
+
+    }
+    mounted(){
+        this.getCount(70)
+        window.addEventListener("resize",this.chartResize);
+    }
+    destroyed(){
+        window.removeEventListener("resize",this.chartResize);
+        clearInterval(this.timer);
+        this.timer = null;
+    }
+
+}
+</script>
+<style lang="scss" scoped>
+.full{
+    width: 100%;
+}
+.bounds-right{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .charts-box{
+        width: 100%;
+        height: 1px;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        .text{
+            font-size: 16px;
+            font-weight: 500;
+            color: rgba($color: $font-color, $alpha: 0.9);
+            line-height: 22px;
+            text-align: center;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%,-50%);
+            .count{
+                font-size: 32px;
+                color: $font-color;
+                line-height: 45px;
+            }
+        }
+    }
+
+}
+</style>
diff --git a/src/components/closePark/dangrousCar/left.component.vue b/src/components/closePark/dangrousCar/left.component.vue
new file mode 100644
index 0000000..9120ea4
--- /dev/null
+++ b/src/components/closePark/dangrousCar/left.component.vue
@@ -0,0 +1,309 @@
+<template>
+<div class="full" style="height:100%">
+    <div class="dangrous-car-left animate__animated animate__fadeInLeft">
+        <div class="full">
+        </div>
+        <TitleComponent :showMore="true" @change-more="showMore()">危险品车辆准入清单</TitleComponent>
+        <div class="block-box">
+            <div class="block">
+                <hbt-svg name="normal" className="icon"></hbt-svg>
+                <div class="text">
+                    <span v-run-number="104"></span> / <span>160</span>
+                    <p>空载</p>
+                </div>
+            </div>
+            <div class="block">
+                <hbt-svg name="normal" className="icon"></hbt-svg>
+                <div class="text">
+                    <span v-run-number="32"></span> / <span>40</span>
+                    <p>里载</p>
+                </div>
+            </div>
+        </div>
+        <TitleComponent>今日服务预约情况</TitleComponent>
+        <div class="tab-box">
+            <div class="tab " :class="{active:index===currentTab}" @click="tabChange(index)" v-for="(item,index) in tabs" :key="index">{{item}}</div>
+        </div>
+
+        <div class="static-box">
+            <div class="static">
+                <div class="border l-t"></div>
+                <div class="border r-t"></div>
+                <div class="border r-b"></div>
+                <div class="border l-b"></div>
+                <span>已服务</span><span class="count">75</span>
+            </div>
+            <div class="static">
+                <div class="border l-t"></div>
+                <div class="border r-t"></div>
+                <div class="border r-b"></div>
+                <div class="border l-b"></div>
+                <span><i class="el-icon-time"></i> 已预约</span><span class="count">75</span>
+            </div>
+        </div>
+
+        <div class="info-box">
+            下一个服务对象：<span>苏A7E31H</span>
+        </div>
+        <hbt-echarts  className="line-charts-box" :options="lineOpt"  @onChartInit="getEcharts($event)"></hbt-echarts>
+
+        <TitleComponent>候检区流量监控</TitleComponent>
+        <div class="my-charts-box">
+            <div class="inner-circle">
+                <div class="count">12 <span>/ 12</span> </div>
+                <div class="text">候检车辆</div>
+            </div>
+            <div class="tip">侯检区已满</div>
+        </div>
+        
+        
+    </div>
+</div>
+</template>
+<script lang="ts">
+import {Component,Emit,PropSync,Vue} from 'vue-property-decorator';
+import TitleComponent from '@/components/title.component.vue';
+import WarningListComponent from '@/components/warningList.component.vue';
+import echartsOpt from "@/utils/echarts"
+@Component({
+    components:{
+        TitleComponent,
+        WarningListComponent,
+    }
+})
+export default class CloseParkDangrousCarLeftComponent extends Vue {
+    public warningList = this.$store.state.warningList;
+    public lineOpt = JSON.parse(JSON.stringify(echartsOpt.closeLineOpt))
+    public tabs = ["洗车","洗罐","检修"];
+    public currentTab = 0;
+    public chart:any;
+    public timer:any;
+    created(){
+        this.lineOpt.color = ["#FADFA4"];
+        this.lineOpt.xAxis.data = ["周一","周二","周三","周四","周五","周六","周日"]
+        this.lineOpt.series = [{
+            name: '预约数',
+            type: 'line',
+            symbol:"circle",
+            data: [30, 47, 28, 34,22,82,67]
+        }]
+    }
+    public showMore(){
+        //
+    }
+    public tabChange(index){
+        if(index===this.currentTab){
+            return
+        }
+        this.currentTab = index
+    }
+    public getEcharts(echart){
+        echart.resize()
+        this.chart = echart;
+
+        this.timer =setInterval(()=>{
+            this.changePieChange()
+        },4000)
+    }
+
+    public chartResize(){
+        this.chart.resize();
+    }
+    public changePieChange() {
+        this.chart.clear();
+        this.chart.setOption(this.lineOpt)
+    }
+    mounted(){
+        window.addEventListener("resize",this.chartResize);
+    }
+    destroyed(){
+        window.removeEventListener("resize",this.chartResize);
+        clearInterval(this.timer);
+        this.timer = null;
+    }
+}
+</script>
+<style lang="scss" scoped>
+.full{
+    width: 100%;
+}
+
+.dangrous-car-left{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .block-box{
+        display: flex;
+        justify-content: space-between;
+        margin: 25px 0;
+        .block{
+            display: flex;
+            .icon{
+                font-size: 32px;
+                margin-right: 10px;
+            }
+            .text{
+                color: $font-color;
+                font-weight: 600;
+                font-size: 20px;
+                font-family: number;
+                line-height: 100%;
+                p{
+                    font-family: "Microsoft Yahei";
+                    font-size: 12px;
+                    color:rgba($color: $font-color, $alpha: 0.8) ;
+                    line-height: 100%;
+                }
+            }
+        }
+    }
+
+
+    .tab-box{
+        width: 100%;
+        height: 24px;
+        margin-top: 25px;
+        display: flex;
+        color: $font-color;
+        justify-content: center;
+        .tab{
+            width: 72px;
+            height: 24px;
+            border-radius: 12px;
+            cursor: pointer;
+            line-height: 22px;
+            text-align: center;
+            font-size: 12px;
+            border: 1px solid transparent;
+            &:hover,&.active{
+                border: 1px solid $font-color;
+            }
+        }
+
+    }
+
+    .static-box{
+        width: 100%;
+        display: flex;
+        margin-top: 25px;
+        justify-content: space-between;
+        .static{
+            width: 151px;
+            height: 36px;
+            padding: 0 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: rgba($color: $bg-color, $alpha: 0.1);
+            color: rgba($color: $font-color, $alpha: 0.8);
+            font-size: 14px;
+            position: relative;
+            .border{
+                width: 8px;
+                height: 8px;
+                border-top: 1px solid rgba($color: $bg-color, $alpha: 0.9);
+                border-left: 1px solid rgba($color: $bg-color, $alpha: 0.9);
+                position: absolute;
+                &.l-t{
+                    left: -3px;
+                    top: -3px;
+                }
+                &.r-t{
+                    right: -3px;
+                    top: -3px;
+                    transform: rotate(90deg);
+                }
+                &.r-b{
+                    right: -3px;
+                    bottom: -3px;
+                    right: -3px;
+                    transform: rotate(180deg);
+                }
+                &.l-b{
+                    left: -3px;
+                    bottom: -3px;
+                    right: -3px;
+                    transform: rotate(270deg);
+                }
+            }
+            .count{
+                color: $font-color;
+            }
+        }
+    }
+    .info-box{
+        font-size: 14px;
+        font-weight: 400;
+        color: rgba(255,255,255,0.8);
+        margin-top: 25px;
+        display: flex;
+        align-items: center;
+        span{
+            font-size: 20px; 
+            padding-left: 10px;
+            color: $font-color;
+            animation: heartBeat 5s infinite;
+        }
+    }
+    .line-charts-box{
+        width: 100%;
+        height: 1px;
+        flex: 1;
+    }
+    .my-charts-box{
+        width: 160px;
+        height: 160px;
+        border-radius: 50%;
+        margin: 25px auto 0;
+        border:1px solid $bg-color;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        .inner-circle{
+            width: 136px;
+            height: 136px;
+            border-radius: 50%;
+            background: rgba(255,255,255,0.15);
+            border: 1px solid rgba(255,255,255,0.14);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            .count{
+                width:100px;
+                text-align: center;
+                padding-bottom: 13px;
+                line-height: 32px;
+                font-size: 32px;
+                border-bottom:1px solid $bg-color;
+                span{
+                    color: rgba(255,255,255,0.8); 
+                    font-size: 16px;
+                }
+            }
+            .text{
+                font-size: 20px;
+                padding-top: 15px;
+                color: rgba(255,255,255,0.9);
+            }
+        }
+        .tip{
+            width: 80px;
+            height: 20px;
+            background: #FF5959;
+            border-radius: 10px;
+            color: $font-color;
+            line-height: 20px;
+            text-align: center;
+            font-size: 12px;
+            position: absolute;
+            bottom: -5px;
+            left:50%;
+            transform: translateX(-50%);
+        }
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/components/closePark/dangrousCar/right.component.vue b/src/components/closePark/dangrousCar/right.component.vue
new file mode 100644
index 0000000..c11ec91
--- /dev/null
+++ b/src/components/closePark/dangrousCar/right.component.vue
@@ -0,0 +1,315 @@
+<template>
+    <div class="dangrous-car-right  animate__animated animate__fadeInRight">
+        <TitleComponent>车辆入场预约</TitleComponent>
+        <div class="info-box">
+            今日预约车辆：<span>75</span>
+        </div>
+
+        <div class="list-box">
+            <div class="list">
+                <span>车辆类型</span><span>车牌号</span><span>预约时段</span>
+            </div>
+            <div class="list-scroll-box">
+                <div class="list  animate__animated "  v-list="index" v-for="(item,index) in carList" :key="index">
+                    <span>{{item.remark}}</span><span>{{item.plate}}</span><span>{{item.startTime}}-{{item.endTime}}</span>
+                </div>
+            </div>
+        </div>
+        <TitleComponent>气体泄露检测</TitleComponent>
+        <div class="full" style="margin:15px 0">
+            {{currentMonth}}
+            <el-calendar style="background:transparent">
+                <template slot="dateCell" slot-scope="{date, data}">
+                    <div class="date-box"  @click="clickDate(data.day)"  :class="{'active':data.day === '2023-05-01'}">
+                        <div class="count" v-if="data.day === '2023-05-01'">3</div>
+                        {{ data.day.split('-').slice(2).join("") }}
+                    </div>
+                </template>
+            </el-calendar>
+        </div>
+        <TitleComponent>废弃收集处理</TitleComponent>
+        <div class="tab-box">
+            <div class="tab " :class="{active:index===currentTab}" @click="tabChange(index)" v-for="(item,index) in tabs" :key="index">{{item}}</div>
+        </div>
+        <hbt-echarts ref="lineCharts"  className="line-charts-box" :options="lineOpt"  @onChartInit="getEcharts($event)"></hbt-echarts>
+    </div>
+</template>
+<script lang="ts">
+import {Component,Emit,PropSync,Vue} from 'vue-property-decorator';
+import TitleComponent from '@/components/title.component.vue';
+import echartsOpt from "@/utils/echarts"
+import CloseService from '@/service/close.service';
+import moment from 'moment';
+
+@Component({
+    components:{
+        TitleComponent,
+    },
+    directives:{
+        list:{
+            bind:(el,binding)=>{
+                console.log(binding.value)
+                const timer = (binding.value+1)*500
+                setTimeout(()=>{
+                    el.classList.add("animate__fadeInRight")
+                },timer)
+            },
+        }
+    }
+})
+export default class CloseParkDangrousCarRightComponent extends Vue {
+    public closeService = new CloseService();
+    public lineOpt = JSON.parse(JSON.stringify(echartsOpt.closeLineOpt));
+    public chart:any;
+    public timer:any;
+    public  currentMonth = moment().format("YYYY年MM月");
+    public tabs = ["废气收集","废水收集"];
+    public currentTab = 0;
+    created(){
+        this.lineOpt.grid.top=45;
+        this.lineOpt.grid.bottom=0;
+        this.lineOpt.legend.top=15;
+        this.lineOpt.series = [{
+            name: '处理量',
+            type: 'line',
+            symbol:"circle",
+            data: [30, 47, 28, 34,22,82,67]
+        },{
+            name: '排放量',
+            type: 'line',
+            symbol:"circle",
+            data: [30, 47, 28, 34,22,82,67].reverse()
+        }]
+    }
+    public tabChange(index){
+        if(index===this.currentTab){
+            return
+        }
+        this.currentTab = index
+    }
+    public getEcharts(echart){
+        echart.resize()
+        this.chart = echart;
+
+        this.timer =setInterval(()=>{
+            this.changePieChange()
+        },4000)
+    }
+    public chartResize(){
+        this.chart.resize();
+    }
+    public changePieChange() {
+        this.chart.clear();
+        this.chart.setOption(this.lineOpt)
+
+    }
+    mounted(){
+        window.addEventListener("resize",this.chartResize);
+    }
+    destroyed(){
+        window.removeEventListener("resize",this.chartResize);
+        clearInterval(this.timer);
+        this.timer = null;
+    }
+    get carList(){
+        return this.$store.state.carList.filter((item,index)=>index<10)
+    }
+  //显示列表
+  @Emit('showList')
+  showList(item){
+    // console.log(1)
+  }
+  //点击日历显示详情列表
+  public clickDate(date){
+    console.log(222)
+    const time = date.split('-').slice(1,3)
+    const tiemStr = `${time[0]}月${time[1]}日`
+    const item = {
+      'title':`${tiemStr}报警记录`,
+      'data':[
+          {'name':'气体监测设备1#',
+        'attr1':'CO',
+        'attr2':'2023-07-12  12:00:00'
+      },  {'name':'气体监测设备1#',
+        'attr1':'CO',
+        'attr2':'2023-07-12  12:00:00'
+      },  {'name':'气体监测设备1#',
+        'attr1':'CO',
+        'attr2':'2023-07-12  12:00:00'
+      },  {'name':'气体监测设备1#',
+        'attr1':'CO',
+        'attr2':'2023-07-12  12:00:00'
+      },  {'name':'气体监测设备1#',
+        'attr1':'CO',
+        'attr2':'2023-07-12  12:00:00'
+      },  {'name':'气体监测设备1#',
+        'attr1':'CO',
+        'attr2':'2023-07-12  12:00:00'
+      },
+
+      ],'head':['监测设备','超标气体','上报时间']
+    }
+    this.showList(item)
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep{
+    .el-calendar__body{
+        padding: 0;
+    }
+    .el-calendar-table{
+        th{
+            padding: 0;
+            font-size: 12px;
+            color:rgba($color: $font-color, $alpha: 0.8) ;
+        }
+        tr{
+            td{
+                pointer-events: none;
+
+                &.is-selected{
+                    background: transparent;
+                }
+                .el-calendar-day{
+                    height: 42px;
+                    padding: 0;
+                    color:rgba($color: $font-color, $alpha: 0.8) ;
+                    &:hover{
+                        background: none;
+                    }
+                }
+                &.prev{
+                    .el-calendar-day{
+                        color:rgba($color: $font-color, $alpha: 0.24) ;
+                    }
+                }
+                &:first-child{
+                    border-color: rgba($color: #D4E5FF, $alpha: 0.16)
+                }
+            }
+            &:first-child{
+                td{
+                    border-color: rgba($color: #D4E5FF, $alpha: 0.16)
+                }
+            }
+        }
+        td{
+            // border-bottom: 1px solid #D4E5FF;
+            border-color: rgba($color: #D4E5FF, $alpha: 0.16)
+        }
+    }
+    .el-calendar__header{
+        display: none;
+    }
+}
+.full{
+    width: 100%;
+}
+.dangrous-car-right{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .info-box{
+        font-size: 14px;
+        font-weight: 400;
+        color: rgba(255,255,255,0.8);
+        margin-top: 15px;
+        display: flex;
+        align-items: center;
+        span{
+            font-size: 20px;
+            padding-left: 10px;
+            color: $font-color;
+            animation: heartBeat 5s infinite;
+        }
+    }
+
+
+    .tab-box{
+        width: 100%;
+        height: 24px;
+        margin-top: 15px;
+        display: flex;
+        color: $font-color;
+        justify-content: center;
+        .tab{
+            width: 72px;
+            height: 24px;
+            border-radius: 12px;
+            cursor: pointer;
+            line-height: 22px;
+            text-align: center;
+            font-size: 12px;
+            border: 1px solid transparent;
+            &:hover,&.active{
+                border: 1px solid $font-color;
+            }
+        }
+
+    }
+
+    .list-box{
+        width: 100%;
+        height: 130px;
+        margin: 15px 0;
+        display: flex;
+        font-size: 14px;
+        flex-direction: column;
+        .list-scroll-box{
+            flex: 1;
+            height: 1px;
+            overflow-y: auto;
+            .list{
+                background: none;
+                opacity: 0;
+            }
+        }
+        .list{
+            background: rgba($color: #D8D8D8, $alpha: 0.4);
+            color: rgba($color: $font-color, $alpha: 0.8);
+            height: 32px;
+            display: flex;
+            align-items: center;
+            span{
+                flex: 1;
+                padding-left: 20px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+    .line-charts-box{
+        width: 100%;
+        height: 1px;
+        flex: 1;
+    }
+    .date-box{
+        width: 100%;
+        height: 100%;
+        padding: 2px;
+        display: flex;
+        align-items: flex-end;
+        font-size: 12px;
+        position: relative;
+        pointer-events: auto;
+        &.active{
+            background: #FF5959;
+        }
+        .count{
+            pointer-events: auto;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%,-50%);
+            color: $font-color;
+            font-size: 14px;
+            z-index: 9;
+        }
+    }
+
+}
+</style>
diff --git a/src/components/closePark/home/left.component.vue b/src/components/closePark/home/left.component.vue
new file mode 100644
index 0000000..195be52
--- /dev/null
+++ b/src/components/closePark/home/left.component.vue
@@ -0,0 +1,171 @@
+<template>
+    <div class="home-left animate__animated animate__fadeInLeft">
+        <TitleComponent>今日入园人数</TitleComponent>
+        <div class="block-box">
+            <div class="block">
+                <hbt-svg name="normal" className="icon"></hbt-svg>
+                <div class="text">
+                    <span v-run-number="2349"></span>
+                    <p>普通员工（人）</p>
+                </div>
+            </div>
+            <div class="block">
+                <hbt-svg name="normal" className="icon"></hbt-svg>
+                <div class="text">
+                    <span v-run-number="145"></span>
+                    <p>访客（人）</p>
+                </div>
+            </div>
+        </div>
+        <TitleComponent>今日入园车辆</TitleComponent>
+        <div class="block-box">
+            <div class="block">
+                <hbt-svg name="icon_car_0" className="icon"></hbt-svg>
+                <div class="text">
+                    <span v-run-number="246"></span>
+                    <p>普通车辆</p>
+                </div>
+            </div>
+            <div class="block">
+                <hbt-svg name="icon_car_1" className="icon"></hbt-svg>
+                <div class="text">
+                    <span v-run-number="46"></span>
+                    <p>访客车辆</p>
+                </div>
+            </div>
+            <div class="block">
+                <hbt-svg name="icon_car_2" className="icon"></hbt-svg>
+                <div class="text">
+                    <span v-run-number="21"></span>
+                    <p>危化品车辆</p>
+                </div>
+            </div>
+        </div>
+        <TitleComponent>告警信息</TitleComponent>
+        <div class="list-box">
+            <WarningListComponent @getItem="showWaring" :dataList="warningList"></WarningListComponent>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import {Component,Emit,PropSync,Vue} from 'vue-property-decorator';
+import TitleComponent from '@/components/title.component.vue';
+import WarningListComponent from '@/components/warningList.component.vue';
+@Component({
+    components:{
+        TitleComponent,
+        WarningListComponent,
+    }
+})
+export default class CloseParkHomeLeftComponent extends Vue {
+  get warningList(){
+    return this.$store.state.warningList
+  }
+
+  //展示告警信息
+  showWaring(item){
+
+    const levelMap = {
+      1:'一级',
+      2:'二级',
+      3:'三级',
+    }
+    const levelClassMap = {
+      3:'blue',
+      2:'yellow',
+      1:'red',
+    }
+    this.getItem(Object.assign(item,{
+      type:'非法闯入告警',
+      level:item.level,
+      levelClass:levelClassMap[item.level],
+      levelName:levelMap[item.level],
+      content:'非法闯入',
+      time:'2023年1月20日  14:33:33',
+      equipment:'北区广场监测点',
+      tableHeader:[
+        {
+          'prop':'alarmSubject',
+          'label':'告警主体',
+          'width':'90px',
+        }, {
+          'prop':'COD',
+          'label':'COD',
+        }, {
+          'prop':'standard',
+          'label':'标准值',
+        },
+      ],
+      tableData: [{
+        'alarmSubject': '排放量',
+        'COD': '456m<sup>3</sup>',
+        'standard': '466m<sup>3</sup>',
+      }, {
+        'alarmSubject': '排放浓度',
+        'COD': '2.6mg/L',
+        'standard': '2.5mg/L',
+      }, {
+        'alarmSubject': '排放时间',
+        'COD': '2023.3.31 05:03:45',
+        'standard': '8:00-22:00',
+      }, {
+        'alarmSubject': '排放浓度',
+        'COD': '2.6mg/L',
+        'standard': '2.5mg/L',
+      }, {
+        'alarmSubject': '排放时间',
+        'COD': '2023.3.31 05:03:45',
+        'standard': '8:00-22:00',
+      }]
+    }))
+  }
+  //点击告警信息
+  @Emit()
+  getItem(item) {
+    // console.log('item', item)
+  }
+}
+</script>
+<style lang="scss" scoped>
+.full{
+    width: 100%;
+}
+.home-left{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .block-box{
+        display: flex;
+        justify-content: space-between;
+        margin: 30px 0;
+        .block{
+            display: flex;
+            .icon{
+                font-size: 32px;
+                margin-right: 10px;
+            }
+            .text{
+                color: $font-color;
+                font-weight: 600;
+                font-size: 20px;
+                font-family: number;
+                line-height: 100%;
+                p{
+                    font-family: "Microsoft Yahei";
+                    font-size: 12px;
+                    color:rgba($color: $font-color, $alpha: 0.8) ;
+                    line-height: 100%;
+                }
+            }
+        }
+    }
+    .list-box{
+        width: 100%;
+        height: 1px;
+        flex: 1;
+        margin-top: 30px;
+    }
+
+}
+</style>
diff --git a/src/components/closePark/home/right.component.vue b/src/components/closePark/home/right.component.vue
new file mode 100644
index 0000000..eed6ca8
--- /dev/null
+++ b/src/components/closePark/home/right.component.vue
@@ -0,0 +1,292 @@
+<template>
+    <div class="home-right  animate__animated animate__fadeInRight">
+        <TitleComponent>停车管理</TitleComponent>
+        <div class="block-box">
+            <div class="block">
+                <div class="inner-block" style="padding-top:20px">
+                    <div class="full">普通停车位</div>
+                    <div class="full"><span class="count" v-run-number="parkData[0].count"></span><span>/{{parkData[0].total}}</span></div>
+                    <div :style="{top:(-90 + 90*(parkData[0].count/parkData[0].total))+'px'}" class="wave wave1"></div>
+                    <div :style="{top:(-90 + 90*(parkData[0].count/parkData[0].total))+'px'}" class="wave wave2"></div>
+                </div>
+            </div>
+            <div class="block">
+                <div class="inner-block">
+                    <div class="full">危化品车辆<br>停车位置</div>
+                    <div class="full"> <span class="count active" v-run-number="parkData[1].count"></span><span>/{{parkData[1].total}}</span></div>
+                   
+                    <div :style="{top:(-90 + 90*(parkData[1].count/parkData[1].total))+'px'}" class="wave wave1"></div>
+                    <div :style="{top:(-90 + 90*(parkData[1].count/parkData[1].total))+'px'}" class="wave wave2"></div>
+                </div>
+            </div>
+        </div>
+        <TitleComponent>危化品车辆停车场</TitleComponent>
+        <hbt-echarts ref="lineCharts"  className="line-charts-box" :options="lineOpt"  @onChartInit="getEcharts($event)"></hbt-echarts>
+        <TitleComponent>告警预计</TitleComponent>
+        <div class="warning-box">
+            <div class="static-box">
+                <div class="static">
+                    <div class="border l-t"></div>
+                    <div class="border r-t"></div>
+                    <div class="border r-b"></div>
+                    <div class="border l-b"></div>
+                    <span>离线设备</span>
+                    <span class="count active">2</span>
+                </div>
+                <div class="static">
+                    <div class="border l-t"></div>
+                    <div class="border r-t"></div>
+                    <div class="border r-b"></div>
+                    <div class="border l-b"></div>
+                    <span>设备总数</span>
+                    <span class="count">120</span>
+                </div>
+            </div>
+            <div class="tab-box">
+                <div class="tab">今日</div>
+                <div class="tab">本周</div>
+                <div class="tab">一月</div>
+            </div>
+            <hbt-echarts  className="pie-charts-box" :options="pieOpt"  @onChartInit="getPieEcharts($event)"></hbt-echarts>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import {Component,Emit,PropSync,Vue} from 'vue-property-decorator';
+import TitleComponent from '@/components/title.component.vue';
+import echartsOpt from "@/utils/echarts"
+
+@Component({
+    components:{
+        TitleComponent,
+    }
+})
+export default class CloseParkHomeRightComponent extends Vue {
+    public lineOpt = JSON.parse(JSON.stringify(echartsOpt.closeLineOpt));
+    public pieOpt = JSON.parse(JSON.stringify(echartsOpt.closePieOpt));
+    public chart:any;
+    public pieChart:any;
+    public activePieItem = 0;
+    public parkData = [{
+        count:145,
+        total:500
+        
+    },{
+        count:70,
+        total:100
+        
+    }]
+    public timer:any;
+    public getEcharts(echart){
+        echart.resize()
+        this.chart = echart
+    }
+    public getPieEcharts(echart){
+        echart.resize()
+        this.pieChart = echart;
+
+        this.timer =setInterval(()=>{
+            this.changePieChange()
+        },4000)
+    }
+    public chartResize(){
+        this.chart.resize();
+    }
+    public changePieChange() {
+        this.chart.clear();
+        this.chart.setOption(this.lineOpt)
+
+        this.parkData = [{
+            count:Math.floor(Math.random()* 500),
+            total:500
+            
+        },{
+            count:Math.floor(Math.random()* 100),
+            total:100
+            
+        }]
+
+        if (this.activePieItem > 6) {
+            this.activePieItem = 0
+        }
+        //定时加载选中高亮区
+        this.pieChart.dispatchAction({
+            type: "toggleSelect",
+            dataIndex: this.activePieItem
+        })
+        this.activePieItem += 2;
+
+    }
+    mounted(){
+        window.addEventListener("resize",this.chartResize);
+    }
+    destroyed(){
+        window.removeEventListener("resize",this.chartResize);
+        clearInterval(this.timer);
+        this.timer = null;
+    }
+}
+</script>
+<style lang="scss" scoped>
+@keyframes wave{
+    0%{
+        transform: translate(-50%,-50%) rotate(0deg);
+    }
+    100%{
+        transform: translate(-50%,-50%) rotate(360deg); 
+    }
+}
+.full{
+    width: 100%;
+}
+.home-right{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .block-box{
+        display: flex;
+        justify-content: space-around;
+        margin: 30px 0;
+        .block{
+            width: 104px;
+            height: 104px;
+            border:1px solid $bg-color;
+            border-radius: 50%;
+            .inner-block{
+                width: 90px;
+                height: 90px;
+                position: relative;
+                left: 6px;
+                top: 6px;
+                border:1px solid rgba($color:  $bg-color, $alpha: 0.2);
+                border-radius: 50%;
+                overflow: hidden;
+                color: rgba($color:  $bg-color, $alpha: 0.8);
+                font-size: 12px;
+                line-height: 17px;
+                padding-top: 10px;
+                transform: rotate(180deg);
+                .full{
+                    text-align: center;
+                    transform: rotate(180deg);
+                }
+                .wave{
+                    position: absolute;
+                    width: 200%;
+                    height: 200%;
+                    top: 0;
+                    left: 50%;
+                    transform: translate(-50%,-50%);
+                    background: rgba($color: $bg-color, $alpha: 0.2);
+                    transition: top 2s;
+                    animation: wave 5s linear infinite;
+                    &.wave1{
+                        border-radius: 30%;
+                    }
+                    &.wave2{
+                        border-radius: 40%;
+                    }
+                }
+                .count{
+                    font-size: 20px;
+                    line-height: 28px;
+                    flex: none;
+                    color: $font-color;
+                    &.active{
+                        color:#FFA900
+                    }
+                }
+            }
+        }
+    }
+    .line-charts-box{
+        width: 100%;
+        height: 1px;
+        flex: 1;
+    }
+    .warning-box{
+        width: 100%;
+        .static-box{
+            width: 100%;
+            display: flex;
+            margin-top: 30px;
+            justify-content: space-between;
+            .static{
+                width: 151px;
+                height: 36px;
+                padding: 0 10px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                background: rgba($color: $bg-color, $alpha: 0.1);
+                color: rgba($color: $font-color, $alpha: 0.8);
+                font-size: 14px;
+                position: relative;
+                .border{
+                    width: 8px;
+                    height: 8px;
+                    border-top: 1px solid rgba($color: $bg-color, $alpha: 0.9);
+                    border-left: 1px solid rgba($color: $bg-color, $alpha: 0.9);
+                    position: absolute;
+                    &.l-t{
+                        left: -3px;
+                        top: -3px;
+                    }
+                    &.r-t{
+                        right: -3px;
+                        top: -3px;
+                        transform: rotate(90deg);
+                    }
+                    &.r-b{
+                        right: -3px;
+                        bottom: -3px;
+                        right: -3px;
+                        transform: rotate(180deg);
+                    }
+                    &.l-b{
+                        left: -3px;
+                        bottom: -3px;
+                        right: -3px;
+                        transform: rotate(270deg);
+                    }
+                }
+                .count{
+                    color: $font-color;
+                    &.active{
+                        color:#FFA900
+                    }
+                }
+            }
+        }
+        .tab-box{
+            width: 100%;
+            height: 24px;
+            margin-top: 30px;
+            display: flex;
+            color: $font-color;
+            justify-content: space-around;
+            .tab{
+                width: 72px;
+                height: 24px;
+                border-radius: 12px;
+                cursor: pointer;
+                line-height: 22px;
+                text-align: center;
+                font-size: 12px;
+                border: 1px solid transparent;
+                &:hover,&.active{
+                    border: 1px solid $font-color;
+                }
+            }
+
+        }
+        .pie-charts-box{
+            width: 100%;
+            margin-top: 30px;
+            height: 180px;
+        }
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/components/closePark/peopleCar/left.component.vue b/src/components/closePark/peopleCar/left.component.vue
new file mode 100644
index 0000000..c63ba34
--- /dev/null
+++ b/src/components/closePark/peopleCar/left.component.vue
@@ -0,0 +1,473 @@
+<template>
+    <div class="people-car-left  animate__animated animate__fadeInLeft">
+        <TitleComponent :showMore="true" @change-more="more">实时入园</TitleComponent>
+        <div class="tab-box">
+            <div class="tab " :class="{active:index===currentTab}" @click="currentTab=index" v-for="(item,index) in tabs" :key="index">{{item}}</div>
+        </div>
+        <div class="list-box" v-if="!currentTab">
+            <div class="list">
+                <span>姓名</span><span>入园时间</span>
+            </div>
+            <div class="list-scroll-box">
+                <div class="list  animate__animated " @click="showPersonDetail(item)"  v-list="index" v-for="(item,index) in peopleList" :key="index">
+                    <span>{{item.name}}</span><span>{{item.time}}</span>
+                </div>
+            </div>
+        </div>
+        <div class="list-box" v-else>
+            <div class="list">
+                <span>车牌号</span><span>入园时间</span>
+            </div>
+            <div class="list-scroll-box">
+                <div class="list  animate__animated " @click="showCarDetail(item)"  v-list="index" v-for="(item,index) in carList" :key="index">
+                    <span>{{item.plate}}</span><span>{{item.time}}</span>
+                </div>
+            </div>
+        </div>
+        <TitleComponent :showMore="true" @change-more="moreBlack">车辆黑名单</TitleComponent>
+        <div class="list-box">
+            <div class="list">
+                <span>车牌号</span><span>进入黑名单时间</span>
+            </div>
+            <div class="list-scroll-box">
+                <div class="list  animate__animated " @click="showCarDetail(item)"  v-list="index" v-for="(item,index) in blackCarList" :key="index">
+                    <span>{{item.plate}}</span><span>{{item.time}}</span>
+                </div>
+            </div>
+        </div>
+        <TitleComponent>人车数据统计</TitleComponent>
+        <div class="static-box">
+            <div class="static">
+                <div class="border l-t"></div>
+                <div class="border r-t"></div>
+                <div class="border r-b"></div>
+                <div class="border l-b"></div>
+                <span>今日入园人数</span><span class="count">300</span>
+            </div>
+            <div class="static">
+                <div class="border l-t"></div>
+                <div class="border r-t"></div>
+                <div class="border r-b"></div>
+                <div class="border l-b"></div>
+                <span>今日入园车辆</span><span class="count">1000</span>
+            </div>
+        </div>
+        <hbt-echarts  className="pie-charts-box" :options="pieOpt"  @onChartInit="getPieEcharts($event,1)"></hbt-echarts>
+        <hbt-echarts  className="pie-charts-box" :options="pieOpt2"  @onChartInit="getPieEcharts($event,2)"></hbt-echarts>
+    </div>
+</template>
+<script lang="ts">
+import {Component,Emit,PropSync,Vue} from 'vue-property-decorator';
+import TitleComponent from '@/components/title.component.vue';
+import WarningListComponent from '@/components/warningList.component.vue';
+import CloseService from "@/service/close.service"
+import echartsOpt from "@/utils/echarts"
+@Component({
+    components:{
+        TitleComponent,
+        WarningListComponent,
+    },
+    directives:{
+        list:{
+            bind:(el,binding)=>{
+                const timer = (binding.value+1)*500
+                setTimeout(()=>{
+                    el.classList.add("animate__fadeInRight")
+                },timer)
+            },
+            // update:(el,binding)=>{
+            //     el.classList.remove("animate__fadeInRight")
+            //     const timer = (binding.value+1)*500
+            //     setTimeout(()=>{
+            //         el.classList.add("animate__fadeInRight")
+            //     },timer)
+            // },
+        }
+    }
+})
+export default class CloseParkPeopleCarLeftComponent extends Vue {
+    public closeService = new CloseService();
+    public carList = [] as any;
+    public blackCarList = [] as any;
+    public tabs = ["人员","车辆"];
+    public currentTab = 0;
+    public pieOpt = JSON.parse(JSON.stringify(echartsOpt.closePieOpt));
+    public pieOpt2 = JSON.parse(JSON.stringify(echartsOpt.closePieOpt));
+    public pieChart:any;
+    public pieChart2:any;
+    public activePieItem = 0;
+    public activePieItem2 = 0;
+    public timer:any;
+    created(){
+        const title = {
+            text : "人员类型\n占比",
+            top:"center",
+            textAlign:"center",
+            left:"26%",
+            textStyle: {
+                fontSize: 12,
+                lineHeight:17,
+                fontWeight: 600,
+                color: '#FFF',
+            },
+        }
+        this.pieOpt.title = JSON.parse(JSON.stringify(title))
+        this.pieOpt2.title = JSON.parse(JSON.stringify(title))
+        this.pieOpt2.title.text = "车辆类型\n占比";
+        this.pieOpt.legend.top = this.pieOpt2.legend.top = "center";
+        this.pieOpt.legend.data = [{name:"企业员工"},{name:"承包商"},{name:"访客"}];
+        this.pieOpt2.legend.data = [{name:"公司车辆"},{name:"承包商车辆"},{name:"访客车辆"},{name:"危化品车辆"},{name:"员工车辆"}];
+        this.pieOpt.series[0].radius= this.pieOpt2.series[0].radius = [38,48];
+        this.pieOpt.series[0].color = ['#FFFFFF',null, "#FADFA4",null, '#7FB0FF',null];
+        this.pieOpt.series[0].data = [{value:100,name:"企业员工"},{value:2,name:""},{value:100,name:"承包商"},{value:2,name:""},{value:100,name:"访客"}];
+        this.pieOpt2.series[0].color = ['#EA7F7F',null, "#ECFF7F",null, '#947FEA',null,"#7FB0FF",null,"#FFFFFF",null];
+        this.pieOpt2.series[0].data = [{value:200,name:"公司车辆"},{value:5,name:""},{value:200,name:"承包商车辆"},{value:5,name:""},{value:200,name:"访客车辆"},{value:5,name:""},{value:200,name:"危化品车辆"},{value:5,name:""},{value:200,name:"员工车辆"},{value:5,name:""}];
+    }
+
+    public getPieEcharts(chart,num){
+        chart.resize()
+        if(num===1){
+            this.pieChart = chart
+        }else{
+            this.pieChart2 = chart
+        }
+        this.timer =setInterval(()=>{
+            this.changePieChange()
+        },2000)
+
+    }
+
+
+    public changePieChange() {
+
+        if (this.activePieItem > 4) {
+            this.activePieItem = 0
+        }
+        if (this.activePieItem2 > 8) {
+            this.activePieItem2 = 0
+        }
+        //定时加载选中高亮区
+        this.pieChart.dispatchAction({
+            type: "downplay",
+            seriesIndex: 0,
+        });
+        this.pieChart2.dispatchAction({
+            type: "downplay",
+            seriesIndex: 0,
+        });
+        //定时加载选中高亮区
+        this.pieChart.dispatchAction({
+            type: "highlight",
+            dataIndex: this.activePieItem
+        })
+        this.pieChart2.dispatchAction({
+            type: "highlight",
+            dataIndex: this.activePieItem2
+        })
+        this.activePieItem += 2;
+        this.activePieItem2 += 2;
+
+    }
+    get peopleList(){
+      return this.$store.state.peopleList.filter((item,index)=>index<10)
+    }
+    public getCarList(){
+        this.closeService.getCarList().then((res)=>{
+            this.carList = res.data
+        })
+    }
+    public getBlackCarList(){
+        this.closeService.getBlackCarList().then((res)=>{
+            this.blackCarList = res.data
+        })
+    }
+
+    public more(){
+      let item = {}
+      if (this.currentTab === 0){
+        item = {
+          'title':'人员列表',
+          'showPagination':true,
+          'data':[
+            {'name':'邢道荣',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'访客'
+            },
+            {'name':'邢道荣',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'访客'
+            },
+            {'name':'邢道荣',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'访客'
+            },
+            {'name':'邢道荣',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'访客'
+            },
+            {'name':'邢道荣',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'访客'
+            },
+            {'name':'邢道荣',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'访客'
+            },
+            {'name':'邢道荣',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'访客'
+            },
+            {'name':'邢道荣',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'访客'
+            },
+            {'name':'邢道荣',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'访客'
+            },
+            {'name':'邢道荣',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'访客'
+            },
+            {'name':'邢道荣',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'访客'
+            },
+            {'name':'邢道荣',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'访客'
+            },
+            {'name':'邢道荣',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'访客'
+            }
+          ],'head':['人员姓名','入园时间','人员类型']
+        }
+      }else{
+        item = {
+          'title':'车辆列表',
+          'showPagination':true,
+          'data':[
+            {'name':'苏A68688',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'危化品车辆'
+            }, {'name':'苏A68688',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'危化品车辆'
+            }, {'name':'苏A68688',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'危化品车辆'
+            }, {'name':'苏A68688',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'危化品车辆'
+            }, {'name':'苏A68688',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'危化品车辆'
+            }, {'name':'苏A68688',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'危化品车辆'
+            }, {'name':'苏A68688',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'危化品车辆'
+            }, {'name':'苏A68688',
+              'attr1':'2023-07-12  12:00:00',
+              'attr2':'危化品车辆'
+            },
+          ],'head':['车牌号','进入时间','车辆类型']
+        }
+      }
+
+      this.showList(item)
+    }
+    public moreBlack(){
+        console.log(222)
+      const item = {
+        'title':'黑名单',
+        'showPagination':true,
+        'data':[{'name':'苏A68688',
+          'attr1':'2023-07-12  12:00:00',
+          'attr2':'危化品车辆'
+        }, {'name':'苏A68688',
+          'attr1':'2023-07-12  12:00:00',
+          'attr2':'危化品车辆'
+        }, {'name':'苏A68688',
+          'attr1':'2023-07-12  12:00:00',
+          'attr2':'危化品车辆'
+        }, {'name':'苏A68688',
+          'attr1':'2023-07-12  12:00:00',
+          'attr2':'危化品车辆'
+        }, {'name':'苏A68688',
+          'attr1':'2023-07-12  12:00:00',
+          'attr2':'危化品车辆'
+        }, {'name':'苏A68688',
+          'attr1':'2023-07-12  12:00:00',
+          'attr2':'危化品车辆'
+        }, {'name':'苏A68688',
+          'attr1':'2023-07-12  12:00:00',
+          'attr2':'危化品车辆'
+        }, {'name':'苏A68688',
+          'attr1':'2023-07-12  12:00:00',
+          'attr2':'危化品车辆'
+        },
+        ],'head':['车牌号','进入黑名单时间','车辆类型']
+      }
+      this.showList(item)
+    }
+    mounted(){
+        this.getCarList();
+        this.getBlackCarList();
+    }
+    destroyed(){
+        clearInterval(this.timer);
+        this.timer = null;
+    }
+    //点击展示人员详情
+    showPersonDetail(item){
+      this.emitPersonPop(item)
+    }
+    //点击展示车辆详情
+    showCarDetail(item){
+      this.emitCarPop(item)
+    }
+    @Emit('emitPersonPop')
+    emitPersonPop(item){
+      // console.log(item)
+    }
+    @Emit('emitCarPop')
+    emitCarPop(item){
+      // console.log(item)
+    }
+    //显示列表
+    @Emit('showList')
+    showList(item){
+      // console.log(1)
+    }
+}
+</script>
+<style lang="scss" scoped>
+.full{
+    width: 100%;
+}
+
+.people-car-left{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .tab-box{
+        width: 100%;
+        height: 24px;
+        margin-top: 25px;
+        display: flex;
+        color: $font-color;
+        justify-content: center;
+        .tab{
+            width: 72px;
+            height: 24px;
+            border-radius: 12px;
+            cursor: pointer;
+            line-height: 22px;
+            text-align: center;
+            font-size: 12px;
+            border: 1px solid transparent;
+            &:hover,&.active{
+                border: 1px solid $font-color;
+            }
+        }
+
+    }
+    .static-box{
+        width: 100%;
+        display: flex;
+        margin-top: 25px;
+        justify-content: space-between;
+        .static{
+            width: 151px;
+            height: 36px;
+            padding: 0 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: rgba($color: $bg-color, $alpha: 0.1);
+            color: rgba($color: $font-color, $alpha: 0.8);
+            font-size: 14px;
+            position: relative;
+            .border{
+                width: 8px;
+                height: 8px;
+                border-top: 1px solid rgba($color: $bg-color, $alpha: 0.9);
+                border-left: 1px solid rgba($color: $bg-color, $alpha: 0.9);
+                position: absolute;
+                &.l-t{
+                    left: -3px;
+                    top: -3px;
+                }
+                &.r-t{
+                    right: -3px;
+                    top: -3px;
+                    transform: rotate(90deg);
+                }
+                &.r-b{
+                    right: -3px;
+                    bottom: -3px;
+                    right: -3px;
+                    transform: rotate(180deg);
+                }
+                &.l-b{
+                    left: -3px;
+                    bottom: -3px;
+                    right: -3px;
+                    transform: rotate(270deg);
+                }
+            }
+            .count{
+                color: $font-color;
+            }
+        }
+    }
+    .pie-charts-box{
+        width: 100%;
+        height: 105px;
+        margin-top: 25px;
+    }
+    .list-box{
+        width: 100%;
+        height: 1px;
+        flex: 1;
+        font-size: 14px;
+        margin: 20px 0;
+        display: flex;
+        flex-direction: column;
+        .list-scroll-box{
+            flex: 1;
+            height: 1px;
+            overflow-y: auto;
+            .list{
+                background: none;
+                opacity: 0;
+                cursor: pointer;
+            }
+        }
+        .list{
+            background: rgba($color: #D8D8D8, $alpha: 0.4);
+            color: rgba($color: $font-color, $alpha: 0.8);
+            height: 32px;
+            display: flex;
+            align-items: center;
+            span{
+                flex: 1;
+                padding-left: 20px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                &:last-child{
+                    flex: 2;
+                }
+            }
+        }
+    }
+
+}
+
+</style>
diff --git a/src/components/closePark/peopleCar/right.component.vue b/src/components/closePark/peopleCar/right.component.vue
new file mode 100644
index 0000000..1ccc989
--- /dev/null
+++ b/src/components/closePark/peopleCar/right.component.vue
@@ -0,0 +1,164 @@
+<template>
+    <div class="people-car-right  animate__animated animate__fadeInRight">
+        <TitleComponent>人车流量</TitleComponent>
+        <div class="tab-box">
+            <div class="tab " :class="{active:index===currentFlowTab}" @click="currentFlowTab=index" v-for="(item,index) in flowTabs" :key="index">{{item}}</div>
+        </div>
+        <hbt-echarts className="charts-box" :options="lineOpt"  @onChartInit="getLineEcharts($event)"></hbt-echarts>
+        <TitleComponent>告警统计</TitleComponent>
+        <div class="tab-box">
+            <div class="tab " :class="{active:index===currentStaticTab}" @click="currentStaticTab=index" v-for="(item,index) in staticTabs" :key="index">{{item}}</div>
+        </div>
+        <hbt-echarts  className="charts-box" :options="barOpt"  @onChartInit="getBarEcharts($event)"></hbt-echarts>
+        <hbt-echarts  className="charts-box" :options="pieOpt"  @onChartInit="getPieEcharts($event)"></hbt-echarts>
+    </div>
+</template>
+<script lang="ts">
+import {Component,Emit,PropSync,Vue} from 'vue-property-decorator';
+import TitleComponent from '@/components/title.component.vue';
+import echartsOpt from "@/utils/echarts"
+import * as echarts from "echarts"
+
+@Component({
+    components:{
+        TitleComponent,
+    }
+})
+export default class CloseParkPeopleCarRightComponent extends Vue {
+    public lineOpt = JSON.parse(JSON.stringify(echartsOpt.closeLineOpt));
+    public barOpt =  JSON.parse(JSON.stringify(echartsOpt.closeLineOpt));
+    public pieOpt =  JSON.parse(JSON.stringify(echartsOpt.closePieOpt));
+    public linechart:any;
+    public barchart:any;
+    public pieChart:any;
+    public activePieItem = 0;
+    public timer:any;
+    public flowTabs = ["人员","车辆"];
+    public staticTabs = ["天","周","月"];
+    public currentFlowTab = 0;
+    public currentStaticTab = 0;
+    created(){
+
+        this.lineOpt.series = [
+        {
+            name: '人员流量',
+            type: 'line',
+            symbol:"circle",
+            data: [320, 302, 301, 334,220, 182, 191, 234,150, 212, 201, 154]
+        },
+        {
+            name: '车辆流量',
+            symbol:"circle",
+            type: 'line',
+            data: [120, 132, 101, 134,820, 832, 901, 934,320, 302, 301, 334]
+        }]
+        this.barOpt.series = [{
+            type: 'bar',
+            name:"告警统计",
+            barWidth:12,
+            itemStyle: {
+                borderRadius:[6,6,0,0],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#FFD4A4' },
+                    { offset: 1, color: '#EA7F7F' }
+                ])
+            },
+            data:[12,23,45,56,32,45,234,567,678,345,232,87]
+        }]
+        this.lineOpt.legend.show = this.barOpt.legend.show = false;
+        this.pieOpt.title.text="";
+        this.lineOpt.grid.top =this.barOpt.grid.top=25;
+        this.pieOpt.legend.top = "center";
+        this.pieOpt.legend.data = [{name:"人员告警"},{name:"车辆告警"},{name:"周界告警"},{name:"卡口告警"},{name:"气体泄露"}];
+        this.pieOpt.series[0].select.label.show=false;
+        this.pieOpt.series[0].color = ['#FFFFFF',null, "#FADFA4",null, '#C9FFD7',null,"#7FB0FF",null,"#947FEA",null];
+        this.pieOpt.series[0].data = [{value:200,name:"人员告警"},{value:5,name:""},{value:200,name:"车辆告警"},{value:5,name:""},{value:200,name:"周界告警"},{value:5,name:""},{value:200,name:"卡口告警"},{value:5,name:""},{value:200,name:"气体泄露"},{value:5,name:""}];
+    }
+    public getLineEcharts(echart){
+        echart.resize()
+        this.linechart = echart
+    }
+    public getBarEcharts(echart){
+        echart.resize()
+        this.barchart = echart
+    }
+    public getPieEcharts(echart){
+        echart.resize()
+        this.pieChart = echart;
+
+        this.timer =setInterval(()=>{
+            this.changePieChange()
+        },4000)
+    }
+    public chartResize(){
+        this.linechart.resize();
+        this.barchart.resize();
+        this.pieChart.resize();
+    }
+    public changePieChange() {
+        this.linechart.clear();
+        this.linechart.setOption(this.lineOpt)
+        this.barchart.clear();
+        this.barchart.setOption(this.barOpt)
+
+        if (this.activePieItem > 6) {
+            this.activePieItem = 0
+        }
+        //定时加载选中高亮区
+        this.pieChart.dispatchAction({
+            type: "toggleSelect",
+            dataIndex: this.activePieItem
+        })
+        this.activePieItem += 2;
+
+    }
+    mounted(){
+        window.addEventListener("resize",this.chartResize);
+    }
+    destroyed(){
+        window.removeEventListener("resize",this.chartResize);
+        clearInterval(this.timer);
+        this.timer = null;
+    }
+}
+</script>
+<style lang="scss" scoped>
+.full{
+    width: 100%;
+}
+.people-car-right{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .tab-box{
+        width: 100%;
+        height: 24px;
+        margin-top: 25px;
+        display: flex;
+        color: $font-color;
+        justify-content: center;
+        .tab{
+            width: 72px;
+            height: 24px;
+            border-radius: 12px;
+            cursor: pointer;
+            line-height: 22px;
+            text-align: center;
+            font-size: 12px;
+            border: 1px solid transparent;
+            &.active{
+                border: 1px solid $font-color;
+            }
+        }
+
+    }
+    .charts-box{
+        width: 100%;
+        height: 1px;
+        flex: 1;
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/components/companyFile/detail.component.vue b/src/components/companyFile/detail.component.vue
new file mode 100644
index 0000000..b206322
--- /dev/null
+++ b/src/components/companyFile/detail.component.vue
@@ -0,0 +1,975 @@
+<template>
+<div class="detail-box">
+    <div class="back" @click="closePage">
+        <i class="el-icon-back"></i>返回
+    </div>
+    <div class="left">
+        <div class="tabs">
+            <div class="tab" :class="{active:currentTab === index}" v-for="(item,index) in tabs" :key="index" @click="changeTab(index)">{{item}}</div>
+        </div>
+    </div>
+    <div class="right">
+        <div class="title">{{tabs[currentTab]}}</div>
+        <div class="full" v-if="currentTab===0">
+            <div class="full" v-if="showPeople">
+                <div class="sub-title" v-if="showPeople">企业员工列表</div>
+                <div class="full" style="margin-bottom:20px;  padding-right:162px">
+                    <span>
+                        <span style="padding-right:20px" >员工编号</span>
+                        <el-input style="width:198px" v-model="params.code" placeholder="请输入内容"></el-input>
+                    </span>
+                    <span>
+                        <span style="padding:0 20px" >员工名称</span>
+                        <el-input style="width:198px" v-model="params.name" placeholder="请输入内容"></el-input>
+                    </span>
+                    <span>
+                        <span style="padding: 0 20px" >员工部门</span>
+                        <el-select  v-model="params.deptId" placeholder="请选择">
+                            <el-option label="消防部" :value="0">
+                            </el-option>
+                        </el-select>
+                    </span>
+                    <div class="full" style="margin-top:20px">
+                        <span style="padding: 0 20px 0 0" >员工职务</span>
+                        <el-select  v-model="params.job" placeholder="请选择">
+                            <el-option label="消防工程师" :value="0">
+                            </el-option>
+                        </el-select>
+                        <span style="padding:0 20px" >入职时间</span>
+                        <el-date-picker style="margin-right:20px"
+                        v-model="range"
+                        type="datetimerange"
+                        range-separator="至"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期">
+                        </el-date-picker>
+                    </div>
+                    <div class="btn-box">
+                        <el-button type="primary" round>搜索</el-button>
+                        <el-button round @click="reset">重置</el-button>
+                    </div>
+                </div>
+
+
+                <div class="full  tb-style">
+                    <el-table
+                    :data="subTableData"
+                    height="500"
+                    style="width: 100%">
+                        <el-table-column
+                            prop="id"
+                            label="员工编号">
+                        </el-table-column>
+                        <el-table-column
+                            prop="name"
+                            label="姓名">
+                        </el-table-column>
+                        <el-table-column
+                            prop="sexy"
+                            label="性别">
+                        </el-table-column>
+                        <el-table-column
+                            prop="deptName"
+                            label="部门">
+                        </el-table-column>
+                        <el-table-column
+                            prop="job"
+                            label="职务">
+                        </el-table-column>
+                        <el-table-column
+                            prop="time"
+                            label="入职时间">
+                        </el-table-column>
+                        <el-table-column label="操作" width="60"  type="expand">
+                            <template slot-scope="props">
+                                <div class="group-box">
+                                    <div class="group max3">
+                                        <div class="label">员工编号</div>
+                                        <div class="content">{{props.row.id}}</div>
+                                    </div>
+                                    <div class="group max3">
+                                        <div class="label">姓名</div>
+                                        <div class="content">{{props.row.name}}</div>
+                                    </div>
+                                    <div class="group max3">
+                                        <div class="label">性别</div>
+                                        <div class="content">{{props.row.sexy}}</div>
+                                    </div>
+                                    <div class="group max3">
+                                        <div class="label">部门</div>
+                                        <div class="content">{{props.row.deptName}}</div>
+                                    </div>
+                                    <div class="group max3">
+                                        <div class="label">职务</div>
+                                        <div class="content">{{props.row.job}}</div>
+                                    </div>
+                                    <div class="group max3">
+                                        <div class="label">入职时间</div>
+                                        <div class="content">{{props.row.time}}</div>
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </div>
+                <div class="full" style="text-align:center;padding-top:30px">
+                    <el-pagination
+                        background
+                        layout="prev, pager, next"
+                        :current-page.sync="params.pageNum"
+                        :page-count="params.pageSize"
+                        :total="total">
+                    </el-pagination>
+                </div>
+            </div>
+            <div class="sub-title" v-if="!showPeople">工商信息</div>
+            <div class="group-box" v-if="!showPeople">
+                <div class="group max3">
+                    <div class="label">统一社会信用代码</div>
+                    <div class="content">{{data.id}}</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">企业名称</div>
+                    <div class="content">{{data.name}}</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">法定代表人</div>
+                    <div class="content">{{data.master}}</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">登记状态</div>
+                    <div class="content">在营</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">成立日期</div>
+                    <div class="content">2000年1月1日</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">注册资本</div>
+                    <div class="content">100000000</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">实缴资本</div>
+                    <div class="content">100000000</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">组织机构代码</div>
+                    <div class="content">{{data.id}}</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">工商注册号</div>
+                    <div class="content">{{data.id}}</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">纳税人识别号</div>
+                    <div class="content">{{data.id}}</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">企业类型</div>
+                    <div class="content">化工</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">营业期限</div>
+                    <div class="content">2070年1月1日</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">纳税人资质</div>
+                    <div class="content">一般纳税人</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">人员规模</div>
+                    <div class="content">0-200人</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">参保人数</div>
+                    <div class="content cursor-pointer" @click="showPeople=true">{{data.peopleCount}}</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">核准日期</div>
+                    <div class="content">2020年1月1日</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">所属地区</div>
+                    <div class="content">{{data.city}}</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">登记机关</div>
+                    <div class="content">工商局</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">进出口企业代码</div>
+                    <div class="content">{{data.id}}</div>
+                </div>
+                <div class="group max3">
+                    <div class="label">国标行业</div>
+                    <div class="content"></div>
+                </div>
+                <div class="group max3">
+                    <div class="label">英文名</div>
+                    <div class="content"></div>
+                </div>
+                <div class="group max1">
+                    <div class="label">注册地址</div>
+                    <div class="content">{{data.address}}</div>
+                </div>
+                <div class="group max1">
+                    <div class="label">通信地址</div>
+                    <div class="content">{{data.address}}</div>
+                </div>
+                <div class="group max1">
+                    <div class="label">经营范围</div>
+                    <div class="content">化工</div>
+                </div>
+            </div>
+            <div class="sub-title" v-if="!showPeople">关联危险化学品</div>
+            <div class="group-box" v-if="!showPeople">
+                <div class="group">
+                    <div class="content">氯气</div>
+                </div>
+                <div class="group">
+                    <div class="content">硫酸</div>
+                </div>
+            </div>
+            <div class="sub-title" v-if="!showPeople">周边环境</div>
+            <div class="group-box" v-if="!showPeople">
+                <div class="group">
+                    <div class="content">山清水秀</div>
+                </div>
+            </div>
+            <div class="sub-title" v-if="!showPeople">许可证</div>
+            <div class="group-box" v-if="!showPeople">
+                <div class="group max1">
+                    <div class="label">安全生产许可证</div>
+                    <div class="content">{{data.id}}</div>
+                </div>
+                <div class="group max1">
+                    <div class="label">危险品销售许可证</div>
+                    <div class="content">{{data.id}}</div>
+                </div>
+            </div>
+        </div>
+        <div class="full tb-style" v-if="currentTab===1">
+            <div class="sub-title">重大危险源</div>
+            <div class="full">
+                <el-table
+                height="180"
+                :data="dangrousData"
+                style="width: 100%">
+                    <el-table-column
+                        prop="name"
+                        label="危险源名称"
+                        width="180">
+                    </el-table-column>
+                    <el-table-column
+                        prop="type"
+                        label="危险源类型"
+                        width="180">
+                    </el-table-column>
+                    <el-table-column
+                        prop="level"
+                        label="危险源等级">
+                    </el-table-column>
+                    <el-table-column
+                        prop="status"
+                        label="当前状态">
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="sub-tabs">
+                <div class="sub-tab" :class="{active:currenSubtTab === index}" v-for="(item,index) in subTabs" :key="index" @click="changeSubTab(index)">{{item}}</div>
+            </div>
+            <div class="full" style="margin-bottom:20px;text-align:right">
+                <span style="padding-right:20px" v-if="currenSubtTab!==1">备案时间</span>
+                <span style="padding-right:20px" v-else>风险分析单元</span>
+                <el-date-picker
+                v-if="currenSubtTab!==1"
+                v-model="range"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期">
+                </el-date-picker>
+
+                <el-select v-else v-model="params.unit" placeholder="请选择">
+                    <el-option label="炼化油生产单元" :value="0">
+                    </el-option>
+                </el-select>
+            </div>
+            <div class="full">
+                <el-table
+                :data="subTableData"
+                height="260"
+                style="width: 100%">
+                    <el-table-column
+                        v-if="currenSubtTab===0"
+                        prop="operationType"
+                        label="作业类型"
+                        width="180">
+                    </el-table-column>
+                    <el-table-column
+                        v-if="currenSubtTab===0"
+                        prop="enterprise"
+                        label="施工方"
+                        width="180">
+                    </el-table-column>
+                    <el-table-column
+                        v-if="currenSubtTab===0"
+                        prop="operationStart"
+                        label="备案时间">
+                    </el-table-column>
+                    <el-table-column
+                        v-if="currenSubtTab===0"
+                        prop="operationStart"
+                        label="开始时间">
+                    </el-table-column>
+                    <el-table-column
+                        v-if="currenSubtTab===0"
+                        prop="operationEnd"
+                        label="结束时间">
+                    </el-table-column>
+
+
+                    <el-table-column
+                        v-if="currenSubtTab===1"
+                        prop="operationEnd"
+                        label="风险分析单元">
+                    </el-table-column>
+                    <el-table-column
+                        v-if="currenSubtTab===1"
+                        prop="operationEnd"
+                        label="风险描述">
+                    </el-table-column>
+                    <el-table-column
+                        v-if="currenSubtTab===1"
+                        prop="operationEnd"
+                        label="风险等级">
+                    </el-table-column>
+                    <el-table-column
+                        v-if="currenSubtTab===1"
+                        prop="operationEnd"
+                        label="风险因素">
+                    </el-table-column>
+                    <el-table-column
+                        v-if="currenSubtTab===1"
+                        prop="operationEnd"
+                        label="管控措施">
+                    </el-table-column>
+                    <el-table-column
+                        v-if="currenSubtTab===1"
+                        prop="operationEnd"
+                        label="负责人">
+                    </el-table-column>
+
+
+                    <el-table-column
+                        v-if="currenSubtTab===2"
+                        prop="risk"
+                        label="隐患名称">
+                    </el-table-column>
+                    <el-table-column
+                        v-if="currenSubtTab===2"
+                        prop="status"
+                        label="隐患状态">
+                    </el-table-column>
+                    <el-table-column
+                        v-if="currenSubtTab===2"
+                        prop="reportingDate"
+                        label="上报时间"
+                        width="180">
+                    </el-table-column>
+                    <el-table-column
+                        v-if="currenSubtTab===2"
+                        prop="hiddenDangerDetails"
+                        label="隐患详情"
+                        width="220">
+                    </el-table-column>
+                    <el-table-column
+                        v-if="currenSubtTab===2"
+                        prop="rectificationMeasure"
+                        label="整改措施">
+                    </el-table-column>
+                    <el-table-column
+                        v-if="currenSubtTab===2"
+                        prop="period"
+                        label="整改期限">
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="full" style="text-align:center;padding-top:30px">
+                <el-pagination
+                    background
+                    layout="prev, pager, next"
+                    :current-page.sync="params.pageNum"
+                    :page-count="params.pageSize"
+                    :total="total">
+                </el-pagination>
+            </div>
+        </div>
+        <div class="full tb-style" v-if="currentTab===2">
+            <!-- <div class="sub-title">重大危险源</div> -->
+            <div class="full" style="margin-bottom:20px;text-align:right">
+                <span style="padding-right:20px" >报警时间</span>
+                <el-date-picker
+                v-model="range"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期">
+                </el-date-picker>
+            </div>
+            <div class="full">
+                <el-table
+                :data="subTableData"
+                height="600"
+                style="width: 100%">
+                    <el-table-column
+                        prop="typeName"
+                        label="告警类型">
+                    </el-table-column>
+                    <el-table-column
+                        prop="content"
+                        label="告警内容"
+                        width="250">
+                    </el-table-column>
+                    <el-table-column
+                        prop="level"
+                        label="告警级别">
+                    </el-table-column>
+                    <el-table-column
+                        prop="time"
+                        label="告警时间">
+                    </el-table-column>
+                    <el-table-column
+                        prop="device"
+                        label="报警设备">
+                    </el-table-column>
+                    <el-table-column label="操作" width="60"  type="expand">
+                            <template slot-scope="props">
+                                <div class="group-box">
+                                    <div class="group max3">
+                                        <div class="label">告警类型</div>
+                                        <div class="content">{{props.row.typeName}}</div>
+                                    </div>
+                                    <div class="group max3">
+                                        <div class="label">告警内容</div>
+                                        <div class="content">{{props.row.content}}</div>
+                                    </div>
+                                    <div class="group max3">
+                                        <div class="label">告警级别</div>
+                                        <div class="content">{{props.row.level}}</div>
+                                    </div>
+                                    <div class="group max3">
+                                        <div class="label">告警时间</div>
+                                        <div class="content">{{props.row.time}}</div>
+                                    </div>
+                                    <div class="group max3">
+                                        <div class="label">报警设备</div>
+                                        <div class="content">{{props.row.device}}</div>
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                </el-table>
+            </div>
+            <div class="full" style="text-align:center;padding-top:30px">
+                <el-pagination
+                    background
+                    layout="prev, pager, next"
+                    :current-page.sync="params.pageNum"
+                    :page-count="params.pageSize"
+                    :total="total">
+                </el-pagination>
+            </div>
+        </div>
+        <div class="full tb-style" v-if="currentTab===3">
+            <!-- <div class="sub-title">重大危险源</div> -->
+            <div class="full" style="margin-bottom:20px;text-align:left; padding-right:162px">
+
+                <span style="padding-right:20px" >事件类型</span>
+                <el-select  v-model="params.type" placeholder="请选择">
+                    <el-option label="火灾" :value="0">
+                    </el-option>
+                </el-select>
+                <span style="padding:0 20px 0 20px" >报警时间</span>
+                <el-date-picker style="margin-right:20px"
+                v-model="range"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期">
+                </el-date-picker>
+                <div class="btn-box">
+                    <el-button type="primary" round>搜索</el-button>
+                    <el-button round @click="reset">重置</el-button>
+                </div>
+            </div>
+            <div class="full">
+                <el-table
+                :data="subTableData"
+                height="600"
+                style="width: 100%">
+                    <el-table-column
+                        prop="typeName"
+                        label="事件类型">
+                    </el-table-column>
+                    <el-table-column
+                        prop="time"
+                        label="报警时间"
+                        width="250">
+                    </el-table-column>
+                    <el-table-column
+                        prop="time"
+                        label="结束时间">
+                    </el-table-column>
+                    <el-table-column
+                        prop="level"
+                        label="响应等级">
+                    </el-table-column>
+                    <el-table-column
+                        prop="content"
+                        label="事件描述">
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="full" style="text-align:center;padding-top:30px">
+                <el-pagination
+                    background
+                    layout="prev, pager, next"
+                    :current-page.sync="params.pageNum"
+                    :page-count="params.pageSize"
+                    :total="total">
+                </el-pagination>
+            </div>
+        </div>
+
+        <div class="full tb-style" v-if="currentTab===4">
+            <div class="full" style="margin-bottom:20px;text-align:left">
+                <span style="padding-right:20px" >年份</span>
+                <el-date-picker
+                v-model="currentYear"
+                type="year"
+                placeholder="选择年">
+                </el-date-picker>
+            </div>
+            <div class="full">
+                <el-table
+                :data="powerTable"
+                height="400"
+                style="width: 100%">
+                    <el-table-column
+                        prop="month"
+                        label="月份">
+                    </el-table-column>
+                    <el-table-column
+                        prop="ele"
+                        label="用电量">
+                    </el-table-column>
+                    <el-table-column
+                        prop="water"
+                        label="用水量">
+                    </el-table-column>
+                    <el-table-column
+                        prop="gas"
+                        label="燃气量">
+                    </el-table-column>
+                    <el-table-column
+                        prop="waterGas"
+                        label="蒸汽量">
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="title">能源超限告警记录</div>
+            <div class="full">
+                <el-table
+                :data="subTableData"
+                height="300"
+                style="width: 100%">
+                    <el-table-column
+                        prop="typeName"
+                        label="告警类型">
+                    </el-table-column>
+                    <el-table-column
+                        prop="content"
+                        label="告警内容"
+                        width="250">
+                    </el-table-column>
+                    <el-table-column
+                        prop="level"
+                        label="告警级别">
+                    </el-table-column>
+                    <el-table-column
+                        prop="time"
+                        label="告警时间">
+                    </el-table-column>
+                    <el-table-column
+                        prop="device"
+                        label="报警设备">
+                    </el-table-column>
+                    <el-table-column label="操作" width="60"  type="expand">
+                            <template slot-scope="props">
+                                <div class="group-box">
+                                    <div class="group max3">
+                                        <div class="label">告警类型</div>
+                                        <div class="content">{{props.row.typeName}}</div>
+                                    </div>
+                                    <div class="group max3">
+                                        <div class="label">告警内容</div>
+                                        <div class="content">{{props.row.content}}</div>
+                                    </div>
+                                    <div class="group max3">
+                                        <div class="label">告警级别</div>
+                                        <div class="content">{{props.row.level}}</div>
+                                    </div>
+                                    <div class="group max3">
+                                        <div class="label">告警时间</div>
+                                        <div class="content">{{props.row.time}}</div>
+                                    </div>
+                                    <div class="group max3">
+                                        <div class="label">报警设备</div>
+                                        <div class="content">{{props.row.device}}</div>
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                </el-table>
+            </div>
+            <div class="full" style="text-align:center;padding-top:30px">
+                <el-pagination
+                    background
+                    layout="prev, pager, next"
+                    :current-page.sync="params.pageNum"
+                    :page-count="params.pageSize"
+                    :total="total">
+                </el-pagination>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+<script lang="ts">
+import {Component,Emit,Prop,PropSync,Vue} from 'vue-property-decorator';
+import TitleComponent from '@/components/title.component.vue';
+import ParkFileService from "@/service/park.service"
+import echartsOpt from "./echarts"
+import closeOpt from "@/utils/echarts"
+@Component({
+    components:{
+        TitleComponent,
+    },
+})
+export default class DetailComponent extends Vue {
+    @PropSync("show")
+    showDetail:any;
+    @Prop()
+    data:any;
+    public tabs = ["企业基本信息","企业安全档案","企业环保档案","企业应急档案","企业能源档案"];
+    public currentTab = 0;
+    public subTabs = ["特殊作业备案","风险项清单","隐患清单"];
+    public currenSubtTab = 0;
+    public showPeople = false;
+    public range : Date[]= [];
+    public currentYear:Date = new Date();
+    public powerTable = new Array(12).fill(0).map((item,i)=>{
+        return {
+            month:i+1,
+            ele:Math.floor(Math.random()*500),
+            water:Math.floor(Math.random()*500),
+            gas:Math.floor(Math.random()*500),
+            waterGas:Math.floor(Math.random()*500),
+        }
+    })
+
+    public params = {
+        pageNum:1,
+        pageSize:10,
+        type:0,
+        unit:0
+    }
+    get dangrousData(){
+        return this.$store.state.dangrousList
+    }
+    get subTableData(){
+        if(this.currentTab===1){
+            if(this.currenSubtTab===0){
+                return this.$store.state.dangrousWorkList.slice((this.params.pageNum-1)*this.params.pageSize,this.params.pageSize*this.params.pageNum)
+            }else if(this.currenSubtTab===1){
+                return []
+            }else{
+                return this.$store.state.hiddenDangrousList.slice((this.params.pageNum-1)*this.params.pageSize,this.params.pageSize*this.params.pageNum)
+            }
+        }else if(this.currentTab===2){
+            return this.$store.state.warningList.slice((this.params.pageNum-1)*this.params.pageSize,this.params.pageSize*this.params.pageNum)
+        }else if(this.currentTab===3){
+            return this.$store.state.warningList.slice((this.params.pageNum-1)*this.params.pageSize,this.params.pageSize*this.params.pageNum)
+        }else if(this.currentTab===4){
+            return this.$store.state.warningList.slice((this.params.pageNum-1)*this.params.pageSize,this.params.pageSize*this.params.pageNum)
+        }else{
+            return this.$store.state.peopleList.slice((this.params.pageNum-1)*this.params.pageSize,this.params.pageSize*this.params.pageNum)
+        }
+    };
+    get total(){
+        if(this.currentTab===1){
+            if(this.currenSubtTab===0){
+                return this.$store.state.dangrousWorkList.length
+            }else if(this.currenSubtTab===1){
+                return 0
+            }else{
+                return this.$store.state.hiddenDangrousList.length
+            }
+        }else if(this.currentTab===2){
+            return this.$store.state.warningList.length
+        }else if(this.currentTab===3){
+            return this.$store.state.warningList.length
+        }else if(this.currentTab===4){
+            return this.$store.state.warningList.length
+        }else{
+            return this.$store.state.peopleList.length
+        }
+    }
+    created(){
+        //
+    }
+     public reset(){
+        this.range = [];
+        this.currentYear = new Date();
+        this.params = {
+            pageNum:1,
+            pageSize:10,
+            type:0,
+            unit:0
+        }
+     }
+    public closePage(){
+        this.showDetail = false
+    }
+
+    public changeTab(tab){
+        if(this.currentTab === tab){
+            return
+        }
+        this.reset()
+        this.showPeople = false;
+        this.currentTab = tab
+    }
+
+    public changeSubTab(tab){
+        if(this.currenSubtTab === tab){
+            return
+        }
+        this.currenSubtTab = tab
+    }
+
+    mounted(){
+
+    }
+    destroyed(){
+
+    }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep{
+    .el-table::before{
+        height: 0;
+    }
+    .undefined{
+        .el-icon-arrow-right::before{
+            content:"查看";
+            color: #409EFF;
+            white-space: nowrap;
+        }
+    }
+    .el-table__expand-icon--expanded{
+        transform: none;
+    }
+    .tb-style .el-table .el-table__cell,.el-table .el-table__cell{
+        padding: 3px 0;
+    }
+    .el-input__inner{
+        background: none;
+        color:#FFF
+    }
+    .el-button{
+        background: none;
+        color: #FFF;
+    }
+    .el-button--primary{
+        background: #409EFF;
+    }
+    input{
+        background: none;
+    }
+    .el-date-editor .el-range-input,.el-date-editor .el-range-separator{
+        color: #FFF;
+    }
+    .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
+        background: none;
+        border:1px solid #FFF;
+        color: #FFF;
+    }
+    .el-pagination.is-background .el-pager li:not(.disabled).active{
+        background: rgba(216,216,216,0.3);
+    }
+}
+.col-flex{
+    display: flex;
+    flex-direction: column;
+}
+.full{
+    width:100%;
+    position: relative;
+}
+.detail-box{
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: rgba($color: #000000, $alpha: 0.7);
+    z-index: 999;
+    .back{
+        position: absolute;
+        left:40px;
+        top: 90px;
+        cursor: pointer;
+        color: #FFF;
+        z-index: 9999;
+        width: 100px;
+        height: 34px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border:1px solid #FFF;
+        border-radius: 17px;
+        i{
+            margin-right: 10px;
+        }
+
+
+    }
+    .left{
+        width: 295px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        .tabs{
+            width: 260px;
+            .tab{
+                width: 100%;
+                height: 90px;
+                background: rgba($color: $bg-color, $alpha: 0.3);
+                border-radius: 0 10px 10px 0;
+                color:#D4E5FF;
+                display: flex;
+                font-size: 20px;
+                align-items: center;
+                justify-content: center;
+                position: relative;
+                cursor: pointer;
+                margin-bottom: 30px;
+                &::before{
+                    width: 6px;
+                    height: 100%;
+                    content: "";
+                    position: absolute;
+                    left: 0;
+                    background: linear-gradient(180deg, #F0F7FC 0%, #C2EDFF 100%);
+                }
+                &:last-child{
+                    margin-bottom: 0;
+                }
+                &.active{
+                    border: 2px solid #7FB0FF;
+                    border-left: none;
+                    color:#7FB0FF
+                }
+                &.active::before{
+                    background: linear-gradient(180deg, #B5DCFF 0%, #7FB0FF 100%);
+                }
+                .svg{
+                    margin-right: 25px;
+                }
+            }
+        }
+    }
+    .right{
+        width: 1px;
+        flex: 1;
+        height: 100%;
+        margin-left: 30px;
+        display: flex;
+        flex-direction: column;
+        color: $font-color;
+        overflow-y: auto;
+        padding: 100px 40px 50px;
+        .title{
+            font-size: 20px;
+            line-height: 28px;
+            margin-bottom: 20px;
+        }
+        .sub-title{
+            font-size: 14px;
+            margin-bottom: 10px;
+        }
+        .group-box{
+            width: 100%;
+            margin-bottom: 20px;
+            display: flex;
+            flex-wrap: wrap;
+            border-bottom: 1px solid #FFF;
+            border-left: 1px solid #FFF;
+            .group{
+                width: 1px;
+                flex: 1;
+                display: flex;
+                border: 1px solid #FFF;
+                border-bottom: 0;
+                border-left: 0;
+                &.max3{
+                    min-width: 33%;
+                }
+                &.max1{
+                    min-width: 100%;
+                }
+                .label{
+                    width: 110px;
+                    height: 32px;
+                    background: rgba(128,128,128,0.6);
+                    line-height: 32px;
+                    text-align: center;
+                    border-right: 1px solid #FFF;
+                    font-size: 12px;
+                }
+                .content{
+                    width: 1px;
+                    flex: 1;
+                    height: 32px;
+                    line-height: 32px;
+                    text-indent: 15px;
+                    font-size: 12px;
+                }
+            }
+        }
+        .sub-tabs{
+            margin: 30px 0 10px;
+            display: flex;
+            .sub-tab{
+                line-height: 100%;
+                font-size: 14px;
+                padding-bottom: 10px;
+                cursor: pointer;
+                margin-right:120px ;
+                &.active{
+                    border-bottom: 2px solid #FFF;
+                }
+            }
+        }
+        .btn-box{
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
+    }
+
+}
+
+</style>
diff --git a/src/components/companyFile/echarts.ts b/src/components/companyFile/echarts.ts
new file mode 100644
index 0000000..49ac376
--- /dev/null
+++ b/src/components/companyFile/echarts.ts
@@ -0,0 +1,104 @@
+const carOpt = {
+    series: [
+    {
+        type: 'gauge',
+        startAngle: 180,
+        endAngle: 0,
+        center: ['50%', '75%'],
+        radius: '100%',
+        min: 0,
+        max: 1,
+        splitNumber: 8,
+        axisLine: {
+        lineStyle: {
+            width: 4,
+            color: [
+                [0.25, '#FF6E76'],
+                [0.5, '#FDDD60'],
+                [0.75, '#58D9F9'],
+                [1, '#7CFFB2']
+            ]
+        }
+        },
+        pointer: {
+        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
+        length: '12%',
+        width: 20,
+        offsetCenter: [0, '-50%'],
+        itemStyle: {
+            color: 'inherit'
+        }
+        },
+        axisTick: {
+            length: 6,
+            lineStyle: {
+                color: '#FFF',
+                width: 1
+            }
+        },
+        splitLine: {
+            length: 10,
+            lineStyle: {
+                color: '#FFF',
+                width: 3
+            }
+        },
+        axisLabel: {
+            color: '#FFF',
+            fontSize: 12,
+            distance: -30,
+            rotate: 'tangential',
+        },
+        title: {
+        offsetCenter: [0, '-10%'],
+        fontSize: 12,
+        color:"#FFF"
+        },
+        detail: {
+        fontSize: 16,
+        offsetCenter: [0, '-35%'],
+        valueAnimation: true,
+        color: 'inherit'
+        },
+        data: [
+        {
+            value: 0.7,
+            name: 'Grade Rating'
+        }
+        ]
+    }
+    ]
+}
+
+const wordOpt = {
+    tooltip: {
+        show:false
+    },
+    series: [{
+        type: 'wordCloud',
+        gridSize: 20,
+        sizeRange: [12, 50],
+        rotationRange: [0, 0],
+        shape: 'circle',
+        textStyle: {
+            normal: {
+                color: function () {
+                    return 'rgb(' + [
+                        Math.round(Math.random() * 255),
+                        Math.round(Math.random() * 255),
+                        Math.round(Math.random() * 255)
+                    ].join(',') + ')';
+                }
+            },
+            emphasis: {
+            }
+        },
+        data: [
+            // ...
+        ]
+    }]
+};
+  export default{
+    carOpt,
+    wordOpt
+  }
\ No newline at end of file
diff --git a/src/components/companyFile/left.component.vue b/src/components/companyFile/left.component.vue
new file mode 100644
index 0000000..c4c2f0e
--- /dev/null
+++ b/src/components/companyFile/left.component.vue
@@ -0,0 +1,272 @@
+<template>
+    <div class="park-file-left  animate__animated animate__fadeInLeft">
+        <TitleComponent>在管企业</TitleComponent>
+        <div class="list-box">
+            <div class="list">
+                <span>姓名</span><span>参保人数</span>
+            </div>
+            <div class="list-scroll-box">
+                <div class="list cursor-pointer animate__animated " @click="onSelect(item)" v-list="index" v-for="(item,index) in companyList" :key="index">
+                    <span>{{item.name}}</span><span>{{item.peopleCount}}</span>
+                </div>
+            </div>
+        </div>
+        <TitleComponent >企业安全评分</TitleComponent>
+        <div class="cards-box">
+            <div class="card">
+                <div class="count">1</div>
+                <p class="text">95-100分企业</p>
+            </div>
+            <div class="card">
+                <div class="count">
+                    1
+                </div>
+                <p class="text">90-95分企业</p>
+            </div>
+        </div>
+        <div class="cards-box">
+            <div class="card">
+                <div class="count">
+                    0
+                </div>
+                <p class="text">80-90分企业</p>
+            </div>
+            <div class="card">
+                <div class="count">
+                    0
+                </div>
+                <p class="text">80分以下企业</p>
+            </div>
+        </div>
+        <TitleComponent >企业环保评分TOP5</TitleComponent>
+        <hbt-echarts  className="charts-box" :options="options"  @onChartInit="getEcharts($event)"></hbt-echarts>
+    </div>
+</template>
+<script lang="ts">
+import {Component,Emit,PropSync,Vue} from 'vue-property-decorator';
+import TitleComponent from '@/components/title.component.vue';
+import ParkFileService from "@/service/park.service"
+import echartsOpt from "@/utils/echarts"
+@Component({
+    components:{
+        TitleComponent,
+    },
+    directives:{
+        list:{
+            bind:(el,binding)=>{
+                const timer = (binding.value+1)*500
+                setTimeout(()=>{
+                    el.classList.add("animate__fadeInRight")
+                },timer)
+            },
+            // update:(el,binding)=>{
+            //     el.classList.remove("animate__fadeInRight")
+            //     const timer = (binding.value+1)*500
+            //     setTimeout(()=>{
+            //         el.classList.add("animate__fadeInRight")
+            //     },timer)
+            // },
+        }
+    }
+})
+export default class CompanyFileLeftComponent extends Vue {
+    public parkFileService = new ParkFileService();
+    public options = {
+        grid:{
+            left:0,
+            top:40,
+            right:40,
+            bottom:0
+        },
+        xAxis: {
+            max: 100,
+            splitLine:{
+            show:false
+            },
+            axisLabel:{
+            show:false
+            }
+        },
+        yAxis: {
+            type: 'category',
+            data: [],
+            inverse:true,
+            axisLine:{
+            show:false
+            },
+            axisLabel:{ 
+                inside:true,
+                verticalAlign:'bottom',
+                lineHeight:36,
+                color:"#FFF",
+                align:"left"
+            },
+            axisTick:{
+            show:false
+            }
+        },
+        series: [
+            {
+            showBackground:true,
+            realtimeSort: true,
+            name: 'X',
+            type: 'bar',
+            barWidth:10,
+            data: [],
+            label: {
+                show: true,
+                color:"#FFF",
+                position: 'right',
+                valueAnimation: true
+            }
+            }
+        ],
+    };
+    public chart:any;
+    public timer:any;
+    get companyList(){
+        return this.$store.state.companyList
+    }
+    @Emit("onSelect")
+    onSelect(data){
+        //
+    }
+
+    created(){
+        //
+        this.changeEcharts()
+    }
+
+    public getEcharts(chart){
+        chart.resize()
+        this.chart = chart;
+        this.timer =setInterval(()=>{
+            this.changeEcharts()
+        },4000)
+
+    }
+
+
+    public changeEcharts() {
+        if(this.chart){
+            this.chart.resize()
+        }
+        
+        this.options.yAxis.data = this.companyList.map(item=>item.name)
+        this.options.series[0].data = this.companyList.map((item,index)=>{
+                return Math.floor(Math.random()*100)
+        })
+        //
+
+    }
+    mounted(){
+        if(this.chart){
+            this.chart.resize()
+        }
+        
+    }
+    destroyed(){
+        clearInterval(this.timer);
+        this.timer = null;
+    }
+}
+</script>
+<style lang="scss" scoped>
+@keyframes flip2{
+	0%{
+		transform:perspective(1000px) rotateX(0);
+	}
+	100%{
+		transform:perspective(1000px) rotateX(360deg);
+	}
+}
+.full{
+    width: 100%;
+}
+.park-file-left{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .cards-box{
+        display: flex;
+        justify-content: space-between;
+        margin-top: 25px;
+        .card{
+            width: 140px;
+            color: #E8E8E8;
+            text-align: center;
+            line-height: 28px;
+	        animation: flip2 2s 1 .2s ease both;
+            // animation: flips 2s ease-in 5s infinite both;
+            .icon{
+                width: 7px;
+                height: 7px;
+                display: inline-block;
+                background: #88E29F;
+                border-radius: 50%;
+                margin: 0 6px;
+            }
+            .text{
+                font-family: "logo";
+            }
+            .blue{
+                font-family: "logo";
+                color: #7FB0FF;
+            }
+            .count{
+                font-family: "logo";
+                border-bottom:2px solid rgba($color: #D8D8D8, $alpha: 0.4);
+            }
+        }
+
+    }
+    .cards-box+.cards-box{
+        margin-bottom: 25px;
+    }
+    .charts-box{
+        width: 100%;
+        height: 320px;
+    }
+    .list-box{
+        width: 100%;
+        height: 1px;
+        flex: 1;
+        font-size: 14px;
+        margin: 20px 0;
+        display: flex;
+        flex-direction: column;
+        .list-scroll-box{
+            flex: 1;
+            height: 1px;
+            overflow-y: auto;
+            .list{
+                background: none;
+                opacity: 0;
+            }
+        }
+        .list{
+            background: rgba($color: #D8D8D8, $alpha: 0.4);
+            color: rgba($color: $font-color, $alpha: 0.8);
+            height: 32px;
+            display: flex;
+            align-items: center;
+            &:nth-child(even){
+                background: #808080;
+            }
+            span{
+                flex: 1;
+                padding-left: 20px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                &:last-child{
+                    flex: 1.5;
+                }
+            }
+        }
+    }
+
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/companyFile/pic.component.vue b/src/components/companyFile/pic.component.vue
new file mode 100644
index 0000000..6a5b0c7
--- /dev/null
+++ b/src/components/companyFile/pic.component.vue
@@ -0,0 +1,442 @@
+<template>
+<div class="pic-box" v-if="!showDetail">
+    <div class="back" @click="closePage">
+        <i class="el-icon-back"></i>返回
+    </div>
+    <div class="left" @click="openDetail">
+        <TitleComponent :showMore="true" @change-more="openDetail">企业信息</TitleComponent>
+        <div class="info">
+            统一信用代码： <span>{{pageData.id}}</span>
+        </div>
+        <div class="info">
+            企业名称： <span>{{pageData.name}}</span>
+        </div>
+        <TitleComponent>企业安全评分</TitleComponent>
+        <hbt-echarts className="charts-box" :options="gugeOpt.opt1"  @onChartInit="getEcharts($event,1)"></hbt-echarts>
+        <TitleComponent>企业环保评分</TitleComponent>
+        <hbt-echarts className="charts-box" :options="gugeOpt.opt2"  @onChartInit="getEcharts($event,2)"></hbt-echarts>
+        <TitleComponent>企业能耗评分</TitleComponent>
+        <hbt-echarts className="charts-box" :options="gugeOpt.opt3"  @onChartInit="getEcharts($event,3)"></hbt-echarts>
+    </div>
+    <div class="right">
+        <div class="charts-box">
+            <div class="chart-box">
+                <TitleComponent>重大危险源头</TitleComponent>
+                <hbt-echarts className="chart" :options="pieOpt"  @onChartInit="getEcharts($event,4)"></hbt-echarts>
+            </div>
+            <div class="chart-box">
+                <TitleComponent>备案作业</TitleComponent>
+                <hbt-echarts className="chart" :options="radarOpt"  @onChartInit="getEcharts($event,5)"></hbt-echarts>
+            </div>
+            <div class="chart-box">
+                <TitleComponent>碳排放超标告警</TitleComponent>
+                <hbt-echarts className="chart" :options="lineOpt"  @onChartInit="getEcharts($event,6)"></hbt-echarts>
+            </div>
+        </div>
+        <div class="charts-box">
+            <div class="chart-box">
+                <TitleComponent>企业公开财报</TitleComponent>
+                <hbt-echarts className="chart" :options="mixOpt"  @onChartInit="getEcharts($event,7)"></hbt-echarts>
+            </div>
+            <div class="chart-box">
+                <TitleComponent>企业规模</TitleComponent>
+                <hbt-echarts className="chart" :options="mixOpt"  @onChartInit="getEcharts($event,8)"></hbt-echarts>
+            </div>
+            <div class="chart-box">
+                <TitleComponent>企业风险隐患变化趋势</TitleComponent>
+                <hbt-echarts className="chart" :options="lineOpt2"  @onChartInit="getEcharts($event,9)"></hbt-echarts>
+            </div>
+        </div>
+        <div class="charts-box">
+            <div class="chart-box">
+                <TitleComponent>应急物资完备度</TitleComponent>
+                <div class="chart">
+                    <div class="text">
+                        <div class="count">{{processData.goods}}%</div>
+                        已完成
+                    </div>
+                    <el-progress type="circle" :width="150" define-back-color="rgba(255,255,255,0.16)" :format="textFormat" :stroke-width="15" :percentage="processData.goods" :color="colors2"></el-progress>
+                </div>
+            </div>
+            <div class="chart-box">
+                <TitleComponent>减排目标完成度</TitleComponent>
+                <div class="chart">
+                    <div class="text">
+                        <div class="count">{{processData.complete}}%</div>
+                        已完成
+                    </div>
+                    <el-progress type="circle" :width="150" define-back-color="rgba(255,255,255,0.16)" :format="textFormat" :stroke-width="15" :percentage="processData.complete" :color="colors"></el-progress>
+                </div>
+            </div>
+            <div class="chart-box long">
+                <TitleComponent>企业关键词</TitleComponent>
+                <hbt-echarts className="chart" :options="wordOpt"   @onChartInit="getEcharts($event,10)"></hbt-echarts>
+            </div>
+        </div>
+    </div>
+</div>
+<DetailComponent v-else :data="pageData" :show.sync="showDetail"></DetailComponent>
+</template>
+<script lang="ts">
+import {Component,Emit,Prop,PropSync,Vue} from 'vue-property-decorator';
+import TitleComponent from '@/components/title.component.vue';
+import ParkFileService from "@/service/park.service"
+import echartsOpt from "./echarts"
+import closeOpt from "@/utils/echarts"
+import DetailComponent from "./detail.component.vue"
+@Component({
+    components:{
+        TitleComponent,
+        DetailComponent
+    },
+})
+export default class PicComponent extends Vue {
+    @PropSync("data")
+    pageData:any;
+
+
+    public pieOpt =  JSON.parse(JSON.stringify(closeOpt.closePieOpt));
+    public radarOpt =  JSON.parse(JSON.stringify(closeOpt.radarOpt));
+    public lineOpt = JSON.parse(JSON.stringify(closeOpt.closeLineOpt));
+    public mixOpt = JSON.parse(JSON.stringify(closeOpt.closeLineOpt));
+    public lineOpt2= JSON.parse(JSON.stringify(closeOpt.closeLineOpt));
+
+    public wordOpt = echartsOpt.wordOpt;
+
+    public colors = [
+        {color: '#FF5959', percentage: 20},
+        {color: '#FFA900', percentage: 40},
+        {color: '#FADFA4', percentage: 60},
+        {color: '#C9FFD7', percentage: 80},
+        {color: '#76c893', percentage: 100}
+    ];
+    public colors2 = [
+        {color: '#FF5959', percentage: 20},
+        {color: '#FFA900', percentage: 40},
+        {color: '#FADFA4', percentage: 60},
+        {color: '#947FEA', percentage: 80},
+        {color: '#7DAEFF', percentage: 100}
+    ]
+
+    public processData = {
+        goods:70,
+        complete:65
+    }
+
+    public gugeOpt = {
+        opt1:JSON.parse(JSON.stringify(echartsOpt.carOpt)),
+        opt2:JSON.parse(JSON.stringify(echartsOpt.carOpt)),
+        opt3:JSON.parse(JSON.stringify(echartsOpt.carOpt)),
+    }
+    public gugeChart = {
+        chart1:null,
+        chart2:null,
+        chart3:null,
+        chart4:null,
+        chart5:null,
+        chart6:null,
+        chart7:null,
+        chart8:null,
+        chart9:null,
+        chart10:null,
+    }
+    public timer:any = null;
+
+    public showDetail = false;
+    chart:any = {}
+    created(){
+        this.rebuildPie();
+        this.rebuildRadar();
+        this.rebuildLine();
+        this.rebuildMix();
+        for(const key in this.gugeOpt){
+            const opt = this.gugeOpt[key]
+
+            opt.series[0].data = [{
+                value:+Math.random().toFixed(2),
+                name:key==="opt1"?"安全评分":key==="opt2"?"环保评分":"能耗评分"
+            }]
+            opt.series[0].axisLabel.formatter = (value: any) => {
+                if (value === 0.875) {
+                return '优';
+                } else if (value === 0.625) {
+                return '良';
+                } else if (value === 0.375) {
+                return '中';
+                } else if (value === 0.125) {
+                return '差';
+                }
+                return '';
+            }
+            opt.series[0].detail.formatter = (value: number)=> {
+                return Math.round(value * 100) + '';
+            }
+        }
+        //
+    }
+
+    public openDetail(){
+        this.showDetail = true;
+    }
+
+    public rebuildPie(){
+        this.pieOpt.series[0].color = ['#FFFFFF',"#7FB0FF", "#FADFA4", '#C9FFD7',"#947FEA"];
+        this.pieOpt.legend= {
+            orient: 'vertical',
+            right: 20,
+            top: 'center',
+            height:100,
+            itemWidth: 10,
+            itemHeight: 10,
+            textStyle: {
+                overflow:"truncate",
+                color: 'rgba(255,255,255,0.8)',
+            },
+        };
+        this.pieOpt.title.text=""
+        this.pieOpt.series[0].data = [{
+            name:"危险工艺",
+            value:34,
+            selected:true
+        },{
+            name:"危险品储存",
+            value:66
+        }]
+    }
+    public rebuildLine(){
+        this.lineOpt.color = ["#947FEA","#7FB0FF"];
+        this.lineOpt2.color = ["#EA7F7F","#FADFA4"];
+        this.lineOpt.series = [{
+            name: '废气超标次数',
+            type: 'line',
+            symbol:"circle",
+            data: [320, 302, 301, 334,220, 182, 191, 234,150, 212, 201, 154]
+        },
+        {
+            name: '废水超标次数',
+            symbol:"circle",
+            type: 'line',
+            data: [120, 132, 101, 134,820, 832, 901, 934,320, 302, 301, 334]
+        }]
+        this.lineOpt2.series = [{
+            name: '风险项',
+            type: 'line',
+            symbol:"circle",
+            data: [320, 302, 301, 334,220, 182, 191, 234,150, 212, 201, 154].map(item=>Math.floor(Math.random()*item))
+        },
+        {
+            name: '隐患项',
+            symbol:"circle",
+            type: 'line',
+            data: [120, 132, 101, 134,820, 832, 901, 934,320, 302, 301, 334].map(item=>Math.floor(Math.random()*item))
+        }]
+    }
+    public rebuildMix(){
+        this.mixOpt.yAxis[1] = JSON.parse(JSON.stringify(this.mixOpt.yAxis[0]));
+        this.mixOpt.color = ["#7FB0FF","#FADFA4"];
+        this.mixOpt.xAxis.data = ["Q1","Q2","Q3","Q4"];
+        this.mixOpt.series = [{
+            name: '企业产值',
+            type: 'bar',
+            barWidth:35,
+            data: [320, 302, 301, 334].map(item=>Math.floor(Math.random()*item))
+        },
+        {
+            name: '净利润',
+            type: 'line',
+            symbol:"circle",
+            yAxisIndex:1,
+            data: [120, 132, 101, 134].map(item=>Math.floor(Math.random()*item))
+        }]
+    }
+
+    public rebuildRadar(){
+        this.radarOpt.color.push('rgba(250,223,164,0.6)');
+        this.radarOpt.radar.indicator = [
+             { text: '动火', max: 1000 },
+             { text: '动土', max: 1000 },
+             { text: '断路', max: 1000 },
+             { text: '吊装', max: 1000 },
+             { text: '高空', max: 1000 },
+             { text: '临时用电', max: 1000 },
+             { text: '受限空间', max: 1000 },
+             { text: '盲板抽堵', max: 1000 },
+        ];
+        this.wordOpt.series[0].data = this.radarOpt.radar.indicator.map(item=>{
+            item.value = Math.floor(Math.random()*item.max);
+            item.name = item.text;
+            item.textStyle =  {
+                color:'rgb(' + [
+                    Math.round(Math.random() * 255),
+                    Math.round(Math.random() * 255),
+                    Math.round(Math.random() * 255)
+                ].join(',') + ')'
+            }
+            return item
+        })
+        this.radarOpt.radar.radius = 65;
+        this.radarOpt.legend = {
+            show:false
+        }
+        this.radarOpt.tooltip.confine = true
+       this.radarOpt.series =[{
+            type: 'radar',
+            data: [{
+                value: new Array(8).fill(0).map(item=>Math.floor(Math.random()*1000)),
+                name: this.pageData.name,
+                areaStyle: {}
+            } ]
+        }];
+    }
+
+    public updateCharts(){
+        for(const key in this.gugeOpt){
+            const opt = this.gugeOpt[key]
+
+            opt.series[0].data = [{
+                value:+Math.random().toFixed(2),
+                name:key==="opt1"?"安全评分":key==="opt2"?"环保评分":"能耗评分"
+            }]
+        }
+    }
+
+    public chartResize(){
+        for(const key in this.gugeChart){
+            const chart = this.gugeChart[key]
+            chart.resize();
+        }
+    }
+    public closePage(){
+        this.pageData = null
+    }
+    public openTable(){
+        //
+    }
+
+    public getEcharts(chart,index){
+        this.gugeChart["chart"+index] = chart;
+        chart.resize();
+        this.timer = setInterval(()=>{
+            this.updateCharts()
+        },5000)
+
+    }
+
+    public textFormat(data){
+        return ""
+    }
+
+    mounted(){
+
+
+    }
+    destroyed(){
+        clearInterval(this.timer);
+        this.timer = null;
+    }
+}
+</script>
+<style lang="scss" scoped>
+.pic-box{
+    width: 100%;
+    height: 100%;
+    padding: 100px 60px 50px;
+    display: flex;
+    position: relative;
+    z-index: 999;
+    .back{
+        position: fixed;
+        left:60px;
+        top: 60px;
+        cursor: pointer;
+        color: #FFF;
+        z-index: 9999;
+        i{
+            margin-right: 10px;
+        }
+
+
+    }
+    .left{
+        width: 295px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        cursor: pointer;
+        .info{
+            margin-top: 20px;
+            color:rgba($color: #FFF, $alpha: 0.6);
+            &:nth-child(3){
+                margin-bottom: 20px;
+            }
+            span{
+                color: #FFF;
+            }
+        }
+        .charts-box{
+            width: 100%;
+            height: 1px;
+            flex: 1;
+
+        }
+    }
+    .right{
+        width: 1px;
+        flex: 1;
+        height: 100%;
+        margin-left: 30px;
+        display: flex;
+        flex-direction: column;
+        .charts-box{
+            width: 100%;
+            height: 1px;
+            flex: 1;
+            display: flex;
+            &:nth-child(2){
+                margin: 25px 0;
+            }
+            .chart-box{
+                height: 100%;
+                width: 1px;
+                flex: 1;
+                background:rgba($color: #000000, $alpha: 0.3);
+                display: flex;
+                flex-direction: column;
+                &.long{
+                    flex: 2;
+                }
+                &:nth-child(2){
+                    margin:  0 25px;
+                }
+                .chart{
+                    width: 100%;
+                    height: 1px;
+                    flex: 1;
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                        .text{
+                            font-size: 16px;
+                            font-weight: 500;
+                            color: rgba($color: $font-color, $alpha: 0.9);
+                            line-height: 22px;
+                            text-align: center;
+                            position: absolute;
+                            left: 50%;
+                            top: 50%;
+                            transform: translate(-50%,-50%);
+                            .count{
+                                font-size: 32px;
+                                color: $font-color;
+                                line-height: 45px;
+                            }
+                        }
+                }
+            }
+        }
+    }
+
+}
+
+</style>
diff --git a/src/components/companyFile/right.component.vue b/src/components/companyFile/right.component.vue
new file mode 100644
index 0000000..467ca1b
--- /dev/null
+++ b/src/components/companyFile/right.component.vue
@@ -0,0 +1,237 @@
+<template>
+    <div class="park-file-right  animate__animated animate__fadeInRight">
+        <TitleComponent>企业上季度产值</TitleComponent>
+        <hbt-echarts className="charts-box" :options="lineOpt"  @onChartInit="getLineEcharts($event)"></hbt-echarts>
+        <TitleComponent>企业告警次数统计</TitleComponent>
+        <div class="tab-box">
+            <div class="tab" :class="{active:currentStaticTab===index}" @click="changeTab(index)" v-for="(item,index) in staticTabs" :key="index">{{item}}</div>
+        </div>
+        <hbt-echarts className="charts-box" :options="radarOpt"  @onChartInit="getRadarEcharts($event)"></hbt-echarts>
+        <TitleComponent>能源消耗趋势</TitleComponent>
+        <hbt-echarts  className="charts-box" :options="barOpt"  @onChartInit="getBarEcharts($event)"></hbt-echarts>
+    </div>
+</template>
+<script lang="ts">
+import {Component,Emit,PropSync,Vue} from 'vue-property-decorator';
+import TitleComponent from '@/components/title.component.vue';
+import echartsOpt from "@/utils/echarts"
+import * as echarts from "echarts"
+import("@/assets/style/pageCommon.component.scss")
+@Component({
+    components:{
+        TitleComponent,
+    }
+})
+export default class CompanyFileRightComponent extends Vue {
+    public lineOpt = JSON.parse(JSON.stringify(echartsOpt.closeLineOpt));
+    public barOpt =  JSON.parse(JSON.stringify(echartsOpt.closeLineOpt));
+    public radarOpt =  {
+      tooltip: {
+        trigger: 'item',
+        backgroundColor:"rgba(0,0,0,0.6)",
+        borderWidth:0,
+        textStyle:{
+          color:"rgba(255,255,255,0.8)",
+        },
+        formatter: '{a} <br/>{b} : {c}次 ({d}%)'
+      },
+      series: [
+        {
+          name: 'Area Mode',
+          type: 'pie',
+          radius: [20, 70],
+          center: ['50%', '50%'],
+          roseType: 'area',
+          itemStyle: {
+            borderRadius: 5
+          },
+          data: [
+          ]
+        }
+      ]
+    };
+    public linechart:any;
+    public barchart:any;
+    public radarchart:any;
+    public activePieItem = 0;
+    public timer:any;
+    public staticTabs = ["安全","环保","能源"];
+    public currentStaticTab:number = -1;
+    get companyList(){
+        return this.$store.state.companyList
+    }
+    yjIcon = require("@/assets/img/park/lighting-icon.png");
+    yclIcon = require("@/assets/img/park/yichuli.png");
+    created(){
+        this.lineOpt.color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
+        this.lineOpt.grid.top = 20;
+        this.barOpt.grid.top=45;
+        this.lineOpt.legend.show=false;
+        this.barOpt.legend.top = 15;
+        this.lineOpt.xAxis.data = this.companyList.map(item=>item.name);
+        this.lineOpt.series = [{
+            name:"产值",
+            type:"bar",
+            barWidth:12,
+            itemStyle: {
+                borderRadius:[6,6,0,0],
+            },
+            data:this.companyList.map((item,index)=>{
+              return {
+                value:Math.floor(Math.random()*1000),
+                itemStyle:{
+                  color:this.lineOpt.color[index]
+                }
+              }
+            })
+          }]
+        this.barOpt.yAxis[1] = JSON.parse(JSON.stringify(this.barOpt.yAxis[0]));
+        this.barOpt.xAxis.data = this.companyList.map(item=>item.name);
+        // this.barOpt.dataZoom = {
+        //     type:"inside",
+        //     startValue:0,
+        //     endValue:6
+        // };
+        this.barOpt.series = [{
+            type: 'bar',
+            name:"用电量",
+            barWidth:12,
+            itemStyle: {
+                borderRadius:[6,6,0,0],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#7FB0FF' },
+                    { offset: 1, color: '#3179EA' }
+                ])
+            },
+            data:new Array(2).fill(0).map(item=>Math.floor(Math.random()*100))
+        },{
+            type: 'bar',
+            name:"耗能量",
+            barWidth:12,
+            itemStyle: {
+                borderRadius:[6,6,0,0],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#E8E8E8' },
+                    { offset: 1, color: '#999999' }
+                ])
+            },
+            data:new Array(2).fill(0).map(item=>Math.floor(Math.random()*100))
+        },
+        {
+            name: '用水量',
+            type: 'line',
+            yAxisIndex:1,
+            symbol:"circle",
+            data:new Array(2).fill(0).map(item=>Math.floor(Math.random()*100))
+        }];
+        setTimeout(()=>{
+        this.changeTab(0)
+        })
+    }
+
+    public changeTab(index){
+      if(this.currentStaticTab === index){
+        return
+      }
+      this.radarOpt.series[0].name = this.staticTabs[index]+'告警统计';
+       this.radarOpt.series[0].data = this.companyList.map(item=>{
+        return{
+          value:Math.floor(Math.random()*100),
+          name:item.name
+        }
+       })
+       this.$nextTick(()=>{
+        this.currentStaticTab = index
+       })
+    }
+    public getLineEcharts(echart){
+        echart.resize()
+        this.linechart = echart
+    }
+    public getBarEcharts(echart){
+        echart.resize()
+        this.barchart = echart
+    }
+    public getRadarEcharts(echart){
+        echart.resize()
+        this.radarchart = echart;
+
+        this.timer =setInterval(()=>{
+            this.changePieChange()
+        },4000)
+    }
+    public chartResize(){
+        this.linechart.resize();
+        this.barchart.resize();
+        this.radarchart.resize();
+    }
+    public changePieChange() {
+        this.lineOpt.series[0].data =this.companyList.map((item,index)=>{
+          return {
+            value:Math.floor(Math.random()*1000),
+            itemStyle:{
+              color:this.lineOpt.color[index]
+            }
+          }
+        });
+        // this.barOpt.dataZoom.startValue+=1;
+        // this.barOpt.dataZoom.endValue+=1;
+        // this.barchart.setOption(this.barOpt)
+        const index = this.currentStaticTab+1<3?this.currentStaticTab+1:0;
+        this.changeTab(index)
+
+    }
+    mounted(){
+      setTimeout(()=>{
+        this.chartResize()
+      },1000)
+        window.addEventListener("resize",this.chartResize);
+    }
+    destroyed(){
+        window.removeEventListener("resize",this.chartResize);
+        clearInterval(this.timer);
+        this.timer = null;
+    }
+}
+</script>
+<style lang="scss" scoped>
+.full{
+    width: 100%;
+}
+
+.tab-box{
+    width: 100%;
+    height: 24px;
+    margin-top: 30px;
+    display: flex;
+    color: $font-color;
+    justify-content: space-around;
+    .tab{
+        width: 72px;
+        height: 24px;
+        border-radius: 12px;
+        cursor: pointer;
+        line-height: 22px;
+        text-align: center;
+        font-size: 12px;
+        border: 1px solid transparent;
+        &:hover,&.active{
+            border: 1px solid $font-color;
+        }
+    }
+
+}
+.park-file-right{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    .charts-box{
+        width: 100%;
+        height: 1px;
+        flex: 1;
+    }
+
+}
+</style>
diff --git a/src/components/dealPopUp.component.vue b/src/components/dealPopUp.component.vue
new file mode 100644
index 0000000..ea0336d
--- /dev/null
+++ b/src/components/dealPopUp.component.vue
@@ -0,0 +1,155 @@
+<!--告警处理弹窗-->
+<template>
+  <el-dialog
+      class="pop-up"
+      title="告警处理"
+      append-to-body
+      :modal="false"
+      :close-on-click-modal="false"
+      :center="true"
+      :visible.sync="dialogVisible"
+      width="400"
+      :before-close="handleClose">
+    <el-form label-position="left" :model="popUpForm" label-width="80px">
+      <el-form-item label="处理意见">
+        <el-input class="background-style" v-model="popUpForm.remark" type="textarea" :rows="4"></el-input>
+      </el-form-item>
+      <el-form-item label="执行人">
+        <el-select class="select-style background-style-select" v-model="popUpForm.executor">
+          <el-option label="张三" value="张三"></el-option>
+          <el-option label="李斯" value="李斯"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="btn-group">
+      <el-button class="cancel-btn" @click="handleClose()">取 消</el-button>
+      <el-button class="submit-btn" type="primary" @click="submitData(popUpForm)">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, PropSync, Vue} from 'vue-property-decorator';
+
+@Component
+export default class DealPopUpComponent extends Vue {
+  //传入的报警信息列表
+  @PropSync('dialogVisible', {default: false}) syncDialogVisible!: boolean;
+
+  //处理弹窗
+  popUpForm: any = {
+    remark: '',
+    executor: '',
+  }
+
+  //关闭弹窗
+  @Emit()
+  handleClose() {
+    console.log(1111)
+    this.syncDialogVisible = false
+  }
+
+  //传递表单数据
+  @Emit()
+  submitData(popUpForm) {
+    if (this.popUpForm.remark){
+      this.handleClose()
+    }else{
+      this.$message.warning('请填写处理意见')
+    }
+
+  }
+}
+</script>
+<style lang="scss">
+
+.pop-up {
+  .el-dialog {
+    width: 400px;
+    height: 324px;
+    background: url("~@/assets/img/dealBg.png") no-repeat 50% 50%;
+
+    .el-dialog__headerbtn {
+      top: 16px;
+      right: 18px;
+    }
+
+    .el-dialog__headerbtn .el-dialog__close {
+      color: #FFFFFF;
+    }
+
+    .el-dialog__title, .el-dialog__body, .el-form-item__label {
+      color: #FFFFFF;
+    }
+
+    .btn-group {
+      width: 100%;
+      text-align: center;
+      padding-left: 24px;
+      @mixin commonPopBtn {
+        width: 100px;
+        height: 34px;
+        border-radius: 4px 4px 4px 4px;
+        border: 1px solid #E8E8E8;
+        padding: 0;
+      }
+
+      .cancel-btn {
+        @include commonPopBtn;
+        background: transparent;
+
+        span {
+          color: #E8E8E8;
+        }
+
+        &:hover, &:focus {
+          background: transparent;
+
+          span {
+            color: #E8E8E8 !important;
+          }
+        }
+      }
+
+      .submit-btn {
+        @include commonPopBtn;
+        background: #FFFFFF;
+
+        span {
+          color: #333333;
+        }
+
+        &:hover, &:focus {
+          background: #FFFFFF;
+
+          span {
+            color: #333333 !important;
+          }
+        }
+      }
+    }
+
+    .select-style {
+      width: 100%;
+    }
+
+    .background-style {
+      &-select {
+        .el-input__inner {
+          background: rgba(128, 128, 128, 0.6);
+          border-radius: 4px 4px 4px 4px;
+          border: 1px solid #E8E8E8;
+          color: #E8E8E8;
+        }
+      }
+
+      .el-textarea__inner {
+        background: transparent;
+        border-radius: 4px 4px 4px 4px;
+        border: 1px solid #E8E8E8;
+        color: #E8E8E8;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/src/components/energy/electricity/left/chartData.js b/src/components/energy/electricity/left/chartData.js
new file mode 100644
index 0000000..fc7d5c0
--- /dev/null
+++ b/src/components/energy/electricity/left/chartData.js
@@ -0,0 +1,447 @@
+export const lineChartData = function () {
+    let xLabel = ['Q1', 'Q2', 'Q3', 'Q4'];
+    let dataValue = [175, 90, 150, 75];
+    let dataValue1 = [50, 75, 175, 50];
+    return {
+        color: ['#ECFF7F', '#7FB0FF'],
+        legend: {
+            show: true,
+            top: '10%',
+            icon: "rect",
+            itemWidth: 10, // 图例标记的图形宽度。
+            //   itemGap: 20, // 图例每项之间的间隔。
+            itemHeight: 10, //  图例标记的图形高度。
+            textStyle: {
+                color: '#fff',
+                fontSize: 14,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        grid: {
+            top: '30%',
+            left: '10%',
+            right: '5%',
+            bottom: '20%',
+        },
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            data: xLabel
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name: '单位产值能耗',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 3,
+                    },
+                },
+                symbolSize: 8,   //设定实心点的大小
+                data: dataValue,
+            },
+            {
+                name: '单位产值用水',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 3,
+                    },
+                },
+                symbolSize: 8,   //设定实心点的大小
+                data: dataValue1,
+            }
+        ]
+    }
+}
+export const pieChartData = function () {
+    /* 数据 */
+    let nameList = ["石油化工", "无机化工", "有机化工", "精细化工", '化肥农药', '塑料制品', '橡胶制品'];
+    let valueList = [70, 60, 50, 40, 30, 20, 10];
+
+    /* 整合 */
+    let colorList = ["#FFFFFF", "#FADFA4", "#7FB0FF", "#ECFF7F", "#DD7171", "#C9FFD7", "#947FEA"];
+    let data = [];
+    nameList.map((item, index) => {
+        data.push({
+            name: item,
+            value: valueList[index]
+        })
+    })
+
+    /* 函数 */
+// 数字分割：1653 => 1,653
+    const formatNum = (value) => {
+        if (!value && value !== 0) return 0;
+        let str = value.toString();
+        let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
+        return str.replace(reg, "$1,");
+    }
+
+    return {
+        color: colorList,
+        legend: {
+            show: true,
+            top: 20,
+            right: 0,
+            orient: "vertical", //改变排列方式
+            itemWidth: 10,
+            itemHeight: 10,
+            textStyle: {
+                color: '#fff',
+                fontSize: 12,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        tooltip: {
+            trigger: 'item',
+            axisPointer: {
+                type: 'none'
+            },
+            position: function (point, params, dom, rect, size) { // 提示框位置
+                let x = 0;
+                let y = 0;
+                //提示框定位
+                if (point[0] + size.contentSize[0] < size.viewSize[0]) {
+                    x = point[0]
+                } else if (point[0] > size.contentSize[0]) {
+                    x = point[0] - size.contentSize[0]
+                } else {
+                    x = "30%"
+                }
+                if (point[1] > size.contentSize[1]) {
+                    y = point[1] - size.contentSize[1]
+                } else if (point[1] + size.contentSize[1] < size.viewSize[1]) {
+                    y = point[1]
+                } else {
+                    y = "30%"
+                }
+                return [x, y];
+            },
+            formatter: params => {
+                let pieColor = params["color"];
+                return `
+            <div style="position:relative;">
+               <div style="width: 9px;height: 9px;background: ${pieColor};border: 1px solid #FFFFFF;position:absolute;top:50%;transform:translateY(-50%);left:0;border-radius:50%;"></div>
+               <span style="margin:0 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 400;color: #FFFFFF;">${params.name}</span>
+            </div>
+            <div style="margin:12px 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Regular;font-weight: 500;color: #FFFFFF;">${formatNum(params.value)}kW·h<span style="margin-left:24px;">${[params.percent]}%</span></div>
+         `
+            },
+            extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
+        },
+        series: [{
+            type: 'pie',
+            roseType: true,
+            center: ['40%', '50%'],
+            radius: ["30%", "80%"],
+            label: {
+                show: false,
+            },
+            itemStyle: {
+                borderRadius: 3
+            },
+            data: data
+        }]
+    };
+}
+
+/**
+ * 废气右侧折线图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const barChartData = function (data, xAxisData, legend, $echarts) {
+
+    return {
+        color: ['#ECFF7F'],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            backgroundColor: 'rgba(0,0,0,0.4)',
+            textStyle: {
+                color: '#ffffff'
+            }
+        },
+        legend: {
+            show: false,
+            textStyle: {
+                color: '#ffffff'
+            }
+        },
+        grid: {
+            left: '3%',
+            top: '15%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        yAxis: {
+            type: 'category',
+            data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学', '海利得', '榆林化工',
+                '联化科1', '立本作物1', '圣丰集团1', '茂盛生物1', '利尔化学1', '海利得1', '榆林化工1',
+                '联化科2', '立本作物2', '圣丰集团2', '茂盛生物2', '利尔化学2', '海利得2', '榆林化工2',
+                '联化科3', '立本作物3', '圣丰集团3', '茂盛生物3', '利尔化学3', '海利得3', '榆林化工3',
+                '联化科4', '立本作物4', '圣丰集团4', '茂盛生物4', '利尔化学4', '海利得4', '榆林化工4',
+                '联化科5', '立本作物5', '圣丰集团5', '茂盛生物5', '利尔化学5', '海利得5', '榆林化工5',
+            ],
+
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate: 30,//label旋转角度
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        dataZoom: {
+            type: "inside",
+            orient: "vertical",
+            startValue: 0,
+            endValue: 7
+        },
+        series: [
+            {
+                name: '耗电量',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item => Math.floor(Math.random() * 100))
+            }
+        ]
+    };
+}
+/**
+ * 散点图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const pointChartData = function (data, xAxisData, legend, $echarts) {
+
+    return {
+        tooltip: {
+            trigger: 'item',
+            backgroundColor: 'rgba(0,0,0,0.4)',
+            textStyle: {
+                color: '#ffffff'
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学', '榆林化工'],
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate: 30,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        yAxis: {
+            type: 'value',
+            name: '产值：单位万元',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            nameTextStyle: {
+                padding: [0, 0, 10, 30]
+            }
+        },
+        color: ['#FF5959', '#FADFA4', '#C9FFD7'],
+        series: [
+            {
+                name: '联化科',
+                data: [
+                    {
+                        value: ['联化科', 200],
+                        symbolSize: 28,
+                        itemStyle: {color: '#FF5959'},
+                    }
+                ],
+                type: 'scatter'
+            }, {
+                name: '立本作物',
+                data: [
+                    {
+                        value: ['立本作物', 150],
+                        symbolSize: 16,
+                        itemStyle: {color: '#FADFA4'},
+                    }
+                ],
+                type: 'scatter'
+            }, {
+                name: '圣丰集团',
+                data: [
+                    {
+                        value: ['圣丰集团', 150],
+                        symbolSize: 16,
+                        itemStyle: {color: '#FADFA4'},
+
+                    }
+                ],
+                type: 'scatter'
+            }, {
+                name: '茂盛生物',
+                data: [
+                    {
+                        value: ['茂盛生物', 50],
+                        symbolSize: 10,
+                        itemStyle: {color: '#C9FFD7'},
+                    }
+                ],
+                type: 'scatter'
+            }, {
+                name: '利尔化学',
+                data: [
+                    {
+                        value: ['利尔化学', 50],
+                        symbolSize: 16,
+                        itemStyle: {color: '#C9FFD7'},
+                    }
+                ],
+                type: 'scatter'
+            }, {
+                name: '榆林化工',
+                data: [
+                    {
+                        value: ['榆林化工', 150],
+                        symbolSize: 32,
+                        itemStyle: {color: '#FF5959'},
+                    }
+                ],
+                type: 'scatter'
+            },
+            /*{
+                data: [
+                    {
+                        value: [20, 200],
+                        symbolSize:28,
+                        itemStyle:{color:'#FF5959'},
+                        name:'联化科'
+                    },{
+                        value: [40, 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#FADFA4'},
+                        name:'立本作物'
+                    },{
+                        value: [60, 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#C9FFD7'},
+                        name:'圣丰集团'
+                    },{
+                        value: [80, 50],
+                        symbolSize:10,
+                        itemStyle:{color:'#C9FFD7'},
+                        name:'茂盛生物'
+                    },{
+                        value: [100, 50],
+                        symbolSize:16,
+                        name:'利尔化学'
+                    },{
+                        value: [120, 150],
+                        symbolSize:32,
+                        name:'榆林化工'
+                    }
+                ],
+                type: 'scatter'
+            },*/
+        ]
+    }
+}
diff --git a/src/components/energy/electricity/left/electricityLeft.component.html b/src/components/energy/electricity/left/electricityLeft.component.html
new file mode 100644
index 0000000..4481117
--- /dev/null
+++ b/src/components/energy/electricity/left/electricityLeft.component.html
@@ -0,0 +1,21 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            企业实时耗电排行
+        </title-component>
+        <hbt-echarts className="right-bar-chart" :options="barChartData"
+                     @onChartInit="getEcharts($event,'bar')"></hbt-echarts>
+        <div class="subTitle">
+            企业产值耗电分析
+        </div>
+        <div class="sub-title-legend">圆圈面积：耗能（tce）</div>
+        <hbt-echarts className="right-bar-chart" :options="pointChartData"
+                     @onChartInit="getEcharts($event,'point')"></hbt-echarts>
+        <div class="subTitle">
+            行业耗电分析
+        </div>
+        <hbt-echarts className="right-bar-chart" :options="pieChartData"
+                     @onChartInit="getEcharts($event,'pie')"></hbt-echarts>
+    </div>
+
+</div>
diff --git a/src/components/energy/electricity/left/electricityLeft.component.ts b/src/components/energy/electricity/left/electricityLeft.component.ts
new file mode 100644
index 0000000..0af2b3a
--- /dev/null
+++ b/src/components/energy/electricity/left/electricityLeft.component.ts
@@ -0,0 +1,112 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./electricityLeft.component.html"
+import {pieChartData, barChartData,pointChartData} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+
+import * as echarts from 'echarts';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class ElectricityLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //散点图数据
+    pointChartData: any = {};
+    //叠加柱状图
+    barChartData: any = {};
+    //定时器
+    timer: any = null;
+    // 排放达标率数据
+    pieChartData: any = {}
+    //柱状图实例
+    bar: any = {}
+    //折线图实例
+    pie: any = {}
+    //散点图实例
+    point: any = {}
+
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        if (type === 'pie') {
+            this.pieChartData = pieChartData();
+        }
+        if (type === 'bar') {
+            this.barChartData = barChartData([[90, 55, 80, 85, 25, 60, 60], [160, 80, 130, 133, 40, 95, 95]], this.xAxisData, this.legend, echarts)
+            this.bar.on('click', function (params) {
+                console.log(params);
+            });
+        }
+        if (type === 'point') {
+            this.pointChartData = pointChartData([[90, 55, 80, 85, 25, 60, 60], [160, 80, 130, 133, 40, 95, 95]], this.xAxisData, this.legend, echarts)
+        }
+    }
+
+    //折线图x轴坐标
+    xAxisData = ['石油化工', '无机化工', '有机化工', '精细化工', '化肥农药', '塑料制品', '橡胶制品']
+    //设置排放变化趋势默认选中项
+    lineChartType = '排放量'
+
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.pie.resize()
+            this.bar.resize()
+        }, 300)
+    }
+    autoRun(){
+        if (this.barChartData.dataZoom.endValue === 42){
+            this.barChartData.dataZoom.startValue = 0
+            this.barChartData.dataZoom.endValue = 7;
+        }else{
+            this.barChartData.dataZoom.startValue+=1;
+            this.barChartData.dataZoom.endValue+=1;
+        }
+        //最新出来的数据
+        let selectDataE = this.barChartData.yAxis.data[this.barChartData.dataZoom.endValue]
+
+        this.bar.setOption(this.barChartData)
+    }
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+    //图例
+    legend = ["水 (吨)",
+        "标准煤 (吨)"]
+
+    mounted() {
+        this.timer = setInterval(() => {
+            this.setChartData()
+            this.autoRun()
+        }, 6000)
+
+
+        window.addEventListener("resize", this.resize);
+
+    }
+
+    setChartData() {
+        this.pie.clear()
+        this.pie.setOption(this.pieChartData)
+        this.point.clear()
+        this.point.setOption(this.pointChartData)
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+}
+
diff --git a/src/components/energy/electricity/right/chartData.js b/src/components/energy/electricity/right/chartData.js
new file mode 100644
index 0000000..cdfa236
--- /dev/null
+++ b/src/components/energy/electricity/right/chartData.js
@@ -0,0 +1,597 @@
+export const lineChartData =  function () {
+    let xLabel = new Array(30).fill(0).map((item,i)=> i+1);
+    let dataValue = new Array(42).fill(0).map(item=>Math.floor(Math.random()*100));
+    return {
+        color:['#ECFF7F'],
+        dataZoom : {
+            type:"inside",
+            // orient:"vertical",
+            startValue:0,
+            endValue:10
+        },
+        legend: {
+            show: false,
+            top: '10%',
+            icon: "rect",
+            itemWidth: 10, // 图例标记的图形宽度。
+            //   itemGap: 20, // 图例每项之间的间隔。
+            itemHeight: 10, //  图例标记的图形高度。
+            textStyle: {
+                color: '#fff',
+                fontSize: 14,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        grid: {
+            top: '5%',
+            left: '10%',
+            right: '5%',
+            bottom: '20%',
+        },
+        xAxis: {
+            name:'日',
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            data: xLabel
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name: '单位产值能耗',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 2,
+                    },
+                },
+                symbolSize: 4,   //设定实心点的大小
+                data: dataValue,
+                areaStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: 'rgba(236,255,127,0.4)'
+                            }, {
+                                offset: 1, color: 'rgba(236,255,127,0.3)'
+                            }],
+                            global: false
+                        }
+                    },
+                },
+            }
+        ]
+    }
+}
+export const lineChartData1 =  function () {
+    let xLabel = new Array(30).fill(0).map((item,i)=> i+1);
+    let dataValue = new Array(42).fill(0).map(item=>Math.floor(Math.random()*100));
+    return {
+        color:['#FADFA4'],
+        dataZoom : {
+            type:"inside",
+            // orient:"vertical",
+            startValue:0,
+            endValue:10
+        },
+        legend: {
+            show: false,
+            top: '10%',
+            icon: "rect",
+            itemWidth: 10, // 图例标记的图形宽度。
+            //   itemGap: 20, // 图例每项之间的间隔。
+            itemHeight: 10, //  图例标记的图形高度。
+            textStyle: {
+                color: '#fff',
+                fontSize: 14,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        grid: {
+            top: '5%',
+            left: '10%',
+            right: '5%',
+            bottom: '20%',
+        },
+        xAxis: {
+            name:'日',
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            data: xLabel
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name: '单位产值能耗',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 2,
+                    },
+                },
+                symbolSize: 4,   //设定实心点的大小
+                data: dataValue,
+                areaStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: 'rgba(250,223,164,0.5)'
+                            }, {
+                                offset: 1, color: 'rgba(250,223,164,0.3)'
+                            }],
+                            global: false
+                        }
+                    },
+                },
+            }
+        ]
+    }
+}
+export const pieChartData =  function () {
+    return  {
+
+        title: {
+            text: `75%`,
+            subtext: '达成率',
+            left: 'center',
+            top: 'center',
+            itemGap: 0,
+            textStyle: {
+                fontSize: 28,
+                fontWeight: '600',
+                fontStyle: 'italic',
+                color: '#B8ECFF',
+            },
+            subtextStyle: {
+                fontSize: 10,
+                fontWeight: 'normal',
+                align: "center",
+                color: '#E8E8E8'
+            },
+        },
+        angleAxis: {
+            max: 100,
+            // 隐藏刻度线
+            show: false,
+            startAngle: 90
+        },
+        radiusAxis: {
+            type: 'category',
+            show: true,
+            axisLabel: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+            },
+            axisTick: {
+                show: false
+            },
+        },
+        polar: {
+            radius: '150%' //图形大小
+        },
+        series: [{
+            type: 'bar',
+            data: ['75'],
+            showBackground: true,
+            roundCap: true,
+            backgroundStyle: {
+                color: 'rgba(64, 76, 76, 1)',
+            },
+            coordinateSystem: 'polar',
+            barWidth: 20,
+            itemStyle: {
+                normal: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0, color: '#ECFF7F'
+                        }, {
+                            offset: 1, color: '#ECFF7F'
+                        }],
+                        global: false
+                    }
+                }
+            },
+        }]
+    }
+}
+
+
+
+// 修改弹框内容用到的方法
+function replaceHtmlWord(str) {
+    return str.replace("NO2", "NO<sub>2</sub>")
+        .replace("SO2", "SO<sub>2</sub>")
+        .replace("O3", "O<sub>3</sub>")
+    // .replace("PM10", "PM<sub>10</sub>")
+    // .replace("PM2.5", "PM<sub>2.5</sub>")
+
+}
+
+// 修改图例文字用到的方法
+function replaceWords(str) {
+    return str.replace("NO2", "NO{sub|2}")
+        .replace("SO2", "SO{sub|2}")
+        .replace("O3", "O{sub|3}")
+    // .replace("PM2.5", "PM{sub|2.5}")
+    // .replace("PM10", "PM{sub|10}");
+}
+
+/**
+ * 废气右侧折线图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const barChartData = function (data, xAxisData, legend,$echarts) {
+
+    return {
+        color:['#FADFA4','#7FB0FF','#FFFFFF','#947FEA'],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        legend: {
+            textStyle:{
+        color:'#ffffff'
+    }
+        },
+        grid: {
+            left: '3%',
+            top: '15%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        yAxis: {
+            type: 'category',
+            data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学', '海利得','榆林化工',
+                '联化科1', '立本作物1', '圣丰集团1', '茂盛生物1', '利尔化学1', '海利得1','榆林化工1',
+                '联化科2', '立本作物2', '圣丰集团2', '茂盛生物2', '利尔化学2', '海利得2','榆林化工2',
+                '联化科3', '立本作物3', '圣丰集团3', '茂盛生物3', '利尔化学3', '海利得3','榆林化工3',
+                '联化科4', '立本作物4', '圣丰集团4', '茂盛生物4', '利尔化学4', '海利得4','榆林化工4',
+                '联化科5', '立本作物5', '圣丰集团5', '茂盛生物5', '利尔化学5', '海利得5','榆林化工5',
+            ],
+
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate: 30,//label旋转角度
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        dataZoom : {
+            type:"inside",
+            orient:"vertical",
+            startValue:0,
+            endValue:7
+        },
+        series: [
+            {
+                name: '煤炭',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            },
+            {
+                name: '石油',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            },
+            {
+                name: '天然气',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            },
+            {
+                name: '煤气',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            }
+        ]
+    };
+}
+/**
+ * 散点图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const pointChartData = function (data, xAxisData, legend,$echarts) {
+
+    return  {
+        tooltip: {
+            trigger: 'item',
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学','榆林化工'],
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate: 30,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        yAxis: {
+            type: 'value',
+            name:'产值：单位万元',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            nameTextStyle: {
+                padding: [0, 0, 10, 30]
+            }
+        },
+        color:['#FF5959','#FADFA4','#C9FFD7'],
+        series: [
+            {
+                name:'联化科',
+                data: [
+                    {
+                        value: ['联化科', 200],
+                        symbolSize:28,
+                        itemStyle:{color:'#FF5959'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'立本作物',
+                data: [
+                   {
+                        value: ['立本作物', 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#FADFA4'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'圣丰集团',
+                data: [
+                   {
+                        value: ['圣丰集团', 150],
+                        symbolSize:16,
+                       itemStyle:{color:'#FADFA4'},
+
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'茂盛生物',
+                data: [
+                   {
+                        value: ['茂盛生物', 50],
+                        symbolSize:10,
+                        itemStyle:{color:'#C9FFD7'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'利尔化学',
+                data: [
+                    {
+                        value: ['利尔化学', 50],
+                        symbolSize:16,
+                        itemStyle:{color:'#C9FFD7'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'榆林化工',
+                data: [
+                    {
+                        value: ['榆林化工', 150],
+                        symbolSize:32,
+                        itemStyle:{color:'#FF5959'},
+                    }
+                ],
+                type: 'scatter'
+            },
+            /*{
+                data: [
+                    {
+                        value: [20, 200],
+                        symbolSize:28,
+                        itemStyle:{color:'#FF5959'},
+                        name:'联化科'
+                    },{
+                        value: [40, 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#FADFA4'},
+                        name:'立本作物'
+                    },{
+                        value: [60, 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#C9FFD7'},
+                        name:'圣丰集团'
+                    },{
+                        value: [80, 50],
+                        symbolSize:10,
+                        itemStyle:{color:'#C9FFD7'},
+                        name:'茂盛生物'
+                    },{
+                        value: [100, 50],
+                        symbolSize:16,
+                        name:'利尔化学'
+                    },{
+                        value: [120, 150],
+                        symbolSize:32,
+                        name:'榆林化工'
+                    }
+                ],
+                type: 'scatter'
+            },*/
+        ]
+    }
+}
diff --git a/src/components/energy/electricity/right/electricityRight.component.html b/src/components/energy/electricity/right/electricityRight.component.html
new file mode 100644
index 0000000..741e99c
--- /dev/null
+++ b/src/components/energy/electricity/right/electricityRight.component.html
@@ -0,0 +1,85 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            节能减排
+        </title-component>
+        <div class="energyRightTitle d-flex is-justify-space-between margin-top-23">
+            <span>节能目标 (KW·h)</span>
+            <span>{{detail.target}}</span>
+        </div>
+        <hbt-echarts className="right-bar-chart" :options="pieChartData"
+                     @onChartInit="getEcharts($event,'pie')"></hbt-echarts>
+        <title-component :imgSrc="imgSrc">
+            单位产品耗能趋势分析
+        </title-component>
+        <div class="sub-title-legend">单位：kgce/m³</div>
+        <hbt-echarts className="right-bar-chart" :options="lineChartData"
+                     @onChartInit="getEcharts($event,'line')"></hbt-echarts>
+        <title-component :imgSrc="imgSrc">
+            单位产值耗能趋势分析
+        </title-component>
+        <div class="sub-title-legend">单位：kgce/万元</div>
+        <hbt-echarts className="right-bar-chart" :options="lineChartData1"
+                     @onChartInit="getEcharts($event,'line1')"></hbt-echarts>
+
+    </div>
+    <div class="center-box">
+        <div class="center-box-card-bg">
+            <div class="center-box-card-title">
+                <img :src="lightningIcon" alt="">
+                <span>今日用电量（kW·h）</span>
+            </div>
+            <ScrollNumberComponent :value="dayData.dayNum"></ScrollNumberComponent>
+            <div class="d-flex is-justify-space-around center-box-card-bottom">
+                <div>
+                    <span>同比:</span>
+                    <img :src="green" alt="">
+                    <span>{{dayData.yoy}}%</span>
+                </div>
+                <div>
+                    <span>环比:</span>
+                    <img :src="red" alt="">
+                    <span>{{dayData.round}}%</span>
+                </div>
+            </div>
+        </div>
+        <div class="center-box-card-bg">
+            <div class="center-box-card-title">
+                <img :src="lightningIcon" alt="">
+                <span>本周用电量（kW·h）</span>
+            </div>
+            <ScrollNumberComponent :value="weekData.dayNum"></ScrollNumberComponent>
+            <div class="d-flex is-justify-space-around center-box-card-bottom">
+                <div>
+                    <span>同比:</span>
+                    <img :src="green" alt="">
+                    <span>{{weekData.yoy}}%</span>
+                </div>
+                <div>
+                    <span>环比:</span>
+                    <img :src="red" alt="">
+                    <span>{{weekData.round}}%</span>
+                </div>
+            </div>
+        </div>
+        <div class="center-box-card-bg">
+            <div class="center-box-card-title">
+                <img :src="lightningIcon" alt="">
+                <span>本月用电量（kW·h）</span>
+            </div>
+            <ScrollNumberComponent :value="monthData.dayNum"></ScrollNumberComponent>
+            <div class="d-flex is-justify-space-around center-box-card-bottom">
+                <div>
+                    <span>同比:</span>
+                    <img :src="green" alt="">
+                    <span>{{monthData.yoy}}%</span>
+                </div>
+                <div>
+                    <span>环比:</span>
+                    <img :src="red" alt="">
+                    <span>{{monthData.round}}%</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/components/energy/electricity/right/electricityRight.component.ts b/src/components/energy/electricity/right/electricityRight.component.ts
new file mode 100644
index 0000000..6ad3c35
--- /dev/null
+++ b/src/components/energy/electricity/right/electricityRight.component.ts
@@ -0,0 +1,166 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./electricityRight.component.html"
+import {pieChartData, lineChartData,lineChartData1} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+import ScrollNumberComponent from "@/components/scrollNumber.component.vue"
+
+
+import {getRandNumBetween} from "@/utils/utils";
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        ScrollNumberComponent,
+    },
+})
+export default class ElectricityRightComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //
+    lightningIcon = require("@/assets/img/energy/dian.png");
+    green = require("@/assets/img/energy/green-arr.png");
+    red = require("@/assets/img/energy/red-arr.png");
+    //单位产品耗能趋势分析数据
+    lineChartData: any = {};
+    //单位产值耗能趋势分析数据
+    lineChartData1: any = {};
+    //定时器
+    timer: any = null;
+    // 排放达标率数据
+    pieChartData: any = {}
+    //柱状图实例
+    bar: any = {}
+    //折线图实例
+    pie: any = {}
+    //单位产品耗能趋势分析实例
+    line: any = {}
+    //单位产值耗能趋势分析图实例
+    line1: any = {}
+    //企业详情数据
+    detail = {
+        target:130
+    }
+    //日用燃料数据
+    dayData = {
+        dayNum:1139.83,
+        yoy:11.2,
+        round:18
+    }
+    //周用燃料数据
+    weekData = {
+        dayNum:7978.81,
+        yoy:20.3,
+        round:14
+    }
+    //月用燃料数据
+    monthData = {
+        dayNum:34194.9,
+        yoy:18.3,
+        round:20
+    }
+    changeCardData(type){
+        const temp:any = {
+            dayNum:getRandNumBetween(1000,2000),
+            yoy:getRandNumBetween(10,20),
+            round:getRandNumBetween(10,20)
+        };
+
+        switch (type) {
+            case "dayData":
+
+                break;
+            case "weekData":
+                temp.dayNum *= 7
+                temp.yoy = getRandNumBetween(10,20)
+                temp.round = getRandNumBetween(10,20)
+                break;
+            case "monthData":
+                temp.dayNum *= 30
+                temp.yoy = getRandNumBetween(10,20)
+                temp.round = getRandNumBetween(10,20)
+                break;
+            default:
+                break
+        }
+        temp.dayNum = Number(temp.dayNum.toFixed(2))
+        this[type] = temp
+}
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        if (type === 'pie') {
+            this.pieChartData = pieChartData();
+        }
+        if (type === 'line1') {
+            this.lineChartData1 = lineChartData1()
+        }
+        if (type === 'line') {
+            this.lineChartData = lineChartData()
+        }
+    }
+
+    //折线图x轴坐标
+    xAxisData = ['石油化工', '无机化工', '有机化工', '精细化工', '化肥农药', '塑料制品', '橡胶制品']
+    //设置排放变化趋势默认选中项
+    lineChartType = '排放量'
+
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.pie.resize()
+            this.line.resize()
+            this.line1.resize()
+        }, 300)
+    }
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+    //图例
+    legend = ["水 (吨)",
+        "标准煤 (吨)"]
+
+    mounted() {
+        this.timer = setInterval(() => {
+            this.setChartData()
+            // this.autoRun()
+            // this.dayNum = Math.floor(Math.random()*10000)
+            this.changeCardData('dayData')
+            this.changeCardData('weekData')
+            this.changeCardData('monthData')
+        }, 6000)
+        window.addEventListener("resize", this.resize);
+    }
+
+    setChartData() {
+        this.pie.clear()
+        function getRandomIntInRange(min, max) {
+            return Math.floor(Math.random() * (max - min) + min);
+        }
+        const num = getRandomIntInRange(7,10)*10
+        this.pieChartData.title.text = num+'%'
+        this.pieChartData.series.data =[num]
+        this.pie.setOption(this.pieChartData)
+        this.line.clear()
+        this.lineChartData.series[0].data =  new Array(42).fill(0).map(item=>Math.floor(Math.random()*100));
+        this.line.setOption(this.lineChartData)
+        this.line1.clear()
+        this.lineChartData1.series[0].data =  new Array(42).fill(0).map(item=>Math.floor(Math.random()*100));
+        this.line1.setOption(this.lineChartData1)
+        this.detail.target = parseInt(String(Math.random()*200))
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+}
+
diff --git a/src/components/energy/gas/left/chartData.js b/src/components/energy/gas/left/chartData.js
new file mode 100644
index 0000000..bb06c8f
--- /dev/null
+++ b/src/components/energy/gas/left/chartData.js
@@ -0,0 +1,503 @@
+export const lineChartData =  function () {
+    let xLabel = ['Q1', 'Q2', 'Q3', 'Q4'];
+    let dataValue = [175, 90, 150, 75];
+    let dataValue1 = [50, 75, 175, 50];
+    return {
+        color:['#ECFF7F','#7FB0FF'],
+        legend: {
+            show: true,
+            top: '10%',
+            icon: "rect",
+            itemWidth: 10, // 图例标记的图形宽度。
+            //   itemGap: 20, // 图例每项之间的间隔。
+            itemHeight: 10, //  图例标记的图形高度。
+            textStyle: {
+                color: '#fff',
+                fontSize: 14,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        grid: {
+            top: '30%',
+            left: '10%',
+            right: '5%',
+            bottom: '20%',
+        },
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            data: xLabel
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name: '单位产值能耗',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 3,
+                    },
+                },
+                symbolSize: 8,   //设定实心点的大小
+                data: dataValue,
+            },
+            {
+                name: '单位产值用水',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 3,
+                    },
+                },
+                symbolSize: 8,   //设定实心点的大小
+                data: dataValue1,
+            }
+        ]
+    }
+}
+export const pieChartData =  function () {
+    /* 数据 */
+    let nameList = ["石油化工", "无机化工", "有机化工", "精细化工",'化肥农药','塑料制品','橡胶制品'];
+    let valueList = [70,60,50, 40, 30, 20,10];
+
+    /* 整合 */
+    let colorList =  ["#FFFFFF", "#FADFA4", "#7FB0FF", "#ECFF7F", "#DD7171","#C9FFD7","#947FEA"];
+    let data = [];
+    nameList.map((item,index) => {
+        data.push({
+            name:item,
+            value:valueList[index]
+        })
+    })
+
+    /* 函数 */
+// 数字分割：1653 => 1,653
+    const formatNum = (value) => {
+        if (!value && value !== 0) return 0;
+        let str = value.toString();
+        let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
+        return str.replace(reg, "$1,");
+    }
+
+    return  {
+        color: colorList,
+        legend:{
+            show:true,
+            top:20,
+            right: 0,
+            orient: "vertical", //改变排列方式
+            itemWidth: 10,
+            itemHeight: 10,
+            textStyle: {
+                color: '#fff',
+                fontSize: 12,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        tooltip: {
+            trigger: 'item',
+            axisPointer: {
+                type: 'none'
+            },
+            position: function (point, params, dom, rect, size) { // 提示框位置
+                let x = 0;
+                let y = 0;
+                //提示框定位
+                if (point[0] + size.contentSize[0] < size.viewSize[0]) {
+                    x = point[0]
+                } else if (point[0] > size.contentSize[0]) {
+                    x = point[0] - size.contentSize[0]
+                } else {
+                    x = "30%"
+                }
+                if (point[1] > size.contentSize[1]) {
+                    y = point[1] - size.contentSize[1]
+                } else if (point[1] + size.contentSize[1] < size.viewSize[1]) {
+                    y = point[1]
+                } else {
+                    y = "30%"
+                }
+                return [x, y];
+            },
+            formatter: params => {
+                let pieColor = params["color"];
+                return `
+            <div style="position:relative;">
+               <div style="width: 9px;height: 9px;background: ${pieColor};border: 1px solid #FFFFFF;position:absolute;top:50%;transform:translateY(-50%);left:0;border-radius:50%;"></div>
+               <span style="margin:0 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 400;color: #FFFFFF;">${params.name}</span>
+            </div>
+            <div style="margin:12px 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Regular;font-weight: 500;color: #FFFFFF;">${formatNum(params.value)}kgce<span style="margin-left:24px;">${[params.percent]}%</span></div>
+         `
+            },
+            extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
+        },
+        series: [{
+            type: 'pie',
+            roseType: true,
+            center:['40%','50%'],
+            radius: ["30%", "80%"],
+            label: {
+                show: false,
+            },
+            itemStyle:{
+                borderRadius:3
+            },
+            data: data
+        }]
+    };
+}
+
+
+
+// 修改弹框内容用到的方法
+function replaceHtmlWord(str) {
+    return str.replace("NO2", "NO<sub>2</sub>")
+        .replace("SO2", "SO<sub>2</sub>")
+        .replace("O3", "O<sub>3</sub>")
+    // .replace("PM10", "PM<sub>10</sub>")
+    // .replace("PM2.5", "PM<sub>2.5</sub>")
+
+}
+
+// 修改图例文字用到的方法
+function replaceWords(str) {
+    return str.replace("NO2", "NO{sub|2}")
+        .replace("SO2", "SO{sub|2}")
+        .replace("O3", "O{sub|3}")
+    // .replace("PM2.5", "PM{sub|2.5}")
+    // .replace("PM10", "PM{sub|10}");
+}
+
+/**
+ * 废气右侧折线图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const barChartData = function (data, xAxisData, legend,$echarts) {
+
+    return {
+        color:['#FADFA4','#7FB0FF','#C9FFD7','#947FEA'],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        legend: {
+            textStyle:{
+        color:'#ffffff'
+    }
+        },
+        grid: {
+            left: '3%',
+            top: '15%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        yAxis: {
+            type: 'category',
+            data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学', '海利得','榆林化工',
+                '联化科1', '立本作物1', '圣丰集团1', '茂盛生物1', '利尔化学1', '海利得1','榆林化工1',
+                '联化科2', '立本作物2', '圣丰集团2', '茂盛生物2', '利尔化学2', '海利得2','榆林化工2',
+                '联化科3', '立本作物3', '圣丰集团3', '茂盛生物3', '利尔化学3', '海利得3','榆林化工3',
+                '联化科4', '立本作物4', '圣丰集团4', '茂盛生物4', '利尔化学4', '海利得4','榆林化工4',
+                '联化科5', '立本作物5', '圣丰集团5', '茂盛生物5', '利尔化学5', '海利得5','榆林化工5',
+            ],
+
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate: 30,//label旋转角度
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        dataZoom : {
+            type:"inside",
+            orient:"vertical",
+            startValue:0,
+            endValue:7
+        },
+        series: [
+            {
+                name: '煤炭',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            },
+            {
+                name: '石油',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            },
+            {
+                name: '天然气',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            },
+            {
+                name: '煤气',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            }
+        ]
+    };
+}
+/**
+ * 散点图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const pointChartData = function (data, xAxisData, legend,$echarts) {
+
+    return  {
+        tooltip: {
+            trigger: 'item',
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学','榆林化工'],
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate: 30,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        yAxis: {
+            type: 'value',
+            name:'产值：单位万元',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            nameTextStyle: {
+                padding: [0, 0, 10, 30]
+            }
+        },
+        color:['#FF5959','#FADFA4','#C9FFD7'],
+        series: [
+            {
+                name:'联化科',
+                data: [
+                    {
+                        value: ['联化科', 200],
+                        symbolSize:28,
+                        itemStyle:{color:'#FF5959'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'立本作物',
+                data: [
+                   {
+                        value: ['立本作物', 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#FADFA4'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'圣丰集团',
+                data: [
+                   {
+                        value: ['圣丰集团', 150],
+                        symbolSize:16,
+                       itemStyle:{color:'#FADFA4'},
+
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'茂盛生物',
+                data: [
+                   {
+                        value: ['茂盛生物', 50],
+                        symbolSize:10,
+                        itemStyle:{color:'#C9FFD7'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'利尔化学',
+                data: [
+                    {
+                        value: ['利尔化学', 50],
+                        symbolSize:16,
+                        itemStyle:{color:'#C9FFD7'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'榆林化工',
+                data: [
+                    {
+                        value: ['榆林化工', 150],
+                        symbolSize:32,
+                        itemStyle:{color:'#FF5959'},
+                    }
+                ],
+                type: 'scatter'
+            },
+            /*{
+                data: [
+                    {
+                        value: [20, 200],
+                        symbolSize:28,
+                        itemStyle:{color:'#FF5959'},
+                        name:'联化科'
+                    },{
+                        value: [40, 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#FADFA4'},
+                        name:'立本作物'
+                    },{
+                        value: [60, 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#C9FFD7'},
+                        name:'圣丰集团'
+                    },{
+                        value: [80, 50],
+                        symbolSize:10,
+                        itemStyle:{color:'#C9FFD7'},
+                        name:'茂盛生物'
+                    },{
+                        value: [100, 50],
+                        symbolSize:16,
+                        name:'利尔化学'
+                    },{
+                        value: [120, 150],
+                        symbolSize:32,
+                        name:'榆林化工'
+                    }
+                ],
+                type: 'scatter'
+            },*/
+        ]
+    }
+}
diff --git a/src/components/energy/gas/left/energyGasLeft.component.ts b/src/components/energy/gas/left/energyGasLeft.component.ts
new file mode 100644
index 0000000..6739381
--- /dev/null
+++ b/src/components/energy/gas/left/energyGasLeft.component.ts
@@ -0,0 +1,112 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./gasLeft.component.html"
+import {pieChartData, barChartData,pointChartData} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+
+import * as echarts from 'echarts';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class EnergyGasLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //散点图数据
+    pointChartData: any = {};
+    //叠加柱状图
+    barChartData: any = {};
+    //定时器
+    timer: any = null;
+    // 排放达标率数据
+    pieChartData: any = {}
+    //柱状图实例
+    bar: any = {}
+    //折线图实例
+    pie: any = {}
+    //散点图实例
+    point: any = {}
+
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        if (type === 'pie') {
+            this.pieChartData = pieChartData();
+        }
+        if (type === 'bar') {
+            this.barChartData = barChartData([[90, 55, 80, 85, 25, 60, 60], [160, 80, 130, 133, 40, 95, 95]], this.xAxisData, this.legend, echarts)
+            this.bar.on('click', function (params) {
+                console.log(params);
+            });
+        }
+        if (type === 'point') {
+            this.pointChartData = pointChartData([[90, 55, 80, 85, 25, 60, 60], [160, 80, 130, 133, 40, 95, 95]], this.xAxisData, this.legend, echarts)
+        }
+    }
+
+    //折线图x轴坐标
+    xAxisData = ['石油化工', '无机化工', '有机化工', '精细化工', '化肥农药', '塑料制品', '橡胶制品']
+    //设置排放变化趋势默认选中项
+    lineChartType = '排放量'
+
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.pie.resize()
+            this.bar.resize()
+        }, 300)
+    }
+    autoRun(){
+        if (this.barChartData.dataZoom.endValue === 42){
+            this.barChartData.dataZoom.startValue = 0
+            this.barChartData.dataZoom.endValue = 7;
+        }else{
+            this.barChartData.dataZoom.startValue+=1;
+            this.barChartData.dataZoom.endValue+=1;
+        }
+        //最新出来的数据
+        let selectDataE = this.barChartData.yAxis.data[this.barChartData.dataZoom.endValue]
+
+        this.bar.setOption(this.barChartData)
+    }
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+    //图例
+    legend = ["水 (吨)",
+        "标准煤 (吨)"]
+
+    mounted() {
+        this.timer = setInterval(() => {
+            this.setChartData()
+            this.autoRun()
+        }, 6000)
+
+
+        window.addEventListener("resize", this.resize);
+
+    }
+
+    setChartData() {
+        this.pie.clear()
+        this.pie.setOption(this.pieChartData)
+        this.point.clear()
+        this.point.setOption(this.pointChartData)
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+}
+
diff --git a/src/components/energy/gas/left/gasLeft.component.html b/src/components/energy/gas/left/gasLeft.component.html
new file mode 100644
index 0000000..8ae4210
--- /dev/null
+++ b/src/components/energy/gas/left/gasLeft.component.html
@@ -0,0 +1,21 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            企业耗能排行
+        </title-component>
+        <hbt-echarts className="right-bar-chart" :options="barChartData"
+                     @onChartInit="getEcharts($event,'bar')"></hbt-echarts>
+        <div class="subTitle">
+            行业耗能统计
+        </div>
+        <div class="sub-title-legend">圆圈面积：耗能（tce）</div>
+        <hbt-echarts className="right-bar-chart" :options="pointChartData"
+                     @onChartInit="getEcharts($event,'point')"></hbt-echarts>
+        <div class="subTitle">
+            产值能耗分析
+        </div>
+        <hbt-echarts className="right-bar-chart" :options="pieChartData"
+                     @onChartInit="getEcharts($event,'pie')"></hbt-echarts>
+    </div>
+
+</div>
diff --git a/src/components/energy/gas/right/chartData.js b/src/components/energy/gas/right/chartData.js
new file mode 100644
index 0000000..2862060
--- /dev/null
+++ b/src/components/energy/gas/right/chartData.js
@@ -0,0 +1,599 @@
+export const lineChartData =  function () {
+    let xLabel = new Array(30).fill(0).map((item,i)=> i+1);
+    let dataValue = new Array(42).fill(0).map(item=>Math.floor(Math.random()*100));
+    return {
+        color:['#EA7F7F'],
+        dataZoom : {
+            type:"inside",
+            // orient:"vertical",
+            startValue:0,
+            endValue:10
+        },
+        legend: {
+            show: false,
+            top: '10%',
+            icon: "rect",
+            itemWidth: 10, // 图例标记的图形宽度。
+            //   itemGap: 20, // 图例每项之间的间隔。
+            itemHeight: 10, //  图例标记的图形高度。
+            textStyle: {
+                color: '#fff',
+                fontSize: 14,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        grid: {
+            top: '5%',
+            left: '10%',
+            right: '5%',
+            bottom: '20%',
+        },
+        xAxis: {
+            name:'日',
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            data: xLabel
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name: '单位产值能耗',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 2,
+                    },
+                },
+                symbolSize: 4,   //设定实心点的大小
+                data: dataValue,
+                areaStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: 'rgba(234,127,127,0.3)'
+                            }, {
+                                offset: 1, color: 'rgba(234,127,127,0.3)'
+                            }],
+                            global: false
+                        }
+                    },
+                },
+            }
+        ]
+    }
+}
+export const lineChartData1 =  function () {
+    let xLabel = new Array(30).fill(0).map((item,i)=> i+1);
+    let dataValue = new Array(42).fill(0).map(item=>Math.floor(Math.random()*100));
+    return {
+        color:['#FFA900'],
+        dataZoom : {
+            type:"inside",
+            // orient:"vertical",
+            startValue:0,
+            endValue:10
+        },
+        legend: {
+            show: false,
+            top: '10%',
+            icon: "rect",
+            itemWidth: 10, // 图例标记的图形宽度。
+            //   itemGap: 20, // 图例每项之间的间隔。
+            itemHeight: 10, //  图例标记的图形高度。
+            textStyle: {
+                color: '#fff',
+                fontSize: 14,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        grid: {
+            top: '5%',
+            left: '10%',
+            right: '5%',
+            bottom: '20%',
+        },
+        xAxis: {
+            name:'日',
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            data: xLabel
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name: '单位产值能耗',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 2,
+                    },
+                },
+                symbolSize: 4,   //设定实心点的大小
+                data: dataValue,
+                areaStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: 'rgba(255,169,0,0.5)'
+                            }, {
+                                offset: 1, color: 'rgba(255,169,0,0.3)'
+                            }],
+                            global: false
+                        }
+                    },
+                },
+            }
+        ]
+    }
+}
+export const pieChartData =  function () {
+
+
+    return  {
+
+        title: {
+            text: `75%`,
+            subtext: '达成率',
+            left: 'center',
+            top: 'center',
+            itemGap: 0,
+            textStyle: {
+                fontSize: 28,
+                fontWeight: '600',
+                fontStyle: 'italic',
+                color: '#B8ECFF',
+            },
+            subtextStyle: {
+                fontSize: 10,
+                fontWeight: 'normal',
+                align: "center",
+                color: '#E8E8E8'
+            },
+        },
+        angleAxis: {
+            max: 100,
+            // 隐藏刻度线
+            show: false,
+            startAngle: 90
+        },
+        radiusAxis: {
+            type: 'category',
+            show: true,
+            axisLabel: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+            },
+            axisTick: {
+                show: false
+            },
+        },
+        polar: {
+            radius: '150%' //图形大小
+        },
+        series: [{
+            type: 'bar',
+            data: ['75'],
+            showBackground: true,
+            roundCap: true,
+            backgroundStyle: {
+                color: 'rgba(64, 76, 76, 1)',
+            },
+            coordinateSystem: 'polar',
+            barWidth: 20,
+            itemStyle: {
+                normal: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0, color: '#EA7F7F'
+                        }, {
+                            offset: 1, color: '#EA7F7F'
+                        }],
+                        global: false
+                    }
+                }
+            },
+        }]
+    }
+}
+
+
+
+// 修改弹框内容用到的方法
+function replaceHtmlWord(str) {
+    return str.replace("NO2", "NO<sub>2</sub>")
+        .replace("SO2", "SO<sub>2</sub>")
+        .replace("O3", "O<sub>3</sub>")
+    // .replace("PM10", "PM<sub>10</sub>")
+    // .replace("PM2.5", "PM<sub>2.5</sub>")
+
+}
+
+// 修改图例文字用到的方法
+function replaceWords(str) {
+    return str.replace("NO2", "NO{sub|2}")
+        .replace("SO2", "SO{sub|2}")
+        .replace("O3", "O{sub|3}")
+    // .replace("PM2.5", "PM{sub|2.5}")
+    // .replace("PM10", "PM{sub|10}");
+}
+
+/**
+ * 废气右侧折线图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const barChartData = function (data, xAxisData, legend,$echarts) {
+
+    return {
+        color:['#FADFA4','#7FB0FF','#FFFFFF','#947FEA'],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        legend: {
+            textStyle:{
+        color:'#ffffff'
+    }
+        },
+        grid: {
+            left: '3%',
+            top: '15%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        yAxis: {
+            type: 'category',
+            data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学', '海利得','榆林化工',
+                '联化科1', '立本作物1', '圣丰集团1', '茂盛生物1', '利尔化学1', '海利得1','榆林化工1',
+                '联化科2', '立本作物2', '圣丰集团2', '茂盛生物2', '利尔化学2', '海利得2','榆林化工2',
+                '联化科3', '立本作物3', '圣丰集团3', '茂盛生物3', '利尔化学3', '海利得3','榆林化工3',
+                '联化科4', '立本作物4', '圣丰集团4', '茂盛生物4', '利尔化学4', '海利得4','榆林化工4',
+                '联化科5', '立本作物5', '圣丰集团5', '茂盛生物5', '利尔化学5', '海利得5','榆林化工5',
+            ],
+
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate: 30,//label旋转角度
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        dataZoom : {
+            type:"inside",
+            orient:"vertical",
+            startValue:0,
+            endValue:7
+        },
+        series: [
+            {
+                name: '煤炭',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            },
+            {
+                name: '石油',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            },
+            {
+                name: '天然气',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            },
+            {
+                name: '煤气',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            }
+        ]
+    };
+}
+/**
+ * 散点图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const pointChartData = function (data, xAxisData, legend,$echarts) {
+
+    return  {
+        tooltip: {
+            trigger: 'item',
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学','榆林化工'],
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate: 30,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        yAxis: {
+            type: 'value',
+            name:'产值：单位万元',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            nameTextStyle: {
+                padding: [0, 0, 10, 30]
+            }
+        },
+        color:['#FF5959','#FADFA4','#C9FFD7'],
+        series: [
+            {
+                name:'联化科',
+                data: [
+                    {
+                        value: ['联化科', 200],
+                        symbolSize:28,
+                        itemStyle:{color:'#FF5959'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'立本作物',
+                data: [
+                   {
+                        value: ['立本作物', 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#FADFA4'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'圣丰集团',
+                data: [
+                   {
+                        value: ['圣丰集团', 150],
+                        symbolSize:16,
+                       itemStyle:{color:'#FADFA4'},
+
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'茂盛生物',
+                data: [
+                   {
+                        value: ['茂盛生物', 50],
+                        symbolSize:10,
+                        itemStyle:{color:'#C9FFD7'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'利尔化学',
+                data: [
+                    {
+                        value: ['利尔化学', 50],
+                        symbolSize:16,
+                        itemStyle:{color:'#C9FFD7'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'榆林化工',
+                data: [
+                    {
+                        value: ['榆林化工', 150],
+                        symbolSize:32,
+                        itemStyle:{color:'#FF5959'},
+                    }
+                ],
+                type: 'scatter'
+            },
+            /*{
+                data: [
+                    {
+                        value: [20, 200],
+                        symbolSize:28,
+                        itemStyle:{color:'#FF5959'},
+                        name:'联化科'
+                    },{
+                        value: [40, 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#FADFA4'},
+                        name:'立本作物'
+                    },{
+                        value: [60, 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#C9FFD7'},
+                        name:'圣丰集团'
+                    },{
+                        value: [80, 50],
+                        symbolSize:10,
+                        itemStyle:{color:'#C9FFD7'},
+                        name:'茂盛生物'
+                    },{
+                        value: [100, 50],
+                        symbolSize:16,
+                        name:'利尔化学'
+                    },{
+                        value: [120, 150],
+                        symbolSize:32,
+                        name:'榆林化工'
+                    }
+                ],
+                type: 'scatter'
+            },*/
+        ]
+    }
+}
diff --git a/src/components/energy/gas/right/energyGasRight.component.ts b/src/components/energy/gas/right/energyGasRight.component.ts
new file mode 100644
index 0000000..0e4093f
--- /dev/null
+++ b/src/components/energy/gas/right/energyGasRight.component.ts
@@ -0,0 +1,166 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./gasRight.component.html"
+import {pieChartData, barChartData,lineChartData,lineChartData1} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+import ScrollNumberComponent from "@/components/scrollNumber.component.vue"
+
+import * as echarts from 'echarts';
+import {getRandNumBetween} from "@/utils/utils";
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        ScrollNumberComponent,
+    },
+})
+export default class EnergyGasRightComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //
+    gasIcon = require("@/assets/img/energy/mei.png");
+    green = require("@/assets/img/energy/green-arr.png");
+    red = require("@/assets/img/energy/red-arr.png");
+    //单位产品耗能趋势分析数据
+    lineChartData: any = {};
+    //单位产值耗能趋势分析数据
+    lineChartData1: any = {};
+    //定时器
+    timer: any = null;
+    // 排放达标率数据
+    pieChartData: any = {}
+    //柱状图实例
+    bar: any = {}
+    //折线图实例
+    pie: any = {}
+    //单位产品耗能趋势分析实例
+    line: any = {}
+    //单位产值耗能趋势分析图实例
+    line1: any = {}
+    //企业详情数据
+    detail = {
+        target:130
+    }
+    //日用燃料数据
+    dayData = {
+        dayNum:1139.83,
+        yoy:11.2,
+        round:18
+    }
+    //周用燃料数据
+    weekData = {
+        dayNum:7978.81,
+        yoy:20.3,
+        round:14
+    }
+    //月用燃料数据
+    monthData = {
+        dayNum:34194.9,
+        yoy:18.3,
+        round:20
+    }
+    changeCardData(type){
+        const temp:any = {
+            dayNum:getRandNumBetween(1000,2000),
+            yoy:getRandNumBetween(10,20),
+            round:getRandNumBetween(10,20)
+        };
+
+        switch (type) {
+            case "dayData":
+
+                break;
+            case "weekData":
+                temp.dayNum *= 7
+                temp.yoy = getRandNumBetween(10,20)
+                temp.round = getRandNumBetween(10,20)
+                break;
+            case "monthData":
+                temp.dayNum *= 30
+                temp.yoy = getRandNumBetween(10,20)
+                temp.round = getRandNumBetween(10,20)
+                break;
+            default:
+                break
+        }
+        temp.dayNum = Number(temp.dayNum.toFixed(2))
+        this[type] = temp
+}
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        if (type === 'pie') {
+            this.pieChartData = pieChartData();
+        }
+        if (type === 'line1') {
+            this.lineChartData1 = lineChartData1()
+        }
+        if (type === 'line') {
+            this.lineChartData = lineChartData()
+        }
+    }
+
+    //折线图x轴坐标
+    xAxisData = ['石油化工', '无机化工', '有机化工', '精细化工', '化肥农药', '塑料制品', '橡胶制品']
+    //设置排放变化趋势默认选中项
+    lineChartType = '排放量'
+
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.pie.resize()
+            this.line.resize()
+            this.line1.resize()
+        }, 300)
+    }
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+    //图例
+    legend = ["水 (吨)",
+        "标准煤 (吨)"]
+
+    mounted() {
+        this.timer = setInterval(() => {
+            this.setChartData()
+            // this.autoRun()
+            // this.dayNum = Math.floor(Math.random()*10000)
+            this.changeCardData('dayData')
+            this.changeCardData('weekData')
+            this.changeCardData('monthData')
+        }, 6000)
+        window.addEventListener("resize", this.resize);
+    }
+
+    setChartData() {
+        this.pie.clear()
+        function getRandomIntInRange(min, max) {
+            return Math.floor(Math.random() * (max - min) + min);
+        }
+        const num = getRandomIntInRange(7,10)*10
+        this.pieChartData.title.text = num+'%'
+        this.pieChartData.series.data =[num]
+        this.pie.setOption(this.pieChartData)
+        this.line.clear()
+        this.lineChartData.series[0].data =  new Array(42).fill(0).map(item=>Math.floor(Math.random()*100));
+        this.line.setOption(this.lineChartData)
+        this.line1.clear()
+        this.lineChartData1.series[0].data =  new Array(42).fill(0).map(item=>Math.floor(Math.random()*100));
+        this.line1.setOption(this.lineChartData1)
+        this.detail.target = parseInt(String(Math.random()*200))
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+}
+
diff --git a/src/components/energy/gas/right/gasRight.component.html b/src/components/energy/gas/right/gasRight.component.html
new file mode 100644
index 0000000..9d0431f
--- /dev/null
+++ b/src/components/energy/gas/right/gasRight.component.html
@@ -0,0 +1,85 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            节能减排
+        </title-component>
+        <div class="energyRightTitle d-flex is-justify-space-between margin-top-23">
+            <span>节能目标 (kgce)</span>
+            <span>{{detail.target}}</span>
+        </div>
+        <hbt-echarts className="right-bar-chart" :options="pieChartData"
+                     @onChartInit="getEcharts($event,'pie')"></hbt-echarts>
+        <title-component :imgSrc="imgSrc">
+            单位产品耗能趋势分析
+        </title-component>
+        <div class="sub-title-legend">单位：kgce/m³</div>
+        <hbt-echarts className="right-bar-chart" :options="lineChartData"
+                     @onChartInit="getEcharts($event,'line')"></hbt-echarts>
+        <title-component :imgSrc="imgSrc">
+            单位产值耗能趋势分析
+        </title-component>
+        <div class="sub-title-legend">单位：kgce/万元</div>
+        <hbt-echarts className="right-bar-chart" :options="lineChartData1"
+                     @onChartInit="getEcharts($event,'line1')"></hbt-echarts>
+
+    </div>
+    <div class="center-box">
+        <div class="center-box-card-bg">
+            <div class="center-box-card-title">
+                <img :src="gasIcon" alt="">
+                <span>今日用燃料量（标准煤）</span>
+            </div>
+            <ScrollNumberComponent :value="dayData.dayNum"></ScrollNumberComponent>
+            <div class="d-flex is-justify-space-around center-box-card-bottom">
+                <div>
+                    <span>同比:</span>
+                    <img :src="green" alt="">
+                    <span>{{dayData.yoy}}%</span>
+                </div>
+                <div>
+                    <span>环比:</span>
+                    <img :src="red" alt="">
+                    <span>{{dayData.round}}%</span>
+                </div>
+            </div>
+        </div>
+        <div class="center-box-card-bg">
+            <div class="center-box-card-title">
+                <img :src="gasIcon" alt="">
+                <span>本周用燃料量（标准煤）</span>
+            </div>
+            <ScrollNumberComponent :value="weekData.dayNum"></ScrollNumberComponent>
+            <div class="d-flex is-justify-space-around center-box-card-bottom">
+                <div>
+                    <span>同比:</span>
+                    <img :src="green" alt="">
+                    <span>{{weekData.yoy}}%</span>
+                </div>
+                <div>
+                    <span>环比:</span>
+                    <img :src="red" alt="">
+                    <span>{{weekData.round}}%</span>
+                </div>
+            </div>
+        </div>
+        <div class="center-box-card-bg">
+            <div class="center-box-card-title">
+                <img :src="gasIcon" alt="">
+                <span>本月用燃料量（标准煤）</span>
+            </div>
+            <ScrollNumberComponent :value="monthData.dayNum"></ScrollNumberComponent>
+            <div class="d-flex is-justify-space-around center-box-card-bottom">
+                <div>
+                    <span>同比:</span>
+                    <img :src="green" alt="">
+                    <span>{{monthData.yoy}}%</span>
+                </div>
+                <div>
+                    <span>环比:</span>
+                    <img :src="red" alt="">
+                    <span>{{monthData.round}}%</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/components/energy/index/left/chartData.js b/src/components/energy/index/left/chartData.js
new file mode 100644
index 0000000..6305adf
--- /dev/null
+++ b/src/components/energy/index/left/chartData.js
@@ -0,0 +1,98 @@
+export const lineChartData = function (data, xAxisData, legend) {
+    return {
+        color: ['#FFFFFF','#FADFA4','#C9FFD7', '#947FEA'],
+        xAxis: {
+            name:'日',
+            type: 'category',
+            nameGap:5,
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: xAxisData
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: data,
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 40,
+            y: 40,
+            x2: 32,
+            y2: 20,
+        },
+        legend: {
+            data: legend,
+            top: 10,
+            padding: [2, 2],
+            icon: 'circle',
+            align: 'left',
+            itemGap: 10,
+            width: "100%",
+            itemWidth: 10,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 8,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        }
+
+    }
+}
diff --git a/src/components/energy/index/left/energyIndexLeft.component.html b/src/components/energy/index/left/energyIndexLeft.component.html
new file mode 100644
index 0000000..6ebd6c3
--- /dev/null
+++ b/src/components/energy/index/left/energyIndexLeft.component.html
@@ -0,0 +1,32 @@
+<div class="env-left">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            预警列表
+        </title-component>
+        <warning-list-component class="margin-top-30" @getItem="showWaring" :data-list="dataList"></warning-list-component>
+    </div>
+    <div class="box-content flex-1 margin-top-50">
+        <title-component :imgSrc="imgSrc" >
+            园区公辅工程能耗统计
+        </title-component>
+        <div class="radio-style radio-style-auto">
+            <el-radio-group @change="changeData" v-model="lineChartType">
+                <el-radio-button label="燃料"></el-radio-button>
+                <el-radio-button label="用电"></el-radio-button>
+                <el-radio-button label="用水"></el-radio-button>
+                <el-radio-button label="蒸汽"></el-radio-button>
+            </el-radio-group>
+        </div>
+        <div class="tabs-energy">
+            <div class="tabs-energy-item" @click="clickTab('日统计')">
+                <div class="tabs-energy-item-text">日统计</div>
+                <div class="under-line " :class="monthOrDay==='日统计'?'active':''"></div>
+            </div>
+            <div class="tabs-energy-item" @click="clickTab('月统计')">
+                <div class="tabs-energy-item-text">月统计</div>
+                <div class="under-line" :class="monthOrDay==='月统计'?'active':''"></div>
+            </div>
+        </div>
+        <hbt-echarts className="content-block" :options="option" @onChartInit="getEcharts($event)"></hbt-echarts>
+    </div>
+</div>
diff --git a/src/components/energy/index/left/energyIndexLeft.component.ts b/src/components/energy/index/left/energyIndexLeft.component.ts
new file mode 100644
index 0000000..ba25142
--- /dev/null
+++ b/src/components/energy/index/left/energyIndexLeft.component.ts
@@ -0,0 +1,152 @@
+import {Component, Emit, Vue} from 'vue-property-decorator';
+import template from "./energyIndexLeft.component.html"
+import {lineChartData} from "./chartData";
+import {dataForEnergyIndex} from "@/dataDemo/mockData";
+
+import TitleComponent from "@/components/title.component.vue"
+import WarningListComponent from "@/components/warningList.component.vue"
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        WarningListComponent
+    },
+})
+export default class EnergyIndexLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //报警列表
+    get dataList(){
+        return this.$store.state.warningList
+    }
+    timer: any = null;
+    //折线图数据
+    option: any = {}
+    //折线图实例
+    line: any = {}
+    //当前选中的类别
+    lineChartType = '燃料';
+    //日统计月统计切换标记
+    monthOrDay='日统计'
+    //类别切换
+    changeData(val){
+        console.log(val)
+        this.monthOrDay='日统计'
+    }
+    //日统计月统计切换
+    clickTab(type){
+        this.monthOrDay = type
+    }
+    //获取图表实例
+    getEcharts(e) {
+        this.line = e
+        this.option = lineChartData(dataForEnergyIndex.data,[14,15,16,17,18,19,20,21,22,23,24,25])
+    }
+    //展示告警信息
+    showWaring(item){
+
+        const levelMap = {
+            1:'一级',
+            2:'二级',
+            3:'三级',
+        }
+        const levelClassMap = {
+            3:'blue',
+            2:'yellow',
+            1:'red',
+        }
+        console.log(item)
+        this.getItem(Object.assign(item,{
+            type:'用电超标',
+            level:item.level,
+            levelClass:levelClassMap[item.level],
+            levelName:levelMap[item.level],
+            content:'用电量超过日阙值',
+            time:'2023年3月31日 05:03:45',
+            equipment:'1#气体探测仪',
+            tableHeader:[
+                {
+                    'prop':'use',
+                    'label':'用电量',
+                    'width':'90px',
+                }, {
+                    'prop':'watch',
+                    'label':'监测值',
+                }, {
+                    'prop':'limit',
+                    'label':'限值',
+                },
+            ],
+            tableData: [{
+                'use': '实时',
+                'watch': '12 kW·h',
+                'limit': '30 kW·h',
+            }, {
+                'use': '日用',
+                'watch': '512 kW·h',
+                'limit': '500 kW·h',
+            }, {
+                'use': '月用',
+                'watch': '2344 kW·h',
+                'limit': '15000 kW·h',
+            }, {
+                'use': '环比',
+                'watch': '12%',
+                'limit': '20%',
+            }]
+        }))
+    }
+    //点击告警信息
+    @Emit()
+    getItem(item) {
+        // console.log('item', item)
+    }
+
+
+
+    count = 1
+
+    //监听页面变化重新绘制图表
+    resize() {
+        setTimeout(() => {
+            this.line.resize();
+        }, 300)
+    }
+
+    mounted() {
+
+        //动态插入数据
+        this.timer = setInterval(() => {
+            this.line.clear();
+            this.line.setOption(this.option)
+        }, 6000)
+        window.addEventListener("resize", this.resize);
+    }
+
+
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+    changeMore() {
+        console.log(1)
+    }
+
+    changeClose() {
+        console.log(1)
+    }
+
+}
+
diff --git a/src/components/energy/index/right/chartData.js b/src/components/energy/index/right/chartData.js
new file mode 100644
index 0000000..73dc34e
--- /dev/null
+++ b/src/components/energy/index/right/chartData.js
@@ -0,0 +1,255 @@
+export const lineChartData =  function () {
+    let xLabel = ['Q1', 'Q2', 'Q3', 'Q4'];
+    let dataValue = [175, 90, 150, 75];
+    let dataValue1 = [50, 75, 175, 50];
+    return {
+        color:['#ECFF7F','#7FB0FF'],
+        legend: {
+            show: true,
+            top: '10%',
+            icon: "rect",
+            itemWidth: 10, // 图例标记的图形宽度。
+            //   itemGap: 20, // 图例每项之间的间隔。
+            itemHeight: 10, //  图例标记的图形高度。
+            textStyle: {
+                color: '#fff',
+                fontSize: 14,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        grid: {
+            top: '30%',
+            left: '10%',
+            right: '5%',
+            bottom: '20%',
+        },
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: xLabel
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name: '单位产值能耗',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 3,
+                    },
+                },
+                symbolSize: 8,   //设定实心点的大小
+                data: dataValue,
+            },
+            {
+                name: '单位产值用水',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 3,
+                    },
+                },
+                symbolSize: 8,   //设定实心点的大小
+                data: dataValue1,
+            }
+        ]
+    }
+}
+
+
+
+// 修改弹框内容用到的方法
+function replaceHtmlWord(str) {
+    return str.replace("NO2", "NO<sub>2</sub>")
+        .replace("SO2", "SO<sub>2</sub>")
+        .replace("O3", "O<sub>3</sub>")
+    // .replace("PM10", "PM<sub>10</sub>")
+    // .replace("PM2.5", "PM<sub>2.5</sub>")
+
+}
+
+// 修改图例文字用到的方法
+function replaceWords(str) {
+    return str.replace("NO2", "NO{sub|2}")
+        .replace("SO2", "SO{sub|2}")
+        .replace("O3", "O{sub|3}")
+    // .replace("PM2.5", "PM{sub|2.5}")
+    // .replace("PM10", "PM{sub|10}");
+}
+
+/**
+ * 废气右侧折线图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const barChartData = function (data, xAxisData, legend,$echarts) {
+    const chartData = data.map((item,i)=>{
+        let color = [];
+        if (i === 0){
+            color = ['#BD7EFF','#947FEA']
+        }else{
+            color = ['#67D6FF','#7DAEFF']
+        }
+        return {
+            'data': item,
+            'type': 'bar',
+            'smooth': true,
+            "name": legend[i],
+            'barWidth': 8,
+            'itemStyle': {
+                'borderRadius': [4, 4, 0, 0],
+                'color': function (params) {
+                    return new $echarts.graphic.LinearGradient(
+                        0, 0, 0, 1,
+                        [{
+                            offset: 0,
+                            color: color[0]
+                        },
+                            {
+                                offset: 1,
+                                color: color[1]
+                            }
+                        ]
+                    )
+                },
+            }
+        }
+    })
+    return {
+        color: ['#947FEA','#7DAEFF'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate:30,
+                fontSize:10
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: xAxisData
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: chartData,
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 40,
+            x2: 22,
+            y2: 40,
+        },
+        legend: {
+            data: legend,
+            top: 10,
+            padding: [2, 2],
+            formatter: function (name) {
+                return replaceWords(name);
+            },
+            icon:'circle',
+            align:'left',
+            itemGap:10,
+            width: "100%",
+            itemWidth:10,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 8,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        }
+
+    }
+}
diff --git a/src/components/energy/index/right/energyRight.component.html b/src/components/energy/index/right/energyRight.component.html
new file mode 100644
index 0000000..beb31c9
--- /dev/null
+++ b/src/components/energy/index/right/energyRight.component.html
@@ -0,0 +1,114 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            碳排放
+        </title-component>
+        <div class="d-flex flex-wrap">
+            <div class="two-item-line">
+                <div class="num-style">75</div>
+                <div class="text-style">节碳目标（吨）</div>
+            </div>
+            <div class="two-item-line">
+                <div class="num-style">120</div>
+                <div class="text-style">碳排总量（吨）</div>
+            </div>
+            <div class="two-item-line">
+                <div class="num-style">1020</div>
+                <div class="text-style">碳排放配额（吨）</div>
+            </div>
+            <div class="two-item-line">
+                <div class="num-style">75%</div>
+                <div class="text-style">达成率</div>
+            </div>
+        </div>
+        <div class="subTitle">
+            行业耗能统计
+        </div>
+        <hbt-echarts className="right-bar-chart" :options="barChartData"
+                     @onChartInit="getEcharts($event,'bar')"></hbt-echarts>
+        <div class="subTitle">
+            产值能耗分析
+        </div>
+        <hbt-echarts className="right-bar-chart" :options="lineChartData"
+                     @onChartInit="getEcharts($event,'line')"></hbt-echarts>
+
+    </div>
+    <div class="center-box four-items">
+        <div class="center-box-card-bg">
+            <div class="center-box-card-title">
+                <img :src="lightningIcon" alt="">
+                <span>今日用电量（kW·h）</span>
+            </div>
+            <ScrollNumberComponent :value="electricityDayData.dayNum"></ScrollNumberComponent>
+            <div class="d-flex is-justify-space-around center-box-card-bottom">
+                <div>
+                    <span>同比:</span>
+                    <img :src="green" alt="">
+                    <span>{{electricityDayData.yoy}}%</span>
+                </div>
+                <div>
+                    <span>环比:</span>
+                    <img :src="red" alt="">
+                    <span>{{electricityDayData.round}}%</span>
+                </div>
+            </div>
+        </div>
+        <div class="center-box-card-bg">
+            <div class="center-box-card-title">
+                <img :src="gasIcon" alt="">
+                <span>今日用水量（m³）</span>
+            </div>
+            <ScrollNumberComponent :value="waterDayData.dayNum"></ScrollNumberComponent>
+            <div class="d-flex is-justify-space-around center-box-card-bottom">
+                <div>
+                    <span>同比:</span>
+                    <img :src="green" alt="">
+                    <span>{{waterDayData.yoy}}%</span>
+                </div>
+                <div>
+                    <span>环比:</span>
+                    <img :src="red" alt="">
+                    <span>{{waterDayData.round}}%</span>
+                </div>
+            </div>
+        </div>
+        <div class="center-box-card-bg">
+            <div class="center-box-card-title">
+                <img :src="gasIcon" alt="">
+                <span>今日用燃料量（标准煤）</span>
+            </div>
+            <ScrollNumberComponent :value="fuelDayData.dayNum"></ScrollNumberComponent>
+            <div class="d-flex is-justify-space-around center-box-card-bottom">
+                <div>
+                    <span>同比:</span>
+                    <img :src="green" alt="">
+                    <span>{{fuelDayData.yoy}}%</span>
+                </div>
+                <div>
+                    <span>环比:</span>
+                    <img :src="red" alt="">
+                    <span>{{fuelDayData.round}}%</span>
+                </div>
+            </div>
+        </div>
+        <div class="center-box-card-bg">
+            <div class="center-box-card-title">
+                <img :src="gasIcon" alt="">
+                <span>今日用蒸汽量（kg）</span>
+            </div>
+            <ScrollNumberComponent :value="steamDayData.dayNum"></ScrollNumberComponent>
+            <div class="d-flex is-justify-space-around center-box-card-bottom">
+                <div>
+                    <span>同比:</span>
+                    <img :src="green" alt="">
+                    <span>{{steamDayData.yoy}}%</span>
+                </div>
+                <div>
+                    <span>环比:</span>
+                    <img :src="red" alt="">
+                    <span>{{steamDayData.round}}%</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/components/energy/index/right/energyRight.component.ts b/src/components/energy/index/right/energyRight.component.ts
new file mode 100644
index 0000000..58b374b
--- /dev/null
+++ b/src/components/energy/index/right/energyRight.component.ts
@@ -0,0 +1,144 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./energyRight.component.html"
+import {lineChartData, barChartData} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+
+import * as echarts from 'echarts';
+import ScrollNumberComponent from "@/components/scrollNumber.component.vue"
+import {getRandNumBetween} from "@/utils/utils";
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        ScrollNumberComponent,
+    },
+})
+export default class EnergyRightComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //柱状图数据
+    barChartData: any = {};
+    //定时器
+    timer: any = null;
+    // 排放达标率数据
+    lineChartData: any = {}
+    //柱状图实例
+    bar: any = {}
+    //饼图实例
+    line: any = {}
+    //图标
+    gasIcon = require("@/assets/img/energy/mei.png");
+    lightningIcon = require("@/assets/img/energy/dian.png");
+    green = require("@/assets/img/energy/green-arr.png");
+    red = require("@/assets/img/energy/red-arr.png");
+    //日用电数据
+    electricityDayData = {
+        dayNum: 1139.83,
+        yoy: 11.2,
+        round: 18
+    }
+    //日用水数据
+    waterDayData = {
+        dayNum: 1139.83,
+        yoy: 11.2,
+        round: 18
+    }
+    //日用燃料数据
+    fuelDayData = {
+        dayNum: 1139.83,
+        yoy: 11.2,
+        round: 18
+    }
+    //日用蒸汽数据
+    steamDayData = {
+        dayNum: 1139.83,
+        yoy: 11.2,
+        round: 18
+    }
+    //初始化卡片数据
+    changeCardData(type,isInit='') {
+        let temp: any = this[type]
+        if (isInit === 'init'){
+            temp = {
+                dayNum: getRandNumBetween(1000, 2000),
+                yoy: getRandNumBetween(10, 20),
+                round: getRandNumBetween(10, 20)
+            };
+
+        }else{
+            temp.dayNum += Math.random()*10
+        }
+        temp.dayNum = Number(temp.dayNum.toFixed(2))
+        this[type] = temp
+    }
+
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        if (type === 'line') {
+            this.lineChartData = lineChartData();
+        }
+        if (type === 'bar') {
+            this.barChartData = barChartData([[90, 55, 80, 85, 25, 60, 60], [160, 80, 130, 133, 40, 95, 95]], this.xAxisData, this.legend, echarts)
+        }
+    }
+
+    //折线图x轴坐标
+    xAxisData = ['石油化工', '无机化工', '有机化工', '精细化工', '化肥农药', '塑料制品', '橡胶制品']
+    //设置排放变化趋势默认选中项
+    lineChartType = '排放量'
+
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.line.resize()
+            this.bar.resize()
+        }, 300)
+    }
+
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+    //图例
+    legend = ["水 (吨)",
+        "标准煤 (吨)"]
+
+    mounted() {
+        this.timer = setInterval(() => {
+            this.setChartData()
+            this.changeCardData('electricityDayData')
+            this.changeCardData('waterDayData')
+            this.changeCardData('fuelDayData')
+            this.changeCardData('steamDayData')
+        }, 6000)
+        this.changeCardData('electricityDayData','init')
+        this.changeCardData('waterDayData','init')
+        this.changeCardData('fuelDayData','init')
+        this.changeCardData('steamDayData','init')
+
+        window.addEventListener("resize", this.resize);
+
+    }
+
+    setChartData() {
+        this.line.clear()
+        this.line.setOption(this.lineChartData)
+        this.bar.clear()
+        this.bar.setOption(this.barChartData)
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+}
+
diff --git a/src/components/energy/steam/left/chartData.js b/src/components/energy/steam/left/chartData.js
new file mode 100644
index 0000000..8b90ce7
--- /dev/null
+++ b/src/components/energy/steam/left/chartData.js
@@ -0,0 +1,472 @@
+export const lineChartData =  function () {
+    let xLabel = ['Q1', 'Q2', 'Q3', 'Q4'];
+    let dataValue = [175, 90, 150, 75];
+    let dataValue1 = [50, 75, 175, 50];
+    return {
+        color:['#ECFF7F','#7FB0FF'],
+        legend: {
+            show: true,
+            top: '10%',
+            icon: "rect",
+            itemWidth: 10, // 图例标记的图形宽度。
+            //   itemGap: 20, // 图例每项之间的间隔。
+            itemHeight: 10, //  图例标记的图形高度。
+            textStyle: {
+                color: '#fff',
+                fontSize: 14,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        grid: {
+            top: '30%',
+            left: '10%',
+            right: '5%',
+            bottom: '20%',
+        },
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            data: xLabel
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name: '单位产值能耗',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 3,
+                    },
+                },
+                symbolSize: 8,   //设定实心点的大小
+                data: dataValue,
+            },
+            {
+                name: '单位产值用水',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 3,
+                    },
+                },
+                symbolSize: 8,   //设定实心点的大小
+                data: dataValue1,
+            }
+        ]
+    }
+}
+export const pieChartData =  function () {
+    /* 数据 */
+    let nameList = ["石油化工", "无机化工", "有机化工", "精细化工",'化肥农药','塑料制品','橡胶制品'];
+    let valueList = [70,60,50, 40, 30, 20,10];
+
+    /* 整合 */
+    let colorList =  ["#FFFFFF", "#FADFA4", "#7FB0FF", "#ECFF7F", "#DD7171","#C9FFD7","#947FEA"];
+    let data = [];
+    nameList.map((item,index) => {
+        data.push({
+            name:item,
+            value:valueList[index]
+        })
+    })
+
+    /* 函数 */
+// 数字分割：1653 => 1,653
+    const formatNum = (value) => {
+        if (!value && value !== 0) return 0;
+        let str = value.toString();
+        let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
+        return str.replace(reg, "$1,");
+    }
+
+    return  {
+        color: colorList,
+        legend:{
+            show:true,
+            top:20,
+            right: 0,
+            orient: "vertical", //改变排列方式
+            itemWidth: 10,
+            itemHeight: 10,
+            textStyle: {
+                color: '#fff',
+                fontSize: 12,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        tooltip: {
+            trigger: 'item',
+            axisPointer: {
+                type: 'none'
+            },
+            position: function (point, params, dom, rect, size) { // 提示框位置
+                let x = 0;
+                let y = 0;
+                //提示框定位
+                if (point[0] + size.contentSize[0] < size.viewSize[0]) {
+                    x = point[0]
+                } else if (point[0] > size.contentSize[0]) {
+                    x = point[0] - size.contentSize[0]
+                } else {
+                    x = "30%"
+                }
+                if (point[1] > size.contentSize[1]) {
+                    y = point[1] - size.contentSize[1]
+                } else if (point[1] + size.contentSize[1] < size.viewSize[1]) {
+                    y = point[1]
+                } else {
+                    y = "30%"
+                }
+                return [x, y];
+            },
+            formatter: params => {
+                let pieColor = params["color"];
+                return `
+            <div style="position:relative;">
+               <div style="width: 9px;height: 9px;background: ${pieColor};border: 1px solid #FFFFFF;position:absolute;top:50%;transform:translateY(-50%);left:0;border-radius:50%;"></div>
+               <span style="margin:0 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 400;color: #FFFFFF;">${params.name}</span>
+            </div>
+            <div style="margin:12px 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Regular;font-weight: 500;color: #FFFFFF;">${formatNum(params.value)}kgce<span style="margin-left:24px;">${[params.percent]}%</span></div>
+         `
+            },
+            extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
+        },
+        series: [{
+            type: 'pie',
+            roseType: true,
+            center:['40%','50%'],
+            radius: ["30%", "80%"],
+            label: {
+                show: false,
+            },
+            itemStyle:{
+                borderRadius:3
+            },
+            data: data
+        }]
+    };
+}
+
+
+
+/**
+ * 废气右侧折线图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const barChartData = function (data, xAxisData, legend,$echarts) {
+
+    return {
+        color:['#947FEA','#684FCE','#422BA1'],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        legend: {
+            textStyle:{
+        color:'#ffffff'
+    }
+        },
+        grid: {
+            left: '3%',
+            top: '15%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        yAxis: {
+            type: 'category',
+            data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学', '海利得','榆林化工',
+                '联化科1', '立本作物1', '圣丰集团1', '茂盛生物1', '利尔化学1', '海利得1','榆林化工1',
+                '联化科2', '立本作物2', '圣丰集团2', '茂盛生物2', '利尔化学2', '海利得2','榆林化工2',
+                '联化科3', '立本作物3', '圣丰集团3', '茂盛生物3', '利尔化学3', '海利得3','榆林化工3',
+                '联化科4', '立本作物4', '圣丰集团4', '茂盛生物4', '利尔化学4', '海利得4','榆林化工4',
+                '联化科5', '立本作物5', '圣丰集团5', '茂盛生物5', '利尔化学5', '海利得5','榆林化工5',
+            ],
+
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate: 30,//label旋转角度
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        dataZoom : {
+            type:"inside",
+            orient:"vertical",
+            startValue:0,
+            endValue:7
+        },
+        series: [
+            {
+                name: '低压',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100+100))
+            },
+            {
+                name: '中压',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100+100))
+            },
+            {
+                name: '高压',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100+100))
+            }
+        ]
+    };
+}
+/**
+ * 散点图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const pointChartData = function (data, xAxisData, legend,$echarts) {
+
+    return  {
+        tooltip: {
+            trigger: 'item',
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学','榆林化工'],
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate: 30,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        yAxis: {
+            type: 'value',
+            name:'产值：单位万元',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            nameTextStyle: {
+                padding: [0, 0, 10, 30]
+            }
+        },
+        color:['#FF5959','#FADFA4','#C9FFD7'],
+        series: [
+            {
+                name:'联化科',
+                data: [
+                    {
+                        value: ['联化科', 200],
+                        symbolSize:28,
+                        itemStyle:{color:'#FF5959'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'立本作物',
+                data: [
+                   {
+                        value: ['立本作物', 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#FADFA4'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'圣丰集团',
+                data: [
+                   {
+                        value: ['圣丰集团', 150],
+                        symbolSize:16,
+                       itemStyle:{color:'#FADFA4'},
+
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'茂盛生物',
+                data: [
+                   {
+                        value: ['茂盛生物', 50],
+                        symbolSize:10,
+                        itemStyle:{color:'#C9FFD7'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'利尔化学',
+                data: [
+                    {
+                        value: ['利尔化学', 50],
+                        symbolSize:16,
+                        itemStyle:{color:'#C9FFD7'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'榆林化工',
+                data: [
+                    {
+                        value: ['榆林化工', 150],
+                        symbolSize:32,
+                        itemStyle:{color:'#FF5959'},
+                    }
+                ],
+                type: 'scatter'
+            },
+            /*{
+                data: [
+                    {
+                        value: [20, 200],
+                        symbolSize:28,
+                        itemStyle:{color:'#FF5959'},
+                        name:'联化科'
+                    },{
+                        value: [40, 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#FADFA4'},
+                        name:'立本作物'
+                    },{
+                        value: [60, 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#C9FFD7'},
+                        name:'圣丰集团'
+                    },{
+                        value: [80, 50],
+                        symbolSize:10,
+                        itemStyle:{color:'#C9FFD7'},
+                        name:'茂盛生物'
+                    },{
+                        value: [100, 50],
+                        symbolSize:16,
+                        name:'利尔化学'
+                    },{
+                        value: [120, 150],
+                        symbolSize:32,
+                        name:'榆林化工'
+                    }
+                ],
+                type: 'scatter'
+            },*/
+        ]
+    }
+}
diff --git a/src/components/energy/steam/left/steamLeft.component.html b/src/components/energy/steam/left/steamLeft.component.html
new file mode 100644
index 0000000..2d07dcf
--- /dev/null
+++ b/src/components/energy/steam/left/steamLeft.component.html
@@ -0,0 +1,21 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            企业蒸汽使用量排行
+        </title-component>
+        <hbt-echarts className="right-bar-chart" :options="barChartData"
+                     @onChartInit="getEcharts($event,'bar')"></hbt-echarts>
+        <div class="subTitle">
+            企业产值耗能分析
+        </div>
+        <div class="sub-title-legend">圆圈面积：耗能（tce）</div>
+        <hbt-echarts className="right-bar-chart" :options="pointChartData"
+                     @onChartInit="getEcharts($event,'point')"></hbt-echarts>
+        <div class="subTitle">
+            行业耗能分析
+        </div>
+        <hbt-echarts className="right-bar-chart" :options="pieChartData"
+                     @onChartInit="getEcharts($event,'pie')"></hbt-echarts>
+    </div>
+
+</div>
diff --git a/src/components/energy/steam/left/steamLeft.component.ts b/src/components/energy/steam/left/steamLeft.component.ts
new file mode 100644
index 0000000..fc51f4e
--- /dev/null
+++ b/src/components/energy/steam/left/steamLeft.component.ts
@@ -0,0 +1,112 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./steamLeft.component.html"
+import {pieChartData, barChartData,pointChartData} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+
+import * as echarts from 'echarts';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class SteamLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //散点图数据
+    pointChartData: any = {};
+    //叠加柱状图
+    barChartData: any = {};
+    //定时器
+    timer: any = null;
+    // 排放达标率数据
+    pieChartData: any = {}
+    //柱状图实例
+    bar: any = {}
+    //折线图实例
+    pie: any = {}
+    //散点图实例
+    point: any = {}
+
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        if (type === 'pie') {
+            this.pieChartData = pieChartData();
+        }
+        if (type === 'bar') {
+            this.barChartData = barChartData([[90, 55, 80, 85, 25, 60, 60], [160, 80, 130, 133, 40, 95, 95]], this.xAxisData, this.legend, echarts)
+            this.bar.on('click', function (params) {
+                console.log(params);
+            });
+        }
+        if (type === 'point') {
+            this.pointChartData = pointChartData([[90, 55, 80, 85, 25, 60, 60], [160, 80, 130, 133, 40, 95, 95]], this.xAxisData, this.legend, echarts)
+        }
+    }
+
+    //折线图x轴坐标
+    xAxisData = ['石油化工', '无机化工', '有机化工', '精细化工', '化肥农药', '塑料制品', '橡胶制品']
+    //设置排放变化趋势默认选中项
+    lineChartType = '排放量'
+
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.pie.resize()
+            this.bar.resize()
+        }, 300)
+    }
+    autoRun(){
+        if (this.barChartData.dataZoom.endValue === 42){
+            this.barChartData.dataZoom.startValue = 0
+            this.barChartData.dataZoom.endValue = 7;
+        }else{
+            this.barChartData.dataZoom.startValue+=1;
+            this.barChartData.dataZoom.endValue+=1;
+        }
+        //最新出来的数据
+        let selectDataE = this.barChartData.yAxis.data[this.barChartData.dataZoom.endValue]
+
+        this.bar.setOption(this.barChartData)
+    }
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+    //图例
+    legend = ["水 (吨)",
+        "标准煤 (吨)"]
+
+    mounted() {
+        this.timer = setInterval(() => {
+            this.setChartData()
+            this.autoRun()
+        }, 6000)
+
+
+        window.addEventListener("resize", this.resize);
+
+    }
+
+    setChartData() {
+        this.pie.clear()
+        this.pie.setOption(this.pieChartData)
+        this.point.clear()
+        this.point.setOption(this.pointChartData)
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+}
+
diff --git a/src/components/energy/steam/right/chartData.js b/src/components/energy/steam/right/chartData.js
new file mode 100644
index 0000000..2862060
--- /dev/null
+++ b/src/components/energy/steam/right/chartData.js
@@ -0,0 +1,599 @@
+export const lineChartData =  function () {
+    let xLabel = new Array(30).fill(0).map((item,i)=> i+1);
+    let dataValue = new Array(42).fill(0).map(item=>Math.floor(Math.random()*100));
+    return {
+        color:['#EA7F7F'],
+        dataZoom : {
+            type:"inside",
+            // orient:"vertical",
+            startValue:0,
+            endValue:10
+        },
+        legend: {
+            show: false,
+            top: '10%',
+            icon: "rect",
+            itemWidth: 10, // 图例标记的图形宽度。
+            //   itemGap: 20, // 图例每项之间的间隔。
+            itemHeight: 10, //  图例标记的图形高度。
+            textStyle: {
+                color: '#fff',
+                fontSize: 14,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        grid: {
+            top: '5%',
+            left: '10%',
+            right: '5%',
+            bottom: '20%',
+        },
+        xAxis: {
+            name:'日',
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            data: xLabel
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name: '单位产值能耗',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 2,
+                    },
+                },
+                symbolSize: 4,   //设定实心点的大小
+                data: dataValue,
+                areaStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: 'rgba(234,127,127,0.3)'
+                            }, {
+                                offset: 1, color: 'rgba(234,127,127,0.3)'
+                            }],
+                            global: false
+                        }
+                    },
+                },
+            }
+        ]
+    }
+}
+export const lineChartData1 =  function () {
+    let xLabel = new Array(30).fill(0).map((item,i)=> i+1);
+    let dataValue = new Array(42).fill(0).map(item=>Math.floor(Math.random()*100));
+    return {
+        color:['#FFA900'],
+        dataZoom : {
+            type:"inside",
+            // orient:"vertical",
+            startValue:0,
+            endValue:10
+        },
+        legend: {
+            show: false,
+            top: '10%',
+            icon: "rect",
+            itemWidth: 10, // 图例标记的图形宽度。
+            //   itemGap: 20, // 图例每项之间的间隔。
+            itemHeight: 10, //  图例标记的图形高度。
+            textStyle: {
+                color: '#fff',
+                fontSize: 14,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        grid: {
+            top: '5%',
+            left: '10%',
+            right: '5%',
+            bottom: '20%',
+        },
+        xAxis: {
+            name:'日',
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            data: xLabel
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name: '单位产值能耗',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 2,
+                    },
+                },
+                symbolSize: 4,   //设定实心点的大小
+                data: dataValue,
+                areaStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: 'rgba(255,169,0,0.5)'
+                            }, {
+                                offset: 1, color: 'rgba(255,169,0,0.3)'
+                            }],
+                            global: false
+                        }
+                    },
+                },
+            }
+        ]
+    }
+}
+export const pieChartData =  function () {
+
+
+    return  {
+
+        title: {
+            text: `75%`,
+            subtext: '达成率',
+            left: 'center',
+            top: 'center',
+            itemGap: 0,
+            textStyle: {
+                fontSize: 28,
+                fontWeight: '600',
+                fontStyle: 'italic',
+                color: '#B8ECFF',
+            },
+            subtextStyle: {
+                fontSize: 10,
+                fontWeight: 'normal',
+                align: "center",
+                color: '#E8E8E8'
+            },
+        },
+        angleAxis: {
+            max: 100,
+            // 隐藏刻度线
+            show: false,
+            startAngle: 90
+        },
+        radiusAxis: {
+            type: 'category',
+            show: true,
+            axisLabel: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+            },
+            axisTick: {
+                show: false
+            },
+        },
+        polar: {
+            radius: '150%' //图形大小
+        },
+        series: [{
+            type: 'bar',
+            data: ['75'],
+            showBackground: true,
+            roundCap: true,
+            backgroundStyle: {
+                color: 'rgba(64, 76, 76, 1)',
+            },
+            coordinateSystem: 'polar',
+            barWidth: 20,
+            itemStyle: {
+                normal: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0, color: '#EA7F7F'
+                        }, {
+                            offset: 1, color: '#EA7F7F'
+                        }],
+                        global: false
+                    }
+                }
+            },
+        }]
+    }
+}
+
+
+
+// 修改弹框内容用到的方法
+function replaceHtmlWord(str) {
+    return str.replace("NO2", "NO<sub>2</sub>")
+        .replace("SO2", "SO<sub>2</sub>")
+        .replace("O3", "O<sub>3</sub>")
+    // .replace("PM10", "PM<sub>10</sub>")
+    // .replace("PM2.5", "PM<sub>2.5</sub>")
+
+}
+
+// 修改图例文字用到的方法
+function replaceWords(str) {
+    return str.replace("NO2", "NO{sub|2}")
+        .replace("SO2", "SO{sub|2}")
+        .replace("O3", "O{sub|3}")
+    // .replace("PM2.5", "PM{sub|2.5}")
+    // .replace("PM10", "PM{sub|10}");
+}
+
+/**
+ * 废气右侧折线图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const barChartData = function (data, xAxisData, legend,$echarts) {
+
+    return {
+        color:['#FADFA4','#7FB0FF','#FFFFFF','#947FEA'],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        legend: {
+            textStyle:{
+        color:'#ffffff'
+    }
+        },
+        grid: {
+            left: '3%',
+            top: '15%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        yAxis: {
+            type: 'category',
+            data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学', '海利得','榆林化工',
+                '联化科1', '立本作物1', '圣丰集团1', '茂盛生物1', '利尔化学1', '海利得1','榆林化工1',
+                '联化科2', '立本作物2', '圣丰集团2', '茂盛生物2', '利尔化学2', '海利得2','榆林化工2',
+                '联化科3', '立本作物3', '圣丰集团3', '茂盛生物3', '利尔化学3', '海利得3','榆林化工3',
+                '联化科4', '立本作物4', '圣丰集团4', '茂盛生物4', '利尔化学4', '海利得4','榆林化工4',
+                '联化科5', '立本作物5', '圣丰集团5', '茂盛生物5', '利尔化学5', '海利得5','榆林化工5',
+            ],
+
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate: 30,//label旋转角度
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        dataZoom : {
+            type:"inside",
+            orient:"vertical",
+            startValue:0,
+            endValue:7
+        },
+        series: [
+            {
+                name: '煤炭',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            },
+            {
+                name: '石油',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            },
+            {
+                name: '天然气',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            },
+            {
+                name: '煤气',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            }
+        ]
+    };
+}
+/**
+ * 散点图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const pointChartData = function (data, xAxisData, legend,$echarts) {
+
+    return  {
+        tooltip: {
+            trigger: 'item',
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学','榆林化工'],
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate: 30,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        yAxis: {
+            type: 'value',
+            name:'产值：单位万元',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            nameTextStyle: {
+                padding: [0, 0, 10, 30]
+            }
+        },
+        color:['#FF5959','#FADFA4','#C9FFD7'],
+        series: [
+            {
+                name:'联化科',
+                data: [
+                    {
+                        value: ['联化科', 200],
+                        symbolSize:28,
+                        itemStyle:{color:'#FF5959'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'立本作物',
+                data: [
+                   {
+                        value: ['立本作物', 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#FADFA4'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'圣丰集团',
+                data: [
+                   {
+                        value: ['圣丰集团', 150],
+                        symbolSize:16,
+                       itemStyle:{color:'#FADFA4'},
+
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'茂盛生物',
+                data: [
+                   {
+                        value: ['茂盛生物', 50],
+                        symbolSize:10,
+                        itemStyle:{color:'#C9FFD7'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'利尔化学',
+                data: [
+                    {
+                        value: ['利尔化学', 50],
+                        symbolSize:16,
+                        itemStyle:{color:'#C9FFD7'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'榆林化工',
+                data: [
+                    {
+                        value: ['榆林化工', 150],
+                        symbolSize:32,
+                        itemStyle:{color:'#FF5959'},
+                    }
+                ],
+                type: 'scatter'
+            },
+            /*{
+                data: [
+                    {
+                        value: [20, 200],
+                        symbolSize:28,
+                        itemStyle:{color:'#FF5959'},
+                        name:'联化科'
+                    },{
+                        value: [40, 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#FADFA4'},
+                        name:'立本作物'
+                    },{
+                        value: [60, 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#C9FFD7'},
+                        name:'圣丰集团'
+                    },{
+                        value: [80, 50],
+                        symbolSize:10,
+                        itemStyle:{color:'#C9FFD7'},
+                        name:'茂盛生物'
+                    },{
+                        value: [100, 50],
+                        symbolSize:16,
+                        name:'利尔化学'
+                    },{
+                        value: [120, 150],
+                        symbolSize:32,
+                        name:'榆林化工'
+                    }
+                ],
+                type: 'scatter'
+            },*/
+        ]
+    }
+}
diff --git a/src/components/energy/steam/right/steamRight.component.html b/src/components/energy/steam/right/steamRight.component.html
new file mode 100644
index 0000000..6d3139b
--- /dev/null
+++ b/src/components/energy/steam/right/steamRight.component.html
@@ -0,0 +1,93 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            单位产品耗能趋势分析
+        </title-component>
+        <div class="sub-title-legend">单位：kgce/m³</div>
+        <hbt-echarts className="steam-right-chart" :options="lineChartData"
+                     @onChartInit="getEcharts($event,'line')"></hbt-echarts>
+        <title-component :imgSrc="imgSrc">
+            单位产值耗能趋势分析
+        </title-component>
+        <div class="sub-title-legend">单位：kgce/万元</div>
+        <hbt-echarts className="steam-right-chart" :options="lineChartData1"
+                     @onChartInit="getEcharts($event,'line1')"></hbt-echarts>
+        <title-component :imgSrc="imgSrc">
+            关联企业
+        </title-component>
+        <div class="company-list">
+            <div v-list="i" v-for="(item,i) in companyList"
+                 :class="[{'animate__fadeInLeft':i === 0}]"
+                 class="company-list-box animate__animated"
+            >
+                <div class="top">
+                    {{item.type}}
+                </div>
+                <div>
+                    {{item.name}}
+                </div>
+            </div>
+        </div>
+
+
+    </div>
+    <div class="center-box">
+        <div class="center-box-card-bg">
+            <div class="center-box-card-title">
+                <img :src="gasIcon" alt="">
+                <span>今日用蒸汽量（kg）</span>
+            </div>
+            <ScrollNumberComponent :value="dayData.dayNum"></ScrollNumberComponent>
+            <div class="d-flex is-justify-space-around center-box-card-bottom">
+                <div>
+                    <span>同比:</span>
+                    <img :src="green" alt="">
+                    <span>{{dayData.yoy}}%</span>
+                </div>
+                <div>
+                    <span>环比:</span>
+                    <img :src="red" alt="">
+                    <span>{{dayData.round}}%</span>
+                </div>
+            </div>
+        </div>
+        <div class="center-box-card-bg">
+            <div class="center-box-card-title">
+                <img :src="gasIcon" alt="">
+                <span>本周用蒸汽量（kg）</span>
+            </div>
+            <ScrollNumberComponent :value="weekData.dayNum"></ScrollNumberComponent>
+            <div class="d-flex is-justify-space-around center-box-card-bottom">
+                <div>
+                    <span>同比:</span>
+                    <img :src="green" alt="">
+                    <span>{{weekData.yoy}}%</span>
+                </div>
+                <div>
+                    <span>环比:</span>
+                    <img :src="red" alt="">
+                    <span>{{weekData.round}}%</span>
+                </div>
+            </div>
+        </div>
+        <div class="center-box-card-bg">
+            <div class="center-box-card-title">
+                <img :src="gasIcon" alt="">
+                <span>本月用蒸汽量（kg）</span>
+            </div>
+            <ScrollNumberComponent :value="monthData.dayNum"></ScrollNumberComponent>
+            <div class="d-flex is-justify-space-around center-box-card-bottom">
+                <div>
+                    <span>同比:</span>
+                    <img :src="green" alt="">
+                    <span>{{monthData.yoy}}%</span>
+                </div>
+                <div>
+                    <span>环比:</span>
+                    <img :src="red" alt="">
+                    <span>{{monthData.round}}%</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/components/energy/steam/right/steamRight.component.ts b/src/components/energy/steam/right/steamRight.component.ts
new file mode 100644
index 0000000..a5ae8b7
--- /dev/null
+++ b/src/components/energy/steam/right/steamRight.component.ts
@@ -0,0 +1,162 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./steamRight.component.html"
+import {pieChartData, barChartData,lineChartData,lineChartData1} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+import ScrollNumberComponent from "@/components/scrollNumber.component.vue"
+
+import * as echarts from 'echarts';
+import {getRandNumBetween} from "@/utils/utils";
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        ScrollNumberComponent,
+    },
+})
+export default class SteamRightComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //
+    gasIcon = require("@/assets/img/energy/zq.png");
+    green = require("@/assets/img/energy/green-arr.png");
+    red = require("@/assets/img/energy/red-arr.png");
+    //单位产品耗能趋势分析数据
+    lineChartData: any = {};
+    //单位产值耗能趋势分析数据
+    lineChartData1: any = {};
+    //定时器
+    timer: any = null;
+
+    //柱状图实例
+    bar: any = {}
+    //单位产品耗能趋势分析实例
+    line: any = {}
+    //单位产值耗能趋势分析图实例
+    line1: any = {}
+    //企业详情数据
+    detail = {
+        target:130
+    }
+    //日用燃料数据
+    dayData = {
+        dayNum:1139.83,
+        yoy:11.2,
+        round:18
+    }
+    //周用燃料数据
+    weekData = {
+        dayNum:7978.81,
+        yoy:20.3,
+        round:14
+    }
+    //月用燃料数据
+    monthData = {
+        dayNum:34194.9,
+        yoy:18.3,
+        round:20
+    }
+    //关联企业
+    companyList = [
+        {
+            name:'协鑫能科',type:'上游企业'
+        },{
+            name:'嘉化能源',type:'上游企业'
+        },{
+            name:'福能股份',type:'上游企业'
+        },
+    ]
+    changeCardData(type){
+        const temp:any = {
+            dayNum:getRandNumBetween(1000,2000),
+            yoy:getRandNumBetween(10,20),
+            round:getRandNumBetween(10,20)
+        };
+
+        switch (type) {
+            case "dayData":
+
+                break;
+            case "weekData":
+                temp.dayNum *= 7
+                temp.yoy = getRandNumBetween(10,20)
+                temp.round = getRandNumBetween(10,20)
+                break;
+            case "monthData":
+                temp.dayNum *= 30
+                temp.yoy = getRandNumBetween(10,20)
+                temp.round = getRandNumBetween(10,20)
+                break;
+            default:
+                break
+        }
+        temp.dayNum = Number(temp.dayNum.toFixed(2))
+        this[type] = temp
+}
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        if (type === 'line1') {
+            this.lineChartData1 = lineChartData1()
+        }
+        if (type === 'line') {
+            this.lineChartData = lineChartData()
+        }
+    }
+
+    //折线图x轴坐标
+    xAxisData = ['石油化工', '无机化工', '有机化工', '精细化工', '化肥农药', '塑料制品', '橡胶制品']
+    //设置排放变化趋势默认选中项
+    lineChartType = '排放量'
+
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.line.resize()
+            this.line1.resize()
+        }, 300)
+    }
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+    //图例
+    legend = ["水 (吨)",
+        "标准煤 (吨)"]
+
+    mounted() {
+        this.timer = setInterval(() => {
+            this.setChartData()
+            // this.autoRun()
+            // this.dayNum = Math.floor(Math.random()*10000)
+            this.changeCardData('dayData')
+            this.changeCardData('weekData')
+            this.changeCardData('monthData')
+        }, 6000)
+        window.addEventListener("resize", this.resize);
+    }
+
+    setChartData() {
+
+        this.line.clear()
+        this.lineChartData.series[0].data =  new Array(42).fill(0).map(item=>Math.floor(Math.random()*100));
+        this.line.setOption(this.lineChartData)
+        this.line1.clear()
+        this.lineChartData1.series[0].data =  new Array(42).fill(0).map(item=>Math.floor(Math.random()*100));
+        this.line1.setOption(this.lineChartData1)
+        this.detail.target = parseInt(String(Math.random()*200))
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+}
+
diff --git a/src/components/energy/water/left/chartData.js b/src/components/energy/water/left/chartData.js
new file mode 100644
index 0000000..e530971
--- /dev/null
+++ b/src/components/energy/water/left/chartData.js
@@ -0,0 +1,447 @@
+export const lineChartData = function () {
+    let xLabel = ['Q1', 'Q2', 'Q3', 'Q4'];
+    let dataValue = [175, 90, 150, 75];
+    let dataValue1 = [50, 75, 175, 50];
+    return {
+        color: ['#ECFF7F', '#7FB0FF'],
+        legend: {
+            show: true,
+            top: '10%',
+            icon: "rect",
+            itemWidth: 10, // 图例标记的图形宽度。
+            //   itemGap: 20, // 图例每项之间的间隔。
+            itemHeight: 10, //  图例标记的图形高度。
+            textStyle: {
+                color: '#fff',
+                fontSize: 14,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        grid: {
+            top: '30%',
+            left: '10%',
+            right: '5%',
+            bottom: '20%',
+        },
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            data: xLabel
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name: '单位产值能耗',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 3,
+                    },
+                },
+                symbolSize: 8,   //设定实心点的大小
+                data: dataValue,
+            },
+            {
+                name: '单位产值用水',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 3,
+                    },
+                },
+                symbolSize: 8,   //设定实心点的大小
+                data: dataValue1,
+            }
+        ]
+    }
+}
+export const pieChartData = function () {
+    /* 数据 */
+    let nameList = ["石油化工", "无机化工", "有机化工", "精细化工", '化肥农药', '塑料制品', '橡胶制品'];
+    let valueList = [70, 60, 50, 40, 30, 20, 10];
+
+    /* 整合 */
+    let colorList = ["#FFFFFF", "#FADFA4", "#7FB0FF", "#ECFF7F", "#DD7171", "#C9FFD7", "#947FEA"];
+    let data = [];
+    nameList.map((item, index) => {
+        data.push({
+            name: item,
+            value: valueList[index]
+        })
+    })
+
+    /* 函数 */
+// 数字分割：1653 => 1,653
+    const formatNum = (value) => {
+        if (!value && value !== 0) return 0;
+        let str = value.toString();
+        let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
+        return str.replace(reg, "$1,");
+    }
+
+    return {
+        color: colorList,
+        legend: {
+            show: true,
+            top: 20,
+            right: 0,
+            orient: "vertical", //改变排列方式
+            itemWidth: 10,
+            itemHeight: 10,
+            textStyle: {
+                color: '#fff',
+                fontSize: 12,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        tooltip: {
+            trigger: 'item',
+            axisPointer: {
+                type: 'none'
+            },
+            position: function (point, params, dom, rect, size) { // 提示框位置
+                let x = 0;
+                let y = 0;
+                //提示框定位
+                if (point[0] + size.contentSize[0] < size.viewSize[0]) {
+                    x = point[0]
+                } else if (point[0] > size.contentSize[0]) {
+                    x = point[0] - size.contentSize[0]
+                } else {
+                    x = "30%"
+                }
+                if (point[1] > size.contentSize[1]) {
+                    y = point[1] - size.contentSize[1]
+                } else if (point[1] + size.contentSize[1] < size.viewSize[1]) {
+                    y = point[1]
+                } else {
+                    y = "30%"
+                }
+                return [x, y];
+            },
+            formatter: params => {
+                let pieColor = params["color"];
+                return `
+            <div style="position:relative;">
+               <div style="width: 9px;height: 9px;background: ${pieColor};border: 1px solid #FFFFFF;position:absolute;top:50%;transform:translateY(-50%);left:0;border-radius:50%;"></div>
+               <span style="margin:0 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 400;color: #FFFFFF;">${params.name}</span>
+            </div>
+            <div style="margin:12px 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Regular;font-weight: 500;color: #FFFFFF;">${formatNum(params.value)}kW·h<span style="margin-left:24px;">${[params.percent]}%</span></div>
+         `
+            },
+            extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
+        },
+        series: [{
+            type: 'pie',
+            roseType: true,
+            center: ['40%', '50%'],
+            radius: ["30%", "80%"],
+            label: {
+                show: false,
+            },
+            itemStyle: {
+                borderRadius: 3
+            },
+            data: data
+        }]
+    };
+}
+
+/**
+ * 废气右侧折线图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const barChartData = function (data, xAxisData, legend, $echarts) {
+
+    return {
+        color: ['#7FB0FF'],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            backgroundColor: 'rgba(0,0,0,0.4)',
+            textStyle: {
+                color: '#ffffff'
+            }
+        },
+        legend: {
+            show: false,
+            textStyle: {
+                color: '#ffffff'
+            }
+        },
+        grid: {
+            left: '3%',
+            top: '15%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        yAxis: {
+            type: 'category',
+            data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学', '海利得', '榆林化工',
+                '联化科1', '立本作物1', '圣丰集团1', '茂盛生物1', '利尔化学1', '海利得1', '榆林化工1',
+                '联化科2', '立本作物2', '圣丰集团2', '茂盛生物2', '利尔化学2', '海利得2', '榆林化工2',
+                '联化科3', '立本作物3', '圣丰集团3', '茂盛生物3', '利尔化学3', '海利得3', '榆林化工3',
+                '联化科4', '立本作物4', '圣丰集团4', '茂盛生物4', '利尔化学4', '海利得4', '榆林化工4',
+                '联化科5', '立本作物5', '圣丰集团5', '茂盛生物5', '利尔化学5', '海利得5', '榆林化工5',
+            ],
+
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate: 30,//label旋转角度
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        dataZoom: {
+            type: "inside",
+            orient: "vertical",
+            startValue: 0,
+            endValue: 7
+        },
+        series: [
+            {
+                name: '耗电量',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item => Math.floor(Math.random() * 100))
+            }
+        ]
+    };
+}
+/**
+ * 散点图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const pointChartData = function (data, xAxisData, legend, $echarts) {
+
+    return {
+        tooltip: {
+            trigger: 'item',
+            backgroundColor: 'rgba(0,0,0,0.4)',
+            textStyle: {
+                color: '#ffffff'
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学', '榆林化工'],
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate: 30,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        yAxis: {
+            type: 'value',
+            name: '产值：单位万元',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            nameTextStyle: {
+                padding: [0, 0, 10, 30]
+            }
+        },
+        color: ['#FF5959', '#FADFA4', '#C9FFD7'],
+        series: [
+            {
+                name: '联化科',
+                data: [
+                    {
+                        value: ['联化科', 200],
+                        symbolSize: 28,
+                        itemStyle: {color: '#FF5959'},
+                    }
+                ],
+                type: 'scatter'
+            }, {
+                name: '立本作物',
+                data: [
+                    {
+                        value: ['立本作物', 150],
+                        symbolSize: 16,
+                        itemStyle: {color: '#FADFA4'},
+                    }
+                ],
+                type: 'scatter'
+            }, {
+                name: '圣丰集团',
+                data: [
+                    {
+                        value: ['圣丰集团', 150],
+                        symbolSize: 16,
+                        itemStyle: {color: '#FADFA4'},
+
+                    }
+                ],
+                type: 'scatter'
+            }, {
+                name: '茂盛生物',
+                data: [
+                    {
+                        value: ['茂盛生物', 50],
+                        symbolSize: 10,
+                        itemStyle: {color: '#C9FFD7'},
+                    }
+                ],
+                type: 'scatter'
+            }, {
+                name: '利尔化学',
+                data: [
+                    {
+                        value: ['利尔化学', 50],
+                        symbolSize: 16,
+                        itemStyle: {color: '#C9FFD7'},
+                    }
+                ],
+                type: 'scatter'
+            }, {
+                name: '榆林化工',
+                data: [
+                    {
+                        value: ['榆林化工', 150],
+                        symbolSize: 32,
+                        itemStyle: {color: '#FF5959'},
+                    }
+                ],
+                type: 'scatter'
+            },
+            /*{
+                data: [
+                    {
+                        value: [20, 200],
+                        symbolSize:28,
+                        itemStyle:{color:'#FF5959'},
+                        name:'联化科'
+                    },{
+                        value: [40, 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#FADFA4'},
+                        name:'立本作物'
+                    },{
+                        value: [60, 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#C9FFD7'},
+                        name:'圣丰集团'
+                    },{
+                        value: [80, 50],
+                        symbolSize:10,
+                        itemStyle:{color:'#C9FFD7'},
+                        name:'茂盛生物'
+                    },{
+                        value: [100, 50],
+                        symbolSize:16,
+                        name:'利尔化学'
+                    },{
+                        value: [120, 150],
+                        symbolSize:32,
+                        name:'榆林化工'
+                    }
+                ],
+                type: 'scatter'
+            },*/
+        ]
+    }
+}
diff --git a/src/components/energy/water/left/energyWaterLeft.component.html b/src/components/energy/water/left/energyWaterLeft.component.html
new file mode 100644
index 0000000..4509d50
--- /dev/null
+++ b/src/components/energy/water/left/energyWaterLeft.component.html
@@ -0,0 +1,21 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            企业用水量
+        </title-component>
+        <hbt-echarts className="right-bar-chart" :options="barChartData"
+                     @onChartInit="getEcharts($event,'bar')"></hbt-echarts>
+        <div class="subTitle">
+            企业产值耗水分析
+        </div>
+        <div class="sub-title-legend">圆圈面积：立方米（m³）</div>
+        <hbt-echarts className="right-bar-chart" :options="pointChartData"
+                     @onChartInit="getEcharts($event,'point')"></hbt-echarts>
+        <div class="subTitle">
+            行业耗水分析
+        </div>
+        <hbt-echarts className="right-bar-chart" :options="pieChartData"
+                     @onChartInit="getEcharts($event,'pie')"></hbt-echarts>
+    </div>
+
+</div>
diff --git a/src/components/energy/water/left/energyWaterLeft.component.ts b/src/components/energy/water/left/energyWaterLeft.component.ts
new file mode 100644
index 0000000..32c1fdb
--- /dev/null
+++ b/src/components/energy/water/left/energyWaterLeft.component.ts
@@ -0,0 +1,112 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./energyWaterLeft.component.html"
+import {pieChartData, barChartData,pointChartData} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+
+import * as echarts from 'echarts';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class EnergyWaterLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //散点图数据
+    pointChartData: any = {};
+    //叠加柱状图
+    barChartData: any = {};
+    //定时器
+    timer: any = null;
+    // 排放达标率数据
+    pieChartData: any = {}
+    //柱状图实例
+    bar: any = {}
+    //折线图实例
+    pie: any = {}
+    //散点图实例
+    point: any = {}
+
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        if (type === 'pie') {
+            this.pieChartData = pieChartData();
+        }
+        if (type === 'bar') {
+            this.barChartData = barChartData([[90, 55, 80, 85, 25, 60, 60], [160, 80, 130, 133, 40, 95, 95]], this.xAxisData, this.legend, echarts)
+            this.bar.on('click', function (params) {
+                console.log(params);
+            });
+        }
+        if (type === 'point') {
+            this.pointChartData = pointChartData([[90, 55, 80, 85, 25, 60, 60], [160, 80, 130, 133, 40, 95, 95]], this.xAxisData, this.legend, echarts)
+        }
+    }
+
+    //折线图x轴坐标
+    xAxisData = ['石油化工', '无机化工', '有机化工', '精细化工', '化肥农药', '塑料制品', '橡胶制品']
+    //设置排放变化趋势默认选中项
+    lineChartType = '排放量'
+
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.pie.resize()
+            this.bar.resize()
+        }, 300)
+    }
+    autoRun(){
+        if (this.barChartData.dataZoom.endValue === 42){
+            this.barChartData.dataZoom.startValue = 0
+            this.barChartData.dataZoom.endValue = 7;
+        }else{
+            this.barChartData.dataZoom.startValue+=1;
+            this.barChartData.dataZoom.endValue+=1;
+        }
+        //最新出来的数据
+        let selectDataE = this.barChartData.yAxis.data[this.barChartData.dataZoom.endValue]
+
+        this.bar.setOption(this.barChartData)
+    }
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+    //图例
+    legend = ["水 (吨)",
+        "标准煤 (吨)"]
+
+    mounted() {
+        this.timer = setInterval(() => {
+            this.setChartData()
+            this.autoRun()
+        }, 6000)
+
+
+        window.addEventListener("resize", this.resize);
+
+    }
+
+    setChartData() {
+        this.pie.clear()
+        this.pie.setOption(this.pieChartData)
+        this.point.clear()
+        this.point.setOption(this.pointChartData)
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+}
+
diff --git a/src/components/energy/water/right/chartData.js b/src/components/energy/water/right/chartData.js
new file mode 100644
index 0000000..9eeb617
--- /dev/null
+++ b/src/components/energy/water/right/chartData.js
@@ -0,0 +1,597 @@
+export const lineChartData =  function () {
+    let xLabel = new Array(30).fill(0).map((item,i)=> i+1);
+    let dataValue = new Array(42).fill(0).map(item=>Math.floor(Math.random()*100));
+    return {
+        color:['#7FB0FF'],
+        dataZoom : {
+            type:"inside",
+            // orient:"vertical",
+            startValue:0,
+            endValue:10
+        },
+        legend: {
+            show: false,
+            top: '10%',
+            icon: "rect",
+            itemWidth: 10, // 图例标记的图形宽度。
+            //   itemGap: 20, // 图例每项之间的间隔。
+            itemHeight: 10, //  图例标记的图形高度。
+            textStyle: {
+                color: '#fff',
+                fontSize: 14,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        grid: {
+            top: '5%',
+            left: '10%',
+            right: '5%',
+            bottom: '20%',
+        },
+        xAxis: {
+            name:'日',
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            data: xLabel
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name: '单位产值能耗',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 2,
+                    },
+                },
+                symbolSize: 4,   //设定实心点的大小
+                data: dataValue,
+                areaStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: 'rgba(127,176,255,0.5)'
+                            }, {
+                                offset: 1, color: 'rgba(127,176,255,0.3)'
+                            }],
+                            global: false
+                        }
+                    },
+                },
+            }
+        ]
+    }
+}
+export const lineChartData1 =  function () {
+    let xLabel = new Array(30).fill(0).map((item,i)=> i+1);
+    let dataValue = new Array(42).fill(0).map(item=>Math.floor(Math.random()*100));
+    return {
+        color:['#947FEA'],
+        dataZoom : {
+            type:"inside",
+            // orient:"vertical",
+            startValue:0,
+            endValue:10
+        },
+        legend: {
+            show: false,
+            top: '10%',
+            icon: "rect",
+            itemWidth: 10, // 图例标记的图形宽度。
+            //   itemGap: 20, // 图例每项之间的间隔。
+            itemHeight: 10, //  图例标记的图形高度。
+            textStyle: {
+                color: '#fff',
+                fontSize: 14,
+                padding: [0, 8, 0, 8]
+            }
+        },
+        grid: {
+            top: '5%',
+            left: '10%',
+            right: '5%',
+            bottom: '20%',
+        },
+        xAxis: {
+            name:'日',
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            data: xLabel
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name: '单位产值能耗',
+                type: 'line',
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                smooth: true,
+                lineStyle: {
+                    normal: {
+                        width: 2,
+                    },
+                },
+                symbolSize: 4,   //设定实心点的大小
+                data: dataValue,
+                areaStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: 'rgba(148,127,234,0.5)'
+                            }, {
+                                offset: 1, color: 'rgba(148,127,234,0.3)'
+                            }],
+                            global: false
+                        }
+                    },
+                },
+            }
+        ]
+    }
+}
+export const pieChartData =  function () {
+    return  {
+
+        title: {
+            text: `75%`,
+            subtext: '达成率',
+            left: 'center',
+            top: 'center',
+            itemGap: 0,
+            textStyle: {
+                fontSize: 28,
+                fontWeight: '600',
+                fontStyle: 'italic',
+                color: '#B8ECFF',
+            },
+            subtextStyle: {
+                fontSize: 10,
+                fontWeight: 'normal',
+                align: "center",
+                color: '#E8E8E8'
+            },
+        },
+        angleAxis: {
+            max: 100,
+            // 隐藏刻度线
+            show: false,
+            startAngle: 90
+        },
+        radiusAxis: {
+            type: 'category',
+            show: true,
+            axisLabel: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+            },
+            axisTick: {
+                show: false
+            },
+        },
+        polar: {
+            radius: '150%' //图形大小
+        },
+        series: [{
+            type: 'bar',
+            data: ['75'],
+            showBackground: true,
+            roundCap: true,
+            backgroundStyle: {
+                color: 'rgba(64, 76, 76, 1)',
+            },
+            coordinateSystem: 'polar',
+            barWidth: 20,
+            itemStyle: {
+                normal: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0, color: '#7FB0FF'
+                        }, {
+                            offset: 1, color: '#7FB0FF'
+                        }],
+                        global: false
+                    }
+                }
+            },
+        }]
+    }
+}
+
+
+
+// 修改弹框内容用到的方法
+function replaceHtmlWord(str) {
+    return str.replace("NO2", "NO<sub>2</sub>")
+        .replace("SO2", "SO<sub>2</sub>")
+        .replace("O3", "O<sub>3</sub>")
+    // .replace("PM10", "PM<sub>10</sub>")
+    // .replace("PM2.5", "PM<sub>2.5</sub>")
+
+}
+
+// 修改图例文字用到的方法
+function replaceWords(str) {
+    return str.replace("NO2", "NO{sub|2}")
+        .replace("SO2", "SO{sub|2}")
+        .replace("O3", "O{sub|3}")
+    // .replace("PM2.5", "PM{sub|2.5}")
+    // .replace("PM10", "PM{sub|10}");
+}
+
+/**
+ * 废气右侧折线图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const barChartData = function (data, xAxisData, legend,$echarts) {
+
+    return {
+        color:['#FADFA4','#7FB0FF','#FFFFFF','#947FEA'],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        legend: {
+            textStyle:{
+        color:'#ffffff'
+    }
+        },
+        grid: {
+            left: '3%',
+            top: '15%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        yAxis: {
+            type: 'category',
+            data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学', '海利得','榆林化工',
+                '联化科1', '立本作物1', '圣丰集团1', '茂盛生物1', '利尔化学1', '海利得1','榆林化工1',
+                '联化科2', '立本作物2', '圣丰集团2', '茂盛生物2', '利尔化学2', '海利得2','榆林化工2',
+                '联化科3', '立本作物3', '圣丰集团3', '茂盛生物3', '利尔化学3', '海利得3','榆林化工3',
+                '联化科4', '立本作物4', '圣丰集团4', '茂盛生物4', '利尔化学4', '海利得4','榆林化工4',
+                '联化科5', '立本作物5', '圣丰集团5', '茂盛生物5', '利尔化学5', '海利得5','榆林化工5',
+            ],
+
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate: 30,//label旋转角度
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        dataZoom : {
+            type:"inside",
+            orient:"vertical",
+            startValue:0,
+            endValue:7
+        },
+        series: [
+            {
+                name: '煤炭',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            },
+            {
+                name: '石油',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            },
+            {
+                name: '天然气',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            },
+            {
+                name: '煤气',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: new Array(42).fill(0).map(item=>Math.floor(Math.random()*100))
+            }
+        ]
+    };
+}
+/**
+ * 散点图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param $echarts
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const pointChartData = function (data, xAxisData, legend,$echarts) {
+
+    return  {
+        tooltip: {
+            trigger: 'item',
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学','榆林化工'],
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+                rotate: 30,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        yAxis: {
+            type: 'value',
+            name:'产值：单位万元',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            nameTextStyle: {
+                padding: [0, 0, 10, 30]
+            }
+        },
+        color:['#FF5959','#FADFA4','#C9FFD7'],
+        series: [
+            {
+                name:'联化科',
+                data: [
+                    {
+                        value: ['联化科', 200],
+                        symbolSize:28,
+                        itemStyle:{color:'#FF5959'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'立本作物',
+                data: [
+                   {
+                        value: ['立本作物', 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#FADFA4'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'圣丰集团',
+                data: [
+                   {
+                        value: ['圣丰集团', 150],
+                        symbolSize:16,
+                       itemStyle:{color:'#FADFA4'},
+
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'茂盛生物',
+                data: [
+                   {
+                        value: ['茂盛生物', 50],
+                        symbolSize:10,
+                        itemStyle:{color:'#C9FFD7'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'利尔化学',
+                data: [
+                    {
+                        value: ['利尔化学', 50],
+                        symbolSize:16,
+                        itemStyle:{color:'#C9FFD7'},
+                    }
+                ],
+                type: 'scatter'
+            },{
+                name:'榆林化工',
+                data: [
+                    {
+                        value: ['榆林化工', 150],
+                        symbolSize:32,
+                        itemStyle:{color:'#FF5959'},
+                    }
+                ],
+                type: 'scatter'
+            },
+            /*{
+                data: [
+                    {
+                        value: [20, 200],
+                        symbolSize:28,
+                        itemStyle:{color:'#FF5959'},
+                        name:'联化科'
+                    },{
+                        value: [40, 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#FADFA4'},
+                        name:'立本作物'
+                    },{
+                        value: [60, 150],
+                        symbolSize:16,
+                        itemStyle:{color:'#C9FFD7'},
+                        name:'圣丰集团'
+                    },{
+                        value: [80, 50],
+                        symbolSize:10,
+                        itemStyle:{color:'#C9FFD7'},
+                        name:'茂盛生物'
+                    },{
+                        value: [100, 50],
+                        symbolSize:16,
+                        name:'利尔化学'
+                    },{
+                        value: [120, 150],
+                        symbolSize:32,
+                        name:'榆林化工'
+                    }
+                ],
+                type: 'scatter'
+            },*/
+        ]
+    }
+}
diff --git a/src/components/energy/water/right/energyWaterRight.component.html b/src/components/energy/water/right/energyWaterRight.component.html
new file mode 100644
index 0000000..687a6b1
--- /dev/null
+++ b/src/components/energy/water/right/energyWaterRight.component.html
@@ -0,0 +1,85 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            节能减排
+        </title-component>
+        <div class="energyRightTitle d-flex is-justify-space-between margin-top-23">
+            <span>节水目标 (吨)</span>
+            <span>{{detail.target}}</span>
+        </div>
+        <hbt-echarts className="right-bar-chart" :options="pieChartData"
+                     @onChartInit="getEcharts($event,'pie')"></hbt-echarts>
+        <title-component :imgSrc="imgSrc">
+            单位产品耗能趋势分析
+        </title-component>
+        <div class="sub-title-legend">单位：kg/m³</div>
+        <hbt-echarts className="right-bar-chart" :options="lineChartData"
+                     @onChartInit="getEcharts($event,'line')"></hbt-echarts>
+        <title-component :imgSrc="imgSrc">
+            单位产值耗能趋势分析
+        </title-component>
+        <div class="sub-title-legend">单位：kg/万元</div>
+        <hbt-echarts className="right-bar-chart" :options="lineChartData1"
+                     @onChartInit="getEcharts($event,'line1')"></hbt-echarts>
+
+    </div>
+    <div class="center-box">
+        <div class="center-box-card-bg">
+            <div class="center-box-card-title">
+                <img :src="lightningIcon" alt="">
+                <span>今日用水量（m³）</span>
+            </div>
+            <ScrollNumberComponent :value="dayData.dayNum"></ScrollNumberComponent>
+            <div class="d-flex is-justify-space-around center-box-card-bottom">
+                <div>
+                    <span>同比:</span>
+                    <img :src="green" alt="">
+                    <span>{{dayData.yoy}}%</span>
+                </div>
+                <div>
+                    <span>环比:</span>
+                    <img :src="red" alt="">
+                    <span>{{dayData.round}}%</span>
+                </div>
+            </div>
+        </div>
+        <div class="center-box-card-bg">
+            <div class="center-box-card-title">
+                <img :src="lightningIcon" alt="">
+                <span>本周用水量（m³）</span>
+            </div>
+            <ScrollNumberComponent :value="weekData.dayNum"></ScrollNumberComponent>
+            <div class="d-flex is-justify-space-around center-box-card-bottom">
+                <div>
+                    <span>同比:</span>
+                    <img :src="green" alt="">
+                    <span>{{weekData.yoy}}%</span>
+                </div>
+                <div>
+                    <span>环比:</span>
+                    <img :src="red" alt="">
+                    <span>{{weekData.round}}%</span>
+                </div>
+            </div>
+        </div>
+        <div class="center-box-card-bg">
+            <div class="center-box-card-title">
+                <img :src="lightningIcon" alt="">
+                <span>本月用水量（m³）</span>
+            </div>
+            <ScrollNumberComponent :value="monthData.dayNum"></ScrollNumberComponent>
+            <div class="d-flex is-justify-space-around center-box-card-bottom">
+                <div>
+                    <span>同比:</span>
+                    <img :src="green" alt="">
+                    <span>{{monthData.yoy}}%</span>
+                </div>
+                <div>
+                    <span>环比:</span>
+                    <img :src="red" alt="">
+                    <span>{{monthData.round}}%</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/components/energy/water/right/energyWaterRight.component.ts b/src/components/energy/water/right/energyWaterRight.component.ts
new file mode 100644
index 0000000..83a01c9
--- /dev/null
+++ b/src/components/energy/water/right/energyWaterRight.component.ts
@@ -0,0 +1,166 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./energyWaterRight.component.html"
+import {pieChartData, lineChartData,lineChartData1} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+import ScrollNumberComponent from "@/components/scrollNumber.component.vue"
+
+import * as echarts from 'echarts';
+import {getRandNumBetween} from "@/utils/utils";
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        ScrollNumberComponent,
+    },
+})
+export default class EnergyWaterRightComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //
+    lightningIcon = require("@/assets/img/energy/shui.png");
+    green = require("@/assets/img/energy/green-arr.png");
+    red = require("@/assets/img/energy/red-arr.png");
+    //单位产品耗能趋势分析数据
+    lineChartData: any = {};
+    //单位产值耗能趋势分析数据
+    lineChartData1: any = {};
+    //定时器
+    timer: any = null;
+    // 排放达标率数据
+    pieChartData: any = {}
+    //柱状图实例
+    bar: any = {}
+    //折线图实例
+    pie: any = {}
+    //单位产品耗能趋势分析实例
+    line: any = {}
+    //单位产值耗能趋势分析图实例
+    line1: any = {}
+    //企业详情数据
+    detail = {
+        target:130
+    }
+    //日用燃料数据
+    dayData = {
+        dayNum:1139.83,
+        yoy:11.2,
+        round:18
+    }
+    //周用燃料数据
+    weekData = {
+        dayNum:7978.81,
+        yoy:20.3,
+        round:14
+    }
+    //月用燃料数据
+    monthData = {
+        dayNum:34194.9,
+        yoy:18.3,
+        round:20
+    }
+    changeCardData(type){
+        const temp:any = {
+            dayNum:getRandNumBetween(1000,2000),
+            yoy:getRandNumBetween(10,20),
+            round:getRandNumBetween(10,20)
+        };
+
+        switch (type) {
+            case "dayData":
+
+                break;
+            case "weekData":
+                temp.dayNum *= 7
+                temp.yoy = getRandNumBetween(10,20)
+                temp.round = getRandNumBetween(10,20)
+                break;
+            case "monthData":
+                temp.dayNum *= 30
+                temp.yoy = getRandNumBetween(10,20)
+                temp.round = getRandNumBetween(10,20)
+                break;
+            default:
+                break
+        }
+        temp.dayNum = Number(temp.dayNum.toFixed(2))
+        this[type] = temp
+}
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        if (type === 'pie') {
+            this.pieChartData = pieChartData();
+        }
+        if (type === 'line1') {
+            this.lineChartData1 = lineChartData1()
+        }
+        if (type === 'line') {
+            this.lineChartData = lineChartData()
+        }
+    }
+
+    //折线图x轴坐标
+    xAxisData = ['石油化工', '无机化工', '有机化工', '精细化工', '化肥农药', '塑料制品', '橡胶制品']
+    //设置排放变化趋势默认选中项
+    lineChartType = '排放量'
+
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.pie.resize()
+            this.line.resize()
+            this.line1.resize()
+        }, 300)
+    }
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+    //图例
+    legend = ["水 (吨)",
+        "标准煤 (吨)"]
+
+    mounted() {
+        this.timer = setInterval(() => {
+            this.setChartData()
+            // this.autoRun()
+            // this.dayNum = Math.floor(Math.random()*10000)
+            this.changeCardData('dayData')
+            this.changeCardData('weekData')
+            this.changeCardData('monthData')
+        }, 6000)
+        window.addEventListener("resize", this.resize);
+    }
+
+    setChartData() {
+        this.pie.clear()
+        function getRandomIntInRange(min, max) {
+            return Math.floor(Math.random() * (max - min) + min);
+        }
+        const num = getRandomIntInRange(7,10)*10
+        this.pieChartData.title.text = num+'%'
+        this.pieChartData.series.data =[num]
+        this.pie.setOption(this.pieChartData)
+        this.line.clear()
+        this.lineChartData.series[0].data =  new Array(42).fill(0).map(item=>Math.floor(Math.random()*100));
+        this.line.setOption(this.lineChartData)
+        this.line1.clear()
+        this.lineChartData1.series[0].data =  new Array(42).fill(0).map(item=>Math.floor(Math.random()*100));
+        this.line1.setOption(this.lineChartData1)
+        this.detail.target = parseInt(String(Math.random()*200))
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+}
+
diff --git a/src/components/env/air/left/airLeft.component.html b/src/components/env/air/left/airLeft.component.html
new file mode 100644
index 0000000..036e252
--- /dev/null
+++ b/src/components/env/air/left/airLeft.component.html
@@ -0,0 +1,59 @@
+<div class="env-left">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            污染物年平均指标
+        </title-component>
+       <div class="card-box">
+           <div class="card-box-item">
+               <div class="card-box-item-top">62</div>
+               <div class="card-box-item-bottom">
+                   CO
+               </div>
+           </div> <div class="card-box-item">
+               <div class="card-box-item-top">75%</div>
+               <div class="card-box-item-bottom">
+                   O<sub>3</sub>
+               </div>
+           </div> <div class="card-box-item">
+               <div class="card-box-item-top">45</div>
+               <div class="card-box-item-bottom">
+                   SO<sub>2</sub>
+               </div>
+           </div> <div class="card-box-item">
+               <div class="card-box-item-top">42</div>
+               <div class="card-box-item-bottom">
+                   NO<sub>2</sub>
+               </div>
+           </div> <div class="card-box-item">
+               <div class="card-box-item-top">69%</div>
+               <div class="card-box-item-bottom">
+                   PM2.5
+               </div>
+           </div> <div class="card-box-item">
+               <div class="card-box-item-top">27</div>
+               <div class="card-box-item-bottom">
+                   PM10
+               </div>
+           </div>
+       </div>
+    </div>
+    <div class="box-content margin-top-50">
+        <title-component :imgSrc="imgSrc">
+            污染物数值变化趋势
+        </title-component>
+
+        <div class="radio-style radio-style-two-btns">
+            <el-radio-group @change="changeData" v-model="lineChartType">
+                <el-radio-button label="小时平均"></el-radio-button>
+                <el-radio-button label="日平均"></el-radio-button>
+            </el-radio-group>
+        </div>
+        <hbt-echarts className="line-chart-air" :options="option" @onChartInit="getEcharts($event,'line')"></hbt-echarts>
+    </div>
+    <div class="box-content margin-top-50">
+        <title-component :imgSrc="imgSrc">
+            污染物超标次数
+        </title-component>
+        <hbt-echarts className="bar-chart-air margin-top-23" :options="barChart" @onChartInit="getEcharts($event,'bar')"></hbt-echarts>
+    </div>
+</div>
diff --git a/src/components/env/air/left/airLeft.component.ts b/src/components/env/air/left/airLeft.component.ts
new file mode 100644
index 0000000..7acc3d2
--- /dev/null
+++ b/src/components/env/air/left/airLeft.component.ts
@@ -0,0 +1,200 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./airLeft.component.html"
+import {pieChartData, airLineChartData, airBarChartData} from "./chartData";
+import * as echarts from "echarts";
+
+import TitleComponent from "@/components/title.component.vue"
+import WarningListComponent from "@/components/warningList.component.vue"
+import {
+    yearData,
+    dataForDay,
+    dataForHour,
+    dataForHour1,
+    top10,
+    data3ForAir,
+    dataForBar,
+    airDetail
+} from '@/dataDemo/mockData';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        WarningListComponent
+    },
+})
+export default class AirLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //告警信息数据
+    dataList: any[] = [
+        {
+            title: '消防告警',
+            info: '区域发现黑名单人员了区域发现黑名人预',
+            time: '2021-05-19 16:03:28',
+            level: '1'
+        }, {
+            title: '消防告警',
+            info: '区域发现黑名单人员了区域发现黑名人预',
+            time: '2021-05-19 16:03:28',
+            level: '2'
+        }, {
+            title: '消防告警',
+            info: '区域发现黑名单人员了区域发现黑名人预',
+            time: '2021-05-19 16:03:28',
+            level: '3'
+        }, {
+            title: '消防告警',
+            info: '区域发现黑名单人员了区域发现黑名人预',
+            time: '2021-05-19 16:03:28',
+            level: '1'
+        }, {
+            title: '消防告警',
+            info: '区域发现黑名单人员了区域发现黑名人预',
+            time: '2021-05-19 16:03:28',
+            level: '3'
+        }, {
+            title: '消防告警',
+            info: '区域发现黑名单人员了区域发现黑名人预',
+            time: '2021-05-19 16:03:28',
+            level: '2'
+        }, {
+            title: '消防告警',
+            info: '区域发现黑名单人员了区域发现黑名人预',
+            time: '2021-05-19 16:03:28',
+            level: '1'
+        }, {
+            title: '消防告警',
+            info: '区域发现黑名单人员了区域发现黑名人预',
+            time: '2021-05-19 16:03:28',
+            level: '2'
+        },
+    ]
+    //定时器
+    timer: any = null;
+    //污染物数值变化趋势图表数据
+    option: any = {}
+    //污染物超标次数图表数据
+    barChart: any = {}
+    //污染物数值变化趋势图表实例
+    line: any = {}
+    //污染物超标次数图表实例
+    bar: any = {}
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.line.resize()
+            this.bar.resize()
+        }, 300)
+    }
+    //存储图表实例
+    getEcharts(e,type){
+        this[type] = e
+    }
+    //销毁页面操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+    //污染物数值变化趋势当前显示值
+    lineChartType = '小时平均'
+    //切换小时平均和日平均
+    changeData(val) {
+        this.selectIndex = 0
+        if (val === '小时平均') {
+            this.initLineData(dataForHour)
+        } else {
+            this.initLineData(dataForDay)
+        }
+    }
+
+    initLineData(datas:any = '') {
+        let temp: any = []
+        if (datas) {
+            temp = JSON.parse(JSON.stringify(datas))
+        } else {
+            temp = JSON.parse(JSON.stringify(dataForHour))
+        }
+
+        const xAxisData = temp.data[0].dataList?.map(item => item.date);
+        const data = temp.data.map(item => {
+            item.data = item.dataList?.map(its => its.value)
+            return item
+        });
+        const legend = temp.data.map(item => item.name)
+        const selected = {};
+        legend.forEach((item, i) => {
+            selected[item] = i === 0;
+        })
+        this.option = airLineChartData(data, xAxisData, legend, selected)
+    }
+
+    iniBarData() {
+        const temp = JSON.parse(JSON.stringify(data3ForAir))
+        const xAxisData = temp.data?.map(item => item.type);
+        // let data = temp.data?.map(item => item.value);
+        const data = temp.data;
+        const legend = temp.data?.map(item => item.type)
+        console.log(legend, 'legend')
+        console.log(temp.data, 'temp.data')
+        this.barChart = airBarChartData(data, xAxisData, legend, echarts)
+    }
+
+    selectIndex = 0
+
+    autoRunLine() {
+        const datas = this.lineChartType === '小时平均' ? dataForHour : dataForDay;
+        const temp = JSON.parse(JSON.stringify(datas))
+        const xAxisData = temp.data[0].dataList?.map(item => item.date);
+        const data = temp.data.map(item => {
+            item.data = item.dataList?.map(its => its.value)
+            return item
+        });
+        const legend = temp.data.map(item => item.name)
+        const selected = {};
+        legend.forEach((item, i) => {
+            selected[item] = i === this.selectIndex;
+        })
+        this.option = airLineChartData(data, xAxisData, legend, selected)
+    }
+
+    getRandomInt(min: number, max: number) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
+    }
+
+    mounted() {
+        this.initLineData()
+        this.iniBarData()
+        this.timer = setInterval(() => {
+            if (this.selectIndex > 5) {
+                this.selectIndex = 0
+            }
+            this.autoRunLine()
+            this.selectIndex++
+        }, 3000)
+        window.addEventListener("resize", this.resize);
+
+        /* this.timer = setInterval(()=>{
+              this.dataList = [ {
+                  title:'消防告警',
+                  info:'区域发现黑名单人员了区域发现黑名人预',
+                  time:'2021-05-19 16:03:28',
+                  level:'1',
+                  isNew:true,
+              },...this.dataList]
+          },2000)*/
+
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+}
+
diff --git a/src/components/env/air/left/chartData.js b/src/components/env/air/left/chartData.js
new file mode 100644
index 0000000..8582d70
--- /dev/null
+++ b/src/components/env/air/left/chartData.js
@@ -0,0 +1,433 @@
+export const pieChartData = {
+    title: {
+        text: '75%',
+        subtext: '优良率',
+        itemGap: 5,
+        x: 105,
+        y: '37%',
+        textStyle: {
+            fontSize: 30,
+            fontWeight: '600',
+            fontStyle: 'italic',
+            color: '#B8ECFF',
+        },
+        subtextStyle: {
+            fontSize: 17,
+            fontWeight: 'normal',
+            align: "center",
+            color: '#5998FB'
+        },
+    },
+    tooltip: {
+        trigger: 'item'
+    },
+    legend: {
+        orient: 'vertical',
+        right: '0%',
+        top: 'bottom',
+        height: 100,
+        itemWidth: 10,
+        itemHeight: 10,
+        data: [
+            {value: 25, name: '断路'},
+            {value: 25, name: '动土'},
+            {value: 15, name: '受限空间'},
+            {value: 20, name: '高处'},
+            {value: 15, name: '临时用电'}
+        ],
+        textStyle: {
+            color: '#D4E5FF',
+            padding: [5, 10, 5, 10]
+        },
+    },
+    series: [
+        {
+            type: 'pie',
+            selectedMode: 'single',
+            selectedOffset: 10,
+            left: -50,
+            radius: [50, 75],
+            data: [
+                {value: 25, name: '断路'},
+                {value: 1, name: ''},
+                {value: 25, name: '动土'},
+                {value: 1, name: ''},
+                {value: 15, name: '受限空间'},
+                {value: 1, name: ''},
+                {value: 20, name: '高处'},
+                {value: 1, name: ''},
+                {value: 15, name: '临时用电'},
+                {value: 1, name: ''},
+            ],
+            color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null],
+            emphasis: {
+                itemStyle: {
+                    // shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    // borderWidth:5,
+                    // borderColor:"rgba(255,255,255,0)",
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            itemStyle: {},
+            select: {
+                itemStyle: {}
+            },
+            labelLine: {
+                show: false
+            },
+            label: {
+                show: false
+            },
+            tooltip: {
+                backgroundColor: 'rgba(0,0,0,0.4)',
+                textStyle: {
+                    color: '#ffffff'
+                }
+
+            }
+        }
+    ],
+    animationDuration: 0,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear'
+}
+
+// 修改弹框内容用到的方法
+function replaceHtmlWord(str) {
+    return str.replace("NO2", "NO<sub>2</sub>")
+        .replace("SO2", "SO<sub>2</sub>")
+        .replace("O3", "O<sub>3</sub>")
+    // .replace("PM10", "PM<sub>10</sub>")
+    // .replace("PM2.5", "PM<sub>2.5</sub>")
+
+}
+
+// 修改图例文字用到的方法
+function replaceWords(str) {
+    return str.replace("NO2", "NO{sub|2}")
+        .replace("SO2", "SO{sub|2}")
+        .replace("O3", "O{sub|3}")
+    // .replace("PM2.5", "PM{sub|2.5}")
+    // .replace("PM10", "PM{sub|10}");
+}
+
+export const airLineChartData = function (data, xAxisData, legend,selected) {
+    return {
+        color: ['#7FB0FF', '#947FEA', '#C9FFD7', '#FADFA4', '#FFFFFF'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: xAxisData
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: data
+        /*[
+        {
+            data: data,
+            type: 'line',
+            itemStyle:{
+                color:'#E8E8E8',
+            },
+            symbolSize: 7,
+            lineStyle:{
+                color:'#E8E8E8',
+                width:3
+            },
+            smooth:true,
+            label: {
+                show: true,
+                position:'top',
+                color:'#ffffff',
+                borderWidth:0
+            },
+        }
+    ]*/
+        ,
+
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 40,
+            x2: 22,
+            y2: 20,
+        },
+        legend: {
+            data: legend,
+            top: 0,
+            formatter: function (name) {
+                return replaceWords(name);
+            },
+            icon:'circle',
+            itemGap:10,
+            itemWidth:10,
+            selected,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        },
+    }
+}
+export const airBarChartData = function (data, xAxisData,legend,$echarts) {
+
+    let barTopColor = [
+        "#B8ECFF",
+        "#7FB0FF",
+        "#E8E8E8",
+        "#FADFA4",
+        '#F9BAFF',
+        '#FFB7B7'
+    ];
+    let barBottomColor = [
+        "#7DBBD2",
+        "#5485D5",
+        "#999999",
+        '#CFB376',
+        '#A576A9',
+        '#BF8888'
+    ];
+    let data1 = [
+        [30,0,0,0,0,0],
+        [0,30,0,0,0,0],
+        [0,0,40,0,0,0],
+        [0,0,0,52,0,0],
+        [0,0,0,0,40,0],
+        [0,0,0,0,0,21],
+    ]
+
+    let seriseData = data.map((item,i)=>{
+        return {
+            data: data1[i],
+            type: 'bar',
+            name:item.name,
+            itemStyle: {
+                borderRadius:4,
+                color: function (params) {
+                    return new $echarts.graphic.LinearGradient(
+                        0, 0, 0, 1,
+                        [{
+                            offset: 0,
+                            color: barTopColor[i]
+                        },
+                            {
+                                offset: 1,
+                                color: barBottomColor[i]
+                            }
+                        ]
+                    )
+                },
+            },
+            barWidth: 8,
+            barGap:'-100%',
+        }
+    })
+    return {
+        color:[
+            "#B8ECFF",
+            "#7FB0FF",
+            "#E8E8E8",
+            "#FADFA4",
+            '#F9BAFF',
+            '#FFB7B7'
+        ],
+        xAxis: {
+            name:"",
+            type: 'category',
+            data: xAxisData,
+            // 设置文本样式
+            axisLabel:{
+                show:true,
+                interval:0,
+                formatter:function(name){
+                    return replaceWords(name);
+                },
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                margin: 14,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color:"#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                },
+                rotate: 0,
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            nameTextStyle:{
+                align:'left'
+            },
+            nameGap:20
+        },
+        yAxis: {
+            type: 'value',
+            name:"",
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: seriseData,
+        label: {
+            // show: true
+        },
+        tooltip: {
+            show: true,
+            alwaysShowContent: false,
+            trigger: 'item',
+            backgroundColor: 'rgba(0,0,0,0.4)',
+            textStyle: {
+                color: '#ffffff'
+            }
+        }, grid: {
+            x: 30,
+            y: 40,
+            x2: 22,
+            y2: 20,
+        },
+        legend: {
+            show:true,
+            data: legend,
+            top: 0,
+            formatter: function (name) {
+                return replaceWords(name);
+            },
+            icon:'circle',
+            itemGap:10,
+            itemWidth:10,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        },
+    }
+}
diff --git a/src/components/env/air/right/airRight.component.html b/src/components/env/air/right/airRight.component.html
new file mode 100644
index 0000000..b2a5f88
--- /dev/null
+++ b/src/components/env/air/right/airRight.component.html
@@ -0,0 +1,69 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            监测点空气质量最差TOP5
+        </title-component>
+        <div class="air-top5-content" @click="clickBar(item)" :key="index" v-for="(item,index) in top5Data">
+            <p>{{item.name}}</p>
+            <div class="air-bar-style">
+                <div class="linear-gradient">
+                    <div class="line"></div>
+                    <div class="background" :style="{left:item.value+'%',width:(100-item.value)+'%' }"></div>
+                    <div class="shu" :style="{left:item.value+'%'}"></div>
+                </div>
+                <div class="air-number-style">{{item.value}}</div>
+            </div>
+        </div>
+<!--        <div class="air-top5-content">
+            <p>2号区4号库监测点</p>
+            <div class="air-bar-style">
+                <div class="linear-gradient">
+                    <div class="line"></div>
+                    <div class="background" style="left:80%;width: 20% "></div>
+                    <div class="shu" style="left:80%;"></div>
+                </div>
+                <div class="air-number-style">510</div>
+            </div>
+        </div>
+        <div class="air-top5-content">
+            <p>1号区6号库监测点</p>
+            <div class="air-bar-style">
+                <div class="linear-gradient">
+                    <div class="line"></div>
+                    <div class="background" style="left:76%;width: 24% "></div>
+                    <div class="shu" style="left:76%;"></div>
+                </div>
+                <div class="air-number-style">400</div>
+            </div>
+        </div>
+        <div class="air-top5-content">
+            <p>7号区2号库监测点</p>
+            <div class="air-bar-style">
+                <div class="linear-gradient">
+                    <div class="line"></div>
+                    <div class="background" style="left:62%;width: 38% "></div>
+                    <div class="shu" style="left:62%;"></div>
+                </div>
+                <div class="air-number-style">350</div>
+            </div>
+        </div>
+        <div class="air-top5-content">
+            <p>6号区12号库监测点</p>
+            <div class="air-bar-style">
+                <div class="linear-gradient">
+                    <div class="line"></div>
+                    <div class="background" style="left:55%;width: 45% "></div>
+                    <div class="shu" style="left:55%;"></div>
+                </div>
+                <div class="air-number-style">250</div>
+            </div>
+        </div>-->
+    </div>
+    <div class="box-content margin-top-50">
+        <title-component :imgSrc="imgSrc">
+            监测点优良率
+        </title-component>
+        <hbt-echarts className="right-pie-chart" :options="option" @onChartInit="getEcharts($event)"></hbt-echarts>
+    </div>
+
+</div>
diff --git a/src/components/env/air/right/airRight.component.ts b/src/components/env/air/right/airRight.component.ts
new file mode 100644
index 0000000..4137f78
--- /dev/null
+++ b/src/components/env/air/right/airRight.component.ts
@@ -0,0 +1,131 @@
+import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
+import template from "./airRight.component.html"
+import {pieChartData} from "./chartData";
+import {smartAndEnvironmentallyFriendlyData} from '@/dataDemo/smartAndEnvironmentallyFriendlyData';
+import TitleComponent from "@/components/title.component.vue"
+import WarningListComponent from "@/components/warningList.component.vue"
+import * as echarts from 'echarts';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class AirRightComponent extends Vue {
+    @Prop({default: []}) top5Data!: any;
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    totalEquipment = 1024;
+    onlineEquipment = 724;
+    timer: any = null;
+    option: any = {}
+    pieChart = {}
+    iconImg1 = require("@/assets/img/env/gas.png");
+    iconImg2 = require("@/assets/img/env/gas-year.png");
+    iconImg3 = require("@/assets/img/env/count.png");
+    iconImg4 = require("@/assets/img/env/waste.png");
+    iconImg5 = require("@/assets/img/env/waste-year.png");
+    iconImg6 = require("@/assets/img/env/count.png");
+    iconImg7 = require("@/assets/img/env/clean.png");
+    iconImg8 = require("@/assets/img/env/clean-year.png");
+    iconImg9 = require("@/assets/img/env/clean-count.png");
+    smartAndEnvironmentallyFriendlyData = JSON.parse(JSON.stringify(smartAndEnvironmentallyFriendlyData))
+
+    getEcharts(e) {
+        this.pieChart = e
+    }
+
+    nameMapping = {
+        "formaldehydeExcessRate": "甲醛超标率",//甲醛超标率
+        "methanolExceedance": "甲醇超标率",//甲醇超标率
+        // "chlorineGasExcessRate": "氯气超标率",//氯气超标率
+        "NOExceedance": "一氧化氮超标率",//一氧化氮超标率
+        // "HFExceedance": "氟化氢超标率",//氟化氢超标率
+        "HCLExceedance": "氯化氢超标率",//氯化氢超标率
+        "BenzeneExceedance": "苯系物超标率",//苯系物超标率
+        "EthanolExceedance": "乙醇超标率",//乙醇超标率
+        // "bromineGasExcessRate": "溴气超标率",//溴气超标率
+        // "THFExceedance": "四氢呋喃超标率",//四氢呋喃超标率
+        // "EpichlorohydrinExceedance": "环氧氯丙烷超标率",//环氧氯丙烷超标率
+        //        "HBRExceedance": "HBR超标率",//HBR超标率
+        // "AcrylonitrileExceedance": "丙烯腈超标率",//丙烯腈超标率
+
+    }
+
+    autoIndex = 0;
+    timerForLineData: any = null;
+
+//自动切换line图表数据
+    /*    autoChangeLineData() {
+            this.timerForLineData = setInterval(() => {
+                let arr: string[] = [
+                    '大气质量',
+                    '水体质量',
+                    '土壤质量'
+                ]
+                if (this.autoIndex > 2) {
+                    this.autoIndex = 0
+                }
+                this.lineChartType = arr[this.autoIndex];
+                this.changeData(arr[this.autoIndex])
+                this.autoIndex++
+            }, 5000)
+        }*/
+
+    lineChartType = '大气质量';
+    flag = '';
+    flagName = ''
+
+
+//随机加减数
+    randomNum() {
+        const num = this.getRandomInt(4, 20)
+
+    }
+
+//获取范围内随机数
+    getRandomInt(min: number, max: number) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
+    }
+
+    mounted() {
+        /*        this.timer = setInterval(()=>{
+                    this.randomNum()
+                }, 10000)*/
+        this.option = pieChartData()
+
+
+    }
+
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+        clearInterval(this.timerForLineData)
+    }
+
+    //改变污染物监测颜色
+    changeColor(val) {
+        if (Number(val) <= 30) {
+            return '#88E29F'
+        } else if (Number(val) > 30 && Number(val) <= 50) {
+            return '#F2A183'
+        } else {
+            return '#DD7171'
+        }
+
+    }
+
+    @Emit('clickBar')
+    clickBar(item) {
+        // console.log(item)
+    }
+}
+
diff --git a/src/components/env/air/right/chartData.js b/src/components/env/air/right/chartData.js
new file mode 100644
index 0000000..2158e2f
--- /dev/null
+++ b/src/components/env/air/right/chartData.js
@@ -0,0 +1,383 @@
+export const pieChartData =  function () {
+    return {
+        title: {
+            text: '75%',
+            subtext: '优良率',
+            itemGap: 5,
+            x: '40%',
+            y: '40%',
+            textAlign:'center',
+            textStyle: {
+                fontSize: 28,
+                fontWeight: '600',
+                fontStyle: 'italic',
+                color: '#B8ECFF',
+            },
+            subtextStyle: {
+                fontSize: 10,
+                fontWeight: 'normal',
+                align: "center",
+                color: '#E8E8E8'
+            },
+        },
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: 'vertical',
+            right: '0%',
+            top: 'bottom',
+            height:100,
+            itemWidth: 10,
+            itemHeight: 10,
+            data: [
+                {value: 49, name: '优质量'},
+                {value: 24, name: '良质量'},
+                {value: 24, name: '其他质量'},
+            ],
+            textStyle: {
+                color: '#D4E5FF',
+                padding: [5, 10, 5, 10]
+            },
+        },
+        series: [
+            {
+                type: 'pie',
+                selectedMode: 'single',
+                selectedOffset: 10,
+                left:-50,
+                radius: [55, 65],
+                data: [
+                    {value: 49, name: '优质量'},
+                    {value: 1, name: ''},
+                    {value: 24, name: '良质量'},
+                    {value: 1, name: ''},
+                    {value: 24, name: '其他质量'},
+                    {value: 1, name: ''},
+                ],
+                color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null],
+                emphasis: {
+                    itemStyle: {
+                        // shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        // borderWidth:5,
+                        // borderColor:"rgba(255,255,255,0)",
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                },
+                itemStyle: {},
+                select: {
+                    itemStyle: {}
+                },
+                labelLine: {
+                    show: false
+                },
+                label: {
+                    show: false
+                },
+                tooltip:{
+                    backgroundColor:'rgba(0,0,0,0.4)',
+                    textStyle:{
+                        color:'#ffffff'
+                    }
+
+                }
+            }
+        ],
+        animationDuration: 0,
+        animationDurationUpdate: 3000,
+        animationEasing: 'linear',
+        animationEasingUpdate: 'linear'
+    }
+}
+
+export const lineChartData = function (data,xAxisData,$echarts){
+    return {
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'dashed'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+            },
+            axisLine:{
+                lineStyle:{
+                    color: '#999999',
+                }
+            },
+
+            data: xAxisData
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'dashed'
+                },
+            },
+            axisLine:{
+                lineStyle:{
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                data: data,
+                type: 'line',
+                itemStyle:{
+                    color:'#E8E8E8',
+                },
+                symbolSize: 7,
+                lineStyle:{
+                    color:'#E8E8E8',
+                    width:3
+                },
+                smooth:true,
+                label: {
+                    show: true,
+                    position:'top',
+                    color:'#ffffff',
+                    borderWidth:0
+                },
+            }
+        ],
+
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 22,
+            x2: 12,
+            y2: 20,
+        }
+    }
+}
+export const barChartData = function (data ={},xAxisData = [],$echarts = {}){
+    const datas = [
+        { name: "2018年", value: "264.9" },
+        { name: "2019年", value: "241.5" },
+        { name: "2020年", value: "312.5" },
+        { name: "2021年", value: "447.9" },
+    ]
+    const xData = datas.map((item) => item.name);
+    const yData = datas.map((item) => item.value);
+    const max = Math.ceil(Math.max(...yData) * 1.2);
+    const maxData = [max, max, max, max, max];
+    return  {
+        backgroundColor: '#313131',
+        grid: {
+            left: "5%",
+            right: "8%",
+            bottom: "5%",
+            top: "10%",
+            containLabel: false,
+        },
+        xAxis: [
+            {
+                show: false,
+            },
+            {
+                show: false,
+            },
+        ],
+        yAxis: [
+            {
+                show: false,
+                inverse: true,
+                data: yData,
+            },
+            {
+                show: true,
+                data: yData,
+                offset: -45,
+                position: "right",
+                axisLabel: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                },
+                splitLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+            },
+        ],
+        series: [
+            {
+                name: "进度1",
+                show: true,
+                type: "bar",
+                // barGap: "-100%",
+                stack: 'all',
+                xAxisIndex: 1,
+                barWidth: 3,
+                itemStyle: {
+                    borderRadius: 3,
+                    color: (params) => {
+                        return {
+                            type: "linear",
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 1,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: "#9DD5AC",
+                                }, {
+                                    offset: 1,
+                                    color: "#6ACD84",
+                                }
+                            ],
+                        };
+                    },
+                },
+                // max: 0,
+                labelLine: {
+                    show: false,
+                },
+                z: 2,
+                data: yData,
+            },{
+                name: "进度2",
+                show: true,
+                type: "bar",
+                // barGap: "-100%",
+                stack: 'all',
+                xAxisIndex: 1,
+                barWidth: 3,
+                itemStyle: {
+                    borderRadius: 3,
+                    color: (params) => {
+                        return {
+                            type: "linear",
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 1,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: "#C5C37A",
+                                }, {
+                                    offset: 1,
+                                    color: "#CCD975",
+                                }
+                            ],
+                        };
+                    },
+                },
+                // max: 0,
+                labelLine: {
+                    show: false,
+                },
+                z: 2,
+                data: yData,
+            },{
+                name: "进度3",
+                show: true,
+                type: "bar",
+                // barGap: "-100%",
+                stack: 'all',
+                xAxisIndex: 1,
+                barWidth: 3,
+                itemStyle: {
+                    borderRadius: 3,
+                    color: (params) => {
+                        return {
+                            type: "linear",
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 1,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: "#CA9355",
+                                }, {
+                                    offset: 1,
+                                    color: "#D15D5D",
+                                }
+                            ],
+                        };
+                    },
+                },
+                // max: 0,
+                labelLine: {
+                    show: false,
+                },
+                z: 2,
+                data: yData,
+            },
+            {
+                name: "外圆",
+                type: "scatter",
+                stack: 'all',
+                emphasis: {
+                    scale: false,
+                },
+                xAxisIndex: 1,
+                symbolSize: [1,10],
+                symbol: 'rect',
+                itemStyle: {
+                    color: (params) => {
+                        return "#ffffff";
+                    },
+                    shadowColor: "rgba(255, 255, 255, 0.5)",
+                    shadowBlur: 5,
+                    borderWidth: 1,
+                    opacity: 1,
+                },
+                z: 2,
+                data: yData,
+            },
+            {
+                name: "年份",
+                z: 1,
+                show: true,
+                type: "bar",
+                xAxisIndex: 1,
+                barGap: "-100%",
+                barWidth: 4,
+                itemStyle: {
+                    borderRadius: 4,
+                    color: "rgba(13, 55, 78, 1)",
+                },
+                label: {
+                    show: true,
+                    position: [0, -25],
+                    // rich: {
+                    //   //富文本
+                    //   white: {
+                    //     //自定义颜色
+                    //     color: "#fff",
+                    //   },
+                    // },
+                    fontSize: 14,
+                    color: "#fff",
+                    formatter: function (data) {
+                        return xData[data.dataIndex];
+                    },
+                },
+                data: [0,0,0,0],
+            },
+        ],
+    };
+
+}
diff --git a/src/components/env/clean/left/chartData.js b/src/components/env/clean/left/chartData.js
new file mode 100644
index 0000000..a4787b0
--- /dev/null
+++ b/src/components/env/clean/left/chartData.js
@@ -0,0 +1,183 @@
+
+export const gasBarChartData = function () {
+    const yData = [
+        '榆林煤矿有限公司',
+        '榆林煤矿有限公司A',
+        '榆林煤矿有限公司B',
+        '榆林煤矿有限公司C',
+        '榆林煤矿有限公司D',
+        '榆林煤矿有限公司E',
+        '榆林煤矿有限公司F',
+        '榆林煤矿有限公司G'
+    ];
+    let data = ['500', '400', '360', '300', '270', '200', '180', '150'];
+    data.sort((a, b) => b - a);
+    let max = Math.max.apply(null, data);
+    max = max + 200;
+    let getMax = [];
+    for (let i = 0; i < yData.length; i++) {
+        getMax.push(max);
+    }
+
+    return {
+        tooltip: {
+            show:false,
+            trigger: 'axis',
+            axisPointer: {
+                type: 'none',
+            },
+            formatter: function (params) {
+                return params[0].name + ' : ' + params[0].value;
+            },
+        },
+        legend: {
+            right: '25%',
+            top: '0%',
+            itemWidth: 10,
+            itemHeight: 10,
+            data: [
+                '超标告警',
+                '其他报警'
+            ],
+            textStyle: {
+                color: '#D4E5FF',
+                padding: [5, 10, 5, 10]
+            },
+        },
+        xAxis: {
+            show: false,
+            type: 'value',
+        },
+        grid: {
+            right: '12%',
+            left: '1%',
+            top: '6%',
+            bottom: '1%',
+        },
+        yAxis: [
+            {
+                type: 'category',
+                inverse: true,
+                offset: -8,
+                axisLabel: {
+                    show: true,
+                    align: 'left',
+                    verticalAlign:'bottom',
+                    lineHeight: 36,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '12',
+                    },
+                },
+                splitLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                },
+                data: yData,
+            },
+            {
+                type: 'category',
+                inverse: true,
+                offset: 0,
+                axisTick: 'none',
+                axisLine: 'none',
+                show: true,
+                axisLabel: {
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '14',
+                    },
+                },
+                data: data,
+            },
+        ],
+        series: [
+            {
+                name: '超标告警',
+                type: 'bar',
+                stack: 'user',
+                zlevel: 1,
+                itemStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 0,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: '#7FB0FF', //  0%  处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#5485D5', //  100%  处的颜色
+                                },
+                            ],
+                            global: false, //  缺省为  false
+                        },
+                    },
+                },
+                barWidth: 10,
+                data: data.map((item,i)=>{
+                    return {
+                        value:item,
+                        name:yData[i]
+                    }
+                }),
+            },
+            {
+                name: '其他报警',
+                type: 'bar',
+                stack: 'user',
+                zlevel: 1,
+                itemStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 0,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: '#ACACAC', //  0%  处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#ffffff', //  100%  处的颜色
+                                },
+                            ],
+                            global: false, //  缺省为  false
+                        },
+                    },
+                },
+                barWidth: 10,
+                data: [160,100,130,120,140,120,130,100].map((item,i)=>{
+                    return {
+                        value:item,
+                        name:yData[i]
+                    }
+                }),
+            },
+            {
+                name: '背景',
+                type: 'bar',
+                barWidth: 10,
+                barGap: '-100%',
+                data: getMax,
+                itemStyle: {
+                    color: 'rgba(21,36,72,0.5)',
+                },
+            },
+        ],
+    };
+
+}
diff --git a/src/components/env/clean/left/cleanLeft.component.html b/src/components/env/clean/left/cleanLeft.component.html
new file mode 100644
index 0000000..0c50e88
--- /dev/null
+++ b/src/components/env/clean/left/cleanLeft.component.html
@@ -0,0 +1,15 @@
+<div class="env-left">
+    <div class="box-content flex-0 gas-left-bar-con">
+        <title-component :imgSrc="imgSrc">
+            企业告警排行
+        </title-component>
+        <hbt-echarts className="bar-chart-gas margin-top-23" :options="barChart" @onChartInit="getEcharts($event,'bar')"></hbt-echarts>
+    </div>
+    <div class="box-content margin-top-50">
+        <title-component :imgSrc="imgSrc">
+            告警信息列表
+        </title-component>
+        <warning-list-component class="margin-top-30" @getItem="getItem" :data-list="dataList"></warning-list-component>
+    </div>
+
+</div>
diff --git a/src/components/env/clean/left/cleanLeft.component.ts b/src/components/env/clean/left/cleanLeft.component.ts
new file mode 100644
index 0000000..ad62530
--- /dev/null
+++ b/src/components/env/clean/left/cleanLeft.component.ts
@@ -0,0 +1,100 @@
+import {Component, Emit, Vue} from 'vue-property-decorator';
+import template from "./cleanLeft.component.html"
+import {gasBarChartData} from "./chartData";
+import * as echarts from "echarts";
+
+import TitleComponent from "@/components/title.component.vue"
+import WarningListComponent from "@/components/warningList.component.vue"
+
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        WarningListComponent
+    },
+})
+export default class CleanLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //企业告警排行图表实例
+    bar: any = {}
+    //报警列表
+    get dataList(){
+        return this.$store.state.warningList
+    }
+    //企业告警排行图表数据
+    private barChart: any = {};
+
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        const self = this;
+        // getZr()
+        this[type].on('click',function(params){
+            console.log(params)
+            const company = self.$store.state.companyList
+            const index = Math.floor(Math.random()*10)%2
+            const companyObj = company[index]
+            companyObj.name = params.data.name
+            self.getCompany(companyObj)
+        })
+    }
+    //获取公司信息
+    @Emit('getCompany')
+    getCompany(item) {
+        console.log('item', item)
+    }
+
+    //初始化特征污染物超标次数图表数据
+    iniBarData() {
+        this.barChart = gasBarChartData()
+    }
+    //点击告警信息
+    @Emit()
+    getItem(item) {
+        console.log(item)
+    }
+
+    timer: any = {}
+
+    mounted() {
+        this.iniBarData()
+        //动态插入数据
+      /*  this.timer = setInterval(() => {
+            this.scrollList()
+        }, 6000)*/
+    }
+
+    count = 1
+
+    //告警信息列表滚动
+    scrollList() {
+        this.dataList.unshift({
+            title: '消防告警' + this.count,
+            info: '区域发现黑名单人员了区域发现黑名人预',
+            time: '2021-05-19 16:03:28',
+            level: this.count % 3,
+            id: Math.random(),
+        })
+        this.count++;
+       /* this.$nextTick(() => {
+            const dom: any = document.querySelector('.warning-list-box')
+            dom.classList.remove('animate__fadeInLeft')
+            setTimeout(() => {
+                dom.classList.add('animate__fadeInLeft')
+            },)
+        })*/
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+}
+
diff --git a/src/components/env/clean/right/chartData.js b/src/components/env/clean/right/chartData.js
new file mode 100644
index 0000000..0cb3e4e
--- /dev/null
+++ b/src/components/env/clean/right/chartData.js
@@ -0,0 +1,264 @@
+export const pieChartData =  function () {
+    return {
+        title: {
+            text: '75%',
+            subtext: '达标率',
+            itemGap: 5,
+            x: '40%',
+            y: '40%',
+            textAlign:'center',
+            textStyle: {
+                fontSize: 28,
+                fontWeight: '600',
+                fontStyle: 'italic',
+                color: '#B8ECFF',
+            },
+            subtextStyle: {
+                fontSize: 10,
+                fontWeight: 'normal',
+                align: "center",
+                color: '#E8E8E8'
+            },
+        },
+        tooltip: {
+            show:false,
+            trigger: 'item',
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+
+        },
+        legend: {
+            orient:'vertical',
+            show: true,
+            itemStyle: {
+                opacity: 1,
+            },
+           itemWidth: 12,
+            itemHeight: 8,
+            top: 'bottom',
+            right:0,
+            itemGap: 20,
+            textStyle: {
+                color: '#D4E5FF',
+            },
+
+        },
+        color: ['#B8ECFF','#FADFA4'],
+        series: [
+            {
+                type: 'pie',
+                radius: [60, 70],
+                center: ["42%", "50%"],
+                avoidLabelOverlap: false,
+                selectedOffset: 7,
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                animation: true,
+                emphasis: {
+                    disabled: true,
+                    label: {
+                        show: false,
+                    }
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                    {
+                        name: '未超标数',
+                        value: 75,
+                        itemStyle: {
+                            color: '#E8E8E8',
+                            opacity: 1
+                        },
+                    },
+                    {
+                        name: '超标数',
+                        value: 25,
+                        itemStyle: {
+                            color: '#7FB0FF',
+                            opacity: 0
+                        }
+                    },
+                ]
+            },
+            {
+                type: 'pie',
+                radius: [55, 65],
+                center: ["42%", "50%"],
+                avoidLabelOverlap: false,
+                selectedOffset: 7,
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                animation: false,
+                emphasis: {
+                    disabled: true,
+                    label: {
+                        show: false,
+                    }
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                    {
+                        name: '未超标数',
+                        value: 75,
+                        itemStyle: {
+                            color: '#E8E8E8',
+                            opacity: 0
+                        },
+                    },
+                    {
+                        name: '超标数',
+                        value: 25,
+                        itemStyle: {
+                            color: '#7FB0FF',
+                            opacity: 1
+                        }
+                    },
+                ]
+            },
+
+        ],
+        animationDuration: 0,
+        animationDurationUpdate: 3000,
+        animationEasing: 'linear',
+        animationEasingUpdate: 'linear'
+    }
+}
+
+
+
+// 修改弹框内容用到的方法
+function replaceHtmlWord(str) {
+    return str.replace("NO2", "NO<sub>2</sub>")
+        .replace("SO2", "SO<sub>2</sub>")
+        .replace("O3", "O<sub>3</sub>")
+    // .replace("PM10", "PM<sub>10</sub>")
+    // .replace("PM2.5", "PM<sub>2.5</sub>")
+
+}
+
+// 修改图例文字用到的方法
+function replaceWords(str) {
+    return str.replace("NO2", "NO{sub|2}")
+        .replace("SO2", "SO{sub|2}")
+        .replace("O3", "O{sub|3}")
+    // .replace("PM2.5", "PM{sub|2.5}")
+    // .replace("PM10", "PM{sub|10}");
+}
+
+/**
+ * 废气右侧折线图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param selected
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const cleanRightLineChartData = function (data, xAxisData, legend) {
+    return {
+        color: ['#7FB0FF','#E8E8E8','#B8ECFF','#C9FFD7'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: xAxisData
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: data,
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 40,
+            x2: 22,
+            y2: 20,
+        },
+        legend: {
+            data: legend,
+            top: 10,
+            padding: [2, 2],
+            formatter: function (name) {
+                return replaceWords(name);
+            },
+            icon:'circle',
+            align:'left',
+            itemGap:10,
+            width: "100%",
+            itemWidth:10,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 8,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        }
+
+    }
+}
diff --git a/src/components/env/clean/right/cleanRight.component.html b/src/components/env/clean/right/cleanRight.component.html
new file mode 100644
index 0000000..19c52a8
--- /dev/null
+++ b/src/components/env/clean/right/cleanRight.component.html
@@ -0,0 +1,20 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            排放变化趋势
+        </title-component>
+        <div class="radio-style radio-style-two-btns">
+            <el-radio-group @change="changeData" v-model="lineChartType">
+                <el-radio-button label="排放量"></el-radio-button>
+                <el-radio-button label="排放浓度"></el-radio-button>
+            </el-radio-group>
+        </div>
+        <hbt-echarts className="right-bar-chart" :options="lineChartData" @onChartInit="getEcharts($event,'line')"></hbt-echarts>
+    </div>
+    <div class="box-content margin-top-50">
+        <title-component :imgSrc="imgSrc">
+            排放达标率
+        </title-component>
+        <hbt-echarts className="right-pie-chart" :options="pieChartData" @onChartInit="getEcharts($event)"></hbt-echarts>
+    </div>
+</div>
diff --git a/src/components/env/clean/right/cleanRight.component.ts b/src/components/env/clean/right/cleanRight.component.ts
new file mode 100644
index 0000000..cde82f8
--- /dev/null
+++ b/src/components/env/clean/right/cleanRight.component.ts
@@ -0,0 +1,101 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./cleanRight.component.html"
+import {pieChartData, cleanRightLineChartData} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+
+import * as echarts from 'echarts';
+
+import("@/assets/style/pageCommon.component.scss")
+import {
+    dataForClean1,
+    dataForClean2,
+} from '@/dataDemo/mockData';
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class CleanRightComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //柱状图数据
+    lineChartData: any = {};
+    //定时器
+    timer: any = null;
+    // 排放达标率数据
+    pieChartData: any = {}
+    //柱状图实例
+    line: any = {}
+    //饼图实例
+    pie: any = {}
+
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+    }
+    //排放量数据
+    dataForEmissions = dataForClean1
+    //排放浓度数据
+    dataForEmissionConcentration = dataForClean2
+    //折线图x轴坐标
+    xAxisData = ['1月','2月','3月','4月','5月','6月']
+    //设置排放变化趋势默认选中项
+    lineChartType = '排放量'
+    //排放变化趋势切换排放量排放浓度
+    changeData(val) {
+         if (val === '排放量') {
+             this.lineChartData = cleanRightLineChartData(this.dataForEmissions.data,this.xAxisData,this.legend)
+         } else {
+             this.lineChartData = cleanRightLineChartData(this.dataForEmissionConcentration.data,this.xAxisData,this.legend)
+         }
+    }
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.line.resize()
+        }, 300)
+    }
+
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+    //图例
+    legend = ["COD",
+        "氨氮",
+        "VOS",
+        "石油类"]
+    mounted() {
+        /*        this.timer = setInterval(()=>{
+                    this.randomNum()
+                }, 10000)*/
+        this.pieChartData = pieChartData()
+        // data, xAxisData, legend
+        this.lineChartData = cleanRightLineChartData(this.dataForEmissions.data,this.xAxisData,this.legend)
+        window.addEventListener("resize", this.resize);
+
+    }
+
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+    //改变污染物监测颜色
+    changeColor(val) {
+        if (Number(val) <= 30) {
+            return '#88E29F'
+        } else if (Number(val) > 30 && Number(val) <= 50) {
+            return '#F2A183'
+        } else {
+            return '#DD7171'
+        }
+
+    }
+}
+
diff --git a/src/components/env/gas/left/chartData.js b/src/components/env/gas/left/chartData.js
new file mode 100644
index 0000000..a4787b0
--- /dev/null
+++ b/src/components/env/gas/left/chartData.js
@@ -0,0 +1,183 @@
+
+export const gasBarChartData = function () {
+    const yData = [
+        '榆林煤矿有限公司',
+        '榆林煤矿有限公司A',
+        '榆林煤矿有限公司B',
+        '榆林煤矿有限公司C',
+        '榆林煤矿有限公司D',
+        '榆林煤矿有限公司E',
+        '榆林煤矿有限公司F',
+        '榆林煤矿有限公司G'
+    ];
+    let data = ['500', '400', '360', '300', '270', '200', '180', '150'];
+    data.sort((a, b) => b - a);
+    let max = Math.max.apply(null, data);
+    max = max + 200;
+    let getMax = [];
+    for (let i = 0; i < yData.length; i++) {
+        getMax.push(max);
+    }
+
+    return {
+        tooltip: {
+            show:false,
+            trigger: 'axis',
+            axisPointer: {
+                type: 'none',
+            },
+            formatter: function (params) {
+                return params[0].name + ' : ' + params[0].value;
+            },
+        },
+        legend: {
+            right: '25%',
+            top: '0%',
+            itemWidth: 10,
+            itemHeight: 10,
+            data: [
+                '超标告警',
+                '其他报警'
+            ],
+            textStyle: {
+                color: '#D4E5FF',
+                padding: [5, 10, 5, 10]
+            },
+        },
+        xAxis: {
+            show: false,
+            type: 'value',
+        },
+        grid: {
+            right: '12%',
+            left: '1%',
+            top: '6%',
+            bottom: '1%',
+        },
+        yAxis: [
+            {
+                type: 'category',
+                inverse: true,
+                offset: -8,
+                axisLabel: {
+                    show: true,
+                    align: 'left',
+                    verticalAlign:'bottom',
+                    lineHeight: 36,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '12',
+                    },
+                },
+                splitLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                },
+                data: yData,
+            },
+            {
+                type: 'category',
+                inverse: true,
+                offset: 0,
+                axisTick: 'none',
+                axisLine: 'none',
+                show: true,
+                axisLabel: {
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '14',
+                    },
+                },
+                data: data,
+            },
+        ],
+        series: [
+            {
+                name: '超标告警',
+                type: 'bar',
+                stack: 'user',
+                zlevel: 1,
+                itemStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 0,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: '#7FB0FF', //  0%  处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#5485D5', //  100%  处的颜色
+                                },
+                            ],
+                            global: false, //  缺省为  false
+                        },
+                    },
+                },
+                barWidth: 10,
+                data: data.map((item,i)=>{
+                    return {
+                        value:item,
+                        name:yData[i]
+                    }
+                }),
+            },
+            {
+                name: '其他报警',
+                type: 'bar',
+                stack: 'user',
+                zlevel: 1,
+                itemStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 0,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: '#ACACAC', //  0%  处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#ffffff', //  100%  处的颜色
+                                },
+                            ],
+                            global: false, //  缺省为  false
+                        },
+                    },
+                },
+                barWidth: 10,
+                data: [160,100,130,120,140,120,130,100].map((item,i)=>{
+                    return {
+                        value:item,
+                        name:yData[i]
+                    }
+                }),
+            },
+            {
+                name: '背景',
+                type: 'bar',
+                barWidth: 10,
+                barGap: '-100%',
+                data: getMax,
+                itemStyle: {
+                    color: 'rgba(21,36,72,0.5)',
+                },
+            },
+        ],
+    };
+
+}
diff --git a/src/components/env/gas/left/gasLeft.component.html b/src/components/env/gas/left/gasLeft.component.html
new file mode 100644
index 0000000..3cef768
--- /dev/null
+++ b/src/components/env/gas/left/gasLeft.component.html
@@ -0,0 +1,15 @@
+<div class="env-left">
+    <div class="box-content flex-0 gas-left-bar-con">
+        <title-component :imgSrc="imgSrc">
+            企业告警排行
+        </title-component>
+        <hbt-echarts className="bar-chart-gas margin-top-23" :options="barChart" @onChartInit="getEcharts($event,'bar')"></hbt-echarts>
+    </div>
+    <div class="box-content margin-top-50">
+        <title-component :imgSrc="imgSrc">
+            告警信息列表
+        </title-component>
+        <warning-list-component class="margin-top-30" @getItem="getItemData" :data-list="dataList"></warning-list-component>
+    </div>
+
+</div>
diff --git a/src/components/env/gas/left/gasLeft.component.ts b/src/components/env/gas/left/gasLeft.component.ts
new file mode 100644
index 0000000..9f19448
--- /dev/null
+++ b/src/components/env/gas/left/gasLeft.component.ts
@@ -0,0 +1,103 @@
+import {Component, Emit, Vue} from 'vue-property-decorator';
+import template from "./gasLeft.component.html"
+import {gasBarChartData} from "./chartData";
+import * as echarts from "echarts";
+
+import TitleComponent from "@/components/title.component.vue"
+import WarningListComponent from "@/components/warningList.component.vue"
+
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        WarningListComponent
+    },
+})
+export default class GasLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //企业告警排行图表实例
+    bar: any = {}
+    //报警列表
+    get dataList(){
+        return this.$store.state.warningList
+    }
+    //企业告警排行图表数据
+    private barChart: any = {};
+
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        const self = this;
+        // getZr()
+        this[type].on('click',function(params){
+            console.log(params)
+            const company = self.$store.state.companyList
+            const index = Math.floor(Math.random()*10)%2
+            const companyObj = company[index]
+            companyObj.name = params.data.name
+            self.getCompany(companyObj)
+        })
+    }
+    //获取公司信息
+    @Emit('getCompany')
+    getCompany(item) {
+        console.log('item', item)
+    }
+    //初始化特征污染物超标次数图表数据
+    iniBarData() {
+        this.barChart = gasBarChartData()
+    }
+    getItemData(item){
+        const map = {
+            "1":"一级",
+            "2":"二级",
+            "3":"三级",
+        }
+        item.levelName = map[item.level]
+        item.equipment = '4号监测点'
+        this.getItem(item)
+    }
+    //点击告警信息
+    @Emit()
+    getItem(item){
+        console.log(item)
+    }
+    timer:any = {}
+    mounted() {
+        this.iniBarData()
+        //动态插入数据
+      /*  this.timer = setInterval(() => {
+            this.scrollList()
+        }, 6000)*/
+    }
+    count = 1
+    //告警信息列表滚动
+    scrollList() {
+        this.dataList.unshift({
+            title: '消防告警' + this.count,
+            info: '区域发现黑名单人员了区域发现黑名人预',
+            time: '2021-05-19 16:03:28',
+            level: this.count % 3,
+        })
+        this.count++;
+        this.$nextTick(() => {
+            const dom: any = document.querySelector('.warning-list-box')
+            dom.classList.remove('animate__fadeInLeft')
+            setTimeout(() => {
+                dom.classList.add('animate__fadeInLeft')
+            },)
+        })
+    }
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+}
+
diff --git a/src/components/env/gas/right/chartData.js b/src/components/env/gas/right/chartData.js
new file mode 100644
index 0000000..f95d9c8
--- /dev/null
+++ b/src/components/env/gas/right/chartData.js
@@ -0,0 +1,264 @@
+export const pieChartData =  function () {
+    return {
+        title: {
+            text: '75%',
+            subtext: '达标率',
+            itemGap: 5,
+            x: '40%',
+            y: '40%',
+            textAlign:'center',
+            textStyle: {
+                fontSize: 28,
+                fontWeight: '600',
+                fontStyle: 'italic',
+                color: '#B8ECFF',
+            },
+            subtextStyle: {
+                fontSize: 10,
+                fontWeight: 'normal',
+                align: "center",
+                color: '#E8E8E8'
+            },
+        },
+        tooltip: {
+            show:false,
+            trigger: 'item',
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+
+        },
+        legend: {
+            orient:'vertical',
+            show: true,
+            itemStyle: {
+                opacity: 1,
+            },
+           itemWidth: 12,
+            itemHeight: 8,
+            top: 'bottom',
+            right:0,
+            itemGap: 20,
+            textStyle: {
+                color: '#D4E5FF',
+            },
+
+        },
+        color: ['#B8ECFF','#FADFA4'],
+        series: [
+            {
+                type: 'pie',
+                radius: [60, 70],
+                center: ["42%", "50%"],
+                avoidLabelOverlap: false,
+                selectedOffset: 7,
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                animation: true,
+                emphasis: {
+                    disabled: true,
+                    label: {
+                        show: false,
+                    }
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                    {
+                        name: '未超标数',
+                        value: 75,
+                        itemStyle: {
+                            color: '#E8E8E8',
+                            opacity: 1
+                        },
+                    },
+                    {
+                        name: '超标数',
+                        value: 25,
+                        itemStyle: {
+                            color: '#7FB0FF',
+                            opacity: 0
+                        }
+                    },
+                ]
+            },
+            {
+                type: 'pie',
+                radius: [55, 65],
+                center: ["42%", "50%"],
+                avoidLabelOverlap: false,
+                selectedOffset: 7,
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                animation: false,
+                emphasis: {
+                    disabled: true,
+                    label: {
+                        show: false,
+                    }
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                    {
+                        name: '未超标数',
+                        value: 75,
+                        itemStyle: {
+                            color: '#E8E8E8',
+                            opacity: 0
+                        },
+                    },
+                    {
+                        name: '超标数',
+                        value: 25,
+                        itemStyle: {
+                            color: '#7FB0FF',
+                            opacity: 1
+                        }
+                    },
+                ]
+            },
+
+        ],
+        animationDuration: 0,
+        animationDurationUpdate: 3000,
+        animationEasing: 'linear',
+        animationEasingUpdate: 'linear'
+    }
+}
+
+
+
+// 修改弹框内容用到的方法
+function replaceHtmlWord(str) {
+    return str.replace("NO2", "NO<sub>2</sub>")
+        .replace("SO2", "SO<sub>2</sub>")
+        .replace("O3", "O<sub>3</sub>")
+    // .replace("PM10", "PM<sub>10</sub>")
+    // .replace("PM2.5", "PM<sub>2.5</sub>")
+
+}
+
+// 修改图例文字用到的方法
+function replaceWords(str) {
+    return str.replace("NO2", "NO{sub|2}")
+        .replace("SO2", "SO{sub|2}")
+        .replace("O3", "O{sub|3}")
+    // .replace("PM2.5", "PM{sub|2.5}")
+    // .replace("PM10", "PM{sub|10}");
+}
+
+/**
+ * 废气右侧折线图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param selected
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const gasRightLineChartData = function (data, xAxisData, legend) {
+    return {
+        color: ['#7FB0FF','#E8E8E8'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: xAxisData
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: data,
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 40,
+            x2: 22,
+            y2: 20,
+        },
+        legend: {
+            data: legend,
+            top: 10,
+            padding: [2, 2],
+            formatter: function (name) {
+                return replaceWords(name);
+            },
+            icon:'circle',
+            align:'left',
+            itemGap:10,
+            width: "100%",
+            itemWidth:10,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 8,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        }
+
+    }
+}
diff --git a/src/components/env/gas/right/gasRight.component.html b/src/components/env/gas/right/gasRight.component.html
new file mode 100644
index 0000000..19c52a8
--- /dev/null
+++ b/src/components/env/gas/right/gasRight.component.html
@@ -0,0 +1,20 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            排放变化趋势
+        </title-component>
+        <div class="radio-style radio-style-two-btns">
+            <el-radio-group @change="changeData" v-model="lineChartType">
+                <el-radio-button label="排放量"></el-radio-button>
+                <el-radio-button label="排放浓度"></el-radio-button>
+            </el-radio-group>
+        </div>
+        <hbt-echarts className="right-bar-chart" :options="lineChartData" @onChartInit="getEcharts($event,'line')"></hbt-echarts>
+    </div>
+    <div class="box-content margin-top-50">
+        <title-component :imgSrc="imgSrc">
+            排放达标率
+        </title-component>
+        <hbt-echarts className="right-pie-chart" :options="pieChartData" @onChartInit="getEcharts($event)"></hbt-echarts>
+    </div>
+</div>
diff --git a/src/components/env/gas/right/gasRight.component.ts b/src/components/env/gas/right/gasRight.component.ts
new file mode 100644
index 0000000..51f475a
--- /dev/null
+++ b/src/components/env/gas/right/gasRight.component.ts
@@ -0,0 +1,99 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./gasRight.component.html"
+import {pieChartData, gasRightLineChartData} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+
+import * as echarts from 'echarts';
+
+import("@/assets/style/pageCommon.component.scss")
+import {
+    dataForGas1,
+    dataForGas2,
+} from '@/dataDemo/mockData';
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class GasRightComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //柱状图数据
+    lineChartData: any = {};
+    //定时器
+    timer: any = null;
+    // 排放达标率数据
+    pieChartData: any = {}
+    //柱状图实例
+    line: any = {}
+    //饼图实例
+    pie: any = {}
+
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+    }
+    //排放量数据
+    dataForEmissions = dataForGas1
+    //排放浓度数据
+    dataForEmissionConcentration = dataForGas2
+    //折线图x轴坐标
+    xAxisData = ['1月','2月','3月','4月','5月','6月']
+    //设置排放变化趋势默认选中项
+    lineChartType = '排放量'
+    //排放变化趋势切换排放量排放浓度
+    changeData(val) {
+
+         if (val === '排放量') {
+             this.lineChartData = gasRightLineChartData(this.dataForEmissions.data,this.xAxisData,this.legend)
+         } else {
+             this.lineChartData = gasRightLineChartData(this.dataForEmissionConcentration.data,this.xAxisData,this.legend)
+         }
+    }
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.line.resize()
+        }, 300)
+    }
+
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+    //图例
+    legend = ['COD','氨氮']
+    mounted() {
+        /*        this.timer = setInterval(()=>{
+                    this.randomNum()
+                }, 10000)*/
+        this.pieChartData = pieChartData()
+        // data, xAxisData, legend
+        this.lineChartData = gasRightLineChartData(this.dataForEmissions.data,this.xAxisData,this.legend)
+        window.addEventListener("resize", this.resize);
+
+    }
+
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+    //改变污染物监测颜色
+    changeColor(val) {
+        if (Number(val) <= 30) {
+            return '#88E29F'
+        } else if (Number(val) > 30 && Number(val) <= 50) {
+            return '#F2A183'
+        } else {
+            return '#DD7171'
+        }
+
+    }
+}
+
diff --git a/src/components/env/index/left/chartData.js b/src/components/env/index/left/chartData.js
new file mode 100644
index 0000000..efdb970
--- /dev/null
+++ b/src/components/env/index/left/chartData.js
@@ -0,0 +1,98 @@
+export const pieChartData = {
+    title: {
+        text: '90%',
+        subtext: '在线率',
+        itemGap: 5,
+        x: 105,
+        y: '37%',
+        textStyle: {
+            fontSize: 30,
+            fontWeight: '600',
+            fontStyle: 'italic',
+            color: '#E8E8E8',
+        },
+        subtextStyle: {
+            fontSize: 17,
+            fontWeight: 'normal',
+            align: "center",
+            color: '#E8E8E8'
+        },
+    },
+    tooltip: {
+        trigger: 'item'
+    },
+    legend: {
+        orient: 'vertical',
+        right: '0%',
+        top: 'bottom',
+        height:100,
+        itemWidth: 10,
+        itemHeight: 10,
+        data: [
+            {value: 25, name: '气体'},
+            {value: 25, name: '水质'},
+            {value: 15, name: '特征污染物'},
+            {value: 20, name: '废气'},
+            {value: 15, name: '废水'}
+        ],
+        textStyle: {
+            color: '#D4E5FF',
+            padding: [5, 10, 5, 10]
+        },
+    },
+    series: [
+        {
+            type: 'pie',
+            selectedMode: 'single',
+            selectedOffset: 10,
+            left:-50,
+            radius: [50, 75],
+            data: [
+                {value: 25, name: '气体',num:90},
+                {value: 1, name: '',num:0},
+                {value: 25, name: '水质',num:95},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '特征污染物',num:94},
+                {value: 1, name: '',num:0},
+                {value: 20, name: '废气',num:91},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '废水',num:89},
+                {value: 1, name: '',num:0},
+            ],
+            color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null],
+            emphasis: {
+                itemStyle: {
+                    // shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    // borderWidth:5,
+                    // borderColor:"rgba(255,255,255,0)",
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            itemStyle: {},
+            select: {
+                itemStyle: {}
+            },
+            labelLine: {
+                show: false
+            },
+            label: {
+                show: false
+            },
+            tooltip:{
+                backgroundColor:'rgba(0,0,0,0.4)',
+                textStyle:{
+                    color:'#ffffff'
+                },
+                formatter:function (params) {
+                    return params.data.name+' : '+ params.data.num+'%'
+                }
+
+            }
+        }
+    ],
+    animationDuration: 0,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear'
+}
diff --git a/src/components/env/index/left/envIndexLeft.component.html b/src/components/env/index/left/envIndexLeft.component.html
new file mode 100644
index 0000000..dff22f8
--- /dev/null
+++ b/src/components/env/index/left/envIndexLeft.component.html
@@ -0,0 +1,18 @@
+<div class="env-left">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            预警信息
+        </title-component>
+        <warning-list-component class="margin-top-30" @getItem="showWaring" :data-list="dataList"></warning-list-component>
+    </div>
+    <div class="box-content flex-1 margin-top-50">
+        <title-component :imgSrc="imgSrc" >
+            设备监测信息
+        </title-component>
+        <div class="equipment-content">
+            <span class="env-small-label">在线设备数</span>
+            <span class="env-number-stlye">{{onlineEquipment}}/{{totalEquipment}}</span>
+        </div>
+        <hbt-echarts className="content-block" :options="option" @onChartInit="getEcharts($event)"></hbt-echarts>
+    </div>
+</div>
diff --git a/src/components/env/index/left/envIndexLeft.component.ts b/src/components/env/index/left/envIndexLeft.component.ts
new file mode 100644
index 0000000..38d26a9
--- /dev/null
+++ b/src/components/env/index/left/envIndexLeft.component.ts
@@ -0,0 +1,222 @@
+import {Component, Emit, Vue} from 'vue-property-decorator';
+import template from "./envIndexLeft.component.html"
+import {pieChartData} from "./chartData";
+
+import TitleComponent from "@/components/title.component.vue"
+import WarningListComponent from "@/components/warningList.component.vue"
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        WarningListComponent
+    },
+})
+export default class EnvIndexLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //总设备数
+    totalEquipment = 1024;
+    //在线设备
+    onlineEquipment = 724;
+    timer: any = null;
+    //饼图数据
+    option: any = pieChartData
+    //饼图实例
+    pieChart: any = {}
+    activePieItem = 0;
+
+
+    get dataList(){
+        return this.$store.state.warningList
+    }
+
+    //切换饼图高亮区域
+    changePieChange() {
+
+        if (this.activePieItem > 8) {
+            this.activePieItem = 0
+        }
+        const temp = JSON.parse(JSON.stringify(this.option))
+        temp.series[0].data = temp.series[0].data.map(item => {
+            item.selected = false
+            return item
+        })
+        const arr = [{value: 90, name: '气体监测'},
+            {value: 1, name: ''},
+            {value: 95, name: '水质监测'},
+            {value: 1, name: ''},
+            {value: 94, name: '特征污染物监测'},
+            {value: 1, name: ''},
+            {value: 91, name: '废气监测'},
+            {value: 1, name: ''},
+            {value: 89, name: '废水监测'},
+            {value: 1, name: ''},]
+        if (arr[this.activePieItem].name){
+            temp.title.text = arr[this.activePieItem].value+'%';
+            this.pieChart.setOption(temp);
+        }
+
+        //定时移除高亮选中区
+        this.pieChart.dispatchAction({
+            type: "downplay",
+            seriesIndex: 0,
+        });
+        //定时加载选中高亮区
+        this.pieChart.dispatchAction({
+            type: "highlight",
+            dataIndex: this.activePieItem
+        })
+        this.activePieItem += 2;
+
+    }
+
+    //获取图表实例
+    getEcharts(e) {
+        this.pieChart = e
+    }
+    //展示告警信息
+    showWaring(item){
+
+        const levelMap = {
+            1:'一级',
+            2:'二级',
+            3:'三级',
+        }
+        const levelClassMap = {
+            3:'blue',
+            2:'yellow',
+            1:'red',
+        }
+        console.log(item)
+        this.getItem(Object.assign(item,{
+            type:'风险告警',
+            level:item.level,
+            levelClass:levelClassMap[item.level],
+            levelName:levelMap[item.level],
+            content:'监测数值异常',
+            time:'2023年1月20日  14:33:33',
+            equipment:'北区广场监测点',
+            tableHeader:[
+                {
+                    'prop':'alarmSubject',
+                    'label':'告警主体',
+                    'width':'90px',
+                }, {
+                    'prop':'COD',
+                    'label':'COD',
+                }, {
+                    'prop':'standard',
+                    'label':'标准值',
+                },
+            ],
+            tableData: [{
+                'alarmSubject': '排放量',
+                'COD': '456m<sup>3</sup>',
+                'standard': '466m<sup>3</sup>',
+            }, {
+                'alarmSubject': '排放浓度',
+                'COD': '2.6mg/L',
+                'standard': '2.5mg/L',
+            }, {
+                'alarmSubject': '排放时间',
+                'COD': '2023.3.31 05:03:45',
+                'standard': '8:00-22:00',
+            }, {
+                'alarmSubject': '排放浓度',
+                'COD': '2.6mg/L',
+                'standard': '2.5mg/L',
+            }, {
+                'alarmSubject': '排放时间',
+                'COD': '2023.3.31 05:03:45',
+                'standard': '8:00-22:00',
+            }]
+        }))
+    }
+    //点击告警信息
+    @Emit()
+    getItem(item) {
+        // console.log('item', item)
+    }
+
+    //生成随机数
+    randomNum() {
+        const num = this.getRandomInt(4, 20)
+        if (num % 2 === 0) {
+            this.onlineEquipment += num
+        } else {
+            this.onlineEquipment -= num
+        }
+
+    }
+
+    //随机整数
+    getRandomInt(min: number, max: number) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
+    }
+
+    count = 1
+
+    //监听页面变化重新绘制图表
+    resize() {
+        setTimeout(() => {
+            this.pieChart.resize();
+        }, 300)
+    }
+
+    mounted() {
+        this.timer = setInterval(() => {
+            this.changePieChange()
+            this.randomNum()
+        }, 3000)
+
+        //动态插入数据
+        /*this.timer = setInterval(() => {
+            this.scrollList()
+        }, 6000)*/
+        window.addEventListener("resize", this.resize);
+    }
+
+    //告警信息列表滚动
+    scrollList() {
+        this.dataList.unshift({
+            title: '消防告警' + this.count,
+            info: '区域发现黑名单人员了区域发现黑名人预',
+            time: '2021-05-19 16:03:28',
+            level: (this.count % 3)+1,
+        })
+        this.count++;
+        /*  this.$nextTick(() => {
+              const dom: any = document.querySelector('.warning-list-box')
+              dom.classList.remove('animate__fadeInLeft')
+              setTimeout(() => {
+                  dom.classList.add('animate__fadeInLeft')
+              },)
+          })*/
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+    changeMore() {
+        console.log(1)
+    }
+
+    changeClose() {
+        console.log(1)
+    }
+}
+
diff --git a/src/components/env/index/right/chartData.js b/src/components/env/index/right/chartData.js
new file mode 100644
index 0000000..3fb9cbb
--- /dev/null
+++ b/src/components/env/index/right/chartData.js
@@ -0,0 +1,75 @@
+
+export const lineChartData = function (data,xAxisData,$echarts){
+    return {
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'dashed'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+            },
+            axisLine:{
+                lineStyle:{
+                    color: '#999999',
+                }
+            },
+
+            data: xAxisData
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'dashed'
+                },
+            },
+            axisLine:{
+                lineStyle:{
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                data: data,
+                type: 'line',
+                itemStyle:{
+                    color:'#E8E8E8',
+                },
+                symbolSize: 7,
+                lineStyle:{
+                    color:'#E8E8E8',
+                    width:3
+                },
+                smooth:true,
+                label: {
+                    show: true,
+                    position:'top',
+                    color:'#ffffff',
+                    borderWidth:0
+                },
+            }
+        ],
+
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 22,
+            x2: 12,
+            y2: 20,
+        }
+    }
+}
diff --git a/src/components/env/index/right/envIndexRight.component.html b/src/components/env/index/right/envIndexRight.component.html
new file mode 100644
index 0000000..3757905
--- /dev/null
+++ b/src/components/env/index/right/envIndexRight.component.html
@@ -0,0 +1,205 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            环境质量监测
+        </title-component>
+        <div class="right-top">
+            <div class="right-top-item">
+                <div class="right-top-item-sub">
+                    <span class="value">{{smartAndEnvironmentallyFriendlyData.atmosphericEnvironmentalQuality.aqi}}</span>
+                    <span class="level"><i class="point " :class="flag"></i>{{degreeOfContamination}}</span>
+                </div>
+                <div class="label">空气质量指数</div>
+            </div>
+            <div class="right-top-item">
+                <div class="right-top-item-sub">
+                    <span class="value">
+                        {{
+                            smartAndEnvironmentallyFriendlyData.waterQuality.comprehensivePollutionIndex
+                        }}
+                    </span>
+                    <span class="level"><i class="point" :class="waterFlag.class"></i>{{waterFlag.name}}</span>
+                </div>
+                <div class="label">水体污染指数</div>
+            </div>
+            <div class="right-top-item">
+                <div class="right-top-item-sub">
+                    <span class="value">
+                        {{ smartAndEnvironmentallyFriendlyData.soilEnvironmentalQuality.CPIPollutionIndex }}
+                    </span>
+                    <span class="level"><i class="point" :class="soliFlag.class"></i>{{soliFlag.name}}</span>
+                </div>
+                <div class="label">土壤质量指数</div>
+            </div>
+        </div>
+        <div class="radio-style">
+            <el-radio-group @change="changeData" v-model="lineChartType">
+                <el-radio-button label="大气质量"></el-radio-button>
+                <el-radio-button label="水体质量"></el-radio-button>
+                <el-radio-button label="土壤质量"></el-radio-button>
+            </el-radio-group>
+        </div>
+        <hbt-echarts className="line-chart" :options="option" @onChartInit="getEcharts($event,'lineChart')"></hbt-echarts>
+    </div>
+    <div class="box-content margin-top-20">
+        <title-component :imgSrc="imgSrc">
+            污染源监测
+        </title-component>
+        <div class="right-middle">
+            <div class="square-box d-flex is-justify-space-between">
+                <div class="icon-style">
+                    <img :src="iconImg1" alt="">
+                </div>
+                <div>
+                    <div>
+                        <b>
+                            {{
+                                smartAndEnvironmentallyFriendlyData.contaminationSourceMonitoring.enterpriseExhaustEmissionMonitoring.exhaustGasPollutionSource
+                            }}
+                        </b>
+                    </div>
+                    <div class="text-style">废气污染源</div>
+                </div>
+
+            </div>
+            <div class="square-box d-flex is-justify-space-between">
+                <div class="icon-style">
+                    <img :src="iconImg2" alt="">
+                </div>
+                <div>
+                    <div>
+                        <b>
+                            {{
+                                smartAndEnvironmentallyFriendlyData.contaminationSourceMonitoring.enterpriseExhaustEmissionMonitoring.totalExhaustEmissions
+                            }}
+                        </b>
+                    </div>
+                    <div class="text-style">年排放量(m³)</div>
+                </div>
+            </div>
+            <div class="square-box d-flex is-justify-space-between">
+                <div class="icon-style">
+                    <img :src="iconImg3" alt="">
+                </div>
+                <div>
+                    <div>
+                        <b>
+                            {{
+                                smartAndEnvironmentallyFriendlyData.contaminationSourceMonitoring.enterpriseExhaustEmissionMonitoring.numberOfTimesEmissionsExceedStandards
+                            }}
+                        </b>
+                    </div>
+                    <div class="text-style">超标次数</div>
+                </div>
+            </div>
+            <div class="square-box d-flex is-justify-space-between">
+                <div class="icon-style">
+                    <img :src="iconImg4" alt="">
+                </div>
+                <div>
+                    <div>
+                        <b>
+                            {{
+                                smartAndEnvironmentallyFriendlyData.contaminationSourceMonitoring.wastewaterWaterDischargeMonitoring.sourcesOfWastewaterPollution
+                            }}
+                        </b>
+                    </div>
+                    <div class="text-style">废水污染源</div>
+                </div>
+            </div>
+            <div class="square-box d-flex is-justify-space-between">
+                <div class="icon-style">
+                    <img :src="iconImg5" alt="">
+                </div>
+                <div>
+                    <div>
+                        <b>
+                            {{
+                                smartAndEnvironmentallyFriendlyData.contaminationSourceMonitoring.wastewaterWaterDischargeMonitoring.totalEmissions
+                            }}
+                        </b>
+                    </div>
+                    <div class="text-style">年排放量(m³)</div>
+                </div>
+            </div>
+            <div class="square-box d-flex is-justify-space-between">
+                <div class="icon-style">
+                    <img :src="iconImg6" alt="">
+                </div>
+                <div>
+                    <div>
+                        <b>
+                            {{
+                                smartAndEnvironmentallyFriendlyData.contaminationSourceMonitoring.wastewaterWaterDischargeMonitoring.numberOfTimesEmissionsExceedStandards
+                            }}
+                        </b>
+                    </div>
+                    <div class="text-style">超标次数</div>
+                </div>
+            </div>
+            <div class="square-box d-flex is-justify-space-between">
+                <div class="icon-style">
+                    <img :src="iconImg7" alt="">
+                </div>
+                <div>
+                    <div>
+                        <b>
+                            {{
+                                smartAndEnvironmentallyFriendlyData.contaminationSourceMonitoring.cleanSewerDischargeMonitoring.pollutionSources
+                            }}
+                        </b>
+                    </div>
+                    <div class="text-style">清下水监测点</div>
+                </div>
+            </div>
+            <div class="square-box d-flex is-justify-space-between">
+                <div class="icon-style">
+                    <img :src="iconImg8" alt="">
+                </div>
+                <div>
+                    <div>
+                        <b>
+                            {{
+                                smartAndEnvironmentallyFriendlyData.contaminationSourceMonitoring.cleanSewerDischargeMonitoring.totalEmissions
+                            }}
+                        </b>
+                    </div>
+                    <div class="text-style">年排放量(m³)</div>
+                </div>
+            </div>
+            <div class="square-box d-flex is-justify-space-between">
+                <div class="icon-style">
+                    <img :src="iconImg9" alt="">
+                </div>
+                <div>
+                    <div>
+                        <b>
+                            {{
+                                smartAndEnvironmentallyFriendlyData.contaminationSourceMonitoring.cleanSewerDischargeMonitoring.numberOfTimesEmissionsExceedStandards
+                            }}
+                        </b>
+                    </div>
+                    <div class="text-style">超标次数</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="box-content margin-top-20">
+        <title-component :imgSrc="imgSrc">
+            污染物监测
+        </title-component>
+        <div class="d-flex flex-wrap is-justify-start cycle-box">
+            <div class="right-cycle-box-con" :key="k"
+                 v-for="(v,k) in smartAndEnvironmentallyFriendlyData.characteristicContaminants">
+                <div class="right-cycle-box">
+                    <div :style="{color:changeColor(v)}" class="con-style-top">{{ v }}%
+                    </div>
+                    <div class="con-style-bottom">
+                        <div :class="k"></div>
+                    </div>
+                </div>
+                <div :title="nameMapping[k]" class="word-ellipsis">{{ nameMapping[k] }}</div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/components/env/index/right/envIndexRight.component.ts b/src/components/env/index/right/envIndexRight.component.ts
new file mode 100644
index 0000000..eee143a
--- /dev/null
+++ b/src/components/env/index/right/envIndexRight.component.ts
@@ -0,0 +1,317 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./envIndexRight.component.html"
+import {lineChartData} from "./chartData";
+import {smartAndEnvironmentallyFriendlyData} from '@/dataDemo/smartAndEnvironmentallyFriendlyData';
+import TitleComponent from "@/components/title.component.vue"
+import * as echarts from 'echarts';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class EnvIndexRightComponent extends Vue {
+    //标题图片
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //定时器
+    timer: any = null;
+    //折线图数据
+    option: any = {}
+    //折线图实例
+    lineChart: any = {}
+    //右侧小图标 start
+    iconImg1 = require("@/assets/img/env/gas.png");
+    iconImg2 = require("@/assets/img/env/gas-year.png");
+    iconImg3 = require("@/assets/img/env/count.png");
+    iconImg4 = require("@/assets/img/env/waste.png");
+    iconImg5 = require("@/assets/img/env/waste-year.png");
+    iconImg6 = require("@/assets/img/env/count.png");
+    iconImg7 = require("@/assets/img/env/clean.png");
+    iconImg8 = require("@/assets/img/env/clean-year.png");
+    iconImg9 = require("@/assets/img/env/clean-count.png");
+    //右侧图标 end
+
+    //右侧mock数据
+    smartAndEnvironmentallyFriendlyData = JSON.parse(JSON.stringify(smartAndEnvironmentallyFriendlyData))
+    //获取图表实例
+    getEcharts(e,type) {
+        this[type] = e
+        this.initLineData()
+    }
+    //图表自适应
+    resize() {
+        setTimeout(() => {
+            this.lineChart.resize();
+        }, 300)
+    }
+    //名称map表
+    nameMapping = {
+        "formaldehydeExcessRate": "甲醛超标率",//甲醛超标率
+        "methanolExceedance": "甲醇超标率",//甲醇超标率
+        // "chlorineGasExcessRate": "氯气超标率",//氯气超标率
+        "NOExceedance": "一氧化氮超标率",//一氧化氮超标率
+        // "HFExceedance": "氟化氢超标率",//氟化氢超标率
+        "HCLExceedance": "氯化氢超标率",//氯化氢超标率
+        "BenzeneExceedance": "苯系物超标率",//苯系物超标率
+        "EthanolExceedance": "乙醇超标率",//乙醇超标率
+        // "bromineGasExcessRate": "溴气超标率",//溴气超标率
+        // "THFExceedance": "四氢呋喃超标率",//四氢呋喃超标率
+        // "EpichlorohydrinExceedance": "环氧氯丙烷超标率",//环氧氯丙烷超标率
+        //        "HBRExceedance": "HBR超标率",//HBR超标率
+        // "AcrylonitrileExceedance": "丙烯腈超标率",//丙烯腈超标率
+
+    }
+    //点击radio换图表数据
+    changeData(val) {
+        switch (val) {
+            case '大气质量':
+                this.initLineData(smartAndEnvironmentallyFriendlyData.atmosphericEnvironmentalQuality.data)
+                break;
+            case '水体质量':
+                this.initLineData(smartAndEnvironmentallyFriendlyData.waterQuality.data)
+                break;
+            case '土壤质量':
+                this.initLineData(smartAndEnvironmentallyFriendlyData.soilEnvironmentalQuality.data)
+                break;
+            default:
+                break
+        }
+    }
+
+    autoIndex = 0;
+    timerForLineData: any = null;
+
+    //自动切换line图表数据
+    autoChangeLineData() {
+        this.timerForLineData = setInterval(() => {
+            const arr: string[] = [
+                '大气质量',
+                '水体质量',
+                '土壤质量'
+            ]
+            if (this.autoIndex > 2) {
+                this.autoIndex = 0
+            }
+            this.lineChartType = arr[this.autoIndex];
+            this.changeData(arr[this.autoIndex])
+            this.autoIndex++
+        }, 5000)
+    }
+
+    lineChartType = '大气质量';
+    flag = '';
+    flagName = ''
+
+    //空气质量发生改变后更改样式
+    changeFlag(aqi) {
+        if (aqi <= 50) {
+            this.flag = 'green'
+            this.flagName = ''
+        } else if (aqi >= 51 && aqi <= 100) {
+
+            this.flag = 'yellow'
+            this.flagName = ''
+        } else if (aqi >= 101 && aqi <= 150) {
+
+            this.flag = 'orange'
+            this.flagName = ''
+        } else if (aqi >= 151 && aqi <= 200) {
+
+            this.flag = 'red'
+            this.flagName = ''
+        } else if (aqi >= 201 && aqi <= 300) {
+
+            this.flag = 'blue'
+            this.flagName = '蓝色预警'
+        } else if (aqi >= 301 && aqi <= 400) {
+
+            this.flag = 'yellow'
+            this.flagName = '黄色预警'
+        } else if (aqi >= 401 && aqi <= 500) {
+            this.flag = 'orange'
+            this.flagName = '橙色预警'
+        } else if (aqi >= 501) {
+            this.flag = 'red'
+            this.flagName = '红色预警'
+        }
+    }
+
+    //空气质量判断显示样式
+    get degreeOfContamination() {
+        // eslint-disable-next-line prefer-const
+        let msg = '', {aqi} = this.smartAndEnvironmentallyFriendlyData.atmosphericEnvironmentalQuality;
+        if (aqi <= 50) {
+            msg = "优"
+            this.changeFlag(aqi)
+        } else if (aqi >= 51 && aqi <= 100) {
+            msg = "良"
+            this.changeFlag(aqi)
+        } else if (aqi >= 101 && aqi <= 150) {
+            msg = "轻度污染"
+            this.changeFlag(aqi)
+        } else if (aqi >= 151 && aqi <= 200) {
+            msg = "中度污染"
+            this.changeFlag(aqi)
+        } else if (aqi >= 201 && aqi <= 300) {
+            msg = "重度污染"
+            this.changeFlag(aqi)
+        } else if (aqi >= 301 && aqi <= 400) {
+            msg = "严重污染"
+            this.changeFlag(aqi)
+        } else if (aqi >= 401 && aqi <= 500) {
+            msg = "严重污染"
+            this.changeFlag(aqi)
+        } else if (aqi >= 501) {
+            msg = "严重污染"
+            this.changeFlag(aqi)
+        }
+        return msg;
+    }
+    //水环境质量判断显示样式
+    get waterFlag() {
+        const index = this.smartAndEnvironmentallyFriendlyData.waterQuality.comprehensivePollutionIndex;
+        let msg = {};
+        if (index <= 0.2) {
+            msg = {
+                name: '好',
+                class: 'green'
+            }
+        } else if (index > 0.2 && index <= 0.4) {
+            msg = {
+                name: '较好',
+                class: 'green'
+            }
+        } else if (index > 0.41 && index <= 0.7) {
+            msg = {
+                name: '轻度污染',
+                class: 'orange'
+            }
+        } else if (index > 0.7 && index <= 1) {
+            msg = {
+                name: '中度污染',
+                class: 'orange'
+            }
+        } else if (index > 1.01 && index <= 2) {
+            msg = {
+                name: '重污染',
+                class: 'zi'
+            }
+        } else if (index > 2) {
+            msg = {
+                name: '严重污染',
+                class: 'red'
+            }
+        }
+
+        return msg
+    }
+    //土壤质量变化判断显示样式
+    get soliFlag() {
+        const index = this.smartAndEnvironmentallyFriendlyData.soilEnvironmentalQuality.NemeroPollutionIndex;
+        let msg = {};
+        if (index <= 0.7) {
+            msg = {
+                name: '清洁',
+                class: 'green'
+            }
+        } else if (index > 0.7 && index <= 1.0) {
+            msg = {
+                name: '尚清洁',
+                class: 'yellow'
+            }
+        } else if (index > 1 && index <= 2) {
+            msg = {
+                name: '轻度污染',
+                class: 'orange'
+            }
+        } else if (index > 2 && index <= 3) {
+            msg = {
+                name: '中度污染',
+                class: 'zi'
+            }
+        } else if (index > 3) {
+            msg = {
+                name: '重污染',
+                class: 'red'
+            }
+        }
+
+        return msg
+    }
+    //随机加减数
+    randomNum() {
+        const num = this.getRandomInt(4, 20)
+       this.randomPulution(num)
+
+    }
+    //随机计算污染源数值变动
+    randomPulution(num){
+        this.smartAndEnvironmentallyFriendlyData
+            .contaminationSourceMonitoring
+            .enterpriseExhaustEmissionMonitoring
+            .totalExhaustEmissions += num
+        this.smartAndEnvironmentallyFriendlyData
+            .contaminationSourceMonitoring
+            .wastewaterWaterDischargeMonitoring
+            .totalEmissions += num
+        this.smartAndEnvironmentallyFriendlyData
+            .contaminationSourceMonitoring
+            .cleanSewerDischargeMonitoring
+            .totalEmissions += num
+    }
+    //获取范围内随机数
+    getRandomInt(min: number, max: number) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
+    }
+
+    mounted() {
+        this.timer = setInterval(()=>{
+            this.randomNum()
+        }, 10000)
+        this.autoChangeLineData()
+        window.addEventListener("resize", this.resize);
+    }
+    //初始化line图表
+    initLineData(inData = []) {
+        let newData: any[] = []
+        if (inData.length === 0) {
+            newData = smartAndEnvironmentallyFriendlyData.atmosphericEnvironmentalQuality.data
+        } else {
+            newData = inData
+        }
+        const xAxisData = (newData as any).data?.map(item => item.date);
+        xAxisData.splice(0, xAxisData.length - 7)
+        const data = (newData as any).data?.map(item => item.value);
+        data.splice(0, data.length - 7)
+        this.option = lineChartData(data, xAxisData, echarts)
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+        clearInterval(this.timerForLineData)
+    }
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+    //改变污染物监测颜色
+    changeColor(val){
+        if (Number(val)<=30){
+            return '#ffffff'
+        }else if(Number(val)>30 && Number(val)<=50){
+            return '#F2A183'
+        }else {
+            return '#DD7171'
+        }
+
+    }
+}
+
diff --git a/src/components/env/soil/left/chartData.js b/src/components/env/soil/left/chartData.js
new file mode 100644
index 0000000..c4c7aae
--- /dev/null
+++ b/src/components/env/soil/left/chartData.js
@@ -0,0 +1,514 @@
+export const pieChartData = {
+    title: {
+        text: '75%',
+        subtext: '优良率',
+        itemGap: 5,
+        x: 105,
+        y: '37%',
+        textStyle: {
+            fontSize: 30,
+            fontWeight: '600',
+            fontStyle: 'italic',
+            color: '#B8ECFF',
+        },
+        subtextStyle: {
+            fontSize: 17,
+            fontWeight: 'normal',
+            align: "center",
+            color: '#5998FB'
+        },
+    },
+    tooltip: {
+        trigger: 'item'
+    },
+    legend: {
+        orient: 'vertical',
+        right: '0%',
+        top: 'bottom',
+        height: 100,
+        itemWidth: 10,
+        itemHeight: 10,
+        data: [
+            {value: 25, name: '断路'},
+            {value: 25, name: '动土'},
+            {value: 15, name: '受限空间'},
+            {value: 20, name: '高处'},
+            {value: 15, name: '临时用电'}
+        ],
+        textStyle: {
+            color: '#D4E5FF',
+            padding: [5, 10, 5, 10]
+        },
+    },
+    series: [
+        {
+            type: 'pie',
+            selectedMode: 'single',
+            selectedOffset: 10,
+            left: -50,
+            radius: [50, 75],
+            data: [
+                {value: 25, name: '断路'},
+                {value: 1, name: ''},
+                {value: 25, name: '动土'},
+                {value: 1, name: ''},
+                {value: 15, name: '受限空间'},
+                {value: 1, name: ''},
+                {value: 20, name: '高处'},
+                {value: 1, name: ''},
+                {value: 15, name: '临时用电'},
+                {value: 1, name: ''},
+            ],
+            color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null],
+            emphasis: {
+                itemStyle: {
+                    // shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    // borderWidth:5,
+                    // borderColor:"rgba(255,255,255,0)",
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            itemStyle: {},
+            select: {
+                itemStyle: {}
+            },
+            labelLine: {
+                show: false
+            },
+            label: {
+                show: false
+            },
+            tooltip: {
+                backgroundColor: 'rgba(0,0,0,0.4)',
+                textStyle: {
+                    color: '#ffffff'
+                }
+
+            }
+        }
+    ],
+    animationDuration: 0,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear'
+}
+
+// 修改弹框内容用到的方法
+function replaceHtmlWord(str) {
+    return str.replace("NO2", "NO<sub>2</sub>")
+        .replace("SO2", "SO<sub>2</sub>")
+        .replace("O3", "O<sub>3</sub>")
+    // .replace("PM10", "PM<sub>10</sub>")
+    // .replace("PM2.5", "PM<sub>2.5</sub>")
+
+}
+
+// 修改图例文字用到的方法
+function replaceWords(str) {
+    return str.replace("NO2", "NO{sub|2}")
+        .replace("SO2", "SO{sub|2}")
+        .replace("O3", "O{sub|3}")
+    // .replace("PM2.5", "PM{sub|2.5}")
+    // .replace("PM10", "PM{sub|10}");
+}
+
+export const soilLineChartData = function (data, xAxisData, legend,selected) {
+    return {
+        color: ['#B8ECFF','#7FB0FF', '#FFFFFF','#FADFA4','#F9BAFF', '#FFB7B7', '#C9FFD7', '#947FEA'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: xAxisData
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: data,
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 40,
+            x2: 22,
+            y2: 20,
+        },
+        legend: {
+            data: legend,
+            top: 0,
+            padding: [2, 2],
+            formatter: function (name) {
+                return replaceWords(name);
+            },
+            icon:'circle',
+            align:'left',
+            itemGap:10,
+            width: "100%",
+            itemWidth:10,
+            selected,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 8,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        }
+        /*[{
+            data: legend.slice(0,4),
+            top: 0,
+            padding: [2, 2],
+            formatter: function (name) {
+                return replaceWords(name);
+            },
+            icon:'circle',
+            align:'left',
+            itemGap:20,
+            width: "100%",
+            itemWidth:10,
+            selected,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        },{
+            data: legend.slice(3,legend.length),
+            top: 20,
+            padding: [2, 2],
+            formatter: function (name) {
+                return replaceWords(name);
+            },
+            icon:'circle',
+            align:'left',
+            itemGap:20,
+            width: "80%",
+            itemWidth:10,
+            selected,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        }]*/,
+    }
+}
+export const soilBarChartData = function (data, xAxisData,legend,$echarts) {
+
+    let barTopColor = [
+        "#B8ECFF",
+        "#7FB0FF",
+        "#E8E8E8",
+        "#FADFA4",
+        '#F9BAFF',
+        '#FFB7B7',
+        '#C9FFD7',
+        '#947FEA',
+    ];
+    let barBottomColor = [
+        "#7DBBD2",
+        "#5485D5",
+        "#999999",
+        '#CFB376',
+        '#A576A9',
+        '#BF8888',
+        '#82AF8E',
+        '#60519C',
+    ];
+    let data1 = [
+        [-0.75,0,0,0,0,0],
+        [0,0.4,0,0,0,0],
+        [0,0,-0.4,0,0,0],
+        [0,0,0,-0.6,0,0],
+        [0,0,0,0,0.6,0],
+        [0,0,0,0,0,0.8,0,0],
+        [0,0,0,0,0,0,-0.75,0],
+        [0,0,0,0,0,0,0,0.5],
+    ]
+
+    let seriseData = data.map((item,i)=>{
+        return {
+            data: data1[i],
+            type: 'bar',
+            name:item.name,
+            itemStyle: {
+                borderRadius:4,
+                color: function (params) {
+                    return new $echarts.graphic.LinearGradient(
+                        0, 0, 0, 1,
+                        [{
+                            offset: 0,
+                            color: barTopColor[i]
+                        },
+                            {
+                                offset: 1,
+                                color: barBottomColor[i]
+                            }
+                        ]
+                    )
+                },
+            },
+            barWidth: 8,
+            barGap:'-100%',
+        }
+    })
+    return {
+        color:[
+            "#B8ECFF",
+            "#7FB0FF",
+            "#E8E8E8",
+            "#FADFA4",
+            '#F9BAFF',
+            '#FFB7B7'
+        ],
+        xAxis: {
+            name:"",
+            type: 'category',
+            data: xAxisData,
+            // 设置文本样式
+            axisLabel:{
+                show:true,
+                interval:0,
+                formatter:function(name){
+                    return replaceWords(name);
+                },
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                margin: 14,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color:"#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                },
+                rotate: 0,
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            nameTextStyle:{
+                align:'left'
+            },
+            nameGap:20,
+            animationDuration: 300,
+            animationDurationUpdate: 300,
+        },
+        yAxis: {
+            type: 'value',
+            name:"",
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: seriseData,
+        label: {
+            // show: true
+        },
+        tooltip: {
+            show: true,
+            alwaysShowContent: false,
+            trigger: 'item',
+            backgroundColor: 'rgba(0,0,0,0.4)',
+            textStyle: {
+                color: '#ffffff'
+            }
+        }, grid: {
+            x: 30,
+            y: 40,
+            x2: 22,
+            y2: 20,
+        },
+        legend: {
+            show:true,
+            data: legend,
+            top: 0,
+            formatter: function (name) {
+                return replaceWords(name);
+            },
+            icon:'circle',
+            itemGap:10,
+            itemWidth:10,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        },
+        animationDuration: 0,
+        animationDurationUpdate: 3000,
+        animationEasing: 'linear',
+        animationEasingUpdate: 'linear'
+    }
+}
diff --git a/src/components/env/soil/left/soilLeft.component.html b/src/components/env/soil/left/soilLeft.component.html
new file mode 100644
index 0000000..c729398
--- /dev/null
+++ b/src/components/env/soil/left/soilLeft.component.html
@@ -0,0 +1,68 @@
+<div class="env-left">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            土壤污染物年平均指标
+        </title-component>
+       <div class="card-box">
+           <div class="card-box-item-4">
+               <div class="card-box-item-top">62</div>
+               <div class="card-box-item-bottom">
+                   PH
+               </div>
+           </div> <div class="card-box-item-4">
+               <div class="card-box-item-top">75%</div>
+               <div class="card-box-item-bottom">
+                   PAHs
+               </div>
+           </div> <div class="card-box-item-4">
+               <div class="card-box-item-top">45</div>
+               <div class="card-box-item-bottom">
+                   SVOC
+               </div>
+           </div> <div class="card-box-item-4">
+               <div class="card-box-item-top">42</div>
+               <div class="card-box-item-bottom">
+                   VOC
+               </div>
+           </div> <div class="card-box-item-4">
+               <div class="card-box-item-top">69</div>
+               <div class="card-box-item-bottom">
+                   镉
+               </div>
+           </div> <div class="card-box-item-4">
+               <div class="card-box-item-top">27%</div>
+               <div class="card-box-item-bottom">
+                   汞
+               </div>
+           </div><div class="card-box-item-4">
+               <div class="card-box-item-top">15</div>
+               <div class="card-box-item-bottom">
+                   砷
+               </div>
+           </div><div class="card-box-item-4">
+               <div class="card-box-item-top">27</div>
+               <div class="card-box-item-bottom">
+                   铅
+               </div>
+           </div>
+       </div>
+    </div>
+    <div class="box-content margin-top-50">
+        <title-component :imgSrc="imgSrc">
+            土壤污染物数值变化趋势
+        </title-component>
+        <div class="radio-style radio-style-two-btns">
+            <el-radio-group @change="changeData" v-model="lineChartType">
+                <el-radio-button label="小时平均"></el-radio-button>
+                <el-radio-button label="日平均"></el-radio-button>
+            </el-radio-group>
+        </div>
+        <hbt-echarts className="line-chart-air" :options="option" @onChartInit="getEcharts($event,'line')"></hbt-echarts>
+    </div>
+    <div class="box-content margin-top-50">
+        <title-component :imgSrc="imgSrc">
+            土壤污染指数环比
+        </title-component>
+        <hbt-echarts className="bar-chart-air margin-top-23" :options="barChart" @onChartInit="getEcharts($event,'bar')"></hbt-echarts>
+    </div>
+</div>
diff --git a/src/components/env/soil/left/soilLeft.component.ts b/src/components/env/soil/left/soilLeft.component.ts
new file mode 100644
index 0000000..a480ff5
--- /dev/null
+++ b/src/components/env/soil/left/soilLeft.component.ts
@@ -0,0 +1,167 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./soilLeft.component.html"
+import {pieChartData, soilLineChartData, soilBarChartData} from "./chartData";
+import * as echarts from "echarts";
+
+import TitleComponent from "@/components/title.component.vue"
+import WarningListComponent from "@/components/warningList.component.vue"
+import {
+    yearData,
+    dataForSoilDay,
+    dataForSoilHour,
+    dataForSoilHour1,
+    top10,
+    data3,
+    dataForBar,
+    airDetail
+} from '@/dataDemo/mockData';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        WarningListComponent
+    },
+})
+export default class SoilLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //定时器设置
+    timer: any = null;
+    //土壤污染物数值变化趋势图表数据项
+    option: any = {}
+    //土壤污染指数环比图表数据项
+    barChart: any = {}
+    //土壤污染物数值变化趋势图实例
+    line: any = {}
+    //土壤污染指数环比实例
+    bar: any = {}
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.line.resize()
+            this.bar.resize()
+        }, 300)
+    }
+    //获取图表实例
+    getEcharts(e,type){
+        this[type] = e
+    }
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+    //设置土壤污染物数值变化趋势默认选中项
+    lineChartType = '小时平均'
+    //土壤污染物数值变化趋势切换小时统计和日统计
+    changeData(val) {
+        this.selectIndex = 0
+        if (val === '小时平均') {
+            this.initLineData(dataForSoilHour)
+        } else {
+            this.initLineData(dataForSoilDay)
+        }
+    }
+    //初始化土壤污染物数值变化趋势图表数据
+    initLineData(datas:any = '') {
+        let temp: any = []
+        if (datas>0) {
+            temp = JSON.parse(JSON.stringify(datas))
+        } else {
+            temp = JSON.parse(JSON.stringify(dataForSoilHour))
+        }
+
+        const xAxisData = temp.data[0].dataList?.map(item => item.date);
+        const data = temp.data.map(item => {
+            item.data = item.dataList?.map(its => its.value)
+            return item
+        });
+        const legend = temp.data.map(item => item.name)
+        const selected = {};
+        legend.forEach((item, i) => {
+            selected[item] = i === 0;
+        })
+        this.option = soilLineChartData(data, xAxisData, legend, selected)
+    }
+    //初始化土壤污染指数环比图表数据
+    iniBarData() {
+        const temp = JSON.parse(JSON.stringify(data3))
+        const xAxisData = temp.data?.map(item => item.type);
+        const data = temp.data;
+        const legend = temp.data?.map(item => item.type)
+        this.barChart = soilBarChartData(data, xAxisData, legend, echarts)
+    }
+    run() {
+        const temp = JSON.parse(JSON.stringify(this.barChart))
+        const data = temp.series;
+        for (var i = 0; i < data.length; ++i) {
+            for (let j = 0; j < data[i].data.length; j++) {
+                if (Math.random() > 0.5) {
+                    data[i] += Math.round(Math.random())/10;
+                } else {
+                    data[i] -= Math.round(Math.random())/10;
+                }
+            }
+
+        }
+        this.bar.setOption({
+            series: [
+                {
+                    type: 'bar',
+                    data
+                }
+            ]
+        });
+    }
+    //默认自动切换图例从第一个开始
+    selectIndex = 0
+    //定时器切换显示图例
+    autoRunLine() {
+        const datas = this.lineChartType === '小时平均' ? dataForSoilHour : dataForSoilDay;
+        const temp = JSON.parse(JSON.stringify(datas))
+        const xAxisData = temp.data[0].dataList?.map(item => item.date);
+        const data = temp.data.map(item => {
+            item.data = item.dataList?.map(its => its.value)
+            return item
+        });
+        const legend = temp.data.map(item => item.name)
+        const selected = {};
+        legend.forEach((item, i) => {
+            selected[item] = i === this.selectIndex;
+        })
+        this.option = soilLineChartData(data, xAxisData, legend, selected)
+    }
+    //获取随机整数
+    getRandomInt(min: number, max: number) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
+    }
+
+    mounted() {
+        this.initLineData()
+        this.iniBarData()
+        this.timer = setInterval(() => {
+            if (this.selectIndex > 5) {
+                this.selectIndex = 0
+            }
+            this.autoRunLine()
+            this.selectIndex++
+            // this.run()
+        }, 3000)
+        window.addEventListener("resize", this.resize);
+
+
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+}
+
diff --git a/src/components/env/soil/right/chartData.js b/src/components/env/soil/right/chartData.js
new file mode 100644
index 0000000..413c780
--- /dev/null
+++ b/src/components/env/soil/right/chartData.js
@@ -0,0 +1,234 @@
+export const pieChartData =  function () {
+    return {
+        title: {
+            text: '75%',
+            subtext: '优良率',
+            itemGap: 5,
+            x: '40%',
+            y: '40%',
+            textAlign:'center',
+            textStyle: {
+                fontSize: 28,
+                fontWeight: '600',
+                fontStyle: 'italic',
+                color: '#B8ECFF',
+            },
+            subtextStyle: {
+                fontSize: 10,
+                fontWeight: 'normal',
+                align: "center",
+                color: '#E8E8E8'
+            },
+        },
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: 'vertical',
+            right: '0%',
+            top: 'bottom',
+            height:100,
+            itemWidth: 10,
+            itemHeight: 10,
+            data: [
+                {value: 49, name: '优质量'},
+                {value: 24, name: '良质量'},
+                {value: 24, name: '其他质量'},
+            ],
+            textStyle: {
+                color: '#D4E5FF',
+                padding: [5, 10, 5, 10]
+            },
+        },
+        series: [
+            {
+                type: 'pie',
+                selectedMode: 'single',
+                selectedOffset: 10,
+                left:-50,
+                radius: [55, 65],
+                data: [
+                    {value: 49, name: '优质量'},
+                    {value: 1, name: ''},
+                    {value: 24, name: '良质量'},
+                    {value: 1, name: ''},
+                    {value: 24, name: '其他质量'},
+                    {value: 1, name: ''},
+                ],
+                color: ['#B8ECFF', null, '#FADFA4', null, '#7FB0FF', null],
+                emphasis: {
+                    itemStyle: {
+                        // shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        // borderWidth:5,
+                        // borderColor:"rgba(255,255,255,0)",
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                },
+                itemStyle: {},
+                select: {
+                    itemStyle: {}
+                },
+                labelLine: {
+                    show: false
+                },
+                label: {
+                    show: false
+                },
+                tooltip:{
+                    backgroundColor:'rgba(0,0,0,0.4)',
+                    textStyle:{
+                        color:'#ffffff'
+                    }
+
+                }
+            }
+        ],
+        animationDuration: 0,
+        animationDurationUpdate: 3000,
+        animationEasing: 'linear',
+        animationEasingUpdate: 'linear'
+    }
+}
+
+
+export const barChartData = function (datas,$echarts = {}){
+
+    const yData = datas.map(item=>item.name);
+    let data = datas;
+    data.sort((a, b) => b - a);
+    let bgData = datas.map(item=>item.value)
+    let max = Math.max.apply(null, bgData);
+    max = max + 30;
+    let getMax = [];
+    for (let i = 0; i < yData.length; i++) {
+        let temp = JSON.parse(JSON.stringify(datas[i]))
+        temp.value = max
+        getMax.push(temp);
+    }
+
+    return {
+        tooltip: {
+            show:false,
+            trigger: 'axis',
+            axisPointer: {
+                type: 'none',
+            },
+            formatter: function (params) {
+                return params[0].name + ' : ' + params[0].value;
+            },
+        },
+        legend: {
+            show:false,
+            right: '25%',
+            top: '0%',
+            itemWidth: 10,
+            itemHeight: 10,
+            data: [
+                '超标告警',
+                '其他报警'
+            ],
+            textStyle: {
+                color: '#D4E5FF',
+                padding: [5, 10, 5, 10]
+            },
+        },
+        xAxis: {
+            show: false,
+            type: 'value',
+        },
+        grid: {
+            right: '12%',
+            left: '1%',
+            top: '6%',
+            bottom: '1%',
+        },
+        yAxis: [
+            {
+                type: 'category',
+                inverse: true,
+                offset: -8,
+                axisLabel: {
+                    show: true,
+                    align: 'left',
+                    verticalAlign:'bottom',
+                    lineHeight: 36,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '12',
+                    },
+                },
+                splitLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                },
+                data: yData,
+            },
+            {
+                type: 'category',
+                inverse: true,
+                offset: 0,
+                axisTick: 'none',
+                axisLine: 'none',
+                show: true,
+                axisLabel: {
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '14',
+                    },
+                },
+                data: data,
+            },
+        ],
+        series: [
+            {
+                name: '',
+                type: 'bar',
+                stack: 'user',
+                zlevel: 1,
+                itemStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 0,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: '#7FB0FF', //  0%  处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#5485D5', //  100%  处的颜色
+                                },
+                            ],
+                            global: false, //  缺省为  false
+                        },
+                    },
+                },
+                barWidth: 10,
+                data: data,
+            },
+            {
+                name: '背景',
+                type: 'bar',
+                barWidth: 10,
+                barGap: '-100%',
+                data: getMax,
+                itemStyle: {
+                    color: 'rgba(21,36,72,0.5)',
+                },
+            },
+        ],
+    };
+
+
+
+}
diff --git a/src/components/env/soil/right/soilRight.component.html b/src/components/env/soil/right/soilRight.component.html
new file mode 100644
index 0000000..f830edd
--- /dev/null
+++ b/src/components/env/soil/right/soilRight.component.html
@@ -0,0 +1,9 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            污染指数排行
+        </title-component>
+        <hbt-echarts className="right-bar-chart" :options="barChartData" @onChartInit="getEcharts($event,'bar')"></hbt-echarts>
+    </div>
+
+</div>
diff --git a/src/components/env/soil/right/soilRight.component.ts b/src/components/env/soil/right/soilRight.component.ts
new file mode 100644
index 0000000..ff66b37
--- /dev/null
+++ b/src/components/env/soil/right/soilRight.component.ts
@@ -0,0 +1,90 @@
+import {Component, Emit, Vue} from 'vue-property-decorator';
+import template from "./soilRight.component.html"
+import {pieChartData, barChartData} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+
+import * as echarts from 'echarts';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class SoilRightComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //柱状图数据
+    barChartData: any = {};
+    //定时器
+    timer: any = null;
+    // 排放达标率数据
+    option: any = {}
+    //柱状图实例
+    bar: any = {}
+    //饼图实例
+    pie: any = {}
+
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        const _this = this;
+        if (type === 'bar'){
+            this.bar.on('click', function (params) {
+                _this.clickBar(params.data)
+            });
+        }
+    }
+    @Emit('clickBar')
+    clickBar(item){
+        console.log(item)
+    }
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.bar.resize()
+        }, 300)
+    }
+
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+    mounted() {
+        /*        this.timer = setInterval(()=>{
+                    this.randomNum()
+                }, 10000)*/
+        this.option = pieChartData()
+        this.barChartData = barChartData(this.groundEnvList,echarts)
+        window.addEventListener("resize", this.resize);
+
+    }
+    get groundEnvList(){
+        return this.$store.state.groundEnvList
+    }
+
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+    //改变污染物监测颜色
+    changeColor(val) {
+        if (Number(val) <= 30) {
+            return '#88E29F'
+        } else if (Number(val) > 30 && Number(val) <= 50) {
+            return '#F2A183'
+        } else {
+            return '#DD7171'
+        }
+
+    }
+}
+
diff --git a/src/components/env/special/left/chartData.js b/src/components/env/special/left/chartData.js
new file mode 100644
index 0000000..cf0bfdc
--- /dev/null
+++ b/src/components/env/special/left/chartData.js
@@ -0,0 +1,508 @@
+export const pieChartData = {
+    title: {
+        text: '75%',
+        subtext: '优良率',
+        itemGap: 5,
+        x: 105,
+        y: '37%',
+        textStyle: {
+            fontSize: 30,
+            fontWeight: '600',
+            fontStyle: 'italic',
+            color: '#B8ECFF',
+        },
+        subtextStyle: {
+            fontSize: 17,
+            fontWeight: 'normal',
+            align: "center",
+            color: '#5998FB'
+        },
+    },
+    tooltip: {
+        trigger: 'item'
+    },
+    legend: {
+        orient: 'vertical',
+        right: '0%',
+        top: 'bottom',
+        height: 100,
+        itemWidth: 10,
+        itemHeight: 10,
+        data: [
+            {value: 25, name: '断路'},
+            {value: 25, name: '动土'},
+            {value: 15, name: '受限空间'},
+            {value: 20, name: '高处'},
+            {value: 15, name: '临时用电'}
+        ],
+        textStyle: {
+            color: '#D4E5FF',
+            padding: [5, 10, 5, 10]
+        },
+    },
+    series: [
+        {
+            type: 'pie',
+            selectedMode: 'single',
+            selectedOffset: 10,
+            left: -50,
+            radius: [50, 75],
+            data: [
+                {value: 25, name: '断路'},
+                {value: 1, name: ''},
+                {value: 25, name: '动土'},
+                {value: 1, name: ''},
+                {value: 15, name: '受限空间'},
+                {value: 1, name: ''},
+                {value: 20, name: '高处'},
+                {value: 1, name: ''},
+                {value: 15, name: '临时用电'},
+                {value: 1, name: ''},
+            ],
+            color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null],
+            emphasis: {
+                itemStyle: {
+                    // shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    // borderWidth:5,
+                    // borderColor:"rgba(255,255,255,0)",
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            itemStyle: {},
+            select: {
+                itemStyle: {}
+            },
+            labelLine: {
+                show: false
+            },
+            label: {
+                show: false
+            },
+            tooltip: {
+                backgroundColor: 'rgba(0,0,0,0.4)',
+                textStyle: {
+                    color: '#ffffff'
+                }
+
+            }
+        }
+    ],
+    animationDuration: 0,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear'
+}
+
+// 修改弹框内容用到的方法
+function replaceHtmlWord(str) {
+    return str.replace("NO2", "NO<sub>2</sub>")
+        .replace("SO2", "SO<sub>2</sub>")
+        .replace("O3", "O<sub>3</sub>")
+    // .replace("PM10", "PM<sub>10</sub>")
+    // .replace("PM2.5", "PM<sub>2.5</sub>")
+
+}
+
+// 修改图例文字用到的方法
+function replaceWords(str) {
+    return str.replace("NO2", "NO{sub|2}")
+        .replace("SO2", "SO{sub|2}")
+        .replace("O3", "O{sub|3}")
+    // .replace("PM2.5", "PM{sub|2.5}")
+    // .replace("PM10", "PM{sub|10}");
+}
+
+export const soilLineChartData = function (data, xAxisData, legend,selected) {
+    return {
+        color: ['#B8ECFF','#7FB0FF', '#FFFFFF','#FADFA4','#F9BAFF', '#FFB7B7', '#C9FFD7', '#947FEA'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: xAxisData
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: data,
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 40,
+            x2: 22,
+            y2: 20,
+        },
+        legend: {
+            data: legend,
+            top: 0,
+            padding: [2, 2],
+            formatter: function (name) {
+                return replaceWords(name);
+            },
+            icon:'circle',
+            align:'left',
+            itemGap:5,
+            width: "100%",
+            itemWidth:10,
+            selected,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 8,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        }
+        /*[{
+            data: legend.slice(0,4),
+            top: 0,
+            padding: [2, 2],
+            formatter: function (name) {
+                return replaceWords(name);
+            },
+            icon:'circle',
+            align:'left',
+            itemGap:20,
+            width: "100%",
+            itemWidth:10,
+            selected,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        },{
+            data: legend.slice(3,legend.length),
+            top: 20,
+            padding: [2, 2],
+            formatter: function (name) {
+                return replaceWords(name);
+            },
+            icon:'circle',
+            align:'left',
+            itemGap:20,
+            width: "80%",
+            itemWidth:10,
+            selected,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        }]*/,
+    }
+}
+export const soilBarChartData = function (data, xAxisData,legend,$echarts) {
+
+    let barTopColor = [
+        "#B8ECFF",
+        "#7FB0FF",
+        "#E8E8E8",
+        "#FADFA4",
+        '#F9BAFF',
+        '#FFB7B7',
+        '#C9FFD7',
+        '#947FEA',
+    ];
+    let barBottomColor = [
+        "#7DBBD2",
+        "#5485D5",
+        "#999999",
+        '#CFB376',
+        '#A576A9',
+        '#BF8888',
+        '#82AF8E',
+        '#60519C',
+    ];
+    let data1 = [
+        [20,0,0,0,0,0],
+        [0,10,0,0,0,0],
+        [0,0,32,0,0,0],
+        [0,0,0,17,0,0],
+        [0,0,0,0,30,0],
+        [0,0,0,0,0,25,0,0],
+        [0,0,0,0,0,0,42,0],
+        [0,0,0,0,0,0,0,30],
+    ]
+
+    let seriseData = data.map((item,i)=>{
+        return {
+            data: data1[i],
+            type: 'bar',
+            name:item.name,
+            itemStyle: {
+                borderRadius:4,
+                color: function (params) {
+                    return new $echarts.graphic.LinearGradient(
+                        0, 0, 0, 1,
+                        [{
+                            offset: 0,
+                            color: barTopColor[i]
+                        },
+                            {
+                                offset: 1,
+                                color: barBottomColor[i]
+                            }
+                        ]
+                    )
+                },
+            },
+            barWidth: 8,
+            barGap:'-100%',
+        }
+    })
+    return {
+        color:[
+            "#B8ECFF",
+            "#7FB0FF",
+            "#E8E8E8",
+            "#FADFA4",
+            '#F9BAFF',
+            '#FFB7B7'
+        ],
+        xAxis: {
+            name:"",
+            type: 'category',
+            data: xAxisData,
+            // 设置文本样式
+            axisLabel:{
+                show:true,
+                interval:0,
+                formatter:function(name){
+                    return replaceWords(name);
+                },
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                margin: 14,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color:"#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                },
+                rotate: 0,
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            nameTextStyle:{
+                align:'left'
+            },
+            nameGap:20
+        },
+        yAxis: {
+            type: 'value',
+            name:"",
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: seriseData,
+        label: {
+            // show: true
+        },
+        tooltip: {
+            show: true,
+            alwaysShowContent: false,
+            trigger: 'item',
+            backgroundColor: 'rgba(0,0,0,0.4)',
+            textStyle: {
+                color: '#ffffff'
+            }
+        }, grid: {
+            x: 30,
+            y: 40,
+            x2: 22,
+            y2: 20,
+        },
+        legend: {
+            show:true,
+            data: legend,
+            top: 0,
+            formatter: function (name) {
+                return replaceWords(name);
+            },
+            icon:'circle',
+            itemGap:5,
+            itemWidth:10,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        },
+    }
+}
diff --git a/src/components/env/special/left/specialLeft.component.html b/src/components/env/special/left/specialLeft.component.html
new file mode 100644
index 0000000..759867a
--- /dev/null
+++ b/src/components/env/special/left/specialLeft.component.html
@@ -0,0 +1,68 @@
+<div class="env-left">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            污染物年平均指标
+        </title-component>
+       <div class="card-box">
+           <div class="card-box-item-4">
+               <div class="card-box-item-top">62</div>
+               <div class="card-box-item-bottom">
+                   甲醛
+               </div>
+           </div> <div class="card-box-item-4">
+               <div class="card-box-item-top">75%</div>
+               <div class="card-box-item-bottom">
+                   甲醇
+               </div>
+           </div> <div class="card-box-item-4">
+               <div class="card-box-item-top">45</div>
+               <div class="card-box-item-bottom">
+                   氯气
+               </div>
+           </div> <div class="card-box-item-4">
+               <div class="card-box-item-top">42</div>
+               <div class="card-box-item-bottom">
+                   NO
+               </div>
+           </div> <div class="card-box-item-4">
+               <div class="card-box-item-top">69</div>
+               <div class="card-box-item-bottom">
+                   HF
+               </div>
+           </div> <div class="card-box-item-4">
+               <div class="card-box-item-top">27%</div>
+               <div class="card-box-item-bottom">
+                   HCL
+               </div>
+           </div><div class="card-box-item-4">
+               <div class="card-box-item-top">15</div>
+               <div class="card-box-item-bottom">
+                   苯系物
+               </div>
+           </div><div class="card-box-item-4">
+               <div class="card-box-item-top">27</div>
+               <div class="card-box-item-bottom">
+                   乙醇
+               </div>
+           </div>
+       </div>
+    </div>
+    <div class="box-content margin-top-50">
+        <title-component :imgSrc="imgSrc">
+            污染物数值变化趋势
+        </title-component>
+        <div class="radio-style radio-style-two-btns">
+            <el-radio-group @change="changeData" v-model="lineChartType">
+                <el-radio-button label="小时平均"></el-radio-button>
+                <el-radio-button label="日平均"></el-radio-button>
+            </el-radio-group>
+        </div>
+        <hbt-echarts className="line-chart-air" :options="option" @onChartInit="getEcharts($event,'line')"></hbt-echarts>
+    </div>
+    <div class="box-content margin-top-50">
+        <title-component :imgSrc="imgSrc">
+            特征污染物超标次数
+        </title-component>
+        <hbt-echarts className="bar-chart-air margin-top-23" :options="barChart" @onChartInit="getEcharts($event,'bar')"></hbt-echarts>
+    </div>
+</div>
diff --git a/src/components/env/special/left/specialLeft.component.ts b/src/components/env/special/left/specialLeft.component.ts
new file mode 100644
index 0000000..6fe5c80
--- /dev/null
+++ b/src/components/env/special/left/specialLeft.component.ts
@@ -0,0 +1,148 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./specialLeft.component.html"
+import {pieChartData, soilLineChartData, soilBarChartData} from "./chartData";
+import * as echarts from "echarts";
+
+import TitleComponent from "@/components/title.component.vue"
+import WarningListComponent from "@/components/warningList.component.vue"
+import {
+    dataForSpecialDay,
+    dataForSpecialHour,
+    data3ForSpecial,
+} from '@/dataDemo/mockData';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        WarningListComponent
+    },
+})
+export default class SpecialLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //定时器设置
+    timer: any = null;
+    //污染物数值变化趋势图表数据项
+    option: any = {}
+    //特征污染物超标次数图表数据项
+    barChart: any = {}
+    //污染物数值变化趋势图实例
+    line: any = {}
+    //特征污染物超标次数实例
+    bar: any = {}
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.line.resize()
+            this.bar.resize()
+        }, 300)
+    }
+    //获取图表实例
+    getEcharts(e,type){
+        this[type] = e
+    }
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+    //设置土壤污染物数值变化趋势默认选中项
+    lineChartType = '小时平均'
+    //土壤污染物数值变化趋势切换小时统计和日统计
+    changeData(val) {
+        this.selectIndex = 0
+        if (val === '小时平均') {
+            this.initLineData(dataForSpecialHour)
+        } else {
+            this.initLineData(dataForSpecialDay)
+        }
+    }
+    //初始化污染物数值变化趋势图表数据
+    initLineData(datas:any = '') {
+        let temp: any = []
+        if (datas) {
+            temp = JSON.parse(JSON.stringify(datas))
+        } else {
+            temp = JSON.parse(JSON.stringify(dataForSpecialHour))
+        }
+
+        const xAxisData = temp.data[0].dataList?.map(item => item.date);
+        const data = temp.data.map(item => {
+            item.data = item.dataList?.map(its => its.value)
+            return item
+        });
+        const legend = temp.data.map(item => item.name)
+        const selected = {};
+        legend.forEach((item, i) => {
+            selected[item] = i === 0;
+        })
+        this.option = soilLineChartData(data, xAxisData, legend, selected)
+    }
+    //初始化特征污染物超标次数图表数据
+    iniBarData() {
+        const temp = JSON.parse(JSON.stringify(data3ForSpecial))
+        const xAxisData = temp.data?.map(item => item.type);
+        const data = temp.data;
+        const legend = temp.data?.map(item => item.type)
+        this.barChart = soilBarChartData(data, xAxisData, legend, echarts)
+    }
+    //默认自动切换图例从第一个开始
+    selectIndex = 0
+    //定时器切换显示图例
+    autoRunLine() {
+        const datas = this.lineChartType === '小时平均' ? dataForSpecialHour : dataForSpecialDay;
+        const temp = JSON.parse(JSON.stringify(datas))
+        const xAxisData = temp.data[0].dataList?.map(item => item.date);
+        const data = temp.data.map(item => {
+            item.data = item.dataList?.map(its => its.value)
+            return item
+        });
+        const legend = temp.data.map(item => item.name)
+        const selected = {};
+        legend.forEach((item, i) => {
+            selected[item] = i === this.selectIndex;
+        })
+        this.option = soilLineChartData(data, xAxisData, legend, selected)
+    }
+    //获取随机整数
+    getRandomInt(min: number, max: number) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
+    }
+
+    mounted() {
+        this.initLineData()
+        this.iniBarData()
+        this.timer = setInterval(() => {
+            if (this.selectIndex > 5) {
+                this.selectIndex = 0
+            }
+            this.autoRunLine()
+            this.selectIndex++
+        }, 3000)
+        window.addEventListener("resize", this.resize);
+
+        /* this.timer = setInterval(()=>{
+              this.dataList = [ {
+                  title:'消防告警',
+                  info:'区域发现黑名单人员了区域发现黑名人预',
+                  time:'2021-05-19 16:03:28',
+                  level:'1',
+                  isNew:true,
+              },...this.dataList]
+          },2000)*/
+
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+}
+
diff --git a/src/components/env/special/right/chartData.js b/src/components/env/special/right/chartData.js
new file mode 100644
index 0000000..413c780
--- /dev/null
+++ b/src/components/env/special/right/chartData.js
@@ -0,0 +1,234 @@
+export const pieChartData =  function () {
+    return {
+        title: {
+            text: '75%',
+            subtext: '优良率',
+            itemGap: 5,
+            x: '40%',
+            y: '40%',
+            textAlign:'center',
+            textStyle: {
+                fontSize: 28,
+                fontWeight: '600',
+                fontStyle: 'italic',
+                color: '#B8ECFF',
+            },
+            subtextStyle: {
+                fontSize: 10,
+                fontWeight: 'normal',
+                align: "center",
+                color: '#E8E8E8'
+            },
+        },
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: 'vertical',
+            right: '0%',
+            top: 'bottom',
+            height:100,
+            itemWidth: 10,
+            itemHeight: 10,
+            data: [
+                {value: 49, name: '优质量'},
+                {value: 24, name: '良质量'},
+                {value: 24, name: '其他质量'},
+            ],
+            textStyle: {
+                color: '#D4E5FF',
+                padding: [5, 10, 5, 10]
+            },
+        },
+        series: [
+            {
+                type: 'pie',
+                selectedMode: 'single',
+                selectedOffset: 10,
+                left:-50,
+                radius: [55, 65],
+                data: [
+                    {value: 49, name: '优质量'},
+                    {value: 1, name: ''},
+                    {value: 24, name: '良质量'},
+                    {value: 1, name: ''},
+                    {value: 24, name: '其他质量'},
+                    {value: 1, name: ''},
+                ],
+                color: ['#B8ECFF', null, '#FADFA4', null, '#7FB0FF', null],
+                emphasis: {
+                    itemStyle: {
+                        // shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        // borderWidth:5,
+                        // borderColor:"rgba(255,255,255,0)",
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                },
+                itemStyle: {},
+                select: {
+                    itemStyle: {}
+                },
+                labelLine: {
+                    show: false
+                },
+                label: {
+                    show: false
+                },
+                tooltip:{
+                    backgroundColor:'rgba(0,0,0,0.4)',
+                    textStyle:{
+                        color:'#ffffff'
+                    }
+
+                }
+            }
+        ],
+        animationDuration: 0,
+        animationDurationUpdate: 3000,
+        animationEasing: 'linear',
+        animationEasingUpdate: 'linear'
+    }
+}
+
+
+export const barChartData = function (datas,$echarts = {}){
+
+    const yData = datas.map(item=>item.name);
+    let data = datas;
+    data.sort((a, b) => b - a);
+    let bgData = datas.map(item=>item.value)
+    let max = Math.max.apply(null, bgData);
+    max = max + 30;
+    let getMax = [];
+    for (let i = 0; i < yData.length; i++) {
+        let temp = JSON.parse(JSON.stringify(datas[i]))
+        temp.value = max
+        getMax.push(temp);
+    }
+
+    return {
+        tooltip: {
+            show:false,
+            trigger: 'axis',
+            axisPointer: {
+                type: 'none',
+            },
+            formatter: function (params) {
+                return params[0].name + ' : ' + params[0].value;
+            },
+        },
+        legend: {
+            show:false,
+            right: '25%',
+            top: '0%',
+            itemWidth: 10,
+            itemHeight: 10,
+            data: [
+                '超标告警',
+                '其他报警'
+            ],
+            textStyle: {
+                color: '#D4E5FF',
+                padding: [5, 10, 5, 10]
+            },
+        },
+        xAxis: {
+            show: false,
+            type: 'value',
+        },
+        grid: {
+            right: '12%',
+            left: '1%',
+            top: '6%',
+            bottom: '1%',
+        },
+        yAxis: [
+            {
+                type: 'category',
+                inverse: true,
+                offset: -8,
+                axisLabel: {
+                    show: true,
+                    align: 'left',
+                    verticalAlign:'bottom',
+                    lineHeight: 36,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '12',
+                    },
+                },
+                splitLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                },
+                data: yData,
+            },
+            {
+                type: 'category',
+                inverse: true,
+                offset: 0,
+                axisTick: 'none',
+                axisLine: 'none',
+                show: true,
+                axisLabel: {
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '14',
+                    },
+                },
+                data: data,
+            },
+        ],
+        series: [
+            {
+                name: '',
+                type: 'bar',
+                stack: 'user',
+                zlevel: 1,
+                itemStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 0,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: '#7FB0FF', //  0%  处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#5485D5', //  100%  处的颜色
+                                },
+                            ],
+                            global: false, //  缺省为  false
+                        },
+                    },
+                },
+                barWidth: 10,
+                data: data,
+            },
+            {
+                name: '背景',
+                type: 'bar',
+                barWidth: 10,
+                barGap: '-100%',
+                data: getMax,
+                itemStyle: {
+                    color: 'rgba(21,36,72,0.5)',
+                },
+            },
+        ],
+    };
+
+
+
+}
diff --git a/src/components/env/special/right/specialRight.component.html b/src/components/env/special/right/specialRight.component.html
new file mode 100644
index 0000000..264309f
--- /dev/null
+++ b/src/components/env/special/right/specialRight.component.html
@@ -0,0 +1,9 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            污染物监测点超标次数
+        </title-component>
+        <hbt-echarts className="right-bar-chart" :options="barChartData" @onChartInit="getEcharts($event,'bar')"></hbt-echarts>
+    </div>
+
+</div>
diff --git a/src/components/env/special/right/specialRight.component.ts b/src/components/env/special/right/specialRight.component.ts
new file mode 100644
index 0000000..bba4da8
--- /dev/null
+++ b/src/components/env/special/right/specialRight.component.ts
@@ -0,0 +1,90 @@
+import {Component, Emit, Vue} from 'vue-property-decorator';
+import template from "./specialRight.component.html"
+import {pieChartData, barChartData} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+
+import * as echarts from 'echarts';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class SpecialRightComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //柱状图数据
+    barChartData: any = {};
+    //定时器
+    timer: any = null;
+    // 排放达标率数据
+    option: any = {}
+    //柱状图实例
+    bar: any = {}
+    //饼图实例
+    pie: any = {}
+
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        const _this = this;
+        if (type === 'bar'){
+            this.bar.on('click', function (params) {
+                _this.clickBar(params.data)
+            });
+        }
+    }
+    @Emit('clickBar')
+    clickBar(item){
+        console.log(item)
+    }
+    get specialEnvList(){
+        return this.$store.state.specialEnvList
+    }
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.bar.resize()
+        }, 300)
+    }
+
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+    mounted() {
+        /*        this.timer = setInterval(()=>{
+                    this.randomNum()
+                }, 10000)*/
+        this.option = pieChartData()
+        this.barChartData = barChartData(this.specialEnvList,echarts)
+        window.addEventListener("resize", this.resize);
+
+    }
+
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+    //改变污染物监测颜色
+    changeColor(val) {
+        if (Number(val) <= 30) {
+            return '#88E29F'
+        } else if (Number(val) > 30 && Number(val) <= 50) {
+            return '#F2A183'
+        } else {
+            return '#DD7171'
+        }
+
+    }
+}
+
diff --git a/src/components/env/waste/left/chartData.js b/src/components/env/waste/left/chartData.js
new file mode 100644
index 0000000..a4787b0
--- /dev/null
+++ b/src/components/env/waste/left/chartData.js
@@ -0,0 +1,183 @@
+
+export const gasBarChartData = function () {
+    const yData = [
+        '榆林煤矿有限公司',
+        '榆林煤矿有限公司A',
+        '榆林煤矿有限公司B',
+        '榆林煤矿有限公司C',
+        '榆林煤矿有限公司D',
+        '榆林煤矿有限公司E',
+        '榆林煤矿有限公司F',
+        '榆林煤矿有限公司G'
+    ];
+    let data = ['500', '400', '360', '300', '270', '200', '180', '150'];
+    data.sort((a, b) => b - a);
+    let max = Math.max.apply(null, data);
+    max = max + 200;
+    let getMax = [];
+    for (let i = 0; i < yData.length; i++) {
+        getMax.push(max);
+    }
+
+    return {
+        tooltip: {
+            show:false,
+            trigger: 'axis',
+            axisPointer: {
+                type: 'none',
+            },
+            formatter: function (params) {
+                return params[0].name + ' : ' + params[0].value;
+            },
+        },
+        legend: {
+            right: '25%',
+            top: '0%',
+            itemWidth: 10,
+            itemHeight: 10,
+            data: [
+                '超标告警',
+                '其他报警'
+            ],
+            textStyle: {
+                color: '#D4E5FF',
+                padding: [5, 10, 5, 10]
+            },
+        },
+        xAxis: {
+            show: false,
+            type: 'value',
+        },
+        grid: {
+            right: '12%',
+            left: '1%',
+            top: '6%',
+            bottom: '1%',
+        },
+        yAxis: [
+            {
+                type: 'category',
+                inverse: true,
+                offset: -8,
+                axisLabel: {
+                    show: true,
+                    align: 'left',
+                    verticalAlign:'bottom',
+                    lineHeight: 36,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '12',
+                    },
+                },
+                splitLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                },
+                data: yData,
+            },
+            {
+                type: 'category',
+                inverse: true,
+                offset: 0,
+                axisTick: 'none',
+                axisLine: 'none',
+                show: true,
+                axisLabel: {
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '14',
+                    },
+                },
+                data: data,
+            },
+        ],
+        series: [
+            {
+                name: '超标告警',
+                type: 'bar',
+                stack: 'user',
+                zlevel: 1,
+                itemStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 0,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: '#7FB0FF', //  0%  处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#5485D5', //  100%  处的颜色
+                                },
+                            ],
+                            global: false, //  缺省为  false
+                        },
+                    },
+                },
+                barWidth: 10,
+                data: data.map((item,i)=>{
+                    return {
+                        value:item,
+                        name:yData[i]
+                    }
+                }),
+            },
+            {
+                name: '其他报警',
+                type: 'bar',
+                stack: 'user',
+                zlevel: 1,
+                itemStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 0,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: '#ACACAC', //  0%  处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#ffffff', //  100%  处的颜色
+                                },
+                            ],
+                            global: false, //  缺省为  false
+                        },
+                    },
+                },
+                barWidth: 10,
+                data: [160,100,130,120,140,120,130,100].map((item,i)=>{
+                    return {
+                        value:item,
+                        name:yData[i]
+                    }
+                }),
+            },
+            {
+                name: '背景',
+                type: 'bar',
+                barWidth: 10,
+                barGap: '-100%',
+                data: getMax,
+                itemStyle: {
+                    color: 'rgba(21,36,72,0.5)',
+                },
+            },
+        ],
+    };
+
+}
diff --git a/src/components/env/waste/left/wasteLeft.component.html b/src/components/env/waste/left/wasteLeft.component.html
new file mode 100644
index 0000000..0c50e88
--- /dev/null
+++ b/src/components/env/waste/left/wasteLeft.component.html
@@ -0,0 +1,15 @@
+<div class="env-left">
+    <div class="box-content flex-0 gas-left-bar-con">
+        <title-component :imgSrc="imgSrc">
+            企业告警排行
+        </title-component>
+        <hbt-echarts className="bar-chart-gas margin-top-23" :options="barChart" @onChartInit="getEcharts($event,'bar')"></hbt-echarts>
+    </div>
+    <div class="box-content margin-top-50">
+        <title-component :imgSrc="imgSrc">
+            告警信息列表
+        </title-component>
+        <warning-list-component class="margin-top-30" @getItem="getItem" :data-list="dataList"></warning-list-component>
+    </div>
+
+</div>
diff --git a/src/components/env/waste/left/wasteLeft.component.ts b/src/components/env/waste/left/wasteLeft.component.ts
new file mode 100644
index 0000000..7af6935
--- /dev/null
+++ b/src/components/env/waste/left/wasteLeft.component.ts
@@ -0,0 +1,102 @@
+import {Component, Emit, Vue} from 'vue-property-decorator';
+import template from "./wasteLeft.component.html"
+import {gasBarChartData} from "./chartData";
+import * as echarts from "echarts";
+
+import TitleComponent from "@/components/title.component.vue"
+import WarningListComponent from "@/components/warningList.component.vue"
+
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        WarningListComponent
+    },
+})
+export default class WasteLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //企业告警排行图表实例
+    bar: any = {}
+
+
+    //企业告警排行图表数据
+    private barChart: any = {};
+    //报警列表
+    get dataList(){
+        return this.$store.state.warningList
+    }
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        const self = this;
+        // getZr()
+        this[type].on('click',function(params){
+            console.log(params)
+            const company = self.$store.state.companyList
+            const index = Math.floor(Math.random()*10)%2
+            const companyObj = company[index]
+            companyObj.name = params.data.name
+            self.getCompany(companyObj)
+        })
+    }
+
+    //初始化特征污染物超标次数图表数据
+    iniBarData() {
+        this.barChart = gasBarChartData()
+    }
+
+    //点击告警信息
+    @Emit()
+    getItem(item) {
+        console.log('item', item)
+    }
+    //获取公司信息
+    @Emit('getCompany')
+    getCompany(item) {
+        console.log('item', item)
+    }
+
+    timer: any = {}
+
+    mounted() {
+        this.iniBarData()
+        //动态插入数据
+      /*  this.timer = setInterval(() => {
+            this.scrollList()
+        }, 6000)*/
+    }
+
+    count = 1
+
+    //告警信息列表滚动
+    scrollList() {
+        this.dataList.unshift({
+            title: '消防告警' + this.count,
+            info: '区域发现黑名单人员了区域发现黑名人预',
+            time: '2021-05-19 16:03:28',
+            level: this.count % 3,
+            id: Math.random(),
+        })
+        this.count++;
+       /* this.$nextTick(() => {
+            const dom: any = document.querySelector('.warning-list-box')
+            dom.classList.remove('animate__fadeInLeft')
+            setTimeout(() => {
+                dom.classList.add('animate__fadeInLeft')
+            },)
+        })*/
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+}
+
diff --git a/src/components/env/waste/right/chartData.js b/src/components/env/waste/right/chartData.js
new file mode 100644
index 0000000..f95d9c8
--- /dev/null
+++ b/src/components/env/waste/right/chartData.js
@@ -0,0 +1,264 @@
+export const pieChartData =  function () {
+    return {
+        title: {
+            text: '75%',
+            subtext: '达标率',
+            itemGap: 5,
+            x: '40%',
+            y: '40%',
+            textAlign:'center',
+            textStyle: {
+                fontSize: 28,
+                fontWeight: '600',
+                fontStyle: 'italic',
+                color: '#B8ECFF',
+            },
+            subtextStyle: {
+                fontSize: 10,
+                fontWeight: 'normal',
+                align: "center",
+                color: '#E8E8E8'
+            },
+        },
+        tooltip: {
+            show:false,
+            trigger: 'item',
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+
+        },
+        legend: {
+            orient:'vertical',
+            show: true,
+            itemStyle: {
+                opacity: 1,
+            },
+           itemWidth: 12,
+            itemHeight: 8,
+            top: 'bottom',
+            right:0,
+            itemGap: 20,
+            textStyle: {
+                color: '#D4E5FF',
+            },
+
+        },
+        color: ['#B8ECFF','#FADFA4'],
+        series: [
+            {
+                type: 'pie',
+                radius: [60, 70],
+                center: ["42%", "50%"],
+                avoidLabelOverlap: false,
+                selectedOffset: 7,
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                animation: true,
+                emphasis: {
+                    disabled: true,
+                    label: {
+                        show: false,
+                    }
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                    {
+                        name: '未超标数',
+                        value: 75,
+                        itemStyle: {
+                            color: '#E8E8E8',
+                            opacity: 1
+                        },
+                    },
+                    {
+                        name: '超标数',
+                        value: 25,
+                        itemStyle: {
+                            color: '#7FB0FF',
+                            opacity: 0
+                        }
+                    },
+                ]
+            },
+            {
+                type: 'pie',
+                radius: [55, 65],
+                center: ["42%", "50%"],
+                avoidLabelOverlap: false,
+                selectedOffset: 7,
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                animation: false,
+                emphasis: {
+                    disabled: true,
+                    label: {
+                        show: false,
+                    }
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                    {
+                        name: '未超标数',
+                        value: 75,
+                        itemStyle: {
+                            color: '#E8E8E8',
+                            opacity: 0
+                        },
+                    },
+                    {
+                        name: '超标数',
+                        value: 25,
+                        itemStyle: {
+                            color: '#7FB0FF',
+                            opacity: 1
+                        }
+                    },
+                ]
+            },
+
+        ],
+        animationDuration: 0,
+        animationDurationUpdate: 3000,
+        animationEasing: 'linear',
+        animationEasingUpdate: 'linear'
+    }
+}
+
+
+
+// 修改弹框内容用到的方法
+function replaceHtmlWord(str) {
+    return str.replace("NO2", "NO<sub>2</sub>")
+        .replace("SO2", "SO<sub>2</sub>")
+        .replace("O3", "O<sub>3</sub>")
+    // .replace("PM10", "PM<sub>10</sub>")
+    // .replace("PM2.5", "PM<sub>2.5</sub>")
+
+}
+
+// 修改图例文字用到的方法
+function replaceWords(str) {
+    return str.replace("NO2", "NO{sub|2}")
+        .replace("SO2", "SO{sub|2}")
+        .replace("O3", "O{sub|3}")
+    // .replace("PM2.5", "PM{sub|2.5}")
+    // .replace("PM10", "PM{sub|10}");
+}
+
+/**
+ * 废气右侧折线图
+ * @param data
+ * @param xAxisData
+ * @param legend
+ * @param selected
+ * @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
+ */
+export const gasRightLineChartData = function (data, xAxisData, legend) {
+    return {
+        color: ['#7FB0FF','#E8E8E8'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: xAxisData
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: data,
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 40,
+            x2: 22,
+            y2: 20,
+        },
+        legend: {
+            data: legend,
+            top: 10,
+            padding: [2, 2],
+            formatter: function (name) {
+                return replaceWords(name);
+            },
+            icon:'circle',
+            align:'left',
+            itemGap:10,
+            width: "100%",
+            itemWidth:10,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 8,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        }
+
+    }
+}
diff --git a/src/components/env/waste/right/wasteRight.component.html b/src/components/env/waste/right/wasteRight.component.html
new file mode 100644
index 0000000..19c52a8
--- /dev/null
+++ b/src/components/env/waste/right/wasteRight.component.html
@@ -0,0 +1,20 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            排放变化趋势
+        </title-component>
+        <div class="radio-style radio-style-two-btns">
+            <el-radio-group @change="changeData" v-model="lineChartType">
+                <el-radio-button label="排放量"></el-radio-button>
+                <el-radio-button label="排放浓度"></el-radio-button>
+            </el-radio-group>
+        </div>
+        <hbt-echarts className="right-bar-chart" :options="lineChartData" @onChartInit="getEcharts($event,'line')"></hbt-echarts>
+    </div>
+    <div class="box-content margin-top-50">
+        <title-component :imgSrc="imgSrc">
+            排放达标率
+        </title-component>
+        <hbt-echarts className="right-pie-chart" :options="pieChartData" @onChartInit="getEcharts($event)"></hbt-echarts>
+    </div>
+</div>
diff --git a/src/components/env/waste/right/wasteRight.component.ts b/src/components/env/waste/right/wasteRight.component.ts
new file mode 100644
index 0000000..5259ede
--- /dev/null
+++ b/src/components/env/waste/right/wasteRight.component.ts
@@ -0,0 +1,99 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./wasteRight.component.html"
+import {pieChartData, gasRightLineChartData} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+
+import * as echarts from 'echarts';
+
+import("@/assets/style/pageCommon.component.scss")
+import {
+    dataForGas1,
+    dataForGas2,
+} from '@/dataDemo/mockData';
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class WasteRightComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //柱状图数据
+    lineChartData: any = {};
+    //定时器
+    timer: any = null;
+    // 排放达标率数据
+    pieChartData: any = {}
+    //柱状图实例
+    line: any = {}
+    //饼图实例
+    pie: any = {}
+
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+    }
+    //排放量数据
+    dataForEmissions = dataForGas1
+    //排放浓度数据
+    dataForEmissionConcentration = dataForGas2
+    //折线图x轴坐标
+    xAxisData = ['1月','2月','3月','4月','5月','6月']
+    //设置排放变化趋势默认选中项
+    lineChartType = '排放量'
+    //排放变化趋势切换排放量排放浓度
+    changeData(val) {
+
+         if (val === '排放量') {
+             this.lineChartData = gasRightLineChartData(this.dataForEmissions.data,this.xAxisData,this.legend)
+         } else {
+             this.lineChartData = gasRightLineChartData(this.dataForEmissionConcentration.data,this.xAxisData,this.legend)
+         }
+    }
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.line.resize()
+        }, 300)
+    }
+
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+    //图例
+    legend = ['COD','氨氮']
+    mounted() {
+        /*        this.timer = setInterval(()=>{
+                    this.randomNum()
+                }, 10000)*/
+        this.pieChartData = pieChartData()
+        // data, xAxisData, legend
+        this.lineChartData = gasRightLineChartData(this.dataForEmissions.data,this.xAxisData,this.legend)
+        window.addEventListener("resize", this.resize);
+
+    }
+
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+    //改变污染物监测颜色
+    changeColor(val) {
+        if (Number(val) <= 30) {
+            return '#88E29F'
+        } else if (Number(val) > 30 && Number(val) <= 50) {
+            return '#F2A183'
+        } else {
+            return '#DD7171'
+        }
+
+    }
+}
+
diff --git a/src/components/env/water/left/chartData.js b/src/components/env/water/left/chartData.js
new file mode 100644
index 0000000..b9e7d14
--- /dev/null
+++ b/src/components/env/water/left/chartData.js
@@ -0,0 +1,519 @@
+export const pieChartData = {
+    title: {
+        text: '75%',
+        subtext: '优良率',
+        itemGap: 5,
+        x: 105,
+        y: '37%',
+        textStyle: {
+            fontSize: 30,
+            fontWeight: '600',
+            fontStyle: 'italic',
+            color: '#B8ECFF',
+        },
+        subtextStyle: {
+            fontSize: 17,
+            fontWeight: 'normal',
+            align: "center",
+            color: '#5998FB'
+        },
+    },
+    tooltip: {
+        trigger: 'item'
+    },
+    legend: {
+        orient: 'vertical',
+        right: '0%',
+        top: 'bottom',
+        height: 100,
+        itemWidth: 10,
+        itemHeight: 10,
+        data: [
+            {value: 25, name: '断路'},
+            {value: 25, name: '动土'},
+            {value: 15, name: '受限空间'},
+            {value: 20, name: '高处'},
+            {value: 15, name: '临时用电'}
+        ],
+        textStyle: {
+            color: '#D4E5FF',
+            padding: [5, 10, 5, 10]
+        },
+    },
+    series: [
+        {
+            type: 'pie',
+            selectedMode: 'single',
+            selectedOffset: 10,
+            left: -50,
+            radius: [50, 75],
+            data: [
+                {value: 25, name: '断路'},
+                {value: 1, name: ''},
+                {value: 25, name: '动土'},
+                {value: 1, name: ''},
+                {value: 15, name: '受限空间'},
+                {value: 1, name: ''},
+                {value: 20, name: '高处'},
+                {value: 1, name: ''},
+                {value: 15, name: '临时用电'},
+                {value: 1, name: ''},
+            ],
+            color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null],
+            emphasis: {
+                itemStyle: {
+                    // shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    // borderWidth:5,
+                    // borderColor:"rgba(255,255,255,0)",
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            itemStyle: {},
+            select: {
+                itemStyle: {}
+            },
+            labelLine: {
+                show: false
+            },
+            label: {
+                show: false
+            },
+            tooltip: {
+                backgroundColor: 'rgba(0,0,0,0.4)',
+                textStyle: {
+                    color: '#ffffff'
+                }
+
+            }
+        }
+    ],
+    animationDuration: 0,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear'
+}
+
+// 修改弹框内容用到的方法
+function replaceHtmlWord(str) {
+    return str.replace("NO2", "NO<sub>2</sub>")
+        .replace("SO2", "SO<sub>2</sub>")
+        .replace("O3", "O<sub>3</sub>")
+        .replace("KMnO4", "KMnO<sub>4</sub>")
+    // .replace("PM10", "PM<sub>10</sub>")
+    // .replace("PM2.5", "PM<sub>2.5</sub>")
+
+}
+
+// 修改图例文字用到的方法
+function replaceWords(str) {
+    return str.replace("NO2", "NO{sub|2}")
+        .replace("SO2", "SO{sub|2}")
+        .replace("O3", "O{sub|3}")
+        .replace("KMnO4", "KMnO{sub|4}")
+    // .replace("PM2.5", "PM{sub|2.5}")
+    // .replace("PM10", "PM{sub|10}");
+}
+
+export const soilLineChartData = function (data, xAxisData, legend,selected) {
+    return {
+        color: ['#B8ECFF','#7FB0FF', '#FFFFFF','#FADFA4','#F9BAFF', '#FFB7B7', '#C9FFD7', '#947FEA'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                // interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: xAxisData
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: data,
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 40,
+            x2: 22,
+            y2: 20,
+        },
+        legend: [{
+            data: legend.slice(0,5),
+            top: 0,
+            padding: [2, 2],
+            formatter: function (name) {
+                return replaceWords(name);
+            },
+            icon:'circle',
+            align:'left',
+            itemGap:20,
+            width: "100%",
+            itemWidth:10,
+            selected,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        },{
+            data: legend.slice(3,legend.length),
+            top: 20,
+            padding: [2, 2],
+            formatter: function (name) {
+                return replaceWords(name);
+            },
+            icon:'circle',
+            align:'left',
+            itemGap:20,
+            width: "80%",
+            itemWidth:10,
+            selected,
+            // 设置文本样式
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                }
+            }
+        }],
+    }
+}
+export const soilBarChartData = function (data, xAxisData,legend,$echarts) {
+
+    let barTopColor = [
+        "#B8ECFF",
+        "#7FB0FF",
+        "#E8E8E8",
+        "#FADFA4",
+        '#F9BAFF',
+        '#FFB7B7',
+        '#C9FFD7',
+        '#947FEA',
+        '#DD7171',
+        '#34BE98',
+    ];
+    let barBottomColor = [
+        "#7DBBD2",
+        "#5485D5",
+        "#999999",
+        '#CFB376',
+        '#A576A9',
+        '#BF8888',
+        '#82AF8E',
+        '#60519C',
+        '#985555',
+        '#1F886B',
+    ];
+    let data1 = [
+        [20,0,0,0,0,0,0,0],
+        [0,10,0,0,0,0,0,0],
+        [0,0,32,0,0,0,0,0],
+        [0,0,0,17,0,0,0,0],
+        [0,0,0,0,30,0,0,0],
+        [0,0,0,0,0,25,0,0,0,0],
+        [0,0,0,0,0,0,42,0,0,0],
+        [0,0,0,0,0,0,0,30,0,0],
+        [0,0,0,0,0,0,0,0,40,0],
+        [0,0,0,0,0,0,0,0,0,30],
+    ]
+
+    let seriseData = data.map((item,i)=>{
+        return {
+            data: data1[i],
+            type: 'bar',
+            name:item.name,
+            itemStyle: {
+                borderRadius:4,
+                color: function (params) {
+                    return new $echarts.graphic.LinearGradient(
+                        0, 0, 0, 1,
+                        [{
+                            offset: 0,
+                            color: barTopColor[i]
+                        },
+                            {
+                                offset: 1,
+                                color: barBottomColor[i]
+                            }
+                        ]
+                    )
+                },
+            },
+            barWidth: 8,
+            barGap:'-100%',
+        }
+    })
+    return {
+        color:[
+            "#B8ECFF",
+            "#7FB0FF",
+            "#E8E8E8",
+            "#FADFA4",
+            '#F9BAFF',
+            '#FFB7B7',
+            '#C9FFD7',
+            '#947FEA',
+            '#DD7171',
+            '#34BE98',
+        ],
+        xAxis: {
+            name:"",
+            type: 'category',
+            data: xAxisData,
+            // 设置文本样式
+            axisLabel:{
+                show:true,
+                interval:0,
+                formatter:function(name){
+                    return replaceWords(name);
+                },
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                margin: 14,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color:"#fff",
+                // 单独设置样式的图例（即上下标）
+                rich: {
+                    // 数字下标
+                    sub: {
+                        verticalAlign: "bottom",
+                        fontSize: 8
+                    },
+                    // 数字上标
+                    sup: {
+                        verticalAlign: "top",
+                        fontSize: 8
+                    },
+                    // 文字下标
+                    wxb: {
+                        verticalAlign: "bottom",
+                        fontSize: 7,
+                    },
+                    // 文字上标
+                    wsb: {
+                        verticalAlign: "top",
+                        fontSize: 7,
+                    }
+                },
+                rotate: 0,
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+            nameTextStyle:{
+                align:'left'
+            },
+            nameGap:20
+        },
+        yAxis: {
+            type: 'value',
+            name:"",
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(153,153,153,0.4)',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: seriseData,
+        label: {
+            // show: true
+        },
+        tooltip: {
+            show: true,
+            alwaysShowContent: false,
+            trigger: 'item',
+            backgroundColor: 'rgba(0,0,0,0.4)',
+            textStyle: {
+                color: '#ffffff'
+            }
+        }, grid: {
+            x: 30,
+            y: 40,
+            x2: 22,
+            y2: 20,
+        },
+        legend: [
+            {
+                show:true,
+                data: legend.slice(0,5),
+                top: 0,
+                formatter: function (name) {
+                    return replaceWords(name);
+                },
+                icon:'circle',
+                itemGap:20,
+                itemWidth:10,
+                // 设置文本样式
+                textStyle: {
+                    // 未单独设置样式的图例（即非上下标）
+                    lineHeight: 12,
+                    verticalAlign: "middle",
+                    fontSize: 10,
+                    color: "#fff",
+                    // 单独设置样式的图例（即上下标）
+                    rich: {
+                        // 数字下标
+                        sub: {
+                            verticalAlign: "bottom",
+                            fontSize: 8
+                        },
+                        // 数字上标
+                        sup: {
+                            verticalAlign: "top",
+                            fontSize: 8
+                        },
+                        // 文字下标
+                        wxb: {
+                            verticalAlign: "bottom",
+                            fontSize: 7,
+                        },
+                        // 文字上标
+                        wsb: {
+                            verticalAlign: "top",
+                            fontSize: 7,
+                        }
+                    }
+                }
+            },
+            {
+                show:true,
+                data: legend.slice(5,legend.length),
+                top: 20,
+                formatter: function (name) {
+                    return replaceWords(name);
+                },
+                icon:'circle',
+                itemGap:20,
+                itemWidth:10,
+                // 设置文本样式
+                textStyle: {
+                    // 未单独设置样式的图例（即非上下标）
+                    lineHeight: 12,
+                    verticalAlign: "middle",
+                    fontSize: 10,
+                    color: "#fff",
+                    // 单独设置样式的图例（即上下标）
+                    rich: {
+                        // 数字下标
+                        sub: {
+                            verticalAlign: "bottom",
+                            fontSize: 8
+                        },
+                        // 数字上标
+                        sup: {
+                            verticalAlign: "top",
+                            fontSize: 8
+                        },
+                        // 文字下标
+                        wxb: {
+                            verticalAlign: "bottom",
+                            fontSize: 7,
+                        },
+                        // 文字上标
+                        wsb: {
+                            verticalAlign: "top",
+                            fontSize: 7,
+                        }
+                    }
+                }
+            }
+        ],
+    }
+}
diff --git a/src/components/env/water/left/waterLeft.component.html b/src/components/env/water/left/waterLeft.component.html
new file mode 100644
index 0000000..5081474
--- /dev/null
+++ b/src/components/env/water/left/waterLeft.component.html
@@ -0,0 +1,78 @@
+<div class="env-left">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            水环境污染物年平均指标
+        </title-component>
+       <div class="card-box">
+           <div class="card-box-item-5">
+               <div class="card-box-item-top">62</div>
+               <div class="card-box-item-bottom">
+                   COD
+               </div>
+           </div> <div class="card-box-item-5">
+               <div class="card-box-item-top">75%</div>
+               <div class="card-box-item-bottom">
+                   PH
+               </div>
+           </div> <div class="card-box-item-5">
+               <div class="card-box-item-top">45</div>
+               <div class="card-box-item-bottom">
+                   溶解氧
+               </div>
+           </div> <div class="card-box-item-5">
+               <div class="card-box-item-top">42</div>
+               <div class="card-box-item-bottom">
+                   KMnO<sub>4</sub>
+               </div>
+           </div> <div class="card-box-item-5">
+               <div class="card-box-item-top">69</div>
+               <div class="card-box-item-bottom">
+                   氨氮
+               </div>
+           </div> <div class="card-box-item-5">
+               <div class="card-box-item-top">27%</div>
+               <div class="card-box-item-bottom">
+                   汞
+               </div>
+           </div><div class="card-box-item-5">
+               <div class="card-box-item-top">15</div>
+               <div class="card-box-item-bottom">
+                   BOD5
+               </div>
+           </div><div class="card-box-item-5">
+               <div class="card-box-item-top">27</div>
+               <div class="card-box-item-bottom">
+                   铅
+               </div>
+           </div><div class="card-box-item-5">
+               <div class="card-box-item-top">47</div>
+               <div class="card-box-item-bottom">
+                   挥发酚
+               </div>
+           </div><div class="card-box-item-5">
+               <div class="card-box-item-top">29</div>
+               <div class="card-box-item-bottom">
+                   石油
+               </div>
+           </div>
+       </div>
+    </div>
+    <div class="box-content margin-top-50">
+        <title-component :imgSrc="imgSrc">
+            污染物数值变化趋势
+        </title-component>
+        <div class="radio-style radio-style-two-btns">
+            <el-radio-group @change="changeData" v-model="lineChartType">
+                <el-radio-button label="小时平均"></el-radio-button>
+                <el-radio-button label="日平均"></el-radio-button>
+            </el-radio-group>
+        </div>
+        <hbt-echarts className="line-chart-air" :options="option" @onChartInit="getEcharts($event,'line')"></hbt-echarts>
+    </div>
+    <div class="box-content margin-top-50">
+        <title-component :imgSrc="imgSrc">
+            污染指数环比
+        </title-component>
+        <hbt-echarts className="bar-chart-air margin-top-23" :options="barChart" @onChartInit="getEcharts($event,'bar')"></hbt-echarts>
+    </div>
+</div>
diff --git a/src/components/env/water/left/waterLeft.component.ts b/src/components/env/water/left/waterLeft.component.ts
new file mode 100644
index 0000000..20914ec
--- /dev/null
+++ b/src/components/env/water/left/waterLeft.component.ts
@@ -0,0 +1,148 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./waterLeft.component.html"
+import {pieChartData, soilLineChartData, soilBarChartData} from "./chartData";
+import * as echarts from "echarts";
+
+import TitleComponent from "@/components/title.component.vue"
+import WarningListComponent from "@/components/warningList.component.vue"
+import {
+    dataForWaterDay,
+    dataForWaterHour,
+    data3ForWater,
+} from '@/dataDemo/mockData';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        WarningListComponent
+    },
+})
+export default class WaterLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //定时器设置
+    timer: any = null;
+    //污染物数值变化趋势图表数据项
+    option: any = {}
+    //特征污染物超标次数图表数据项
+    barChart: any = {}
+    //污染物数值变化趋势图实例
+    line: any = {}
+    //特征污染物超标次数实例
+    bar: any = {}
+    //重新绘制图表方法
+    resize() {
+        setTimeout(() => {
+            this.line.resize()
+            this.bar.resize()
+        }, 300)
+    }
+    //获取图表实例
+    getEcharts(e,type){
+        this[type] = e
+    }
+    //组件销毁前操作
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+    //设置土壤污染物数值变化趋势默认选中项
+    lineChartType = '小时平均'
+    //土壤污染物数值变化趋势切换小时统计和日统计
+    changeData(val) {
+        this.selectIndex = 0
+        if (val === '小时平均') {
+            this.initLineData(dataForWaterHour)
+        } else {
+            this.initLineData(dataForWaterDay)
+        }
+    }
+    //初始化污染物数值变化趋势图表数据
+    initLineData(datas:any = '') {
+        let temp: any = []
+        if (datas>0) {
+            temp = JSON.parse(JSON.stringify(datas))
+        } else {
+            temp = JSON.parse(JSON.stringify(dataForWaterHour))
+        }
+
+        const xAxisData = temp.data[0].dataList?.map(item => item.date);
+        const data = temp.data.map(item => {
+            item.data = item.dataList?.map(its => its.value)
+            return item
+        });
+        const legend = temp.data.map(item => item.name)
+        const selected = {};
+        legend.forEach((item, i) => {
+            selected[item] = i === 0;
+        })
+        this.option = soilLineChartData(data, xAxisData, legend, selected)
+    }
+    //初始化特征污染物超标次数图表数据
+    iniBarData() {
+        const temp = JSON.parse(JSON.stringify(data3ForWater))
+        const xAxisData = temp.data?.map(item => item.type);
+        const data = temp.data;
+        const legend = temp.data?.map(item => item.type)
+        this.barChart = soilBarChartData(data, xAxisData, legend, echarts)
+    }
+    //默认自动切换图例从第一个开始
+    selectIndex = 0
+    //定时器切换显示图例
+    autoRunLine() {
+        const datas = this.lineChartType === '小时平均' ? dataForWaterHour : dataForWaterDay;
+        const temp = JSON.parse(JSON.stringify(datas))
+        const xAxisData = temp.data[0].dataList?.map(item => item.date);
+        const data = temp.data.map(item => {
+            item.data = item.dataList?.map(its => its.value)
+            return item
+        });
+        const legend = temp.data.map(item => item.name)
+        const selected = {};
+        legend.forEach((item, i) => {
+            selected[item] = i === this.selectIndex;
+        })
+        this.option = soilLineChartData(data, xAxisData, legend, selected)
+    }
+    //获取随机整数
+    getRandomInt(min: number, max: number) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
+    }
+
+    mounted() {
+        this.initLineData()
+        this.iniBarData()
+        this.timer = setInterval(() => {
+            if (this.selectIndex > 5) {
+                this.selectIndex = 0
+            }
+            this.autoRunLine()
+            this.selectIndex++
+        }, 3000)
+        window.addEventListener("resize", this.resize);
+
+        /* this.timer = setInterval(()=>{
+              this.dataList = [ {
+                  title:'消防告警',
+                  info:'区域发现黑名单人员了区域发现黑名人预',
+                  time:'2021-05-19 16:03:28',
+                  level:'1',
+                  isNew:true,
+              },...this.dataList]
+          },2000)*/
+
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+}
+
diff --git a/src/components/env/water/right/chartData.js b/src/components/env/water/right/chartData.js
new file mode 100644
index 0000000..36b62e4
--- /dev/null
+++ b/src/components/env/water/right/chartData.js
@@ -0,0 +1,289 @@
+export const pieChartData =  function () {
+    return {
+        title: {
+            text: '75%',
+            subtext: '达标率',
+            itemGap: 5,
+            x: '42%',
+            y: '40%',
+            textAlign:'center',
+            textStyle: {
+                fontSize: 28,
+                fontWeight: '600',
+                fontStyle: 'italic',
+                color: '#B8ECFF',
+            },
+            subtextStyle: {
+                fontSize: 10,
+                fontWeight: 'normal',
+                align: "center",
+                color: '#E8E8E8'
+            },
+        },
+        tooltip: {
+            show:false,
+            trigger: 'item',
+                backgroundColor:'rgba(0,0,0,0.4)',
+                textStyle:{
+                    color:'#ffffff'
+                }
+
+        },
+        legend: {
+            show: true,
+            itemStyle: {
+                opacity: 1,
+            },
+            itemWidth: 12,
+            itemHeight: 8,
+            width: 200,
+            top: 192,
+            itemGap: 20,
+            textStyle: {
+                color: '#D4E5FF',
+            },
+        },
+        color: ['#B8ECFF','#FADFA4'],
+        series: [
+            {
+                type: 'pie',
+                radius: [60, 70],
+                center: ["45%", "50%"],
+                avoidLabelOverlap: false,
+                selectedOffset: 7,
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                animation: true,
+                emphasis: {
+                    disabled: true,
+                    label: {
+                        show: false,
+                    }
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                    {
+                        name: '未超标数',
+                        value: 75,
+                        itemStyle: {
+                            color: '#E8E8E8',
+                            opacity: 1
+                        },
+                    },
+                    {
+                        name: '超标数',
+                        value: 25,
+                        itemStyle: {
+                            color: '#7FB0FF',
+                            opacity: 0
+                        }
+                    },
+                ]
+            },
+            {
+                type: 'pie',
+                radius: [55, 65],
+                center: ["45%", "50%"],
+                avoidLabelOverlap: false,
+                selectedOffset: 7,
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                animation: false,
+                emphasis: {
+                    disabled: true,
+                    label: {
+                        show: false,
+                    }
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                    {
+                        name: '未超标数',
+                        value: 75,
+                        itemStyle: {
+                            color: '#E8E8E8',
+                            opacity: 0
+                        },
+                    },
+                    {
+                        name: '超标数',
+                        value: 25,
+                        itemStyle: {
+                            color: '#7FB0FF',
+                            opacity: 1
+                        }
+                    },
+                ]
+            },
+
+        ],
+        animationDuration: 0,
+        animationDurationUpdate: 3000,
+        animationEasing: 'linear',
+        animationEasingUpdate: 'linear'
+    }
+}
+
+
+export const barChartData = function ($echarts = {}){
+
+    return {
+        tooltip: {
+            show:false,
+            trigger: "axis",
+            axisPointer: {
+                // 坐标轴指示器，坐标轴触发有效
+                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+            }
+        },
+        grid: {
+            left: "5%", //距离dom间距
+            right: "4%",
+            top: "5%",
+            bottom: "5%"
+        },
+        legend:{
+           show:false
+        },
+        xAxis: [
+            {
+                type: 'value',
+                // boundaryGap: true,
+                axisPointer: {
+                    type: "shadow"
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false
+                },
+                splitLine: {
+                    show: false
+                },
+                axisLabel: {
+                    show: false
+                }
+            }
+        ],
+        yAxis: [
+            {
+                type: "category",
+                inverse: true,
+                axisLabel: {
+                    verticalAlign: "bottom",
+                    align: "left",
+                    height:20,
+                    width:30,
+                    padding: [20, 10, 10, 6],
+                    textStyle: {
+                        fontSize: 12,
+                        color: "#ffffff",
+                        fontFamily: "SourceHanSansCN-Regular"
+                    }
+                },
+                // 纵坐标数据
+                data: [
+                    "2号区3号库采样点",
+                    "1号区13号库采样点",
+                    "22号区4号库采样点",
+                    "12号区33号库采样点",
+                    "12号区3号库采样点",
+                    "22号区32号库采样点",
+                    "6号区3号库采样点",
+                    "8号区2号库采样点",
+                    "6号区9号库采样点",
+                    "7号区1号库采样点",
+                ],
+                yAxisIndex: 0,
+                // 横坐标 分割线等取消显示
+                axisTick: {
+                    show: false
+                },
+                axisLine: {
+                    show: false
+                }
+            },
+            {
+                type: "category",
+                inverse: true,
+                axisLine: {
+                    show: false
+                },
+                axisTick: {
+                    show: false
+                },
+                position:'right',
+                axisLabel: {
+                    show: true,
+                    inside: true,
+                    verticalAlign: "bottom",
+                    // 位置 上右下左
+                    padding: [0, 10, 10, 0],
+                    //   lineHeight: "40",
+                    textStyle: {
+                        fontSize: 12,
+                        color: "#ffffff",
+                        fontFamily: "SourceHanSansCN-Regular"
+                    }
+                },
+                // 统计的总量 用纵坐标模拟
+                data: [90,80,70,60,55,50,46,40,30,20]
+            }
+        ],
+        series: [
+            {
+                name: '',
+                type: 'bar',
+                // 宽度
+                barWidth: "10",
+                // 堆叠
+                stack: "总量1",
+                showBackground: true,
+                backgroundStyle: {
+                    color: "#0c3252"
+                },
+                data: [90,80,70,60,55,50,46,40,30,20],
+                z:10,
+                barCategoryGap:'50%',
+                barGap :'50%',
+                itemStyle: {
+                    normal: {
+                        show: true,
+                        textStyle: {
+                            fontSize: 12
+                        },
+                        color: new $echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            1,
+                            0,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "#7FB0FF"
+                                },
+                                {
+                                    offset: 1,
+                                    color: "#5485D5"
+                                }
+                            ],
+                            false
+                        )
+                    }
+                }
+            }
+
+        ]
+    }
+
+
+}
diff --git a/src/components/env/water/right/waterRight.component.html b/src/components/env/water/right/waterRight.component.html
new file mode 100644
index 0000000..cd8c10f
--- /dev/null
+++ b/src/components/env/water/right/waterRight.component.html
@@ -0,0 +1,36 @@
+<div class="env-right">
+    <div class="box-content flex-1-1-0">
+        <title-component :imgSrc="imgSrc">
+            水系分布图
+        </title-component>
+        <div class="img-con">
+            <div class="left-top-m"></div>
+            <div class="right-top-m"></div>
+            <div class="left-bottom-m"></div>
+            <div class="right-bottom-m"></div>
+            <img :src="waterImg" alt="水系分布图">
+        </div>
+
+    </div>
+    <div class="box-content margin-top-50">
+        <title-component :imgSrc="imgSrc">
+            污染物监测达标率
+        </title-component>
+        <div class="d-flex">
+            <div class="chartPart">
+                <div class="chart-bg-center" :class="pieCenterBorder"></div>
+                <hbt-echarts className="right-pie-chart-water" :options="option" @onChartInit="getEcharts($event)"></hbt-echarts>
+            </div>
+            <div class="typePart">
+                <el-radio-group @change="initPieChartData" v-model="chooseType" size="mini">
+                    <el-radio-button :key="item.name" v-for="item in dataForWaterBar.data"
+                                     :label="item.name">
+                        <span class="check-box-color" :class="item.color"></span>
+                        <span class="check-box-text">{{ item.name }}</span>
+                    </el-radio-button>
+                </el-radio-group>
+            </div>
+        </div>
+
+    </div>
+</div>
diff --git a/src/components/env/water/right/waterRight.component.ts b/src/components/env/water/right/waterRight.component.ts
new file mode 100644
index 0000000..a0c7c68
--- /dev/null
+++ b/src/components/env/water/right/waterRight.component.ts
@@ -0,0 +1,108 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./waterRight.component.html"
+import {pieChartData, barChartData} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+import {
+    dataForWaterBar,
+} from '@/dataDemo/mockData';
+import * as echarts from 'echarts';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class WaterRightComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //水系分布图
+    waterImg = require("@/assets/img/env/waterImg.png");
+    //饼图内圈颜色
+    pieCenterBorder = 'cod-border';
+    //当前选中类型
+    chooseType ='COD';
+    //柱状图数据
+    barChartData: any = {};
+    //定时器
+    timer: any = null;
+    // 排放达标率数据
+    option: any = {}
+    //柱状图实例
+    bar: any = {}
+    //饼图实例
+    pie: any = {}
+    //右下饼图数据源
+    dataForWaterBar = dataForWaterBar
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+    }
+    //变更radio选项时改变饼图数据
+    initPieChartData(val) {
+        const pieChartData = JSON.parse(JSON.stringify(this.option))
+        const {series} = pieChartData;
+        let chooseData = this.option.series[0];
+        if (val) {
+            chooseData = this.dataForWaterBar.data.find(item => item.name === val)
+            series[0].data[0].value = series[1].data[0].value = chooseData.value
+            series[0].data[0].name = series[1].data[0].name = '未超标数'
+            series[0].data[1].value = series[1].data[1].value = chooseData.value1
+            series[0].data[1].name = series[1].data[1].name = '超标数'
+            pieChartData.title.text = chooseData.value + '%';
+            const temp = this.dataForWaterBar.data.find(item=>item.name === val)?.color
+            this.pieCenterBorder = temp + '-border'
+        }
+        this.option = pieChartData;
+        this.option.series = series
+        this.option.legend.formatter = (name) => {
+            let tarValue;
+            const pieData = series[0].data
+            for (let i = 0; i < pieData.length; i++) {
+                if (name === pieData[i].name) {
+                    tarValue = pieData[i].value;
+                }
+            }
+            return name + '：' + tarValue
+        }
+    }
+
+    //组件销毁前操作
+    destroyed() {
+        console.log('destroyed')
+    }
+
+    mounted() {
+        /*        this.timer = setInterval(()=>{
+                    this.randomNum()
+                }, 10000)*/
+        this.option = pieChartData()
+        this.barChartData = barChartData(echarts)
+
+
+    }
+
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+    //改变污染物监测颜色
+    changeColor(val) {
+        if (Number(val) <= 30) {
+            return '#88E29F'
+        } else if (Number(val) > 30 && Number(val) <= 50) {
+            return '#F2A183'
+        } else {
+            return '#DD7171'
+        }
+
+    }
+}
+
diff --git a/src/components/header.component.vue b/src/components/header.component.vue
new file mode 100644
index 0000000..5b29f4f
--- /dev/null
+++ b/src/components/header.component.vue
@@ -0,0 +1,320 @@
+<template>
+<div class="header-box">
+    <div class="logo">
+        化工园区
+        <div class="line"></div>
+        <div class="nav-list" @click="togglePageList">
+            {{currentPage.label}}
+            <div class="arrow el-icon-caret-bottom"></div>
+            <div class="drop-box" @click.stop="" v-if="showPageList" :class="{animate:showPageList}">
+                <div class="list" :class="{active:item.value === currentPage.value}" @click.stop="selectPage(item)" v-for="(item,index) in pageList" :key="index">{{item.label}}</div>
+            </div>
+        </div>
+
+    </div>
+    <div class="nav-box" :style="{width:currentPage.children.length<=5?currentPage.children.length*180+'px':5*180+'px'}" v-if="currentPage.children.length>1" @mouseenter="showArrow=true" @mouseleave="showArrow=false">
+        <div class="arrow left el-icon-caret-left" v-if="currentPage.children.length>5 && navLeft<0 && showArrow" @click.stop="moveNav(false)"></div>
+        <div class="arrow right el-icon-caret-right"  v-if="currentPage.children.length>5 && navLeft > -180 * (currentPage.children.length-5) && showArrow" @click.stop="moveNav(true)"></div>
+        <div class="nav-block" ref="navList">
+            <div class="nav-btn" :class="{active:item.value === currentNav}" v-for="(item,index) in currentPage.children" :key="index">
+                <span  @click="selectNav(item)">{{item.label}}</span>
+            </div>
+
+        </div>
+    </div>
+    <div class="info-box">
+        <div class="info-block action-box">
+            <hbt-svg name="hide" v-if="showContent" @click="toggleDrawer"></hbt-svg>
+            <hbt-svg name="show" v-else  @click="toggleDrawer"></hbt-svg>
+            <hbt-svg name="fullScreen" @click="fullScreen"></hbt-svg>
+        </div>
+        <div class="info-block">
+            <hbt-svg name="speed"></hbt-svg>
+            <span>多云</span>
+            <span>21℃</span>
+        </div>
+        <div class="info-block">
+            <hbt-svg name="speed"></hbt-svg>
+            <span>5m/s</span>
+        </div>
+        <div class="info-block time-box">
+            {{currentTime}}
+        </div>
+        <div class="info-block date-box">
+            <p>{{weekForMart[currentWeek]}}</p>
+            <p>{{currentDate}}</p>
+        </div>
+    </div>
+</div>
+
+</template>
+<script lang="ts">
+import {Component,Emit,PropSync,Vue} from 'vue-property-decorator';
+import moment from "moment"
+import pageListData from "@/mock/nav"
+import screenfull from 'screenfull'
+@Component
+export default class HeaderComponent extends Vue {
+    public currentTime = moment().format("HH:mm:ss");
+    public currentDate = moment().format("YYYY.MM.DD");
+    public currentWeek = moment().isoWeekday();
+    public weekForMart  = ["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]
+    public timer;
+    public showPageList = false;
+    public pageList = pageListData;
+    public currentPage = JSON.parse(localStorage.getItem("currentPage") as any) || this.pageList[0];
+    public currentNav = localStorage.getItem("currentNav") || this.currentPage.value;
+    public showArrow = false;
+
+    public showContent = true;
+
+    public navLeft = 0;
+
+
+    @Emit("onNavChanged")
+    public navChange(){
+        //
+        return this.currentNav
+    }
+    @Emit("onDrawer")
+    public drawerChange(){
+        return this.showContent
+    }
+
+    public fullScreen(){
+        screenfull.toggle()
+    }
+
+    public toggleDrawer(){
+        this.showContent = !this.showContent;
+        this.drawerChange()
+    }
+
+    public togglePageList(){
+        this.showPageList = !this.showPageList;
+    }
+    public selectPage(data){
+        this.currentPage = data;
+        localStorage.setItem("currentPage",JSON.stringify(data))
+        this.currentNav = data.value;
+        localStorage.setItem("currentNav",data.value)
+        this.navChange()
+        this.showPageList = false;
+        this.navLeft = 0;
+        const el = this.$refs.navList as any;
+        if(el){
+         el.style.left = 0;
+        }
+    }
+
+    public selectNav(data){
+        this.currentNav = data.value;
+        localStorage.setItem("currentNav",data.value)
+        this.navChange()
+    }
+
+    public moveNav(isAfter:boolean){
+        const el = this.$refs.navList as any;
+        if(isAfter){
+            el.style.left = (this.navLeft - 180) + "px";
+            this.navLeft = this.navLeft - 180;
+        }else{
+            el.style.left = (this.navLeft + 180) + "px";
+            this.navLeft = this.navLeft + 180;
+        }
+    }
+    created(){
+        this.timer = setInterval(()=>{
+            this.currentTime = moment().format("HH:mm:ss")
+            this.currentDate = moment().format("YYYY.MM.DD")
+            this.currentWeek = moment().isoWeekday();
+        },1000)
+    }
+
+    mounted(){
+        this.navChange()
+    }
+    beforeDestory(){
+        clearInterval(this.timer);
+        this.timer = null;
+        localStorage.removeItem("currentPage")
+        localStorage.removeItem("currentNav")
+    }
+
+}
+</script>
+<style lang="scss" scoped>
+.header-box{
+    width: 100%;
+    height: 60px;
+    display: flex;
+    padding: 0 50px;
+    justify-content: space-between;
+    pointer-events: auto;
+    white-space: nowrap;
+    flex-wrap: wrap;
+    .logo{
+        // font-family: "Microsoft Yahei";
+        font-family: "logo";
+        font-size: 28px;
+        height: 28px;
+        line-height: 100%;
+        display: flex;
+        align-self: center;
+        .line{
+            width: 2px;
+            height: 16px;
+            background: $font-color;
+            margin:0 15px;
+            align-self: center;
+        }
+        .nav-list{
+            // font-family: "Microsoft Yahei";
+            font-family: "logo";
+            cursor: pointer;
+            position: relative;
+            .arrow{
+                margin-left: 20px;
+            }
+            .drop-box{
+                width: 100%;
+                position: absolute;
+                top: 48px;
+                left: -30px;
+                background: rgba($color: #040404, $alpha: 0.6);
+                padding: 20px 0;
+                border-radius: 4px;
+                &.animate{
+                    animation-name: bounceIn;
+                    animation-duration: 1s;
+                }
+                .list{
+                    // font-family: "Microsoft Yahei";
+                    font-family: "logo";
+                    font-size: 26px;
+                    width: 100%;
+                    height: 50px;
+                    position: relative;
+                    text-align: center;
+
+                    &.active::before,&:hover::after{
+                        width: 100%;
+                        height: 3px;
+                        content: "";
+                        position: absolute;
+                        left: 0;
+                        bottom: 8px;
+                        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #FFFFFF 47%, rgba(255,255,255,0) 100%);
+                        border-radius: 0px 0px 0px 0px;
+                    }
+                }
+            }
+        }
+    }
+    .nav-box{
+        width: 900px;
+        margin-top: 12px;
+        height: 40px;
+        justify-self: center;
+        position: relative;
+        overflow: hidden;
+        .arrow{
+            position: absolute;
+            font-size: 26px;
+            cursor: pointer;
+            left:-0;
+            top: 0;
+            z-index: 10;
+            &.right{
+                left:auto;
+                right: -0;
+            }
+
+        }
+        .nav-block{
+            display: inline-flex;
+            position: relative;
+        }
+        .nav-btn{
+            width: 180px;
+            text-align: center;
+            font-size: 24px;
+            line-height: 100%;
+            height: 24px;
+            white-space: nowrap;
+            position: relative;
+            cursor: pointer;
+            &.active{
+                color:#7FB0FF
+            }
+            &.active::before,&:hover::after{
+                width: 100%;
+                height: 3px;
+                content: "";
+                position: absolute;
+                left: 0;
+                bottom: -14px;
+                background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #FFFFFF 47%, rgba(255,255,255,0) 100%);
+                border-radius: 0px 0px 0px 0px;
+            }
+
+        }
+
+
+    }
+    .info-box{
+        display: inline-flex;
+        margin-top: 10px;
+        font-size: 14px;
+        align-items: center;
+        height: 33px;
+        .info-block{
+            margin-left: 15px;
+            white-space: nowrap;
+            display: inline-flex;
+            align-items: center;
+            &:first-child{
+                margin-left: 0;
+            }
+            span{
+                padding-right: 5px;
+            }
+            &.action-box{
+                svg{
+                    margin-left: 15px;
+                    margin-right: 0;
+                    cursor: pointer;
+                    &:first-child{
+                        margin-left: 0;
+                    }
+                    &:hover{
+                        color:#7FB0FF
+                    }
+                }
+            }
+            &.time-box{
+                font-family: number;
+                font-size: 26px;
+            }
+            &.date-box{
+                width: 80px;
+                flex-wrap: wrap;
+                font-size: 15px;
+                p{
+                    font-family: number;
+                    width: 100%;
+                    line-height: 16px;
+                    &:first-child{
+                        font-size: 12px;
+                    }
+                }
+            }
+        }
+        svg{
+            display: inline-flex;
+            font-size: 20px;
+            margin-right: 5px;
+        }
+    }
+}
+</style>
diff --git a/src/components/largePopUp.component.vue b/src/components/largePopUp.component.vue
new file mode 100644
index 0000000..711cf65
--- /dev/null
+++ b/src/components/largePopUp.component.vue
@@ -0,0 +1,180 @@
+<!--说明书弹窗-->
+<template>
+  <el-dialog
+      class="pop-up-permit"
+      :title="title"
+      append-to-body
+      :modal="false"
+      :close-on-click-modal="false"
+      :visible.sync="dialogVisibleForBook"
+      width="648"
+      top="9vh"
+      :before-close="handleClose">
+    <div class="specification-card">
+      <div class="mgb10">
+        <!--        <div class="label-group half">
+                    <div class="label">中文名称</div>
+                    <div class="content-block">123213</div>
+                </div>
+                <div class="label-group half">
+                    <div class="label">俗名</div>
+                    <div class="content-block">222222</div>
+                </div>
+                <div class="label-group half">
+                    <div class="label">英文名称</div>
+                    <div class="content-block">CI</div>
+                </div>
+                <div class="label-group half">
+                    <div class="label">英文俗名</div>
+                    <div class="content-block">CI</div>
+                </div>-->
+        <div class="label-group third">
+          <div class="label">化学品中文名称</div>
+          <div class="content-block">{{detailData.chemicalCn}}</div>
+        </div>
+        <div class="label-group third">
+          <div class="label">化学品俗名</div>
+          <div class="content-block">{{detailData.otherChemicalCn}}</div>
+        </div>
+        <div class="label-group third">
+          <div class="label">化学品英文名称</div>
+          <div class="content-block">{{detailData.chemicalEn}}</div>
+        </div>
+        <div class="label-group third">
+          <div class="label">英文俗名</div>
+          <div class="content-block">{{detailData.chemicalEn}}</div>
+        </div>
+        <div class="label-group third">
+          <div class="label">CAS NO.</div>
+          <div class="content-block">{{detailData.cas}}</div>
+        </div>
+        <div class="label-group third">
+          <div class="label">危害性类别</div>
+          <div class="content-block">{{detailData.hazardCategory}}</div>
+        </div>
+        <div class="label-group third">
+          <div class="label">侵入途径</div>
+          <div class="content-block">{{detailData.invasionRoute}}</div>
+        </div>
+        <div class="label-group third">
+          <div class="label">环境危害</div>
+          <div class="content-block">{{detailData.environmentalHazards}}</div>
+        </div>
+        <div class="label-group third">
+          <div class="label">燃爆危害</div>
+          <div class="content-block">{{detailData.explosionHazard}}</div>
+        </div>
+      </div>
+      <div class="inner-title">急救措施</div>
+      <div class="label-group">
+        <div class="label">皮肤接触</div>
+        <div class="content-block">立即脱去污染的衣着，用大量流动清水冲洗20~30分钟。如有不适感，就医。</div>
+      </div>
+      <div class="label-group">
+        <div class="label">眼睛接触</div>
+        <div class="content-block">立即提起眼险，用大量流动清水或生理盐水彻底冲洗10~15分钟。如有不适感，就医。</div>
+      </div>
+      <div class="label-group">
+        <div class="label">吸入</div>
+        <div class="content-block">迅速脱离现场至空气新鲜处。保持呼吸道通畅。如呼吸困难，给输氧。呼吸、心跳停止,立即进行心肺复苏术。就医。</div>
+      </div>
+      <div class="label-group">
+        <div class="label">食入</div>
+        <div class="content-block">用水漱口，给饮牛奶或蛋清。就医。</div>
+      </div>
+      <div class="inner-title">消防措施</div>
+      <div class="label-group">
+        <div class="label">危险特性</div>
+        <div class="content-block">与酸发生中和反应并放热。遇潮时对铝、锌和锡有腐蚀性,并放出易燃易爆的氢气。本品不会燃烧,遇水和水蒸气大量放热,形成腐蚀性溶液。具有强腐蚀性。</div>
+      </div>
+      <div class="label-group">
+        <div class="label">有害燃烧产物</div>
+        <div class="content-block">本品不燃。</div>
+      </div>
+      <div class="label-group">
+        <div class="label">灭火方法</div>
+        <div class="content-block">本品不燃。根据着火原因选择适当灭火剂灭火。</div>
+      </div>
+      <div class="inner-title">泄露应急处理</div>
+      <div class="label-group">
+        <div class="label">应急处理</div>
+        <div class="content-block">隔离泄漏污染区，限制出入。建议应急处理人员藏防尘口罩，穿防酸碱服。穿上适当的防护服前严禁接触破裂的容器和泄漏物。尽可能切断泄漏源。用塑料布覆盖泄漏物，减少飞散。勿使水进入包装容器内。用洁净的铲子收集泄漏物，置于干净、干燥、盖子较松的容器中,将容器移离泄漏区。</div>
+      </div>
+      <div class="inner-title">操作处置与储存</div>
+      <div class="label-group">
+        <div class="label">操作注意事项</div>
+        <div class="content-block">密闭操作。操作人员必须经过专门培训，严格遵守操作规程。建议操作人负佩戴头罩型电动送风过滤式防尘呼吸器，穿橡胶耐酸碱服,戴橡胶耐酸碱手套。远离易燃可燃物。避免产生粉尘。避免与酸类接触。搬运时要轻装轻卸，防止包装及容器损坏。配备泄漏应急处理设备。倒空的容器可能残留有害物。稀释或制备溶液时，应把碱加入水中，避免沸腾和飞溅。</div>
+      </div>
+      <div class="label-group">
+        <div class="label">存储注意事项</div>
+        <div class="content-block">储存于阴凉、干燥、通风良好的库房。远离火种、热源。库温不超过35°C, 相对湿度不超过80%。包装必须密封，切勿受潮。应与易(可) 燃物、酸类等分开存放,切忌混储。储区应备有合适的材料收容泄漏物。</div>
+      </div>
+      <div class="label-group">
+        <div class="label">操作注意事项</div>
+        <div class="content-block">密闭操作。操作人员必须经过专门培训，严格遵守操作规程。建议操作人负佩戴头罩型电动送风过滤式防尘呼吸器，穿橡胶耐酸碱服,戴橡胶耐酸碱手套。远离易燃可燃物。避免产生粉尘。避免与酸类接触。搬运时要轻装轻卸，防止包装及容器损坏。配备泄漏应急处理设备。倒空的容器可能残留有害物。稀释或制备溶液时，应把碱加入水中，避免沸腾和飞溅。</div>
+      </div>
+      <div class="label-group">
+        <div class="label">存储注意事项</div>
+        <div class="content-block">储存于阴凉、干燥、通风良好的库房。远离火种、热源。库温不超过35°C, 相对湿度不超过80%。包装必须密封，切勿受潮。应与易(可) 燃物、酸类等分开存放,切忌混储。储区应备有合适的材料收容泄漏物。</div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script lang="ts">
+import {Component, PropSync, Prop, Vue} from 'vue-property-decorator';
+
+@Component
+export default class LargePopUpComponent extends Vue {
+  //传入的报警信息列表
+  @PropSync('dialogVisibleForBook', {default: false}) syncDialogVisibleForPermit!: boolean;
+  //说明书详细数据
+  @Prop({default: {}}) detailData!: any;
+  //弹窗标题
+  @Prop({default: '化学安全说明书'}) title!: string;
+
+
+  //关闭弹窗
+  handleClose() {
+    this.syncDialogVisibleForPermit = false
+  }
+
+
+}
+</script>
+<style lang="scss">
+
+
+.pop-up-permit {
+  .el-dialog {
+    width: 982px;
+    height: 822px;
+    background: url("~@/assets/img/big_bg.png") no-repeat 50% 50%;
+
+    .el-dialog__headerbtn {
+      top: 22px;
+      right: 34px;
+      font-size: 22px;
+    }
+
+    .el-dialog__title {
+      font-weight: bold;
+      position: relative;
+      top: 5px;
+      left: 15px;
+    }
+
+    .el-dialog__body {
+      padding-top: 20px;
+    }
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #FFFFFF;
+  }
+
+  .el-dialog__title, .el-dialog__body, .el-form-item__label {
+    color: #FFFFFF;
+  }
+}
+
+</style>
diff --git a/src/components/map.component.vue b/src/components/map.component.vue
new file mode 100644
index 0000000..61750c2
--- /dev/null
+++ b/src/components/map.component.vue
@@ -0,0 +1,108 @@
+<template>
+    <div :id="id" class="myMap"></div>
+</template>
+<style lang="scss" scoped>
+.myMap{
+    width: 100%;
+    height: 100%;
+}
+</style>
+<script lang="ts">
+import {Component,Emit,Prop,Vue} from 'vue-property-decorator';
+import PlayerUtils from "@/utils/player"
+@Component
+export default class MapComponent extends Vue {
+    @Prop()
+    id:string;
+    public playerUtils = new PlayerUtils();
+    public player:any;
+    public timer: any;
+    public moving = false;
+    public playerApi:any;
+    @Emit("onLoaded")
+    public loadPlayer(){
+        return {
+            palyer:this.player,
+            api:this.playerApi,
+            utils:this.playerUtils 
+        }
+    }
+    @Emit("onHandleChange")
+    public handleChange(data){
+        //
+    }
+    created(){
+        this.playerUtils.onEvent = async(data)=>{
+            this.handleChange(data)
+
+        }
+        this.playerUtils.onReady = (data)=>{
+            this.playerApi.settings.setMapMode(2, {
+                'coordType': 0, //坐标系类型，0：经纬度；1：本地（默认值是0）
+                'serviceType': 4,//服务类型，0：MVT矢量切片（默认值）； 1：WMTS(ArcGIS)； 2：WMS； 3：MapServer(ArcGIS) ； 4：Mapbox
+                'mapPoint': [492848.00, 2491968.00],//同名点，取值范围：[x,y]，（默认值是[0, 0]）
+                'longitude': 113.9354020,//经度，取值范围：[0~180]（默认值是0.0）
+                'latitude': 22.5222660,//纬度，取值范围：[0~90]（默认值是0.0）
+                'style': 'mapbox://styles/mapbox/streets-v10',//风格路径，字符串地址，（默认值是 "mapbox://styles/mapbox/streets-v10"）
+                'coordOrder': 0,//坐标顺序，0: XY; 1: YX（默认值为0）
+                'cache': ':memory:',//缓存路径，字符串地址，（默认值是 ":memory:"）
+                'renderMode': 0,//渲染模式，0：正常；1：透明；2：标注；3：贴地（默认值是0）
+                'groundHeight': 0,//地面高度，取值范围：[0~任意数值]（默认值是0.0）
+                //'serverURL': []
+            }, () => {
+                console.log('设置大地图模式完成');
+            });
+            // this.playerApi.tileLayer.hide("48D390964B7F0D37D07DD8A2D5596E64")
+            this.loadPlayer();
+        }
+    }
+    mounted(){
+        window.addEventListener("resize",this.resize)
+        document.addEventListener("mousemove", this.fixedCamera)
+        this.player = this.playerUtils.initPlayer(this.id);
+        this.playerApi = this.player.getAPI();
+
+    }
+
+    // 旋转镜头
+    public fixedCamera() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+            if(this.moving){
+                this.playerApi.camera.stop();
+                this.moving= false
+            }
+        }
+        this.timer = setInterval(() => {
+            this.moving = true;
+            this.playerApi.camera.flyAround([
+                13312716.658437,
+                4098255.982695,
+                60.714346
+            ], [0,-45,0], 60, 20)
+        }, 20 * 1000)
+    }
+    beforeDestroy(){
+
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = null
+        }
+    }
+    destroyed(){
+        window.removeEventListener("resize",this.resize)
+        document.removeEventListener("mousemove", this.fixedCamera)
+        //关闭云渲染并释放资源
+        this.playerApi.destroy();
+    }
+    beforeRouteLeave(){
+        console.log('des')
+    }
+
+    public resize(){
+        this.player.resize()
+    }
+}
+</script>
+
diff --git a/src/components/parkFile/left.component.vue b/src/components/parkFile/left.component.vue
new file mode 100644
index 0000000..af4161f
--- /dev/null
+++ b/src/components/parkFile/left.component.vue
@@ -0,0 +1,216 @@
+<template>
+    <div class="park-file-left  animate__animated animate__fadeInLeft">
+        <TitleComponent >查看档案</TitleComponent>
+        <div class="cards-box">
+            <div class="card">
+                <div class="count">123</div>
+                <p class="text">空气质量</p>
+            </div>
+            <div class="card">
+                <div class="count">
+                    <div class="icon"></div>
+                    <span class="text">未污染</span>
+                </div>
+                <p class="text">水污染指数</p>
+            </div>
+        </div>
+        <div class="cards-box">
+            <div class="card">
+                <div class="count">
+                    <span class="blue">7类</span>
+                    <div class="icon"></div>
+                    <span class="text">未发现超标</span>
+                </div>
+                <p class="text">特征污染物</p>
+            </div>
+            <div class="card">
+                <div class="count">
+                    <span class="blue">45处</span>
+                    <div class="icon"></div>
+                    <span class="text">未发现超标</span>
+                </div>
+                <p class="text">污染源</p>
+            </div>
+        </div>
+        <TitleComponent >危化品类型</TitleComponent>
+        <hbt-echarts  className="charts-box" :options="radarOpt"  @onChartInit="getEcharts($event)"></hbt-echarts>
+        <TitleComponent>值班人员</TitleComponent>
+        <div class="list-box">
+            <div class="list">
+                <span>姓名</span><span>职务</span><span>联系电话</span>
+            </div>
+            <div class="list-scroll-box">
+                <div class="list  animate__animated "  v-list="index" v-for="(item,index) in expertList" :key="index">
+                    <span>{{item.name}}</span><span>{{item.job}}</span><span>{{item.tel}}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import {Component,Emit,PropSync,Vue} from 'vue-property-decorator';
+import TitleComponent from '@/components/title.component.vue';
+import ParkFileService from "@/service/park.service"
+import echartsOpt from "@/utils/echarts"
+@Component({
+    components:{
+        TitleComponent,
+    },
+    directives:{
+        list:{
+            bind:(el,binding)=>{
+                const timer = (binding.value+1)*500
+                setTimeout(()=>{
+                    el.classList.add("animate__fadeInRight")
+                },timer)
+            },
+            // update:(el,binding)=>{
+            //     el.classList.remove("animate__fadeInRight")
+            //     const timer = (binding.value+1)*500
+            //     setTimeout(()=>{
+            //         el.classList.add("animate__fadeInRight")
+            //     },timer)
+            // },
+        }
+    }
+})
+export default class ParkFileLeftComponent extends Vue {
+    public parkFileService = new ParkFileService();
+    public expertList = [] as any;
+    public radarOpt = echartsOpt.radarOpt;
+    public chart:any;
+    public timer:any;
+    created(){
+        this.getExpertList()
+    }
+
+    public getEcharts(chart){
+        chart.resize()
+        this.chart = chart
+        this.timer =setInterval(()=>{
+            this.changePieChange()
+        },4000)
+
+    }
+
+
+    public changePieChange() {
+         this.chart.clear();
+          this.chart.setOption(this.radarOpt)
+        //
+
+    }
+
+    public getExpertList(){
+        this.parkFileService.getExpertList().then((res)=>{
+            this.expertList = res.data
+        })
+    }
+    mounted(){
+        //
+    }
+    destroyed(){
+        clearInterval(this.timer);
+        this.timer = null;
+    }
+}
+</script>
+<style lang="scss" scoped>
+@keyframes flip2{
+	0%{
+		transform:perspective(1000px) rotateX(0);
+	}
+	100%{
+		transform:perspective(1000px) rotateX(360deg);
+	}
+}
+.full{
+    width: 100%;
+}
+.park-file-left{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .cards-box{
+        display: flex;
+        justify-content: space-between;
+        margin-top: 25px;
+        .card{
+            width: 140px;
+            color: #E8E8E8;
+            text-align: center;
+            line-height: 28px;
+	        animation: flip2 2s 1 .2s ease both;
+            // animation: flips 2s ease-in 5s infinite both;
+            .icon{
+                width: 7px;
+                height: 7px;
+                display: inline-block;
+                background: #88E29F;
+                border-radius: 50%;
+                margin: 0 6px;
+            }
+            .text{
+                font-family: "logo";
+            }
+            .blue{
+                font-family: "logo";
+                color: #7FB0FF;
+            }
+            .count{
+                font-family: "logo";
+                border-bottom:2px solid rgba($color: #D8D8D8, $alpha: 0.4);
+            }
+        }
+
+    }
+    .cards-box+.cards-box{
+        margin-bottom: 25px;
+    }
+    .charts-box{
+        width: 100%;
+        height: 320px;
+    }
+    .list-box{
+        width: 100%;
+        height: 1px;
+        flex: 1;
+        font-size: 14px;
+        margin: 20px 0;
+        display: flex;
+        flex-direction: column;
+        .list-scroll-box{
+            flex: 1;
+            height: 1px;
+            overflow-y: auto;
+            .list{
+                background: none;
+                opacity: 0;
+            }
+        }
+        .list{
+            background: rgba($color: #D8D8D8, $alpha: 0.4);
+            color: rgba($color: $font-color, $alpha: 0.8);
+            height: 32px;
+            display: flex;
+            align-items: center;
+            &:nth-child(even){
+                background: #808080;
+            }
+            span{
+                flex: 1;
+                padding-left: 20px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                &:last-child{
+                    flex: 1.5;
+                }
+            }
+        }
+    }
+
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/parkFile/right.component.vue b/src/components/parkFile/right.component.vue
new file mode 100644
index 0000000..89a608e
--- /dev/null
+++ b/src/components/parkFile/right.component.vue
@@ -0,0 +1,253 @@
+<template>
+    <div class="park-file-right  animate__animated animate__fadeInRight">
+        <TitleComponent>事故发生对比</TitleComponent>
+        <hbt-echarts className="charts-box" :options="lineOpt"  @onChartInit="getLineEcharts($event)"></hbt-echarts>
+        <TitleComponent>人车流量</TitleComponent>
+        <hbt-echarts className="charts-box" :options="radarOpt"  @onChartInit="getRadarEcharts($event)"></hbt-echarts>
+        <TitleComponent>能源消耗趋势</TitleComponent>
+        <hbt-echarts  className="charts-box" :options="barOpt"  @onChartInit="getBarEcharts($event)"></hbt-echarts>
+      <div class="center-box-park is-justify-space-around">
+        <div class="center-box-park-card-bg-park">
+          <div class="center-box-park-card-title">
+            环境预警
+          </div>
+          <div class="d-flex is-justify-space-between center-box-park-card-bottom">
+            <div>
+              <img :src="yjIcon" alt="">
+              <div>
+                <p class="num-style">45</p>
+                <p>预警数</p>
+              </div>
+            </div>
+            <div>
+              <img :src="yclIcon" alt="">
+              <div>
+                <p class="num-style">35</p>
+                <p>已处理</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="center-box-park-card-bg-park">
+          <div class="center-box-park-card-title">
+            风险预警
+          </div>
+          <div class="d-flex is-justify-space-between center-box-park-card-bottom">
+            <div>
+              <img :src="yjIcon" alt="">
+              <div>
+                <p class="num-style">145</p>
+                <p>预警数</p>
+              </div>
+            </div>
+            <div>
+              <img :src="yclIcon" alt="">
+              <div>
+                <p class="num-style">135</p>
+                <p>已处理</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="center-box-park-card-bg-park">
+          <div class="center-box-park-card-title">
+            应急事件
+          </div>
+          <div class="d-flex is-justify-space-between center-box-park-card-bottom">
+            <div>
+              <img :src="yjIcon" alt="">
+              <div>
+                <p class="num-style">15</p>
+                <p>预警数</p>
+              </div>
+            </div>
+            <div>
+              <img :src="yclIcon" alt="">
+              <div>
+                <p class="num-style">25</p>
+                <p>已处理</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+      </div>
+    </div>
+</template>
+<script lang="ts">
+import {Component,Emit,PropSync,Vue} from 'vue-property-decorator';
+import TitleComponent from '@/components/title.component.vue';
+import echartsOpt from "@/utils/echarts"
+import * as echarts from "echarts"
+import("@/assets/style/pageCommon.component.scss")
+@Component({
+    components:{
+        TitleComponent,
+    }
+})
+export default class ParkFileRightComponent extends Vue {
+    public lineOpt = JSON.parse(JSON.stringify(echartsOpt.closeLineOpt));
+    public barOpt =  JSON.parse(JSON.stringify(echartsOpt.closeLineOpt));
+    public radarOpt =  JSON.parse(JSON.stringify(echartsOpt.radarOpt));
+    public linechart:any;
+    public barchart:any;
+    public radarchart:any;
+    public activePieItem = 0;
+    public timer:any;
+    public flowTabs = ["人员","车辆"];
+    public staticTabs = ["天","周","月"];
+    public currentFlowTab = 0;
+    public currentStaticTab = 0;
+    yjIcon = require("@/assets/img/park/lighting-icon.png");
+    yclIcon = require("@/assets/img/park/yichuli.png");
+    created(){
+        this.radarOpt.color.push('rgba(250,223,164,0.6)');
+        this.radarOpt.radar.indicator = [
+             { text: '周一', max: 1000 },
+             { text: '周二', max: 1000 },
+             { text: '周三', max: 1000 },
+             { text: '周四', max: 1000 },
+             { text: '周五', max: 1000 },
+             { text: '周六', max: 1000 },
+             { text: '周日', max: 1000 },
+        ];
+        this.radarOpt.radar.radius = 80;
+        this.radarOpt.legend = {
+            right:0,
+            bottom:20,
+            orient:"vertical",
+            itemWidth: 10,
+            itemHeight: 10,
+            textStyle:{
+                color:"#BBBBBB"
+            }
+        }
+       this.radarOpt.series =[{
+            type: 'radar',
+            data: [{
+                value: new Array(7).fill(0).map(item=>Math.floor(Math.random()*1000)),
+                name: '车流量',
+                areaStyle: {}
+            } ,{
+                value: new Array(7).fill(0).map(item=>Math.floor(Math.random()*1000)),
+                name: '人流量',
+                areaStyle: {}
+            }]
+        }];
+        this.lineOpt.color = ["#7FB0FF","#FFF"];
+        this.lineOpt.grid.top = this.barOpt.grid.top=45;
+        this.lineOpt.legend.top =this.barOpt.legend.top=15;
+        this.lineOpt.series = [
+        {
+            name: '今年',
+            type: 'line',
+            symbol:"circle",
+            data: [320, 302, 301, 334,220, 182, 191, 234,150, 212, 201, 154]
+        },
+        {
+            name: '去年',
+            symbol:"circle",
+            type: 'line',
+            data: [120, 132, 101, 134,820, 832, 901, 934,320, 302, 301, 334]
+        }]
+        this.barOpt.yAxis[1] = JSON.parse(JSON.stringify(this.barOpt.yAxis[0]));
+        this.barOpt.xAxis.data = new Array(31).fill(0).map((item,index)=>index+1+"日");
+        this.barOpt.dataZoom = {
+            type:"inside",
+            startValue:0,
+            endValue:6
+        };
+        this.barOpt.series = [{
+            type: 'bar',
+            name:"用电量",
+            barWidth:12,
+            itemStyle: {
+                borderRadius:[6,6,0,0],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#7FB0FF' },
+                    { offset: 1, color: '#3179EA' }
+                ])
+            },
+            data:new Array(31).fill(0).map(item=>Math.floor(Math.random()*100))
+        },{
+            type: 'bar',
+            name:"耗能量",
+            barWidth:12,
+            itemStyle: {
+                borderRadius:[6,6,0,0],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#E8E8E8' },
+                    { offset: 1, color: '#999999' }
+                ])
+            },
+            data:new Array(31).fill(0).map(item=>Math.floor(Math.random()*100))
+        },
+        {
+            name: '用水量',
+            type: 'line',
+            yAxisIndex:1,
+            symbol:"circle",
+            data:new Array(31).fill(0).map(item=>Math.floor(Math.random()*100))
+        }]
+    }
+    public getLineEcharts(echart){
+        echart.resize()
+        this.linechart = echart
+    }
+    public getBarEcharts(echart){
+        echart.resize()
+        this.barchart = echart
+    }
+    public getRadarEcharts(echart){
+        echart.resize()
+        this.radarchart = echart;
+
+        this.timer =setInterval(()=>{
+            this.changePieChange()
+        },4000)
+    }
+    public chartResize(){
+        this.linechart.resize();
+        this.barchart.resize();
+        this.radarchart.resize();
+    }
+    public changePieChange() {
+        this.linechart.clear();
+        this.linechart.setOption(this.lineOpt)
+        this.barOpt.dataZoom.startValue+=1;
+        this.barOpt.dataZoom.endValue+=1;
+        this.barchart.setOption(this.barOpt)
+        this.radarchart.clear();
+        this.radarchart.setOption(this.radarOpt)
+
+    }
+    mounted(){
+        this.chartResize()
+        window.addEventListener("resize",this.chartResize);
+    }
+    destroyed(){
+        window.removeEventListener("resize",this.chartResize);
+        clearInterval(this.timer);
+        this.timer = null;
+    }
+}
+</script>
+<style lang="scss" scoped>
+.full{
+    width: 100%;
+}
+.park-file-right{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    .charts-box{
+        width: 100%;
+        height: 1px;
+        flex: 1;
+    }
+
+}
+</style>
diff --git a/src/components/permitPopUp.component.vue b/src/components/permitPopUp.component.vue
new file mode 100644
index 0000000..bef4457
--- /dev/null
+++ b/src/components/permitPopUp.component.vue
@@ -0,0 +1,86 @@
+<!--许可证弹窗-->
+<template>
+  <el-dialog
+      class="pop-up-permit"
+      :title="title"
+      append-to-body
+      :modal="false"
+      :close-on-click-modal="false"
+      :visible.sync="dialogVisibleForBigPop"
+      width="648"
+      top="5vh"
+      :before-close="handleClose">
+    <div slot="title">
+      <p class="title-style">{{title}}</p>
+      <el-divider></el-divider>
+    </div>
+    <slot></slot>
+  </el-dialog>
+</template>
+<script lang="ts">
+import {Component, PropSync, Prop, Vue, Emit} from 'vue-property-decorator';
+
+@Component
+export default class PermitPopUpComponent extends Vue {
+  //传入的报警信息列表
+  @PropSync('dialogVisibleForBigPop', {default: false}) syncDialogVisibleForPermit!: boolean;
+  @Prop({default: '排污许可证'}) title!: string;
+  @Emit("onClose")
+  onCloseCallback(){
+    //
+  }
+
+
+  //关闭弹窗
+  handleClose() {
+    this.syncDialogVisibleForPermit = false
+    this.onCloseCallback()
+  }
+
+
+}
+</script>
+<style lang="scss">
+
+
+.pop-up-permit {
+  .el-dialog {
+    width: 648px;
+    height: 410px;
+    background: url("~@/assets/img/permitBg.png") no-repeat 50% 50%;
+    .el-dialog__header{
+      padding-bottom: 0;
+      padding-left: 36px;
+      padding-right: 36px;
+    }
+    .el-dialog__headerbtn {
+      top: 25px;
+      right: 30px;
+    }
+
+    .el-dialog__title,.title-style {
+      //font-weight: bold;
+      position: relative;
+      font-size: 16px;
+      top: 8px;
+      left: 0;
+      color: #FFFFFF;
+    }
+
+    .el-dialog__body {
+      padding-top: 0 !important;
+      padding-left: 36px;
+      padding-right: 36px;
+    }
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #FFFFFF;
+  }
+
+  .el-dialog__title, .el-dialog__body, .el-form-item__label {
+    color: #FFFFFF;
+  }
+}
+
+</style>
diff --git a/src/components/pop.component.vue b/src/components/pop.component.vue
new file mode 100644
index 0000000..03d2026
--- /dev/null
+++ b/src/components/pop.component.vue
@@ -0,0 +1,33 @@
+<!--右侧告警弹窗-->
+<template>
+  <div class="box-content flex-0 gas-left-bar-con">
+    <title-component :show-close="true" @change-close="changeClose">
+      {{ title }}
+    </title-component>
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
+import TitleComponent from "@/components/title.component.vue"
+
+@Component({
+  components: {TitleComponent}
+})
+export default class PopComponent extends Vue {
+  //弹窗标题
+  @Prop({default: '告警详情'}) title!: any;
+
+
+  //监听点击事件
+  @Emit()
+  changeClose() {
+    // return item
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+
+
+</style>
diff --git a/src/components/rightList.component.vue b/src/components/rightList.component.vue
new file mode 100644
index 0000000..80d5792
--- /dev/null
+++ b/src/components/rightList.component.vue
@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <title-component :show-close="true" @change-close="close">
+      {{ dataList.title }}
+    </title-component>
+    <el-input v-if="['车辆列表','人员列表','黑名单'].includes(dataList.title)" class="search-style margin-top-30"
+              v-model="searchValue" suffix-icon="el-icon-search"
+              :placeholder="placeholder"></el-input>
+    <div class="dateRange" v-if="['车辆列表','人员列表'].includes(dataList.title)">
+      <el-date-picker
+          class="search-style"
+          v-model="start"
+          type="date"
+          placeholder="开始时间">
+      </el-date-picker>
+      <span>至</span>
+      <el-date-picker
+          class="search-style"
+          v-model="end"
+          type="date"
+          placeholder="结束时间">
+      </el-date-picker>
+    </div>
+    <div class="risk-title">
+      <div :key="i" v-for="(item,i) in dataList.head" class="risk-title-item">{{ item }}</div>
+
+    </div>
+    <div class="risk-list">
+      <div class="risk-list-box animate__animated" v-list="i" :key="i" v-for="(item,i) in dataList.data">
+        <div class="risk-list-box-item" :title="item.name">{{ item.name }}</div>
+        <div class="risk-list-box-item" :title="item.attr1">{{ item.attr1 }}</div>
+        <div class="risk-list-box-item" :title="item.attr2">{{ item.attr2 }}</div>
+      </div>
+    </div>
+    <el-pagination
+        v-if="dataList.data && ['车辆列表','人员列表'].includes(dataList.title)"
+        background
+        layout="prev, pager, next"
+        :total="dataList.data.length">
+    </el-pagination>
+  </div>
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
+import TitleComponent from "@/components/title.component.vue";
+
+@Component(
+    {
+      components: {
+        TitleComponent,
+      },
+    }
+)
+export default class RightListComponent extends Vue {
+  //传入的报警信息列表
+  @Prop({default: {data: [], head: [], title: ''}}) dataList!: any;
+
+  //监听报警信息列表数据变化
+  @Watch('dataList', {immediate: true, deep: true})
+  onChangeValue(newVal: any, oldVal: any) {
+
+  }
+
+  searchValue = ''
+  start = ''
+  end = ''
+
+  get placeholder() {
+    let placeholder = ''
+    switch (this.dataList.title) {
+      case '车辆列表':
+      case '黑名单':
+        placeholder = '请输入车牌号'
+        break
+      case '人员列表':
+        placeholder = '请输入人员名称'
+        break
+      default:
+        break
+    }
+    return placeholder
+  }
+
+  //监听点击事件
+  @Emit('getItem')
+  getItem(item) {
+    // return item
+  }
+
+  @Emit('close')
+  close() {
+
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+::v-deep {
+  .el-pagination {
+    text-align: center;
+    margin-top: 10px;
+  }
+
+  .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
+    background-color: transparent;
+    border: 1px solid #ffffff;
+    color: #FFFFFF;
+    &:hover{
+      color: #FFFFFF;
+    }
+  }
+
+  .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background-color: rgba(216, 216, 216, 0.3);
+  }
+
+  .search-style {
+    .el-input__inner {
+      border-radius: 20px;
+      background: transparent;
+      color: #FFFFFF;
+
+      &:focus {
+        border-color: #FFFFFF;
+      }
+    }
+  }
+
+  .dateRange {
+    display: flex;
+    align-items: center;
+    margin-top: 12px;
+    justify-content: space-between;
+
+    span {
+      width: 30px;
+      text-align: center;
+      font-size: 12px;
+    }
+
+    .search-style {
+      width: 44%;
+    }
+  }
+}
+
+
+</style>
diff --git a/src/components/safety/hiddenDanger/left/chartData.js b/src/components/safety/hiddenDanger/left/chartData.js
new file mode 100644
index 0000000..fb99bff
--- /dev/null
+++ b/src/components/safety/hiddenDanger/left/chartData.js
@@ -0,0 +1,242 @@
+export const pieChartData = function (option = {}) {
+    return {
+        title: {
+            text: option?.text,
+            subtext: option?.subtext,
+            itemGap: 5,
+            x: '48%',
+            y: '38%',
+            textAlign:'center',
+            textStyle: {
+                fontSize: 17,
+                fontWeight: '600',
+                align: "center",
+                color: '#E8E8E8',
+            },
+            subtextStyle: {
+                fontSize: 14,
+                fontWeight: 'normal',
+                align: "center",
+                color: '#E8E8E8'
+            },
+        },
+        legend: {
+            right: 'right',
+            bottom:'bottom',
+            itemGap: 10,
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff"
+            },
+            data:[
+                {
+                    name:'已消除',
+                    icon:'roundRect'
+                },{
+                    name:'待验收',
+                    icon:'roundRect'
+                },{
+                    name:'待整改',
+                    icon:'roundRect'
+                },{
+                    name:'整改中',
+                    icon:'roundRect'
+                },
+            ]
+        },
+        tooltip: {
+            trigger: 'item'
+        },
+        series: [
+            {
+                type: 'pie',
+                selectedMode: 'single',
+                selectedOffset: 10,
+                left:0,
+                radius: [50, 75],
+                data: [
+                    {value: 25, name: '已消除'},
+                    {value: 1, name: ''},
+                    {value: 25, name: '待验收'},
+                    {value: 1, name: ''},
+                    {value: 40, name: '待整改'},
+                    {value: 1, name: ''},
+                    {value: 10, name: '整改中'},
+                    {value: 1, name: ''},
+                ],
+                color: ['#7FB0FF', null, '#FADFA4', null, '#C9FFD7', null, '#FFFFFF', null,],
+                emphasis: {
+                    label: {
+                        show: true,
+                        position:'inside',
+                        color:'#ffffff',
+                        textBorderColor: "rgb(111,111,111)",
+                        textBorderwidth: 2,
+                        backgroundColor:'transparent',
+                        formatter:function (params) {
+                            if (params.data.name){
+                                return params.data.value+'%'
+                            }else {
+                                return ''
+                            }
+
+                        }
+                    },
+                    itemStyle: {
+                        // shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        // borderWidth:5,
+                        // borderColor:"rgba(255,255,255,0)",
+                        // shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                },
+                itemStyle: {},
+                select: {
+                    itemStyle: {}
+                },
+                labelLine: {
+                    show: false
+                },
+                label: {
+                    show: false,
+                    position:'inside',
+                    formatter:function (params) {
+                        if (params.data.name){
+                            return params.data.value
+                        }else {
+                            return ''
+                        }
+
+                    }
+                },
+                tooltip:{
+                    backgroundColor:'rgba(0,0,0,0.4)',
+                    textStyle:{
+                        color:'#ffffff'
+                    }
+
+                }
+            }
+        ],
+        animationDuration: 0,
+        animationDurationUpdate: 3000,
+        animationEasing: 'linear',
+        animationEasingUpdate: 'linear'
+    }
+}
+export const lineChartData = function () {
+    return {
+        color:['#7FB0FF','#FADFA4','#C9FFD7','#FFFFFF'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: ['第一周','第二周','第三周','第四周','第五周']
+        },
+        legend: {
+            top: 'top',
+            itemGap: 30,
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff"
+            },
+            data:[
+                {
+                    name:'新增',
+                    icon:'roundRect'
+                },{
+                    name:'已验收',
+                    icon:'roundRect'
+                }
+            ]
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name:'新增',
+                data: [60,80,140,70,100],
+                type: 'line',
+                symbolSize: 7,
+                lineStyle: {
+                    color: '#7FB0FF',
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            },{
+                name:'已验收',
+                data: [50,70,130,60,90],
+                type: 'line',
+                symbolSize: 7,
+                lineStyle: {
+                    color: '#FADFA4',
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            }
+        ],
+
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 30,
+            x2: 12,
+            y2: 20,
+        }
+    }
+}
diff --git a/src/components/safety/hiddenDanger/left/hiddenDangerLeft.component.html b/src/components/safety/hiddenDanger/left/hiddenDangerLeft.component.html
new file mode 100644
index 0000000..b9c802b
--- /dev/null
+++ b/src/components/safety/hiddenDanger/left/hiddenDangerLeft.component.html
@@ -0,0 +1,33 @@
+<div class="env-left">
+    <div class="box-content flex-15">
+        <title-component :imgSrc="imgSrc">
+            隐患治理
+        </title-component>
+        <div class="tabs-style">
+            <el-radio-group @change="changeData" v-model="status">
+                <el-radio-button :label="1">待核查</el-radio-button>
+                <el-radio-button :label="2">待整改</el-radio-button>
+                <el-radio-button :label="3">整改中</el-radio-button>
+                <el-radio-button :label="4">待验收</el-radio-button>
+            </el-radio-group>
+        </div>
+        <div class="risk-title">
+            <div class="risk-title-item">隐患名称</div>
+            <div class="risk-title-item">上报时间</div>
+        </div>
+        <div class="risk-list">
+            <div class="risk-list-box animate__animated" v-list="i" @click="getHiddenDetail(item)" :key="i" v-for="(item,i) in hiddenList">
+                <div class="risk-list-box-item" :title="item.name">{{item.name}}</div>
+                <div class="risk-list-box-item" :title="item.time">{{item.time}}</div>
+            </div>
+        </div>
+    </div>
+    <div class="box-content margin-top-40">
+        <title-component :imgSrc="imgSrc">
+            隐患统计
+        </title-component>
+            <hbt-echarts className="risk-line-chart-all" class="margin-top-23"  :options="lineData" @onChartInit="getEcharts($event,'lineChart')"></hbt-echarts>
+            <hbt-echarts className="risk-pie-chart-all" class=" margin-top-23"  :options="option1" @onChartInit="getEcharts($event,'rightChart')"></hbt-echarts>
+
+    </div>
+</div>
diff --git a/src/components/safety/hiddenDanger/left/hiddenDangerLeft.component.ts b/src/components/safety/hiddenDanger/left/hiddenDangerLeft.component.ts
new file mode 100644
index 0000000..aab616f
--- /dev/null
+++ b/src/components/safety/hiddenDanger/left/hiddenDangerLeft.component.ts
@@ -0,0 +1,144 @@
+import {Component, Emit, Vue} from 'vue-property-decorator';
+import template from "./hiddenDangerLeft.component.html"
+import {pieChartData,lineChartData} from "./chartData";
+
+import TitleComponent from "@/components/title.component.vue"
+import RiskService from "@/service/risk.service";
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+    directives:{
+        //列表数据动态飞入动画
+        list:{
+            bind:(el,binding)=>{
+                const timer = (binding.value+1)*100
+                setTimeout(()=>{
+                    el.classList.add("animate__fadeInLeft")
+                },timer)
+            },
+        }
+    }
+})
+export default class HiddenDangerLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    timer: any = null;
+    //饼图数据
+    option1: any =  pieChartData({text:'作业情况',subtext:'等级占比'})
+    //饼图实例
+    pieChart: any = {};
+    //折线图实例
+    lineChart: any = {};
+    rightChart:any = {}
+    activePieItem = 0;
+    //折线图数据
+    lineData = lineChartData()
+    count = 1
+    status = '1'
+    //特殊作业mock数据
+    // hiddenList = [];
+    get hiddenList(){
+        return this.$store.state.hiddenDangrousList.filter(item=>item.reformStatus == this.status)
+    }
+    //切换饼图高亮区域
+    changePieChange() {
+
+        if (this.activePieItem > 8) {
+            this.activePieItem = 0
+        }
+
+        //定时移除高亮选中区
+        this.rightChart.dispatchAction({
+            type: "downplay",
+            seriesIndex: 0,
+        });
+        //定时加载选中高亮区
+        this.rightChart.dispatchAction({
+            type: "highlight",
+            dataIndex: this.activePieItem
+        })
+        this.activePieItem += 2;
+
+    }
+
+    //获取图表实例
+    getEcharts(e,type) {
+        this[type] = e
+    }
+
+
+    //随机整数
+    getRandomInt(min: number, max: number) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
+    }
+
+
+
+    //监听页面变化重新绘制图表
+    resize() {
+        setTimeout(() => {
+            this.rightChart.resize();
+            this.lineChart.resize();
+        }, 300)
+    }
+    public riskService = new RiskService();
+    //获取隐患详情
+    getHiddenDetail(params){
+        this.showRight(params)
+       /* this.riskService.getRiskDetail(params).then((res:any)=>{
+            if (res.code === 200){
+                this.showRight(res.data)
+            }else{
+                this.$message.error(res.message)
+            }
+        })*/
+    }
+    //定时刷新图表
+    lineChartChange(){
+        this.lineChart.clear();
+        this.lineChart.setOption(lineChartData())
+    }
+    mounted() {
+        this.changeData(1)
+        this.timer = setInterval(() => {
+            this.lineChartChange()
+            this.changePieChange()
+        }, 3000)
+
+        window.addEventListener("resize", this.resize);
+    }
+
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+    @Emit()
+    showRight(item){
+        console.log(item)
+    }
+    //切换风险级别
+    changeData(val){
+        //
+    }
+    delay(i) {
+        return `animate__delay-${i}s`
+    }
+
+
+}
+
diff --git a/src/components/safety/hiddenDanger/left/mockData.js b/src/components/safety/hiddenDanger/left/mockData.js
new file mode 100644
index 0000000..41d45d2
--- /dev/null
+++ b/src/components/safety/hiddenDanger/left/mockData.js
@@ -0,0 +1,63 @@
+export const mockData = {
+    "1":[
+        { "id": "000542ff-f569-4823-88aa-f7a6904131c9", "name": "含油污水处理分析单元","description":"超标排放", "level": 1 },
+        { "id": "004114e8-8d20-4ada-a52d-a152f5111f99", "name": "卸油作业分析单元","description":"燃油泄露风险",  "level": 1 },
+        { "id": "00655661-d216-4132-a89c-486f7fb6f884", "name": "发油作业分析单元","description":"燃油泄露风险", "level": 1 },
+        { "id": "012fe1e5-9c3f-45e6-aa96-4f4c04c9cc48", "name": "配电间分析单元","description":"漏电风险", "level": 1 },
+        { "id": "019889df-e79c-4870-849b-2abeefbf1a6a", "name": "拱顶罐、内浮顶罐分析单元","description":"燃油泄露风险", "level": 1 },
+        { "id": "0222ad5e-0668-4861-bd27-fac137cd7eb8", "name": "汽、柴油卸油分析单元","description":"泄露风险", "level": 1 },
+        { "id": "02385672-2f50-488f-8b89-9cd0b98ccae6", "name": "含油污水处理分析单元","description":"超标排放", "level": 1 },
+        { "id": "0253f566-b032-48ea-966e-2721dfe72208", "name": "拱顶罐、内浮顶罐分析单元","description":"燃油泄露风险", "level": 1 },
+    ],
+    "2":[
+        { "id": "00655661-d216-4132-a89c-486f7fb6f884", "name": "发油作业分析单元","description":"燃油泄露风险", "level": 2 },
+        { "id": "012fe1e5-9c3f-45e6-aa96-4f4c04c9cc48", "name": "配电间分析单元","description":"漏电风险", "level": 2 },
+        { "id": "019889df-e79c-4870-849b-2abeefbf1a6a", "name": "拱顶罐、内浮顶罐分析单元","description":"燃油泄露风险", "level": 2 },
+        { "id": "0222ad5e-0668-4861-bd27-fac137cd7eb8", "name": "汽、柴油卸油分析单元","description":"泄露风险", "level": 2 },
+        { "id": "02385672-2f50-488f-8b89-9cd0b98ccae6", "name": "含油污水处理分析单元","description":"超标排放", "level": 2 },
+        { "id": "000542ff-f569-4823-88aa-f7a6904131c9", "name": "含油污水处理分析单元","description":"超标排放", "level": 2 },
+        { "id": "004114e8-8d20-4ada-a52d-a152f5111f99", "name": "卸油作业分析单元","description":"燃油泄露风险",  "level": 2 },
+        { "id": "0253f566-b032-48ea-966e-2721dfe72208", "name": "拱顶罐、内浮顶罐分析单元","description":"燃油泄露风险", "level": 2 },
+    ],
+    "3":[
+        { "id": "019889df-e79c-4870-849b-2abeefbf1a6a", "name": "拱顶罐、内浮顶罐分析单元","description":"燃油泄露风险", "level": 3 },
+        { "id": "0222ad5e-0668-4861-bd27-fac137cd7eb8", "name": "汽、柴油卸油分析单元","description":"泄露风险", "level": 3 },
+        { "id": "02385672-2f50-488f-8b89-9cd0b98ccae6", "name": "含油污水处理分析单元","description":"超标排放", "level": 3 },
+        { "id": "000542ff-f569-4823-88aa-f7a6904131c9", "name": "含油污水处理分析单元","description":"超标排放", "level": 3 },
+        { "id": "004114e8-8d20-4ada-a52d-a152f5111f99", "name": "卸油作业分析单元","description":"燃油泄露风险",  "level": 3 },
+        { "id": "00655661-d216-4132-a89c-486f7fb6f884", "name": "发油作业分析单元","description":"燃油泄露风险", "level": 3 },
+        { "id": "012fe1e5-9c3f-45e6-aa96-4f4c04c9cc48", "name": "配电间分析单元","description":"漏电风险", "level": 3 },
+        { "id": "0253f566-b032-48ea-966e-2721dfe72208", "name": "拱顶罐、内浮顶罐分析单元","description":"燃油泄露风险", "level": 3 }],
+    "4":[
+        { "id": "000542ff-f569-4823-88aa-f7a6904131c9", "name": "含油污水处理分析单元","description":"超标排放", "level": 4 },
+        { "id": "004114e8-8d20-4ada-a52d-a152f5111f99", "name": "卸油作业分析单元","description":"燃油泄露风险",  "level": 4 },
+        { "id": "00655661-d216-4132-a89c-486f7fb6f884", "name": "发油作业分析单元","description":"燃油泄露风险", "level": 4 },
+        { "id": "012fe1e5-9c3f-45e6-aa96-4f4c04c9cc48", "name": "配电间分析单元","description":"漏电风险", "level": 4 },
+        { "id": "019889df-e79c-4870-849b-2abeefbf1a6a", "name": "拱顶罐、内浮顶罐分析单元","description":"燃油泄露风险", "level": 4 },
+        { "id": "0222ad5e-0668-4861-bd27-fac137cd7eb8", "name": "汽、柴油卸油分析单元","description":"泄露风险", "level": 4 },
+        { "id": "02385672-2f50-488f-8b89-9cd0b98ccae6", "name": "含油污水处理分析单元","description":"超标排放", "level": 4 },
+        { "id": "0253f566-b032-48ea-966e-2721dfe72208", "name": "拱顶罐、内浮顶罐分析单元","description":"燃油泄露风险", "level": 4 }
+    ],
+}
+
+export const detail = {
+    "id": "1736bd5f-765e-4c4a-9786-8bc06a2134eb",
+    "name": "卸油作业分析单元",
+    "riskProbability": "可能",
+    "riskFactor": "泄漏、火灾、爆炸、憋压、中毒",
+    "affectConsequences": "泄漏、火灾、爆炸、憋压、中毒",
+    "level": 1,
+    "enterpriseId": "6",
+    "enterprise": "中石油兰州石化榆林化工有限公司",
+    "responsiblePersonId": "1fe37818-c849-4ba2-a53d-d440d1cbf983",
+    "responsiblePerson": "亓美枫",
+    "riskControlMeasures": "内外操每时进行巡检，记录操作数据",
+    "lastReviewDate": "2022-04-15 07:35:34",
+    "majorHazardSourcesId": "954e5e6f-91c5-46d1-a085-ad0e6cdae10c",
+    "majorHazardSourcesName": "氯气瓶仓库单元",
+    "personName": "亓美枫",
+    "phone": "15500692422",
+    "addr": "台西纬五路117号-1-3",
+    "remark": "台西纬五路117号-1-3",
+}
+
diff --git a/src/components/safety/hiddenDanger/right/chartData.js b/src/components/safety/hiddenDanger/right/chartData.js
new file mode 100644
index 0000000..de75be0
--- /dev/null
+++ b/src/components/safety/hiddenDanger/right/chartData.js
@@ -0,0 +1,272 @@
+export const barTopChartData = function ($echarts) {
+    let barTopColor = [
+        "#B8ECFF",
+        "#7FB0FF",
+        "#E8E8E8",
+        "#FADFA4",
+        '#F9BAFF',
+        '#FFB7B7',
+        '#C9FFD7',
+        '#947FEA',
+    ];
+    let barBottomColor = [
+        "#7DBBD2",
+        "#5485D5",
+        "#999999",
+        '#CFB376',
+        '#A576A9',
+        '#BF8888',
+        '#82AF8E',
+        '#60519C',
+    ];
+    const com =  ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学', '海利得'];
+    const data1 = []
+    for (let i = 0; i < com.length; i++) {
+        data1.push({
+            name:com[i],
+            value:parseInt(String(Math.random()*100))
+        })
+    }
+
+    let seriesData = data1.map((item,i)=>{
+        return {
+            ...item,
+            itemStyle: {
+                borderRadius:[4,4,0,0],
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                        {
+                            offset: 0,
+                            color: barTopColor[i], //  0%  处的颜色
+                        },
+                        {
+                            offset: 1,
+                            color: barBottomColor[i], //  100%  处的颜色
+                        },
+                    ],
+                    global: false, //  缺省为  false
+                }
+
+            },
+            barWidth: 8,
+        }
+    })
+    return {
+        color:[
+            "#B8ECFF",
+            "#7FB0FF",
+            "#E8E8E8",
+            "#FADFA4",
+            '#F9BAFF',
+            '#FFB7B7'
+        ],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            top: '8%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学', '海利得'],
+                axisTick: {
+                    show: false,
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#999999',
+                        type: 'solid'
+                    },
+                },
+                axisLabel: {
+                    //x轴文字的配置
+                    show: true,
+                    interval: 0,//使x轴文字显示全
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: '#999999',
+                    }
+                },
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#999999',
+                        type: 'solid'
+                    },
+                },
+                axisLabel: {
+                    //x轴文字的配置
+                    show: true,
+                    interval: 0,//使x轴文字显示全
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: '#999999',
+                    }
+                },
+            }
+        ],
+        series: [
+            {
+                name: '',
+                type: 'bar',
+                barWidth: 8,
+                data: seriesData
+            }
+
+        ]
+    };
+
+}
+export const barBottomChartData = function () {
+    const yData = ['联化科技股份有限公司', '立本作物科技有限公司', '圣丰集团有限公司', '茂盛生物有限公司', '利尔化学股份有限公司', '海利得新材料股份有限公司','恒力石化股份有限公司'];
+    let data = [90,80,70,60,55,50,46];
+    data.sort((a, b) => b - a);
+    let max = Math.max.apply(null, data);
+    max = max + 30;
+    let getMax = [];
+    for (let i = 0; i < yData.length; i++) {
+        getMax.push(max);
+    }
+
+    return {
+        tooltip: {
+            show:false,
+            trigger: 'axis',
+            axisPointer: {
+                type: 'none',
+            },
+            formatter: function (params) {
+                return params[0].name + ' : ' + params[0].value;
+            },
+        },
+        legend: {
+            show:false,
+            right: '25%',
+            top: '0%',
+            itemWidth: 10,
+            itemHeight: 10,
+            textStyle: {
+                color: '#D4E5FF',
+                padding: [5, 10, 5, 10]
+            },
+        },
+        xAxis: {
+            show: false,
+            type: 'value',
+        },
+        grid: {
+            right: '12%',
+            left: '1%',
+            top: '6%',
+            bottom: '1%',
+        },
+        yAxis: [
+            {
+                type: 'category',
+                inverse: true,
+                offset: -8,
+                axisLabel: {
+                    show: true,
+                    align: 'left',
+                    verticalAlign:'bottom',
+                    lineHeight: 28,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '12',
+                    },
+                },
+                splitLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                },
+                data: yData,
+            },
+            {
+                type: 'category',
+                inverse: true,
+                offset: 0,
+                axisTick: 'none',
+                axisLine: 'none',
+                show: true,
+                axisLabel: {
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '14',
+                    },
+                },
+                data: data,
+            },
+        ],
+        series: [
+            {
+                name: '',
+                type: 'bar',
+                stack: 'user',
+                zlevel: 1,
+                itemStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 1,
+                        y2: 0,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: '#7FB0FF', //  0%  处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: '#5485D5', //  100%  处的颜色
+                            },
+                        ],
+                        global: false, //  缺省为  false
+                    }
+                },
+                barWidth: 10,
+                data: data,
+            },
+            {
+                name: '背景',
+                type: 'bar',
+                barWidth: 10,
+                barGap: '-100%',
+                data: getMax,
+                itemStyle: {
+                    color: 'rgba(21,36,72,0.5)',
+                },
+            },
+        ],
+    };
+
+}
diff --git a/src/components/safety/hiddenDanger/right/detail.component.html b/src/components/safety/hiddenDanger/right/detail.component.html
new file mode 100644
index 0000000..c7389d3
--- /dev/null
+++ b/src/components/safety/hiddenDanger/right/detail.component.html
@@ -0,0 +1,38 @@
+<div class="env-right">
+    <div class="box-content flex-0 height-auto safe">
+        <title-component :imgSrc="imgSrc" :show-close="true" @change-close="changeClose">
+            隐患详情
+        </title-component>
+        <el-steps class="margin-top-30" :space="500" :active="2" align-center>
+            <el-step title="上报"></el-step>
+            <el-step title="核查"></el-step>
+            <el-step title="整改"></el-step>
+            <el-step title="验收"></el-step>
+        </el-steps>
+        <div class="risk-info margin-top-23 hidden">
+            <div class="content-style"><span>隐患名称:</span><span>{{ detailData.name }}</span></div>
+            <div class="content-style"><span>关联风险:</span><span class="link-style" @click="showRiskDetail(detailData.risk)">{{ detailData.risk }}</span></div>
+            <div class="content-style"><span>上报日期:</span><span>{{ detailData.reportingDate }}</span></div>
+            <div class="content-style"><span>排查人员:</span><span>{{ detailData.inspector }}</span></div>
+            <div class="content-style"><span>隐患详情:</span><span>{{ detailData.hiddenDangerDetails }}</span></div>
+            <div class="content-style"><span>整改措施:</span><span>{{ detailData.rectificationMeasure }}</span></div>
+           <div class="content-style">
+                <div class="bg-gray">
+                    <div><span>责任单位:</span><span>{{ detailData.enterprise }}</span></div>
+                    <div class="inside-con">
+                        <ul>
+                            <li><span>负责人:</span><span>{{ detailData.head }}</span></li>
+                            <li><span>联系电话:</span><span>{{ detailData.phone }}</span></li>
+                        </ul>
+                        <div>
+                            <img :src="personIcon" alt="">
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="content-style col-3"><span>整改期限:</span><span>{{ detailData.period }}</span><span :class="statusMap[detailData.status].class"><i class="cycle-icon" :class="statusMap[detailData.status].classBg"></i>{{statusMap[detailData.status].name}}</span></div>
+            <div class="content-style"><span>备注:</span><span>{{ detailData.remark }}</span></div>
+        </div>
+    </div>
+</div>
diff --git a/src/components/safety/hiddenDanger/right/hiddenDangerDetail.component.ts b/src/components/safety/hiddenDanger/right/hiddenDangerDetail.component.ts
new file mode 100644
index 0000000..2015467
--- /dev/null
+++ b/src/components/safety/hiddenDanger/right/hiddenDangerDetail.component.ts
@@ -0,0 +1,85 @@
+import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
+import template from "./detail.component.html"
+
+import TitleComponent from "@/components/title.component.vue"
+import {detail} from "@/components/safety/risk/left/mockData";
+
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class HiddenDangerDetailComponent extends Vue {
+    //标题图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //风险详情
+    @Prop({default: {}}) detailData!: any
+    //人物照片
+    personIcon = require('@/assets/img/person.png')
+    //风险等级map
+    titleNameMap = {
+        1: '一级风险',
+        2: '二级风险',
+        3: '三级风险',
+        4: '四级风险',
+    }
+//状态枚举
+    statusMap = {
+        1: {
+            name: '已超期',
+            class: 'red',
+            classBg: 'red-bg',
+        }, 2: {
+            name: '已超期',
+            class: 'red',
+            classBg: 'red-bg',
+        }, 4: {
+            name: '已超期',
+            class: 'red',
+            classBg: 'red-bg',
+        }, 5: {
+            name: '已超期',
+            class: 'red',
+            classBg: 'red-bg',
+        },
+
+    }
+
+    @Emit()
+    changeClose() {
+        //监听关闭事件
+    }
+
+    showRiskDetail(risk) {
+        const obj = {
+            name: risk
+        }
+        this.showRisk({...detail, ...obj})
+
+    }
+
+    //查看危险源信息
+    @Emit()
+    showRisk(item) {
+        //查看危险源信息
+    }
+
+    mounted() {
+
+    }
+
+
+    destroyed() {
+        //todo 销毁项
+    }
+
+}
+
diff --git a/src/components/safety/hiddenDanger/right/hiddenDangerRight.component.html b/src/components/safety/hiddenDanger/right/hiddenDangerRight.component.html
new file mode 100644
index 0000000..e397965
--- /dev/null
+++ b/src/components/safety/hiddenDanger/right/hiddenDangerRight.component.html
@@ -0,0 +1,22 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            隐患超期统计
+        </title-component>
+        <hbt-echarts className="hidden-bar-chart-top" class="margin-top-23"  :options="topBarChartData" @onChartInit="getEcharts($event,'barTop')"></hbt-echarts>
+        <div class="risk-title">
+            <div class="risk-title-item">隐患名称</div>
+            <div class="risk-title-item">超期时间</div>
+            <div class="risk-title-item">责任单位</div>
+        </div>
+        <div class="risk-list">
+            <div class="risk-list-box animate__animated" v-list="i"  :key="i" v-for="(item,i) in hiddenList">
+                <div class="risk-list-box-item" :title="item.name">{{item.name}}</div>
+                <div class="risk-list-box-item" :title="item.description">{{item.delay}}天</div>
+                <div class="risk-list-box-item" :title="item.description">{{item.company}}</div>
+            </div>
+        </div>
+    </div>
+
+</div>
+
diff --git a/src/components/safety/hiddenDanger/right/hiddenDangerRight.component.ts b/src/components/safety/hiddenDanger/right/hiddenDangerRight.component.ts
new file mode 100644
index 0000000..162de23
--- /dev/null
+++ b/src/components/safety/hiddenDanger/right/hiddenDangerRight.component.ts
@@ -0,0 +1,72 @@
+import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
+import template from "./hiddenDangerRight.component.html"
+import {barTopChartData,barBottomChartData} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+import * as echarts from "echarts";
+import RiskService from "@/service/risk.service";
+
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+    directives:{
+        //列表数据动态飞入动画
+        list:{
+            bind:(el,binding)=>{
+                const timer = (binding.value+1)*100
+                setTimeout(()=>{
+                    el.classList.add("animate__fadeInRight")
+                },timer)
+            },
+        }
+    }
+})
+export default class HiddenDangerRightComponent extends Vue {
+    //标题图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+
+    //企业作业统计柱状图数据
+    topBarChartData = {}
+    //企业作业统计柱状图实例
+    barTop:any = {}
+    //企业延期隐患排行
+    hiddenList:any[] = []
+    //获取图表实例
+    getEcharts(e,type){
+        this[type] = e
+        this.topBarChartData = barTopChartData(echarts)
+    }
+    public riskService = new RiskService();
+    getHiddenList(){
+        this.riskService.getHiddenList().then((res:any)=>{
+            if (res.code === 200){
+                this.hiddenList = res.data;
+            }else{
+                this.$message.error(res.message)
+            }
+        })
+    }
+    //图表自适应
+    resize() {
+        setTimeout(() => {
+            this.barTop.resize();
+        }, 300)
+    }
+    mounted() {
+        this.getHiddenList()
+        window.addEventListener("resize", this.resize);
+    }
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+}
+
diff --git a/src/components/safety/index/left/chartData.js b/src/components/safety/index/left/chartData.js
new file mode 100644
index 0000000..8741951
--- /dev/null
+++ b/src/components/safety/index/left/chartData.js
@@ -0,0 +1,102 @@
+export const pieChartData = function (option = {}) {
+    return {
+        title: {
+            text: option?.text,
+            subtext: option?.subtext,
+            itemGap: 5,
+            x: '46%',
+            y: '38%',
+            textAlign:'center',
+            textStyle: {
+                fontSize: 17,
+                fontWeight: '600',
+                align: "center",
+                color: '#E8E8E8',
+            },
+            subtextStyle: {
+                fontSize: 14,
+                fontWeight: 'normal',
+                align: "center",
+                color: '#E8E8E8'
+            },
+        },
+        tooltip: {
+            trigger: 'item'
+        },
+        series: [
+            {
+                type: 'pie',
+                selectedMode: 'single',
+                selectedOffset: 10,
+                left:0,
+                radius: [50, 65],
+                data: [
+                    {value: 25, name: '一级'},
+                    {value: 1, name: ''},
+                    {value: 25, name: '二级'},
+                    {value: 1, name: ''},
+                    {value: 15, name: '三级'},
+                    {value: 1, name: ''},
+                    {value: 20, name: '四级'},
+                    {value: 1, name: ''},
+                ],
+                color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null],
+                emphasis: {
+                    label: {
+                        show: true,
+                        position:'inside',
+                        color:'#ffffff',
+                        textBorderColor: "rgb(111,111,111)",
+                        textBorderWidth: 3,
+                        backgroundColor:'transparent',
+                        formatter:function (params) {
+                            if (params.data.name){
+                                return params.data.value+'%'
+                            }else {
+                                return ''
+                            }
+
+                        }
+                    },
+                    itemStyle: {
+                        // shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        // borderWidth:5,
+                        // borderColor:"rgba(255,255,255,0)",
+                        // shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                },
+                itemStyle: {},
+                select: {
+                    itemStyle: {}
+                },
+                labelLine: {
+                    show: false
+                },
+                label: {
+                    show: false,
+                    position:'inside',
+                    formatter:function (params) {
+                        if (params.data.name){
+                            return params.data.value
+                        }else {
+                            return ''
+                        }
+
+                    }
+                },
+                tooltip:{
+                    backgroundColor:'rgba(0,0,0,0.4)',
+                    textStyle:{
+                        color:'#ffffff'
+                    }
+
+                }
+            }
+        ],
+        animationDuration: 0,
+        animationDurationUpdate: 3000,
+        animationEasing: 'linear',
+        animationEasingUpdate: 'linear'
+    }
+}
diff --git a/src/components/safety/index/left/safetyIndexLeft.component.html b/src/components/safety/index/left/safetyIndexLeft.component.html
new file mode 100644
index 0000000..1baa247
--- /dev/null
+++ b/src/components/safety/index/left/safetyIndexLeft.component.html
@@ -0,0 +1,52 @@
+<div class="env-left">
+    <div class="box-content flex-0 height-auto">
+        <title-component :imgSrc="imgSrc">
+            安全态势
+        </title-component>
+        <div class="card-box is-justify-space-around padding-top-20">
+            <div class="card-box-item-2">
+                <div class="card-box-item-top-long font-size-16">95分</div>
+                <div class="card-box-item-bottom font-size-14">
+                    安全分数
+                </div>
+            </div>
+            <div class="card-box-item-2">
+                <div class="card-box-item-top-long font-size-16">1024天</div>
+                <div class="card-box-item-bottom font-size-14">
+                    安全生产天数
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="box-content margin-top-40">
+        <title-component :imgSrc="imgSrc">
+            告警信息
+        </title-component>
+        <warning-list-component class="margin-top-30" @getItem="showWaring" :data-list="dataList"></warning-list-component>
+    </div>
+    <div class="box-content flex-1 margin-top-40">
+        <title-component :imgSrc="imgSrc">
+            重大风险
+        </title-component>
+        <div class="risk-box is-justify-space-between">
+            <div class="risk-item">
+                <div class="zdwxy"></div>
+                <div>
+                    <p class="env-number-stlye">745</p>
+                    <p>重大危险源(个)</p>
+                </div>
+            </div>
+            <div class="risk-item">
+                <div class="fxx"></div>
+                <div>
+                    <p class="env-number-stlye">84</p>
+                    <p >风险项(个)</p>
+                </div>
+            </div>
+        </div>
+        <div class="d-flex is-justify-space-between">
+            <hbt-echarts className="risk-pie-chart" :options="option" @onChartInit="getEcharts($event,'leftChart')"></hbt-echarts>
+            <hbt-echarts className="risk-pie-chart" :options="option1" @onChartInit="getEcharts($event,'rightChart')"></hbt-echarts>
+        </div>
+    </div>
+</div>
diff --git a/src/components/safety/index/left/safetyIndexLeft.component.ts b/src/components/safety/index/left/safetyIndexLeft.component.ts
new file mode 100644
index 0000000..dd388ea
--- /dev/null
+++ b/src/components/safety/index/left/safetyIndexLeft.component.ts
@@ -0,0 +1,226 @@
+import {Component, Emit, Vue} from 'vue-property-decorator';
+import template from "./safetyIndexLeft.component.html"
+import {pieChartData} from "./chartData";
+
+import TitleComponent from "@/components/title.component.vue"
+import WarningListComponent from "@/components/warningList.component.vue"
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        WarningListComponent
+    },
+})
+export default class SafetyIndexLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //总设备数
+    totalEquipment = 1024;
+    //在线设备
+    onlineEquipment = 724;
+    //报警列表
+    get dataList(){
+        return this.$store.state.warningList
+    }
+    timer: any = null;
+    //饼图数据
+    option: any =  pieChartData({text:'重大危险源',subtext:'等级占比'})
+    option1: any =  pieChartData({text:'风险项',subtext:'等级占比'})
+    //饼图实例
+    pieChart: any = {};
+    leftChart:any = {}
+    rightChart:any = {}
+    activePieItem = 0;
+
+    //切换饼图高亮区域
+    changePieChange() {
+
+        if (this.activePieItem > 8) {
+            this.activePieItem = 0
+        }
+        /*        let temp = JSON.parse(JSON.stringify(this.option))
+                temp.series[0].data = temp.series[0].data.map(item => {
+                    item.selected = false
+                    return item
+                })
+                temp.series[0].data[this.activePieItem].selected = true
+                console.log(temp.series)
+        /!*        this.pieChart.setOption({
+                    series: temp.series
+                }); *!/
+                this.pieChart.setOption(temp);*/
+        //定时移除高亮选中区
+        this.leftChart.dispatchAction({
+            type: "downplay",
+            seriesIndex: 0,
+        });
+        //定时加载选中高亮区
+        this.leftChart.dispatchAction({
+            type: "highlight",
+            dataIndex: this.activePieItem
+        })
+        //定时移除高亮选中区
+        this.rightChart.dispatchAction({
+            type: "downplay",
+            seriesIndex: 0,
+        });
+        //定时加载选中高亮区
+        this.rightChart.dispatchAction({
+            type: "highlight",
+            dataIndex: this.activePieItem
+        })
+        this.activePieItem += 2;
+
+    }
+
+    //获取图表实例
+    getEcharts(e,type) {
+        this[type] = e
+    }
+    //展示告警信息
+    showWaring(item){
+
+        const levelMap = {
+            1:'一级',
+            2:'二级',
+            3:'三级',
+        }
+        const levelClassMap = {
+            3:'blue',
+            2:'yellow',
+            1:'red',
+        }
+        console.log(item)
+        this.getItem(Object.assign(item,{
+            type:'风险告警',
+            level:item.level,
+            levelClass:levelClassMap[item.level],
+            levelName:levelMap[item.level],
+            content:'监测数值异常',
+            time:'2023年1月20日  14:33:33',
+            equipment:'北区广场监测点',
+            linkDangerSource:'炼化油生产单元',
+            tableHeader:[
+                {
+                    'prop':'alarmSubject',
+                    'label':'告警主体',
+                    'width':'90px',
+                }, {
+                    'prop':'thermometer',
+                    'label':'温度计',
+                }, {
+                    'prop':'criticalValue',
+                    'label':'临界值',
+                    'width':'90px',
+                },
+            ],
+            tableData: [{
+                'alarmSubject': '温度',
+                'thermometer': '456°C',
+                'criticalValue': '356°C',
+            }, {
+                'alarmSubject': '湿度',
+                'thermometer': '60%',
+                'criticalValue': '20%-70%',
+            }, {
+                'alarmSubject': '湿度',
+                'thermometer': '60%',
+                'criticalValue': '20%-70%',
+            }, {
+                'alarmSubject': '湿度',
+                'thermometer': '60%',
+                'criticalValue': '20%-70%',
+            }, {
+                'alarmSubject': '湿度',
+                'thermometer': '60%',
+                'criticalValue': '20%-70%',
+            }]
+        }))
+    }
+    //点击告警信息
+    @Emit()
+    getItem(item) {
+        console.log('item', item)
+    }
+
+    //生成随机数
+    randomNum() {
+        const num = this.getRandomInt(4, 20)
+        if (num % 2 === 0) {
+            this.onlineEquipment += num
+        } else {
+            this.onlineEquipment -= num
+        }
+
+    }
+
+    //随机整数
+    getRandomInt(min: number, max: number) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
+    }
+
+    count = 1
+
+    //监听页面变化重新绘制图表
+    resize() {
+        setTimeout(() => {
+            this.leftChart.resize();
+            this.rightChart.resize();
+        }, 300)
+    }
+
+    mounted() {
+        this.timer = setInterval(() => {
+            this.changePieChange()
+            this.randomNum()
+        }, 3000)
+
+        //动态插入数据
+        /*this.timer = setInterval(() => {
+            this.scrollList()
+        }, 6000)*/
+        window.addEventListener("resize", this.resize);
+    }
+
+    //告警信息列表滚动
+    scrollList() {
+        this.dataList.unshift({
+            title: '消防告警' + this.count,
+            info: '区域发现黑名单人员了区域发现黑名人预',
+            time: '2021-05-19 16:03:28',
+            level: this.count % 3,
+        })
+        this.count++;
+      /*  this.$nextTick(() => {
+            const dom: any = document.querySelector('.warning-list-box')
+            dom.classList.remove('animate__fadeInLeft')
+            setTimeout(() => {
+                dom.classList.add('animate__fadeInLeft')
+            },)
+        })*/
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+    changeMore(){
+        console.log(1)
+    }
+    changeClose(){
+        console.log(1)
+    }
+}
+
diff --git a/src/components/safety/index/right/chartData.js b/src/components/safety/index/right/chartData.js
new file mode 100644
index 0000000..a7b0974
--- /dev/null
+++ b/src/components/safety/index/right/chartData.js
@@ -0,0 +1,217 @@
+export const lineChartData = function (data, xAxisData, $echarts) {
+    return {
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: xAxisData
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                data: data,
+                type: 'line',
+                itemStyle: {
+                    color: '#E8E8E8',
+                },
+                symbolSize: 7,
+                lineStyle: {
+                    color: '#E8E8E8',
+                    width: 3
+                },
+                smooth: true,
+                label: {
+                    show: true,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            }
+        ],
+
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 22,
+            x2: 12,
+            y2: 20,
+        }
+    }
+}
+export const lineAndBatChartData = function ($echarts) {
+    return {
+        color: ['#7FB0FF', '#E8E8E8', '#FADFA4'],
+        tooltip: {
+            show: true,
+            alwaysShowContent: false,
+            trigger: 'item',
+            backgroundColor: 'rgba(0,0,0,0.4)',
+            textStyle: {
+                color: '#ffffff'
+            }
+        },
+        legend: {
+            top: 'top',
+            itemGap: 25,
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff"
+            }
+        },
+        grid: {
+            top: '15%',
+            left: '5%',
+            right: '5%',
+            bottom: '5%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: [
+                    '1月',
+                    '2月',
+                    '3月',
+                    '4月',
+                    '5月',
+                    '6月',
+                    '7月',
+                ],
+
+                axisTick: false,
+                axisLine: {
+                    lineStyle: {
+                        color: '#999999'
+                    }
+                },
+                axisLabel: {
+                    color: '#999999'
+                }
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                name: '',
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#999999',
+                        width: 1,
+                        type: 'solid'
+                    }
+                },
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#999999',
+                    }
+                },
+            },
+            {
+                type: 'value',
+                name: '',
+                splitLine: {
+                    show: false
+                }
+            }
+        ],
+        series: [
+            {
+                name: '巡查次数',
+                type: 'bar',
+                barWidth: 8,
+                data: [120, 95, 70, 85, 110, 60, 90],
+                itemStyle: {
+                    borderRadius: [4, 4, 0, 0],
+                    color: function (params) {
+                        return new $echarts.graphic.LinearGradient(
+                            0, 0, 0, 1,
+                            [{
+                                offset: 0,
+                                color: '#7FB0FF'
+                            },
+                                {
+                                    offset: 1,
+                                    color: '#3179EA'
+                                }
+                            ]
+                        )
+                    },
+                }
+            },
+            {
+                name: '上报隐患',
+                type: 'bar',
+                barWidth: 8,
+                itemStyle: {
+                    borderRadius: [4, 4, 0, 0],
+                    color: function (params) {
+                        return new $echarts.graphic.LinearGradient(
+                            0, 0, 0, 1,
+                            [{
+                                offset: 0,
+                                color: '#E8E8E8'
+                            },
+                                {
+                                    offset: 1,
+                                    color: '#999999'
+                                }
+                            ]
+                        )
+                    },
+                },
+                data: [130, 75, 80, 83, 90, 100, 120]
+            },
+            {
+                name: '上报风险',
+                type: 'line',
+                color: '#D0AF7B',
+                yAxisIndex: 1,
+                symbolSize: 6,
+                symbol: 'circle',
+                data: [110, 68, 78, 105, 125, 77, 100]
+            }
+        ]
+    }
+
+}
diff --git a/src/components/safety/index/right/safetyIndexRight.component.html b/src/components/safety/index/right/safetyIndexRight.component.html
new file mode 100644
index 0000000..a311437
--- /dev/null
+++ b/src/components/safety/index/right/safetyIndexRight.component.html
@@ -0,0 +1,89 @@
+<div class="env-right">
+    <div class="box-content flex-0 height-auto">
+        <title-component :imgSrc="imgSrc">
+            特殊作业
+        </title-component>
+        <div class="right-top">
+            <div class="right-top-item">
+                <div class="right-top-item-sub">
+                    <span class="value">8</span>
+
+                </div>
+                <div class="label">进行中</div>
+            </div>
+            <div class="right-top-item">
+                <div class="right-top-item-sub">
+                    <span class="value">
+                       28
+                    </span>
+                </div>
+                <div class="label">待开始</div>
+            </div>
+            <div class="right-top-item">
+                <div class="right-top-item-sub">
+                    <span class="value">
+                        234
+                    </span>
+                </div>
+                <div class="label">已完成</div>
+            </div>
+        </div>
+        <div class="risk-box is-justify-space-around">
+            <div class="risk-item">
+                <div class="company-icon"></div>
+                <div>
+                    <p class="env-number-stlye">745</p>
+                    <p>作业企业数量</p>
+                </div>
+            </div>
+            <div class="risk-item">
+                <div class="sg-icon"></div>
+                <div>
+                    <p class="env-number-stlye">84</p>
+                    <p >施工单位数量</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="box-content margin-top-20">
+        <title-component :imgSrc="imgSrc">
+            隐患治理
+        </title-component>
+        <div class="card-box is-justify-space-around padding-top-20">
+            <div class="card-box-item-4">
+                <div class="card-box-item-top font-size-16">5</div>
+                <div class="card-box-item-bottom font-size-14">
+                    整改超期
+                </div>
+            </div>
+            <div class="card-box-item-4">
+                <div class="card-box-item-top font-size-16">8</div>
+                <div class="card-box-item-bottom font-size-14">
+                    待验收
+                </div>
+            </div>
+            <div class="card-box-item-4">
+                <div class="card-box-item-top font-size-16">9</div>
+                <div class="card-box-item-bottom font-size-14">
+                    整改中
+                </div>
+            </div>
+            <div class="card-box-item-4">
+                <div class="card-box-item-top font-size-16">7</div>
+                <div class="card-box-item-bottom font-size-14">
+                    待整改
+                </div>
+            </div>
+        </div>
+        <hbt-echarts className="risk-line-chart" :options="option"
+                     @onChartInit="getEcharts($event,'lineChart')"></hbt-echarts>
+    </div>
+    <div class="box-content margin-top-20">
+        <title-component :imgSrc="imgSrc">
+            污染物监测
+        </title-component>
+<!--        barAndLineChart-->
+        <hbt-echarts class="margin-top-23" className="risk-line-chart" :options="barAndLineData"
+                     @onChartInit="getEcharts($event,'barAndLineChart')"></hbt-echarts>
+    </div>
+</div>
diff --git a/src/components/safety/index/right/safetyIndexRight.component.ts b/src/components/safety/index/right/safetyIndexRight.component.ts
new file mode 100644
index 0000000..64eaacb
--- /dev/null
+++ b/src/components/safety/index/right/safetyIndexRight.component.ts
@@ -0,0 +1,73 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./safetyIndexRight.component.html"
+import {lineChartData,lineAndBatChartData} from "./chartData";
+import {smartAndEnvironmentallyFriendlyData} from '@/dataDemo/smartAndEnvironmentallyFriendlyData';
+import TitleComponent from "@/components/title.component.vue"
+import * as echarts from 'echarts';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class SafetyIndexRightComponent extends Vue {
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+
+    timer: any = null;
+    //折线图配置项
+    option: any = {}
+    //折线图实例
+    lineChart: any = {}
+    //折线柱状图实例
+    barAndLineChart:any = {}
+    //折线柱状图配置项
+    barAndLineData:any = {}
+    smartAndEnvironmentallyFriendlyData = JSON.parse(JSON.stringify(smartAndEnvironmentallyFriendlyData))
+
+    getEcharts(e,type) {
+        this[type] = e
+        this.initLineData()
+        this.barAndLineData = lineAndBatChartData(echarts)
+    }
+    resize() {
+        setTimeout(() => {
+            this.lineChart.resize();
+        }, 300)
+    }
+
+
+    mounted() {
+        window.addEventListener("resize", this.resize);
+    }
+//初始化line图表
+    initLineData(inData = []) {
+        let newData: any[] = []
+        if (inData.length === 0) {
+            newData = smartAndEnvironmentallyFriendlyData.atmosphericEnvironmentalQuality.data
+        } else {
+            newData = inData
+        }
+        const xAxisData = ['1月','2月','3月','4月','5月','6月','7月'];
+
+        const data = (newData as any).data?.map(item => item.value);
+        data.splice(0, data.length - 7)
+        this.option = lineChartData(data, xAxisData, echarts)
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+
+    }
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+}
+
diff --git a/src/components/safety/risk/left/chartData.js b/src/components/safety/risk/left/chartData.js
new file mode 100644
index 0000000..3f97d00
--- /dev/null
+++ b/src/components/safety/risk/left/chartData.js
@@ -0,0 +1,280 @@
+export const pieChartData = function (option = {}) {
+    return {
+        title: {
+            text: option?.text,
+            subtext: option?.subtext,
+            itemGap: 5,
+            x: '48%',
+            y: '38%',
+            textAlign:'center',
+            textStyle: {
+                fontSize: 17,
+                fontWeight: '600',
+                align: "center",
+                color: '#E8E8E8',
+            },
+            subtextStyle: {
+                fontSize: 14,
+                fontWeight: 'normal',
+                align: "center",
+                color: '#E8E8E8'
+            },
+        },
+        legend: {
+            right: 'right',
+            bottom:'bottom',
+            itemGap: 10,
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff"
+            },
+            data:[
+                {
+                    name:'一级',
+                    icon:'roundRect'
+                },{
+                    name:'二级',
+                    icon:'roundRect'
+                },{
+                    name:'三级',
+                    icon:'roundRect'
+                },{
+                    name:'四级',
+                    icon:'roundRect'
+                },
+            ]
+        },
+        tooltip: {
+            trigger: 'item'
+        },
+        series: [
+            {
+                type: 'pie',
+                selectedMode: 'single',
+                selectedOffset: 10,
+                left:0,
+                radius: [50, 75],
+                data: [
+                    {value: 25, name: '一级'},
+                    {value: 1, name: ''},
+                    {value: 25, name: '二级'},
+                    {value: 1, name: ''},
+                    {value: 15, name: '三级'},
+                    {value: 1, name: ''},
+                    {value: 20, name: '四级'},
+                    {value: 1, name: ''},
+                ],
+                color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null],
+                emphasis: {
+                    label: {
+                        show: true,
+                        position:'inside',
+                        color:'#ffffff',
+                        textBorderColor: "rgb(111,111,111)",
+                        textBorderwidth: 2,
+                        backgroundColor:'transparent',
+                        formatter:function (params) {
+                            if (params.data.name){
+                                return params.data.value+'%'
+                            }else {
+                                return ''
+                            }
+
+                        }
+                    },
+                    itemStyle: {
+                        // shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        // borderWidth:5,
+                        // borderColor:"rgba(255,255,255,0)",
+                        // shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                },
+                itemStyle: {},
+                select: {
+                    itemStyle: {}
+                },
+                labelLine: {
+                    show: false
+                },
+                label: {
+                    show: false,
+                    position:'inside',
+                    formatter:function (params) {
+                        if (params.data.name){
+                            return params.data.value
+                        }else {
+                            return ''
+                        }
+
+                    }
+                },
+                tooltip:{
+                    backgroundColor:'rgba(0,0,0,0.4)',
+                    textStyle:{
+                        color:'#ffffff'
+                    }
+
+                }
+            }
+        ],
+        animationDuration: 0,
+        animationDurationUpdate: 3000,
+        animationEasing: 'linear',
+        animationEasingUpdate: 'linear'
+    }
+}
+export const lineChartData = function () {
+    return {
+        color:['#7FB0FF','#FADFA4','#C9FFD7','#FFFFFF'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: ['第一周','第二周','第三周','第四周','第五周']
+        },
+        legend: {
+            top: 'top',
+            itemGap: 30,
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff"
+            },
+            data:[
+                {
+                    name:'一级',
+                    icon:'roundRect'
+                },{
+                    name:'二级',
+                    icon:'roundRect'
+                },{
+                    name:'三级',
+                    icon:'roundRect'
+                },{
+                    name:'四级',
+                    icon:'roundRect'
+                },
+            ]
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name:'一级',
+                data: [60,80,140,70,100],
+                type: 'line',
+                symbolSize: 7,
+                lineStyle: {
+                    color: '#7FB0FF',
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            },{
+                name:'二级',
+                data: [50,70,130,60,90],
+                type: 'line',
+                symbolSize: 7,
+                lineStyle: {
+                    color: '#FADFA4',
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            },{
+                name:'三级',
+                data: [40,60,120,50,80],
+                type: 'line',
+                symbolSize: 7,
+                lineStyle: {
+                    color: '#C9FFD7',
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            },{
+                name:'四级',
+                data: [35,56,112,47,72],
+                type: 'line',
+                symbolSize: 7,
+                lineStyle: {
+                    color: '#FFFFFF',
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            },
+        ],
+
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 30,
+            x2: 12,
+            y2: 20,
+        }
+    }
+}
diff --git a/src/components/safety/risk/left/mockData.js b/src/components/safety/risk/left/mockData.js
new file mode 100644
index 0000000..09f8237
--- /dev/null
+++ b/src/components/safety/risk/left/mockData.js
@@ -0,0 +1,1850 @@
+export const mockData = {
+    "1": [
+        {"id": "000542ff-f569-4823-88aa-f7a6904131c9", "name": "含油污水处理分析单元", "description": "超标排放", "level": 1},
+        {"id": "004114e8-8d20-4ada-a52d-a152f5111f99", "name": "卸油作业分析单元", "description": "燃油泄露风险", "level": 1},
+        {"id": "00655661-d216-4132-a89c-486f7fb6f884", "name": "发油作业分析单元", "description": "燃油泄露风险", "level": 1},
+        {"id": "012fe1e5-9c3f-45e6-aa96-4f4c04c9cc48", "name": "配电间分析单元", "description": "漏电风险", "level": 1},
+        {"id": "019889df-e79c-4870-849b-2abeefbf1a6a", "name": "拱顶罐、内浮顶罐分析单元", "description": "燃油泄露风险", "level": 1},
+        {"id": "0222ad5e-0668-4861-bd27-fac137cd7eb8", "name": "汽、柴油卸油分析单元", "description": "泄露风险", "level": 1},
+        {"id": "02385672-2f50-488f-8b89-9cd0b98ccae6", "name": "含油污水处理分析单元", "description": "超标排放", "level": 1},
+        {"id": "0253f566-b032-48ea-966e-2721dfe72208", "name": "拱顶罐、内浮顶罐分析单元", "description": "燃油泄露风险", "level": 1},
+    ],
+    "2": [
+        {"id": "00655661-d216-4132-a89c-486f7fb6f884", "name": "发油作业分析单元", "description": "燃油泄露风险", "level": 2},
+        {"id": "012fe1e5-9c3f-45e6-aa96-4f4c04c9cc48", "name": "配电间分析单元", "description": "漏电风险", "level": 2},
+        {"id": "019889df-e79c-4870-849b-2abeefbf1a6a", "name": "拱顶罐、内浮顶罐分析单元", "description": "燃油泄露风险", "level": 2},
+        {"id": "0222ad5e-0668-4861-bd27-fac137cd7eb8", "name": "汽、柴油卸油分析单元", "description": "泄露风险", "level": 2},
+        {"id": "02385672-2f50-488f-8b89-9cd0b98ccae6", "name": "含油污水处理分析单元", "description": "超标排放", "level": 2},
+        {"id": "000542ff-f569-4823-88aa-f7a6904131c9", "name": "含油污水处理分析单元", "description": "超标排放", "level": 2},
+        {"id": "004114e8-8d20-4ada-a52d-a152f5111f99", "name": "卸油作业分析单元", "description": "燃油泄露风险", "level": 2},
+        {"id": "0253f566-b032-48ea-966e-2721dfe72208", "name": "拱顶罐、内浮顶罐分析单元", "description": "燃油泄露风险", "level": 2},
+    ],
+    "3": [
+        {"id": "019889df-e79c-4870-849b-2abeefbf1a6a", "name": "拱顶罐、内浮顶罐分析单元", "description": "燃油泄露风险", "level": 3},
+        {"id": "0222ad5e-0668-4861-bd27-fac137cd7eb8", "name": "汽、柴油卸油分析单元", "description": "泄露风险", "level": 3},
+        {"id": "02385672-2f50-488f-8b89-9cd0b98ccae6", "name": "含油污水处理分析单元", "description": "超标排放", "level": 3},
+        {"id": "000542ff-f569-4823-88aa-f7a6904131c9", "name": "含油污水处理分析单元", "description": "超标排放", "level": 3},
+        {"id": "004114e8-8d20-4ada-a52d-a152f5111f99", "name": "卸油作业分析单元", "description": "燃油泄露风险", "level": 3},
+        {"id": "00655661-d216-4132-a89c-486f7fb6f884", "name": "发油作业分析单元", "description": "燃油泄露风险", "level": 3},
+        {"id": "012fe1e5-9c3f-45e6-aa96-4f4c04c9cc48", "name": "配电间分析单元", "description": "漏电风险", "level": 3},
+        {"id": "0253f566-b032-48ea-966e-2721dfe72208", "name": "拱顶罐、内浮顶罐分析单元", "description": "燃油泄露风险", "level": 3}],
+    "4": [
+        {"id": "000542ff-f569-4823-88aa-f7a6904131c9", "name": "含油污水处理分析单元", "description": "超标排放", "level": 4},
+        {"id": "004114e8-8d20-4ada-a52d-a152f5111f99", "name": "卸油作业分析单元", "description": "燃油泄露风险", "level": 4},
+        {"id": "00655661-d216-4132-a89c-486f7fb6f884", "name": "发油作业分析单元", "description": "燃油泄露风险", "level": 4},
+        {"id": "012fe1e5-9c3f-45e6-aa96-4f4c04c9cc48", "name": "配电间分析单元", "description": "漏电风险", "level": 4},
+        {"id": "019889df-e79c-4870-849b-2abeefbf1a6a", "name": "拱顶罐、内浮顶罐分析单元", "description": "燃油泄露风险", "level": 4},
+        {"id": "0222ad5e-0668-4861-bd27-fac137cd7eb8", "name": "汽、柴油卸油分析单元", "description": "泄露风险", "level": 4},
+        {"id": "02385672-2f50-488f-8b89-9cd0b98ccae6", "name": "含油污水处理分析单元", "description": "超标排放", "level": 4},
+        {"id": "0253f566-b032-48ea-966e-2721dfe72208", "name": "拱顶罐、内浮顶罐分析单元", "description": "燃油泄露风险", "level": 4}
+    ],
+}
+
+export const detail = {
+    "id": "1736bd5f-765e-4c4a-9786-8bc06a2134eb",
+    "name": "卸油作业分析单元",
+    "riskProbability": "可能",
+    "riskFactor": "泄漏、火灾、爆炸、憋压、中毒",
+    "affectConsequences": "泄漏、火灾、爆炸、憋压、中毒",
+    "level": 1,
+    "enterpriseId": "6",
+    "enterprise": "中石油兰州石化榆林化工有限公司",
+    "responsiblePersonId": "1fe37818-c849-4ba2-a53d-d440d1cbf983",
+    "responsiblePerson": "亓美枫",
+    "riskControlMeasures": "内外操每时进行巡检，记录操作数据",
+    "lastReviewDate": "2022-04-15 07:35:34",
+    "majorHazardSourcesId": "954e5e6f-91c5-46d1-a085-ad0e6cdae10c",
+    "majorHazardSourcesName": "氯气瓶仓库单元",
+    "personName": "亓美枫",
+    "phone": "15500692422",
+    "addr": "台西纬五路117号-1-3",
+    "remark": "台西纬五路117号-1-3",
+}
+
+export const sepList = {
+    "3": [
+        {
+            "id": "0055866e-cd54-40f3-8c92-d295f88cbec0",
+            "name": "裂解系统投料",
+            "operationLevel": 4,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "1、过热炉升温到 500C2、通压缩气3、通蒸汽 4、升温到 800C，投 F22",
+            "operationType": 6,
+            "operationStart": "2022-09-16",
+            "operationEnd": "2023-02-25",
+            "operationSite": "惠民街117号-19-2"
+        },
+        {
+            "id": "01174267-461e-41f7-b513-41baff592cc0",
+            "name": "II级高处作业",
+            "operationLevel": 2,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "2m-15m的高处作业",
+            "operationType": 4,
+            "operationStart": "2022-08-11",
+            "operationEnd": "2023-01-06",
+            "operationSite": "西藏路76号-1-9"
+        },
+        {
+            "id": "01d2fa28-5384-4e4f-8dcc-86ff3f0f8bd6",
+            "name": "换 CaC12",
+            "operationLevel": 2,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "1、开启 CaC12 循环 2、排 CaC12 到709 3、补CaC12",
+            "operationType": 7,
+            "operationStart": "2022-08-22",
+            "operationEnd": "2023-01-27",
+            "operationSite": "宁国三大厦98号-17-3"
+        },
+        {
+            "id": "0272b134-ef77-4bd9-b0c0-1e085b551e61",
+            "name": "司炉岗位点火",
+            "operationLevel": 3,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "置换、抽盲板、燃烧炉点火、现场确认",
+            "operationType": 6,
+            "operationStart": "2022-09-22",
+            "operationEnd": "2023-02-16",
+            "operationSite": "台东四路76号-12-3"
+        },
+        {
+            "id": "0d501d7b-f159-4e34-b5e6-dad5e466973f",
+            "name": "检测雨水管道泄漏点",
+            "operationLevel": 2,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "使用挖掘机和人工挖掘作业，挖掘深度1m.",
+            "operationType": 1,
+            "operationStart": "2022-03-25",
+            "operationEnd": "2023-02-06",
+            "operationSite": "济宁支街25号-5-9"
+        },
+        {
+            "id": "13d7bde9-7b6e-4812-bef7-d74a102239d7",
+            "name": "烘干",
+            "operationLevel": 3,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "将物料运至烘箱开蒸汽、电加热、风机进行烘干",
+            "operationType": 8,
+            "operationStart": "2022-04-19",
+            "operationEnd": "2023-01-22",
+            "operationSite": "商河路16号-1-2"
+        },
+        {
+            "id": "182187bf-f2eb-4f83-befa-0426f8bb2277",
+            "name": "临时用电作业",
+            "operationLevel": 1,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "厂区内的临时接电、用电作业",
+            "operationType": 9,
+            "operationStart": "2022-06-12",
+            "operationEnd": "2023-01-24",
+            "operationSite": "锦州街22号-9-3"
+        },
+        {
+            "id": "1e83cec8-4606-4522-8e0a-0a745be6b7e4",
+            "name": "R32装置系统停车",
+            "operationLevel": 3,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "关闭计量系统、关闭反应釜蒸汽、关闭反应釜出料、关闭水碱洗系统、关闭精馏系统、关闭成品系统",
+            "operationType": 8,
+            "operationStart": "2022-06-10",
+            "operationEnd": "2023-02-26",
+            "operationSite": "港环路88号-7-9"
+        },
+        {
+            "id": "263828b3-e3d2-4bc5-a7a3-f0a45c3fd796",
+            "name": "I级高处作业",
+            "operationLevel": 4,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "15m-30m的高处作业",
+            "operationType": 4,
+            "operationStart": "2022-03-10",
+            "operationEnd": "2023-02-18",
+            "operationSite": "南京广场145号-14-3"
+        },
+        {
+            "id": "268951b7-b0f6-4469-b8b0-cbc171071bbd",
+            "name": "R32装置系统停车",
+            "operationLevel": 3,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "关闭计量系统、关闭反应釜蒸汽、关闭反应釜出料、关闭水碱洗系统、关闭精馏系统、关闭成品系统",
+            "operationType": 8,
+            "operationStart": "2022-09-15",
+            "operationEnd": "2023-02-14",
+            "operationSite": "长兴街81号-12-10"
+        },
+        {
+            "id": "26ed0535-6a66-4f98-bd05-8b13cdf7e54d",
+            "name": "二级级动火",
+            "operationLevel": 3,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "除特级、一级动火作业之外的其他动火作业",
+            "operationType": 6,
+            "operationStart": "2022-10-05",
+            "operationEnd": "2023-01-17",
+            "operationSite": "辽北街103号-7-1"
+        },
+        {
+            "id": "27cce8f1-99d6-4edd-a1eb-dd0fe7875dc9",
+            "name": "R32装置系统停车",
+            "operationLevel": 4,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "关闭计量系统、关闭反应釜蒸汽、关闭反应釜出料、关闭水碱洗系统、关闭精馏系统、关闭成品系统",
+            "operationType": 8,
+            "operationStart": "2022-05-26",
+            "operationEnd": "2023-01-28",
+            "operationSite": "莱阳街96号-5-4"
+        },
+        {
+            "id": "30edb14a-bf8d-4406-8512-a94f64417ca0",
+            "name": "二、三级吊装",
+            "operationLevel": 3,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "100t 以下的吊装作业",
+            "operationType": 5,
+            "operationStart": "2022-12-04",
+            "operationEnd": "2023-02-22",
+            "operationSite": "吴县一街139号-9-4"
+        },
+        {
+            "id": "312b9d7f-ad69-4c27-9eb8-67c2747a3324",
+            "name": "受限空间作业",
+            "operationLevel": 1,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "进入反应釜、储罐、水井等封闭和半封闭场所的作业",
+            "operationType": 3,
+            "operationStart": "2022-03-26",
+            "operationEnd": "2023-02-04",
+            "operationSite": "甘肃广场13号-7-7"
+        },
+        {
+            "id": "37bd765b-7549-41ba-830f-1a6fd4ee146a",
+            "name": "受限空间作业",
+            "operationLevel": 1,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "进入反应釜、储罐、水井等封闭和半封闭场所的作业",
+            "operationType": 3,
+            "operationStart": "2022-10-05",
+            "operationEnd": "2023-02-03",
+            "operationSite": "闽江大厦61号-10-5"
+        },
+        {
+            "id": "3a2ca18e-1f08-432d-bda3-4ea33a03852d",
+            "name": "设备检维修",
+            "operationLevel": 4,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "制定方案、检查现场、作业前准备、检维修作业、整理现场",
+            "operationType": 8,
+            "operationStart": "2022-05-28",
+            "operationEnd": "2023-02-04",
+            "operationSite": "屏东支路46号-11-3"
+        },
+        {
+            "id": "3fae14d5-6dc4-420b-b6fe-9873cf7490d0",
+            "name": "II级高处作业",
+            "operationLevel": 1,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "2m-15m的高处作业",
+            "operationType": 4,
+            "operationStart": "2022-01-01",
+            "operationEnd": "2023-01-16",
+            "operationSite": "晓望街52号-13-1"
+        },
+        {
+            "id": "429ca788-26f9-4080-ba42-d553a5f2bc25",
+            "name": "特级、一级动火",
+            "operationLevel": 1,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "在易燃易爆生产装置、输送管道.储罐、容器、管廊等场所装置上进行的动火的作业",
+            "operationType": 6,
+            "operationStart": "2022-09-11",
+            "operationEnd": "2023-02-14",
+            "operationSite": "莱阳街13号-13-1"
+        },
+        {
+            "id": "42b2be23-cf27-4ffd-ba9d-105c92e7724f",
+            "name": "检测雨水管道泄漏点",
+            "operationLevel": 3,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "使用挖掘机和人工挖掘作业，挖掘深度1m.",
+            "operationType": 1,
+            "operationStart": "2022-06-10",
+            "operationEnd": "2023-01-22",
+            "operationSite": "菜市二路68号-10-2"
+        },
+        {
+            "id": "42c060f5-b015-491b-92f6-775ba8715dd3",
+            "name": "二级级动火",
+            "operationLevel": 3,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "除特级、一级动火作业之外的其他动火作业",
+            "operationType": 6,
+            "operationStart": "2022-06-05",
+            "operationEnd": "2023-02-10",
+            "operationSite": "泉州街43号-1-6"
+        },
+        {
+            "id": "4801a6a2-11c8-4370-951f-13e9d00b216e",
+            "name": "二级级动火",
+            "operationLevel": 4,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "除特级、一级动火作业之外的其他动火作业",
+            "operationType": 6,
+            "operationStart": "2022-10-24",
+            "operationEnd": "2023-02-08",
+            "operationSite": "黄海街121号-11-8"
+        },
+        {
+            "id": "489d96f0-004c-4650-8e7d-64176f9281ca",
+            "name": "二、三级吊装",
+            "operationLevel": 4,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "100t 以下的吊装作业",
+            "operationType": 5,
+            "operationStart": "2022-05-05",
+            "operationEnd": "2023-02-06",
+            "operationSite": "兴安大厦133号-3-2"
+        },
+        {
+            "id": "4c97c847-aa27-4c27-a610-9a7c8ffbe763",
+            "name": "设备检维修",
+            "operationLevel": 3,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "制定方案、检查现场、作业前准备、检维修作业、整理现场",
+            "operationType": 8,
+            "operationStart": "2022-04-18",
+            "operationEnd": "2023-02-16",
+            "operationSite": "华山路85号-18-7"
+        },
+        {
+            "id": "517511da-6e0e-444b-8feb-c6759a461c44",
+            "name": "设备检维修",
+            "operationLevel": 1,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "制定方案、检查现场、作业前准备、检维修作业、整理现场",
+            "operationType": 8,
+            "operationStart": "2022-07-03",
+            "operationEnd": "2023-02-06",
+            "operationSite": "太平路82号-13-3"
+        },
+        {
+            "id": "530a199c-ad67-493a-9a3a-93fed6ffa35e",
+            "name": "裂解系统投料",
+            "operationLevel": 3,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "1、过热炉升温到 500C2、通压缩气3、通蒸汽 4、升温到 800C，投 F22",
+            "operationType": 6,
+            "operationStart": "2022-04-22",
+            "operationEnd": "2023-02-12",
+            "operationSite": "华严路111号-11-6"
+        },
+        {
+            "id": "548411df-ed1f-47cb-b5fb-bb7dd7d7a67e",
+            "name": "临时用电作业",
+            "operationLevel": 1,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "厂区内的临时接电、用电作业",
+            "operationType": 9,
+            "operationStart": "2022-05-12",
+            "operationEnd": "2023-01-10",
+            "operationSite": "吴县一街72号-12-10"
+        },
+        {
+            "id": "5bfbb201-2812-4ae2-89a6-576092e7c04c",
+            "name": "盲板抽堵作业",
+            "operationLevel": 1,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "厂区内各管道上的盲板抽堵",
+            "operationType": 7,
+            "operationStart": "2022-03-06",
+            "operationEnd": "2023-02-01",
+            "operationSite": "郓城南路46号-17-10"
+        },
+        {
+            "id": "5cade967-a0a0-4a36-b819-ff8080a4e38a",
+            "name": "IV级高处作业",
+            "operationLevel": 2,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "30m以上登高作业",
+            "operationType": 4,
+            "operationStart": "2022-09-29",
+            "operationEnd": "2023-01-06",
+            "operationSite": "寿光广场76号-13-8"
+        },
+        {
+            "id": "5d57ad5f-0b5f-464e-94e8-e4c4f0939692",
+            "name": "盲板抽堵作业",
+            "operationLevel": 1,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "厂区内各管道上的盲板抽堵",
+            "operationType": 7,
+            "operationStart": "2022-01-15",
+            "operationEnd": "2023-02-19",
+            "operationSite": "莆田街67号-2-6"
+        },
+        {
+            "id": "5fe1ea76-4b0e-4187-9093-92d65843745c",
+            "name": "动土作业",
+            "operationLevel": 4,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "动土深度 0.5m 以上的;可能对地下隐蔽设施产生影响的作业",
+            "operationType": 2,
+            "operationStart": "2022-08-20",
+            "operationEnd": "2023-01-09",
+            "operationSite": "河城大厦53号-9-8"
+        },
+        {
+            "id": "617f9cf1-1439-460f-a528-5cb61299f8a9",
+            "name": "贮槽、计量槽检修",
+            "operationLevel": 1,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "清理槽内结壁、结块物、凝聚物，焊接处理漏点，更换附件，打压查漏",
+            "operationType": 8,
+            "operationStart": "2022-09-23",
+            "operationEnd": "2023-01-25",
+            "operationSite": "枣庄广场39号-4-10"
+        },
+        {
+            "id": "66f5365f-3dbd-4348-b0e4-b1fa419a6331",
+            "name": "贮槽、计量槽检修",
+            "operationLevel": 2,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "清理槽内结壁、结块物、凝聚物，焊接处理漏点，更换附件，打压查漏",
+            "operationType": 8,
+            "operationStart": "2022-01-26",
+            "operationEnd": "2023-02-15",
+            "operationSite": "北京街66号-9-2"
+        },
+        {
+            "id": "684d894b-5a8a-423b-bf03-5b4f5fc46bf2",
+            "name": "烘干",
+            "operationLevel": 3,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "将物料运至烘箱开蒸汽、电加热、风机进行烘干",
+            "operationType": 8,
+            "operationStart": "2022-05-06",
+            "operationEnd": "2023-02-12",
+            "operationSite": "瑞阳街107号-17-6"
+        },
+        {
+            "id": "68ac876a-64b9-4f9e-8b62-316494c5209a",
+            "name": "IV级高处作业",
+            "operationLevel": 2,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "30m以上登高作业",
+            "operationType": 4,
+            "operationStart": "2022-05-21",
+            "operationEnd": "2023-01-26",
+            "operationSite": "费县路96号-4-5"
+        },
+        {
+            "id": "714d571b-26d4-4282-9d22-461f6bc94dca",
+            "name": "盲板抽堵作业",
+            "operationLevel": 4,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "厂区内各管道上的盲板抽堵",
+            "operationType": 7,
+            "operationStart": "2022-12-12",
+            "operationEnd": "2023-02-27",
+            "operationSite": "漳州街二街32号-12-2"
+        },
+        {
+            "id": "71dec23b-ab68-4555-9f03-b2c2f4de6b42",
+            "name": "临时用电作业",
+            "operationLevel": 1,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "厂区内的临时接电、用电作业",
+            "operationType": 9,
+            "operationStart": "2022-08-21",
+            "operationEnd": "2023-01-07",
+            "operationSite": "南通大厦56号-7-8"
+        },
+        {
+            "id": "7d29b301-2464-44a0-9133-3e8b67da0dd2",
+            "name": "检测雨水管道泄漏点",
+            "operationLevel": 1,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "使用挖掘机和人工挖掘作业，挖掘深度1m.",
+            "operationType": 1,
+            "operationStart": "2022-07-14",
+            "operationEnd": "2023-01-12",
+            "operationSite": "台北路92号-17-10"
+        },
+        {
+            "id": "7e141488-fe41-47e3-b504-e079bfa42d80",
+            "name": "IV级高处作业",
+            "operationLevel": 3,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "30m以上登高作业",
+            "operationType": 4,
+            "operationStart": "2022-02-18",
+            "operationEnd": "2023-02-16",
+            "operationSite": "惠民南路149号-8-9"
+        },
+        {
+            "id": "7f19f6cf-d6de-431b-ace2-87615f916413",
+            "name": "设备检维修",
+            "operationLevel": 2,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "制定方案、检查现场、作业前准备、检维修作业、整理现场",
+            "operationType": 8,
+            "operationStart": "2022-11-27",
+            "operationEnd": "2023-01-10",
+            "operationSite": "人和路117号-6-7"
+        },
+        {
+            "id": "80d29809-295a-40a8-8a74-14ad4c0426d0",
+            "name": "反应釜通氯气",
+            "operationLevel": 4,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "氯气瓶加压、通氯气、更换氯气瓶、更换氮气瓶",
+            "operationType": 7,
+            "operationStart": "2022-06-08",
+            "operationEnd": "2023-02-28",
+            "operationSite": "大港二路11号-18-9"
+        },
+        {
+            "id": "81f52470-c455-463d-9281-075037709f91",
+            "name": "贮槽、计量槽检修",
+            "operationLevel": 4,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "清理槽内结壁、结块物、凝聚物，焊接处理漏点，更换附件，打压查漏",
+            "operationType": 8,
+            "operationStart": "2022-09-29",
+            "operationEnd": "2023-02-12",
+            "operationSite": "明月峡大厦51号-7-4"
+        },
+        {
+            "id": "85bfa6a0-4f55-4804-aecd-a979080ccf70",
+            "name": "二、三级吊装",
+            "operationLevel": 2,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "100t 以下的吊装作业",
+            "operationType": 5,
+            "operationStart": "2022-04-28",
+            "operationEnd": "2023-01-26",
+            "operationSite": "长兴街56号-12-2"
+        },
+        {
+            "id": "8f5f5507-004d-4567-8ba1-86b00a89f576",
+            "name": "二级级动火",
+            "operationLevel": 3,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "除特级、一级动火作业之外的其他动火作业",
+            "operationType": 6,
+            "operationStart": "2022-05-24",
+            "operationEnd": "2023-01-30",
+            "operationSite": "泰山支路116号-20-9"
+        },
+        {
+            "id": "909f5e50-aa59-42cb-90a0-3971f6f49435",
+            "name": "动土作业",
+            "operationLevel": 3,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "动土深度 0.5m 以上的;可能对地下隐蔽设施产生影响的作业",
+            "operationType": 2,
+            "operationStart": "2022-02-25",
+            "operationEnd": "2023-02-23",
+            "operationSite": "天台二路25号-16-4"
+        },
+        {
+            "id": "96892143-34f3-4228-bdae-8ba925f7eac6",
+            "name": "烘干",
+            "operationLevel": 3,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "将物料运至烘箱开蒸汽、电加热、风机进行烘干",
+            "operationType": 8,
+            "operationStart": "2022-04-08",
+            "operationEnd": "2023-03-01",
+            "operationSite": "延吉街19号-19-6"
+        },
+        {
+            "id": "9717eae6-9d37-44f7-8d5e-2ec5be41376c",
+            "name": "司炉岗位点火",
+            "operationLevel": 1,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "置换、抽盲板、燃烧炉点火、现场确认",
+            "operationType": 6,
+            "operationStart": "2022-05-17",
+            "operationEnd": "2023-01-02",
+            "operationSite": "安邱街135号-3-4"
+        },
+        {
+            "id": "9734f4c9-9e55-4496-8ed0-77dd8ef8f454",
+            "name": "盲板抽堵作业",
+            "operationLevel": 3,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "厂区内各管道上的盲板抽堵",
+            "operationType": 7,
+            "operationStart": "2022-06-14",
+            "operationEnd": "2023-01-06",
+            "operationSite": "宁夏路21号-13-7"
+        },
+        {
+            "id": "9cc23ddd-edd0-4baf-a7e3-2803ebd96e3a",
+            "name": "特级、一级动火",
+            "operationLevel": 3,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "在易燃易爆生产装置、输送管道.储罐、容器、管廊等场所装置上进行的动火的作业",
+            "operationType": 6,
+            "operationStart": "2022-07-09",
+            "operationEnd": "2023-01-22",
+            "operationSite": "大学广场142号-8-9"
+        },
+        {
+            "id": "a99f11dd-a3a3-4bce-b1f2-e2fa651ab282",
+            "name": "I级高处作业",
+            "operationLevel": 1,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "15m-30m的高处作业",
+            "operationType": 4,
+            "operationStart": "2022-08-07",
+            "operationEnd": "2023-02-21",
+            "operationSite": "仙游路97号-3-3"
+        },
+        {
+            "id": "b4141110-830b-4975-b5b1-3746eb451b9b",
+            "name": "特级、一级动火",
+            "operationLevel": 3,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "在易燃易爆生产装置、输送管道.储罐、容器、管廊等场所装置上进行的动火的作业",
+            "operationType": 6,
+            "operationStart": "2022-04-16",
+            "operationEnd": "2023-01-02",
+            "operationSite": "宁国路92号-14-7"
+        },
+        {
+            "id": "b478de94-93d3-448f-8b0b-30446882095a",
+            "name": "IV级高处作业",
+            "operationLevel": 4,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "30m以上登高作业",
+            "operationType": 4,
+            "operationStart": "2022-01-21",
+            "operationEnd": "2023-02-08",
+            "operationSite": "济南街65号-16-6"
+        },
+        {
+            "id": "b52052df-7034-4f5b-8f25-5b44193785ca",
+            "name": "换 CaC12",
+            "operationLevel": 4,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "1、开启 CaC12 循环 2、排 CaC12 到709 3、补CaC12",
+            "operationType": 7,
+            "operationStart": "2022-08-25",
+            "operationEnd": "2023-01-14",
+            "operationSite": "泰州四路98号-19-10"
+        },
+        {
+            "id": "b6d021a4-5e0f-4da4-81e1-37ba0d04710f",
+            "name": "反应釜通氯气",
+            "operationLevel": 4,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "氯气瓶加压、通氯气、更换氯气瓶、更换氮气瓶",
+            "operationType": 7,
+            "operationStart": "2022-07-29",
+            "operationEnd": "2023-02-14",
+            "operationSite": "延吉街129号-14-7"
+        },
+        {
+            "id": "b70a2bbe-c867-46bc-95dd-6771eb4c5b60",
+            "name": "特级、一级动火",
+            "operationLevel": 2,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "在易燃易爆生产装置、输送管道.储罐、容器、管廊等场所装置上进行的动火的作业",
+            "operationType": 6,
+            "operationStart": "2022-01-12",
+            "operationEnd": "2023-02-21",
+            "operationSite": "屏东支路23号-13-1"
+        },
+        {
+            "id": "bb1e64fb-e6b7-4976-8522-8c8936d1d8e7",
+            "name": "二、三级吊装",
+            "operationLevel": 4,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "100t 以下的吊装作业",
+            "operationType": 5,
+            "operationStart": "2022-10-05",
+            "operationEnd": "2023-02-23",
+            "operationSite": "西康街85号-19-4"
+        },
+        {
+            "id": "c3418aa9-0bc9-4ff9-b96f-9db3cf94cb6a",
+            "name": "司炉岗位点火",
+            "operationLevel": 3,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "置换、抽盲板、燃烧炉点火、现场确认",
+            "operationType": 6,
+            "operationStart": "2022-02-06",
+            "operationEnd": "2023-02-11",
+            "operationSite": "长春街83号-3-3"
+        },
+        {
+            "id": "cc186602-6bff-4fc8-8119-8848c4948e2a",
+            "name": "烘干",
+            "operationLevel": 3,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "将物料运至烘箱开蒸汽、电加热、风机进行烘干",
+            "operationType": 8,
+            "operationStart": "2022-05-09",
+            "operationEnd": "2023-02-04",
+            "operationSite": "福寺大厦61号-4-2"
+        },
+        {
+            "id": "d9c0b381-425e-413f-8f57-7b3b41d4bd6d",
+            "name": "动土作业",
+            "operationLevel": 3,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "动土深度 0.5m 以上的;可能对地下隐蔽设施产生影响的作业",
+            "operationType": 2,
+            "operationStart": "2022-11-17",
+            "operationEnd": "2023-01-18",
+            "operationSite": "虹桥广场107号-11-3"
+        },
+        {
+            "id": "d9dfd6a6-2b44-445a-b41b-9176fba97f3c",
+            "name": "R32装置系统停车",
+            "operationLevel": 2,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "关闭计量系统、关闭反应釜蒸汽、关闭反应釜出料、关闭水碱洗系统、关闭精馏系统、关闭成品系统",
+            "operationType": 8,
+            "operationStart": "2022-12-30",
+            "operationEnd": "2023-01-07",
+            "operationSite": "咸阳支街124号-7-5"
+        },
+        {
+            "id": "db38cdbe-cee6-4210-8fbb-bd50132a7822",
+            "name": "裂解系统投料",
+            "operationLevel": 1,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "1、过热炉升温到 500C2、通压缩气3、通蒸汽 4、升温到 800C，投 F22",
+            "operationType": 6,
+            "operationStart": "2022-04-30",
+            "operationEnd": "2023-01-04",
+            "operationSite": "瑞阳街73号-18-5"
+        },
+        {
+            "id": "e07185a1-73d9-4ff7-b9b7-c30f6c5d68ca",
+            "name": "动土作业",
+            "operationLevel": 3,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "动土深度 0.5m 以上的;可能对地下隐蔽设施产生影响的作业",
+            "operationType": 2,
+            "operationStart": "2022-01-27",
+            "operationEnd": "2023-01-18",
+            "operationSite": "礼阳路148号-4-9"
+        },
+        {
+            "id": "e21997f1-4a94-4dba-a9c9-a333f377c08c",
+            "name": "盲板抽堵作业",
+            "operationLevel": 1,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "厂区内各管道上的盲板抽堵",
+            "operationType": 7,
+            "operationStart": "2022-05-03",
+            "operationEnd": "2023-02-14",
+            "operationSite": "小港一大厦127号-5-8"
+        },
+        {
+            "id": "e3f18e67-cc31-4331-9807-1df028172023",
+            "name": "受限空间作业",
+            "operationLevel": 4,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "进入反应釜、储罐、水井等封闭和半封闭场所的作业",
+            "operationType": 3,
+            "operationStart": "2022-08-09",
+            "operationEnd": "2023-01-08",
+            "operationSite": "仙山街102号-19-3"
+        },
+        {
+            "id": "e49377c5-f847-438b-82fa-b4c2fb647d2e",
+            "name": "设备检维修",
+            "operationLevel": 4,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "制定方案、检查现场、作业前准备、检维修作业、整理现场",
+            "operationType": 8,
+            "operationStart": "2022-09-11",
+            "operationEnd": "2023-01-30",
+            "operationSite": "阳谷广场125号-16-6"
+        },
+        {
+            "id": "e665a6c6-2467-4f89-b038-0f6c83f1a9b6",
+            "name": "贮槽、计量槽检修",
+            "operationLevel": 1,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "清理槽内结壁、结块物、凝聚物，焊接处理漏点，更换附件，打压查漏",
+            "operationType": 8,
+            "operationStart": "2022-01-24",
+            "operationEnd": "2023-02-15",
+            "operationSite": "顺兴街108号-17-8"
+        },
+        {
+            "id": "e6dd4cc7-ad01-478f-800e-25147d741732",
+            "name": "换 CaC12",
+            "operationLevel": 2,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "1、开启 CaC12 循环 2、排 CaC12 到709 3、补CaC12",
+            "operationType": 7,
+            "operationStart": "2022-07-26",
+            "operationEnd": "2023-01-13",
+            "operationSite": "南平广场114号-12-2"
+        },
+        {
+            "id": "eb8f664d-b719-46e7-87bb-7175f40f3f38",
+            "name": "司炉岗位点火",
+            "operationLevel": 3,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "置换、抽盲板、燃烧炉点火、现场确认",
+            "operationType": 6,
+            "operationStart": "2022-02-22",
+            "operationEnd": "2023-02-24",
+            "operationSite": "无棣四路53号-3-4"
+        },
+        {
+            "id": "edb7fd4e-16ac-41e0-8254-181921f0c7e6",
+            "name": "IV级高处作业",
+            "operationLevel": 1,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "30m以上登高作业",
+            "operationType": 4,
+            "operationStart": "2022-02-26",
+            "operationEnd": "2023-01-04",
+            "operationSite": "吴县二大厦94号-11-6"
+        },
+        {
+            "id": "ee9cbb0d-6642-4485-9fa6-a0ce6ae51414",
+            "name": "换 CaC12",
+            "operationLevel": 4,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "1、开启 CaC12 循环 2、排 CaC12 到709 3、补CaC12",
+            "operationType": 7,
+            "operationStart": "2022-11-05",
+            "operationEnd": "2023-01-04",
+            "operationSite": "安徽路130号-5-9"
+        },
+        {
+            "id": "eed0b0a4-7604-4168-aaa2-6a0aab9e6234",
+            "name": "反应釜通氯气",
+            "operationLevel": 2,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "氯气瓶加压、通氯气、更换氯气瓶、更换氮气瓶",
+            "operationType": 7,
+            "operationStart": "2022-05-21",
+            "operationEnd": "2023-01-29",
+            "operationSite": "嫩江广场56号-6-9"
+        },
+        {
+            "id": "eedaed29-966f-4e08-a175-44bd8fa731b7",
+            "name": "换 CaC12",
+            "operationLevel": 2,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "1、开启 CaC12 循环 2、排 CaC12 到709 3、补CaC12",
+            "operationType": 7,
+            "operationStart": "2022-04-29",
+            "operationEnd": "2023-01-30",
+            "operationSite": "单县路124号-17-10"
+        },
+        {
+            "id": "f0e24a67-5141-48a0-9a07-3dba3b0a30da",
+            "name": "II级高处作业",
+            "operationLevel": 4,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "2m-15m的高处作业",
+            "operationType": 4,
+            "operationStart": "2022-10-22",
+            "operationEnd": "2023-02-07",
+            "operationSite": "郓城北广场115号-17-6"
+        },
+        {
+            "id": "f1f200ed-c448-4b49-b48e-5b4fecafe761",
+            "name": "特级、一级动火",
+            "operationLevel": 1,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "在易燃易爆生产装置、输送管道.储罐、容器、管廊等场所装置上进行的动火的作业",
+            "operationType": 6,
+            "operationStart": "2022-08-26",
+            "operationEnd": "2023-01-18",
+            "operationSite": "太平路148号-4-6"
+        },
+        {
+            "id": "f6ca5b3e-e4c8-4868-a9df-02a78a33a837",
+            "name": "反应釜通氯气",
+            "operationLevel": 4,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "氯气瓶加压、通氯气、更换氯气瓶、更换氮气瓶",
+            "operationType": 7,
+            "operationStart": "2022-06-07",
+            "operationEnd": "2023-02-07",
+            "operationSite": "新湛一路88号-5-10"
+        },
+        {
+            "id": "f90144c9-7400-49e9-8c69-189f07dfe975",
+            "name": "受限空间作业",
+            "operationLevel": 3,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "进入反应釜、储罐、水井等封闭和半封闭场所的作业",
+            "operationType": 3,
+            "operationStart": "2022-06-19",
+            "operationEnd": "2023-01-29",
+            "operationSite": "城武支大厦130号-4-4"
+        },
+        {
+            "id": "fc5e3ce6-9914-4e88-9694-2147fd23feb5",
+            "name": "贮槽、计量槽检修",
+            "operationLevel": 4,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "清理槽内结壁、结块物、凝聚物，焊接处理漏点，更换附件，打压查漏",
+            "operationType": 8,
+            "operationStart": "2022-12-13",
+            "operationEnd": "2023-01-05",
+            "operationSite": "艳阳街93号-15-4"
+        },
+        {
+            "id": "ff542a98-4e11-4a80-95ff-df2b62765451",
+            "name": "二级级动火",
+            "operationLevel": 3,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "除特级、一级动火作业之外的其他动火作业",
+            "operationType": 6,
+            "operationStart": "2022-01-12",
+            "operationEnd": "2023-01-25",
+            "operationSite": "宁国一大厦89号-1-9"
+        }
+    ],
+    "2": [
+        {
+            "id": "0c12b09d-655d-4baf-aac9-7d286796deeb",
+            "name": "R32装置系统停车",
+            "operationLevel": 1,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "关闭计量系统、关闭反应釜蒸汽、关闭反应釜出料、关闭水碱洗系统、关闭精馏系统、关闭成品系统",
+            "operationType": 8,
+            "operationStart": "2023-01-21",
+            "operationEnd": "2024-01-05",
+            "operationSite": "茌平路86号-7-7"
+        },
+        {
+            "id": "257ba497-de19-4c87-92fd-f9a69685cc50",
+            "name": "检测雨水管道泄漏点",
+            "operationLevel": 3,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "使用挖掘机和人工挖掘作业，挖掘深度1m.",
+            "operationType": 1,
+            "operationStart": "2023-01-13",
+            "operationEnd": "2024-01-18",
+            "operationSite": "泰州二路63号-7-9"
+        },
+        {
+            "id": "5dda733e-6a3d-42ce-926a-6d3018b83b57",
+            "name": "烘干",
+            "operationLevel": 4,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "将物料运至烘箱开蒸汽、电加热、风机进行烘干",
+            "operationType": 8,
+            "operationStart": "2022-10-17",
+            "operationEnd": "2024-02-05",
+            "operationSite": "白沙河路63号-4-10"
+        },
+        {
+            "id": "5e968c53-b907-4c4f-a618-550d554a78bb",
+            "name": "二级级动火",
+            "operationLevel": 3,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "除特级、一级动火作业之外的其他动火作业",
+            "operationType": 6,
+            "operationStart": "2023-01-29",
+            "operationEnd": "2024-01-02",
+            "operationSite": "瑞云街113号-5-7"
+        },
+        {
+            "id": "67296601-79fa-44b7-950f-c108d2d8289e",
+            "name": "临时用电作业",
+            "operationLevel": 1,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "厂区内的临时接电、用电作业",
+            "operationType": 9,
+            "operationStart": "2023-01-31",
+            "operationEnd": "2024-02-05",
+            "operationSite": "龙羊峡路13号-8-1"
+        },
+        {
+            "id": "68a97c6e-2a21-423d-a89d-fc87706506d1",
+            "name": "IV级高处作业",
+            "operationLevel": 4,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "30m以上登高作业",
+            "operationType": 4,
+            "operationStart": "2022-11-17",
+            "operationEnd": "2024-01-17",
+            "operationSite": "团岛路33号-2-1"
+        },
+        {
+            "id": "983068d2-4810-4492-b84e-6aef4945e306",
+            "name": "动土作业",
+            "operationLevel": 3,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "动土深度 0.5m 以上的;可能对地下隐蔽设施产生影响的作业",
+            "operationType": 2,
+            "operationStart": "2022-07-25",
+            "operationEnd": "2024-02-28",
+            "operationSite": "山城广场135号-19-10"
+        },
+        {
+            "id": "9bc2db1a-23b7-4b00-a090-d0a477a07034",
+            "name": "反应釜通氯气",
+            "operationLevel": 1,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "氯气瓶加压、通氯气、更换氯气瓶、更换氮气瓶",
+            "operationType": 7,
+            "operationStart": "2022-06-30",
+            "operationEnd": "2024-01-22",
+            "operationSite": "棣纬二大厦129号-15-8"
+        },
+        {
+            "id": "a1fd3234-2ada-44fc-a226-f530d958ca4d",
+            "name": "II级高处作业",
+            "operationLevel": 3,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "2m-15m的高处作业",
+            "operationType": 4,
+            "operationStart": "2022-09-10",
+            "operationEnd": "2024-01-09",
+            "operationSite": "广西支街17号-18-1"
+        },
+        {
+            "id": "a3dc31ec-3ce4-41f7-aa11-d5604ea2e0b3",
+            "name": "II级高处作业",
+            "operationLevel": 4,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "2m-15m的高处作业",
+            "operationType": 4,
+            "operationStart": "2022-10-17",
+            "operationEnd": "2024-02-07",
+            "operationSite": "台东东七广场129号-14-6"
+        },
+        {
+            "id": "a3e86d7e-62b5-4387-8afd-9341fba77d95",
+            "name": "裂解系统投料",
+            "operationLevel": 1,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "1、过热炉升温到 500C2、通压缩气3、通蒸汽 4、升温到 800C，投 F22",
+            "operationType": 6,
+            "operationStart": "2022-08-05",
+            "operationEnd": "2024-01-27",
+            "operationSite": "六码头80号-3-1"
+        },
+        {
+            "id": "a92b2b7c-98ce-4479-8f62-3ec32d8ebee1",
+            "name": "动土作业",
+            "operationLevel": 3,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "动土深度 0.5m 以上的;可能对地下隐蔽设施产生影响的作业",
+            "operationType": 2,
+            "operationStart": "2022-11-17",
+            "operationEnd": "2024-01-23",
+            "operationSite": "瑞金广场124号-18-4"
+        },
+        {
+            "id": "ab78ff0c-121d-4d6a-8a5e-89e3689c15dc",
+            "name": "受限空间作业",
+            "operationLevel": 2,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "进入反应釜、储罐、水井等封闭和半封闭场所的作业",
+            "operationType": 3,
+            "operationStart": "2023-04-24",
+            "operationEnd": "2024-02-12",
+            "operationSite": "高密路34号-9-10"
+        },
+        {
+            "id": "b71bff70-1830-4f22-80f0-75d3ad581b83",
+            "name": "换 CaC12",
+            "operationLevel": 2,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "1、开启 CaC12 循环 2、排 CaC12 到709 3、补CaC12",
+            "operationType": 7,
+            "operationStart": "2022-10-27",
+            "operationEnd": "2024-02-02",
+            "operationSite": "十梅庵街146号-4-4"
+        },
+        {
+            "id": "be835f1b-288d-40fa-bd56-213c66e69510",
+            "name": "I级高处作业",
+            "operationLevel": 2,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "15m-30m的高处作业",
+            "operationType": 4,
+            "operationStart": "2022-12-02",
+            "operationEnd": "2024-02-24",
+            "operationSite": "范县路79号-3-4"
+        },
+        {
+            "id": "c1ab0efd-9715-472b-a774-3974402d7b39",
+            "name": "检测雨水管道泄漏点",
+            "operationLevel": 2,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "使用挖掘机和人工挖掘作业，挖掘深度1m.",
+            "operationType": 1,
+            "operationStart": "2022-07-24",
+            "operationEnd": "2024-02-08",
+            "operationSite": "万寿路72号-20-9"
+        },
+        {
+            "id": "c34e3d3f-5a44-4442-9d10-e2206d0a5482",
+            "name": "烘干",
+            "operationLevel": 4,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "将物料运至烘箱开蒸汽、电加热、风机进行烘干",
+            "operationType": 8,
+            "operationStart": "2022-04-07",
+            "operationEnd": "2024-02-25",
+            "operationSite": "隆德广场29号-9-6"
+        },
+        {
+            "id": "c5113029-eaec-4318-9fb4-0e85775d3860",
+            "name": "二、三级吊装",
+            "operationLevel": 3,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "100t 以下的吊装作业",
+            "operationType": 5,
+            "operationStart": "2022-05-24",
+            "operationEnd": "2024-02-20",
+            "operationSite": "钜野广场26号-10-8"
+        },
+        {
+            "id": "cb75beee-2adc-4f87-9302-050643a2eb1e",
+            "name": "I级高处作业",
+            "operationLevel": 2,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "15m-30m的高处作业",
+            "operationType": 4,
+            "operationStart": "2022-11-04",
+            "operationEnd": "2024-01-27",
+            "operationSite": "延吉街103号-12-1"
+        },
+        {
+            "id": "cf689702-51bb-4cf6-b828-af0d955dee55",
+            "name": "I级高处作业",
+            "operationLevel": 4,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "15m-30m的高处作业",
+            "operationType": 4,
+            "operationStart": "2022-07-24",
+            "operationEnd": "2024-03-02",
+            "operationSite": "台西纬二路14号-3-6"
+        },
+        {
+            "id": "cff72cd4-aaca-47d5-84ab-3839b3452931",
+            "name": "特级、一级动火",
+            "operationLevel": 1,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "在易燃易爆生产装置、输送管道.储罐、容器、管廊等场所装置上进行的动火的作业",
+            "operationType": 6,
+            "operationStart": "2022-05-16",
+            "operationEnd": "2024-02-26",
+            "operationSite": "国城路88号-12-8"
+        },
+        {
+            "id": "d40c7f8e-3326-428b-a235-02240a91c063",
+            "name": "设备检维修",
+            "operationLevel": 2,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "制定方案、检查现场、作业前准备、检维修作业、整理现场",
+            "operationType": 8,
+            "operationStart": "2022-08-16",
+            "operationEnd": "2024-01-02",
+            "operationSite": "观城路60号-3-4"
+        },
+        {
+            "id": "d4a76336-291c-4817-8eff-ce170c1a7c15",
+            "name": "临时用电作业",
+            "operationLevel": 1,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "厂区内的临时接电、用电作业",
+            "operationType": 9,
+            "operationStart": "2023-01-31",
+            "operationEnd": "2024-02-05",
+            "operationSite": "龙羊峡路13号-8-1"
+        },
+        {
+            "id": "d7ed2b42-4d11-4a21-b902-e0e6d27c8f51",
+            "name": "裂解系统投料",
+            "operationLevel": 1,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "1、过热炉升温到 500C2、通压缩气3、通蒸汽 4、升温到 800C，投 F22",
+            "operationType": 6,
+            "operationStart": "2022-06-18",
+            "operationEnd": "2024-02-16",
+            "operationSite": "乐陵街44号-3-7"
+        },
+        {
+            "id": "d7fe1a2c-ac96-4c50-a863-d74532694b5c",
+            "name": "反应釜通氯气",
+            "operationLevel": 4,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "氯气瓶加压、通氯气、更换氯气瓶、更换氮气瓶",
+            "operationType": 7,
+            "operationStart": "2022-01-29",
+            "operationEnd": "2024-04-01",
+            "operationSite": "西陵峡街29号-9-2"
+        }
+    ],
+    "1": [
+        {
+            "id": "03cde8f0-140e-48d6-9d78-92cd7dfab33e",
+            "name": "司炉岗位点火",
+            "operationLevel": 1,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "置换、抽盲板、燃烧炉点火、现场确认",
+            "operationType": 6,
+            "operationStart": "2023-08-29",
+            "operationEnd": "2024-02-10",
+            "operationSite": "郧阳路115号-9-2"
+        },
+        {
+            "id": "0fe7d3ac-fed7-4d97-917f-ffcb65073dd7",
+            "name": "受限空间作业",
+            "operationLevel": 4,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "进入反应釜、储罐、水井等封闭和半封闭场所的作业",
+            "operationType": 3,
+            "operationStart": "2023-09-21",
+            "operationEnd": "2024-01-28",
+            "operationSite": "巢湖街57号-11-4"
+        },
+        {
+            "id": "24e80cb3-df39-4b52-85e4-6dd35a64fadf",
+            "name": "临时用电作业",
+            "operationLevel": 4,
+            "enterpriseId": "1",
+            "enterprise": "中煤陕西榆林能源化工有限公司",
+            "operationContent": "厂区内的临时接电、用电作业",
+            "operationType": 9,
+            "operationStart": "2023-07-31",
+            "operationEnd": "2024-01-06",
+            "operationSite": "昌平街27号-1-6"
+        },
+        {
+            "id": "25daee70-b9a1-4c98-81e2-e24c7224688c",
+            "name": "临时用电作业",
+            "operationLevel": 1,
+            "enterpriseId": "4",
+            "enterprise": "液化空气（榆林）有限公司",
+            "operationContent": "厂区内的临时接电、用电作业",
+            "operationType": 9,
+            "operationStart": "2023-08-10",
+            "operationEnd": "2024-03-01",
+            "operationSite": "龙山路68号-8-4"
+        },
+        {
+            "id": "37099c58-ed1b-49cc-810f-b3bca5666f96",
+            "name": "司炉岗位点火",
+            "operationLevel": 4,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "置换、抽盲板、燃烧炉点火、现场确认",
+            "operationType": 6,
+            "operationStart": "2023-12-11",
+            "operationEnd": "2024-01-17",
+            "operationSite": "湛山四大厦84号-16-7"
+        },
+        {
+            "id": "5358cd0c-f473-4b37-b8c3-d81082ad1897",
+            "name": "检测雨水管道泄漏点",
+            "operationLevel": 1,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "使用挖掘机和人工挖掘作业，挖掘深度1m.",
+            "operationType": 1,
+            "operationStart": "2023-10-01",
+            "operationEnd": "2024-01-20",
+            "operationSite": "礼阳路100号-12-8"
+        },
+        {
+            "id": "6a155c0e-d692-4833-a18c-4a7400b3aa4c",
+            "name": "II级高处作业",
+            "operationLevel": 2,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "2m-15m的高处作业",
+            "operationType": 4,
+            "operationStart": "2023-11-11",
+            "operationEnd": "2024-01-21",
+            "operationSite": "天台路100号-10-7"
+        },
+        {
+            "id": "70c3a18f-dede-4fd2-bcdd-b909620c1870",
+            "name": "裂解系统投料",
+            "operationLevel": 3,
+            "enterpriseId": "6",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "operationContent": "1、过热炉升温到 500C2、通压缩气3、通蒸汽 4、升温到 800C，投 F22",
+            "operationType": 6,
+            "operationStart": "2023-10-31",
+            "operationEnd": "2024-02-20",
+            "operationSite": "新田路69号-1-8"
+        },
+        {
+            "id": "73f81d12-f81b-41d2-beed-f3c570e1dd99",
+            "name": "R32装置系统停车",
+            "operationLevel": 2,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "关闭计量系统、关闭反应釜蒸汽、关闭反应釜出料、关闭水碱洗系统、关闭精馏系统、关闭成品系统",
+            "operationType": 8,
+            "operationStart": "2023-05-17",
+            "operationEnd": "2024-03-01",
+            "operationSite": "大成大厦127号-10-6"
+        },
+        {
+            "id": "7c00d36e-41a9-493c-8af3-d577275abdf7",
+            "name": "I级高处作业",
+            "operationLevel": 3,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "15m-30m的高处作业",
+            "operationType": 4,
+            "operationStart": "2023-09-24",
+            "operationEnd": "2024-01-28",
+            "operationSite": "西陵峡三路128号-12-4"
+        },
+        {
+            "id": "87da5769-4ae6-4c90-80b7-7a2e4037f630",
+            "name": "二、三级吊装",
+            "operationLevel": 4,
+            "enterpriseId": "3",
+            "enterprise": "陕西延长石油榆林凯越煤化有限责任公司",
+            "operationContent": "100t 以下的吊装作业",
+            "operationType": 5,
+            "operationStart": "2023-12-27",
+            "operationEnd": "2024-01-19",
+            "operationSite": "咸阳支街37号-4-1"
+        },
+        {
+            "id": "9cb6e2b7-840f-488c-a2b1-4df0517e943c",
+            "name": "贮槽、计量槽检修",
+            "operationLevel": 4,
+            "enterpriseId": "2",
+            "enterprise": "陕西延长石油榆林煤化有限公司",
+            "operationContent": "清理槽内结壁、结块物、凝聚物，焊接处理漏点，更换附件，打压查漏",
+            "operationType": 8,
+            "operationStart": "2023-10-20",
+            "operationEnd": "2024-01-23",
+            "operationSite": "阳信路84号-4-9"
+        },
+        {
+            "id": "aff076a6-8b12-4739-99b4-3aaf77bc6f00",
+            "name": "盲板抽堵作业",
+            "operationLevel": 2,
+            "enterpriseId": "5",
+            "enterprise": "榆林洪宇环保再生资源有限公司",
+            "operationContent": "厂区内各管道上的盲板抽堵",
+            "operationType": 7,
+            "operationStart": "2023-08-14",
+            "operationEnd": "2024-02-25",
+            "operationSite": "港华大厦77号-2-8"
+        }
+    ]
+}
+
+export const hiddenDangerList = [
+        {
+            "id": "0045fde2-0cd7-4adc-8d97-536c920f6717",
+            "name": "批控器无浪涌保护器",
+            "reformStatus": 1,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "009cc4c3-ce2b-4d4d-bb4a-5c6e13170f04",
+            "name": "稳压系统无法自启动",
+            "reformStatus": 1,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "013e5bdd-9229-467e-9e17-31b0e3ac64aa",
+            "name": "TD202罐",
+            "reformStatus": 1,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "01564c82-4829-41b0-b27c-653cee15398a",
+            "name": "管线掉漆",
+            "reformStatus": 1,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "016d8287-daa5-40dc-b048-6f1533f113cc",
+            "name": "发车台3号位电机风扇破损",
+            "reformStatus": 1,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "02062c51-4e1b-49f5-8ffc-59a4388dd88a",
+            "name": "临时气瓶暂存场所可燃气故障，无法正常报警",
+            "reformStatus": 1,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "1d2a4081-b284-4d1b-bcc1-d2958bfb8a41",
+            "name": "库区至大门摄像头无法显示",
+            "reformStatus": 1,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "1d306063-a507-419b-938b-0104ccb263b7",
+            "name": "临时气瓶暂存场所可燃气故障，无法正常报警",
+            "reformStatus": 1,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "1db948d6-b24a-42c0-abc8-d1ff710aa03d",
+            "name": "润滑油乳化需更换",
+            "reformStatus": 1,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "1de43d60-30cc-4efd-9ba3-00d3e216b3de",
+            "name": "批控器无浪涌保护器",
+            "reformStatus": 1,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "1ec4fd87-be1a-4efc-8aad-49b0181023bb",
+            "name": "封堵机房穿线孔",
+            "reformStatus": 1,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "1f940431-c14d-416d-b4ab-e2781632d2a1",
+            "name": "稳压系统无法自启动",
+            "reformStatus": 1,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "203d1918-b05a-443b-ab3d-bf34b0854ea2",
+            "name": "消防泵房清水回流管线",
+            "reformStatus": 1,
+            "exceedTimeLimitStatus": 0
+        },{
+            "id": "00a2bb18-4f2c-43a7-8834-91cf9ab8e131",
+            "name": "发车台3号位电机风扇破损",
+            "reformStatus": 2,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "01241c43-1d92-4926-92ca-dd7516688f3a",
+            "name": "码头宽带故障",
+            "reformStatus": 2,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "01579e71-f901-401a-a9d5-aae10d16ec58",
+            "name": "地埋自来水管线渗漏",
+            "reformStatus": 2,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "01f95bbd-5d57-48fb-9eae-376088029da0",
+            "name": "码头宽带故障",
+            "reformStatus": 2,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "0250ea86-9891-4c93-92e6-958f03d50f47",
+            "name": "消防控制柜继电器异常",
+            "reformStatus": 2,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "02531447-5add-4221-af62-1e848d6e3121",
+            "name": "消防控制柜继电器异常",
+            "reformStatus": 2,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "02641dea-957e-4ca4-b9c2-905ea0b9aaf1",
+            "name": "码头能见度度仪故障",
+            "reformStatus": 2,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "03231ad7-c20f-4970-8b24-aac92dfb5d4e",
+            "name": "管线掉漆",
+            "reformStatus": 2,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "03302bcb-dc2e-4bc9-9729-a172a638a2f2",
+            "name": "码头能见度度仪故障",
+            "reformStatus": 2,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "03f63d69-c4db-49b3-8c57-2d0cf542ed9e",
+            "name": "TD202罐",
+            "reformStatus": 2,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "0400eb18-6d40-4148-b225-c9295f9b7330",
+            "name": "TD202罐",
+            "reformStatus": 2,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "042082c5-0728-4768-9473-33391fb7608a",
+            "name": "消防控制柜继电器异常",
+            "reformStatus": 2,
+            "exceedTimeLimitStatus": 0
+        },{
+            "id": "0083b5c7-3883-4667-9cbc-9bc4d59cdbfb",
+            "name": "润滑油乳化需更换",
+            "reformStatus": 3,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "00b351ad-c047-45d5-a8e6-2a85b764e6ff",
+            "name": "TD202罐",
+            "reformStatus": 3,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "00bd4fec-4fb1-4dd1-8e07-0eda2b4692ca",
+            "name": "TD202罐",
+            "reformStatus": 3,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "02928982-054e-4093-a146-24f3a9a630b1",
+            "name": "TD202罐",
+            "reformStatus": 3,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "03c36cec-512a-46f1-a7ca-1eb4f909141a",
+            "name": "路灯空开不匹配",
+            "reformStatus": 3,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "03fc1d67-e65f-405c-95e8-73ace929ba11",
+            "name": "清水柴油泵无法启动",
+            "reformStatus": 3,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "051c37d5-4f99-47aa-a297-bab2a6b1819d",
+            "name": "码头能见度度仪故障",
+            "reformStatus": 3,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "05ed21ac-3a71-40f2-b21f-fb0ce790cfb3",
+            "name": "TD202罐",
+            "reformStatus": 3,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "060a4d16-afdb-4a7a-9930-a6467d3ed674",
+            "name": "人体静电释放器缺电",
+            "reformStatus": 3,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "071ec5f6-1241-4eed-bc38-c44cef18e28c",
+            "name": "润滑油乳化需更换",
+            "reformStatus": 3,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "08b8f0bb-d5c5-44e6-bef3-e147a985e594",
+            "name": "封堵机房穿线孔",
+            "reformStatus": 3,
+            "exceedTimeLimitStatus": 0
+        },{
+            "id": "000a42c8-c6af-4652-bc10-3070e8ee315a",
+            "name": "灭火器欠压",
+            "reformStatus": 4,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "01e53f91-c27e-4c4e-966f-9a7f58d2d7f9",
+            "name": "发车台3号位电机风扇破损",
+            "reformStatus": 4,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "02645bad-14c6-401c-931b-1efcd5a86638",
+            "name": "管线掉漆",
+            "reformStatus": 4,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "026f837f-279c-48b0-ae8f-be4d3c63c61b",
+            "name": "地埋自来水管线渗漏",
+            "reformStatus": 4,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "02eb41a1-0daa-48ed-a249-ea7a01d65f44",
+            "name": "发车台3号位电机风扇破损",
+            "reformStatus": 4,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "03c616d5-6c4c-42a6-bc97-3a21f1bfa256",
+            "name": "封堵机房穿线孔",
+            "reformStatus": 4,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "04935307-3ee9-46cc-9406-8dbb64397c73",
+            "name": "封堵机房穿线孔",
+            "reformStatus": 4,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "04b35486-4d76-4b7c-b18d-17a3aa852e56",
+            "name": "码头宽带故障",
+            "reformStatus": 4,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "05bf3c70-a37e-4e3d-9e29-7a2101ba8ee5",
+            "name": "灭火器欠压",
+            "reformStatus": 4,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "061d81cf-0101-4a7e-b629-3d76d78172f2",
+            "name": "静电释放球馈电",
+            "reformStatus": 4,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "065ba39e-b017-41a5-9570-152778d98753",
+            "name": "人体静电释放器缺电",
+            "reformStatus": 4,
+            "exceedTimeLimitStatus": 0
+        },
+        {
+            "id": "06aeba3e-0ab7-43f2-8521-500fa944b9cd",
+            "name": "灭火器欠压",
+            "reformStatus": 4,
+            "exceedTimeLimitStatus": 0
+        }
+    ]
+
+
+
+export const hiddenList = [
+    {
+        "id": "0045fde2-0cd7-4adc-8d97-536c920f6717",
+        "name": "批控器无浪涌保护器",
+        "reformStatus": 1,
+        "company": "联化科",
+        "delay":50,
+        "exceedTimeLimitStatus": 0
+    },
+    {
+        "id": "009cc4c3-ce2b-4d4d-bb4a-5c6e13170f04",
+        "name": "稳压系统无法自启动",
+        "reformStatus": 1,
+        "company": "立本作物",
+        "delay":45,
+        "exceedTimeLimitStatus": 0
+    },
+    {
+        "id": "013e5bdd-9229-467e-9e17-31b0e3ac64aa",
+        "name": "TD202罐",
+        "reformStatus": 1,
+        "company": "圣丰集团",
+        "delay":42,
+        "exceedTimeLimitStatus": 0
+    },
+    {
+        "id": "01564c82-4829-41b0-b27c-653cee15398a",
+        "name": "管线掉漆",
+        "reformStatus": 1,
+        "company": "茂盛生物",
+        "delay":40,
+        "exceedTimeLimitStatus": 0
+    },
+    {
+        "id": "016d8287-daa5-40dc-b048-6f1533f113cc",
+        "name": "发车台3号位电机风扇破损",
+        "reformStatus": 1,
+        "company": "利尔化学",
+        "delay":39,
+        "exceedTimeLimitStatus": 0
+    },
+    {
+        "id": "02062c51-4e1b-49f5-8ffc-59a4388dd88a",
+        "name": "临时气瓶暂存场所可燃气故障，无法正常报警",
+        "reformStatus": 1,
+        "company": "海利得",
+        "delay":36,
+        "exceedTimeLimitStatus": 0
+    },
+    {
+        "id": "1d2a4081-b284-4d1b-bcc1-d2958bfb8a41",
+        "name": "库区至大门摄像头无法显示",
+        "reformStatus": 1,
+        "company": "联化科",
+        "delay":33,
+        "exceedTimeLimitStatus": 0
+    },
+    {
+        "id": "1d306063-a507-419b-938b-0104ccb263b7",
+        "name": "临时气瓶暂存场所可燃气故障，无法正常报警",
+        "reformStatus": 1,
+        "company": "立本作物",
+        "delay":32,
+        "exceedTimeLimitStatus": 0
+    },
+    {
+        "id": "1db948d6-b24a-42c0-abc8-d1ff710aa03d",
+        "name": "润滑油乳化需更换",
+        "reformStatus": 1,
+        "company": "圣丰集团",
+        "delay":30,
+        "exceedTimeLimitStatus": 0
+    },
+    {
+        "id": "1de43d60-30cc-4efd-9ba3-00d3e216b3de",
+        "name": "批控器无浪涌保护器",
+        "reformStatus": 1,
+        "company": "茂盛生物",
+        "delay":25,
+        "exceedTimeLimitStatus": 0
+    },
+    {
+        "id": "1ec4fd87-be1a-4efc-8aad-49b0181023bb",
+        "name": "封堵机房穿线孔",
+        "reformStatus": 1,
+        "company": "利尔化学",
+        "delay":25,
+        "exceedTimeLimitStatus": 0
+    },
+    {
+        "id": "1f940431-c14d-416d-b4ab-e2781632d2a1",
+        "name": "稳压系统无法自启动",
+        "reformStatus": 1,
+        "company": "海利得",
+        "delay":22,
+        "exceedTimeLimitStatus": 0
+    },
+    {
+        "id": "203d1918-b05a-443b-ab3d-bf34b0854ea2",
+        "name": "消防泵房清水回流管线",
+        "reformStatus": 1,
+        "company": "利尔化学",
+        "delay":10,
+        "exceedTimeLimitStatus": 0
+    }
+]
+
+
diff --git a/src/components/safety/risk/left/riskIndexLeft.component.html b/src/components/safety/risk/left/riskIndexLeft.component.html
new file mode 100644
index 0000000..aedf107
--- /dev/null
+++ b/src/components/safety/risk/left/riskIndexLeft.component.html
@@ -0,0 +1,33 @@
+<div class="env-left">
+    <div class="box-content flex-15">
+        <title-component :imgSrc="imgSrc">
+            风险分级管控
+        </title-component>
+        <div class="tabs-style">
+            <el-radio-group @change="changeData" v-model="levelType">
+                <el-radio-button label="1">一级风险</el-radio-button>
+                <el-radio-button label="2">二级风险</el-radio-button>
+                <el-radio-button label="3">三级风险</el-radio-button>
+                <el-radio-button label="4">四级风险</el-radio-button>
+            </el-radio-group>
+        </div>
+        <div class="risk-title">
+            <div class="risk-title-item">风险分析单元</div>
+            <div class="risk-title-item">风险描述</div>
+        </div>
+        <div class="risk-list">
+            <div class="risk-list-box animate__animated" v-list="i" @click="getRiskDetail(item)" :key="i" v-for="(item,i) in riskList[levelType]">
+                <div class="risk-list-box-item" :title="item.name">{{item.name}}</div>
+                <div class="risk-list-box-item" :title="item.description">{{item.description}}</div>
+            </div>
+        </div>
+    </div>
+    <div class="box-content margin-top-40">
+        <title-component :imgSrc="imgSrc">
+            风险项统计
+        </title-component>
+            <hbt-echarts className="risk-line-chart-all" class="margin-top-23"  :options="lineData" @onChartInit="getEcharts($event,'lineChart')"></hbt-echarts>
+            <hbt-echarts className="risk-pie-chart-all" class=" margin-top-23"  :options="option1" @onChartInit="getEcharts($event,'rightChart')"></hbt-echarts>
+
+    </div>
+</div>
diff --git a/src/components/safety/risk/left/riskIndexLeft.component.ts b/src/components/safety/risk/left/riskIndexLeft.component.ts
new file mode 100644
index 0000000..08749ff
--- /dev/null
+++ b/src/components/safety/risk/left/riskIndexLeft.component.ts
@@ -0,0 +1,151 @@
+import {Component, Emit, Vue} from 'vue-property-decorator';
+import template from "./riskIndexLeft.component.html"
+import {pieChartData,lineChartData} from "./chartData";
+
+import TitleComponent from "@/components/title.component.vue"
+import WarningListComponent from "@/components/warningList.component.vue"
+import RiskService from "@/service/risk.service";
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        WarningListComponent
+    },
+    directives:{
+        //列表数据动态飞入动画
+        list:{
+            bind:(el,binding)=>{
+                const timer = (binding.value+1)*100
+                setTimeout(()=>{
+                    el.classList.add("animate__fadeInLeft")
+                },timer)
+            },
+        }
+    }
+})
+export default class RiskIndexLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    timer: any = null;
+    //饼图数据
+    option1: any =  pieChartData({text:'风险项',subtext:'等级占比'})
+    //饼图实例
+    pieChart: any = {};
+    //折线图实例
+    lineChart: any = {};
+    //风险mock数据
+    riskList = [];
+    rightChart:any = {}
+    activePieItem = 0;
+    //折线图数据
+    lineData = lineChartData()
+    //切换饼图高亮区域
+    changePieChange() {
+
+        if (this.activePieItem > 8) {
+            this.activePieItem = 0
+        }
+
+        //定时移除高亮选中区
+        this.rightChart.dispatchAction({
+            type: "downplay",
+            seriesIndex: 0,
+        });
+        //定时加载选中高亮区
+        this.rightChart.dispatchAction({
+            type: "highlight",
+            dataIndex: this.activePieItem
+        })
+        this.activePieItem += 2;
+
+    }
+
+    //获取图表实例
+    getEcharts(e,type) {
+        this[type] = e
+    }
+
+
+    //随机整数
+    getRandomInt(min: number, max: number) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
+    }
+
+    count = 1
+
+    //监听页面变化重新绘制图表
+    resize() {
+        setTimeout(() => {
+            this.rightChart.resize();
+            this.lineChart.resize();
+        }, 300)
+    }
+    public riskService = new RiskService();
+    //获取风险管控列表
+    getRiskList(){
+        this.riskService.getRiskList().then((res:any)=>{
+            if (res.code === 200){
+                this.riskList = res.data;
+            }else{
+                this.$message.error(res.message)
+            }
+        })
+    }
+    //获取风险管控详情
+    getRiskDetail(params){
+        this.riskService.getRiskDetail(params).then((res:any)=>{
+            if (res.code === 200){
+                this.showRight(res.data)
+            }else{
+                this.$message.error(res.message)
+            }
+        })
+    }
+    //定时刷新图表
+    lineChartChange(){
+        this.lineChart.clear();
+        this.lineChart.setOption(lineChartData())
+    }
+    mounted() {
+        this.getRiskList()
+        this.timer = setInterval(() => {
+            this.lineChartChange()
+            this.changePieChange()
+        }, 3000)
+
+        window.addEventListener("resize", this.resize);
+    }
+
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+    @Emit()
+    showRight(item){
+        console.log(3123)
+    }
+    levelType = '1'
+    //切换风险级别
+    changeData(val){
+        console.log(1)
+    }
+    delay(i) {
+        return `animate__delay-${i}s`
+    }
+
+
+}
+
diff --git a/src/components/safety/risk/right/chartData.js b/src/components/safety/risk/right/chartData.js
new file mode 100644
index 0000000..a7b0974
--- /dev/null
+++ b/src/components/safety/risk/right/chartData.js
@@ -0,0 +1,217 @@
+export const lineChartData = function (data, xAxisData, $echarts) {
+    return {
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: xAxisData
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                data: data,
+                type: 'line',
+                itemStyle: {
+                    color: '#E8E8E8',
+                },
+                symbolSize: 7,
+                lineStyle: {
+                    color: '#E8E8E8',
+                    width: 3
+                },
+                smooth: true,
+                label: {
+                    show: true,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            }
+        ],
+
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 22,
+            x2: 12,
+            y2: 20,
+        }
+    }
+}
+export const lineAndBatChartData = function ($echarts) {
+    return {
+        color: ['#7FB0FF', '#E8E8E8', '#FADFA4'],
+        tooltip: {
+            show: true,
+            alwaysShowContent: false,
+            trigger: 'item',
+            backgroundColor: 'rgba(0,0,0,0.4)',
+            textStyle: {
+                color: '#ffffff'
+            }
+        },
+        legend: {
+            top: 'top',
+            itemGap: 25,
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff"
+            }
+        },
+        grid: {
+            top: '15%',
+            left: '5%',
+            right: '5%',
+            bottom: '5%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: [
+                    '1月',
+                    '2月',
+                    '3月',
+                    '4月',
+                    '5月',
+                    '6月',
+                    '7月',
+                ],
+
+                axisTick: false,
+                axisLine: {
+                    lineStyle: {
+                        color: '#999999'
+                    }
+                },
+                axisLabel: {
+                    color: '#999999'
+                }
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                name: '',
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#999999',
+                        width: 1,
+                        type: 'solid'
+                    }
+                },
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#999999',
+                    }
+                },
+            },
+            {
+                type: 'value',
+                name: '',
+                splitLine: {
+                    show: false
+                }
+            }
+        ],
+        series: [
+            {
+                name: '巡查次数',
+                type: 'bar',
+                barWidth: 8,
+                data: [120, 95, 70, 85, 110, 60, 90],
+                itemStyle: {
+                    borderRadius: [4, 4, 0, 0],
+                    color: function (params) {
+                        return new $echarts.graphic.LinearGradient(
+                            0, 0, 0, 1,
+                            [{
+                                offset: 0,
+                                color: '#7FB0FF'
+                            },
+                                {
+                                    offset: 1,
+                                    color: '#3179EA'
+                                }
+                            ]
+                        )
+                    },
+                }
+            },
+            {
+                name: '上报隐患',
+                type: 'bar',
+                barWidth: 8,
+                itemStyle: {
+                    borderRadius: [4, 4, 0, 0],
+                    color: function (params) {
+                        return new $echarts.graphic.LinearGradient(
+                            0, 0, 0, 1,
+                            [{
+                                offset: 0,
+                                color: '#E8E8E8'
+                            },
+                                {
+                                    offset: 1,
+                                    color: '#999999'
+                                }
+                            ]
+                        )
+                    },
+                },
+                data: [130, 75, 80, 83, 90, 100, 120]
+            },
+            {
+                name: '上报风险',
+                type: 'line',
+                color: '#D0AF7B',
+                yAxisIndex: 1,
+                symbolSize: 6,
+                symbol: 'circle',
+                data: [110, 68, 78, 105, 125, 77, 100]
+            }
+        ]
+    }
+
+}
diff --git a/src/components/safety/risk/right/riskDetailRight.component.html b/src/components/safety/risk/right/riskDetailRight.component.html
new file mode 100644
index 0000000..42c5005
--- /dev/null
+++ b/src/components/safety/risk/right/riskDetailRight.component.html
@@ -0,0 +1,25 @@
+<div class="env-right">
+    <div class="box-content flex-0 height-auto">
+        <title-component :imgSrc="imgSrc" :show-close="true" @change-close="changeClose">
+            危险源详情
+        </title-component>
+        <div class="d-flex align-items-center margin-top-30 margin-bottom-30"><i :class="iconColor"
+                                                                                 class="cycle-icon"></i><span
+                :class="textColor">{{ titleName }}</span></div>
+        <div class="risk-info">
+            <div class="content-style"><span>危险源名称:</span><span>{{ riskDetailData.name }}</span></div>
+            <div class="content-style"><span>危险源编号:</span><span>{{ riskDetailData.unifiedCoding }}</span></div>
+            <div class="content-style">
+                <span>关联危化品:</span> <span v-if="!riskDetailData.hazardousChemicalsName" class="noName-style">无</span>
+                <span class="hazard-style" @click="getHazard" v-else>{{ riskDetailData.hazardousChemicalsName }}</span>
+            </div>
+            <div class="content-style"><span>危险因素:</span><span>{{ riskDetailData.riskFactor }}</span></div>
+            <div class="content-style"><span>影响后果:</span><span>{{ riskDetailData.consequence }}</span></div>
+            <div class="content-style"><span>管控措施:</span><span>{{ riskDetailData.controlMeasures }}</span></div>
+            <div class="content-style"><span>责任主体:</span><span>{{ riskDetailData.enterprise }}</span></div>
+            <div class="content-style"><span>备注:</span><span>{{ riskDetailData.remark }}</span></div>
+        </div>
+    </div>
+    <LargePopUpComponent :detailData="detailData" :dialogVisibleForBook.sync="dialogVisibleForBook">
+    </LargePopUpComponent>
+</div>
diff --git a/src/components/safety/risk/right/riskDetailRight.component.ts b/src/components/safety/risk/right/riskDetailRight.component.ts
new file mode 100644
index 0000000..d3cc2b6
--- /dev/null
+++ b/src/components/safety/risk/right/riskDetailRight.component.ts
@@ -0,0 +1,79 @@
+import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
+import template from "./riskDetailRight.component.html"
+
+import TitleComponent from "@/components/title.component.vue"
+import LargePopUpComponent from "@/components/largePopUp.component.vue"
+
+
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        LargePopUpComponent,
+    },
+})
+export default class RiskDetailRightComponent extends Vue {
+    //标题图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //风险详情
+    @Prop({default: {}}) riskDetailData!: any
+    //圆形图标颜色类名
+    iconColor = ''
+    //文字颜色类名
+    textColor = ''
+    //风险等级名称
+    titleName = ''
+    //风险等级map
+    titleNameMap = {
+        1: '一级风险',
+        2: '二级风险',
+        3: '三级风险',
+        4: '四级风险',
+    }
+
+    //说明书弹窗
+    dialogVisibleForBook = false
+    private detailData = {};
+
+    @Emit()
+    changeClose() {
+        console.log(1)
+    }
+
+    //查看危险源信息
+    getHazard() {
+        const temp = this.riskDetailData
+        this.detailData = {
+            "chemicalCn":temp.hazardousChemicalsName,
+            "otherChemicalCn":temp.hazardousChemicalsName,
+            "chemicalEn":temp.name,
+            "cas":temp.riskFactor,
+            "hazardCategory":temp.riskFactor,
+            "invasionRoute":temp.riskFactor,
+            "environmentalHazards":temp.riskFactor,
+            "explosionHazard":temp.riskFactor
+        }
+        this.dialogVisibleForBook = true
+    }
+
+    mounted() {
+        //todo 加载项
+        this.iconColor = `level-${this.riskDetailData.level}`
+        this.textColor = `level-${this.riskDetailData.level}-text`
+        this.titleName = this.titleNameMap[this.riskDetailData.level]
+    }
+
+
+    destroyed() {
+        //todo 销毁项
+    }
+
+}
+
diff --git a/src/components/safety/risk/right/riskIndexRight.component.html b/src/components/safety/risk/right/riskIndexRight.component.html
new file mode 100644
index 0000000..e922c21
--- /dev/null
+++ b/src/components/safety/risk/right/riskIndexRight.component.html
@@ -0,0 +1,38 @@
+<div class="env-right">
+    <div class="box-content flex-0 height-auto">
+        <title-component :imgSrc="imgSrc" :show-close="true" @change-close="changeClose">
+            风险详情
+        </title-component>
+        <div class="d-flex align-items-center margin-top-30 margin-bottom-30"><i :class="iconColor"
+                                                                                 class="cycle-icon"></i><span
+                :class="textColor">{{ titleName }}</span></div>
+        <div class="risk-info">
+            <div class="content-style"><span>分析单元:</span><span>{{ riskDetailData.name }}</span></div>
+            <div class="content-style"><span>风险概率:</span><span>{{ riskDetailData.riskProbability }}</span></div>
+            <div class="content-style">
+                <span>关联危险源:</span> <span v-if="!riskDetailData.majorHazardSourcesName" class="noName-style">无</span>
+                <span class="hazard-style" @click="getHazard(riskDetailData)" v-else>{{ riskDetailData.majorHazardSourcesName }}</span>
+            </div>
+            <div class="content-style"><span>风险因素:</span><span>{{ riskDetailData.riskFactor }}</span></div>
+            <div class="content-style"><span>影响后果:</span><span>{{ riskDetailData.affectConsequences }}</span></div>
+            <div class="content-style"><span>管控措施:</span><span>{{ riskDetailData.riskControlMeasures }}</span></div>
+            <div class="content-style">
+                <div class="bg-gray">
+                    <div><span>责任单位:</span><span>{{ riskDetailData.enterprise }}</span></div>
+                    <div class="inside-con">
+                        <ul>
+                            <li><span>负责人:</span><span>{{ riskDetailData.name }}</span></li>
+                            <li><span>联系电话:</span><span>{{ riskDetailData.phone }}</span></li>
+                        </ul>
+                        <div>
+                            <img :src="personIcon" alt="">
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="content-style"><span>最后一次审查时间:</span><span>{{ riskDetailData.lastReviewDate }}</span></div>
+            <div class="content-style"><span>备注:</span><span>{{ riskDetailData.remark }}</span></div>
+        </div>
+    </div>
+</div>
diff --git a/src/components/safety/risk/right/riskIndexRight.component.ts b/src/components/safety/risk/right/riskIndexRight.component.ts
new file mode 100644
index 0000000..826888c
--- /dev/null
+++ b/src/components/safety/risk/right/riskIndexRight.component.ts
@@ -0,0 +1,65 @@
+import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
+import template from "./riskIndexRight.component.html"
+
+import TitleComponent from "@/components/title.component.vue"
+
+
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class RiskIndexRightComponent extends Vue {
+    //标题图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //风险详情
+    @Prop({default: {}}) riskDetailData!: any
+    //圆形图标颜色类名
+    iconColor = ''
+    //文字颜色类名
+    textColor = ''
+    //风险等级名称
+    titleName = ''
+    //风险等级map
+    titleNameMap = {
+        1: '一级风险',
+        2: '二级风险',
+        3: '三级风险',
+        4: '四级风险',
+    }
+    //人物照片
+    personIcon = require('@/assets/img/person.png')
+
+
+    @Emit()
+    changeClose() {
+        //监听关闭事件
+    }
+
+    //查看危险源信息
+    @Emit()
+    getHazard(item) {
+        //查看危险源信息
+    }
+
+    mounted() {
+        this.iconColor = `level-${this.riskDetailData.level}`
+        this.textColor = `level-${this.riskDetailData.level}-text`
+        this.titleName = this.titleNameMap[this.riskDetailData.level]
+    }
+
+
+    destroyed() {
+        //todo 销毁项
+    }
+
+}
+
diff --git a/src/components/safety/specialOperation/left/chartData.js b/src/components/safety/specialOperation/left/chartData.js
new file mode 100644
index 0000000..7971ef6
--- /dev/null
+++ b/src/components/safety/specialOperation/left/chartData.js
@@ -0,0 +1,242 @@
+export const pieChartData = function (option = {}) {
+    return {
+        title: {
+            text: option?.text,
+            subtext: option?.subtext,
+            itemGap: 5,
+            x: '48%',
+            y: '38%',
+            textAlign:'center',
+            textStyle: {
+                fontSize: 17,
+                fontWeight: '600',
+                align: "center",
+                color: '#E8E8E8',
+            },
+            subtextStyle: {
+                fontSize: 14,
+                fontWeight: 'normal',
+                align: "center",
+                color: '#E8E8E8'
+            },
+        },
+        legend: {
+            right: 'right',
+            bottom:'bottom',
+            itemGap: 10,
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff"
+            },
+            data:[
+                {
+                    name:'一级',
+                    icon:'roundRect'
+                },{
+                    name:'二级',
+                    icon:'roundRect'
+                },{
+                    name:'三级',
+                    icon:'roundRect'
+                },{
+                    name:'四级',
+                    icon:'roundRect'
+                },
+            ]
+        },
+        tooltip: {
+            trigger: 'item'
+        },
+        series: [
+            {
+                type: 'pie',
+                selectedMode: 'single',
+                selectedOffset: 10,
+                left:0,
+                radius: [50, 75],
+                data: [
+                    {value: 25, name: '一级'},
+                    {value: 1, name: ''},
+                    {value: 25, name: '二级'},
+                    {value: 1, name: ''},
+                    {value: 15, name: '三级'},
+                    {value: 1, name: ''},
+                    {value: 20, name: '四级'},
+                    {value: 1, name: ''},
+                ],
+                color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null],
+                emphasis: {
+                    label: {
+                        show: true,
+                        position:'inside',
+                        color:'#ffffff',
+                        textBorderColor: "rgb(111,111,111)",
+                        textBorderwidth: 2,
+                        backgroundColor:'transparent',
+                        formatter:function (params) {
+                            if (params.data.name){
+                                return params.data.value+'%'
+                            }else {
+                                return ''
+                            }
+
+                        }
+                    },
+                    itemStyle: {
+                        // shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        // borderWidth:5,
+                        // borderColor:"rgba(255,255,255,0)",
+                        // shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                },
+                itemStyle: {},
+                select: {
+                    itemStyle: {}
+                },
+                labelLine: {
+                    show: false
+                },
+                label: {
+                    show: false,
+                    position:'inside',
+                    formatter:function (params) {
+                        if (params.data.name){
+                            return params.data.value
+                        }else {
+                            return ''
+                        }
+
+                    }
+                },
+                tooltip:{
+                    backgroundColor:'rgba(0,0,0,0.4)',
+                    textStyle:{
+                        color:'#ffffff'
+                    }
+
+                }
+            }
+        ],
+        animationDuration: 0,
+        animationDurationUpdate: 3000,
+        animationEasing: 'linear',
+        animationEasingUpdate: 'linear'
+    }
+}
+export const lineChartData = function () {
+    return {
+        color:['#7FB0FF','#FADFA4','#C9FFD7','#FFFFFF'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: ['第一周','第二周','第三周','第四周','第五周']
+        },
+        legend: {
+            top: 'top',
+            itemGap: 30,
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff"
+            },
+            data:[
+                {
+                    name:'已完成',
+                    icon:'roundRect'
+                },{
+                    name:'待开始',
+                    icon:'roundRect'
+                }
+            ]
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name:'已完成',
+                data: [60,80,140,70,100],
+                type: 'line',
+                symbolSize: 7,
+                lineStyle: {
+                    color: '#7FB0FF',
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            },{
+                name:'待开始',
+                data: [50,70,130,60,90],
+                type: 'line',
+                symbolSize: 7,
+                lineStyle: {
+                    color: '#FADFA4',
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            }
+        ],
+
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 30,
+            x2: 12,
+            y2: 20,
+        }
+    }
+}
diff --git a/src/components/safety/specialOperation/left/mockData.js b/src/components/safety/specialOperation/left/mockData.js
new file mode 100644
index 0000000..41d45d2
--- /dev/null
+++ b/src/components/safety/specialOperation/left/mockData.js
@@ -0,0 +1,63 @@
+export const mockData = {
+    "1":[
+        { "id": "000542ff-f569-4823-88aa-f7a6904131c9", "name": "含油污水处理分析单元","description":"超标排放", "level": 1 },
+        { "id": "004114e8-8d20-4ada-a52d-a152f5111f99", "name": "卸油作业分析单元","description":"燃油泄露风险",  "level": 1 },
+        { "id": "00655661-d216-4132-a89c-486f7fb6f884", "name": "发油作业分析单元","description":"燃油泄露风险", "level": 1 },
+        { "id": "012fe1e5-9c3f-45e6-aa96-4f4c04c9cc48", "name": "配电间分析单元","description":"漏电风险", "level": 1 },
+        { "id": "019889df-e79c-4870-849b-2abeefbf1a6a", "name": "拱顶罐、内浮顶罐分析单元","description":"燃油泄露风险", "level": 1 },
+        { "id": "0222ad5e-0668-4861-bd27-fac137cd7eb8", "name": "汽、柴油卸油分析单元","description":"泄露风险", "level": 1 },
+        { "id": "02385672-2f50-488f-8b89-9cd0b98ccae6", "name": "含油污水处理分析单元","description":"超标排放", "level": 1 },
+        { "id": "0253f566-b032-48ea-966e-2721dfe72208", "name": "拱顶罐、内浮顶罐分析单元","description":"燃油泄露风险", "level": 1 },
+    ],
+    "2":[
+        { "id": "00655661-d216-4132-a89c-486f7fb6f884", "name": "发油作业分析单元","description":"燃油泄露风险", "level": 2 },
+        { "id": "012fe1e5-9c3f-45e6-aa96-4f4c04c9cc48", "name": "配电间分析单元","description":"漏电风险", "level": 2 },
+        { "id": "019889df-e79c-4870-849b-2abeefbf1a6a", "name": "拱顶罐、内浮顶罐分析单元","description":"燃油泄露风险", "level": 2 },
+        { "id": "0222ad5e-0668-4861-bd27-fac137cd7eb8", "name": "汽、柴油卸油分析单元","description":"泄露风险", "level": 2 },
+        { "id": "02385672-2f50-488f-8b89-9cd0b98ccae6", "name": "含油污水处理分析单元","description":"超标排放", "level": 2 },
+        { "id": "000542ff-f569-4823-88aa-f7a6904131c9", "name": "含油污水处理分析单元","description":"超标排放", "level": 2 },
+        { "id": "004114e8-8d20-4ada-a52d-a152f5111f99", "name": "卸油作业分析单元","description":"燃油泄露风险",  "level": 2 },
+        { "id": "0253f566-b032-48ea-966e-2721dfe72208", "name": "拱顶罐、内浮顶罐分析单元","description":"燃油泄露风险", "level": 2 },
+    ],
+    "3":[
+        { "id": "019889df-e79c-4870-849b-2abeefbf1a6a", "name": "拱顶罐、内浮顶罐分析单元","description":"燃油泄露风险", "level": 3 },
+        { "id": "0222ad5e-0668-4861-bd27-fac137cd7eb8", "name": "汽、柴油卸油分析单元","description":"泄露风险", "level": 3 },
+        { "id": "02385672-2f50-488f-8b89-9cd0b98ccae6", "name": "含油污水处理分析单元","description":"超标排放", "level": 3 },
+        { "id": "000542ff-f569-4823-88aa-f7a6904131c9", "name": "含油污水处理分析单元","description":"超标排放", "level": 3 },
+        { "id": "004114e8-8d20-4ada-a52d-a152f5111f99", "name": "卸油作业分析单元","description":"燃油泄露风险",  "level": 3 },
+        { "id": "00655661-d216-4132-a89c-486f7fb6f884", "name": "发油作业分析单元","description":"燃油泄露风险", "level": 3 },
+        { "id": "012fe1e5-9c3f-45e6-aa96-4f4c04c9cc48", "name": "配电间分析单元","description":"漏电风险", "level": 3 },
+        { "id": "0253f566-b032-48ea-966e-2721dfe72208", "name": "拱顶罐、内浮顶罐分析单元","description":"燃油泄露风险", "level": 3 }],
+    "4":[
+        { "id": "000542ff-f569-4823-88aa-f7a6904131c9", "name": "含油污水处理分析单元","description":"超标排放", "level": 4 },
+        { "id": "004114e8-8d20-4ada-a52d-a152f5111f99", "name": "卸油作业分析单元","description":"燃油泄露风险",  "level": 4 },
+        { "id": "00655661-d216-4132-a89c-486f7fb6f884", "name": "发油作业分析单元","description":"燃油泄露风险", "level": 4 },
+        { "id": "012fe1e5-9c3f-45e6-aa96-4f4c04c9cc48", "name": "配电间分析单元","description":"漏电风险", "level": 4 },
+        { "id": "019889df-e79c-4870-849b-2abeefbf1a6a", "name": "拱顶罐、内浮顶罐分析单元","description":"燃油泄露风险", "level": 4 },
+        { "id": "0222ad5e-0668-4861-bd27-fac137cd7eb8", "name": "汽、柴油卸油分析单元","description":"泄露风险", "level": 4 },
+        { "id": "02385672-2f50-488f-8b89-9cd0b98ccae6", "name": "含油污水处理分析单元","description":"超标排放", "level": 4 },
+        { "id": "0253f566-b032-48ea-966e-2721dfe72208", "name": "拱顶罐、内浮顶罐分析单元","description":"燃油泄露风险", "level": 4 }
+    ],
+}
+
+export const detail = {
+    "id": "1736bd5f-765e-4c4a-9786-8bc06a2134eb",
+    "name": "卸油作业分析单元",
+    "riskProbability": "可能",
+    "riskFactor": "泄漏、火灾、爆炸、憋压、中毒",
+    "affectConsequences": "泄漏、火灾、爆炸、憋压、中毒",
+    "level": 1,
+    "enterpriseId": "6",
+    "enterprise": "中石油兰州石化榆林化工有限公司",
+    "responsiblePersonId": "1fe37818-c849-4ba2-a53d-d440d1cbf983",
+    "responsiblePerson": "亓美枫",
+    "riskControlMeasures": "内外操每时进行巡检，记录操作数据",
+    "lastReviewDate": "2022-04-15 07:35:34",
+    "majorHazardSourcesId": "954e5e6f-91c5-46d1-a085-ad0e6cdae10c",
+    "majorHazardSourcesName": "氯气瓶仓库单元",
+    "personName": "亓美枫",
+    "phone": "15500692422",
+    "addr": "台西纬五路117号-1-3",
+    "remark": "台西纬五路117号-1-3",
+}
+
diff --git a/src/components/safety/specialOperation/left/specialOperationLeft.component.html b/src/components/safety/specialOperation/left/specialOperationLeft.component.html
new file mode 100644
index 0000000..1e9d212
--- /dev/null
+++ b/src/components/safety/specialOperation/left/specialOperationLeft.component.html
@@ -0,0 +1,32 @@
+<div class="env-left">
+    <div class="box-content flex-15">
+        <title-component :imgSrc="imgSrc">
+            特殊作业
+        </title-component>
+        <div class="tabs-style">
+            <el-radio-group @change="changeData" v-model="status">
+                <el-radio-button label="1">进行中</el-radio-button>
+                <el-radio-button label="2">待开始</el-radio-button>
+                <el-radio-button label="3">已完成</el-radio-button>
+            </el-radio-group>
+        </div>
+        <div class="risk-title">
+            <div class="risk-title-item">作业类型</div>
+            <div class="risk-title-item">责任单位</div>
+        </div>
+        <div class="risk-list">
+            <div class="risk-list-box animate__animated" v-list="i" @click="getRiskDetail(item)" :key="i" v-for="(item,i) in sepList[status]">
+                <div class="risk-list-box-item" :title="item.name">{{item.name}}</div>
+                <div class="risk-list-box-item" :title="item.enterprise">{{item.enterprise}}</div>
+            </div>
+        </div>
+    </div>
+    <div class="box-content margin-top-40">
+        <title-component :imgSrc="imgSrc">
+            作业情况统计
+        </title-component>
+            <hbt-echarts className="risk-line-chart-all" class="margin-top-23"  :options="lineData" @onChartInit="getEcharts($event,'lineChart')"></hbt-echarts>
+            <hbt-echarts className="risk-pie-chart-all" class=" margin-top-23"  :options="option1" @onChartInit="getEcharts($event,'rightChart')"></hbt-echarts>
+
+    </div>
+</div>
diff --git a/src/components/safety/specialOperation/left/specialOperationLeft.component.ts b/src/components/safety/specialOperation/left/specialOperationLeft.component.ts
new file mode 100644
index 0000000..607e44b
--- /dev/null
+++ b/src/components/safety/specialOperation/left/specialOperationLeft.component.ts
@@ -0,0 +1,154 @@
+import {Component, Emit, Vue} from 'vue-property-decorator';
+import template from "./specialOperationLeft.component.html"
+import {pieChartData,lineChartData} from "./chartData";
+
+import TitleComponent from "@/components/title.component.vue"
+import RiskService from "@/service/risk.service";
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+    directives:{
+        //列表数据动态飞入动画
+        list:{
+            bind:(el,binding)=>{
+                const timer = (binding.value+1)*100
+                setTimeout(()=>{
+                    el.classList.add("animate__fadeInLeft")
+                },timer)
+            },
+        }
+    }
+})
+export default class SpecialOperationLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    timer: any = null;
+    //饼图数据
+    option1: any =  pieChartData({text:'作业情况',subtext:'等级占比'})
+    //饼图实例
+    pieChart: any = {};
+    //折线图实例
+    lineChart: any = {};
+    //特殊作业mock数据
+    sepList = [];
+    rightChart:any = {}
+    activePieItem = 0;
+    //折线图数据
+    lineData = lineChartData()
+    //切换饼图高亮区域
+    changePieChange() {
+
+        if (this.activePieItem > 8) {
+            this.activePieItem = 0
+        }
+
+        //定时移除高亮选中区
+        this.rightChart.dispatchAction({
+            type: "downplay",
+            seriesIndex: 0,
+        });
+        //定时加载选中高亮区
+        this.rightChart.dispatchAction({
+            type: "highlight",
+            dataIndex: this.activePieItem
+        })
+        this.activePieItem += 2;
+
+    }
+
+    //获取图表实例
+    getEcharts(e,type) {
+        this[type] = e
+    }
+
+
+    //随机整数
+    getRandomInt(min: number, max: number) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
+    }
+
+    count = 1
+
+    //监听页面变化重新绘制图表
+    resize() {
+        setTimeout(() => {
+            this.rightChart.resize();
+            this.lineChart.resize();
+        }, 300)
+    }
+    public riskService = new RiskService();
+    //获取风险管控列表
+    getRiskList(){
+        this.riskService.getSepList().then((res:any)=>{
+            if (res.code === 200){
+                res.data[1] = this.$store.state.dangrousWorkList
+                this.sepList = res.data;
+            }else{
+                this.$message.error(res.message)
+            }
+        })
+    }
+    //获取风险管控详情
+    getRiskDetail(params){
+        this.showRight(params)
+       /* this.riskService.getRiskDetail(params).then((res:any)=>{
+            if (res.code === 200){
+                this.showRight(res.data)
+            }else{
+                this.$message.error(res.message)
+            }
+        })*/
+    }
+    //定时刷新图表
+    lineChartChange(){
+        this.lineChart.clear();
+        this.lineChart.setOption(lineChartData())
+    }
+    mounted() {
+        // 假数据替换 不能请求过快
+        setTimeout(()=>{
+            this.getRiskList()
+        },1000)
+        this.timer = setInterval(() => {
+            this.lineChartChange()
+            this.changePieChange()
+        }, 3000)
+
+        window.addEventListener("resize", this.resize);
+    }
+
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+    }
+
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+    @Emit()
+    showRight(item){
+        console.log(3123)
+    }
+    status = '1'
+    //切换风险级别
+    changeData(val){
+        console.log(1)
+    }
+    delay(i) {
+        return `animate__delay-${i}s`
+    }
+
+
+}
+
diff --git a/src/components/safety/specialOperation/right/chartData.js b/src/components/safety/specialOperation/right/chartData.js
new file mode 100644
index 0000000..a9308cd
--- /dev/null
+++ b/src/components/safety/specialOperation/right/chartData.js
@@ -0,0 +1,243 @@
+export const barTopChartData = function () {
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            backgroundColor:'rgba(0,0,0,0.4)',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        legend:{
+            top: 'top',
+            itemGap: 25,
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff"
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            top: '8%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: ['联化科', '立本作物', '圣丰集团', '茂盛生物', '利尔化学', '海利得'],
+                axisTick: {
+                    show: false,
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#999999',
+                        type: 'solid'
+                    },
+                },
+                axisLabel: {
+                    //x轴文字的配置
+                    show: true,
+                    interval: 0,//使x轴文字显示全
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: '#999999',
+                    }
+                },
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#999999',
+                        type: 'solid'
+                    },
+                },
+                axisLabel: {
+                    //x轴文字的配置
+                    show: true,
+                    interval: 0,//使x轴文字显示全
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: '#999999',
+                    }
+                },
+            }
+        ],
+        color: ['#7FB0FF', '#C9FFD7', '#E8E8E8'],
+        series: [
+
+            {
+                name: '待开始',
+                type: 'bar',
+                stack: 'user',
+                barWidth: 20,
+                itemStyle: {
+
+                },
+                data: [50,40, 55, 60, 42, 10]
+            },
+            {
+                name: '进行中',
+                type: 'bar',
+                stack: 'user',
+                barWidth: 20,
+                data: [15, 20, 11, 9, 14, 10]
+            },
+            {
+                name: '已完成',
+                type: 'bar',
+                stack: 'user',
+                barWidth: 20,
+                itemStyle: {
+
+                },
+                data: [40, 30, 40, 20, 15, 20]
+            },
+
+        ]
+    };
+
+}
+export const barBottomChartData = function () {
+    const yData = ['联化科技股份有限公司', '立本作物科技有限公司', '圣丰集团有限公司', '茂盛生物有限公司', '利尔化学股份有限公司', '海利得新材料股份有限公司','恒力石化股份有限公司'];
+    let data = [90,80,70,60,55,50,46];
+    data.sort((a, b) => b - a);
+    let max = Math.max.apply(null, data);
+    max = max + 30;
+    let getMax = [];
+    for (let i = 0; i < yData.length; i++) {
+        getMax.push(max);
+    }
+
+    return {
+        tooltip: {
+            show:false,
+            trigger: 'axis',
+            axisPointer: {
+                type: 'none',
+            },
+            formatter: function (params) {
+                return params[0].name + ' : ' + params[0].value;
+            },
+        },
+        legend: {
+            show:false,
+            right: '25%',
+            top: '0%',
+            itemWidth: 10,
+            itemHeight: 10,
+            textStyle: {
+                color: '#D4E5FF',
+                padding: [5, 10, 5, 10]
+            },
+        },
+        xAxis: {
+            show: false,
+            type: 'value',
+        },
+        grid: {
+            right: '12%',
+            left: '1%',
+            top: '6%',
+            bottom: '1%',
+        },
+        yAxis: [
+            {
+                type: 'category',
+                inverse: true,
+                offset: -8,
+                axisLabel: {
+                    show: true,
+                    align: 'left',
+                    verticalAlign:'bottom',
+                    lineHeight: 28,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '12',
+                    },
+                },
+                splitLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                },
+                data: yData,
+            },
+            {
+                type: 'category',
+                inverse: true,
+                offset: 0,
+                axisTick: 'none',
+                axisLine: 'none',
+                show: true,
+                axisLabel: {
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '14',
+                    },
+                },
+                data: data,
+            },
+        ],
+        series: [
+            {
+                name: '',
+                type: 'bar',
+                stack: 'user',
+                zlevel: 1,
+                itemStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 1,
+                        y2: 0,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: '#7FB0FF', //  0%  处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: '#5485D5', //  100%  处的颜色
+                            },
+                        ],
+                        global: false, //  缺省为  false
+                    }
+                },
+                barWidth: 10,
+                data: data,
+            },
+            {
+                name: '背景',
+                type: 'bar',
+                barWidth: 10,
+                barGap: '-100%',
+                data: getMax,
+                itemStyle: {
+                    color: 'rgba(21,36,72,0.5)',
+                },
+            },
+        ],
+    };
+
+}
diff --git a/src/components/safety/specialOperation/right/detail.component.html b/src/components/safety/specialOperation/right/detail.component.html
new file mode 100644
index 0000000..13ebbe4
--- /dev/null
+++ b/src/components/safety/specialOperation/right/detail.component.html
@@ -0,0 +1,32 @@
+<div class="env-right">
+    <div class="box-content flex-0 height-auto">
+        <title-component :imgSrc="imgSrc" :show-close="true" @change-close="changeClose">
+            作业详情
+        </title-component>
+        <div class="risk-info margin-top-23">
+            <div class="content-style"><span>作业名称:</span><span>{{ detailData.name }}</span></div>
+            <div class="content-style"><span>作业等级:</span><span>{{ detailData.operationLevel }}</span></div>
+            <div class="content-style"><span>作业类型:</span><span>{{ detailData.operationType }}</span></div>
+            <div class="content-style"><span>作业单位:</span><span>{{ detailData.enterprise }}</span></div>
+            <div class="content-style"><span>作业内容:</span><span>{{ detailData.operationContent }}</span></div>
+            <div class="content-style"><span>作业地点:</span><span>{{ detailData.operationSite }}</span></div>
+<!--            <div class="content-style">
+                <div class="bg-gray">
+                    <div><span>责任单位:</span><span>{{ detailData.enterprise }}</span></div>
+                    <div class="inside-con">
+                        <ul>
+                            <li><span>负责人:</span><span>{{ detailData.name }}</span></li>
+                            <li><span>联系电话:</span><span>{{ detailData.phone }}</span></li>
+                        </ul>
+                        <div>
+                            <img :src="personIcon" alt="">
+                        </div>
+                    </div>
+
+                </div>
+            </div>-->
+            <div class="content-style"><span>作业开始时间:</span><span>{{ detailData.operationStart }}</span></div>
+            <div class="content-style"><span>作业结束时间:</span><span>{{ detailData.operationEnd }}</span></div>
+        </div>
+    </div>
+</div>
diff --git a/src/components/safety/specialOperation/right/sepDetail.component.ts b/src/components/safety/specialOperation/right/sepDetail.component.ts
new file mode 100644
index 0000000..c60be75
--- /dev/null
+++ b/src/components/safety/specialOperation/right/sepDetail.component.ts
@@ -0,0 +1,56 @@
+import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
+import template from "./detail.component.html"
+
+import TitleComponent from "@/components/title.component.vue"
+
+
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class SepDetailComponent extends Vue {
+    //标题图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //风险详情
+    @Prop({default: {}}) detailData!: any
+
+    //风险等级map
+    titleNameMap = {
+        1: '一级风险',
+        2: '二级风险',
+        3: '三级风险',
+        4: '四级风险',
+    }
+
+
+    @Emit()
+    changeClose() {
+        //监听关闭事件
+    }
+
+    //查看危险源信息
+    @Emit()
+    getHazard() {
+        //查看危险源信息
+    }
+
+    mounted() {
+
+    }
+
+
+    destroyed() {
+        //todo 销毁项
+    }
+
+}
+
diff --git a/src/components/safety/specialOperation/right/specialOperationRight.component.html b/src/components/safety/specialOperation/right/specialOperationRight.component.html
new file mode 100644
index 0000000..f5cf786
--- /dev/null
+++ b/src/components/safety/specialOperation/right/specialOperationRight.component.html
@@ -0,0 +1,14 @@
+<div class="env-right">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            企业作业统计
+        </title-component>
+        <hbt-echarts className="spe-bar-chart-top" class="margin-top-23"  :options="topBarChartData" @onChartInit="getEcharts($event,'barTop')"></hbt-echarts>
+    </div>
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            企业延期作业排行
+        </title-component>
+        <hbt-echarts className="spe-bar-chart-bottom" class="margin-top-23"  :options="bottomBarChartData" @onChartInit="getEcharts($event,'barBottom')"></hbt-echarts>
+    </div>
+</div>
diff --git a/src/components/safety/specialOperation/right/specialOperationRight.component.ts b/src/components/safety/specialOperation/right/specialOperationRight.component.ts
new file mode 100644
index 0000000..09933da
--- /dev/null
+++ b/src/components/safety/specialOperation/right/specialOperationRight.component.ts
@@ -0,0 +1,57 @@
+import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
+import template from "./specialOperationRight.component.html"
+import {barTopChartData,barBottomChartData} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+
+
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class SpecialOperationRightComponent extends Vue {
+    //标题图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+
+    //企业作业统计柱状图数据
+    topBarChartData = {}
+    //企业作业统计柱状图实例
+    barTop:any = {}
+    //企业延期作业排行柱状图数据
+    bottomBarChartData = {}
+    //企业延期作业排行柱状图实例
+    barBottom:any = {}
+    //企业延期作业排行
+    //获取图表实例
+    getEcharts(e,type){
+        this[type] = e
+        if (type === 'barTop'){
+            this.topBarChartData = barTopChartData()
+        }else if(type === 'barBottom'){
+            this.bottomBarChartData = barBottomChartData()
+        }
+    }
+    //图表自适应
+    resize() {
+        setTimeout(() => {
+            this.barTop.resize();
+            this.barBottom.resize();
+        }, 300)
+    }
+    mounted() {
+        window.addEventListener("resize", this.resize);
+    }
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+}
+
diff --git a/src/components/scrollNumber.component.vue b/src/components/scrollNumber.component.vue
new file mode 100644
index 0000000..d44cb7a
--- /dev/null
+++ b/src/components/scrollNumber.component.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="num-box-con">
+    <div v-for="(item, index) in numberList" :key="index" :class="isNaN(item)?'':'num-box'" class="d-flex" >
+      <span class="not-num" v-if="isNaN(item)">{{item}}</span>
+      <div class="number" v-else>
+        <span
+            class="number-item"
+            ref="numberItem"
+            :data-number="item"
+            :data-index="index"
+           >
+        0123456789</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
+
+@Component
+export default class ScrollNumberComponent extends Vue {
+  //传入的报警信息列表
+  @Prop({default: 999}) value!: any;
+  //监听报警信息列表数据变化
+  @Watch('value', {immediate: true, deep: true})
+  onChangeValue(newVal: any, oldVal: any) {
+    if (newVal) {
+      this.$nextTick(() => {
+        this.setNumberTransform();
+      });
+    }
+  }
+  get numberList() {
+    return String(this.value).split("");
+  }
+// 设置每一位数字的偏移
+  setNumberTransform() {
+    let numberItems = this.$refs.numberItem as any;
+    let obj = {};
+    Array.from(numberItems).forEach((c:any) => {
+      let key = c.dataset.index;
+      let value = c.dataset.number;
+      let init = 0;
+      obj[key] = setInterval(() => {
+        if (init < value * 10) {
+          init += 1;
+          c.style.transform = `translateY(-${init}%)`;
+        } else {
+          clearInterval(obj[key]);
+          obj[key] = null;
+        }
+      }, 10);
+    });
+  }
+
+  //监听点击事件
+  @Emit('getItem')
+  getItem(item) {
+    // return item
+  }
+
+  mounted() {
+    // this.setNumberTransform();
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+.num-box-con{
+  display: flex;
+  justify-content: center;
+  margin-top: 18px;
+}
+.num-box{
+  background: rgba(0,0,0,0.7);
+  box-shadow: 0 4px 8px -4px rgba(0,0,0,0.8), inset 0px 0px 4px -2px rgba(0,0,0,0.5);
+  border-radius: 2px;
+  border: 1px solid;
+  border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15)) 1 1;
+  padding: 4px 0;
+  margin-right: 2px;
+  &:last-child{
+    margin-right: 0;
+  }
+
+}
+.number {
+  overflow: hidden;
+  //width: 34px;
+  height: 30px;
+
+  > span {
+    writing-mode: vertical-rl;
+    text-orientation: upright;
+    transform: translateY(0%);
+    cursor: context-menu;
+    font-size: 32px;
+    width: 32px;
+    display: flex;
+    align-items: center;
+    //transition: all .3s ease-in-out;
+  }
+
+}
+.not-num{
+  display: inline-block;
+  margin-right: 2px;
+  font-size: 30px;
+  line-height: 40px;
+}
+
+</style>
diff --git a/src/components/smartEmergency/afterwards/left/afterwardsLeft.component.html b/src/components/smartEmergency/afterwards/left/afterwardsLeft.component.html
new file mode 100644
index 0000000..2c813ce
--- /dev/null
+++ b/src/components/smartEmergency/afterwards/left/afterwardsLeft.component.html
@@ -0,0 +1,87 @@
+<div class="env-left emergency-part">
+    <div class="box-content">
+        <div class="plan-card">
+            <div class="border l-t"></div>
+            <div class="border r-t"></div>
+            <div class="border r-b"></div>
+            <div class="border l-b"></div>
+            <ul class="plan">
+                <li><span>事故类型：</span><span>{{info.typeName}}</span></li>
+                <li><span>事故内容：</span><span>{{info.content}}</span></li>
+                <li>
+                    <span>事故级别：</span>
+                    <span :class="cardText">{{ levelName }}</span>
+                    <span class="cycle-icon" :class="levelClass"></span>
+                    <span class="plan-btn" @click="changeLevel('up')"><i class="el-icon-caret-top"></i>上调</span>
+                    <span class="plan-btn" @click="changeLevel('down')"><i class="el-icon-caret-bottom"></i>下调</span>
+                </li>
+                <li><span>关联危险源：</span><span>石油炼制单元</span></li>
+                <li><span>上报位置：</span><span>{{info.address}}</span><i @click="changePoint(info)" class="position-icon"></i>
+                </li>
+                <li><span>上报人：</span><span>{{ info.reporter }}</span>
+                    <span class="phone-btn"><img src="~@/assets/img/phone.png" alt="">一健联系</span>
+                </li>
+            </ul>
+        </div>
+        <div class="group-title-plan">应急任务</div>
+        <div class="radio-box margin-top-23 margin-bottom-20">
+            <span :class="radioActive=== 1?'active':''" @click="changeRadio(1)">安全保障</span>
+            <span :class="radioActive=== 2?'active':''" @click="changeRadio(2)">医疗救援</span>
+            <span :class="radioActive=== 3?'active':''" @click="changeRadio(3)">人流控制</span>
+        </div>
+        <el-progress class="margin-bottom-20" :stroke-width="8" :percentage="percentage" :show-text="false" define-back-color="rgba(255,255,255,0.15)" :color="customColor"></el-progress>
+       <div class="task-list">
+           <div class="task-item" @click="changeBox(item)" :key="i" v-for="(item,i) in taskList">
+               <div class="d-flex task-item-top">
+                   <el-checkbox class="green-check"
+                                v-model="item.checked">{{ item.org }}</el-checkbox>
+                   <p>{{item.content}}</p>
+               </div>
+               <div class="text-left margin-top-16">负责人:{{item.head}}</div>
+
+           </div>
+       </div>
+
+
+
+    </div>
+    <div class="plan-center ">
+        <div class="progress-center">
+            <div><i class="cycle-icon orange"></i>应急中...</div>
+            <div class="middle">
+                <div class="d-flex align-items-center">
+                    <div class="d-flex align-items-center">
+                        <div class="cycle-box active bg-orange">
+                            <i class="el-icon-check"></i>
+                        </div>
+                        <div class="line active"></div>
+                    </div>
+                    <div class="d-flex align-items-center">
+                        <div class="line active"></div>
+                        <div class="cycle-box active bg-orange">
+                            <i class="el-icon-check"></i>
+                        </div>
+                        <div class="line active"></div>
+                    </div>
+                    <div class="d-flex align-items-center">
+                        <div class="line active"></div>
+                        <div class="cycle-box active">
+                            <hbt-svg className="loading-icon" name="tail-spin"></hbt-svg>
+                        </div>
+                    </div>
+                </div>
+                <div class="d-flex is-justify-space-between progress-title">
+                    <span class="active">应急准备</span>
+                    <span class="active">事态控制</span>
+                    <span class="active">善后工作</span>
+                </div>
+            </div>
+
+            <div @click="nextStep" class="center-btn d-flex align-items-center bg-orange white-color">
+                <i class="el-icon-switch-button"></i>
+                <span>结束应急</span>
+            </div>
+        </div>
+    </div>
+
+</div>
diff --git a/src/components/smartEmergency/afterwards/left/afterwardsLeft.component.ts b/src/components/smartEmergency/afterwards/left/afterwardsLeft.component.ts
new file mode 100644
index 0000000..93b5596
--- /dev/null
+++ b/src/components/smartEmergency/afterwards/left/afterwardsLeft.component.ts
@@ -0,0 +1,390 @@
+import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
+import template from "./afterwardsLeft.component.html"
+import {pieChartData} from "./chartData";
+
+import TitleComponent from "@/components/title.component.vue"
+import WarningListComponent from "@/components/warningList.component.vue"
+import * as turf from '@turf/turf'
+import Mock from "mockjs"
+import moment from "moment"
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        WarningListComponent
+    },
+})
+export default class AfterwardsLeftComponent extends Vue {
+    //传入的报警信息详情
+    @Prop({
+        default: function () {
+            return {
+                "typeName": "火灾",
+                "content": "北京汉邦唐化工厂区发生火灾",
+                "levelName": "二级",
+                "levelClass": "level-2-text",
+                "levelClassIcon": "level-2",
+                "time": "2023-05-15 15:21:35",
+                "address": "工厂厂房",
+                "reporter": "蒋丽",
+                "tableHeader": [
+                    {
+                        "prop": "name",
+                        "label": "摄像头名称"
+                    },
+                    {
+                        "prop": "type",
+                        "label": "类型"
+                    },
+                    {
+                        "prop": "distance",
+                        "label": "距离 (m)"
+                    }
+                ],
+                "tableData": [
+                    {
+                        "type": "简型摄像头",
+                        "distance": "10",
+                        "name": "1号摄像头"
+                    },
+                    {
+                        "type": "简型摄像头",
+                        "distance": "20",
+                        "name": "2号摄像头"
+                    },
+                    {
+                        "type": "简型摄像头",
+                        "distance": "22",
+                        "name": "3号摄像头"
+                    },
+                    {
+                        "type": "简型摄像头",
+                        "distance": "10",
+                        "name": "4号摄像头"
+                    },
+                    {
+                        "type": "简型摄像头",
+                        "distance": "20",
+                        "name": "5号摄像头"
+                    },
+                    {
+                        "type": "简型摄像头",
+                        "distance": "22",
+                        "name": "6号摄像头"
+                    }
+                ],
+                "title": "火灾爆炸",
+                "info": "北京汉邦唐化工厂区发生火灾",
+                "level": "1",
+                "type": "fire",
+                "tel": 13231475537,
+                "id": "110000197911038403",
+                "position": [
+                    13312990.72,
+                    4098613.12,
+                    0.51
+                ]
+            }
+        }
+    }) info!: any[];
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+
+    currentCompany = false
+    popObj:any = {
+        popTitle:'报警记录',
+        type:'',
+        title: '风险点异常',
+        info: '',
+        time: '',
+        address:'',
+        level: '',
+        typeName:"",
+        reporter:"",
+        tel:"",
+        position:[],
+        content:"",
+        typeId:"",
+        id:''
+
+    }
+    typeList =[
+        {
+            label:'气体泄露',
+            value:'normal',
+            level:2,
+            id:1
+        },{
+            label:'火灾爆炸',
+            value:'fire',
+            level:1,
+            id:2
+        },{
+            label:'气液泄露',
+            value:'normal',
+            level:1,
+            id:3
+        },{
+            label:'安全事故',
+            value:'normal',
+            level:2,
+            id:4
+        },{
+            label:'自然灾害',
+            value:'normal',
+            level:3,
+            id:5
+        },
+    ]
+    levelClass = 'level-1';
+    levelName = '一级';
+    level=1;
+    cardText = 'level-1-text';
+    taskList = [
+        {
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },
+    ]
+
+    // 当前进度条
+    active = 1
+    radioActive = 1
+    customColor =  '#ffffff'
+    percentage = 50
+    changeRadio(type){
+        this.radioActive = type
+        if (type === 1){
+            this.percentage = 50
+            this.taskList = this.taskList.map((item,i)=>{
+                item.checked = false
+                if ([2,3,5,7,9].includes(i)){
+                    item.checked = true
+                }
+                return item
+            })
+        }else if(type === 2){
+            this.percentage = 70
+            this.taskList = this.taskList.map((item,i)=>{
+                item.checked = false
+                if ([1,2,3,5,7,8,9].includes(i)){
+                    item.checked = true
+                }
+                return item
+            })
+        }else{
+            this.percentage = 80
+            this.taskList = this.taskList.map((item,i)=>{
+                item.checked = false
+                if ([1,2,3,5,6,7,8,9].includes(i)){
+                    item.checked = true
+                }
+                return item
+            })
+
+        }
+    }
+    get dataList(){
+        return this.$store.state.warningList
+    }
+    changeBox(item){
+        item.checked = !item.checked
+        const find = this.taskList.filter(item => item.checked)
+        this.percentage = find.length*10
+    }
+
+    //下一步操作
+    nextStep(){
+        if (this.active<3){
+            this.active++
+        }
+        this.gotoNext()
+    }
+    @Emit('gotoNext')
+    gotoNext(){
+        //
+    }
+    changeLevel(type){
+        if (type === 'up'){
+            if (this.level === 1){
+                return
+            }
+            this.level--
+
+        }else if(type === 'down'){
+            if (this.level === 4){
+                return
+            }
+            this.level++
+        }
+        const nameList = {
+            1:'一级',
+            2:'二级',
+            3:'三级',
+            4:'四级',
+        }
+        this.levelName = nameList[this.level]
+        this.levelClass = `level-${this.level}`
+        this.cardText = `level-${this.level}-text`
+    }
+    setData(val,type){
+        if (type === 'typeName'){
+            const find = this.typeList.find(item=>item.id == val) as any
+            this.popObj.level = find.level
+            this.popObj.title = find.label
+            this.popObj.type = find.value
+        }
+        this.popObj[type] = val
+    }
+
+    //展示告警信息
+    showWaring(item){
+        const levelMap = {
+            1:'一级',
+            2:'二级',
+            3:'三级',
+        }
+        const levelClassMap = {
+            3:'blue',
+            2:'yellow',
+            1:'red',
+        }
+        this.getItem(Object.assign(item,{
+            type:'风险告警',
+            level:item.level,
+            levelClass:levelClassMap[item.level],
+            levelName:levelMap[item.level],
+            content:'监测数值异常',
+            time:'2023年1月20日  14:33:33',
+            equipment:'北区广场监测点',
+            tableHeader:[
+                {
+                    'prop':'alarmSubject',
+                    'label':'告警主体',
+                    'width':'90px',
+                }, {
+                    'prop':'COD',
+                    'label':'COD',
+                }, {
+                    'prop':'standard',
+                    'label':'标准值',
+                },
+            ],
+            tableData: [{
+                'alarmSubject': '排放量',
+                'COD': '456m<sup>3</sup>',
+                'standard': '466m<sup>3</sup>',
+            }, {
+                'alarmSubject': '排放浓度',
+                'COD': '2.6mg/L',
+                'standard': '2.5mg/L',
+            }, {
+                'alarmSubject': '排放时间',
+                'COD': '2023.3.31 05:03:45',
+                'standard': '8:00-22:00',
+            }, {
+                'alarmSubject': '排放浓度',
+                'COD': '2.6mg/L',
+                'standard': '2.5mg/L',
+            }, {
+                'alarmSubject': '排放时间',
+                'COD': '2023.3.31 05:03:45',
+                'standard': '8:00-22:00',
+            }]
+        }))
+    }
+    //点击告警信息
+    @Emit()
+    getItem(item) {
+        // console.log('item', item)
+    }
+
+    count = 1
+
+
+    mounted() {
+
+    }
+
+    destroyed() {
+
+    }
+
+    changeMore() {
+        console.log(1)
+    }
+
+    changeClose() {
+        console.log(1)
+    }
+    addManual(){
+        this.currentCompany = true
+    }
+    submitWaring(){
+        this.popObj.id = Mock.mock("@id");
+        if (this.popObj.type === 'normal'){
+            this.popObj.position=turf.randomPosition([
+                13312995.84,
+                4098177.2800000003,
+                13313096.96,
+                4098754.88,
+            ]);
+        }else if(this.popObj.type === 'fire'){
+            this.popObj.position= [13312990.72, 4098613.12, 0.51]
+        }
+        this.popObj.time = moment().subtract(0,"days").format("YYYY-MM-DD HH:mm:ss")
+
+        this.$store.commit("upDateWaringList",[this.popObj])
+        this.currentCompany=false
+    }
+    //点击点位
+    @Emit('changePoint')
+    changePoint(item) {
+        console.log(item)
+//
+    }
+}
+
diff --git a/src/components/smartEmergency/afterwards/left/chartData.js b/src/components/smartEmergency/afterwards/left/chartData.js
new file mode 100644
index 0000000..efdb970
--- /dev/null
+++ b/src/components/smartEmergency/afterwards/left/chartData.js
@@ -0,0 +1,98 @@
+export const pieChartData = {
+    title: {
+        text: '90%',
+        subtext: '在线率',
+        itemGap: 5,
+        x: 105,
+        y: '37%',
+        textStyle: {
+            fontSize: 30,
+            fontWeight: '600',
+            fontStyle: 'italic',
+            color: '#E8E8E8',
+        },
+        subtextStyle: {
+            fontSize: 17,
+            fontWeight: 'normal',
+            align: "center",
+            color: '#E8E8E8'
+        },
+    },
+    tooltip: {
+        trigger: 'item'
+    },
+    legend: {
+        orient: 'vertical',
+        right: '0%',
+        top: 'bottom',
+        height:100,
+        itemWidth: 10,
+        itemHeight: 10,
+        data: [
+            {value: 25, name: '气体'},
+            {value: 25, name: '水质'},
+            {value: 15, name: '特征污染物'},
+            {value: 20, name: '废气'},
+            {value: 15, name: '废水'}
+        ],
+        textStyle: {
+            color: '#D4E5FF',
+            padding: [5, 10, 5, 10]
+        },
+    },
+    series: [
+        {
+            type: 'pie',
+            selectedMode: 'single',
+            selectedOffset: 10,
+            left:-50,
+            radius: [50, 75],
+            data: [
+                {value: 25, name: '气体',num:90},
+                {value: 1, name: '',num:0},
+                {value: 25, name: '水质',num:95},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '特征污染物',num:94},
+                {value: 1, name: '',num:0},
+                {value: 20, name: '废气',num:91},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '废水',num:89},
+                {value: 1, name: '',num:0},
+            ],
+            color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null],
+            emphasis: {
+                itemStyle: {
+                    // shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    // borderWidth:5,
+                    // borderColor:"rgba(255,255,255,0)",
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            itemStyle: {},
+            select: {
+                itemStyle: {}
+            },
+            labelLine: {
+                show: false
+            },
+            label: {
+                show: false
+            },
+            tooltip:{
+                backgroundColor:'rgba(0,0,0,0.4)',
+                textStyle:{
+                    color:'#ffffff'
+                },
+                formatter:function (params) {
+                    return params.data.name+' : '+ params.data.num+'%'
+                }
+
+            }
+        }
+    ],
+    animationDuration: 0,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear'
+}
diff --git a/src/components/smartEmergency/afterwards/right/afterwardsRight.component.html b/src/components/smartEmergency/afterwards/right/afterwardsRight.component.html
new file mode 100644
index 0000000..1110703
--- /dev/null
+++ b/src/components/smartEmergency/afterwards/right/afterwardsRight.component.html
@@ -0,0 +1,120 @@
+<div class="env-right emergency-part">
+    <div class="box-content">
+        <div class="risk-box is-justify-space-around margin-top-0">
+            <div class="risk-item">
+                <div class="person-icon"></div>
+                <div>
+                    <p class="env-number-stlye">745</p>
+                    <p>区域内人数</p>
+                </div>
+            </div>
+            <div class="risk-item">
+                <div class="person-icon"></div>
+                <div>
+                    <p class="env-number-stlye">84</p>
+                    <p >区域内车辆</p>
+                </div>
+            </div>
+        </div>
+        <div class="radio-box">
+            <span :class="radioActive=== 1?'active':''" @click="changeRadio(1)">附近摄像头</span>
+            <span :class="radioActive=== 2?'active':''" @click="changeRadio(2)">移动摄像头</span>
+        </div>
+        <div class="plan-head">
+            <span class="span-item">摄像头名称</span>
+            <span class="span-item">类型</span>
+            <span class="span-item">距离 (m)</span>
+        </div>
+        <div class="plan-head-tbody">
+            <div class="tr" @click="openVideo(item)" :key="i" v-for="(item,i) in cameraList">
+                <span class="span-item">{{ item.name }}</span>
+                <span class="span-item">{{ item.type }}</span>
+                <span class="span-item">{{ item.distance }}</span>
+            </div>
+
+        </div>
+        <div class="group-title-plan-search">
+            <span>值班专家</span>
+        </div>
+        <div class="personList margin-top-16 margin-bottom-20">
+            <div>
+                <span class="has-border head-style">火灾救援</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+            <div>
+                <span class="has-border head-style">医疗救助</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+            <div>
+                <span class="has-border head-style">化学防护</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+        </div>
+        <div class="plan-card">
+            <div class="border l-t"></div>
+            <div class="border r-t"></div>
+            <div class="border r-b"></div>
+            <div class="border l-b"></div>
+            <div class="short-report">事故事态简报</div>
+            <div class="short-report-line"></div>
+            <div class="short-card">
+                <div class="border l-t"></div>
+                <div class="border r-t"></div>
+                <div class="border r-b"></div>
+                <div class="border l-b"></div>
+                <div class="short-card-bg d-flex align-items-center is-justify-space-between">
+
+                    <span class="text d-flex align-items-center"><span class="cycle-icon orange"></span>
+                        <span>事故造成伤亡人员</span></span>
+                    <span class="count">暂无</span>
+                </div>
+            </div>
+            <el-timeline  class="margin-top-23">
+                <el-timeline-item
+                        :hide-timestamp="true"
+                        v-for="(activity, index) in activities"
+                        :key="index"
+                        :timestamp="activity.timestamp">
+                    {{activity.timestamp}} {{activity.content}}
+                </el-timeline-item>
+            </el-timeline>
+        </div>
+    </div>
+
+</div>
diff --git a/src/components/smartEmergency/afterwards/right/afterwardsRight.component.ts b/src/components/smartEmergency/afterwards/right/afterwardsRight.component.ts
new file mode 100644
index 0000000..d314052
--- /dev/null
+++ b/src/components/smartEmergency/afterwards/right/afterwardsRight.component.ts
@@ -0,0 +1,268 @@
+import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
+import template from "./afterwardsRight.component.html"
+import TitleComponent from "@/components/title.component.vue"
+import Mock from "mockjs"
+import * as turf from "@turf/turf";
+import moment from "moment";
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class AfterwardsRightComponent extends Vue {
+    //传入的报警信息详情
+    @Prop({
+        default: function () {
+            return {
+            }
+        }
+    }) info!: any;
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+
+    currentCompany = false
+    popObj:any = {
+        popTitle:'报警记录',
+        type:'',
+        title: '风险点异常',
+        info: '',
+        time: '',
+        address:'',
+        level: '',
+        typeName:"",
+        reporter:"",
+        tel:"",
+        position:[],
+        content:"",
+        typeId:"",
+        id:''
+
+    }
+    typeList =[
+        {
+            label:'气体泄露',
+            value:'normal',
+            level:2,
+            id:1
+        },{
+            label:'火灾爆炸',
+            value:'fire',
+            level:1,
+            id:2
+        },{
+            label:'气液泄露',
+            value:'normal',
+            level:1,
+            id:3
+        },{
+            label:'安全事故',
+            value:'normal',
+            level:2,
+            id:4
+        },{
+            label:'自然灾害',
+            value:'normal',
+            level:3,
+            id:5
+        },
+    ]
+    levelClass = 'level-1';
+    levelName = '一级';
+    level=1;
+    cardText = 'level-1-text';
+
+    activities = [{
+        content: '消防车到达3辆  ',
+        timestamp: '12：30：11'
+    }, {
+        content: '救援小组到达20人',
+        timestamp: '12：24：11'
+    }, {
+        content: '安保小组到达 40人',
+        timestamp: '12：20：11'
+    }]
+    searchVal = ''
+    // 当前进度条
+    active = 1
+    get dataList(){
+        return this.$store.state.warningList
+    }
+    radioActive = 1
+
+
+
+    //获取摄像头
+    get cameraList(){
+        const from = this.info.position;
+        const tempData = this.$store.state.cameraList.map((item,i)=>{
+            const to = item.position;
+            const distance = Math.floor(turf.distance(from, to, {units: 'meters'})/100000);
+            const temp = {
+                type:'简型摄像头',
+                distance,
+                name:`${i}号摄像头`,
+            }
+            return {...item,...temp}
+        })
+        return tempData.filter(item => item.distance <= 100).toSorted((a, b) => a.distance - b.distance)
+    }
+    changeRadio(type){
+        this.radioActive = type
+    }
+    seachData(){
+        console.log(this.searchVal)
+    }
+    //下一步操作
+    nextStep(){
+        if (this.active<3){
+            this.active++
+        }
+    }
+    changeLevel(type){
+        if (type === 'up'){
+            if (this.level === 1){
+                return
+            }
+            this.level--
+
+        }else if(type === 'down'){
+            if (this.level === 4){
+                return
+            }
+            this.level++
+        }
+        const nameList = {
+            1:'一级',
+            2:'二级',
+            3:'三级',
+            4:'四级',
+        }
+        this.levelName = nameList[this.level]
+        this.levelClass = `level-${this.level}`
+        this.cardText = `level-${this.level}-text`
+    }
+    setData(val,type){
+        if (type === 'typeName'){
+            const find = this.typeList.find(item=>item.id == val) as any
+            this.popObj.level = find.level
+            this.popObj.title = find.label
+            this.popObj.type = find.value
+        }
+        this.popObj[type] = val
+    }
+
+    //展示告警信息
+    showWaring(item){
+        const levelMap = {
+            1:'一级',
+            2:'二级',
+            3:'三级',
+        }
+        const levelClassMap = {
+            3:'blue',
+            2:'yellow',
+            1:'red',
+        }
+        this.getItem(Object.assign(item,{
+            type:'风险告警',
+            level:item.level,
+            levelClass:levelClassMap[item.level],
+            levelName:levelMap[item.level],
+            content:'监测数值异常',
+            time:'2023年1月20日  14:33:33',
+            equipment:'北区广场监测点',
+            tableHeader:[
+                {
+                    'prop':'alarmSubject',
+                    'label':'告警主体',
+                    'width':'90px',
+                }, {
+                    'prop':'COD',
+                    'label':'COD',
+                }, {
+                    'prop':'standard',
+                    'label':'标准值',
+                },
+            ],
+            tableData: [{
+                'alarmSubject': '排放量',
+                'COD': '456m<sup>3</sup>',
+                'standard': '466m<sup>3</sup>',
+            }, {
+                'alarmSubject': '排放浓度',
+                'COD': '2.6mg/L',
+                'standard': '2.5mg/L',
+            }, {
+                'alarmSubject': '排放时间',
+                'COD': '2023.3.31 05:03:45',
+                'standard': '8:00-22:00',
+            }, {
+                'alarmSubject': '排放浓度',
+                'COD': '2.6mg/L',
+                'standard': '2.5mg/L',
+            }, {
+                'alarmSubject': '排放时间',
+                'COD': '2023.3.31 05:03:45',
+                'standard': '8:00-22:00',
+            }]
+        }))
+    }
+    //点击告警信息
+    @Emit()
+    getItem(item) {
+        // console.log('item', item)
+    }
+
+    count = 1
+
+
+    mounted() {
+
+    }
+
+    destroyed() {
+
+    }
+
+    changeMore() {
+        console.log(1)
+    }
+
+    changeClose() {
+        console.log(1)
+    }
+    addManual(){
+        this.currentCompany = true
+    }
+    submitWaring(){
+        this.popObj.id = Mock.mock("@id");
+        if (this.popObj.type === 'normal'){
+            this.popObj.position=turf.randomPosition([
+                13312995.84,
+                4098177.2800000003,
+                13313096.96,
+                4098754.88,
+            ]);
+        }else if(this.popObj.type === 'fire'){
+            this.popObj.position= [13312990.72, 4098613.12, 0.51]
+        }
+        this.popObj.time = moment().subtract(0,"days").format("YYYY-MM-DD HH:mm:ss")
+
+        this.$store.commit("upDateWaringList",[this.popObj])
+        this.currentCompany=false
+    }
+    //打开视频
+    @Emit('openVideo')
+    openVideo(item) {
+        // console.log('item', item)
+    }
+}
+
diff --git a/src/components/smartEmergency/afterwards/right/chartData.js b/src/components/smartEmergency/afterwards/right/chartData.js
new file mode 100644
index 0000000..ae9ddae
--- /dev/null
+++ b/src/components/smartEmergency/afterwards/right/chartData.js
@@ -0,0 +1,112 @@
+
+export const lineChartData = function () {
+    return {
+        color:['#FADFA4','#947FEA'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: ['1月','2月','3月','4月','5月']
+        },
+        legend: {
+            top: 'top',
+            itemGap: 30,
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff"
+            },
+            data:[
+                {
+                    name:'应急事件',
+                    icon:'roundRect'
+                },{
+                    name:'应急演练',
+                    icon:'roundRect'
+                }
+            ]
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name:'应急事件',
+                data: [60,80,140,70,100],
+                type: 'line',
+                symbolSize: 4,
+                symbol: 'circle',
+                lineStyle: {
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            },{
+                name:'应急演练',
+                data: [50,70,130,60,90],
+                type: 'line',
+                symbolSize: 4,
+                symbol: 'circle',
+                lineStyle: {
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            }
+        ],
+
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 30,
+            x2: 12,
+            y2: 20,
+        }
+    }
+}
diff --git a/src/components/smartEmergency/control/left/chartData.js b/src/components/smartEmergency/control/left/chartData.js
new file mode 100644
index 0000000..efdb970
--- /dev/null
+++ b/src/components/smartEmergency/control/left/chartData.js
@@ -0,0 +1,98 @@
+export const pieChartData = {
+    title: {
+        text: '90%',
+        subtext: '在线率',
+        itemGap: 5,
+        x: 105,
+        y: '37%',
+        textStyle: {
+            fontSize: 30,
+            fontWeight: '600',
+            fontStyle: 'italic',
+            color: '#E8E8E8',
+        },
+        subtextStyle: {
+            fontSize: 17,
+            fontWeight: 'normal',
+            align: "center",
+            color: '#E8E8E8'
+        },
+    },
+    tooltip: {
+        trigger: 'item'
+    },
+    legend: {
+        orient: 'vertical',
+        right: '0%',
+        top: 'bottom',
+        height:100,
+        itemWidth: 10,
+        itemHeight: 10,
+        data: [
+            {value: 25, name: '气体'},
+            {value: 25, name: '水质'},
+            {value: 15, name: '特征污染物'},
+            {value: 20, name: '废气'},
+            {value: 15, name: '废水'}
+        ],
+        textStyle: {
+            color: '#D4E5FF',
+            padding: [5, 10, 5, 10]
+        },
+    },
+    series: [
+        {
+            type: 'pie',
+            selectedMode: 'single',
+            selectedOffset: 10,
+            left:-50,
+            radius: [50, 75],
+            data: [
+                {value: 25, name: '气体',num:90},
+                {value: 1, name: '',num:0},
+                {value: 25, name: '水质',num:95},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '特征污染物',num:94},
+                {value: 1, name: '',num:0},
+                {value: 20, name: '废气',num:91},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '废水',num:89},
+                {value: 1, name: '',num:0},
+            ],
+            color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null],
+            emphasis: {
+                itemStyle: {
+                    // shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    // borderWidth:5,
+                    // borderColor:"rgba(255,255,255,0)",
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            itemStyle: {},
+            select: {
+                itemStyle: {}
+            },
+            labelLine: {
+                show: false
+            },
+            label: {
+                show: false
+            },
+            tooltip:{
+                backgroundColor:'rgba(0,0,0,0.4)',
+                textStyle:{
+                    color:'#ffffff'
+                },
+                formatter:function (params) {
+                    return params.data.name+' : '+ params.data.num+'%'
+                }
+
+            }
+        }
+    ],
+    animationDuration: 0,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear'
+}
diff --git a/src/components/smartEmergency/control/left/controlLeft.component.html b/src/components/smartEmergency/control/left/controlLeft.component.html
new file mode 100644
index 0000000..478e0f7
--- /dev/null
+++ b/src/components/smartEmergency/control/left/controlLeft.component.html
@@ -0,0 +1,84 @@
+<div class="env-left emergency-part">
+    <div class="box-content">
+        <div class="plan-card">
+            <div class="border l-t"></div>
+            <div class="border r-t"></div>
+            <div class="border r-b"></div>
+            <div class="border l-b"></div>
+            <ul class="plan">
+                <li><span>事故类型：</span><span>{{info.typeName}}</span></li>
+                <li><span>事故内容：</span><span>{{info.content}}</span></li>
+                <li>
+                    <span>事故级别：</span>
+                    <span :class="cardText">{{ levelName }}</span>
+                    <span class="cycle-icon" :class="levelClass"></span>
+                    <span class="plan-btn" @click="changeLevel('up')"><i class="el-icon-caret-top"></i>上调</span>
+                    <span class="plan-btn" @click="changeLevel('down')"><i class="el-icon-caret-bottom"></i>下调</span>
+                </li>
+                <li><span>关联危险源：</span><span>石油炼制单元</span></li>
+                <li><span>上报位置：</span><span>{{info.address}}</span><i @click="changePoint(info)" class="position-icon"></i>
+                </li>
+                <li><span>上报人：</span><span>{{ info.reporter }}</span>
+                    <span class="phone-btn"><img src="~@/assets/img/phone.png" alt="">一健联系</span>
+                </li>
+            </ul>
+        </div>
+        <div class="group-title-plan">应急任务</div>
+        <div class="radio-box margin-top-23 margin-bottom-20">
+            <span :class="radioActive=== 1?'active':''" @click="changeRadio(1)">安全保障</span>
+            <span :class="radioActive=== 2?'active':''" @click="changeRadio(2)">医疗救援</span>
+            <span :class="radioActive=== 3?'active':''" @click="changeRadio(3)">人流控制</span>
+        </div>
+        <el-progress class="margin-bottom-20" :stroke-width="8" :percentage="percentage" :show-text="false" define-back-color="rgba(255,255,255,0.15)" :color="customColor"></el-progress>
+       <div class="task-list">
+           <div class="task-item" @click="changeBox(item)" :key="i" v-for="(item,i) in taskList">
+               <div class="d-flex task-item-top">
+                   <el-checkbox class="green-check"
+                                v-model="item.checked">{{ item.org }}</el-checkbox>
+                   <p>{{item.content}}</p>
+               </div>
+               <div class="text-left margin-top-16">负责人:{{item.head}}</div>
+
+           </div>
+       </div>
+
+
+
+    </div>
+    <div class="plan-center ">
+        <div class="progress-center">
+            <div><i class="cycle-icon orange"></i>应急中...</div>
+            <div class="middle">
+                <div class="d-flex align-items-center">
+                    <div class="d-flex align-items-center">
+                        <div class="cycle-box active bg-orange">
+                            <i class="el-icon-check"></i>
+                        </div>
+                        <div class="line active"></div>
+                    </div>
+                    <div class="d-flex align-items-center">
+                        <div class="line active"></div>
+                        <div class="cycle-box active">
+                            <hbt-svg  className="loading-icon" name="tail-spin"></hbt-svg>
+                        </div>
+                        <div class="line active"></div>
+                    </div>
+                    <div class="d-flex align-items-center">
+                        <div class="line"  :class="active === 3?'active':''"></div>
+                        <div class="cycle-box " :class="active === 3?'active':''">
+                            <hbt-svg v-if="active === 3" className="loading-icon" name="tail-spin"></hbt-svg>
+                        </div>
+                    </div>
+                </div>
+                <div class="d-flex is-justify-space-between progress-title">
+                    <span class="active">应急准备</span>
+                    <span class="active">事态控制</span>
+                    <span >善后工作</span>
+                </div>
+            </div>
+
+            <div @click="nextStep" class="center-btn">{{active === 3?'完成':'下一步'}}</div>
+        </div>
+    </div>
+
+</div>
diff --git a/src/components/smartEmergency/control/left/controlLeft.component.ts b/src/components/smartEmergency/control/left/controlLeft.component.ts
new file mode 100644
index 0000000..3a4eb6e
--- /dev/null
+++ b/src/components/smartEmergency/control/left/controlLeft.component.ts
@@ -0,0 +1,390 @@
+import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
+import template from "./controlLeft.component.html"
+import {pieChartData} from "./chartData";
+
+import TitleComponent from "@/components/title.component.vue"
+import WarningListComponent from "@/components/warningList.component.vue"
+import * as turf from '@turf/turf'
+import Mock from "mockjs"
+import moment from "moment"
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        WarningListComponent
+    },
+})
+export default class ControlLeftComponent extends Vue {
+    //传入的报警信息详情
+    @Prop({
+        default: function () {
+            return {
+                "typeName": "火灾",
+                "content": "北京汉邦唐化工厂区发生火灾",
+                "levelName": "二级",
+                "levelClass": "level-2-text",
+                "levelClassIcon": "level-2",
+                "time": "2023-05-15 15:21:35",
+                "address": "工厂厂房",
+                "reporter": "蒋丽",
+                "tableHeader": [
+                    {
+                        "prop": "name",
+                        "label": "摄像头名称"
+                    },
+                    {
+                        "prop": "type",
+                        "label": "类型"
+                    },
+                    {
+                        "prop": "distance",
+                        "label": "距离 (m)"
+                    }
+                ],
+                "tableData": [
+                    {
+                        "type": "简型摄像头",
+                        "distance": "10",
+                        "name": "1号摄像头"
+                    },
+                    {
+                        "type": "简型摄像头",
+                        "distance": "20",
+                        "name": "2号摄像头"
+                    },
+                    {
+                        "type": "简型摄像头",
+                        "distance": "22",
+                        "name": "3号摄像头"
+                    },
+                    {
+                        "type": "简型摄像头",
+                        "distance": "10",
+                        "name": "4号摄像头"
+                    },
+                    {
+                        "type": "简型摄像头",
+                        "distance": "20",
+                        "name": "5号摄像头"
+                    },
+                    {
+                        "type": "简型摄像头",
+                        "distance": "22",
+                        "name": "6号摄像头"
+                    }
+                ],
+                "title": "火灾爆炸",
+                "info": "北京汉邦唐化工厂区发生火灾",
+                "level": "1",
+                "type": "fire",
+                "tel": 13231475537,
+                "id": "110000197911038403",
+                "position": [
+                    13312990.72,
+                    4098613.12,
+                    0.51
+                ]
+            }
+        }
+    }) info!: any[];
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+
+    currentCompany = false
+    popObj:any = {
+        popTitle:'报警记录',
+        type:'',
+        title: '风险点异常',
+        info: '',
+        time: '',
+        address:'',
+        level: '',
+        typeName:"",
+        reporter:"",
+        tel:"",
+        position:[],
+        content:"",
+        typeId:"",
+        id:''
+
+    }
+    typeList =[
+        {
+            label:'气体泄露',
+            value:'normal',
+            level:2,
+            id:1
+        },{
+            label:'火灾爆炸',
+            value:'fire',
+            level:1,
+            id:2
+        },{
+            label:'气液泄露',
+            value:'normal',
+            level:1,
+            id:3
+        },{
+            label:'安全事故',
+            value:'normal',
+            level:2,
+            id:4
+        },{
+            label:'自然灾害',
+            value:'normal',
+            level:3,
+            id:5
+        },
+    ]
+    levelClass = 'level-1';
+    levelName = '一级';
+    level=1;
+    cardText = 'level-1-text';
+    taskList = [
+        {
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },{
+            head:'张大仙',
+            content:'派驻安保人员，辅助警示设备以及隔离设备，控制进入人流，如果字数比较多…',
+            checked:false,
+        },
+    ]
+
+    // 当前进度条
+    active = 1
+    radioActive = 1
+    customColor =  '#ffffff'
+    percentage = 50
+    changeRadio(type){
+        this.radioActive = type
+        if (type === 1){
+            this.percentage = 50
+            this.taskList = this.taskList.map((item,i)=>{
+                item.checked = false
+                if ([2,3,5,7,9].includes(i)){
+                    item.checked = true
+                }
+                return item
+            })
+        }else if(type === 2){
+            this.percentage = 70
+            this.taskList = this.taskList.map((item,i)=>{
+                item.checked = false
+                if ([1,2,3,5,7,8,9].includes(i)){
+                    item.checked = true
+                }
+                return item
+            })
+        }else{
+            this.percentage = 80
+            this.taskList = this.taskList.map((item,i)=>{
+                item.checked = false
+                if ([1,2,3,5,6,7,8,9].includes(i)){
+                    item.checked = true
+                }
+                return item
+            })
+
+        }
+    }
+    get dataList(){
+        return this.$store.state.warningList
+    }
+    changeBox(item){
+        item.checked = !item.checked
+        const find = this.taskList.filter(item => item.checked)
+        this.percentage = find.length*10
+    }
+
+    //下一步操作
+    nextStep(){
+        if (this.active<3){
+            this.active++
+        }
+        this.gotoNext()
+    }
+    @Emit('gotoNext')
+    gotoNext(){
+        //
+    }
+    changeLevel(type){
+        if (type === 'up'){
+            if (this.level === 1){
+                return
+            }
+            this.level--
+
+        }else if(type === 'down'){
+            if (this.level === 4){
+                return
+            }
+            this.level++
+        }
+        const nameList = {
+            1:'一级',
+            2:'二级',
+            3:'三级',
+            4:'四级',
+        }
+        this.levelName = nameList[this.level]
+        this.levelClass = `level-${this.level}`
+        this.cardText = `level-${this.level}-text`
+    }
+    setData(val,type){
+        if (type === 'typeName'){
+            const find = this.typeList.find(item=>item.id == val) as any
+            this.popObj.level = find.level
+            this.popObj.title = find.label
+            this.popObj.type = find.value
+        }
+        this.popObj[type] = val
+    }
+
+    //展示告警信息
+    showWaring(item){
+        const levelMap = {
+            1:'一级',
+            2:'二级',
+            3:'三级',
+        }
+        const levelClassMap = {
+            3:'blue',
+            2:'yellow',
+            1:'red',
+        }
+        this.getItem(Object.assign(item,{
+            type:'风险告警',
+            level:item.level,
+            levelClass:levelClassMap[item.level],
+            levelName:levelMap[item.level],
+            content:'监测数值异常',
+            time:'2023年1月20日  14:33:33',
+            equipment:'北区广场监测点',
+            tableHeader:[
+                {
+                    'prop':'alarmSubject',
+                    'label':'告警主体',
+                    'width':'90px',
+                }, {
+                    'prop':'COD',
+                    'label':'COD',
+                }, {
+                    'prop':'standard',
+                    'label':'标准值',
+                },
+            ],
+            tableData: [{
+                'alarmSubject': '排放量',
+                'COD': '456m<sup>3</sup>',
+                'standard': '466m<sup>3</sup>',
+            }, {
+                'alarmSubject': '排放浓度',
+                'COD': '2.6mg/L',
+                'standard': '2.5mg/L',
+            }, {
+                'alarmSubject': '排放时间',
+                'COD': '2023.3.31 05:03:45',
+                'standard': '8:00-22:00',
+            }, {
+                'alarmSubject': '排放浓度',
+                'COD': '2.6mg/L',
+                'standard': '2.5mg/L',
+            }, {
+                'alarmSubject': '排放时间',
+                'COD': '2023.3.31 05:03:45',
+                'standard': '8:00-22:00',
+            }]
+        }))
+    }
+    //点击告警信息
+    @Emit()
+    getItem(item) {
+        // console.log('item', item)
+    }
+
+    count = 1
+
+
+    mounted() {
+
+    }
+
+    destroyed() {
+
+    }
+
+    changeMore() {
+        console.log(1)
+    }
+
+    changeClose() {
+        console.log(1)
+    }
+    addManual(){
+        this.currentCompany = true
+    }
+    submitWaring(){
+        this.popObj.id = Mock.mock("@id");
+        if (this.popObj.type === 'normal'){
+            this.popObj.position=turf.randomPosition([
+                13312995.84,
+                4098177.2800000003,
+                13313096.96,
+                4098754.88,
+            ]);
+        }else if(this.popObj.type === 'fire'){
+            this.popObj.position= [13312990.72, 4098613.12, 0.51]
+        }
+        this.popObj.time = moment().subtract(0,"days").format("YYYY-MM-DD HH:mm:ss")
+
+        this.$store.commit("upDateWaringList",[this.popObj])
+        this.currentCompany=false
+    }
+    //点击点位
+    @Emit('changePoint')
+    changePoint(item) {
+        console.log(item)
+//
+    }
+}
+
diff --git a/src/components/smartEmergency/control/right/chartData.js b/src/components/smartEmergency/control/right/chartData.js
new file mode 100644
index 0000000..ae9ddae
--- /dev/null
+++ b/src/components/smartEmergency/control/right/chartData.js
@@ -0,0 +1,112 @@
+
+export const lineChartData = function () {
+    return {
+        color:['#FADFA4','#947FEA'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: ['1月','2月','3月','4月','5月']
+        },
+        legend: {
+            top: 'top',
+            itemGap: 30,
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff"
+            },
+            data:[
+                {
+                    name:'应急事件',
+                    icon:'roundRect'
+                },{
+                    name:'应急演练',
+                    icon:'roundRect'
+                }
+            ]
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name:'应急事件',
+                data: [60,80,140,70,100],
+                type: 'line',
+                symbolSize: 4,
+                symbol: 'circle',
+                lineStyle: {
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            },{
+                name:'应急演练',
+                data: [50,70,130,60,90],
+                type: 'line',
+                symbolSize: 4,
+                symbol: 'circle',
+                lineStyle: {
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            }
+        ],
+
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 30,
+            x2: 12,
+            y2: 20,
+        }
+    }
+}
diff --git a/src/components/smartEmergency/control/right/controlRight.component.html b/src/components/smartEmergency/control/right/controlRight.component.html
new file mode 100644
index 0000000..40ca692
--- /dev/null
+++ b/src/components/smartEmergency/control/right/controlRight.component.html
@@ -0,0 +1,120 @@
+<div class="env-right emergency-part">
+    <div class="box-content">
+        <div class="risk-box is-justify-space-around margin-top-0">
+            <div class="risk-item">
+                <div class="person-icon"></div>
+                <div>
+                    <p class="env-number-stlye">745</p>
+                    <p>区域内人数</p>
+                </div>
+            </div>
+            <div class="risk-item">
+                <div class="person-icon"></div>
+                <div>
+                    <p class="env-number-stlye">84</p>
+                    <p >区域内车辆</p>
+                </div>
+            </div>
+        </div>
+        <div class="radio-box">
+            <span :class="radioActive=== 1?'active':''" @click="changeRadio(1)">附近摄像头</span>
+            <span :class="radioActive=== 2?'active':''" @click="changeRadio(2)">移动摄像头</span>
+        </div>
+        <div class="plan-head">
+            <span class="span-item">摄像头名称</span>
+            <span class="span-item">类型</span>
+            <span class="span-item">距离 (m)</span>
+        </div>
+        <div class="plan-head-tbody">
+            <div @click="openVideo(item)" class="tr" :key="i" v-for="(item,i) in cameraList">
+                <span class="span-item">{{ item.name }}</span>
+                <span class="span-item">{{ item.type }}</span>
+                <span class="span-item">{{ item.distance }}</span>
+            </div>
+
+        </div>
+        <div class="group-title-plan-search">
+            <span>值班专家</span>
+        </div>
+        <div class="personList margin-top-16 margin-bottom-20">
+            <div>
+                <span class="has-border head-style">火灾救援</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+            <div>
+                <span class="has-border head-style">医疗救助</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+            <div>
+                <span class="has-border head-style">化学防护</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+        </div>
+        <div class="plan-card">
+            <div class="border l-t"></div>
+            <div class="border r-t"></div>
+            <div class="border r-b"></div>
+            <div class="border l-b"></div>
+            <div class="short-report">事故事态简报</div>
+            <div class="short-report-line"></div>
+            <div class="short-card">
+                <div class="border l-t"></div>
+                <div class="border r-t"></div>
+                <div class="border r-b"></div>
+                <div class="border l-b"></div>
+                <div class="short-card-bg d-flex align-items-center is-justify-space-between">
+
+                    <span class="text d-flex align-items-center"><span class="cycle-icon orange"></span>
+                        <span>事故造成伤亡人员</span></span>
+                    <span class="count">暂无</span>
+                </div>
+            </div>
+            <el-timeline  class="margin-top-23">
+                <el-timeline-item
+                        :hide-timestamp="true"
+                        v-for="(activity, index) in activities"
+                        :key="index"
+                        :timestamp="activity.timestamp">
+                    {{activity.timestamp}} {{activity.content}}
+                </el-timeline-item>
+            </el-timeline>
+        </div>
+    </div>
+
+</div>
diff --git a/src/components/smartEmergency/control/right/controlRight.component.ts b/src/components/smartEmergency/control/right/controlRight.component.ts
new file mode 100644
index 0000000..d2f61f7
--- /dev/null
+++ b/src/components/smartEmergency/control/right/controlRight.component.ts
@@ -0,0 +1,281 @@
+import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
+import template from "./controlRight.component.html"
+import TitleComponent from "@/components/title.component.vue"
+import Mock from "mockjs"
+import * as turf from "@turf/turf";
+import moment from "moment";
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class ControlRightComponent extends Vue {
+    //传入的报警信息详情
+    @Prop({
+        default: function () {
+            return {
+            }
+        }
+    }) info!: any;
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+
+    currentCompany = false
+    popObj:any = {
+        popTitle:'报警记录',
+        type:'',
+        title: '风险点异常',
+        info: '',
+        time: '',
+        address:'',
+        level: '',
+        typeName:"",
+        reporter:"",
+        tel:"",
+        position:[],
+        content:"",
+        typeId:"",
+        id:''
+
+    }
+    typeList =[
+        {
+            label:'气体泄露',
+            value:'normal',
+            level:2,
+            id:1
+        },{
+            label:'火灾爆炸',
+            value:'fire',
+            level:1,
+            id:2
+        },{
+            label:'气液泄露',
+            value:'normal',
+            level:1,
+            id:3
+        },{
+            label:'安全事故',
+            value:'normal',
+            level:2,
+            id:4
+        },{
+            label:'自然灾害',
+            value:'normal',
+            level:3,
+            id:5
+        },
+    ]
+    levelClass = 'level-1';
+    levelName = '一级';
+    level=1;
+    cardText = 'level-1-text';
+    tableDataVicinity = [
+        {
+            position:'人民广场东北库',
+            distance:'10',
+            num:'99',
+            checked:false,
+        },{
+            position:'人民广场西南库',
+            distance:'20',
+            num:'69',
+            checked:false,
+        },{
+            position:'人民广场西北库',
+            distance:'30',
+            num:'169',
+            checked:false,
+        },
+    ]
+    activities = [{
+        content: '消防车到达3辆  ',
+        timestamp: '12：30：11'
+    }, {
+        content: '救援小组到达20人',
+        timestamp: '12：24：11'
+    }, {
+        content: '安保小组到达 40人',
+        timestamp: '12：20：11'
+    }]
+    searchVal = ''
+    // 当前进度条
+    active = 1
+    get dataList(){
+        return this.$store.state.warningList
+    }
+    //获取摄像头
+    get cameraList(){
+        const from = this.info.position;
+        const tempData = this.$store.state.cameraList.map((item,i)=>{
+            const to = item.position;
+            const distance = Math.floor(turf.distance(from, to, {units: 'meters'})/100000);
+            const temp = {
+                type:'简型摄像头',
+                distance,
+                name:`${i}号摄像头`,
+            }
+            return {...item,...temp}
+        })
+        return tempData.filter(item => item.distance <= 100).toSorted((a, b) => a.distance - b.distance)
+    }
+    radioActive = 1
+    changeRadio(type){
+        this.radioActive = type
+    }
+    seachData(){
+        console.log(this.searchVal)
+    }
+    //下一步操作
+    nextStep(){
+        if (this.active<3){
+            this.active++
+        }
+    }
+    changeLevel(type){
+        if (type === 'up'){
+            if (this.level === 1){
+                return
+            }
+            this.level--
+
+        }else if(type === 'down'){
+            if (this.level === 4){
+                return
+            }
+            this.level++
+        }
+        const nameList = {
+            1:'一级',
+            2:'二级',
+            3:'三级',
+            4:'四级',
+        }
+        this.levelName = nameList[this.level]
+        this.levelClass = `level-${this.level}`
+        this.cardText = `level-${this.level}-text`
+    }
+    setData(val,type){
+        if (type === 'typeName'){
+            const find = this.typeList.find(item=>item.id == val) as any
+            this.popObj.level = find.level
+            this.popObj.title = find.label
+            this.popObj.type = find.value
+        }
+        this.popObj[type] = val
+    }
+
+    //展示告警信息
+    showWaring(item){
+        const levelMap = {
+            1:'一级',
+            2:'二级',
+            3:'三级',
+        }
+        const levelClassMap = {
+            3:'blue',
+            2:'yellow',
+            1:'red',
+        }
+        this.getItem(Object.assign(item,{
+            type:'风险告警',
+            level:item.level,
+            levelClass:levelClassMap[item.level],
+            levelName:levelMap[item.level],
+            content:'监测数值异常',
+            time:'2023年1月20日  14:33:33',
+            equipment:'北区广场监测点',
+            tableHeader:[
+                {
+                    'prop':'alarmSubject',
+                    'label':'告警主体',
+                    'width':'90px',
+                }, {
+                    'prop':'COD',
+                    'label':'COD',
+                }, {
+                    'prop':'standard',
+                    'label':'标准值',
+                },
+            ],
+            tableData: [{
+                'alarmSubject': '排放量',
+                'COD': '456m<sup>3</sup>',
+                'standard': '466m<sup>3</sup>',
+            }, {
+                'alarmSubject': '排放浓度',
+                'COD': '2.6mg/L',
+                'standard': '2.5mg/L',
+            }, {
+                'alarmSubject': '排放时间',
+                'COD': '2023.3.31 05:03:45',
+                'standard': '8:00-22:00',
+            }, {
+                'alarmSubject': '排放浓度',
+                'COD': '2.6mg/L',
+                'standard': '2.5mg/L',
+            }, {
+                'alarmSubject': '排放时间',
+                'COD': '2023.3.31 05:03:45',
+                'standard': '8:00-22:00',
+            }]
+        }))
+    }
+    //点击告警信息
+    @Emit()
+    getItem(item) {
+        // console.log('item', item)
+    }
+    //打开视频
+    @Emit('openVideo')
+    openVideo(item) {
+        // console.log('item', item)
+    }
+    count = 1
+
+
+    mounted() {
+
+    }
+
+    destroyed() {
+
+    }
+
+    changeMore() {
+        console.log(1)
+    }
+
+    changeClose() {
+        console.log(1)
+    }
+    addManual(){
+        this.currentCompany = true
+    }
+    submitWaring(){
+        this.popObj.id = Mock.mock("@id");
+        if (this.popObj.type === 'normal'){
+            this.popObj.position=turf.randomPosition([
+                13312995.84,
+                4098177.2800000003,
+                13313096.96,
+                4098754.88,
+            ]);
+        }else if(this.popObj.type === 'fire'){
+            this.popObj.position= [13312990.72, 4098613.12, 0.51]
+        }
+        this.popObj.time = moment().subtract(0,"days").format("YYYY-MM-DD HH:mm:ss")
+
+        this.$store.commit("upDateWaringList",[this.popObj])
+        this.currentCompany=false
+    }
+}
+
diff --git a/src/components/smartEmergency/goods/left/chartData.js b/src/components/smartEmergency/goods/left/chartData.js
new file mode 100644
index 0000000..efdb970
--- /dev/null
+++ b/src/components/smartEmergency/goods/left/chartData.js
@@ -0,0 +1,98 @@
+export const pieChartData = {
+    title: {
+        text: '90%',
+        subtext: '在线率',
+        itemGap: 5,
+        x: 105,
+        y: '37%',
+        textStyle: {
+            fontSize: 30,
+            fontWeight: '600',
+            fontStyle: 'italic',
+            color: '#E8E8E8',
+        },
+        subtextStyle: {
+            fontSize: 17,
+            fontWeight: 'normal',
+            align: "center",
+            color: '#E8E8E8'
+        },
+    },
+    tooltip: {
+        trigger: 'item'
+    },
+    legend: {
+        orient: 'vertical',
+        right: '0%',
+        top: 'bottom',
+        height:100,
+        itemWidth: 10,
+        itemHeight: 10,
+        data: [
+            {value: 25, name: '气体'},
+            {value: 25, name: '水质'},
+            {value: 15, name: '特征污染物'},
+            {value: 20, name: '废气'},
+            {value: 15, name: '废水'}
+        ],
+        textStyle: {
+            color: '#D4E5FF',
+            padding: [5, 10, 5, 10]
+        },
+    },
+    series: [
+        {
+            type: 'pie',
+            selectedMode: 'single',
+            selectedOffset: 10,
+            left:-50,
+            radius: [50, 75],
+            data: [
+                {value: 25, name: '气体',num:90},
+                {value: 1, name: '',num:0},
+                {value: 25, name: '水质',num:95},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '特征污染物',num:94},
+                {value: 1, name: '',num:0},
+                {value: 20, name: '废气',num:91},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '废水',num:89},
+                {value: 1, name: '',num:0},
+            ],
+            color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null],
+            emphasis: {
+                itemStyle: {
+                    // shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    // borderWidth:5,
+                    // borderColor:"rgba(255,255,255,0)",
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            itemStyle: {},
+            select: {
+                itemStyle: {}
+            },
+            labelLine: {
+                show: false
+            },
+            label: {
+                show: false
+            },
+            tooltip:{
+                backgroundColor:'rgba(0,0,0,0.4)',
+                textStyle:{
+                    color:'#ffffff'
+                },
+                formatter:function (params) {
+                    return params.data.name+' : '+ params.data.num+'%'
+                }
+
+            }
+        }
+    ],
+    animationDuration: 0,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear'
+}
diff --git a/src/components/smartEmergency/goods/left/goodsHomeLeft.component.html b/src/components/smartEmergency/goods/left/goodsHomeLeft.component.html
new file mode 100644
index 0000000..fb62e1b
--- /dev/null
+++ b/src/components/smartEmergency/goods/left/goodsHomeLeft.component.html
@@ -0,0 +1,95 @@
+<div class="env-left emergency-part">
+    <div class="box-content goods-part">
+        <title-component :show-list="true" @showListData="showListData" :imgSrc="imgSrc">
+            物资盘点
+        </title-component>
+        <el-input  class="search-style margin-top-30"
+                  v-model="searchValue" suffix-icon="el-icon-search"
+                  placeholder="请输入要搜索的物资"></el-input>
+        <div class="d-flex flex-wrap margin-top-23 is-justify-space-center">
+            <div :class="getStyle(item).border" :key="i" v-for="(item,i) in goodsList"  class="goods-item red-border d-flex is-justify-space-center align-items-center">
+                <el-tooltip  placement="top">
+                    <div slot="content" class="tooltip">
+                        <div class="d-flex">
+                            <img class="left-icon" :src="getImgBg(item.type)" alt="">
+                            <div class="content">
+                                <p class="title">{{item.name}}</p>
+                                <p><span>{{item.num}}</span>/{{item.total}} 件</p>
+                            </div>
+                            <div v-show="getStyle(item).bg" class="red-bag">
+                                {{['red','orange'].includes(getStyle(item).bg)?'急缺':'缺少'}}
+                            </div>
+                        </div>
+                        <div class="bg-line bg tooltip-line">
+                            <div class="line inner" :style="{width:getStyle(item).width}" :class="getStyle(item).line"></div>
+                        </div>
+                    </div>
+                    <div :class="getStyle(item).bg" class="goods-item-inside d-flex is-justify-space-center align-items-center">
+
+                        <img :src="getImg(item.type)" alt="">
+                    <div class="bg-line bg">
+                        <div class="line inner" :style="{width:getStyle(item).width}" :class="getStyle(item).line"></div>
+                    </div>
+                </div>
+                </el-tooltip>
+            </div>
+
+        </div>
+        <div class="plan-head">
+            <span class="span-item-half">物资存放点</span>
+            <span class="span-item-half text-right padding-right-30">完备率</span>
+        </div>
+        <div class="plan-head-tbody goods-part">
+            <div @click="showGoodsList(item)" class="tr" :key="i" v-for="(item,i) in tableData">
+                <span class="span-item-half d-flex align-items-center"> <i class="el-icon-house"></i> {{ item.name }}</span>
+                <span class="span-item-half d-flex align-items-center is-justify-content-end">{{ item.num }} <i class="cycle-icon" :class="getStyle(item).bg"></i></span>
+
+            </div>
+        </div>
+    </div>
+
+
+    <!-- 缺少物资弹窗 -->
+    <div class="pop-box left-list-position" v-if="showLogPop">
+        <div class="close" @click="showLogPop=false">×</div>
+        <div class="border l-t"></div>
+        <div class="border r-t"></div>
+        <div class="border r-b"></div>
+        <div class="border l-b"></div>
+        <div class="title">缺失物资清单</div>
+        <div class="d-flex is-justify-space-between pop-list-style margin-top-30">
+            <el-input class="search-style"
+                       v-model="searchValue" suffix-icon="el-icon-search"
+                       placeholder="请输入要搜索的物资"></el-input>
+            <div class="d-flex align-items-center blue">
+                <i class="el-icon-download"></i>
+                <span>导出</span>
+            </div>
+
+        </div>
+
+        <div class="head">
+            <span>物资名称</span>
+            <span>物资类型</span>
+            <span>物资存放点</span>
+            <span>应备</span>
+            <span>已有</span>
+            <span>缺失</span>
+        </div>
+        <div class="tbody">
+            <div class="tr" :key="i" v-for="(item,i) in listTableData">
+                <span class="d-flex align-items-center"><i class="cycle-icon" :class="getStyle(item).bg"></i>{{item.name}}</span>
+                <span>{{item.type}}</span>
+                <span>{{item.address}}</span>
+                <span>{{item.total}}</span>
+                <span>{{item.num}}</span>
+                <span>{{(item.total-item.num)<0?'':item.total-item.num}}</span>
+            </div>
+        </div>
+        <el-pagination
+                background
+                layout="prev, pager, next"
+                :total="1000">
+        </el-pagination>
+    </div>
+</div>
diff --git a/src/components/smartEmergency/goods/left/goodsHomeLeft.component.ts b/src/components/smartEmergency/goods/left/goodsHomeLeft.component.ts
new file mode 100644
index 0000000..8aad6be
--- /dev/null
+++ b/src/components/smartEmergency/goods/left/goodsHomeLeft.component.ts
@@ -0,0 +1,502 @@
+import {Component, Emit, Vue} from 'vue-property-decorator';
+import template from "./goodsHomeLeft.component.html"
+import TitleComponent from "@/components/title.component.vue"
+import * as turf from '@turf/turf'
+import Mock from "mockjs"
+import moment from "moment"
+import("@/assets/style/pageCommon.component.scss")
+
+@Component({
+    template,
+    components: {
+        TitleComponent
+    },
+})
+export default class GoodsHomeLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    imgFireHammer = require("@/assets/img/eme/eme_Fireaxe.png");
+    imgExtinguisher = require("@/assets/img/eme/eme_extinguisher.png");
+    imgMedicineBag = require("@/assets/img/eme/eme_medicinebag.png");
+    fu = require("@/assets/img/eme/fuzi.png");
+    mhq = require("@/assets/img/eme/mhq.png");
+    bag = require("@/assets/img/eme/wz.png");
+    searchValue = ''
+    showLogPop = false
+    popObj:any = {
+        popTitle:'报警记录',
+        type:'',
+        title: '风险点异常',
+        info: '',
+        time: '',
+        address:'',
+        level: '',
+        typeName:"",
+        reporter:"",
+        tel:"",
+        position:[],
+        content:"",
+        typeId:"",
+        id:''
+
+    }
+    goodsList = [
+        {
+            type:'fu',
+            name:'消防斧',
+            num:10,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:20,
+            total:20,
+        },{
+            type:'mhq',
+            name:'灭火器',
+            num:5,
+            total:10,
+        },{
+            type:'bag',
+            name:'急救包',
+            num:8,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:9,
+            total:10,
+        },{
+            type:'bag',
+            name:'急救包',
+            num:10,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:10,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:20,
+            total:20,
+        },{
+            type:'mhq',
+            name:'灭火器',
+            num:5,
+            total:10,
+        },{
+            type:'bag',
+            name:'急救包',
+            num:8,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:9,
+            total:10,
+        },{
+            type:'bag',
+            name:'急救包',
+            num:10,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:10,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:20,
+            total:20,
+        },{
+            type:'mhq',
+            name:'灭火器',
+            num:5,
+            total:10,
+        },{
+            type:'bag',
+            name:'急救包',
+            num:8,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:9,
+            total:10,
+        },{
+            type:'bag',
+            name:'急救包',
+            num:10,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:10,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:20,
+            total:20,
+        },{
+            type:'mhq',
+            name:'灭火器',
+            num:5,
+            total:10,
+        },{
+            type:'bag',
+            name:'急救包',
+            num:8,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:9,
+            total:10,
+        },{
+            type:'mhq',
+            name:'灭火器',
+            num:5,
+            total:10,
+        },{
+            type:'bag',
+            name:'急救包',
+            num:8,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:9,
+            total:10,
+        },{
+            type:'bag',
+            name:'急救包',
+            num:10,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:10,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:20,
+            total:20,
+        },{
+            type:'mhq',
+            name:'灭火器',
+            num:5,
+            total:10,
+        },{
+            type:'bag',
+            name:'急救包',
+            num:8,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:9,
+            total:10,
+        },{
+            type:'mhq',
+            name:'灭火器',
+            num:5,
+            total:10,
+        },{
+            type:'bag',
+            name:'急救包',
+            num:8,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:9,
+            total:10,
+        },{
+            type:'bag',
+            name:'急救包',
+            num:10,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:10,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:20,
+            total:20,
+        },{
+            type:'mhq',
+            name:'灭火器',
+            num:5,
+            total:10,
+        },{
+            type:'bag',
+            name:'急救包',
+            num:8,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防斧',
+            num:9,
+            total:10,
+        },{
+            type:'bag',
+            name:'急救包',
+            num:10,
+            total:10,
+        },
+    ]
+    tableData = [
+        {
+            type:'fu',
+            name:'仓库',
+            num:10,
+            total:10,
+        },{
+            type:'fu',
+            name:'消防柜',
+            num:20,
+            total:20,
+        },{
+            type:'mhq',
+            name:'避难中心',
+            num:5,
+            total:10,
+        },{
+            type:'bag',
+            name:'园区南仓库',
+            num:8,
+            total:10,
+        },{
+            type:'fu',
+            name:'园区东仓库',
+            num:9,
+            total:10,
+        },{
+            type:'bag',
+            name:'园区北仓库',
+            num:10,
+            total:10,
+        },{
+            type:'fu',
+            name:'园区西仓库',
+            num:10,
+            total:10,
+        }
+    ]
+    listTableData = [
+        {
+            'name':'穿戴式防爆照明灯',
+            'type':'照明灯',
+            'address':'仓库A',
+            'total':200,
+            'num':120
+        },
+        {
+            'name':'消防斧',
+            'type':'消防',
+            'address':'仓库A',
+            'total':30,
+            'num':10
+        },
+        {
+            'name':'穿戴式防爆照明灯',
+            'type':'照明灯',
+            'address':'仓库A',
+            'total':200,
+            'num':120
+        },
+        {
+            'name':'消防斧',
+            'type':'消防',
+            'address':'仓库A',
+            'total':30,
+            'num':25
+        },{
+            'name':'穿戴式防爆照明灯',
+            'type':'照明灯',
+            'address':'仓库A',
+            'total':200,
+            'num':160
+        }, {
+            'name':'消防斧',
+            'type':'消防',
+            'address':'仓库A',
+            'total':30,
+            'num':24
+        },{
+            'name':'穿戴式防爆照明灯',
+            'type':'照明灯',
+            'address':'仓库A',
+            'total':200,
+            'num':190
+        }, {
+            'name':'消防斧',
+            'type':'消防',
+            'address':'仓库A',
+            'total':30,
+            'num':10
+        },{
+            'name':'穿戴式防爆照明灯',
+            'type':'照明灯',
+            'address':'仓库A',
+            'total':200,
+            'num':120
+        }, {
+            'name':'消防斧',
+            'type':'消防',
+            'address':'仓库A',
+            'total':30,
+            'num':10
+        },{
+            'name':'穿戴式防爆照明灯',
+            'type':'照明灯',
+            'address':'仓库A',
+            'total':200,
+            'num':120
+        }, {
+            'name':'消防斧',
+            'type':'消防',
+            'address':'仓库A',
+            'total':30,
+            'num':10
+        },
+    ]
+    getImg(type){
+        const imgMap = {
+            'fu':this.imgFireHammer,
+            'mhq':this.imgExtinguisher,
+            'bag':this.imgMedicineBag
+        }
+        return imgMap[type]
+    }
+    getImgBg(type){
+        const imgMap = {
+            'fu':this.fu,
+            'mhq':this.mhq,
+            'bag':this.bag
+        }
+        return imgMap[type]
+    }
+    getStyle(item){
+        const val = item.num/item.total
+        let colorObj:any = {
+            border:'',
+            bg:'',
+            line:''
+        }
+        if (val>=1){
+            colorObj = {
+                border:'',
+                bg:'',
+                line:'',
+                width:'100%'
+            }
+        }else if (val<1 && val>=0.9){
+            colorObj = {
+                border:'blue-border',
+                bg:'blue',
+                line:'blue-line',
+                width:`${val*100}%`
+            }
+        }else if (val<0.9 && val>=0.7){
+            colorObj = {
+                border:'yellow-border',
+                bg:'yellow',
+                line:'yellow-line',
+                width:`${val*100}%`
+            }
+        }else if (val<0.7 && val>=0.5){
+            colorObj = {
+                border:'orange-border',
+                bg:'orange',
+                line:'orange-line',
+                width:`${val*100}%`
+            }
+        }else if (val<0.5){
+            colorObj = {
+                border:'red-border',
+                bg:'red',
+                line:'red-line',
+                width:`${val*100}%`
+            }
+        }
+        return colorObj
+    }
+    typeList =[
+        {
+            label:'气体泄露',
+            value:'normal',
+            level:2,
+            id:1
+        },{
+            label:'火灾爆炸',
+            value:'fire',
+            level:1,
+            id:2
+        },{
+            label:'气液泄露',
+            value:'normal',
+            level:1,
+            id:3
+        },{
+            label:'安全事故',
+            value:'normal',
+            level:2,
+            id:4
+        },{
+            label:'自然灾害',
+            value:'normal',
+            level:3,
+            id:5
+        },
+    ]
+    setData(val,type){
+        if (type === 'typeName'){
+            const find = this.typeList.find(item=>item.id == val) as any
+            this.popObj.level = find.level
+            this.popObj.title = find.label
+            this.popObj.type = find.value
+        }
+        this.popObj[type] = val
+    }
+    //点击告警信息
+    @Emit()
+    getItem(item) {
+        // console.log('item', item)
+    }
+
+    count = 1
+
+
+    mounted() {
+//
+    }
+
+    destroyed() {
+//
+    }
+
+    showListData() {
+        this.showLogPop = true
+    }
+    showGoodsList(item){
+        console.log(item)
+        this.showList(item)
+    }
+    @Emit('showList')
+    showList(item){
+        console.log(item)
+    }
+    @Emit()
+    changeClose() {
+        console.log(1)
+    }
+}
diff --git a/src/components/smartEmergency/goods/right/chartData.js b/src/components/smartEmergency/goods/right/chartData.js
new file mode 100644
index 0000000..495acd4
--- /dev/null
+++ b/src/components/smartEmergency/goods/right/chartData.js
@@ -0,0 +1,232 @@
+
+export const lineChartData = function () {
+    return {
+        color:['#FADFA4','#947FEA'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: ['1月','2月','3月','4月','5月']
+        },
+        legend: {
+            top: 'top',
+            itemGap: 30,
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff"
+            },
+            data:[
+                {
+                    name:'使用量',
+                    icon:'roundRect'
+                },{
+                    name:'过期量',
+                    icon:'roundRect'
+                }
+            ]
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name:'使用量',
+                data: [60,80,140,70,100],
+                type: 'line',
+                symbolSize: 4,
+                symbol: 'circle',
+                lineStyle: {
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            },{
+                name:'过期量',
+                data: [50,70,130,60,90],
+                type: 'line',
+                symbolSize: 4,
+                symbol: 'circle',
+                lineStyle: {
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            }
+        ],
+
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 30,
+            x2: 12,
+            y2: 20,
+        }
+    }
+}
+
+export const pieChartData = {
+    title: {
+        show:false,
+        text: '90%',
+        subtext: '在线率',
+        itemGap: 5,
+        x: 105,
+        y: '37%',
+        textStyle: {
+            fontSize: 30,
+            fontWeight: '600',
+            fontStyle: 'italic',
+            color: '#E8E8E8',
+        },
+        subtextStyle: {
+            fontSize: 17,
+            fontWeight: 'normal',
+            align: "center",
+            color: '#E8E8E8'
+        },
+    },
+    tooltip: {
+        trigger: 'item'
+    },
+    legend: [
+        {
+        orient: 'vertical',
+        right: '15%',
+        bottom: 0,
+        width:150,
+        itemWidth: 10,
+        itemHeight: 10,
+        data: [
+            {value: 25, name: '警示'},
+            {value: 25, name: '消防'},
+            {value: 15, name: '排烟照明'},
+        ],
+        textStyle: {
+            color: '#D4E5FF',
+            padding: [5, 10, 5, 10]
+        },
+    },
+        {
+        orient: 'vertical',
+        left: '25%',
+        bottom: 0,
+        width:150,
+        itemWidth: 10,
+        itemHeight: 10,
+        data: [
+            {value: 20, name: '破拆'},
+            {value: 15, name: '救生'},
+            {value: 15, name: '环境监测'},
+        ],
+        textStyle: {
+            color: '#D4E5FF',
+            padding: [5, 10, 5, 10]
+        },
+    }],
+    series: [
+        {
+            type: 'pie',
+            selectedMode: 'single',
+            selectedOffset: 10,
+            top:0,
+            // left:-50,
+            radius: [55, 70],
+            center: ["50%", "38%"],
+            data: [
+                {value: 25, name: '警示',num:21},
+                {value: 1, name: '',num:0},
+                {value: 25, name: '消防',num:21},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '排烟照明',num:13},
+                {value: 1, name: '',num:0},
+                {value: 20, name: '破拆',num:17},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '救生',num:17},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '环境监测',num:17},
+                {value: 1, name: '',num:0},
+            ],
+            color: ['#ECFF7F', null, '#EA7F7F', null, '#FADFA4', null, '#7FB0FF', null, '#FFFFFF', null,'#947FEA',null],
+            emphasis: {
+                itemStyle: {
+                    // shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    // borderWidth:5,
+                    // borderColor:"rgba(255,255,255,0)",
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            itemStyle: {},
+            select: {
+                itemStyle: {}
+            },
+            labelLine: {
+                show: false
+            },
+            label: {
+                show: false
+            },
+            tooltip:{
+                backgroundColor:'rgba(0,0,0,0.4)',
+                textStyle:{
+                    color:'#ffffff'
+                },
+                formatter:function (params) {
+                    return params.data.name+' : '+ params.data.num+'%'
+                }
+
+            }
+        }
+    ],
+    animationDuration: 0,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear'
+}
diff --git a/src/components/smartEmergency/goods/right/confirm.component.vue b/src/components/smartEmergency/goods/right/confirm.component.vue
new file mode 100644
index 0000000..d51b4c8
--- /dev/null
+++ b/src/components/smartEmergency/goods/right/confirm.component.vue
@@ -0,0 +1,185 @@
+<template>
+  <div>
+    <div class="d-flex align-items-center margin-bottom-20">
+      <span class="cycle-icon blue"></span>
+      <span class="blue-text">确认警情</span>
+      <span class="link"></span>
+      <span class="line-gray"></span>
+      <span class="round-style"></span>
+      <span>事故研判</span>
+    </div>
+    <div class="info-content-text">
+      <span class="label">预警类型：</span>
+      <span class="text">{{info.type}}</span>
+    </div>
+    <div class="info-content-text">
+      <span class="label">告警内容：</span>
+      <span class="text">{{info.content}}</span>
+    </div>
+    <div class="info-content-text">
+      <span class="label">告警级别：</span>
+      <span class="text" :class="info.levelClass">{{info.levelName}}</span>
+      <i class="cycle-icon" :class="info.levelClassIcon"></i>
+    </div>
+    <div class="info-content-text">
+      <span class="label">上报时间：</span>
+      <span class="text">{{info.time}}</span>
+    </div>
+    <div class="info-content-text cursor-pointer">
+      <span class="label">上报位置：</span>
+      <span class="text">{{info.position}}</span>
+      <i class="position-icon"></i>
+    </div>
+    <div class="info-content-text cursor-pointer">
+      <span class="label">上报人：</span>
+      <span class="text">{{info.reporter}}</span>
+      <span class="phone-btn d-flex align-items-center is-justify-space-center"><img src="~@/assets/img/phone-gray.png" alt="">一健联系</span>
+    </div>
+
+    <div class="info-content-text cursor-pointer">
+      <span class="label">附近摄像头：</span>
+    </div>
+    <div class="plan-head">
+      <span class="span-item">摄像头名称</span>
+      <span class="span-item">类型</span>
+      <span class="span-item">距离 (m)</span>
+    </div>
+    <div class="plan-head-tbody">
+      <div class="tr" :key="i" v-for="(item,i) in info.tableData">
+        <span class="span-item">{{ item.name }}</span>
+        <span class="span-item">{{ item.type }}</span>
+        <span class="span-item">{{ item.distance }}</span>
+      </div>
+
+    </div>
+    <div class="d-flex margin-top-30 is-justify-space-center confirm-btn-group">
+      <div class="confirm-btn deal-btn" @click="deal">事故研判</div>
+      <div class="confirm-btn" @click="cancel">消警</div>
+    </div>
+
+  </div>
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
+
+@Component
+export default class ConfirmComponent extends Vue {
+  //传入的报警信息详情
+  @Prop({default: function () {
+      return {
+        type:'人员聚集',
+        content:'人员踩踏事故预警',
+        levelName:'二级',
+        levelClass:'level-2-text',
+        levelClassIcon:'level-2',
+        time:'2023年3月12日 13:56:00',
+        position:'工厂厂房',
+        reporter:'李四',
+        tableHeader:[
+          {
+            prop:'name',
+            label:'摄像头名称'
+          },{
+            prop:'type',
+            label:'类型'
+          },{
+            prop:'distance',
+            label:'距离 (m)'
+          }
+        ],
+        tableData : [
+          {
+            type:'简型摄像头',
+            distance:'10',
+            name:'1号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'20',
+            name:'2号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'22',
+            name:'3号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'10',
+            name:'4号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'20',
+            name:'5号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'22',
+            name:'6号摄像头',
+          },
+        ]
+      }
+    } }) info!: any[];
+
+  //表格添加类
+  tableRowClassName({row, rowIndex}) {
+    if (rowIndex === 1) {
+      return 'blue-row';
+    }
+    if (rowIndex === 2) {
+      return 'yellow-row';
+    }
+    if (rowIndex === 3) {
+      return 'orange-row';
+    }
+    if (rowIndex === 4) {
+      return 'red-row';
+    }
+
+    return '';
+  }
+
+  //处理信息
+  @Emit()
+  deal() {
+
+  }
+  //处理信息
+  @Emit()
+  cancel(){
+
+  }
+
+
+}
+</script>
+<style lang="scss" scoped>
+
+.font-size-12 {
+  font-size: 12px;
+}
+
+.tb-info-style {
+  margin-bottom: 20px;
+}
+.confirm-btn{
+  width: 140px;
+  height: 34px;
+  background: transparent;
+  border-radius: 17px;
+  border: 1px solid #FFFFFF;
+  text-align: center;
+  line-height: 32px;
+  cursor: pointer;
+}
+.deal-btn{
+  background: rgba(255,255,255,0.15);
+  margin-right: 20px;
+}
+.confirm-btn-group{
+  width: 100%;
+  text-align: center;
+}
+.blue{
+  background: #7DAEFF;
+}
+.blue-text{
+  color: #7DAEFF;
+}
+</style>
diff --git a/src/components/smartEmergency/goods/right/goodsRight.component.html b/src/components/smartEmergency/goods/right/goodsRight.component.html
new file mode 100644
index 0000000..7fa124d
--- /dev/null
+++ b/src/components/smartEmergency/goods/right/goodsRight.component.html
@@ -0,0 +1,109 @@
+<div class="env-right emergency-part">
+    <div class="box-content flex-1">
+        <title-component :imgSrc="imgSrc">
+            应急设施统计
+        </title-component>
+<div class="d-flex flex-wrap is-justify-space-between margin-top-23">
+    <div class="statistics-item d-flex align-items-center is-justify-space-around">
+        <span class="d-flex align-items-center"><img src="~@/assets/img/eme/xfz-icon.png" alt="">消防站</span>
+        <span>2/3</span>
+    </div>
+    <div class="statistics-item d-flex align-items-center is-justify-space-around">
+        <span class="d-flex align-items-center"> <img src="~@/assets/img/eme/xfz-icon.png" alt="">气防站</span>
+        <span>3/5</span>
+    </div>
+    <div class="statistics-item d-flex align-items-center is-justify-space-around">
+        <span class="d-flex align-items-center"><img src="~@/assets/img/eme/xfz-icon.png" alt="">避难中心</span>
+        <span>2/2</span>
+    </div>
+    <div class="statistics-item d-flex align-items-center is-justify-space-around">
+        <span class="d-flex align-items-center"> <img src="~@/assets/img/eme/xfz-icon.png" alt="">防空洞</span>
+        <span>2/3</span>
+    </div>
+</div>
+
+    </div>
+    <div class="box-content margin-top-20">
+        <title-component :imgSrc="imgSrc">
+            物资损耗统计
+        </title-component>
+        <div class="radio-box margin-top-20">
+            <span :class="radioActive=== 1?'active':''" @click="changeRadio(1)">企业</span>
+            <span :class="radioActive=== 2?'active':''" @click="changeRadio(2)">公共</span>
+        </div>
+        <hbt-echarts className="line-chart-emergency" :options="option" @onChartInit="getEcharts($event,'lineChart')"></hbt-echarts>
+    </div>
+    <div class="box-content margin-top-20 emergency-part">
+        <title-component :imgSrc="imgSrc">
+            物资缺失类型分布
+        </title-component>
+        <hbt-echarts className="line-chart-emergency" :options="pieChartData" @onChartInit="getEcharts($event,'pie')"></hbt-echarts>
+    </div>
+    <!-- 开启应急演练弹窗 -->
+    <div class="pop-box right-position" v-if="showPop">
+        <div class="close" @click="showPop=false">×</div>
+        <div class="border l-t"></div>
+        <div class="border r-t"></div>
+        <div class="border r-b"></div>
+        <div class="border l-b"></div>
+        <div class="title">{{popTitle}}</div>
+        <el-form class="margin-top-23" label-width="90px">
+            <el-form-item label="事件类型：">
+                <el-select v-model="popObj.typeId" filterable @change="val=>setData(val,'typeName')" class="item-radius-style">
+                    <el-option v-for="(item,i) in typeList" :key="i" :label="item.label" :value="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="事件等级：">
+                <el-select v-model="popObj.level" filterable class="item-radius-style">
+                    <el-option v-for="(item,i) in levelList" :key="i" :label="item.label" :value="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="演练计划：">
+                <el-select v-model="popObj.plan" filterable class="item-radius-style">
+                    <el-option v-for="(item,i) in planList" :key="i" :label="item.label" :value="item.value"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="关联预案：">
+                <el-select v-model="popObj.linkPlan" filterable  class="item-radius-style">
+                    <el-option v-for="(item,i) in linkPlanList" :key="i" :label="item.label" :value="item.value"></el-option>
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <div class="d-flex btn-group">
+            <div class="btn-style" @click="submitWaring">确认</div>
+            <div class="btn-style cancel" @click="showPop=false">取消</div>
+        </div>
+    </div>
+    <!-- 开启应急演练弹窗 -->
+    <div class="pop-box right-log-position" v-if="showLogPop">
+        <div class="close" @click="showLogPop=false">×</div>
+        <div class="border l-t"></div>
+        <div class="border r-t"></div>
+        <div class="border r-b"></div>
+        <div class="border l-b"></div>
+        <div class="title">报警记录</div>
+       <div class="head">
+           <span>告警类型</span>
+           <span>告警内容</span>
+           <span>报警内容</span>
+           <span>上报人员</span>
+           <span>事故地点</span>
+           <span>处理意见</span>
+       </div>
+        <div class="tbody">
+            <div class="tr" :key="i" v-for="(item,i) in tableData">
+                <span>{{item.type}}</span>
+                <span>{{item.content}}</span>
+                <span>{{item.alarm}}</span>
+                <span>{{item.reporter}}</span>
+                <span>{{item.address}}</span>
+                <span>{{item.suggestion}}</span>
+            </div>
+        </div>
+        <el-pagination
+                background
+                layout="prev, pager, next"
+                :total="1000">
+        </el-pagination>
+    </div>
+</div>
diff --git a/src/components/smartEmergency/goods/right/goodsRight.component.ts b/src/components/smartEmergency/goods/right/goodsRight.component.ts
new file mode 100644
index 0000000..8da8bcc
--- /dev/null
+++ b/src/components/smartEmergency/goods/right/goodsRight.component.ts
@@ -0,0 +1,315 @@
+import {Component, Vue} from 'vue-property-decorator';
+import template from "./goodsRight.component.html"
+import {lineChartData,pieChartData} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+import * as echarts from 'echarts';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class GoodsRightComponent extends Vue {
+    //标题图片
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //定时器
+    timer: any = null;
+    //折线图数据
+    option: any = {}
+    //折线图实例
+    lineChart: any = {}
+    //环形图数据
+    pieChartData: any = pieChartData
+    //环形图实例
+    pie:any = {}
+    // 计数
+    count = 0
+    public colors = [
+        {color: '#FF5959', percentage: 20},
+        {color: '#FFA900', percentage: 40},
+        {color: '#FADFA4', percentage: 60},
+        {color: '#C9FFD7', percentage: 80},
+        {color: '#76c893', percentage: 100}
+    ];
+    showPop = false
+    showLogPop = false
+    popTitle = '开启演练'
+    popObj:any = {
+        popTitle:'报警记录',
+        type:'',
+        title: '风险点异常',
+        info: '',
+        time: '',
+        address:'',
+        level: '',
+        typeName:"",
+        reporter:"",
+        tel:"",
+        position:[],
+        content:"",
+        typeId:"",
+        plan:"",
+        linkPlan:"化工园区氢气泄露处理预案",
+        id:''
+
+    }
+    typeList =[
+        {
+            label:'气体泄露',
+            value:'normal',
+            level:2,
+            id:1
+        },{
+            label:'火灾爆炸',
+            value:'fire',
+            level:1,
+            id:2
+        },{
+            label:'气液泄露',
+            value:'normal',
+            level:1,
+            id:3
+        },{
+            label:'安全事故',
+            value:'normal',
+            level:2,
+            id:4
+        },{
+            label:'自然灾害',
+            value:'normal',
+            level:3,
+            id:5
+        },
+    ]
+    levelList =[
+        {
+            label:'一级',
+            value:'1',
+            id:1
+        },{
+            label:'二级',
+            value:'2',
+            id:2
+        },{
+            label:'三级',
+            value:'3',
+            id:3
+        },{
+            label:'四级',
+            value:'4',
+            id:4
+        }
+    ]
+    planList =[
+        {
+            label:'氢气泄露演练',
+            value:'氢气泄露演练',
+            id:1
+        },{
+            label:'氯气泄露演练',
+            value:'氯气泄露演练',
+            id:2
+        },{
+            label:'氯化氢泄露演练',
+            value:'氯化氢泄露演练',
+            id:3
+        },{
+            label:'二氧化硫泄露演练',
+            value:'二氧化硫泄露演练',
+            id:5
+        }
+    ]
+    linkPlanList =[
+        {
+            label:'化工园区氢气泄露处理预案',
+            value:'化工园区氢气泄露处理预案',
+            id:1
+        }
+    ]
+    tableData = [
+        {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        },{
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        },
+    ]
+
+
+    public textFormat(data){
+        return ""
+    }
+    public getCount(data){
+        this.count = 0;
+        setTimeout(()=>{
+            const timer = setInterval(()=>{
+                if(this.count<data){
+                    this.count++
+                }else{
+                    clearInterval(timer)
+                }
+            },20)
+        },400)
+
+    }
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        this.initLineData()
+    }
+    setData(val,type){
+        if (type === 'typeName'){
+            const find = this.typeList.find(item=>item.id == val) as any
+            this.popObj.title = find.label
+            this.popObj.type = find.value
+        }
+        this.popObj[type] = val
+    }
+    //图表自适应
+    resize() {
+        setTimeout(() => {
+            this.lineChart.resize();
+        }, 300)
+    }
+
+    timerForLineData: any = null;
+
+    //自动切换line图表数据
+    autoChangeLineData() {
+        this.timerForLineData = setInterval(() => {
+            this.lineChart.clear()
+            this.lineChart.setOption(this.option)
+            this.getCount(this.count)
+        }, 5000)
+    }
+
+    //获取范围内随机数
+    getRandomInt(min: number, max: number) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
+    }
+
+    mounted() {
+        this.getCount(70)
+        this.autoChangeLineData()
+        window.addEventListener("resize", this.resize);
+    }
+
+    //初始化line图表
+    initLineData() {
+        this.option = lineChartData()
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+        clearInterval(this.timerForLineData)
+    }
+
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+    //改变污染物监测颜色
+    changeColor(val) {
+        if (Number(val) <= 30) {
+            return '#ffffff'
+        } else if (Number(val) > 30 && Number(val) <= 50) {
+            return '#F2A183'
+        } else {
+            return '#DD7171'
+        }
+
+    }
+    radioActive = 1
+    changeRadio(type){
+        this.radioActive = type
+    }
+}
+
diff --git a/src/components/smartEmergency/goods/right/storeGoods.component.vue b/src/components/smartEmergency/goods/right/storeGoods.component.vue
new file mode 100644
index 0000000..0c1db43
--- /dev/null
+++ b/src/components/smartEmergency/goods/right/storeGoods.component.vue
@@ -0,0 +1,359 @@
+<template>
+  <div class="right-goods-list-con">
+    <title-component :show-close="true" @change-close="changeClose" :imgSrc="imgSrc">
+      A区物资仓库
+    </title-component>
+    <el-input class="search-style margin-top-23 margin-bottom-20"
+              v-model="searchValue" suffix-icon="el-icon-search"
+              placeholder="请输入要搜索的物资"></el-input>
+    <div class="head">
+      <span>物资类型</span>
+      <span>存放物资</span>
+      <span>储备量</span>
+      <span>应备量</span>
+    </div>
+    <div class="tbody">
+      <div class="tr" :key="i" v-for="(item,i) in listTableData.filter(data => !searchValue || data.name.toLowerCase().includes(searchValue.toLowerCase()))">
+        <span class="d-flex align-items-center"><i class="cycle-icon" :class="getStyle(item).bg"></i>{{item.type}}</span>
+        <span :title="item.name">{{item.name}}</span>
+        <span>{{item.num}}</span>
+        <span>{{item.total}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
+import TitleComponent from "@/components/title.component.vue"
+
+
+@Component({
+  components: {
+    TitleComponent
+  },
+})
+export default class StoreGoodsComponent extends Vue {
+  //传入的报警信息详情
+  @Prop({
+    default: function () {
+      return {
+        type: '人员聚集',
+        content: '人员踩踏事故预警',
+        levelName: '二级',
+        levelClass: 'level-2-text',
+        levelClassIcon: 'level-2',
+        time: '2023年3月12日 13:56:00',
+        position: '工厂厂房',
+        plan: '工厂厂房',
+        reporter: '李四',
+        tableHeader: [
+          {
+            prop: 'name',
+            label: '摄像头名称'
+          }, {
+            prop: 'type',
+            label: '类型'
+          }, {
+            prop: 'distance',
+            label: '距离 (m)'
+          }
+        ],
+        tableData: [
+          {
+            type: '简型摄像头',
+            distance: '10',
+            name: '1号摄像头',
+          }, {
+            type: '简型摄像头',
+            distance: '20',
+            name: '2号摄像头',
+          }, {
+            type: '简型摄像头',
+            distance: '22',
+            name: '3号摄像头',
+          }, {
+            type: '简型摄像头',
+            distance: '10',
+            name: '4号摄像头',
+          }, {
+            type: '简型摄像头',
+            distance: '20',
+            name: '5号摄像头',
+          }, {
+            type: '简型摄像头',
+            distance: '22',
+            name: '6号摄像头',
+          },
+        ]
+      }
+    }
+  }) infoData!: any[];
+  imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+  info:any = {}
+  contentFlag = false
+  positionFlag = false
+  radio = ''
+  searchValue = ''
+  listTableData = [
+    {
+      'name':'穿戴式防爆照明灯',
+      'type':'照明灯',
+      'address':'仓库A',
+      'total':200,
+      'num':120
+    },
+    {
+      'name':'消防斧',
+      'type':'消防',
+      'address':'仓库A',
+      'total':30,
+      'num':10
+    },
+    {
+      'name':'穿戴式防爆照明灯',
+      'type':'照明灯',
+      'address':'仓库A',
+      'total':200,
+      'num':120
+    },
+    {
+      'name':'消防斧',
+      'type':'消防',
+      'address':'仓库A',
+      'total':30,
+      'num':25
+    },{
+      'name':'穿戴式防爆照明灯',
+      'type':'照明灯',
+      'address':'仓库A',
+      'total':200,
+      'num':160
+    }, {
+      'name':'消防斧',
+      'type':'消防',
+      'address':'仓库A',
+      'total':30,
+      'num':24
+    },{
+      'name':'穿戴式防爆照明灯',
+      'type':'照明灯',
+      'address':'仓库A',
+      'total':200,
+      'num':190
+    }, {
+      'name':'消防斧',
+      'type':'消防',
+      'address':'仓库A',
+      'total':30,
+      'num':10
+    },{
+      'name':'穿戴式防爆照明灯',
+      'type':'照明灯',
+      'address':'仓库A',
+      'total':200,
+      'num':120
+    }, {
+      'name':'消防斧',
+      'type':'消防',
+      'address':'仓库A',
+      'total':30,
+      'num':10
+    },{
+      'name':'穿戴式防爆照明灯',
+      'type':'照明灯',
+      'address':'仓库A',
+      'total':200,
+      'num':120
+    }, {
+      'name':'消防斧',
+      'type':'消防',
+      'address':'仓库A',
+      'total':30,
+      'num':10
+    },
+  ]
+  @Watch('infoData', {immediate: true, deep: true})
+  onChangeValue(newVal: any, oldVal: any) {
+    if (newVal) {
+      this.info = newVal
+    }
+  }
+
+  //表格添加类
+  tableRowClassName({row, rowIndex}) {
+    if (rowIndex === 1) {
+      return 'blue-row';
+    }
+    if (rowIndex === 2) {
+      return 'yellow-row';
+    }
+    if (rowIndex === 3) {
+      return 'orange-row';
+    }
+    if (rowIndex === 4) {
+      return 'red-row';
+    }
+
+    return '';
+  }
+
+  //监听点击事件
+  @Emit('changeClose')
+  changeClose() {
+    // return item
+  }
+  showEdit(type){
+    this[type] = !this[type]
+  }
+  getStyle(item){
+    const val = item.num/item.total
+    let colorObj:any = {
+      border:'',
+      bg:'',
+      line:''
+    }
+    if (val>=1){
+      colorObj = {
+        border:'',
+        bg:'',
+        line:'',
+        width:'100%'
+      }
+    }else if (val<1 && val>=0.9){
+      colorObj = {
+        border:'blue-border',
+        bg:'blue',
+        line:'blue-line',
+        width:`${val*100}%`
+      }
+    }else if (val<0.9 && val>=0.7){
+      colorObj = {
+        border:'yellow-border',
+        bg:'yellow',
+        line:'yellow-line',
+        width:`${val*100}%`
+      }
+    }else if (val<0.7 && val>=0.5){
+      colorObj = {
+        border:'orange-border',
+        bg:'orange',
+        line:'orange-line',
+        width:`${val*100}%`
+      }
+    }else if (val<0.5){
+      colorObj = {
+        border:'red-border',
+        bg:'red',
+        line:'red-line',
+        width:`${val*100}%`
+      }
+    }
+    return colorObj
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep{
+  .search-style {
+    width: 100%;
+    .el-input__inner {
+      border-radius: 20px;
+      background: transparent;
+      color: #FFFFFF;
+
+      &:focus {
+        border-color: #FFFFFF;
+      }
+    }
+  }
+  .cycle-icon{
+    background: rgba(255,255,255,0.7);
+    margin: 0 4px 0 0;
+    &.red {
+      background-color: rgba(255, 89, 89, 1);
+    }
+    &.orange {
+      background-color: rgba(255, 158, 55, 1);
+    }
+    &.yellow {
+      background-color: rgba(255, 237, 98, 1);
+    }
+    &.blue {
+      background-color: rgba(125, 174, 255, 1);
+    }
+  }
+}
+
+.right-goods-list-con{
+  //滚动条样式
+  @mixin scrollStyle($width) {
+    &::-webkit-scrollbar {
+      width: $width !important;
+      height: 100% !important;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 2px;
+      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      background: rgba(255, 255, 255, 0.68);
+    }
+    &::-webkit-scrollbar-track {
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      -webkit-border-radius: 2px;
+      background: transparent;
+    }
+  }
+  @mixin commonTableStyle {
+    span {
+      padding: 10px;
+      font-size: 14px;
+      width: auto;
+      &:first-child {
+        width: 100px;
+      }
+
+      &:nth-child(2) {
+        width: 100px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      &:nth-child(3) {
+        width: 80px;
+      }
+
+      &:last-child {
+        width: 80px;
+      }
+    }
+  }
+  .head {
+    margin-top: 20px;
+    display: flex;
+    @include commonTableStyle;
+    background: rgba(216, 216, 216, 0.3);
+
+    span {
+      border: 1px solid #7B7974;
+      margin-left: -1px;
+    }
+  }
+
+  .tbody {
+    max-height: 400px;
+    overflow-y: auto;
+    @include scrollStyle(2px);
+
+    .tr {
+      cursor: pointer;
+      display: flex;
+      @include commonTableStyle;
+
+      &:nth-child(2n) {
+        background: rgba(216, 216, 216, 0.1);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/smartEmergency/home/left/chartData.js b/src/components/smartEmergency/home/left/chartData.js
new file mode 100644
index 0000000..efdb970
--- /dev/null
+++ b/src/components/smartEmergency/home/left/chartData.js
@@ -0,0 +1,98 @@
+export const pieChartData = {
+    title: {
+        text: '90%',
+        subtext: '在线率',
+        itemGap: 5,
+        x: 105,
+        y: '37%',
+        textStyle: {
+            fontSize: 30,
+            fontWeight: '600',
+            fontStyle: 'italic',
+            color: '#E8E8E8',
+        },
+        subtextStyle: {
+            fontSize: 17,
+            fontWeight: 'normal',
+            align: "center",
+            color: '#E8E8E8'
+        },
+    },
+    tooltip: {
+        trigger: 'item'
+    },
+    legend: {
+        orient: 'vertical',
+        right: '0%',
+        top: 'bottom',
+        height:100,
+        itemWidth: 10,
+        itemHeight: 10,
+        data: [
+            {value: 25, name: '气体'},
+            {value: 25, name: '水质'},
+            {value: 15, name: '特征污染物'},
+            {value: 20, name: '废气'},
+            {value: 15, name: '废水'}
+        ],
+        textStyle: {
+            color: '#D4E5FF',
+            padding: [5, 10, 5, 10]
+        },
+    },
+    series: [
+        {
+            type: 'pie',
+            selectedMode: 'single',
+            selectedOffset: 10,
+            left:-50,
+            radius: [50, 75],
+            data: [
+                {value: 25, name: '气体',num:90},
+                {value: 1, name: '',num:0},
+                {value: 25, name: '水质',num:95},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '特征污染物',num:94},
+                {value: 1, name: '',num:0},
+                {value: 20, name: '废气',num:91},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '废水',num:89},
+                {value: 1, name: '',num:0},
+            ],
+            color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null],
+            emphasis: {
+                itemStyle: {
+                    // shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    // borderWidth:5,
+                    // borderColor:"rgba(255,255,255,0)",
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            itemStyle: {},
+            select: {
+                itemStyle: {}
+            },
+            labelLine: {
+                show: false
+            },
+            label: {
+                show: false
+            },
+            tooltip:{
+                backgroundColor:'rgba(0,0,0,0.4)',
+                textStyle:{
+                    color:'#ffffff'
+                },
+                formatter:function (params) {
+                    return params.data.name+' : '+ params.data.num+'%'
+                }
+
+            }
+        }
+    ],
+    animationDuration: 0,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear'
+}
diff --git a/src/components/smartEmergency/home/left/emergencyHomeLeft.component.html b/src/components/smartEmergency/home/left/emergencyHomeLeft.component.html
new file mode 100644
index 0000000..104d148
--- /dev/null
+++ b/src/components/smartEmergency/home/left/emergencyHomeLeft.component.html
@@ -0,0 +1,161 @@
+<div class="env-left emergency-part">
+    <div class="box-content">
+        <title-component :showManual="true" @addManual="addManual" :imgSrc="imgSrc">
+            预警信息
+        </title-component>
+        <warning-list-component class="margin-top-30" @getItem="showWaring"
+                                :data-list="dataList"></warning-list-component>
+    </div>
+    <div class="box-content margin-top-23">
+        <div class="group-title">应急值班小组：4</div>
+        <div class="personList">
+            <div>
+                <span class="has-border head-style">消防组</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+            <div>
+                <span class="has-border head-style">医疗队</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+            <div>
+                <span class="has-border head-style">救援小组</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+            <div>
+                <span class="has-border head-style">后勤处</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+        </div>
+        <div class="group-title margin-top-23">值班专家：3</div>
+        <div class="personList">
+            <div>
+                <span class="has-border head-style">火灾救援</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+            <div>
+                <span class="has-border head-style">医疗救助</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+            <div>
+                <span class="has-border head-style">化学防护</span>
+                <div class="has-border personList-content">
+                    <el-tooltip class="item" effect="dark" content="电话：13338542414" placement="top">
+                        <span>张三</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13838543414" placement="top">
+                        <span>高光易</span>
+                    </el-tooltip>
+                    ,
+                    <el-tooltip class="item" effect="dark" content="电话：13778541236" placement="top">
+                        <span>薛想</span>
+                    </el-tooltip>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 报警记录弹窗 -->
+    <div class="pop-box left-position" v-if="currentCompany">
+        <div class="close" @click="currentCompany=false">×</div>
+        <div class="border l-t"></div>
+        <div class="border r-t"></div>
+        <div class="border r-b"></div>
+        <div class="border l-b"></div>
+        <div class="title">{{popObj.popTitle}}</div>
+       <el-form class="margin-top-23" label-width="100px">
+           <el-form-item label="事件类型：">
+               <el-select v-model="popObj.typeId" @change="val=>setData(val,'typeName')" class="item-radius-style">
+                   <el-option v-for="(item,i) in typeList" :key="i" :label="item.label" :value="item.id"></el-option>
+               </el-select>
+           </el-form-item>
+           <el-form-item label="事件地点：">
+               <el-input v-model="popObj.address" class="item-radius-style" placeholder="请输入地点"></el-input>
+           </el-form-item>
+           <el-form-item label="上报人：">
+               <el-input v-model="popObj.reporter" class="item-radius-style" placeholder="请输入上报人姓名"></el-input>
+           </el-form-item>
+           <el-form-item label="联系电话：">
+               <el-input v-model="popObj.tel" class="item-radius-style" placeholder="请输入上报人电话"></el-input>
+           </el-form-item>
+           <el-form-item label="事件描述：">
+               <el-input  :rows="5" @change="val=>setData(val,'info')" v-model="popObj.content" class="item-radius-style" type="textarea" placeholder="请输入事件描述"></el-input>
+           </el-form-item>
+       </el-form>
+        <div class="d-flex btn-group">
+            <div class="btn-style" @click="submitWaring">提交</div>
+            <div class="btn-style cancel" @click="currentCompany=false">取消</div>
+        </div>
+    </div>
+</div>
diff --git a/src/components/smartEmergency/home/left/emergencyHomeLeft.component.ts b/src/components/smartEmergency/home/left/emergencyHomeLeft.component.ts
new file mode 100644
index 0000000..146d345
--- /dev/null
+++ b/src/components/smartEmergency/home/left/emergencyHomeLeft.component.ts
@@ -0,0 +1,203 @@
+import {Component, Emit, Vue} from 'vue-property-decorator';
+import template from "./emergencyHomeLeft.component.html"
+import {pieChartData} from "./chartData";
+
+import TitleComponent from "@/components/title.component.vue"
+import WarningListComponent from "@/components/warningList.component.vue"
+import * as turf from '@turf/turf'
+import Mock from "mockjs"
+import moment from "moment"
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        WarningListComponent
+    },
+})
+export default class EmergencyHomeLeftComponent extends Vue {
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+
+    currentCompany = false
+    popObj:any = {
+        popTitle:'报警记录',
+        type:'',
+        title: '风险点异常',
+        info: '',
+        time: '',
+        address:'',
+        level: '',
+        typeName:"",
+        reporter:"",
+        tel:"",
+        position:[],
+        content:"",
+        typeId:"",
+        id:''
+
+    }
+    typeList =[
+        {
+            label:'气体泄露',
+            value:'normal',
+            level:2,
+            id:1
+        },{
+            label:'火灾爆炸',
+            value:'fire',
+            level:1,
+            id:2
+        },{
+            label:'气液泄露',
+            value:'normal',
+            level:1,
+            id:3
+        },{
+            label:'安全事故',
+            value:'normal',
+            level:2,
+            id:4
+        },{
+            label:'自然灾害',
+            value:'normal',
+            level:3,
+            id:5
+        },
+    ]
+    get dataList(){
+        return this.$store.state.eventList
+    }
+    setData(val,type){
+        if (type === 'typeName'){
+            const find = this.typeList.find(item=>item.id == val) as any
+            this.popObj.level = find.level
+            this.popObj.typeName = find.label
+            this.popObj.title = find.label
+            this.popObj.type = find.value
+        }else{
+            this.popObj[type] = val
+        }
+
+    }
+
+    //展示告警信息
+    showWaring(item){
+        this.getItem(Object.assign({
+            typeName:'人员聚集',
+            content:'人员踩踏事故预警',
+            levelName:'二级',
+            levelClass:'level-2-text',
+            levelClassIcon:'level-2',
+            time:'2023年3月12日 13:56:00',
+            address:'工厂厂房',
+            reporter:'李四',
+            tableHeader:[
+                {
+                    prop:'name',
+                    label:'摄像头名称'
+                },{
+                    prop:'type',
+                    label:'类型'
+                },{
+                    prop:'distance',
+                    label:'距离 (m)'
+                }
+            ],
+            tableData : [
+                {
+                    type:'简型摄像头',
+                    distance:'10',
+                    name:'1号摄像头',
+                },{
+                    type:'简型摄像头',
+                    distance:'20',
+                    name:'2号摄像头',
+                },{
+                    type:'简型摄像头',
+                    distance:'22',
+                    name:'3号摄像头',
+                },{
+                    type:'简型摄像头',
+                    distance:'10',
+                    name:'4号摄像头',
+                },{
+                    type:'简型摄像头',
+                    distance:'20',
+                    name:'5号摄像头',
+                },{
+                    type:'简型摄像头',
+                    distance:'22',
+                    name:'6号摄像头',
+                },
+            ]
+        },item))
+    }
+    //点击告警信息
+    @Emit()
+    getItem(item) {
+        // console.log('item', item)
+    }
+
+    count = 1
+
+
+    mounted() {
+
+    }
+
+    destroyed() {
+
+    }
+
+    changeMore() {
+        console.log(1)
+    }
+
+    changeClose() {
+        console.log(1)
+    }
+    addManual(){
+        this.currentCompany = true
+        this.popObj = {
+            popTitle:'报警记录',
+            type:'',
+            title: '风险点异常',
+            info: '',
+            time: '',
+            address:'',
+            level: '',
+            typeName:"",
+            reporter:"",
+            tel:"",
+            position:[],
+            content:"",
+            typeId:"",
+            id:''
+
+        }
+    }
+    submitWaring(){
+        this.popObj.id = Mock.mock("@id");
+        if (this.popObj.type === 'normal'){
+            this.popObj.position=turf.randomPosition([
+                13312995.84,
+                4098177.2800000003,
+                13313096.96,
+                4098754.88,
+            ]);
+        }else if(this.popObj.type === 'fire'){
+            this.popObj.position= [13312990.72, 4098613.12, 0.51]
+        }
+        this.popObj.time = moment().subtract(0,"days").format("YYYY-MM-DD HH:mm:ss")
+
+        this.$store.commit("upDateEventList",[this.popObj])
+        this.currentCompany=false
+    }
+}
+
diff --git a/src/components/smartEmergency/home/right/chartData.js b/src/components/smartEmergency/home/right/chartData.js
new file mode 100644
index 0000000..ae9ddae
--- /dev/null
+++ b/src/components/smartEmergency/home/right/chartData.js
@@ -0,0 +1,112 @@
+
+export const lineChartData = function () {
+    return {
+        color:['#FADFA4','#947FEA'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: ['1月','2月','3月','4月','5月']
+        },
+        legend: {
+            top: 'top',
+            itemGap: 30,
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff"
+            },
+            data:[
+                {
+                    name:'应急事件',
+                    icon:'roundRect'
+                },{
+                    name:'应急演练',
+                    icon:'roundRect'
+                }
+            ]
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name:'应急事件',
+                data: [60,80,140,70,100],
+                type: 'line',
+                symbolSize: 4,
+                symbol: 'circle',
+                lineStyle: {
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            },{
+                name:'应急演练',
+                data: [50,70,130,60,90],
+                type: 'line',
+                symbolSize: 4,
+                symbol: 'circle',
+                lineStyle: {
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            }
+        ],
+
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 30,
+            x2: 12,
+            y2: 20,
+        }
+    }
+}
diff --git a/src/components/smartEmergency/home/right/confirm.component.vue b/src/components/smartEmergency/home/right/confirm.component.vue
new file mode 100644
index 0000000..587a25c
--- /dev/null
+++ b/src/components/smartEmergency/home/right/confirm.component.vue
@@ -0,0 +1,289 @@
+<template>
+  <div>
+    <div class="d-flex align-items-center margin-bottom-20">
+      <span class="cycle-icon blue"></span>
+      <span class="blue-text">确认警情</span>
+      <span class="link"></span>
+      <span class="line-gray"></span>
+      <span class="round-style"></span>
+      <span>事故研判</span>
+    </div>
+    <div class="info-content-text">
+      <span class="label">预警类型：</span>
+      <span class="text">{{info.typeName}}</span>
+    </div>
+    <div class="info-content-text">
+      <span class="label">告警内容：</span>
+      <span class="text">{{info.content}}</span>
+    </div>
+    <div class="info-content-text">
+      <span class="label">告警级别：</span>
+      <span class="text" :class="info.levelClass">{{info.levelName}}</span>
+      <i class="cycle-icon" :class="info.levelClassIcon"></i>
+    </div>
+    <div class="info-content-text">
+      <span class="label">上报时间：</span>
+      <span class="text">{{info.time}}</span>
+    </div>
+    <div class="info-content-text cursor-pointer">
+      <span class="label">上报位置：</span>
+      <span class="text">{{info.address}}</span>
+      <i @click="changePoint(info)" class="position-icon"></i>
+    </div>
+    <div class="info-content-text cursor-pointer">
+      <span class="label">上报人：</span>
+      <span class="text">{{info.reporter}}</span>
+      <span class="phone-btn d-flex align-items-center is-justify-space-center"><img src="~@/assets/img/phone-gray.png" alt="">一健联系</span>
+    </div>
+
+    <div class="info-content-text cursor-pointer">
+      <span class="label">附近摄像头：</span>
+    </div>
+    <div class="plan-head">
+      <span class="span-item">摄像头名称</span>
+      <span class="span-item">类型</span>
+      <span class="span-item">距离 (m)</span>
+    </div>
+    <div class="plan-head-tbody">
+      <div class="tr" :key="i" v-for="(item,i) in info.tableData">
+        <span class="span-item">{{ item.name }}</span>
+        <span class="span-item">{{ item.type }}</span>
+        <span class="span-item">{{ item.distance }}</span>
+      </div>
+
+    </div>
+    <div class="d-flex margin-top-30 is-justify-space-center confirm-btn-group">
+      <div class="confirm-btn deal-btn" @click="showJudgmentFlag">事故研判</div>
+      <div class="confirm-btn" @click="hidePop">消警</div>
+    </div>
+    <!-- 报警记录弹窗 -->
+    <div class="pop-box right-position " v-if="showDealMsg">
+      <div class="close" @click="showDealMsg=false">×</div>
+      <div class="border l-t"></div>
+      <div class="border r-t"></div>
+      <div class="border r-b"></div>
+      <div class="border l-b"></div>
+      <div class="title">处理意见</div>
+      <el-form class="margin-top-23" label-width="100px">
+
+        <el-form-item label="处理建议：">
+          <el-input  :rows="5"  v-model="popObj.content" class="item-radius-style" type="textarea" placeholder="请输入事件描述"></el-input>
+        </el-form-item>
+        <el-form-item label="执行人：">
+          <el-select v-model="popObj.typeId"  class="item-radius-style">
+            <el-option v-for="(item,i) in typeList" :key="i" :label="item.label" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div class="d-flex btn-group align-items-center">
+        <div class="btn-style" @click="hideConfirm">确认</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
+
+@Component
+export default class ConfirmComponent extends Vue {
+  //传入的报警信息详情
+  @Prop({default: function () {
+      return {
+        type:'人员聚集',
+        content:'人员踩踏事故预警',
+        levelName:'二级',
+        levelClass:'level-2-text',
+        levelClassIcon:'level-2',
+        time:'2023年3月12日 13:56:00',
+        position:'工厂厂房',
+        reporter:'李四',
+        tableHeader:[
+          {
+            prop:'name',
+            label:'摄像头名称'
+          },{
+            prop:'type',
+            label:'类型'
+          },{
+            prop:'distance',
+            label:'距离 (m)'
+          }
+        ],
+        tableData : [
+          {
+            type:'简型摄像头',
+            distance:'10',
+            name:'1号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'20',
+            name:'2号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'22',
+            name:'3号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'10',
+            name:'4号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'20',
+            name:'5号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'22',
+            name:'6号摄像头',
+          },
+        ]
+      }
+    } }) info!: any[];
+  showDealMsg = false
+  popObj:any = {
+    popTitle:'报警记录',
+    type:'',
+    title: '风险点异常',
+    info: '',
+    time: '',
+    address:'',
+    level: '',
+    typeName:"",
+    reporter:"",
+    tel:"",
+    position:[],
+    content:"",
+    typeId:"",
+    id:''
+
+  }
+  typeList = [
+    {
+      label:'张三',
+      value:'张三',
+    },{
+      label:'李四',
+      value:'李四',
+    },{
+      label:'王五',
+      value:'王五',
+    }
+  ]
+  //表格添加类
+  tableRowClassName({row, rowIndex}) {
+    if (rowIndex === 1) {
+      return 'blue-row';
+    }
+    if (rowIndex === 2) {
+      return 'yellow-row';
+    }
+    if (rowIndex === 3) {
+      return 'orange-row';
+    }
+    if (rowIndex === 4) {
+      return 'red-row';
+    }
+
+    return '';
+  }
+
+  //处理信息
+  @Emit('showJudgmentFlag')
+  showJudgmentFlag() {
+//
+  }
+  //点击点位
+  @Emit('changePoint')
+  changePoint(item) {
+    console.log(item)
+//
+  }
+  hidePop(){
+    this.showDealMsg = true
+  }
+  //处理信息
+  @Emit('hideConfirm')
+  hideConfirm(){
+    this.showDealMsg = false
+//
+  }
+
+
+}
+</script>
+<style lang="scss" scoped>
+
+.font-size-12 {
+  font-size: 12px;
+}
+
+.tb-info-style {
+  margin-bottom: 20px;
+}
+.confirm-btn{
+  width: 140px;
+  height: 34px;
+  background: transparent;
+  border-radius: 17px;
+  border: 1px solid #FFFFFF;
+  text-align: center;
+  line-height: 32px;
+  cursor: pointer;
+}
+.deal-btn{
+  background: rgba(255,255,255,0.15);
+  margin-right: 20px;
+}
+.confirm-btn-group{
+  width: 100%;
+  text-align: center;
+}
+.blue{
+  background: #7DAEFF;
+}
+.blue-text{
+  color: #7DAEFF;
+}
+.overview-container .pop-box {
+  left: -170%;
+  ::v-deep{
+    .el-form-item__label{
+      color: #FFFFFF;
+    }
+    .item-radius-style {
+      .el-input__inner {
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 20px;
+        border: 1px solid rgba(255, 255, 255, 0.6);
+        color: #d7d7d7;
+      }
+
+      .el-textarea__inner {
+        color: #d7d7d7;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 5px;
+        border: 1px solid rgba(255, 255, 255, 0.6);
+      }
+
+    }
+  }
+  .btn-group {
+    justify-content: space-evenly;
+
+    .btn-style {
+      width: 96px;
+      height: 34px;
+      background: rgba(255, 255, 255, 0.15);
+      border-radius: 17px;
+      border: 1px solid #FFFFFF;
+      text-align: center;
+      line-height: 34px;
+      cursor: pointer;
+    }
+
+    .cancel {
+      background: rgba(255, 255, 255, 0);
+    }
+  }
+
+}
+</style>
diff --git a/src/components/smartEmergency/home/right/judgment.component.vue b/src/components/smartEmergency/home/right/judgment.component.vue
new file mode 100644
index 0000000..f0ac06c
--- /dev/null
+++ b/src/components/smartEmergency/home/right/judgment.component.vue
@@ -0,0 +1,269 @@
+<template>
+  <div>
+    <div class="d-flex align-items-center margin-bottom-20">
+      <span class="cycle-icon blue"></span>
+      <span class="blue-text">确认警情</span>
+      <span class="line-blue"></span>
+      <span class="cycle-icon blue"></span>
+      <span class="blue-text">事故研判</span>
+    </div>
+    <div class="d-flex flex-wrap top-border">
+      <div class="judgment-item-2">区域内人数：345</div>
+      <div class="judgment-item-2">区域内车辆：45</div>
+      <div class="judgment-item-2">附近危险源：4</div>
+      <div class="judgment-item-2">附近应急设施：4</div>
+    </div>
+    <div class="top-border">
+      <div class="d-flex align-items-center height-40">
+        <span class="label">事故类型：</span>
+        <el-select v-model="info.typeName" class="item-radius-style">
+          <el-option label="人员聚集" value="人员聚集"></el-option>
+        </el-select>
+      </div>
+      <div class="d-flex align-items-center  height-40">
+        <span class="label">事故内容：</span>
+        <span  v-if="!contentFlag" >{{info.content}}</span>
+        <el-input v-else @blur="showEdit('contentFlag')" v-model="info.content" class="item-radius-style"></el-input>
+        <span class="edit-con"  @click="showEdit('contentFlag')"><i class="el-icon-edit"></i>修改</span>
+      </div>
+      <div class="d-flex align-items-center  height-40">
+        <span class="label">事故级别：</span>
+        <el-select v-model="info.levelName" class="item-radius-style">
+          <el-option label="一级" value="一级"></el-option>
+          <el-option label="二级" value="二级"></el-option>
+          <el-option label="三级" value="三级"></el-option>
+          <el-option label="四级" value="四级"></el-option>
+        </el-select>
+      </div>
+      <div class="d-flex align-items-center  height-40">
+        <span class="label">上报位置：</span>
+        <span v-if="!positionFlag" >{{info.address}}</span>
+        <i @click="changePoint(info)" v-if="!positionFlag" class="position-icon"></i>
+        <el-input v-else @blur="showEdit('positionFlag')" v-model="info.address" class="item-radius-style"></el-input>
+        <span class="edit-con" @click="showEdit('positionFlag')"><i class="el-icon-edit"></i>修改</span>
+      </div>
+      <div class="d-flex align-items-center  height-40">
+        <span class="label">上报人：</span>
+        <span class="text">{{ info.reporter }}</span>
+        <span class="phone-btn d-flex align-items-center is-justify-space-center"><img src="~@/assets/img/phone-gray.png"
+                                                                                       alt="">一健联系</span>
+      </div>
+    </div>
+    <div class="top-border">
+      <div><el-radio v-model="radio" label="1">
+        <div class="d-flex align-items-center"> <span>大型活动处理预案</span> <el-rate disabled :max="3"></el-rate></div>
+
+      </el-radio></div>
+      <div><el-radio v-model="radio" label="2">
+        <div class="d-flex align-items-center"> <span>氢气爆炸处理预案</span> <el-rate disabled :max="2"></el-rate></div>
+      </el-radio></div>
+      <div><el-radio v-model="radio" label="3">
+        <div class="d-flex align-items-center"> <span>氯气泄露处理预案</span> <el-rate disabled :max="2"></el-rate></div>
+      </el-radio></div>
+      <div><el-radio v-model="radio" label="4">
+        <div class="d-flex align-items-center"> <span class="text-style">自定义</span>  <el-select v-model="info.plan" class="item-radius-style">
+          <el-option label="CO泄露处理预案" value="CO泄露处理预案"></el-option>
+          <el-option label="NO泄露处理预案" value="NO泄露处理预案"></el-option>
+          <el-option label="HCL泄露处理预案" value="HCL泄露处理预案"></el-option>
+        </el-select></div>
+      </el-radio></div>
+    </div>
+
+    <div class="d-flex margin-top-30 is-justify-space-center confirm-btn-group">
+      <div class="confirm-btn deal-btn" @click="deal">确认</div>
+
+    </div>
+
+
+  </div>
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
+
+@Component
+export default class JudgmentComponent extends Vue {
+  //传入的报警信息详情
+  @Prop({
+    default: function () {
+      return {
+      }
+    }
+  }) infoData!: any[];
+  info:any = {}
+  contentFlag = false
+  positionFlag = false
+  radio = ''
+
+  @Watch('infoData', {immediate: true, deep: true})
+  onChangeValue(newVal: any, oldVal: any) {
+    if (newVal) {
+      this.info = newVal
+    }
+  }
+
+  //表格添加类
+  tableRowClassName({row, rowIndex}) {
+    if (rowIndex === 1) {
+      return 'blue-row';
+    }
+    if (rowIndex === 2) {
+      return 'yellow-row';
+    }
+    if (rowIndex === 3) {
+      return 'orange-row';
+    }
+    if (rowIndex === 4) {
+      return 'red-row';
+    }
+
+    return '';
+  }
+
+  //处理信息
+  @Emit()
+  deal() {
+
+  }
+
+  //处理信息
+  @Emit()
+  cancel() {
+
+  }
+
+
+  showEdit(type){
+    this[type] = !this[type]
+  }
+  //点击点位
+  @Emit('changePoint')
+  changePoint(item) {
+    console.log(item)
+//
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.font-size-12 {
+  font-size: 12px;
+}
+
+.tb-info-style {
+  margin-bottom: 20px;
+}
+
+.confirm-btn {
+  width: 140px;
+  height: 34px;
+  background: transparent;
+  border-radius: 17px;
+  border: 1px solid #FFFFFF;
+  text-align: center;
+  line-height: 32px;
+  cursor: pointer;
+}
+
+.deal-btn {
+  background: rgba(255, 255, 255, 0.15);
+  margin-right: 20px;
+}
+
+.confirm-btn-group {
+  width: 100%;
+  text-align: center;
+}
+
+.blue {
+  background: #7DAEFF;
+}
+
+.blue-text {
+  color: #7DAEFF;
+}
+
+.judgment-item-2 {
+  width: 50%;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.top-border {
+  border-top: 1px solid rgba(216, 216, 216, 0.4);
+  padding-top: 20px;
+  font-size: 14px;
+  .label{
+    font-size: 14px;
+  }
+}
+::v-deep{
+  .item-radius-style {
+    width: 202px;
+    .el-input__inner {
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 20px;
+      border: 1px solid rgba(255, 255, 255, 0.6);
+      color: #d7d7d7;
+
+    }
+
+    .el-textarea__inner {
+      color: #d7d7d7;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 5px;
+      border: 1px solid rgba(255, 255, 255, 0.6);
+    }
+
+    .el-icon-search {
+      cursor: pointer;
+    }
+
+  }
+  .el-radio{
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  .el-rate__icon{
+    margin-right: 2px;
+  }
+  .el-radio__label{
+    color: #ffffff;
+  }
+}
+.phone-btn {
+  width: 90px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 16px;
+  border: 1px solid #FFFFFF;
+  cursor: pointer;
+  text-align: center;
+  font-size: 14px;
+  margin-left: 8px;
+}
+.label{
+  width: 80px;
+}
+.edit-con{
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  right: 0;
+}
+.height-40{
+  height: 40px;
+  line-height: 40px;
+  margin-bottom: 10px;
+}
+.position-icon {
+  width: 16px;
+  height: 16px;
+  background: url("~@/assets/icons/png/point.png");
+  margin-left: 8px;
+
+}
+.text-style{
+  margin-right: 10px;
+}
+</style>
diff --git a/src/components/smartEmergency/home/right/smartEmergencyRight.component.html b/src/components/smartEmergency/home/right/smartEmergencyRight.component.html
new file mode 100644
index 0000000..e57d782
--- /dev/null
+++ b/src/components/smartEmergency/home/right/smartEmergencyRight.component.html
@@ -0,0 +1,123 @@
+<div class="env-right emergency-part">
+    <div class="box-content">
+        <title-component :imgSrc="imgSrc">
+            应急统计
+        </title-component>
+        <div class="right-top">
+            <div class="right-top-item" @click="showLog">
+                <div class="right-top-item-sub">
+                    <span class="value white-color">5</span>
+                    <span class="level"><i class="point red large"></i></span>
+                </div>
+                <div class="label">未处理</div>
+            </div>
+            <div class="right-top-item" @click="showLog">
+                <div class="right-top-item-sub">
+                    <span class="value white-color">
+                       30
+                    </span>
+                </div>
+                <div class="label">已处理</div>
+            </div>
+            <div class="right-top-item" @click="showLog">
+                <div class="right-top-item-sub">
+                    <span class="value white-color">
+                        18
+                    </span>
+                </div>
+                <div class="label">已消警</div>
+            </div>
+        </div>
+        <hbt-echarts className="line-chart-emergency" :options="option" @onChartInit="getEcharts($event,'lineChart')"></hbt-echarts>
+    </div>
+    <div class="box-content flex-15 margin-top-20">
+        <title-component :imgSrc="imgSrc">
+            应急演练
+        </title-component>
+        <div class="energyRightTitle d-flex is-justify-space-between margin-top-23">
+            <span>演练次数</span>
+            <span>5</span>
+        </div>
+        <div class="last-time">最近一次演练时间：2月12日</div>
+        <div @click="startDrill" class="blue-button">开始演练</div>
+    </div>
+    <div class="box-content margin-top-20 emergency-part">
+        <title-component :imgSrc="imgSrc">
+            物资盘点
+        </title-component>
+        <div class="charts-box">
+            <div class="text">
+                <div class="count">{{count}}%</div>
+                物资完备度
+            </div>
+            <el-progress type="circle" :width="200" define-back-color="rgba(255,255,255,0.16)" :format="textFormat" :stroke-width="20" :percentage="count" :color="colors"></el-progress>
+        </div>
+    </div>
+    <!-- 开启应急演练弹窗 -->
+    <div class="pop-box right-position" v-if="showPop">
+        <div class="close" @click="showPop=false">×</div>
+        <div class="border l-t"></div>
+        <div class="border r-t"></div>
+        <div class="border r-b"></div>
+        <div class="border l-b"></div>
+        <div class="title">{{popTitle}}</div>
+        <el-form class="margin-top-23" label-width="90px">
+            <el-form-item label="事件类型：">
+                <el-select v-model="popObj.typeId" filterable @change="val=>setData(val,'typeName')" class="item-radius-style">
+                    <el-option v-for="(item,i) in typeList" :key="i" :label="item.label" :value="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="事件等级：">
+                <el-select v-model="popObj.level" filterable class="item-radius-style">
+                    <el-option v-for="(item,i) in levelList" :key="i" :label="item.label" :value="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="演练计划：">
+                <el-select v-model="popObj.plan" filterable class="item-radius-style">
+                    <el-option v-for="(item,i) in planList" :key="i" :label="item.label" :value="item.value"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="关联预案：">
+                <el-select v-model="popObj.linkPlan" filterable  class="item-radius-style">
+                    <el-option v-for="(item,i) in linkPlanList" :key="i" :label="item.label" :value="item.value"></el-option>
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <div class="d-flex btn-group">
+            <div class="btn-style" @click="submitWaring">确认</div>
+            <div class="btn-style cancel" @click="showPop=false">取消</div>
+        </div>
+    </div>
+    <!-- 开启应急演练弹窗 -->
+    <div class="pop-box right-log-position" v-if="showLogPop">
+        <div class="close" @click="showLogPop=false">×</div>
+        <div class="border l-t"></div>
+        <div class="border r-t"></div>
+        <div class="border r-b"></div>
+        <div class="border l-b"></div>
+        <div class="title">报警记录</div>
+       <div class="head">
+           <span>告警类型</span>
+           <span>告警内容</span>
+           <span>报警内容</span>
+           <span>上报人员</span>
+           <span>事故地点</span>
+           <span>处理意见</span>
+       </div>
+        <div class="tbody">
+            <div class="tr" :key="i" v-for="(item,i) in tableData">
+                <span>{{item.type}}</span>
+                <span>{{item.content}}</span>
+                <span>{{item.alarm}}</span>
+                <span>{{item.reporter}}</span>
+                <span>{{item.address}}</span>
+                <span>{{item.suggestion}}</span>
+            </div>
+        </div>
+        <el-pagination
+                background
+                layout="prev, pager, next"
+                :total="1000">
+        </el-pagination>
+    </div>
+</div>
diff --git a/src/components/smartEmergency/home/right/smartEmergencyRight.component.ts b/src/components/smartEmergency/home/right/smartEmergencyRight.component.ts
new file mode 100644
index 0000000..5c1ff82
--- /dev/null
+++ b/src/components/smartEmergency/home/right/smartEmergencyRight.component.ts
@@ -0,0 +1,321 @@
+import {Component, Emit, Vue} from 'vue-property-decorator';
+import template from "./smartEmergencyRight.component.html"
+import {lineChartData} from "./chartData";
+import TitleComponent from "@/components/title.component.vue"
+import * as echarts from 'echarts';
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class SmartEmergencyRightComponent extends Vue {
+    //标题图片
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+    //定时器
+    timer: any = null;
+    //折线图数据
+    option: any = {}
+    //折线图实例
+    lineChart: any = {}
+    // 计数
+    count = 0
+    public colors = [
+        {color: '#FF5959', percentage: 20},
+        {color: '#FFA900', percentage: 40},
+        {color: '#FADFA4', percentage: 60},
+        {color: '#C9FFD7', percentage: 80},
+        {color: '#76c893', percentage: 100}
+    ];
+    showPop = false
+    showLogPop = false
+    popTitle = '开启演练'
+    popObj:any = {
+        popTitle:'报警记录',
+        type:'',
+        title: '风险点异常',
+        info: '',
+        time: '',
+        address:'',
+        level: '',
+        typeName:"",
+        reporter:"",
+        tel:"",
+        position:[],
+        content:"",
+        typeId:"",
+        plan:"",
+        linkPlan:"化工园区氢气泄露处理预案",
+        id:''
+
+    }
+    typeList =[
+        {
+            label:'气体泄露',
+            value:'normal',
+            level:2,
+            id:1
+        },{
+            label:'火灾爆炸',
+            value:'fire',
+            level:1,
+            id:2
+        },{
+            label:'气液泄露',
+            value:'normal',
+            level:1,
+            id:3
+        },{
+            label:'安全事故',
+            value:'normal',
+            level:2,
+            id:4
+        },{
+            label:'自然灾害',
+            value:'normal',
+            level:3,
+            id:5
+        },
+    ]
+    levelList =[
+        {
+            label:'一级',
+            value:'1',
+            id:1
+        },{
+            label:'二级',
+            value:'2',
+            id:2
+        },{
+            label:'三级',
+            value:'3',
+            id:3
+        },{
+            label:'四级',
+            value:'4',
+            id:4
+        }
+    ]
+    planList =[
+        {
+            label:'氢气泄露演练',
+            value:'氢气泄露演练',
+            id:1
+        },{
+            label:'氯气泄露演练',
+            value:'氯气泄露演练',
+            id:2
+        },{
+            label:'氯化氢泄露演练',
+            value:'氯化氢泄露演练',
+            id:3
+        },{
+            label:'二氧化硫泄露演练',
+            value:'二氧化硫泄露演练',
+            id:5
+        }
+    ]
+    linkPlanList =[
+        {
+            label:'化工园区氢气泄露处理预案',
+            value:'化工园区氢气泄露处理预案',
+            id:1
+        }
+    ]
+    tableData = [
+        {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        },{
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        }, {
+            type:'火灾爆炸',
+            content:'发生火灾',
+            alarm:'发生火灾',
+            reporter:'罗马',
+            address:'A号点位',
+            suggestion:'立即救援',
+        },
+    ]
+    //开始演练
+    startDrill(){
+        this.showPop = true
+    }
+    //报警记录
+    showLog(){
+        this.showLogPop = true
+    }
+    submitWaring(){
+        this.showPop = false
+        this.showPlan()
+    }
+    @Emit('showPlan')
+    showPlan(){
+        //
+    }
+    public textFormat(data){
+        return ""
+    }
+    public getCount(data){
+        this.count = 0;
+        setTimeout(()=>{
+            const timer = setInterval(()=>{
+                if(this.count<data){
+                    this.count++
+                }else{
+                    clearInterval(timer)
+                }
+            },20)
+        },400)
+
+    }
+    //获取图表实例
+    getEcharts(e, type) {
+        this[type] = e
+        this.initLineData()
+    }
+    setData(val,type){
+        if (type === 'typeName'){
+            const find = this.typeList.find(item=>item.id == val) as any
+            this.popObj.title = find.label
+            this.popObj.type = find.value
+        }
+        this.popObj[type] = val
+    }
+    //图表自适应
+    resize() {
+        setTimeout(() => {
+            this.lineChart.resize();
+        }, 300)
+    }
+
+    timerForLineData: any = null;
+
+    //自动切换line图表数据
+    autoChangeLineData() {
+        this.timerForLineData = setInterval(() => {
+            this.lineChart.clear()
+            this.lineChart.setOption(this.option)
+            this.getCount(this.count)
+        }, 5000)
+    }
+
+    //获取范围内随机数
+    getRandomInt(min: number, max: number) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
+    }
+
+    mounted() {
+        this.getCount(70)
+        this.autoChangeLineData()
+        window.addEventListener("resize", this.resize);
+    }
+
+    //初始化line图表
+    initLineData() {
+        this.option = lineChartData()
+    }
+
+    beforeDestroy() {
+        clearInterval(this.timer)
+        clearInterval(this.timerForLineData)
+    }
+
+    destroyed() {
+        window.removeEventListener("resize", this.resize)
+    }
+
+    //改变污染物监测颜色
+    changeColor(val) {
+        if (Number(val) <= 30) {
+            return '#ffffff'
+        } else if (Number(val) > 30 && Number(val) <= 50) {
+            return '#F2A183'
+        } else {
+            return '#DD7171'
+        }
+
+    }
+}
+
diff --git a/src/components/smartEmergency/plan/left/chartData.js b/src/components/smartEmergency/plan/left/chartData.js
new file mode 100644
index 0000000..efdb970
--- /dev/null
+++ b/src/components/smartEmergency/plan/left/chartData.js
@@ -0,0 +1,98 @@
+export const pieChartData = {
+    title: {
+        text: '90%',
+        subtext: '在线率',
+        itemGap: 5,
+        x: 105,
+        y: '37%',
+        textStyle: {
+            fontSize: 30,
+            fontWeight: '600',
+            fontStyle: 'italic',
+            color: '#E8E8E8',
+        },
+        subtextStyle: {
+            fontSize: 17,
+            fontWeight: 'normal',
+            align: "center",
+            color: '#E8E8E8'
+        },
+    },
+    tooltip: {
+        trigger: 'item'
+    },
+    legend: {
+        orient: 'vertical',
+        right: '0%',
+        top: 'bottom',
+        height:100,
+        itemWidth: 10,
+        itemHeight: 10,
+        data: [
+            {value: 25, name: '气体'},
+            {value: 25, name: '水质'},
+            {value: 15, name: '特征污染物'},
+            {value: 20, name: '废气'},
+            {value: 15, name: '废水'}
+        ],
+        textStyle: {
+            color: '#D4E5FF',
+            padding: [5, 10, 5, 10]
+        },
+    },
+    series: [
+        {
+            type: 'pie',
+            selectedMode: 'single',
+            selectedOffset: 10,
+            left:-50,
+            radius: [50, 75],
+            data: [
+                {value: 25, name: '气体',num:90},
+                {value: 1, name: '',num:0},
+                {value: 25, name: '水质',num:95},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '特征污染物',num:94},
+                {value: 1, name: '',num:0},
+                {value: 20, name: '废气',num:91},
+                {value: 1, name: '',num:0},
+                {value: 15, name: '废水',num:89},
+                {value: 1, name: '',num:0},
+            ],
+            color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null],
+            emphasis: {
+                itemStyle: {
+                    // shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    // borderWidth:5,
+                    // borderColor:"rgba(255,255,255,0)",
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            itemStyle: {},
+            select: {
+                itemStyle: {}
+            },
+            labelLine: {
+                show: false
+            },
+            label: {
+                show: false
+            },
+            tooltip:{
+                backgroundColor:'rgba(0,0,0,0.4)',
+                textStyle:{
+                    color:'#ffffff'
+                },
+                formatter:function (params) {
+                    return params.data.name+' : '+ params.data.num+'%'
+                }
+
+            }
+        }
+    ],
+    animationDuration: 0,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear'
+}
diff --git a/src/components/smartEmergency/plan/left/emergencyPlanLeft.component.html b/src/components/smartEmergency/plan/left/emergencyPlanLeft.component.html
new file mode 100644
index 0000000..f0ad2fc
--- /dev/null
+++ b/src/components/smartEmergency/plan/left/emergencyPlanLeft.component.html
@@ -0,0 +1,106 @@
+<div class="env-left emergency-part">
+    <div class="box-content">
+        <div class="plan-card">
+            <div class="border l-t"></div>
+            <div class="border r-t"></div>
+            <div class="border r-b"></div>
+            <div class="border l-b"></div>
+            <ul class="plan">
+                <li><span>事故类型：</span><span>{{info.typeName}}</span></li>
+                <li><span>事故内容：</span><span>{{info.content}}</span></li>
+                <li>
+                    <span>事故级别：</span>
+                    <span :class="cardText">{{ levelName }}</span>
+                    <span class="cycle-icon" :class="levelClass"></span>
+                    <span class="plan-btn" @click="changeLevel('up')"><i class="el-icon-caret-top"></i>上调</span>
+                    <span class="plan-btn" @click="changeLevel('down')"><i class="el-icon-caret-bottom"></i>下调</span>
+                </li>
+                <li><span>关联危险源：</span><span>石油炼制单元</span></li>
+                <li><span>上报位置：</span><span>{{info.address}}</span><i @click="changePoint(info)" class="position-icon"></i>
+                </li>
+                <li><span>上报人：</span><span>{{ info.reporter }}</span>
+                    <span class="phone-btn"><img src="~@/assets/img/phone.png" alt="">一健联系</span>
+                </li>
+            </ul>
+        </div>
+        <div class="group-title-plan">应急组织</div>
+        <div class="plan-head">
+            <span class="span-item">组织</span>
+            <span class="span-item">职责</span>
+            <span class="span-item">负责人</span>
+        </div>
+        <div class="plan-head-tbody">
+            <div class="tr" :key="i" v-for="(item,i) in tableData">
+                <span class="span-item"><el-checkbox class="green-check"
+                                                     v-model="item.checked">{{ item.org }}</el-checkbox></span>
+                <span class="span-item">{{ item.job }}</span>
+                <span class="span-item">{{ item.head }}</span>
+            </div>
+
+        </div>
+        <div class="group-title-plan">值班专家</div>
+        <div class="plan-head">
+            <span class="span-item-2">领域</span>
+            <span class="span-item-2">专家</span>
+        </div>
+        <div class="plan-head-tbody">
+            <div class="tr" :key="i" v-for="(item,i) in tableDataExpert">
+                <span class="span-item-2"><el-checkbox class="green-check"
+                                                       v-model="item.checked">{{ item.area }}</el-checkbox></span>
+                <span class="span-item-2">{{ item.person }}</span>
+
+            </div>
+        </div>
+        <div class="group-title-plan">附近应急设施</div>
+        <div class="plan-head">
+            <span class="span-item">设施名称</span>
+            <span class="span-item">所在位置</span>
+            <span class="span-item">距离 (m)</span>
+        </div>
+        <div class="plan-head-tbody">
+            <div class="tr" :key="i" v-for="(item,i) in tableDataVicinity">
+                <span class="span-item">{{ item.name }}</span>
+                <span class="span-item">{{ item.position }}</span>
+                <span class="span-item">{{ item.distance }}</span>
+            </div>
+
+        </div>
+
+    </div>
+    <div class="plan-center">
+        <div class="progress-center">
+            <div><i class="cycle-icon orange"></i>应急中...</div>
+            <div class="middle">
+                <div class="d-flex align-items-center">
+                    <div class="d-flex align-items-center">
+                        <div class="cycle-box " :class="active === 1?'active':''">
+                            <hbt-svg v-if="active === 1" className="loading-icon" name="tail-spin"></hbt-svg>
+                        </div>
+                        <div class="line" :class="active === 1?'active':''"></div>
+                    </div>
+                    <div class="d-flex align-items-center">
+                        <div class="line" :class="active === 2?'active':''"></div>
+                        <div class="cycle-box " :class="active === 2?'active':''">
+                            <hbt-svg v-if="active === 2" className="loading-icon" name="tail-spin"></hbt-svg>
+                        </div>
+                        <div class="line" :class="active === 2?'active':''"></div>
+                    </div>
+                    <div class="d-flex align-items-center">
+                        <div class="line"  :class="active === 3?'active':''"></div>
+                        <div class="cycle-box " :class="active === 3?'active':''">
+                            <hbt-svg v-if="active === 3" className="loading-icon" name="tail-spin"></hbt-svg>
+                        </div>
+                    </div>
+                </div>
+                <div class="d-flex is-justify-space-between progress-title">
+                    <span :class="active === 1?'active':''">应急准备</span>
+                    <span :class="active === 2?'active':''">事态控制</span>
+                    <span :class="active === 3?'active':''">善后工作</span>
+                </div>
+            </div>
+
+            <div @click="nextStep" class="center-btn">{{active === 3?'完成':'下一步'}}</div>
+        </div>
+    </div>
+
+</div>
diff --git a/src/components/smartEmergency/plan/left/emergencyPlanLeft.component.ts b/src/components/smartEmergency/plan/left/emergencyPlanLeft.component.ts
new file mode 100644
index 0000000..0d3fcc5
--- /dev/null
+++ b/src/components/smartEmergency/plan/left/emergencyPlanLeft.component.ts
@@ -0,0 +1,356 @@
+import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
+import template from "./emergencyPlanLeft.component.html"
+import {pieChartData} from "./chartData";
+
+import TitleComponent from "@/components/title.component.vue"
+import WarningListComponent from "@/components/warningList.component.vue"
+import * as turf from '@turf/turf'
+import Mock from "mockjs"
+import moment from "moment"
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+        WarningListComponent
+    },
+})
+export default class EmergencyPlanLeftComponent extends Vue {
+    //传入的报警信息详情
+    @Prop({
+        default: {
+            "typeName": "火灾",
+            "content": "北京汉邦唐化工厂区发生火灾",
+            "levelName": "二级",
+            "levelClass": "level-2-text",
+            "levelClassIcon": "level-2",
+            "time": "2023-05-15 15:21:35",
+            "address": "工厂厂房",
+            "reporter": "蒋丽",
+            "tableHeader": [
+                {
+                    "prop": "name",
+                    "label": "摄像头名称"
+                },
+                {
+                    "prop": "type",
+                    "label": "类型"
+                },
+                {
+                    "prop": "distance",
+                    "label": "距离 (m)"
+                }
+            ],
+            "tableData": [
+                {
+                    "type": "简型摄像头",
+                    "distance": "10",
+                    "name": "1号摄像头"
+                },
+                {
+                    "type": "简型摄像头",
+                    "distance": "20",
+                    "name": "2号摄像头"
+                },
+                {
+                    "type": "简型摄像头",
+                    "distance": "22",
+                    "name": "3号摄像头"
+                },
+                {
+                    "type": "简型摄像头",
+                    "distance": "10",
+                    "name": "4号摄像头"
+                },
+                {
+                    "type": "简型摄像头",
+                    "distance": "20",
+                    "name": "5号摄像头"
+                },
+                {
+                    "type": "简型摄像头",
+                    "distance": "22",
+                    "name": "6号摄像头"
+                }
+            ],
+            "title": "火灾爆炸",
+            "info": "北京汉邦唐化工厂区发生火灾",
+            "level": "1",
+            "type": "fire",
+            "tel": 13231475537,
+            "id": "110000197911038403",
+            "position": [
+                13312990.72,
+                4098613.12,
+                0.51
+            ]
+        }
+    }) info!: any;
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+
+    currentCompany = false
+    popObj:any = {
+        popTitle:'报警记录',
+        type:'',
+        title: '风险点异常',
+        info: '',
+        time: '',
+        address:'',
+        level: '',
+        typeName:"",
+        reporter:"",
+        tel:"",
+        position:[],
+        content:"",
+        typeId:"",
+        id:''
+
+    }
+    typeList =[
+        {
+            label:'气体泄露',
+            value:'normal',
+            level:2,
+            id:1
+        },{
+            label:'火灾爆炸',
+            value:'fire',
+            level:1,
+            id:2
+        },{
+            label:'气液泄露',
+            value:'normal',
+            level:1,
+            id:3
+        },{
+            label:'安全事故',
+            value:'normal',
+            level:2,
+            id:4
+        },{
+            label:'自然灾害',
+            value:'normal',
+            level:3,
+            id:5
+        },
+    ]
+    levelClass = 'level-1';
+    levelName = '一级';
+    level=1;
+    cardText = 'level-1-text';
+    tableData = [
+        {
+            head:'李大仙',
+            org:'保安组',
+            checked:false,
+            job:'组织闲杂人要…'
+        },{
+            head:'张大仙',
+            org:'后勤组',
+            checked:false,
+            job:'输送救援物资…'
+        },{
+            head:'尼古拉斯…',
+            org:'医疗组',
+            checked:false,
+            job:'医疗受伤人群…'
+        },
+    ]
+    tableDataExpert = [
+        {
+            person:'张三，高光易，薛想',
+            area:'火灾救援',
+            checked:false,
+        },{
+            person:'张三，高光易，薛想',
+            area:'医疗救助',
+            checked:false,
+        },{
+            person:'张三，高光易，薛想',
+            area:'医疗组',
+            checked:false,
+        },
+    ]
+    tableDataVicinity = [
+        {
+            position:'人民广场东北方向…',
+            distance:'10',
+            name:'一号站',
+            checked:false,
+        },{
+            position:'人民广场西南方向…',
+            distance:'20',
+            name:'四号站',
+            checked:false,
+        },{
+            position:'人民广场西北方向…',
+            distance:'30',
+            name:'二号站',
+            checked:false,
+        },
+    ]
+    // 当前进度条
+    active = 1
+
+    get dataList(){
+        return this.$store.state.warningList
+    }
+
+    //下一步操作
+    nextStep(){
+        if (this.active<3){
+            this.active++
+        }
+        this.gotoNext()
+    }
+    @Emit('gotoNext')
+    gotoNext(){
+        //
+    }
+    changeLevel(type){
+        if (type === 'up'){
+            if (this.level === 1){
+                return
+            }
+            this.level--
+
+        }else if(type === 'down'){
+            if (this.level === 4){
+                return
+            }
+            this.level++
+        }
+        const nameList = {
+            1:'一级',
+            2:'二级',
+            3:'三级',
+            4:'四级',
+        }
+        this.levelName = nameList[this.level]
+        this.levelClass = `level-${this.level}`
+        this.cardText = `level-${this.level}-text`
+    }
+    setData(val,type){
+        if (type === 'typeName'){
+            const find = this.typeList.find(item=>item.id == val) as any
+            this.popObj.level = find.level
+            this.popObj.title = find.label
+            this.popObj.type = find.value
+        }
+        this.popObj[type] = val
+    }
+
+    //展示告警信息
+    showWaring(item){
+        const levelMap = {
+            1:'一级',
+            2:'二级',
+            3:'三级',
+        }
+        const levelClassMap = {
+            3:'blue',
+            2:'yellow',
+            1:'red',
+        }
+        this.getItem(Object.assign(item,{
+            type:'风险告警',
+            level:item.level,
+            levelClass:levelClassMap[item.level],
+            levelName:levelMap[item.level],
+            content:'监测数值异常',
+            time:'2023年1月20日  14:33:33',
+            equipment:'北区广场监测点',
+            tableHeader:[
+                {
+                    'prop':'alarmSubject',
+                    'label':'告警主体',
+                    'width':'90px',
+                }, {
+                    'prop':'COD',
+                    'label':'COD',
+                }, {
+                    'prop':'standard',
+                    'label':'标准值',
+                },
+            ],
+            tableData: [{
+                'alarmSubject': '排放量',
+                'COD': '456m<sup>3</sup>',
+                'standard': '466m<sup>3</sup>',
+            }, {
+                'alarmSubject': '排放浓度',
+                'COD': '2.6mg/L',
+                'standard': '2.5mg/L',
+            }, {
+                'alarmSubject': '排放时间',
+                'COD': '2023.3.31 05:03:45',
+                'standard': '8:00-22:00',
+            }, {
+                'alarmSubject': '排放浓度',
+                'COD': '2.6mg/L',
+                'standard': '2.5mg/L',
+            }, {
+                'alarmSubject': '排放时间',
+                'COD': '2023.3.31 05:03:45',
+                'standard': '8:00-22:00',
+            }]
+        }))
+    }
+    //点击告警信息
+    @Emit()
+    getItem(item) {
+        // console.log('item', item)
+    }
+
+    count = 1
+
+
+    mounted() {
+
+    }
+
+    destroyed() {
+
+    }
+
+    changeMore() {
+        console.log(1)
+    }
+
+    changeClose() {
+        console.log(1)
+    }
+    addManual(){
+        this.currentCompany = true
+    }
+    submitWaring(){
+        this.popObj.id = Mock.mock("@id");
+        if (this.popObj.type === 'normal'){
+            this.popObj.position=turf.randomPosition([
+                13312995.84,
+                4098177.2800000003,
+                13313096.96,
+                4098754.88,
+            ]);
+        }else if(this.popObj.type === 'fire'){
+            this.popObj.position= [13312990.72, 4098613.12, 0.51]
+        }
+        this.popObj.time = moment().subtract(0,"days").format("YYYY-MM-DD HH:mm:ss")
+
+        this.$store.commit("upDateWaringList",[this.popObj])
+        this.currentCompany=false
+    }
+    //点击点位
+    @Emit('changePoint')
+    changePoint(item) {
+        console.log(item)
+//
+    }
+}
+
diff --git a/src/components/smartEmergency/plan/right/chartData.js b/src/components/smartEmergency/plan/right/chartData.js
new file mode 100644
index 0000000..ae9ddae
--- /dev/null
+++ b/src/components/smartEmergency/plan/right/chartData.js
@@ -0,0 +1,112 @@
+
+export const lineChartData = function () {
+    return {
+        color:['#FADFA4','#947FEA'],
+        xAxis: {
+            type: 'category',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                interval: 0,//使x轴文字显示全
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+
+            data: ['1月','2月','3月','4月','5月']
+        },
+        legend: {
+            top: 'top',
+            itemGap: 30,
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                // 未单独设置样式的图例（即非上下标）
+                lineHeight: 12,
+                verticalAlign: "middle",
+                fontSize: 10,
+                color: "#fff"
+            },
+            data:[
+                {
+                    name:'应急事件',
+                    icon:'roundRect'
+                },{
+                    name:'应急演练',
+                    icon:'roundRect'
+                }
+            ]
+        },
+        yAxis: {
+            type: 'value',
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#999999',
+                    type: 'solid'
+                },
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#999999',
+                }
+            },
+        },
+        series: [
+            {
+                name:'应急事件',
+                data: [60,80,140,70,100],
+                type: 'line',
+                symbolSize: 4,
+                symbol: 'circle',
+                lineStyle: {
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            },{
+                name:'应急演练',
+                data: [50,70,130,60,90],
+                type: 'line',
+                symbolSize: 4,
+                symbol: 'circle',
+                lineStyle: {
+                    width: 2
+                },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
+                },
+            }
+        ],
+
+        tooltip: {
+            show: false,
+            alwaysShowContent: false,
+            trigger: 'item'
+        },
+        grid: {
+            x: 30,
+            y: 30,
+            x2: 12,
+            y2: 20,
+        }
+    }
+}
diff --git a/src/components/smartEmergency/plan/right/smartEmergencyPlanRight.component.html b/src/components/smartEmergency/plan/right/smartEmergencyPlanRight.component.html
new file mode 100644
index 0000000..4a86704
--- /dev/null
+++ b/src/components/smartEmergency/plan/right/smartEmergencyPlanRight.component.html
@@ -0,0 +1,85 @@
+<div class="env-right emergency-part">
+    <div class="box-content">
+        <div class="risk-box is-justify-space-around margin-top-0">
+            <div class="risk-item">
+                <div class="person-icon"></div>
+                <div>
+                    <p class="env-number-stlye">745</p>
+                    <p>区域内人数</p>
+                </div>
+            </div>
+            <div class="risk-item">
+                <div class="person-icon"></div>
+                <div>
+                    <p class="env-number-stlye">84</p>
+                    <p >区域内车辆</p>
+                </div>
+            </div>
+        </div>
+        <div class="radio-box">
+            <span :class="radioActive=== 1?'active':''" @click="changeRadio(1)">附近摄像头</span>
+            <span :class="radioActive=== 2?'active':''" @click="changeRadio(2)">移动摄像头</span>
+        </div>
+        <div class="plan-head">
+            <span class="span-item">摄像头名称</span>
+            <span class="span-item">类型</span>
+            <span class="span-item">距离 (m)</span>
+        </div>
+        <div class="plan-head-tbody">
+            <div class="tr" @click="openVideo(item)" :key="i" v-for="(item,i) in cameraList">
+                <span class="span-item">{{ item.name }}</span>
+                <span class="span-item">{{ item.type }}</span>
+                <span class="span-item">{{ item.distance }}</span>
+            </div>
+
+        </div>
+        <div class="group-title-plan-search">
+            <span>应急物资</span>
+            <el-input class="item-radius-style"  placeholder="请输入物资存放点" v-model="searchVal">
+                <i @click="seachData" slot="suffix" class="el-input__icon el-icon-search"></i>
+            </el-input>
+        </div>
+        <div class="plan-head">
+            <span class="span-item-3">物资存放点</span>
+            <span class="span-item-3">物资数量</span>
+            <span class="span-item-3">距离 (m)</span>
+        </div>
+        <div class="plan-head-tbody">
+            <div class="tr" :key="i" @click="focusGood(item)" v-for="(item,i) in goodsList.filter(data => !searchVal || data.position.toLowerCase().includes(searchVal.toLowerCase()))">
+                <span class="span-item-3">{{ item.position }}</span>
+                <span class="span-item-3">{{ item.num }}</span>
+                <span class="span-item-3">{{ item.distance }}</span>
+            </div>
+        </div>
+        <div class="plan-card">
+            <div class="border l-t"></div>
+            <div class="border r-t"></div>
+            <div class="border r-b"></div>
+            <div class="border l-b"></div>
+            <div class="short-report">事故事态简报</div>
+            <div class="short-report-line"></div>
+            <div class="short-card">
+                <div class="border l-t"></div>
+                <div class="border r-t"></div>
+                <div class="border r-b"></div>
+                <div class="border l-b"></div>
+                <div class="short-card-bg d-flex align-items-center is-justify-space-between">
+
+                    <span class="text d-flex align-items-center"><span class="cycle-icon orange"></span>
+                        <span>事故造成伤亡人员</span></span>
+                    <span class="count">暂无</span>
+                </div>
+            </div>
+            <el-timeline  class="margin-top-23">
+                <el-timeline-item
+                        :hide-timestamp="true"
+                        v-for="(activity, index) in activities"
+                        :key="index"
+                        :timestamp="activity.timestamp">
+                    {{activity.timestamp}} {{activity.content}}
+                </el-timeline-item>
+            </el-timeline>
+        </div>
+    </div>
+
+</div>
diff --git a/src/components/smartEmergency/plan/right/smartEmergencyPlanRight.component.ts b/src/components/smartEmergency/plan/right/smartEmergencyPlanRight.component.ts
new file mode 100644
index 0000000..1020ca8
--- /dev/null
+++ b/src/components/smartEmergency/plan/right/smartEmergencyPlanRight.component.ts
@@ -0,0 +1,300 @@
+import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
+import template from "./smartEmergencyPlanRight.component.html"
+import TitleComponent from "@/components/title.component.vue"
+import Mock from "mockjs"
+import * as turf from "@turf/turf";
+import moment from "moment";
+
+import("@/assets/style/pageCommon.component.scss")
+
+
+Component.registerHooks([
+    'beforeRouteLeave',
+]);
+@Component({
+    template,
+    components: {
+        TitleComponent,
+    },
+})
+export default class SmartEmergencyPlanRightComponent extends Vue {
+    //传入的报警信息详情
+    @Prop({
+        default: function () {
+            return {
+            }
+        }
+    }) info!: any;
+    //标题左侧图标
+    imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
+
+    currentCompany = false
+    popObj:any = {
+        popTitle:'报警记录',
+        type:'',
+        title: '风险点异常',
+        info: '',
+        time: '',
+        address:'',
+        level: '',
+        typeName:"",
+        reporter:"",
+        tel:"",
+        position:[],
+        content:"",
+        typeId:"",
+        id:''
+
+    }
+    typeList =[
+        {
+            label:'气体泄露',
+            value:'normal',
+            level:2,
+            id:1
+        },{
+            label:'火灾爆炸',
+            value:'fire',
+            level:1,
+            id:2
+        },{
+            label:'气液泄露',
+            value:'normal',
+            level:1,
+            id:3
+        },{
+            label:'安全事故',
+            value:'normal',
+            level:2,
+            id:4
+        },{
+            label:'自然灾害',
+            value:'normal',
+            level:3,
+            id:5
+        },
+    ]
+    levelClass = 'level-1';
+    levelName = '一级';
+    level=1;
+    cardText = 'level-1-text';
+
+    tableDataVicinity = [
+        {
+            position:'人民广场东北库',
+            distance:'10',
+            num:'99',
+            checked:false,
+        },{
+            position:'人民广场西南库',
+            distance:'20',
+            num:'69',
+            checked:false,
+        },{
+            position:'人民广场西北库',
+            distance:'30',
+            num:'169',
+            checked:false,
+        },
+    ]
+    activities = [{
+        content: '消防车到达3辆  ',
+        timestamp: '12：30：11'
+    }, {
+        content: '救援小组到达20人',
+        timestamp: '12：24：11'
+    }, {
+        content: '安保小组到达 40人',
+        timestamp: '12：20：11'
+    }]
+    searchVal = ''
+    // 当前进度条
+    active = 1
+    get dataList(){
+        return this.$store.state.warningList
+    }
+    //获取摄像头
+    get cameraList(){
+        const from = this.info.position;
+        const tempData = this.$store.state.cameraList.map((item,i)=>{
+            const to = item.position;
+            const distance = Math.floor(turf.distance(from, to, {units: 'meters'})/100000);
+            const temp = {
+                type:'简型摄像头',
+                distance,
+                name:`${i}号摄像头`,
+            }
+            return {...item,...temp}
+        })
+        return tempData.filter(item => item.distance <= 100).toSorted((a, b) => a.distance - b.distance)
+    }
+    //获取物资仓库
+    get goodsList(){
+        const from = this.info.position;
+        const tempData = this.$store.state.safeGoods.map((item,i)=>{
+            const to = item.position;
+            const distance = Math.floor(turf.distance(from, to, {units: 'meters'})/100000);
+            const findData = this. tableDataVicinity[i%3]
+
+            return {...item,...findData,distance}
+        })
+        return tempData.filter(item => item.distance <= 100).toSorted((a, b) => a.distance - b.distance)
+    }
+    radioActive = 1
+    changeRadio(type){
+        this.radioActive = type
+    }
+    seachData(){
+        console.log(this.searchVal)
+    }
+    //下一步操作
+    nextStep(){
+        if (this.active<3){
+            this.active++
+        }
+    }
+    changeLevel(type){
+        if (type === 'up'){
+            if (this.level === 1){
+                return
+            }
+            this.level--
+
+        }else if(type === 'down'){
+            if (this.level === 4){
+                return
+            }
+            this.level++
+        }
+        const nameList = {
+            1:'一级',
+            2:'二级',
+            3:'三级',
+            4:'四级',
+        }
+        this.levelName = nameList[this.level]
+        this.levelClass = `level-${this.level}`
+        this.cardText = `level-${this.level}-text`
+    }
+    setData(val,type){
+        if (type === 'typeName'){
+            const find = this.typeList.find(item=>item.id == val) as any
+            this.popObj.level = find.level
+            this.popObj.title = find.label
+            this.popObj.type = find.value
+        }
+        this.popObj[type] = val
+    }
+
+    //展示告警信息
+    showWaring(item){
+        const levelMap = {
+            1:'一级',
+            2:'二级',
+            3:'三级',
+        }
+        const levelClassMap = {
+            3:'blue',
+            2:'yellow',
+            1:'red',
+        }
+        this.getItem(Object.assign(item,{
+            type:'风险告警',
+            level:item.level,
+            levelClass:levelClassMap[item.level],
+            levelName:levelMap[item.level],
+            content:'监测数值异常',
+            time:'2023年1月20日  14:33:33',
+            equipment:'北区广场监测点',
+            tableHeader:[
+                {
+                    'prop':'alarmSubject',
+                    'label':'告警主体',
+                    'width':'90px',
+                }, {
+                    'prop':'COD',
+                    'label':'COD',
+                }, {
+                    'prop':'standard',
+                    'label':'标准值',
+                },
+            ],
+            tableData: [{
+                'alarmSubject': '排放量',
+                'COD': '456m<sup>3</sup>',
+                'standard': '466m<sup>3</sup>',
+            }, {
+                'alarmSubject': '排放浓度',
+                'COD': '2.6mg/L',
+                'standard': '2.5mg/L',
+            }, {
+                'alarmSubject': '排放时间',
+                'COD': '2023.3.31 05:03:45',
+                'standard': '8:00-22:00',
+            }, {
+                'alarmSubject': '排放浓度',
+                'COD': '2.6mg/L',
+                'standard': '2.5mg/L',
+            }, {
+                'alarmSubject': '排放时间',
+                'COD': '2023.3.31 05:03:45',
+                'standard': '8:00-22:00',
+            }]
+        }))
+    }
+    //点击告警信息
+    @Emit()
+    getItem(item) {
+        // console.log('item', item)
+    }
+    //打开视频
+    @Emit('openVideo')
+    openVideo(item) {
+        // console.log('item', item)
+    }
+    //打开视频
+    @Emit('focusGood')
+    focusGood(item) {
+        // console.log('item', item)
+    }
+
+    count = 1
+
+
+    mounted() {
+
+    }
+
+    destroyed() {
+
+    }
+
+    changeMore() {
+        console.log(1)
+    }
+
+    changeClose() {
+        console.log(1)
+    }
+    addManual(){
+        this.currentCompany = true
+    }
+    submitWaring(){
+        this.popObj.id = Mock.mock("@id");
+        if (this.popObj.type === 'normal'){
+            this.popObj.position=turf.randomPosition([
+                13312995.84,
+                4098177.2800000003,
+                13313096.96,
+                4098754.88,
+            ]);
+        }else if(this.popObj.type === 'fire'){
+            this.popObj.position= [13312990.72, 4098613.12, 0.51]
+        }
+        this.popObj.time = moment().subtract(0,"days").format("YYYY-MM-DD HH:mm:ss")
+
+        this.$store.commit("upDateWaringList",[this.popObj])
+        this.currentCompany=false
+    }
+}
+
diff --git a/src/components/title.component.vue b/src/components/title.component.vue
new file mode 100644
index 0000000..c039363
--- /dev/null
+++ b/src/components/title.component.vue
@@ -0,0 +1,112 @@
+<!--通用标题组件-->
+<template>
+  <div class="title">
+    <img :src="imgSrc" alt="">
+    <div class="title-text">
+      <slot></slot>
+      <div class="more" v-if="showMore" @click="changeMore">
+        <span>查看更多</span>
+        <i class="el-icon-caret-right"></i>
+      </div>
+      <div class="manual" v-if="showManual" @click="addManual">
+        <i class="el-icon-plus"></i>
+        <span>人工接警</span>
+      </div>
+      <div class="close" v-if="showClose" @click="changeClose">
+<!--        <span>关闭</span>-->
+        <i class="el-icon-close" title="关闭"></i>
+      </div>
+      <div class="close" v-if="showList" @click="showListData">
+        <span>缺失物资清单</span>
+        <i class="el-icon-caret-right" title="缺失物资清单"></i>
+      </div>
+    </div>
+  </div>
+
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
+
+@Component
+export default class TitleComponent extends Vue {
+  // 传入标题所需的图片
+  @Prop({default: require('@/assets/icons/png/env/env-title-icon.png')}) imgSrc!: string;
+  //查看更多显示隐藏控制
+  @Prop({default: false}) showMore!: boolean;
+  //关闭按钮显示隐藏
+  @Prop({default: false}) showClose!: boolean;
+  //人工接警按钮显示隐藏
+  @Prop({default: false}) showManual!: boolean;
+  //缺失物资清单
+  @Prop({default: false}) showList!: boolean;
+
+  @Emit()
+  changeMore(){
+    return this.showMore
+  }
+  @Emit()
+  changeClose(){
+    return this.showClose
+  }
+  @Emit('addManual')
+  addManual(){
+    return this.showManual
+  }
+  @Emit('showListData')
+  showListData(){
+    return this.showManual
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+.title {
+  display: flex;
+  flex: 0;
+
+  .title-text {
+    font-family: "logo", Sans-Serif, serif;
+    font-weight: 400;
+    font-size: 18px;
+    width: 295px;
+    text-indent: 20px;
+    background: url('~@/assets/icons/png/env/env-title-bg.png') no-repeat;
+    background-position: bottom;
+    position: relative;
+
+    div.more,div.close,div.manual {
+      position: absolute;
+      right: 10px;
+      top: 4px;
+      font-size: 12px;
+      display: inline-block;
+      cursor: pointer;
+      span{
+        position: relative;
+        left: 20px;
+      }
+      i{
+        width: 20px;
+      }
+    }
+    div.close{
+      span{
+
+        left: 18px;
+      }
+      .el-icon-close{
+        font-size: 24px;
+        position: relative;
+        left: -10px;
+        top: -3px;
+      }
+    }
+    div.manual{
+      right: 22px;
+    }
+    .el-icon-caret-right{
+      color: #FFFFFF;
+    }
+  }
+}
+</style>
diff --git a/src/components/warningDetail.component.vue b/src/components/warningDetail.component.vue
new file mode 100644
index 0000000..848c6f5
--- /dev/null
+++ b/src/components/warningDetail.component.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="info-content tb-style">
+    <div class="info-content-text">
+      <span class="label">告警类型：</span>
+      <span class="text">{{info.typeName}}</span>
+    </div>
+    <div class="info-content-text">
+      <span class="label">告警级别：</span>
+      <span class="text" :class="info.levelClass">{{info.levelName}}</span>
+      <i class="cycle-icon" :class="info.levelClass"></i>
+    </div>
+    <div class="info-content-text">
+      <span class="label">告警内容：</span>
+      <span class="text">{{info.content}}</span>
+    </div>
+    <div class="info-content-text">
+      <span class="label">告警时间：</span>
+      <span class="text">{{info.time}}</span>
+    </div>
+    <div class="info-content-text cursor-pointer">
+      <span class="label">告警设备：</span>
+      <span class="text">{{info.equipment}}</span>
+      <i @click="changePoint(info)" class="position-icon"></i>
+    </div>
+    <div @click="getHazardData" class="info-content-text cursor-pointer" v-if="info.linkDangerSource">
+      <span class="label">关联危险源：</span>
+      <span class="text blue">{{info.linkDangerSource}}</span>
+    </div>
+    <div v-if="info.tableData" class="info-content-text cursor-pointer">
+      <span class="label">数据详情：</span>
+    </div>
+    <el-table
+        v-if="info.tableData"
+        :data="info.tableData"
+        style="width: 100%"
+        border
+        class="tb-info-style"
+        header-row-class-name="table-head-style"
+        :row-class-name="tableRowClassName">
+      <el-table-column
+          :key="i"
+          v-for="(item,i) in info.tableHeader"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width"
+      >
+        <template slot-scope="scope">
+          <div class="font-size-12" v-html="scope.row[item.prop]"></div>
+        </template>
+      </el-table-column>
+
+    </el-table>
+    <el-button class="pop-btn-style margin-top-30" @click="deal">处理</el-button>
+  </div>
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
+
+@Component
+export default class WarningDetailComponent extends Vue {
+  //传入的报警信息详情
+  @Prop({default: []}) info!: any[];
+
+  //表格添加类
+  tableRowClassName({row, rowIndex}) {
+    if (rowIndex === 1) {
+      return 'blue-row';
+    }
+    if (rowIndex === 2) {
+      return 'yellow-row';
+    }
+    if (rowIndex === 3) {
+      return 'orange-row';
+    }
+    if (rowIndex === 4) {
+      return 'red-row';
+    }
+
+    return '';
+  }
+
+  //处理信息
+  @Emit()
+  deal() {
+
+  }
+  //点击点位信息
+  @Emit('changePoint')
+  changePoint(item) {
+
+  }
+  //点击点位信息
+  @Emit('getHazard')
+  getHazard(item) {
+
+  }
+  getHazardData(item){
+    this.getHazard(item)
+  }
+
+
+}
+</script>
+<style lang="scss" scoped>
+
+.font-size-12 {
+  font-size: 12px;
+}
+
+.tb-info-style {
+  margin-bottom: 20px;
+}
+
+</style>
diff --git a/src/components/warningList.component.vue b/src/components/warningList.component.vue
new file mode 100644
index 0000000..fa095b6
--- /dev/null
+++ b/src/components/warningList.component.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="warning-list scroll-list">
+    <div v-show="dataList.length>0" @click="getItem(item)" :key="i" v-for="(item,i) in dataList"
+         :class="[warningBgMap[item.level]]"
+         :data-index="i"
+         class="warning-list-box red-warning-bg animate__animated">
+      <div :data-index="i" class="warning-list-box-title">{{ item.title }}</div>
+      <div :data-index="i" class="warning-list-box-info">{{ item.info }}</div>
+      <div :data-index="i" class="warning-list-box-date">{{ item.time }}</div>
+    </div>
+    <div class="d-flex align-items-center is-justify-space-center" v-show="dataList.length === 0">
+      <i class="el-icon-warning-outline"></i><span>暂无数据</span>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
+
+@Component
+export default class WarningListComponent extends Vue {
+  //传入的报警信息列表
+  @Prop({default: []}) dataList!: any[];
+  //监听报警信息列表数据变化
+  @Watch('dataList', {immediate: false, deep: true})
+  onChangeValue(newVal: any, oldVal: any) {
+    if (newVal.length === oldVal.length) return
+    this.$nextTick(() => {
+      const dom: any = document.querySelector('.warning-list-box')
+      dom?.classList.remove('animate__fadeInLeft')
+      setTimeout(() => {
+        dom?.classList.add('animate__fadeInLeft')
+      },)
+      setTimeout(()=>{
+        dom?.classList.remove('animate__fadeInLeft')
+      },1000)
+    })
+  }
+  //2个对象数组对比获得差异项
+  getArrDifference(arr1, arr2) {
+    let e = arr1.filter(i => arr2.some(j => j.id === i.id))
+    let f = arr1.concat(arr2).filter(v => e.some(n => n.id !== v.id))
+    return f
+  }
+  //报警级别对应class
+  warningBgMap: any = {
+    '1': 'red-warning-bg',
+    '2': 'yellow-warning-bg',
+    '3': 'blue-warning-bg',
+  }
+  //监听点击事件
+  @Emit('getItem')
+  getItem(item) {
+    // console.log(item)
+    // return item
+  }
+  mounted() {
+/*    let dom = document.querySelector('div.warning-list') as any
+    const self = this as any
+    dom.addEventListener('click',function (e) {
+      console.log(e.target.dataset.index)
+      let i = e.target.dataset.index
+      console.log(self.dataList[i])
+      self.getItem(self.dataList[i])
+    })*/
+  }
+  // warning-list-box
+
+}
+</script>
+<style lang="scss" scoped>
+
+//滚动条样式
+@mixin scrollStyle($width) {
+  &::-webkit-scrollbar {
+    width: $width !important;
+    height: 100% !important;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    opacity: 0.2;
+    background: #ffffff;
+  }
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+    background: transparent;
+  }
+}
+
+.warning-list {
+  height: 100%;
+  overflow-y: auto;
+  @include scrollStyle(2px);
+
+  &-box {
+    width: 330px;
+    height: 90px;
+    padding: 10px 24px;
+    cursor: pointer;
+    margin-bottom: 10px;
+
+    &-title {
+      font-size: 14px;
+      color: #E8E8E8;
+
+    }
+
+    &-info {
+      font-size: 12px;
+      color: #E8E8E8;
+      margin: 8px 0;
+      width: 216px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &-date {
+      font-size: 12px;
+      color: #E8E8E8;
+    }
+  }
+
+  .red-warning-bg {
+    background: url("@/assets/img/red-warning-bg.png") no-repeat;
+  }
+
+  .yellow-warning-bg {
+    background: url("@/assets/img/yellow-warning-bg.png") no-repeat;
+  }
+
+  .blue-warning-bg {
+    background: url("@/assets/img/blue-warning-bg.png") no-repeat;
+  }
+}
+
+
+</style>
diff --git a/src/dataDemo/index b/src/dataDemo/index
new file mode 100644
index 0000000..7faabd8
--- /dev/null
+++ b/src/dataDemo/index
@@ -0,0 +1,15 @@
+//智慧化工园区总体介绍
+export const indexPageData = {
+    "parkIntroduction": '上海青浦工业园区是1995年11月25日，经上海市人民政府批准成立的九大市级工业开发区之一，目前规划面积56.2平方公里。园区不仅位于长三角"之"字型经济圈的交接处，是上海通往江苏、浙江两省的交汇点，而且也是长三角制造业产业带的中心，具有承东启西、东联西进产业带的枢纽作用和对长三角、华东地区的辐射作用。\n' +
+        '经过20多年的开发建设，上海青浦工业园区已经成为全区经济发展的重要增长极，2016年，园区的规模工业产值、就业人口和税收收入分别占全区的1/2、1/3和1/4; 已经成为全市投资环境最好的区域之一，世界500强和行业龙头企业纷纷在园区投资落户。目前，已形成了以德国海德堡为代表的印刷传媒产业，以日立电梯为代表的精密机械产业，以腾讯云计算为代表的电子信息产业，以高田汽配为代表的汽车零部件产业，以日本尤妮佳为代表的纺织新材料产业等主导产业格局。同时，一批研发中心、技术服务中心等与园区制造业相关的配套生产性服务业也初具雏形，综合配套能力不断提升，产城联动效应逐步显现。',
+    "menu": [
+        {menuName: '一园一档', path: '/front/oneGardenAndOneGear',imgName:'yyyd'},
+        {menuName: '一企一档', path: '/front/oneGearPerEnterprise',imgName:'yqyd'},
+        {menuName: '智慧安监', path: '/front/smartSafetySupervision',imgName:'zhaj'},
+        {menuName: '智慧环保', path: '/front/smartAndEnvironmentallyFriendly',imgName:'zhhb'},
+        {menuName: '智慧应急', path: '/front/smartEmergency',imgName:'zhyj'},
+        {menuName: '封闭园区', path: '/front/closedCampus',imgName:'fbyq'},
+        {menuName: '智慧能源', path: '/front/smartEnergy',imgName:'zhny'},
+        {menuName: '智慧管廊', path: '/',imgName:'zhgl'},
+    ]
+}
diff --git a/src/dataDemo/mockData.js b/src/dataDemo/mockData.js
new file mode 100644
index 0000000..5929f1e
--- /dev/null
+++ b/src/dataDemo/mockData.js
@@ -0,0 +1,1315 @@
+let Mock = require('mockjs')
+let dateFunction = function () {
+    let now = new Date(this.now);
+    now.setTime(now.getTime() + this.fromNowOn * 24 * 60 * 60 * 1000);
+    let sub = now;
+    let year = sub.getFullYear() < 10 ? '0' + sub.getFullYear() : sub.getFullYear();
+    let month = sub.getMonth() + 1 < 10 ? '0' + sub.getMonth() : sub.getMonth();
+    let day = sub.getDate() < 10 ? '0' + sub.getDate() : sub.getDate();
+    if (month == '00') {
+        month = '12'
+        year = year - 1
+    }
+    return month + '-' + day;
+}
+let dateTimeFunction = function () {
+    let now = new Date(this.now);
+    now.setTime(now.getTime() + this.fromNowOn * 24 * 60 * 60 * 1000);
+    let sub = now;
+    let year = sub.getFullYear() < 10 ? '0' + sub.getFullYear() : sub.getFullYear();
+    let month = sub.getMonth() + 1 < 10 ? '0' + sub.getMonth() : sub.getMonth();
+    let day = sub.getDate() < 10 ? '0' + sub.getDate() : sub.getDate();
+    let HH = sub.getHours() < 10 ? '0' + sub.getHours() : sub.getHours();
+    let mm = sub.getMinutes() < 10 ? '0' + sub.getMinutes() : sub.getMinutes();
+    let ss = sub.getSeconds() < 10 ? '0' + sub.getSeconds() : sub.getSeconds();
+    if (month == '00') {
+        month = '12'
+        year = year - 1
+    }
+    return year + '-' + month + '-' + day + ' ' + HH + ':' + mm + ':' + ss;
+}
+let dateFunctionHour = function () {
+    let now = new Date(this.now);
+    now.setTime(now.getTime() + this.fromNowOn * 60 * 60 * 1000);
+    let sub = now;
+    let HH = sub.getHours() < 10 ? '0' + sub.getHours() : sub.getHours();
+    let mm = sub.getMinutes() < 10 ? '0' + sub.getMinutes() : sub.getMinutes();
+    let ss = sub.getSeconds() < 10 ? '0' + sub.getSeconds() : sub.getSeconds();
+    return HH + ':' + mm ;
+}
+export let data1 = Mock.mock({
+    'data|30': [
+        {
+            "value|1-500": 1,
+            'now|+1': '@now("yyyy-MM-dd")',
+            'fromNowOn|+1': 31,
+            'date': dateFunction
+        }
+    ]
+})
+
+export let data2 = Mock.mock({
+    'data|30': [
+        {
+            "value|15-100": 1,
+            'now|+1': '@now("yyyy-MM-dd HH:mm:ss")',
+            'fromNowOn|+1': 31,
+            'date': dateFunctionHour
+        }
+    ]
+})
+
+export let data5 = Mock.mock({
+    'data|30': [
+        {
+            "value|25-200": 1,
+            'now|+1': '@now("yyyy-MM-dd HH:mm:ss")',
+            'fromNowOn|+1': 31,
+            'date': dateFunctionHour
+        }
+    ]
+})
+
+export const dataSep = Mock.mock({
+    'data|10': [{
+        'data|30':
+            [{
+                "value|15-100": 1,
+                'now|+1': '@now("yyyy-MM-dd HH:mm:ss")',
+                'fromNowOn|+1': -31,
+                'date': dateFunctionHour
+            }]
+    }]
+})
+
+export const yearData = {
+    "CO": "22",
+    "O3": "34",
+    "SO2": "11",
+    "NO2": "24",
+    "PM2.5": "15",
+    "PM10": "40",
+}
+// 指标：甲醛、甲醇、CL2、NO、HF、HCL\HCN\BR2\C4H80\C3H5CLO\MACHS\HBR\C3H3N\乙醇
+export const yearData1 = {
+    "甲醛": "21",
+    "甲醇": "14",
+    "CL2": "18",
+    "HF": "32",
+    "CO": "22",
+    "NO": "10",
+    "HCL": "42",
+    "HCN": "31",
+    "BR2": "21",
+    "C4H80": "33",
+    // "C3H5CLO": "10",
+    "MACHS": "25",
+    "HBR": "13",
+    "C3H3N": "41",
+    "乙醇": "15",
+}
+//特征污染物指标卡
+export const sepCardData = {
+    "甲醛": "21",
+    "甲醇": "14",
+    "CL2": "18",
+    "HF": "32",
+    "BR2": "22",
+    "NO": "10",
+    "HCL": "42",
+    "HCN": "31",
+    // "BR2": "21",
+    // "C4H80": "33",
+    // "C3H5CLO": "10",
+    // "MACHS": "25",
+    // "HBR": "13",
+    // "C3H3N": "41",
+    // "乙醇": "15",
+}
+// 指标：COD\PH、溶解氧、高锰酸钾、生化需氧量、氨氮挥发酚、汞、铅、石油
+export const yearData2 = {
+    "COD": "21",
+    "PH": "14",
+    "溶解酶": "18",
+    "高锰酸钾": "32",
+    "生化需氧量": "22",
+    "氨氮": "10",
+    "挥发酚": "42",
+    "汞": "14",
+    "铅": "21",
+    "石油": "17",
+}
+// 指标：多环芳烃\VOC\SVOC\PH\镉\汞\砷\铅
+export const yearData3 = {
+    "多环芳烃": "21",
+    "VOC": "14",
+    "SVOC": "18",
+    "PH": "32",
+    "镉": "22",
+    "汞": "10",
+    "铅": "42",
+    "砷": "21",
+}
+export const data3 = {
+    "data": [
+        {type: 'PH',name:'PH', value: ""},
+        {type: 'PAHs',name: 'PAHs', value: "0"},
+        {type: 'SVOC',name: 'SVOC', value: "0"},
+        {type: 'VOC', name: 'VOC', value: "30"},
+        {type: '镉',name: '镉', value: "60"},
+        {type: '汞',name: '汞', value: "20"},
+        {type: '砷',name: '砷', value: "20"},
+        {type: '铅',name: '铅', value: "20"},
+    ]
+}
+export const data3ForAir = {
+    "data": [
+        {type: 'CO',name:'CO', value: ""},
+        {type: 'O3',name: 'O3', value: "0"},
+        {type: 'SO2',name: 'SO2', value: "0"},
+        {type: 'NO2', name: 'NO2', value: "30"},
+        {type: 'PM2.5',name: 'PM2.5', value: "60"},
+        {type: 'PM10',name: 'PM10', value: "20"}
+    ]
+}
+export const data3ForSpecial = {
+    "data": [
+        {type: '甲醛',name:'甲醛', value: ""},
+        {type: '甲醇',name: '甲醇', value: "0"},
+        {type: '氯气',name: '氯气', value: "0"},
+        {type: 'NO', name: 'NO', value: "30"},
+        {type: 'HF',name: 'HF', value: "60"},
+        {type: 'HCL',name: 'HCL', value: "20"},
+        {type: '苯系物',name: '苯系物', value: "20"},
+        {type: '乙醇',name: '乙醇', value: "20"},
+    ]
+}
+export const data3ForWater = {
+    "data": [
+        {type: 'COD',name:'COD', value: ""},
+        {type: 'PH',name: 'PH', value: "0"},
+        {type: '溶解氧',name: '溶解氧', value: "0"},
+        {type: 'KMnO4', name: 'KMnO4', value: "30"},
+        {type: '氨氮',name: '氨氮', value: "60"},
+        {type: '汞',name: '汞', value: "20"},
+        {type: 'BOD5',name: 'BOD5', value: "20"},
+        {type: '铅',name: '铅', value: "20"},
+        {type: '挥发酚',name: '挥发酚', value: "20"},
+        {type: '石油',name: '石油', value: "20"},
+    ]
+}
+
+export const top10 = {
+    "data": [
+        {type: '2号区3号库AAA监测点', value: 76},
+        {type: '2号区3号库BBB监测点', value: 50},
+        {type: '2号区3号库CCC监测点', value: 40},
+        {type: '2号区3号库DDD监测点', value: 30},
+        {type: '2号区3号库EEE监测点', value: 20},
+    ]
+}
+export const airDetail = {
+    "data": [
+        {type: '当前AQI值', value: "20", level: '优', class: 'greenTxt'},
+        {type: '当前CO值', value: "25", level: '优', class: 'greenTxt'},
+        {type: '当前O3值', value: "40", level: '良', class: 'yellowTxt'},
+        {type: '当前SO2值', value: "40", level: '良', class: 'yellowTxt'},
+        {type: '当前NO2值', value: "80", level: '严重', class: 'redTxt'},
+        {type: '当前PM2.5值', value: "20", level: '优', class: 'greenTxt'},
+        {type: '当前PM10值', value: "60", level: '中度', class: 'purpleTxt'},
+    ]
+}
+
+export const waterDetail = {
+    "data": [
+        {type: '当前COD值', value: "20", level: '优', class: 'greenTxt'},
+        {type: '当前PH值', value: "25", level: '优', class: 'greenTxt'},
+        {type: '当前溶解氧值', value: "40", level: '良', class: 'yellowTxt'},
+        {type: '当前高锰酸钾值', value: "40", level: '良', class: 'yellowTxt'},
+        {type: '当前生化需氧量值', value: "80", level: '严重', class: 'redTxt'},
+        {type: '当前汞值', value: "20", level: '优', class: 'greenTxt'},
+        {type: '当前氨氮值', value: "60", level: '中度', class: 'purpleTxt'},
+        {type: '当前挥发酚值', value: "20", level: '优', class: 'greenTxt'},
+        {type: '当前铅值', value: "25", level: '优', class: 'greenTxt'},
+        {type: '当前石油值', value: "40", level: '良', class: 'yellowTxt'},
+    ]
+}
+
+export const soilDetail = {
+    "data": [
+        {type: '最新PH值', value: "20", level: '优', class: 'greenTxt'},
+        {type: '最新多环芳烃值', value: "25", level: '优', class: 'greenTxt'},
+        {type: '最新SVOC值', value: "40", level: '良', class: 'yellowTxt'},
+        {type: '最新VOC值', value: "40", level: '良', class: 'yellowTxt'},
+        {type: '最新镉值', value: "80", level: '严重', class: 'redTxt'},
+        {type: '最新汞值', value: "20", level: '优', class: 'greenTxt'},
+        {type: '最新砷值', value: "60", level: '中度', class: 'purpleTxt'},
+        {type: '最新铅值', value: "20", level: '优', class: 'greenTxt'},
+    ]
+}
+//特征污染物数据
+export const characterDetail = {
+    "data": [
+        {type: '当前甲醛值', value: "20", level: '优', class: 'greenTxt'},
+        {type: '当前甲醇值', value: "25", level: '优', class: 'greenTxt'},
+        {type: '当前CL2值', value: "40", level: '良', class: 'yellowTxt'},
+        {type: '当前NO值', value: "40", level: '良', class: 'yellowTxt'},
+        {type: '当前HF值', value: "80", level: '严重', class: 'redTxt'},
+        {type: '当前HCL值', value: "20", level: '优', class: 'greenTxt'},
+        {type: '当前HCN值', value: "60", level: '中度', class: 'purpleTxt'},
+        {type: '当前BR2值', value: "20", level: '优', class: 'greenTxt'},
+        /*{type: '当前C4H80值', value: "20",level:'优',class:'greenTxt'},
+        {type: '当前C3H5CLO值', value: "20",level:'优',class:'greenTxt'},
+        {type: '当前MACHS值', value: "20",level:'优',class:'greenTxt'},
+        {type: '当前HBR值', value: "20",level:'优',class:'greenTxt'},
+        {type: '当前C3H3N值', value: "20",level:'优',class:'greenTxt'},
+        {type: '当前乙醇值', value: "20",level:'优',class:'greenTxt'},*/
+    ]
+}
+export let dataForDay = Mock.mock({
+    'data|6': [{
+        'dataList|30': [
+            {
+                "value|1-500": 1,
+                'now|+1': '@now("yyyy-MM-dd")',
+                'fromNowOn|+1': -31,
+                'date': dateFunction
+            }
+        ],
+        'type': 'line',
+        "name|+1": [
+            "CO",
+            "O3",
+            "SO2",
+            "NO2",
+            "PM2.5",
+            "PM10",
+        ]
+    }]
+})
+
+export let dataForHour = Mock.mock({
+    'data|6': [{
+        'dataList|30': [
+            {
+                "value|20-50": 1,
+                'now|+1': '@now("yyyy-MM-dd HH:mm:ss")',
+                'fromNowOn|+1': -31,
+                'date': dateFunctionHour
+            }
+        ],
+        'type': 'line',
+        'smooth':true,
+        'label': {
+            'show': true,
+            'position':'top',
+            'color':'#ffffff',
+            'borderWidth':0
+        },
+        "name|+1": [
+            "CO",
+            "O3",
+            "SO2",
+            "NO2",
+            "PM2.5",
+            "PM10",
+        ]
+    }]
+
+})
+export let dataForSoilDay = Mock.mock({
+    'data|8': [{
+        'dataList|30': [
+            {
+                "value|1-500": 1,
+                'now|+1': '@now("yyyy-MM-dd")',
+                'fromNowOn|+1': -31,
+                'date': dateFunction
+            }
+        ],
+        'type': 'line',
+        'smooth':true,
+        'label': {
+            'show': true,
+            'position':'top',
+            'color':'#ffffff',
+            'borderWidth':0
+        },
+        "name|+1": [
+            "PH",
+            "PAHs",
+            "SVOC",
+            "VOC",
+            "镉",
+            "汞",
+            "砷",
+            "铅",
+        ]
+    }]
+})
+
+export let dataForSoilHour = Mock.mock({
+    'data|8': [{
+        'dataList|30': [
+            {
+                "value|10-50": 1,
+                'now|+1': '@now("yyyy-MM-dd HH:mm:ss")',
+                'fromNowOn|+1': -31,
+                'date': dateFunctionHour
+            }
+        ],
+        'type': 'line',
+        'smooth':true,
+        'label': {
+            'show': true,
+            'position':'top',
+            'color':'#ffffff',
+            'borderWidth':0
+        },
+        "name|+1": [
+            "PH",
+            "PAHs",
+            "SVOC",
+            "VOC",
+            "镉",
+            "汞",
+            "砷",
+            "铅",
+        ]
+    }]
+
+})
+export let dataForSpecialDay = Mock.mock({
+    'data|8': [{
+        'dataList|30': [
+            {
+                "value|1-500": 1,
+                'now|+1': '@now("yyyy-MM-dd")',
+                'fromNowOn|+1': -31,
+                'date': dateFunction
+            }
+        ],
+        'type': 'line',
+        'smooth':true,
+        'label': {
+            'show': true,
+            'position':'top',
+            'color':'#ffffff',
+            'borderWidth':0
+        },
+        "name|+1": [
+            "甲醛",
+            "甲醇",
+            "氯气",
+            "NO",
+            "HF",
+            "HCL",
+            "苯系物",
+            "乙醇",
+        ]
+    }]
+})
+
+export let dataForSpecialHour = Mock.mock({
+    'data|8': [{
+        'dataList|30': [
+            {
+                "value|10-50": 1,
+                'now|+1': '@now("yyyy-MM-dd HH:mm:ss")',
+                'fromNowOn|+1': -31,
+                'date': dateFunctionHour
+            }
+        ],
+        'type': 'line',
+        'smooth':true,
+        'label': {
+            'show': true,
+            'position':'top',
+            'color':'#ffffff',
+            'borderWidth':0
+        },
+        "name|+1": [
+            "甲醛",
+            "甲醇",
+            "氯气",
+            "NO",
+            "HF",
+            "HCL",
+            "苯系物",
+            "乙醇",
+        ]
+    }]
+
+})
+export let dataForWaterDay = Mock.mock({
+    'data|10': [{
+        'dataList|30': [
+            {
+                "value|1-500": 1,
+                'now|+1': '@now("yyyy-MM-dd")',
+                'fromNowOn|+1': -31,
+                'date': dateFunction
+            }
+        ],
+        'type': 'line',
+        'smooth':true,
+        'label': {
+            'show': true,
+            'position':'top',
+            'color':'#ffffff',
+            'borderWidth':0
+        },
+        "name|+1": [
+            'COD',
+            'PH',
+            '溶解氧',
+            'KMnO4',
+            '氨氮',
+            '汞',
+            'BOD5',
+            '铅',
+            '挥发酚',
+            '石油'
+        ]
+    }]
+})
+
+export let dataForWaterHour = Mock.mock({
+    'data|10': [{
+        'dataList|30': [
+            {
+                "value|10-50": 1,
+                'now|+1': '@now("yyyy-MM-dd HH:mm:ss")',
+                'fromNowOn|+1': -31,
+                'date': dateFunctionHour
+            }
+        ],
+        'type': 'line',
+        'smooth':true,
+        'label': {
+            'show': true,
+            'position':'top',
+            'color':'#ffffff',
+            'borderWidth':0
+        },
+        "name|+1": [
+            'COD',
+            'PH',
+            '溶解氧',
+            'KMnO4',
+            '氨氮',
+            '汞',
+            'BOD5',
+            '铅',
+            '挥发酚',
+            '石油'
+        ]
+    }]
+
+})
+
+export let dataForHour1 = Mock.mock({
+    'data|8': [{
+        'data|6': [{
+            'dataList|30': [
+                {
+                    "value|1-100": 1,
+                    'now|+1': '@now("yyyy-MM-dd HH:mm:ss")',
+                    'fromNowOn|+1': -31,
+                    'date': dateFunctionHour
+                }
+            ],
+            'type': 'line',
+            "name|+1": [
+                "CO",
+                "O3",
+                "SO2",
+                "NO2",
+                "PM2.5",
+                "PM10",
+            ]
+        }]
+    }]
+})
+
+export let dataForBar = Mock.mock({
+    'data|8': [{
+        'data|6': [{
+            "value|1-100": 1,
+            "type|+1": [
+                "CO",
+                "O3",
+                "SO2",
+                "NO2",
+                "PM2.5",
+                "PM10",
+            ]
+        }]
+    }]
+})
+
+// 图例：COD\PH、溶解氧、高锰酸钾、生化需氧量、氨氮挥发酚、汞、铅、石油
+export let dataForWaterLineHour = Mock.mock({
+    'data|9': [{
+        'dataList|30': [
+            {
+                "value|1-100": 1,
+                'now|+1': '@now("yyyy-MM-dd HH:mm:ss")',
+                'fromNowOn|+1': -31,
+                'date': dateFunctionHour
+            }
+        ],
+        'type': 'line',
+        "name|+1": [
+            "COD",
+            "PH",
+            "溶解氧",
+            "高锰酸钾",
+            "生化需氧量",
+            "氨氮挥发酚",
+            "汞",
+            "铅",
+            "石油",
+        ]
+    }]
+})
+
+export const dataForWaterLineHour1 = Mock.mock({
+    'data|9': [
+        {
+            'data|9':
+                [{
+                    'dataList|30': [
+                        {
+                            "value|1-100": 1,
+                            'now|+1': '@now("yyyy-MM-dd HH:mm:ss")',
+                            'fromNowOn|+1': -31,
+                            'date': dateFunctionHour
+                        }
+                    ],
+                    'type': 'line',
+                    "name|+1": [
+                        "COD",
+                        "PH",
+                        "溶解氧",
+                        "高锰酸钾",
+                        "生化需氧量",
+                        "氨氮挥发酚",
+                        "汞",
+                        "铅",
+                        "石油",
+                    ]
+                }]
+        }]
+})
+
+export let dataForWaterLineDay = Mock.mock({
+    'data|9': [{
+        'dataList|30': [
+            {
+                "value|1-500": 1,
+                'now|+1': '@now("yyyy-MM-dd")',
+                'fromNowOn|+1': -31,
+                'date': dateFunction
+            }
+        ],
+        'type': 'line',
+        "name|+1": [
+            "COD",
+            "PH",
+            "溶解氧",
+            "高锰酸钾",
+            "生化需氧量",
+            "氨氮挥发酚",
+            "汞",
+            "铅",
+            "石油",
+        ]
+    }]
+})
+const colorMap = {
+    "COD": "cod",
+    "PH": "ph",
+    "溶解氧": "rjy",
+    "KMnO4": "gmsj",
+    "BOD5": "shxyl",
+    "氨氮": "ad",
+    "挥发酚": "hff",
+    "汞": "hg",
+    "铅": "pb",
+    "石油": "oil",
+}
+export const dataForWaterBar = Mock.mock({
+    "data|10": [
+        {
+            "type|+1": [
+                "COD",
+                "PH",
+                "溶解氧",
+                "KMnO4",
+                "BOD5",
+                "氨氮",
+                "挥发酚",
+                "汞",
+                "铅",
+                "石油",
+            ],
+            "name|+1": [
+                "COD",
+                "PH",
+                "溶解氧",
+                "KMnO4",
+                "BOD5",
+                "氨氮",
+                "挥发酚",
+                "汞",
+                "铅",
+                "石油",
+            ],
+            "value|1-100": 1,
+            "value1": function () {
+                return 100 - this.value * 1
+            },
+            "color": function () {
+                return colorMap[this.name]
+            },
+        }
+
+    ]
+})
+export const dataForWaterBar1 = Mock.mock({
+    "data|9": [{
+        "data|9":
+            [{
+                "type|+1": [
+                    "COD",
+                    "PH",
+                    "溶解氧",
+                    "高锰酸钾",
+                    "生化需氧量",
+                    "氨氮",
+                    "挥发酚",
+                    "汞",
+                    "铅",
+                    "石油",
+                ],
+                "name|+1": [
+                    "COD",
+                    "PH",
+                    "溶解氧",
+                    "高锰酸钾",
+                    "生化需氧量",
+                    "氨氮",
+                    "挥发酚",
+                    "汞",
+                    "铅",
+                    "石油",
+                ],
+                "value|1-100": 1,
+                "value1": function () {
+                    return 100 - this.value * 1
+                },
+                "color": function () {
+                    return colorMap[this.name]
+                },
+            }]
+
+    }]
+})
+
+export const airPointData = Mock.mock({
+    "data|9": [
+        {
+            'now|+1': '@now("yyyy-MM-dd HH:mm:ss")',
+            'fromNowOn': -31,
+            'date': dateTimeFunction,
+            'subAttr': '当前AQI',
+            'subValue|15-80': 1,
+            'attrList': {
+                "当前CO值|15-80": 1,
+                "当前O3值|15-80": 1,
+                "当前SO2值|15-80": 1,
+                "当前NO2值|15-80": 1,
+                "当前PM2.5值|15-80": 1,
+                "当前PM10值|15-80": 1,
+            }
+        }
+    ]
+})
+export const waterPointData = Mock.mock({
+    "data|9": [
+        {
+            'now|+1': '@now("yyyy-MM-dd HH:mm:ss")',
+            'fromNowOn': -31,
+            'date': dateTimeFunction,
+            'subAttr': '水体污染指数',
+            'subValue|15-80': 1,
+            'attrList': {
+                "当前COD值|15-80": 1,
+                "当前PH值|15-80": 1,
+                "当前溶解氧值|15-80": 1,
+                "当前高锰酸钾值|15-80": 1,
+                "当前生化需氧量值|15-80": 1,
+                "当前汞值|15-80": 1,
+                "当前氨氮值|15-80": 1,
+                "当前挥发酚值|15-80": 1,
+                "当前铅值|15-80": 1,
+                "当前石油值|15-80": 1,
+            }
+        }
+    ]
+})
+export const soilPointData = Mock.mock({
+    "data|9": [
+        {
+            'now|+1': '@now("yyyy-MM-dd HH:mm:ss")',
+            'fromNowOn': -31,
+            'date': dateTimeFunction,
+            'subAttr': 'CPI指数',
+            'subValue|15-80': 1,
+            'attrList': {
+                "最新PH值|15-80": 1,
+                "最新多环芳烃值|15-80": 1,
+                "最新SVOC值|15-80": 1,
+                "最新VOC值|15-80": 1,
+                "最新镉值|15-80": 1,
+                "最新汞值|15-80": 1,
+                "最新砷值|15-80": 1,
+                "最新铅值|15-80": 1
+            }
+        }
+    ]
+})
+export const sepPointData = Mock.mock({
+    "data|9": [
+        {
+            'now|+1': '@now("yyyy-MM-dd HH:mm:ss")',
+            'fromNowOn': -31,
+            'date': dateTimeFunction,
+            'subAttr': '特征污染物',
+            'subValue': '未超标',
+            'attrList': {
+                "当前甲醛值|15-80": 1,
+                "当前甲醇值|15-80": 1,
+                "当前CL2值|15-80": 1,
+                "当前NO值|15-80": 1,
+                "当前HF值|15-80": 1,
+                "当前HCL值|15-80": 1,
+                "当前HCN值|15-80": 1,
+                "当前BR2值|15-80": 1
+            }
+        }
+    ]
+})
+
+
+// 图例：COD\PH、溶解氧、高锰酸钾、生化需氧量、氨氮挥发酚、汞、铅、石油
+export let sepLineHour = Mock.mock({
+    'data|8': [{
+        'dataList|30': [
+            {
+                "value|1-100": 1,
+                'now|+1': '@now("yyyy-MM-dd HH:mm:ss")',
+                'fromNowOn|+1': -31,
+                'date': dateFunctionHour
+            }
+        ],
+        'type': 'line',
+        "name|+1": [
+            "甲醛",
+            "甲醇",
+            "CL2",
+            "HF",
+            "BR2",
+            "NO",
+            "HCL",
+            "HCN"
+        ]
+    }]
+})
+export let sepLineHour1 = Mock.mock({
+    'data|8': [{
+        'data|8': [{
+            'dataList|30': [
+                {
+                    "value|1-100": 1,
+                    'now|+1': '@now("yyyy-MM-dd HH:mm:ss")',
+                    'fromNowOn|+1': -31,
+                    'date': dateFunctionHour
+                }
+            ],
+            'type': 'line',
+            "name|+1": [
+                "甲醛",
+                "甲醇",
+                "CL2",
+                "HF",
+                "BR2",
+                "NO",
+                "HCL",
+                "HCN"
+            ]
+        }]
+    }]
+})
+export let sepLineDay = Mock.mock({
+    'data|8': [{
+        'dataList|30': [
+            {
+                "value|1-500": 1,
+                'now|+1': '@now("yyyy-MM-dd")',
+                'fromNowOn|+1': -31,
+                'date': dateFunction
+            }
+        ],
+        'type': 'line',
+        "name|+1": [
+            "甲醛",
+            "甲醇",
+            "CL2",
+            "HF",
+            "BR2",
+            "NO",
+            "HCL",
+            "HCN"
+        ]
+    }]
+})
+
+
+//特征污染物柱状图
+export const data4 = Mock.mock({
+    'data|8': [{
+        "value|1-100": 1,
+        "type|+1": [
+            "甲醛",
+            "甲醇",
+            "CL2",
+            "HF",
+            "BR2",
+            "NO",
+            "HCL",
+            "HCN"
+        ]
+    }]
+})
+//特征污染物柱状图
+export const dataSepBar = Mock.mock({
+    'data|8': [{
+        'data|8': [{
+            "value|1-100": 1,
+            "type|+1": [
+                "甲醛",
+                "甲醇",
+                "CL2",
+                "HF",
+                "BR2",
+                "NO",
+                "HCL",
+                "HCN"
+            ]
+        }]
+    }]
+})
+//污染源随机数据池
+export const radomPool = Mock.mock({
+    'data|8': [{
+        'dataList|30': [
+            {
+                "value|20-90": 1,
+
+            }
+        ]
+    }
+    ]
+})
+
+//污染源日均数据
+export let pollutionLineDay = Mock.mock({
+    'data|8': [{
+        'dataList|30': [
+            {
+                "value|20-90": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+//智慧能源超限统计
+export let overrunData = Mock.mock({
+    'data|8': [{
+        'dataList|12': [
+            {
+                "value|0-20": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+
+//智慧能源用水日统计
+export let waterDailyData = Mock.mock({
+    'data|8': [{
+        'dataList|30': [
+            {
+                "value|300-800": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+//智慧能源抄水表
+export let waterDataDaily = Mock.mock({
+    'data|20': [{
+        'dataList|20': [
+            {
+                "value|300-800.0-2": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+//智慧能源节水目标
+export let waterConservation = Mock.mock({
+    'data|8': [
+        {
+            "value|300-500": 1,
+        }
+    ],
+    'type': 'line',
+
+})
+
+//智慧能源抄电表
+export let electricityDataDaily = Mock.mock({
+    'data|20': [{
+        'dataList|20': [
+            {
+                "value|10000-40000.0-1": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+//智慧能源减排目标
+export let conservationTarget = Mock.mock({
+    'data|20': [
+        {
+            "value|100-150": 1,
+        }
+    ],
+    'type': 'line',
+
+})
+
+//智慧能源抄电表
+export let conservationAnalysis = Mock.mock({
+    'data|8': [{
+        'dataList|13': [
+            {
+                "value|200-300": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+//智慧能源抄燃气表
+export let gasDataDaily = Mock.mock({
+    'data|20': [{
+        'dataList|20': [
+            {
+                "value|40-4000.0-2": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+//智慧能源抄蒸汽表
+export let steamDataDaily = Mock.mock({
+    'data|20': [{
+        'dataList|20': [
+            {
+                "value|40-100.0-2": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+//智慧能源用水月统计
+export let waterMonthlyData = Mock.mock({
+    'data|8': [{
+        'dataList|12': [
+            {
+                "value|900-24000": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+//智慧能源用电日统计
+export let electricityDailyData = Mock.mock({
+    'data|8': [{
+        'dataList|30': [
+            {
+                "value|1-4": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+//智慧能源用电月统计
+export let electricityMonthlyData = Mock.mock({
+    'data|8': [{
+        'dataList|12': [
+            {
+                "value|30-120": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+//智慧能源用电量
+export let electricityUsedData = Mock.mock({
+    'data|8': [{
+        'dataList|13': [
+            {
+                "value|1-4": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+
+//智慧能源用燃气日统计
+export let gasDailyData = Mock.mock({
+    'data|8': [{
+        'dataList|30': [
+            {
+                "value|40-4000": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+//智慧能源用燃气月统计
+export let gasMonthlyData = Mock.mock({
+    'data|8': [{
+        'dataList|12': [
+            {
+                "value|1200-120000": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+//智慧能源首页用燃气园区日统计
+export let gasDailyIndexData = Mock.mock({
+    'data|8': [{
+        'dataList|12': [
+            {
+                "value|4000-5000": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+//智慧能源首页用燃气园月日统计
+export let gasMonthlyIndexData = Mock.mock({
+    'data|8': [{
+        'dataList|12': [
+            {
+                "value|12-15": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+//智慧能源用蒸汽日统计
+export let steamDailyData = Mock.mock({
+    'data|20': [{
+        'dataList|30': [
+            {
+                "value|40-100": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+//智慧能源用蒸汽月统计
+export let steamMonthlyData = Mock.mock({
+    'data|20': [{
+        'dataList|12': [
+            {
+                "value|1200-3000": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+//智慧能源首页用蒸汽园区日统计
+export let steamDailyIndexData = Mock.mock({
+    'data|20': [{
+        'dataList|30': [
+            {
+                "value|200-300": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+//智慧能源首页用蒸汽园区月统计
+export let steamMonthlyIndexData = Mock.mock({
+    'data|20': [{
+        'dataList|12': [
+            {
+                "value|6000-9000": 1,
+            }
+        ],
+        'type': 'line',
+    }]
+})
+
+
+//生成30日
+export let getDay30 = Mock.mock({
+    'data': [{
+        'date': function () {
+            let category = [];
+            let dottedBase = +new Date();
+            for (let i = 0; i < 32; i++) {
+                let sub = new Date((dottedBase += 1000 * 3600 * 24));
+                let year = sub.getFullYear() < 10 ? '0' + sub.getFullYear() : sub.getFullYear();
+                let month = sub.getMonth() + 1 < 10 ? '0' + (sub.getMonth() + 1) : (sub.getMonth() + 1);
+                let day = sub.getDate() < 10 ? '0' + sub.getDate() : sub.getDate();
+                if (month == '00') {
+                    month = '12'
+                    year = year - 1
+                }
+                category.push([month, day].join("-"));
+
+            }
+            return category;
+
+        }
+
+    }]
+
+})
+
+
+export let dataForGas1 = Mock.mock({
+    'data|2': [{
+        'data|6': [
+            {
+                "value|30-200": 1,
+                'now|+1': '@now("yyyy-MM-dd")',
+                'fromNowOn|+1': -31,
+                'date': dateFunction
+            }
+        ],
+        'type': 'line',
+        'smooth': true,
+        "name|+1": [
+            "COD",
+            "氨氮"
+        ]
+    }]
+})
+
+export let dataForGas2 = Mock.mock({
+    'data|2': [{
+        'data|6': [
+            {
+                "value|30-200": 1,
+                'now|+1': '@now("yyyy-MM-dd")',
+                'fromNowOn|+1': -31,
+                'date': dateFunction
+            }
+        ],
+        'type': 'line',
+        'smooth': true,
+        "name|+1": [
+            "COD",
+            "氨氮"
+        ]
+    }]
+})
+export let dataForClean1 = Mock.mock({
+    'data|4': [{
+        'data|6': [
+            {
+                "value|30-200": 1,
+                'now|+1': '@now("yyyy-MM-dd")',
+                'fromNowOn|+1': -31,
+                'date': dateFunction
+            }
+        ],
+        'type': 'line',
+        'smooth': true,
+        "name|+1": [
+            "COD",
+            "氨氮",
+            "VOS",
+            "石油类"
+        ]
+    }]
+})
+
+export let dataForClean2 = Mock.mock({
+    'data|4': [{
+        'data|6': [
+            {
+                "value|30-200": 1,
+                'now|+1': '@now("yyyy-MM-dd")',
+                'fromNowOn|+1': -31,
+                'date': dateFunction
+            }
+        ],
+        'type': 'line',
+        'smooth': true,
+        "name|+1": [
+            "COD",
+            "氨氮",
+            "VOS",
+            "石油类"
+        ]
+    }]
+})
+export let dataForEnergyIndex = Mock.mock({
+    'data|4': [{
+        'data|13': [
+            {
+                "value|500-2500": 1,
+                'now|+1': '@now("yyyy-MM-dd")',
+                'fromNowOn|+1': -31,
+                'date': dateFunction
+            }
+        ],
+        'type': 'line',
+        'smooth': true,
+        "name|+1": [
+            "石油",
+            "天然气",
+            "煤炭",
+            "煤气"
+        ]
+    }]
+})
diff --git a/src/dataDemo/smartAndEnvironmentallyFriendlyData.js b/src/dataDemo/smartAndEnvironmentallyFriendlyData.js
new file mode 100644
index 0000000..ab226ea
--- /dev/null
+++ b/src/dataDemo/smartAndEnvironmentallyFriendlyData.js
@@ -0,0 +1,131 @@
+let Mock = require('mockjs')
+let dateFunction = function () {
+    let now = new Date(this.now);
+    now.setTime(now.getTime() + this.fromNowOn * 24 * 60 * 60 * 1000);
+    let sub = now;
+    let year = sub.getFullYear() < 10 ? '0' + sub.getFullYear() : sub.getFullYear();
+    let month = sub.getMonth() + 1 < 10 ? '0' + sub.getMonth() : sub.getMonth();
+    let day = sub.getDate() < 10 ? '0' + sub.getDate() : sub.getDate();
+    if (month == '00') {
+        month = '12'
+        year = year - 1
+    }
+    return month + '-' + day;
+}
+let data1 = Mock.mock({
+    'data|30': [
+        {
+            "value|10-200": 1,
+            'now|+1': '@now("yyyy-MM-dd")',
+            'fromNowOn|+1': -31,
+            'date': dateFunction
+        }
+    ]
+})
+
+let data2 = Mock.mock({
+    'data|30': [
+        {
+            "value|10-100": 1,
+            "value2|10-100": 1,
+            'now|+1': '@now("yyyy-MM-dd")',
+            'fromNowOn|+1': -31,
+            'date': dateFunction
+        }
+    ]
+})
+let data3 = Mock.mock({
+    'data|30': [
+        {
+            "value|10-100": 1,
+            "value2|10-100": 1,
+            'now|+1': '@now("yyyy-MM-dd")',
+            'fromNowOn|+1': -31,
+            'date': dateFunction
+        }
+    ]
+})
+//智慧环保页面数据
+export const smartAndEnvironmentallyFriendlyData = {
+    "daysMonitored": "566",//监测天数
+    //大气环境质量 -start
+    "atmosphericEnvironmentalQuality": {
+        "aqi": 20,//空气质量指数AQI：取值范围0至正无穷      0-50=优 51-100=良 101-150=轻度污染 151-200=中度污染 201-300=重度污染+蓝色预警 301-400=严重污染+黄色预警 401-500=严重污染+橙色预警 500以上=严重污染+红色预警
+        "excellentRate": "75",//优良率
+        "alerts": "3",//预警次数
+        "data": data1
+    },
+    //大气环境质量 -end
+    //水环境质量 -start
+    "waterQuality": {
+        "typeOfWaterBody": "Ⅳ",
+        "comprehensivePollutionIndex": 0.2,
+        "data": data2
+    },
+    //水环境质量 -end
+    //特征污染物监测 -start
+    "characteristicContaminants": {
+        "formaldehydeExcessRate": "10",//甲醛超标率
+        "methanolExceedance": "22",//甲醇超标率
+        // "chlorineGasExcessRate": "33%",//氯气超标率
+        "NOExceedance": "36",//一氧化氮超标率
+        // "HFExceedance": "26%",//氟化氢超标率
+        "BenzeneExceedance": "17",//苯系物超标率
+        "HCLExceedance": "52",//氯化氢超标率
+        "EthanolExceedance": "27",//乙醇超标率
+    },
+    //特征污染物监测 -end
+    //土壤环境质量 -start
+    "soilEnvironmentalQuality": {
+        "CPIPollutionIndex": '0.7',//土壤CPI污染指数
+        "NemeroPollutionIndex": '2',//内梅罗污染指数
+        "QualityEvaluation": 'Ⅰ',//土壤质量评价
+        "data":data3
+    },
+    //土壤环境质量 -end
+    //监测类型 -start
+    "typeOfMonitoring": [
+        {"label": '大气环境', "value": 'air', "isChecked": false},
+        {"label": '水环境', "value": 'water', "isChecked": false},
+        {"label": '土壤环境', "value": 'soil', "isChecked": false},
+        {"label": '特征污染物', "value": 'spe', "isChecked": false},
+        {"label": '废气污染源', "value": 'gas', "isChecked": false},
+        {"label": '废水污染源', "value": 'waste', "isChecked": false},
+        {"label": '清下水监控', "value": 'clean', "isChecked": false}
+    ],
+    //监测类型 -end
+    //污染源监控 -start
+    "contaminationSourceMonitoring": {
+        //企业废气排放监控
+        "enterpriseExhaustEmissionMonitoring": {
+            //废气排放总量
+            "totalExhaustEmissions": 545,
+            //废气污染源
+            "exhaustGasPollutionSource": '21',
+            //排放超标次数
+            "numberOfTimesEmissionsExceedStandards": '12'
+        },
+        //废水水排放监测
+        "wastewaterWaterDischargeMonitoring": {
+            //废水排放总量
+            "totalEmissions": 642,
+            //废水污染源
+            "sourcesOfWastewaterPollution": '9',
+            //排放超标次数
+            "numberOfTimesEmissionsExceedStandards": '9'
+        },
+        //清下水排放监测
+        "cleanSewerDischargeMonitoring": {
+            //清下水排放总量
+            "totalEmissions": 573,
+            //废水污染源
+            "pollutionSources": '12',
+            //排放超标次数
+            "numberOfTimesEmissionsExceedStandards": '7'
+        },
+    }
+    //污染源监控 -end
+
+
+}
+
diff --git a/src/dataDemo/smartSafetySupervisionData b/src/dataDemo/smartSafetySupervisionData
new file mode 100644
index 0000000..462ef57
--- /dev/null
+++ b/src/dataDemo/smartSafetySupervisionData
@@ -0,0 +1,78 @@
+let Mock = require('mockjs')
+let dateFunction = function () {
+    let now = new Date(this.now);
+    now.setTime(now.getTime() - this.fromNowOn * 24 * 60 * 60 * 1000);
+    let sub = now;
+    let year = sub.getFullYear() < 10 ? '0' + sub.getFullYear() : sub.getFullYear();
+    let month = sub.getMonth() + 1 < 10 ? '0' + sub.getMonth() : sub.getMonth();
+    let day = sub.getDate() < 10 ? '0' + sub.getDate() : sub.getDate();
+    if (month == '00') {
+        month = '12'
+        year = year - 1
+    }
+    return year + '-' + month + '-' + day;
+}
+let data1 = Mock.mock({
+    'data|30': [
+        {
+            "value|1-500": 1,
+            'now|+1': '@now("yyyy-MM-dd")',
+            'fromNowOn|+1': 1,
+            'date': dateFunction
+        }
+    ]
+})
+
+let data2 = Mock.mock({
+    'data|30': [
+        {
+            "value|1-100": 1,
+            "value2|1-100": 1,
+            'now|+1': '@now("yyyy-MM-dd")',
+            'fromNowOn|+1': 1,
+            'date': dateFunction
+        }
+    ]
+})
+
+
+
+//智慧安监页面数据
+export const smartSafetySupervisionData = {
+    'safeProductionDays': 1120,//安全生产天数
+    'hazard':{
+    'storagePoint':89,//危险品存储点
+    'craft':74,//危险工艺
+    },
+    'business':{
+     'underManagement':88,//在管企业数
+     'employee':3022,//企业总员工数
+     'car':726,
+     },
+    'work':{
+     'running':3,//进行中特殊作业
+     'business':2,//进行特殊作业企业
+     'recorded':53,//已备案特殊作业
+     'history':300,//历史特殊作业
+     },
+
+     'pitfall' :{
+     'check':238,//待验收
+     'rectify':211,//待整改
+	 'rectifing':11,//整改中
+	 'cancel':1077,//已消除
+	 },
+
+     'dangerousWorkData': [
+        {value: 1048, name: '断路'},
+        {value: 735, name: '动土'},
+        {value: 580, name: '受限空间'},
+        {value: 484, name: '高处'},
+        {value: 300, name: '吊装'},
+        {value: 300, name: '动火'},
+        {value: 300, name: '盲板抽堵'},
+        {value: 300, name: '设备检维修'},
+        {value: 300, name: '临时用电'},
+      ],
+
+    }
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 0000000..90f4186
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,5 @@
+
+declare module 'common/notFound';
+declare module 'common/map';
+declare module 'common/index';
+declare module 'file-saver'
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..47a6744
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1 @@
+import("./bootstrap")
diff --git a/src/mock/bounds.ts b/src/mock/bounds.ts
new file mode 100644
index 0000000..0787b6e
--- /dev/null
+++ b/src/mock/bounds.ts
@@ -0,0 +1,47 @@
+export default [[[
+    13312756.48,
+    4098385.2800000003,
+    6.031601562500001
+],[
+    13312829.44,
+    4098457.6,
+    5.40009765625
+],[
+    13312739.84,
+    4098548.16,
+    5.40005859375
+],[
+    13312668.16,
+    4098478.4,
+    5.4001171875
+]],[[
+    13312928,
+    4098465.92,
+    8.60546875
+],[
+    13313026.56,
+    4098550.08,
+    8.472421875
+],[
+    13313066.24,
+    4098509.44,
+    8.4935546875
+],[
+    13313164.8,
+    4098602.88,
+    6.0297656250000005
+],[
+    13312977.92,
+    4098790.72,
+    6.1410156250000005
+],[
+    13312793.6,
+    4098625.2800000003,
+    10.571015625
+],[
+    13312958.72,
+    4098458.88,
+    8.350625
+]
+
+]]
\ No newline at end of file
diff --git a/src/mock/dangrous.ts b/src/mock/dangrous.ts
new file mode 100644
index 0000000..7dde82b
--- /dev/null
+++ b/src/mock/dangrous.ts
@@ -0,0 +1,75 @@
+export default [
+    [
+        [
+            13312856.32,
+            4098289.92,
+            0.50998046875
+        ],[
+            13312933.120000001,
+            4098206.72,
+            0.61
+        ],[
+            13312962,
+            4098238.5,
+            0.027461051940918
+        ],[
+            13312884.48,
+            4098315.2,
+            0.50998046875
+        ]
+    ],[
+        [
+            13313146.88,
+            4098282.24,
+            0.5
+        ],[
+            13313168.64,
+            4098260.48,
+            0.5
+        ],[
+            13313264.64,
+            4098348.48,
+            0.5
+        ],[
+            13313239.040000001,
+            4098373.7600000002,
+            0.5
+        ]
+    ],[
+        [
+            13312925.44,
+            4098457.92,
+            0.610009765625
+        ],[
+            13312876.8,
+            4098416.3200000003,
+            0.510009765625
+        ],[
+            13312902.4,
+            4098388.16,
+            0.51
+        ],[
+            13312951.040000001,
+            4098432.96,
+            0.61001953125
+        ]
+    ],[
+        [
+            13313053.44,
+            4098577.2800000003,
+            0.51005859375
+        ],[
+            13313031.68,
+            4098556.48,
+            0.51001953125
+        ],[
+            13313050.88,
+            4098534.72,
+            0.50998046875
+        ],[
+            13313073.92,
+            4098554.56,
+            0.51
+        ]
+    ]
+]
\ No newline at end of file
diff --git a/src/mock/four.ts b/src/mock/four.ts
new file mode 100644
index 0000000..1d5af39
--- /dev/null
+++ b/src/mock/four.ts
@@ -0,0 +1,73 @@
+export default [[
+    [
+        13312657.92,
+        4098489.6,
+        0.5
+    ],[
+        13312757.76,
+        4098383.68,
+        0.5
+    ],[
+        13312834.56,
+        4098460.48,
+        0.5
+    ],[
+        13312737.280000001,
+        4098564.48,
+        0.5
+    ]
+],[
+    [
+        13313146.88,
+        4098282.24,
+        0.5
+    ],[
+        13313168.64,
+        4098260.48,
+        0.5
+    ],[
+        13313264.64,
+        4098348.48,
+        0.5
+    ],[
+        13313239.040000001,
+        4098373.7600000002,
+        0.5
+    ]
+],[
+    [
+        13312839.68,
+        4098664.64,
+        0.5
+    ],[
+        13312897.280000001,
+        4098604.8000000003,
+        0.5
+    ],[
+        13312976.64,
+        4098674.56,
+        0.5
+    ],[
+        13312919.040000001,
+        4098737.2800000003,
+        0.5
+    ]
+],[
+    [
+        13313043.200000001,
+        4098523.2,
+        0.5
+    ],[
+        13313148.16,
+        4098411.2,
+        0.5
+    ],[
+        13313187.84,
+        4098447.68,
+        0.5
+    ],[
+        13313091.84,
+        4098564.48,
+        0.5
+    ]
+]]
\ No newline at end of file
diff --git a/src/mock/four2.ts b/src/mock/four2.ts
new file mode 100644
index 0000000..7d68644
--- /dev/null
+++ b/src/mock/four2.ts
@@ -0,0 +1,73 @@
+export default[[
+    [
+        13312646.4,
+        4098533.7600000002,
+        0.4000390625
+    ],[
+        13312421.120000001,
+        4098775.04,
+        0.4
+    ],[
+        13312482.56,
+        4098835.52,
+        0.4
+    ],[
+        13312716.8,
+        4098596.8000000003,
+        0.4000390625
+    ]
+],[
+    [
+        13312732.16,
+        4098612.8000000003,
+        0.4
+    ],[
+        13312504.32,
+        4098859.2,
+        0.4000390625
+    ],[
+        13312556.8,
+        4098922.56,
+        0.4
+    ],[
+        13312785.92,
+        4098663.68,
+        0.4
+    ]
+],[
+    [
+        13312798.72,
+        4098672,
+        0.399921875
+    ],[
+        13312550.4,
+        4098922.24,
+        0.3999609375
+    ],[
+        13312599.040000001,
+        4098978.24,
+        0.3999609375
+    ],[
+        13312857.6,
+        4098722.56,
+        0.3999609375
+    ]
+],[
+    [
+        13312911.36,
+        4098755.52,
+        0.736093750000002
+    ],[
+        13312861.44,
+        4098712.96,
+        0.600859375
+    ],[
+        13312593.92,
+        4098988.48,
+        0.4
+    ],[
+        13312642.56,
+        4099042.56,
+        0.95
+    ]
+]]
\ No newline at end of file
diff --git a/src/mock/index.ts b/src/mock/index.ts
new file mode 100644
index 0000000..94c37f6
--- /dev/null
+++ b/src/mock/index.ts
@@ -0,0 +1,989 @@
+import Mock from "mockjs"
+import moment from "moment"
+import * as turf from '@turf/turf'
+import bounds from "./bounds";
+import realBounds from "./real";
+import safeBounds from "./safe";
+import planBounds from "./plan";
+import line from "./line";
+import {mockData,detail,sepList,hiddenDangerList,hiddenList} from "@/components/safety/risk/left/mockData.js";
+import four from "./four";
+import four2 from "./four2";
+import dangrous from "./dangrous";
+
+export class MockData{
+    public static getPeopleList(){
+        const data = [] as any;
+        for(let i=0;i<100;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                name:Mock.mock("@cname"),
+                job:"安全顾问",
+                position:turf.randomPosition([119.588709 ,34.514257,119.596724,34.520382]),
+                time:moment().subtract(Math.floor(Math.random()*30),"minutes").format("YYYY-MM-DD HH:mm:ss"),
+                tel:Mock.mock("@integer(13200000000, 13299999999)")
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+    public static getCameraList(){
+        const data = [] as any;
+        const positions=[[
+            13312915.200000001,
+            4098598.08,
+            0.51
+        ],[
+            13313086.72,
+            4098442.24,
+            0.51001953125
+        ],[
+            13312961.280000001,
+            4098238.72,
+            0.5099609375
+        ],[
+            13312853.76,
+            4098298.88,
+            0.5099609375
+        ],[
+            13312756.48,
+            4098408.96,
+            0.51
+        ],[
+            13312967.68,
+            4098156.48,
+            0.6099609375
+        ],[
+            13313036.8,
+            4098762.24,
+            0.51
+        ],[
+            13312883.200000001,
+            4098757.7600000002,
+            0.4
+        ],[
+            13313327.36,
+            4098413.12,
+            0.51
+        ],[
+            13312756.48,
+            4098400.96,
+            0.51
+        ]]
+        const typeList = ["热成像摄像机","红外球形摄像机","高空瞭望摄像机"]
+        //turf.randomPosition([119.588709 ,34.514257,119.596724,34.520382]),
+        for(let i=0;i<10;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                position:positions[i],
+                remark:typeList[i%3],
+                type:i%4,
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+    public static getCompanyList(){
+        const data = [] as any;
+        const typeList = ["江苏汉邦唐","北京汉邦唐"];
+        const areaList = [[[
+            13312797.44,
+            4098625.6,
+            0.400078125
+        ],[
+            13312634.88,
+            4098467.8400000003,
+            0.400078125
+        ],[
+            13312825.6,
+            4098269.12,
+            0.4
+        ],[
+            13312852.48,
+            4098290.56,
+            0.6099218750000001
+        ],[
+            13313027.84,
+            4098100.8000000003,
+            0.4000390625
+        ],[
+            13313169.92,
+            4098240,
+            0.4000390625
+        ]],[[
+            13312771.84,
+            4098628.48,
+            5.8119531250000005
+        ],[
+            13312986.88,
+            4098841.6,
+            0.399921875
+        ],[
+            13313376,
+            4098431.36,
+            0.399921875
+        ],[
+            13313145.6,
+            4098222.4,
+            0.400078125
+        ]
+
+        ]];
+        const positionList = [[
+            13312874.24,
+            4098367.68,
+            20
+        ],[
+            13313114.88,
+            4098505.92,
+            20
+        ]]
+        for(let i=0;i<2;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                position:positionList[i%2],
+                area:areaList[i%2],
+                name:typeList[i%2],
+                peopleCount:100,
+                master:Mock.mock("@cname"),
+                city:Mock.mock("@city(true)"),
+                address:Mock.mock("@county(true)")
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+    public static getFourList(){
+        const data = [] as any;
+        const areaList = four;
+        for(let i=0;i<areaList.length;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                position:turf.center(turf.points(areaList[i])).geometry.coordinates,
+                area:areaList[i],
+                name:"危化区"+ (i+1)
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+    public static getFourList2(){
+        const data = [] as any;
+        const areaList = four2;
+        for(let i=0;i<areaList.length;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                position:turf.center(turf.points(areaList[i])).geometry.coordinates,
+                area:areaList[i],
+                name:"停车区"+ (i+1)
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+
+
+    public static getCheckPoint(){
+        const data = [] as any;
+        const points = [[
+            13312962.56,
+            4098166.4,
+            0.50998046875
+        ],[
+            13313314.56,
+            4098401.6,
+            5.5896484375
+        ],[
+            13312739.84,
+            4098371.2,
+            0.400009765625
+        ],[
+            13312806.4,
+            4098604.48,
+            7.02779296875
+        ]];
+        const nameList = ["江苏汉邦唐","北京汉邦唐"]
+        for(let i=0;i<points.length;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                position:points[i],
+                name:nameList[i % 2],
+                remark:['出口','进口'][i%2]
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+
+    public static getStoreList(){
+        const points = [[
+            13312875.52,
+            4098452.8000000003,
+            24.715585937500002
+        ],[
+            13313103.36,
+            4098514.24,
+            37.52975830078125
+        ]];
+        const data = [] as any;
+        for(let i=0;i<points.length;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                position:points[i],
+                name:i<1?"江苏汉邦唐仓库":"江苏汉邦唐仓库",
+                remark:"70%"
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+    public static getBuildingList(){
+        const remarkList = ["避难所","消防站","气防站","防空洞"];
+        const points = [[
+            13312805.120000001,
+            4098358.72,
+            10.280234375000001
+        ],[
+            13312769.280000001,
+            4098483.52,
+            8.729609375
+        ],[
+            13312807.68,
+            4098549.12,
+            15.363359375
+        ],[
+            13312970.24,
+            4098203.8400000003,
+            6.366074218750001
+        ],[
+            13312910.08,
+            4098531.52,
+            16.74486328125
+        ],[
+            13313018.88,
+            4098431.04,
+            7.350400390625
+        ],[
+            13313209.6,
+            4098483.2,
+            10.4424609375
+        ],[
+            13313276.16,
+            4098580.8000000003,
+            3.9199951171875003
+        ]];
+        const data = [] as any;
+        for(let i=0;i<points.length;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                position:points[i],
+                name:i<4?"江苏汉邦唐":"北京汉邦唐",
+                remark:remarkList[i%4]
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+
+
+    public static getDangrous(){
+        const data = [] as any;
+        const areaList = dangrous;
+        const typeList = ["危化工艺","危化品","易爆品"];
+        const levelList=["三级","二级","一级"];
+        const statusList=["进行中","已关停"];
+        for(let i=0;i<areaList.length;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                position:turf.center(turf.points(areaList[i])).geometry.coordinates,
+                area:areaList[i],
+                type:typeList[i%3],
+                level:levelList[i%3],
+                name:"罐体区"+ (i+1),
+                status:statusList[i%2]
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+
+
+
+    public static getStopCarList(){
+        const plateList = ["苏A7E8U6","苏A3X4K5","苏J8868P","苏A7E8U6","苏A9H2K0","苏A756H3","苏A886E7","苏J12321","苏A11123","苏A92984"];
+        const typeList = ["重载","空载"];
+        const positions = [[
+            13312862.72,
+            4098773.12,
+            0.4
+        ],[
+            13312828.16,
+            4098812.8000000003,
+            0.4
+        ],[
+            13312791.040000001,
+            4098854.4,
+            0.39998046875
+        ],[
+            13312764.16,
+            4098881.92,
+            0.40001953125
+        ],[
+            13312730.88,
+            4098916.16,
+            0.4
+        ],[
+            13312478.72,
+            4098763.8400000003,
+            0.40001953125
+        ],[
+            13312524.8,
+            4098713.6,
+            0.39998046875
+        ],[
+            13312568.32,
+            4098665.6,
+            0.4
+        ],[
+            13312615.68,
+            4098621.12,
+            0.39998046875
+        ],[
+            13312422.4,
+            4098839.36,
+            0.3999609375
+        ]]
+        const data = [] as any;
+        for(let i=0;i<10;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                time:moment().subtract(Math.floor(Math.random()*30),"minutes").format("YYYY-MM-DD HH:mm:ss"),
+                startTime : "7:00",
+                endTime : "8:00",
+                position:positions[i],
+                plate:plateList[i],
+                type:typeList[i<5?0:1]
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+
+    public static getRandomData(){
+        const data = [] as any;
+        for(let i=0;i<5;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                position:turf.randomPosition([119.588709 ,34.514257,119.596724,34.520382]),
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+
+    public static getDangrousWork(){
+        const typeList = ["江苏汉邦唐","北京汉邦唐"];
+        const nameList = ["动火","高空","吊装","临时用电","受限空间","盲板抽堵"];
+        const nameList2 = ["断路","动土"];
+        const data = [] as any;
+        const positions = [[[
+            13312903.68,
+            4098505.6,
+            0.4
+        ],[
+            13312883.200000001,
+            4098492.16,
+            0.5099609375
+        ],[
+            13312902.4,
+            4098471.36,
+            0.7631250000000005
+        ],[
+            13312921.6,
+            4098486.4,
+            0.3999609375
+        ]],[[
+            13312864,
+            4098649.2800000003,
+            0.1734375
+        ],[
+            13312826.88,
+            4098614.08,
+            0.59904296875
+        ],[
+            13312872.96,
+            4098566.08,
+            0.51
+        ],[
+            13312910.08,
+            4098600.3200000003,
+            0.51001953125
+        ]]]
+        for(let i=0;i<nameList2.length;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                area:positions[i],
+                enterprise:typeList[i%2],
+                "operationLevel": i+1,
+                operationContent:"在园区实控线内"+nameList[i % 2]+"作业",
+                "operationStart": "2023-09-24 00:00:00",
+                "operationEnd": "2024-01-28 23:23:00",
+                "operationSite": "西陵峡三路128号-12-4",
+                operationType:nameList2[i % 2],
+                position:turf.center(turf.points(positions[i])).geometry.coordinates,
+                name:nameList2[i % 2]
+            })
+        }
+        for(let i=0;i<nameList.length*3;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                position:turf.randomPosition([
+                    13312995.84,
+                    4098177.2800000003,
+                    13313096.96,
+                    4098754.88,
+                ]),
+                operationContent:"在园区实控线内"+nameList[i % 6]+"作业",
+                operationType:nameList[i % 6],
+                enterprise:typeList[i%2],
+                "operationLevel": (i%3)+1,
+                "operationStart": "2023-09-24 00:00:00",
+                "operationEnd": "2024-01-28 23:23:00",
+                "operationSite": "西陵峡三路128号-12-4",
+                name:nameList[i % 6]
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+    public static getCarList(){
+        const plateList = ["苏A7E8U6","苏A3X4K5","苏J8868P","苏A7E8U6","苏A9H2K0"];
+        const typeList = ["罐车","挂车","油车"];
+        const data = [] as any;
+        for(let i=0;i<20;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                time:moment().subtract(Math.floor(Math.random()*30),"minutes").format("YYYY-MM-DD HH:mm:ss"),
+                startTime : "7:00",
+                endTime : "8:00",
+                position:turf.randomPosition([119.588709 ,34.514257,119.596724,34.520382]),
+                plate:plateList[i%5],
+                remark:typeList[i%3],
+                type:i%2
+
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+
+    public static getBounds(){
+        const areaList = bounds
+        const data = [] as any;
+        for(let i=0;i<10;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                area:areaList[i%2],
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+    public static getRealBounds(){
+        const data = [] as any;
+        for(let i=0;i<1;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                area:realBounds,
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+    public static getSafeBounds(){
+        const data = [] as any;
+        for(let i=0;i<1;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                area:safeBounds,
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+    public static getPlanBounds(){
+        const data = [] as any;
+        for(let i=0;i<1;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                area:planBounds,
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+    public static getSafeLine(){
+        const data = [] as any;
+        for(let i=0;i<2;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                positions:line[i%2],
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+
+    public static getBlackCarList(){
+        const plateList = ["苏A7E8U6","苏A3X4K5","苏J8868P","苏A7E8U6","苏A9H2K0"];
+
+        const data = [] as any;
+        for(let i=0;i<5;i++){
+            data.push({
+                id:Mock.mock("@id"),
+                time:moment().subtract(Math.floor(Math.random()*30),"minutes").format("YYYY-MM-DD HH:mm:ss"),
+                plate:plateList[i%5]
+            })
+        }
+        return Mock.mock({
+            code:0,
+            message:"成功",
+            data,
+        })
+    }
+
+    public static getRiskList(){
+        const data = mockData;
+        return Mock.mock({
+            code:200,
+            message:"成功",
+            data,
+        })
+    }
+
+    public static getRiskDetail(options){
+        const params = JSON.parse(options.body);
+        const id = Mock.mock("@id")
+        const personName = Mock.mock("@cname")
+        const phone = Mock.mock("@integer(13200000000, 13299999999)")
+        const addr = Mock.mock('@county(true)')
+        const data = {...detail,...{
+                id,
+                "name": params.name,
+                "level": params.level,
+                "responsiblePerson": personName,
+                personName,
+                phone,
+                addr
+        }};
+
+        return Mock.mock({
+            code:200,
+            message:"成功",
+            data,
+        })
+    }
+
+    public static getSepList(){
+        const data = sepList;
+        return Mock.mock({
+            code:200,
+            message:"成功",
+            data,
+        })
+    }
+    public static hiddenList(){
+        const data = hiddenList;
+        return Mock.mock({
+            code:200,
+            message:"成功",
+            data,
+        })
+    }
+    public static getHiddenDangrous(){
+        const data = hiddenDangerList.map((item,i)=>{
+            Object.assign(item,{
+                time : moment().subtract(i,"days").format("YYYY-MM-DD HH:mm:ss"),
+                position:turf.randomPosition([
+                    13312995.84,
+                    4098177.2800000003,
+                    13313096.96,
+                    4098754.88,
+                ]),
+                head:Mock.mock("@cname"),
+                phone:Mock.mock("@integer(13200000000, 13299999999)"),
+                enterprise:'联化科',
+                risk:'管廊管道破裂',
+                reportingDate:moment().subtract(i,"days").format("YYYY-MM-DD HH:mm:ss"),
+                inspector:Mock.mock("@cname"),
+                hiddenDangerDetails:'南区6号管廊巡检过程中存在少量裂缝，目前未发现泄露',
+                rectificationMeasure:'整改措施:需要尽快进行管道评估，\n' +
+                    '并根据评估结果，实施修复工作',
+                period:moment().subtract(i,"days").format("YYYY年M月DD日"),
+                remark:'管廊修复工作必须提前发布园\n' +
+                    '区公告，并发函通知相关使用企业',
+                status:1,
+            })
+            return item
+        });
+        return Mock.mock({
+            code:200,
+            message:"成功",
+            data,
+        })
+    }
+
+    public static getWaringList(){
+       /* {
+                type:"fire",
+                id:new Date().getTime()+"",
+                typeName:"火灾",
+                position:[13312990.72, 4098613.12, 0.51],
+                reporter:"张三",
+                content:"北京汉邦唐化工厂区发生火灾"
+
+            }*/
+        const data = [
+            {
+                title: '风险点异常',
+                info: '煤化工艺3号点温度异常',
+                time: '2023年1月20日  14:33:33',
+                level: '2',
+                type:"normal",
+                typeName:"风险告警",
+                reporter:"张三",
+                tel:"13337542569",
+                content:"煤化工艺3号点温度异常"
+            }
+            , {
+                title: '环境告警',
+                info: '土壤污染指数超标',
+                time: '2023年1月20日  14:33:33',
+                level: '1',
+                type:"normal",
+                typeName:"环境告警",
+                reporter:"李四",
+                tel:"13985412541",
+                content:"土壤污染指数超标"
+            }, {
+                title: '隐患整改超期',
+                info: '南区6号管廊存在少许裂缝',
+                time: '2023年1月20日  14:33:33',
+                level: '3',
+                type:"normal",
+                typeName:"隐患整改超期",
+                reporter:"张三",
+                tel:"13337542569",
+                content:"南区6号管廊存在少许裂缝"
+            }, {
+                title: '大气环境蓝色预警',
+                info: '大气5号监测点蓝色预警',
+                time: '2023年1月20日  14:33:33',
+                level: '2',
+                type:"normal",
+                typeName:"大气环境蓝色预警",
+                reporter:"张三",
+                tel:"13337542569",
+                content:"大气5号监测点蓝色预警"
+            }, {
+                title: '风险告警',
+                info: '富土康厂区4号设备监测数值异常',
+                time: '2023年1月20日  14:33:33',
+                level: '3',
+                type:"normal",
+                typeName:"风险告警",
+                reporter:"张三",
+                tel:"13337542569",
+                content:"富土康厂区4号设备监测数值异常"
+            }, {
+                title: '车辆告警',
+                info: '电子围栏-车辆非法进入',
+                time: '2023年1月20日  14:33:33',
+                level: '2',
+                type:"normal",
+                typeName:"车辆告警",
+                reporter:"李四",
+                tel:"13985412541",
+                content:"电子围栏-车辆非法进入"
+            },
+        ].map((item:any)=>{
+            item.id = Mock.mock("@id");
+            if (item.type === 'normal'){
+                item.position=turf.randomPosition([
+                    13312995.84,
+                    4098177.2800000003,
+                    13313096.96,
+                    4098754.88,
+                ]);
+            }else if(item.type === 'fire'){
+                item.position= [13312990.72, 4098613.12, 0.51]
+            }
+            item.reporter = Mock.mock("@cname")
+            item.tel = Mock.mock("@integer(13200000000, 13299999999)")
+            item.time = moment().subtract(0,"days").format("YYYY-MM-DD HH:mm:ss")
+
+            return item
+        });
+        const i = Math.floor(Math.random()*5)+1
+        return Mock.mock({
+            code:200,
+            message:"成功",
+            data:[data[i]],
+        })
+    }
+    public static deviceList(){
+        const nameList = [
+            "2号区3号库采样点",
+            "1号区13号库采样点",
+            "22号区4号库采样点",
+            "12号区33号库采样点",
+            "12号区3号库采样点",
+            "22号区32号库采样点",
+            "6号区3号库采样点",
+            "8号区2号库采样点",
+            "6号区9号库采样点",
+            "7号区1号库采样点",
+        ]
+        const values = [90,80,70,60,55,50,46,40,30,20];
+        const data = {
+            nameList,
+            values
+        };
+        return Mock.mock({
+            code:200,
+            message:"成功",
+            data,
+        })
+    }
+    public static xkz(){
+
+        const data = [
+            {
+                id: '12987122',
+                name: 'C区排放口',
+                type: 'COD',
+                unit: '3.2',
+                year1: 1075,
+                year2: 2075,
+                year3: 2275,
+            }, {
+                id: '12987123',
+                name: 'C区排放口',
+                type: '氨氮',
+                unit: '4.43',
+                year1: 1075,
+                year2: 2075,
+                year3: 2275,
+            }, {
+                id: '12987124',
+                name: 'C区排放口',
+                type: '氨氮',
+                unit: '4.43',
+                year1: 1075,
+                year2: 2075,
+                year3: 2275,
+            }, {
+                id: '12987125',
+                name: 'C区排放口',
+                type: '氨氮',
+                unit: '1.43',
+                year1: 1275,
+                year2: 2775,
+                year3: 2175,
+            }, {
+                id: '12987126',
+                name: 'C区排放口',
+                type: '氨氮',
+                unit: '2.43',
+                year1: 1275,
+                year2: 2375,
+                year3: 2575,
+            }];
+        return Mock.mock({
+            code:200,
+            message:"成功",
+            data,
+        })
+    }
+    public static dangerSourceDetail(){
+
+        const data = {
+            "id": "954e5e6f-91c5-46d1-a085-ad0e6cdae10c",
+            "mainResponsiblePersonId": "14acb7b9-83b2-4231-8eb2-d65f90ee49c8",
+            "mainResponsiblePerson": "璩筠月",
+            "technologyResponsiblePersonId": "18c563b8-9e7e-4055-b4d0-333e30dfe70b",
+            "technologyResponsiblePerson": "殳淑美",
+            "operateResponsiblePersonId": "1e3d6d39-6fa8-43ec-9577-cb734ede549c",
+            "operateResponsiblePerson": "况毅强",
+            "name": "氯气瓶仓库单元",
+            "riskFactor": "易燃易爆",
+            "consequence": "气体泄漏，导致燃烧爆炸，人员伤亡",
+            "remark": "气体泄漏，导致燃烧爆炸，人员伤亡",
+            "level": 3,
+            "controlMeasures": "1.采用密封存储容器，定期检修\r2.安装高精度气体泄漏检测仪器，及时预警",
+            "unifiedCoding": "BA京110115〔2019〕007号",
+            "unitType": 0,
+            "memorySpace": "14",
+            "enterprise": "中石油兰州石化榆林化工有限公司",
+            "hazardousChemicalsName": "氯气"
+        };
+        return Mock.mock({
+            code:200,
+            message:"成功",
+            data,
+        })
+    }
+
+    public static getEventList(){
+        /* {
+                 type:"fire",
+                 id:new Date().getTime()+"",
+                 typeName:"火灾",
+                 position:[13312990.72, 4098613.12, 0.51],
+                 reporter:"张三",
+                 content:"北京汉邦唐化工厂区发生火灾"
+
+             }*/
+        const data = [
+            {
+                title: '高空坠落',
+                info: '物体高空坠落',
+                time: '2023年1月20日  14:33:33',
+                level: '2',
+                type:"normal",
+                typeName:"安全事故",
+                reporter:"张三",
+                tel:"13337542569",
+                content:"物体高空坠落"
+            }
+            , {
+                title: '火灾告警',
+                info: '北京汉邦唐化工厂区发生火灾',
+                time: '2023年1月20日  14:33:33',
+                level: '1',
+                type:"fire",
+                typeName:"火灾",
+                reporter:"李四",
+                tel:"13985412541",
+                content:"北京汉邦唐化工厂区发生火灾"
+            }, {
+                title: '坍塌事故',
+                info: '建筑坍塌及时处理',
+                time: '2023年1月20日  14:33:33',
+                level: '1',
+                type:"normal",
+                typeName:"坍塌事故",
+                reporter:"张三",
+                tel:"13337542569",
+                content:"建筑坍塌及时处理"
+            }, {
+                title: '气液泄露',
+                info: 'NO气体泄露',
+                time: '2023年1月20日  14:33:33',
+                level: '2',
+                type:"normal",
+                typeName:"气液泄露",
+                reporter:"张三",
+                tel:"13337542569",
+                content:"NO气体泄露"
+            }, {
+                title: '火灾爆炸',
+                info: '富土康厂区火灾爆炸',
+                time: '2023年1月20日  14:33:33',
+                level: '2',
+                type:"normal",
+                typeName:"火灾爆炸",
+                reporter:"张三",
+                tel:"13337542569",
+                content:"富土康厂区火灾爆炸"
+            }, {
+                title: '火灾爆炸',
+                info: '北京汉邦唐化工厂区发生火灾',
+                time: '2023年1月20日  14:33:33',
+                level: '1',
+                type:"fire",
+                typeName:"火灾",
+                reporter:"李四",
+                tel:"13985412541",
+                content:"北京汉邦唐化工厂区发生火灾"
+            },
+        ].map((item:any)=>{
+            item.id = Mock.mock("@id");
+            if (item.type === 'normal'){
+                item.position=turf.randomPosition([
+                    13312995.84,
+                    4098177.2800000003,
+                    13313096.96,
+                    4098754.88,
+                ]);
+            }else if(item.type === 'fire'){
+                item.position= [13312990.72, 4098613.12, 0.51]
+            }
+            item.reporter = Mock.mock("@cname")
+            item.tel = Mock.mock("@integer(13200000000, 13299999999)")
+            item.time = moment().subtract(0,"days").format("YYYY-MM-DD HH:mm:ss")
+
+            return item
+        });
+        const i = Math.floor(Math.random()*5)+1
+        return Mock.mock({
+            code:200,
+            message:"成功",
+            data:[data[i]],
+        })
+    }
+}
diff --git a/src/mock/layer.ts b/src/mock/layer.ts
new file mode 100644
index 0000000..e07e5b8
--- /dev/null
+++ b/src/mock/layer.ts
@@ -0,0 +1,361 @@
+
+
+enum COLOR{
+    // 围栏
+    BOUNDS="#F669FF",
+    // 实控线
+    REALLINE="#00C8FF",
+    // 规划线
+    PLANLINE="#FFA900",
+    // 安全线
+    SAFELINE="#80ED30",
+    // 四色图-绿
+    GREEN="#80ED30",
+    // 四色图-蓝
+    BLUE="#7DAEFF",
+    // 四色图-黄
+    YELLOW="#FFA900",
+    // 四色图-红
+    RED="#FF5959"
+}
+export default [{
+    name:"在管企业",
+    ids:[] as string[],
+    type:"areaMarker",
+    value:"company",
+    colors:["#0a5fff","#5e93fd"],
+    selected:false,
+    pages:["parkFile","companyFile","closePark","smartSafetySupervision","smartEnvironment","smartEnergy","gasConsumption","electricityConsumption","waterConsumption","steamConsumption"]
+},{
+    name:"视频监控",
+    ids:[] as string[],
+    type:"marker",
+    urls:[
+        "@path:camera_0.png",
+        "@path:camera_1.png",
+        "@path:camera_2.png",
+        "@path:camera_3.png",
+    ],
+    value:"video" ,
+    selected:false,
+    pages:["parkFile","smartEmergency","closePark","peopleCar","dangrousCar","boundsManager","smartSafetySupervision"] 
+},{
+    name:"电子围栏",
+    ids:[] as string[],
+    type:"area",
+    value:"bounds",
+    color:COLOR.BOUNDS,
+    selected:false,
+    pages:["closePark","peopleCar"]  
+},{
+    name:"人员热力图",
+    ids:[] as string[],
+    type:"heatmap",
+    value:"heatmap",
+    selected:false,
+    pages:[]  
+},{
+    name:"人员定位",
+    ids:[] as string[],
+    type:"moveMarker",
+    value:"peo",
+    url: "@path:people.png",
+    pakFilePath: "@path:DTS_Library_V5.4.pak",
+    assetPath:"/JC_CustomAssets/VehicleLibrary/Exhibition/重型货车_01",
+    coordinateType:1,
+    selected:false,
+    pages:["closePark","peopleCar","smartSafetySupervision","smartEmergency"]  
+},{
+    name:"人员热力图",
+    ids:[] as string[],
+    type:"heatmap",
+    value:"heatmap",
+    coordinateType:1,
+    selected:false,
+    pages:["smartEmergency"]  
+},{
+    name:"车辆定位",
+    ids:[] as string[],
+    type:"moveMarker",
+    value:"car",
+    pakFilePath: "@path:DTS_Library_V5.4.pak",
+    assetPath:"/JC_CustomAssets/VehicleLibrary/Exhibition/重型货车_01",
+    urls:[
+        "@path:car.png",
+        "@path:d-car.png",
+        "@path:d-car.png",
+    ],
+    coordinateType:1,
+    selected:false,
+    pages:["closePark","peopleCar","smartSafetySupervision","smartEmergency"]  
+},{
+    name:"重载车辆",
+    ids:[] as string[],
+    type:"model",
+    pakFilePath: "@path:DTS_Library_V5.4.pak",
+    assetPath:"/JC_CustomAssets/VehicleLibrary/Exhibition/重型货车_01",
+    value:"heavy-car",
+    scale:[3,3,3],
+    selected:false,
+    pages:["closePark","dangrousCar"]  
+},{
+    name:"空载车辆",
+    ids:[] as string[],
+    type:"model",
+    pakFilePath: "@path:DTS_Library_V5.4.pak",
+    assetPath:"/JC_CustomAssets/ObjectLibrary/Exhibition/交通工具/车辆/工程车_2",
+    value:"empty-car",
+    scale:[3,3,3],
+    selected:false,
+    pages:["closePark","dangrousCar"]  
+},{
+    name:"疏散路线",
+    ids:[] as string[],
+    type:"line",
+    color:COLOR.GREEN,
+    value:"safe-route",
+    selected:false,
+    pages:["dangrousCar"]  
+},
+// {
+//     name:"气体监测",
+//     ids:[] as string[],
+//     type:"",
+//     value:"gas-monitor",
+//     selected:false,
+//     pages:["dangrousCar"]  
+// },
+{
+    name:"重大危险源",
+    ids:[] as string[],
+    type:"areaMarker",
+    value:"dangrous",
+    color:"#FFF",
+    colors:[],
+    selected:false,
+    pages:["parkFile","smartSafetySupervision","smartEmergency"]  
+},{
+    name:"风险四色图",
+    ids:[] as string[],
+    type:"areaMarker",
+    value:"four-color",
+    colors:[COLOR.RED,COLOR.YELLOW,COLOR.BLUE,COLOR.GREEN],
+    selected:false,
+    pages:["parkFile","smartSafetySupervision","risk"]  
+},{
+    name:"风险四色图",
+    ids:[] as string[],
+    type:"areaMarker",
+    value:"four-color2",
+    colors:[COLOR.RED,COLOR.YELLOW,COLOR.BLUE,COLOR.GREEN],
+    selected:false,
+    pages:["dangrousCar"]  
+},{
+    name:"应急设施",
+    ids:[] as string[],
+    type:"model",
+    pakFilePath: "@path:DTS_Library_V5.4.pak",
+    assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_D_2",
+    value:"safe-building",
+    scale:[3,3,3],
+    selected:false,
+    pages:["parkFile","smartEmergency","goods"]  
+},{
+    name:"物资仓库",
+    ids:[] as string[],
+    type:"model",
+    pakFilePath: "@path:DTS_Library_V5.4.pak",
+    assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_C_5",
+    value:"safe-goods",
+    scale:[3,3,3],
+    selected:false,
+    pages:["parkFile","smartEmergency","goods"]  
+},{
+    name:"实控线",
+    ids:[] as string[],
+    type:"area",
+    value:"real-line",
+    color:COLOR.REALLINE,
+    selected:false,
+    pages:["parkFile","boundsManager"]  
+},{
+    name:"安全线",
+    ids:[] as string[],
+    type:"area",
+    value:"safe-line",
+    color:COLOR.SAFELINE,
+    selected:false,
+    pages:["parkFile","boundsManager"]  
+},{
+    name:"规划线",
+    ids:[] as string[],
+    type:"area",
+    value:"plan-line",
+    color:COLOR.PLANLINE,
+    selected:false,
+    pages:["parkFile","boundsManager"]  
+},{
+    name:"卡口设施",
+    ids:[] as string[],
+    type:"model",
+    pakFilePath: "@path:DTS_Library_V5.4.pak",
+    assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_D_2",
+    value:"check-point",
+    scale:[3,3,3],
+    selected:false,
+    pages:["boundsManager"]  
+},{
+    name:"动火",
+    ids:[] as string[],
+    type:"model",
+    pakFilePath: "@path:DTS_Library_V5.4.pak",
+    assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_A_1",
+    value:"use-fire",
+    scale:[3,3,3],
+    selected:false,
+    pages:["dangerousWork"]  
+},{
+    name:"断路",
+    ids:[] as string[],
+    type:"areaMarker",
+    value:"break-road",
+    selected:false,
+    color:"#000",
+    pages:["dangerousWork"]  
+},{
+    name:"高空",
+    ids:[] as string[],
+    type:"model",
+    pakFilePath: "@path:DTS_Library_V5.4.pak",
+    assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_A_1",
+    value:"high-sky",
+    scale:[3,3,3],
+    selected:false,
+    pages:["dangerousWork"]  
+},{
+    name:"吊装",
+    ids:[] as string[],
+    type:"model",
+    pakFilePath: "@path:DTS_Library_V5.4.pak",
+    assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_A_1",
+    value:"hoisting",
+    scale:[3,3,3],
+    selected:false,
+    pages:["dangerousWork"]  
+},{
+    name:"动土",
+    ids:[] as string[],
+    type:"areaMarker",
+    value:"make-ground",
+    selected:false,
+    color:"#efaf00",
+    pages:["dangerousWork"]  
+},{
+    name:"临时用电",
+    ids:[] as string[],
+    type:"model",
+    pakFilePath: "@path:DTS_Library_V5.4.pak",
+    assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_A_1",
+    value:"use-e",
+    scale:[3,3,3],
+    selected:false,
+    pages:["dangerousWork"]  
+},{
+    name:"受限空间",
+    ids:[] as string[],
+    type:"model",
+    pakFilePath: "@path:DTS_Library_V5.4.pak",
+    assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_A_1",
+    value:"forbid-space",
+    scale:[3,3,3],
+    selected:false,
+    pages:["dangerousWork"]  
+},{
+    name:"盲板抽堵",
+    ids:[] as string[],
+    type:"model",
+    pakFilePath: "@path:DTS_Library_V5.4.pak",
+    assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_A_1",
+    value:"blind-plate",
+    scale:[3,3,3],
+    selected:false,
+    pages:["dangerousWork"]  
+},{
+    name:"大气环境",
+    ids:[] as string[],
+    type:"marker",
+    value:"gas-env",
+    hasText:true,
+    coordinateType:1,
+    url:"@path:mp_atmosphere.png",
+    selected:false,
+    pages:["smartEnvironment","airQuality","dangrousCar"]  
+},{
+    name:"土壤环境",
+    ids:[] as string[],
+    type:"marker",
+    value:"ground-env",
+    coordinateType:1,
+    hasText:true,
+    url:"@path:mp_soil.png",
+    selected:false,
+    pages:["smartEnvironment","soilQuality"]  
+},{
+    name:"废气污染源",
+    ids:[] as string[],
+    type:"marker",
+    url:"@path:mp_fluegas.png",
+    value:"fq-wrw",
+    coordinateType:1,
+    hasText:true,
+    selected:false,
+    pages:["smartEnvironment","gas"]  
+},{
+    name:"清下水监控",
+    ids:[] as string[],
+    type:"marker",
+    coordinateType:1,
+    hasText:true,
+    url:"@path:mp_purewater.png",
+    value:"qxs-jk",
+    selected:false,
+    pages:["smartEnvironment","clean"]  
+},{
+    name:"水环境",
+    ids:[] as string[],
+    type:"marker",
+    coordinateType:1,
+    url:"@path:mp_water.png",
+    value:"water-env",
+    hasText:true,
+    selected:false,
+    pages:["smartEnvironment","waterQuality"]  
+},{
+    name:"特征污染物",
+    ids:[] as string[],
+    type:"marker",
+    coordinateType:1,
+    hasText:true,
+    url:"@path:mp_contaminant.png",
+    value:"tz-wrw",
+    selected:false,
+    pages:["smartEnvironment","characteristicContaminants"]  
+},{
+    name:"废水污染源",
+    ids:[] as string[],
+    type:"marker",
+    coordinateType:1,
+    hasText:true,
+    url:"@path:mp_fluewater.png",
+    value:"fs-wrw",
+    selected:false,
+    pages:["smartEnvironment","waste"]  
+},{
+    name:"隐患治理",
+    ids:[] as string[],
+    type:"marker",
+    url:"@path:dt_yinhuan.png",
+    value:"hidden-dangrous",
+    selected:false,
+    pages:["pitfall"]  
+}]
\ No newline at end of file
diff --git a/src/mock/line.ts b/src/mock/line.ts
new file mode 100644
index 0000000..cbad63d
--- /dev/null
+++ b/src/mock/line.ts
@@ -0,0 +1,63 @@
+export default[
+    [[
+        13313007.36,
+        4098545.92,
+        1
+    ],[
+        13313047.040000001,
+        4098509.12,
+        0.50984375
+    ],[
+        13313094.4,
+        4098544.96,
+        1
+    ],[
+        13313141.76,
+        4098497.2800000003,
+        1
+    ],[
+        13313192.96,
+        4098545.2800000003,
+        1
+    ],[
+        13313130.24,
+        4098629.12,
+        1
+    ],[
+        13313104.64,
+        4098693.12,
+        1
+    ],[
+        13313082.88,
+        4098749.44,
+        1
+    ],[
+        13313052.16,
+        4098779.8400000003,
+        1
+    ],[
+        13313081.6,
+        4098823.04,
+        1
+    ]],[[
+        13312802.56,
+        4098473.92,
+        1
+    ],[
+        13312913.92,
+        4098365.7600000002,
+        1
+    ],[
+        13312875.52,
+        4098313.2800000003,
+        1
+    ],[
+        13313004.8,
+        4098176,
+        1
+    ],[
+        13312966.4,
+        4098140.48,
+        1
+    ]]
+]
\ No newline at end of file
diff --git a/src/mock/nav.ts b/src/mock/nav.ts
new file mode 100644
index 0000000..b227449
--- /dev/null
+++ b/src/mock/nav.ts
@@ -0,0 +1,111 @@
+export default [{
+    label: "一园一档",
+    value: "parkFile",
+    children: [{
+        label: "首页概览",
+        value: "parkFile"
+    }]
+},{
+    label: "一企一档",
+    value: "companyFile",
+    children: [{
+        label: "首页概览",
+        value: "companyFile"
+    }]
+},{
+    label: "智慧环保",
+    value: "smartEnvironment",
+    children: [{
+        label: "首页概览",
+        value: "smartEnvironment"
+    }, {
+        label: "大气环境",
+        value: "airQuality"
+    }, {
+        label: "水环境",
+        value: "waterQuality"
+    }, {
+        label: "土壤环境",
+        value: "soilQuality"
+    }, {
+        label: "特征污染物",
+        value: "characteristicContaminants"
+    }, {
+        label: "废气监测",
+        value: "gas"
+    }, {
+        label: "废水监测",
+        value: "waste"
+    }, {
+        label: "清下水",
+        value: "clean"
+    }]
+}, {
+    label: "智慧安监",
+    value: "smartSafetySupervision",
+    children: [{
+        label: "首页概览",
+        value: "smartSafetySupervision"
+    },
+        {
+            label: "风险管控",
+            value: "risk"
+        },
+        /* {
+         label:"重大危险源",
+         value:"hazard"
+     },*/
+        {
+            label: "隐患治理",
+            value: "pitfall"
+        },
+        {
+            label: "特殊作业",
+            value: "dangerousWork"
+        }]
+}, {
+    label: "智慧应急",
+    value: "smartEmergency",
+    children: [{
+        label: "首页概览",
+        value: "smartEmergency"
+    }, {
+        label: "物资盘点",
+        value: "goods"
+    }]
+}, {
+    label: "封闭园区",
+    value: "closePark",
+    children: [{
+        label: "首页概览",
+        value: "closePark"
+    }, {
+        label: "人车管理",
+        value: "peopleCar"
+    }, {
+        label: "危化车辆",
+        value: "dangrousCar"
+    }, {
+        label: "周界管理",
+        value: "boundsManager"
+    }]
+}, {
+    label: "智慧能源",
+    value: "smartEnergy",
+    children: [{
+        label: "首页概览",
+        value: "smartEnergy"
+    }, {
+        label: "燃料一张图",
+        value: "gasConsumption"
+    }, {
+        label: "电力一张图",
+        value: "electricityConsumption"
+    }, {
+        label: "水务一张图",
+        value: "waterConsumption"
+    }, {
+        label: "蒸汽一张图",
+        value: "steamConsumption"
+    }]
+}]
diff --git a/src/mock/plan.ts b/src/mock/plan.ts
new file mode 100644
index 0000000..8101682
--- /dev/null
+++ b/src/mock/plan.ts
@@ -0,0 +1,19 @@
+export default [[
+    13312624.64,
+    4098459.2,
+    0.4
+],[
+    13312988.16,
+    4098051.52,
+    0.4
+],[
+    13312719.36,
+    4097784.3200000003,
+    0.4
+],[
+    13312346.88,
+    4098189.12,
+    0.400078125
+]
+    
+]
\ No newline at end of file
diff --git a/src/mock/real.ts b/src/mock/real.ts
new file mode 100644
index 0000000..e877df6
--- /dev/null
+++ b/src/mock/real.ts
@@ -0,0 +1,23 @@
+export default [[
+    13312554.24,
+    4098441.2800000003,
+    0.4
+],[
+    13313066.24,
+    4098892.48,
+    0.476328125
+],[
+    13313446.4,
+    4098451.52,
+    0.4000390625
+],[
+    13312994.56,
+    4098064.96,
+    0.3999609375
+],[
+    13312628.48,
+    4098448.3200000003,
+    0.39998046875
+]
+    
+]
\ No newline at end of file
diff --git a/src/mock/safe.ts b/src/mock/safe.ts
new file mode 100644
index 0000000..1fe5fca
--- /dev/null
+++ b/src/mock/safe.ts
@@ -0,0 +1,19 @@
+export default [[
+    13312145.92,
+    4098379.8400000003,
+    0.39984375
+],[
+    13312945.92,
+    4097631.04,
+    0.39984375
+],[
+    13314124.8,
+    4098650.24,
+    0.39984375
+],[
+    13313205.76,
+    4099659.2,
+    0.4
+]
+    
+]
\ No newline at end of file
diff --git a/src/models/index.ts b/src/models/index.ts
new file mode 100644
index 0000000..d5dcabd
--- /dev/null
+++ b/src/models/index.ts
@@ -0,0 +1,40 @@
+interface ActionResult<T> {
+    /**
+     * code: 状态码, 0成功, 1一般业务异常, -1其他异常, -2授权异常, 令牌错误或令牌过期
+     */
+    code: number,
+    /**
+     * message: 错误消息
+     */
+    message: string;
+    /**
+     * data: 数据
+     */
+    data: T;
+}
+interface PagedResult<T> {
+   /**
+    * 总笔数
+    */
+   totalRecords: number;
+   /**
+    * 总页数
+    */
+   totalPages: number;
+   /**
+    * 页码
+    */
+   pageNumber: number;
+   /**
+    * 每页笔数
+    */
+   pageSize: number;
+   /**
+    * 分页数据
+    */
+   datas: T[];
+}
+interface loginModel{
+    access_token:string,
+    expires_in:number
+}
diff --git a/src/models/line.option.ts b/src/models/line.option.ts
new file mode 100644
index 0000000..1cdd63c
--- /dev/null
+++ b/src/models/line.option.ts
@@ -0,0 +1,37 @@
+export default class LineOption{
+    // 主键
+    public id:string;
+    // 分组id
+    public groupId?:string;
+    // 用户自定义数据
+    public userData?:string;
+    // 坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
+    public coordinateType?:number;
+    // 坐标点数组
+    public coordinate?:[number,number,number][];
+    // 可视范围: [近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
+    public range?:[number,number];
+    // 线宽，单位：米，默认值20
+    public thickness?:number;
+    //  颜色值，支持四种格式
+    public color?:string;
+    // 亮度，取值范围：[0~1000]，默认值：0.5
+    public intensity?:number;
+    // 流速，取值范围：[0~1.0]，默认值：0.5
+    public flowRate?:number;
+    // 折线样式，箭头/光流/贴地/实线/虚线等，取值范围：[0~7]
+    public style?:number;
+    // 可选参数，材质贴图平铺比例，和PolylineStyle取值有关，目前仅部分样式支持此参数，从起始位置开始平铺，超过的部分会按此比例生成新的区域，类似CSS的repeat。如果这个值 <= 0 使用自动计算按Polyline长度比例平铺， >0使用用户输入的值去平铺
+    public tiling?:number;
+    // 可选参数，自定义材质路径，即资源库PAK文件里材质文件的路径，设置自定义材质参数后style相关参数会失效
+    public material?:string;
+    // 样式，0：直线， 1：曲线，注意：设置为曲线坐标点多的时候会非常影响添加添加效率
+    public shape:number;
+    // 选参数，仅在设置自定义材质路径后生效，自定义材质数值类型参数，包含name/value键值对的数组，其中value为数值，格式示例：[{"name":"不透明度","value":0.5},{"name":"UV重复","value":1.0}]
+    public scalarParameters?:any[];
+    // 可选参数，仅在设置自定义材质路径后生效，自定义材质矢量类型参数，包含name/value键值对的数组，其中value为数组，格式示例：[{"name":"color1","value":[1,1,1,1]},{"name":"color2","value":[1,0,0,1]}]
+    public vectorParameters?:any[];
+    // 是否做深度检测，默认为true，true会被遮挡，false不会被遮挡
+    public depthTest?:boolean;
+
+}
\ No newline at end of file
diff --git a/src/models/marker.option.ts b/src/models/marker.option.ts
new file mode 100644
index 0000000..3ae967b
--- /dev/null
+++ b/src/models/marker.option.ts
@@ -0,0 +1,87 @@
+export default class MarkerOption{
+    // 主键
+    public id:string;
+    // 分组id
+    public groupId?:string;
+    // 用户数据
+    public userData?:string;
+    // 坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
+    public coordinateType?:number;
+    // 标注点的位置坐标: [x, y, z]
+    public coordinate?:[number,number,number];
+    // 锚点: [x, y]，设置Marker的整体偏移，取值规则和imageSize设置的宽高有关，图片的左上角会对准标注点的坐标位置。示例设置规则：x=-imageSize.width/2，y=imageSize.height
+    public anchors?:[number,number];
+    // 可视范围: [近裁距离, 远裁距离]，默认值: [10, 10000]
+    public range?:[number,number];
+    // 文本可视范围: [近裁距离, 远裁距离]，默认值: [100, 6000]
+    public textRange?:[number,number];
+    // 图片的尺寸: [width, height]， 默认值[32,32]
+    public imageSize?:[number,number];
+    // 图片是否固定尺寸，取值范围：false 自适应，近大远小，true 固定尺寸，默认值：false
+    public fixedSize?:boolean;
+    // 图片路径，支持gif动图，支持本地路径和网络路径
+    public imagePath?:string;
+    // 鼠标悬停时显示的图片路径，支持gif动图，支持本地路径和网络路径
+    public hoverImagePath?:string;
+    // 鼠标悬停时显示的图片尺寸: [width, height]， 默认值：[0,0] 使用图片自身的尺寸，注意：如果设置的值比imageSize尺寸小，则默认使用imageSize的尺寸。
+    public hoverImageSize?:[number,number];
+    // 显示的文字
+    public text?:string;
+    // 是否打开文字展开动画效果，默认值：true
+    public useTextAnimation?:boolean;
+    //  文本偏移: [x, y]，默认值：[0,0]
+    public textOffset?:[number,number];
+    // 字体大小，默认值：12
+    public fontSize?:number;
+    // 字体轮廓线大小，默认值：1
+    public fontOutlineSize?:number;
+    // 文本背景颜色，默认值白色[1, 1, 1, 0.85]，支持四种格式
+    public textBackgroundColor?:string;
+    // 字体颜色，默认值：黑色Color.Black，支持四种格式，
+    public fontColor?:string;
+    // 字体轮廓线颜色，默认值：黑色Color.Black，支持四种格式
+    public fontOutlineColor?:string;
+    // 弹窗背景颜色， [1.0,1.0,1.0,0.1] ，支持四种格式，
+    public popupBackgroundColor?:string;
+    // 弹窗HTML链接或者视频文件路径，也支持rtsp协议实时视频流
+    public popupURL?:string;
+    // 弹窗大小: [width, height]，默认值：[600,400]
+    public popupSize?:[number,number];
+    // 弹窗偏移: [x, y]，默认值：[0,0]
+    public popupOffset?:[number,number];
+    // 标注点下方是否显示垂直牵引线，默认不显示：false
+    public showLine?:boolean;
+    // 牵引线粗细[width, height]，默认值：[0,0]，如果要显示牵引线，需要将该属性设置成非0值
+    public lineSize?:[number,number];
+    // 牵引线颜色，默认值：白色，支持四种格式
+    public lineColor?:string;
+    // 牵引线偏移: [x, y]，默认值：[0,0]
+    public lineOffset?:[number,number];
+    //  是否自动关闭弹出窗口，默认值：true
+    public autoHidePopupWindow?:boolean;
+    // 自动判断下方是否有物体，设置正确高度，默认值：false
+    public autoHeight?:boolean;
+    // 显示模式，取值说明如下：
+
+        // 0：相机移动不显示，参与避让聚合
+
+        // 1：相机移动时显示，参与避让聚合
+
+        // 2：相机移动时显示，不参与避让聚合
+
+        // 3：相机移动时不显示，不参与避让聚合
+
+        // 4：智能模式，根据当前相机高度自动适配以上模式，类似金字塔lod加载效果，内置默认规则:range范围的1%内取值2，大于1%小于10%取值1，大于10%取值0
+    public displayMode?:number;
+    // 智能模式时的显示模式切换时range参数的首段比例，仅在displayMode=4时生效，取值范围：[0.01~1.0)，默认值0.01，示例：如果range=[1,1000]，则在[1,10]范围内dislayMode=2
+    public autoDisplayModeSwitchFirstRatio?:number;
+    // 智能模式时的显示模式切换时range参数的第二段比例，仅在displayMode=4时生效，取值范围：[0.01~1.0)，默认值0.1，示例：如果range=[1,1000]，则在[10,100]范围内dislayMode=1，大于100则dislayMode=1
+    public autoDisplayModeSwitchSecondRatio?:number;
+    // 聚合时是否根据图片路径(imagePath)分类聚合显示，即当多个marker的imagePath路径参数相同时按路径对marker分类聚合
+    public clusterByImage?:boolean;
+    // 避让优先级，默认值：0
+    public priority?:number;
+    // 是否参与遮挡剔除
+    public occlusionCull?:boolean;
+
+}
\ No newline at end of file
diff --git a/src/models/polygon.option.ts b/src/models/polygon.option.ts
new file mode 100644
index 0000000..1599a96
--- /dev/null
+++ b/src/models/polygon.option.ts
@@ -0,0 +1,37 @@
+export default class PolygonOption{
+    // 主键
+    public id:string;
+    // 分组id
+    public groupId?:string;
+    // 用户自定义数据
+    public userData?:string;
+    // 坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
+    public coordinateType?:number;
+    // 多边形坐标数组
+    public coordinate?:[number,number,number][]  | [number,number,number][][];
+    // 颜色值，支持四种格式，
+    public color?:string;
+    // 3D多边形的高度，取值范围：[任意正数]
+    public height?:number;
+    // 亮度，取值范围：[0~1000]
+    public intensity?:number;
+    // 3DPolygon的样式，参考 
+    public style?:number;
+    // 可选参数，仅当3DPolygon的样式支持贴图显示时，设置贴图横向平铺，取值范围：[任意数值]
+    public tillingX?:number;
+    // 可选参数，仅当3DPolygon的样式支持贴图显示时，设置贴图纵向平铺，取值范围：[任意数值]
+    public tillingY?:number;
+    // 可选参数，自定义材质路径，即资源库PAK文件里材质文件的路径，设置自定义材质参数后style相关参数会失效
+    public material?:string;
+    // 可选参数，仅在设置自定义材质路径后生效，自定义材质数值类型参数，包含name/value键值对的数组，其中value为数值，格式示例：[{"name":"不透明度","value":0.5},{"name":"UV重复","value":1.0}]
+    public scalarParameters?:any[];
+    // 可选参数，仅在设置自定义材质路径后生效，自定义材质矢量类型参数，包含name/value键值对的数组，其中value为数组，格式示例：[{"name":"color1","value":[1,1,1,1]},{"name":"color2","value":[1,0,0,1]}]
+    public vectorParameters?:any[];
+    // 可选参数，设置自定义材质路径后生效，是否生成顶面，默认：true
+    public generateTop?:boolean;
+    // 可选参数，设置自定义材质路径后生效，是否生成侧面，默认：true
+    public generateSide?:boolean;
+    // 可选参数，设置自定义材质路径后生效，是否生成底面，默认：true
+    public generateBottom?:boolean;
+
+}
\ No newline at end of file
diff --git a/src/models/radar.option.ts b/src/models/radar.option.ts
new file mode 100644
index 0000000..94308a4
--- /dev/null
+++ b/src/models/radar.option.ts
@@ -0,0 +1,23 @@
+export default class RadarOption{
+    // 主键
+    public id:string;
+    // 分组id
+    public groupId?:string;
+    // 用户自定义数据
+    public userData?:string;
+    // 坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
+    public coordinateType?:number;
+    // 多边形坐标数组
+    public coordinate?:[number,number,number];
+    // 颜色值，支持四种格式，
+    public color?:string;
+    // 辐射圈的半径，取值范围：[0~500000]，单位：米
+    public radius?:number;
+    // 亮度，取值范围：[0~1000]
+    public intensity?:number;
+    // 波纹数量，取值范围：[0~5]，单位：个
+    public rippleNumber?:number;
+    // 自动判断下方是否有物体，设置正确高度，默认值：false
+    public autoHeight?:boolean;
+
+}
\ No newline at end of file
diff --git a/src/popup/pop.component.vue b/src/popup/pop.component.vue
new file mode 100644
index 0000000..86df9a3
--- /dev/null
+++ b/src/popup/pop.component.vue
@@ -0,0 +1,142 @@
+<template>
+    <div class="pop-box" @click="setData">
+        <div class="border l-t"></div>
+        <div class="border r-t"></div>
+        <div class="border r-b"></div>
+        <div class="border l-b"></div>
+        <div class="title">
+            <i class="el-icon-warning" ></i>
+            告警类型{{$route.query.typeName}}</div>
+        <div class="content">
+            <span>上报人员：</span> 
+            <p>
+                <span>{{$route.query.reporter}}</span>
+                <a :href="'tel:'+$route.query.tel" class="tel">
+                     <img src="~@/assets/img/phone.png" alt=""> 一键联系
+                </a>
+            </p>
+        </div>
+        <div class="content">
+            <span>告警内容：</span> 
+            <p>{{$route.query.content}}</p>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.pop-box{
+    width: 100%;
+    height: 100%;
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    border: 1px solid #FFFFFF;
+    background: linear-gradient(180deg, rgba(176,38,38,0.6) 0%, rgba(113,41,41,0.8) 22%, rgba(0,0,0,0.8) 100%);
+    color: #E8E8E8;
+    padding: 30px;
+    font-size: 14px;
+    position: relative;
+    .border{
+        width: 8px;
+        height: 8px;
+        position: absolute;
+        border-left: 1px solid #FFF;
+        border-top: 1px solid #FFF;
+        &.l-t{
+            top: 10px;
+            left: 10px;
+        }
+        &.r-t{
+            top: 10px;
+            right: 10px;
+            transform: rotate(90deg);
+        }
+        &.r-b{
+            bottom: 10px;
+            right: 10px;
+            transform: rotate(180deg);
+        }
+        &.l-b{
+            bottom: 10px;
+            left: 10px;
+            transform: rotate(270deg);
+        }
+    }
+    .title{
+        display: flex;
+        align-items: center;
+        // font-weight: bold;
+        font-size: 16px;
+        padding: 20px 0;
+        i{
+            margin-right: 10px;
+            color: #F00;
+            font-size: 20px;
+        }
+    }
+    .content{
+        display: flex;
+        span{
+            align-self: flex-start;
+            white-space: nowrap;
+        }
+        p{
+            width: 1px;
+            flex: 1;
+            height: 48px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin:0;
+            display: flex;
+            flex-wrap: wrap;
+            line-height: 24px;
+            word-break: break-all;
+            align-self: flex-start;
+            padding: 0;
+            .tel{
+                width: 100px;
+                height: 24px;
+                display: inline-flex;
+                font-size: 12px;
+                text-decoration: none;
+                color: #FFF;
+                align-items: center;
+                margin-left: 10px;
+                justify-content: center;
+                background: rgba(255,255,255,0.15);
+                border-radius: 16px;
+                border: 1px solid #FFFFFF;
+                img{
+                    margin-right: 5px;
+                }
+            }
+        }
+    }
+}
+</style>
+<script lang="ts">
+import Vue from 'vue'
+declare const ue
+// import acapi from '../../public/ac.min.js';
+export default Vue.extend({
+    data(){
+        return{
+            params:JSON.stringify(this.$route)
+        }
+    },
+    created(){
+        console.log(this.params)
+        this.params = new URLSearchParams(location.href)
+        ue.dtspoi.postevent(JSON.stringify(this.$route))
+        //
+    },
+    methods:{
+        // 弹窗关闭
+        close(){
+            ue.dtspoi.closewindow();
+        },
+        // 向页面内传送数据
+        setData(){
+        ue.dtspoi.postevent(JSON.stringify(this.$route))
+        }
+    }
+})
+</script>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..a5aba6a
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import VueRouter, { RouteConfig } from 'vue-router'
+import pageNoFoundComponent from 'common/notFound'
+import indexComponent from 'common/index'
+import OverviewComponent from '@/views/overview.component'
+import PopupComponent from "@/popup/pop.component.vue"
+
+Vue.use(VueRouter)
+const routes: Array<RouteConfig> = [
+
+  {
+    path: '/',
+    name: 'index',
+    redirect:"/wit-park",
+  },
+  {
+    path: '/wit-park',
+    name: 'indexComponent',
+    component:OverviewComponent
+  },
+  {
+    path: '/popup',
+    name: 'popup',
+    component: PopupComponent
+  },
+  {
+    path: '*',
+    name: '404',
+    component: pageNoFoundComponent
+  },
+]
+
+const router = new VueRouter({
+  routes,
+})
+export default router
diff --git a/src/service/close.service.ts b/src/service/close.service.ts
new file mode 100644
index 0000000..42338d6
--- /dev/null
+++ b/src/service/close.service.ts
@@ -0,0 +1,27 @@
+import HttpService from "hbt-common/service/http.service"
+import type { AxiosResponse } from 'axios'
+export default class CloseService extends HttpService{
+    constructor(){
+        super()
+    }
+    public getPeopleList(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getPeopleList';
+        return this.get(url,params)
+    }
+    public getCarList(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getCarList';
+        return this.get(url,params)
+    }
+    public getStopCarList(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getStopCarList';
+        return this.get(url,params)
+    }
+    public getBlackCarList(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getBlackCarList';
+        return this.get(url,params)
+    }
+    public getCameraList(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getCameraList';
+        return this.get(url,params)
+    }
+}
\ No newline at end of file
diff --git a/src/service/park.service.ts b/src/service/park.service.ts
new file mode 100644
index 0000000..e7a49b2
--- /dev/null
+++ b/src/service/park.service.ts
@@ -0,0 +1,97 @@
+import HttpService from "hbt-common/service/http.service"
+import type { AxiosResponse } from 'axios'
+export default class ParkFileService extends HttpService{
+    constructor(){
+        super()
+    }
+    public getExpertList(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getPeopleList';
+        return this.get(url,params)
+    }
+    public getCompanyList(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getCompanyList';
+        return this.get(url,params)
+    }
+    public getBounds(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getBounds';
+        return this.get(url,params)
+    }
+    public getRealBounds(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getRealBounds';
+        return this.get(url,params)
+    }
+    public getSafeBounds(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getSafeBounds';
+        return this.get(url,params)
+    }
+    public getPlanBounds(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getPlanBounds';
+        return this.get(url,params)
+    }
+    public getSafeLine(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getSafeLine';
+        return this.get(url,params)
+    }
+    public getGasData(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getGasData';
+        return this.get(url,params)
+    }
+    public getRoilData(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getRoilData';
+        return this.get(url,params)
+    }
+    public getBadGasData(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getBadGasData';
+        return this.get(url,params)
+    }
+    public getCleanWaterData(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getCleanWaterData';
+        return this.get(url,params)
+    }
+    public getWaterEnvData(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getWaterEnvData';
+        return this.get(url,params)
+    }
+    public getTzWrwData(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getTzWrwData';
+        return this.get(url,params)
+    }
+    public getBadWaterData(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getBadWaterData';
+        return this.get(url,params)
+    }
+    public getFourList(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getFourList';
+        return this.get(url,params)
+    }
+    public getFourList2(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getParkFourList';
+        return this.get(url,params)
+    }
+    public getCheckPoint(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getCheckPoint';
+        return this.get(url,params)
+    }
+    public getBuildingList(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getBuildingList';
+        return this.get(url,params)
+    }
+    public getStoreList(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getStoreList';
+        return this.get(url,params)
+    }
+    public getDangrous(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getDangrous';
+        return this.get(url,params)
+    }
+    // 获取动火
+    public getDangrousWorkData(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getDangrousWorkData';
+        return this.get(url,params)
+    }
+
+    public getHiddenDangrous(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getHiddenDangrous';
+        return this.get(url,params)
+    }
+}
\ No newline at end of file
diff --git a/src/service/risk.service.ts b/src/service/risk.service.ts
new file mode 100644
index 0000000..4d1f4d8
--- /dev/null
+++ b/src/service/risk.service.ts
@@ -0,0 +1,28 @@
+import HttpService from "hbt-common/service/http.service"
+import type { AxiosResponse } from 'axios'
+export default class RiskService extends HttpService{
+    constructor(){
+        super()
+    }
+    public getRiskList(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getRiskList';
+        return this.get(url,params)
+    }
+    public getRiskDetail(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getRiskDetail';
+        return this.post(url,params,{},false)
+    }
+    public getSepList(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getSepList';
+        return this.get(url,{},false)
+    }
+    public getHiddenDangerList(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getHiddenDangerList';
+        return this.get(url,{},false)
+    }
+    public getHiddenList(params?: any):Promise<AxiosResponse<ActionResult<any>>>{
+        const url = '/getHiddenList';
+        return this.get(url,{},false)
+    }
+
+}
diff --git a/src/shims-tsx.d.ts b/src/shims-tsx.d.ts
new file mode 100644
index 0000000..64fc0a8
--- /dev/null
+++ b/src/shims-tsx.d.ts
@@ -0,0 +1,11 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    interface Element extends VNode {}
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
new file mode 100644
index 0000000..008dfaf
--- /dev/null
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,12 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}
+declare module '*.scss' {
+  const css:string
+  export default css
+}
+declare module '*.html' {
+  const html:string
+  export default html
+}
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..066c00f
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,73 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    warningList: [],
+    eventList: [],
+    peopleList:[],
+    companyList:[],
+    carList:[],
+    cameraList:[],
+    hiddenDangrousList:[],
+    dangrousWorkList:[],
+    groundEnvList:[],
+    specialEnvList:[],
+    dangrousList:[],
+    safeGoods:[],
+  },
+  getters: {
+  },
+  mutations: {
+    setPeopleList(state,data){
+        state.peopleList = data;
+    },
+    setCompanyList(state,data){
+        state.companyList = data;
+    },
+    setCarList(state,data){
+        state.carList = data;
+    },
+    setCameraList(state,data){
+        state.cameraList = data;
+    },
+    upDateWaringList(state:any,data){
+      state.warningList = [...data,...state.warningList];
+
+    },
+    setHiddenDangrousList(state:any,data){
+        state.hiddenDangrousList = data;
+    },
+    setDangrousWorkList(state:any,data){
+        state.dangrousWorkList = data;
+    },
+    setGroundEnvList(state:any,data){
+        state.groundEnvList = data;
+    },
+    setSpecialEnvList(state:any,data){
+        state.specialEnvList = data;
+    },
+    upDateEventList(state:any,data){
+      if (state.eventList.length === 50){
+        const temp = [...data,...state.eventList];
+        temp.pop()
+        state.eventList = temp;
+      }else{
+        state.eventList = [...data,...state.eventList];
+      }
+
+    },
+    setDangrousList(state:any,data){
+      state.dangrousList = data;
+    },
+    setSafeGoods(state:any,data){
+      state.safeGoods = data;
+    },
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
diff --git a/src/utils/echarts.ts b/src/utils/echarts.ts
new file mode 100644
index 0000000..d273d2b
--- /dev/null
+++ b/src/utils/echarts.ts
@@ -0,0 +1,304 @@
+const closeLineOpt = {
+    color:["#FADFA4","#947FEA"],
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor:"rgba(0,0,0,0.6)",
+      borderWidth:0,
+      textStyle:{
+        color:"rgba(255,255,255,0.8)",
+      },
+      axisPointer: {
+        // Use axis to trigger tooltip
+        type: 'line' // 'shadow' as default; can also be 'line' or 'shadow'
+      }
+    },
+    legend: {
+        itemWidth:10,
+        itemHeight:10,
+        icon:"roundRect",
+        textStyle:{
+            color:"rgba(255,255,255,0.8)",
+            fontSize:10
+        },
+        top:30,
+    },
+    grid: {
+      left: '3%',
+      right: '2%',
+      top:65,
+      bottom: 20,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      axisLine:{
+        lineStyle:{
+            color:"#999"
+        }
+      },
+      axisLabel:{
+        color:"rgba(255,255,255,0.8)",
+        interval:0,
+      },
+      splitLine:{
+        show:true,
+        lineStyle:{
+            color:"#D4E5FF",
+            opacity:0.16,
+        }
+      },
+      data: [1, 2, 3,4,5,6,7,8,9,10,11,12].map(item=>item+"月")
+    },
+    yAxis: [{
+        type: 'value',
+        axisLine:{
+          lineStyle:{
+              color:"#999"
+          }
+        },
+        splitLine:{
+          show:true,
+          lineStyle:{
+              color:"#D4E5FF",
+              opacity:0.16,
+          }
+        },
+        axisLabel:{
+          color:"rgba(255,255,255,0.8)",
+        },
+    }],
+    series: [
+      {
+        name: '入场车辆',
+        type: 'line',
+        symbol:"circle",
+        data: [320, 302, 301, 334,220, 182, 191, 234,150, 212, 201, 154]
+      },
+      {
+        name: '出场车辆',
+        symbol:"circle",
+        type: 'line',
+        data: [120, 132, 101, 134,820, 832, 901, 934,320, 302, 301, 334]
+      }
+    ]
+}
+const closeBarOpt = {
+    color:["#7DAEFF"],
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor:"rgba(0,0,0,0.6)",
+      borderWidth:0,
+      textStyle:{
+        color:"rgba(255,255,255,0.8)",
+      },
+      axisPointer: {
+        // Use axis to trigger tooltip
+        type: 'line' // 'shadow' as default; can also be 'line' or 'shadow'
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4.5%',
+      top:15,
+      bottom: 15,
+      containLabel: true
+    },
+    xAxis: {
+        axisLine:{
+            lineStyle:{
+                color:"#999"
+            }
+        },
+        axisLabel:{
+            color:"rgba(255,255,255,0.8)",
+            interval:0,
+            formatter:"{value}%"
+        },
+        splitLine:{
+            show:true,
+            lineStyle:{
+                color:"#D4E5FF",
+                opacity:0.16,
+            }
+        },
+        max: 100
+    },
+    yAxis: [{
+        type: 'category',
+        axisLine:{
+            lineStyle:{
+                color:"#999"
+            }
+        },
+        axisLabel:{
+            color:"rgba(255,255,255,0.8)",
+            interval:0,
+        },
+        splitLine:{
+            show:true,
+            lineStyle:{
+                color:"#D4E5FF",
+                opacity:0.16,
+            }
+        },
+        data: ["车辆识别仪","人脸识别仪","筒机","半球机","球机","热成像"],
+        // animationDuration: 300,
+        // animationDurationUpdate: 300,
+    }],
+    series: [
+      {
+        realtimeSort: true,
+        type: 'bar',
+        data:[65,32,73,81,90,100],
+      }
+    ],
+    // animationDuration: 0,
+    // animationDurationUpdate: 3000,
+    // animationEasing: 'linear',
+    // animationEasingUpdate: 'linear'
+  };
+
+const closePieOpt = {
+    title: {
+        text: '设备告警树',
+        top:"42%",
+        left:"11%",
+        textStyle: {
+            fontSize: 20,
+            fontWeight: '500',
+            color: '#FFF',
+        },
+    },
+    tooltip: {
+        trigger: 'item'
+    },
+    legend: {
+        orient: 'vertical',
+        right: '0%',
+        top: 'bottom',
+        height:100,
+        itemWidth: 10,
+        itemHeight: 10,
+        data: [
+            {value: 100, name: '气体检测仪'},
+            {value: 100, name: '车辆定位卡'},
+            {value: 100, name: '人员定位卡'},
+            {value: 100, name: '摄像头'},
+        ],
+        textStyle: {
+            overflow:"truncate",
+            color: 'rgba(255,255,255,0.8)',
+        },
+    },
+    series: [
+        {
+            type: 'pie',
+            selectedMode: 'single',
+            selectedOffset: 10,
+            center:["28%","50%"],
+            radius: [55, 80],
+            data: [
+                {value: 100, name: '气体检测仪'},
+                {value: 2, name: ''},
+                {value: 100, name: '车辆定位卡'},
+                {value: 2, name: ''},
+                {value: 100, name: '人员定位卡'},
+                {value: 2, name: ''},
+                {value: 100, name: '摄像头'},
+                {value: 2, name: ''},
+            ],
+            color: ['#7FB0FF',null, '#947FEA',null, '#C9FFD7',null, '#FADFA4',null, '#FFFFFF',null],
+            emphasis: {
+                label:{
+                    show: false
+                },
+                itemStyle: {
+                    // shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    // borderWidth:5,
+                    // borderColor:"rgba(255,255,255,0)",
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            itemStyle: {
+                // borderWidth:5,
+                // borderColor:"rgba(0,0,0)"
+
+            },
+            select: {
+                label:{
+                    show:true,
+                    color:"#FFF",
+                    formatter:"{c}"
+                }
+            },
+            labelLine: {
+                show: false
+            },
+            label: {
+                position:"inside",
+                show: false
+            },
+            tooltip:{
+                backgroundColor:'rgba(0,0,0,0.4)',
+                textStyle:{
+                    color:'#ffffff'
+                }
+
+            }
+        }
+    ],
+    animationDuration: 0,
+    animationDurationUpdate: 3000,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear'
+}
+
+
+const radarOpt = {
+  color: ['rgba(127,176,255,0.6)'],
+  tooltip: {
+    trigger: 'item',
+    backgroundColor:"rgba(0,0,0,0.6)",
+    borderWidth:0,
+    textStyle:{
+      color:"rgba(255,255,255,0.8)",
+    },
+  },
+  radar:  {
+      indicator: [
+        { text: '爆炸品', max: 150 },
+        { text: '压缩气体', max: 150 },
+        { text: '强氧化剂', max: 150 },
+        { text: '腐蚀品', max: 120 },
+        { text: '易燃液体', max: 108 },
+      ],
+      center: ['50%', '50%'],
+      radius: 100,
+      axisName: {
+        color: '#fff',
+        borderRadius: 3,
+        padding: [3, 5]
+      }
+    },
+  series: [
+    {
+      type: 'radar',
+      data: [
+        {
+          value: [100, 93, 50, 90, 70],
+          name: '危化品类型',
+          areaStyle: {}
+        }
+      ]
+    }
+  ]
+};
+
+
+export default {
+    closeLineOpt,
+    closePieOpt,
+    closeBarOpt,
+    radarOpt
+}
\ No newline at end of file
diff --git a/src/utils/player.ts b/src/utils/player.ts
new file mode 100644
index 0000000..4b8d304
--- /dev/null
+++ b/src/utils/player.ts
@@ -0,0 +1,188 @@
+
+import MarkerOption from '@/models/marker.option.js'
+import PolygonOption from '@/models/polygon.option.js';
+import * as acapi from '../../public/ac.min.js'  
+// import acapi from 'ac.min.js'
+export default class PlayerUtils{
+    public api:any;
+    public initPlayer(domId){
+        const player =  new acapi.DigitalTwinPlayer(process.env.VUE_APP_PALYER_URL,{
+            domId,
+            // reset:true,
+            apiOptions:{
+                onReady: this.onReady,
+                onLog: this.onLog,      //可选参数，日志输出回调函数
+                onEvent: this.onEvent
+            },
+            ui:{
+                startupInfo:false, 
+                mainUI:false
+            },
+
+            events: {
+                onVideoLoaded: this.onLoad,   //可选参数，视频流加载成功回调函数
+                onConnClose: this.onClose,      //可选参数，连接断开回调函数
+                mouseKeyListener:{
+                    onMouseEnter:this.onMouseEnter,
+                    onMouseLeave:this.onMouseLeave,
+                    onMouseMove:this.onMouseMove,
+                    onMouseDown:this.onMouseDown,
+                    onMouseUp:this.onMouseUp,
+                    onKeyDown:this.onKeyDown,
+                    onKeyUp:this.onKeyUp,
+                    onKeyPress:this.onKeyPress,
+                }
+            }, 
+            keyEventTarget: 'none',
+        })
+        this.api = player.getAPI();
+        return player
+    }
+
+    public onReady:any=null;
+
+    public onLog :any= null;
+
+    public onEvent :any = null;
+
+    public onLoad :any= null;
+
+    public onClose :any= null;
+    public onMouseEnter :any= null;
+    public onMouseLeave :any= null;
+    public onMouseMove :any= null;
+    public onMouseDown :any= null;
+    public onMouseUp :any= (data)=>{
+        console.log(data)
+    };;
+    public onKeyDown :any= null;
+    public onKeyUp :any= null;
+    public onKeyPress :any= null;
+
+
+    public async addMarker(data:MarkerOption | MarkerOption[],fn?:any){
+        const option = {
+            range: [1, 10000],
+            autoHidePopupWindow:false,
+            displayMode:2,
+            coordinateType:1,
+        }
+        let params;
+        if(data instanceof Array){
+            params = data.map(item=>{
+                return Object.assign({},option,data)
+            })
+        }else{
+            params = Object.assign({},option,data)
+        }
+        await this.api.marker.add(params,fn);
+    }
+
+    public async addPolygon(data:PolygonOption | PolygonOption[],fn?:any){
+        const option = {
+            coordinateType:1,
+        }
+        let params;
+        if(data instanceof Array){
+            params = data.map(item=>{
+                return Object.assign({},option,data)
+            })
+        }else{
+            params = Object.assign({},option,data)
+        }
+        await this.api.polygon3d.add(params,fn);
+    }
+    // type:marker,polygon,polygon3d,marker3d等等
+     public remove(type:string,ids:string | string[],fn?){
+        this.api[type].delete(ids,fn)
+    }
+    public clearAll(type:string,fn?){
+        this.api[type].clear(fn)
+    }
+    public toggle(type:string,ids:string | string[],isShow:boolean,fn?){
+        if(isShow){
+            this.api[type].show(ids,fn)
+        }else{
+            this.api[type].hide(ids,fn)
+        }
+    }
+    public toggleAll(type:string,isShow:boolean,fn?){
+        if(isShow){
+            this.api[type].showAll(fn)
+        }else{
+            this.api[type].hideAll(fn)
+        }
+    }
+
+
+    /**
+    * 投影坐标转经纬度坐标
+    * @param coordinates [x,y,z]- 世界坐标
+    * @param coordinateType - 经纬度坐标系类型0:世界  1:84  2:gcj02 3:bd09
+    * @param fn 完成后的回调
+    * @returns 经纬度 lon,lat]
+    */
+
+    public getLonLat(coordinates,coordinateType?,fn?){
+        if(!coordinateType){
+            // 1 84坐标系  2 GCJ02 3 BD09
+            coordinateType=1;
+        }
+        const result = this.api.coord.pcs2gcs(coordinates,coordinateType,fn)
+        if(result.resultMessage==="OK"){
+            return result.coordinates
+        }else{
+            return new Error(result.resultMessage)
+        }
+    }
+
+    /**
+    * 经纬度坐标转世界坐标
+    * @param coordinates [lon,lat]- 经纬度
+    * @param coordinateType - 经纬度坐标系类型  1:84  2:gcj02 3:bd09
+    * @param fn 完成后的回调
+    * @returns  position [x,y,z]世界坐标
+    */
+
+    public async getPosition(coordinates,coordinateType?,fn?){
+        if(!coordinateType){
+            // 1 84坐标系  2 GCJ02 3 BD09
+            coordinateType=1;
+        }
+        const result = await this.api.coord.gcs2pcs(coordinates,coordinateType)
+        if(result.resultMessage==="OK"){
+            return result.coordinates
+        }else{
+            return new Error(result.resultMessage)
+        }
+    }
+    /**
+    * 世界坐标转屏幕坐标
+    * @param position [x,y,z] - 世界坐标
+    * @param fn 完成后的回调
+    * @returns [x,y]屏幕坐标
+    */
+    public getScreenPosition(position,fn?){
+        const result = this.api.coord.world2Screen(...position,fn);
+        if(result.resultMessage==="OK"){
+            return result.screenPosition
+        }else{
+            return new Error(result.resultMessage)
+        }
+    }
+    /**
+    * 屏幕坐标转世界坐标
+    * @param offest [x,y,] - 屏幕坐标
+    * @param fn 完成后的回调
+    * @returns [x,y,z]世界坐标
+    */
+    public getPositionByOffset(offest,fn?){
+        const result = this.api.coord.world2Screen(...offest,fn);
+        if(result.resultMessage==="OK"){
+            return result.worldLocation
+        }else{
+            return new Error(result.resultMessage)
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
new file mode 100644
index 0000000..238b313
--- /dev/null
+++ b/src/utils/utils.ts
@@ -0,0 +1,6 @@
+const  getRandNumBetween = (min, max) =>{
+    return Math.round((Math.random() * (max - min) + min) * 10) / 10;
+}
+export  {
+    getRandNumBetween
+}
\ No newline at end of file
diff --git a/src/views/base.component.ts b/src/views/base.component.ts
new file mode 100644
index 0000000..24c7d28
--- /dev/null
+++ b/src/views/base.component.ts
@@ -0,0 +1,582 @@
+import {Component, Vue} from 'vue-property-decorator';
+
+import("./overview.component.scss")
+import template from "./overview.component.html"
+import HeaderComponent from "@/components/header.component.vue"
+import MapComponent from "@/components/map.component.vue"
+import {getRandNumBetween} from "@/utils/utils"
+import layerData from "@/mock/layer"
+import boundsData from "@/mock/bounds"
+import ParkFileService from '@/service/park.service';
+import CloseService from '@/service/close.service';
+import * as turf from "@turf/turf"
+
+@Component({
+    template,
+    components: {
+        MapComponent,
+        // MapComponent: () => import("common/map"),
+        HeaderComponent,
+
+    }
+})
+export default class BaseComponent extends Vue {
+    public player!: any;
+    public layerData = layerData;
+
+    public lock = true;
+
+    public timerList = {} as any;
+
+    public eventAssets = {
+        fire:"/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_10",
+        normal:"/JC_CustomAssets/EffectLibrary/Exhibition/Point/Point_R_2"
+    } ;
+    public warnAssets = "/JC_CustomAssets/EffectLibrary/Exhibition/Point/Point_Y_2";
+    public pakFilePath =  "@path:DTS_Library_V5.4.pak";
+    public currentWanning:any = null;
+    public currentEvent:any = null;
+
+    // dataList
+    public dataList = {} as any;
+    // service
+    public parkService = new ParkFileService()
+    public closeService = new CloseService()
+
+
+
+    // 重置视角
+    public async resetMap(time:number=1) {
+        if(this.lock){
+            this.$message.error("视口未加载完成")
+            return
+        }
+        this.player.api.camera.lookAt(
+            13312716.658437,
+            4098255.982695,
+            60.714346,
+            0,
+            -20,
+            -45
+        )
+        // this.player.api.camera.get((res)=>{
+        //   console.log(res)
+        // })
+
+        //  return await this.player.api.tileLayer.focus("48D390964B7F0D37D07DD8A2D5596E64",330,time)
+
+    }
+
+
+    public addEvent(data){
+        if(this.currentEvent){
+            this.player.api.customObject.delete(this.currentEvent.id);
+            this.player.api.marker.delete(this.currentEvent.id);
+            this.currentEvent = null;
+        }
+        if(!data.position[2]){
+            data.position[2]=0.5
+        }
+        this.currentEvent = {
+            id: data.id,
+            pakFilePath: this.pakFilePath,
+            assetPath:this.eventAssets[data.type] ,
+            location: data.position,
+            scale: data.type==="fire"?[15, 15, 15]:[10,10,10],
+            popupSize:[355,212],
+            coordinate:data.position,
+            lineSize:[2,40],
+            autoHeight:true,
+            popupOffset:[-176,-106],
+            useTextAnimation: false,
+            autoHidePopupWindow:false,
+            displayMode:2,
+            popupURL:"http://192.168.1.20:8080/#/popup?"+new URLSearchParams(data),
+        }
+
+        this.player.api.marker.add(this.currentEvent, (data) => {
+            this.player.api.marker.showPopupWindow(this.currentEvent.id);
+            this.player.api.marker.focus(this.currentEvent.id,150,2)
+        })
+
+        this.player.api.customObject.add(this.currentEvent, (data) => {
+        })
+    }
+
+    public  addWarnning(item){
+        if(this.currentWanning){
+            this.player.api.customObject.delete(this.currentWanning.id)
+        }
+        this.currentWanning = {
+            id:item.id+"",
+            groupId:"warning",
+            pakFilePath:this.pakFilePath,
+            assetPath:this.warnAssets,
+            // coordinateType:1,
+            location:[...item.position,10],
+            rotation:[0,90,0]
+
+        }
+        this.player.api.customObject.add(this.currentWanning,()=>{
+            this.player.api.customObject.focus(this.currentWanning.id,15,2)
+        })
+    }
+
+    // 添加电子围栏 // 安全线  // 实控线 // 规划线
+    public async toggleArea(layer){
+        if(!layer.ids.length){
+            const result = this.dataList[layer.value].map(item=>{
+                return {
+                    id:item.id,
+                    groupId:layer.value,
+                    coordinates:item.area,
+                    height:20,
+                    color:layer.color,
+                    style:4,
+                    generateTop:false,
+                    generateBottom:false
+                }
+            });
+            this.player.api.polygon3d.add(result,(data)=>{
+                if(data.resultMessage==="OK"){
+                    layer.ids = result.map(item=>item.id)
+                }
+            })
+        }else{
+            if(layer.selected){
+                this.player.api.polygon3d.show(layer.ids)
+            }else{
+                this.player.api.polygon3d.hide(layer.ids)
+            }
+        }
+    }
+
+    // 添加marker
+    public toggleMarker(layer){
+        if(!layer.ids.length){
+            let text = {};
+            const datas = this.dataList[layer.value].map(item=>{
+                if(layer.hasText){
+                    text = {
+                        useTextAnimation: false,
+                        textBackgroundColor:[0,0,0,0.7],
+                        textOffset:[0,0],
+                        fontSize:12,
+                        fontColor:"#FFF",
+                        text:item.name || layer.name
+                    }
+                }
+                return Object.assign({
+                    id:item.id,
+                    groupId:layer.value,
+                    coordinate:item.position,
+                    coordinateType:layer.coordinateType?layer.coordinateType:0,
+                    displayMode:2,
+                    imagePath:layer.url || layer.urls[item.type],
+                    imageSize:[48,48],
+                    // popupURL:"http://192.168.1.20:8080/#/popup?"+new URLSearchParams(item),
+                    lineSize:[2,40],
+                    useTextAnimation: false,
+                    lineOffset:[24,0],
+                    // textBackgroundColor:[0,0,0,0.7],
+                    autoHeight:true,
+
+                },text)
+            });
+            this.player.api.marker.add(datas,(data)=>{
+                layer.ids = datas.map(item=>item.id)
+            })
+        }else{
+            if(layer.selected){
+                // this.player.api.marker.showAllPopupWindow();
+                this.player.api.marker.show(layer.ids)
+            }else{
+                // this.player.api.marker.hideAllPopupWindow();
+                this.player.api.marker.hide(layer.ids)
+            }
+        }
+
+
+    }
+
+    // 添加企业面  tag
+    public toggleAreaMarker(layer){
+        if(!layer.ids.length){
+            const result = this.dataList[layer.value];
+            if (!result) return
+            const datas = result.map(item=>{
+                return {
+                    id:item.id,
+                    groupId:layer.value,
+                    coordinate:item.position,
+                    displayMode:2,
+                    text:item.name,
+                    // popupURL:"http://192.168.1.20:8080/#/popup?"+new URLSearchParams(item),
+                    // popupSize:[348,156],
+                    lineSize:[2,40],
+                    useTextAnimation: false,
+                    textBackgroundColor:[0,0,0,0.7],
+                    textOffset:[0,0],
+                    fontSize:12,
+                    fontColor:"#FFF",
+                    autoHeight:true,
+
+                }
+            });
+            const datas2 = result.map((item,index)=>{
+                return {
+                    id:item.id,
+                    groupId:layer.value,
+                    coordinates:item.area,
+                    height:layer.value==="company"?5:40,
+                    color:layer.color || layer.colors[index],
+                    style:1,
+                    generateTop:true,
+                    generateBottom:true
+
+                }
+            });
+
+            this.player.api.polygon3d.add(datas2,(data)=>{
+                //
+                console.log(layer.value,data)
+            })
+            this.player.api.marker.add(datas,(data)=>{
+                layer.ids = result.map(item=>item.id)
+            })
+            // this.player.api.marker.showAllPopupWindow();
+        }else{
+            if(layer.selected){
+                // this.player.api.marker.showAllPopupWindow();
+                this.player.api.marker.show(layer.ids)
+                this.player.api.polygon3d.show(layer.ids)
+            }else{
+                // this.player.api.marker.hideAllPopupWindow();
+                this.player.api.marker.hide(layer.ids)
+                this.player.api.polygon3d.hide(layer.ids)
+            }
+        }
+    }
+
+    public async toggleMoveMarker(layer){
+        const result = this.dataList[layer.value];
+
+        if(!layer.ids.length){
+            const datas = result.map(item=>{
+                return {
+                    id:item.id,
+                    groupId:layer.value,
+                    pakFilePath:layer.pakFilePath,
+                    assetPath:layer.assetPath,
+                    coordinateType:layer.coordinateType?layer.coordinateType:0,
+                    location:item.position,
+                    smoothMotion:1,
+                    scale:[0,0,0],
+                    rotation:[0,90,0]
+
+                }
+            });
+            const markerDatas = result.map(item=>{
+                return {
+                    id:item.id,
+                    groupId:layer.value,
+                    coordinate:item.position,
+                    coordinateType:layer.coordinateType?layer.coordinateType:0,
+                    displayMode:2,
+                    imagePath:layer.url || layer.urls[item.type],
+                    imageSize:[48,48],
+                    // popupURL:"http://192.168.1.20:8080/#/popup?"+new URLSearchParams(item),
+                    lineSize:[2,40],
+                    useTextAnimation: false,
+                    lineOffset:[24,0],
+                    // textBackgroundColor:[0,0,0,0.7],
+                    autoHeight:true,
+
+                }
+            })
+            this.player.api.marker.add(markerDatas)
+            this.player.api.customObject.add(datas,(data)=>{
+                console.log(data)
+                if(data.resultMessage==="OK"){
+                    this.player.api.marker.setAttachCustomObject(result.map(item=>{
+                        layer.ids.push(item.id);
+
+
+                        return{
+                            markerId: item.id, //标注id
+                            objectId: item.id, //自定义对象id
+                            offset: [0, 0, 0] //偏移量
+                        }
+                    }));
+                    this.player.api.customObject.moveTo(result.map(item=>{
+                        return {
+                            id:item.id,
+                            location:turf.destination(turf.point(item.position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates,
+                            "smoothTime": 5
+                        }
+                    }))
+
+                    this.timerList[layer.value] = setInterval(()=>{
+                        this.player.api.customObject.moveTo(result.map(item=>{
+                            return {
+                                id:item.id,
+                                location:turf.destination(turf.point(item.position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates,
+                                "smoothTime": 5
+                            }
+                        }))
+                    },5000)
+                }
+            })
+        }else{
+            if(layer.selected){
+                this.player.api.customObject.show(layer.ids)
+                this.player.api.marker.show(layer.ids)
+                this.player.api.customObject.moveTo(result.map(item=>{
+                    return {
+                        id:item.id,
+                        location:turf.destination(turf.point(item.position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates,
+                        "smoothTime": 5
+                    }
+                }))
+
+                this.timerList[layer.value] = setInterval(()=>{
+                    this.player.api.customObject.moveTo(result.map(item=>{
+                        return {
+                            id:item.id,
+                            location:turf.destination(turf.point(item.position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates,
+                            "smoothTime": 5
+                        }
+                    }))
+                },5000)
+            }else{
+                clearInterval(this.timerList[layer.value]);
+                this.timerList[layer.value] = null;
+                this.player.api.customObject.hide(layer.ids)
+                this.player.api.marker.hide(layer.ids)
+            }
+        }
+
+    }
+
+    // 添加3dMarker
+    public async toggleCustom(layer){
+        if(!layer.type){
+            return
+        }
+
+        if(!layer.ids.length){
+            const result = this.dataList[layer.value] || [];
+            const datas = result.map(item=>{
+                if(!item.position[2]){
+                    item.position[2] = item.name==="高空"? 20:3
+                }
+                return {
+                    id:item.id,
+                    groupId:layer.value,
+                    pakFilePath:layer.pakFilePath,
+                    assetPath:layer.assetPath,
+                    coordinateType:layer.coordinateType?layer.coordinateType:0,
+                    location:item.position,
+                    scale:layer.scale,
+                    rotation:[0,90,0]
+
+                }
+            });
+            this.player.api.customObject.add(datas,(data)=>{
+                if(data.resultMessage==="OK"){
+                    if(layer.value.indexOf("car")<0){
+                        result.forEach(async (item)=>{
+                            let res = await this.player.api.misc.getBPFunction(layer.assetPath);
+                            console.log(res,item)
+                            if(layer.value==="safe-goods"){
+                                this.player.api.customObject.callBatchBPFunction([{
+                                    id: item.id,
+                                    functionName: '数据',
+                                    parameters: [
+                                        { "paramType": 5, "paramValue": item.remark},
+                                        { "paramType": 6, "paramValue": [1,1,1,1] },
+                                    ]
+                                },{
+                                    id: item.id,
+                                    functionName: '文字',
+                                    parameters: [
+                                        { "paramType": 5, "paramValue": item.name},
+                                        { "paramType": 5, "paramValue": ""},
+                                        { "paramType": 6, "paramValue": [1,1,1,1] },
+                                        { "paramType": 6, "paramValue": [0, 0.3, 1, 1] },
+                                    ]
+                                }],(data)=>{
+                                    console.error("物资盘点的marker点位供应商方面有问题  无法修改  预计五月底修复  产品经理说先放着不改文字")
+                                });
+                            }else if (layer.value==="safe-building" || layer.value==="check-point"){
+                                this.player.api.customObject.callBatchBPFunction([{
+                                    id: item.id,
+                                    functionName: '文字',
+                                    parameters: [
+                                        { "paramType": 5, "paramValue": item.name},
+                                        { "paramType": 2, "paramValue": 48 },
+                                        { "paramType": 6, "paramValue": [0,1,0.000774,1] },
+                                        { "paramType": 3, "paramValue": 1 }
+                                    ]
+                                },{
+                                    id: item.id,
+                                    functionName: '数据',
+                                    parameters: [
+                                        { "paramType": 5, "paramValue": item.remark},
+                                        { "paramType": 2, "paramValue": 150 },
+                                    ]
+                                }]);
+                            }else{
+                                this.player.api.customObject.callBatchBPFunction([{
+                                    id: item.id,
+                                    functionName: '文字',
+                                    parameters: [
+                                        { "paramType": 5, "paramValue": layer.name+"作业"},
+                                        { "paramType": 2, "paramValue": 48},
+                                        { "paramType": 6, "paramValue": [1,1,1,1] },
+                                    ]
+                                }],(data)=>{
+                                    console.log(data)
+                                });
+                            }
+                        })
+                    }
+                    layer.ids = result.map(item=>item.id)
+                }
+            })
+        }else{
+            if(layer.selected){
+                this.player.api.customObject.show(layer.ids)
+            }else{
+                this.player.api.customObject.hide(layer.ids)
+            }
+        }
+    }
+
+
+    // 热力图
+    public async addHeatMap(layer) {
+        if(!layer.ids.length){
+            const range = [0, 100];
+            const data = [] as any;
+            const bbox = [
+                13312554.24,
+                4098064.96,
+                0,
+                13313446.4,
+                4098892.48,
+                0
+            ]
+            for (let i = 0; i < 100; i++) {
+                const x = getRandNumBetween(bbox[0], bbox[3]);    //minX ~ maxX
+                const y = getRandNumBetween(bbox[1], bbox[4]);    //minY ~ maxY
+                data.push({
+                    id: i.toString(),
+                    coordinate: [x, y, 0],                 //热力点的坐标
+                    radius: Math.random() * 30,           //热力点影像半径范围
+                    heatValue: Math.random() * 100        //热力值
+                });
+            }
+            this.player.api.heatmap.add('heatmap', bbox, range, data);
+            layer.ids.push("heatmap")
+        }else{
+            if(layer.selected){
+                this.player.api.heatmap.show(layer.ids)
+            }else{
+                this.player.api.heatmap.hide(layer.ids)
+            }
+        }
+
+
+    }
+
+    // 添加逃生路线
+
+    public async addRoute(layer){
+
+        if(!layer.ids.length){
+            const result = this.dataList[layer.value].map(item=>{
+                return {
+                    id:item.id,
+                    groupId:layer.value,
+                    coordinates:item.positions,
+                    thickness:5,
+                    shape:0,
+                    flowRate:0.1,
+                    color:layer.color,
+                    style:0,
+                }
+            });
+            this.player.api.polyline.add(result,(data)=>{
+                if(data.resultMessage==="OK"){
+                    layer.ids = result.map(item=>item.id)
+                }
+            })
+        }else{
+            if(layer.selected){
+                this.player.api.polyline.show(layer.ids)
+            }else{
+                this.player.api.polyline.hide(layer.ids)
+            }
+        }
+    }
+
+
+    public toggleLayerAssets(layer){
+        if(layer.type === "area"){
+            this.toggleArea(layer)
+            return
+        }
+        if(layer.type === "line"){
+            this.addRoute(layer)
+            return
+        }
+        if(layer.type === "heatmap"){
+            this.addHeatMap(layer)
+            return
+        }
+        if(layer.type==="areaMarker"){
+            this.toggleAreaMarker(layer)
+            return
+        }
+        if(layer.type==="moveMarker"){
+            this.toggleMoveMarker(layer)
+            return
+        }
+        if(layer.type==="model"){
+            this.toggleCustom(layer)
+            return
+        }
+        if(layer.type==="marker"){
+            this.toggleMarker(layer)
+        }
+    }
+
+
+    public onFocus(data){
+        this.player.api[data.type].focus(data.id)
+    }
+
+
+
+    // 组件渲染完成
+    mounted() {
+        console.log(1)
+    }
+    beforeDestory(){
+    }
+    destroyed(){
+        this.layerData.forEach(item=>{
+            if(item.type){
+                this.player.api[item.type].clear()
+            }
+            if(this.timerList[item.value]){
+                clearInterval(this.timerList[item.value]);
+                this.timerList[item.value] = null;
+            }
+
+        })
+    }
+
+
+}
diff --git a/src/views/overview.component.html b/src/views/overview.component.html
new file mode 100644
index 0000000..685e441
--- /dev/null
+++ b/src/views/overview.component.html
@@ -0,0 +1,506 @@
+<div class="overview-container">
+    <div class="fix-tab-box" v-if="currentNav === 'dangrousCar' ">
+        <el-radio :label="index" class="tab" v-model="currentPark" @input="parkChange" v-for="(item,index) in parkList"
+            :key="index">{{item}}</el-radio>
+    </div>
+
+  <MapComponent id="map" @onLoaded="getMap" @onHandleChange="handleChange"></MapComponent>
+
+    <div class="bg-box left animate__animated">
+        <div class="panel-container">
+            <!--环保首页左侧-->
+            <env-index-left-component v-if="currentNav === 'smartEnvironment'"
+                class="animate__animated animate__fadeInLeft" @get-item="getItem"></env-index-left-component>
+            <!--环保大气左侧-->
+            <air-left-component v-if="currentNav === 'airQuality'" class="animate__animated animate__fadeInLeft"
+                @get-item="getItem"></air-left-component>
+            <!--环保土壤左侧-->
+            <soil-left-component v-if="currentNav === 'soilQuality'" @get-item="getItem"
+                class="animate__animated animate__fadeInLeft"></soil-left-component>
+            <!--环保特征污染物左侧-->
+            <special-left-component v-if="currentNav === 'characteristicContaminants'" @get-item="getItem"
+                class="animate__animated animate__fadeInLeft"></special-left-component>
+            <!--环保水环境左侧-->
+            <water-left-component v-if="currentNav === 'waterQuality'" @get-item="getItem"
+                class="animate__animated animate__fadeInLeft"></water-left-component>
+            <!--环保废气左侧-->
+            <gas-left-component v-if="currentNav === 'gas'" @get-item="getItem"
+                                @getCompany="getCompany"
+                class="animate__animated animate__fadeInLeft"></gas-left-component>
+            <!--环保废水左侧-->
+            <waste-left-component v-if="currentNav === 'waste'" @getCompany="getCompany" @get-item="getItem"
+                class="animate__animated animate__fadeInLeft"></waste-left-component>
+            <!--环保清下水左侧-->
+            <clean-left-component v-if="currentNav === 'clean'" @get-item="getItem"
+                                  @getCompany="getCompany"
+                class="animate__animated animate__fadeInLeft"></clean-left-component>
+            <!--安监首页左侧-->
+            <SafetyIndexLeftComponent v-if="currentNav === 'smartSafetySupervision'" @get-item="getItem"
+                class="animate__animated animate__fadeInLeft"></SafetyIndexLeftComponent>
+            <!--安监风险左侧-->
+            <RiskIndexLeftComponent @show-right="showRiskRight" v-if="currentNav === 'risk'"
+                 class="animate__animated animate__fadeInLeft"></RiskIndexLeftComponent>
+
+            <CloseParkHomeLeftComponent @get-item="getItem" v-if="currentNav === 'closePark' ">
+            </CloseParkHomeLeftComponent>
+            <!-- 封闭园区人车管理 -->
+            <CloseParkPeopleCarLeftComponent @showList="showList" @emitPersonPop="emitPersonPop"
+                @emitCarPop="emitCarPop" v-if="currentNav === 'peopleCar' "></CloseParkPeopleCarLeftComponent>
+            <!-- 封闭园区危化车辆 -->
+            <CloseParkDangrousCarLeftComponent v-if="currentNav === 'dangrousCar' "></CloseParkDangrousCarLeftComponent>
+            <!-- 封闭园区周界管理 -->
+            <CloseParBoundsLeftComponent @get-item="getItem" @onSelect="openVideo($event)"
+                v-if="currentNav === 'boundsManager' "></CloseParBoundsLeftComponent>
+            <!-- 一园一档 -->
+            <ParkFileLeftComponent v-if="currentNav === 'parkFile' "></ParkFileLeftComponent>
+            <!-- 一企一档 -->
+            <CompanyFileLeftComponent @onSelect="selectCompany($event)" v-if="currentNav === 'companyFile' "></CompanyFileLeftComponent>
+            <!--安监特殊作业-->
+            <SpecialOperationLeftComponent class="animate__animated animate__fadeInLeft" @show-right="showSepRight" v-if="currentNav === 'dangerousWork' ">
+            </SpecialOperationLeftComponent>
+            <!--隐患治理-->
+            <HiddenDangerLeftComponent class="animate__animated animate__fadeInLeft" @show-right="showHiddenRight" v-if="currentNav === 'pitfall' ">
+            </HiddenDangerLeftComponent>
+            <!--能源首页-->
+            <EnergyIndexLeftComponent class="animate__animated animate__fadeInLeft" @get-item="getItem" v-if="currentNav === 'smartEnergy' ">
+            </EnergyIndexLeftComponent>
+            <!--燃料一张图-->
+            <EnergyGasLeftComponent class="animate__animated animate__fadeInLeft" v-if="currentNav === 'gasConsumption' "></EnergyGasLeftComponent>
+            <!--电力一张图-->
+            <ElectricityLeftComponent class="animate__animated animate__fadeInLeft" v-if="currentNav === 'electricityConsumption' "></ElectricityLeftComponent>
+            <!--水务一张图-->
+            <EnergyWaterLeftComponent class="animate__animated animate__fadeInLeft" v-if="currentNav === 'waterConsumption' "></EnergyWaterLeftComponent>
+
+            <!--蒸汽一张图-->
+            <SteamLeftComponent class="animate__animated animate__fadeInLeft" v-if="currentNav === 'steamConsumption' "></SteamLeftComponent>
+            <!--应急首页-->
+            <EmergencyHomeLeftComponent class="animate__animated animate__fadeInLeft" @get-item="getEmergencyEvent" v-if="currentNav === 'smartEmergency' && !showPlanFlag && !showControlFlag &&!showAfterwardsFlag">
+            </EmergencyHomeLeftComponent>
+            <!--应急plan-->
+            <EmergencyPlanLeftComponent :info="info" @changePoint="changePoint" @gotoNext="showControl" class="animate__animated animate__fadeInLeft" v-if="currentNav === 'smartEmergency' && showPlanFlag "></EmergencyPlanLeftComponent>
+            <!--应急控制-->
+            <ControlLeftComponent :info="info" @changePoint="changePoint" @gotoNext="showAfterwards" class="animate__animated animate__fadeInLeft" v-if="currentNav === 'smartEmergency' && showControlFlag "></ControlLeftComponent>
+            <!--善后-->
+            <AfterwardsLeftComponent :info="info" @changePoint="changePoint" @gotoNext="showHome" class="animate__animated animate__fadeInLeft" v-if="currentNav === 'smartEmergency' && showAfterwardsFlag "></AfterwardsLeftComponent>
+            <!--物资-->
+            <GoodsHomeLeftComponent  @showList="showGoodsList" class="animate__animated animate__fadeInLeft" v-if="currentNav === 'goods'"></GoodsHomeLeftComponent>
+        </div>
+    </div>
+    <div class="bg-box right main animate__animated" :class="showBackGround">
+        <div class="panel-container" v-if="showMainRight">
+            <!--环保首页右侧-->
+            <env-index-right-component v-if="currentNav === 'smartEnvironment'"
+                class="animate__animated animate__fadeInRight"></env-index-right-component>
+
+            <!--环保大气右侧-->
+            <air-right-component v-if="currentNav === 'airQuality'"
+                                 :top5Data="dataList['gas-env']"
+                                 @clickBar="clickBar"
+                                 class="animate__animated animate__fadeInRight"></air-right-component>
+
+            <!--环保土壤右侧-->
+            <soil-right-component v-if="currentNav === 'soilQuality'"
+                                  @clickBar="clickBar"
+                                  class="animate__animated animate__fadeInRight"></soil-right-component>
+
+            <!--环保特征污染物右侧-->
+            <special-right-component v-if="currentNav === 'characteristicContaminants'"
+                                     @clickBar="clickBar"
+                                     class="animate__animated animate__fadeInRight"></special-right-component>
+
+            <!--环保水环境右侧-->
+            <water-right-component v-if="currentNav === 'waterQuality'" class="animate__animated animate__fadeInRight">
+            </water-right-component>
+
+            <!--环保废气右侧-->
+            <gas-right-component v-if="currentNav === 'gas'" class="animate__animated animate__fadeInRight">
+            </gas-right-component>
+
+            <!--环保废水右侧-->
+            <waste-right-component v-if="currentNav === 'waste'" class="animate__animated animate__fadeInRight">
+            </waste-right-component>
+
+            <!--环保清下水右侧-->
+            <clean-right-component v-if="currentNav === 'clean'" class="animate__animated animate__fadeInRight">
+            </clean-right-component>
+
+            <CloseParkHomeRightComponent v-if="currentNav === 'closePark' "></CloseParkHomeRightComponent>
+            <!--安监首页右侧-->
+            <SafetyIndexRightComponent class="animate__animated animate__fadeInRight"
+                v-if="currentNav === 'smartSafetySupervision' "></SafetyIndexRightComponent>
+            <CloseParkPeopleCarRightComponent v-if="currentNav === 'peopleCar' "></CloseParkPeopleCarRightComponent>
+            <!-- 封闭园区危化车辆 -->
+            <CloseParkDangrousCarRightComponent @showList="showList" v-if="currentNav === 'dangrousCar' ">
+            </CloseParkDangrousCarRightComponent>
+            <!-- 封闭园区周界管理 -->
+            <CloseParBoundsRightComponent v-if="currentNav === 'boundsManager' "></CloseParBoundsRightComponent>
+            <!-- 一园一档 -->
+            <ParkFileRightComponent v-if="currentNav === 'parkFile' "></ParkFileRightComponent>
+            <!-- 一企一档 -->
+            <CompanyFileRightComponent v-if="currentNav === 'companyFile' "></CompanyFileRightComponent>
+            <!--安监特殊作业-->
+            <SpecialOperationRightComponent class="animate__animated animate__fadeInRight"
+                v-if="currentNav === 'dangerousWork' "></SpecialOperationRightComponent>
+            <!--隐患治理-->
+            <HiddenDangerRightComponent class="animate__animated animate__fadeInRight" v-if="currentNav === 'pitfall' "></HiddenDangerRightComponent>
+            <!--能源首页-->
+            <EnergyRightComponent class="animate__animated animate__fadeInRight" v-if="currentNav === 'smartEnergy' "></EnergyRightComponent>
+            <!--燃料一张图右侧-->
+            <EnergyGasRightComponent class="animate__animated animate__fadeInRight" v-if="currentNav === 'gasConsumption' "></EnergyGasRightComponent>
+            <!--电力一张图右侧-->
+            <ElectricityRightComponent class="animate__animated animate__fadeInRight" v-if="currentNav === 'electricityConsumption' "></ElectricityRightComponent>
+            <!--水务一张图-->
+            <EnergyWaterRightComponent class="animate__animated animate__fadeInRight" v-if="currentNav === 'waterConsumption' "></EnergyWaterRightComponent>
+            <!--蒸汽一张图-->
+            <SteamRightComponent class="animate__animated animate__fadeInRight" v-if="currentNav === 'steamConsumption' "></SteamRightComponent>
+            <!--应急首页-->
+            <SmartEmergencyRightComponent @showPlan="showPlan" @showDetail="showConfirm"  class="animate__animated animate__fadeInRight" v-if="currentNav === 'smartEmergency'  && !showPlanFlag && !showControlFlag && !showAfterwardsFlag"></SmartEmergencyRightComponent>
+            <!--应急plan-->
+            <SmartEmergencyPlanRightComponent :info="info" @focusGood="focusGood"  @openVideo="openVideo" class="animate__animated animate__fadeInRight" v-if="currentNav === 'smartEmergency' && showPlanFlag "></SmartEmergencyPlanRightComponent>
+            <!--应急控制-->
+            <ControlRightComponent :info="info"  @openVideo="openVideo" class="animate__animated animate__fadeInRight" v-if="currentNav === 'smartEmergency' && showControlFlag "></ControlRightComponent>
+            <!--善后-->
+            <AfterwardsRightComponent  @openVideo="openVideo" :info="info" class="animate__animated animate__fadeInRight" v-if="currentNav === 'smartEmergency' && showAfterwardsFlag "></AfterwardsRightComponent>
+            <!--物资-->
+            <GoodsRightComponent class="animate__animated animate__fadeInRight" v-if="currentNav === 'goods'"></GoodsRightComponent>
+        </div>
+        <div class="panel-container" v-else>
+
+            <!-- 特殊作业详情-->
+            <SepDetailComponent v-if="sepRightFlag" class="animate__animated animate__fadeInRight"
+                @change-close="closeSepDetailRight" :detailData="sepDetailData">
+            </SepDetailComponent>
+            <!--    右侧告警信息盒子-->
+            <pop-component v-if="popFlag" class="animate__animated animate__fadeInRight" @change-close="closePop">
+                <WarningDetailComponent @getHazard="getHazard" @changePoint="changePoint" :info="info" @deal="deal"></WarningDetailComponent>
+            </pop-component>
+            <!--风险详情-->
+            <RiskIndexRightComponent class="animate__animated animate__fadeInRight" @change-close="closeRiskRight"
+                @get-hazard="getHazard" :riskDetailData="riskDetailData" v-if="riskFlag">
+            </RiskIndexRightComponent>
+            <!--            危险源详情-->
+            <RiskDetailRightComponent v-if="riskDetailFlag" class="animate__animated animate__fadeInRight"
+                @change-close="closeRiskDetailRight" :riskDetailData="dangerSourceDetail">
+            </RiskDetailRightComponent>
+            <!--            隐患详情-->
+            <HiddenDangerDetailComponent v-if="showHiddenRightFlag" @show-risk="showRisk"
+                @change-close="closeHiddenDetailRight" :detailData="hiddenDetailData"
+                class="animate__animated animate__fadeInRight"></HiddenDangerDetailComponent>
+            <!--            右侧列表-->
+            <RightListComponent @close="closeRight" :dataList="dataListRight" v-if="rightListFlag"
+                class="animate__animated animate__fadeInRight"></RightListComponent>
+            <!--            确认警情-->
+            <ConfirmComponent :info="info" @changePoint="changePoint" v-if="showConfirmFlag" @hideConfirm="hideConfirm" @showJudgmentFlag="showJudgmentFlag"
+                class="animate__animated animate__fadeInRight"></ConfirmComponent>
+            <!--            确认警情-->
+            <JudgmentComponent @deal="hideJudgmentFlag" @changePoint="changePoint" :infoData="info" v-if="judgmentFlag"
+                class="animate__animated animate__fadeInRight"></JudgmentComponent>
+            <!--            物资详情-->
+            <StoreGoodsComponent  v-if="storeGoodsFlag" @changeClose="hidePop"
+                class="animate__animated animate__fadeInRight"></StoreGoodsComponent>
+        </div>
+    </div>
+
+
+    <div class="fixed-btn" @click="resetMap">
+        <hbt-svg name="fixed"></hbt-svg>
+    </div>
+    <div class="layer-btn-box" :style="{height:openLayerDrawer?(currentLayers.length+1) * 50+'px':'50px'}">
+        <div class="layer-btn" :class="{active:item.selected}" v-show="openLayerDrawer"
+            v-for="(item,index) in currentLayers" :key="index">
+            <el-tooltip effect="dark" :content="item.name" placement="left">
+                <hbt-svg :name="item.value" @click="toggleLayer(item)"></hbt-svg>
+            </el-tooltip>
+        </div>
+        <div class="layer-btn">
+            <hbt-svg name="layer" @click="toggleHeight"></hbt-svg>
+        </div>
+    </div>
+    <!--    处理报警消息弹窗-->
+    <deal-pop-up-component @submit-data="dealSubmit" :dialogVisible.sync="dialogVisible"></deal-pop-up-component>
+    <!--    大号弹窗组件-->
+    <PermitPopUpComponent :title="bigPopTitle" :dialogVisibleForBigPop.sync="dialogVisibleForBigPop"
+        @onClose="closeCarPersonPop">
+
+        <!--    许可证弹窗 勿删-->
+        <!--        <div class="permit-info-content">
+            <div class="info">
+                <div>证书编号：XXXXXXXXXX</div>
+                <div>有效期限：2022年12月— 2025年12月</div>
+                <div>获奖单位：XXX有限公司</div>
+                <div>责任单位：XXX环境保护局</div>
+            </div>
+            <div class="permit-tb tb-style">
+                <el-table
+                        :data="tableDataForPermit"
+                        :span-method="objectSpanMethod"
+                        border>
+                    <el-table-column
+                            prop="id"
+                            label="排放口编号"
+                            width="95">
+                    </el-table-column>
+                    <el-table-column
+                            prop="name"
+                            width="95"
+                            label="排放口名称">
+                    </el-table-column>
+                    <el-table-column
+                            prop="type"
+                            width="100"
+                            label="污染物种类">
+                    </el-table-column>
+                    <el-table-column
+                            prop="unit"
+                            width="150"
+                            label="许可浓度（mg/L）">
+                    </el-table-column>
+                    <el-table-column label="许可排放量限值">
+                        <el-table-column
+                                prop="year1"
+                                label="2021年">
+                        </el-table-column>
+                        <el-table-column
+                                prop="year2"
+                                label="2022年">
+                        </el-table-column>
+                        <el-table-column
+                                prop="year3"
+                                label="2023年">
+                        </el-table-column>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>-->
+        <el-collapse v-if="bigPopTitle === '人员信息卡'" v-model="activeNames" accordion>
+            <el-collapse-item title="人员信息" name="1">
+                <div class="d-flex item-content">
+                    <img class="avatar-style" src="~@/assets/img/avatar.jpg" alt="">
+                    <div>
+                        <div class="collapse-top">
+                            <span>贺丽</span>
+                            <span>（访客）</span>
+                            <img class="margin-left-40" src="~@/assets/img/phone.png" alt="">
+                            <span>联系方式：18020101697</span>
+                        </div>
+                        <div class="collapse-bottom">
+                            <span>性别：女</span>
+                            <span>所属单位：北京汉邦唐科技有限公司</span>
+                            <span>职务：设备运维</span>
+                            <span>年龄：25岁</span>
+                        </div>
+                    </div>
+                </div>
+
+            </el-collapse-item>
+            <el-collapse-item title="申报信息" name="2">
+                <div class="info-content">
+                    <span>访问企业：中国石化有限公司</span>
+                    <span>对接人：张敏</span>
+                    <span class="d-flex align-items-center"><img src="~@/assets/img/phone.png"
+                            alt="">联系方式：18020101697</span>
+                    <span>访问事项：考察</span>
+                    <span>访问时间：20223年2月4日 12:00</span>
+                </div>
+
+            </el-collapse-item>
+            <el-collapse-item title="关联车辆" name="3">
+                <div class="info-content">
+                    <span>车辆类型：公司车辆</span>
+                    <span>车牌号：苏A45W34</span>
+                    <span>行为分：10分</span>
+                    <span>所属人员：马莉</span>
+                </div>
+            </el-collapse-item>
+            <el-collapse-item title="电子运单" name="4">
+                <div class="d-flex order-content">
+                    <img class="code" src="~@/assets/img/code.jpg" alt="">
+                    <div>
+                        <h3>运单编号：KEA123456771000</h3>
+                        <div class="d-flex flex-wrap order-content-item">
+                            <span>托运人：邵康杰 (18020101697)</span>
+                            <span>收货人：邵康杰 (18020101697)</span>
+                            <span>装货公司：汉邦唐 (18020101697)</span>
+                            <span>承运人：顺丰 (18020101697)</span>
+                        </div>
+                        <div class="d-flex flex-wrap order-content-item margin-bottom-10">
+                            <span>起运日期：2023-02-23</span>
+                            <span>起运地：江苏省南京市高淳区</span>
+                            <span>城市配送：是</span>
+                            <span>目的地：北京市天安门</span>
+                        </div>
+                        <div class="card-info">
+                            <div class="card-info-book">
+                                <img src="~@/assets/img/search-icon.png" alt="">
+                                <span>化学安全说明书</span>
+                            </div>
+                            <el-collapse>
+                                <el-collapse-item title="危险货物运输名称：硫酸" name="1">
+                                    <div class="d-flex flex-wrap goods-info">
+                                        <span>货物编号：123312323</span>
+                                        <span>UN编号：1233454545545</span>
+                                        <span>类别：腐蚀品</span>
+                                        <span>包装类别：一类包装</span>
+                                        <span>数量：5</span>
+                                        <span>单位：吨</span>
+                                        <span>包装规格：罐车</span>
+                                    </div>
+                                </el-collapse-item>
+                            </el-collapse>
+                        </div>
+                    </div>
+                </div>
+
+            </el-collapse-item>
+        </el-collapse>
+        <el-collapse v-if="bigPopTitle === '车辆信息卡'" v-model="activeNames" accordion>
+            <el-collapse-item title="车辆信息" name="1">
+                <div class="info-content">
+                    <span>车辆类型：公司车辆</span>
+                    <span>车牌号：苏A45W34</span>
+                    <span>行为分：10分</span>
+                </div>
+                <!--                <div class="d-flex item-content">
+                    <img class="avatar-style" src="~@/assets/img/avatar.jpg" alt="">
+                    <div>
+                        <div class="collapse-top">
+                            <span>贺丽</span>
+                            <span>（访客）</span>
+                            <img class="margin-left-40" src="~@/assets/img/phone.png" alt="">
+                            <span>联系方式：18020101697</span>
+                        </div>
+                        <div class="collapse-bottom">
+                            <span>性别：女</span>
+                            <span>所属单位：北京汉邦唐科技有限公司</span>
+                            <span>职务：设备运维</span>
+                            <span>年龄：25岁</span>
+                        </div>
+                    </div>
+                </div>-->
+            </el-collapse-item>
+            <el-collapse-item title="所属人员" name="2">
+                <div class="info-content">
+                    <span>所属人员：马莉</span>
+                    <span class="d-flex align-items-center"><img src="~@/assets/img/phone.png"
+                            alt="">联系方式：18020101697</span>
+                </div>
+
+            </el-collapse-item>
+            <el-collapse-item title="申报信息" name="3">
+                <div class="info-content">
+                    <span>访问企业：中国石化有限公司</span>
+                    <span>对接人：张敏</span>
+                    <span class="d-flex align-items-center"><img src="~@/assets/img/phone.png"
+                            alt="">联系方式：18020101697</span>
+                    <span>访问事项：考察</span>
+                    <span>访问时间：20223年2月4日 12:00</span>
+                </div>
+            </el-collapse-item>
+            <el-collapse-item title="电子运单" name="4">
+                <div class="d-flex order-content">
+                    <img class="code" src="~@/assets/img/code.jpg" alt="">
+                    <div>
+                        <h3>运单编号：KEA123456771000</h3>
+                        <div class="d-flex flex-wrap order-content-item">
+                            <span>托运人：邵康杰 (18020101697)</span>
+                            <span>收货人：邵康杰 (18020101697)</span>
+                            <span>装货公司：汉邦唐 (18020101697)</span>
+                            <span>承运人：顺丰 (18020101697)</span>
+                        </div>
+                        <div class="d-flex flex-wrap order-content-item margin-bottom-10">
+                            <span>起运日期：2023-02-23</span>
+                            <span>起运地：江苏省南京市高淳区</span>
+                            <span>城市配送：是</span>
+                            <span>目的地：北京市天安门</span>
+                        </div>
+                        <div class="card-info">
+                            <div class="card-info-book">
+                                <img src="~@/assets/img/search-icon.png" alt="">
+                                <span>化学安全说明书</span>
+                            </div>
+                            <el-collapse>
+                                <el-collapse-item title="危险货物运输名称：硫酸" name="1">
+                                    <div class="d-flex flex-wrap goods-info">
+                                        <span>货物编号：123312323</span>
+                                        <span>UN编号：1233454545545</span>
+                                        <span>类别：腐蚀品</span>
+                                        <span>包装类别：一类包装</span>
+                                        <span>数量：5</span>
+                                        <span>单位：吨</span>
+                                        <span>包装规格：罐车</span>
+                                    </div>
+                                </el-collapse-item>
+                            </el-collapse>
+                        </div>
+                    </div>
+                </div>
+
+            </el-collapse-item>
+        </el-collapse>
+    </PermitPopUpComponent>
+    <div class="new-page" v-if="newPageData">
+        <PicComponent :data.sync="newPageData" ></PicComponent>
+    </div>
+    <div class="top-bg">
+        <HeaderComponent @onDrawer="drawerChange($event)" @onNavChanged="navChange($event)"></HeaderComponent>
+    </div>
+
+    <!-- 企业弹窗 -->
+    <div class="pop-box" v-if="currentCompany">
+        <div class="close" @click="currentCompany=false">×</div>
+        <div class="border l-t"></div>
+        <div class="border r-t"></div>
+        <div class="border r-b"></div>
+        <div class="border l-b"></div>
+        <div class="title">{{currentCompany.name}}</div>
+        <div class="block">主要污染物：多环芳烃</div>
+        <div class="block flex-box">
+            <div class="flex-panel">
+                <div class="count">2</div>
+                <p>重大危险源</p>
+            </div>
+            <div class="flex-panel">
+                <div class="count">32</div>
+                <p>风险项</p>
+            </div>
+            <div class="flex-panel">
+                <div class="count">10</div>
+                <p>隐患</p>
+            </div>
+            <div class="flex-panel">
+                <div class="count">1</div>
+                <p>特殊作业</p>
+            </div>
+        </div>
+
+        <div class="block flex-box">
+            <div class="flex-panel half">
+                <hbt-svg name="tc_renyuan"></hbt-svg>
+                人员：200
+            </div>
+            <div class="flex-panel half">
+                <hbt-svg name="tc_cheliang"></hbt-svg>
+                车辆：50
+            </div>
+        </div>
+
+        <div class="block flex-box" style="border-bottom: none;">
+            <div class="flex-panel half" style="margin-bottom: 20px;">
+                <hbt-svg name="tc_yongshui"></hbt-svg>
+                用水：3000
+            </div>
+            <div class="flex-panel half" style="margin-bottom: 20px;">
+                <hbt-svg name="tc_yongdian"></hbt-svg>
+                用电：3000
+            </div>
+            <div class="flex-panel half">
+                <hbt-svg name="tc_ranliao"></hbt-svg>
+                燃料：300
+            </div>
+            <div class="flex-panel half">
+                <hbt-svg name="tc_zhengqi"></hbt-svg>
+                蒸汽：300
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/views/overview.component.scss b/src/views/overview.component.scss
new file mode 100644
index 0000000..16d6e32
--- /dev/null
+++ b/src/views/overview.component.scss
@@ -0,0 +1,500 @@
+.layui-layer{
+  background: none;
+}
+.layui-layer-title{
+  color: #FFF;
+  background-color: rgba(0,0,0,0.6);
+}
+.layui-layer-ico{
+  background: none;
+  &::after{
+    content: "×";
+    color: #FFF;
+    top: -12px;
+    font-size: 26px;
+    position: relative;
+  }
+}
+.overview-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .new-page{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    position: absolute;
+    left:0;
+    top: 0;
+    z-index: 9;
+    background-color: #0d151e;
+  }
+  .pop-box{
+    width: 430px;
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    border: 1px solid #FFFFFF;
+    background: rgba($color: #000000, $alpha: 0.6);
+    color: #E8E8E8;
+    padding: 30px;
+    font-size: 14px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    .border{
+        width: 8px;
+        height: 8px;
+        position: absolute;
+        border-left: 1px solid #FFF;
+        border-top: 1px solid #FFF;
+        &.l-t{
+            top: 10px;
+            left: 10px;
+        }
+        &.r-t{
+            top: 10px;
+            right: 10px;
+            transform: rotate(90deg);
+        }
+        &.r-b{
+            bottom: 10px;
+            right: 10px;
+            transform: rotate(180deg);
+        }
+        &.l-b{
+            bottom: 10px;
+            left: 10px;
+            transform: rotate(270deg);
+        }
+    }
+    .title{
+        font-size: 16px;
+    }
+    .close{
+      position: absolute;
+      cursor: pointer;
+      right: 20px;
+      top: 20px;
+      color: #FFF;
+      font-size: 26px;
+    }
+    .block{
+      padding: 20px 0;
+      line-height: 100%;
+      border-bottom: 1px solid rgba($color: $border-color, $alpha: 0.4);
+      &.flex-box{
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+      }
+      .flex-panel{
+        width: 70px;
+        text-align: center;
+        line-height: 100%;
+        svg{
+          font-size: 15px;
+        }
+        &.half{
+          width: 50%;
+          text-align: left;
+        }
+        p{
+          line-height: 100%;
+          margin-bottom: 10px;
+        }
+        .count{
+          padding: 10px 0;
+          font-size: 20px;
+          margin-bottom: 10px;
+          border-bottom: 1px solid rgba($color: $border-color, $alpha: 0.6);
+          position: relative;
+          &::after{
+            content: "";
+            width: 4px;
+            height: 4px;
+            border: 1px solid rgba($color: $border-color, $alpha: 0.6);
+            border-radius: 50%;
+            position: absolute;
+            display: block;
+            right: -5px;
+            bottom: -3px;
+
+          }
+        }
+      }
+    }
+  }
+
+  .fix-tab-box{
+    display: inline-flex;
+    align-items: center;
+    height: 40px;
+    background: rgba($color: #000000, $alpha: 0.7);
+    border-radius: 20px;
+    padding-right: 80px;
+    position: fixed;
+    top: 100px;
+    z-index: 99;
+    left: 50%;
+    transform: translateX(-50%);
+    .tab{
+        margin-left: 80px;
+    }
+    .el-radio{
+        color: $font-color;
+    }
+  }
+
+  #map {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg-box {
+    width: 540px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    z-index: 9;
+    pointer-events: none;
+    animation-duration: 1s;
+
+    &.left {
+      left: 0;
+      padding-left: 50px;
+      padding-right: 160px;
+      background: linear-gradient(270deg, rgba(51, 51, 51, 0) 0%, rgba(11, 11, 11, 0.5) 24%, rgba(0, 0, 0, 0.8) 100%);
+    }
+
+    &.right {
+      right: 0;
+      padding-right: 50px;
+      padding-left: 160px;
+      background: linear-gradient(90deg, rgba(51, 51, 51, 0) 0%, rgba(11, 11, 11, 0.5) 31%, rgba(0, 0, 0, 0.8) 100%);
+
+    }
+    &.right.none{
+      background: none;
+    }
+    .panel-container {
+      //width: 330px;
+      height: 100%;
+      padding: 100px 0 50px;
+      pointer-events: auto;
+      position: relative;
+    }
+  }
+
+  .top-bg {
+    width: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    z-index: 9;
+    pointer-events: none;
+    height: 90px;
+    background: linear-gradient(180deg, #333333 0%, rgba(51, 51, 51, 0) 100%);
+  }
+
+  .fixed-btn {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    bottom: 60px;
+    right: 540px;
+    font-size: 26px;
+    cursor: pointer;
+    color: $font-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba($color: #000000, $alpha: 0.3);
+    border-radius: 4px;
+    transition: right 1s;
+  }
+
+  .layer-btn-box {
+    width: 50px;
+    position: absolute;
+    bottom: 60px;
+    right: 440px;
+    font-size: 26px;
+    cursor: pointer;
+    color: $font-color;
+    background: rgba($color: #000000, $alpha: 0.3);
+    border-radius: 4px;
+    height: 50px;
+    z-index: 9;
+    overflow: hidden;
+    transition: all 1s;
+
+    .layer-btn {
+      width: 50px;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      &.active {
+        &::after {
+          width: 32px;
+          height: 32px;
+          border: 1px solid #B5DCFF;
+          border-radius: 50%;
+          content: "";
+          top: 50%;
+          pointer-events: none;
+          left: 50%;
+          position: absolute;
+          transform: translate(-50%, -50%);
+
+        }
+      }
+    }
+  }
+
+  .info-content {
+    padding: 20px;
+    text-align: center;
+
+    .cycle-icon {
+      width: 8px;
+      height: 8px;
+    }
+    .blue {
+      background: #7FB0FF;
+    }
+
+    .yellow {
+      background: #F3D262;
+    }
+
+    .orange {
+      background: #F6974D;
+    }
+
+    .red {
+      background: #DD7171;
+    }
+    &-text {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      margin-bottom: 20px;
+
+      .label {
+        width: 80px;
+      }
+
+      .position-icon {
+        width: 16px;
+        height: 16px;
+        background: url("~@/assets/icons/png/point.png");
+        margin-left: 8px;
+
+      }
+
+      .text {
+        text-align: left;
+        &.blue {
+          color: #7FB0FF;
+          background: transparent;
+        }
+
+        &.yellow {
+          color: #F3D262;
+          background: transparent;
+        }
+
+        &.orange {
+          color: #F6974D;
+          background: transparent;
+        }
+
+        &.red {
+          color: #DD7171;
+          background: transparent;
+        }
+      }
+
+      .phone-btn {
+        width: 90px;
+        height: 24px;
+        background: rgba(255, 255, 255, 0.15);
+        border-radius: 16px;
+        border: 1px solid #FFFFFF;
+        cursor: pointer;
+        text-align: center;
+        font-size: 14px;
+        margin-left: 8px;
+      }
+    }
+
+
+
+  }
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.pop-btn-style {
+  width: 140px;
+  height: 34px;
+  border-radius: 17px 17px 17px 17px;
+  background: transparent;
+  border: 1px solid #E8E8E8;
+  font-size: 16px;
+  padding: 0;
+  margin: 0 auto;
+
+  span {
+    color: #E8E8E8;
+  }
+
+  &:hover, &:focus {
+    background: transparent;
+
+    span {
+      color: #E8E8E8 !important;
+    }
+  }
+}
+
+//表格通用样式
+.tb-style {
+  .el-table, .el-table__expanded-cell {
+    background-color: transparent;
+    color: #E8E8E8;
+
+  }
+
+  .el-table th, .el-table thead.is-group th.el-table__cell {
+    background-color: rgba(232, 232, 232, 0.5);
+    color: #E8E8E8;
+    padding: 10px 0;
+    font-weight: 400;
+  }
+
+  .el-table tr {
+    background-color: transparent;
+
+    &:nth-child(2n+1) {
+      background-color: rgba(128, 128, 128, 0.6);
+    }
+  }
+
+  .el-table .el-table__cell {
+    padding: 10px 0;
+    text-align: center;
+  }
+
+  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+    background-color: inherit;
+  }
+
+  .el-table .blue-row {
+    td {
+      &:first-child {
+        border-left: 4px solid #7FB0FF;
+      }
+    }
+
+  }
+  .el-table .yellow-row {
+    td {
+      &:first-child {
+        border-left: 4px solid #F3D262;
+      }
+    }
+
+  }
+  .el-table .orange-row {
+    td {
+      &:first-child {
+        border-left: 4px solid #F6974D;
+      }
+    }
+
+  }
+  .el-table .red-row {
+    td {
+      &:first-child {
+        border-left: 4px solid #DD7171;
+      }
+    }
+
+  }
+
+
+}
+
+//滚动条样式
+@mixin scrollStyle($width) {
+  &::-webkit-scrollbar {
+    width: $width !important;
+    height: 100% !important;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    opacity: 0.2;
+    background: #ffffff;
+  }
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+    background: transparent;
+  }
+}
+
+.permit-info-content {
+  height: 320px;
+  overflow: auto;
+  @include scrollStyle(2px);
+  padding: 0 15px;
+
+  .el-table td.el-table__cell div {
+    font-size: 12px;
+  }
+
+  .info {
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 20px;
+    padding-bottom: 10px;
+
+    div {
+      width: 40%;
+      margin-bottom: 20px;
+
+      &:nth-child(2n) {
+        width: 60%;
+      }
+    }
+  }
+}
+
+.permit-tb {
+  .el-table {
+    width: 100%;
+  }
+}
+
+.popSide {
+  width: 560px !important;
+
+  .font-size-12 {
+    font-size: 12px;
+  }
+
+  .tb-info-style {
+    margin-bottom: 20px;
+  }
+}
+
+
+
diff --git a/src/views/overview.component.ts b/src/views/overview.component.ts
new file mode 100644
index 0000000..a1db04f
--- /dev/null
+++ b/src/views/overview.component.ts
@@ -0,0 +1,999 @@
+import {Component} from 'vue-property-decorator';
+import BaseComponent from "./base.component"
+import EnvIndexLeftComponent from "../components/env/index/left/envIndexLeft.component";
+import EnvIndexRightComponent from "../components/env/index/right/envIndexRight.component";
+import AirRightComponent from "../components/env/air/right/airRight.component";
+import AirLeftComponent from "../components/env/air/left/airLeft.component";
+import SoilLeftComponent from "../components/env/soil/left/soilLeft.component";
+import SoilRightComponent from "../components/env/soil/right/soilRight.component";
+import SpecialLeftComponent from "../components/env/special/left/specialLeft.component";
+import SpecialRightComponent from "../components/env/special/right/specialRight.component";
+import WaterRightComponent from "../components/env/water/right/waterRight.component";
+import WaterLeftComponent from "../components/env/water/left/waterLeft.component";
+import GasLeftComponent from "../components/env/gas/left/gasLeft.component";
+import GasRightComponent from "../components/env/gas/right/gasRight.component";
+import WasteLeftComponent from "../components/env/waste/left/wasteLeft.component";
+import WasteRightComponent from "../components/env/waste/right/wasteRight.component";
+import CleanLeftComponent from "../components/env/clean/left/cleanLeft.component";
+import CleanRightComponent from "../components/env/clean/right/cleanRight.component";
+import PopComponent from "@/components/pop.component.vue";
+import DealPopUpComponent from "@/components/dealPopUp.component.vue";
+import PermitPopUpComponent from "@/components/permitPopUp.component.vue";
+import CloseParkHomeLeftComponent from "@/components/closePark/home/left.component.vue"
+import CloseParkHomeRightComponent from "@/components/closePark/home/right.component.vue"
+import CloseParkPeopleCarLeftComponent from "@/components/closePark/peopleCar/left.component.vue"
+import CloseParkPeopleCarRightComponent from "@/components/closePark/peopleCar/right.component.vue"
+import CloseParkDangrousCarLeftComponent from "@/components/closePark/dangrousCar/left.component.vue"
+import CloseParkDangrousCarRightComponent from "@/components/closePark/dangrousCar/right.component.vue"
+import CloseParBoundsLeftComponent from "@/components/closePark/boundsManager/left.component.vue"
+import CloseParBoundsRightComponent from "@/components/closePark/boundsManager/right.component.vue"
+import SafetyIndexLeftComponent from "../components/safety/index/left/safetyIndexLeft.component";
+import SafetyIndexRightComponent from "../components/safety/index/right/safetyIndexRight.component";
+import RiskIndexRightComponent from "../components/safety/risk/right/riskIndexRight.component";
+import RiskIndexLeftComponent from "../components/safety/risk/left/riskIndexLeft.component";
+import RiskDetailRightComponent from "../components/safety/risk/right/riskDetailRight.component";
+import ParkFileLeftComponent from "@/components/parkFile/left.component.vue"
+import ParkFileRightComponent from "@/components/parkFile/right.component.vue"
+import CompanyFileLeftComponent from "@/components/companyFile/left.component.vue"
+import CompanyFileRightComponent from "@/components/companyFile/right.component.vue"
+import PicComponent from "@/components/companyFile/pic.component.vue"
+import SpecialOperationLeftComponent from "../components/safety/specialOperation/left/specialOperationLeft.component";
+import SpecialOperationRightComponent from "../components/safety/specialOperation/right/specialOperationRight.component";
+import SepDetailComponent from "../components/safety/specialOperation/right/sepDetail.component";
+import HiddenDangerLeftComponent from "../components/safety/hiddenDanger/left/hiddenDangerLeft.component";
+import HiddenDangerRightComponent from "../components/safety/hiddenDanger/right/hiddenDangerRight.component";
+import HiddenDangerDetailComponent from "../components/safety/hiddenDanger/right/hiddenDangerDetail.component";
+import WarningDetailComponent from "@/components/warningDetail.component.vue";
+import RightListComponent from "@/components/rightList.component.vue";
+import EnergyIndexLeftComponent from "@/components/energy/index/left/energyIndexLeft.component";
+import EnergyRightComponent from "@/components/energy/index/right/energyRight.component";
+import EnergyGasLeftComponent from "@/components/energy/gas/left/energyGasLeft.component";
+import EnergyGasRightComponent from "@/components/energy/gas/right/energyGasRight.component";
+import ElectricityRightComponent from "@/components/energy/electricity/right/electricityRight.component";
+import ElectricityLeftComponent from "@/components/energy/electricity/left/electricityLeft.component";
+import EnergyWaterLeftComponent from "@/components/energy/water/left/energyWaterLeft.component";
+import EnergyWaterRightComponent from "@/components/energy/water/right/energyWaterRight.component";
+import SteamRightComponent from "@/components/energy/steam/right/steamRight.component";
+import SteamLeftComponent from "@/components/energy/steam/left/steamLeft.component";
+import EmergencyHomeLeftComponent from "@/components/smartEmergency/home/left/emergencyHomeLeft.component";
+import SmartEmergencyRightComponent from "@/components/smartEmergency/home/right/smartEmergencyRight.component";
+import EmergencyPlanLeftComponent from "@/components/smartEmergency/plan/left/emergencyPlanLeft.component";
+import SmartEmergencyPlanRightComponent from "@/components/smartEmergency/plan/right/smartEmergencyPlanRight.component";
+import ControlLeftComponent from "@/components/smartEmergency/control/left/controlLeft.component";
+import ControlRightComponent from "@/components/smartEmergency/control/right/controlRight.component";
+import AfterwardsLeftComponent from "@/components/smartEmergency/afterwards/left/afterwardsLeft.component";
+import AfterwardsRightComponent from "@/components/smartEmergency/afterwards/right/afterwardsRight.component";
+import ConfirmComponent from "@/components/smartEmergency/home/right/confirm.component.vue";
+import JudgmentComponent from "@/components/smartEmergency/home/right/judgment.component.vue";
+import GoodsHomeLeftComponent from "@/components/smartEmergency/goods/left/goodsHomeLeft.component";
+import GoodsRightComponent from "@/components/smartEmergency/goods/right/goodsRight.component";
+import StoreGoodsComponent from "@/components/smartEmergency/goods/right/storeGoods.component.vue";
+import {MockData} from "@/mock";
+
+import layer from "layui-layer"
+
+
+
+@Component({
+    components: {
+        EnvIndexLeftComponent,
+        EnvIndexRightComponent,
+        AirRightComponent,
+        AirLeftComponent,
+        SoilLeftComponent,
+        SoilRightComponent,
+        SpecialLeftComponent,
+        SpecialRightComponent,
+        WaterRightComponent,
+        WaterLeftComponent,
+        GasLeftComponent,
+        GasRightComponent,
+        WasteLeftComponent,
+        WasteRightComponent,
+        CleanLeftComponent,
+        CleanRightComponent,
+        CloseParkHomeLeftComponent,
+        CloseParkHomeRightComponent,
+        CloseParkPeopleCarLeftComponent,
+        CloseParkPeopleCarRightComponent,
+        CloseParkDangrousCarLeftComponent,
+        CloseParkDangrousCarRightComponent,
+        CloseParBoundsLeftComponent,
+        CloseParBoundsRightComponent,
+        PopComponent,
+        DealPopUpComponent,
+        PermitPopUpComponent,
+        SafetyIndexLeftComponent,
+        SafetyIndexRightComponent,
+        RiskIndexRightComponent,
+        RiskIndexLeftComponent,
+        RiskDetailRightComponent,
+        ParkFileLeftComponent,
+        ParkFileRightComponent,
+        CompanyFileLeftComponent,
+        CompanyFileRightComponent,
+        SpecialOperationLeftComponent,
+        SpecialOperationRightComponent,
+        SepDetailComponent,
+        HiddenDangerLeftComponent,
+        HiddenDangerRightComponent,
+        HiddenDangerDetailComponent,
+        WarningDetailComponent,
+        RightListComponent,
+        EnergyIndexLeftComponent,
+        EnergyRightComponent,
+        EnergyGasLeftComponent,
+        EnergyGasRightComponent,
+        ElectricityRightComponent,
+        ElectricityLeftComponent,
+        EnergyWaterLeftComponent,
+        EnergyWaterRightComponent,
+        SteamRightComponent,
+        SteamLeftComponent,
+        EmergencyHomeLeftComponent,
+        SmartEmergencyRightComponent,
+        PicComponent,
+        EmergencyPlanLeftComponent,
+        SmartEmergencyPlanRightComponent,
+        ControlLeftComponent,
+        ControlRightComponent,
+        AfterwardsLeftComponent,
+        AfterwardsRightComponent,
+        ConfirmComponent,
+        JudgmentComponent,
+        GoodsHomeLeftComponent,
+        GoodsRightComponent,
+        StoreGoodsComponent
+    }
+})
+export default class OverViewComponent extends BaseComponent {
+    //当前菜单
+    public currentNav = '';
+
+    public currentLayers = [] as any;
+
+    public parkList = ["一号停车场","二号停车场","三号停车场"];
+    public currentPark = null;
+    public warnTimer:any;
+    currentVideo  = require("@/assets/video/camera.mp4");
+    //弹出层标识
+    dialogVisible = false
+    //隐患详情
+    showHiddenRightFlag = false
+    //许可证弹窗
+    dialogVisibleForPermit = false
+    dialogVisibleForBigPop = false
+    //许可证模拟数据
+    tableDataForPermit: any[] = MockData.xkz().data
+
+    public openLayerDrawer = false;
+    //风险管控右侧控制显示隐藏
+    riskFlag = false
+    riskDetailData = {}
+    //危险源详情标记
+    riskDetailFlag = false
+    dangerSourceDetail = {}
+    public popFlag = false;
+    info: any = {}
+    // 告警列表
+    waringList: any[] = [];
+
+    // 是否显示全页新页面
+    public newPageData:any = null;
+
+    //应急准备
+    showPlanFlag = false
+    //事态控制
+    showControlFlag = false
+    //善后
+    showAfterwardsFlag = false
+    //确认警情
+    showConfirmFlag = false
+    //研判
+    judgmentFlag = false
+    //物资详细列表
+    storeGoodsFlag = false
+    public currentCarPeople:any;
+
+    public currentCompany:any = false;
+
+    created(){
+        this.getCameraList();
+        this.getCompanyList();
+        this.getBounds();
+        this.getRealBounds();
+        this.getSafeBounds();
+        this.getPlanBounds();
+        this.getSafeLine();
+        this.getStopCarList();
+        this.getGasData();
+        this.getRoilData();
+        this.getBadGasData();
+        this.getCleanWaterData();
+        this.getTzWrwData();
+        this.getBadWaterData();
+        this.getWaterEnvData();
+        this.getFourList();
+        this.getFourList2();
+        this.getCheckPoint();
+        this.getStoreList();
+        this.getBuildingList();
+        this.getDangrous();
+        this.getCarList();
+        this.getPersonList();
+        this.getHiddenDangrous();
+        this.getDangrousWorkData();
+        this.warnTimer = setInterval(()=>{
+            this.getWaringList()
+            this.upDateEventList()
+        },10000)
+    }
+
+    public getHiddenDangrous(){
+        this.parkService.getHiddenDangrous().then((res:any)=>{
+            this.dataList["hidden-dangrous"] = res.data;
+            this.$store.commit("setHiddenDangrousList",res.data)
+        })
+    }
+    public getWaringList(){
+        this.waringList = MockData.getWaringList().data
+        this.$store.commit("upDateWaringList",this.waringList)
+    }
+    public upDateEventList(){
+        const eventList = MockData.getEventList().data
+        this.$store.commit("upDateEventList",eventList)
+    }
+    //  获取车辆
+    public getCarList(){
+        this.closeService.getCarList().then((res)=>{
+            this.dataList["car"] = res.data;
+            this.$store.commit("setCarList",res.data)
+        })
+    }//  获取车辆
+    public getPersonList(){
+        this.closeService.getPeopleList().then((res)=>{
+            this.dataList["peo"] = res.data;
+            this.$store.commit("setPeopleList",res.data)
+        })
+    }
+    // 获取摄像头
+    public getCameraList(){
+        this.closeService.getCameraList().then((res)=>{
+            this.dataList["video"] = (res.data as any);
+            this.$store.commit("setCameraList",res.data)
+        })
+    }
+    // 获取企业列表
+    public getCompanyList(){
+        this.parkService.getCompanyList().then((res:any)=>{
+            this.dataList["company"] = res.data;
+            this.$store.commit("setCompanyList",res.data)
+        })
+    }
+
+    // 获取电子围栏
+    public getBounds(){
+        this.parkService.getBounds().then((res:any)=>{
+            this.dataList["bounds"] = res.data;
+        })
+    }
+    // 获取实控线
+    public getRealBounds(){
+        this.parkService.getRealBounds().then((res:any)=>{
+            this.dataList["real-line"] = res.data;
+        })
+    }
+    // 获取安全线
+    public getSafeBounds(){
+        this.parkService.getSafeBounds().then((res:any)=>{
+            this.dataList["safe-line"] = res.data;
+        })
+    }
+    // 获取规划线
+    public getPlanBounds(){
+        this.parkService.getPlanBounds().then((res:any)=>{
+            this.dataList["plan-line"] = res.data;
+        })
+    }
+    // 获取疏散线路
+    public getSafeLine(){
+        this.parkService.getSafeLine().then((res:any)=>{
+            this.dataList["safe-route"] = res.data;
+        })
+    }
+    // 获取重载空载车辆
+    public  getStopCarList(){
+        this.closeService.getStopCarList().then((res:any)=>{
+            this.dataList["empty-car"] = res.data.filter(item=>item.type=="空载");
+            this.dataList["heavy-car"] = res.data.filter(item=>item.type!="空载");
+        })
+    }
+    // 获取大气监测
+    public getGasData(){
+        this.parkService.getGasData().then(res=>{
+            const datas = MockData.deviceList().data
+            this.dataList["gas-env"] = (res.data as any).map((item,i)=>{
+                item.name = datas.nameList[i]
+                item.value = datas.values[i]
+                return item
+            });
+        })
+
+    }
+    // 获取土壤
+    public getRoilData(){
+        this.parkService.getRoilData().then(res=>{
+            const datas = MockData.deviceList().data
+            this.dataList["ground-env"] = (res.data as any).map((item,i)=>{
+                item.name = datas.nameList[i]
+                item.value = datas.values[i]
+                return item
+            });
+            this.$store.commit("setGroundEnvList",this.dataList["ground-env"])
+        })
+
+    }
+    // 获取废气
+    public getBadGasData(){
+        this.parkService.getBadGasData().then(res=>{
+            this.dataList["fq-wrw"] = res.data;
+        })
+
+    }
+    // 获取清下水
+    public getCleanWaterData(){
+        this.parkService.getCleanWaterData().then(res=>{
+            this.dataList["qxs-jk"] = res.data;
+        })
+
+    }
+    // 获取水环境
+    public getWaterEnvData(){
+        this.parkService.getWaterEnvData().then(res=>{
+            this.dataList["water-env"] = res.data;
+        })
+
+    }
+    // 获取特征污染物
+    public getTzWrwData(){
+        this.parkService.getTzWrwData().then(res=>{
+            const datas = MockData.deviceList().data
+            this.dataList["tz-wrw"] = (res.data as any).map((item,i)=>{
+                item.name = datas.nameList[i]
+                item.value = datas.values[i]
+                return item
+            });
+            this.$store.commit("setSpecialEnvList",this.dataList["tz-wrw"])
+
+        })
+
+    }
+    // 获取废水
+    public getBadWaterData(){
+        this.parkService.getBadWaterData().then(res=>{
+            this.dataList["fs-wrw"] = res.data;
+        })
+
+    }
+    // 获取四色图
+    public getFourList(){
+        this.parkService.getFourList().then(res=>{
+            this.dataList["four-color"] = res.data;
+        })
+
+    }
+    // 获取四色图2
+    public getFourList2(){
+        this.parkService.getFourList2().then(res=>{
+            this.dataList["four-color2"] = res.data;
+        })
+
+    }
+    // 获取卡口
+    public getCheckPoint(){
+        this.parkService.getCheckPoint().then(res=>{
+            this.dataList["check-point"] = res.data;
+        })
+
+    }
+    // 获取应急设施
+    public getBuildingList(){
+        this.parkService.getBuildingList().then(res=>{
+            this.dataList["safe-building"] = res.data;
+        })
+
+    }
+    // 获取应急仓库
+    public getStoreList(){
+        this.parkService.getStoreList().then(res=>{
+            this.dataList["safe-goods"] = res.data;
+            this.$store.commit("setSafeGoods",res.data)
+        })
+
+    }
+    // 获取重大危险源
+    public getDangrous(){
+        this.parkService.getDangrous().then(res=>{
+            this.dataList["dangrous"] = res.data;
+            this.$store.commit("setDangrousList",res.data)
+        })
+    }
+    // 获取动火
+    public getDangrousWorkData(){
+        this.parkService.getDangrousWorkData().then((res:any)=>{
+            res.data.forEach(item=>{
+                const layer = this.layerData.find(layer=>layer.name === item.name) as any;
+                if(!this.dataList[layer.value]){
+                    this.dataList[layer.value] = [];
+                }
+                this.dataList[layer.value].push(item);
+                this.$store.commit("setDangrousWorkList",res.data)
+            })
+
+        })
+    }
+    // 停车场切换
+    public parkChange(data){
+        let ids = [];
+        if(data===0){
+            ids = this.currentLayers.find(item=>item.value==="heavy-car").ids;
+        }else if(data===1){
+            ids = this.currentLayers.find(item=>item.value==="empty-car").ids;
+        }
+        this.player.api.customObject.focus(ids)
+    }
+
+    //特殊作业显示隐藏
+    sepRightFlag = false
+    //特殊作业详情
+    sepDetailData = {}
+    //特殊作业详情
+    hiddenDetailData = {}
+    //是否从隐患那边打开的风险
+    fromPage = ''
+    //大弹窗标题
+    bigPopTitle = '人员信息卡'
+    //默认打开的折叠面板
+    activeNames = ['1']
+    //右侧列表显示隐藏
+    rightListFlag = false
+    //右侧列表数据
+    dataListRight:any = {}
+    //右侧主要内容显示隐藏
+    get showMainRight(){
+        return !this.popFlag && !this.riskFlag && (this.currentNav !== 'risk') && !this.sepRightFlag &&
+            !this.showHiddenRightFlag && !this.riskDetailFlag && !this.rightListFlag && !this.showConfirmFlag && !this.judgmentFlag && !this.storeGoodsFlag
+    }
+    // 地图初始化后
+    public getMap(store: any) {
+        this.player = store;
+        this.lock = false
+        this.resetMap();
+        this.player.api.customObject.clear();
+        this.player.api.polygon3d.clear();
+        this.player.api.marker.clear();
+        this.player.api.marker3d.clear();
+        this.player.api.polyline.clear();
+        this.player.api.heatmap.clear();
+        this.currentLayers = this.getCurrentLayers();
+        // this.addEvent({
+        //     type:"fire",
+        //     id:new Date().getTime()+"",
+        //     typeName:"火灾",
+        //     tel:13222078731,
+        //     position:[13312990.72, 4098613.12, 0.51],
+        //     reporter:"张三",
+        //     content:"北京汉邦唐化工厂区发生火灾"
+
+        // })
+        // this.addHeatMap();
+        // document.addEventListener("mousemove",this.fixedCamera)
+
+    }
+
+    public handleChange(data) {
+        console.log(data)
+        if(data.GroupID){
+            const currentData = this.dataList[data.GroupID].find(item=>item.id === data.Id);
+
+            if(data.GroupID==="peo"){
+                this.emitPersonPop(currentData)
+            }
+            if(data.GroupID==="car"){
+                this.emitCarPop(currentData)
+            }
+            if(data.GroupID==="video"){
+                this.openVideo(currentData)
+            }
+            if(data.GroupID==="company"){
+                this.openCompany(currentData)
+            }
+            if(data.GroupID==="hidden-dangrous"){
+                this.showHiddenRight(currentData)
+            }
+            if(["blind-plate","forbid-space","use-e","make-ground","hoisting","high-sky","break-road","use-fire"].includes(data.GroupID)){
+                this.showSepRight(currentData)
+            }
+        }
+    }
+
+    public navChange(data: string) {
+        this.currentNav = data;
+        if(this.player){
+            this.currentLayers = this.getCurrentLayers();
+            this.resetMap();
+        }
+        console.log('当前点击导航', data)
+        this.hidePop()
+    }
+
+
+    public drawerChange(data) {
+        const fixedbtn = document.querySelector(".fixed-btn") as any;
+        const layerBth = document.querySelector(".layer-btn-box") as any;
+        const leftEl = document.querySelector(".left") as any;
+        const rightEl = document.querySelectorAll(".right") as any;
+        if (data) {
+            leftEl.classList.remove("animate__slideOutLeft");
+            // rightEl.classList.remove("animate__slideOutRight");
+            leftEl.classList.add("animate__slideInLeft");
+            fixedbtn.style.right = "540px";
+            layerBth.style.right = "440px";
+            // rightEl.classList.add("animate__slideInRight");
+            rightEl.forEach(item=>{
+                item.classList.remove("animate__slideOutRight");
+                item.classList.add("animate__slideInRight");
+            })
+        } else {
+            leftEl.classList.remove("animate__slideInLeft");
+            // rightEl.classList.remove("animate__slideInRight");
+            leftEl.classList.add("animate__slideOutLeft");
+            fixedbtn.style.right = "140px";
+            layerBth.style.right = "40px";
+            // rightEl.classList.add("animate__slideOutRight");
+            rightEl.forEach(item=>{
+                item.classList.remove("animate__slideInRight");
+                item.classList.add("animate__slideOutRight");
+            })
+        }
+    }
+
+    public toggleHeight(){
+        this.openLayerDrawer = !this.openLayerDrawer;
+    }
+
+    public toggleLayer(layer){
+        if(this.lock){
+            this.$message.error("视口未加载完成")
+            return
+        }
+        layer.selected = !layer.selected;
+        this.toggleLayerAssets(layer)
+    }
+
+    //点击报警信息右侧交互动画
+    public popDrawerChange(flag = false,className='.main') {
+        this.$nextTick(()=>{
+            const popEl = document.querySelector(className) as any;
+            if (!popEl) return
+            if (flag) {
+                popEl.classList.remove("animate__fadeInRight");
+                setTimeout(()=>{
+                    popEl.classList.add("animate__fadeInRight");
+                },10)
+
+            } else {
+                popEl.classList.remove("animate__slideInRight");
+                popEl.classList.add("animate__slideOutRight");
+            }
+        })
+
+    }
+
+    mounted() {
+        console.log(2)
+    }
+
+    //获取点击的信息
+    getItem(item) {
+        this.addWarnning(item)
+        this.popFlag = true
+        this.riskDetailFlag = false
+        this.riskFlag = false
+        this.info = item
+        this.popDrawerChange(true)
+    }
+
+    //处理信息
+    deal() {
+        this.dialogVisible = true
+    }
+
+
+    closePop(){
+        if(this.currentWanning){
+            this.player.api.customObject.delete(this.currentWanning.id);
+            this.currentWanning = null
+        }
+        this.popFlag = false
+    }
+    //隐藏弹出层
+    hidePop() {
+        if(this.currentEvent){
+            this.player.api.customObject.delete(this.currentEvent.id);
+            this.player.api.marker.delete(this.currentEvent.id);
+            this.currentEvent = null;
+        }
+        if(this.currentWanning){
+            this.player.api.customObject.delete(this.currentWanning.id);
+            this.currentWanning = null
+        }
+        this.newPageData = null;
+        this.currentCompany=false;
+        this.popFlag = false
+        this.riskFlag = false
+        this.sepRightFlag = false
+        this.riskDetailFlag = false
+        this.showHiddenRightFlag = false
+        this.rightListFlag = false
+        this.showConfirmFlag = false
+        this.judgmentFlag = false
+        this.storeGoodsFlag = false
+        this.fromPage = ''
+    }
+    //隐藏危险源弹出层
+    hideDangerPop() {
+        this.popDrawerChange(false,'.riskDetail')
+        this.riskDetailFlag = false
+    }
+    //显示应急plan
+    showPlan(){
+        this.info = {
+            "typeName": "火灾",
+            "content": "北京汉邦唐化工厂区发生火灾",
+            "levelName": "二级",
+            "levelClass": "level-2-text",
+            "levelClassIcon": "level-2",
+            "time": "2023-05-15 15:21:35",
+            "address": "工厂厂房",
+            "reporter": "蒋丽",
+            "tableHeader": [
+                {
+                    "prop": "name",
+                    "label": "摄像头名称"
+                },
+                {
+                    "prop": "type",
+                    "label": "类型"
+                },
+                {
+                    "prop": "distance",
+                    "label": "距离 (m)"
+                }
+            ],
+            "tableData": [
+                {
+                    "type": "简型摄像头",
+                    "distance": "10",
+                    "name": "1号摄像头"
+                },
+                {
+                    "type": "简型摄像头",
+                    "distance": "20",
+                    "name": "2号摄像头"
+                },
+                {
+                    "type": "简型摄像头",
+                    "distance": "22",
+                    "name": "3号摄像头"
+                },
+                {
+                    "type": "简型摄像头",
+                    "distance": "10",
+                    "name": "4号摄像头"
+                },
+                {
+                    "type": "简型摄像头",
+                    "distance": "20",
+                    "name": "5号摄像头"
+                },
+                {
+                    "type": "简型摄像头",
+                    "distance": "22",
+                    "name": "6号摄像头"
+                }
+            ],
+            "title": "火灾爆炸",
+            "info": "北京汉邦唐化工厂区发生火灾",
+            "level": "1",
+            "type": "fire",
+            "tel": 13231475537,
+            "id": "110000197911038403",
+            "position": [13313085.72,4098442.24,0.51001953125]
+        }
+        this.showPlanFlag = true
+    }
+    //显示控制
+    showControl(){
+        this.showPlanFlag = false
+        this.showControlFlag = true
+    }
+    //显示善后
+    showAfterwards(){
+        this.showControlFlag = false
+        this.showAfterwardsFlag = true
+    }
+    //显示应急首页
+    showHome(){
+        this.showAfterwardsFlag = false
+    }
+    //确认警情
+    showConfirm(){
+        this.showConfirmFlag = true
+    }
+    hideConfirm(){
+        this.showConfirmFlag = false
+    }
+    hideJudgmentFlag(){
+        this.judgmentFlag = false
+        this.showPlanFlag = true
+    }
+    showJudgmentFlag(){
+        this.showConfirmFlag = false
+        this.judgmentFlag = true
+    }
+    //接收处理消息
+    dealSubmit(msg: any) {
+        console.log(msg, 'msg')
+        this.hidePop()
+    }
+
+
+
+    //动态合并表格列
+    objectSpanMethod({row, column, rowIndex, columnIndex}) {
+        if ([0, 1].includes(columnIndex)) {
+            if (rowIndex % 5 === 0) {
+                return {
+                    rowspan: 5,
+                    colspan: 1
+                };
+            } else {
+                return {
+                    rowspan: 0,
+                    colspan: 0
+                };
+            }
+        }
+    }
+
+
+    //显示风险右侧详情
+    showRiskRight(item){
+        this.popFlag = false
+        this.riskDetailFlag = false
+        this.riskFlag = true
+        if (item){
+            this.riskDetailData = item
+        }
+        this.popDrawerChange(true)
+    }
+    // 关闭风险右侧
+    closeRiskRight(){
+        this.riskFlag = false
+        if (this.fromPage === 'hidden'){
+            this.showHiddenRightFlag = true
+        }
+        // this.hidePop()
+    }
+    // 关闭右侧危险源
+    closeRiskDetailRight(){
+        if (this.currentNav === 'smartSafetySupervision'){
+            this.riskDetailFlag = false
+        }else{
+            this.hideDangerPop()
+            this.showRiskRight(false)
+        }
+
+
+    }
+
+    //弹出危险源相关信息
+    getHazard(item){
+        this.riskDetailFlag = true
+        this.riskFlag = false
+        this.popFlag = false
+        this.dangerSourceDetail = MockData.dangerSourceDetail().data
+      /*  this.popDrawerChange()
+        this.popDrawerChange(true,'.main')*/
+    }
+
+
+    public getCurrentLayers(){
+        const layers =  [] as any;
+         this.layerData.forEach((item:any)=>{
+            if(item.pages.includes(this.currentNav)){
+                if(!item.selected){
+                    this.toggleLayer(item)
+                }
+                layers.push(item)
+            }else{
+                if(item.selected){
+                    this.toggleLayer(item)
+                }
+            }
+         })
+        return layers
+    }
+
+
+    //显示特殊作业右侧详情
+    showSepRight(item){
+        this.resetMap()
+        setTimeout(()=>{
+            this.player.api.customObject.focus(item.id,50,2,null,0,()=>{
+                this.sepRightFlag = true
+                if (item){
+                    this.sepDetailData = item
+                }
+                this.popDrawerChange(true,'.main')
+            })
+            this.player.api.polygon3d.focus(item.id,50,2)
+        },1000)
+    }
+    //关闭特殊作业详情
+    closeSepDetailRight(){
+        this.sepRightFlag = false
+    }
+    //显示隐患详情
+    showHiddenRight(item){
+        console.log(item)
+        this.player.api.marker.focus(item.id,10,2)
+        setTimeout(()=>{
+            this.showHiddenRightFlag = true
+            this.riskFlag = false
+            this.riskDetailFlag = false
+            if (item){
+                this.hiddenDetailData = item
+            }
+            this.popDrawerChange(true,'.main')
+        },2000)
+
+    }
+    //关闭特殊作业详情
+    closeHiddenDetailRight(){
+        this.showHiddenRightFlag = false
+    }
+    //隐患详情关联风险
+    showRisk(item){
+        this.showHiddenRightFlag = false
+        this.riskFlag = true
+        this.fromPage = 'hidden'
+        if (item){
+            this.riskDetailData = item
+        }
+    }
+
+
+
+
+    destroyed() {
+        if (this.player) {
+            this.player = null
+        }
+        if(this.warnTimer){
+            clearInterval(this.warnTimer);
+            this.warnTimer = null;
+        }
+    }
+    //展示人员详情
+    emitPersonPop(item){
+        this.resetMap();
+        setTimeout(()=>{
+            this.currentCarPeople = item;
+            this.player.api.customObject.focus(item.id,50,2,[0,0,0],2);
+            setTimeout(()=>{
+                this.bigPopTitle = '人员信息卡';
+                this.dialogVisibleForBigPop = true
+            },2000)
+        },1000)
+    }
+    //展示车辆详情
+    emitCarPop(item){
+        this.resetMap();
+        setTimeout(()=>{
+            this.currentCarPeople = item;
+            this.player.api.customObject.focus(item.id,50,2,[0,0,0],2);
+            setTimeout(()=>{
+                this.bigPopTitle = '车辆信息卡';
+                this.dialogVisibleForBigPop = true
+            },2000)
+        },1000)
+    }
+    // 打开摄像头
+    openVideo(item){
+        this.resetMap();
+        setTimeout(()=>{
+            this.player.api.marker.focus(item.id,50,2)
+            setTimeout(()=>{
+                layer.open({
+                    type:1,
+                    shade:0,
+                    title:item.remark+"-"+ item.id,
+                    content:`<div class="customClass">
+                      <video src="${this.currentVideo}" controls style="width:100%" autoplay></video>
+                    </div>`
+                  })
+            },2000)
+        },1000)
+    }
+    openCompany(item){
+        this.resetMap();
+        setTimeout(()=>{
+            this.player.api.polygon3d.focus(item.id,100,2,null,()=>{
+                this.currentCompany = item;
+            })
+        },1000)
+    }
+
+    selectCompany(item){
+        this.newPageData = item;
+    }
+
+
+    closeCarPersonPop(){
+        this.player.api.customObject.focus(this.currentCarPeople.id,50,2,null,0,()=>{
+            this.currentCarPeople = null;
+        })
+    }
+
+    //显示封闭园区右侧列表
+    showList(item){
+        this.dataListRight = item
+        this.rightListFlag = true
+    }
+    //关闭封闭园区右侧列表
+    closeRight(){
+        this.rightListFlag = false
+        this.dataListRight = {}
+    }
+    //点击右侧柱状图
+    clickBar(item){
+        this.resetMap();
+        setTimeout(()=>{
+            this.player.api.marker.focus(item.id,10,2)
+        },1000)
+
+    }
+
+    //点击应急告警
+    getEmergencyEvent(item){
+        this.addEvent(item)
+        this.showConfirmFlag = false
+        this.judgmentFlag = false
+        this.info = item
+        this.showConfirm()
+        // this.popFlag = true
+        // this.info = item
+        // this.popDrawerChange(true)
+
+    }
+    changePoint(item){
+        this.addEvent(item)
+    }
+    get showBackGround(){
+        let flag = this.currentNav === 'risk' && !this.riskFlag && !this.riskDetailFlag
+        return flag?'none':''
+    }
+    showGoodsList(item){
+        this.storeGoodsFlag = true
+    }
+    focusGood(item){
+        // console.log(item)
+        this.player.api.customObject.focus(item.id)
+    }
+    getCompany(item){
+        console.log(item)
+        this.openCompany(item)
+    }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..3bd8096
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,49 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "noImplicitThis": false,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "strictPropertyInitialization":false,
+    "noImplicitAny":false,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env",
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "~/*":[
+        "public/*"
+      ]
+      
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.vue",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "common",
+    "node_modules"
+  ]
+}
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..bdee74b
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,85 @@
+const { defineConfig } = require('@vue/cli-service')
+const CompressionPlugin = require('compression-webpack-plugin')
+const webpack = require("webpack");
+const path = require('path')
+const resolve = (dir)=>{
+  return path.join(__dirname, dir)
+}
+module.exports = defineConfig({
+  productionSourceMap:process.env.NODE_ENV!=="production",
+  transpileDependencies: true,
+  lintOnSave: true, // 在保存时校验格式
+  runtimeCompiler:true,
+  css:{
+    loaderOptions:{
+      scss:{
+        additionalData:`@import "@/assets/common/scss/hbt-base.scss";`
+      }
+    }
+  },
+  configureWebpack: {
+    plugins: [
+      new webpack.ProvidePlugin({
+          $:"jquery",
+          jQuery:"jquery",
+          "window.jQuery":"jquery"
+      }),
+      // http://doc.hbt.vip/hbt-vue/other/faq.html#使用gzip解压缩静态文件
+      new CompressionPlugin({
+        cache: false,                   // 不启用文件缓存
+        test: /\.(js|css|html)?$/i,     // 压缩文件格式
+        filename: '[path].gz[query]',   // 压缩后的文件名
+        algorithm: 'gzip',              // 使用gzip压缩
+        minRatio: 0.8                   // 压缩率小于1才会压缩
+      })
+    ],
+  },
+  chainWebpack: config => {
+    config.extensions = ['.js', '.ts','.scss', '.vue', '.html'];
+
+    config.plugin('module-federation-plugin').use(require("webpack").container.ModuleFederationPlugin,[{
+        name: "test",
+        filename: "test.js",
+
+        remotes: {
+          common:`common@${process.env.VUE_APP_REMOTES_URL}/common.js`
+        },
+        shared:require("./package.json").dependencies,
+    }]);
+    config.module
+      .rule("html")
+      .test(/\.html$/)
+      .use('html-loader')
+      .loader('html-loader')//预读，识别html文件
+      .end()
+       // set svg-sprite-loader
+    config.module
+      .rule('svg')
+      .exclude.add(resolve('src/assets'))
+      .end()
+    config.module
+      .rule('icons')
+      .test(/\.svg$/)
+      .include.add(resolve('src/assets'))
+      .end()
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
+      .options({
+        symbolId: 'icon-[name]'
+      })
+      .end()
+  },
+  devServer: {
+    proxy: {
+      // detail: https://cli.vuejs.org/config/#devserver-proxy
+      [process.env.VUE_APP_BASE_API_URL]: {
+        target: `http://119.45.158.12:8081`,
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_API_URL]: ''
+        }
+      }
+    },
+    // disableHostCheck: true
+  },
+})