将大屏合并

gassafetyprogress-web/package.json

@@ -33,11 +33,12 @@
   ],
   "repository": {},
   "dependencies": {
+    "@easydarwin/easywasmplayer": "^4.0.13",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.21.0",
     "clipboard": "2.0.6",
     "core-js": "^3.19.1",
-    "echarts": "4.9.0",
+    "echarts": "^5.3.0",
     "element-ui": "2.15.0",
     "file-saver": "2.0.4",
     "fuse.js": "6.4.3",

gassafetyprogress-web/public/index.html

@@ -8,7 +8,8 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
-    <script src="https://webapi.amap.com/maps?v=2.0&key=eed7ca3167f765467aa377fa78e61ece&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"></script>
+    <script src="https://webapi.amap.com/maps?v=2.0&key=49fcb156d466062435d7d33437099582&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"></script>
+
 	  <script src="h5player/h5player.min.js"></script>
     <style>
     html,

gassafetyprogress-web/src/assets/css/font.css

+@font-face {
+    font-family: "arialbd";
+    src: url('~@/assets/fonts/UnidreamLED.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
\ No newline at end of file

gassafetyprogress-web/src/assets/fonts/font.css

+
+@font-face {
+  font-family: 'UnidreamLED';
+  src: url('UnidreamLED.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
\ No newline at end of file

gassafetyprogress-web/src/assets/mapImages/changzhan.svg

+<svg id="组_2445" data-name="组 2445" xmlns="http://www.w3.org/2000/svg" width="18" height="25" viewBox="0 0 23 34.049">
+  <path id="路径_169" data-name="路径 169" d="M-2160.2,287.287a9.537,9.537,0,0,1,9.538,9.537,9.537,9.537,0,0,1-9.538,9.537,9.538,9.538,0,0,1-9.537-9.537A9.538,9.538,0,0,1-2160.2,287.287Zm0,1.467a8.069,8.069,0,0,0-8.069,8.07,8.069,8.069,0,0,0,8.069,8.07,8.069,8.069,0,0,0,8.07-8.07A8.069,8.069,0,0,0-2160.2,288.754Zm-.109,1.485a6.691,6.691,0,0,1,6.681,6.68,6.691,6.691,0,0,1-6.681,6.68,6.691,6.691,0,0,1-6.68-6.68A6.691,6.691,0,0,1-2160.309,290.239Zm.144,11.685h-.276v1.1h.276Zm-3.65-1.433-.771.772.2.2.772-.772-.2-.2Zm6.748,0-.2.2.771.772.2-.2Zm-1.874-6.328-1.808,2.094a.671.671,0,0,0-.265.286.825.825,0,0,0,.375,1.081.831.831,0,0,0,1.08-.375.723.723,0,0,0,.089-.375l.529-2.711Z" transform="translate(2171.7 -284.903)" fill="#7bf8f4"/>
+  <g id="路径_188" data-name="路径 188" fill="none">
+    <path d="M11.5,0A11.5,11.5,0,0,1,23,11.5c0,6.351-11.6,18.226-11.5,18.3S0,17.851,0,11.5A11.5,11.5,0,0,1,11.5,0Z" stroke="none"/>
+    <path d="M 11.5 0.9999980926513672 C 5.71027946472168 0.9999980926513672 1 5.710289001464844 1 11.50002861022949 C 1 15.44052600860596 6.295671463012695 22.62869071960449 11.47669506072998 28.3024730682373 C 12.68497657775879 26.95182228088379 15.33078575134277 23.97880554199219 17.65543937683105 20.72857856750488 C 19.63740921020508 17.95747756958008 22 14.10697841644287 22 11.50002861022949 C 22 5.710289001464844 17.28972053527832 0.9999980926513672 11.5 0.9999980926513672 M 11.5 -1.9073486328125e-06 C 17.85127067565918 -1.9073486328125e-06 23 5.148738861083984 23 11.50002861022949 C 23 17.82768249511719 11.48916530609131 29.63789749145508 11.49940204620361 29.80171585083008 C 11.36462783813477 29.63818168640137 0 17.7873649597168 0 11.50002861022949 C 0 5.148738861083984 5.14872932434082 -1.9073486328125e-06 11.5 -1.9073486328125e-06 Z M 11.49940204620361 29.80171585083008 C 11.50076866149902 29.80337524414062 11.50098419189453 29.8038387298584 11.5 29.80305862426758 C 11.49963855743408 29.80277252197266 11.49944019317627 29.80232810974121 11.49940204620361 29.80171585083008 Z" stroke="none" fill="#7bf8f4"/>
+  </g>
+  <path id="多边形_35" data-name="多边形 35" d="M4.524,0,9.049,6.033H0Z" transform="translate(16.59 29.951) rotate(180)" fill="#7bf8f4"/>
+</svg>

gassafetyprogress-web/src/assets/mapImages/famen.svg

+<svg id="组_2447" data-name="组 2447" xmlns="http://www.w3.org/2000/svg" width="18" height="25" viewBox="0 0 23.304 34.295">
+  <path id="路径_168" data-name="路径 168" d="M-1603.123-57.691a9.445,9.445,0,0,0-9.234-8.255,9.5,9.5,0,0,0-9.333,9.663,9.5,9.5,0,0,0,9.333,9.663,9.445,9.445,0,0,0,9.234-8.255h.76v-2.817Zm-16.383.73a7.312,7.312,0,0,1,6.469-6.722v1.475a5.871,5.871,0,0,0-5.045,5.246Zm6.469,8.079a7.311,7.311,0,0,1-6.465-6.67h1.425a5.869,5.869,0,0,0,5.039,5.2Zm-.242-6.99v3.214h-1.149v-7.262h4.784V-58.9h-3.635v2.014h3.429v1.017Zm1.6,6.99v-1.475a5.869,5.869,0,0,0,5.039-5.2h1.425A7.311,7.311,0,0,1-1611.677-48.883Zm5.045-8.079a5.871,5.871,0,0,0-5.045-5.246v-1.475a7.313,7.313,0,0,1,6.469,6.722Z" transform="translate(1624.104 68.362)" fill="#7bf8f4"/>
+  <g id="路径_185" data-name="路径 185" fill="none">
+    <path d="M11.652,0A11.652,11.652,0,0,1,23.3,11.652c0,6.435-11.75,18.467-11.652,18.545S0,18.087,0,11.652A11.652,11.652,0,0,1,11.652,0Z" stroke="none"/>
+    <path d="M 11.65185546875 0.9999942779541016 C 5.77839469909668 0.9999942779541016 0.9999961853027344 5.778413772583008 0.9999961853027344 11.65188407897949 C 0.9999961853027344 15.65063667297363 6.374073028564453 22.94361305236816 11.62834739685059 28.69588470458984 C 12.84814071655273 27.33243751525879 15.5371789932251 24.3126106262207 17.89928436279297 21.01001358032227 C 19.90856552124023 18.20073509216309 22.3037052154541 14.29677486419678 22.3037052154541 11.65188407897949 C 22.3037052154541 5.778413772583008 17.52530479431152 0.9999942779541016 11.65185546875 0.9999942779541016 M 11.65185546875 -5.7220458984375e-06 C 18.08699607849121 -5.7220458984375e-06 23.3037052154541 5.216724395751953 23.3037052154541 11.65188407897949 C 23.3037052154541 18.06309509277344 11.64087867736816 30.02925682067871 11.65124988555908 30.19523429870605 C 11.5146951675415 30.02953720092773 -3.814697265625e-06 18.02224731445312 -3.814697265625e-06 11.65188407897949 C -3.814697265625e-06 5.216724395751953 5.216714859008789 -5.7220458984375e-06 11.65185546875 -5.7220458984375e-06 Z M 11.65124988555908 30.19523429870605 C 11.65263366699219 30.19691467285156 11.65285301208496 30.19738388061523 11.65185546875 30.19659423828125 C 11.6514892578125 30.19630432128906 11.65128803253174 30.19585609436035 11.65124988555908 30.19523429870605 Z" stroke="none" fill="#7bf8f4"/>
+  </g>
+  <path id="多边形_32" data-name="多边形 32" d="M4.53,0l4.53,6.039H0Z" transform="translate(16.306 30.197) rotate(180)" fill="#7bf8f4"/>
+</svg>

gassafetyprogress-web/src/assets/mapImages/jiankong.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="25" viewBox="0 0 23 34.049">
+  <g id="组_2451" data-name="组 2451" transform="translate(7189 23993)">
+    <g id="路径_188" data-name="路径 188" transform="translate(-7189 -23993)" fill="none">
+      <path d="M11.5,0A11.5,11.5,0,0,1,23,11.5c0,6.351-11.6,18.226-11.5,18.3S0,17.851,0,11.5A11.5,11.5,0,0,1,11.5,0Z" stroke="none"/>
+      <path d="M 11.5 0.9999980926513672 C 5.71027946472168 0.9999980926513672 1 5.710289001464844 1 11.50002861022949 C 1 15.44052600860596 6.295671463012695 22.62869071960449 11.47669506072998 28.3024730682373 C 12.68497657775879 26.95182228088379 15.33078575134277 23.97880554199219 17.65543937683105 20.72857856750488 C 19.63740921020508 17.95747756958008 22 14.10697841644287 22 11.50002861022949 C 22 5.710289001464844 17.28972053527832 0.9999980926513672 11.5 0.9999980926513672 M 11.5 -1.9073486328125e-06 C 17.85127067565918 -1.9073486328125e-06 23 5.148738861083984 23 11.50002861022949 C 23 17.82768249511719 11.48916530609131 29.63789749145508 11.49940204620361 29.80171585083008 C 11.36462783813477 29.63818168640137 0 17.7873649597168 0 11.50002861022949 C 0 5.148738861083984 5.14872932434082 -1.9073486328125e-06 11.5 -1.9073486328125e-06 Z M 11.49940204620361 29.80171585083008 C 11.50076866149902 29.80337524414062 11.50098419189453 29.8038387298584 11.5 29.80305862426758 C 11.49963855743408 29.80277252197266 11.49944019317627 29.80232810974121 11.49940204620361 29.80171585083008 Z" stroke="none" fill="#7bf8f4"/>
+    </g>
+    <path id="多边形_35" data-name="多边形 35" d="M4.524,0,9.049,6.033H0Z" transform="translate(-7172.411 -23963.049) rotate(180)" fill="#7bf8f4"/>
+    <path id="路径_1298" data-name="路径 1298" d="M21.1,8.659v7.97l-2.46-.621V13.532l-5.534-1.863V9.8h-.613V8.563l-3.428.807,1.315-1.4-.129-.791c-.1.323-.282.54-.508.573-.476.081-.992-.67-1.154-1.67-.145-.928.065-1.75.484-1.92L7.742,2.577l-.1-.04-1.888.307.016.452,1.3-.21L7.4,5.191l-.694.1L5.168,3.593,5.12,2.327,6.5,2.109l.9-.145.791-.129L16.51.512l.976.371,1.452,2.549L10.025,4.86a3.109,3.109,0,0,1,.21.549L18.2,4.134,18.624,6.8,17.285,8.062l-2.323.508V9.813h-.613v1.242L18.656,12.3V9.2ZM9.323,5.175c-.21.032-.315.411-.25.839s.29.758.5.726.315-.411.25-.839S9.532,5.142,9.323,5.175ZM7.943,8.119l-.411-2.6-.6.1.46,2.864,1.549.96.46-.419Z" transform="translate(-7191.327 -23989.652)" fill="#7bf8f4"/>
+  </g>
+</svg>

gassafetyprogress-web/src/assets/mapImages/tiaoyaxiang.svg

+<svg id="组_2448" data-name="组 2448" xmlns="http://www.w3.org/2000/svg" width="18" height="25" viewBox="0 0 23 33.9">
+  <path id="路径_173" data-name="路径 173" d="M-1877.09-49.461a9.537,9.537,0,0,0-9.537,9.537,9.537,9.537,0,0,0,9.537,9.537,9.537,9.537,0,0,0,9.537-9.537A9.537,9.537,0,0,0-1877.09-49.461Zm5.722,12.875h-.954v1.431h-1.43v.954h-1.907v-.954h-2.384v.954h-1.907v-.954h-1.431v-1.431h-.954v-6.676h.954v-1.431h1.431v-.477h1.431v.477h.953v-.477h1.431v.477h.954v-.477h1.431v.477h1.43v1.431h.954Zm-9.537,0h8.107v-7.153h-8.107Zm7.153-6.676h.477v6.2h-.477Zm-.954,0h.477v6.2h-.477Zm-.953,0h.477v6.2h-.477Zm-.954,0h.477v6.2h-.477Zm-.954,0h.477v6.2h-.477Zm-.953,0h.477v6.2h-.477Zm-.954,0h.477v6.2h-.477Zm-.954,0h.477v6.2h-.477Z" transform="translate(1888.59 51.845)" fill="#7bf8f4"/>
+  <g id="路径_186" data-name="路径 186" fill="none">
+    <path d="M11.5,0A11.5,11.5,0,0,1,23,11.5c0,6.351-11.6,18.226-11.5,18.3S0,17.851,0,11.5A11.5,11.5,0,0,1,11.5,0Z" stroke="none"/>
+    <path d="M 11.5 0.9999942779541016 C 5.71027946472168 0.9999942779541016 1 5.710294723510742 1 11.50003433227539 C 1 15.44047451019287 6.295700073242188 22.62868881225586 11.47670364379883 28.30246925354004 C 12.68497562408447 26.95181846618652 15.33078575134277 23.97880172729492 17.65543937683105 20.72857475280762 C 19.63740921020508 17.95747375488281 22 14.10698509216309 22 11.50003433227539 C 22 5.710294723510742 17.28972053527832 0.9999942779541016 11.5 0.9999942779541016 M 11.5 -5.7220458984375e-06 C 17.85128021240234 -5.7220458984375e-06 23 5.148744583129883 23 11.50003433227539 C 23 17.82767868041992 11.48916530609131 29.63789367675781 11.49940204620361 29.80171203613281 C 11.36462783813477 29.63816833496094 0 17.78736114501953 0 11.50003433227539 C 0 5.148744583129883 5.14872932434082 -5.7220458984375e-06 11.5 -5.7220458984375e-06 Z M 11.49940204620361 29.80171203613281 C 11.50076866149902 29.80337142944336 11.50098419189453 29.80383491516113 11.5 29.80305480957031 C 11.49963855743408 29.80276870727539 11.49944019317627 29.80232429504395 11.49940204620361 29.80171203613281 Z" stroke="none" fill="#7bf8f4"/>
+  </g>
+  <path id="多边形_33" data-name="多边形 33" d="M4.471,0,8.941,5.961H0Z" transform="translate(16.094 29.803) rotate(180)" fill="#7bf8f4"/>
+</svg>

gassafetyprogress-web/src/assets/mapImages/user.svg

+<svg id="组_2446" data-name="组 2446" xmlns="http://www.w3.org/2000/svg" width="18" height="25" viewBox="0 0 23 33.9">
+  <path id="路径_170" data-name="路径 170" d="M-1583.57,295.955a3.719,3.719,0,0,0-3.714,3.713,3.719,3.719,0,0,0,3.714,3.713,3.719,3.719,0,0,0,3.713-3.713,3.719,3.719,0,0,0-3.713-3.713Zm2.287,4.15a.608.608,0,0,1-.437.184h-1.862a.618.618,0,0,1-.621-.621V297.2a.618.618,0,0,1,.621-.621.608.608,0,0,1,.437.184.608.608,0,0,1,.184.437v1.862h1.242a.618.618,0,0,1,.621.621.6.6,0,0,1-.184.425Zm-8.966-5.047a4.143,4.143,0,0,0,4.161,0,4.166,4.166,0,0,0,2.081-3.61,4.161,4.161,0,0,0-4.162-4.161,4.16,4.16,0,0,0-4.161,4.161A4.179,4.179,0,0,0-1590.249,295.058Zm1.724,4.61a4.872,4.872,0,0,1,.391-1.931,5.639,5.639,0,0,1,.54-.966,4.67,4.67,0,0,1-.575.035,5.145,5.145,0,0,1-2.081-.425,5.006,5.006,0,0,1-.943-.517,1.2,1.2,0,0,0-1.345-.011,7.8,7.8,0,0,0-3.414,6.265v.069a.6.6,0,0,0,.6.575h7.92a5.215,5.215,0,0,1-.7-1.161,5.035,5.035,0,0,1-.391-1.931Z" transform="translate(1599.528 -284.903)" fill="#7bf8f4" opacity="0.996"/>
+  <g id="路径_190" data-name="路径 190" fill="none">
+    <path d="M11.5,0A11.5,11.5,0,0,1,23,11.5c0,6.351-11.6,18.226-11.5,18.3S0,17.851,0,11.5A11.5,11.5,0,0,1,11.5,0Z" stroke="none"/>
+    <path d="M 11.5 1.000003814697266 C 5.71027946472168 1.000003814697266 1 5.710294723510742 1 11.50003433227539 C 1 15.44052124023438 6.295677185058594 22.62869262695312 11.47670078277588 28.30246353149414 C 12.68496322631836 26.95182609558105 15.33070659637451 23.97891044616699 17.65538024902344 20.72865295410156 C 19.63738059997559 17.95753479003906 22 14.10700416564941 22 11.50003433227539 C 22 5.710294723510742 17.28972053527832 1.000003814697266 11.5 1.000003814697266 M 11.5 3.814697265625e-06 C 17.85128021240234 3.814697265625e-06 23 5.148744583129883 23 11.50003433227539 C 23 17.82767677307129 11.48916530609131 29.63790130615234 11.49940204620361 29.80170249938965 C 11.36462783813477 29.63816833496094 0 17.78736114501953 0 11.50003433227539 C 0 5.148744583129883 5.14872932434082 3.814697265625e-06 11.5 3.814697265625e-06 Z M 11.49940204620361 29.80170249938965 C 11.50076866149902 29.80335998535156 11.50098419189453 29.80382347106934 11.5 29.80304336547852 C 11.49963855743408 29.80275726318359 11.49944019317627 29.80231475830078 11.49940204620361 29.80170249938965 Z" stroke="none" fill="#7bf8f4"/>
+  </g>
+  <path id="多边形_37" data-name="多边形 37" d="M4.471,0,8.941,5.961H0Z" transform="translate(16.094 29.803) rotate(180)" fill="#7bf8f4"/>
+</svg>

gassafetyprogress-web/src/assets/mapImages/yalibiao.svg

+<svg id="组_2449" data-name="组 2449" xmlns="http://www.w3.org/2000/svg" width="18" height="25" viewBox="0 0 23 33.9">
+  <g id="路径_186" data-name="路径 186" fill="none">
+    <path d="M11.5,0A11.5,11.5,0,0,1,23,11.5c0,6.351-11.6,18.226-11.5,18.3S0,17.851,0,11.5A11.5,11.5,0,0,1,11.5,0Z" stroke="none"/>
+    <path d="M 11.5 0.9999942779541016 C 5.71027946472168 0.9999942779541016 1 5.710294723510742 1 11.50003433227539 C 1 15.44047451019287 6.295700073242188 22.62868881225586 11.47670364379883 28.30246925354004 C 12.68497562408447 26.95181846618652 15.33078575134277 23.97880172729492 17.65543937683105 20.72857475280762 C 19.63740921020508 17.95747375488281 22 14.10698509216309 22 11.50003433227539 C 22 5.710294723510742 17.28972053527832 0.9999942779541016 11.5 0.9999942779541016 M 11.5 -5.7220458984375e-06 C 17.85127067565918 -5.7220458984375e-06 23 5.148744583129883 23 11.50003433227539 C 23 17.82767868041992 11.48916530609131 29.63789367675781 11.49940204620361 29.80171203613281 C 11.36462783813477 29.63816833496094 0 17.78736114501953 0 11.50003433227539 C 0 5.148744583129883 5.14872932434082 -5.7220458984375e-06 11.5 -5.7220458984375e-06 Z M 11.49940204620361 29.80171203613281 C 11.50076866149902 29.80337142944336 11.50098419189453 29.80383491516113 11.5 29.80305480957031 C 11.49963855743408 29.80276870727539 11.49944019317627 29.80232429504395 11.49940204620361 29.80171203613281 Z" stroke="none" fill="#7bf8f4"/>
+  </g>
+  <path id="多边形_33" data-name="多边形 33" d="M4.471,0,8.941,5.961H0Z" transform="translate(16.094 29.804) rotate(180)" fill="#7bf8f4"/>
+  <path id="路径_966" data-name="路径 966" d="M99.476,156.616a6.028,6.028,0,0,1-1.622,2.267.9.9,0,0,1-.583.252.8.8,0,0,1-.567-.236.765.765,0,0,1-.236-.535.705.705,0,0,1,.236-.535,6.035,6.035,0,0,0,1.748-4.377A5.726,5.726,0,0,0,96.7,149.2a6.645,6.645,0,0,0-9.085.016,5.836,5.836,0,0,0-1.763,4.283,6.134,6.134,0,0,0,1.952,4.346.765.765,0,0,1,.236.535.705.705,0,0,1-.236.535.748.748,0,0,1-.567.236.8.8,0,0,1-.567-.236,7.414,7.414,0,0,1-2.047-2.724,7.528,7.528,0,0,1,1.748-8.266,7.836,7.836,0,0,1,2.629-1.685,9.392,9.392,0,0,1,6.361-.063,6.113,6.113,0,0,1,2.141,1.26c2.866,2.425,3.023,5.9,2.047,8.943Zm-7.337-7.684a4.366,4.366,0,0,0-4.377,4.267.5.5,0,0,1-.236.5.527.527,0,0,1-.567,0,.513.513,0,0,1-.236-.5,5.254,5.254,0,0,1,1.575-3.684,5.533,5.533,0,0,1,7.7,0,5.208,5.208,0,0,1,1.606,3.732.5.5,0,0,1-.236.5.527.527,0,0,1-.567,0,.513.513,0,0,1-.236-.5,4.382,4.382,0,0,0-4.424-4.314Zm.913,5.4a1.113,1.113,0,0,1-1.559-.047,1.054,1.054,0,0,1-.268-1.149l-1.212-1.2a.418.418,0,0,1,0-.6.479.479,0,0,1,.63,0l1.228,1.2a1.162,1.162,0,0,1,1.2.268,1.024,1.024,0,0,1,.331.771A1.093,1.093,0,0,1,93.052,154.333Zm.016-.016" transform="translate(-80.582 -142.727)" fill="#7bf8f4"/>
+</svg>

gassafetyprogress-web/src/components/bigWindow/Center.vue

+<template>
+  <div v-if="show" class="myCenter">
+    <div class="left">
+      <div class="title-wrapper">
+        <div class="title">报警器列表</div>
+        <div class="close" @click="close">
+          <img src="@/assets/mapImages/closeBtn.png" alt="" />
+        </div>
+      </div>
+
+      <div class="bottom right-bottom-data-left">
+
+        <el-table
+          size="mini"
+          :data="tableData"
+          class="el-bottom"
+        >
+        <!-- :height="tableHeight" -->
+        <el-table-column prop="detectorCode" label="设备编号" width="">
+            <template slot-scope="scope">
+              <div :title="scope.row.deviceNo" class="zzz">
+                {{ scope.row.deviceNo }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="deviceType" label="设备类型" width="">
+            <template slot-scope="scope">
+              <div :title="scope.row.deviceType" class="zzz">
+                {{ scope.row.deviceType == 1 ? "流量计" : "压力表" }}
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="deviceState" label="设备状态" width="">
+            <template slot-scope="scope">
+              <div v-if="scope.row.deviceState == 1">正常</div>
+              <div style="color: red" v-else-if="scope.row.deviceState == 2">
+                报警
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="reportTime" label="报警时间" width="">
+            <template slot-scope="scope">
+              <div>{{ scope.row.reportTime }}</div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div>
+          <el-pagination
+            @current-change="handleCurrentChangvale"
+            :page-size="pageSize"
+            :current-page="pageCurrent"
+            layout="prev, pager, next, jumper"
+            :total="total"
+            :hide-on-single-page="total < pageSize"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    centerData: {
+      type: Array,
+    },
+    show: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      // 动画效果的切换
+      tableHeight: 600,
+      pageSize: 16,
+      pageCurrent: 1,
+    };
+  },
+  created() {
+    // this.getList();
+  },
+
+  watch: {
+    // 当组件显示的时候
+    show(newVal) {
+      if (newVal) {
+        this.pageCurrent = 1;
+      }
+    },
+  },
+  computed: {
+    total() {
+      return this.centerData.length;
+    },
+    tableData() {
+      return this.centerData.filter((item, index) => {
+        return (
+          index < this.pageCurrent * this.pageSize &&
+          index >= (this.pageCurrent - 1) * this.pageSize
+        );
+      });
+    },
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(val);
+      this.pageCurrent = val;
+    },
+    handleCurrentChangvale(val) {
+      console.log(val);
+      this.pageCurrent = val;
+    },
+    close() {
+      this.$parent.centerShow(false);
+    },
+  },
+};
+</script>
+
+<style lang="scss" >
+.myCenter {
+  // width: 978px;
+  max-height: 600px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin-top: -300px;
+  margin-left: -500px;
+  // background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  z-index: 9999;
+
+  & > div {
+  }
+  .left {
+    // width: 100px;
+    max-height: 598px;
+    margin-right: 12px;
+    // box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
+    // background-color: #fff;
+    // color: #fff;
+    font-size: 14px;
+    font-weight: 400;
+    .title-wrapper {
+      width: 99%;
+      height: 30px;
+      display: flex;
+      justify-content: space-between;
+      background: #1890ff;
+      padding: 5px;
+      .title {
+        width: 100%;
+        color: #fff;
+        text-align: center;
+        line-height: 30px;
+      }
+      .close {
+        box-sizing: border-box;
+        padding-top: 5px;
+        padding-right: 5px;
+        cursor: pointer;
+      }
+    }
+    .el-table__body-wrappe {
+      height: 140px !important;
+    }
+    .top {
+      height: 19px;
+      // background-color: #053b6a;
+      color: #fff;
+      // line-height: 32px;
+      // padding-left: 12px;
+      position: relative;
+
+      .title {
+        position: absolute;
+        left: 50%;
+        margin-left: -92px;
+        top: -5px;
+      }
+      .repeat {
+        position: absolute;
+        top: -5px;
+        right: 160px;
+        color: #fff;
+        cursor: pointer;
+        &:hover {
+          color: #2788ea;
+        }
+      }
+      .repeat2 {
+        position: absolute;
+        right: 206px;
+        color: #67c23a;
+      }
+      .more {
+        position: absolute;
+        right: 38px;
+        top: -5px;
+        color: #fff;
+        float: right;
+        margin-right: 20px;
+        cursor: pointer;
+        &:hover {
+          color: #2788ea;
+        }
+      }
+    }
+    .bottom {
+      width: 1000px;
+      margin: 0 auto;
+      position: relative;
+    }
+  }
+  .right {
+    width: 740px;
+    display: flex;
+    flex-wrap: wrap;
+    // justify-content: space-between;
+    align-content: flex-start;
+    // margin-top: 7px;
+    & > .right-content {
+      background-color: #fff;
+      width: 238px;
+      height: 82px;
+      margin-bottom: 29px;
+      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
+      margin-right: 10px;
+      display: flex;
+      &.three {
+        margin-right: 0px;
+      }
+      // align-items: center;
+      .text-icon {
+        line-height: 82px;
+        padding-left: 22px;
+        margin-right: 22px;
+        i {
+          color: #053b6a;
+          font-size: 60px;
+        }
+      }
+      .text {
+        font-size: 14px;
+        padding-top: 16px;
+        .top {
+          color: #000;
+          margin-bottom: 10px;
+          font-weight: 600;
+        }
+        .bottom {
+          color: #2788ea;
+        }
+      }
+    }
+  }
+
+  .iconfont {
+    cursor: pointer;
+  }
+  // 单独调整下最后一个icon的大小
+  .iconFontSize {
+    font-size: 50px !important;
+  }
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/components/bigWindow/DeviceA.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-01-26 20:07:52
+ * @LastEditTime: 2022-02-17 10:13:02
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+
+ * @FilePath: /test/hello-world/src/views/components/deviceA.vue
+-->
+<template>
+  <div class="devicea-wrapper">
+    <div class="title">
+      {{
+        deviceData.deviceName ? deviceData.deviceName : deviceData.stationName
+      }}
+    </div>
+    <div class="close" @click="close">
+      <img src="@/assets/mapImages/closeBtn.png" alt="" />
+    </div>
+
+    <div class="top flex">
+      <div class="group">
+        <div class="left">所属公司：</div>
+        <div class="right zzz">{{ companyType[deviceData.companyType] }}</div>
+      </div>
+      <div class="group">
+        <div class="left">设备类型：</div>
+        <div class="right zzz">
+          {{ deviceType[deviceData.type] }}
+        </div>
+      </div>
+      <div class="group">
+        <div class="left">设备地址：</div>
+        <div
+          v-if="deviceData.deviceAddr"
+          :title="deviceData.deviceAddr"
+          class="right last zzz"
+        >
+          {{ deviceData.deviceAddr || "-" }}
+        </div>
+        <div
+          v-else-if="deviceData.stationAddr"
+          :title="deviceData.stationAddr"
+          class="right last zzz"
+        >
+          {{ deviceData.stationAddr || "-" }}
+        </div>
+      </div>
+    </div>
+
+    <div class="middle">{{ profile }}</div>
+
+    <div class="foot">
+      <div class="thead flex">
+        <div class="first">设备类型</div>
+        <div>设备数量</div>
+        <div>在线设备</div>
+        <div>离线设备</div>
+        <div>历史报警</div>
+        <div>已处理报警</div>
+        <div class="last">报警中</div>
+      </div>
+      <div class="tbody flex">
+        <div class="first zzz">{{ "流量计与压力表" }}</div>
+        <div class="">{{ deviceData.pressureFlow.length }}</div>
+        <div class="">
+          {{ (Math.random() * deviceData.pressureFlow.length) >> 1 }}
+        </div>
+        <div class="">
+          {{ (Math.random() * deviceData.pressureFlow.length) >> 1 }}
+        </div>
+        <div class="">
+          {{ (Math.random() * deviceData.pressureFlow.length) >> 1 }}
+        </div>
+        <div class="">
+          {{ (Math.random() * deviceData.pressureFlow.length) >> 1 }}
+        </div>
+        <div class="last zzz">
+          {{
+            deviceData.pressureFlow.filter((item) => {
+              return item.deviceState == 2;
+            }).length
+          }}
+        </div>
+      </div>
+    </div>
+
+    <div class="btn">
+      <div @click="btnClick">感知设备</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { companyType, deviceType } from "@/utils/mapClass/config.js";
+export default {
+  data() {
+    return {
+      companyType,
+      deviceType,
+      profile:
+        "公司位于长江三角洲经济快速增长、风景秀丽的太湖之畔——无锡。 公司自1984年成立至今，已经过了3次跨越式的发展。2004年至今公司投入5000多万元资金建设新的生产基地，目前已竣工并投入生产，占地面积达40000m2，厂房面积近15000m2。公司2004年的年产值达4350多万元，并且每年以平均30%的速度快速增长。",
+    };
+  },
+  methods: {
+    close() {
+      this.mapClass.infowindowClose();
+    },
+    btnClick() {
+      this.vueRoot.centerDataFunc(this.deviceData.pressureFlow);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.devicea-wrapper {
+  background-color: rgba(9, 18, 32, 0.6);
+  padding: 10px;
+  position: relative;
+  width: 700px;
+  .title {
+    // padding-top: 10px;
+    // padding-left: 10px;
+    font-size: 14px;
+    line-height: 14px;
+    color: #ffffff;
+  }
+  .close {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    cursor: pointer;
+  }
+
+  .top {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #cccccc;
+    box-sizing: border-box;
+    .group {
+      height: 30px;
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+      box-sizing: border-box;
+      div {
+        flex: 1;
+        box-sizing: border-box;
+        border-right: 1px solid #cccccc;
+        text-align: center;
+        font-size: 14px;
+        color: #ffffff;
+        line-height: 30px;
+        padding: 0 5px;
+        &.last {
+          border-right: none;
+        }
+      }
+      .left {
+        text-align: right;
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
+  .middle {
+    width: 100%;
+    padding: 5px;
+    border: 1px solid #ffffff;
+    box-sizing: border-box;
+    font-size: 14px;
+    color: #ffffff;
+    text-indent: 2em;
+    margin-bottom: 10px;
+  }
+  .foot {
+    font-size: 14px;
+    color: #ffffff;
+    .thead,
+    .tbody {
+      border: 1px solid #cccccc;
+      div {
+        flex: 1;
+        text-align: left;
+        border-right: 1px solid #cccccc;
+        box-sizing: border-box;
+        padding: 0 5px;
+      }
+      .first {
+        flex: 2;
+      }
+      .last {
+        border-right: none;
+      }
+    }
+    .tbody {
+      border-top: none;
+    }
+    .thead {
+      div {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
+
+  .btn {
+    position: relative;
+    margin-top: 10px;
+    text-align: right;
+    div {
+      font-size: 14px;
+      color: #ffffff;
+      padding: 2px 4px;
+      box-sizing: border-box;
+      display: inline-block;
+      cursor: pointer;
+      border: 1px solid #cccccc;
+      background-color: #1890ff;
+
+      &:hover {
+        // background: rgba(9, 18, 32, 0.6);
+        background-color: #18baff;
+      }
+    }
+  }
+  .flex {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/components/bigWindow/Line.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-01-27 14:25:45
+ * @LastEditTime: 2022-02-17 10:11:42
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /hello-world/src/views/components/User.vue
+-->
+<template>
+  <div class="user-wrapper">
+    <div class="title">{{ companyType[deviceData.companyType] }}</div>
+    <div class="close" @click="close">
+      <img src="@/assets/mapImages/closeBtn.png" alt="" />
+    </div>
+
+    <div class="group flex first">
+      <div class="left first">管道长度：</div>
+      <div class="right zzz">{{ deviceData.pipeLength }}米</div>
+      <div class="left">管径：</div>
+      <div class="right last">{{ deviceData.pipeDiameter }}米</div>
+    </div>
+
+    <!-- <div class="group flex">
+      
+    </div> -->
+
+    <div class="group flex">
+      <div class="left first">管道压力：</div>
+      <div :title="deviceData.address" class="right zzz">
+        {{ pipePressure[deviceData.pipePressure] }}
+      </div>
+      <div class="left">所属公司：</div>
+      <div class="right last">{{ companyType[deviceData.companyType] }}</div>
+    </div>
+
+    <div class="group flex">
+      <div class="first left">管道材质：</div>
+      <div class="right">{{ deviceData.pipeMaterial }}</div>
+      <div class="left">管道埋深：</div>
+      <div class="right last">{{ deviceData.pipeDepth }}米</div>
+    </div>
+
+    <div class="group flex">
+      <div class="left first">管道走向：</div>
+      <div class="right">{{ deviceData.pipeTrend }}</div>
+      <div class="left">权属单位：</div>
+      <div :title="deviceData.powerCompany" class="right last zzz">{{ deviceData.powerCompany }}</div>
+    </div>
+    <div class="group flex">
+      <div class="first left">建设年代：</div>
+      <div class="right">{{ deviceData.buildyear }}</div>
+      <div class="left">建设单位：</div>
+      <div class="last right">{{ deviceData.buildCompany }}</div>
+    </div>
+
+
+    <div class="group flex">
+      <div class="first once left">管道位置：</div>
+      <div :title="deviceData.pipeAddr" class=" last pipeAddr right zzz">
+        {{ deviceData.pipeAddr }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { companyType, pipePressure } from "@/utils/mapClass/config.js";
+
+export default {
+  data() {
+    return {
+      companyType,
+      pipePressure,
+    };
+  },
+  methods: {
+    close() {
+      this.mapClass.infowindowClose();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.user-wrapper {
+  background-color: rgba(9, 18, 32, 0.6);
+  padding: 10px;
+  position: relative;
+  width: 400px;
+  .title {
+    font-size: 14px;
+    line-height: 14px;
+    color: #ffffff;
+  }
+  .close {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    cursor: pointer;
+  }
+  .group {
+    border: 1px solid #cccccc;
+    border-top: none;
+    height: 28px;
+    font-size: 14px;
+    line-height: 28px;
+    color: #ffffff;
+    &.first {
+      border-top: 1px solid #cccccc;
+      margin-top: 10px;
+    }
+    div {
+      flex: 1;
+      border-right: 1px solid #cccccc;
+    }
+    .left {
+      background-color: rgba(255, 255, 255, 0.1);
+      text-align: right;
+    }
+    .right {
+      box-sizing: border-box;
+      text-align: left;
+      padding: 0 1em;
+    }
+    .last {
+      border: none;
+    }
+    .once{
+      flex:1;
+    }
+    .pipeAddr{
+      flex:3;
+      padding:0 3em 0 1em;
+    }
+  }
+  .flex {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/components/bigWindow/PipeColor.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-01-26 10:52:10
+ * @LastEditTime: 2022-02-17 10:11:35
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /test/hello-world/src/components/PipeColor.vue
+-->
+<template>
+  <div>
+    <div class="pipePressure">
+      <!-- <div>管道压力</div> -->
+      <div class="hasColorBox" :style="{ color: pipeColor[`1`] }">
+        <div :style="{ backgroundColor: pipeColor[`1`] }"></div>
+        低压
+      </div>
+      <div class="hasColorBox" :style="{ color: pipeColor[`2`] }">
+        <div :style="{ backgroundColor: pipeColor[`2`] }"></div>
+        中压
+      </div>
+      <div class="hasColorBox" :style="{ color: pipeColor[`3`] }">
+        <div :style="{ backgroundColor: pipeColor[`3`] }"></div>
+        次高压
+      </div>
+      <div class="hasColorBox" :style="{ color: pipeColor[`4`] }">
+        <div :style="{ backgroundColor: pipeColor[`4`] }"></div>
+        高压
+      </div>
+    </div>
+    <div class="mapChange">
+      <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
+      <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { pipeColor } from "@/utils/mapClass/config.js";
+export default {
+  data() {
+    return {
+      pipeColor,
+      mapStyle:true
+    };
+  },
+  methods: {
+    // 更改卫星图
+    mapChange(num) {
+      if (num == 1) {
+        this.mapStyle = false;
+      } else {
+        this.mapStyle = true;
+      }
+      this.$parent.map.changeMap(this.mapStyle);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.pipePressure {
+  position: fixed;
+  color: #fff;
+  left: 460px;
+  top: 120px;
+  padding: 1px;
+  // background: rgba(6, 29, 51, 0.8);
+  .hasColorBox {
+    // border: 1px solid #053b6a;
+    padding: 2px 5px;
+    margin-bottom: 5px;
+    & > div {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+    }
+  }
+}
+.mapChange {
+  left: 460px;
+  top: 76px;
+  color: #fff;
+  position: absolute;
+  display: flex;
+  div {
+    padding: 4px 8px;
+    border: 1px solid #fff;
+    margin-left: 8px;
+    cursor: pointer;
+    &.active,
+    &:hover {
+      background-color: #053b6a;
+      color: #31eaea;
+    }
+  }
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/components/bigWindow/PipeVue.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-01-11 13:44:17
+ * @LastEditTime: 2022-01-20 14:30:03
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /hello-world/src/views/About.vue
+-->
+<template>
+  <div class="wrapper">
+    <div @click="click">点我</div>
+    <div>{{deviceData.lat}}</div>
+    <div>{{deviceData.id}}</div>
+    <div>{{deviceData.type}}</div>
+    <div>{{deviceData.lng}}</div>
+    <div>12312312321{{a}}</div>
+  </div>
+</template>
+
+<script>
+  //这个东西是用新的实例创建的，跟主vue没有关联，必须传进来才可以
+  // vueRoot,
+  //   // 自己写的map类
+  //   mapClass,
+  //   // 数据
+  //   deviceData,
+export default {
+    name: "Pipe",
+    data() {
+      return {
+        a:123
+      };
+    },
+    // props: {
+    //   // 代表地图页面的vue
+    //   vueRoot: {
+    //     type: Object,
+    //     default: () => null,
+    //   },
+    //   // 数据
+    //   deviceData: {
+    //     type: Object,
+    //     default: () => null,
+    //   },
+    // },
+    mounted(){
+      console.log(this.deviceData)
+    },
+    methods: {
+      click() {
+
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wrapper {
+    width: 200px;
+    height: 200px;
+    background: red;
+  }
+</style>
\ No newline at end of file

gassafetyprogress-web/src/components/bigWindow/User.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-01-27 14:25:45
+ * @LastEditTime: 2022-02-17 10:12:02
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /hello-world/src/views/components/User.vue
+-->
+<template>
+  <div class="user-wrapper">
+    <div class="title">{{ deviceData.usrName }}</div>
+    <div class="close" @click="close">
+      <img src="@/assets/mapImages/closeBtn.png" alt="" />
+    </div>
+
+    <div class="group flex first">
+      <div class="left">用户姓名：</div>
+      <div :title="deviceData.usrName" class="right zzz">{{ deviceData.usrName }}</div>
+    </div>
+
+    <div class="group flex">
+      <div class="left">联系方式：</div>
+      <div class="right">{{ deviceData.phone }}</div>
+    </div>
+
+    <div class="group flex">
+      <div class="left">用户地址：</div>
+      <div :title="deviceData.address" class="right zzz">
+        {{ deviceData.address }}
+      </div>
+    </div>
+
+    <div class="group flex">
+      <div class="left">所属公司：</div>
+      <div class="right">{{ companyType[deviceData.companyType] }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { companyType } from "@/utils/mapClass/config.js";
+
+export default {
+  data() {
+    return {
+      companyType,
+    };
+  },
+  methods: {
+    close() {
+      this.mapClass.infowindowClose();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.user-wrapper {
+  background-color: rgba(9, 18, 32, 0.6);
+  padding: 10px;
+  position: relative;
+  width: 300px;
+  .title {
+    font-size: 14px;
+    line-height: 14px;
+    color: #ffffff;
+  }
+  .close {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    cursor: pointer;
+  }
+  .group {
+    border: 1px solid #cccccc;
+    border-top:none;
+    height: 28px;
+    font-size: 14px;
+    line-height: 28px;
+    color: #ffffff;
+    &.first {
+      border-top:1px solid #cccccc;
+      margin-top: 10px;
+    }
+    div {
+      flex: 1;
+      
+    }
+    .left {
+      border-right: 1px solid #cccccc;
+      background-color: rgba(255, 255, 255, 0.1);
+      text-align: right;
+    }
+    .right {
+      box-sizing: border-box;
+      text-align: left;
+      padding:0 1em;
+    }
+  }
+  .flex {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/components/bigWindow/VideoView.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-01-26 22:44:02
+ * @LastEditTime: 2022-01-27 10:12:46
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /test/hello-world/src/views/components/videoView.vue
+-->
+<template>
+  <div class="box-wrapper">
+    <div class="title">{{ deviceData.videoName }}</div>
+    <div class="close" @click="close">
+      <img src="@/assets/mapImages/closeBtn.png" alt="" />
+    </div>
+    <div class="box videoBox">
+      <div id="video"></div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <!-- <el-button type="primary" @click="dialogVisible = false"
+        >确 定
+      </el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button> -->
+    </span>
+  </div>
+</template>
+<script>
+import WasmPlayer from "@easydarwin/easywasmplayer"; //导入WasmPlayer.js
+
+export default {
+  data() {
+    return {
+      // dialogVisible: true,
+      // AfterClose: true,
+    };
+  },
+  watch: {},
+  mounted() {
+    setTimeout(() => {
+      this.player = new WasmPlayer(null, "video", this.callBack, {
+        Height: true,
+      });
+      this.player.play(this.deviceData.usr, 1);
+    }, 1);
+  },
+  methods: {
+    show() {
+      this.dialogVisible = true;
+    },
+    handleClose() {
+      console.log("关闭");
+      this.player.destroy(this.deviceData.usr);
+      // document.body.removeChild(this.$refs.videoBox.$el);
+    },
+    callBack() {},
+    close() {
+      this.handleClose();
+      this.mapClass.infowindowClose();
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.box-wrapper {
+  background-color: rgba(9, 18, 32, 0.6);
+  position: relative;
+  .title {
+    padding-top: 10px;
+    padding-left: 10px;
+    font-size: 14px;
+    line-height: 14px;
+    color: #ffffff;
+  }
+  .close {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    cursor: pointer;
+  }
+  .box {
+    padding: 5px 12px 10px 10px;
+    width: 350px;
+    height: 200px;
+    #video {
+      height: 100%;
+    }
+  }
+}
+</style>
+

gassafetyprogress-web/src/components/bigWindow/markerInfoWindow.vue

+<template>
+    <div id="">
+      qqqq
+    </div>
+</template>
+
+<script>
+// import moment from "moment";
+//line移入时的的infowindow
+// export default {
+//   props: {
+//     obj: { typs: Object },
+//     title: "",
+//     data: {},
+//     map: null,
+//   },
+//   methods: {
+//     moment,
+//     deviceMore() {
+//       this.data.class.view.$router.push({
+//         // path: "/dataMonitoring/realtimedetail",
+//         path: "/device/deviceInfoDetail",
+//         query: {
+//           deviceId: this.data.deviceId,
+//           // deviceType: this.data.deviceType,
+//         },
+//       });
+//     },
+//     close() {
+//       this.map.clearInfoWindow();
+//       this.data.class.view.domAllShow()
+//     },
+//   },
+// };
+</script>
+
+
+</style>

gassafetyprogress-web/src/main.js

+/*
+ * @Author: your name
+ * @Date: 2022-01-07 11:29:13
+ * @LastEditTime: 2022-02-17 11:23:19
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/main.js
+ */
 import Vue from 'vue'
 
 import Cookies from 'js-cookie'
@@ -7,11 +15,13 @@ import './assets/styles/element-variables.scss'
 
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/zehong.scss' // zehong css
+import './assets/css/font.css'
+
 import App from './App'
 import store from './store'
 import router from './router'
 import permission from './directive/permission'
-
+import * as echarts from 'echarts'
 import './assets/icons' // icon
 import './permission' // permission control
 import { getDicts } from "@/api/system/dict/data";
@@ -20,8 +30,12 @@ import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels,
 import Pagination from "@/components/Pagination";
 // 自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar"
+import './assets/styles/all.scss'
+
 
 // 全局方法挂载
+Vue.prototype.$echarts = echarts
+Vue.prototype.$Vue = Vue;
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
 Vue.prototype.parseTime = parseTime

gassafetyprogress-web/src/utils/mapClass/getPath.js

 /*
  * @Author: your name
  * @Date: 2022-01-11 13:45:12
- * @LastEditTime: 2022-02-12 15:13:52
+ * @LastEditTime: 2022-02-17 10:10:11
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- * @FilePath: /test/hello-world/src/untils/mapClass.js
+ * @FilePath: /test/hello-world/src/utils/mapClass.js
  */
 
 // 编辑类

gassafetyprogress-web/src/views/index.vue

 <template>
-  <div class="app-container home">
+  <div class="app-container homeA">
     <el-row :gutter="20">
       <el-col :sm="24" :lg="24">
         <blockquote class="text-warning" style="font-size: 14px">
@@ -581,7 +581,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.home {
+.homeA {
   blockquote {
     padding: 10px 20px;
     margin: 0 0 20px;