将大屏合并

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/assets/styles/all.scss

+/**
+ * 通用css样式布局处理
+ * Copyright (c) 2019 gassafety
+ */
+
+/** 基础通用 **/
+.pt5 {
+  padding-top: 5px;
+}
+.pr5 {
+  padding-right: 5px;
+}
+.pb5 {
+  padding-bottom: 5px;
+}
+.mt5 {
+  margin-top: 5px;
+}
+.mr5 {
+  margin-right: 5px;
+}
+.mb5 {
+  margin-bottom: 5px;
+}
+.mb8 {
+  margin-bottom: 8px;
+}
+.ml5 {
+  margin-left: 5px;
+}
+.mt10 {
+  margin-top: 10px;
+}
+.mr10 {
+  margin-right: 10px;
+}
+.mb10 {
+  margin-bottom: 10px;
+}
+.ml0 {
+  margin-left: 10px;
+}
+.mt20 {
+  margin-top: 20px;
+}
+.mr20 {
+  margin-right: 20px;
+}
+.mb20 {
+  margin-bottom: 20px;
+}
+.m20 {
+  margin-left: 20px;
+}
+
+.el-dialog:not(.is-fullscreen) {
+  margin-top: 6vh !important;
+}
+.bigwindow {
+  // 全局表格样式
+  .el-table {
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
+      th {
+        word-break: break-word;
+        background-color: #053b6a;
+        color: #fff;
+        height: 40px;
+        font-size: 13px;
+      }
+    }
+    .el-table__body-wrapper {
+      .el-table__row:nth-child(2n + 1) {
+        background-color: #e6e6e6;
+        // &:hover {
+        //   td {
+        //     background-color: #f4f4f4;
+        //   }
+        // }
+        td {
+          .cell {
+            color: #525252;
+          }
+        }
+      }
+      .el-table__row:nth-child(2n) {
+        background-color: #f4f4f4;
+        // &:hover {
+        //   td {
+        //     background-color: #e6e6e6;
+        //   }
+        // }
+        td {
+          .cell {
+            color: #053b6a;
+          }
+        }
+      }
+    }
+    .el-table__body-wrapper {
+      .el-button [class*="el-icon-"] + span {
+        margin-left: 1px;
+      }
+    }
+  }
+
+  // gis地图中底部table样式
+  .drawer {
+    .el-button {
+      color: #ffffff;
+      &:not(.is-disabled):hover {
+        color: rgb(46, 231, 231);
+      }
+      &.is-disabled {
+        border-color: #ccccccc3 !important;
+        color: #ccccccc3;
+      }
+    }
+  }
+  .right-bottom-data-left {
+    .el-table {
+      background-color: rgba(0, 0, 0, 0) !important;
+      .el-table__body {
+        width: 100% !important;
+      }
+      &::before {
+        height: 0px !important;
+      }
+      td {
+        border-bottom: none !important;
+      }
+
+      .el-table__header-wrapper,
+      .el-table__fixed-header-wrapper {
+        tr {
+          background-color: #213b52 !important;
+        }
+        th {
+          word-break: break-word;
+          background-color: #213b52 !important;
+          color: rgba(123, 248, 244, 1);
+          height: 30px;
+          font-size: 13px;
+          padding: 0;
+          &.is-leaf {
+            border-bottom: none;
+          }
+        }
+      }
+      .el-table__body-wrapper {
+        .el-table__row:nth-child(2n + 1) {
+          background-color: #213b52;
+          &:hover td {
+            background-color: #7bf8f430 !important;
+          }
+          td {
+            .cell {
+              // color: #525252;
+              color: rgba(123, 248, 244, 1);
+            }
+          }
+        }
+        .el-table__row:nth-child(2n) {
+          background-color: #063157;
+          &:hover td {
+            background-color: #7bf8f430 !important;
+          }
+          td {
+            .cell {
+              color: #fff;
+            }
+          }
+        }
+      }
+      .el-table__body-wrapper {
+        .el-button [class*="el-icon-"] + span {
+          // margin-left: 1px;
+        }
+      }
+    }
+    // 滚动条样式
+    .el-table--scrollable-y {
+      .el-table__body-wrapper {
+        &::-webkit-scrollbar {
+          width: 10px;
+          background: #012a53;
+          position: absolute;
+          top: 0;
+        }
+        &::-webkit-scrollbar-thumb {
+          /*滚动条里面小方块*/
+          // border-radius: 10px;
+          // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+          background: #00000052;
+          border-radius: 8px;
+        }
+        &::-webkit-scrollbar-track {
+          /*滚动条里面轨道*/
+          // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+          // border-radius: 10px;
+          // background-color: red;
+        }
+
+        &::-webkit-scrollbar-button:start {
+          // overflow: hidden;
+        }
+        &::-webkit-scrollbar-button:end {
+          // overflow: hidden;
+        }
+
+        // overflow-y: none !important;
+      }
+    }
+  }
+  // gis地图右上角的滚动条隐藏
+  .rightPic {
+    .el-table {
+      .el-table__body-wrapper {
+        overflow-y: hidden;
+        overflow-x: hidden;
+      }
+    }
+  }
+  .videoView {
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
+  // center下的分页
+  .myCenter {
+    .el-pagination {
+      button:disabled {
+        background-color: rgba(0, 0, 0, 0);
+      }
+      .el-pager li {
+        background-color: rgba(0, 0, 0, 0);
+        color: #fff;
+        cursor: pointer;
+        &.active {
+          color: #1890ff;
+        }
+        &:hover {
+          color: #7bf8f4;
+        }
+      }
+      .btn-prev,
+      .el-pagination .btn-next {
+        background-color: rgba(0, 0, 0, 0);
+      }
+    }
+    .el-pagination .btn-prev,
+    .el-pagination .btn-next {
+      background-color: rgba(0, 0, 0, 0);
+    }
+    // 禁用状态的左箭头
+    button[disabled] {
+      &:hover {
+        .el-icon-arrow-left,
+        .el-icon-arrow-right {
+          &::before {
+            color: #909399 !important;
+          }
+        }
+      }
+      .el-icon-arrow-left,
+      .el-icon-arrow-right {
+        &::before {
+          color: #909399;
+        }
+      }
+    }
+    button {
+      &:hover {
+        .el-icon-arrow-left,
+        .el-icon-arrow-right {
+          &::before {
+            color: #7bf8f4 !important;
+          }
+        }
+      }
+    }
+    // 平常状态下的
+    .el-icon-arrow-left,
+    .el-icon-arrow-right {
+      &::before {
+        color: #ffffff;
+      }
+    }
+    .el-pagination__jump {
+      color: #fff;
+    }
+    .el-input__inner {
+      background-color: rgba(0, 0, 0, 0);
+      border-color: #1890ff;
+      color: #fff;
+    }
+  }
+  // gis地图里抽屉的搜索样式
+  .search-input {
+    .el-input__inner {
+      height: 28px;
+      min-height: 28px;
+      outline: #053b6a;
+      background: none !important;
+      color: #fff;
+      &:focus {
+        // outline: #053b6a;
+        border-color: #fff;
+      }
+    }
+  }
+  /** 表单布局 **/
+  .form-header {
+    font-size: 15px;
+    color: #6379bb;
+    border-bottom: 1px solid #ddd;
+    margin: 8px 10px 25px 10px;
+    padding-bottom: 5px;
+  }
+
+  /** 表格布局 **/
+  .pagination-container {
+    position: relative;
+    height: 25px;
+    margin-bottom: 10px;
+    margin-top: 15px;
+    padding: 10px 20px !important;
+  }
+
+  /* tree border */
+  .tree-border {
+    margin-top: 5px;
+    border: 1px solid #e5e6e7;
+    background: #ffffff none;
+    border-radius: 4px;
+  }
+
+  .pagination-container .el-pagination {
+    right: 0;
+    position: absolute;
+  }
+
+  .el-table .fixed-width .el-button--mini {
+    padding-left: 0;
+    padding-right: 0;
+    width: inherit;
+  }
+
+  .el-tree-node__content > .el-checkbox {
+    margin-right: 8px;
+  }
+
+  .list-group-striped > .list-group-item {
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .list-group {
+    padding-left: 0px;
+    list-style: none;
+  }
+
+  .list-group-item {
+    border-bottom: 1px solid #e7eaec;
+    border-top: 1px solid #e7eaec;
+    margin-bottom: -1px;
+    padding: 11px 0px;
+    font-size: 13px;
+  }
+
+  .pull-right {
+    float: right !important;
+  }
+
+  .el-card__header {
+    padding: 14px 15px 7px;
+    min-height: 40px;
+  }
+
+  .el-card__body {
+    padding: 15px 20px 20px 20px;
+  }
+
+  .card-box {
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-bottom: 10px;
+  }
+
+  /* button color */
+  .el-button--cyan.is-active,
+  .el-button--cyan:active {
+    background: #20b2aa;
+    border-color: #20b2aa;
+    color: #ffffff;
+  }
+
+  .el-button--cyan:focus,
+  .el-button--cyan:hover {
+    background: #48d1cc;
+    border-color: #48d1cc;
+    color: #ffffff;
+  }
+
+  .el-button--cyan {
+    background-color: #20b2aa;
+    border-color: #20b2aa;
+    color: #ffffff;
+  }
+
+  /* text color */
+  .text-navy {
+    color: #1ab394;
+  }
+
+  .text-primary {
+    color: inherit;
+  }
+
+  .text-success {
+    color: #1c84c6;
+  }
+
+  .text-info {
+    color: #23c6c8;
+  }
+
+  .text-warning {
+    color: #f8ac59;
+  }
+
+  .text-danger {
+    color: #ed5565;
+  }
+
+  .text-muted {
+    color: #888888;
+  }
+
+  /* image */
+  .img-circle {
+    border-radius: 50%;
+  }
+
+  .img-lg {
+    width: 120px;
+    height: 120px;
+  }
+
+  .avatar-upload-preview {
+    position: absolute;
+    top: 50%;
+    transform: translate(50%, -50%);
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    box-shadow: 0 0 4px #ccc;
+    overflow: hidden;
+  }
+
+  /* 拖拽列样式 */
+  .sortable-ghost {
+    opacity: 0.8;
+    color: #fff !important;
+    background: #42b983 !important;
+  }
+
+  .top-right-btn {
+    position: relative;
+    float: right;
+  }
+  // 上传按钮
+  .hide {
+    .el-upload--picture-card {
+      display: none;
+    }
+  }
+  // 所有的提示框标题
+  .el-dialog__header {
+    padding-bottom: 0;
+    padding: 0px;
+    height: 51px;
+    line-height: 50px;
+    background-color: #053b6a;
+    .el-dialog__title {
+      display: inline-block;
+      margin-left: 22px;
+      color: #fff;
+    }
+    .el-dialog__headerbtn {
+      i {
+        color: #fff;
+      }
+    }
+    // background-color: ;
+  }
+
+  // gis地图内的bottom列表，如果隐藏在出现会有一个bug，这样可以解决
+  .b {
+    & > .el-bottom {
+      .el-table__body-wrapper {
+        height: 140px !important;
+      }
+    }
+  }
+
+  // center
+  .myCenter {
+    .el-bottom {
+      .el-table__body-wrapper {
+        max-height: 600px !important;
+      }
+    }
+  }
+
+  .rightPic {
+    .el-bottom {
+      .el-table__body-wrapper {
+        max-height: 250px !important;
+      }
+    }
+  }
+  // 设备巡检详情页表格样式
+  .inspectiondetail {
+    .el-table {
+      .el-table__header-wrapper,
+      .el-table__fixed-header-wrapper {
+        th {
+          word-break: break-word;
+          background-color: #1181e8;
+          color: #fff;
+          height: 40px;
+          font-size: 14px;
+        }
+      }
+      .el-table__body-wrapper {
+        .el-table__row:nth-child(2n + 1) {
+          background-color: #e6e6e6;
+          // &:hover {
+          //   td {
+          //     background-color: #f4f4f4;
+          //   }
+          // }
+          td {
+            .cell {
+              color: #053b6a;
+            }
+          }
+        }
+        .el-table__row:nth-child(2n) {
+          background-color: #f4f4f4;
+          // &:hover {
+          //   td {
+          //     background-color: #e6e6e6;
+          //   }
+          // }
+          td {
+            .cell {
+              color: #053b6a;
+            }
+          }
+        }
+      }
+      .el-table__body-wrapper {
+        .el-button [class*="el-icon-"] + span {
+          margin-left: 1px;
+        }
+      }
+    }
+  }
+  .zzz {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // 滚动条公共样式
+  .scrollStyle {
+    &::-webkit-scrollbar {
+      width: 10px;
+      background: rgba(6, 29, 51, 0.8);
+
+      // position: absolute;
+      // top: 0;
+    }
+    &::-webkit-scrollbar-thumb {
+      /*滚动条里面小方块*/
+      // border-radius: 10px;
+      // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      background: #00000053;
+
+      border-radius: 8px;
+    }
+    &::-webkit-scrollbar-track {
+      /*滚动条里面轨道*/
+      // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      // border-radius: 10px;
+      // background-color: red;
+    }
+
+    &::-webkit-scrollbar-button:start {
+      // overflow: hidden;
+    }
+    &::-webkit-scrollbar-button:end {
+      // overflow: hidden;
+    }
+
+    // overflow-y: none !important;
+  }
+  .amap-info {
+    position: fixed !important;
+    z-index: 999 !important;
+  }
+}

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/leftBar.vue

+<template>
+  <div> 
+    <div class="left-top" style="margin-top: 70px;width: 430px;margin-left: 10px;display: flex;justify-content: space-around;">
+      <div style="width: 40%;text-align: center;color: #00ffff;">
+        <p>从业人员数</p>
+        <span style="font-family: 'arialbd';font-size: 30px;background-image:-webkit-linear-gradient(bottom,#f0c41b,#e4dbb7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;  ">{{datanow.congyeNum}}</span>
+      </div>
+      <div style="width: 40%;text-align: center;color: #00ffff;">
+        <p>管道长度(m)</p>
+        <span style="font-family: 'arialbd';font-size: 30px;background-image:-webkit-linear-gradient(bottom,#f86742,#f0c41b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;  ">{{datanow.guandaoNum}}</span>
+      </div>
+    </div>
+    
+    <div>
+      <div class="item1" style="margin-top: 40px;">
+        <span class="dot">
+          <span class="dot-inner"></span>
+        </span>
+        <span>安全监管</span>
+        <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div> 
+        <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
+        <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
+      </div>
+  </div>
+  <div id="main1" style="width: 100%;height: 280px;"></div>
+    <div class="echarts-two" style="margin-top: 30px;width: 430px;margin-left: 10px;">
+      <div>
+        <div class="item1">
+          <span class="dot">
+            <span class="dot-inner"></span>
+          </span>
+          <span>任务完成率</span>
+          <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div> 
+          <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
+          <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
+        </div>
+      </div>
+      <div id="myCharttwo" :style="{width: '450px', height: '300px'}"></div>
+      <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 15px;">
+        ● 已完成数量:{{datanow.renwu[1]}}
+      </div>
+      <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 15px;color: #0099ff">
+        ● 未成数量:{{datanow.renwu[0]}}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  // 引入基本模板
+  let echarts = require('echarts/lib/echarts')
+  // 引入柱状图组件
+  require('echarts/lib/chart/bar')
+  // 引入提示框和title组件
+  require('echarts/lib/component/tooltip')
+  require('echarts/lib/component/title')
+  export default {
+    data () {
+    　　return {
+          dataAll:{
+              congyeNum:1544,
+              guandaoNum:3658495,
+              shigu1:[820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290],
+              shigu2:[452, 786, 456, 732, 458, 165, 198,489, 158, 358, 345, 675],
+              shigu3:[ 932, 901, 198,489, 158, 358, 345, 675,  901, 934, 1290, 888],
+              renwu:[50,92],
+              renwuzong:142
+          },
+          dataone:{
+              congyeNum:521,
+              guandaoNum:1254848,
+              shigu1:[223, 44, 332, 321, 458, 456, 653,122, 345, 133, 421, 123],
+              shigu2:[123, 234, 456, 567, 235, 12,89, 158, 158, 145, 175,224],
+              shigu3:[ 432, 301, 108,189, 18, 158, 145, 175,  401, 334, 590, 388],
+              renwu:[4,27],
+              renwuzong:31
+          },
+          datatwo:{
+              congyeNum:488,
+              guandaoNum:1244495,
+              shigu1:[653,122, 345, 133, 456, 653,122, 345, 133, 421, 123,500],
+              shigu2:[432, 301, 456, 567, 235, 12, 145, 175,  401, 334, 590, 388],
+              shigu3:[ 123, 234, 108,189, 18, 158, 123, 234, 456, 567, 235, 12],
+              renwu:[8,25],
+              renwuzong:33
+          },
+          datathree:{
+              congyeNum:535,
+              guandaoNum:1189492,
+              shigu1:[653,122, 345, 133, 456, 653,122, 345, 133, 421, 123,500],
+              shigu2:[432, 301, 456, 567, 456, 653,122, 175,  401, 334, 590, 388],
+              shigu3:[ 334, 590, 388, 133, 456, 123, 234, 653,122, 345, 133],
+              renwu:[38,40],
+              renwuzong:78
+          },
+          datanow:{
+              renwu:[0,0]
+          }
+      };
+    　},
+     mounted(){
+        this.datanow = this.dataAll;
+        this.drawLine(this.datanow);
+        this.initdata(this.datanow);
+      },
+    methods: {
+        choice(index){
+            console.log("-----"+index)
+            if(index==0){
+                this.datanow = this.dataAll;
+                this.drawLine(this.datanow);
+                this.initdata(this.datanow);
+            }else
+            if(index==1){
+                this.datanow = this.dataone;
+                this.drawLine(this.datanow);
+                this.initdata(this.datanow);
+            }else if(index==2){
+                this.datanow = this.datatwo;
+                this.drawLine(this.datanow);
+                this.initdata(this.datanow);
+            }else if(index==3){
+                this.datanow = this.datathree;
+                this.drawLine(this.datanow);
+                this.initdata(this.datanow);
+            }
+        },
+      drawLine(data){
+                // 基于准备好的dom，初始化echarts实例
+                let myChart = echarts.init(document.getElementById('main1'))
+                // 绘制图表
+                myChart.setOption({
+                    legend: {
+                        top:20,
+                        textStyle:{
+                            color:"#fff"
+                        },
+                    },
+                    
+                    grid: {  
+                            left: '5%',  
+                            right: '7%',  
+                            bottom: '4%', 
+                            containLabel: true  
+                        },
+                    xAxis: {
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#bbb6b6',
+                            },
+                        },
+                        axisTick: {           //去掉坐标轴刻线
+                            show: false
+                        },
+                        type: 'category',
+                        data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12']
+                    },
+                    yAxis: {
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#bbb6b6'
+                            },
+                        },
+                        splitLine: {
+                            show:true,
+                            lineStyle:{
+                                type:"dashed",
+                                color: '#bbb6b6',
+                            }
+                        },
+                        type: 'value'
+                    },
+                    series: [
+                        {
+                            name:"事故数量",
+                            data: data.shigu1,
+                            type: 'line',
+                            smooth: true
+                        },
+                        {
+                            data: data.shigu2,
+                            type: 'line',
+                            smooth: true,
+                            name:"隐患整治数"
+                        },
+                        {
+                            data: data.shigu3,
+                            type: 'line',
+                            smooth: true,
+                            name:"预警数量"
+                        }
+                    ]
+                });
+            },
+      initdata(data){
+          // 基于准备好的dom，初始化echarts实例
+          //console.log(data.renwu[0]+"=-=-=-"+data.renwu[1])
+          let myChart2 = this.$echarts.init(document.getElementById('myCharttwo'))
+          // 绘制图表
+          myChart2.setOption({
+              title: {
+                  text: '任务总数量:'+data.renwuzong,
+                  left: 'center',
+                  top :20,
+                  textStyle:{
+                      color: "#00ffff"
+                  }
+              },
+            tooltip: {
+              trigger: 'item',
+            },
+            series: [
+              {
+                name: '任务概况',
+                type: 'pie',
+                radius: '70%',
+                center: ['50%','58%'],
+                data: [
+                  { 
+                    value: data.renwu[0],
+                    name: '未完成',
+                    itemStyle: { color: '#09f' }
+                },
+                  { 
+                    value: data.renwu[1],
+                      name: '已完成' ,
+                    itemStyle: { color: '#00ffff' }
+                  },
+                ],
+                  label:{
+                    color:'#fff',
+                      fontSize: 18
+                  },
+                emphasis: {
+                  itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  }
+                }
+              }
+            ]
+          });
+      },
+
+
+
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+/* @font-face {
+  font-family: 'arialbd';
+} */
+.item1{
+    width: 95%;
+    height: 30px;
+    font-size: 18px;
+    line-height: 30px;
+    color: #ffffff;
+    padding-left: 10px;
+    margin-top: 10px;
+    font-weight: 700;
+    font-style: italic;
+    margin-left: 10px;
+    background-image: linear-gradient(to left, #122033, rgb(51 152 243 / 50%) 50%, #111a22);
+}
+.dot {
+        display: inline-block;
+        position: relative;
+        width: 10px;
+        height: 10px;
+        background: rgb(30, 185, 190);
+        border-radius: 50%;
+        margin-right: 10px;
+        margin-left: 10px;
+        margin-bottom: 2px;
+    }
+
+    .dot-inner {
+        background: #44d7dc;
+        position: absolute;
+        top: 0;
+        left: 0;
+        box-sizing: border-box;
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        -webkit-animation: vabDot 1.2s ease-in-out infinite;
+        animation: vabDot 1.2s ease-in-out infinite;
+    }
+
+    @-webkit-keyframes vabDot {
+        0% {
+            opacity: .6;
+            transform: scale(.8)
+        }
+
+        to {
+            opacity: 0;
+            transform: scale(2.4)
+        }
+    }
+
+    @keyframes vabDot {
+        0% {
+            opacity: .6;
+            transform: scale(.8)
+        }
+
+        to {
+            opacity: 0;
+            transform: scale(2.4)
+        }
+    }
+</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/components/bigWindow/rightBar.vue

+<template>
+
+    <div style="height: 100%">
+        <div>
+            <div class="item1" style="margin-top: 60px;">
+              <span class="dot">
+                <span class="dot-inner"></span>
+              </span>
+              <span>用户安全监控设备</span>
+              <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div> 
+              <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
+              <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
+            </div>
+        </div>
+        <div class="divfen" style="width: 100%;height: 30%;">
+            <div class ="divall" style="width: 50%">
+                <div class="titleTex">属地巡查</div>
+                <div class="titleTex divfen" style="height: 50px;margin-top: 0px">
+                    <div class="numdiv">{{datanow.xunchaAllOne1}}</div>
+                    <div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllOne2}}</div>
+                    <div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllOne3}}</div>
+                    <div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllOne4}}</div>
+                </div>
+                <div id="main21" style="height: 50%;width: 100%"></div>
+                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;">
+                    ● 巡查次数:{{datanow.xunoneevery1}}
+                </div>
+                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #f0c41b">
+                    ● 发现问题数:{{datanow.xunoneevery2}}
+                </div>
+            </div>
+            <div style="width:14px;height: 100%;color: white;font-size: 13px;margin-top: 150px;">
+                <div style="width: 100%;height: 10px;background: #188df0"></div>
+                已整改
+                <div style="width: 100%;height: 10px;background: #f0c41b;margin-top: 15px;"></div>
+                未整改
+            </div>
+            <div class="divall" style="width: 50%" >
+                <div class="titleTex">行业检查</div>
+                <div class="titleTex divfen" style="height: 50px;margin-top: 0px">
+                    <div class="numdiv">{{datanow.xunchaAllTwo1}}</div>
+                    <div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllTwo2}}</div>
+                    <div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllTwo3}}</div>
+                    <div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllTwo4}}</div>
+                </div>
+                <div id="main22" style="height: 50%;width: 100%"></div>
+                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;">
+                    ● 巡查次数：{{datanow.xuntwoevery1}}
+                </div>
+                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #f0c41b">
+                    ● 发现问题数：{{datanow.xuntwoevery2}}
+                </div>
+            </div>
+        </div>
+        <div class="echarts-one" style="margin-top: 10px;width: 430px;margin-left: 10px;">
+            <div>
+              <div class="item1">
+                <span class="dot">
+                  <span class="dot-inner"></span>
+                </span>
+                <span>资源统计</span>
+                <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div> 
+                <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
+                <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
+              </div>
+            </div>
+            <div id="myChartone" :style="{width: '420px', height: '250px'}"></div>
+          </div>
+        <div>
+            <div class="item1">
+              <span class="dot">
+                <span class="dot-inner"></span>
+              </span>
+              <span>投诉统计</span>
+              <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div> 
+              <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
+              <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
+            </div>
+        </div>
+        <div class="divfen" style="width: 100%;height: 280px;margin-top: 10px">
+            <div style="width: 50%;height: 100%">
+                <div id="main31" style="width: 100%;height: 66%"></div>
+                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;">
+                    ● 已处理：{{datanow.tousuevery1}}
+                </div>
+                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #ff4040">
+                    ● 未处理：{{datanow.tousuevery2}}
+                </div>
+            </div>
+            <div style="width: 50%;height: 100%">
+                <div id="main32" style="width: 100%;height: 66%"></div>
+                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #0000ff">
+                    ● 在线数量：{{datanow.deviceevery1}}
+                </div>
+                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #ffff00">
+                    ● 离线数量：{{datanow.deviceevery2}}
+                </div>
+                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #ff4040">
+                    ● 报警数量：{{datanow.deviceevery3}}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    // 引入基本模板
+    import * as echarts from 'echarts';
+    export default {
+        data () {
+            return {
+                dataall:{
+                    xunchaAllOne1: 1,
+                    xunchaAllOne2: 3,
+                    xunchaAllOne3: 8,
+                    xunchaAllOne4: 3,
+                    xunchaAllTwo1: 2,
+                    xunchaAllTwo2: 2,
+                    xunchaAllTwo3: 2,
+                    xunchaAllTwo4: 6,
+                    xunList1:[
+                        { value: 678,name: '30.4%' },
+                        { value: 1548,name: '69.6%' }
+                    ],
+                    xunList11:[
+                        { value: 1048 },
+                        { value: 335}
+                    ],
+                    xunoneevery1:1048,
+                    xunoneevery2:355,
+                    xunList2:[
+                        { value: 678,name: '28.5%' },
+                        { value: 1548,name: '71.5%' }
+                    ],
+                    xunList22:[
+                        { value: 1048 },
+                        { value: 335}
+                    ],
+                    xuntwoevery1:1674,
+                    xuntwoevery2:552,
+                    shigu1:[820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290],
+                    shigu2:[452, 786, 456, 732, 458, 165, 198,489, 158, 358, 345, 675],
+                    shigu3:[ 932, 901, 198,489, 158, 358, 345, 675,  901, 934, 1290, 888],
+                    tousu:[{ value: 1048, name: '已处理' },
+                        { value: 255, name: '未处理' }
+                    ],
+                    tousuNum:1303,
+                    tousuevery1:1048,
+                    tousuevery2:255,
+                    divice:[
+                        { value: 31, name: '在线数量' },
+                        { value: 19, name: '离线数量' },
+                        { value: 1, name: '报警数量' }
+                    ],
+                    deviceNum:51,
+                    deviceevery1:31,
+                    deviceevery2:19,
+                    deviceevery3:1,
+                    zhuzhuang:[16,13,27,2]
+                },
+                dataone:{
+                    xunchaAllOne1: 0,
+                    xunchaAllOne2: 3,
+                    xunchaAllOne3: 8,
+                    xunchaAllOne4: 3,
+                    xunchaAllTwo1: 0,
+                    xunchaAllTwo2: 7,
+                    xunchaAllTwo3: 2,
+                    xunchaAllTwo4: 6,
+                    xunList1:[
+                        { value: 224,name: '32.3%' },
+                        { value: 641,name: '67.7%' }
+                    ],
+                    xunList11:[
+                        { value: 338 },
+                        { value: 112}
+                    ],
+                    xunoneevery1:335,
+                    xunoneevery2:141,
+                    xunList2:[
+                        { value: 224,name: '29.1%' },
+                        { value: 544,name: '78.9%' }
+                    ],
+                    xunList22:[
+                        { value: 354 },
+                        { value: 111}
+                    ],
+                    xuntwoevery1:511,
+                    xuntwoevery2:199,
+                    shigu1:[223, 44, 332, 321, 458, 456, 653,122, 345, 133, 421, 123],
+                    shigu2:[123, 234, 456, 567, 235, 12,89, 158, 158, 145, 175,224],
+                    shigu3:[ 432, 301, 108,189, 18, 158, 145, 175,  401, 334, 590, 388],
+                    tousu:[{ value: 322, name: '已处理' },
+                        { value: 181, name: '未处理' }
+                    ],
+                    tousuNum:503,
+                    tousuevery1:322,
+                    tousuevery2:181,
+                    divice:[
+                        { value: 11, name: '在线数量' },
+                        { value: 8, name: '离线数量' },
+                        { value: 1, name: '报警数量' }
+                    ],
+                    deviceNum:21,
+                    deviceevery1:11,
+                    deviceevery2:8,
+                    deviceevery3:1,
+                    zhuzhuang:[8,3,11,1]
+                },
+                datatwo:{
+                    xunchaAllOne1: 0,
+                    xunchaAllOne2: 4,
+                    xunchaAllOne3: 2,
+                    xunchaAllOne4: 1,
+                    xunchaAllTwo1: 0,
+                    xunchaAllTwo2: 6,
+                    xunchaAllTwo3: 7,
+                    xunchaAllTwo4: 5,
+                    xunList1:[
+                        { value: 224,name: '30.4%' },
+                        { value: 400,name: '69.6%' }
+                    ],
+                    xunList11:[
+                        { value: 212 },
+                        { value: 209}
+                    ],
+                    xunoneevery1:335,
+                    xunoneevery2:141,
+                    xunList2:[
+                        { value: 224,name: '28.5%' },
+                        { value: 300,name: '71.5%' }
+                    ],
+                    xunList22:[
+                        { value: 475 },
+                        { value: 200}
+                    ],
+                    xuntwoevery1:475,
+                    xuntwoevery2:200,
+                    shigu1:[653,122, 345, 133, 456, 653,122, 345, 133, 421, 123,500],
+                    shigu2:[432, 301, 456, 567, 235, 12, 145, 175,  401, 334, 590, 388],
+                    shigu3:[ 123, 234, 108,189, 18, 158, 123, 234, 456, 567, 235, 12],
+                    tousu:[{ value: 344, name: '已处理' },
+                        { value: 121, name: '未处理' }
+                    ],
+                    tousuNum:322,
+                    tousuevery1:211,
+                    tousuevery2:111,
+                    divice:[
+                        { value: 2, name: '在线数量' },
+                        { value: 4, name: '离线数量' },
+                        { value: 0, name: '报警数量' }
+                    ],
+                    deviceNum:6,
+                    deviceevery1:2,
+                    deviceevery2:4,
+                    deviceevery3:0,
+                    zhuzhuang:[2,5,7,1]
+                },
+                datathree:{
+                    xunchaAllOne1: 0,
+                    xunchaAllOne2: 5,
+                    xunchaAllOne3: 7,
+                    xunchaAllOne4: 9,
+                    xunchaAllTwo1: 0,
+                    xunchaAllTwo2: 8,
+                    xunchaAllTwo3: 8,
+                    xunchaAllTwo4: 9,
+                    xunList1:[
+                        { value: 124,name: '30.4%' },
+                        { value: 400,name: '69.6%' }
+                    ],
+                    xunList11:[
+                        { value: 212 },
+                        { value: 309}
+                    ],
+                    xunoneevery1:335,
+                    xunoneevery2:141,
+                    xunList2:[
+                        { value: 224,name: '28.5%' },
+                        { value: 300,name: '71.5%' }
+                    ],
+                    xunList22:[
+                        { value: 475 },
+                        { value: 200}
+                    ],
+                    xuntwoevery1:475,
+                    xuntwoevery2:200,
+                    shigu1:[653,122, 345, 133, 456, 653,122, 345, 133, 421, 123,500],
+                    shigu2:[432, 301, 456, 567, 456, 653,122, 175,  401, 334, 590, 388],
+                    shigu3:[ 334, 590, 388, 133, 456, 123, 234, 653,122, 345, 133],
+                    tousu:[{ value: 124, name: '已处理' },
+                        { value: 111, name: '未处理' }
+                    ],
+                    tousuNum:335,
+                    tousuevery1:124,
+                    tousuevery2:111,
+                    divice:[
+                        { value: 12, name: '在线数量' },
+                        { value: 6, name: '离线数量' },
+                        { value: 0, name: '报警数量' }
+                    ],
+                    deviceNum:24,
+                    deviceevery1:12,
+                    deviceevery2:6,
+                    deviceevery3:0,
+                    zhuzhuang:[6,5,9,0]
+                },
+                datanow:{}
+            };
+        },
+        mounted(){
+            this.datanow = this.dataall;
+            this.drawLine(this.datanow);
+            this.drawLine2(this.datanow);
+            this.drawLine3(this.datanow);
+        },
+        methods: {
+            choice(index){
+                console.log("===="+index)
+                if(index==0){
+                    this.datanow = this.dataall;
+                    this.drawLine(this.datanow);
+                    this.drawLine2(this.datanow);
+                    this.drawLine3(this.datanow);
+                }else
+                if(index==1){
+                    this.datanow = this.dataone;
+                    this.drawLine(this.datanow);
+                    this.drawLine2(this.datanow);
+                    this.drawLine3(this.datanow);
+                }else if(index==2){
+                    this.datanow = this.datatwo;
+                    this.drawLine(this.datanow);
+                    this.drawLine2(this.datanow);
+                    this.drawLine3(this.datanow);
+                }else if(index==3){
+                    this.datanow = this.datathree;
+                    this.drawLine(this.datanow);
+                    this.drawLine2(this.datanow);
+                    this.drawLine3(this.datanow);
+                }
+            },
+            drawLine(data){
+          // 基于准备好的dom，初始化echarts实例
+          let myChart1 = this.$echarts.init(document.getElementById('myChartone'))
+          // 绘制图表
+          myChart1.setOption({
+              grid:{
+                  x:30,
+                  y:30,
+                  x2:30,
+                  y2:30
+              },
+              title: {
+                // text: '资源统计',
+                textStyle:{
+                    //文字颜色
+                    color:'#ccc',
+                    //字体风格,'normal','italic','oblique'
+                    fontStyle:'normal',
+                    //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
+                    fontWeight:'bold',
+                    //字体系列
+                    fontFamily:'sans-serif',
+                    //字体大小
+            　　　　 fontSize:18
+                }
+               },
+              tooltip: {},
+              xAxis: {
+                  data: ["阀井","调压箱","场站","监控"],
+                  splitLine: {
+                            show: false
+                        },
+                  axisLabel: {
+                      show: true,
+                      textStyle: {
+                          color: '#bbb6b6'
+                      }
+                  }
+              },
+              yAxis: {
+                splitLine: {
+                            show: false
+                        },
+                axisLabel: {
+                    show: true,
+                    textStyle: {
+                        color: '#bbb6b6'
+                    }
+                }
+              },
+              series: [{
+                  name: '',
+                  type: 'bar',
+                  data: data.zhuzhuang,
+                  barWidth: 20,
+                  itemStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      { offset: 0, color: '#83bff6' },
+                      { offset: 0.5, color: '#188df0' },
+                      { offset: 1, color: '#188df0' }
+                    ])
+                }
+              }]
+          });
+      },
+            drawLine2(data){
+                // 基于准备好的dom，初始化echarts实例
+                let myChart2 = echarts.init(document.getElementById('main21'));
+                let myChart22 = echarts.init(document.getElementById('main22'));
+                // 绘制图表
+                myChart2.setOption({
+                    // tooltip: {
+                    //     trigger: 'item',
+                    //     formatter: '{a} <br/>{b}: {c} ({d}%)'
+                    // },
+                    series: [
+                        {
+                            name: 'Access From',
+                            type: 'pie',
+                            selectedMode: 'single',
+                            radius: [0, '55%'],
+                            label: {
+                                position: 'inner',
+                                fontSize: 14
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            data:data.xunList1,
+                            color:['#f0c41b','#188df0']
+                        },
+                        {
+                            name: 'Access From',
+                            type: 'pie',
+                            radius: ['70%', '80%'],
+                            label: {
+                                position: 'inner',
+                                fontSize: 14
+                            },
+                            center: ['50%', '50%'],
+                            data:data.xunList11,
+                            color:['#00ffff','#f0c41b']
+                        }
+                    ]
+                });
+                myChart22.setOption({
+                    // tooltip: {
+                    //     trigger: 'item',
+                    //     formatter: '{a} <br/>{b}: {c} ({d}%)'
+                    // },
+                    series: [
+                        {
+                            name: 'Access From',
+                            type: 'pie',
+                            selectedMode: 'single',
+                            radius: [0, '55%'],
+                            label: {
+                                position: 'inner',
+                                fontSize: 14
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            data: data.xunList2,
+                            color:['#f0c41b','#188df0']
+                        },
+                        {
+                            name: 'Access From',
+                            type: 'pie',
+                            radius: ['70%', '80%'],
+                            label: {
+                                position: 'inner',
+                                fontSize: 14
+                            },
+                            center: ['50%', '50%'],
+                            data:data.xunList22,
+                            color:['#00ffff','#f0c41b']
+                        }
+                    ]
+                });
+            },
+            drawLine3(data){
+                // 基于准备好的dom，初始化echarts实例
+                let myChart31 = echarts.init(document.getElementById('main31'))
+                let myChart32 = echarts.init(document.getElementById('main32'))
+                // 绘制图表
+                myChart31.setOption({
+                    title: {
+                        text: '投诉统计:'+data.tousuNum,
+                        left: 'center',
+                        textStyle: {
+                            color: "#0ff"
+                        }
+                    },
+                    tooltip: {
+                        trigger: 'item'
+                    },
+                    series: [
+                        {
+                            name: '投诉统计',
+                            type: 'pie',
+                            radius: ['50%', '70%'],
+                            center: ['50%', '60%'],
+                            avoidLabelOverlap: false,
+                            label: {
+                                show: false,
+                                position: 'center'
+                            },
+                            emphasis: {
+                                label: {
+                                    show: true,
+                                    fontSize: '40',
+                                    fontWeight: 'bold'
+                                }
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            data: data.tousu,
+                            color:["#00ffff","#FF4040"]
+                        }
+                    ]
+                });
+                myChart32.setOption({
+                    title: {
+                        text: '设备数量:'+data.deviceNum,
+                        left: 'center',
+                        textStyle: {
+                            color: "#0ff"
+                        }
+                    },
+                    tooltip: {
+                        trigger: 'item'
+                    },
+                    series: [
+                        {
+                            name: '设备概况',
+                            type: 'pie',
+                            radius: ['50%', '70%'],
+                            center: ['50%', '60%'],
+                            avoidLabelOverlap: false,
+                            label: {
+                                show: false,
+                                position: 'center'
+                            },
+                            emphasis: {
+                                label: {
+                                    show: true,
+                                    fontSize: '40',
+                                    fontWeight: 'bold'
+                                }
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            data:data.divice,
+                            color:["#188df0","#ffff00","#FF4040"]
+                        }
+                    ]
+                });
+            }
+        }
+    }
+</script>
+
+<style>
+.titleTex{
+    height: 30px;
+    width: 100%;
+    color: aqua;
+    text-align: center;
+    line-height: 30px;
+    margin-top: 10px;
+}
+.divall{
+    height: 100%;
+    width: 100%;
+}
+.divfen{
+    display:flex;
+    justify-content:center;
+    align-items:center;
+}
+.numdiv{
+    background: #47aed5;
+    color: white;
+    width: 27px;
+    font-size: 30px;
+}
+.item1{
+    width: 90%;
+    height: 30px;
+    font-size: 18px;
+    line-height: 30px;
+    color: #ffffff;
+    padding-left: 10px;
+    margin-top: 10px;
+    font-weight: 700;
+    font-style: italic;
+    margin-left: 10px;
+    background-image: linear-gradient(to left, #121a22, rgb(51 152 243 / 50%) 50%, #112238);
+}
+.dot {
+        display: inline-block;
+        position: relative;
+        width: 10px;
+        height: 10px;
+        background: rgb(30, 185, 190);
+        border-radius: 50%;
+        margin-right: 10px;
+        margin-left: 10px;
+        margin-bottom: 2px;
+    }
+
+    .dot-inner {
+        background: #44d7dc;
+        position: absolute;
+        top: 0;
+        left: 0;
+        box-sizing: border-box;
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        -webkit-animation: vabDot 1.2s ease-in-out infinite;
+        animation: vabDot 1.2s ease-in-out infinite;
+    }
+    @-webkit-keyframes vabDot {
+        0% {
+            opacity: .6;
+            transform: scale(.8)
+        }
+
+        to {
+            opacity: 0;
+            transform: scale(2.4)
+        }
+    }
+
+    @keyframes vabDot {
+        0% {
+            opacity: .6;
+            transform: scale(.8)
+        }
+
+        to {
+            opacity: 0;
+            transform: scale(2.4)
+        }
+    }
+</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/utils/mapClass/map.js

+/*
+ * @Author: your name
+ * @Date: 2022-01-11 13:45:12
+ * @LastEditTime: 2022-02-17 10:12:27
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /test/hello-world/src/utils/mapClass.js
+ */
+import { pipeColor, svgUrl } from "@/utils/mapClass/config.js";
+
+// 编辑类
+// 在地图上新增的设备可以直接编辑，
+// 已经保存完成的设备需要点编辑才可以编辑
+export class EditorMap {
+  // 地图的对象实例
+  map = null;
+  // 父vue的实例
+  vue = null;
+  // 操作 新建，编辑，删除，编辑跟删除只对已经在图上的设备有效 默认值：0， 新建：1，编辑：2, 删除: 3。
+  // 新建的时候会把未保存的线条清空
+  control = 0;
+  // 鼠标事件对象，用来将点跟线上图
+  mousetool = null;
+  // 当前正在手动绘制的对象
+  nowMouseTarget = null;
+  // 当线mousetool线被按下的时候的flag 当线被按下的时候为true，就不询问是否删除了
+  mosueToolPolineDownFlag = false;
+  // 绘制marer的时候的配置，在绘制完挂载事件的时候需要使用
+  mouseToolMarkerOptions = null;
+  // 绘制poline的时候的配置，在绘制完挂载事件的时候需要使用
+  mouseToolPolineOptions = null;
+
+  // 存放所有的设备的数组集合，这是一个对象，对象里面是各种设备的数组
+  allDevic = {};
+  // 存放所有的管道
+  pipeArr = {};
+  // 当前的infowindow的组件
+  infowindowComponent = null;
+  // infowindow本身
+  infowindow = null;
+
+  constructor(contaienr, config = {}, vue) {
+    this.map = new AMap.Map(contaienr, {
+      viewMode: "3D",
+      center: [114.196007, 38.260288],
+      layers: [AMap.createDefaultLayer()], // layers 字段为空或者不赋值将会自动创建默认底图。
+      zoom: 14,
+      ...config,
+    });
+    this.vue = vue;
+    this.init();
+  }
+
+  init() {
+    // 地图事件
+    this.mapEvent();
+    // 手动点线上图准备,编辑模式
+    this.mouseAddDevice();
+    // this.mouseAddMarker();
+    // this.mouseAddPipeline();
+  }
+  // map的事件监听
+  mapEvent() {
+    this.map.on("click", () => {
+      // mousetool对象画出的对象的操作
+      // 如果有手动绘制对象，要手动清楚一下，因为画线的时候不好清除旧线，这其实是用来清楚旧线的
+      // 当画出来的线被mousedown，不删除，但是mouseToolPipeLineFlag要归位，在移出线的时候统一归位
+      // 如果对象是marker，直接删除
+      if (this.nowMouseTarget?.type == "AMap.Marker") {
+        this.mouseToolDrawClear();
+      } else {
+        // 当地图上已经画了线，并且没有点在线上，询问是否删除
+        if (this.nowMouseTarget && !this.mosueToolPolineDownFlag) {
+          this.confirm("是否重新绘制管道", { type: "warning" })
+            .then(() => {
+              // 删除原来的线
+              this.mouseToolDrawClear();
+              // 鼠标事件开启，并且赋值原来的属性，this.mouseToolMarkerOptions是开启绘制的时候记录的
+              this.mousetool.polyline(this.mouseToolPolineOptions);
+            })
+            .catch(() => {});
+        }
+      }
+    });
+    this.map.on("moveend", () => {
+      console.log("地图停止移动");
+      if (this.flag) {
+        console.log("弹框");
+        this.flag = false;
+      }
+    });
+    window.panTo = () => {
+      this.flag = true;
+      this.map.panTo([116.428285, 39.886129]);
+    };
+  }
+  // 弹框工具
+  confirm(message, obj) {
+    return this.vue.$confirm(message, obj);
+  }
+
+  // 改变操作状态
+  changeControl(num) {
+    this.control = num;
+  }
+
+  // 点线编辑上图准备
+  mouseAddDevice() {
+    this.map.plugin(["AMap.MouseTool"], () => {
+      this.mousetool = new AMap.MouseTool(this.map);
+    });
+    // 挂载绘制结束的事件
+    this.mouseDrawEvent();
+  }
+
+  // 点或者线上图结束后触发的事件
+  mouseDrawEvent() {
+    this.mousetool.on("draw", (e) => {
+      const target = e.obj;
+      // console.log([target._position.lng, target._position.lat]);
+      const { type: targetType } = target;
+      // 当这个点是marker的时候
+      if (targetType == "AMap.Marker") {
+        this.mouseToolMarkerEvent(target);
+      } else {
+        // 如果是线,挂上编辑
+        this.lineEditor(target);
+        this.mousetool.close();
+        this.mouseToolPolineEvent(target);
+        console.log(targetType, "当前对象是管道");
+      }
+      this.nowMouseTarget = target;
+    });
+  }
+
+  // 绘制marker结束后，在marker身上添加的事件
+  mouseToolMarkerEvent(target) {
+    // 由于画出来的marker点击会换位置，所以当移入的时候删除绘制事件，移出去在增加绘制事件
+    target.on("mouseover", (e) => {
+      // 鼠标事件关闭
+      this.mousetool.close(false);
+    });
+    target.on("mouseout", (e) => {
+      // 这里不方便获取原来的属性，因为position不好解决，还是设置一个值吧
+      // 鼠标事件开启，并且赋值原来的属性，this.mouseToolMarkerOptions是开启绘制的时候记录的
+      this.mousetool.marker(this.mouseToolMarkerOptions);
+    });
+    // 点
+    target.on("click", (e) => {
+      // 弹框
+    });
+  }
+  // 挂上线以及线的事件
+  lineEditor(line) {
+    // line.editor && line.editor.close();
+    // 当前点击次数，1次为编辑，2次为弹框
+    line.editorNum = 0;
+    line.editor = new AMap.PolyEditor(this.map, line);
+  }
+  // 绘制管道的时候，挂载的事件
+  mouseToolPolineEvent(target) {
+    // 线按下的时候会变成编辑，mousetool事件会清空 移出线的时候 在把polyline事件加上
+    target.on("mouseover", (e) => {
+      // 鼠标事件关闭
+      // this.mousetool.close(false);
+    });
+    target.on("mouseout", (e) => {
+      // 有时候按在线上移动地图，map点击事件中mosueToolPolineDownFlag无法归位，在这里归位
+      this.mosueToolPolineDownFlag = false;
+      // 鼠标事件开启，并且赋值原来的属性，this.mouseToolMarkerOptions是开启绘制的时候记录的
+      // this.mousetool.polyline(this.mouseToolPolineOptions);
+    });
+    // 线
+    target.on("mousedown", (e) => {
+      const line = e.target;
+      // mosueTool按下的flag,按在线上，不询问是否删除
+      this.mosueToolPolineDownFlag = true;
+      // 按下的时候要关闭事件
+      this.mousetool.close(false);
+      // 如果当前状态不是编辑，则进入编辑状态
+      if (line.editorNum < 1) {
+        // 打开并且++
+        line.editor.open();
+        line.editorNum++;
+      } else {
+        // 这里就要弹框了
+        console.log(line.getPath());
+      }
+    });
+  }
+  // 设备点击上图开启
+  mouseAddMarker(markerObj = {}) {
+    // 清空已经绘制完的对象
+    this.mousetoolClose(true);
+    // 记录一下配置项，在挂载点击的时候，需要使用
+    this.mouseToolMarkerOptions = {
+      draggable: true,
+      ...markerObj,
+    };
+    this.mousetool.marker(this.mouseToolMarkerOptions);
+  }
+  // 管线点击上图开启
+  mouseAddPipeline(pipeObj = {}) {
+    this.mousetoolClose(true);
+    // 开始画线
+    this.mosuetoolPolineFlag = true;
+    this.mouseToolPolineOptions = {
+      strokeWeight: 5,
+      ...pipeObj,
+    };
+    this.mousetool.polyline(this.mouseToolPolineOptions);
+  }
+
+  // 手动清除map上绘制的对象
+  mouseToolDrawClear() {
+    if (this.nowMouseTarget) {
+      this.map.remove(this.nowMouseTarget);
+      // 如果有editor,则关闭
+      this.nowMouseTarget.editor && this.nowMouseTarget.editor.close();
+      this.nowMouseTarget = null;
+    }
+  }
+  // 关闭点击上图事件 true清除之前绘制的图像，false 仅关闭上图事件
+  mousetoolClose(boolean) {
+    //  清空地图上的绘制对象的同时,也要清楚这个nowMouseTarget控制对象
+    if (this.nowMouseTarget) {
+      // 如果有editor,则关闭
+      this.nowMouseTarget.editor && this.nowMouseTarget.editor.close();
+      this.nowMouseTarget = null;
+    }
+    this.mousetool.close(boolean);
+  }
+
+  /**
+   *
+   *
+   *
+   *
+   *
+   *
+   * 地图上add设备
+   *
+   *
+   * @description:
+   * @param {*} deviceData marker的数据
+   * @param {*} compontent marker点击弹出的infowindow的组件
+   * @return {*}
+   */
+  addDevice(deviceData, compontent) {
+    const { longitude: lng, latitude: lat, type, companyType } = deviceData;
+    const icon = svgUrl[type];
+    let device = this.createMarker({
+      map: this.map,
+      anchor: "bottom-center",
+      icon,
+      position: [lng, lat],
+      extData: deviceData,
+    });
+    // device.hide();
+    // 如果没有有这个公司的数组，就创建，有就直接push
+    if (!Array.isArray(this.allDevic[companyType])) {
+      this.allDevic[companyType] = [];
+    }
+    this.allDevic[companyType].push(device);
+
+    // 设备的事件函数
+    this.deviceEvent(device, compontent);
+  }
+  deviceEvent(device, compontent) {
+    device.on("click", (e) => {
+      const target = e.target;
+      // 如果control==0就是默认值，没有使用123功能，就显示infowindow
+      if (this.control == 0) {
+        this.markerClick(target, compontent);
+      } else if (this.control == 2) {
+        // 2是已经上图的设备拥有的编辑功能
+      } else if (this.control == 3) {
+        // 3是删除操作
+      }
+    });
+  }
+  /** 点击marker出现infowindow
+   * @description:
+   * @param {*} target 点击的对象
+   * @param {*} compontent marker点击弹出的infowindow的组件
+   * @return {*}
+   */
+  markerClick(target, compontent) {
+    const deviceExtData = target.getExtData();
+    const { longitude: lng, latitude: lat } = deviceExtData;
+    // 创建一个可以控制的组件，将其dom插入infowindow
+    this.infowindowComponent = this.createInfowindowDom(
+      this.vue,
+      this,
+      deviceExtData,
+      compontent
+    );
+    // 没恩么用，控制台测试的时候用着玩的
+    window.func = () => {
+      const { longitude: lng, latitude: lat } = target.getExtData();
+      const cd = {
+        id: 1,
+        name: "9",
+        lng,
+        lat,
+      };
+      this.infowindowComponentChange(cd);
+      target.setExtData(cd);
+    };
+    this.infowindow = new AMap.InfoWindow({
+      isCustom: true,
+      content: this.infowindowComponent.$el,
+      position: [lng, lat],
+      // anchor: "top-left",
+      // offset: [20, -45],
+      anchor: "middle-left",
+      offset: [20, -10],
+    });
+    this.infowindow.open(this.map);
+  }
+  // 创建要加入到infowindow里的
+  createInfowindowDom(vueRoot, mapClass, deviceData, compontent) {
+    const Component = this.vue.$Vue.extend(compontent, {});
+    return new Component({
+      data() {
+        return {
+          // 当前vue实例
+          vueRoot,
+          // 自己写的map类
+          mapClass,
+          // 数据
+          deviceData,
+        };
+      },
+    }).$mount();
+  }
+  // 当前显示的infowindow内部的数据发生变化，一般在socket传回数据的时候使用
+  infowindowComponentChange(data) {
+    this.infowindowComponent.deviceData = data;
+  }
+  // 创建marker
+  createMarker(MarkerOptions) {
+    return new AMap.Marker(MarkerOptions);
+  }
+  // 地图上add管道
+  addPipeLine(objData, component) {
+    const { path, pipePressure, companyType } = objData;
+    // 根据压力获取颜色
+    const color = pipeColor[pipePressure];
+    const pipe = this.createPipeLine({
+      path,
+      strokeWeight: 4,
+      strokeColor: color,
+      extData: objData,
+      cursor: "pointer",
+    });
+    this.map.add(pipe);
+    // pipe.hide();
+    if (!Array.isArray(this.pipeArr[companyType])) {
+      this.pipeArr[companyType] = [];
+    }
+    this.pipeArr[companyType].push(pipe);
+    // console.log(this.pipeArr);
+    // this.map.panTo([path[0][0], path[0][1]]);
+    this.pipeEvent(pipe, component);
+  }
+  createPipeLine(pipeLineOptions) {
+    return new AMap.Polyline(pipeLineOptions);
+  }
+  pipeEvent(pipe, compontent) {
+    pipe.on("mouseover", (e) => {
+      const target = e.target;
+      // 获取当前颜色
+      const options = target.getOptions();
+      options.strokeColor = "blue";
+      target.setOptions(options);
+    });
+
+    pipe.on("mouseout", (e) => {
+      const target = e.target;
+      // 根据管道压力获取颜色
+      const { pipePressure } = target.getExtData();
+      const color = pipeColor[pipePressure];
+      // 获取当前颜色
+      const options = target.getOptions();
+      options.strokeColor = color;
+      target.setOptions(options);
+    });
+    pipe.on("click", (e) => {
+      const target = e.target;
+      target.lnglat = e.lnglat;
+      // 如果control==0就是默认值，没有使用123功能，就显示infowindow
+      if (this.control == 0) {
+        this.pipeClick(target, compontent);
+      } else if (this.control == 2) {
+        // 2是已经上图的设备拥有的编辑功能
+      } else if (this.control == 3) {
+        // 3是删除操作
+      }
+    });
+  }
+
+  pipeClick(target, compontent) {
+    const deviceExtData = target.getExtData();
+    const { lng, lat } = target.lnglat;
+    // 创建一个可以控制的组件，将其dom插入infowindow
+    this.infowindowComponent = this.createInfowindowDom(
+      this.vue,
+      this,
+      deviceExtData,
+      compontent
+    );
+    // 没恩么用，控制台测试的时候用着玩的
+    // window.func = () => {
+    //   const { lng, lat } = target.getExtData();
+    //   const cd = {
+    //     id: 1,
+    //     name: "9",
+    //     lng,
+    //     lat,
+    //   };
+    //   this.infowindowComponentChange(cd);
+    //   target.setExtData(cd);
+    // };
+    this.infowindow = new AMap.InfoWindow({
+      isCustom: true,
+      content: this.infowindowComponent.$el,
+      position: [lng, lat],
+      // anchor: "top-left",
+      // offset: [20, -15],
+      anchor: "middle-left",
+      offset: [20, 0],
+    });
+    this.infowindow.open(this.map);
+  }
+  infowindowClose() {
+      if(!this.infowindow) return;
+    this.infowindow.close();
+  }
+  // 根据公司过滤是否显示 公司由一个数组传过来
+  companyFilter(companyArr) {
+    for (let pipeItem in this.pipeArr) {
+      // 如果item属于数组说明要显示，凑则就是隐藏
+      if (companyArr.indexOf(+pipeItem) >= 0) {
+        this.pipeArr[pipeItem].forEach((pipe) => {
+          pipe.show();
+        });
+      } else {
+        this.pipeArr[pipeItem].forEach((pipe) => {
+          pipe.hide();
+        });
+      }
+    }
+    for (let deviceItem in this.allDevic) {
+      if (companyArr.indexOf(+deviceItem) >= 0) {
+        this.allDevic[deviceItem].forEach((device) => {
+          device.show();
+        });
+      } else {
+        this.allDevic[deviceItem].forEach((device) => {
+          device.hide();
+        });
+      }
+    }
+  }
+  // 卫星图切换
+  satellite = null;
+  changeMap(bool) {
+    // 卫星图
+    if (!bool) {
+      if (this.satellite) return;
+      this.satellite = new AMap.TileLayer.Satellite();
+      this.map.addLayer(this.satellite);
+    } else {
+      if (this.satellite) {
+        this.map.removeLayer(this.satellite);
+        this.satellite = null;
+      }
+    }
+  }
+}

gassafetyprogress-web/src/views/bigWindow/index.vue

 <!--
  * @Author: your name
- * @Date: 2022-01-07 13:36:55
- * @LastEditTime: 2022-01-07 14:32:07
+ * @Date: 2022-01-11 13:44:17
+ * @LastEditTime: 2022-02-17 10:57:53
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- * @FilePath: /gassafetyprogress-web/src/views/bigWindow/index.vue
+ * @FilePath: /test/hello-world/src/views/Home.vue
 -->
 <template>
-  <div >
-    <div>big window</div>
-    <button class="go" @click="goIndex">go index</button>
+  <div class="home bigwindow">
+    <!-- <div class="goSystem" @click="goIndex">进入管理系统</div> -->
+    <div id="map"></div>
+    <Center :show="show" :centerData="centerData" />
+    <PipeColor />
+    <div class="home-div">
+      <img
+        src="@/assets/mapImages/bottom.png"
+        alt=""
+        style="width: 100%; height: 100%; z-index: 999"
+      />
+      <div class="listingsSty fangy">
+        <div
+          @click="allCompany"
+          :class="selarr.length == 3 ? 'active' : ''"
+          class="firsty"
+        >
+          全部
+        </div>
+        <div
+          class="firsty"
+          :class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"
+          v-for="(item, index) in typeList"
+          :key="item.val"
+          @click="sel(index, item)"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+    <!-- 弹框 -->
+    <div
+      id=""
+      style="position: fixed; top: 0; right: 0; width: 100px; height: 100px"
+    >
+      <!-- <markerInfoWindow></markerInfoWindow> -->
+    </div>
+
+    <!-- 头部 -->
+    <div class="banner-test">
+      <!-- <dv-decoration-5 style="width:100%;height:100%;" /> -->
+      <img src="@/assets/mapImages/top-banner.png" alt="" />
+      <div
+        style="
+          color: #fff;
+          width: 100%;
+          text-align: center;
+          font-weight: 700;
+          font-size: 32px;
+          position: fixed;
+          top: 0;
+          margin-top: 10px;
+          font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+        "
+      >
+        <span class="tttt" style="">智慧管网安全监管平台</span>
+      </div>
+    </div>
+
+    <!-- 左边 -->
+    <div class="leftbar">
+      <leftBar ref="mychild2"></leftBar>
+    </div>
+    <!-- 右边 -->
+    <div class="rightbar">
+      <rightBar ref="mychild"></rightBar>
+    </div>
+
+    <!-- 左上角天气 -->
+    <div
+      class="weather"
+      style="
+        position: fixed;
+        top: 0;
+        margin-top: 5px;
+        margin-left: 10px;
+        left: 0;
+        z-index: 999;
+        width: 100px;
+        height: 50px;
+      "
+    >
+      <!-- <iframe src="../../static/weather.html" frameborder="0"></iframe> -->
+      <iframe
+        scrolling="no"
+        src="https://yiketianqi.com/api.php?style=ty&skin=pitaya&color=fff"
+        frameborder="0"
+        width="200"
+        height="55"
+        allowtransparency="true"
+      ></iframe>
+      <!-- <iframe scrolling="no" src="https://yiketianqi.com/api.php?style=ty&skin=pitaya" frameborder="0" width="300" height="75" allowtransparency="true"></iframe> -->
+    </div>
+
+    <!-- 右上角时间 -->
+    <div
+      class="right-time"
+      style="
+        position: fixed;
+        top: 0;
+        margin-top: 10px;
+        margin-right: 5px;
+        right: 0;
+        z-index: 999;
+        width: 190px;
+        height: 50px;
+        color: #fff;
+      "
+    >
+      <div style="height: 50px; width: 49%; float: right; font-size: 14px">
+        <div>{{ nowweek }}</div>
+        <div>{{ nowDate }}</div>
+      </div>
+      <div style="height: 50px; width: 45%; line-height: 47px; font-size: 20px">
+        {{ nowtime }}
+      </div>
+    </div>
+    <div style="height: 50px; width: 45%; line-height: 47px; font-size: 20px">
+      {{ nowtime }}
+    </div>
   </div>
 </template>
 
 <script>
+// @ is an alias to /src
+import { EditorMap } from "@/utils/mapClass/map";
+import {
+  pipeData,
+  tiaoyaxiang,
+  famen,
+  changzhan,
+  jiankong,
+  user,
+} from "@/utils/mapClass/config.js";
+import Line from "@/components/bigWindow/Line.vue";
+import VideoView from "@/components/bigWindow/VideoView.vue";
+import DeviceA from "@/components/bigWindow/DeviceA.vue";
+import User from "@/components/bigWindow/User.vue";
+import Center from "@/components/bigWindow/Center.vue";
+import PipeColor from "@/components/bigWindow/PipeColor.vue";
+
+
+
+// import markerInfoWindow from './components/markerInfoWindow.vue'
+import leftBar from "@/components/bigWindow/leftBar.vue";
+import rightBar from "@/components/bigWindow/rightBar.vue";
 export default {
-  methods:{
-    goIndex(){
-      this.$router.push('/index')
+  name: "Home",
+  components: {
+    leftBar,
+    rightBar,
+    Center,
+    PipeColor,
+  },
+  data() {
+    return {
+      map: null,
+      show: false,
+      centerData: null,
+      selarr: [1, 2, 3],
+      weather: "",
+      lower: "",
+      higher: "",
+      nowDate: "",
+      nowweek: "",
+      nowtime: "", // 当前日期
+
+      typeList: [
+        {
+          val: 1,
+          name: "中燃祥科",
+        },
+        {
+          val: 2,
+          name: "中诚然气",
+        },
+        {
+          val: 3,
+          name: "中燃韵科",
+        },
+      ],
+    };
+  },
+  watch: {
+    selarr(newValue) {
+      if (newValue.length == 3) {
+        this.$refs.mychild.choice(0);
+        this.$refs.mychild2.choice(0);
+      }
+    },
+  },
+  mounted() {
+    this.map = new EditorMap(
+      "map",
+      {
+        mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
+          zoom:14.5
+      },
+      this
+    );
+    this.addPipeLine();
+    this.addDevice(tiaoyaxiang, DeviceA);
+    this.addDevice(famen, DeviceA);
+    this.addDevice(changzhan, DeviceA);
+    this.addDevice(user, User);
+    this.addDevice(jiankong, VideoView);
+
+    this.currentTime();
+    this.$refs.mychild.choice(0);
+    this.$refs.mychild2.choice(0);
+  },
+  methods: {
+    addPipeLine() {
+      for (let comp in pipeData) {
+        pipeData[comp].forEach((pipe) => {
+          this.map.addPipeLine(pipe, Line);
+        });
+      }
+    },
+    // 设备上图
+    addDevice(data, component) {
+      for (let comp in data) {
+        data[comp].forEach((pipe) => {
+          this.map.addDevice(pipe, component);
+        });
+      }
+    },
+    centerShow(boolean) {
+      this.show = boolean;
+    },
+    centerDataFunc(centerData) {
+      this.centerData = centerData;
+      console.log(centerData)
+      this.show = true;
+    },
+
+    allCompany() {
+      if (this.selarr.length == 3) {
+        this.selarr = [];
+      } else {
+        this.selarr = [1, 2, 3];
+      }
+
+      this.map.companyFilter(this.selarr);
+      this.map.infowindowClose();
+      this.show=false;
+    },
+    sel(index, item) {
+        this.map.infowindowClose()
+        this.show=false;
+      const ind = this.selarr.indexOf(item.val);
+      if (ind >= 0) {
+        this.selarr.splice(ind, 1);
+        if (item.val == 3) {
+          this.$refs.mychild.choice(1);
+          this.$refs.mychild2.choice(1);
+        } else {
+          this.$refs.mychild.choice(item.val + 1);
+          this.$refs.mychild2.choice(item.val + 1);
+        }
+      } else {
+        this.selarr.push(item.val);
+        this.$refs.mychild.choice(item.val);
+        this.$refs.mychild2.choice(item.val);
+      }
+      this.map.companyFilter(this.selarr);
+    },
+    currentTime() {
+      setInterval(() => {
+        this.formatDate();
+      }, 1000);
+    },
+    formatDate() {
+      let date = new Date();
+      let year = date.getFullYear(); // 年
+      let month = date.getMonth() + 1; // 月
+      let day = date.getDate(); // 日
+      let week = date.getDay(); // 星期
+      let weekArr = [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ];
+      let hour = date.getHours(); // 时
+      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
+      let minute = date.getMinutes(); // 分
+      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
+      let second = date.getSeconds(); // 秒
+      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
+      this.nowtime = `${hour}:${minute}:${second}`;
+      this.nowweek = `${weekArr[week]}`;
+      this.nowDate = `${year}/${month}/${day}`;
+    },
+  },
+  // 销毁定时器
+  beforeDestroy() {
+    if (this.formatDate) {
+      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
     }
-  }
-}
+  },
+};
 </script>
-
 <style lang="scss" scoped>
-.go{
-cursor: pointer;
+.home {
+  position: relative;
+  height: 100vh;
+}
+#map {
+  position: absolute;
+  top: 0px;
+  bottom: 0;
+  width: 100%;
 }
-</style>>
+.banner-test {
+  width: 100%;
+  height: 70px;
+  position: relative;
+  top: 0;
+  z-index: 999;
+}
+.banner-test img {
+  width: 100%;
+  height: 100%;
+}
+
+
+.leftbar {
+  width: 450px;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-image: -webkit-gradient(
+    linear,
+    right top,
+    left top,
+    color-stop(20%, rgb(17 34 56 / 90%)),
+    color-stop(80%, rgb(18 24 29))
+  );
+}
+.rightbar {
+  width: 450px;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  right: 0;
+  background-image: -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    color-stop(20%, rgb(17 34 56 / 90%)),
+    color-stop(80%, rgb(18 24 29))
+  );
+}
+.home-div {
+  width: 70%;
+  height: 70px;
+  position: fixed;
+  bottom: 0;
+  margin-left: 15%;
+  z-index: 1000;
+}
+.listingsSty {
+  // width: 24%;
+  /* height: 25px; */
+  position: fixed;
+  /* border: 1px solid #fff; */
+  bottom: 0;
+  margin-bottom: 10px;
+  left: 37%;
+}
+.firsty {
+  width: 90px;
+  height: 35px;
+  text-align: center;
+  line-height: 35px;
+  /* border: 1px solid #fff; */
+  color: #fff;
+  font-size: 17px;
+  float: left;
+  margin-left: 20px;
+  cursor: pointer;
+}
+.active {
+  text-shadow: 0 0 10px #2ee7e7,
+0 0 10px #2ee7e7,
+0 0 15px #2ee7e7,
+0 0 20px #2ee7e7,
+
+
+  /*position:relative;*/
+  /*&::after{
+    width: 80px;
+    height: 50px;
+    z-index: -1;
+    content: " ";
+    position: absolute;
+    top: -7px;
+    left: 50%;
+    margin-left:-40px;
+    background: url(/img/bac1.0ec28f27.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
+    color: aquamarine;
+  }*/
 
+}
+.weather-icon {
+  float: left;
+  width: 30px !important;
+  height: 30px !important;
+  margin-top: 10px !important;
+  margin-left: 10px !important;
+  padding-right: 5px;
+}
+.tttt {
+  background-image: -webkit-linear-gradient(
+    bottom,
+    rgb(134, 185, 233),
+    #ffffff
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+</style>
\ No newline at end of file

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;