Skip to content

G
gassafety-progress
Commit 7f4b4715 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

将大屏合并

parent bea76750
Hide whitespace changes
Inline Side-by-side
Showing with 7172 additions and 22 deletions
gassafetyprogress-web/package.json
View file @ 7f4b4715
......@@ -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
View file @ 7f4b4715
......@@ -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 0 → 100644
View file @ 7f4b4715
@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 0 → 100644
View file @ 7f4b4715
@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 0 → 100644
View file @ 7f4b4715
<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 0 → 100644
View file @ 7f4b4715
<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 0 → 100644
View file @ 7f4b4715
<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 0 → 100644
View file @ 7f4b4715
<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 0 → 100644
View file @ 7f4b4715
<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 0 → 100644
View file @ 7f4b4715
<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 0 → 100644
View file @ 7f4b4715
/**
* 通用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 0 → 100644
View file @ 7f4b4715
<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 0 → 100644
View file @ 7f4b4715
<!--
* @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 0 → 100644
View file @ 7f4b4715
<!--
* @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 0 → 100644
View file @ 7f4b4715
<!--
* @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 0 → 100644
View file @ 7f4b4715
<!--
* @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 0 → 100644
View file @ 7f4b4715
<!--
* @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 0 → 100644
View file @ 7f4b4715
<!--
* @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 0 → 100644
View file @ 7f4b4715
<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 0 → 100644
View file @ 7f4b4715
<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 0 → 100644
View file @ 7f4b4715
<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
View file @ 7f4b4715
/*
* @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/config.js 0 → 100644
View file @ 7f4b4715
This source diff could not be displayed because it is too large. You can view the blob instead.
gassafetyprogress-web/src/utils/mapClass/getPath.js
View file @ 7f4b4715
/*
* @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 0 → 100644
View file @ 7f4b4715
/*
* @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
View file @ 7f4b4715
<!--
* @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
View file @ 7f4b4715
<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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment