Merge branch 'develop_jzl'

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

+<svg width="22" height="25" viewBox="0 0 22 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6552 9.77278C16.6552 12.9211 14.103 15.4733 10.9547 15.4733C7.80636 15.4733 5.25415 12.9211 5.25415 9.77278C5.25415 6.62447 7.80636 4.07227 10.9547 4.07227C14.103 4.07227 16.6552 6.62447 16.6552 9.77278ZM10.867 11.2506H11.324V13.098H10.867V11.2506ZM9.84612 11.2506H10.3032V13.098H9.84612V11.2506ZM13.7726 6.71854V12.5548H14.2799V13.0979H11.726V11.0721C11.726 10.9225 11.6011 10.8005 11.4482 10.8005H9.43527C9.2823 10.8005 9.15705 10.9228 9.15705 11.0721V13.0979H7.62926V12.5544H8.13655V9.16448C8.13763 9.09164 8.16749 9.02218 8.21963 8.97129C8.27176 8.9204 8.34192 8.89223 8.41477 8.89292H10.0619V8.32503C10.0629 8.25212 10.0927 8.18257 10.1448 8.1316C10.197 8.08063 10.2672 8.0524 10.3401 8.0531H11.4035C11.4764 8.0524 11.5466 8.08063 11.5987 8.1316C11.6509 8.18257 11.6807 8.25212 11.6817 8.32503V8.89329H12.1236V6.71891C12.1247 6.64607 12.1545 6.57661 12.2067 6.52572C12.2588 6.47483 12.3289 6.44666 12.4018 6.44735H13.4943C13.5671 6.44666 13.6372 6.47478 13.6894 6.52559C13.7415 6.5764 13.7714 6.64576 13.7726 6.71854ZM9.23907 10.4022H11.6455H11.647V9.8591H9.23907V10.4022Z" fill="#F0C41B">
+<animate attributeName="fill" attributeType="XML"
+             from="#F0C41B"  to="#ff0000"
+             begin="0s" dur="1s"
+             fill="remove" repeatCount="indefinite"/>
+
+</path>
+<path d="M5.7556 4.49115C2.88589 7.36086 2.87565 12.0077 5.73811 14.8702C6.03244 15.1645 6.45323 15.7447 6.94211 16.4931C7.42337 17.2298 7.94668 18.0917 8.44496 18.922C8.55553 19.1063 8.66499 19.2892 8.77248 19.4688C9.14688 20.0944 9.49738 20.6801 9.78744 21.1433C9.97373 21.4407 10.1413 21.6977 10.2784 21.8867C10.3462 21.9801 10.4142 22.0676 10.4788 22.1379C10.5108 22.1728 10.5501 22.2123 10.5949 22.2483C10.6309 22.2772 10.7126 22.3389 10.8281 22.3689C11.0039 22.4146 11.1483 22.3604 11.2172 22.3271C11.2918 22.2911 11.3505 22.2447 11.3901 22.21C11.4707 22.1392 11.548 22.0487 11.6172 21.9601C11.7593 21.7779 11.9291 21.5227 12.114 21.2281C12.454 20.6862 12.8754 19.9616 13.3199 19.1974C13.3616 19.1256 13.4036 19.0535 13.4457 18.9811C13.939 18.1333 14.4562 17.2492 14.9321 16.495C15.4164 15.7273 15.8303 15.1395 16.1171 14.8527C18.9868 11.983 18.9971 7.33612 16.1346 4.47366C13.2722 1.6112 8.62531 1.62144 5.7556 4.49115Z" stroke="#F0C41B">
+<animate attributeName="fill" attributeType="XML"
+             from="#F0C41B"  to="#ff0000"
+             begin="0s" dur="1s"
+             fill="remove" repeatCount="indefinite"/>
+</path>
+<g filter="url(#filter0_f_194_268)">
+<path d="M10.9626 22.709L12.997 19.1853H8.92825L10.9626 22.709Z" fill="#F0C41B">
+
+<animate attributeName="fill" attributeType="XML"
+             from="#F0C41B"  to="#ff0000"
+             begin="0s" dur="1s"
+             fill="remove" repeatCount="indefinite"/>
+</path>
+</g>
+<defs>
+<filter id="filter0_f_194_268" x="6.92822" y="17.1855" width="8.06885" height="7.52344" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_194_268"/>
+</filter>
+</defs>
+</svg>

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

+<svg width="22" height="25" viewBox="0 0 22 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.7556 4.49115C2.88589 7.36086 2.87565 12.0077 5.73811 14.8702C6.03244 15.1645 6.45323 15.7447 6.94211 16.4931C7.42337 17.2298 7.94668 18.0917 8.44496 18.922C8.55553 19.1063 8.66499 19.2892 8.77248 19.4688C9.14688 20.0944 9.49738 20.6801 9.78744 21.1433C9.97373 21.4407 10.1413 21.6977 10.2784 21.8867C10.3462 21.9801 10.4142 22.0676 10.4788 22.1379C10.5108 22.1728 10.5501 22.2123 10.5949 22.2483C10.6309 22.2772 10.7126 22.3389 10.8281 22.3689C11.0039 22.4146 11.1483 22.3604 11.2172 22.3271C11.2918 22.2911 11.3505 22.2447 11.3901 22.21C11.4707 22.1392 11.548 22.0487 11.6172 21.9601C11.7593 21.7779 11.9291 21.5227 12.114 21.2281C12.454 20.6862 12.8754 19.9616 13.3199 19.1974C13.3616 19.1256 13.4036 19.0535 13.4457 18.9811C13.939 18.1333 14.4562 17.2492 14.9321 16.495C15.4164 15.7273 15.8303 15.1395 16.1171 14.8527C18.9868 11.983 18.9971 7.33612 16.1346 4.47366C13.2722 1.6112 8.62531 1.62144 5.7556 4.49115Z" stroke="#FA8167">
+<animate attributeName="fill" attributeType="XML"
+             from="#FA8167"  to="#ff0000"
+             begin="0s" dur="1s"
+             fill="remove" repeatCount="indefinite"/>
+</path>
+<path d="M16.6134 8.94262C16.4134 7.58911 15.7326 6.3525 14.6954 5.45841C13.6581 4.56433 12.3334 4.07236 10.963 4.07227C9.44847 4.07227 7.99596 4.67294 6.92503 5.74214C5.85409 6.81135 5.25244 8.2615 5.25244 9.77359C5.25244 11.2857 5.85409 12.7358 6.92503 13.805C7.99596 14.8742 9.44847 15.4749 10.963 15.4749C12.3334 15.4748 13.6581 14.9828 14.6954 14.0888C15.7326 13.1947 16.4134 11.9581 16.6134 10.6046L16.6551 9.77359L16.6134 8.94262ZM6.58836 9.37325C6.682 8.3553 7.12877 7.40197 7.85151 6.67789C8.57425 5.95381 9.52758 5.50446 10.5468 5.40744V6.27779C9.75838 6.37152 9.02466 6.72811 8.46439 7.28987C7.90413 7.85162 7.55009 8.58567 7.45957 9.37325H6.58836ZM10.5468 14.1399C9.5328 14.0434 8.58385 13.5981 7.8623 12.8802C7.14075 12.1623 6.69144 11.2165 6.59121 10.2044H7.46332C7.5602 10.9858 7.91657 11.7123 8.47551 12.2678C9.03445 12.8233 9.76372 13.1757 10.5468 13.2689V14.1399ZM10.3991 10.0155V11.9119H9.69579V7.62704H12.6225V8.2271H10.3984V9.4153H12.4963V10.0154L10.3991 10.0155ZM11.3792 14.1399V13.2694C12.1623 13.1762 12.8915 12.8238 13.4505 12.2683C14.0094 11.7128 14.3658 10.9863 14.4627 10.2049H15.3348C15.2344 11.2169 14.785 12.1625 14.0635 12.8803C13.3419 13.598 12.3931 14.0434 11.3792 14.1399ZM14.4664 9.37325C14.3759 8.58567 14.0219 7.85162 13.4616 7.28987C12.9013 6.72811 12.1676 6.37152 11.3792 6.27779V5.40744C12.3984 5.5045 13.3517 5.95387 14.0744 6.67794C14.7971 7.40202 15.2438 8.35533 15.3375 9.37325H14.4664Z" fill="#ff0000">
+
+<g filter="url(#filter0_f_194_248)">
+<path d="M10.9626 22.709L12.997 19.1853H8.92825L10.9626 22.709Z" fill="#FA8167">
+<animate attributeName="fill" attributeType="XML"
+             from="#FA8167"  to="#ff0000"
+             begin="0s" dur="1s"
+             fill="remove" repeatCount="indefinite"/>
+</path>
+</g>
+<defs>
+<filter id="filter0_f_194_248" x="6.92822" y="17.1855" width="8.06885" height="7.52344" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_194_248"/>
+</filter>
+</defs>
+</svg>

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

+<svg width="22" height="25" viewBox="0 0 22 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9547 4.07031C9.44279 4.07031 7.99285 4.6709 6.92379 5.73995C5.85474 6.80901 5.25415 8.25896 5.25415 9.77083C5.25415 11.2827 5.85474 12.7326 6.92379 13.8017C7.99285 14.8708 9.44279 15.4713 10.9547 15.4713C12.4665 15.4713 13.9165 14.8708 14.9855 13.8017C16.0546 12.7326 16.6552 11.2827 16.6552 9.77083C16.6552 8.25896 16.0546 6.80901 14.9855 5.73995C13.9165 4.6709 12.4665 4.07031 10.9547 4.07031V4.07031ZM14.375 11.766H13.8049V12.6211H12.9498V13.1911H11.8097V12.6211H10.3846V13.1911H9.24451V12.6211H8.38943V11.766H7.81938V7.77565H8.38943V6.92057H9.24451V6.63554H10.0996V6.92057H10.6696V6.63554H11.5247V6.92057H12.0948V6.63554H12.9498V6.92057H13.8049V7.77565H14.375V11.766ZM8.67446 11.766H13.5199V7.49062H8.67446V11.766ZM12.9498 7.77565H13.2349V11.481H12.9498V7.77565ZM12.3798 7.77565H12.6648V11.481H12.3798V7.77565ZM11.8097 7.77565H12.0948V11.481H11.8097V7.77565ZM11.2397 7.77565H11.5247V11.481H11.2397V7.77565ZM10.6696 7.77565H10.9547V11.481H10.6696V7.77565ZM10.0996 7.77565H10.3846V11.481H10.0996V7.77565ZM9.52954 7.77565H9.81456V11.481H9.52954V7.77565ZM8.95948 7.77565H9.24451V11.481H8.95948V7.77565Z" fill="#74C5FF">
+<animate attributeName="fill" attributeType="XML"
+             from="#74C5FF"  to="#ff0000"
+             begin="0s" dur="1s"
+             fill="remove" repeatCount="indefinite"/>
+
+</path>
+<path d="M5.7556 4.49115C2.88589 7.36086 2.87565 12.0077 5.73811 14.8702C6.03244 15.1645 6.45323 15.7447 6.94211 16.4931C7.42337 17.2298 7.94668 18.0917 8.44496 18.922C8.55553 19.1063 8.66499 19.2892 8.77248 19.4688C9.14688 20.0944 9.49738 20.6801 9.78744 21.1433C9.97373 21.4407 10.1413 21.6977 10.2784 21.8867C10.3462 21.9801 10.4142 22.0676 10.4788 22.1379C10.5108 22.1728 10.5501 22.2123 10.5949 22.2483C10.6309 22.2772 10.7126 22.3389 10.8281 22.3689C11.0039 22.4146 11.1483 22.3604 11.2172 22.3271C11.2918 22.2911 11.3505 22.2447 11.3901 22.21C11.4707 22.1392 11.548 22.0487 11.6172 21.9601C11.7593 21.7779 11.9291 21.5227 12.114 21.2281C12.454 20.6862 12.8754 19.9616 13.3199 19.1974C13.3616 19.1256 13.4036 19.0535 13.4457 18.9811C13.939 18.1333 14.4562 17.2492 14.9321 16.495C15.4164 15.7273 15.8303 15.1395 16.1171 14.8527C18.9868 11.983 18.9971 7.33612 16.1346 4.47366C13.2722 1.6112 8.62531 1.62144 5.7556 4.49115Z" stroke="#ff0000">
+
+
+</path>
+<g filter="url(#filter0_f_194_260)">
+<path d="M10.9626 22.709L12.997 19.1853H8.92825L10.9626 22.709Z" fill="#74C5FF">
+<animate attributeName="fill" attributeType="XML"
+             from="#74C5FF"  to="#ff0000"
+             begin="0s" dur="1s"
+             fill="remove" repeatCount="indefinite"/>
+
+</path>
+</g>
+<defs>
+<filter id="filter0_f_194_260" x="6.92822" y="17.1855" width="8.06885" height="7.52344" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_194_260"/>
+</filter>
+</defs>
+</svg>

gassafetyprogress-web/src/assets/mapImages/userAlarm.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">
-  
-   <animate attributeName="fill" attributeType="XML"
+<svg width="22" height="25" viewBox="0 0 22 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6552 9.77473C16.6552 12.923 14.103 15.4752 10.9547 15.4752C7.80636 15.4752 5.25415 12.923 5.25415 9.77473C5.25415 6.62643 7.80636 4.07422 10.9547 4.07422C14.103 4.07422 16.6552 6.62643 16.6552 9.77473ZM12.9472 8.3569C12.9472 9.44817 12.0625 10.3331 10.971 10.3331C9.87956 10.3331 8.99488 9.44838 8.99488 8.3569C8.99488 7.26563 9.87956 6.38074 10.971 6.38074C12.0625 6.38074 12.9472 7.26542 12.9472 8.3569ZM10.9711 10.9893C11.5708 10.9893 12.1416 10.7873 12.6021 10.4238V10.424C13.7973 10.8771 14.3461 12.4304 14.3461 13.1384H7.56167C7.56167 12.424 8.10625 10.8598 9.32553 10.4122C9.78815 10.7827 10.3644 10.9893 10.9711 10.9893Z" fill="#00FFFF">
+<animate attributeName="fill" attributeType="XML"
              from="#7bf8f4"  to="#ff0000"
              begin="0s" dur="1s"
              fill="remove" repeatCount="indefinite"/>
-  </path>
-  <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">
-    <animate attributeName="fill" attributeType="XML"
+</path>
+<path d="M5.7556 4.49115C2.88589 7.36086 2.87565 12.0077 5.73811 14.8702C6.03244 15.1645 6.45323 15.7447 6.94211 16.4931C7.42337 17.2298 7.94668 18.0917 8.44496 18.922C8.55553 19.1063 8.66499 19.2892 8.77248 19.4688C9.14688 20.0944 9.49738 20.6801 9.78744 21.1433C9.97373 21.4407 10.1413 21.6977 10.2784 21.8867C10.3462 21.9801 10.4142 22.0676 10.4788 22.1379C10.5108 22.1728 10.5501 22.2123 10.5949 22.2483C10.6309 22.2772 10.7126 22.3389 10.8281 22.3689C11.0039 22.4146 11.1483 22.3604 11.2172 22.3271C11.2918 22.2911 11.3505 22.2447 11.3901 22.21C11.4707 22.1392 11.548 22.0487 11.6172 21.9601C11.7593 21.7779 11.9291 21.5227 12.114 21.2281C12.454 20.6862 12.8754 19.9616 13.3199 19.1974C13.3616 19.1256 13.4036 19.0535 13.4457 18.9811C13.939 18.1333 14.4562 17.2492 14.9321 16.495C15.4164 15.7273 15.8303 15.1395 16.1171 14.8527C18.9868 11.983 18.9971 7.33612 16.1346 4.47366C13.2722 1.6112 8.62531 1.62144 5.7556 4.49115Z" stroke="#ff0000">
+
+
+</path>
+<g filter="url(#filter0_f_194_252)">
+<path d="M10.9626 22.709L12.997 19.1853H8.92825L10.9626 22.709Z" fill="#00FFFF">
+<animate attributeName="fill" attributeType="XML"
              from="#7bf8f4"  to="#ff0000"
              begin="0s" dur="1s"
              fill="remove" repeatCount="indefinite"/>
-    </path>
-  </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">
-    <animate attributeName="fill" attributeType="XML"
-             from="#7bf8f4"  to="#ff0000"
-             begin="0s" dur="1s"
-             fill="remove" repeatCount="indefinite"/>
-  </path>
+</path>
+</g>
+<defs>
+<filter id="filter0_f_194_252" x="6.92822" y="17.1855" width="8.06885" height="7.52344" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_194_252"/>
+</filter>
+</defs>
 </svg>

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

+<!--
+ * @Author: your name
+ * @Date: 2022-01-26 20:07:52
+ * @LastEditTime: 2022-03-03 11:51:13
+ * @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.iconType] }}
+        </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 v-else>-</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" v-if="Array.isArray(deviceData.pressureFlows)">
+        <div class="first zzz">{{ "压力表" }}</div>
+        <div v-unValue class="">{{ deviceData.numberPressureGauges }}</div>
+        <div v-unValue class="">
+          {{ deviceData.onlineEquipment }}
+        </div>
+        <div v-unValue class="">
+          {{ deviceData.offlineEquipment }}
+        </div>
+        <div v-unValue class="">
+          {{ deviceData.historicalAlarm }}
+        </div>
+        <div v-unValue class="">
+          {{ deviceData.alarmProcessed }}
+        </div>
+        <div v-unValue class="last">
+          {{ deviceData.inAlarm }}
+        </div>
+      </div>
+      <div class="tbody flex" v-if="Array.isArray(deviceData.pressureFlows)">
+        <div class="first zzz">{{ "流量计" }}</div>
+        <div v-unValue class="">{{ deviceData.numberEquipment }}</div>
+        <div v-unValue class="">
+          {{ deviceData.numberOnlineEquipment }}
+        </div>
+        <div v-unValue class="">
+          {{ deviceData.numberOfflineEquipment }}
+        </div>
+        <div v-unValue class="">
+          {{ deviceData.numberHistoricalAlarm }}
+        </div>
+        <div v-unValue class="">
+          {{ deviceData.numberAlarmProcessed }}
+        </div>
+        <div v-unValue class="last">
+          {{ deviceData.numberInAlarm }}
+        </div>
+      </div>
+    </div>
+
+    <div class="btn">
+      <div @click="btnClick">感知设备</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { companyType, deviceType } from "@/utils/mapClass/config.js";
+import { getTyx, getFm } from "@/api/bigWindow/getDevice.js";
+export default {
+  data() {
+    return {
+      companyType,
+      deviceType,
+      profile: "暂无",
+    };
+  },
+  computed: {
+    prodTest() {
+      return this.vueRoot.$store.state.user.systemSetting.prod_test;
+    },
+    company() {
+      return this.vueRoot.$store.state.bigWindowCompany.company;
+    },
+  },
+  mounted() {
+    // 如果不是测试，而是真数据，就要用帧数据的东西
+    if (this.prodTest != "test") {
+      this.companyType = {};
+      this.company.forEach((item) => {
+        this.companyType[item.conpanyId] = item.companyName;
+      });
+    }
+    // 当点开infowindow的时候，重新调接口
+    this.myHttp();
+    // console.log(this.deviceData);
+  },
+  methods: {
+    close() {
+      this.mapClass.infowindowClose();
+    },
+    btnClick() {
+      this.vueRoot.centerDataFunc(this.deviceData.pressureFlows);
+    },
+    myHttp() {
+      console.log(this.deviceData.iconType)
+
+      if (this.deviceData.iconType == 2) {
+        getTyx({ DeviceId: this.deviceData.DeviceId }).then((res) => {
+          if (res.code == 200) {
+            const data = res.data.filter(
+              (item) => item.deviceId == this.deviceData.deviceId
+            )[0].detectorCountList;
+            this.deviceData.detectorCountList = data;
+          }
+        });
+      } else {
+        getFm({ DeviceId: this.deviceData.DeviceId }).then((res) => {
+          if (res.code == 200) {
+            const data = res.data.filter(
+              (item) => item.deviceId == this.deviceData.deviceId
+            )[0].detectorCountList;
+            this.deviceData.detectorCountList = data;
+          }
+        });
+      }
+    },
+  },
+};
+</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>

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

 <!--
  * @Author: your name
  * @Date: 2022-01-26 20:07:52
- * @LastEditTime: 2022-03-01 09:17:01
+ * @LastEditTime: 2022-03-03 11:51:48
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 
@@ -80,6 +80,8 @@
 
 <script>
 import { companyType, deviceType } from "@/utils/mapClass/config.js";
+import { detectorUserList } from "@/api/detector/detectorUser";
+
 export default {
   data() {
     return {
@@ -103,7 +105,8 @@ export default {
         this.companyType[item.conpanyId] = item.companyName;
       });
     }
-    console.log(this.deviceData);
+    this.myHttp();
+    // console.log(this.deviceData);
   },
   methods: {
     close() {
@@ -116,6 +119,16 @@ export default {
         this.deviceData.nickName
       );
     },
+    myHttp() {
+      detectorUserList({ userId: this.deviceData.userId }).then((res) => {
+        if (res.code == 200) {
+          const data = res.data.filter(
+            (item) => item.userId == this.deviceData.userId
+          )[0].detectorCountList;
+          this.deviceData.detectorCountList = data;
+        }
+      });
+    },
   },
 };
 </script>

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

 /*
  * @Author: your name
  * @Date: 2022-01-26 10:47:44
- * @LastEditTime: 2022-03-02 11:28:29
+ * @LastEditTime: 2022-03-03 09:00:06
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/utils/config.js
@@ -33,9 +33,9 @@ export const svgUrl = {
   8: require("@/assets/image/zcrq.svg"),
 };
 export const svgAlarm = {
-  2: require("@/assets/image/tiaoyaxiang1.svg"),
-  3: require("@/assets/image/famen1.svg"),
-  4: require("@/assets/image/changzhan1.svg"),
+  2: require("@/assets/mapImages/tyxAlarm.svg"),
+  3: require("@/assets/mapImages/fmAlarm.svg"),
+  4: require("@/assets/mapImages/czAlarm.svg"),
   5: require("@/assets/image/jiankong1.svg"),
   6: require("@/assets/mapImages/userAlarm.svg"),
 };

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

 /*
  * @Author: your name
  * @Date: 2022-01-11 13:45:12
- * @LastEditTime: 2022-03-02 10:53:47
+ * @LastEditTime: 2022-03-03 11:51:16
  * @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
@@ -496,68 +496,96 @@ export class EditorMap {
   // 设备报警
   deviceAlarm(obj) {
     // 设备的类型
-    const { iconType, userId } = obj;
+    const { iconType } = obj;
+    const publicId = obj.userId || obj.deviceId;
     // 找到这个设备所属的空间
     const device = this.allDevice[iconType].filter(
-      (item) => item.getExtData().userId == userId
+      (item) =>
+        (item.getExtData().userId || item.getExtData().deviceId) == publicId
     )[0];
     // 更改的icon
     const icon = svgAlarm[iconType];
     device.setIcon(icon);
+    device.setzIndex(13);
     // 将旧的值缓存一下
-    device.oldData = device.getExtData();
-    device.setExtData(obj);
-    // 如果infowindow是打开的，就改变里面的数据，必须是用户才行
-    if (
-      this.infowindowComponent &&
-      this.infowindowComponent.deviceData.iconType == 6 &&
-      this.infowindowComponent.deviceData.userId == obj.userId
-    ) {
-      this.infowindowComponentChange(obj);
-    }
+    // device.oldData = device.getExtData();
+    // device.setExtData(obj);
+    // 可能出现infoWindow数据变化
+    this.alarmInfowindowChange(obj);
     if (!this.alarmObj[iconType]) {
       this.alarmObj[iconType] = [];
     } else {
-      const ind = this.alarmObj[iconType].indexOf(userId);
+      const ind = this.alarmObj[iconType].indexOf(publicId);
       if (ind < 0) {
-        this.alarmObj[iconType].push(userId);
+        this.alarmObj[iconType].push(publicId);
+      }
+    }
+  }
+  // 报警时候，可能发生infowindowComponent存在，也要变化
+  alarmInfowindowChange(obj) {
+
+    if (!this.infowindowComponent) return;
+    // 如果infowindow是打开的，就改变里面的数据 必须是  调压箱2 阀门3 用户6 才会发生变化电话
+    const infowindowDeviceType = [2, 3, 6].includes(
+      this.infowindowComponent.deviceData.iconType
+    );
+    // 如果存在userId就用userId，如果存在deviceId就用deviceId
+    const infowindowDeviceId =
+      this.infowindowComponent.deviceData.userId ||
+      this.infowindowComponent.deviceData.deviceId;
+    // 如果存在userId就用userId，如果存在deviceId就用deviceId
+    const objId = obj.userId || obj.deviceId;
+    // 如果两个值匹配,才可以改变infowindow身上的组件
+    const infowindowComponentHas = infowindowDeviceId == objId;
+    if (
+      this.infowindowComponent &&
+      infowindowDeviceType &&
+      infowindowComponentHas
+    ) {
+      // this.infowindowComponentChange(obj);
+      if(this.infowindowComponent.http){
+        this.infowindowComponent.myHttp()
       }
     }
   }
   //如果传过来的报警设备中，有不在deviceAlarm中，就是恢复的设备恢复
   relieveAlarm(alarmObj) {
-    // 把报警数组改变结构
-    const httpArr = alarmObj.map((item) => item.userId);
+    // 把报警数组改变结构,如果有userId就是用户，如果有deviceId就是其他设备
+    const httpObj = {};
+    alarmObj.forEach((item) => {
+      const publicId = item.userId || item.deviceId;
+      if (!Array.isArray(httpObj[item.iconType])) {
+        httpObj[item.iconType] = [];
+      }
+      httpObj[item.iconType].push(publicId);
+    });
     // 循环现有报警设备
     for (let iconType in this.alarmObj) {
       const arr = this.alarmObj[iconType];
       // 循环现有报警设备
       for (let i = 0; i < arr.length; i++) {
-        // 看看现有报警设备中有没有不在 报警数组中的值，有就恢复
-        const userId = arr[i];
-        // 看看接口传来的数据中还有没有这些UserId，如果没有了，就是修好了
-        const index = httpArr.indexOf(userId);
+        // 看看现有报警设备中有没有不在 报警数组中的值，有就恢复可能是userId，也可能是deviceId
+        const publicId = arr[i];
+        // 看看接口传来的数据中还有没有这些Id，如果没有了，就是修好了
+        const hasId = httpObj[iconType]?.includes(publicId);
         // 如果已经不在报警数组中,就要去大数组中找他,利用userId
-        if (index < 0) {
+        // 如果id不存在了，说明不报警了
+        if (!hasId) {
           // 过滤出来这个要恢复的设备
           const device = this.allDevice[iconType].filter(
-            (item) => item.getExtData().userId == userId
+            (item) =>
+              (item.getExtData().userId || item.getExtData().deviceId) ==
+              publicId
           )[0];
           // 恢复
           const icon = svgUrl[iconType];
           device.setIcon(icon);
           // 赋值
-          const deviceData = device.oldData;
-          device.setExtData(deviceData);
-          device.oldData = null;
+          // const deviceData = { ...device.oldData };
+          // device.setExtData(deviceData);
+          // device.oldData = null;
           // 如果infowindow是打开的
-          if (
-            this.infowindowComponent &&
-            this.infowindowComponent.deviceData.iconType == 6 &&
-            this.infowindowComponent.deviceData.userId == obj.userId
-          ) {
-            this.infowindowComponentChange(deviceData);
-          }
+          this.alarmInfowindowChange(device.getExtData());
           // 在arr中删掉
           arr.splice(i, 1);
           // 由于删掉了当前，所以要--恢复位置

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

 <!--
  * @Author: your name
  * @Date: 2022-01-11 13:44:17
- * @LastEditTime: 2022-03-02 11:47:13
+ * @LastEditTime: 2022-03-02 16:45:34
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/views/Home.vue
@@ -144,7 +144,7 @@ import {
   changzhan,
   jiankong,
   user,
-  alarmtime
+  alarmtime,
 } from "@/utils/mapClass/config.js";
 import {
   getPipe,
@@ -158,7 +158,8 @@ import {
 } from "@/api/bigWindow/getDevice";
 import Line from "@/components/bigWindow/Line.vue";
 import VideoView from "@/components/bigWindow/VideoView.vue";
-import DeviceA from "@/components/bigWindow/DeviceA.vue";
+import Device from "@/components/bigWindow/Device.vue";
+import Cz from "@/components/bigWindow/Cz.vue";
 import User from "@/components/bigWindow/User.vue";
 import Center from "@/components/bigWindow/Center.vue";
 import UserCenter from "@/components/bigWindow/UserCenter.vue";
@@ -290,9 +291,9 @@ export default {
     // 这是测试，用本地数据
     if (this.systemSetting.prod_test === "test") {
       this.addPipeLine(pipeData, Line);
-      this.addDevice(tiaoyaxiang, DeviceA);
-      this.addDevice(famen, DeviceA);
-      this.addDevice(changzhan, DeviceA);
+      this.addDevice(tiaoyaxiang, Device);
+      this.addDevice(famen, Device);
+      this.addDevice(changzhan, Cz);
       this.addDevice(user, User);
       this.addDevice(jiankong, VideoView);
     } else {
@@ -308,13 +309,12 @@ export default {
 
       // getPipe() getTyx() getFm() getCz() getVideo() getUser()
       this.goMap(getPipe, this.addPipeLine, Line);
-      this.goMap(getTyx, this.addDevice, DeviceA);
-      this.goMap(getFm, this.addDevice, DeviceA);
-      this.goMap(getCz, this.addDevice, DeviceA);
+      this.goMap(getTyx, this.addDevice, Device);
+      this.goMap(getFm, this.addDevice, Device);
+      this.goMap(getCz, this.addDevice, Cz);
       this.goMap(getVideo, this.addDevice, VideoView);
       this.goMap(getEnterprise, this.addDevice, Company);
 
-
       // 用户要等一下 因为有报警数据
       this.goMap(detectorUserList, this.addDevice, User).then((res) => {
         // 先查一下，然后开启定时器