Merge branch 'develop_jzl'

gassafety-web/src/api/device/detector.js

+import request from '@/utils/request'
+
+
+// 查询报警器用户
+export function detectorUserList(query) {
+  return request({
+    url: '/detector/detectorUser/detectorUserList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询报警器用户下的报警器
+export function getdetectorInfoList(query) {
+  return request({
+    url: '/detector/detectorInfo/detectorInfoList',
+    method: 'get',
+    params: query
+  })
+}

gassafety-web/src/api/enterprise/info.js

@@ -51,3 +51,12 @@ export function exportInfo(query) {
     params: query
   })
 }
+
+// 查询报警器用户
+export function detectorUserList(query) {
+  return request({
+    url: '/detector/detectorUser/detectorUserList',
+    method: 'get',
+    params: query
+  })
+}

gassafety-web/src/assets/images/detctor/baojingquan.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1636705080414" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3153" width="20" height="20" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M513.024 65.536q93.184 0 175.616 35.84t143.872 97.28 97.28 143.872 35.84 175.616q0 94.208-35.84 176.64t-97.28 143.872-143.872 97.28-175.616 35.84q-94.208 0-176.64-35.84t-143.872-97.28-97.28-143.872-35.84-176.64q0-93.184 35.84-175.616t97.28-143.872 143.872-97.28 176.64-35.84zM513.024 909.312q80.896 0 152.064-30.72t124.416-83.968 83.968-124.416 30.72-152.064-30.72-152.064-83.968-124.416-124.416-83.968-152.064-30.72q-81.92 0-153.088 30.72t-124.416 83.968-83.968 124.416-30.72 152.064 30.72 152.064 83.968 124.416 124.416 83.968 153.088 30.72zM513.024 190.464q66.56 0 124.928 25.088t102.4 69.12 69.12 102.4 25.088 124.928-25.088 125.44-69.12 102.912-102.4 69.12-124.928 25.088-125.44-25.088-102.912-69.12-69.12-102.912-25.088-125.44 25.088-124.928 69.12-102.4 102.912-69.12 125.44-25.088z" p-id="3154" fill="#7bf8f4"></path></svg>
\ No newline at end of file

gassafety-web/src/assets/images/detctor/gongye.svg

+<svg id="工业报警器图标" xmlns="http://www.w3.org/2000/svg" width="23" height="34" viewBox="0 0 15.25 23.859">
+  <g id="路径_190" data-name="路径 190" fill="none">
+    <path d="M7.625,0A7.625,7.625,0,0,1,15.25,7.625c0,4.211-7.689,12.085-7.625,12.136S0,11.836,0,7.625A7.625,7.625,0,0,1,7.625,0Z" stroke="none"/>
+    <path d="M 7.624993801116943 0.9999980926513672 C 3.971963882446289 0.9999980926513672 1.000003814697266 3.971967697143555 1.000003814697266 7.625018119812012 C 1.000003814697266 10.07682037353516 4.419554710388184 14.72153663635254 7.607790470123291 18.26171493530273 C 8.482519149780273 17.27889823913574 10.04549407958984 15.48680305480957 11.43218421936035 13.54799842834473 C 13.76112365722656 10.29179763793945 14.24998378753662 8.529777526855469 14.24998378753662 7.625018119812012 C 14.24998378753662 3.971967697143555 11.2780237197876 0.9999980926513672 7.624993801116943 0.9999980926513672 M 7.624993801116943 -1.9073486328125e-06 C 11.83616352081299 -1.9073486328125e-06 15.24998378753662 3.413837432861328 15.24998378753662 7.625018119812012 C 15.24998378753662 11.82051849365234 7.617804527282715 19.65120315551758 7.624597072601318 19.75980758666992 C 7.53524112701416 19.65138244628906 3.814697265625e-06 11.79378795623779 3.814697265625e-06 7.625018119812012 C 3.814697265625e-06 3.413837432861328 3.413824081420898 -1.9073486328125e-06 7.624993801116943 -1.9073486328125e-06 Z M 7.624597072601318 19.75980758666992 C 7.62550687789917 19.76091194152832 7.625639915466309 19.76120948791504 7.624993801116943 19.76069831848145 C 7.624754428863525 19.76050758361816 7.624622821807861 19.76021385192871 7.624597072601318 19.75980758666992 Z" stroke="none" fill="#31eaea"/>
+  </g>
+  <path id="多边形_37" data-name="多边形 37" d="M2.964,0,5.928,3.952H0Z" transform="translate(10.671 19.761) rotate(180)" fill="#31eaea"/>
+  <path id="路径_1300" data-name="路径 1300" d="M13.593,8.615,13.567,8.6a4.849,4.849,0,0,0-.009-1.8l.887-.859-.395-.954-1.262-.048-.011,0a4.863,4.863,0,0,0-1.251-1.242l0-1.266-.952-.4-.929.885a4.872,4.872,0,0,0-1.759,0l-.921-.872-.933.387L6.015,3.7A4.885,4.885,0,0,0,4.751,4.97l-1.257,0-.4.973.88.912A4.905,4.905,0,0,0,3.965,8.61l-.043.018-.816.911.394.954,1.2-.031.009,0a4.848,4.848,0,0,0,1.26,1.285l-.017.042.084,1.234.952.4.918-.841.012-.028a4.887,4.887,0,0,0,1.761-.015l.883.887.952-.4.035-1.28A4.884,4.884,0,0,0,12.786,10.5l.006,0,1.258,0,.4-.974ZM12.665,7.9c0,.079-.006.159-.014.238,0,.03,0,.06-.006.089l-.007,0a3.83,3.83,0,0,1-.776,1.894h0l-.007.007A3.9,3.9,0,0,1,9.29,11.608v0l-.028,0a3.829,3.829,0,0,1-.9.01c-.021,0-.043,0-.063,0l0-.005a3.813,3.813,0,0,1-1.938-.808l-.006.014a3.9,3.9,0,0,1-.723-.743l.016-.007A3.93,3.93,0,0,1,4.9,8.22l-.014.006a3.948,3.948,0,0,1,0-.986l.012,0a3.809,3.809,0,0,1,.78-1.892l-.01,0c.027-.035.059-.065.086-.1s.037-.042.055-.063a3.945,3.945,0,0,1,.572-.554l0,.01A3.892,3.892,0,0,1,12.63,7.191l.008,0c0,.035,0,.069.007.1.009.073.012.147.016.22A3.627,3.627,0,0,1,12.665,7.9Zm-1.79,1.213-.007-1.591A1.918,1.918,0,0,0,8.906,5.67,1.919,1.919,0,0,0,6.944,7.518l.007,1.591a.264.264,0,1,0,0,.528h3.925a.264.264,0,1,0,0-.528Zm-.854-.481a1.124,1.124,0,0,1-.039.289H7.842a1.1,1.1,0,0,1-.04-.289l0-1.044A1.156,1.156,0,0,1,8.908,6.395a1.164,1.164,0,0,1,1.12,1.189Z" transform="translate(-1.065 -0.201)" fill="#31eaea"/>
+</svg>

gassafety-web/src/assets/images/detctor/jiayong.svg

+<svg id="家用报警器图标" xmlns="http://www.w3.org/2000/svg" width="23" height="34" viewBox="0 0 15.25 23.859">
+  <g id="路径_190" data-name="路径 190" fill="none">
+    <path d="M7.625,0A7.625,7.625,0,0,1,15.25,7.625c0,4.211-7.689,12.085-7.625,12.136S0,11.836,0,7.625A7.625,7.625,0,0,1,7.625,0Z" stroke="none"/>
+    <path d="M 7.624993801116943 0.9999980926513672 C 3.971963882446289 0.9999980926513672 1.000003814697266 3.971967697143555 1.000003814697266 7.625018119812012 C 1.000003814697266 10.07682037353516 4.419554710388184 14.72153663635254 7.607790470123291 18.26171493530273 C 8.482519149780273 17.27889823913574 10.04549407958984 15.48680305480957 11.43218421936035 13.54799842834473 C 13.76112365722656 10.29179763793945 14.24998378753662 8.529777526855469 14.24998378753662 7.625018119812012 C 14.24998378753662 3.971967697143555 11.2780237197876 0.9999980926513672 7.624993801116943 0.9999980926513672 M 7.624993801116943 -1.9073486328125e-06 C 11.83616352081299 -1.9073486328125e-06 15.24998378753662 3.413837432861328 15.24998378753662 7.625018119812012 C 15.24998378753662 11.82051849365234 7.617804527282715 19.65120315551758 7.624597072601318 19.75980758666992 C 7.53524112701416 19.65138244628906 3.814697265625e-06 11.79378795623779 3.814697265625e-06 7.625018119812012 C 3.814697265625e-06 3.413837432861328 3.413824081420898 -1.9073486328125e-06 7.624993801116943 -1.9073486328125e-06 Z M 7.624597072601318 19.75980758666992 C 7.62550687789917 19.76091194152832 7.625639915466309 19.76120948791504 7.624993801116943 19.76069831848145 C 7.624754428863525 19.76050758361816 7.624622821807861 19.76021385192871 7.624597072601318 19.75980758666992 Z" stroke="none" fill="#31eaea"/>
+  </g>
+  <path id="多边形_37" data-name="多边形 37" d="M2.964,0,5.928,3.952H0Z" transform="translate(10.671 19.761) rotate(180)" fill="#31eaea"/>
+  <g id="组_2461" data-name="组 2461" transform="translate(4966.841 23756.846)">
+    <path id="路径_1305" data-name="路径 1305" d="M9.177.829a.713.713,0,0,0-.713.713v.876H9.9V1.542A.713.713,0,0,0,9.188.829Zm-.827.419a.116.116,0,0,0-.091-.136l-.337-.061a.118.118,0,0,0-.139.091.144.144,0,0,0,0,.039.114.114,0,0,0,.091.1l.337.068a.116.116,0,0,0,.139-.1ZM8.271.476,8.5.745A.116.116,0,1,0,8.674.6L8.46.332a.116.116,0,0,0-.205.091.119.119,0,0,0,.023.053Zm.926.1A.118.118,0,0,0,9.316.465V.121A.114.114,0,0,0,9.209,0a.116.116,0,0,0-.119.112V.458a.087.087,0,0,0,0,.021.116.116,0,0,0,.112.1Zm.535.21A.114.114,0,0,0,9.894.777l.228-.257a.118.118,0,0,0-.007-.164.116.116,0,0,0-.164.011L9.724.624A.112.112,0,0,0,9.7.719a.111.111,0,0,0,.039.07Zm.845.421a.118.118,0,0,0-.119-.1l-.357.052a.116.116,0,0,0,.036.23l.339-.052a.118.118,0,0,0,.1-.132Zm-.423,1.475a.166.166,0,0,1-.166.166H8.339a.166.166,0,0,1,0-.332h1.65A.166.166,0,0,1,10.154,2.684Z" transform="translate(-4965.079 -23747.703)" fill="#31eaea"/>
+    <path id="减去_41" data-name="减去 41" d="M4.77,11a12.069,12.069,0,0,1-1.752-.124A7.713,7.713,0,0,1,1.491,10.5C.515,10.144,0,9.632,0,9.021A4.8,4.8,0,0,1,.117,7.964,4.742,4.742,0,0,1,.98,6.125a4.823,4.823,0,0,1,.694-.732.32.32,0,0,1,.208-.077.314.314,0,0,1,.246.116,3.417,3.417,0,0,0,5.283-.006A.327.327,0,0,1,7.66,5.31a.317.317,0,0,1,.206.077,4.789,4.789,0,0,1,.986,1.16,4.729,4.729,0,0,1,.576,1.437,1.707,1.707,0,0,0-1.514-.916,1.708,1.708,0,1,0,0,3.415,1.729,1.729,0,0,0,.231-.016,7.417,7.417,0,0,1-1.563.4A12,12,0,0,1,4.77,11Zm0-5.1A2.947,2.947,0,0,1,3.623.232a2.947,2.947,0,0,1,2.294,5.43A2.928,2.928,0,0,1,4.77,5.893Z" transform="translate(-4963.93 -23755)" fill="#31eaea"/>
+  </g>
+</svg>

gassafety-web/src/assets/images/detctor/shangye.svg

+<svg id="商业报警器图标" xmlns="http://www.w3.org/2000/svg" width="23" height="34" viewBox="0 0 15.25 23.859">
+  <g id="路径_190" data-name="路径 190" fill="none">
+    <path d="M7.625,0A7.625,7.625,0,0,1,15.25,7.625c0,4.211-7.689,12.085-7.625,12.136S0,11.836,0,7.625A7.625,7.625,0,0,1,7.625,0Z" stroke="none"/>
+    <path d="M 7.624993801116943 0.9999980926513672 C 3.971963882446289 0.9999980926513672 1.000003814697266 3.971967697143555 1.000003814697266 7.625018119812012 C 1.000003814697266 10.07682037353516 4.419554710388184 14.72153663635254 7.607790470123291 18.26171493530273 C 8.482519149780273 17.27889823913574 10.04549407958984 15.48680305480957 11.43218421936035 13.54799842834473 C 13.76112365722656 10.29179763793945 14.24998378753662 8.529777526855469 14.24998378753662 7.625018119812012 C 14.24998378753662 3.971967697143555 11.2780237197876 0.9999980926513672 7.624993801116943 0.9999980926513672 M 7.624993801116943 -1.9073486328125e-06 C 11.83616352081299 -1.9073486328125e-06 15.24998378753662 3.413837432861328 15.24998378753662 7.625018119812012 C 15.24998378753662 11.82051849365234 7.617804527282715 19.65120315551758 7.624597072601318 19.75980758666992 C 7.53524112701416 19.65138244628906 3.814697265625e-06 11.79378795623779 3.814697265625e-06 7.625018119812012 C 3.814697265625e-06 3.413837432861328 3.413824081420898 -1.9073486328125e-06 7.624993801116943 -1.9073486328125e-06 Z M 7.624597072601318 19.75980758666992 C 7.62550687789917 19.76091194152832 7.625639915466309 19.76120948791504 7.624993801116943 19.76069831848145 C 7.624754428863525 19.76050758361816 7.624622821807861 19.76021385192871 7.624597072601318 19.75980758666992 Z" stroke="none" fill="#31eaea"/>
+  </g>
+  <path id="多边形_37" data-name="多边形 37" d="M2.964,0,5.928,3.952H0Z" transform="translate(10.671 19.761) rotate(180)" fill="#31eaea"/>
+  <path id="减去_40" data-name="减去 40" d="M5542.032,22893.637v0a.268.268,0,0,0,0-.041v-1.053a5.863,5.863,0,0,0,1.067-.447l.751.744a.283.283,0,0,0,.025.021l.01.006a6.021,6.021,0,0,1-1.855.77Zm-2.8,0v0a6.1,6.1,0,0,1-1.849-.768.168.168,0,0,0,.035-.025l.744-.744a4.8,4.8,0,0,0,1.068.447v1.053a.178.178,0,0,0,0,.037Zm2.42-.232h-2.039v-1.018a.184.184,0,0,0-.145-.187,4.384,4.384,0,0,1-1.24-.516.2.2,0,0,0-.1-.027.193.193,0,0,0-.138.061l-.716.717-1.446-1.445.717-.717a.188.188,0,0,0,.027-.234,4.531,4.531,0,0,1-.509-1.24.189.189,0,0,0-.186-.145h-1.02v-2.037h1.02a.189.189,0,0,0,.186-.145,4.5,4.5,0,0,1,.509-1.246.181.181,0,0,0-.027-.23l-.717-.721,1.446-1.439.716.717a.218.218,0,0,0,.141.053.156.156,0,0,0,.093-.025,4.538,4.538,0,0,1,1.24-.518.175.175,0,0,0,.145-.18v-1.018h2.039v1.018a.179.179,0,0,0,.145.18,4.586,4.586,0,0,1,1.239.518.19.19,0,0,0,.1.025.193.193,0,0,0,.136-.053l.716-.717,1.446,1.439-.716.721a.19.19,0,0,0-.028.23,4.378,4.378,0,0,1,.51,1.246.191.191,0,0,0,.186.145h1.019v2.037h-1.019a.191.191,0,0,0-.186.145,4.3,4.3,0,0,1-.51,1.24.2.2,0,0,0,.028.234l.716.717-1.446,1.445-.716-.717a.184.184,0,0,0-.136-.059.211.211,0,0,0-.1.025,4.445,4.445,0,0,1-1.239.516.19.19,0,0,0-.145.188v1.018Zm-1.02-9.035a3.261,3.261,0,1,0,3.257,3.264A3.265,3.265,0,0,0,5540.63,22884.367Zm4.076,7.889h0l.569-.572A5.986,5.986,0,0,1,5544.707,22892.256Zm1.16-1.371v0a.213.213,0,0,0-.029-.035l-.744-.744a4.952,4.952,0,0,0,.447-1.068h1.054a.138.138,0,0,0,.04,0,6.13,6.13,0,0,1-.766,1.852Zm-10.47-.008a6.107,6.107,0,0,1-.763-1.844.187.187,0,0,0,.033,0h1.054a5.662,5.662,0,0,0,.448,1.068l-.744.744c-.005.008-.011.012-.017.02l0,0v0Zm5.234-.182a3.064,3.064,0,1,1,3.064-3.064A3.067,3.067,0,0,1,5540.63,22890.7Zm-.888-2.588a.205.205,0,0,0-.131.066l-.331.387a.194.194,0,0,0,.021.256,2.18,2.18,0,0,0,1.047.512v.176a.179.179,0,0,0,.179.174h.289a.188.188,0,0,0,.137-.062.143.143,0,0,0,.035-.111v-.17a1.3,1.3,0,0,0,.682-.3,1.021,1.021,0,0,0,.337-.775.911.911,0,0,0-.31-.738,1.9,1.9,0,0,0-.709-.33v-.475a1.536,1.536,0,0,1,.358.184.223.223,0,0,0,.11.029h.027a.169.169,0,0,0,.117-.076l.289-.414a.159.159,0,0,0,.028-.139.178.178,0,0,0-.076-.115,2.029,2.029,0,0,0-.854-.352v-.068a.171.171,0,0,0-.172-.174h-.289a.179.179,0,0,0-.179.174v.068a1.2,1.2,0,0,0-.647.3.974.974,0,0,0-.331.762.88.88,0,0,0,.3.73,1.6,1.6,0,0,0,.675.316v.51a1.718,1.718,0,0,1-.482-.3.165.165,0,0,0-.117-.049Zm1.067,1.375h-.254v-.252a.109.109,0,0,0-.09-.1,1.881,1.881,0,0,1-1.019-.463l.31-.371a1.573,1.573,0,0,0,.675.371.041.041,0,0,0,.021,0,.089.089,0,0,0,.061-.023.1.1,0,0,0,.042-.082v-.7a.1.1,0,0,0-.076-.094,1.716,1.716,0,0,1-.681-.307.71.71,0,0,1-.234-.57.937.937,0,0,1,.241-.625,1.158,1.158,0,0,1,.634-.256.112.112,0,0,0,.09-.1v-.131h.261v.131a.1.1,0,0,0,.083.1,1.976,1.976,0,0,1,.847.316l-.275.387a1.209,1.209,0,0,0-.53-.225.028.028,0,0,0-.024-.008.1.1,0,0,0-.052.02.1.1,0,0,0-.041.08v.676a.11.11,0,0,0,.076.1,1.886,1.886,0,0,1,.708.309.73.73,0,0,1,.241.594.786.786,0,0,1-.269.631,1.164,1.164,0,0,1-.662.262.1.1,0,0,0-.083.1v.232Zm.09-1.586a.08.08,0,0,0-.056.018.094.094,0,0,0-.035.076v.6a.12.12,0,0,0,.035.08l.007,0a.264.264,0,0,0,.055.012h.007a.534.534,0,0,0,.255-.117.342.342,0,0,0,.131-.27.355.355,0,0,0-.1-.26.73.73,0,0,0-.262-.139A.115.115,0,0,0,5540.9,22887.9Zm-.458-1.434a.037.037,0,0,0-.024.006.6.6,0,0,0-.221.1.35.35,0,0,0-.117.264.362.362,0,0,0,.1.254.583.583,0,0,0,.234.131.059.059,0,0,0,.035.012.081.081,0,0,0,.047-.018.122.122,0,0,0,.042-.078v-.57a.108.108,0,0,0-.042-.076A.061.061,0,0,0,5540.441,22886.463Zm6.192-.232h0v0l-.037,0h-1.054a5.431,5.431,0,0,0-.447-1.066l.744-.752.021-.023.006-.008a6.107,6.107,0,0,1,.769,1.852Zm-10.913,0h0l-1.053,0h-.031a6.043,6.043,0,0,1,.765-1.844c.007.008.015.018.023.025l.744.752a5.012,5.012,0,0,0-.448,1.066Zm9.5-2.7-.509-.508a6.267,6.267,0,0,1,.511.508Zm-2.12-.355v0a5.08,5.08,0,0,0-1.066-.443v-1.055a.214.214,0,0,0,0-.035,6.136,6.136,0,0,1,1.85.766l-.029.025-.75.742Zm-4.945,0v0l-.743-.742-.03-.023a6.085,6.085,0,0,1,1.844-.764.169.169,0,0,0,0,.031v1.055a5.449,5.449,0,0,0-1.067.443Z" transform="translate(-5532.927 -22880)" fill="#31eaea"/>
+</svg>

gassafety-web/src/assets/styles/fonticon.scss

 @font-face {
-  font-family: "iconfont"; /* Project id 2692138 */
-  src: url('//at.alicdn.com/t/font_2692138_w351iy9udj.woff2?t=1632302713203') format('woff2'),
-       url('//at.alicdn.com/t/font_2692138_w351iy9udj.woff?t=1632302713203') format('woff'),
-       url('//at.alicdn.com/t/font_2692138_w351iy9udj.ttf?t=1632302713203') format('truetype');
+  font-family: "iconfont"; /* Project id 2931179 */
+  src: url('//at.alicdn.com/t/font_2931179_1l1pycze51s.woff2?t=1636704314183') format('woff2'),
+       url('//at.alicdn.com/t/font_2931179_1l1pycze51s.woff?t=1636704314183') format('woff'),
+       url('//at.alicdn.com/t/font_2931179_1l1pycze51s.ttf?t=1636704314183') format('truetype');
 }
 
 .iconfont {
@@ -13,44 +13,32 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-fmjgs:before {
-  content: "\e619";
-}
-
-.icon-sxt:before {
-  content: "\e618";
-}
-
-.icon-reset:before {
-  content: "\e616";
+.icon-bjqdw:before {
+  content: "\e8a4";
 }
 
-.icon-search:before {
-  content: "\e617";
+.icon-gongye:before {
+  content: "\e61a";
 }
 
-.icon-zhibanrenyuan:before {
-  content: "\e613";
-}
-
-.icon-ylbgs:before {
-  content: "\e611";
+.icon-jiayong:before {
+  content: "\e61b";
 }
 
-.icon-gdcd:before {
-  content: "\e615";
+.icon-shangye:before {
+  content: "\e61c";
 }
 
-.icon-tyxgs:before {
-  content: "\e610";
+.icon-create:before {
+  content: "\e601";
 }
 
-.icon-lljgs:before {
-  content: "\e614";
+.icon-compile:before {
+  content: "\e603";
 }
 
-.icon-ylb:before {
-  content: "\e60f";
+.icon-delete:before {
+  content: "\e604";
 }
 
 .icon-fmj:before {
@@ -81,14 +69,42 @@
   content: "\e60e";
 }
 
-.icon-delete:before {
-  content: "\e604";
+.icon-ylb:before {
+  content: "\e60f";
 }
 
-.icon-compile:before {
-  content: "\e603";
+.icon-tyxgs:before {
+  content: "\e610";
 }
 
-.icon-create:before {
-  content: "\e601";
+.icon-lljgs:before {
+  content: "\e614";
+}
+
+.icon-gdcd:before {
+  content: "\e615";
+}
+
+.icon-ylbgs:before {
+  content: "\e611";
+}
+
+.icon-zhibanrenyuan:before {
+  content: "\e613";
+}
+
+.icon-reset:before {
+  content: "\e616";
+}
+
+.icon-search:before {
+  content: "\e617";
+}
+
+.icon-sxt:before {
+  content: "\e618";
+}
+
+.icon-fmjgs:before {
+  content: "\e619";
 }

gassafety-web/src/assets/styles/gassafety.scss

@@ -415,9 +415,20 @@
 }
 
 // gis地图内的bottom列表，如果隐藏在出现会有一个bug，这样可以解决
-.el-bottom {
-  .el-table__body-wrapper {
-    height: 140px !important;
+.b {
+  &>.el-bottom {
+    .el-table__body-wrapper {
+      height: 140px !important;
+    }
+  }
+}
+
+// center
+.center {
+ .el-bottom {
+    .el-table__body-wrapper {
+      max-height: 600px !important;
+    }
   }
 }
 
@@ -479,7 +490,7 @@
 .scrollStyle {
   &::-webkit-scrollbar {
     width: 10px;
-    background: rgba(6, 29, 51, 0.8)
+    background: rgba(6, 29, 51, 0.8);
 
     // position: absolute;
     // top: 0;

gassafety-web/src/components/PopWindowGis/detectorInfoWindow.vue

+<template>
+  <div class="wrapper">
+    <span class="dot-left"></span>
+    <div class="top display-default">
+      <div class="left text ddd" :title="data.deviceName">
+        {{ data.nickName }}
+      </div>
+      <div class="right text">
+        <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
+      </div>
+    </div>
+    <div class="table-top">
+      <div>
+        联系人: <span v-un-content>{{ data.username }}</span>
+      </div>
+      <div>
+        联系电话：<span v-un-content>{{ data.phone }}</span>
+      </div>
+      <div :title="data.address" class="ddd">
+        联系地址：<span v-un-content>{{ data.address }}</span>
+      </div>
+    </div>
+
+    <div class="content-wrapper">
+      {{ data.remarks ? data.remarks : "暂无介绍" }}
+    </div>
+    <div class="table-list">
+      <div class="thead">
+        <div class="theadtop">设备类型</div>
+        <div>设备数量</div>
+        <div>在线设备</div>
+        <div>离线设备</div>
+        <div>历史报警</div>
+        <div>已处理报警</div>
+        <div class="last">报警中</div>
+      </div>
+      <div class="tbody">
+        <div class="theadtop">{{ userTypeName[data.userType] }}</div>
+        <div>{{ data.detectorCount }}</div>
+        <div>{{ data.onLineNum }}</div>
+        <div>{{ data.offLineNum }}</div>
+        <div>{{ data.historyAlarmNum }}</div>
+        <div>{{ data.cancelAlarmNum }}</div>
+        <div class="last">{{ data.processingAlarmNum }}</div>
+      </div>
+    </div>
+
+    <div class="btn">
+      <span @click="centerShow" >
+        <el-button class="elbtn"  type="primary">感知设备</el-button>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from "moment";
+//line移入时的的infowindow
+export default {
+  props: {
+    obj: { typs: Object },
+    title: "",
+    data: {},
+    map: null,
+  },
+  data() {
+    return {
+      userTypeName: ["家用报警器", "商用报警器", "工业报警器"],
+    };
+  },
+  mounted() {
+    console.log(this.data);
+  },
+  methods: {
+    moment,
+    close() {
+      this.map.clearInfoWindow();
+      this.data.class.view.domAllShow();
+    },
+    centerShow() {
+      this.data.class.view.getDetectorInfoList({ userId: this.data.userId });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  width: 750px;
+  max-height: 430px;
+  // background: #fff;
+  border-radius: 4px;
+  background: rgba(7, 29, 51, 0.9);
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  color: #fff;
+  // overflow: hidden;
+  .top {
+    width: 100%;
+    height: 51px;
+    background-color: #053b6a;
+    background-image: url(../../assets/images/blueTopBg.png);
+    background-size: 100% 100%;
+    background-position: center;
+    &:before {
+      content: "";
+      position: absolute;
+      left: -20px;
+      top: 5px;
+      z-index: -1;
+      width: 33px;
+      height: 33px;
+      background-image: url(../../assets/images/blueLeftTriangle.png);
+    }
+    .text {
+      font-weight: 600;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 51px;
+    }
+    .left {
+      padding-left: 22px;
+    }
+    .right {
+      padding-right: 22px;
+      img {
+        cursor: pointer;
+      }
+    }
+  }
+  .table-top {
+    display: flex;
+    justify-content: space-between;
+    & > div {
+      width: 33%;
+      text-align: center;
+    }
+  }
+  .content-wrapper {
+    padding: 10px 5px 10px 10px;
+  }
+  .table-list {
+    padding-left: 3px;
+    padding-right: 3px;
+    .thead {
+      display: flex;
+      justify-content: space-between;
+      & > div {
+        box-sizing: border-box;
+        border-top: 1px solid #fff;
+        border-right: 1px solid #fff;
+        border-bottom: 1px solid #fff;
+        padding-left: 5px;
+        padding-top: 3px;
+        padding-bottom: 3px;
+        font-size: 14px;
+        width: 100px;
+        &.theadtop {
+          width: 150px;
+          border-left: 1px solid #fff;
+        }
+      }
+    }
+    .tbody {
+      display: flex;
+      justify-content: space-between;
+      & > div {
+        box-sizing: border-box;
+        border-right: 1px solid #fff;
+        border-bottom: 1px solid #fff;
+        padding-left: 5px;
+        padding-top: 3px;
+        padding-bottom: 3px;
+        font-size: 14px;
+        width: 100px;
+        &.theadtop {
+          width: 150px;
+          border-left: 1px solid #fff;
+        }
+      }
+    }
+  }
+}
+.btn {
+  text-align: right;
+  padding-top: 10px;
+  padding-right: 5px;
+  padding-bottom: 10px;
+
+  .elbtn {
+    background-color: #053b6a;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+    width: 95px;
+    height: 33px;
+
+    // border: none;
+  }
+}
+
+.display-default {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

gassafety-web/src/components/PopWindowGis/detectorOnlyInfoWindow.vue

+<template>
+  <div class="wrapper">
+    <span class="dot-left"></span>
+    <div class="top display-default">
+      <div class="left text ddd" :title="data.deviceName">
+        {{ data.deviceName }}
+      </div>
+      <div class="right text">
+        <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from "moment";
+//line移入时的的infowindow
+export default {
+  props: {
+    obj: { typs: Object },
+    title: "",
+    data: {},
+    map: null,
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {
+    moment,
+
+    close() {
+      this.map.clearInfoWindow();
+      this.data.class.view.domAllShow();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.wrapper {
+  width: 406px;
+  max-height: 500px;
+  // background: #fff;
+  background: rgba(7, 29, 51, 0.9);
+  color: #fff;
+  border-radius: 4px;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  // overflow: hidden;
+  .top {
+    width: 100%;
+    height: 51px;
+    // background-color: #ff5a67;
+    background-image: url(../../assets/images/redTopBg.png);
+    background-size: 100% 100%;
+    background-position: center;
+    &:before {
+      content: "";
+      position: absolute;
+      left: -20px;
+      top: 5px;
+      z-index: -1;
+      width: 33px;
+      height: 33px;
+      background-image: url(../../assets/images/redLeftTriangle.png);
+    }
+    .text {
+      font-weight: 600;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 51px;
+    }
+    .left {
+      padding-left: 22px;
+    }
+    .right {
+      padding-right: 22px;
+      img {
+        cursor: pointer;
+      }
+    }
+  }
+  .content {
+    position: relative;
+    max-height: 300px;
+    overflow: hidden;
+    overflow-y: auto;
+    padding-bottom: 2px;
+    border-bottom: 1px solid #eeeeee;
+    .eq-content {
+      // min-height: 156px;
+      box-sizing: border-box;
+      padding: 13px 22px 0px 22px;
+      // border-bottom: 1px solid #e2e2e2;
+      .text-wrapper {
+        padding-top: 1px;
+        & > div {
+          margin-bottom: 6px;
+        }
+        .eq-text {
+          font-size: 14px;
+          font-weight: 400;
+          color: #fff;
+          opacity: 1;
+          & > span {
+            vertical-align: top;
+            display: inline-block;
+            // white-space: nowrap;
+            // text-overflow: ellipsis;
+            // overflow: hidden;
+            word-break: break-all;
+            max-width: 100px;
+          }
+        }
+      }
+      .pic {
+        width: 180px;
+        height: 103px;
+        // background-color: black;
+        img {
+          width: 100%;
+          height: 100%;
+          // cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .maintain-content {
+    width: 100%;
+    max-height: 119px;
+    padding-left: 22px;
+    // padding-right: 22px;
+    // padding-bottom: 10px;
+    // padding-top: 16px;
+    box-sizing: border-box;
+    // border-bottom: 1px solid #e2e2e2;
+    & > div {
+      margin-bottom: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      span {
+        vertical-align: top;
+        display: inline-block;
+        word-break: break-all;
+        max-width: 280px;
+      }
+    }
+  }
+  .warn-wrapper {
+    .warn-content {
+      box-sizing: border-box;
+      padding: 10px 0 2px 22px;
+      border-bottom: 1px solid #e2e2e2;
+      color: #fe5966;
+      & > div {
+        font-size: 14px;
+        font-weight: 400;
+        margin-bottom: 8px;
+      }
+    }
+    .btn {
+      padding: 16px 0;
+      text-align: center;
+      span {
+        display: inline-block;
+        padding: 0 10px;
+        .elbtn {
+          background-color: #053b6a;
+          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+          width: 95px;
+          height: 33px;
+          // border: none;
+        }
+      }
+    }
+  }
+}
+
+.wrapperEditorPage {
+}
+.display-default {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

gassafety-web/src/utils/gaodeMapView.js

@@ -15,6 +15,9 @@ import workerManInfowindow from "../components/PopWindowGis/workerManInfowindow.
 import workerManView from "../components/PopWindowGis/workerManView.vue";
 import videoView from "../components/PopWindowGis/videoView.vue";
 import videoInfowindow from "../components/PopWindowGis/videoInfowindow.vue";
+// 三个报警器
+import detectorInfoWindow from "../components/PopWindowGis/detectorInfoWindow.vue";
+import detectorOnlyInfoWindow from "../components/PopWindowGis/detectorInfoWindow.vue";
 
 import { getArray } from "@/utils/gassafety.js";
 import { lineColor, mapStyle } from "./mapCommon.js";
@@ -34,7 +37,15 @@ export const DEVICE_TYPE = {
   INSPECTOR: "8",
   SMALLINSPECTOR: "workPoint",
   TROUBLE: "trouble",
-  VIDEO: "10"
+  VIDEO: "10",
+  // 家用报警器
+  DETECTOR_FM: "11",
+  // 商用报警器
+  DETECTOR_CM: "12",
+  // 工业报警器
+  DETECTOR_NT: "13",
+  // 报警器用户的单独的报警器
+  DETECTOR_ONLY: "detector_only"
 };
 
 class gaodeMap {
@@ -45,6 +56,10 @@ class gaodeMap {
   troubles = [];
   // 摄像头
   cameras = [];
+  // 独立展示的报警器，报警器用户列表点击生成的单一的报警器
+  detcetorMarker = null;
+  // 报警器用户
+  detectors = [];
   // 值班人员对象的arr
   workerManMarkArr = [];
   // 是否开启新增
@@ -226,6 +241,7 @@ class gaodeMap {
    * @param markerType
    * @param lnglats
    */
+
   addMarker(markerType, data) {
     let that = this;
     that.markerType = markerType;
@@ -349,12 +365,53 @@ class gaodeMap {
       this.cameras.push(marker);
     }
 
+    // 报警器用户上图
+    if (
+      DEVICE_TYPE.DETECTOR_NT == markerType ||
+      DEVICE_TYPE.DETECTOR_CM == markerType ||
+      DEVICE_TYPE.DETECTOR_FM == markerType
+    ) {
+      marker.markerType = markerType;
+      marker.data = data;
+      marker.infoWindow = infoWindow;
+      marker.on("mousedown", this.detectorOpen);
+      marker.setExtData(data);
+      this.detectors.push(marker);
+    }
+
+    // 报警器用户下的独立报警器
+    if (DEVICE_TYPE.DETECTOR_ONLY == markerType) {
+      // 如果报警器用户下的单一报警器
+      // 如果this.detcetorMarker有值就删了
+      this.detcetorMarker && map.remove(this.detcetorMarker);
+      this.detcetorMarker = null;
+
+      marker.markerType = markerType;
+      marker.data = data;
+      marker.infoWindow = infoWindow;
+      // marker.on("mousedown", this.detectorOpen
+      const e = {
+        target,
+        lnglat: [data.longitude, data.latitude]
+      };
+      this.detectorOnlyOpen(e);
+      marker.setExtData(data);
+
+      // 赋值上去
+      this.detcetorMarker = marker;
+    }
+
+    // 四个设备
     if (
       DEVICE_TYPE.WORKORDER != markerType &&
       DEVICE_TYPE.INSPECTOR != markerType &&
       DEVICE_TYPE.SMALLINSPECTOR != markerType &&
       DEVICE_TYPE.TROUBLE != markerType &&
-      DEVICE_TYPE.VIDEO != markerType
+      DEVICE_TYPE.VIDEO != markerType &&
+      DEVICE_TYPE.DETECTOR_NT != markerType &&
+      DEVICE_TYPE.DETECTOR_CM != markerType &&
+      DEVICE_TYPE.DETECTOR_FM != markerType &&
+      DEVICE_TYPE.DETECTOR_ONLY != markerType
     ) {
       // marker.content = this.getMarketContent(data, markerInfoWindow);
       marker.infoWindow = infoWindow;
@@ -427,9 +484,17 @@ class gaodeMap {
     // 如果这个值为false说明不是workerpoint，就push进去
     if (!marker.workerPoint) {
       // 全部隐藏
-      marker.hide();
-      this.markers.push(marker);
-      map.setZoom("13");
+      // 如果不是报警器永华下的单一报警器
+      if (markerType != DEVICE_TYPE.DETECTOR_ONLY) {
+        // 刚进来所有的设备都是隐藏的
+        marker.hide();
+        this.markers.push(marker);
+      } else {
+      }
+      // 如果不是单独报警器就缩放
+      if (markerType != DEVICE_TYPE.DETECTOR_ONLY) {
+        map.setZoom("13");
+      }
     }
     //map.setFitView();
 
@@ -473,6 +538,24 @@ class gaodeMap {
     this.boxCollision(e.target.infoWindow.dom);
     this.workerManInfoWindow = e.target.infoWindow;
   };
+  // 三种报警器
+  detectorOpen = e => {
+    this.markerType = e.target.markerType;
+    e.target.content = this.getMarketContent(e.target.data);
+    e.target.infoWindow.setContent(e.target.content);
+    e.target.infoWindow.open(map, e.target.getPosition());
+    this.boxCollision(e.target.infoWindow.dom);
+    this.workerManInfoWindow = e.target.infoWindow;
+  };
+  // 报警器用户下的单独报警器
+  detectorOnlyOpen = e => {
+    this.markerType = e.target.markerType;
+    e.target.content = this.getMarketContent(e.target.data);
+    e.target.infoWindow.setContent(e.target.content);
+    e.target.infoWindow.open(map, e.target.getPosition());
+    this.boxCollision(e.target.infoWindow.dom);
+    this.workerManInfoWindow = e.target.infoWindow;
+  };
 
   // 鼠标移入设备时候实行的函数
   infoOpen = e => {
@@ -619,7 +702,7 @@ class gaodeMap {
         return html;
       }
       case DEVICE_TYPE.VIDEO: {
-        console.log("DEVICE_TYPE.VIDEODEVICE_TYPE.VIDEO", DEVICE_TYPE.VIDEO);
+        // console.log("DEVICE_TYPE.VIDEODEVICE_TYPE.VIDEO", DEVICE_TYPE.VIDEO);
         const dom = createPop(videoInfowindow, {
           title: "video",
           data: data,
@@ -629,6 +712,50 @@ class gaodeMap {
         dom.remove();
         return html;
       }
+      case DEVICE_TYPE.DETECTOR_CM: {
+        // console.log("DEVICE_TYPE.VIDEODEVICE_TYPE.VIDEO", DEVICE_TYPE.VIDEO);
+        const dom = createPop(detectorInfoWindow, {
+          title: "detector",
+          data: data,
+          map: map
+        });
+        const html = dom.$el;
+        dom.remove();
+        return html;
+      }
+      case DEVICE_TYPE.DETECTOR_FM: {
+        // console.log("DEVICE_TYPE.VIDEODEVICE_TYPE.VIDEO", DEVICE_TYPE.VIDEO);
+        const dom = createPop(detectorInfoWindow, {
+          title: "detector",
+          data: data,
+          map: map
+        });
+        const html = dom.$el;
+        dom.remove();
+        return html;
+      }
+      case DEVICE_TYPE.DETECTOR_NT: {
+        // console.log("DEVICE_TYPE.VIDEODEVICE_TYPE.VIDEO", DEVICE_TYPE.VIDEO);
+        const dom = createPop(detectorInfoWindow, {
+          title: "detector",
+          data: data,
+          map: map
+        });
+        const html = dom.$el;
+        dom.remove();
+        return html;
+      }
+      case DEVICE_TYPE.DETECTOR_ONLY: {
+        // console.log("DEVICE_TYPE.VIDEODEVICE_TYPE.VIDEO", DEVICE_TYPE.VIDEO);
+        const dom = createPop(detectorOnlyInfoWindow, {
+          title: "detector",
+          data: data,
+          map: map
+        });
+        const html = dom.$el;
+        dom.remove();
+        return html;
+      }
     }
   }
 
@@ -737,6 +864,42 @@ class gaodeMap {
         marker.setIcon(icon);
         break;
       }
+      // 工业报警器
+      case DEVICE_TYPE.DETECTOR_NT: {
+        let icon = new AMap.Icon({
+          opacity: 0.1,
+          image: require("../assets/images/detctor/gongye.svg")
+        });
+        marker.setIcon(icon);
+        break;
+      }
+      //商用报警器
+      case DEVICE_TYPE.DETECTOR_CM: {
+        let icon = new AMap.Icon({
+          opacity: 0.1,
+          image: require("../assets/images/detctor/shangye.svg")
+        });
+        marker.setIcon(icon);
+        break;
+      }
+      // 家用报警器
+      case DEVICE_TYPE.DETECTOR_FM: {
+        let icon = new AMap.Icon({
+          opacity: 0.1,
+          image: require("../assets/images/detctor/jiayong.svg")
+        });
+        marker.setIcon(icon);
+        break;
+      }
+      //报警器用户下定位出来的报警器
+      case DEVICE_TYPE.DETECTOR_ONLY: {
+        let icon = new AMap.Icon({
+          opacity: 0.1,
+          image: require("../assets/images/detctor/baojingquan.svg")
+        });
+        marker.setIcon(icon);
+        break;
+      }
     }
   }
   changeMarkIcon(marker, iconUrl) {
@@ -916,7 +1079,7 @@ class gaodeMap {
         }
       });
       // 全部隐藏
-      polyline.hide()
+      polyline.hide();
 
       this.polyLines.push(polyline);
       // 信息窗体
@@ -1305,6 +1468,17 @@ class gaodeMap {
       // //console.log("deviceType",deviceType);
     });
   }
+  // 报警器的显示隐藏
+  detctorMakeShow(userId, bool) {
+    this.detectors
+      .filter(item => {
+        return item.getExtData().userId == userId;
+      })
+      .forEach(item => {
+        bool ? item.show() : item.hide();
+      });
+  }
+
   lineDelete(obj) {
     const {
       lineData: { pipeName }

gassafety-web/src/views/enterprise/mapView/components/Bottom.vue

 <template>
-  <div class="wrapper">
+  <div class="wrapper b">
     <div class="left">
       <div class="top">
         <span class="title">设备报警最新记录</span>

gassafety-web/src/views/enterprise/mapView/components/Center.vue

+<template>
+  <div v-show="show" class="wrapper center">
+    <div class="left">
+      <div class="title-wrapper">
+        <div class="title"></div>
+        <div class="close" @click="close">
+          <img src="@/assets/images/closeBtn.png" alt="" />
+        </div>
+      </div>
+      <div class="bottom right-bottom-data-left">
+        <el-table
+          size="mini"
+          :data="detcetorList"
+          style="width: 100%; maxheight: 600px"
+          class="el-bottom"
+        >
+          <!-- :height="tableHeight" -->
+
+          <el-table-column prop="detectorName" label="设备名称" width="100">
+          </el-table-column>
+          <el-table-column prop="detectorCode" label="设备编号" width="200">
+          </el-table-column>
+          <el-table-column prop="linkman" label="联系人" width="100">
+          </el-table-column>
+          <el-table-column prop="phone" label="联系电话" width="">
+          </el-table-column>
+          <el-table-column prop="detectorStatus" label="设备状态" width="100">
+          </el-table-column>
+          <el-table-column prop="alarmTime" label="报警时间" width="">
+            <template slot-scope="scope">
+              <div v-un-content>{{scope.row.alarmTime}}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="creatTime" label="创建时间" width="">
+            <template slot-scope="scope">
+              <div v-un-content>{{scope.row.creatTime}}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="alarmValue" label="定位" width="50">
+            <template slot-scope="scope">
+              <div @click="createDetector(scope)" class="iconfont icon-bjqdw">
+              </div>
+              <!-- {{ scope.row.userId }} -->
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
+
+export default {
+  props: {
+    detcetorList: {
+      type: Array,
+    },
+    show: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      tableHeight: 600,
+      tableData: [
+        {
+          deviceCode: "2016-05-05",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路",
+        },
+        {
+          deviceCode: "2016-05-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路",
+        },
+        {
+          deviceCode: "2016-05-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路",
+        },
+        {
+          deviceCode: "2016-05-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路",
+        },
+        {
+          deviceCode: "2016-05-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路",
+        },
+        {
+          deviceCode: "2016-05-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路",
+        },
+        {
+          deviceCode: "2016-05-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路",
+        },
+        {
+          deviceCode: "2016-05-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路",
+        },
+      ],
+    };
+  },
+  created() {
+    console.log("list", this.detcetorList);
+    // this.getList();
+  },
+  watch: {
+    // 当组件显示的时候
+    show(bol) {
+      console.log(bol);
+      if (bol) {
+        console.log(this.detcetorList);
+        // this.tableData=[...detcetorList]
+      }
+    },
+  },
+
+  methods: {
+    close() {
+      this.$parent.centerShow = false;
+    },
+    // 点击创建点并且定位过去
+    createDetector(data){
+      console.log(data);
+      this.$parent.gaoMap.addMarker('detector_only');
+    }
+  },
+};
+</script>
+
+<style lang="scss"  scoped>
+.wrapper {
+  // 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: 100%;
+      display: flex;
+      justify-content: space-between;
+      background: #1890ff;
+      padding: 5px;
+      .title {
+        color: #fff;
+      }
+      .close {
+        box-sizing: border-box;
+        padding-top: 2px;
+        padding-right: 2px;
+        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: 900px;
+      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;
+  }
+  .fade-enter-to,
+  .fade-leave {
+    opacity: 1;
+  }
+  .fade-leave-active {
+    transition: opacity 0.5s;
+  }
+  .fade-enter-active {
+    transition: opacity 0s;
+  }
+  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+    opacity: 0;
+  }
+
+}
+</style>
\ No newline at end of file