Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

public/js/config.js

@@ -9,7 +9,7 @@ const History_Type = {
 }
 
 const VENT_PARAM = {
-  // simulatedPassword: '123456' //(simulatedPassword 为空时有密码输入框弹出，不为空时不弹出密码输入框，无需输入密码)
-  simulatedPassword: '',
+  simulatedPassword: '123456', //(simulatedPassword 为空时有密码输入框弹出，不为空时不弹出密码输入框，无需输入密码)
+  // simulatedPassword: '',
   showReport: false
 }

public/json/vent2.json

@@ -0,0 +1,1247 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 610800,
+        "name": "榆林市",
+        "center": [109.741193, 38.290162],
+        "centroid": [109.577105, 38.048207],
+        "childrenNum": 12,
+        "level": "city",
+        "parent": { "adcode": 610000 },
+        "subFeatureIndex": 7,
+        "acroutes": [100000, 610000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [110.418706, 36.973589],
+              [110.40846, 36.989032],
+              [110.377146, 37.010291],
+              [110.38319, 37.021849],
+              [110.412834, 37.019212],
+              [110.441212, 37.00618],
+              [110.450307, 37.016497],
+              [110.424059, 37.023944],
+              [110.425958, 37.04085],
+              [110.460495, 37.044728],
+              [110.495781, 37.086743],
+              [110.535556, 37.115102],
+              [110.540276, 37.144612],
+              [110.584541, 37.18069],
+              [110.650161, 37.254341],
+              [110.661903, 37.282019],
+              [110.690051, 37.287043],
+              [110.678711, 37.317877],
+              [110.693965, 37.325912],
+              [110.695059, 37.349625],
+              [110.651773, 37.357038],
+              [110.634044, 37.36615],
+              [110.631799, 37.398803],
+              [110.648146, 37.438154],
+              [110.744965, 37.450726],
+              [110.758377, 37.471161],
+              [110.759528, 37.503461],
+              [110.771271, 37.520183],
+              [110.771098, 37.538365],
+              [110.794928, 37.56617],
+              [110.772249, 37.592655],
+              [110.76373, 37.639596],
+              [110.793317, 37.65075],
+              [110.796137, 37.663056],
+              [110.775357, 37.680896],
+              [110.739094, 37.68943],
+              [110.706571, 37.705342],
+              [110.70352, 37.718638],
+              [110.716645, 37.728704],
+              [110.750721, 37.736157],
+              [110.755671, 37.755055],
+              [110.735755, 37.770415],
+              [110.680381, 37.790072],
+              [110.660752, 37.808034],
+              [110.650564, 37.840034],
+              [110.607277, 37.89625],
+              [110.587937, 37.926602],
+              [110.547644, 37.940317],
+              [110.522489, 37.95495],
+              [110.516618, 37.970728],
+              [110.52836, 37.990638],
+              [110.508099, 38.012838],
+              [110.501422, 38.03901],
+              [110.508789, 38.061961],
+              [110.501882, 38.098132],
+              [110.521165, 38.124427],
+              [110.510574, 38.147274],
+              [110.507869, 38.18493],
+              [110.523928, 38.210506],
+              [110.558235, 38.210506],
+              [110.567272, 38.217529],
+              [110.567963, 38.245764],
+              [110.577461, 38.297247],
+              [110.601291, 38.308225],
+              [110.638821, 38.304718],
+              [110.668581, 38.313637],
+              [110.701621, 38.35334],
+              [110.750318, 38.36949],
+              [110.758952, 38.400407],
+              [110.77766, 38.4409],
+              [110.796828, 38.453454],
+              [110.825033, 38.449421],
+              [110.84069, 38.439986],
+              [110.874248, 38.453682],
+              [110.870161, 38.508894],
+              [110.907692, 38.521056],
+              [110.909418, 38.563152],
+              [110.919895, 38.582064],
+              [110.89664, 38.588216],
+              [110.88081, 38.626933],
+              [110.896409, 38.657816],
+              [110.916211, 38.673973],
+              [110.915405, 38.704305],
+              [110.937681, 38.718784],
+              [110.965023, 38.755688],
+              [110.956274, 38.776746],
+              [110.979126, 38.787727],
+              [110.996509, 38.825125],
+              [111.010094, 38.841623],
+              [110.996049, 38.868026],
+              [111.012339, 38.878312],
+              [111.015735, 38.896234],
+              [111.009921, 38.932593],
+              [110.994552, 38.960171],
+              [110.979989, 38.972257],
+              [110.998409, 38.998536],
+              [111.038241, 39.020126],
+              [111.088953, 39.02707],
+              [111.138341, 39.064267],
+              [111.147321, 39.100539],
+              [111.162517, 39.108455],
+              [111.174144, 39.135136],
+              [111.163093, 39.152465],
+              [111.218985, 39.24567],
+              [111.213516, 39.25718],
+              [111.227159, 39.284406],
+              [111.247478, 39.3023],
+              [111.213804, 39.301247],
+              [111.187959, 39.314327],
+              [111.17944, 39.326803],
+              [111.194233, 39.340479],
+              [111.18842, 39.350922],
+              [111.161711, 39.33552],
+              [111.155034, 39.368273],
+              [111.125562, 39.36647],
+              [111.108121, 39.356556],
+              [111.086593, 39.380139],
+              [111.09776, 39.404539],
+              [111.086651, 39.412721],
+              [111.064374, 39.400936],
+              [111.053841, 39.429907],
+              [111.05833, 39.447689],
+              [111.086881, 39.45669],
+              [111.088032, 39.468391],
+              [111.108869, 39.474165],
+              [111.100005, 39.483239],
+              [111.107143, 39.499208],
+              [111.148875, 39.532633],
+              [111.154976, 39.568664],
+              [111.136787, 39.58701],
+              [111.100984, 39.559452],
+              [111.04371, 39.554584],
+              [111.040947, 39.567691],
+              [111.017231, 39.552037],
+              [110.996624, 39.547767],
+              [110.990177, 39.537054],
+              [110.959152, 39.519445],
+              [110.890826, 39.508952],
+              [110.862909, 39.482639],
+              [110.806613, 39.411295],
+              [110.782668, 39.388098],
+              [110.768565, 39.382917],
+              [110.738288, 39.348518],
+              [110.732877, 39.308464],
+              [110.70283, 39.273878],
+              [110.688382, 39.267485],
+              [110.669617, 39.275908],
+              [110.626273, 39.266808],
+              [110.596571, 39.283052],
+              [110.566927, 39.318461],
+              [110.559156, 39.352124],
+              [110.521741, 39.383217],
+              [110.499177, 39.360687],
+              [110.482599, 39.360612],
+              [110.469475, 39.375182],
+              [110.434995, 39.380889],
+              [110.416576, 39.348668],
+              [110.429124, 39.342057],
+              [110.385205, 39.310494],
+              [110.370008, 39.329433],
+              [110.34094, 39.341531],
+              [110.296617, 39.376008],
+              [110.281018, 39.394179],
+              [110.257648, 39.407091],
+              [110.276759, 39.420301],
+              [110.243488, 39.423678],
+              [110.217125, 39.443262],
+              [110.206188, 39.437485],
+              [110.152483, 39.45399],
+              [110.133373, 39.448289],
+              [110.126408, 39.416849],
+              [110.136769, 39.391777],
+              [110.158872, 39.389599],
+              [110.185293, 39.3531],
+              [110.202792, 39.316356],
+              [110.210851, 39.281473],
+              [110.193352, 39.280721],
+              [110.159851, 39.263122],
+              [110.110808, 39.249732],
+              [110.078401, 39.230771],
+              [110.010997, 39.208568],
+              [109.962702, 39.211881],
+              [109.941289, 39.239952],
+              [109.902723, 39.271922],
+              [109.868992, 39.249732],
+              [109.882174, 39.233104],
+              [109.897255, 39.234082],
+              [109.960457, 39.186735],
+              [109.893916, 39.141239],
+              [109.922121, 39.107023],
+              [109.890923, 39.104007],
+              [109.882116, 39.116747],
+              [109.860128, 39.124435],
+              [109.815345, 39.096167],
+              [109.793356, 39.074072],
+              [109.762388, 39.057478],
+              [109.725376, 39.01839],
+              [109.704826, 39.016956],
+              [109.691242, 38.992647],
+              [109.672016, 38.997026],
+              [109.665339, 38.981697],
+              [109.68537, 38.968254],
+              [109.683759, 38.93554],
+              [109.67098, 38.926472],
+              [109.649279, 38.884514],
+              [109.624413, 38.854485],
+              [109.549755, 38.805672],
+              [109.511189, 38.833753],
+              [109.489258, 38.813317],
+              [109.450864, 38.788863],
+              [109.442576, 38.771141],
+              [109.412528, 38.747581],
+              [109.403952, 38.720603],
+              [109.338734, 38.7015],
+              [109.325956, 38.670029],
+              [109.328891, 38.660471],
+              [109.366537, 38.631107],
+              [109.331366, 38.597935],
+              [109.310299, 38.60249],
+              [109.27674, 38.622986],
+              [109.196845, 38.552668],
+              [109.178655, 38.520828],
+              [109.147112, 38.506157],
+              [109.128634, 38.480533],
+              [109.092486, 38.45353],
+              [109.054265, 38.433975],
+              [109.059791, 38.408705],
+              [109.051272, 38.385255],
+              [109.007813, 38.35913],
+              [108.989738, 38.310893],
+              [108.976441, 38.296942],
+              [108.961878, 38.265065],
+              [108.976557, 38.249503],
+              [108.955144, 38.218521],
+              [108.938508, 38.207453],
+              [108.947258, 38.170725],
+              [108.964469, 38.154761],
+              [109.019785, 38.119688],
+              [109.06359, 38.100196],
+              [109.068828, 38.091174],
+              [109.050754, 38.055],
+              [109.069519, 38.023017],
+              [109.038032, 38.021487],
+              [109.028938, 37.997452],
+              [109.015468, 37.982828],
+              [109.017483, 37.969962],
+              [108.97955, 37.959316],
+              [108.974197, 37.931889],
+              [108.935803, 37.921621],
+              [108.917095, 37.959776],
+              [108.893841, 37.978157],
+              [108.882961, 38.013833],
+              [108.855504, 38.038322],
+              [108.830638, 38.049798],
+              [108.797655, 38.047886],
+              [108.826666, 37.995155],
+              [108.824882, 37.98321],
+              [108.798231, 37.933652],
+              [108.792072, 37.872864],
+              [108.793223, 37.815863],
+              [108.801397, 37.792298],
+              [108.784704, 37.764655],
+              [108.78338, 37.737309],
+              [108.792014, 37.700269],
+              [108.777681, 37.68351],
+              [108.741648, 37.685509],
+              [108.713442, 37.680665],
+              [108.699512, 37.66967],
+              [108.628366, 37.652212],
+              [108.61127, 37.654212],
+              [108.55958, 37.681742],
+              [108.532641, 37.690583],
+              [108.477037, 37.674207],
+              [108.422411, 37.648827],
+              [108.351265, 37.641366],
+              [108.33296, 37.633057],
+              [108.301128, 37.64075],
+              [108.292782, 37.656981],
+              [108.246502, 37.665748],
+              [108.205576, 37.65575],
+              [108.193661, 37.638289],
+              [108.154001, 37.623901],
+              [108.133912, 37.621978],
+              [108.108239, 37.637827],
+              [108.077041, 37.642981],
+              [108.060233, 37.652058],
+              [108.025408, 37.649827],
+              [108.013205, 37.665517],
+              [108.02443, 37.698655],
+              [108.014069, 37.725861],
+              [107.993692, 37.735081],
+              [107.979992, 37.764732],
+              [107.981949, 37.787231],
+              [107.937109, 37.795062],
+              [107.894628, 37.813637],
+              [107.8849, 37.808341],
+              [107.842708, 37.828985],
+              [107.815884, 37.829062],
+              [107.741169, 37.845328],
+              [107.683435, 37.887739],
+              [107.675952, 37.875778],
+              [107.650222, 37.864581],
+              [107.659259, 37.8441],
+              [107.646135, 37.805194],
+              [107.620692, 37.775944],
+              [107.599222, 37.791146],
+              [107.571305, 37.776712],
+              [107.523413, 37.772949],
+              [107.49918, 37.765654],
+              [107.490833, 37.745376],
+              [107.485077, 37.706495],
+              [107.465449, 37.691198],
+              [107.430566, 37.684202],
+              [107.407081, 37.692966],
+              [107.386877, 37.691121],
+              [107.389583, 37.671208],
+              [107.422047, 37.665056],
+              [107.419918, 37.650212],
+              [107.39672, 37.652443],
+              [107.36132, 37.613282],
+              [107.325056, 37.606279],
+              [107.312565, 37.610127],
+              [107.330467, 37.584033],
+              [107.368918, 37.587574],
+              [107.372199, 37.580029],
+              [107.359132, 37.540214],
+              [107.345663, 37.518873],
+              [107.284302, 37.481955],
+              [107.283612, 37.440776],
+              [107.271063, 37.390313],
+              [107.261047, 37.37086],
+              [107.257939, 37.336958],
+              [107.273135, 37.29114],
+              [107.293282, 37.277458],
+              [107.309342, 37.238874],
+              [107.291382, 37.241272],
+              [107.270315, 37.229129],
+              [107.317688, 37.199961],
+              [107.333978, 37.173801],
+              [107.337835, 37.153982],
+              [107.3311, 37.13013],
+              [107.307039, 37.100459],
+              [107.278258, 37.128194],
+              [107.277568, 37.102396],
+              [107.268703, 37.099452],
+              [107.285223, 37.056435],
+              [107.279525, 37.041703],
+              [107.287411, 36.992369],
+              [107.304276, 36.951699],
+              [107.294836, 36.929414],
+              [107.311702, 36.913026],
+              [107.332827, 36.925608],
+              [107.370645, 36.904792],
+              [107.447202, 36.899432],
+              [107.47794, 36.908443],
+              [107.533717, 36.867184],
+              [107.528479, 36.853737],
+              [107.540106, 36.828624],
+              [107.590818, 36.836244],
+              [107.603597, 36.825824],
+              [107.639515, 36.818514],
+              [107.672095, 36.8329],
+              [107.694947, 36.849772],
+              [107.723095, 36.8591],
+              [107.727124, 36.892828],
+              [107.723267, 36.920094],
+              [107.706287, 36.963033],
+              [107.693335, 36.97421],
+              [107.723958, 36.985929],
+              [107.748307, 36.986317],
+              [107.752739, 37.001137],
+              [107.725282, 37.016265],
+              [107.702142, 37.018126],
+              [107.69512, 36.996637],
+              [107.68591, 37.022935],
+              [107.674858, 37.029916],
+              [107.65995, 37.058529],
+              [107.670138, 37.064653],
+              [107.696962, 37.050078],
+              [107.720217, 37.07349],
+              [107.700473, 37.091471],
+              [107.692472, 37.123856],
+              [107.675779, 37.121687],
+              [107.704099, 37.142676],
+              [107.734377, 37.136946],
+              [107.744738, 37.153905],
+              [107.724131, 37.16366],
+              [107.749343, 37.176511],
+              [107.747616, 37.207699],
+              [107.771159, 37.230521],
+              [107.78388, 37.230521],
+              [107.797694, 37.246144],
+              [107.82141, 37.243283],
+              [107.820086, 37.220697],
+              [107.850594, 37.221393],
+              [107.858652, 37.212341],
+              [107.866941, 37.16397],
+              [107.887145, 37.132299],
+              [107.888584, 37.083953],
+              [107.930835, 37.094028],
+              [107.94252, 37.081861],
+              [107.959097, 37.081783],
+              [107.982525, 37.110299],
+              [108.032316, 37.127187],
+              [108.102195, 37.130052],
+              [108.11555, 37.149646],
+              [108.123954, 37.20414],
+              [108.136617, 37.191139],
+              [108.173745, 37.195705],
+              [108.174723, 37.164666],
+              [108.213347, 37.171866],
+              [108.230673, 37.194235],
+              [108.24915, 37.201741],
+              [108.260087, 37.216983],
+              [108.251971, 37.234775],
+              [108.275571, 37.235239],
+              [108.282248, 37.26161],
+              [108.261296, 37.268491],
+              [108.245524, 37.283642],
+              [108.249438, 37.298018],
+              [108.21657, 37.325139],
+              [108.236659, 37.340279],
+              [108.263253, 37.341747],
+              [108.319548, 37.358814],
+              [108.343436, 37.373871],
+              [108.362201, 37.405363],
+              [108.361395, 37.388461],
+              [108.407445, 37.381127],
+              [108.406581, 37.406675],
+              [108.418842, 37.407215],
+              [108.431736, 37.388306],
+              [108.428743, 37.356961],
+              [108.438701, 37.3144],
+              [108.486419, 37.28542],
+              [108.474274, 37.26161],
+              [108.452688, 37.2538],
+              [108.48665, 37.233074],
+              [108.515258, 37.231294],
+              [108.512725, 37.204217],
+              [108.540527, 37.178833],
+              [108.547838, 37.163583],
+              [108.536325, 37.117117],
+              [108.552097, 37.088293],
+              [108.536728, 37.060544],
+              [108.542254, 37.039842],
+              [108.510135, 37.023246],
+              [108.487743, 37.026891],
+              [108.501213, 37.001292],
+              [108.517503, 37.003309],
+              [108.536268, 36.988955],
+              [108.558486, 36.986549],
+              [108.598607, 37.004783],
+              [108.611328, 37.029838],
+              [108.621459, 37.02627],
+              [108.651218, 37.03961],
+              [108.672401, 37.020298],
+              [108.688173, 36.996637],
+              [108.73664, 36.982592],
+              [108.758456, 36.98911],
+              [108.768241, 36.974831],
+              [108.80485, 37.002999],
+              [108.803987, 37.023789],
+              [108.815845, 37.029916],
+              [108.809052, 37.043409],
+              [108.782631, 37.05062],
+              [108.770601, 37.069072],
+              [108.741245, 37.081241],
+              [108.757707, 37.099607],
+              [108.750915, 37.114405],
+              [108.773249, 37.113088],
+              [108.778314, 37.121919],
+              [108.79754, 37.111694],
+              [108.819528, 37.139734],
+              [108.834437, 37.136868],
+              [108.853202, 37.154601],
+              [108.883019, 37.150962],
+              [108.882904, 37.177285],
+              [108.862239, 37.180149],
+              [108.85349, 37.205378],
+              [108.859994, 37.236554],
+              [108.868801, 37.242123],
+              [108.862354, 37.263543],
+              [108.876227, 37.252717],
+              [108.889639, 37.222321],
+              [108.894646, 37.23493],
+              [108.920722, 37.238333],
+              [108.950884, 37.233383],
+              [108.963778, 37.263233],
+              [108.984673, 37.267099],
+              [109.002459, 37.285807],
+              [109.01449, 37.283024],
+              [109.013684, 37.303891],
+              [109.049027, 37.295468],
+              [109.056567, 37.28542],
+              [109.078498, 37.312005],
+              [109.111193, 37.307214],
+              [109.11787, 37.322435],
+              [109.142737, 37.318572],
+              [109.173935, 37.30451],
+              [109.178713, 37.327148],
+              [109.205249, 37.32089],
+              [109.231497, 37.329311],
+              [109.24347, 37.31865],
+              [109.24865, 37.337035],
+              [109.282612, 37.346072],
+              [109.300744, 37.34445],
+              [109.307651, 37.354644],
+              [109.342994, 37.347385],
+              [109.329812, 37.373253],
+              [109.349786, 37.379815],
+              [109.362968, 37.408913],
+              [109.385877, 37.438154],
+              [109.417421, 37.446947],
+              [109.434574, 37.459672],
+              [109.453397, 37.460212],
+              [109.468651, 37.487351],
+              [109.492539, 37.498451],
+              [109.509002, 37.481647],
+              [109.536516, 37.477869],
+              [109.564088, 37.460135],
+              [109.576291, 37.438],
+              [109.634659, 37.419407],
+              [109.669599, 37.422339],
+              [109.717778, 37.435377],
+              [109.738673, 37.424808],
+              [109.734758, 37.400501],
+              [109.772807, 37.393246],
+              [109.77344, 37.363756],
+              [109.784434, 37.343369],
+              [109.80366, 37.347308],
+              [109.812351, 37.305051],
+              [109.783801, 37.310691],
+              [109.762043, 37.270733],
+              [109.797788, 37.265476],
+              [109.811948, 37.257821],
+              [109.841017, 37.279546],
+              [109.879353, 37.270887],
+              [109.905601, 37.277922],
+              [109.898176, 37.294927],
+              [109.919128, 37.314091],
+              [109.926784, 37.29284],
+              [109.987857, 37.26965],
+              [110.011227, 37.274212],
+              [110.028323, 37.265244],
+              [110.030222, 37.245294],
+              [110.013126, 37.204913],
+              [109.988375, 37.199652],
+              [109.968919, 37.213424],
+              [109.954529, 37.206306],
+              [109.982101, 37.179375],
+              [109.978071, 37.151659],
+              [109.990677, 37.130207],
+              [110.013644, 37.146316],
+              [110.025099, 37.132221],
+              [110.011112, 37.095345],
+              [110.031546, 37.053179],
+              [110.032467, 37.029605],
+              [110.066141, 37.01099],
+              [110.087554, 36.985308],
+              [110.115816, 36.973201],
+              [110.170557, 36.988567],
+              [110.191107, 37.013394],
+              [110.242855, 37.00362],
+              [110.269621, 36.988955],
+              [110.278601, 36.968544],
+              [110.294718, 36.965594],
+              [110.324247, 36.98492],
+              [110.352222, 36.975141],
+              [110.362238, 36.943857],
+              [110.375649, 36.962024],
+              [110.388313, 36.958608],
+              [110.418706, 36.973589]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 140900,
+        "name": "忻州市",
+        "center": [112.733538, 38.41769],
+        "centroid": [112.414867, 38.885126],
+        "childrenNum": 14,
+        "level": "city",
+        "parent": { "adcode": 140000 },
+        "subFeatureIndex": 8,
+        "acroutes": [100000, 140000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [111.93028, 39.611411],
+              [111.902031, 39.61717],
+              [111.878902, 39.605892],
+              [111.842538, 39.620109],
+              [111.787645, 39.589691],
+              [111.722684, 39.606012],
+              [111.707844, 39.621429],
+              [111.646528, 39.644278],
+              [111.61663, 39.633305],
+              [111.589596, 39.644938],
+              [111.568637, 39.643559],
+              [111.557615, 39.654231],
+              [111.501941, 39.663104],
+              [111.461541, 39.646377],
+              [111.438108, 39.643019],
+              [111.442751, 39.630186],
+              [111.46293, 39.624488],
+              [111.451951, 39.608112],
+              [111.443359, 39.620169],
+              [111.428952, 39.613691],
+              [111.438803, 39.601452],
+              [111.433205, 39.561841],
+              [111.422487, 39.542148],
+              [111.433986, 39.523409],
+              [111.426479, 39.503404],
+              [111.38864, 39.492167],
+              [111.364165, 39.467284],
+              [111.364079, 39.446361],
+              [111.352449, 39.426754],
+              [111.337218, 39.42092],
+              [111.289268, 39.41719],
+              [111.26206, 39.424228],
+              [111.199356, 39.420799],
+              [111.172192, 39.423386],
+              [111.145331, 39.409429],
+              [111.119598, 39.377233],
+              [111.125587, 39.366458],
+              [111.155051, 39.368264],
+              [111.155398, 39.338699],
+              [111.167505, 39.337253],
+              [111.183648, 39.350924],
+              [111.195017, 39.344962],
+              [111.179438, 39.326773],
+              [111.187987, 39.314303],
+              [111.213806, 39.301288],
+              [111.24748, 39.302313],
+              [111.227171, 39.284354],
+              [111.213546, 39.257165],
+              [111.219013, 39.245648],
+              [111.163079, 39.152473],
+              [111.174144, 39.13514],
+              [111.162515, 39.108437],
+              [111.147327, 39.100521],
+              [111.138345, 39.064314],
+              [111.09417, 39.030205],
+              [111.038235, 39.020102],
+              [110.9984, 38.9985],
+              [110.983299, 38.980342],
+              [111.009899, 38.932626],
+              [111.015714, 38.896211],
+              [111.012329, 38.87833],
+              [110.996013, 38.868024],
+              [111.010116, 38.841584],
+              [110.99649, 38.825085],
+              [110.979133, 38.787705],
+              [110.956308, 38.776717],
+              [110.96503, 38.755709],
+              [110.945286, 38.729471],
+              [110.955006, 38.709482],
+              [110.949495, 38.685841],
+              [110.985946, 38.684321],
+              [111.003086, 38.663225],
+              [111.025087, 38.659334],
+              [111.071301, 38.686327],
+              [111.123634, 38.706505],
+              [111.151753, 38.723882],
+              [111.202437, 38.72935],
+              [111.219664, 38.711791],
+              [111.227519, 38.66736],
+              [111.248044, 38.657449],
+              [111.25004, 38.636041],
+              [111.276206, 38.594301],
+              [111.346938, 38.60343],
+              [111.348934, 38.586815],
+              [111.373625, 38.573057],
+              [111.432771, 38.570256],
+              [111.44631, 38.56362],
+              [111.450779, 38.530306],
+              [111.468397, 38.510384],
+              [111.503633, 38.483873],
+              [111.505846, 38.518975],
+              [111.522422, 38.524763],
+              [111.551757, 38.506849],
+              [111.565599, 38.511907],
+              [111.609557, 38.542184],
+              [111.684368, 38.566603],
+              [111.706325, 38.598318],
+              [111.719256, 38.602335],
+              [111.749762, 38.581884],
+              [111.769029, 38.537129],
+              [111.725375, 38.514161],
+              [111.728759, 38.500024],
+              [111.793546, 38.450827],
+              [111.79372, 38.429723],
+              [111.782828, 38.421],
+              [111.793763, 38.402572],
+              [111.78886, 38.387803],
+              [111.823314, 38.369062],
+              [111.821535, 38.336758],
+              [111.841149, 38.320997],
+              [111.842364, 38.304072],
+              [111.777274, 38.292705],
+              [111.779183, 38.248015],
+              [111.800272, 38.235416],
+              [111.81763, 38.214311],
+              [111.849611, 38.214984],
+              [111.847658, 38.229788],
+              [111.869138, 38.220062],
+              [111.87287, 38.193383],
+              [111.898125, 38.198034],
+              [111.915136, 38.180713],
+              [111.951326, 38.167919],
+              [112.01173, 38.184202],
+              [112.046445, 38.171837],
+              [112.101381, 38.167368],
+              [112.134751, 38.140976],
+              [112.160353, 38.15004],
+              [112.214726, 38.132401],
+              [112.212166, 38.143671],
+              [112.236206, 38.142752],
+              [112.25148, 38.150101],
+              [112.267753, 38.182488],
+              [112.25148, 38.219572],
+              [112.220888, 38.250583],
+              [112.234036, 38.26159],
+              [112.269966, 38.267888],
+              [112.248009, 38.291728],
+              [112.274002, 38.31391],
+              [112.305202, 38.3067],
+              [112.319739, 38.310977],
+              [112.340611, 38.303034],
+              [112.36374, 38.278036],
+              [112.406483, 38.266787],
+              [112.433126, 38.280664],
+              [112.446926, 38.27608],
+              [112.458685, 38.249972],
+              [112.499606, 38.237312],
+              [112.524731, 38.249972],
+              [112.524947, 38.267826],
+              [112.562526, 38.239147],
+              [112.557536, 38.223426],
+              [112.569036, 38.21064],
+              [112.620761, 38.20654],
+              [112.648359, 38.227586],
+              [112.639984, 38.246425],
+              [112.681686, 38.235844],
+              [112.693879, 38.241471],
+              [112.748989, 38.242021],
+              [112.796115, 38.251011],
+              [112.822628, 38.287327],
+              [112.850834, 38.306089],
+              [112.911021, 38.321181],
+              [112.945129, 38.333887],
+              [112.972207, 38.357461],
+              [112.978238, 38.342255],
+              [113.00345, 38.343354],
+              [113.031135, 38.367597],
+              [113.039293, 38.381699],
+              [113.069365, 38.388108],
+              [113.083902, 38.399216],
+              [113.085551, 38.415753],
+              [113.121351, 38.421305],
+              [113.145695, 38.411664],
+              [113.203018, 38.415386],
+              [113.208572, 38.42045],
+              [113.284858, 38.451559],
+              [113.294492, 38.468022],
+              [113.333242, 38.485823],
+              [113.368174, 38.495941],
+              [113.416688, 38.517878],
+              [113.435087, 38.520681],
+              [113.458086, 38.510079],
+              [113.48486, 38.508556],
+              [113.517449, 38.519828],
+              [113.555548, 38.521046],
+              [113.562057, 38.558322],
+              [113.602804, 38.586876],
+              [113.604236, 38.616087],
+              [113.612871, 38.646016],
+              [113.632616, 38.65307],
+              [113.66707, 38.646989],
+              [113.702132, 38.651672],
+              [113.713805, 38.663712],
+              [113.709987, 38.698301],
+              [113.729036, 38.711974],
+              [113.745396, 38.701522],
+              [113.775641, 38.709847],
+              [113.780415, 38.728317],
+              [113.802936, 38.7633],
+              [113.83956, 38.758381],
+              [113.836566, 38.795959],
+              [113.853663, 38.810159],
+              [113.855529, 38.828967],
+              [113.835611, 38.842555],
+              [113.80133, 38.854866],
+              [113.776205, 38.885665],
+              [113.775121, 38.919056],
+              [113.767527, 38.959637],
+              [113.776726, 38.98694],
+              [113.806798, 38.989725],
+              [113.830534, 39.011813],
+              [113.884429, 39.051676],
+              [113.898012, 39.067639],
+              [113.930297, 39.063467],
+              [113.942881, 39.087467],
+              [113.961757, 39.100823],
+              [113.952514, 39.127468],
+              [113.940104, 39.20692],
+              [113.958589, 39.222908],
+              [113.967181, 39.281521],
+              [113.946873, 39.295805],
+              [113.942186, 39.30876],
+              [113.898185, 39.345083],
+              [113.899574, 39.373019],
+              [113.840602, 39.370913],
+              [113.791306, 39.378437],
+              [113.772777, 39.390715],
+              [113.766529, 39.405217],
+              [113.739234, 39.420859],
+              [113.698314, 39.418814],
+              [113.649496, 39.434634],
+              [113.599159, 39.424048],
+              [113.586141, 39.441249],
+              [113.577289, 39.438122],
+              [113.560842, 39.426815],
+              [113.561103, 39.404315],
+              [113.533895, 39.384877],
+              [113.515062, 39.346949],
+              [113.452879, 39.33912],
+              [113.449234, 39.321653],
+              [113.422677, 39.332194],
+              [113.380628, 39.30171],
+              [113.362403, 39.314303],
+              [113.258649, 39.314725],
+              [113.225105, 39.296407],
+              [113.212174, 39.295322],
+              [113.164701, 39.307073],
+              [113.130073, 39.325388],
+              [113.135888, 39.343818],
+              [113.10894, 39.361882],
+              [113.088632, 39.36128],
+              [113.054264, 39.349659],
+              [113.035995, 39.321171],
+              [112.967346, 39.297251],
+              [112.921089, 39.287126],
+              [112.898264, 39.246552],
+              [112.88633, 39.238953],
+              [112.872922, 39.212532],
+              [112.833694, 39.206256],
+              [112.819764, 39.174933],
+              [112.807701, 39.173303],
+              [112.780927, 39.192679],
+              [112.751029, 39.183384],
+              [112.747254, 39.158873],
+              [112.725947, 39.140032],
+              [112.686502, 39.126381],
+              [112.672399, 39.13224],
+              [112.655302, 39.119011],
+              [112.649965, 39.089764],
+              [112.638292, 39.08523],
+              [112.589344, 39.088434],
+              [112.577584, 39.113513],
+              [112.557797, 39.11889],
+              [112.546167, 39.138099],
+              [112.505377, 39.140455],
+              [112.457514, 39.112063],
+              [112.437726, 39.104389],
+              [112.405137, 39.114661],
+              [112.365345, 39.108075],
+              [112.331455, 39.12475],
+              [112.312579, 39.115446],
+              [112.314054, 39.100702],
+              [112.294397, 39.099071],
+              [112.289537, 39.112183],
+              [112.304681, 39.119131],
+              [112.298866, 39.129703],
+              [112.274088, 39.126985],
+              [112.2635, 39.175476],
+              [112.250265, 39.18272],
+              [112.218675, 39.175657],
+              [112.219716, 39.203601],
+              [112.201881, 39.211385],
+              [112.192248, 39.229966],
+              [112.194374, 39.249688],
+              [112.182831, 39.266631],
+              [112.134795, 39.27917],
+              [112.107977, 39.270128],
+              [112.100644, 39.255778],
+              [112.085412, 39.253125],
+              [112.068055, 39.282304],
+              [112.048528, 39.29707],
+              [112.064193, 39.304904],
+              [112.019671, 39.357065],
+              [112.023186, 39.368866],
+              [112.007174, 39.383011],
+              [112.012251, 39.40281],
+              [111.999753, 39.413219],
+              [111.987299, 39.448405],
+              [111.971287, 39.446481],
+              [111.951543, 39.46007],
+              [111.914875, 39.463256],
+              [111.895782, 39.497395],
+              [111.906023, 39.517582],
+              [111.943819, 39.525511],
+              [111.987516, 39.526112],
+              [112.002227, 39.537163],
+              [111.971721, 39.567064],
+              [111.942734, 39.585311],
+              [111.93028, 39.611411]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [106.967161, 39.054699],
+              [106.971496, 39.016983],
+              [106.954443, 38.941133],
+              [106.837386, 38.847544],
+              [106.755879, 38.748473],
+              [106.702697, 38.70827],
+              [106.662522, 38.601489],
+              [106.648648, 38.472675],
+              [106.601825, 38.392475],
+              [106.482455, 38.319555],
+              [106.555291, 38.263827],
+              [106.627838, 38.232529],
+              [106.728132, 38.204097],
+              [106.755879, 38.181235],
+              [106.945194, 38.131707],
+              [107.014851, 38.120356],
+              [107.068899, 38.139094],
+              [107.125839, 38.137112],
+              [107.138845, 38.160708],
+              [107.190293, 38.154044],
+              [107.242318, 38.110625],
+              [107.331629, 38.086473],
+              [107.39377, 38.015049],
+              [107.440015, 37.995016],
+              [107.41169, 37.949155],
+              [107.450132, 37.93326],
+              [107.492619, 37.94482],
+              [107.560541, 37.893686],
+              [107.650141, 37.86458],
+              [107.68338, 37.887721],
+              [107.741186, 37.845411],
+              [107.842636, 37.82895],
+              [107.884834, 37.808324],
+              [107.981949, 37.78733],
+              [107.993221, 37.735362],
+              [108.024436, 37.698763],
+              [108.013164, 37.665591],
+              [108.133979, 37.622065],
+              [108.19352, 37.638209],
+              [108.246412, 37.665773],
+              [108.301039, 37.640748],
+              [108.422432, 37.648909],
+              [108.532553, 37.690607],
+              [108.611169, 37.654168],
+              [108.777651, 37.683538],
+              [108.792103, 37.700213],
+              [108.784588, 37.7647],
+              [108.793259, 37.815923],
+              [108.798173, 37.933621],
+              [108.826787, 37.995197],
+              [108.797595, 38.047884],
+              [108.830544, 38.049868],
+              [108.882859, 38.013786],
+              [108.893842, 37.978228],
+              [108.935751, 37.921697],
+              [108.974193, 37.931814],
+              [108.982574, 37.963783],
+              [109.017547, 37.969923],
+              [109.038068, 38.021545],
+              [109.069573, 38.022988],
+              [109.050786, 38.054918],
+              [109.068995, 38.091159],
+              [108.947313, 38.170612],
+              [108.938931, 38.209496],
+              [108.975927, 38.245121],
+              [108.961764, 38.265086],
+              [109.00772, 38.359077],
+              [109.051364, 38.385294],
+              [109.052231, 38.428549],
+              [109.175936, 38.518745],
+              [109.196747, 38.552606],
+              [109.276808, 38.622965],
+              [109.331435, 38.597909],
+              [109.367564, 38.629765],
+              [109.328834, 38.660533],
+              [109.338661, 38.701478],
+              [109.40167, 38.716313],
+              [109.450805, 38.788832],
+              [109.517282, 38.833807],
+              [109.549653, 38.80579],
+              [109.624513, 38.854501],
+              [109.683764, 38.93561],
+              [109.665266, 38.981738],
+              [109.725384, 39.018406],
+              [109.757467, 39.053454],
+              [109.860073, 39.124386],
+              [109.922215, 39.106971],
+              [109.89389, 39.141264],
+              [109.960945, 39.191874],
+              [109.869033, 39.24972],
+              [109.902849, 39.271888],
+              [109.962679, 39.211931],
+              [110.010947, 39.208559],
+              [110.088697, 39.23482],
+              [110.193037, 39.280753],
+              [110.217604, 39.281108],
+              [110.18321, 39.356415],
+              [110.136676, 39.391826],
+              [110.132051, 39.446854],
+              [110.152572, 39.453928],
+              [110.243328, 39.42368],
+              [110.340443, 39.341714],
+              [110.391023, 39.311772],
+              [110.429175, 39.342069],
+              [110.430042, 39.379257],
+              [110.482646, 39.360665],
+              [110.524266, 39.382798],
+              [110.559239, 39.352165],
+              [110.566754, 39.319923],
+              [110.626294, 39.266746],
+              [110.702888, 39.273838],
+              [110.732947, 39.308405],
+              [110.738438, 39.348622],
+              [110.808095, 39.411825],
+              [110.890758, 39.508907],
+              [110.959258, 39.519509],
+              [111.017353, 39.552011],
+              [111.100883, 39.559428],
+              [111.136723, 39.58697],
+              [111.154932, 39.568963],
+              [111.148863, 39.532229],
+              [111.106375, 39.49848],
+              [111.088744, 39.459057],
+              [111.058396, 39.447738],
+              [111.064466, 39.40103],
+              [111.097993, 39.401915],
+              [111.108109, 39.356592],
+              [111.145394, 39.409524],
+              [111.172274, 39.423326],
+              [111.289332, 39.417133],
+              [111.352341, 39.426688],
+              [111.364191, 39.467368],
+              [111.426622, 39.503429],
+              [111.438183, 39.643078],
+              [111.442807, 39.669176],
+              [111.363613, 39.721694],
+              [111.370549, 39.789134],
+              [111.417373, 39.831184],
+              [111.415349, 39.865122],
+              [111.443096, 39.894299],
+              [111.427778, 39.946822],
+              [111.420263, 40.021758],
+              [111.361879, 40.10222],
+              [111.315634, 40.151256],
+              [111.237306, 40.16911],
+              [111.178055, 40.222995],
+              [111.114757, 40.256564],
+              [111.052326, 40.265653],
+              [111.033539, 40.288195],
+              [110.977178, 40.253418],
+              [110.965617, 40.276663],
+              [110.925442, 40.246775],
+              [110.854629, 40.263381],
+              [110.802603, 40.26041],
+              [110.768787, 40.273343],
+              [110.771099, 40.305489],
+              [110.718784, 40.301472],
+              [110.691904, 40.321208],
+              [110.642769, 40.301472],
+              [110.57687, 40.337621],
+              [110.556638, 40.334653],
+              [110.514439, 40.39172],
+              [110.496519, 40.366944],
+              [110.485247, 40.395558],
+              [110.434378, 40.396779],
+              [110.36501, 40.460765],
+              [110.313852, 40.444731],
+              [110.297955, 40.494042],
+              [110.252288, 40.486377],
+              [110.238415, 40.530087],
+              [110.178585, 40.550974],
+              [110.162688, 40.508671],
+              [110.091009, 40.527998],
+              [110.06066, 40.51703],
+              [110.027133, 40.531654],
+              [110.008346, 40.501009],
+              [109.973951, 40.521557],
+              [109.903139, 40.529391],
+              [109.861807, 40.50693],
+              [109.82799, 40.513721],
+              [109.730298, 40.495609],
+              [109.700817, 40.482371],
+              [109.602835, 40.552193],
+              [109.576822, 40.556543],
+              [109.512368, 40.513025],
+              [109.47306, 40.521905],
+              [109.435775, 40.50902],
+              [109.410051, 40.456583],
+              [109.402826, 40.476447],
+              [109.333458, 40.479235],
+              [109.319296, 40.501009],
+              [109.257732, 40.502924],
+              [109.227673, 40.485855],
+              [109.223915, 40.519119],
+              [109.172179, 40.516333],
+              [109.156282, 40.535832],
+              [109.084313, 40.529739],
+              [109.079111, 40.54906],
+              [109.000494, 40.542098],
+              [108.97795, 40.527476],
+              [108.880257, 40.559502],
+              [108.826209, 40.566984],
+              [108.774472, 40.550104],
+              [108.761466, 40.578466],
+              [108.776206, 40.612554],
+              [108.731406, 40.609424],
+              [108.690075, 40.640715],
+              [108.658282, 40.635327],
+              [108.604522, 40.656181],
+              [108.611748, 40.673555],
+              [108.562034, 40.728078],
+              [108.481105, 40.735889],
+              [108.48573, 40.754282],
+              [108.436595, 40.794003],
+              [108.344394, 40.805273],
+              [108.302195, 40.818447],
+              [108.234562, 40.820354],
+              [108.223579, 40.853625],
+              [108.171553, 40.86731],
+              [108.16664, 40.852759],
+              [108.03224, 40.855011],
+              [108.000736, 40.845309],
+              [107.968942, 40.867656],
+              [107.914605, 40.848774],
+              [107.855353, 40.874238],
+              [107.820669, 40.836472],
+              [107.758528, 40.861767],
+              [107.728179, 40.84219],
+              [107.735983, 40.814981],
+              [107.698409, 40.8129],
+              [107.696386, 40.768508],
+              [107.664015, 40.757405],
+              [107.613145, 40.778221],
+              [107.584531, 40.73988],
+              [107.529904, 40.702385],
+              [107.487127, 40.712108],
+              [107.454467, 40.680155],
+              [107.38481, 40.643669],
+              [107.285673, 40.649404],
+              [107.2507, 40.582641],
+              [107.226999, 40.559502],
+              [107.164858, 40.574291],
+              [107.1611, 40.525387],
+              [107.203299, 40.506059],
+              [107.155031, 40.451877],
+              [107.171795, 40.39015],
+              [107.089132, 40.359964],
+              [107.044332, 40.328891],
+              [107.022655, 40.258312],
+              [106.972363, 40.218798],
+              [106.866867, 40.16806],
+              [106.839409, 40.14793],
+              [106.823223, 40.108701],
+              [106.729288, 40.047362],
+              [106.720328, 39.915559],
+              [106.749809, 39.858442],
+              [106.769174, 39.866353],
+              [106.778134, 39.812537],
+              [106.863398, 39.843144],
+              [106.868023, 39.862837],
+              [106.933344, 39.915032],
+              [106.963403, 39.911343],
+              [106.966293, 39.859496],
+              [106.930743, 39.856859],
+              [106.878139, 39.805675],
+              [106.883631, 39.757447],
+              [106.900394, 39.755158],
+              [106.915713, 39.704075],
+              [106.887677, 39.677638],
+              [106.923806, 39.633201],
+              [106.940859, 39.584322],
+              [106.964848, 39.450037],
+              [106.958779, 39.340474],
+              [106.942882, 39.299189],
+              [107.052136, 39.238368],
+              [107.05965, 39.222933],
+              [107.136533, 39.280044],
+              [107.078438, 39.047406],
+              [107.060229, 39.061813],
+              [107.035372, 39.037089],
+              [106.993751, 39.036555],
+              [106.967161, 39.054699]
+            ]
+          ]
+        ]
+      },
+      "properties": {
+        "adcode": 150600,
+        "name": "鄂尔多斯市",
+        "center": [109.99029, 39.817179],
+        "centroid": [108.637375, 39.425314],
+        "childrenNum": 9,
+        "level": "city",
+        "parent": "{ \"adcode\": 150000 }",
+        "subFeatureIndex": 5,
+        "acroutes": [100000, 150000]
+      }
+    }
+  ]
+}

public/json/vent3.json

@@ -0,0 +1,2081 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 140931,
+        "name": "保德县",
+        "center": [111.085688, 39.022576],
+        "centroid": [111.135553, 38.881563],
+        "childrenNum": 0,
+        "level": "district",
+        "acroutes": [100000, 140000, 140900],
+        "parent": { "adcode": 140900 }
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [111.211481, 38.723989],
+              [111.213427, 38.725302],
+              [111.219662, 38.73224],
+              [111.223444, 38.737969],
+              [111.225667, 38.738413],
+              [111.229414, 38.735429],
+              [111.235895, 38.728172],
+              [111.243224, 38.730611],
+              [111.250354, 38.732395],
+              [111.253906, 38.734615],
+              [111.257922, 38.73817],
+              [111.260817, 38.74151],
+              [111.262372, 38.74507],
+              [111.258367, 38.748409],
+              [111.249245, 38.753309],
+              [111.24013, 38.754425],
+              [111.231023, 38.757554],
+              [111.224241, 38.76184],
+              [111.221221, 38.76699],
+              [111.219111, 38.771724],
+              [111.216463, 38.787678],
+              [111.223393, 38.79327],
+              [111.227132, 38.794349],
+              [111.235126, 38.797691],
+              [111.240853, 38.799785],
+              [111.242017, 38.803972],
+              [111.239841, 38.809613],
+              [111.238954, 38.817612],
+              [111.242974, 38.830878],
+              [111.24283, 38.836846],
+              [111.244533, 38.841739],
+              [111.246647, 38.844554],
+              [111.249921, 38.846418],
+              [111.256054, 38.848962],
+              [111.260727, 38.85047],
+              [111.264751, 38.851516],
+              [111.266708, 38.854449],
+              [111.268291, 38.859442],
+              [111.269314, 38.861492],
+              [111.271752, 38.862913],
+              [111.273885, 38.863361],
+              [111.278363, 38.863397],
+              [111.283125, 38.863032],
+              [111.284731, 38.861821],
+              [111.287544, 38.857048],
+              [111.288622, 38.854695],
+              [111.290251, 38.849017],
+              [111.291634, 38.847752],
+              [111.293607, 38.847345],
+              [111.29574, 38.84756],
+              [111.299948, 38.849547],
+              [111.302894, 38.848665],
+              [111.304952, 38.848675],
+              [111.307363, 38.850009],
+              [111.31284, 38.854851],
+              [111.315106, 38.856239],
+              [111.317579, 38.860725],
+              [111.3177, 38.864562],
+              [111.320748, 38.869563],
+              [111.323154, 38.87376],
+              [111.327186, 38.877436],
+              [111.326647, 38.88477],
+              [111.324557, 38.889258],
+              [111.320013, 38.894787],
+              [111.316208, 38.902425],
+              [111.317177, 38.909354],
+              [111.315192, 38.916383],
+              [111.314032, 38.920002],
+              [111.310352, 38.926035],
+              [111.310727, 38.932939],
+              [111.311324, 38.9345],
+              [111.314825, 38.939049],
+              [111.318025, 38.944164],
+              [111.319837, 38.94905],
+              [111.324666, 38.952508],
+              [111.330605, 38.95461],
+              [111.333683, 38.956745],
+              [111.33543, 38.959619],
+              [111.335629, 38.963797],
+              [111.333402, 38.967227],
+              [111.327999, 38.973042],
+              [111.325702, 38.976471],
+              [111.324502, 38.979905],
+              [111.323674, 38.98379],
+              [111.323799, 38.987118],
+              [111.321947, 38.988947],
+              [111.319291, 38.990647],
+              [111.316782, 38.992703],
+              [111.314485, 38.994974],
+              [111.314028, 38.99796],
+              [111.309941, 39.000704],
+              [111.307894, 39.003175],
+              [111.302003, 39.005787],
+              [111.298768, 39.006229],
+              [111.29492, 39.007423],
+              [111.291919, 39.00798],
+              [111.288387, 39.009055],
+              [111.282238, 39.010578],
+              [111.275366, 39.011986],
+              [111.273893, 39.012032],
+              [111.271272, 39.014452],
+              [111.271901, 39.015651],
+              [111.27469, 39.017697],
+              [111.276858, 39.020103],
+              [111.278417, 39.0224],
+              [111.279988, 39.028055],
+              [111.280781, 39.033364],
+              [111.279964, 39.036098],
+              [111.278327, 39.039634],
+              [111.275303, 39.044144],
+              [111.270779, 39.048208],
+              [111.268365, 39.049561],
+              [111.261809, 39.0528],
+              [111.256578, 39.055947],
+              [111.25396, 39.058612],
+              [111.249585, 39.060607],
+              [111.242459, 39.061623],
+              [111.240247, 39.063622],
+              [111.238911, 39.066587],
+              [111.237583, 39.068304],
+              [111.236333, 39.068933],
+              [111.234129, 39.068755],
+              [111.230383, 39.069265],
+              [111.225913, 39.0684],
+              [111.222686, 39.068564],
+              [111.219014, 39.069069],
+              [111.216146, 39.070613],
+              [111.212763, 39.073473],
+              [111.210102, 39.077184],
+              [111.206715, 39.078851],
+              [111.204207, 39.084069],
+              [111.201624, 39.091076],
+              [111.197272, 39.098005],
+              [111.190935, 39.106836],
+              [111.184966, 39.10949],
+              [111.17464, 39.112148],
+              [111.165576, 39.115284],
+              [111.162497, 39.108443],
+              [111.161087, 39.107032],
+              [111.158262, 39.105057],
+              [111.152992, 39.102708],
+              [111.149601, 39.101866],
+              [111.147339, 39.100546],
+              [111.14555, 39.098192],
+              [111.144987, 39.095456],
+              [111.145362, 39.09338],
+              [111.146538, 39.089843],
+              [111.146632, 39.087202],
+              [111.145784, 39.079848],
+              [111.14437, 39.074001],
+              [111.141072, 39.068441],
+              [111.138341, 39.064292],
+              [111.133677, 39.060857],
+              [111.12246, 39.051151],
+              [111.115955, 39.045588],
+              [111.108599, 39.041442],
+              [111.10218, 39.036913],
+              [111.094155, 39.030215],
+              [111.088943, 39.027098],
+              [111.085677, 39.025868],
+              [111.080368, 39.024542],
+              [111.072171, 39.023143],
+              [111.070394, 39.023189],
+              [111.067276, 39.022405],
+              [111.060857, 39.022705],
+              [111.052801, 39.022368],
+              [111.038237, 39.020121],
+              [111.028106, 39.016129],
+              [111.019624, 39.010044],
+              [111.01821, 39.008791],
+              [111.015811, 39.007647],
+              [111.010744, 39.004132],
+              [111.000086, 38.999701],
+              [110.998399, 38.998502],
+              [110.991229, 38.99021],
+              [110.983303, 38.980361],
+              [110.98206, 38.978158],
+              [110.980638, 38.974542],
+              [110.979974, 38.97228],
+              [110.980634, 38.970018],
+              [110.982627, 38.966721],
+              [110.984525, 38.964942],
+              [110.989346, 38.962306],
+              [110.994558, 38.960153],
+              [110.996695, 38.958342],
+              [110.997879, 38.956029],
+              [110.998965, 38.950405],
+              [111.001012, 38.94561],
+              [111.002466, 38.943812],
+              [111.005779, 38.939108],
+              [111.009896, 38.932606],
+              [111.011342, 38.927975],
+              [111.011776, 38.922321],
+              [111.011283, 38.90866],
+              [111.012975, 38.901607],
+              [111.015718, 38.896221],
+              [111.016702, 38.890016],
+              [111.015929, 38.884464],
+              [111.012326, 38.878308],
+              [111.004439, 38.87239],
+              [111.001008, 38.871184],
+              [110.998692, 38.869896],
+              [110.996035, 38.86801],
+              [110.994921, 38.866215],
+              [110.995007, 38.864425],
+              [110.996121, 38.862036],
+              [110.998434, 38.859396],
+              [111.00404, 38.853768],
+              [111.009185, 38.847807],
+              [111.01015, 38.845143],
+              [111.010107, 38.841598],
+              [111.008861, 38.837773],
+              [111.004982, 38.83288],
+              [111.00052, 38.829009],
+              [110.996492, 38.825111],
+              [110.993999, 38.820591],
+              [110.992085, 38.816218],
+              [110.98876, 38.811085],
+              [110.98844, 38.809165],
+              [110.9893, 38.80714],
+              [110.98887, 38.80479],
+              [110.98426, 38.795067],
+              [110.981595, 38.790769],
+              [110.979122, 38.787715],
+              [110.975852, 38.785118],
+              [110.971531, 38.783142],
+              [110.969687, 38.782845],
+              [110.965456, 38.782795],
+              [110.963635, 38.782155],
+              [110.95985, 38.780092],
+              [110.957724, 38.778428],
+              [110.956295, 38.776722],
+              [110.955392, 38.774769],
+              [110.955232, 38.773036],
+              [110.956478, 38.769354],
+              [110.957744, 38.767731],
+              [110.961706, 38.764323],
+              [110.964382, 38.760596],
+              [110.965026, 38.758249],
+              [110.965026, 38.755688],
+              [110.961428, 38.751612],
+              [110.958764, 38.745495],
+              [110.953681, 38.739721],
+              [110.949653, 38.734363],
+              [110.945273, 38.729481],
+              [110.949551, 38.724941],
+              [110.95306, 38.721811],
+              [110.954349, 38.719531],
+              [110.955064, 38.7129],
+              [110.954994, 38.709512],
+              [110.95413, 38.707796],
+              [110.950122, 38.704221],
+              [110.947762, 38.701401],
+              [110.945551, 38.697047],
+              [110.944949, 38.692176],
+              [110.945539, 38.689822],
+              [110.949477, 38.685844],
+              [110.959819, 38.683472],
+              [110.975383, 38.685088],
+              [110.980415, 38.685184],
+              [110.985928, 38.684323],
+              [110.989186, 38.682006],
+              [110.993367, 38.675243],
+              [110.998301, 38.669807],
+              [111.003106, 38.663234],
+              [111.006892, 38.660417],
+              [111.015565, 38.658695],
+              [111.025078, 38.659318],
+              [111.034017, 38.664654],
+              [111.043843, 38.667622],
+              [111.055005, 38.674166],
+              [111.061889, 38.679653],
+              [111.071284, 38.686324],
+              [111.080458, 38.688861],
+              [111.092393, 38.694644],
+              [111.1045, 38.699474],
+              [111.11458, 38.70477],
+              [111.116616, 38.704889],
+              [111.123652, 38.706523],
+              [111.131891, 38.713485],
+              [111.138685, 38.718259],
+              [111.146186, 38.721815],
+              [111.151754, 38.723911],
+              [111.166189, 38.726456],
+              [111.17557, 38.728469],
+              [111.187251, 38.730071],
+              [111.202457, 38.72932],
+              [111.207703, 38.726598],
+              [111.211481, 38.723989]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 610881,
+        "name": "神木市",
+        "center": [110.497005, 38.835641],
+        "centroid": [110.326696, 38.822458],
+        "childrenNum": 0,
+        "level": "district",
+        "acroutes": [100000, 610000, 610800],
+        "parent": { "adcode": 610800 }
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [109.68259, 38.940876],
+              [109.683777, 38.935531],
+              [109.676213, 38.932466],
+              [109.672425, 38.92813],
+              [109.676188, 38.924068],
+              [109.694371, 38.902581],
+              [109.699953, 38.895749],
+              [109.711949, 38.890476],
+              [109.716671, 38.885214],
+              [109.722379, 38.877521],
+              [109.730094, 38.872383],
+              [109.745222, 38.86505],
+              [109.760931, 38.852378],
+              [109.764694, 38.848747],
+              [109.778028, 38.83873],
+              [109.785024, 38.832678],
+              [109.820368, 38.811962],
+              [109.841355, 38.800504],
+              [109.857127, 38.78948],
+              [109.864867, 38.776819],
+              [109.872444, 38.762195],
+              [109.871471, 38.75826],
+              [109.865499, 38.7548],
+              [109.841292, 38.756899],
+              [109.836556, 38.760583],
+              [109.827086, 38.767128],
+              [109.822351, 38.768976],
+              [109.817022, 38.769676],
+              [109.812514, 38.771287],
+              [109.800101, 38.771374],
+              [109.795858, 38.769488],
+              [109.789873, 38.768764],
+              [109.783231, 38.766029],
+              [109.775338, 38.763569],
+              [109.771613, 38.763069],
+              [109.762989, 38.759347],
+              [109.758228, 38.756836],
+              [109.754718, 38.753913],
+              [109.752735, 38.749229],
+              [109.753695, 38.745681],
+              [109.752723, 38.738123],
+              [109.753897, 38.731613],
+              [109.753746, 38.726752],
+              [109.755703, 38.718167],
+              [109.756511, 38.717067],
+              [109.758039, 38.710955],
+              [109.759718, 38.706205],
+              [109.762256, 38.703168],
+              [109.76679, 38.701393],
+              [109.771235, 38.69813],
+              [109.775982, 38.692854],
+              [109.778016, 38.691479],
+              [109.782612, 38.694905],
+              [109.78736, 38.694205],
+              [109.788105, 38.693429],
+              [109.802008, 38.692392],
+              [109.814332, 38.686478],
+              [109.829649, 38.675212],
+              [109.834435, 38.667333],
+              [109.840408, 38.662705],
+              [109.848767, 38.659091],
+              [109.858149, 38.657877],
+              [109.86344, 38.655989],
+              [109.873189, 38.648158],
+              [109.882874, 38.637849],
+              [109.88963, 38.624323],
+              [109.89492, 38.616088],
+              [109.903103, 38.607176],
+              [109.909669, 38.602808],
+              [109.916589, 38.598902],
+              [109.925921, 38.595509],
+              [109.933434, 38.59432],
+              [109.941933, 38.594157],
+              [109.94865, 38.595171],
+              [109.958803, 38.597688],
+              [109.96624, 38.60113],
+              [109.9721, 38.604423],
+              [109.979259, 38.604297],
+              [110.014035, 38.606676],
+              [110.03064, 38.604448],
+              [110.04842, 38.600655],
+              [110.069116, 38.597187],
+              [110.10066, 38.592229],
+              [110.107504, 38.592367],
+              [110.11263, 38.591503],
+              [110.116911, 38.587935],
+              [110.12176, 38.570818],
+              [110.120611, 38.563266],
+              [110.118338, 38.553283],
+              [110.119475, 38.548285],
+              [110.127026, 38.545428],
+              [110.139982, 38.536708],
+              [110.146523, 38.532711],
+              [110.154213, 38.529704],
+              [110.160337, 38.528551],
+              [110.168444, 38.526534],
+              [110.181248, 38.520519],
+              [110.193913, 38.50509],
+              [110.19452, 38.506168],
+              [110.20053, 38.503924],
+              [110.204659, 38.503373],
+              [110.207324, 38.502119],
+              [110.211024, 38.504563],
+              [110.215203, 38.503999],
+              [110.218183, 38.504701],
+              [110.222275, 38.503811],
+              [110.235559, 38.503197],
+              [110.238627, 38.502107],
+              [110.241443, 38.500088],
+              [110.248161, 38.498283],
+              [110.256318, 38.497381],
+              [110.26536, 38.498897],
+              [110.269514, 38.498534],
+              [110.274527, 38.495538],
+              [110.277002, 38.495475],
+              [110.281763, 38.498133],
+              [110.287256, 38.500126],
+              [110.291852, 38.504513],
+              [110.294213, 38.506017],
+              [110.297572, 38.506143],
+              [110.298885, 38.504626],
+              [110.307649, 38.504689],
+              [110.308697, 38.505817],
+              [110.3139, 38.505754],
+              [110.319001, 38.506757],
+              [110.324671, 38.509502],
+              [110.331906, 38.508575],
+              [110.33875, 38.506757],
+              [110.340316, 38.505742],
+              [110.342703, 38.500314],
+              [110.342981, 38.495249],
+              [110.341932, 38.492429],
+              [110.337967, 38.486448],
+              [110.337033, 38.477395],
+              [110.335126, 38.471388],
+              [110.335897, 38.465494],
+              [110.337715, 38.462597],
+              [110.342273, 38.457078],
+              [110.348865, 38.45265],
+              [110.354307, 38.449677],
+              [110.362439, 38.442451],
+              [110.370925, 38.43668],
+              [110.378539, 38.43082],
+              [110.379752, 38.428813],
+              [110.380055, 38.419815],
+              [110.380711, 38.411683],
+              [110.382227, 38.407277],
+              [110.384007, 38.404352],
+              [110.388237, 38.399821],
+              [110.394665, 38.395138],
+              [110.408378, 38.3921],
+              [110.410335, 38.390217],
+              [110.410954, 38.384366],
+              [110.409237, 38.38173],
+              [110.402746, 38.376858],
+              [110.402064, 38.37476],
+              [110.403706, 38.372688],
+              [110.406029, 38.372048],
+              [110.413947, 38.373329],
+              [110.416611, 38.373015],
+              [110.417179, 38.370152],
+              [110.416359, 38.365141],
+              [110.41843, 38.363257],
+              [110.429832, 38.365819],
+              [110.43429, 38.364601],
+              [110.435893, 38.362064],
+              [110.435249, 38.358647],
+              [110.428582, 38.353862],
+              [110.428014, 38.348975],
+              [110.428658, 38.343197],
+              [110.431827, 38.341764],
+              [110.436992, 38.345759],
+              [110.441513, 38.347355],
+              [110.444076, 38.346915],
+              [110.446778, 38.34483],
+              [110.447889, 38.341664],
+              [110.445743, 38.337405],
+              [110.439012, 38.331512],
+              [110.438873, 38.327768],
+              [110.444821, 38.325053],
+              [110.451514, 38.323671],
+              [110.4551, 38.321133],
+              [110.457764, 38.316169],
+              [110.461186, 38.31128],
+              [110.461009, 38.308816],
+              [110.45265, 38.304605],
+              [110.451753, 38.301538],
+              [110.453294, 38.298685],
+              [110.457209, 38.297679],
+              [110.469962, 38.298936],
+              [110.473763, 38.298949],
+              [110.476326, 38.297654],
+              [110.478246, 38.291306],
+              [110.47764, 38.288703],
+              [110.475544, 38.287496],
+              [110.466086, 38.283913],
+              [110.464949, 38.281486],
+              [110.465303, 38.2796],
+              [110.469571, 38.273627],
+              [110.467475, 38.272395],
+              [110.460327, 38.274118],
+              [110.457764, 38.272584],
+              [110.457436, 38.270094],
+              [110.459267, 38.267075],
+              [110.462676, 38.266145],
+              [110.474761, 38.267],
+              [110.477324, 38.266019],
+              [110.477577, 38.263164],
+              [110.474622, 38.261252],
+              [110.469861, 38.260586],
+              [110.468434, 38.258385],
+              [110.474369, 38.24953],
+              [110.476718, 38.249441],
+              [110.485671, 38.251706],
+              [110.487691, 38.251379],
+              [110.490078, 38.248196],
+              [110.490899, 38.244875],
+              [110.489648, 38.243957],
+              [110.481617, 38.245403],
+              [110.479988, 38.243806],
+              [110.480342, 38.241466],
+              [110.482047, 38.240434],
+              [110.497288, 38.234936],
+              [110.502162, 38.236358],
+              [110.504612, 38.233754],
+              [110.504044, 38.23208],
+              [110.500243, 38.228884],
+              [110.500104, 38.226707],
+              [110.502768, 38.225915],
+              [110.508766, 38.227286],
+              [110.512997, 38.229312],
+              [110.517795, 38.229702],
+              [110.521747, 38.224669],
+              [110.522871, 38.218918],
+              [110.519184, 38.216099],
+              [110.515876, 38.216426],
+              [110.516381, 38.215004],
+              [110.519462, 38.21328],
+              [110.522657, 38.209617],
+              [110.528339, 38.211795],
+              [110.532645, 38.212046],
+              [110.545929, 38.209882],
+              [110.552584, 38.209529],
+              [110.558228, 38.210524],
+              [110.562231, 38.212411],
+              [110.565413, 38.214752],
+              [110.567257, 38.217559],
+              [110.56905, 38.227827],
+              [110.567636, 38.238912],
+              [110.567977, 38.245743],
+              [110.571462, 38.258234],
+              [110.573634, 38.266899],
+              [110.572636, 38.279902],
+              [110.573962, 38.289231],
+              [110.577472, 38.297227],
+              [110.584127, 38.303713],
+              [110.591628, 38.307044],
+              [110.601313, 38.308188],
+              [110.617198, 38.306994],
+              [110.638842, 38.304756],
+              [110.651671, 38.305837],
+              [110.661104, 38.308728],
+              [110.668592, 38.313668],
+              [110.671395, 38.317539],
+              [110.675146, 38.324086],
+              [110.684515, 38.336236],
+              [110.69559, 38.347681],
+              [110.701613, 38.353322],
+              [110.706538, 38.356701],
+              [110.712195, 38.358509],
+              [110.719418, 38.358999],
+              [110.727411, 38.360557],
+              [110.731426, 38.360619],
+              [110.742791, 38.36396],
+              [110.746756, 38.36612],
+              [110.750317, 38.369499],
+              [110.753247, 38.376443],
+              [110.752438, 38.383751],
+              [110.755191, 38.393682],
+              [110.758967, 38.400423],
+              [110.768614, 38.411545],
+              [110.773981, 38.42624],
+              [110.775951, 38.435639],
+              [110.77763, 38.44087],
+              [110.781128, 38.445462],
+              [110.786495, 38.449865],
+              [110.792379, 38.452312],
+              [110.796837, 38.453478],
+              [110.804337, 38.452788],
+              [110.813821, 38.452449],
+              [110.820841, 38.451157],
+              [110.825059, 38.449389],
+              [110.829744, 38.44565],
+              [110.836765, 38.441586],
+              [110.840704, 38.43998],
+              [110.845288, 38.439867],
+              [110.850087, 38.441347],
+              [110.865, 38.449213],
+              [110.870972, 38.451659],
+              [110.874268, 38.453679],
+              [110.877046, 38.456877],
+              [110.877892, 38.459549],
+              [110.876945, 38.463287],
+              [110.873523, 38.470536],
+              [110.872677, 38.475238],
+              [110.87471, 38.491451],
+              [110.874432, 38.494648],
+              [110.87168, 38.499223],
+              [110.870139, 38.507271],
+              [110.871023, 38.510179],
+              [110.880392, 38.516471],
+              [110.883726, 38.516521],
+              [110.887944, 38.514816],
+              [110.894131, 38.514703],
+              [110.900559, 38.515731],
+              [110.902983, 38.516583],
+              [110.907668, 38.521083],
+              [110.909587, 38.526258],
+              [110.909587, 38.529829],
+              [110.911279, 38.534779],
+              [110.91162, 38.541357],
+              [110.91109, 38.546268],
+              [110.909057, 38.552018],
+              [110.908792, 38.560823],
+              [110.909436, 38.563178],
+              [110.915522, 38.568826],
+              [110.918414, 38.572133],
+              [110.920649, 38.578006],
+              [110.919904, 38.582063],
+              [110.917025, 38.582701],
+              [110.910193, 38.582914],
+              [110.905067, 38.584404],
+              [110.898664, 38.586858],
+              [110.896631, 38.588248],
+              [110.894333, 38.594808],
+              [110.894763, 38.597475],
+              [110.894017, 38.600354],
+              [110.890823, 38.604848],
+              [110.881327, 38.615199],
+              [110.880052, 38.618616],
+              [110.880797, 38.626938],
+              [110.885911, 38.633119],
+              [110.888373, 38.638024],
+              [110.890457, 38.644805],
+              [110.893651, 38.653437],
+              [110.896429, 38.657815],
+              [110.899624, 38.659954],
+              [110.909019, 38.664969],
+              [110.913716, 38.668696],
+              [110.916229, 38.673986],
+              [110.915598, 38.6774],
+              [110.91282, 38.682414],
+              [110.910471, 38.689454],
+              [110.910787, 38.695642],
+              [110.912921, 38.700768],
+              [110.915383, 38.70428],
+              [110.92104, 38.709843],
+              [110.92618, 38.713317],
+              [110.928048, 38.713917],
+              [110.921886, 38.716567],
+              [110.916103, 38.720903],
+              [110.912466, 38.727114],
+              [110.909903, 38.730613],
+              [110.905546, 38.73175],
+              [110.892477, 38.732525],
+              [110.883638, 38.736823],
+              [110.881794, 38.736823],
+              [110.879534, 38.735224],
+              [110.879218, 38.73115],
+              [110.876869, 38.729464],
+              [110.87293, 38.733737],
+              [110.872071, 38.739547],
+              [110.868977, 38.74352],
+              [110.872223, 38.743957],
+              [110.872879, 38.746081],
+              [110.871528, 38.747393],
+              [110.864596, 38.74723],
+              [110.852094, 38.745069],
+              [110.845932, 38.746793],
+              [110.843129, 38.748617],
+              [110.841298, 38.754563],
+              [110.838532, 38.75495],
+              [110.834972, 38.756537],
+              [110.832585, 38.759272],
+              [110.832901, 38.761308],
+              [110.838457, 38.763506],
+              [110.839038, 38.767028],
+              [110.842018, 38.770812],
+              [110.842422, 38.775857],
+              [110.854809, 38.778517],
+              [110.857688, 38.77808],
+              [110.861072, 38.779604],
+              [110.86183, 38.781589],
+              [110.858421, 38.784511],
+              [110.855138, 38.786121],
+              [110.850945, 38.789505],
+              [110.850617, 38.790729],
+              [110.855251, 38.797433],
+              [110.855895, 38.79958],
+              [110.853243, 38.803574],
+              [110.849607, 38.804935],
+              [110.842523, 38.805834],
+              [110.840212, 38.809466],
+              [110.83679, 38.817541],
+              [110.833444, 38.822546],
+              [110.833052, 38.827662],
+              [110.834088, 38.831767],
+              [110.836967, 38.833052],
+              [110.842649, 38.832067],
+              [110.852587, 38.838817],
+              [110.853105, 38.84221],
+              [110.852562, 38.846539],
+              [110.84799, 38.854461],
+              [110.843331, 38.860261],
+              [110.842548, 38.863915],
+              [110.842775, 38.869253],
+              [110.8415, 38.872533],
+              [110.838078, 38.874391],
+              [110.830678, 38.876124],
+              [110.813593, 38.880788],
+              [110.808176, 38.887932],
+              [110.802468, 38.891648],
+              [110.792644, 38.894228],
+              [110.775395, 38.903241],
+              [110.770837, 38.905809],
+              [110.765129, 38.907517],
+              [110.743713, 38.904662],
+              [110.737866, 38.908801],
+              [110.732007, 38.910085],
+              [110.710566, 38.922747],
+              [110.699416, 38.925314],
+              [110.693001, 38.931071],
+              [110.684225, 38.947105],
+              [110.675108, 38.953222],
+              [110.672418, 38.955701],
+              [110.671711, 38.957656],
+              [110.673239, 38.961766],
+              [110.67305, 38.964108],
+              [110.670688, 38.969339],
+              [110.666471, 38.97234],
+              [110.660612, 38.974096],
+              [110.655573, 38.976985],
+              [110.651419, 38.980496],
+              [110.649146, 38.985477],
+              [110.652505, 38.986112],
+              [110.654929, 38.989735],
+              [110.655977, 38.99398],
+              [110.650674, 39.000964],
+              [110.650611, 39.006839],
+              [110.653831, 39.008258],
+              [110.663289, 39.011444],
+              [110.668706, 39.014817],
+              [110.668807, 39.020865],
+              [110.670259, 39.023541],
+              [110.66887, 39.026055],
+              [110.664665, 39.02827],
+              [110.658301, 39.029676],
+              [110.657139, 39.03204],
+              [110.654374, 39.033247],
+              [110.649335, 39.031754],
+              [110.647454, 39.029477],
+              [110.643476, 39.030385],
+              [110.642819, 39.031355],
+              [110.641885, 39.039828],
+              [110.641153, 39.042802],
+              [110.638514, 39.046982],
+              [110.6335, 39.050228],
+              [110.625065, 39.050365],
+              [110.623209, 39.052517],
+              [110.625533, 39.054607],
+              [110.629283, 39.056572],
+              [110.626492, 39.060067],
+              [110.623954, 39.060988],
+              [110.617123, 39.060528],
+              [110.611617, 39.062132],
+              [110.610001, 39.066074],
+              [110.604836, 39.071173],
+              [110.602955, 39.072019],
+              [110.598093, 39.072205],
+              [110.594406, 39.068699],
+              [110.590239, 39.067691],
+              [110.578129, 39.07274],
+              [110.572283, 39.071683],
+              [110.569896, 39.077478],
+              [110.569921, 39.080077],
+              [110.571752, 39.083633],
+              [110.571247, 39.085212],
+              [110.566992, 39.08919],
+              [110.567408, 39.091639],
+              [110.571954, 39.095133],
+              [110.574151, 39.100988],
+              [110.575768, 39.102914],
+              [110.575199, 39.109365],
+              [110.572775, 39.11159],
+              [110.567194, 39.114436],
+              [110.564214, 39.114088],
+              [110.56213, 39.112709],
+              [110.557938, 39.10806],
+              [110.546384, 39.104916],
+              [110.543719, 39.105301],
+              [110.538971, 39.108035],
+              [110.537645, 39.110422],
+              [110.53512, 39.112137],
+              [110.535196, 39.113442],
+              [110.539666, 39.117667],
+              [110.537077, 39.121669],
+              [110.537696, 39.123657],
+              [110.542886, 39.125832],
+              [110.540764, 39.130342],
+              [110.542507, 39.133747],
+              [110.548278, 39.139599],
+              [110.54949, 39.141897],
+              [110.546207, 39.145152],
+              [110.541509, 39.146096],
+              [110.538441, 39.14868],
+              [110.533352, 39.150294],
+              [110.533643, 39.152978],
+              [110.535638, 39.154406],
+              [110.534552, 39.156132],
+              [110.529349, 39.157921],
+              [110.528112, 39.16084],
+              [110.52575, 39.163647],
+              [110.520851, 39.165311],
+              [110.511759, 39.163336],
+              [110.509638, 39.163634],
+              [110.504801, 39.169247],
+              [110.50297, 39.169707],
+              [110.49922, 39.165485],
+              [110.494497, 39.16351],
+              [110.472172, 39.188344],
+              [110.453534, 39.197084],
+              [110.438873, 39.198822],
+              [110.421776, 39.204904],
+              [110.410588, 39.214399],
+              [110.398466, 39.233372],
+              [110.39618, 39.237788],
+              [110.396685, 39.241113],
+              [110.40488, 39.246249],
+              [110.406168, 39.247886],
+              [110.405095, 39.256098],
+              [110.400675, 39.258442],
+              [110.397392, 39.262014],
+              [110.39325, 39.267867],
+              [110.390611, 39.275097],
+              [110.387896, 39.290508],
+              [110.38426, 39.29864],
+              [110.38681, 39.305866],
+              [110.386596, 39.310786],
+              [110.385232, 39.310514],
+              [110.381658, 39.315867],
+              [110.381078, 39.319089],
+              [110.378312, 39.320068],
+              [110.378009, 39.321654],
+              [110.374562, 39.322509],
+              [110.375206, 39.325508],
+              [110.372579, 39.328048],
+              [110.367996, 39.330055],
+              [110.359333, 39.33236],
+              [110.3499, 39.338851],
+              [110.340922, 39.341515],
+              [110.339331, 39.344302],
+              [110.332386, 39.347808],
+              [110.329393, 39.35166],
+              [110.325731, 39.35327],
+              [110.321905, 39.357382],
+              [110.314569, 39.361098],
+              [110.313268, 39.36459],
+              [110.307384, 39.368466],
+              [110.304593, 39.368751],
+              [110.304101, 39.370645],
+              [110.298267, 39.374756],
+              [110.295741, 39.377208],
+              [110.294491, 39.380761],
+              [110.292079, 39.380972],
+              [110.292761, 39.383522],
+              [110.286915, 39.386394],
+              [110.283631, 39.390368],
+              [110.283834, 39.39142],
+              [110.281018, 39.394169],
+              [110.276207, 39.396174],
+              [110.271395, 39.400246],
+              [110.265296, 39.40334],
+              [110.260321, 39.405135],
+              [110.257669, 39.407078],
+              [110.26464, 39.411187],
+              [110.276762, 39.420295],
+              [110.27555, 39.424799],
+              [110.269729, 39.425145],
+              [110.268138, 39.425752],
+              [110.243464, 39.42366],
+              [110.23864, 39.427026],
+              [110.231329, 39.435798],
+              [110.217148, 39.443294],
+              [110.211567, 39.442639],
+              [110.206187, 39.43748],
+              [110.20072, 39.439497],
+              [110.152457, 39.453993],
+              [110.145525, 39.457209],
+              [110.146611, 39.456133],
+              [110.145134, 39.453672],
+              [110.137254, 39.450728],
+              [110.133365, 39.448254],
+              [110.131698, 39.445113],
+              [110.132443, 39.440548],
+              [110.131445, 39.436416],
+              [110.125207, 39.431925],
+              [110.1257, 39.427014],
+              [110.125435, 39.422708],
+              [110.126432, 39.416842],
+              [110.132266, 39.403774],
+              [110.133744, 39.398761],
+              [110.136749, 39.391742],
+              [110.141876, 39.389477],
+              [110.146535, 39.388895],
+              [110.154566, 39.390158],
+              [110.158872, 39.389613],
+              [110.161878, 39.38731],
+              [110.163797, 39.384834],
+              [110.168002, 39.377406],
+              [110.168456, 39.374385],
+              [110.169921, 39.371822],
+              [110.174202, 39.369246],
+              [110.179973, 39.3595],
+              [110.183066, 39.356391],
+              [110.185289, 39.353097],
+              [110.18808, 39.346334],
+              [110.189797, 39.339248],
+              [110.191666, 39.335965],
+              [110.198939, 39.324963],
+              [110.20303, 39.31526],
+              [110.202664, 39.312645],
+              [110.205973, 39.304949],
+              [110.207614, 39.29678],
+              [110.209584, 39.289466],
+              [110.213132, 39.28421],
+              [110.21759, 39.281023],
+              [110.216327, 39.279213],
+              [110.210834, 39.28147],
+              [110.200669, 39.280515],
+              [110.19332, 39.280738],
+              [110.186994, 39.275245],
+              [110.184771, 39.274328],
+              [110.174745, 39.272083],
+              [110.168595, 39.269603],
+              [110.165312, 39.266912],
+              [110.162408, 39.26566],
+              [110.160867, 39.263775],
+              [110.15641, 39.26215],
+              [110.152142, 39.261518],
+              [110.14281, 39.261319],
+              [110.138757, 39.258603],
+              [110.132847, 39.255874],
+              [110.124425, 39.250715],
+              [110.11758, 39.24904],
+              [110.110787, 39.249697],
+              [110.107845, 39.248593],
+              [110.103362, 39.245021],
+              [110.09826, 39.243098],
+              [110.095735, 39.240257],
+              [110.090394, 39.236883],
+              [110.088563, 39.234079],
+              [110.087868, 39.230456],
+              [110.086567, 39.228831],
+              [110.082514, 39.228607],
+              [110.077173, 39.231027],
+              [110.073548, 39.230059],
+              [110.067942, 39.226609],
+              [110.06082, 39.223842],
+              [110.051008, 39.221472],
+              [110.048584, 39.21909],
+              [110.046324, 39.21868],
+              [110.041134, 39.216434],
+              [110.037131, 39.216012],
+              [110.023506, 39.213803],
+              [110.019276, 39.213604],
+              [110.011005, 39.208578],
+              [110.009199, 39.208628],
+              [110.005916, 39.210415],
+              [110.003706, 39.210638],
+              [109.997455, 39.208305],
+              [109.992935, 39.210477],
+              [109.98825, 39.210415],
+              [109.979625, 39.211842],
+              [109.974827, 39.211693],
+              [109.972339, 39.210589],
+              [109.966076, 39.21106],
+              [109.964372, 39.212574],
+              [109.962679, 39.211917],
+              [109.957174, 39.218494],
+              [109.955621, 39.221199],
+              [109.952085, 39.223222],
+              [109.949143, 39.227242],
+              [109.947021, 39.229141],
+              [109.946655, 39.231225],
+              [109.943726, 39.234997],
+              [109.941263, 39.239947],
+              [109.938334, 39.241634],
+              [109.935897, 39.245455],
+              [109.931982, 39.246894],
+              [109.932033, 39.248742],
+              [109.926161, 39.254758],
+              [109.922751, 39.256333],
+              [109.921792, 39.258095],
+              [109.919418, 39.258603],
+              [109.916829, 39.260972],
+              [109.913508, 39.262646],
+              [109.907864, 39.269678],
+              [109.902737, 39.27191],
+              [109.89862, 39.270112],
+              [109.896575, 39.266677],
+              [109.88521, 39.263589],
+              [109.880045, 39.257561],
+              [109.879098, 39.255316],
+              [109.879363, 39.250342],
+              [109.87805, 39.248916],
+              [109.871332, 39.252488],
+              [109.868984, 39.249722],
+              [109.870954, 39.246584],
+              [109.871635, 39.243507],
+              [109.875424, 39.238483],
+              [109.882167, 39.233136],
+              [109.885551, 39.232119],
+              [109.892761, 39.231821],
+              [109.897231, 39.234079],
+              [109.90011, 39.23295],
+              [109.904189, 39.230109],
+              [109.910755, 39.226833],
+              [109.918344, 39.217377],
+              [109.927979, 39.210229],
+              [109.937904, 39.205264],
+              [109.943233, 39.201342],
+              [109.953234, 39.196836],
+              [109.960861, 39.191796],
+              [109.961543, 39.189412],
+              [109.960457, 39.186706],
+              [109.943006, 39.174289],
+              [109.939546, 39.173569],
+              [109.93303, 39.169533],
+              [109.928623, 39.16813],
+              [109.92356, 39.165683],
+              [109.92212, 39.161448],
+              [109.902838, 39.149462],
+              [109.901487, 39.148344],
+              [109.893342, 39.146941],
+              [109.893898, 39.141214],
+              [109.909126, 39.12608],
+              [109.922107, 39.107041],
+              [109.919165, 39.104232],
+              [109.89093, 39.103971],
+              [109.885766, 39.109241],
+              [109.882091, 39.116773],
+              [109.873972, 39.120613],
+              [109.860132, 39.124453],
+              [109.851507, 39.1228],
+              [109.841885, 39.11558],
+              [109.840332, 39.111217],
+              [109.837807, 39.107489],
+              [109.8334, 39.103635],
+              [109.81533, 39.096189],
+              [109.805266, 39.085697],
+              [109.793333, 39.074058],
+              [109.791641, 39.073971],
+              [109.789898, 39.072019],
+              [109.781602, 39.066647],
+              [109.776361, 39.061933],
+              [109.769694, 39.060751],
+              [109.765678, 39.059458],
+              [109.762395, 39.057505],
+              [109.757597, 39.0534],
+              [109.752293, 39.048101],
+              [109.74795, 39.042118],
+              [109.737772, 39.03204],
+              [109.734943, 39.02863],
+              [109.731079, 39.025457],
+              [109.725346, 39.018376],
+              [109.704814, 39.016983],
+              [109.694624, 38.995175],
+              [109.691265, 38.99266],
+              [109.674407, 38.996918],
+              [109.672033, 38.997055],
+              [109.665429, 38.983547],
+              [109.665315, 38.981729],
+              [109.680228, 38.97239],
+              [109.685368, 38.968268],
+              [109.684332, 38.963834],
+              [109.679092, 38.948401],
+              [109.68259, 38.940876]
+            ]
+          ],
+          [
+            [
+              [109.834081, 38.656001],
+              [109.826833, 38.660029],
+              [109.818941, 38.66198],
+              [109.810758, 38.661267],
+              [109.805455, 38.657902],
+              [109.802172, 38.652374],
+              [109.800063, 38.64483],
+              [109.801566, 38.6394],
+              [109.805202, 38.632056],
+              [109.810594, 38.627902],
+              [109.818941, 38.624786],
+              [109.828967, 38.626963],
+              [109.834991, 38.632994],
+              [109.838602, 38.64144],
+              [109.838009, 38.648996],
+              [109.834081, 38.656001]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 150627,
+        "name": "伊金霍洛旗",
+        "center": [109.787402, 39.604312],
+        "centroid": [109.699451, 39.417895],
+        "childrenNum": 0,
+        "level": "district",
+        "acroutes": [100000, 150000, 150600],
+        "parent": { "adcode": 150600 }
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [109.677, 39.746438],
+              [109.6727, 39.745353],
+              [109.668285, 39.745326],
+              [109.663627, 39.742705],
+              [109.660698, 39.742793],
+              [109.653369, 39.744426],
+              [109.648097, 39.745062],
+              [109.644596, 39.744364],
+              [109.638739, 39.744656],
+              [109.632895, 39.74372],
+              [109.625594, 39.744347],
+              [109.622651, 39.745344],
+              [109.619736, 39.745097],
+              [109.611092, 39.746394],
+              [109.606721, 39.745803],
+              [109.600877, 39.746562],
+              [109.590747, 39.749545],
+              [109.588761, 39.749192],
+              [109.585161, 39.746536],
+              [109.580089, 39.744435],
+              [109.56843, 39.74109],
+              [109.559572, 39.739951],
+              [109.554614, 39.739916],
+              [109.536598, 39.737347],
+              [109.522382, 39.735484],
+              [109.516553, 39.734019],
+              [109.512667, 39.732156],
+              [109.510481, 39.730029],
+              [109.506709, 39.730241],
+              [109.497636, 39.727548],
+              [109.492807, 39.727001],
+              [109.482049, 39.728546],
+              [109.467304, 39.729985],
+              [109.452431, 39.727354],
+              [109.448373, 39.727857],
+              [109.440515, 39.73032],
+              [109.434443, 39.730868],
+              [109.421098, 39.730126],
+              [109.414855, 39.725579],
+              [109.405768, 39.717536],
+              [109.403254, 39.717156],
+              [109.395367, 39.719999],
+              [109.389738, 39.720812],
+              [109.379994, 39.719946],
+              [109.365706, 39.722339],
+              [109.354833, 39.728051],
+              [109.34949, 39.731883],
+              [109.346218, 39.735687],
+              [109.346432, 39.742087],
+              [109.345804, 39.747745],
+              [109.343932, 39.754399],
+              [109.34126, 39.758882],
+              [109.33856, 39.7613],
+              [109.330873, 39.766806],
+              [109.328059, 39.772056],
+              [109.326744, 39.779766],
+              [109.327559, 39.782633],
+              [109.327845, 39.787547],
+              [109.302284, 39.800618],
+              [109.297412, 39.800186],
+              [109.292569, 39.800468],
+              [109.283339, 39.802391],
+              [109.280267, 39.802593],
+              [109.274981, 39.801958],
+              [109.261851, 39.802973],
+              [109.258351, 39.802091],
+              [109.254879, 39.79933],
+              [109.253421, 39.796032],
+              [109.251807, 39.790167],
+              [109.251535, 39.784098],
+              [109.248006, 39.77854],
+              [109.241577, 39.772726],
+              [109.236791, 39.764618],
+              [109.244377, 39.763435],
+              [109.246192, 39.761538],
+              [109.248264, 39.757611],
+              [109.248978, 39.752016],
+              [109.25185, 39.747515],
+              [109.25465, 39.745247],
+              [109.256708, 39.740489],
+              [109.257593, 39.730373],
+              [109.25655, 39.725924],
+              [109.258193, 39.722251],
+              [109.261794, 39.7166],
+              [109.262008, 39.709403],
+              [109.265837, 39.700607],
+              [109.26818, 39.697966],
+              [109.270638, 39.691298],
+              [109.271024, 39.688551],
+              [109.270052, 39.684779],
+              [109.266223, 39.682879],
+              [109.253964, 39.681819],
+              [109.249592, 39.680556],
+              [109.242477, 39.677163],
+              [109.238177, 39.677207],
+              [109.229119, 39.676289],
+              [109.225204, 39.676448],
+              [109.207516, 39.675467],
+              [109.199029, 39.672825],
+              [109.197829, 39.671588],
+              [109.197443, 39.666728],
+              [109.198072, 39.664378],
+              [109.204744, 39.658121],
+              [109.213002, 39.653137],
+              [109.212631, 39.62172],
+              [109.209488, 39.599708],
+              [109.207702, 39.595905],
+              [109.202144, 39.591898],
+              [109.1939, 39.589978],
+              [109.169383, 39.588554],
+              [109.165582, 39.587395],
+              [109.162882, 39.588616],
+              [109.151424, 39.595348],
+              [109.148438, 39.59571],
+              [109.144494, 39.593596],
+              [109.140937, 39.592897],
+              [109.122306, 39.59265],
+              [109.119277, 39.591765],
+              [109.112833, 39.588625],
+              [109.097503, 39.57999],
+              [109.092731, 39.578247],
+              [109.088645, 39.575549],
+              [109.087245, 39.573611],
+              [109.084473, 39.562497],
+              [109.083015, 39.558789],
+              [109.077515, 39.554275],
+              [109.073714, 39.552656],
+              [109.072186, 39.542361],
+              [109.069771, 39.530791],
+              [109.069157, 39.525186],
+              [109.066985, 39.514967],
+              [109.065085, 39.511841],
+              [109.058541, 39.504641],
+              [109.039296, 39.498388],
+              [109.038196, 39.496457],
+              [109.039796, 39.494242],
+              [109.049369, 39.472828],
+              [109.058527, 39.451275],
+              [109.061056, 39.448997],
+              [109.066256, 39.445868],
+              [109.068985, 39.441214],
+              [109.069857, 39.435939],
+              [109.068557, 39.432464],
+              [109.065513, 39.427401],
+              [109.063242, 39.424679],
+              [109.056669, 39.42091],
+              [109.045468, 39.416698],
+              [109.038167, 39.41511],
+              [109.018494, 39.405842],
+              [109.01645, 39.403802],
+              [109.009407, 39.399154],
+              [109.017322, 39.394826],
+              [109.026594, 39.390541],
+              [109.032381, 39.3874],
+              [109.043368, 39.379442],
+              [109.046468, 39.377986],
+              [109.052812, 39.376851],
+              [109.060398, 39.374064],
+              [109.064313, 39.375174],
+              [109.065899, 39.38008],
+              [109.081015, 39.385564],
+              [109.106418, 39.390452],
+              [109.138951, 39.385306],
+              [109.140908, 39.382077],
+              [109.144266, 39.367036],
+              [109.140079, 39.356519],
+              [109.139365, 39.353324],
+              [109.138436, 39.343719],
+              [109.138551, 39.340683],
+              [109.141322, 39.334717],
+              [109.144066, 39.331885],
+              [109.152481, 39.32542],
+              [109.156267, 39.323538],
+              [109.16091, 39.320279],
+              [109.170583, 39.30947],
+              [109.173583, 39.30789],
+              [109.175941, 39.308493],
+              [109.180127, 39.313023],
+              [109.185656, 39.316371],
+              [109.191857, 39.326655],
+              [109.1946, 39.335649],
+              [109.196486, 39.340363],
+              [109.196415, 39.345921],
+              [109.197729, 39.352356],
+              [109.199601, 39.358569],
+              [109.201944, 39.361001],
+              [109.210888, 39.3674],
+              [109.21366, 39.370107],
+              [109.226633, 39.376584],
+              [109.242477, 39.384109],
+              [109.246849, 39.384978],
+              [109.251836, 39.384055],
+              [109.264351, 39.378661],
+              [109.281082, 39.371837],
+              [109.284711, 39.369565],
+              [109.293569, 39.365865],
+              [109.302113, 39.363495],
+              [109.307828, 39.360691],
+              [109.317801, 39.356998],
+              [109.321158, 39.35541],
+              [109.32433, 39.348291],
+              [109.325787, 39.346737],
+              [109.330916, 39.337753],
+              [109.331145, 39.334042],
+              [109.330559, 39.330215],
+              [109.32663, 39.313121],
+              [109.315086, 39.29413],
+              [109.30497, 39.281087],
+              [109.305585, 39.275107],
+              [109.3155, 39.268531],
+              [109.334074, 39.251013],
+              [109.354519, 39.235171],
+              [109.367892, 39.230805],
+              [109.372107, 39.225452],
+              [109.385109, 39.226652],
+              [109.392409, 39.231552],
+              [109.394195, 39.241839],
+              [109.393767, 39.252391],
+              [109.379808, 39.26798],
+              [109.383037, 39.274396],
+              [109.398253, 39.279559],
+              [109.413012, 39.278564],
+              [109.445144, 39.274254],
+              [109.471147, 39.251706],
+              [109.474619, 39.250035],
+              [109.475834, 39.248293],
+              [109.476262, 39.241439],
+              [109.479834, 39.23766],
+              [109.486378, 39.23429],
+              [109.490507, 39.232779],
+              [109.50228, 39.230591],
+              [109.506852, 39.228804],
+              [109.510795, 39.22482],
+              [109.518053, 39.219494],
+              [109.522511, 39.214718],
+              [109.527183, 39.21148],
+              [109.528897, 39.209604],
+              [109.534883, 39.205699],
+              [109.539584, 39.19989],
+              [109.537212, 39.196901],
+              [109.537698, 39.193636],
+              [109.536569, 39.189455],
+              [109.539155, 39.187987],
+              [109.540827, 39.184677],
+              [109.543442, 39.18126],
+              [109.542084, 39.17811],
+              [109.533698, 39.174916],
+              [109.534212, 39.169478],
+              [109.533812, 39.166675],
+              [109.532312, 39.164486],
+              [109.529397, 39.163498],
+              [109.522825, 39.165865],
+              [109.51791, 39.166746],
+              [109.515138, 39.165589],
+              [109.510509, 39.161442],
+              [109.509438, 39.159599],
+              [109.510823, 39.154232],
+              [109.511581, 39.148009],
+              [109.511709, 39.142971],
+              [109.512967, 39.13177],
+              [109.515353, 39.128627],
+              [109.528468, 39.12299],
+              [109.532755, 39.120336],
+              [109.534998, 39.118109],
+              [109.54587, 39.109247],
+              [109.548999, 39.106076],
+              [109.551828, 39.10197],
+              [109.553128, 39.098549],
+              [109.552643, 39.096491],
+              [109.554314, 39.091404],
+              [109.5547, 39.084882],
+              [109.553643, 39.082138],
+              [109.5502, 39.076845],
+              [109.54247, 39.06861],
+              [109.538584, 39.063272],
+              [109.533555, 39.061525],
+              [109.527283, 39.06017],
+              [109.51771, 39.059483],
+              [109.514052, 39.058833],
+              [109.510423, 39.057095],
+              [109.509666, 39.053306],
+              [109.511552, 39.050552],
+              [109.511852, 39.045987],
+              [109.513381, 39.040843],
+              [109.521196, 39.034816],
+              [109.526211, 39.028815],
+              [109.52634, 39.022822],
+              [109.519024, 39.017747],
+              [109.492678, 39.004101],
+              [109.486892, 38.998909],
+              [109.484435, 38.991789],
+              [109.485406, 38.985329],
+              [109.487435, 38.981814],
+              [109.487421, 38.979976],
+              [109.490464, 38.977772],
+              [109.493921, 38.97339],
+              [109.493164, 38.969329],
+              [109.489964, 38.963483],
+              [109.487664, 38.960636],
+              [109.48412, 38.958038],
+              [109.483163, 38.956164],
+              [109.486621, 38.953406],
+              [109.492436, 38.953914],
+              [109.495507, 38.955887],
+              [109.506037, 38.956789],
+              [109.509695, 38.954155],
+              [109.514252, 38.948326],
+              [109.516724, 38.94038],
+              [109.531583, 38.928192],
+              [109.541913, 38.918422],
+              [109.550071, 38.915457],
+              [109.552757, 38.918779],
+              [109.555772, 38.924923],
+              [109.560987, 38.932692],
+              [109.569173, 38.935835],
+              [109.573931, 38.936469],
+              [109.57656, 38.936121],
+              [109.587547, 38.936121],
+              [109.591862, 38.937559],
+              [109.596848, 38.940594],
+              [109.599848, 38.945344],
+              [109.602691, 38.948674],
+              [109.609064, 38.954227],
+              [109.613693, 38.957217],
+              [109.617708, 38.963171],
+              [109.622994, 38.968722],
+              [109.623508, 38.969874],
+              [109.627409, 38.971944],
+              [109.632024, 38.970918],
+              [109.638567, 38.966866],
+              [109.641425, 38.962519],
+              [109.653569, 38.951049],
+              [109.659884, 38.948835],
+              [109.668114, 38.94371],
+              [109.672228, 38.941648],
+              [109.682587, 38.94088],
+              [109.679086, 38.948406],
+              [109.68433, 38.963831],
+              [109.685358, 38.968267],
+              [109.680229, 38.972381],
+              [109.665313, 38.981725],
+              [109.665428, 38.983545],
+              [109.672028, 38.997053],
+              [109.6744, 38.99691],
+              [109.691273, 38.992664],
+              [109.694617, 38.99518],
+              [109.704818, 39.01698],
+              [109.725349, 39.018372],
+              [109.731078, 39.025462],
+              [109.73495, 39.028636],
+              [109.737779, 39.032034],
+              [109.747952, 39.042118],
+              [109.752295, 39.0481],
+              [109.757596, 39.053404],
+              [109.762396, 39.057505],
+              [109.765682, 39.059466],
+              [109.769697, 39.060749],
+              [109.776355, 39.061935],
+              [109.781598, 39.066649],
+              [109.789899, 39.072024],
+              [109.791643, 39.073975],
+              [109.793328, 39.074055],
+              [109.805258, 39.085693],
+              [109.815331, 39.096188],
+              [109.833405, 39.103636],
+              [109.837805, 39.107484],
+              [109.840334, 39.111216],
+              [109.841891, 39.11558],
+              [109.851507, 39.122803],
+              [109.860136, 39.124459],
+              [109.873967, 39.120621],
+              [109.882096, 39.116773],
+              [109.885768, 39.109247],
+              [109.890926, 39.103974],
+              [109.919172, 39.104232],
+              [109.922101, 39.107038],
+              [109.909128, 39.12608],
+              [109.893898, 39.141217],
+              [109.89334, 39.146941],
+              [109.901484, 39.148339],
+              [109.902841, 39.149469],
+              [109.922115, 39.161451],
+              [109.923558, 39.165687],
+              [109.928616, 39.168126],
+              [109.933031, 39.169532],
+              [109.939546, 39.173572],
+              [109.943018, 39.174284],
+              [109.960463, 39.186706],
+              [109.961548, 39.18941],
+              [109.960863, 39.191804],
+              [109.953233, 39.196839],
+              [109.943232, 39.20134],
+              [109.937903, 39.205263],
+              [109.927987, 39.210235],
+              [109.918343, 39.217377],
+              [109.910757, 39.22683],
+              [109.904184, 39.230111],
+              [109.900113, 39.232948],
+              [109.897241, 39.234077],
+              [109.892769, 39.231819],
+              [109.885554, 39.232121],
+              [109.882168, 39.233143],
+              [109.875424, 39.238487],
+              [109.871638, 39.243501],
+              [109.870952, 39.246586],
+              [109.86898, 39.249724],
+              [109.870009, 39.251848],
+              [109.871766, 39.252373],
+              [109.877624, 39.248853],
+              [109.879367, 39.250346],
+              [109.87911, 39.255324],
+              [109.880039, 39.257564],
+              [109.885211, 39.26359],
+              [109.896584, 39.266674],
+              [109.898612, 39.270122],
+              [109.902741, 39.271917],
+              [109.907871, 39.269678],
+              [109.9135, 39.262639],
+              [109.916829, 39.260977],
+              [109.919429, 39.258613],
+              [109.921787, 39.258097],
+              [109.922758, 39.256328],
+              [109.928173, 39.253182],
+              [109.932031, 39.248746],
+              [109.931988, 39.246897],
+              [109.935903, 39.245457],
+              [109.938331, 39.241643],
+              [109.94146, 39.239741],
+              [109.943718, 39.235002],
+              [109.945218, 39.233766],
+              [109.947833, 39.227879],
+              [109.94939, 39.22707],
+              [109.952076, 39.22322],
+              [109.955619, 39.221192],
+              [109.957176, 39.218489],
+              [109.962677, 39.211916],
+              [109.964635, 39.21261],
+              [109.966078, 39.211062],
+              [109.972335, 39.210591],
+              [109.974821, 39.211694],
+              [109.979622, 39.211845],
+              [109.988252, 39.210422],
+              [109.992924, 39.210475],
+              [109.997467, 39.208305],
+              [110.003053, 39.210573],
+              [110.005597, 39.210475],
+              [110.009197, 39.208625],
+              [110.011011, 39.208581],
+              [110.018898, 39.213517],
+              [110.023513, 39.213802],
+              [110.037129, 39.216007],
+              [110.041129, 39.216425],
+              [110.04633, 39.218675],
+              [110.048587, 39.219085],
+              [110.051002, 39.221468],
+              [110.060832, 39.223842],
+              [110.067932, 39.226608],
+              [110.073547, 39.230058],
+              [110.077176, 39.231027],
+              [110.082506, 39.228609],
+              [110.086563, 39.22884],
+              [110.087878, 39.230449],
+              [110.088564, 39.234086],
+              [110.090392, 39.236887],
+              [110.095736, 39.240265],
+              [110.098265, 39.243101],
+              [110.103365, 39.245021],
+              [110.107837, 39.248595],
+              [110.110795, 39.249697],
+              [110.117581, 39.249031],
+              [110.124425, 39.250711],
+              [110.132854, 39.255866],
+              [110.138755, 39.258604],
+              [110.142813, 39.261324],
+              [110.152143, 39.26151],
+              [110.159029, 39.262826],
+              [110.162415, 39.265661],
+              [110.165315, 39.266914],
+              [110.168602, 39.269607],
+              [110.174074, 39.271802],
+              [110.186989, 39.275241],
+              [110.193319, 39.280741],
+              [110.200663, 39.28051],
+              [110.210835, 39.281461],
+              [110.216322, 39.279213],
+              [110.217593, 39.281025],
+              [110.213135, 39.284215],
+              [110.209578, 39.289475],
+              [110.207606, 39.296786],
+              [110.205977, 39.30495],
+              [110.202663, 39.312641],
+              [110.202777, 39.316318],
+              [110.198948, 39.324959],
+              [110.191676, 39.335969],
+              [110.189804, 39.339254],
+              [110.188075, 39.346329],
+              [110.185289, 39.353102],
+              [110.183075, 39.356386],
+              [110.179974, 39.359493],
+              [110.174202, 39.369246],
+              [110.169916, 39.371828],
+              [110.168459, 39.374393],
+              [110.168002, 39.37741],
+              [110.163801, 39.384836],
+              [110.161887, 39.387311],
+              [110.158872, 39.389609],
+              [110.154571, 39.390159],
+              [110.146528, 39.388891],
+              [110.14187, 39.389476],
+              [110.136755, 39.391747],
+              [110.133755, 39.398764],
+              [110.132269, 39.403776],
+              [110.126439, 39.416849],
+              [110.125425, 39.42271],
+              [110.125711, 39.427011],
+              [110.125211, 39.431932],
+              [110.13144, 39.436418],
+              [110.132454, 39.44054],
+              [110.131697, 39.445114],
+              [110.133369, 39.448261],
+              [110.137255, 39.450725],
+              [110.145142, 39.453668],
+              [110.146613, 39.456132],
+              [110.145527, 39.457205],
+              [110.152457, 39.453996],
+              [110.20072, 39.439503],
+              [110.206177, 39.437482],
+              [110.211578, 39.442632],
+              [110.21715, 39.443288],
+              [110.231323, 39.435797],
+              [110.238638, 39.42702],
+              [110.243453, 39.423659],
+              [110.268142, 39.425752],
+              [110.269728, 39.425149],
+              [110.275543, 39.424803],
+              [110.276757, 39.420298],
+              [110.264642, 39.411182],
+              [110.257669, 39.407084],
+              [110.262741, 39.403944],
+              [110.265299, 39.403341],
+              [110.2714, 39.400245],
+              [110.2762, 39.396174],
+              [110.280686, 39.394355],
+              [110.28383, 39.391428],
+              [110.28363, 39.390363],
+              [110.286916, 39.386398],
+              [110.292759, 39.383523],
+              [110.292088, 39.380968],
+              [110.294488, 39.380764],
+              [110.295731, 39.377206],
+              [110.298274, 39.374748],
+              [110.304103, 39.370639],
+              [110.304589, 39.368749],
+              [110.307161, 39.368554],
+              [110.312419, 39.365315],
+              [110.31389, 39.362102],
+              [110.316191, 39.360105],
+              [110.32102, 39.358055],
+              [110.325735, 39.353271],
+              [110.329392, 39.351664],
+              [110.332378, 39.347803],
+              [110.339336, 39.344305],
+              [110.340922, 39.341517],
+              [110.351352, 39.338286],
+              [110.354667, 39.335329],
+              [110.359339, 39.332355],
+              [110.370026, 39.329398],
+              [110.372583, 39.328049],
+              [110.375198, 39.325509],
+              [110.374569, 39.322508],
+              [110.378012, 39.321655],
+              [110.378312, 39.320066],
+              [110.38107, 39.319089],
+              [110.381655, 39.315865],
+              [110.385227, 39.310519],
+              [110.390971, 39.311762],
+              [110.398343, 39.316869],
+              [110.404015, 39.32146],
+              [110.40763, 39.323067],
+              [110.413374, 39.326965],
+              [110.415288, 39.32891],
+              [110.418088, 39.334575],
+              [110.421532, 39.337842],
+              [110.427432, 39.338756],
+              [110.429504, 39.34007],
+              [110.429133, 39.342077],
+              [110.426618, 39.344305],
+              [110.42256, 39.346418],
+              [110.416588, 39.348646],
+              [110.41886, 39.355569],
+              [110.419674, 39.360948],
+              [110.421803, 39.365359],
+              [110.424461, 39.368385],
+              [110.429318, 39.375821],
+              [110.430061, 39.379326],
+              [110.435948, 39.380923],
+              [110.438134, 39.396591],
+              [110.437905, 39.402188],
+              [110.435905, 39.408654],
+              [110.436048, 39.419358],
+              [110.434562, 39.422675],
+              [110.426904, 39.424785],
+              [110.420917, 39.426842],
+              [110.41886, 39.428784],
+              [110.421274, 39.436107],
+              [110.423189, 39.440115],
+              [110.423632, 39.443031],
+              [110.427089, 39.448926],
+              [110.427161, 39.454191],
+              [110.430476, 39.458073],
+              [110.429218, 39.462708],
+              [110.425889, 39.467857],
+              [110.422718, 39.47071],
+              [110.419017, 39.471978],
+              [110.412073, 39.472704],
+              [110.402472, 39.475726],
+              [110.390699, 39.475761],
+              [110.388042, 39.477755],
+              [110.387442, 39.481184],
+              [110.380841, 39.490716],
+              [110.380698, 39.491523],
+              [110.386599, 39.496855],
+              [110.387199, 39.499885],
+              [110.384956, 39.503941],
+              [110.385042, 39.505482],
+              [110.382727, 39.509937],
+              [110.378941, 39.513825],
+              [110.373683, 39.518262],
+              [110.37204, 39.524212],
+              [110.368554, 39.529923],
+              [110.365654, 39.532889],
+              [110.363268, 39.542653],
+              [110.363782, 39.54792],
+              [110.36051, 39.551231],
+              [110.361024, 39.552089],
+              [110.36784, 39.552284],
+              [110.371911, 39.554532],
+              [110.371454, 39.558931],
+              [110.375598, 39.563798],
+              [110.37204, 39.567046],
+              [110.366397, 39.567709],
+              [110.36061, 39.569992],
+              [110.355781, 39.575345],
+              [110.351395, 39.580928],
+              [110.348723, 39.585325],
+              [110.345523, 39.588466],
+              [110.342979, 39.593941],
+              [110.335921, 39.602264],
+              [110.324463, 39.611206],
+              [110.321491, 39.613876],
+              [110.317919, 39.618439],
+              [110.315448, 39.620199],
+              [110.311819, 39.619792],
+              [110.308575, 39.617829],
+              [110.304061, 39.61232],
+              [110.297388, 39.612753],
+              [110.293302, 39.610905],
+              [110.28933, 39.610056],
+              [110.285115, 39.604316],
+              [110.279215, 39.601804],
+              [110.276143, 39.602202],
+              [110.25424, 39.608959],
+              [110.24984, 39.609631],
+              [110.240567, 39.613328],
+              [110.23731, 39.613434],
+              [110.231481, 39.612629],
+              [110.222751, 39.609985],
+              [110.222765, 39.608031],
+              [110.224494, 39.604033],
+              [110.223751, 39.600142],
+              [110.229109, 39.594375],
+              [110.230595, 39.591234],
+              [110.228794, 39.580079],
+              [110.228209, 39.579097],
+              [110.224365, 39.579725],
+              [110.221479, 39.578805],
+              [110.217736, 39.574284],
+              [110.217822, 39.569364],
+              [110.21695, 39.56724],
+              [110.210178, 39.562895],
+              [110.206563, 39.562196],
+              [110.202649, 39.563338],
+              [110.195476, 39.56693],
+              [110.18919, 39.569444],
+              [110.182246, 39.569948],
+              [110.173102, 39.56924],
+              [110.161744, 39.567107],
+              [110.156729, 39.56755],
+              [110.151842, 39.569267],
+              [110.139841, 39.578849],
+              [110.136412, 39.583759],
+              [110.13404, 39.585184],
+              [110.130569, 39.585971],
+              [110.128768, 39.589288],
+              [110.125654, 39.592756],
+              [110.123425, 39.593897],
+              [110.122996, 39.604767],
+              [110.122182, 39.607332],
+              [110.118981, 39.61087],
+              [110.118567, 39.616759],
+              [110.116381, 39.626476],
+              [110.122868, 39.629527],
+              [110.125511, 39.631701],
+              [110.127411, 39.634964],
+              [110.131026, 39.637554],
+              [110.133897, 39.641735],
+              [110.135183, 39.648382],
+              [110.137755, 39.651528],
+              [110.139427, 39.655302],
+              [110.138084, 39.658042],
+              [110.140641, 39.662911],
+              [110.140713, 39.664396],
+              [110.137941, 39.673656],
+              [110.137927, 39.674795],
+              [110.140655, 39.677897],
+              [110.141298, 39.681148],
+              [110.140384, 39.686077],
+              [110.142656, 39.690706],
+              [110.139512, 39.697383],
+              [110.140455, 39.699671],
+              [110.142599, 39.701058],
+              [110.147099, 39.70021],
+              [110.1529, 39.695529],
+              [110.159158, 39.688215],
+              [110.163301, 39.686625],
+              [110.169802, 39.688922],
+              [110.171773, 39.691669],
+              [110.177917, 39.6906],
+              [110.181232, 39.692031],
+              [110.182403, 39.693921],
+              [110.182603, 39.698717],
+              [110.181403, 39.702895],
+              [110.174231, 39.704255],
+              [110.169259, 39.708767],
+              [110.162287, 39.712123],
+              [110.156443, 39.713721],
+              [110.153543, 39.716052],
+              [110.150571, 39.717253],
+              [110.142513, 39.718092],
+              [110.140041, 39.721924],
+              [110.138712, 39.722542],
+              [110.134055, 39.721792],
+              [110.131169, 39.722012],
+              [110.129183, 39.719832],
+              [110.121039, 39.720794],
+              [110.112895, 39.723716],
+              [110.102837, 39.728387],
+              [110.084249, 39.730691],
+              [110.074062, 39.73492],
+              [110.068675, 39.729861],
+              [110.05956, 39.716097],
+              [110.056388, 39.71207],
+              [110.047073, 39.704917],
+              [110.039386, 39.697489],
+              [110.037543, 39.696094],
+              [110.032057, 39.693948],
+              [110.02707, 39.692764],
+              [110.020113, 39.689796],
+              [110.012826, 39.687976],
+              [110.007782, 39.687932],
+              [109.995652, 39.688524],
+              [109.988437, 39.68795],
+              [109.985094, 39.687014],
+              [109.982508, 39.685282],
+              [109.979051, 39.680618],
+              [109.977379, 39.675343],
+              [109.978365, 39.663397],
+              [109.979579, 39.659173],
+              [109.977893, 39.65608],
+              [109.975607, 39.654286],
+              [109.97835, 39.65319],
+              [109.99891, 39.630906],
+              [109.997524, 39.630756],
+              [109.99991, 39.627369],
+              [110.005368, 39.623727],
+              [110.004639, 39.612134],
+              [110.005025, 39.605652],
+              [110.009268, 39.602919],
+              [110.010511, 39.600204],
+              [110.017855, 39.591482],
+              [110.021498, 39.58897],
+              [110.021584, 39.582485],
+              [110.020155, 39.577141],
+              [110.020513, 39.573434],
+              [110.025042, 39.568187],
+              [110.025856, 39.565585],
+              [110.026156, 39.556355],
+              [110.022027, 39.551434],
+              [110.022441, 39.542636],
+              [110.024613, 39.537793],
+              [110.027999, 39.531809],
+              [110.032571, 39.527453],
+              [110.033243, 39.521671],
+              [110.032385, 39.518651],
+              [110.027642, 39.514427],
+              [110.023127, 39.515304],
+              [110.022198, 39.517606],
+              [110.019184, 39.51781],
+              [110.013055, 39.527001],
+              [110.006425, 39.528551],
+              [109.999496, 39.529631],
+              [109.999696, 39.53751],
+              [109.999053, 39.540281],
+              [109.996595, 39.544424],
+              [109.992638, 39.547619],
+              [109.990109, 39.548177],
+              [109.985423, 39.551894],
+              [109.980608, 39.552771],
+              [109.97185, 39.556143],
+              [109.966135, 39.557001],
+              [109.95902, 39.559338],
+              [109.953862, 39.562524],
+              [109.952319, 39.565984],
+              [109.947461, 39.568939],
+              [109.938946, 39.576726],
+              [109.935931, 39.578318],
+              [109.92843, 39.578469],
+              [109.925458, 39.577053],
+              [109.918886, 39.575354],
+              [109.916172, 39.577186],
+              [109.918829, 39.57907],
+              [109.918786, 39.581848],
+              [109.916, 39.587846],
+              [109.914186, 39.589448],
+              [109.89174, 39.589014],
+              [109.877653, 39.590739],
+              [109.871923, 39.593702],
+              [109.869309, 39.596462],
+              [109.865608, 39.604077],
+              [109.861694, 39.605899],
+              [109.855736, 39.604688],
+              [109.854564, 39.60306],
+              [109.855207, 39.600283],
+              [109.858536, 39.597302],
+              [109.857965, 39.595675],
+              [109.851092, 39.596082],
+              [109.848106, 39.595595],
+              [109.844649, 39.588147],
+              [109.84462, 39.590235],
+              [109.842163, 39.593924],
+              [109.835905, 39.593172],
+              [109.832047, 39.591756],
+              [109.826947, 39.593331],
+              [109.818574, 39.59349],
+              [109.813188, 39.594375],
+              [109.812031, 39.592278],
+              [109.806101, 39.589218],
+              [109.804073, 39.585493],
+              [109.798458, 39.582193],
+              [109.795457, 39.582636],
+              [109.792485, 39.58168],
+              [109.788599, 39.581415],
+              [109.775426, 39.58291],
+              [109.76974, 39.583317],
+              [109.765211, 39.584892],
+              [109.761782, 39.586776],
+              [109.752324, 39.599814],
+              [109.750723, 39.604891],
+              [109.739379, 39.619085],
+              [109.730235, 39.627316],
+              [109.72052, 39.633461],
+              [109.714119, 39.638942],
+              [109.71019, 39.640745],
+              [109.688216, 39.643467],
+              [109.679201, 39.643353],
+              [109.669314, 39.641832],
+              [109.664785, 39.643388],
+              [109.644882, 39.645253],
+              [109.643325, 39.643565],
+              [109.639424, 39.643521],
+              [109.634252, 39.647622],
+              [109.627723, 39.65912],
+              [109.624966, 39.66163],
+              [109.62368, 39.665792],
+              [109.617979, 39.666181],
+              [109.614036, 39.667753],
+              [109.609849, 39.6677],
+              [109.608621, 39.66884],
+              [109.61035, 39.672569],
+              [109.613307, 39.674689],
+              [109.616593, 39.675661],
+              [109.619879, 39.675705],
+              [109.621965, 39.676651],
+              [109.623408, 39.679451],
+              [109.62278, 39.681068],
+              [109.619451, 39.68242],
+              [109.622408, 39.68477],
+              [109.622965, 39.686863],
+              [109.62598, 39.68621],
+              [109.626237, 39.688524],
+              [109.623694, 39.695908],
+              [109.621879, 39.698805],
+              [109.626309, 39.700113],
+              [109.633795, 39.700907],
+              [109.644568, 39.703592],
+              [109.648768, 39.703884],
+              [109.649083, 39.702956],
+              [109.65364, 39.700704],
+              [109.658098, 39.70308],
+              [109.662899, 39.703601],
+              [109.664585, 39.709421],
+              [109.6721, 39.709933],
+              [109.677143, 39.713483],
+              [109.680972, 39.717704],
+              [109.683001, 39.721439],
+              [109.688059, 39.724282],
+              [109.68443, 39.725394],
+              [109.685873, 39.72912],
+              [109.68253, 39.730929],
+              [109.682487, 39.732783],
+              [109.686716, 39.732139],
+              [109.683315, 39.737188],
+              [109.680229, 39.740631],
+              [109.677, 39.746438]
+            ]
+          ]
+        ]
+      }
+    }
+  ]
+}

src/assets/iconfong/demo.css

@@ -1,539 +0,0 @@
-/* Logo 字体 */
-@font-face {
-  font-family: "iconfont logo";
-  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
-  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
-    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
-    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
-    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
-}
-
-.logo {
-  font-family: "iconfont logo";
-  font-size: 160px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* tabs */
-.nav-tabs {
-  position: relative;
-}
-
-.nav-tabs .nav-more {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  height: 42px;
-  line-height: 42px;
-  color: #666;
-}
-
-#tabs {
-  border-bottom: 1px solid #eee;
-}
-
-#tabs li {
-  cursor: pointer;
-  width: 100px;
-  height: 40px;
-  line-height: 40px;
-  text-align: center;
-  font-size: 16px;
-  border-bottom: 2px solid transparent;
-  position: relative;
-  z-index: 1;
-  margin-bottom: -1px;
-  color: #666;
-}
-
-
-#tabs .active {
-  border-bottom-color: #f00;
-  color: #222;
-}
-
-.tab-container .content {
-  display: none;
-}
-
-/* 页面布局 */
-.main {
-  padding: 30px 100px;
-  width: 960px;
-  margin: 0 auto;
-}
-
-.main .logo {
-  color: #333;
-  text-align: left;
-  margin-bottom: 30px;
-  line-height: 1;
-  height: 110px;
-  margin-top: -50px;
-  overflow: hidden;
-  *zoom: 1;
-}
-
-.main .logo a {
-  font-size: 160px;
-  color: #333;
-}
-
-.helps {
-  margin-top: 40px;
-}
-
-.helps pre {
-  padding: 20px;
-  margin: 10px 0;
-  border: solid 1px #e7e1cd;
-  background-color: #fffdef;
-  overflow: auto;
-}
-
-.icon_lists {
-  width: 100% !important;
-  overflow: hidden;
-  *zoom: 1;
-}
-
-.icon_lists li {
-  width: 100px;
-  margin-bottom: 10px;
-  margin-right: 20px;
-  text-align: center;
-  list-style: none !important;
-  cursor: default;
-}
-
-.icon_lists li .code-name {
-  line-height: 1.2;
-}
-
-.icon_lists .icon {
-  display: block;
-  height: 100px;
-  line-height: 100px;
-  font-size: 42px;
-  margin: 10px auto;
-  color: #333;
-  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
-  -moz-transition: font-size 0.25s linear, width 0.25s linear;
-  transition: font-size 0.25s linear, width 0.25s linear;
-}
-
-.icon_lists .icon:hover {
-  font-size: 100px;
-}
-
-.icon_lists .svg-icon {
-  /* 通过设置 font-size 来改变图标大小 */
-  width: 1em;
-  /* 图标和文字相邻时，垂直对齐 */
-  vertical-align: -0.15em;
-  /* 通过设置 color 来改变 SVG 的颜色/fill */
-  fill: currentColor;
-  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
-      normalize.css 中也包含这行 */
-  overflow: hidden;
-}
-
-.icon_lists li .name,
-.icon_lists li .code-name {
-  color: #666;
-}
-
-/* markdown 样式 */
-.markdown {
-  color: #666;
-  font-size: 14px;
-  line-height: 1.8;
-}
-
-.highlight {
-  line-height: 1.5;
-}
-
-.markdown img {
-  vertical-align: middle;
-  max-width: 100%;
-}
-
-.markdown h1 {
-  color: #404040;
-  font-weight: 500;
-  line-height: 40px;
-  margin-bottom: 24px;
-}
-
-.markdown h2,
-.markdown h3,
-.markdown h4,
-.markdown h5,
-.markdown h6 {
-  color: #404040;
-  margin: 1.6em 0 0.6em 0;
-  font-weight: 500;
-  clear: both;
-}
-
-.markdown h1 {
-  font-size: 28px;
-}
-
-.markdown h2 {
-  font-size: 22px;
-}
-
-.markdown h3 {
-  font-size: 16px;
-}
-
-.markdown h4 {
-  font-size: 14px;
-}
-
-.markdown h5 {
-  font-size: 12px;
-}
-
-.markdown h6 {
-  font-size: 12px;
-}
-
-.markdown hr {
-  height: 1px;
-  border: 0;
-  background: #e9e9e9;
-  margin: 16px 0;
-  clear: both;
-}
-
-.markdown p {
-  margin: 1em 0;
-}
-
-.markdown>p,
-.markdown>blockquote,
-.markdown>.highlight,
-.markdown>ol,
-.markdown>ul {
-  width: 80%;
-}
-
-.markdown ul>li {
-  list-style: circle;
-}
-
-.markdown>ul li,
-.markdown blockquote ul>li {
-  margin-left: 20px;
-  padding-left: 4px;
-}
-
-.markdown>ul li p,
-.markdown>ol li p {
-  margin: 0.6em 0;
-}
-
-.markdown ol>li {
-  list-style: decimal;
-}
-
-.markdown>ol li,
-.markdown blockquote ol>li {
-  margin-left: 20px;
-  padding-left: 4px;
-}
-
-.markdown code {
-  margin: 0 3px;
-  padding: 0 5px;
-  background: #eee;
-  border-radius: 3px;
-}
-
-.markdown strong,
-.markdown b {
-  font-weight: 600;
-}
-
-.markdown>table {
-  border-collapse: collapse;
-  border-spacing: 0px;
-  empty-cells: show;
-  border: 1px solid #e9e9e9;
-  width: 95%;
-  margin-bottom: 24px;
-}
-
-.markdown>table th {
-  white-space: nowrap;
-  color: #333;
-  font-weight: 600;
-}
-
-.markdown>table th,
-.markdown>table td {
-  border: 1px solid #e9e9e9;
-  padding: 8px 16px;
-  text-align: left;
-}
-
-.markdown>table th {
-  background: #F7F7F7;
-}
-
-.markdown blockquote {
-  font-size: 90%;
-  color: #999;
-  border-left: 4px solid #e9e9e9;
-  padding-left: 0.8em;
-  margin: 1em 0;
-}
-
-.markdown blockquote p {
-  margin: 0;
-}
-
-.markdown .anchor {
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  margin-left: 8px;
-}
-
-.markdown .waiting {
-  color: #ccc;
-}
-
-.markdown h1:hover .anchor,
-.markdown h2:hover .anchor,
-.markdown h3:hover .anchor,
-.markdown h4:hover .anchor,
-.markdown h5:hover .anchor,
-.markdown h6:hover .anchor {
-  opacity: 1;
-  display: inline-block;
-}
-
-.markdown>br,
-.markdown>p>br {
-  clear: both;
-}
-
-
-.hljs {
-  display: block;
-  background: white;
-  padding: 0.5em;
-  color: #333333;
-  overflow-x: auto;
-}
-
-.hljs-comment,
-.hljs-meta {
-  color: #969896;
-}
-
-.hljs-string,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-strong,
-.hljs-emphasis,
-.hljs-quote {
-  color: #df5000;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-type {
-  color: #a71d5d;
-}
-
-.hljs-literal,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-attribute {
-  color: #0086b3;
-}
-
-.hljs-section,
-.hljs-name {
-  color: #63a35c;
-}
-
-.hljs-tag {
-  color: #333333;
-}
-
-.hljs-title,
-.hljs-attr,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo {
-  color: #795da3;
-}
-
-.hljs-addition {
-  color: #55a532;
-  background-color: #eaffea;
-}
-
-.hljs-deletion {
-  color: #bd2c00;
-  background-color: #ffecec;
-}
-
-.hljs-link {
-  text-decoration: underline;
-}
-
-/* 代码高亮 */
-/* PrismJS 1.15.0
-https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-code[class*="language-"],
-pre[class*="language-"] {
-  color: black;
-  background: none;
-  text-shadow: 0 1px white;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-pre[class*="language-"]::-moz-selection,
-pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection,
-code[class*="language-"] ::-moz-selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-pre[class*="language-"]::selection,
-pre[class*="language-"] ::selection,
-code[class*="language-"]::selection,
-code[class*="language-"] ::selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-@media print {
-
-  code[class*="language-"],
-  pre[class*="language-"] {
-    text-shadow: none;
-  }
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-  padding: 1em;
-  margin: .5em 0;
-  overflow: auto;
-}
-
-:not(pre)>code[class*="language-"],
-pre[class*="language-"] {
-  background: #f5f2f0;
-}
-
-/* Inline code */
-:not(pre)>code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
-  white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: slategray;
-}
-
-.token.punctuation {
-  color: #999;
-}
-
-.namespace {
-  opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #905;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #690;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #9a6e3a;
-  background: hsla(0, 0%, 100%, .5);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #07a;
-}
-
-.token.function,
-.token.class-name {
-  color: #DD4A68;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-  color: #e90;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}

src/assets/iconfong/demo_index.html

@@ -1,1154 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8"/>
-  <title>iconfont Demo</title>
-  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
-  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
-  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
-  <link rel="stylesheet" href="demo.css">
-  <link rel="stylesheet" href="iconfont.css">
-  <script src="iconfont.js"></script>
-  <!-- jQuery -->
-  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
-  <!-- 代码高亮 -->
-  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
-  <style>
-    .main .logo {
-      margin-top: 0;
-      height: auto;
-    }
-
-    .main .logo a {
-      display: flex;
-      align-items: center;
-    }
-
-    .main .logo .sub-title {
-      margin-left: 0.5em;
-      font-size: 22px;
-      color: #fff;
-      background: linear-gradient(-45deg, #3967FF, #B500FE);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-  </style>
-</head>
-<body>
-  <div class="main">
-    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
-      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
-      
-    </a></h1>
-    <div class="nav-tabs">
-      <ul id="tabs" class="dib-box">
-        <li class="dib active"><span>Unicode</span></li>
-        <li class="dib"><span>Font class</span></li>
-        <li class="dib"><span>Symbol</span></li>
-      </ul>
-      
-      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3462405" target="_blank" class="nav-more">查看项目</a>
-      
-    </div>
-    <div class="tab-container">
-      <div class="content unicode" style="display: block;">
-          <ul class="icon_lists dib-box">
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe62d;</span>
-                <div class="name">babel</div>
-                <div class="code-name">&amp;#xe62d;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe691;</span>
-                <div class="name">上传</div>
-                <div class="code-name">&amp;#xe691;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe600;</span>
-                <div class="name">编辑</div>
-                <div class="code-name">&amp;#xe600;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xeb6a;</span>
-                <div class="name">关闭</div>
-                <div class="code-name">&amp;#xeb6a;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6a4;</span>
-                <div class="name">新增</div>
-                <div class="code-name">&amp;#xe6a4;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe663;</span>
-                <div class="name">add_file,新建,新增,文件夹</div>
-                <div class="code-name">&amp;#xe663;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xeac5;</span>
-                <div class="name">24gf-folderOpen</div>
-                <div class="code-name">&amp;#xeac5;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe648;</span>
-                <div class="name">bg-folder</div>
-                <div class="code-name">&amp;#xe648;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe601;</span>
-                <div class="name">word</div>
-                <div class="code-name">&amp;#xe601;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe60a;</span>
-                <div class="name">powerpoint</div>
-                <div class="code-name">&amp;#xe60a;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe613;</span>
-                <div class="name">word</div>
-                <div class="code-name">&amp;#xe613;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe61c;</span>
-                <div class="name">excel</div>
-                <div class="code-name">&amp;#xe61c;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe623;</span>
-                <div class="name">audio</div>
-                <div class="code-name">&amp;#xe623;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe625;</span>
-                <div class="name">angular-resolver</div>
-                <div class="code-name">&amp;#xe625;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe634;</span>
-                <div class="name">ejs</div>
-                <div class="code-name">&amp;#xe634;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe636;</span>
-                <div class="name">favicon</div>
-                <div class="code-name">&amp;#xe636;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe635;</span>
-                <div class="name">eslint</div>
-                <div class="code-name">&amp;#xe635;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe637;</span>
-                <div class="name">file</div>
-                <div class="code-name">&amp;#xe637;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe639;</span>
-                <div class="name">contributing</div>
-                <div class="code-name">&amp;#xe639;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe63a;</span>
-                <div class="name">css</div>
-                <div class="code-name">&amp;#xe63a;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe63d;</span>
-                <div class="name">document</div>
-                <div class="code-name">&amp;#xe63d;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe656;</span>
-                <div class="name">html</div>
-                <div class="code-name">&amp;#xe656;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe658;</span>
-                <div class="name">git</div>
-                <div class="code-name">&amp;#xe658;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe65e;</span>
-                <div class="name">javascript-map</div>
-                <div class="code-name">&amp;#xe65e;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe65f;</span>
-                <div class="name">json</div>
-                <div class="code-name">&amp;#xe65f;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe662;</span>
-                <div class="name">less</div>
-                <div class="code-name">&amp;#xe662;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe666;</span>
-                <div class="name">mdx</div>
-                <div class="code-name">&amp;#xe666;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe669;</span>
-                <div class="name">image</div>
-                <div class="code-name">&amp;#xe669;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe66b;</span>
-                <div class="name">javascript</div>
-                <div class="code-name">&amp;#xe66b;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe683;</span>
-                <div class="name">nodejs</div>
-                <div class="code-name">&amp;#xe683;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe685;</span>
-                <div class="name">npm</div>
-                <div class="code-name">&amp;#xe685;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe686;</span>
-                <div class="name">nuxt</div>
-                <div class="code-name">&amp;#xe686;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe687;</span>
-                <div class="name">pdf</div>
-                <div class="code-name">&amp;#xe687;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe689;</span>
-                <div class="name">react</div>
-                <div class="code-name">&amp;#xe689;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe68a;</span>
-                <div class="name">react_ts</div>
-                <div class="code-name">&amp;#xe68a;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe690;</span>
-                <div class="name">python</div>
-                <div class="code-name">&amp;#xe690;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe69a;</span>
-                <div class="name">sass</div>
-                <div class="code-name">&amp;#xe69a;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6a3;</span>
-                <div class="name">typescript</div>
-                <div class="code-name">&amp;#xe6a3;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6b2;</span>
-                <div class="name">xml</div>
-                <div class="code-name">&amp;#xe6b2;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6b4;</span>
-                <div class="name">video</div>
-                <div class="code-name">&amp;#xe6b4;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6b9;</span>
-                <div class="name">vue</div>
-                <div class="code-name">&amp;#xe6b9;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6be;</span>
-                <div class="name">zip</div>
-                <div class="code-name">&amp;#xe6be;</div>
-              </li>
-          
-          </ul>
-          <div class="article markdown">
-          <h2 id="unicode-">Unicode 引用</h2>
-          <hr>
-
-          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
-          <ul>
-            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
-            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
-          </ul>
-          <blockquote>
-            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
-          </blockquote>
-          <p>Unicode 使用步骤如下：</p>
-          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
-<pre><code class="language-css"
->@font-face {
-  font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1656663119632') format('woff2'),
-       url('iconfont.woff?t=1656663119632') format('woff'),
-       url('iconfont.ttf?t=1656663119632') format('truetype');
-}
-</code></pre>
-          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
-<pre><code class="language-css"
->.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-</code></pre>
-          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
-<pre>
-<code class="language-html"
->&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
-</code></pre>
-          <blockquote>
-            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
-          </blockquote>
-          </div>
-      </div>
-      <div class="content font-class">
-        <ul class="icon_lists dib-box">
-          
-          <li class="dib">
-            <span class="icon iconfont icon-babel"></span>
-            <div class="name">
-              babel
-            </div>
-            <div class="code-name">.icon-babel
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-shangchuan1"></span>
-            <div class="name">
-              上传
-            </div>
-            <div class="code-name">.icon-shangchuan1
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-bianji"></span>
-            <div class="name">
-              编辑
-            </div>
-            <div class="code-name">.icon-bianji
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-guanbi"></span>
-            <div class="name">
-              关闭
-            </div>
-            <div class="code-name">.icon-guanbi
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-xinzeng"></span>
-            <div class="name">
-              新增
-            </div>
-            <div class="code-name">.icon-xinzeng
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-add_file"></span>
-            <div class="name">
-              add_file,新建,新增,文件夹
-            </div>
-            <div class="code-name">.icon-add_file
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-24gf-folderOpen"></span>
-            <div class="name">
-              24gf-folderOpen
-            </div>
-            <div class="code-name">.icon-24gf-folderOpen
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-bg-folder"></span>
-            <div class="name">
-              bg-folder
-            </div>
-            <div class="code-name">.icon-bg-folder
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-word"></span>
-            <div class="name">
-              word
-            </div>
-            <div class="code-name">.icon-word
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-powerpoint"></span>
-            <div class="name">
-              powerpoint
-            </div>
-            <div class="code-name">.icon-powerpoint
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-word1"></span>
-            <div class="name">
-              word
-            </div>
-            <div class="code-name">.icon-word1
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-excel"></span>
-            <div class="name">
-              excel
-            </div>
-            <div class="code-name">.icon-excel
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-audio"></span>
-            <div class="name">
-              audio
-            </div>
-            <div class="code-name">.icon-audio
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-angular-resolver"></span>
-            <div class="name">
-              angular-resolver
-            </div>
-            <div class="code-name">.icon-angular-resolver
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-ejs"></span>
-            <div class="name">
-              ejs
-            </div>
-            <div class="code-name">.icon-ejs
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-favicon"></span>
-            <div class="name">
-              favicon
-            </div>
-            <div class="code-name">.icon-favicon
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-eslint"></span>
-            <div class="name">
-              eslint
-            </div>
-            <div class="code-name">.icon-eslint
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-file"></span>
-            <div class="name">
-              file
-            </div>
-            <div class="code-name">.icon-file
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-contributing"></span>
-            <div class="name">
-              contributing
-            </div>
-            <div class="code-name">.icon-contributing
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-css"></span>
-            <div class="name">
-              css
-            </div>
-            <div class="code-name">.icon-css
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-document"></span>
-            <div class="name">
-              document
-            </div>
-            <div class="code-name">.icon-document
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-html"></span>
-            <div class="name">
-              html
-            </div>
-            <div class="code-name">.icon-html
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-git"></span>
-            <div class="name">
-              git
-            </div>
-            <div class="code-name">.icon-git
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-javascript-map"></span>
-            <div class="name">
-              javascript-map
-            </div>
-            <div class="code-name">.icon-javascript-map
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-json"></span>
-            <div class="name">
-              json
-            </div>
-            <div class="code-name">.icon-json
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-less"></span>
-            <div class="name">
-              less
-            </div>
-            <div class="code-name">.icon-less
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-mdx"></span>
-            <div class="name">
-              mdx
-            </div>
-            <div class="code-name">.icon-mdx
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-image"></span>
-            <div class="name">
-              image
-            </div>
-            <div class="code-name">.icon-image
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-javascript"></span>
-            <div class="name">
-              javascript
-            </div>
-            <div class="code-name">.icon-javascript
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-nodejs"></span>
-            <div class="name">
-              nodejs
-            </div>
-            <div class="code-name">.icon-nodejs
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-npm"></span>
-            <div class="name">
-              npm
-            </div>
-            <div class="code-name">.icon-npm
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-nuxt"></span>
-            <div class="name">
-              nuxt
-            </div>
-            <div class="code-name">.icon-nuxt
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-pdf"></span>
-            <div class="name">
-              pdf
-            </div>
-            <div class="code-name">.icon-pdf
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-react1"></span>
-            <div class="name">
-              react
-            </div>
-            <div class="code-name">.icon-react1
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-react_ts"></span>
-            <div class="name">
-              react_ts
-            </div>
-            <div class="code-name">.icon-react_ts
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-python"></span>
-            <div class="name">
-              python
-            </div>
-            <div class="code-name">.icon-python
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-sass"></span>
-            <div class="name">
-              sass
-            </div>
-            <div class="code-name">.icon-sass
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-typescript"></span>
-            <div class="name">
-              typescript
-            </div>
-            <div class="code-name">.icon-typescript
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-xml"></span>
-            <div class="name">
-              xml
-            </div>
-            <div class="code-name">.icon-xml
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-video"></span>
-            <div class="name">
-              video
-            </div>
-            <div class="code-name">.icon-video
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-vue"></span>
-            <div class="name">
-              vue
-            </div>
-            <div class="code-name">.icon-vue
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-zip"></span>
-            <div class="name">
-              zip
-            </div>
-            <div class="code-name">.icon-zip
-            </div>
-          </li>
-          
-        </ul>
-        <div class="article markdown">
-        <h2 id="font-class-">font-class 引用</h2>
-        <hr>
-
-        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
-        <p>与 Unicode 使用方式相比，具有如下特点：</p>
-        <ul>
-          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
-          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
-        </ul>
-        <p>使用步骤如下：</p>
-        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
-<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
-</code></pre>
-        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
-<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
-</code></pre>
-        <blockquote>
-          <p>"
-            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
-        </blockquote>
-      </div>
-      </div>
-      <div class="content symbol">
-          <ul class="icon_lists dib-box">
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-babel"></use>
-                </svg>
-                <div class="name">babel</div>
-                <div class="code-name">#icon-babel</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-shangchuan1"></use>
-                </svg>
-                <div class="name">上传</div>
-                <div class="code-name">#icon-shangchuan1</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-bianji"></use>
-                </svg>
-                <div class="name">编辑</div>
-                <div class="code-name">#icon-bianji</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-guanbi"></use>
-                </svg>
-                <div class="name">关闭</div>
-                <div class="code-name">#icon-guanbi</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-xinzeng"></use>
-                </svg>
-                <div class="name">新增</div>
-                <div class="code-name">#icon-xinzeng</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-add_file"></use>
-                </svg>
-                <div class="name">add_file,新建,新增,文件夹</div>
-                <div class="code-name">#icon-add_file</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-24gf-folderOpen"></use>
-                </svg>
-                <div class="name">24gf-folderOpen</div>
-                <div class="code-name">#icon-24gf-folderOpen</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-bg-folder"></use>
-                </svg>
-                <div class="name">bg-folder</div>
-                <div class="code-name">#icon-bg-folder</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-word"></use>
-                </svg>
-                <div class="name">word</div>
-                <div class="code-name">#icon-word</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-powerpoint"></use>
-                </svg>
-                <div class="name">powerpoint</div>
-                <div class="code-name">#icon-powerpoint</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-word1"></use>
-                </svg>
-                <div class="name">word</div>
-                <div class="code-name">#icon-word1</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-excel"></use>
-                </svg>
-                <div class="name">excel</div>
-                <div class="code-name">#icon-excel</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-audio"></use>
-                </svg>
-                <div class="name">audio</div>
-                <div class="code-name">#icon-audio</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-angular-resolver"></use>
-                </svg>
-                <div class="name">angular-resolver</div>
-                <div class="code-name">#icon-angular-resolver</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-ejs"></use>
-                </svg>
-                <div class="name">ejs</div>
-                <div class="code-name">#icon-ejs</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-favicon"></use>
-                </svg>
-                <div class="name">favicon</div>
-                <div class="code-name">#icon-favicon</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-eslint"></use>
-                </svg>
-                <div class="name">eslint</div>
-                <div class="code-name">#icon-eslint</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-file"></use>
-                </svg>
-                <div class="name">file</div>
-                <div class="code-name">#icon-file</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-contributing"></use>
-                </svg>
-                <div class="name">contributing</div>
-                <div class="code-name">#icon-contributing</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-css"></use>
-                </svg>
-                <div class="name">css</div>
-                <div class="code-name">#icon-css</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-document"></use>
-                </svg>
-                <div class="name">document</div>
-                <div class="code-name">#icon-document</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-html"></use>
-                </svg>
-                <div class="name">html</div>
-                <div class="code-name">#icon-html</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-git"></use>
-                </svg>
-                <div class="name">git</div>
-                <div class="code-name">#icon-git</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-javascript-map"></use>
-                </svg>
-                <div class="name">javascript-map</div>
-                <div class="code-name">#icon-javascript-map</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-json"></use>
-                </svg>
-                <div class="name">json</div>
-                <div class="code-name">#icon-json</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-less"></use>
-                </svg>
-                <div class="name">less</div>
-                <div class="code-name">#icon-less</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-mdx"></use>
-                </svg>
-                <div class="name">mdx</div>
-                <div class="code-name">#icon-mdx</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-image"></use>
-                </svg>
-                <div class="name">image</div>
-                <div class="code-name">#icon-image</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-javascript"></use>
-                </svg>
-                <div class="name">javascript</div>
-                <div class="code-name">#icon-javascript</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-nodejs"></use>
-                </svg>
-                <div class="name">nodejs</div>
-                <div class="code-name">#icon-nodejs</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-npm"></use>
-                </svg>
-                <div class="name">npm</div>
-                <div class="code-name">#icon-npm</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-nuxt"></use>
-                </svg>
-                <div class="name">nuxt</div>
-                <div class="code-name">#icon-nuxt</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-pdf"></use>
-                </svg>
-                <div class="name">pdf</div>
-                <div class="code-name">#icon-pdf</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-react1"></use>
-                </svg>
-                <div class="name">react</div>
-                <div class="code-name">#icon-react1</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-react_ts"></use>
-                </svg>
-                <div class="name">react_ts</div>
-                <div class="code-name">#icon-react_ts</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-python"></use>
-                </svg>
-                <div class="name">python</div>
-                <div class="code-name">#icon-python</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-sass"></use>
-                </svg>
-                <div class="name">sass</div>
-                <div class="code-name">#icon-sass</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-typescript"></use>
-                </svg>
-                <div class="name">typescript</div>
-                <div class="code-name">#icon-typescript</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-xml"></use>
-                </svg>
-                <div class="name">xml</div>
-                <div class="code-name">#icon-xml</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-video"></use>
-                </svg>
-                <div class="name">video</div>
-                <div class="code-name">#icon-video</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-vue"></use>
-                </svg>
-                <div class="name">vue</div>
-                <div class="code-name">#icon-vue</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-zip"></use>
-                </svg>
-                <div class="name">zip</div>
-                <div class="code-name">#icon-zip</div>
-            </li>
-          
-          </ul>
-          <div class="article markdown">
-          <h2 id="symbol-">Symbol 引用</h2>
-          <hr>
-
-          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
-            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
-          <ul>
-            <li>支持多色图标了，不再受单色限制。</li>
-            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
-            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
-            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
-          </ul>
-          <p>使用步骤如下：</p>
-          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
-<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
-</code></pre>
-          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
-<pre><code class="language-html">&lt;style&gt;
-.icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-&lt;/style&gt;
-</code></pre>
-          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
-<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
-  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
-&lt;/svg&gt;
-</code></pre>
-          </div>
-      </div>
-
-    </div>
-  </div>
-  <script>
-  $(document).ready(function () {
-      $('.tab-container .content:first').show()
-
-      $('#tabs li').click(function (e) {
-        var tabContent = $('.tab-container .content')
-        var index = $(this).index()
-
-        if ($(this).hasClass('active')) {
-          return
-        } else {
-          $('#tabs li').removeClass('active')
-          $(this).addClass('active')
-
-          tabContent.hide().eq(index).fadeIn()
-        }
-      })
-    })
-  </script>
-</body>
-</html>

src/assets/iconfong/iconfont.css

@@ -1,183 +0,0 @@
-@font-face {
-  font-family: "iconfont"; /* Project id 3462405 */
-  src: url('iconfont.woff2?t=1656663119632') format('woff2'),
-       url('iconfont.woff?t=1656663119632') format('woff'),
-       url('iconfont.ttf?t=1656663119632') format('truetype');
-}
-
-.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-babel:before {
-  content: "\e62d";
-}
-
-.icon-shangchuan1:before {
-  content: "\e691";
-}
-
-.icon-bianji:before {
-  content: "\e600";
-}
-
-.icon-guanbi:before {
-  content: "\eb6a";
-}
-
-.icon-xinzeng:before {
-  content: "\e6a4";
-}
-
-.icon-add_file:before {
-  content: "\e663";
-}
-
-.icon-24gf-folderOpen:before {
-  content: "\eac5";
-}
-
-.icon-bg-folder:before {
-  content: "\e648";
-}
-
-.icon-word:before {
-  content: "\e601";
-}
-
-.icon-powerpoint:before {
-  content: "\e60a";
-}
-
-.icon-word1:before {
-  content: "\e613";
-}
-
-.icon-excel:before {
-  content: "\e61c";
-}
-
-.icon-audio:before {
-  content: "\e623";
-}
-
-.icon-angular-resolver:before {
-  content: "\e625";
-}
-
-.icon-ejs:before {
-  content: "\e634";
-}
-
-.icon-favicon:before {
-  content: "\e636";
-}
-
-.icon-eslint:before {
-  content: "\e635";
-}
-
-.icon-file:before {
-  content: "\e637";
-}
-
-.icon-contributing:before {
-  content: "\e639";
-}
-
-.icon-css:before {
-  content: "\e63a";
-}
-
-.icon-document:before {
-  content: "\e63d";
-}
-
-.icon-html:before {
-  content: "\e656";
-}
-
-.icon-git:before {
-  content: "\e658";
-}
-
-.icon-javascript-map:before {
-  content: "\e65e";
-}
-
-.icon-json:before {
-  content: "\e65f";
-}
-
-.icon-less:before {
-  content: "\e662";
-}
-
-.icon-mdx:before {
-  content: "\e666";
-}
-
-.icon-image:before {
-  content: "\e669";
-}
-
-.icon-javascript:before {
-  content: "\e66b";
-}
-
-.icon-nodejs:before {
-  content: "\e683";
-}
-
-.icon-npm:before {
-  content: "\e685";
-}
-
-.icon-nuxt:before {
-  content: "\e686";
-}
-
-.icon-pdf:before {
-  content: "\e687";
-}
-
-.icon-react1:before {
-  content: "\e689";
-}
-
-.icon-react_ts:before {
-  content: "\e68a";
-}
-
-.icon-python:before {
-  content: "\e690";
-}
-
-.icon-sass:before {
-  content: "\e69a";
-}
-
-.icon-typescript:before {
-  content: "\e6a3";
-}
-
-.icon-xml:before {
-  content: "\e6b2";
-}
-
-.icon-video:before {
-  content: "\e6b4";
-}
-
-.icon-vue:before {
-  content: "\e6b9";
-}
-
-.icon-zip:before {
-  content: "\e6be";
-}
-

src/assets/iconfong/iconfont.json

@@ -1,303 +0,0 @@
-{
-  "id": "3462405",
-  "name": "组件",
-  "font_family": "iconfont",
-  "css_prefix_text": "icon-",
-  "description": "",
-  "glyphs": [
-    {
-      "icon_id": "13302950",
-      "name": "babel",
-      "font_class": "babel",
-      "unicode": "e62d",
-      "unicode_decimal": 58925
-    },
-    {
-      "icon_id": "17898907",
-      "name": "上传",
-      "font_class": "shangchuan1",
-      "unicode": "e691",
-      "unicode_decimal": 59025
-    },
-    {
-      "icon_id": "1264",
-      "name": "编辑",
-      "font_class": "bianji",
-      "unicode": "e600",
-      "unicode_decimal": 58880
-    },
-    {
-      "icon_id": "4118038",
-      "name": "关闭",
-      "font_class": "guanbi",
-      "unicode": "eb6a",
-      "unicode_decimal": 60266
-    },
-    {
-      "icon_id": "6595567",
-      "name": "新增",
-      "font_class": "xinzeng",
-      "unicode": "e6a4",
-      "unicode_decimal": 59044
-    },
-    {
-      "icon_id": "11734501",
-      "name": "add_file,新建,新增,文件夹",
-      "font_class": "add_file",
-      "unicode": "e663",
-      "unicode_decimal": 58979
-    },
-    {
-      "icon_id": "7594875",
-      "name": "24gf-folderOpen",
-      "font_class": "24gf-folderOpen",
-      "unicode": "eac5",
-      "unicode_decimal": 60101
-    },
-    {
-      "icon_id": "11882917",
-      "name": "bg-folder",
-      "font_class": "bg-folder",
-      "unicode": "e648",
-      "unicode_decimal": 58952
-    },
-    {
-      "icon_id": "13301799",
-      "name": "word",
-      "font_class": "word",
-      "unicode": "e601",
-      "unicode_decimal": 58881
-    },
-    {
-      "icon_id": "13301840",
-      "name": "powerpoint",
-      "font_class": "powerpoint",
-      "unicode": "e60a",
-      "unicode_decimal": 58890
-    },
-    {
-      "icon_id": "13301856",
-      "name": "word",
-      "font_class": "word1",
-      "unicode": "e613",
-      "unicode_decimal": 58899
-    },
-    {
-      "icon_id": "13301872",
-      "name": "excel",
-      "font_class": "excel",
-      "unicode": "e61c",
-      "unicode_decimal": 58908
-    },
-    {
-      "icon_id": "13302908",
-      "name": "audio",
-      "font_class": "audio",
-      "unicode": "e623",
-      "unicode_decimal": 58915
-    },
-    {
-      "icon_id": "13302915",
-      "name": "angular-resolver",
-      "font_class": "angular-resolver",
-      "unicode": "e625",
-      "unicode_decimal": 58917
-    },
-    {
-      "icon_id": "13303086",
-      "name": "ejs",
-      "font_class": "ejs",
-      "unicode": "e634",
-      "unicode_decimal": 58932
-    },
-    {
-      "icon_id": "13303092",
-      "name": "favicon",
-      "font_class": "favicon",
-      "unicode": "e636",
-      "unicode_decimal": 58934
-    },
-    {
-      "icon_id": "13303093",
-      "name": "eslint",
-      "font_class": "eslint",
-      "unicode": "e635",
-      "unicode_decimal": 58933
-    },
-    {
-      "icon_id": "13303095",
-      "name": "file",
-      "font_class": "file",
-      "unicode": "e637",
-      "unicode_decimal": 58935
-    },
-    {
-      "icon_id": "13303102",
-      "name": "contributing",
-      "font_class": "contributing",
-      "unicode": "e639",
-      "unicode_decimal": 58937
-    },
-    {
-      "icon_id": "13303106",
-      "name": "css",
-      "font_class": "css",
-      "unicode": "e63a",
-      "unicode_decimal": 58938
-    },
-    {
-      "icon_id": "13303116",
-      "name": "document",
-      "font_class": "document",
-      "unicode": "e63d",
-      "unicode_decimal": 58941
-    },
-    {
-      "icon_id": "13303484",
-      "name": "html",
-      "font_class": "html",
-      "unicode": "e656",
-      "unicode_decimal": 58966
-    },
-    {
-      "icon_id": "13303493",
-      "name": "git",
-      "font_class": "git",
-      "unicode": "e658",
-      "unicode_decimal": 58968
-    },
-    {
-      "icon_id": "13303525",
-      "name": "javascript-map",
-      "font_class": "javascript-map",
-      "unicode": "e65e",
-      "unicode_decimal": 58974
-    },
-    {
-      "icon_id": "13303526",
-      "name": "json",
-      "font_class": "json",
-      "unicode": "e65f",
-      "unicode_decimal": 58975
-    },
-    {
-      "icon_id": "13303535",
-      "name": "less",
-      "font_class": "less",
-      "unicode": "e662",
-      "unicode_decimal": 58978
-    },
-    {
-      "icon_id": "13303547",
-      "name": "mdx",
-      "font_class": "mdx",
-      "unicode": "e666",
-      "unicode_decimal": 58982
-    },
-    {
-      "icon_id": "13303553",
-      "name": "image",
-      "font_class": "image",
-      "unicode": "e669",
-      "unicode_decimal": 58985
-    },
-    {
-      "icon_id": "13303558",
-      "name": "javascript",
-      "font_class": "javascript",
-      "unicode": "e66b",
-      "unicode_decimal": 58987
-    },
-    {
-      "icon_id": "13303942",
-      "name": "nodejs",
-      "font_class": "nodejs",
-      "unicode": "e683",
-      "unicode_decimal": 59011
-    },
-    {
-      "icon_id": "13303947",
-      "name": "npm",
-      "font_class": "npm",
-      "unicode": "e685",
-      "unicode_decimal": 59013
-    },
-    {
-      "icon_id": "13303949",
-      "name": "nuxt",
-      "font_class": "nuxt",
-      "unicode": "e686",
-      "unicode_decimal": 59014
-    },
-    {
-      "icon_id": "13303952",
-      "name": "pdf",
-      "font_class": "pdf",
-      "unicode": "e687",
-      "unicode_decimal": 59015
-    },
-    {
-      "icon_id": "13304019",
-      "name": "react",
-      "font_class": "react1",
-      "unicode": "e689",
-      "unicode_decimal": 59017
-    },
-    {
-      "icon_id": "13304020",
-      "name": "react_ts",
-      "font_class": "react_ts",
-      "unicode": "e68a",
-      "unicode_decimal": 59018
-    },
-    {
-      "icon_id": "13304033",
-      "name": "python",
-      "font_class": "python",
-      "unicode": "e690",
-      "unicode_decimal": 59024
-    },
-    {
-      "icon_id": "13304056",
-      "name": "sass",
-      "font_class": "sass",
-      "unicode": "e69a",
-      "unicode_decimal": 59034
-    },
-    {
-      "icon_id": "13304114",
-      "name": "typescript",
-      "font_class": "typescript",
-      "unicode": "e6a3",
-      "unicode_decimal": 59043
-    },
-    {
-      "icon_id": "13304136",
-      "name": "xml",
-      "font_class": "xml",
-      "unicode": "e6b2",
-      "unicode_decimal": 59058
-    },
-    {
-      "icon_id": "13304139",
-      "name": "video",
-      "font_class": "video",
-      "unicode": "e6b4",
-      "unicode_decimal": 59060
-    },
-    {
-      "icon_id": "13304145",
-      "name": "vue",
-      "font_class": "vue",
-      "unicode": "e6b9",
-      "unicode_decimal": 59065
-    },
-    {
-      "icon_id": "13304154",
-      "name": "zip",
-      "font_class": "zip",
-      "unicode": "e6be",
-      "unicode_decimal": 59070
-    }
-  ]
-}

src/views/demo/charts/Line.vue

@@ -1,126 +0,0 @@
-<template>
-  <div ref="chartRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
-
-  import { useECharts } from '/@/hooks/web/useECharts';
-  import { getLineData } from './data';
-
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: 'calc(100vh - 78px)',
-      },
-    },
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
-      const { barData, lineData, category } = getLineData;
-      onMounted(() => {
-        setOptions({
-          backgroundColor: '#0f375f',
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow',
-              label: {
-                show: true,
-                backgroundColor: '#333',
-              },
-            },
-            formatter: function (datas) {
-              var res = datas[0].name + '<br/>';
-              for (var i = 0, length = datas.length; i < length; i++) {
-                if (!datas[i].seriesName.startsWith('series')) {
-                  res += datas[i].seriesName + '：' + Number(datas[i].data).toFixed(2) + '<br/>';
-                }
-              }
-              return res;
-            },
-          },
-          legend: {
-            data: ['line', 'bar'],
-            textStyle: {
-              color: '#ccc',
-            },
-          },
-          xAxis: {
-            data: category,
-            axisLine: {
-              lineStyle: {
-                color: '#ccc',
-              },
-            },
-          },
-          yAxis: {
-            splitLine: { show: false },
-            axisLine: {
-              lineStyle: {
-                color: '#ccc',
-              },
-            },
-          },
-          series: [
-            {
-              name: 'line',
-              type: 'line',
-              smooth: true,
-              showAllSymbol: 'auto',
-              symbol: 'emptyCircle',
-              symbolSize: 15,
-              data: lineData,
-            },
-            {
-              name: 'bar',
-              type: 'bar',
-              barWidth: 10,
-              itemStyle: {
-                borderRadius: 5,
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: '#14c8d4' },
-                  { offset: 1, color: '#43eec6' },
-                ]),
-              },
-              data: barData,
-            },
-            {
-              // name: 'line',
-              type: 'bar',
-              barGap: '-100%',
-              barWidth: 10,
-              itemStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: 'rgba(20,200,212,0.5)' },
-                  { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
-                  { offset: 1, color: 'rgba(20,200,212,0)' },
-                ]),
-              },
-              z: -12,
-              data: lineData,
-            },
-            {
-              // name: 'dotted',
-              type: 'pictorialBar',
-              symbol: 'rect',
-              itemStyle: {
-                color: '#0f375f',
-              },
-              symbolRepeat: true,
-              symbolSize: [12, 4],
-              symbolMargin: 1,
-              z: -10,
-              data: lineData,
-            },
-          ],
-        });
-      });
-      return { chartRef };
-    },
-  });
-</script>

src/views/demo/charts/Map.vue

@@ -1,217 +0,0 @@
-<template>
-  <div class="box">
-    <div class="" ref="chartRef" :style="{ height, width }"></div>
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent, PropType, reactive, ref, Ref, onMounted } from 'vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
-  import type { EChartsOption } from 'echarts';
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '300px',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: '300px',
-      },
-    },
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-      const data = reactive({
-        name: '需风量',
-        num: 500,
-      });
-      const max = ref(1000);
-      const timeTickId = ref(0);
-
-      const option = <EChartsOption>reactive({
-        angleAxis: {
-          show: false,
-          max: (max.value * 3) / 2, //这里将极坐标最大值转换成仪表盘的最大值，(360度除以240度)
-          type: 'value',
-          startAngle: 210, //极坐标初始角度，从第一象限算起，大约在7-8点钟角度之间
-          splitLine: {
-            show: false, //隐藏坐标
-          },
-        },
-        barMaxWidth: 18, //圆环宽度
-        radiusAxis: {
-          //隐藏坐标
-          show: false,
-          type: 'category',
-        },
-        polar: {
-          //设置圆环位置和大小
-          // center: ['50%', '50%'],
-          radius: '120%',
-        },
-        series: [
-          {
-            type: 'bar',
-            data: [
-              {
-                //上层圆环，用于显示真实数据
-                value: data.num,
-                itemStyle: {
-                  color: {
-                    //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 1, //从左到右 0-1
-                    y2: 0,
-                    colorStops: [
-                      {
-                        offset: 0,
-                        color: '#CD48AE', // 0% 处的颜色
-                      },
-                      {
-                        offset: 1,
-                        color: '#2CABFC', // 100% 处的颜色
-                      },
-                    ],
-                    global: false, // 缺省为 false
-                  },
-                  shadowColor: 'rgba(255, 255, 255, 0.2)', //加白色阴影产生高亮效果
-                  shadowBlur: 10,
-                },
-              },
-            ],
-            barGap: '-100%', //柱间距离,用来将上下两层圆环重合
-            coordinateSystem: 'polar', //类型，极坐标
-            roundCap: true, //顶端圆角
-            z: 2, //圆环层级，和zindex相似
-          },
-          {
-            //下层圆环，用于显示最大值
-            type: 'bar',
-            data: [
-              {
-                value: max.value,
-                itemStyle: {
-                  color: '#265195',
-                  shadowColor: 'rgba(0, 0, 0, 0.2)', //加白色阴影产生高亮效果
-                  shadowBlur: 5,
-                  shadowOffsetY: 2,
-                },
-              },
-            ],
-            barGap: '-100%', //柱间距离,用来将上下两层圆环重合
-            coordinateSystem: 'polar', //类型，极坐标
-            roundCap: true, //顶端圆角
-            z: 1, //圆环层级，和zindex相似
-          },
-          {
-            //仪表盘
-            type: 'gauge',
-            radius: '100%',
-            startAngle: 210, //起始角度，同极坐标
-            endAngle: -30, //终止角度，同极坐标
-            max: max.value,
-            splitNumber: 5, //分割线个数（除原点外）
-            axisLine: {
-              // 坐标轴线
-              show: false,
-            },
-            pointer: {
-              show: false,
-            },
-            axisLabel: {
-              // 坐标轴数字
-              fontSize: 8,
-              color: '#13B5FC',
-            },
-            axisTick: {
-              // 坐标轴标记
-              length: 10,
-              lineStyle: {
-                color: '#13B5FC',
-              },
-            },
-            splitLine: {
-              // 分隔线
-              length: 5,
-              lineStyle: {
-                width: 1,
-              },
-            },
-            title: {
-              //标题，显示'馆藏量'
-              color: '#fff',
-              shadowColor: '#fff',
-              fontSize: 24,
-              offsetCenter: ['0', '-25%'], //位置偏移
-            },
-            detail: {
-              //仪表盘数值
-              formatter: function (params) {
-                var name = data.num.toString();
-                var list = '';
-                for (var i = 0; i < name.length; i++) {
-                  list += '{value|' + name[i] + '}'; //每个数字用border隔开
-                  if (i !== name.length - 1) {
-                    list += '{margin|}'; //添加margin值
-                  }
-                }
-                return [list];
-              },
-              offsetCenter: ['0', '5%'],
-              rich: {
-                //编辑富文本样式
-                value: {
-                  width: 28,
-                  height: 32,
-                  borderColor: '#02A0F0',
-                  borderWidth: 2,
-                  borderRadius: 5,
-                  // lineHeight: 1000,
-                  fontSize: 30,
-                  padding: [6, 0, 0, 0],
-                  color: '#fff',
-                  shadowColor: 'rgb(2,157,239)',
-                  shadowBlur: 5,
-                },
-
-                margin: {
-                  width: 8,
-                  height: 32,
-                },
-              },
-            },
-            data: [
-              {
-                value: data.num,
-                name: data.name,
-              },
-            ],
-          },
-        ],
-      });
-
-      function timeTick() {
-        if (timeTickId.value) {
-          clearTimeout(timeTickId.value);
-          timeTickId.value = 0;
-        }
-        setOptions(option);
-        // timeTickId.value = setTimeout(timeTick, 1000 * timer.value || 5000) as unknown as number;
-      }
-
-      onMounted(async () => {
-        timeTick();
-      });
-      return { chartRef, timeTick };
-    },
-  });
-</script>
-<style scoped lang="less">
-  .box {
-    width: 100%;
-    height: 100%;
-    background-color: #0f375f;
-  }
-</style>

src/views/demo/charts/Map1 copy.vue

@@ -1,75 +0,0 @@
-<template>
-  <div ref="chartRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
-
-  import { useECharts } from '/@/hooks/web/useECharts';
-  import { mapData } from './data';
-  import { registerMap } from 'echarts';
-
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: 'calc(100vh - 78px)',
-      },
-    },
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-
-      onMounted(async () => {
-        const json = (await (await import('./china.json')).default) as any;
-        registerMap('china', json);
-        setOptions({
-          visualMap: [
-            {
-              min: 0,
-              max: 1000,
-              left: 'left',
-              top: 'bottom',
-              text: ['高', '低'],
-              calculable: false,
-              orient: 'horizontal',
-              inRange: {
-                color: ['#e0ffff', '#006edd'],
-                symbolSize: [30, 100],
-              },
-            },
-          ],
-          tooltip: {
-            trigger: 'item',
-            backgroundColor: 'rgba(0, 0, 0, .6)',
-            textStyle: {
-              color: '#fff',
-              fontSize: 12,
-            },
-          },
-          series: [
-            {
-              name: 'iphone4',
-              type: 'map',
-              map: 'china',
-              label: {
-                show: true,
-                color: 'rgb(249, 249, 249)',
-                fontSize: 10,
-              },
-              itemStyle: {
-                areaColor: '#2f82ce',
-                borderColor: '#0DAAC1',
-              },
-              data: mapData,
-            },
-          ],
-        });
-      });
-      return { chartRef };
-    },
-  });
-</script>

src/views/demo/charts/Num.vue

@@ -1,138 +0,0 @@
-<template>
-  <div class="chartNum">
-    <div class="box-item">
-      <li :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }" v-for="(item, index) in orderNum" :key="index">
-        <span v-if="!isNaN(item)">
-          <i class="numberItem">0123456789</i>
-        </span>
-        <span class="comma" v-else>{{ item }}</span>
-      </li>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent, PropType, ref, onMounted, nextTick } from 'vue';
-
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: 'calc(100vh - 78px)',
-      },
-    },
-    setup() {
-      const orderNum = ref(['0', '0', ',', '0', '0', '0', ',', '0', '0', '0']); // 默认订单总数
-      const numberItem = ref(null);
-      const setNumberTransform = () => {
-        const numberItems = document.getElementsByClassName('numberItem') as HTMLCollectionOf<HTMLElement>; // 拿到数字的ref，计算元素数量
-        const numberArr: any = orderNum.value.filter((item) => !isNaN(Number(item)));
-        // 结合CSS 对数字字符进行滚动,显示订单数量
-        for (let index = 0; index < numberArr.length; index++) {
-          const elem = numberItems[index];
-          elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
-        }
-      };
-
-      const toOrderNum = (num) => {
-        num = num.toString();
-        // 把订单数变成字符串
-        if (num.length < 8) {
-          num = '0' + num; // 如未满八位数，添加"0"补位
-          toOrderNum(num); // 递归添加"0"补位
-        } else if (num.length === 8) {
-          // 订单数中加入逗号
-          num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8);
-          orderNum.value = num.split(''); // 将其便变成数据，渲染至滚动数组
-        } else {
-          // 订单总量数字超过八位显示异常
-          // $message.warning('订单总量数字过大，显示异常，请联系客服')
-        }
-      };
-      onMounted(() => {
-        nextTick(() => {
-          toOrderNum(1213123);
-          setNumberTransform();
-        });
-      });
-      return { orderNum, numberItem, setNumberTransform, toOrderNum };
-    },
-  });
-</script>
-<style scoped lang="less">
-  .chartNum {
-    width: 100%;
-    height: 100%;
-    background-color: #0f375f;
-  }
-  .box-item {
-    position: relative;
-    height: 100px;
-    font-size: 54px;
-    line-height: 41px;
-    text-align: center;
-    list-style: none;
-    color: #2d7cff;
-    writing-mode: vertical-lr;
-    text-orientation: upright;
-    /*文字禁止编辑*/
-    -moz-user-select: none; /*火狐*/
-    -webkit-user-select: none; /*webkit浏览器*/
-    -ms-user-select: none; /*IE10*/
-    -khtml-user-select: none; /*早期浏览器*/
-    user-select: none;
-    /* overflow: hidden; */
-  }
-  /* 默认逗号设置 */
-  .mark-item {
-    width: 10px;
-    height: 100px;
-    margin-right: 5px;
-    line-height: 10px;
-    font-size: 48px;
-    position: relative;
-    & > span {
-      position: absolute;
-      width: 100%;
-      top: 10px;
-      writing-mode: vertical-rl;
-      text-orientation: upright;
-    }
-  }
-  /*滚动数字设置*/
-  .number-item {
-    width: 41px;
-    height: 65px;
-    background: #ccc;
-    list-style: none;
-    margin-right: 5px;
-    background: rgba(250, 250, 250, 1);
-    border-radius: 4px;
-    border: 1px solid rgba(221, 221, 221, 1);
-    & > span {
-      position: relative;
-      display: inline-block;
-      margin-right: 10px;
-      width: 100%;
-      height: 100%;
-      writing-mode: vertical-rl;
-      text-orientation: upright;
-      overflow: hidden;
-      & > i {
-        font-style: normal;
-        position: absolute;
-        top: 0px;
-        left: 50%;
-        transform: translate(-50%, 0);
-        transition: transform 1s ease-in-out;
-        letter-spacing: 10px;
-      }
-    }
-  }
-  .number-item:last-child {
-    margin-right: 0;
-  }
-</style>

src/views/demo/charts/Pie.vue

@@ -1,451 +0,0 @@
-<template>
-  <div ref="chartRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, PropType, ref, Ref, onMounted, reactive, nextTick, onUnmounted } from 'vue';
-  import type { EChartsOption } from 'echarts';
-  import { useECharts } from '/@/hooks/web/useECharts';
-
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: 'calc(100vh - 178px)',
-      },
-      count: {
-        type: Number,
-        default: 10,
-      },
-    },
-    setup(props) {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions, echarts, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
-      const routeTimer = ref(null);
-      // const echartInstance = ref();
-      function _pie1() {
-        let dataArr: any = [];
-        for (var i = 0; i < 8; i++) {
-          dataArr.push({
-            name: (i + 1).toString(),
-            value: 20,
-            itemStyle: {
-              color: 'rgba(88,142,197,0.4)',
-                borderWidth: 0,
-                borderColor: 'rgba(0,0,0,0)',
-            },
-          });
-        }
-        return dataArr;
-      }
-
-      function _pie2() {
-        let dataArr: any = [];
-        for (var i = 0; i < 8; i++) {
-          if (i % 2 === 0) {
-            dataArr.push({
-              name: (i + 1).toString(),
-              value: 25,
-              itemStyle: {
-                color: 'rgba(88,142,197,0.5)',
-                borderWidth: 0,
-                borderColor: 'rgba(0,0,0,0)',
-              },
-            });
-          } else {
-            dataArr.push({
-              name: (i + 1).toString(),
-              value: 20,
-              itemStyle: {
-                color: 'rgba(0,0,0,0)',
-                borderWidth: 0,
-                borderColor: 'rgba(0,0,0,0)',
-              },
-            });
-          }
-        }
-        return dataArr;
-      }
-
-      function _pie3() {
-        let dataArr: any = [];
-        for (var i = 0; i < 100; i++) {
-          if (i % 2 === 0) {
-            dataArr.push({
-              name: (i + 1).toString(),
-              value: 25,
-              itemStyle: {
-                color: 'rgb(126,190,255)',
-                borderWidth: 0,
-                borderColor: 'rgba(0,0,0,0)',
-              },
-            });
-          } else {
-            dataArr.push({
-              name: (i + 1).toString(),
-              value: 20,
-              itemStyle: {
-                color: 'rgba(0,0,0,0)',
-                borderWidth: 0,
-                borderColor: 'rgba(0,0,0,0)',
-              },
-            });
-          }
-        }
-        return dataArr;
-      }
-
-      function _pieData(data) {
-        let _data = data;
-        let dataArr: any = [];
-        for (var i = 0; i < 5; i++) {
-          if (i === 2) {
-            let dt = data[0].unit ? 25 : Number(data[0].value);
-            dataArr.push({
-              name: (i + 1).toString(),
-              value: dt,
-              itemStyle: {
-                color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
-                  {
-                    offset: 0,
-                    color: 'rgb(147,187,216)',
-                  },
-                  {
-                    offset: 1,
-                    color: '#588ec5',
-                  },
-                ]),
-                borderWidth: 0,
-                borderColor: 'rgba(0,0,0,0.4)',
-              },
-            });
-          } else {
-            let dta = data[0].unit ? 25 : (1 - Number(data[0].value)) / 4;
-            dataArr.push({
-              name: (i + 1).toString(),
-              value: dta,
-              itemStyle: {
-                color: 'rgba(0,0,0,0)',
-                borderWidth: 0,
-                borderColor: 'rgba(0,0,0,0)',
-              },
-            });
-          }
-        }
-        //console.log(dataArr)
-        return dataArr;
-      }
-
-      const option = <EChartsOption>reactive({
-        backgroundColor: '#0f375f',
-        title: [
-          {
-            text: '各渠道投诉占比',
-            left: '2%',
-            top: '1%',
-            textStyle: {
-              color: '#fff',
-              fontSize: 14,
-            },
-          },
-        ],
-        // tooltip: {
-        //   // formatter: '{b} ({c})',
-        // },
-        series: [
-          {
-            type: 'pie',
-            zlevel: 1,
-            silent: true,
-            /*
-                radius
-                饼图的半径。可以为如下类型：
-                number：直接指定外半径值。
-                string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。
-                Array.<number|string>：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。
-                */
-            radius: ['98%', '97%'],
-            animation: false,
-            color: 'rgba(88,142,197,0.5)',
-
-            label: {
-              show: false,
-            },
-            labelLine: {
-              show: false,
-            },
-            // data: _pie1(),
-            data: [1],
-          },
-          {
-            type: 'pie',
-            zlevel: 2,
-            silent: true,
-            radius: ['90%', '91%'],
-            startAngle: 50,
-            animation: false,
-            label: {
-              show: false,
-            },
-            labelLine: {
-              show: false,
-            },
-            data: _pie2(),
-          },
-          {
-            type: 'pie',
-            zlevel: 3,
-            silent: true,
-            radius: ['88%', '87%'],
-            label: {
-              show: false,
-            },
-            labelLine: {
-              show: false,
-            },
-            data: _pie2(),
-          },
-          {
-            type: 'pie',
-            zlevel: 4,
-            silent: true,
-            radius: ['84%', '83%'],
-            label: {
-              show: false,
-            },
-            labelLine: {
-              show: false,
-            },
-            data: _pie3(),
-          },
-          {
-            type: 'pie',
-            zlevel: 5,
-            silent: true,
-            radius: ['80%', '78%'],
-            color: ['#fc8d89', '#46d3f3', 'rgba(203,203,203,.2)'],
-            startAngle: 50,
-            animation: false,
-            label: {
-              show: false,
-            },
-            data: [50, 20, 40],
-          },
-          {
-            name: '',
-            type: 'gauge',
-            splitNumber: 30, //刻度数量
-            min: 0,
-            max: 100,
-            radius: '73%', //图表尺寸
-            center: ['50%', '50%'],
-            startAngle: 90,
-            endAngle: -269.9999,
-            axisLine: {
-              show: false,
-              lineStyle: {
-                width: 0,
-                shadowBlur: 0,
-                color: [[1, '#0dc2fe']],
-              },
-            },
-            axisTick: {
-              show: false,
-              lineStyle: {
-                color: 'auto',
-                width: 2,
-              },
-              length: 20,
-              splitNumber: 5,
-            },
-            splitLine: {
-              show: true,
-              length: 32,
-              lineStyle: {
-                color: 'auto',
-              },
-            },
-            axisLabel: {
-              show: false,
-            },
-            pointer: {
-              //仪表盘指针
-              show: false,
-            },
-            detail: {
-              show: false,
-            },
-          },
-          {
-            name: '统计',
-            type: 'gauge',
-            splitNumber: 30, //刻度数量
-            min: 0,
-            max: 100,
-            radius: '68%', //图表尺寸
-            center: ['50%', '50%'],
-            startAngle: 90,
-            endAngle: -269.9999,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                width: 0,
-                shadowBlur: 0,
-                color: [
-                  [0, '#0dc2fe'],
-                  [1, '#0dc2fe'],
-                ],
-              },
-            },
-            axisTick: {
-              show: true,
-              lineStyle: {
-                color: '#0dc2fe',
-                width: 2,
-              },
-              length: 20,
-              splitNumber: 5,
-            },
-            splitLine: {
-              show: true,
-              length: 20,
-              lineStyle: {
-                color: '#0dc2fe',
-              },
-            },
-            axisLabel: {
-              show: false,
-            },
-            pointer: {
-              //仪表盘指针
-              show: false,
-            },
-            detail: {
-              borderColor: '#fff',
-              shadowColor: '#fff', //默认透明
-              shadowBlur: 2,
-              offsetCenter: [0, '0%'], // x, y，单位px
-              textBorderColor: '#fff',
-              fontSize: 50,
-              formatter: '{value}',
-            },
-            data: [
-              {
-                name: '',
-                value: 1,
-                detail: {
-                  color: '#ffffff99',
-                },
-              },
-            ],
-          },
-          {
-            type: 'pie',
-            zlevel: 20,
-            silent: true,
-            radius: ['60%', '59%'],
-            animation: false,
-            color: '#2dc0c9',
-            // color: '#fff',
-            // animation:false,
-            data: [1],
-            labelLine: {
-              show: false,
-            },
-          },
-          {
-            name: '中间环形图',
-            type: 'pie',
-            radius: ['35%', '55%'],
-            avoidLabelOverlap: false,
-            animation: false,
-            itemStyle: {
-              color: '#80ADD2',
-              borderColor: '#3D4268',
-            },
-            label: {
-              show: false,
-              position: 'center',
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: '30',
-                fontWeight: 'bold',
-              },
-            },
-            labelLine: {
-              show: false,
-            },
-            data: [25, 25, 25, 25, 25, 25],
-          },
-        ],
-      });
-
-      function doing() {
-        // option.series[4].startAngle = option.series[4].startAngle - 1;
-        // option.series[6].data[0].value = option.series[6].data[0].value + 1;
-        const start = props.count - option.series[6].data[0].value;
-        let step = 1;
-        if (start / 1 < 10) {
-          step = 1;
-        } else if (start / 1 < 100) {
-          step = 10;
-        } else if (start / 1 < 1000) {
-          step = 100;
-        } else if (start / 1 < 10000) {
-          step = 1000;
-        }
-
-        let timer = setInterval(() => {
-          if (props.count > option.series[6].data[0].value) {
-            option.series[6].data[0].value += step;
-            setOptions(option);
-          } else {
-            clearInterval(timer);
-            timer = null;
-            routeTimer.value = setInterval(() => {
-              rotate();
-            }, 200);
-          }
-        }, 8);
-      }
-
-      function rotate() {
-        // option.series[4].startAngle = option.series[4].startAngle - 5;
-        // option.series[6].data[0].value = option.series[6].data[0].value + 5;
-        // setOptions(option);
-      }
-
-      // const timer = <Ref<NodeJS.Timer>>ref();
-      // const startTimer = () => {
-      //   timer.value = setInterval(doing, 1000);
-      // };
-
-      // const stopTimer = () => {
-      //   clearInterval(timer.value);
-      //   timer.value = null as unknown as NodeJS.Timer;
-      // };
-
-      onMounted(() => {
-        setOptions(option);
-        chartRef.value?.addEventListener('mouseover', () => {
-          // startTimer();
-          // doing();
-        });
-        chartRef.value?.addEventListener('mouseout', () => {
-          // stopTimer();
-        });
-        doing();
-      });
-      onUnmounted(() => {
-        clearInterval(routeTimer.value);
-        routeTimer.value = null;
-      });
-      return { chartRef };
-    },
-  });
-</script>

src/views/demo/charts/Pie1.vue

@@ -1,135 +0,0 @@
-<template>
-  <div ref="chartRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
-
-  import { useECharts } from '/@/hooks/web/useECharts';
-
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: 'calc(100vh - 78px)',
-      },
-    },
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-      const dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];
-      const yAxisData = ['原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7', '原因8', '原因9', '原因10'];
-      onMounted(() => {
-        setOptions({
-          backgroundColor: '#0f375f',
-          title: [
-            {
-              text: '各渠道投诉占比',
-              left: '2%',
-              top: '1%',
-              textStyle: {
-                color: '#fff',
-                fontSize: 14,
-              },
-            },
-            {
-              text: '投诉原因TOP10',
-              left: '40%',
-              top: '1%',
-              textStyle: {
-                color: '#fff',
-                fontSize: 14,
-              },
-            },
-            {
-              text: '各级别投诉占比',
-              left: '2%',
-              top: '50%',
-              textStyle: {
-                color: '#fff',
-                fontSize: 14,
-              },
-            },
-          ],
-          grid: [{ left: '50%', top: '7%', width: '45%', height: '90%' }],
-          tooltip: {
-            formatter: '{b} ({c})',
-          },
-          xAxis: [
-            {
-              gridIndex: 0,
-              axisTick: { show: false },
-              axisLabel: { show: false },
-              splitLine: { show: false },
-              axisLine: { show: false },
-            },
-          ],
-          yAxis: [
-            {
-              gridIndex: 0,
-              interval: 0,
-              data: yAxisData.reverse(),
-              axisTick: { show: false },
-              axisLabel: { show: true },
-              splitLine: { show: false },
-              axisLine: { show: true, lineStyle: { color: '#6173a3' } },
-            },
-          ],
-          series: [
-            {
-              name: '各渠道投诉占比',
-              type: 'pie',
-              radius: '30%',
-              center: ['22%', '25%'],
-              data: [
-                { value: 335, name: '客服电话' },
-                { value: 310, name: '奥迪官网' },
-                { value: 234, name: '媒体曝光' },
-                { value: 135, name: '质检总局' },
-                { value: 105, name: '其他' },
-              ],
-              labelLine: { show: false },
-              label: {
-                show: true,
-                formatter: '{b} \n ({d}%)',
-                color: '#B1B9D3',
-              },
-            },
-            {
-              name: '各级别投诉占比',
-              type: 'pie',
-              radius: '30%',
-              center: ['22%', '75%'],
-              labelLine: { show: false },
-              data: [
-                { value: 335, name: 'A级' },
-                { value: 310, name: 'B级' },
-                { value: 234, name: 'C级' },
-                { value: 135, name: 'D级' },
-              ],
-              label: {
-                show: true,
-                formatter: '{b} \n ({d}%)',
-                color: '#B1B9D3',
-              },
-            },
-            {
-              name: '投诉原因TOP10',
-              type: 'bar',
-              xAxisIndex: 0,
-              yAxisIndex: 0,
-              barWidth: '45%',
-              itemStyle: { color: '#86c9f4' },
-              label: { show: true, position: 'right', color: '#9EA7C4' },
-              data: dataAll.sort(),
-            },
-          ],
-        });
-      });
-      return { chartRef };
-    },
-  });
-</script>

src/views/demo/charts/PieAnimation.ts

@@ -1,410 +0,0 @@
-option = {
-  backgroundColor: '#142468',
-  title: {
-    //text: '实时旋转饼图'
-  },
-  series: [
-    {
-      type: 'pie',
-      zlevel: 1,
-      silent: true,
-      /*
-            radius
-            饼图的半径。可以为如下类型：
-            number：直接指定外半径值。
-            string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。
-            Array.<number|string>：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。
-            */
-      radius: ['98%', '97%'],
-      hoverAnimation: false,
-      color: 'rgba(88,142,197,0.5)',
-      // animation:false,    //charts3 no
-      label: {
-        show: false,
-      },
-      labelLine: {
-        show: false,
-      },
-      data: [1],
-    },
-    {
-      type: 'pie',
-      zlevel: 2,
-      silent: true,
-      radius: ['90%', '91%'],
-      startAngle: 50,
-      hoverAnimation: false,
-      // animation:false,    //charts3 no
-      label: {
-        show: false,
-      },
-      labelLine: {
-        show: false,
-      },
-      data: _pie2(),
-    },
-    {
-      type: 'pie',
-      zlevel: 3,
-      silent: true,
-      radius: ['88%', '87%'],
-      label: {
-        normal: {
-          show: false,
-        },
-      },
-      labelLine: {
-        normal: {
-          show: false,
-        },
-      },
-      data: _pie2(),
-    },
-    {
-      type: 'pie',
-      zlevel: 4,
-      silent: true,
-      radius: ['84%', '83%'],
-      label: {
-        normal: {
-          show: false,
-        },
-      },
-      labelLine: {
-        normal: {
-          show: false,
-        },
-      },
-      data: _pie3(),
-    },
-    {
-      type: 'pie',
-      zlevel: 5,
-      silent: true,
-      radius: ['80%', '78%'],
-      color: ['#fc8d89', '#46d3f3', 'rgba(203,203,203,.2)'],
-      startAngle: 50,
-      hoverAnimation: false,
-      // animation:false,    //charts3 no
-      label: {
-        normal: {
-          show: false,
-        },
-      },
-      data: [50, 20, 40],
-    },
-    {
-      name: '',
-      type: 'gauge',
-      splitNumber: 30, //刻度数量
-      min: 0,
-      max: 100,
-      radius: '73%', //图表尺寸
-      center: ['50%', '50%'],
-      startAngle: 90,
-      endAngle: -269.9999,
-      axisLine: {
-        show: false,
-        lineStyle: {
-          width: 0,
-          shadowBlur: 0,
-          color: [[1, '#0dc2fe']],
-        },
-      },
-      axisTick: {
-        show: false,
-        lineStyle: {
-          color: 'auto',
-          width: 2,
-        },
-        length: 20,
-        splitNumber: 5,
-      },
-      splitLine: {
-        show: true,
-        length: 32,
-        lineStyle: {
-          color: 'auto',
-        },
-      },
-      axisLabel: {
-        show: false,
-      },
-      pointer: {
-        //仪表盘指针
-        show: 0,
-      },
-      detail: {
-        show: 0,
-      },
-    },
-    {
-      name: '统计',
-      type: 'gauge',
-      splitNumber: 30, //刻度数量
-      min: 0,
-      max: 100,
-      radius: '68%', //图表尺寸
-      center: ['50%', '50%'],
-      startAngle: 90,
-      endAngle: -269.9999,
-      axisLine: {
-        show: true,
-        lineStyle: {
-          width: 0,
-          shadowBlur: 0,
-          color: [
-            [0, '#0dc2fe'],
-            [1, '#0dc2fe'],
-          ],
-        },
-      },
-      axisTick: {
-        show: true,
-        lineStyle: {
-          color: '#0dc2fe',
-          width: 2,
-        },
-        length: 20,
-        splitNumber: 5,
-      },
-      splitLine: {
-        show: true,
-        length: 20,
-        lineStyle: {
-          color: '#0dc2fe',
-        },
-      },
-      axisLabel: {
-        show: false,
-      },
-      pointer: {
-        //仪表盘指针
-        show: 0,
-      },
-      detail: {
-        borderColor: '#fff',
-        shadowColor: '#fff', //默认透明
-        shadowBlur: 2,
-        offsetCenter: [0, '0%'], // x, y，单位px
-        textStyle: {
-          // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-          color: '#fff',
-          fontSize: 50,
-        },
-        formatter: '{value}',
-      },
-      data: [
-        {
-          name: '',
-          value: 2020,
-        },
-      ],
-    },
-    {
-      type: 'pie',
-      zlevel: 20,
-      silent: true,
-      radius: ['60%', '59%'],
-      hoverAnimation: false,
-      color: '#2dc0c9',
-      // animation:false,
-      data: [1],
-      labelLine: {
-        normal: {
-          show: false,
-        },
-      },
-    },
-    {
-      name: '中间环形图',
-      type: 'pie',
-      radius: ['35%', '55%'],
-      avoidLabelOverlap: false,
-      hoverAnimation: false,
-      itemStyle: {
-        normal: {
-          color: '#80ADD2',
-          borderColor: '#3D4268',
-        },
-      },
-      label: {
-        normal: {
-          show: false,
-          position: 'center',
-        },
-        emphasis: {
-          show: true,
-          textStyle: {
-            fontSize: '30',
-            fontWeight: 'bold',
-          },
-        },
-      },
-      labelLine: {
-        normal: {
-          show: false,
-        },
-      },
-      data: [25, 25, 25, 25, 25, 25],
-    },
-  ],
-};
-
-function _pie1() {
-  const dataArr = [];
-  for (let i = 0; i < 8; i++) {
-    dataArr.push({
-      name: (i + 1).toString(),
-      value: 20,
-      itemStyle: {
-        normal: {
-          color: 'rgba(88,142,197,0.4)',
-          borderWidth: 0,
-          borderColor: 'rgba(0,0,0,0)',
-        },
-      },
-    });
-  }
-  return dataArr;
-}
-
-function _pie2() {
-  const dataArr = [];
-  for (let i = 0; i < 8; i++) {
-    if (i % 2 === 0) {
-      dataArr.push({
-        name: (i + 1).toString(),
-        value: 25,
-        itemStyle: {
-          normal: {
-            color: 'rgba(88,142,197,0.5)',
-            borderWidth: 0,
-            borderColor: 'rgba(0,0,0,0)',
-          },
-        },
-      });
-    } else {
-      dataArr.push({
-        name: (i + 1).toString(),
-        value: 20,
-        itemStyle: {
-          normal: {
-            color: 'rgba(0,0,0,0)',
-            borderWidth: 0,
-            borderColor: 'rgba(0,0,0,0)',
-          },
-        },
-      });
-    }
-  }
-  return dataArr;
-}
-
-function _pie3() {
-  const dataArr = [];
-  for (let i = 0; i < 100; i++) {
-    if (i % 2 === 0) {
-      dataArr.push({
-        name: (i + 1).toString(),
-        value: 25,
-        itemStyle: {
-          normal: {
-            color: 'rgb(126,190,255)',
-            borderWidth: 0,
-            borderColor: 'rgba(0,0,0,0)',
-          },
-        },
-      });
-    } else {
-      dataArr.push({
-        name: (i + 1).toString(),
-        value: 20,
-        itemStyle: {
-          normal: {
-            color: 'rgba(0,0,0,0)',
-            borderWidth: 0,
-            borderColor: 'rgba(0,0,0,0)',
-          },
-        },
-      });
-    }
-  }
-  return dataArr;
-}
-
-function _pieData(data) {
-  const _data = data;
-  const dataArr = [];
-  for (let i = 0; i < 5; i++) {
-    if (i === 2) {
-      const dt = data[0].unit ? 25 : Number(data[0].value);
-      dataArr.push({
-        name: (i + 1).toString(),
-        value: dt,
-        itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
-              {
-                offset: 0,
-                color: 'rgb(147,187,216)',
-              },
-              {
-                offset: 1,
-                color: '#588ec5',
-              },
-            ]),
-            borderWidth: 0,
-            borderColor: 'rgba(0,0,0,0.4)',
-          },
-        },
-      });
-    } else {
-      const dta = data[0].unit ? 25 : (1 - Number(data[0].value)) / 4;
-      dataArr.push({
-        name: (i + 1).toString(),
-        value: dta,
-        itemStyle: {
-          normal: {
-            color: 'rgba(0,0,0,0)',
-            borderWidth: 0,
-            borderColor: 'rgba(0,0,0,0)',
-          },
-        },
-      });
-    }
-  }
-  //console.log(dataArr)
-  return dataArr;
-}
-
-//鼠标事件：'click'，'dblclick'，'mousedown'，'mouseup'，'mouseover'，'mouseout'，'globalout'。
-
-myChart.on('mouseover', function (params) {
-  stopTimer();
-});
-
-myChart.on('mouseout', function (params) {
-  startTimer();
-});
-
-let timer;
-
-function doing() {
-  const option = myChart.getOption();
-  option.series[3].startAngle = option.series[3].startAngle - 1;
-  option.series[6].data[0].value = option.series[6].data[0].value + 1;
-  myChart.setOption(option);
-}
-
-function startTimer() {
-  timer = setInterval(doing, 100);
-}
-
-function stopTimer() {
-  clearInterval(timer);
-
-  xzTimer = null;
-}
-
-setTimeout(startTimer, 500);

src/views/demo/charts/SaleRadar.vue

@@ -1,100 +0,0 @@
-<template>
-  <Card title="销售统计" :loading="loading">
-    <div ref="chartRef" :style="{ width, height }"></div>
-  </Card>
-</template>
-<script lang="ts">
-  import type { Ref } from 'vue';
-  import { defineComponent, ref, watch } from 'vue';
-  import { Card } from 'ant-design-vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
-
-  export default defineComponent({
-    components: { Card },
-    props: {
-      loading: Boolean,
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: '400px',
-      },
-    },
-    setup(props) {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-      watch(
-        () => props.loading,
-        () => {
-          if (props.loading) {
-            return;
-          }
-          setOptions({
-            legend: {
-              bottom: 0,
-              data: ['Visits', 'Sales'],
-            },
-            tooltip: {},
-            radar: {
-              radius: '60%',
-              splitNumber: 8,
-              indicator: [
-                {
-                  name: '2017',
-                },
-                {
-                  name: '2017',
-                },
-                {
-                  name: '2018',
-                },
-                {
-                  name: '2019',
-                },
-                {
-                  name: '2020',
-                },
-                {
-                  name: '2021',
-                },
-              ],
-            },
-            series: [
-              {
-                type: 'radar' as 'custom',
-                symbolSize: 0,
-                areaStyle: {
-                  shadowBlur: 0,
-                  shadowColor: 'rgba(0,0,0,.2)',
-                  shadowOffsetX: 0,
-                  shadowOffsetY: 10,
-                  opacity: 1,
-                },
-                data: [
-                  {
-                    value: [90, 50, 86, 40, 50, 20],
-                    name: 'Visits',
-                    itemStyle: {
-                      color: '#9f8ed7',
-                    },
-                  },
-                  {
-                    value: [70, 75, 70, 76, 20, 85],
-                    name: 'Sales',
-                    itemStyle: {
-                      color: '#1edec5',
-                    },
-                  },
-                ],
-              },
-            ],
-          });
-        },
-        { immediate: true }
-      );
-      return { chartRef };
-    },
-  });
-</script>

src/views/demo/charts/data.ts

@@ -1,189 +0,0 @@
-export const mapData: any = [
-  {
-    name: '北京',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '天津',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '上海',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '重庆',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '河北',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '河南',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '云南',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '辽宁',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '黑龙江',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '湖南',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '安徽',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '山东',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '新疆',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '江苏',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '浙江',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '江西',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '湖北',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '广西',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '甘肃',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '山西',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '内蒙古',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '陕西',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '吉林',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '福建',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '贵州',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '广东',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '青海',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '西藏',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '四川',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '宁夏',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '海南',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '台湾',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '香港',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-  {
-    name: '澳门',
-    value: Math.round(Math.random() * 1000),
-    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)],
-  },
-];
-
-export const getLineData = (() => {
-  const category: any[] = [];
-  let dottedBase = +new Date();
-  const lineData: any[] = [];
-  const barData: any[] = [];
-
-  for (let i = 0; i < 20; i++) {
-    const date = new Date((dottedBase += 1000 * 3600 * 24));
-    category.push([date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'));
-    const b = Math.random() * 200;
-    const d = Math.random() * 200;
-    barData.push(b);
-    lineData.push(d + b);
-  }
-  return { barData, category, lineData };
-})();

src/views/demo/charts/map/Baidu.vue

@@ -1,45 +0,0 @@
-<template>
-  <div ref="wrapRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
-
-  import { useScript } from '/@/hooks/web/useScript';
-
-  const BAI_DU_MAP_URL = 'https://api.map.baidu.com/getscript?v=3.0&ak=OaBvYmKX3pjF7YFUFeeBCeGdy9Zp7xB2&services=&t=20210201100830&s=1';
-  export default defineComponent({
-    name: 'BaiduMap',
-    props: {
-      width: {
-        type: String,
-        default: '100%',
-      },
-      height: {
-        type: String,
-        default: 'calc(100vh - 78px)',
-      },
-    },
-    setup() {
-      const wrapRef = ref<HTMLDivElement | null>(null);
-      const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
-
-      async function initMap() {
-        await toPromise();
-        await nextTick();
-        const wrapEl = unref(wrapRef);
-        if (!wrapEl) return;
-        const BMap = (window as any).BMap;
-        const map = new BMap.Map(wrapEl);
-        const point = new BMap.Point(116.404, 39.915);
-        map.centerAndZoom(point, 15);
-        map.enableScrollWheelZoom(true);
-      }
-
-      onMounted(() => {
-        initMap();
-      });
-
-      return { wrapRef };
-    },
-  });
-</script>

src/views/demo/charts/map/Gaode.vue

@@ -1,47 +0,0 @@
-<template>
-  <div ref="wrapRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
-
-  import { useScript } from '/@/hooks/web/useScript';
-
-  const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=06313eb9c6563b674a8fd789db0692c3';
-
-  export default defineComponent({
-    name: 'AMap',
-    props: {
-      width: {
-        type: String,
-        default: '100%',
-      },
-      height: {
-        type: String,
-        default: 'calc(100vh - 78px)',
-      },
-    },
-    setup() {
-      const wrapRef = ref<HTMLDivElement | null>(null);
-      const { toPromise } = useScript({ src: A_MAP_URL });
-
-      async function initMap() {
-        await toPromise();
-        await nextTick();
-        const wrapEl = unref(wrapRef);
-        if (!wrapEl) return;
-        const AMap = (window as any).AMap;
-        new AMap.Map(wrapEl, {
-          zoom: 11,
-          center: [116.397428, 39.90923],
-          viewMode: '3D',
-        });
-      }
-
-      onMounted(() => {
-        initMap();
-      });
-
-      return { wrapRef };
-    },
-  });
-</script>

src/views/demo/charts/map/Google.vue

@@ -1,52 +0,0 @@
-<template>
-  <div ref="wrapRef" :style="{ height, width }"></div>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
-
-  import { useScript } from '/@/hooks/web/useScript';
-
-  const MAP_URL = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBQWrGwj4gAzKndcbwD5favT9K0wgty_0&signed_in=true';
-
-  export default defineComponent({
-    name: 'GoogleMap',
-    props: {
-      width: {
-        type: String,
-        default: '100%',
-      },
-      height: {
-        type: String,
-        default: 'calc(100vh - 78px)',
-      },
-    },
-    setup() {
-      const wrapRef = ref<HTMLDivElement | null>(null);
-      const { toPromise } = useScript({ src: MAP_URL });
-
-      async function initMap() {
-        await toPromise();
-        await nextTick();
-        const wrapEl = unref(wrapRef);
-        if (!wrapEl) return;
-        const google = (window as any).google;
-        const latLng = { lat: 116.404, lng: 39.915 };
-        const map = new google.maps.Map(wrapEl, {
-          zoom: 4,
-          center: latLng,
-        });
-        new google.maps.Marker({
-          position: latLng,
-          map: map,
-          title: 'Hello World!',
-        });
-      }
-
-      onMounted(() => {
-        initMap();
-      });
-
-      return { wrapRef };
-    },
-  });
-</script>

src/views/demo/threejs/damper.vue

@@ -1,840 +0,0 @@
-<template>
-  <div class="vent-home-header">
-    <Decoration5 class="header-icon" :dur="2" :color="['#21437F', '#2CF7FE']" style="width:500px;height:40px;" />
-    <div class="header-text">实时网络解算</div>
-  </div>
-  <div class="zl-box">
-    <div class="zl-container-box">
-      <div class="top-box">
-        <div class="left-box lr-box">
-          <div class="analysis-box">
-            <div class="item-top-title">通风网络分析</div>
-            <BorderBox1 backgroundColor="#00bfff05">
-              <div class="pie-group">
-                <div class="item-pie">
-                  <div class="pie">
-                    <div class="qiu qiu1">
-                      <p>{{ totalEnterNum }}</p>
-                    </div>
-                  </div>
-                  <div class="pie-data">
-                      <span class="data-text">总进风量</span>
-                  </div>
-                </div>
-                <div class="item-pie">
-                  <div class="pie">
-                    <div class="qiu qiu2">
-                      <p>{{ totalToNum }}</p>
-                    </div>
-                  </div>
-                  <div class="pie-data">
-                      <span class="data-text">总回风量</span>
-                  </div>
-                </div>
-              </div>
-              <div class="detail-data-group">
-                <div class="container-item" v-for="(data, index) in analysisDetailDataList" :key="index">
-                  <div class="item-icon">
-                    <SvgIcon class="icon-style" size="18" :name="data.icon" />
-                  </div>
-                  <div class="item-name">{{ data.name }}</div>
-                  <div v-if="data.code !== 'level' && data.code !== 'resistance'" class="item-value">{{ data.value }}</div>
-                  <div v-if="data.code == 'level'" class="item-value">
-                    <span class="signal-round signal-round-run"></span>
-                  </div>
-                  <div v-if="data.code == 'resistance'" class="item-value">{{ totalPa }}</div>
-                </div>
-              </div>
-              <div class="feature-group">
-                <div class="feature-item">
-                  <div class="pie">
-                    <Progress
-                      type="circle"
-                      :width="50"
-                      :stroke-color="{
-                        '0%': '#FC9C1D',
-                        '100%': '#1FF8FB',
-                      }"
-                      :percent="Number(rate1)"
-                    ></Progress>
-                  </div>
-                  <div class="data">可靠度</div>
-                </div>
-                <div class="feature-item">
-                  <div class="pie">
-                    <Progress
-                      type="circle"
-                      :width="50"
-                      :stroke-color="{
-                        '0%': '#A02EFF',
-                        '100%': '#1FF8FB',
-                      }"
-                      :percent="Number(rate2)"
-                    ></Progress>
-                  </div>
-                  <div class="data">风阻合理度</div>
-                </div>
-                <div class="feature-item">
-                  <div class="pie">
-                    <Progress
-                      type="circle"
-                      :width="50"
-                      :stroke-color="{
-                        '0%': '#108ee9',
-                        '100%': '#1FF8FB',
-                      }"
-                      :percent="Number(rate3)"
-                    ></Progress>
-                  </div>
-                  <div class="data">有效风量率</div>
-                </div>
-              </div>  
-            </BorderBox1>
-          </div>
-        
-        </div>
-        <div class="right-box lr-box">
-          <div class="sensor-box">
-            <div class="item-top-title">传感器实时数据</div>
-            <BorderBox1 class="table-box">
-              <div class="table-container">
-                <a-table :columns="sensorColumns" :data-source="sensorDataList" :pagination="false" size="small" />
-              </div>
-            </BorderBox1>
-          </div>
-          <div class="warning-box">
-            <div class="item-top-title">预警报警信息</div>
-            <BorderBox1 class="table-box">
-              <div class="table-container">
-                <a-table :columns="warningColumns" :data-source="warningDataList" :pagination="false" size="small" >
-                  <template #bodyCell="{ column, record }">
-                    <div v-if="column.dataIndex == 'level'">
-                      <span class="signal-round" :class="{ 'signal-round-red': record['level'] == 1, 'signal-round-orange': record['level'] == 2, 'signal-round-yellow': record['level'] == 3 }"></span>
-                    </div>
-                  </template>
-                </a-table>
-              </div>
-            </BorderBox1>
-          </div> 
-        </div>
-      </div>
-      <div class="bottom-box">
-        <div class="bottom-left bottom-lr-box">
-           <BorderBox11 title="实时网络解算" :color="['#00FFFF']">
-              <div class="network-top">
-                <div class="network-top-left">
-                  <div>
-                    准确率：
-                    <span class="accuracy-rate">95%</span>
-                  </div>
-                  <div>
-                    迭代误差：
-                    <span class="error-rate">0.0941%</span>
-                  </div>
-                </div>
-                <div class="network-top-right">
-                  本次解算时间：
-                  <span class="time">{{ currentTime }}</span>
-                </div>
-              </div>
-              <div class="table-container">
-                <a-table :columns="networkColumns" :data-source="networkDataList" :pagination="false" size="small" />
-              </div>
-          </BorderBox11>
-        </div>
-        <div class="bottom-right bottom-lr-box">
-          <BorderBox11 title="最大阻力路线">
-            <div class="zl-top">
-              <div>
-                <span class="btn active">1号回风斜井</span>
-                <span class="btn">2号回风斜井</span>
-              </div>
-              <div>
-                路线阻力
-                <span class="data">{{ totalPa }}</span>
-                Pa
-              </div>
-            </div>
-            <div class="zl-container">
-              <div class="zl-path-item position1">
-                <div class="title">副平硐</div>
-              </div>
-              <div class="zl-path-item position2">
-                <div class="title">5煤组盘区辅运巷</div>
-              </div>
-              <div class="zl-path-item position3">
-                <div class="title">1521辅运顺槽</div>
-              </div>
-              <div class="zl-path-item position4">
-                <div class="title">15212综采工作面</div>
-              </div>
-              <div class="zl-path-item position5">
-                <div class="title">15211辅运顺槽</div>
-              </div>
-              <div class="zl-path-item position6">
-                <div class="title">15212胶运顺槽</div>
-              </div>
-              <div class="zl-path-item position7">
-                <div class="title">15212回风顺槽回风联巷</div>
-              </div>
-              <div class="zl-path-item position8">
-                <div class="title">5煤组盘曲回风大巷</div>
-              </div>
-              <div class="zl-path-item position9">
-                <div class="title">回风斜井联络巷</div>
-              </div>
-              <div class="zl-path-item position10">
-                <div class="title">1盘曲回风斜井</div>
-              </div>
-            </div>
-          </BorderBox11>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, onMounted, onUnmounted } from 'vue';
-  import { Icon as SvgIcon  } from '/@/components/Icon';
-  import { Progress } from 'ant-design-vue';
-  import { BorderBox11, BorderBox1,  Decoration5  } from '@kjgl77/datav-vue3';
-  import { sensorColumns, sensorData, networkColumns, networkData, warningColumns, warningData } from './network.data'
-  import dayjs from 'dayjs'
-
-  // import { registerApps } from '/@/qiankun';
-  // import { useGlobSetting } from '/@/hooks/setting';
-
-  // const globSetting = useGlobSetting();
-  // const openQianKun = globSetting.openQianKun;
-  let count = 0;
-  const sensorDataList = ref<any[]>([])
-  const networkDataList = ref<any[]>([])
-  const warningDataList = ref<any[]>([])
-  const currentTime = ref(dayjs(new Date('2022-10-11 15:03:11').getTime() + count).format('YYYY-MM-DD HH:mm:ss'))
-
-  const totalEnterNum = ref(23855+'')
-  const totalToNum = ref(244436+'')
-  const totalPa = ref(1640+'')
-  const rate1 = ref(95+'')
-  const rate2 = ref(95+'')
-  const rate3 = ref(95+'')
-
-
-  const analysisDetailDataList = ref([
-    {
-      code:'',
-      name: '通风巷道规模（m）',
-      value: '21000',
-      icon: 'path-icon1'
-    },
-    {
-      code: 'level',
-      name: '通风难易程度',
-      value: '21000',
-      icon: 'path-icon2'
-    },
-    {
-      code: 'resistance',
-      name: '总阻力',
-      value: totalPa.value,
-      icon: 'path-icon3'
-    },
-    {
-      code: '',
-      name: '等积孔（㎡）',
-      value: '11.27',
-      icon: 'path-icon4'
-    },
-  ])
-  
-  
-  
-  let timer: null | NodeJS.Timeout = null;
-  function getMonitorData() {
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(async () => {
-        sensorDataList.value = sensorData()
-        networkDataList.value = networkData()
-        warningDataList.value = warningData()
-        currentTime.value = dayjs(new Date('2022-10-11 15:03:11').getTime() + (++count*5000)).format('YYYY-MM-DD HH:mm:ss')
-        totalEnterNum.value = Number(Math.random() * 200 - 100 + 23855).toFixed(0)
-        totalToNum.value = Number(Math.random() * 200 - 100 + 244436).toFixed(0)
-        totalPa.value = Number(Math.random() * 50 - 25 + 1640).toFixed(0)
-        rate1.value = Number(Math.random() * 4 - 2 + 95).toFixed(0)
-        rate2.value = Number(Math.random() * 4 - 2 + 95).toFixed(0)
-        rate3.value = Number(Math.random() * 4 - 2 + 95).toFixed(0)
-        sensorDataList.value = sensorData()
-        networkDataList.value = networkData()
-        warningDataList.value = warningData()
-        if (timer) {
-          timer = null;
-        }
-        getMonitorData();
-      }, 5000)
-    }
-  }
-
-
-  onMounted(() => {
-    getMonitorData()
-    // if (document.body.getAttribute('class')?.includes('style-styleTwo')) document.body.removeAttribute('class', 'style-styleTwo');
-  });
-
-  onUnmounted(() => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
-    }
-  });
-</script>
-<style scoped lang="less">
-  @ventSpace: zxm;
-  .vent-home-header {
-    width: 100%;
-    height: 100px;
-    position: fixed;
-    top: 0;
-    background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
-    background-size: contain;
-    display: flex;
-    justify-content: center;
-    z-index: 99;
-    .header-icon{
-      margin-top: 45px;
-    }
-    .header-text{
-      position: fixed;
-      top: 18px;
-      color: #fff;
-      font-size: 26px;
-    }
-  }
-  .zl-box{
-    width: 100%;
-    height: calc(100%);
-    top: 0px;
-    position: relative;
-    overflow: hidden;
-    color: #fff;
-    // background: url('/@/assets/images/vent/path/bg.png') no-repeat;
-    background-position: center;
-    background-size: cover;
-    .modal-box{
-      position: relative;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-    }
-  }
-  .zl-container-box{
-    width: 100%;
-    height: 100%;
-    top: 10px;
-    position: absolute;
-    z-index: 99;
-    pointer-events: none;
-    .top-box{
-      display: flex;
-      justify-content: space-between;
-      height: calc(70% - 20px);
-      .lr-box{
-        width: 374px;
-        margin-top: 10px;
-      }
-      .left-box{
-        .analysis-box{
-          position: relative;
-          .pie-group{
-          display: flex;
-          flex-direction: row;
-          padding-top: 30px;
-          .item-pie{
-            flex: 1;
-            padding: 5px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            .pie{
-              width: 140px;
-              height: 80px;
-              background: url('/@/assets/images/vent/path/di.png') no-repeat;
-              background-size: contain;
-              display: flex;
-              justify-content: center;
-              .qiu1{
-                background: url('/@/assets/images/vent/path/cicle01.png') no-repeat center;
-              }
-              .qiu2{
-                background: url('/@/assets/images/vent/path/cicle04.png') no-repeat center;
-              }
-              .qiu{
-                position: relative;
-                width: 60px;
-                height: 60px;
-                background-size: 100%;
-                display: flex;
-                justify-content: center;
-                padding-top: 18px;
-                &::before{
-                  content: '';
-                  display: block;
-                  width: 60px;
-                  height: 60px;
-                  position: absolute;
-                  left: 50%;
-                  top: 50%;
-                  transform: translate(-50%, -50%);
-                  border-radius: 50%;
-                  border: 3px solid rgba(255, 255, 255, 0.5);
-                  animation: scale 2s linear infinite;
-                }
-              }
-            }
-            
-            .pie-data{
-              width: 140px;
-              height: 20px;
-              display: flex;
-              justify-content: center;
-              position: relative;
-              background: url('/@/assets/images/vent/path/pie-line.png');
-              .data-text{
-                display: block;
-                position: absolute;
-                top: -8px;
-              }
-            }
-          }
-        }
-        .detail-data-group{
-          width: 100%;;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          margin-top: 15px;
-          .container-item {
-            width: 307px;
-            height: 63px;
-            display: flex;
-            position: relative;
-            background: url('/@/assets/images/vent/plane-bottom.png') no-repeat;
-            background-size: auto;
-            background-position: bottom;
-            padding: 10px 30px;
-            &::before {
-              content: '';
-              display: block;
-              width: 100%;
-              height: 5px;
-              position: absolute;
-              top: 62px;
-              left: 0;
-              background-color: #73f4ff66;
-              backdrop-filter: blur(5px);
-            }
-            .item-icon {
-              width: 60px;
-              height: 45px;
-              background: url('/@/assets/images/vent/plane-icon-bg.png') no-repeat;
-              background-size: cover;
-              .icon-style {
-                margin: 10px 0 0 18px;
-              }
-            }
-            .item-name {
-              width: 180px;
-              line-height: 60px;
-              margin-left: 5px;
-              text-align: left;
-            }
-            .item-value {
-              position: relative;
-              height: 26px;
-              line-height: 24px;
-              margin: 15px 0;
-              text-align: center;
-              width: 80px;
-              border: 1px solid #00f5fe;
-              border-radius: 13px;
-              background: linear-gradient(to right, #00f5fe44, #0090ff44);
-              &::before {
-                width: 6px;
-                height: 6px;
-                content: '';
-                position: absolute;
-                left: -3px;
-                top: 8px;
-                background: #ffa500;
-                border-radius: 3px;
-              }
-            }
-          }
-        }
-        .feature-group{
-          display: flex;
-          flex-direction: row;
-          padding: 20px;
-          margin-top: 15px;
-          .feature-item{
-            width: 108px;
-            height: 120px;
-            background: url('/@/assets/images/vent/path/path-feature-bg.png');
-            display: flex;
-            flex-direction: column;
-            // justify-content: center;
-
-            .pie{
-              display: flex;
-              justify-content: center;
-            }
-            .data{
-              margin-top: 15px;
-              font-size: 12px;
-              scale: 0.9;
-              text-align: center;
-            }
-          }
-        }
-        }
-      }
-      .right-box{
-        display: flex;
-        flex-direction: column;
-        .sensor-box, .warning-box{
-          position: relative;
-          // min-height: 220px;
-          // max-height: 250px;
-          .table-box{
-            height: 280px;
-            position: relative;
-            .table-container{
-              margin: 25px 20px 20px;
-              height: 250px;
-              position: absolute;
-            }
-          }
-        }
-        .sensor-box{
-          .item-top-title{
-            &::after{
-              left: 110px;
-            }
-            &::before{
-              left: 265px;
-            }
-          }
-        }
-        .warning-box{
-          margin-top: 10px;
-        }
-      }
-    }
-    .bottom-box{
-      width: 100%;
-      height: calc(30% - 20px);
-      display: flex;
-      justify-content: space-between;
-      margin-top: 0px;
-      position: relative;
-      top: -20px;
-      .bottom-lr-box{
-        flex: 1;
-        display: flex;
-        justify-content: center;
-        
-      }
-      .bottom-left{
-        margin-right: 10px;
-        .network-top{
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          position: relative;
-          top: 55px;
-          padding: 0 30px;
-          .network-top-left{
-            display: flex;
-            div{
-              margin-right: 20px;
-            }
-            span{
-              font-family: 'douyuFont';
-              font-size: 15px;
-            }
-            .accuracy-rate{
-              color: #FFA500;
-            }
-            .error-rate{
-              color: #00f5fe;
-            }
-          }
-          .time{
-            color: #949494;
-          }
-        }
-        .table-container{
-          height: 150px;
-          margin-top: 55px;
-          margin-left: 15px;
-          margin-right: 10px;
-        }
-      }
-      .bottom-right{
-        margin-left: 10px;
-        
-        .zl-top{
-          width: calc(100% - 30px);
-          padding: 0 20px;
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          position: relative;
-          top: 35px;
-          z-index: 99;
-          margin: 10px;
-          border-bottom: 1px solid #00f5fe88;
-          .btn{
-            padding: 3px 10px;
-            border-top: 1px solid #c6c6c6;
-            background-image: linear-gradient(#c2c2c2aa, #b3b3b388 20%, #5a5a5a88);
-            cursor: pointer;
-            margin-right: 5px;
-            &:hover, &:active{
-              border-top: 1px solid #00f5fe;
-              background-image: linear-gradient(#00f5feaa, #1adce288 20%, #00848988);
-            }
-          }
-          .active{
-            border-top: 1px solid #00f5fe;
-            background-image: linear-gradient(#00f5feaa, #1adce288 20%, #00848988);
-          }
-          .data{
-            font-family: 'douyuFont';
-            color: #FFA500;
-            font-size: 15px;
-          }
-        }
-        .zl-container{
-          width: 100%;
-          height: 100%;
-          margin: 0 15px;
-          background: url('/@/assets/images/vent/path/zl-bg1.png') no-repeat;
-          background-size: 920px 190px;
-          position: relative;
-          &::after{
-            content: '';
-            display: block;
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            top: 85px;
-            background: url('/@/assets/images/vent/path/zl-bg2.png') no-repeat;
-            background-size: 920px 100px;
-          }
-        }
-        .zl-path-item{
-          height: 67px;
-          background: url('/@/assets/images/vent/path/zl-path-item-bg.png') no-repeat;
-          background-size: auto;
-          background-position:center bottom;
-          position: absolute;
-          scale: 0.9;
-          .title{
-            position: relative;
-            top: -20px;
-            text-align: center;
-            font-size: 12px;
-            background: #00f5fe33;
-            padding: 3px 5px;
-            backdrop-filter: blur(5px);
-          }
-        }
-        .position10{
-          top: 130px;
-          left: 0px;
-        }
-        .position9{
-          top: 52px;
-          left: 100px;
-        }
-        .position8{
-          top: 132px;
-          left: 220px;
-        }
-        .position7{
-          top: 128px;
-          left: 420px;
-        }
-        .position6{
-          top: 60px;
-          left: 320px;
-        }
-        .position5{
-          top: 120px;
-          left: 580px;
-        }
-        .position4{
-          top: 123px;
-          left: 690px;
-        }
-        .position3{
-          top: 103px;
-          left: 830px;
-        }
-        .position2{
-          top: 90px;
-          left: 740px;
-        }
-        .position1{
-          top: 80px;
-          left: 535px;
-        }
-      }
-    }
-  }
-
-  .item-top-title{
-    width: 374px;
-    height: 32px;
-    text-align: center;
-    line-height: 34px;
-    font-size: 15px;
-    font-weight: 600;
-    color: #fafafa;
-    position: absolute;
-    padding-top: 0px;
-    top: -9px;
-    &::before{
-      content: '';
-      display: block;
-      width: 40px;
-      height: 1px;
-      position: absolute;
-      left: 255px;
-      top:50%; 
-      transform:translateY(-50%);
-      -webkit-transform:translate(-50%,-50%);
-      background-color: #00d4fe88;
-    }
-    &::after{
-      content: '';
-      display: block;
-      width: 40px;
-      height: 1px;
-      position: absolute;
-      left: 120px;
-      top:50%; 
-      transform:translateY(-50%);
-      -webkit-transform:translate(-50%,-50%);
-      background-color: #00d4fe88;
-    }
-  }
-  .signal-round{
-    display: inline-block;
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-    position: relative;
-    top: -3px;
-    &::after {
-      display: block;
-      content: '';
-      position: absolute;
-      width: 8px;
-      height: 8px;
-      top: -2px;
-      left: -2px;
-      border-radius: 50%;
-      background-color: #daffc044;
-      box-shadow: 0 0 1px 1px #c6ff7722;
-    }
-  }
-  .signal-round-run {
-    background-color: #67fc00;
-    &::after {
-      background-color: #daffc044;
-      box-shadow: 0 0 1px 1px #c6ff7722;
-    }
-  }
-  .signal-round-red {
-    background-color: #FF3823;
-    &::after {
-      background-color: #FF382344;
-      box-shadow: 0 0 1px 1px #FF382333;
-    }
-  }
-  .signal-round-orange {
-    background-color: #FF9B17;
-    &::after {
-      background-color: #FF9B1744;
-      box-shadow: 0 0 1px 1px #FF9B1733;
-    }
-  }
-  .signal-round-yellow {
-    background-color: #FFFF00;
-    &::after {
-      background-color: #FFFF0044;
-      box-shadow: 0 0 1px 1px #FFFF0033;
-    }
-  }
-  .table-container{
-    overflow-y: auto;
-    overflow-x: hidden;
-    pointer-events: auto;
-    &::-webkit-scrollbar {
-      width: 4px;
-      height: 8px;
-      background-color: #f5f5f500;
-    }
-    &::-webkit-scrollbar-track {
-      background-color: #ffffff33;
-      border-radius: 10px;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: #cccccc44;
-      border-radius: 10px;
-    }
-  }
-  @keyframes scale {
-    0% {
-      transform: translate(-50%, -50%) scale(0.9);
-      opacity: 1;
-    }
-    100% {
-      transform: translate(-50%, -50%) scale(1.5);
-      opacity: 0;
-    }
-  }
-:deep(.@{ventSpace}-progress-text){
-  color: #fff !important;
-}
-:deep(.@{ventSpace}-table-thead){
-  background-color: transparent !important;
-  & > tr{
-    border: 1px solid #00f5fe !important;
-  }
-  & > tr > th{
-    // border: none !important;
-    color: #00f5fe !important;
-    border-top: 1px solid #00f5fe !important;
-    border-bottom: 1px solid #00f5fe !important;
-    border-left: none !important;
-    border-right: none !important;
-    font-size: 13px;
-  }
-}
-:deep(.@{ventSpace}-table-tbody){
-  & > tr > td{
-    font-size: 13px;
-  }
-}
-:deep(.@{ventSpace}-table-small){
-  border: none !important;
-}
-:deep(.@{ventSpace}-layout){
-  background: transparent !important;
-}
-</style>

src/views/demo/threejs/network.data.ts

@@ -1,218 +0,0 @@
-import { BasicColumn } from '/@/components/Table';
-
-let sensor1 = Number(7.78).toFixed(2),
-  sensor2 = Number(1).toFixed(2),
-  sensor3 = Number(0.53).toFixed(2),
-  sensor4 = Number(0.62).toFixed(2),
-  sensor5 = Number(1.06).toFixed(2);
-
-export const sensorColumns: BasicColumn[] = [
-  {
-    title: '位置',
-    dataIndex: 'location',
-    width: 180,
-    align: 'center',
-  },
-  {
-    title: '数值',
-    dataIndex: 'value',
-    width: 100,
-    align: 'center',
-  },
-  {
-    title: '单位',
-    dataIndex: 'unit',
-    width: 100,
-    align: 'center',
-  },
-];
-export const sensorData = () => {
-  sensor1 = Number(Math.random() * 2 - 1 + 7.78).toFixed(2);
-  sensor2 = Number(Math.random() + 0.13).toFixed(2);
-  sensor3 = Number(Math.random() + 0.19).toFixed(2);
-  sensor4 = Number(Math.random() + 0.17).toFixed(2);
-  sensor5 = Number(Math.random() + 0.81).toFixed(2);
-  return [
-    {
-      location: '副平硐',
-      value: sensor1,
-      unit: 'm/s',
-    },
-    {
-      location: '5煤组盘区辅运巷',
-      value: sensor2,
-      unit: 'm/s',
-    },
-    {
-      location: '15212辅运顺槽',
-      value: sensor3,
-      unit: 'm/s',
-    },
-    {
-      location: '15212胶运顺槽',
-      value: sensor4,
-      unit: 'm/s',
-    },
-    {
-      location: '15212回风顺槽',
-      value: sensor5,
-      unit: 'm/s',
-    },
-  ];
-};
-
-export const networkColumns: BasicColumn[] = [
-  {
-    title: 'ID',
-    dataIndex: 'id',
-    width: 120,
-    align: 'center',
-  },
-  {
-    title: '名称',
-    dataIndex: 'name',
-    width: 120,
-    align: 'center',
-  },
-  {
-    title: '风量（m³/min）',
-    dataIndex: 'fl',
-    width: 120,
-    align: 'center',
-  },
-  {
-    title: '风速（m/s）',
-    dataIndex: 'fs',
-    width: 120,
-    align: 'center',
-  },
-  {
-    title: '阻力（Pa）',
-    dataIndex: 'zl',
-    width: 120,
-    align: 'center',
-  },
-  {
-    title: '面积（㎡）',
-    dataIndex: 'mj',
-    width: 120,
-    align: 'center',
-  },
-  {
-    title: '灵敏度',
-    dataIndex: 'lmd',
-    width: 120,
-    align: 'center',
-  },
-];
-export const networkData = () => {
-  return [
-    {
-      id: '40008',
-      name: '副平硐',
-      fl: Number(Math.random() * 100.68 + 10341.18).toFixed(2),
-      fs: sensor1,
-      zl: Number(Math.random() * 10 + 80).toFixed(2),
-      mj: '21.9',
-      lmd: Number(Math.random() * 0.2).toFixed(2),
-    },
-    {
-      id: '40009',
-      name: '5煤组盘区辅运巷',
-      fl: Number(Math.random() * 100.68 + 1212).toFixed(2),
-      fs: sensor2,
-      zl: Number(Math.random() * 10 + 90).toFixed(2),
-      mj: '20.2',
-      lmd: Number(Math.random() * 0.2).toFixed(2),
-    },
-    {
-      id: '40010',
-      name: '15212辅运顺槽',
-      fl: Number(Math.random() * 40.68 + 645.54).toFixed(2),
-      fs: sensor3,
-      zl: Number(Math.random() * 10 + 55).toFixed(2),
-      mj: '20.3',
-      lmd: Number(Math.random() * 0.2).toFixed(2),
-    },
-    {
-      id: '40011',
-      name: '15212胶运顺槽',
-      fl: Number(Math.random() * 40.68 + 645.64).toFixed(2),
-      fs: sensor4,
-      zl: Number(Math.random() * 10 + 52).toFixed(2),
-      mj: '18.7',
-      lmd: Number(Math.random() * 0.2).toFixed(2),
-    },
-    {
-      id: '40012',
-      name: '15212回风顺槽',
-      fl: Number(Math.random() * 100.68 + 1361.04).toFixed(2),
-      fs: sensor5,
-      zl: Number(Math.random() * 10 + 52).toFixed(2),
-      mj: '21.4',
-      lmd: Number(Math.random() * 0.2).toFixed(2),
-    },
-  ];
-};
-
-export const warningColumns: BasicColumn[] = [
-  {
-    title: '位置',
-    dataIndex: 'location',
-    width: 180,
-    align: 'center',
-  },
-  {
-    title: '类型',
-    dataIndex: 'type',
-    width: 100,
-    align: 'center',
-  },
-  {
-    title: '等级',
-    dataIndex: 'level',
-    width: 70,
-    align: 'center',
-  },
-  {
-    title: '信息',
-    dataIndex: 'msg',
-    width: 120,
-    align: 'center',
-  },
-];
-export const warningData = () => {
-  return [
-    {
-      location: '副平硐',
-      type: '风速',
-      level: '1',
-      msg: '风速超限',
-    },
-    {
-      location: '5煤组盘区辅运巷',
-      type: '风量',
-      level: '2',
-      msg: '风量不足',
-    },
-    {
-      location: '副平硐',
-      type: '瓦斯',
-      level: '2',
-      msg: '瓦斯超限',
-    },
-    {
-      location: '15212胶运顺槽',
-      type: 'CO',
-      level: '3',
-      msg: 'CO超限',
-    },
-    {
-      location: '15212回风顺槽',
-      type: '瓦斯',
-      level: '3',
-      msg: '瓦斯超限',
-    },
-  ];
-};
-

src/views/vent/home/clique/components/3Dmap/3dMap.ts

@@ -4,12 +4,12 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 import gsap from 'gsap';
 import { gradientColors } from '/@/utils/threejs/util';
-import * as dat from 'dat.gui';
+// import * as dat from 'dat.gui';
 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
 import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
 
-const gui = new dat.GUI();
-gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
 
 class earthtMap {
   container: HTMLCanvasElement | null; //canvas 容器

src/views/vent/monitorManager/alarmMonitor/fire/closeWall.vue

@@ -1,539 +1,542 @@
 <template>
-    <div class="closeWall">
-        <div class="title">
-            <div class="box-container">
-                <div class="contents">
-                    <img src="../../../../../assets/images/fire/pie.png" alt="" />
-                    <span class="text">{{ topContent.temperature }}</span>
-                    <span class="dw">°C</span>
-                </div>
-                <div class="contents">
-                    <div class="text">
-                        <span class="text-label">位置 : </span>
-                        <span class="text-value">{{ topContent.position }}</span>
-                    </div>
-                    <div class="text">
-                        <span class="text-label">时间 : </span>
-                        <span class="text-value">{{ topContent.time }}</span>
-                    </div>
-                </div>
-            </div>
-            <div class="box-container">
-                <div class="text1">{{ topContent.warn }}</div>
-            </div>
+  <div class="closeWall">
+    <div class="title">
+      <div class="box-container">
+        <div class="contents">
+          <img src="../../../../../assets/images/fire/pie.png" alt="" />
+          <span class="text">{{ topContent.temperature }}</span>
+          <span class="dw">°C</span>
         </div>
-        <div class="content">
-            <div class="title-b">采空区密闭参数</div>
-            <div class="card-btn">
-                <div :class="activeIndex == index ? 'box-container1' : 'box-container'" v-for="(item, index) in mbList"
-                    :key="index" @click="btnClick(item, index)">
-                    <div class="box-label">
-                        <span> {{ item.label }}</span>
-                        <span>{{ item.dw }}</span>
-                    </div>
-                    <div class="box-item box-item1">
-                        <span class="text-t">{{ `${item.label1}:` }}</span>
-                        <span class="text-v">{{ item.nd }}</span>
-                    </div>
-                    <div class="box-item box-item2">
-                        <span class="text-t">{{ `${item.label2}:` }}</span>
-                        <span class="text-v">{{ item.time1 }}</span>
-                    </div>
-                    <div class="box-item box-item3">
-                        <span class="text-t">{{ `${item.label3}:` }}</span>
-                        <span class="text-v">{{ item.address }}</span>
-                    </div>
-                </div>
-            </div>
-            <div class="echart-box">
-                <div class="title-f">
-                    <div class="title-text">{{ `${type}趋势` }}</div>
-                </div>
-                <div class="echarts-box">
-                    <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName"></echartLine1>
-                </div>
-            </div>
+        <div class="contents">
+          <div class="text">
+            <span class="text-label">位置 : </span>
+            <span class="text-value">{{ topContent.position }}</span>
+          </div>
+          <div class="text">
+            <span class="text-label">时间 : </span>
+            <span class="text-value">{{ topContent.time }}</span>
+          </div>
         </div>
+      </div>
+      <div class="box-container">
+        <div class="text1">{{ topContent.warn }}</div>
+      </div>
     </div>
+    <div class="content">
+      <div class="title-b">采空区密闭参数</div>
+      <div class="card-btn">
+        <div
+          :class="activeIndex == index ? 'box-container1' : 'box-container'"
+          v-for="(item, index) in mbList"
+          :key="index"
+          @click="btnClick(item, index)"
+        >
+          <div class="box-label">
+            <span> {{ item.label }}</span>
+            <span>{{ item.dw }}</span>
+          </div>
+          <div class="box-item box-item1">
+            <span class="text-t">{{ `${item.label1}:` }}</span>
+            <span class="text-v">{{ item.nd }}</span>
+          </div>
+          <div class="box-item box-item2">
+            <span class="text-t">{{ `${item.label2}:` }}</span>
+            <span class="text-v">{{ item.time1 }}</span>
+          </div>
+          <div class="box-item box-item3">
+            <span class="text-t">{{ `${item.label3}:` }}</span>
+            <span class="text-v">{{ item.address }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="echart-box">
+        <div class="title-f">
+          <div class="title-text">{{ `${type}趋势` }}</div>
+        </div>
+        <div class="echarts-box">
+          <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, reactive, watch, defineProps } from 'vue';
-import echartLine1 from './common/echartLine1.vue'
+  import { onMounted, ref, reactive, watch, defineProps } from 'vue';
+  import echartLine1 from './common/echartLine1.vue';
 
-let props = defineProps({
+  let props = defineProps({
     listData: Object,
-});
+  });
 
-//密闭-顶部区域数据
-let topContent = reactive({
+  //密闭-顶部区域数据
+  let topContent = reactive({
     temperature: 0,
     position: '',
     time: '',
     warn: '',
-})
-//密闭参数列表
-let mbList = reactive([
+  });
+  //密闭参数列表
+  let mbList = reactive([
     {
-        label: 'O₂',
-        dw: '(%)',
-        label1: '浓度',
-        label2: '时间',
-        label3: '位置',
-        nd: '0',
-        time1: '',
-        address: '',
+      label: 'O₂',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
     },
     {
-        label: 'CO',
-        dw: '(ppm)',
-        label1: '浓度',
-        label2: '时间',
-        label3: '位置',
-        nd: '0',
-        time1: '',
-        address: '',
+      label: 'CO',
+      dw: '(ppm)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
     },
     {
-        label: 'CO₂',
-        dw: '(%)',
-        label1: '浓度',
-        label2: '时间',
-        label3: '位置',
-        nd: '0',
-        time1: '',
-        address: '',
+      label: 'CO₂',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
     },
     {
-        label: 'CH₄',
-        dw: '(%)',
-        label1: '浓度',
-        label2: '时间',
-        label3: '位置',
-        nd: '0',
-        time1: '',
-        address: '',
+      label: 'CH₄',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
     },
     {
-        label: 'C₂H₂',
-        dw: '(ppm)',
-        label1: '浓度',
-        label2: '时间',
-        label3: '位置',
-        nd: '0',
-        time1: '',
-        address: '',
+      label: 'C₂H₂',
+      dw: '(ppm)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
     },
     {
-        label: 'C₂H₄',
-        dw: '(ppm)',
-        label1: '浓度',
-        label2: '时间',
-        label3: '位置',
-        nd: '0',
-        time1: '',
-        address: '',
+      label: 'C₂H₄',
+      dw: '(ppm)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
     },
-])
+  ]);
 
+  //当前密闭参数激活选项
+  let activeIndex = ref(0);
+  //当前激活密闭参数类型
+  let type = ref('O₂');
 
-
-//当前密闭参数激活选项
-let activeIndex = ref(0)
-//当前激活密闭参数类型
-let type = ref('O₂')
-
-let echartDataSg1 = reactive({
+  let echartDataSg1 = reactive({
     xData: [],
     yData: [],
     lengedData: 'O₂',
-    lengedDataName:'(%)'
-
-})
-let echartDataSgList = reactive<any[]>([])
-
-//密闭参数选项切换
-function btnClick(item, ind) {
-    activeIndex.value = ind
-    type.value = item.label
-    echartDataSg1.xData.length = 0
-    echartDataSg1.yData.length = 0
-    echartDataSg1.lengedData = type.value
-    echartDataSg1.lengedDataName = item.dw
-    
+    lengedDataName: '(%)',
+  });
+  let echartDataSgList = reactive<any[]>([]);
+
+  //密闭参数选项切换
+  function btnClick(item, ind) {
+    activeIndex.value = ind;
+    type.value = item.label;
+    echartDataSg1.xData.length = 0;
+    echartDataSg1.yData.length = 0;
+    echartDataSg1.lengedData = type.value;
+    echartDataSg1.lengedDataName = item.dw;
+
     switch (type.value) {
-        case 'O₂':
-            echartDataSgList.forEach(el => {
-                echartDataSg1.xData.push(el.time)
-                echartDataSg1.yData.push(el.o2val)
-
-            })
-            break;
-        case 'C₂H₄':
-            echartDataSgList.forEach(el => {
-                echartDataSg1.xData.push(el.time)
-                echartDataSg1.yData.push(el.ch2val)
-
-            })
-            break;
-        case 'CO':
-            echartDataSgList.forEach(el => {
-                echartDataSg1.xData.push(el.time)
-                echartDataSg1.yData.push(el.coval)
-
-            })
-            break;
-        case 'CH₄':
-            echartDataSgList.forEach(el => {
-                echartDataSg1.xData.push(el.time)
-                echartDataSg1.yData.push(el.chval)
-
-            })
-            break;
-        case 'CO₂':
-            echartDataSgList.forEach(el => {
-                echartDataSg1.xData.push(el.time)
-                echartDataSg1.yData.push(el.co2val)
-
-            })
-            break;
-        case 'C₂H₂':
-            echartDataSgList.forEach(el => {
-                echartDataSg1.xData.push(el.time)
-                echartDataSg1.yData.push(el.gasval)
-
-            })
-            break;
+      case 'O₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.o2val);
+        });
+        break;
+      case 'C₂H₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.ch2val);
+        });
+        break;
+      case 'CO':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.coval);
+        });
+        break;
+      case 'CH₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.chval);
+        });
+        break;
+      case 'CO₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.co2val);
+        });
+        break;
+      case 'C₂H₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.gasval);
+        });
+        break;
     }
-
-}
-
-watch(() => props.listData, (val) => {
-    console.log(val, 'val---')
-    echartDataSg1.xData.length = 0
-    echartDataSg1.yData.length = 0
-    echartDataSgList.length = 0
-    if (JSON.stringify(val) != '{}') {
+  }
+
+  watch(
+    () => props.listData,
+    (val) => {
+      console.log(val, 'val---');
+      echartDataSg1.xData.length = 0;
+      echartDataSg1.yData.length = 0;
+      echartDataSgList.length = 0;
+      if (JSON.stringify(val) != '{}') {
         if (val.bundletube.length != 0) {
-            topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--'
-            topContent.position = val.bundletube[0].strinstallpos || '--'
-            topContent.time = val.bundletube[0].readTime || '--'
-            topContent.warn = val.bundletube[0].warnLevel == 0 ? '正常' : val.bundletube[0].warnLevel == 101 ? '较低风险' : val.bundletube[0].warnLevel == 102 ? '低风险' : val.bundletube[0].warnLevel == 103 ? '中风险' : val.bundletube[0].warnLevel == 104 ? '高风险' : val.bundletube[0].warnLevel == 201 ? '报警' : '正常'
-            mbList[0].nd = val.bundletube[0].readData.o2val || '--'
-            mbList[1].nd = val.bundletube[0].readData.coval || '--'
-            mbList[2].nd = val.bundletube[0].readData.co2val || '--'
-            mbList[3].nd = val.bundletube[0].readData.chval || '--'
-            mbList[4].nd = val.bundletube[0].readData.ch2val || '--'
-            mbList[5].nd = val.bundletube[0].readData.gasval || '--'
-            mbList.forEach(el => {
-                el.time1 = val.bundletube[0] ? val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':')) : '--'
-                el.address = val.bundletube[0] ? val.bundletube[0].strinstallpos : '--'
-            })
-
-            val.bundletube[0].history.forEach(v => {
-                echartDataSg1.xData.push(v.time)
-                if (echartDataSg1.lengedData == 'O₂') {
-                    echartDataSg1.yData.push(v.o2val)
-                } else if (echartDataSg1.lengedData == 'C₂H₄') {
-                    echartDataSg1.yData.push(v.ch2val)
-                } else if (echartDataSg1.lengedData == 'CO') {
-                    echartDataSg1.yData.push(v.coval)
-                } else if (echartDataSg1.lengedData == 'CH₄') {
-                    echartDataSg1.yData.push(v.chval)
-                } else if (echartDataSg1.lengedData == 'CO₂') {
-                    echartDataSg1.yData.push(v.co2val)
-                } else if (echartDataSg1.lengedData == 'C₂H₂') {
-                    echartDataSg1.yData.push(v.gasval)
-                }
-                echartDataSgList.push(v)
-            })
+          topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
+          topContent.position = val.bundletube[0].strinstallpos || '--';
+          topContent.time = val.bundletube[0].readTime || '--';
+          topContent.warn =
+            val.bundletube[0].warnLevel == 0
+              ? '正常'
+              : val.bundletube[0].warnLevel == 101
+              ? '较低风险'
+              : val.bundletube[0].warnLevel == 102
+              ? '低风险'
+              : val.bundletube[0].warnLevel == 103
+              ? '中风险'
+              : val.bundletube[0].warnLevel == 104
+              ? '高风险'
+              : val.bundletube[0].warnLevel == 201
+              ? '报警'
+              : '正常';
+          mbList[0].nd = val.bundletube[0].readData.o2val || '--';
+          mbList[1].nd = val.bundletube[0].readData.coval || '--';
+          mbList[2].nd = val.bundletube[0].readData.co2val || '--';
+          mbList[3].nd = val.bundletube[0].readData.chval || '--';
+          mbList[4].nd = val.bundletube[0].readData.ch2val || '--';
+          mbList[5].nd = val.bundletube[0].readData.gasval || '--';
+          mbList.forEach((el) => {
+            el.time1 = val.bundletube[0] ? val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':')) : '--';
+            el.address = val.bundletube[0] ? val.bundletube[0].strinstallpos : '--';
+          });
+
+          val.bundletube[0].history.forEach((v) => {
+            echartDataSg1.xData.push(v.time);
+            if (echartDataSg1.lengedData == 'O₂') {
+              echartDataSg1.yData.push(v.o2val);
+            } else if (echartDataSg1.lengedData == 'C₂H₄') {
+              echartDataSg1.yData.push(v.ch2val);
+            } else if (echartDataSg1.lengedData == 'CO') {
+              echartDataSg1.yData.push(v.coval);
+            } else if (echartDataSg1.lengedData == 'CH₄') {
+              echartDataSg1.yData.push(v.chval);
+            } else if (echartDataSg1.lengedData == 'CO₂') {
+              echartDataSg1.yData.push(v.co2val);
+            } else if (echartDataSg1.lengedData == 'C₂H₂') {
+              echartDataSg1.yData.push(v.gasval);
+            }
+            echartDataSgList.push(v);
+          });
         } else {
-            topContent.temperature = 0
-            topContent.position = '--'
-            topContent.time = '--'
-            topContent.warn = '正常'
-            mbList[0].nd = '--'
-            mbList[1].nd = '--'
-            mbList[2].nd = '--'
-            mbList[3].nd = '--'
-            mbList[4].nd = '--'
-            mbList[5].nd = '--'
-            mbList.forEach(el => {
-                el.time1 = '--'
-                el.address = '--'
-            })
+          topContent.temperature = 0;
+          topContent.position = '--';
+          topContent.time = '--';
+          topContent.warn = '正常';
+          mbList[0].nd = '--';
+          mbList[1].nd = '--';
+          mbList[2].nd = '--';
+          mbList[3].nd = '--';
+          mbList[4].nd = '--';
+          mbList[5].nd = '--';
+          mbList.forEach((el) => {
+            el.time1 = '--';
+            el.address = '--';
+          });
         }
-    }
-
-}, { immediate: true, deep: true })
-
-
-
-
+      }
+    },
+    { immediate: true, deep: true }
+  );
 </script>
 
 <style lang="less" scoped>
-.closeWall {
+  .closeWall {
     width: 100%;
     height: 100%;
     padding: 20px;
     box-sizing: border-box;
 
     .title {
-        width: 100%;
-        height: 17%;
-        margin-bottom: 20px;
+      width: 100%;
+      height: 17%;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-between;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      align-items: center;
+
+      .box-container {
         display: flex;
-        justify-content: space-between;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-        align-items: center;
 
-        .box-container {
-            display: flex;
+        &:nth-child(1) {
+          justify-content: space-around;
+          align-items: center;
+          flex: 2;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
 
-            &:nth-child(1) {
-                justify-content: space-around;
-                align-items: center;
-                flex: 2;
-                height: 100%;
-                border-right: 2px solid;
-                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        &:nth-child(2) {
+          flex: 1;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+        }
+
+        .contents {
+          height: 73%;
+
+          &:nth-child(1) {
+            width: 40%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            img {
+              position: relative;
+              width: 23%;
+              height: 100%;
+              background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+              background-size: 50% 50%;
             }
 
-            &:nth-child(2) {
-                flex: 1;
-                justify-content: center;
-                align-items: center;
-                height: 100%;
+            .text {
+              font-family: 'douyuFont';
+              font-size: 36px;
+              margin: 0px 15px;
+              color: #3df6ff;
             }
 
-            .contents {
-                height: 73%;
-
-                &:nth-child(1) {
-                    width: 40%;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-
-                    img {
-                        position: relative;
-                        width: 23%;
-                        height: 100%;
-                        background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
-                        background-size: 50% 50%;
-                    }
-
-                    .text {
-                        font-family: 'douyuFont';
-                        font-size: 36px;
-                        margin: 0px 15px;
-                        color: #3df6ff;
-                    }
-
-                    .dw {
-                        font-size: 16px;
-                        color: #b3b8cc;
-                    }
-                }
-
-                &:nth-child(2) {
-                    width: 60%;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-
-                    .text {
-                        font-size: 18px;
-
-                        .text-label {
-                            color: #b3b8cc;
-                            font-weight: bold;
-                        }
-
-                        .text-value {
-                            font-family: 'douyuFont';
-                            color: #3df6ff;
-                            margin-left: 10px;
-                        }
-                    }
-                }
+            .dw {
+              font-size: 16px;
+              color: #b3b8cc;
             }
+          }
+
+          &:nth-child(2) {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .text {
+              font-size: 18px;
 
-            .text1 {
-                font-size: 18px;
+              .text-label {
                 color: #b3b8cc;
                 font-weight: bold;
+              }
+
+              .text-value {
+                font-family: 'douyuFont';
+                color: #3df6ff;
+                margin-left: 10px;
+              }
             }
+          }
         }
 
-
+        .text1 {
+          font-size: 18px;
+          color: #b3b8cc;
+          font-weight: bold;
+        }
+      }
     }
 
     .content {
-        width: 100%;
-        height: calc(83% - 20px);
-        padding: 15px 20px 0px 20px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-        box-sizing: border-box;
-
-        .title-b {
-            height: 30px;
-            line-height: 30px;
-            font-family: 'douyuFont';
-            font-size: 16px;
-            // color: #3df6ff;
-        }
+      width: 100%;
+      height: calc(83% - 20px);
+      padding: 15px 20px 0px 20px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+
+      .title-b {
+        height: 30px;
+        line-height: 30px;
+        font-family: 'douyuFont';
+        font-size: 16px;
+        // color: #3df6ff;
+      }
+
+      .card-btn {
+        height: 28%;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
 
-        .card-btn {
-            height: 28%;
-            margin-bottom: 10px;
+        .box-container {
+          position: relative;
+          width: 16%;
+          height: 100%;
+          background: url('../../../../../assets/images/fire/1.png') no-repeat center;
+          background-size: 100% 100%;
+          cursor: pointer;
+
+          .box-label {
+            position: absolute;
+            left: 50%;
+            top: 2px;
+            transform: translate(-50%);
+            color: #fff;
+          }
+
+          .box-item {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 89%;
+            height: 16%;
+            padding: 0px 10px;
             display: flex;
             justify-content: space-between;
-
-            .box-container {
-                position: relative;
-                width: 16%;
-                height: 100%;
-                background: url('../../../../../assets/images/fire/1.png') no-repeat center;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .box-label {
-                    position: absolute;
-                    left: 50%;
-                    top: 2px;
-                    transform: translate(-50%);
-                    color: #fff;
-                }
-
-                .box-item {
-                    position: absolute;
-                    left: 50%;
-                    transform: translate(-50%, 0);
-                    width: 89%;
-                    height: 16%;
-                    padding: 0px 10px;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-                    background-size: 100% 100%;
-
-                    .text-t {
-                        width: 17%;
-                        color: #fff;
-                        font-size: 12px;
-                    }
-
-                    .text-v {
-                        width: 83%;
-                        font-family: 'douyuFont';
-                        font-size: 10px;
-                        color: #3df6ff;
-                        display: flex;
-                        justify-content: flex-end;
-                    }
-                }
-
-
-                .box-item1 {
-                    top: 24%;
-                }
-
-                .box-item2 {
-                    top: 50%;
-                }
-
-                .box-item3 {
-                    top: 75%;
-                }
+            align-items: center;
+            background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+            background-size: 100% 100%;
+
+            .text-t {
+              width: 17%;
+              color: #fff;
+              font-size: 12px;
             }
 
-            .box-container1 {
-                position: relative;
-                width: 16%;
-                height: 100%;
-                background: url('../../../../../assets/images/fire/2.png') no-repeat center;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .box-label {
-                    position: absolute;
-                    left: 50%;
-                    top: 2px;
-                    transform: translate(-50%);
-                    color: #fff;
-                }
-
-                .box-item {
-                    position: absolute;
-                    left: 50%;
-                    transform: translate(-50%, 0);
-                    width: 89%;
-                    height: 16%;
-                    padding: 0px 10px;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-                    background-size: 100% 100%;
-
-                    .text-t {
-                        width: 17%;
-                        color: #fff;
-                        font-size: 12px;
-                    }
-
-                    .text-v {
-                        width: 83%;
-                        font-family: 'douyuFont';
-                        font-size: 10px;
-                        color: #3df6ff;
-                        display: flex;
-                        justify-content: flex-end;
-                    }
-                }
-
-                .box-item1 {
-                    top: 19%;
-                }
-
-                .box-item2 {
-                    top: 41%;
-                }
-
-                .box-item3 {
-                    top: 63%;
-                }
+            .text-v {
+              width: 83%;
+              font-family: 'douyuFont';
+              font-size: 10px;
+              color: #3df6ff;
+              display: flex;
+              justify-content: flex-end;
             }
+          }
+
+          .box-item1 {
+            top: 24%;
+          }
+
+          .box-item2 {
+            top: 50%;
+          }
+
+          .box-item3 {
+            top: 75%;
+          }
         }
 
-        .echart-box {
-            height: calc(72% - 41px);
-            border: 1px solid #114aac;
-
-            .title-f {
-                height: 40px;
-                padding: 0px 10px;
-                box-sizing: border-box;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .title-text {
-                    font-family: 'douyuFont';
-                    font-size: 16px;
-                    // color: #3df6ff;
-                }
+        .box-container1 {
+          position: relative;
+          width: 16%;
+          height: 100%;
+          background: url('../../../../../assets/images/fire/2.png') no-repeat center;
+          background-size: 100% 100%;
+          cursor: pointer;
+
+          .box-label {
+            position: absolute;
+            left: 50%;
+            top: 2px;
+            transform: translate(-50%);
+            color: #fff;
+          }
+
+          .box-item {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 89%;
+            height: 16%;
+            padding: 0px 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+            background-size: 100% 100%;
+
+            .text-t {
+              width: 17%;
+              color: #fff;
+              font-size: 12px;
             }
 
-            .echarts-box {
-                height: calc(100% - 40px);
+            .text-v {
+              width: 83%;
+              font-family: 'douyuFont';
+              font-size: 10px;
+              color: #3df6ff;
+              display: flex;
+              justify-content: flex-end;
             }
+          }
+
+          .box-item1 {
+            top: 19%;
+          }
+
+          .box-item2 {
+            top: 41%;
+          }
+
+          .box-item3 {
+            top: 63%;
+          }
+        }
+      }
+
+      .echart-box {
+        height: calc(72% - 41px);
+        border: 1px solid #114aac;
+
+        .title-f {
+          height: 40px;
+          padding: 0px 10px;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .title-text {
+            font-family: 'douyuFont';
+            font-size: 16px;
+            // color: #3df6ff;
+          }
+        }
+
+        .echarts-box {
+          height: calc(100% - 40px);
         }
+      }
     }
-}
-</style>
+  }
+</style>

src/views/vent/monitorManager/alarmMonitor/fire/fireWork.vue

@@ -1,479 +1,477 @@
 <template>
-    <div class="fireWork">
-        <!-- 顶部区域 -->
-        <div class="work-nav">
-            <div class="nav" v-for="(item, index) in topList" :key="index">
-                <div class="pic" v-if="item.imgSrc">
-                    <img :src="imgUrl" alt="" />
-                </div>
-                <div class="content" v-if="item.label && item.value">
-                    <span>{{ item.label }}</span>
-                    <span>{{ item.value }}</span>
-                </div>
-                <div class="text" v-if="item.text">{{ item.text }}</div>
-                <div class="percent" v-if="item.list.length != 0">
-                    <div class="title">{{ item.label }}</div>
-                    <div class="value">
-                        <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
-                            <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
-                            <span style="color: #3df6ff; margin-left: 10px">{{ `${items.value}%` }}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
+  <div class="fireWork">
+    <!-- 顶部区域 -->
+    <div class="work-nav">
+      <div class="nav" v-for="(item, index) in topList" :key="index">
+        <div class="pic" v-if="item.imgSrc">
+          <img :src="imgUrl" alt="" />
         </div>
-        <!-- 中间区域 -->
-        <div class="center-echart">
-            <div class="nav-title">
-                <div class="title">光纤测温系统温度实时监测</div>
-            </div>
-            <div class="echart-box">
-                <echartLine :echartDataGq="echartDataGq" :maxY="maxY" :echartDw="echartDw"></echartLine>
+        <div class="content" v-if="item.label && item.value">
+          <span>{{ item.label }}</span>
+          <span>{{ item.value }}</span>
+        </div>
+        <div class="text" v-if="item.text">{{ item.text }}</div>
+        <div class="percent" v-if="item.list.length != 0">
+          <div class="title">{{ item.label }}</div>
+          <div class="value">
+            <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
+              <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
+              <span style="color: #3df6ff; margin-left: 10px">{{ `${items.value}%` }}</span>
             </div>
+          </div>
         </div>
-        <!-- 底部区域 -->
-        <div class="bot-content">
-            <div class="title">
-                <div class="text">束管系统监测</div>
+      </div>
+    </div>
+    <!-- 中间区域 -->
+    <div class="center-echart">
+      <div class="nav-title">
+        <div class="title">光纤测温系统温度实时监测</div>
+      </div>
+      <div class="echart-box">
+        <echartLine :echartDataGq="echartDataGq" :maxY="maxY" :echartDw="echartDw" />
+      </div>
+    </div>
+    <!-- 底部区域 -->
+    <div class="bot-content">
+      <div class="title">
+        <div class="text">束管系统监测</div>
+      </div>
+      <div class="content">
+        <div class="content-box" v-for="(item, index) in contentList" :key="index">
+          <div class="box-item" v-for="(items, ind) in item.list" :key="ind" @click="getSgClick(items)">
+            <div class="content-title">
+              <span> {{ items.title }}</span>
+              <span> {{ items.dw }}</span>
             </div>
-            <div class="content">
-                <div class="content-box" v-for="(item, index) in contentList" :key="index">
-                    <div class="box-item" v-for="(items, ind) in item.list" :key="ind" @click="getSgClick(items)">
-                        <div class="content-title">
-                            <span> {{ items.title }}</span>
-                            <span> {{ items.dw }}</span>
-                           
-                        </div>
-                        <div class="content-item">
-                            <span>{{ items.label }}</span>
-                            <span class="bolds">{{ items.value }}</span>
-                        </div>
-                        <div class="content-item">
-                            <span>{{ items.label1 }}</span>
-                            <span class="bolds">{{ items.time }}</span>
-                        </div>
-                    </div>
-                </div>
+            <div class="content-item">
+              <span>{{ items.label }}</span>
+              <span class="bolds">{{ items.value }}</span>
             </div>
-            <div class="echart-box">
-                <echartLine1 :echartDataSg="echartDataSg" :lengedDataName="echartDataSg.lengedDataName"></echartLine1>
+            <div class="content-item">
+              <span>{{ items.label1 }}</span>
+              <span class="bolds">{{ items.time }}</span>
             </div>
+          </div>
         </div>
+      </div>
+      <div class="echart-box">
+        <echartLine1 :echartDataSg="echartDataSg" :lengedDataName="echartDataSg.lengedDataName" />
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, reactive, watch, defineProps } from 'vue';
-import imgUrl from '../../../../../assets/images/fire/pie.png'
-import echartLine from './common/echartLine.vue'
-import echartLine1 from './common/echartLine1.vue'
-import { topList, contentList, } from '../fire.data'
+  import { onMounted, ref, reactive, watch, defineProps } from 'vue';
+  import imgUrl from '../../../../../assets/images/fire/pie.png';
+  import echartLine from './common/echartLine.vue';
+  import echartLine1 from './common/echartLine1.vue';
+  import { topList, contentList } from '../fire.data';
 
-let props = defineProps({
+  let props = defineProps({
     listData: Object,
-});
+  });
 
-let maxY = ref(2000)
-let echartDw = ref('(­°C)')
-//光钎测温-图表数据
-let echartDataGq = reactive({
+  let maxY = ref(2000);
+  let echartDw = ref('(­°C)');
+  //光钎测温-图表数据
+  let echartDataGq = reactive({
     maxData: {
-        lengedData: '当前温度',
-        data: []
+      lengedData: '当前温度',
+      data: [],
     },
     xData: [],
-})
-//束管监测-图表数据
-let echartDataSg = reactive({
+  });
+  //束管监测-图表数据
+  let echartDataSg = reactive({
     xData: [],
     yData: [],
     lengedData: 'O₂',
-    lengedDataName:'(%)'
-})
-let echartDataSgList = reactive<any[]>([])
-//束管实时数据选项点击
-function getSgClick(items) {
-    echartDataSg.xData.length = 0
-    echartDataSg.yData.length = 0
-    echartDataSg.lengedData = items.title
-    echartDataSg.lengedDataName = items.dw
-    
-    
+    lengedDataName: '(%)',
+  });
+  let echartDataSgList = reactive<any[]>([]);
+  //束管实时数据选项点击
+  function getSgClick(items) {
+    echartDataSg.xData.length = 0;
+    echartDataSg.yData.length = 0;
+    echartDataSg.lengedData = items.title;
+    echartDataSg.lengedDataName = items.dw;
+
     switch (items.title) {
-        case 'O₂':
-            echartDataSgList.forEach(el => {
-                echartDataSg.xData.push(el.time)
-                echartDataSg.yData.push(el.o2val)
-            })
-            break;
-        case 'C₂H₄':
-            echartDataSgList.forEach(el => {
-                echartDataSg.xData.push(el.time)
-                echartDataSg.yData.push(el.ch2val)
-            })
-            break;
-        case 'CO':
-            echartDataSgList.forEach(el => {
-                echartDataSg.xData.push(el.time)
-                echartDataSg.yData.push(el.coval)
-            })
-            break;
-        case 'CH₄':
-            echartDataSgList.forEach(el => {
-                echartDataSg.xData.push(el.time)
-                echartDataSg.yData.push(el.chval)
-            })
-            break;
-        case 'CO₂':
-            echartDataSgList.forEach(el => {
-                echartDataSg.xData.push(el.time)
-                echartDataSg.yData.push(el.co2val)
-            })
-            break;
-        case 'C₂H₂':
-            echartDataSgList.forEach(el => {
-                echartDataSg.xData.push(el.time)
-                echartDataSg.yData.push(el.gasval)
-            })
-            break;
+      case 'O₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.o2val);
+        });
+        break;
+      case 'C₂H₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.ch2val);
+        });
+        break;
+      case 'CO':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.coval);
+        });
+        break;
+      case 'CH₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.chval);
+        });
+        break;
+      case 'CO₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.co2val);
+        });
+        break;
+      case 'C₂H₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg.xData.push(el.time);
+          echartDataSg.yData.push(el.gasval);
+        });
+        break;
     }
-}
-
-watch(() => props.listData, (val, val1) => {
-    echartDataGq.xData.length = 0
-    echartDataGq.maxData.data.length = 0
-    echartDataSgList.length = 0
-    echartDataSg.xData.length = 0
-    echartDataSg.yData.length = 0
-    if (JSON.stringify(val) != '{}') {
+  }
+
+  watch(
+    () => props.listData,
+    (val, val1) => {
+      echartDataGq.xData.length = 0;
+      echartDataGq.maxData.data.length = 0;
+      echartDataSgList.length = 0;
+      echartDataSg.xData.length = 0;
+      echartDataSg.yData.length = 0;
+      if (JSON.stringify(val) != '{}') {
         if (val.fiber.length != 0) {
-            topList[0].value = val.fiber[0].readData.fmax
-            topList[1].value = val.fiber[0].readData.fmin
-            topList[2].value = val.fiber[0].readData.favg
-            topList[3].text = val.fiber[0].warnFlag ? '报警' : '正常'
-            JSON.parse(val.fiber[0].readData.fibreTemperature).forEach(el => {
-                echartDataGq.xData.push(el.pos)
-                echartDataGq.maxData.data.push(el.value)
-            })
+          topList[0].value = val.fiber[0].readData.fmax;
+          topList[1].value = val.fiber[0].readData.fmin;
+          topList[2].value = val.fiber[0].readData.favg;
+          topList[3].text = val.fiber[0].warnFlag ? '报警' : '正常';
+          JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
+            echartDataGq.xData.push(el.pos);
+            echartDataGq.maxData.data.push(el.value);
+          });
         } else {
-            topList[0].value = '--'
-            topList[1].value = '--'
-            topList[2].value = '--'
-            topList[3].text = '正常'
+          topList[0].value = '--';
+          topList[1].value = '--';
+          topList[2].value = '--';
+          topList[3].text = '正常';
         }
 
         if (val.bundletube.length != 0) {
-            contentList[0].list[0].value = val.bundletube[0].readData.o2val
-            contentList[0].list[1].value = val.bundletube[0].readData.ch2val
-            contentList[1].list[0].value = val.bundletube[0].readData.coval
-            contentList[1].list[1].value = val.bundletube[0].readData.chval
-            contentList[2].list[0].value = val.bundletube[0].readData.co2val
-            contentList[2].list[1].value = val.bundletube[0].readData.gasval
-            contentList.forEach(el => {
-                el.list.forEach(v => {
-                    v.time = val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':'))
-                })
-            })
-
-
-            val.bundletube[0].history.forEach(el => {
-                echartDataSg.xData.push(el.time)
-                if (echartDataSg.lengedData == 'O₂') {
-                    echartDataSg.yData.push(el.o2val)
-                } else if (echartDataSg.lengedData == 'C₂H₄') {
-                    echartDataSg.yData.push(el.ch2val)
-                } else if (echartDataSg.lengedData == 'C₂H₂') {
-                    echartDataSg.yData.push(el.gasval)
-                } else if (echartDataSg.lengedData == 'CH₄') {
-                    echartDataSg.yData.push(el.chval)
-                } else if (echartDataSg.lengedData == 'CO') {
-                    echartDataSg.yData.push(el.coval)
-                } else if (echartDataSg.lengedData == 'CO₂') {
-                    echartDataSg.yData.push(el.co2val)
-                }
-                echartDataSgList.push(el)
-            })
+          contentList[0].list[0].value = val.bundletube[0].readData.o2val;
+          contentList[0].list[1].value = val.bundletube[0].readData.ch2val;
+          contentList[1].list[0].value = val.bundletube[0].readData.coval;
+          contentList[1].list[1].value = val.bundletube[0].readData.chval;
+          contentList[2].list[0].value = val.bundletube[0].readData.co2val;
+          contentList[2].list[1].value = val.bundletube[0].readData.gasval;
+          contentList.forEach((el) => {
+            el.list.forEach((v) => {
+              v.time = val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':'));
+            });
+          });
+
+          val.bundletube[0].history.forEach((el) => {
+            echartDataSg.xData.push(el.time);
+            if (echartDataSg.lengedData == 'O₂') {
+              echartDataSg.yData.push(el.o2val);
+            } else if (echartDataSg.lengedData == 'C₂H₄') {
+              echartDataSg.yData.push(el.ch2val);
+            } else if (echartDataSg.lengedData == 'C₂H₂') {
+              echartDataSg.yData.push(el.gasval);
+            } else if (echartDataSg.lengedData == 'CH₄') {
+              echartDataSg.yData.push(el.chval);
+            } else if (echartDataSg.lengedData == 'CO') {
+              echartDataSg.yData.push(el.coval);
+            } else if (echartDataSg.lengedData == 'CO₂') {
+              echartDataSg.yData.push(el.co2val);
+            }
+            echartDataSgList.push(el);
+          });
         } else {
-            contentList[0].list[0].value = '--'
-            contentList[0].list[1].value = '--'
-            contentList[1].list[0].value = '--'
-            contentList[1].list[1].value = '--'
-            contentList[2].list[0].value = '--'
-            contentList[2].list[1].value = '--'
-            contentList.forEach(el => {
-                el.list.forEach(v => {
-                    v.time = '--'
-                })
-            })
+          contentList[0].list[0].value = '--';
+          contentList[0].list[1].value = '--';
+          contentList[1].list[0].value = '--';
+          contentList[1].list[1].value = '--';
+          contentList[2].list[0].value = '--';
+          contentList[2].list[1].value = '--';
+          contentList.forEach((el) => {
+            el.list.forEach((v) => {
+              v.time = '--';
+            });
+          });
         }
-    }
-}, { deep: true })
-
-
+      }
+    },
+    { deep: true }
+  );
 </script>
 
 <style lang="less" scoped>
-.fireWork {
+  .fireWork {
     width: 100%;
     height: 100%;
     padding: 20px;
     box-sizing: border-box;
 
     .work-nav {
-        height: 15%;
-        width: 100%;
-        margin-bottom: 20px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
+      height: 15%;
+      width: 100%;
+      margin-bottom: 20px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .nav {
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
         align-items: center;
 
-        .nav {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            &:nth-child(1) {
-                flex: 1;
-                height: 100%;
-                border-right: 2px solid;
-                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-            }
+        &:nth-child(1) {
+          flex: 1;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
 
-            &:nth-child(2) {
-                flex: 1;
-                height: 100%;
-                border-right: 2px solid;
-                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-            }
+        &:nth-child(2) {
+          flex: 1;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
 
-            &:nth-child(3) {
-                flex: 1;
-                height: 100%;
-                border-right: 2px solid;
-                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-            }
+        &:nth-child(3) {
+          flex: 1;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
 
-            &:nth-child(4) {
-                flex: 0.6;
-                color: #b3b8cc;
-                font-size: 16px;
-                height: 100%;
-                border-right: 2px solid;
-                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-            }
+        &:nth-child(4) {
+          flex: 0.6;
+          color: #b3b8cc;
+          font-size: 16px;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
 
-            &:nth-child(5) {
-                flex: 1.4;
-                height: 100%;
-
-                .percent {
-                    width: 100%;
-                    height: 82%;
-                    padding: 0px 20px;
-                    box-sizing: border-box;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-
-                    .title {
-                        font-size: 14px;
-                        padding: 5px 0px;
-                        color: #b3b8cc;
-                        text-align: center;
-                    }
-
-                    .value {
-                        display: flex;
-                        justify-content: space-between;
-
-                        span {
-                            font-family: 'douyuFont';
-                            font-size: 18px;
-                        }
-                    }
-                }
-            }
+        &:nth-child(5) {
+          flex: 1.4;
+          height: 100%;
 
-            .pic {
-                width: 30%;
-                height: 82%;
+          .percent {
+            width: 100%;
+            height: 82%;
+            padding: 0px 20px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
 
-                img {
-                    width: 100%;
-                    height: 100%;
-                }
+            .title {
+              font-size: 14px;
+              padding: 5px 0px;
+              color: #b3b8cc;
+              text-align: center;
             }
 
-            .content {
-                height: 82%;
-                margin-left: 15px;
-                color: #fff;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-around;
-
-                span {
-                    font-size: 14px;
-
-                    &:nth-child(1) {
-                        padding: 5px 0px;
-                        color: #b3b8cc;
-                    }
-
-                    &:nth-child(2) {
-                        font-family: 'douyuFont';
-                        font-size: 24px;
-                        color: #3df6ff;
-                    }
-                }
+            .value {
+              display: flex;
+              justify-content: space-between;
+
+              span {
+                font-family: 'douyuFont';
+                font-size: 18px;
+              }
             }
+          }
         }
 
-        .nav:nth-child(1) .pic {
-            background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
-            background-size: 50% 50%;
-        }
+        .pic {
+          width: 30%;
+          height: 82%;
 
-        .nav:nth-child(2) .pic {
-            background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
-            background-size: 50% 50%;
+          img {
+            width: 100%;
+            height: 100%;
+          }
         }
 
-        .nav:nth-child(3) .pic {
-            background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
-            background-size: 50% 50%;
+        .content {
+          height: 82%;
+          margin-left: 15px;
+          color: #fff;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+
+          span {
+            font-size: 14px;
 
+            &:nth-child(1) {
+              padding: 5px 0px;
+              color: #b3b8cc;
+            }
+
+            &:nth-child(2) {
+              font-family: 'douyuFont';
+              font-size: 24px;
+              color: #3df6ff;
+            }
+          }
         }
+      }
+
+      .nav:nth-child(1) .pic {
+        background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
+        background-size: 50% 50%;
+      }
+
+      .nav:nth-child(2) .pic {
+        background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
+        background-size: 50% 50%;
+      }
+
+      .nav:nth-child(3) .pic {
+        background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+        background-size: 50% 50%;
+      }
     }
 
     .center-echart {
-        width: 100%;
-        height: 32%;
-        padding: 15px;
-        margin-bottom: 20px;
-        box-sizing: border-box;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-
-        .nav-title {
-            height: 30px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+      width: 100%;
+      height: 32%;
+      padding: 15px;
+      margin-bottom: 20px;
+      box-sizing: border-box;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+
+      .nav-title {
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-            .title {
-                font-family: 'douyuFont';
-                font-size: 16px;
-                // color: #3df6ff;
-            }
+        .title {
+          font-family: 'douyuFont';
+          font-size: 16px;
+          // color: #3df6ff;
         }
+      }
 
-        .echart-box {
-            width: 100%;
-            height: calc(100% - 30px);
-        }
+      .echart-box {
+        width: 100%;
+        height: calc(100% - 30px);
+      }
     }
 
     .bot-content {
-        position: relative;
-        width: 100%;
-        height: calc(53% - 40px);
-        padding: 15px 15px 0px 15px;
-        box-sizing: border-box;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
+      position: relative;
+      width: 100%;
+      height: calc(53% - 40px);
+      padding: 15px 15px 0px 15px;
+      box-sizing: border-box;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+
+      .title {
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
 
-        .title {
-            height: 30px;
-            display: flex;
-            justify-content: space-between;
+        .text {
+          height: 30px;
+          line-height: 30px;
+          font-family: 'douyuFont';
+          font-size: 16px;
+          // color: #3df6ff;
+        }
+      }
 
-            .text {
-                height: 30px;
-                line-height: 30px;
-                font-family: 'douyuFont';
-                font-size: 16px;
-                // color: #3df6ff;
+      .content {
+        height: calc(100% - 30px);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .content-box {
+          width: 100%;
+          height: 29%;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 0px !important;
+
+          .box-item {
+            position: relative;
+            width: 16%;
+            height: 100%;
+            background: url('../../../../../assets/images/fire/14174.png') no-repeat center;
+            background-size: 100% 100%;
+            cursor: pointer;
+
+            .content-title {
+              position: absolute;
+              left: 50%;
+              top: 0;
+              transform: translate(-50%);
+              color: #fff;
+              font-size: 14px;
             }
-        }
 
-        .content {
-            height: calc(100% - 30px);
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
+            .content-item {
+              position: absolute;
+              width: 93%;
+              height: 27%;
+              display: flex;
+              align-items: center;
+              padding: 0px 10px;
+              box-sizing: border-box;
+              background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+              background-size: 100% 100%;
+
+              &:nth-child(2) {
+                left: 50%;
+                top: 28%;
+                transform: translate(-50%);
+                display: flex;
+                justify-content: space-between;
+              }
 
-            .content-box {
-                width: 100%;
-                height: 29%;
+              &:nth-child(3) {
+                left: 50%;
+                top: 62%;
+                transform: translate(-50%);
                 display: flex;
                 justify-content: space-between;
-                margin-top: 0px !important;
-
-                .box-item {
-                    position: relative;
-                    width: 16%;
-                    height: 100%;
-                    background: url('../../../../../assets/images/fire/14174.png') no-repeat center;
-                    background-size: 100% 100%;
-                    cursor: pointer;
-
-                    .content-title {
-                        position: absolute;
-                        left: 50%;
-                        top: 0;
-                        transform: translate(-50%);
-                        color: #fff;
-                        font-size: 14px;
-                    }
-
-                    .content-item {
-                        position: absolute;
-                        width: 93%;
-                        height: 27%;
-                        display: flex;
-                        align-items: center;
-                        padding: 0px 10px;
-                        box-sizing: border-box;
-                        background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-                        background-size: 100% 100%;
-
-                        &:nth-child(2) {
-                            left: 50%;
-                            top: 28%;
-                            transform: translate(-50%);
-                            display: flex;
-                            justify-content: space-between;
-                        }
-
-                        &:nth-child(3) {
-                            left: 50%;
-                            top: 62%;
-                            transform: translate(-50%);
-                            display: flex;
-                            justify-content: space-between;
-                        }
-
-                        .bolds {
-                            font-family: 'douyuFont';
-                            color: #3df6ff;
-                            font-size: 12px;
-                        }
-                    }
-                }
-            }
-        }
+              }
 
-        .echart-box {
-            position: absolute;
-            left: 50%;
-            top: 50px;
-            transform: translate(-50%, 0);
-            width: 66%;
-            height: calc(100% - 50px);
+              .bolds {
+                font-family: 'douyuFont';
+                color: #3df6ff;
+                font-size: 12px;
+              }
+            }
+          }
         }
+      }
+
+      .echart-box {
+        position: absolute;
+        left: 50%;
+        top: 50px;
+        transform: translate(-50%, 0);
+        width: 66%;
+        height: calc(100% - 50px);
+      }
     }
-}
-</style>
+  }
+</style>

src/views/vent/monitorManager/alarmMonitor/fire/mainWell.vue

@@ -1,418 +1,466 @@
 <template>
-    <div class="mainWell">
-        <!-- 光钎测温 -->
-        <div class="work-nav" v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
-            <div class="nav" v-for="(item, index) in topOutList" :key="index">
-                <div class="pic" v-if="item.imgSrc">
-                    <img :src="imgUrl" alt="" />
-                </div>
-                <div class="content" v-if="item.label && item.value">
-                    <span>{{ item.label }}</span>
-                    <span>{{ item.value }}</span>
-                </div>
-                <div class="text" v-if="item.text">{{ item.text }}</div>
-            </div>
+  <div class="mainWell">
+    <!-- 光钎测温 -->
+    <div class="work-nav" v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
+      <div class="nav" v-for="(item, index) in topOutList" :key="index">
+        <div class="pic" v-if="item.imgSrc">
+          <img :src="imgUrl" alt="" />
         </div>
-        <!-- 束管监测 -->
-        <div class="work-nav" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
-            <div class="content-box">
-                <div class="contents">
-                    <img src="../../../../../assets/images/fire/pie.png" alt="" />
-                    <span class="text">{{ topContent.temperature }}</span>
-                    <span class="dw">°C</span>
-                </div>
-                <div class="contents">
-                    <div class="text">
-                        <span class="text-label">位置 : </span>
-                        <span class="text-value">{{ topContent.position }}</span>
-                    </div>
-                    <div class="text">
-                        <span class="text-label">时间 : </span>
-                        <span class="text-value">{{ topContent.time }}</span>
-                    </div>
-                </div>
-            </div>
-            <div class="content-box">
-                <div class="text1">{{ topContent.warn }}</div>
-            </div>
+        <div class="content" v-if="item.label && item.value">
+          <span>{{ item.label }}</span>
+          <span>{{ item.value }}</span>
         </div>
-
-
-        <div class="center-box" v-if="strType != 'sys_coalseam'">
-            <div class="content-box" v-for="(items, index) in tabList" :key="index">
-                <div class="title">
-                    <span class="title-label">{{ items.label }}</span>
-                    <span class="details">{{ `${items.details}>>` }}</span>
-                </div>
-                <div class="content">
-                    <a-table v-if="index == 0" ref="table" size="small" :scroll="{ x: 0, y: 273 }" :columns="columns"
-                        :data-source="monitorlistYw" :pagination="false">
-                        <span slot="action" slot-scope="text, record"></span>
-                    </a-table>
-                    <a-table v-if="index == 1" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
-                        :pagination="false" :scroll="{ y: 273 }">
-                        <span slot="action" slot-scope="text, record"> </span>
-                    </a-table>
-                    <a-table v-if="index == 2" ref="table" size="small" :scroll="{ y: 273 }" :columns="columns"
-                        :data-source="monitorlistPl" :pagination="false">
-                        <span slot="action" slot-scope="text, record"> </span>
-                    </a-table>
-                </div>
-            </div>
+        <div class="text" v-if="item.text">{{ item.text }}</div>
+      </div>
+    </div>
+    <!-- 束管监测 -->
+    <div class="work-nav" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
+      <div class="content-box">
+        <div class="contents">
+          <img src="../../../../../assets/images/fire/pie.png" alt="" />
+          <span class="text">{{ topContent.temperature }}</span>
+          <span class="dw">°C</span>
         </div>
+        <!-- <div class="contents">
+          <div class="text">
+            <span class="text-label">位置 : </span>
+            <span class="text-value">{{ topContent.position }}</span>
+          </div>
+          <div class="text">
+            <span class="text-label">时间 : </span>
+            <span class="text-value">{{ topContent.time }}</span>
+          </div>
+        </div> -->
+      </div>
+      <div class="content-box">
+        <div class="text1">{{ topContent.warn }}</div>
+      </div>
+    </div>
 
-        <div :class="listData.fiber.length != 0 ? 'center-box1' : 'center-box2'" v-if="strType == 'sys_coalseam'">
-            <div class="content-box" v-for="(items, index) in tabLists" :key="index">
-                <div class="title">
-                    <span class="title-label">{{ items.label }}</span>
-                    <span class="details">{{ `${items.details}>>` }}</span>
-                </div>
-                <div class="content">
-                    <a-table v-if="index == 0" ref="table" size="small"
-                        :scroll="{ y: listData.fiber.length != 0 ? 160 : 270 }" :columns="columns"
-                        :data-source="monitorlistYw" :pagination="false">
-                        <span slot="action" slot-scope="text, record"></span>
-                    </a-table>
-                    <a-table v-if="index == 1" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
-                        :pagination="false" :scroll="{ y: listData.fiber.length != 0 ? 160 : 270 }">
-                        <span slot="action" slot-scope="text, record"> </span>
-                    </a-table>
-                    <a-table v-if="index == 2" ref="table" size="small"
-                        :scroll="{ y: listData.fiber.length != 0 ? 160 : 270 }" :columns="columns"
-                        :data-source="monitorlistPl" :pagination="false">
-                        <span slot="action" slot-scope="text, record"> </span>
-                    </a-table>
-
-                    <a-table v-if="index == 3" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 160 : 270 }"
-                        :columns="columns" :data-source="monitorlistWd" :pagination="false">
-                        <span slot="action" slot-scope="text, record"> </span>
-                    </a-table>
-                </div>
-            </div>
+    <div class="center-box" v-if="strType != 'sys_coalseam'">
+      <div class="content-box" v-for="(items, index) in tabList" :key="index">
+        <div class="title">
+          <span class="title-label">{{ items.label }}</span>
+          <span class="details">{{ `${items.details}>>` }}</span>
         </div>
-        <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
-            v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
-            <div class="footer-title">
-                <div class="echart-label">光钎测温系统实时温度监测</div>
-            </div>
-            <div class="echart-content">
-                <echartLine2 :echartDataWd="echartDataWd"></echartLine2>
-            </div>
+        <div class="content">
+          <a-table
+            v-if="index == 0"
+            ref="table"
+            size="small"
+            :scroll="{ x: 0, y: 273 }"
+            :columns="columns"
+            :data-source="monitorlistYw"
+            :pagination="false"
+          >
+            <span slot="action" slot-scope="text, record"></span>
+          </a-table>
+          <a-table
+            v-if="index == 1"
+            ref="table1"
+            size="small"
+            :columns="columns"
+            :data-source="monitorlistHy"
+            :pagination="false"
+            :scroll="{ y: 273 }"
+          >
+            <span slot="action" slot-scope="text, record"> </span>
+          </a-table>
+          <a-table
+            v-if="index == 2"
+            ref="table"
+            size="small"
+            :scroll="{ y: 273 }"
+            :columns="columns"
+            :data-source="monitorlistPl"
+            :pagination="false"
+          >
+            <span slot="action" slot-scope="text, record"> </span>
+          </a-table>
         </div>
-        <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
-            v-if="strType == 'sys_coalseam' && listData.fiber.length != 0">
-            <div class="footer-title">
-                <div class="echart-label">光钎测温系统实时温度监测</div>
-            </div>
-            <div class="echart-content">
-                <echartLine2 :echartDataWd="echartDataWd"></echartLine2>
-            </div>
+      </div>
+    </div>
+
+    <div :class="listData.fiber.length != 0 ? 'center-box1' : 'center-box2'" v-if="strType == 'sys_coalseam'">
+      <div class="content-box" v-for="(items, index) in tabLists" :key="index">
+        <div class="title">
+          <span class="title-label">{{ items.label }}</span>
+          <span class="details">{{ `${items.details}>>` }}</span>
         </div>
+        <div class="content">
+          <a-table
+            v-if="index == 0"
+            ref="table"
+            size="small"
+            :scroll="{ y: listData.fiber.length != 0 ? 160 : 270 }"
+            :columns="columns"
+            :data-source="monitorlistYw"
+            :pagination="false"
+          >
+            <span slot="action" slot-scope="text, record"></span>
+          </a-table>
+          <a-table
+            v-if="index == 1"
+            ref="table1"
+            size="small"
+            :columns="columns"
+            :data-source="monitorlistHy"
+            :pagination="false"
+            :scroll="{ y: listData.fiber.length != 0 ? 160 : 270 }"
+          >
+            <span slot="action" slot-scope="text, record"> </span>
+          </a-table>
+          <a-table
+            v-if="index == 2"
+            ref="table"
+            size="small"
+            :scroll="{ y: listData.fiber.length != 0 ? 160 : 270 }"
+            :columns="columns"
+            :data-source="monitorlistPl"
+            :pagination="false"
+          >
+            <span slot="action" slot-scope="text, record"> </span>
+          </a-table>
+
+          <a-table
+            v-if="index == 3"
+            ref="table"
+            size="small"
+            :scroll="{ y: listData.fiber.length != 0 ? 160 : 270 }"
+            :columns="columns"
+            :data-source="monitorlistWd"
+            :pagination="false"
+          >
+            <span slot="action" slot-scope="text, record"> </span>
+          </a-table>
+        </div>
+      </div>
+    </div>
+    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
+      <div class="footer-title">
+        <div class="echart-label">光钎测温系统实时温度监测</div>
+      </div>
+      <div class="echart-content">
+        <echartLine2 :echartDataWd="echartDataWd" />
+      </div>
+    </div>
+    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="strType == 'sys_coalseam' && listData.fiber.length != 0">
+      <div class="footer-title">
+        <div class="echart-label">光钎测温系统实时温度监测</div>
+      </div>
+      <div class="echart-content">
+        <echartLine2 :echartDataWd="echartDataWd" />
+      </div>
+    </div>
 
-        <!-- 束管监测 -->
-        <div class="content-s" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
-            <div class="title-b">采空区密闭参数</div>
-            <div class="card-btn">
-                <div :class="activeIndex == index ? 'content-box1' : 'content-box'" v-for="(item, index) in mbList"
-                    :key="index" @click="btnClick(item, index)">
-                    <div class="btn-label">
-                        <span>{{ item.label }}</span>
-                        <span>{{ item.dw }}</span>
-                    </div>
-                    <div class="box-item box-item1">
-                        <span class="text-t">{{ `${item.label1}:` }}</span>
-                        <span class="text-v">{{ item.nd }}</span>
-                    </div>
-                    <div class="box-item box-item2">
-                        <span class="text-t">{{ `${item.label2}:` }}</span>
-                        <span class="text-v">{{ item.time1 }}</span>
-                    </div>
-                    <div class="box-item box-item3">
-                        <span class="text-t">{{ `${item.label3}:` }}</span>
-                        <span class="text-v">{{ item.address }}</span>
-                    </div>
-                </div>
-            </div>
-            <div class="echart-box">
-                <div class="title-f">
-                    <div class="title-text">{{ `${type}趋势` }}</div>
-                </div>
-                <div class="echarts-box">
-                    <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName"></echartLine1>
-                </div>
-            </div>
+    <!-- 束管监测 -->
+    <div class="content-s" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
+      <div class="title-b">采空区密闭参数</div>
+      <div class="card-btn">
+        <div
+          :class="activeIndex == index ? 'content-box1' : 'content-box'"
+          v-for="(item, index) in mbList"
+          :key="index"
+          @click="btnClick(item, index)"
+        >
+          <div class="btn-label">
+            <span>{{ item.label }}</span>
+            <span>{{ item.dw }}</span>
+          </div>
+          <div class="box-item box-item1">
+            <span class="text-t">{{ `${item.label1}:` }}</span>
+            <span class="text-v">{{ item.nd }}</span>
+          </div>
+          <div class="box-item box-item2">
+            <span class="text-t">{{ `${item.label2}:` }}</span>
+            <span class="text-v">{{ item.time1 }}</span>
+          </div>
+          <div class="box-item box-item3">
+            <span class="text-t">{{ `${item.label3}:` }}</span>
+            <span class="text-v">{{ item.address }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="echart-box">
+        <div class="title-f">
+          <div class="title-text">{{ `${type}趋势` }}</div>
         </div>
+        <div class="echarts-box">
+          <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" />
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, reactive, watch, defineProps } from 'vue';
-import { topOutList, tabList, tabLists, columns, } from '../fire.data'
-import imgUrl from '../../../../../assets/images/fire/pie.png'
-import echartLine2 from './common/echartLine2.vue'
-import echartLine1 from './common/echartLine1.vue'
+  import { ref, computed, reactive, watch, defineProps } from 'vue';
+  import { topOutList, tabList, tabLists, columns } from '../fire.data';
+  import imgUrl from '../../../../../assets/images/fire/pie.png';
+  import echartLine2 from './common/echartLine2.vue';
+  import echartLine1 from './common/echartLine1.vue';
 
-let props = defineProps({
+  let props = defineProps({
     listData: Object,
-    strType: String
-});
-
+    strType: String,
+  });
 
-//束管监测-顶部区域数据
-let topContent = reactive({
+  //束管监测-顶部区域数据
+  let topContent = reactive({
     temperature: '0',
     position: '',
     time: '',
     warn: '',
-})
-//束管监测当前密闭参数激活选项
-let activeIndex = ref(0)
-//束管监测当前激活密闭参数类型
-let type = ref('O₂')
-//束管监测密闭参数列表
-let mbList = reactive([
+  });
+  //束管监测当前密闭参数激活选项
+  let activeIndex = ref(0);
+  //束管监测当前激活密闭参数类型
+  let type = ref('O₂');
+  //束管监测密闭参数列表
+  let mbList = reactive([
     {
-        label: 'O₂',
-        dw: '(%)',
-        label1: '浓度',
-        label2: '时间',
-        label3: '位置',
-        nd: 0,
-        time1: '',
-        address: '',
+      label: 'O₂',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: 0,
+      time1: '',
+      address: '',
     },
     {
-        label: 'CO',
-        dw: '(ppm)',
-        label1: '浓度',
-        label2: '时间',
-        label3: '位置',
-        nd: 0,
-        time1: '',
-        address: '',
+      label: 'CO',
+      dw: '(ppm)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: 0,
+      time1: '',
+      address: '',
     },
     {
-        label: 'CO₂',
-        dw: '(%)',
-        label1: '浓度',
-        label2: '时间',
-        label3: '位置',
-        nd: 0,
-        time1: '',
-        address: '',
+      label: 'CO₂',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: 0,
+      time1: '',
+      address: '',
     },
     {
-        label: 'CH₄',
-        dw: '(%)',
-        label1: '浓度',
-        label2: '时间',
-        label3: '位置',
-        nd: 0,
-        time1: '',
-        address: '',
+      label: 'CH₄',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: 0,
+      time1: '',
+      address: '',
     },
     {
-        label: 'C₂H₂',
-        dw: '(ppm)',
-        label1: '浓度',
-        label2: '时间',
-        label3: '位置',
-        nd: 0,
-        time1: '',
-        address: '',
+      label: 'C₂H₂',
+      dw: '(ppm)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: 0,
+      time1: '',
+      address: '',
     },
     {
-        label: 'C₂H₄',
-        dw: '(ppm)',
-        label1: '浓度',
-        label2: '时间',
-        label3: '位置',
-        nd: 0,
-        time1: '',
-        address: '',
+      label: 'C₂H₄',
+      dw: '(ppm)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: 0,
+      time1: '',
+      address: '',
     },
-])
-let echartDataSg1 = reactive({
+  ]);
+  let echartDataSg1 = reactive({
     xData: [],
     yData: [],
     lengedData: 'O₂',
-    lengedDataName:'(%)'
-    
-})
-let echartDataSgList = reactive<any[]>([])
+    lengedDataName: '(%)',
+  });
+  let echartDataSgList = reactive<any[]>([]);
 
-//外因火灾温度监测-图表数据
-let echartDataWd = reactive({
+  //外因火灾温度监测-图表数据
+  let echartDataWd = reactive({
     xData: [],
     maxData: {
-        data: [],
-        lengedData: '实时温度',
+      data: [],
+      lengedData: '实时温度',
     },
-})
-
-//烟雾传感器列表数据
-let monitorlistYw = reactive([])
+  });
 
+  //烟雾传感器列表数据
+  let monitorlistYw = reactive([]);
 
-//火焰传感器列表数据
-let monitorlistHy = reactive([])
+  //火焰传感器列表数据
+  let monitorlistHy = reactive([]);
 
+  //喷淋装置列表数据
+  let monitorlistPl = reactive([]);
 
-//喷淋装置列表数据
-let monitorlistPl = reactive([])
+  //温度传感器列表数据
+  let monitorlistWd = reactive([]);
 
-//温度传感器列表数据
-let monitorlistWd = reactive([])
+  //束管监测密闭参数选项切换
+  function btnClick(item, ind) {
+    activeIndex.value = ind;
+    type.value = item.label;
+    echartDataSg1.xData.length = 0;
+    echartDataSg1.yData.length = 0;
+    echartDataSg1.lengedData = type.value;
+    echartDataSg1.lengedDataName = item.dw;
 
-//束管监测密闭参数选项切换
-function btnClick(item, ind) {
-    activeIndex.value = ind
-    type.value = item.label
-    echartDataSg1.xData.length = 0
-    echartDataSg1.yData.length = 0
-    echartDataSg1.lengedData = type.value
-    echartDataSg1.lengedDataName = item.dw
-    
     switch (type.value) {
-        case 'O₂':
-            echartDataSgList.forEach(el => {
-                echartDataSg1.xData.push(el.time)
-                echartDataSg1.yData.push(el.o2val)
-
-            })
-            break;
-        case 'C₂H₄':
-            echartDataSgList.forEach(el => {
-                echartDataSg1.xData.push(el.time)
-                echartDataSg1.yData.push(el.ch2val)
-
-            })
-            break;
-        case 'CO':
-            echartDataSgList.forEach(el => {
-                echartDataSg1.xData.push(el.time)
-                echartDataSg1.yData.push(el.coval)
-
-            })
-            break;
-        case 'CH₄':
-            echartDataSgList.forEach(el => {
-                echartDataSg1.xData.push(el.time)
-                echartDataSg1.yData.push(el.chval)
-
-            })
-            break;
-        case 'CO₂':
-            echartDataSgList.forEach(el => {
-                echartDataSg1.xData.push(el.time)
-                echartDataSg1.yData.push(el.co2val)
-
-            })
-            break;
-        case 'C₂H₂':
-            echartDataSgList.forEach(el => {
-                echartDataSg1.xData.push(el.time)
-                echartDataSg1.yData.push(el.gasval)
-
-            })
-            break;
+      case 'O₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.o2val);
+        });
+        break;
+      case 'C₂H₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.ch2val);
+        });
+        break;
+      case 'CO':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.coval);
+        });
+        break;
+      case 'CH₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.chval);
+        });
+        break;
+      case 'CO₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.co2val);
+        });
+        break;
+      case 'C₂H₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.gasval);
+        });
+        break;
     }
-
-}
-
-
-watch(() => props.listData, (val) => {
-    console.log(val, 'val---------------')
-    props.listData = val
-    if (JSON.stringify(val) != '{}') {
-        echartDataSg1.xData.length = 0
-        echartDataSg1.yData.length = 0
-        echartDataSgList.length = 0
-        echartDataWd.xData.length = 0
-        echartDataWd.maxData.data.length = 0
-        monitorlistYw.length = 0
-        monitorlistHy.length = 0
-        monitorlistPl.length = 0
-        monitorlistWd.length = 0
+  }
+
+  watch(
+    () => props.listData,
+    (val) => {
+      console.log(val, 'val---------------');
+      props.listData = val;
+      if (JSON.stringify(val) != '{}') {
+        echartDataSg1.xData.length = 0;
+        echartDataSg1.yData.length = 0;
+        echartDataSgList.length = 0;
+        echartDataWd.xData.length = 0;
+        echartDataWd.maxData.data.length = 0;
+        monitorlistYw.length = 0;
+        monitorlistHy.length = 0;
+        monitorlistPl.length = 0;
+        monitorlistWd.length = 0;
         if (val.fiber.length != 0) {
-            topOutList[0].value = val.fiber[0].readData.fmax
-            topOutList[1].value = val.fiber[0].readData.fmin
-            topOutList[2].value = val.fiber[0].readData.favg
-            topOutList[3].text = val.fiber[0].warnFlag ? '存在风险' : '正常'
-            JSON.parse(val.fiber[0].readData.fibreTemperature).forEach(el => {
-                echartDataWd.xData.push(el.pos)
-                echartDataWd.maxData.data.push(el.value)
-            })
+          topOutList[0].value = val.fiber[0].readData.fmax;
+          topOutList[1].value = val.fiber[0].readData.fmin;
+          topOutList[2].value = val.fiber[0].readData.favg;
+          topOutList[3].text = val.fiber[0].warnFlag ? '存在风险' : '正常';
+          JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
+            echartDataWd.xData.push(el.pos);
+            echartDataWd.maxData.data.push(el.value);
+          });
         } else {
-            topOutList[0].value = '--'
-            topOutList[1].value = '--'
-            topOutList[2].value = '--'
-            topOutList[3].text = '正常'
+          topOutList[0].value = '--';
+          topOutList[1].value = '--';
+          topOutList[2].value = '--';
+          topOutList[3].text = '正常';
         }
 
         if (val.bundletube.length != 0) {
-            topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--'
-            topContent.position = val.bundletube[0].strinstallpos || '--'
-            topContent.time = val.bundletube[0].readTime || '--'
-            topContent.warn = val.bundletube[0].warnLevel == 0 ? '正常' : val.bundletube[0].warnLevel == 101 ? '较低风险' : val.bundletube[0].warnLevel == 102 ? '低风险' : val.bundletube[0].warnLevel == 103 ? '中风险' : val.bundletube[0].warnLevel == 104 ? '高风险' : val.bundletube[0].warnLevel == 201 ? '报警' : '正常'
-            val.bundletube[0].history.forEach(v => {
-                echartDataSg1.xData.push(v.time)
-                if (echartDataSg1.lengedData == 'O₂') {
-                    echartDataSg1.yData.push(v.o2val)
-                } else if (echartDataSg1.lengedData == 'C₂H₄') {
-                    echartDataSg1.yData.push(v.ch2val)
-                } else if (echartDataSg1.lengedData == 'CO') {
-                    echartDataSg1.yData.push(v.coval)
-                } else if (echartDataSg1.lengedData == 'CH₄') {
-                    echartDataSg1.yData.push(v.chval)
-                } else if (echartDataSg1.lengedData == 'CO₂') {
-                    echartDataSg1.yData.push(v.co2val)
-                } else if (echartDataSg1.lengedData == 'C₂H₂') {
-                    echartDataSg1.yData.push(v.gasval)
-                }
-                echartDataSgList.push(v)
-            })
+          topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
+          topContent.position = val.bundletube[0].strinstallpos || '--';
+          topContent.time = val.bundletube[0].readTime || '--';
+          topContent.warn =
+            val.bundletube[0].warnLevel == 0
+              ? '正常'
+              : val.bundletube[0].warnLevel == 101
+              ? '较低风险'
+              : val.bundletube[0].warnLevel == 102
+              ? '低风险'
+              : val.bundletube[0].warnLevel == 103
+              ? '中风险'
+              : val.bundletube[0].warnLevel == 104
+              ? '高风险'
+              : val.bundletube[0].warnLevel == 201
+              ? '报警'
+              : '正常';
+          val.bundletube[0].history.forEach((v) => {
+            echartDataSg1.xData.push(v.time);
+            if (echartDataSg1.lengedData == 'O₂') {
+              echartDataSg1.yData.push(v.o2val);
+            } else if (echartDataSg1.lengedData == 'C₂H₄') {
+              echartDataSg1.yData.push(v.ch2val);
+            } else if (echartDataSg1.lengedData == 'CO') {
+              echartDataSg1.yData.push(v.coval);
+            } else if (echartDataSg1.lengedData == 'CH₄') {
+              echartDataSg1.yData.push(v.chval);
+            } else if (echartDataSg1.lengedData == 'CO₂') {
+              echartDataSg1.yData.push(v.co2val);
+            } else if (echartDataSg1.lengedData == 'C₂H₂') {
+              echartDataSg1.yData.push(v.gasval);
+            }
+            echartDataSgList.push(v);
+          });
         } else {
-            topContent.temperature = '--'
-            topContent.position = '--'
-            topContent.time = '--'
-            topContent.warn = '正常'
+          topContent.temperature = '--';
+          topContent.position = '--';
+          topContent.time = '--';
+          topContent.warn = '正常';
         }
 
         if (val.smoke.length != 0) {
-            val.smoke.forEach(el => {
-                monitorlistYw.push(el)
-            })
+          val.smoke.forEach((el) => {
+            monitorlistYw.push(el);
+          });
         }
 
-
         if (val.fire.length != 0) {
-            val.fire.forEach(el => {
-                monitorlistHy.push(el)
-            })
+          val.fire.forEach((el) => {
+            monitorlistHy.push(el);
+          });
         }
 
         if (val.spray.length != 0) {
-            val.spray.forEach(el => {
-                monitorlistPl.push(el)
-            })
+          val.spray.forEach((el) => {
+            monitorlistPl.push(el);
+          });
         }
 
         if (val.temperature.length != 0) {
-            val.temperature.forEach(el => {
-                monitorlistWd.push(el)
-            })
+          val.temperature.forEach((el) => {
+            monitorlistWd.push(el);
+          });
         }
-
-    }
-
-}, { immediate: true, deep: true })
-
-
+      }
+    },
+    { immediate: true, deep: true }
+  );
 </script>
 
 <style lang="less" scoped>
-.mainWell {
+  .mainWell {
     width: 100%;
     height: 100%;
     padding: 20px;
@@ -420,556 +468,553 @@ watch(() => props.listData, (val) => {
     overflow-y: auto;
 
     .work-nav {
-        height: 15%;
-        width: 100%;
-        margin-bottom: 20px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
+      height: 15%;
+      width: 100%;
+      margin-bottom: 20px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .nav {
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
         align-items: center;
 
-        .nav {
-            display: flex;
-            justify-content: center;
-            align-items: center;
+        &:nth-child(1) {
+          flex: 1;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
 
-            &:nth-child(1) {
-                flex: 1;
-                height: 100%;
-                border-right: 2px solid;
-                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-            }
+        &:nth-child(2) {
+          flex: 1;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
 
-            &:nth-child(2) {
-                flex: 1;
-                height: 100%;
-                border-right: 2px solid;
-                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-            }
+        &:nth-child(3) {
+          flex: 1;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
 
-            &:nth-child(3) {
-                flex: 1;
-                height: 100%;
-                border-right: 2px solid;
-                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-            }
+        &:nth-child(4) {
+          flex: 1.2;
+          color: #b3b8cc;
+          font-size: 16px;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
 
-            &:nth-child(4) {
-                flex: 1.2;
-                color: #b3b8cc;
-                font-size: 16px;
-                height: 100%;
-                border-right: 2px solid;
-                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-            }
+        &:nth-child(5) {
+          flex: 0.8;
+          color: #2b87ff;
+          font-size: 14px;
+          height: 100%;
+        }
 
-            &:nth-child(5) {
-                flex: 0.8;
-                color: #2b87ff;
-                font-size: 14px;
-                height: 100%;
-            }
+        .pic {
+          width: 26%;
+          height: 84%;
 
-            .pic {
-                width: 26%;
-                height: 84%;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .content {
+          height: 84%;
+          margin-left: 15px;
+          color: #fff;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+
+          span {
+            font-size: 14px;
 
-                img {
-                    width: 100%;
-                    height: 100%;
-                }
+            &:nth-child(1) {
+              padding: 5px 0px;
+              color: #b3b8cc;
             }
 
-            .content {
-                height: 84%;
-                margin-left: 15px;
-                color: #fff;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-around;
-
-                span {
-                    font-size: 14px;
-
-                    &:nth-child(1) {
-                        padding: 5px 0px;
-                        color: #b3b8cc;
-                    }
-
-                    &:nth-child(2) {
-                        font-family: 'douyuFont';
-                        font-size: 20px;
-                        color: #3df6ff;
-                    }
-                }
+            &:nth-child(2) {
+              font-family: 'douyuFont';
+              font-size: 20px;
+              color: #3df6ff;
             }
+          }
         }
+      }
 
-        .nav:nth-child(1) .pic {
-            background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
-            background-size: 50% 50%;
-        }
+      .nav:nth-child(1) .pic {
+        background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
+        background-size: 50% 50%;
+      }
 
-        .nav:nth-child(2) .pic {
-            background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
-            background-size: 50% 50%;
-        }
+      .nav:nth-child(2) .pic {
+        background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
+        background-size: 50% 50%;
+      }
 
-        .nav:nth-child(3) .pic {
-            background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
-            background-size: 50% 50%;
-        }
+      .nav:nth-child(3) .pic {
+        background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+        background-size: 50% 50%;
+      }
 
+      .content-box {
+        display: flex;
 
+        &:nth-child(1) {
+          justify-content: space-around;
+          align-items: center;
+          flex: 2;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+        }
 
+        &:nth-child(2) {
+          flex: 1;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+        }
 
-        .content-box {
+        .contents {
+          height: 73%;
+
+          &:nth-child(1) {
+            width: 40%;
             display: flex;
+            justify-content: center;
+            align-items: center;
 
-            &:nth-child(1) {
-                justify-content: space-around;
-                align-items: center;
-                flex: 2;
-                height: 100%;
-                border-right: 2px solid;
-                border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+            img {
+              position: relative;
+              width: 23%;
+              height: 100%;
+              background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+              background-size: 50% 50%;
             }
 
-            &:nth-child(2) {
-                flex: 1;
-                justify-content: center;
-                align-items: center;
-                height: 100%;
+            .text {
+              font-family: 'douyuFont';
+              font-size: 36px;
+              margin: 0px 15px;
+              color: #3df6ff;
             }
 
-            .contents {
-                height: 73%;
-
-                &:nth-child(1) {
-                    width: 40%;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-
-                    img {
-                        position: relative;
-                        width: 23%;
-                        height: 100%;
-                        background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
-                        background-size: 50% 50%;
-                    }
-
-                    .text {
-                        font-family: 'douyuFont';
-                        font-size: 36px;
-                        margin: 0px 15px;
-                        color: #3df6ff;
-                    }
-
-                    .dw {
-                        font-size: 16px;
-                        color: #b3b8cc;
-                    }
-                }
-
-                &:nth-child(2) {
-                    width: 60%;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-
-                    .text {
-                        font-size: 18px;
-
-                        .text-label {
-                            color: #b3b8cc;
-                            font-weight: bold;
-                        }
-
-                        .text-value {
-                            font-family: 'douyuFont';
-                            color: #3df6ff;
-                            margin-left: 10px;
-                        }
-                    }
-                }
+            .dw {
+              font-size: 16px;
+              color: #b3b8cc;
             }
+          }
+
+          &:nth-child(2) {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .text {
+              font-size: 18px;
 
-            .text1 {
-                font-size: 18px;
+              .text-label {
                 color: #b3b8cc;
                 font-weight: bold;
+              }
+
+              .text-value {
+                font-family: 'douyuFont';
+                color: #3df6ff;
+                margin-left: 10px;
+              }
             }
+          }
+        }
+
+        .text1 {
+          font-size: 18px;
+          color: #b3b8cc;
+          font-weight: bold;
         }
+      }
     }
 
     .center-box {
-        height: 47%;
-        margin-bottom: 20px;
+      height: 47%;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .content-box {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
+        flex-direction: column;
+        width: 32%;
+        height: 100%;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
 
-        .content-box {
-            display: flex;
-            flex-direction: column;
-            width: 32%;
-            height: 100%;
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-            background-size: 100% 100%;
+        &:nth-child(2) {
+          margin: 0px 20px;
+        }
 
-            &:nth-child(2) {
-                margin: 0px 20px;
-            }
+        .title {
+          width: 100%;
+          height: 40px;
+          padding: 0px 15px;
+          margin-bottom: 10px;
+          border-bottom: 1px solid #0c3c88;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .title-label {
+            // font-family: 'douyuFont';
+            font-size: 16px;
+            color: #fff;
+          }
 
-            .title {
-                width: 100%;
-                height: 40px;
-                padding: 0px 15px;
-                margin-bottom: 10px;
-                border-bottom: 1px solid #0c3c88;
-                box-sizing: border-box;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .title-label {
-                    // font-family: 'douyuFont';
-                    font-size: 16px;
-                    color: #fff;
-                }
-
-                .details {
-                    font-size: 14px;
-                    color: #1f81df;
-                }
-            }
+          .details {
+            font-size: 14px;
+            color: #1f81df;
+          }
+        }
 
-            .content {
-                height: calc(100% - 40px);
-                margin-bottom: 10px;
-            }
+        .content {
+          height: calc(100% - 40px);
+          margin-bottom: 10px;
         }
+      }
     }
 
     .center-box1 {
-        height: 70%;
-        margin-bottom: 20px;
+      height: 70%;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+
+      .content-box {
         display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-        flex-wrap: wrap;
+        flex-direction: column;
+        width: calc(50% - 10px);
+        height: calc(50% - 10px);
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
 
-        .content-box {
-            display: flex;
-            flex-direction: column;
-            width: calc(50% - 10px);
-            height: calc(50% - 10px);
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-            background-size: 100% 100%;
+        &:nth-child(1) {
+          margin: 0px 20px 20px 0px;
+        }
 
-            &:nth-child(1) {
-                margin: 0px 20px 20px 0px;
-            }
+        &:nth-child(3) {
+          margin: 0px 20px 0px 0px;
+        }
 
-            &:nth-child(3) {
-                margin: 0px 20px 0px 0px;
-            }
+        .title {
+          width: 100%;
+          height: 40px;
+          padding: 0px 15px;
+          margin-bottom: 10px;
+          border-bottom: 1px solid #0c3c88;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .title-label {
+            font-size: 16px;
+            color: #fff;
+          }
 
-            .title {
-                width: 100%;
-                height: 40px;
-                padding: 0px 15px;
-                margin-bottom: 10px;
-                border-bottom: 1px solid #0c3c88;
-                box-sizing: border-box;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .title-label {
-                    font-size: 16px;
-                    color: #fff;
-                }
-
-                .details {
-                    font-size: 14px;
-                    color: #1f81df;
-                }
-            }
+          .details {
+            font-size: 14px;
+            color: #1f81df;
+          }
+        }
 
-            .content {
-                height: calc(100% - 40px);
-                margin-bottom: 10px;
-            }
+        .content {
+          height: calc(100% - 40px);
+          margin-bottom: 10px;
         }
+      }
     }
 
     .center-box2 {
-        height: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+
+      .content-box {
         display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-        flex-wrap: wrap;
+        flex-direction: column;
+        width: calc(50% - 10px);
+        height: calc(50% - 10px);
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
 
-        .content-box {
-            display: flex;
-            flex-direction: column;
-            width: calc(50% - 10px);
-            height: calc(50% - 10px);
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-            background-size: 100% 100%;
+        &:nth-child(1) {
+          margin: 0px 20px 20px 0px;
+        }
 
-            &:nth-child(1) {
-                margin: 0px 20px 20px 0px;
-            }
+        &:nth-child(3) {
+          margin: 0px 20px 0px 0px;
+        }
 
-            &:nth-child(3) {
-                margin: 0px 20px 0px 0px;
-            }
+        .title {
+          width: 100%;
+          height: 40px;
+          padding: 0px 15px;
+          margin-bottom: 10px;
+          border-bottom: 1px solid #0c3c88;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .title-label {
+            font-size: 16px;
+            color: #fff;
+          }
 
-            .title {
-                width: 100%;
-                height: 40px;
-                padding: 0px 15px;
-                margin-bottom: 10px;
-                border-bottom: 1px solid #0c3c88;
-                box-sizing: border-box;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .title-label {
-                    font-size: 16px;
-                    color: #fff;
-                }
-
-                .details {
-                    font-size: 14px;
-                    color: #1f81df;
-                }
-            }
+          .details {
+            font-size: 14px;
+            color: #1f81df;
+          }
+        }
 
-            .content {
-                height: calc(100% - 40px);
-                margin-bottom: 10px;
-            }
+        .content {
+          height: calc(100% - 40px);
+          margin-bottom: 10px;
         }
+      }
     }
 
     .footer-box {
-        height: calc(38% - 40px);
-        padding: 10px 15px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-box-sizing: border-box;
-        .footer-title {
-            height: 30px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+      height: calc(38% - 40px);
+      padding: 10px 15px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+      .footer-title {
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-            .echart-label {
-                font-family: 'douyuFont';
-                font-size: 16px;
-                color: #fff;
-            }
+        .echart-label {
+          font-family: 'douyuFont';
+          font-size: 16px;
+          color: #fff;
         }
+      }
 
-        .echart-content {
-            height: calc(100% - 30px);
-        }
+      .echart-content {
+        height: calc(100% - 30px);
+      }
     }
 
     .footer-box1 {
-        height: calc(30% - 20px);
-        padding: 10px 15px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-box-sizing: border-box;
-        .footer-title {
-            height: 30px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+      height: calc(30% - 20px);
+      padding: 10px 15px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+      .footer-title {
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-            .echart-label {
-                font-family: 'douyuFont';
-                font-size: 16px;
-                color: #fff;
-            }
+        .echart-label {
+          font-family: 'douyuFont';
+          font-size: 16px;
+          color: #fff;
         }
+      }
 
-        .echart-content {
-            height: calc(100% - 30px);
-        }
+      .echart-content {
+        height: calc(100% - 30px);
+      }
     }
 
     .content-s {
-        width: 100%;
-        height: 608px;
-        padding: 15px 20px 0px 20px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-        box-sizing: border-box;
+      width: 100%;
+      height: 608px;
+      padding: 15px 20px 0px 20px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+
+      .title-b {
+        height: 30px;
+        line-height: 30px;
+        font-family: 'douyuFont';
+        font-size: 16px;
+        color: #3df6ff;
+      }
+
+      .card-btn {
+        height: 28%;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
 
-        .title-b {
-            height: 30px;
-            line-height: 30px;
-            font-family: 'douyuFont';
+        .content-box {
+          position: relative;
+          width: 16%;
+          height: 100%;
+          background: url('../../../../../assets/images/fire/1.png') no-repeat center;
+          background-size: 100% 100%;
+          cursor: pointer;
+
+          .btn-label {
+            position: absolute;
+            left: 50%;
+            top: 0;
+            transform: translate(-50%);
             font-size: 16px;
-            color: #3df6ff;
+            color: #fff;
+          }
+
+          .box-item {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 89%;
+            height: 16%;
+            padding: 0px 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+            background-size: 100% 100%;
+
+            .text-t {
+              width: 17%;
+              color: #fff;
+              font-size: 12px;
+            }
+
+            .text-v {
+              width: 83%;
+              font-family: 'douyuFont';
+              font-size: 10px;
+              color: #3df6ff;
+              display: flex;
+              justify-content: flex-end;
+            }
+          }
+
+          .box-item1 {
+            top: 24%;
+          }
+
+          .box-item2 {
+            top: 50%;
+          }
+
+          .box-item3 {
+            top: 75%;
+          }
         }
 
-        .card-btn {
-            height: 28%;
-            margin-bottom: 10px;
+        .content-box1 {
+          position: relative;
+          width: 16%;
+          height: 100%;
+          background: url('../../../../../assets/images/fire/2.png') no-repeat center;
+          background-size: 100% 100%;
+          cursor: pointer;
+
+          .btn-label {
+            position: absolute;
+            left: 50%;
+            top: 0;
+            transform: translate(-50%);
+            font-size: 16px;
+            color: #fff;
+          }
+
+          .box-item {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 89%;
+            height: 16%;
+            padding: 0px 10px;
             display: flex;
             justify-content: space-between;
+            align-items: center;
+            background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+            background-size: 100% 100%;
 
-            .content-box {
-                position: relative;
-                width: 16%;
-                height: 100%;
-                background: url('../../../../../assets/images/fire/1.png') no-repeat center;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .btn-label {
-                    position: absolute;
-                    left: 50%;
-                    top: 0;
-                    transform: translate(-50%);
-                    font-size: 16px;
-                    color: #fff;
-                }
-
-                .box-item {
-                    position: absolute;
-                    left: 50%;
-                    transform: translate(-50%, 0);
-                    width: 89%;
-                    height: 16%;
-                    padding: 0px 10px;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-                    background-size: 100% 100%;
-
-                    .text-t {
-                        width: 17%;
-                        color: #fff;
-                        font-size: 12px;
-                    }
-
-                    .text-v {
-                        width: 83%;
-                        font-family: 'douyuFont';
-                        font-size: 10px;
-                        color: #3df6ff;
-                        display: flex;
-                        justify-content: flex-end;
-                    }
-                }
-
-
-                .box-item1 {
-                    top: 24%;
-                }
-
-                .box-item2 {
-                    top: 50%;
-                }
-
-                .box-item3 {
-                    top: 75%;
-                }
+            .text-t {
+              width: 17%;
+              color: #fff;
+              font-size: 12px;
             }
 
-            .content-box1 {
-                position: relative;
-                width: 16%;
-                height: 100%;
-                background: url('../../../../../assets/images/fire/2.png') no-repeat center;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .btn-label {
-                    position: absolute;
-                    left: 50%;
-                    top: 0;
-                    transform: translate(-50%);
-                    font-size: 16px;
-                    color: #fff;
-                }
-
-                .box-item {
-                    position: absolute;
-                    left: 50%;
-                    transform: translate(-50%, 0);
-                    width: 89%;
-                    height: 16%;
-                    padding: 0px 10px;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-                    background-size: 100% 100%;
-
-                    .text-t {
-                        width: 17%;
-                        color: #fff;
-                        font-size: 12px;
-                    }
-
-                    .text-v {
-                        width: 83%;
-                        font-family: 'douyuFont';
-                        font-size: 10px;
-                        color: #3df6ff;
-                        display: flex;
-                        justify-content: flex-end;
-                    }
-                }
-
-                .box-item1 {
-                    top: 19%;
-                }
-
-                .box-item2 {
-                    top: 41%;
-                }
-
-                .box-item3 {
-                    top: 63%;
-                }
+            .text-v {
+              width: 83%;
+              font-family: 'douyuFont';
+              font-size: 10px;
+              color: #3df6ff;
+              display: flex;
+              justify-content: flex-end;
             }
+          }
+
+          .box-item1 {
+            top: 19%;
+          }
+
+          .box-item2 {
+            top: 41%;
+          }
+
+          .box-item3 {
+            top: 63%;
+          }
         }
+      }
 
-        .echart-box {
-            height: calc(72% - 41px);
-            border: 1px solid #114aac;
+      .echart-box {
+        height: calc(72% - 41px);
+        border: 1px solid #114aac;
 
-            .title-f {
-                height: 40px;
-                padding: 0px 10px;
-                box-sizing: border-box;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
+        .title-f {
+          height: 40px;
+          padding: 0px 10px;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
 
-                .title-text {
-                    font-family: 'douyuFont';
-                    font-size: 16px;
-                    color: #3df6ff;
-                }
-            }
+          .title-text {
+            font-family: 'douyuFont';
+            font-size: 16px;
+            color: #3df6ff;
+          }
+        }
 
-            .echarts-box {
-                height: calc(100% - 40px);
-            }
+        .echarts-box {
+          height: calc(100% - 40px);
         }
+      }
     }
-}</style>
+  }
+</style>

src/views/vent/monitorManager/balancePressMonitor/balancePress.data.ts

@@ -6,7 +6,7 @@ export const warningConfig = reactive({
   data: [
     ['火焰6', '严重报警', '03-05'],
     ['测点43', '一般预警', '03-05'],
-    ['CO23', '一版预警', '03-05'],
+    ['CO23', '一般预警', '03-05'],
     ['测点6', '超高预警', '03-05'],
     ['测点65', '超高预警', '03-05'],
     ['温度4', '一般预警', '03-05'],

src/views/vent/monitorManager/beltTunMonitor/beltTun.data.ts

@@ -126,7 +126,7 @@ export const warningConfig = reactive({
   data: [
     ['火焰6', '严重报警', '03-05'],
     ['测点43', '一般预警', '03-05'],
-    ['CO23', '一版预警', '03-05'],
+    ['CO23', '一般预警', '03-05'],
     ['测点6', '超高预警', '03-05'],
     ['测点65', '超高预警', '03-05'],
     ['温度4', '一般预警', '03-05'],
@@ -358,31 +358,31 @@ export const dustColumns: BasicColumn[] = [
   {
     title: '名称',
     dataIndex: 'strname',
-    width: 100,
+    width: 80,
     align: 'center',
   },
   {
     title: '压力(Pa)',
     dataIndex: 'netStatus',
-    width: 80,
+    width: 50,
     align: 'center',
   },
   {
     title: '流量(mg/㎡)',
     dataIndex: 'netStatus',
-    width: 80,
+    width: 50,
     align: 'center',
   },
   {
     title: '连接状态',
     dataIndex: 'netStatus',
-    width: 80,
+    width: 50,
     align: 'center',
   },
   {
     title: '操作',
     dataIndex: 'action',
-    width: 80,
+    width: 50,
     align: 'center',
   },
 ];
@@ -713,6 +713,5 @@ export const gasPump = [
 ];
 export const gasPumpCtr = reactive({
   gasPump1Open: '0',
-  gasPump2Open: '0'
+  gasPump2Open: '0',
 });
-

src/views/vent/monitorManager/beltTunMonitor/components/beltTunDustHome.vue

@@ -25,7 +25,7 @@
           <template #container>
             <div class="">
               <div class="vent-flex-row vent-margin-l-5">
-                <div class="vent-flex-row ">
+                <div class="vent-flex-row">
                   <SvgIcon class="icon vent-margin-r-5" size="13" name="alarm-temperature" />
                   <span>是否报警：</span>
                 </div>
@@ -40,8 +40,8 @@
             </div>
           </template>
         </ventBox1>
-        <div class="item-box vent-margin-t-10" >
-          <LivePlayer id="fm-player1" style="height: 220px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
+        <div class="item-box vent-margin-t-10">
+          <LivePlayer id="fm-player1" style="height: 220px" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
         </div>
       </div>
       <div class="lr right-box">
@@ -57,12 +57,18 @@
                 <div class="btn btn2">一键停止</div>
               </div>
             </div>
-            <a-table :columns="dustColumns" :data-source="dustDataSource" :pagination="false" size="small" maxWidth="340"
-              :scroll="{ x: 'max-content', y: 200 }">
+            <a-table
+              :columns="dustColumns"
+              :data-source="dustDataSource"
+              :pagination="false"
+              size="small"
+              maxWidth="340"
+              :scroll="{ x: 'max-content', y: 200 }"
+            >
               <template #bodyCell="{ column, record }">
                 <template v-if="column.dataIndex === 'warnFlag'">
-                  <span v-if="record['warnFlag'] == 0" style="color: #00ff00;">链接</span>
-                  <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
+                  <span v-if="record['warnFlag'] == 0" style="color: #00ff00">链接</span>
+                  <span v-else style="color: #ff0000"> {{ record.warnDes }}</span>
                 </template>
                 <template v-if="column.dataIndex === 'action'">
                   <a-switch v-model:checked="openDust" @change="handleDust(record)" />
@@ -77,217 +83,212 @@
 </template>
 
 <script setup lang="ts">
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
+  import { list } from '../beltTun.api';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { dustColumns, dustMonitorColumns } from '../beltTun.data';
+  import LivePlayer from '@liveqing/liveplayer-v3';
 
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
-import { list } from '../beltTun.api';
-import ventBox1 from '/@/components/vent/ventBox1.vue'
-import { SvgIcon } from '/@/components/Icon';
-import { dustColumns, dustMonitorColumns  } from '../beltTun.data'
-import LivePlayer from '@liveqing/liveplayer-v3';
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
+  const player1 = ref(null);
+  const loading = ref(false);
+  const flvURL1 = () => {
+    return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
+  };
 
-const props = defineProps({
-  deviceId: {
-    type: String,
-    require: true
-  }
-})
-const player1 = ref(null)
-const loading = ref(false)
-const flvURL1 = () => {
-  return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
-};
-
-// 默认初始是第一行
-const openDust = ref(false)
-const beltTunSource = ref({});
-const beltTunHistorySource = ref([])
-const dustDataSource = ref([]);
-
-// 监测数据
-const selectData = reactive({});
+  // 默认初始是第一行
+  const openDust = ref(false);
+  const beltTunSource = ref({});
+  const beltTunHistorySource = ref([]);
+  const dustDataSource = ref([]);
 
+  // 监测数据
+  const selectData = reactive({});
 
-function handleDust(record) {
-  //
-}
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(async () => {
-      if (props.deviceId) {
-        const data = await getDataSource(props.deviceId)
-        Object.assign(selectData, data);
-      }
-      if (timer) {
-        timer = null;
-      }
-      await getMonitor();
-      loading.value = false
-    }, flag ? 0 : 1000);
+  function handleDust(record) {
+    //
   }
-};
-
-async function getDataSource(systemID) {
-  const res = await list({ devicetype: 'sys', systemID, type: 'dustS' });
-  const result = res.deviceInfo;
-  for (const key in result) {
-    const item = result[key]
-    // ''.startsWith
-    if (item.type.startsWith('dust')) {
-      // 风门
-      dustDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
 
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (props.deviceId) {
+            const data = await getDataSource(props.deviceId);
+            Object.assign(selectData, data);
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
     }
   }
-  loading.value = false;
-  beltTunHistorySource.value = res['sysInfo']['history']
-  beltTunSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
-}
-
-function toDetail() {
 
-}
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: 'sys', systemID, type: 'dustS' });
+    const result = res.deviceInfo;
+    for (const key in result) {
+      const item = result[key];
+      // ''.startsWith
+      if (item.type.startsWith('dust')) {
+        // 风门
+        dustDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+      }
+    }
+    loading.value = false;
+    beltTunHistorySource.value = res['sysInfo']['history'];
+    beltTunSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
+  }
 
-function changeType(e: Event, item) {
-  item.value = e.target?.value
-}
+  function toDetail() {}
 
-onBeforeMount(() => {
+  function changeType(e: Event, item) {
+    item.value = e.target?.value;
+  }
 
-});
+  onBeforeMount(() => {});
 
-onMounted(async () => {
-  loading.value = true;
-  timer = null
-  await getMonitor(true)
-});
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
+  onMounted(async () => {
+    loading.value = true;
+    timer = null;
+    await getMonitor(true);
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@import '../../comment/less/workFace.less';
-@ventSpace: zxm;
+  @import '/@/design/vent/modal.less';
+  @import '../../comment/less/workFace.less';
+  @ventSpace: zxm;
 
-.base-info{
-  display: flex;
-  justify-content: space-between;
-  color: #fff;
-  padding: 0 5px;
-  margin-top: 20px;
-  .base-item{
-    width: calc(50% - 8px);
+  .base-info {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    font-size: 17px;
-    border: 1px solid ;
-    border-image: linear-gradient(45deg, #00e5ff92, #006fa684, #00e5ff22, #006fa614) 1;
-    .title{
-      width: 100%;
-      background: #00e5ff52;
-      background: linear-gradient(45deg, #006ea652, #00f2ff42);
-      text-align: center;
-      line-height: 45px;
-    }
-    .value{
-      width: 100%;
-      background: #006EA622;
-      text-align: center;
-      line-height: 45px;
-      font-family: 'douyuFont';
-      color: #1bf5fd;
-      padding-top: 5px;
+    justify-content: space-between;
+    color: #fff;
+    padding: 0 5px;
+    margin-top: 20px;
+    .base-item {
+      width: calc(50% - 8px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 17px;
+      border: 1px solid;
+      border-image: linear-gradient(45deg, #00e5ff92, #006fa684, #00e5ff22, #006fa614) 1;
+      .title {
+        width: 100%;
+        background: #00e5ff52;
+        background: linear-gradient(45deg, #006ea652, #00f2ff42);
+        text-align: center;
+        line-height: 45px;
+      }
+      .value {
+        width: 100%;
+        background: #006ea622;
+        text-align: center;
+        line-height: 45px;
+        font-family: 'douyuFont';
+        color: #1bf5fd;
+        padding-top: 5px;
+      }
     }
   }
-}
 
-.dust-fan-monitor {
-  display: flex;
-  flex-wrap: wrap;
-}
-.dust-max{
+  .dust-fan-monitor {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .dust-max {
     flex: 1;
     display: flex;
     align-items: center;
-    background-image: linear-gradient( to right, #00f2ff42, #006ea600);
+    background-image: linear-gradient(to right, #00f2ff42, #006ea600);
     border-left: 4px solid #5df7ff88;
     margin-top: 10px;
     margin-left: 8px;
-  .icon-style{
-    background: #25536f;
-    padding-left: 6px;
-    margin-right: 10px;
-    padding-right: 6px;
-  }
-  .value{
-    font-family: 'douyuFont';
-    font-weight: 600;
-    font-size: 14px;
-    color: #28DCE4;
-    margin-right: 10px;
-    margin-left: 30px;
-  }
-  .max-data{
-    width: calc(100% - 85px);
-    display: flex;
-    margin-left: 5px;
-    margin-right: 30px;
-    .title{
-      font-size: 16px;
+    .icon-style {
+      background: #25536f;
+      padding-left: 6px;
+      margin-right: 10px;
+      padding-right: 6px;
+    }
+    .value {
+      font-family: 'douyuFont';
+      font-weight: 600;
+      font-size: 14px;
+      color: #28dce4;
+      margin-right: 10px;
+      margin-left: 30px;
+    }
+    .max-data {
+      width: calc(100% - 85px);
+      display: flex;
+      margin-left: 5px;
+      margin-right: 30px;
+      .title {
+        font-size: 16px;
+      }
     }
-    
   }
-}
 
-.dust-fan-monitor-item {
-  width: 152px;
-  height: 70px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid rgba(25, 251, 255, 0.4);
-  box-shadow: inset 0 0 20px rgba(0, 197, 255, 0.4);
-  background: rgba(0, 0, 0, 0.06666667);
-  margin-bottom: 5px;
-  padding: 8px 0;
+  .dust-fan-monitor-item {
+    width: 152px;
+    height: 70px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid rgba(25, 251, 255, 0.4);
+    box-shadow: inset 0 0 20px rgba(0, 197, 255, 0.4);
+    background: rgba(0, 0, 0, 0.06666667);
+    margin-bottom: 5px;
+    padding: 8px 0;
 
-  &:nth-child(2n) {
-    margin-left: 12px;
-  }
+    &:nth-child(2n) {
+      margin-left: 12px;
+    }
 
-  .title {
-    color: #5dfaff;
-  }
+    .title {
+      color: #5dfaff;
+    }
 
-  .unit {
-    font-size: 13px;
-    color: #ffffffaa;
-  }
+    .unit {
+      font-size: 13px;
+      color: #ffffffaa;
+    }
 
-  .value {
-    color: #FFB212;
+    .value {
+      color: #ffb212;
+    }
   }
-}
 
-.fault {
-  .title {
-    color: #c4fdff;
-  }
+  .fault {
+    .title {
+      color: #c4fdff;
+    }
 
-  .value {
-    // color: #FFB212;
-    color: #61ddb1;
+    .value {
+      // color: #FFB212;
+      color: #61ddb1;
+    }
   }
-}
 </style>

src/views/vent/monitorManager/chamberMonitor/chamber.data.ts

@@ -6,7 +6,7 @@ export const warningConfig = reactive({
   data: [
     ['火焰6', '严重报警', '03-05'],
     ['测点43', '一般预警', '03-05'],
-    ['CO23', '一版预警', '03-05'],
+    ['CO23', '一般预警', '03-05'],
     ['测点6', '超高预警', '03-05'],
     ['测点65', '超高预警', '03-05'],
     ['温度4', '一般预警', '03-05'],

src/views/vent/monitorManager/comment/GroupMonitorTable.vue

@@ -16,12 +16,13 @@
           <template v-if="column.dataIndex === 'isCheck'">
             <a-radio :value="record.deviceID" />
           </template>
-          <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
-            record.warnFlag == 0 ? '正常' : '报警'
+          <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
+            record.warnFlag == '0' ? '正常' : '报警'
           }}</a-tag>
           <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
             record.netStatus == '0' ? '断开' : '连接'
           }}</a-tag>
+          <slot name="bodyCell" v-bind="{ column, record }"></slot>
         </template>
         <template #operation="{ column, record }">
           <slot name="action" v-bind="{ column, record }"></slot>
@@ -33,8 +34,9 @@
 
 <script lang="ts" setup>
   //ts语法
-  import { toRaw, watch, ref, onMounted, onUnmounted, nextTick } from 'vue';
+  import { toRaw, watch, ref, onMounted, onUnmounted, nextTick, inject } from 'vue';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  const globalConfig = inject('globalConfig');
   const props = defineProps({
     columnsType: {
       type: String,
@@ -233,8 +235,14 @@
               if (columnKey.endsWith('_merge')) {
                 resultData1[columnKey] = data[key1] == 0 || data[key1] == null || data[key1] == undefined ? data[key2] : data[key1];
               } else {
-                resultData1[columnKey] = data[key1];
-                resultData2[columnKey] = data[key2];
+                if (columnKey.startsWith('FanStartStatus')) {
+                  resultData1[columnKey] = data[key1];
+                  resultData2[columnKey] = data[key2];
+                } else {
+                  resultData1[columnKey] = data['Fan1StartStatus'] == '0' && globalConfig?.simulatedPassword ? '-' : data[key1];
+                  resultData2[columnKey] = data['Fan2StartStatus'] == '0' && globalConfig?.simulatedPassword ? '-' : data[key2];
+                }
+
                 if (resultData1[columnKey] == undefined && resultData2[columnKey] == undefined) {
                   resultData1[columnKey] = data[columnKey];
                   resultData2[columnKey] = data[columnKey];
@@ -246,8 +254,13 @@
               if (columnKey.endsWith('_merge')) {
                 resultData1[columnKey] = !data[key1] || data[key1] == 0 || data[key1] == null || data[key1] == undefined ? data[key2] : data[key1];
               } else {
-                resultData1[columnKey] = data[key1];
-                resultData2[columnKey] = data[key2];
+                if (columnKey.startsWith('fanStartStatus')) {
+                  resultData1[columnKey] = data[key1];
+                  resultData2[columnKey] = data[key2];
+                } else {
+                  resultData1[columnKey] = data['fan1StartStatus'] == '0' && globalConfig?.simulatedPassword ? '-' : data[key1];
+                  resultData2[columnKey] = data['fan2StartStatus'] == '0' && globalConfig?.simulatedPassword ? '-' : data[key2];
+                }
                 if (resultData1[columnKey] == undefined && resultData2[columnKey] == undefined) {
                   resultData1[columnKey] = data[columnKey];
                   resultData2[columnKey] = data[columnKey];
@@ -270,7 +283,6 @@
         }
         list.push(resultData1, resultData2);
       });
-
       // if (oldVal.length < 1 && selectRowIndex.value == -1) {
       //   // 第一次
       //   setSelectedRowKeys(list[0]['deviceID']);

src/views/vent/monitorManager/compressor/components/nitrogenHome1.vue

@@ -109,7 +109,7 @@
           <div class="item item-l">
             <ventBox1 class="vent-margin-t-10">
               <template #title>
-                <div>下风测详情</div>
+                <div>下风侧详情</div>
               </template>
               <template #container>
                 <div class="monitor-box">
@@ -263,10 +263,10 @@ const deviceParameterData = [
 const downWindData = [
   {
     o2Val: '下风侧氧气(%)',
-    temperature: '下风测温度(℃)',
+    temperature: '下风侧温度(℃)',
   },
   {
-    fumes: '下风测烟雾(­%)',
+    fumes: '下风侧烟雾(­%)',
   },
 ];
 
@@ -543,9 +543,12 @@ onUnmounted(() => {
         display: flex;
         flex-direction: column;
         position: relative;
-        overflow: hidden;
+        // overflow: hidden;
         z-index: 9999;
         pointer-events: auto;
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: calc(100% - 70px);
       }
 
       .item {
@@ -557,7 +560,7 @@ onUnmounted(() => {
         margin-bottom: 0px;
         pointer-events: auto;
         color: #fff;
-        overflow: hidden;
+        // overflow: hidden;
 
         &:first-child {
           margin-top: 0px;

src/views/vent/monitorManager/deviceMonitor/components/device/modal/ballvalve.modal.vue

@@ -1,10 +1,13 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="register" :title="`束管监测详情    ${currentTime}`" width="1200px" @ok="handleOk"
-    @cancel="handleCancel">
+  <BasicModal v-bind="$attrs" @register="register" :title="`束管监测详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel">
     <div class="fiber-modal">
       <div class="modal-left">
-        <div v-for="device in deviceList" class="link-item"
-          :class="{ 'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
+        <div
+          v-for="device in deviceList"
+          class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
+          :key="device.deviceID"
+        >
           <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
         </div>
       </div>
@@ -25,15 +28,19 @@
           </div>
           <div class="base-item">
             <span class="title">监测区域范围：</span>
-            <span class="value">{{ posMonitor['startArea'] ? posMonitor['startArea'] : '-' }}m - {{ posMonitor['engArea'] ? posMonitor['engArea'] : '-' }}m</span>
+            <span class="value"
+              >{{ posMonitor['startArea'] ? posMonitor['startArea'] : '-' }}m - {{ posMonitor['engArea'] ? posMonitor['engArea'] : '-' }}m</span
+            >
           </div>
           <div class="base-item">
             <span class="title">开启温度：</span>
-            <span class="value">{{ (posMonitor['tempStart'] !== undefined && posMonitor['tempStart'] !== null) ? posMonitor['tempStart'] : '-' }}℃</span>
+            <span class="value"
+              >{{ posMonitor['tempStart'] !== undefined && posMonitor['tempStart'] !== null ? posMonitor['tempStart'] : '-' }}℃</span
+            >
           </div>
           <div class="base-item">
             <span class="title">关闭温度：</span>
-            <span class="value">{{ (posMonitor['tempStop'] !== undefined && posMonitor['tempStop'] !== null) ? posMonitor['tempStop'] : '-' }}℃</span>
+            <span class="value">{{ posMonitor['tempStop'] !== undefined && posMonitor['tempStop'] !== null ? posMonitor['tempStop'] : '-' }}℃</span>
           </div>
         </div>
         <span class="base-title">实时监测参数</span>
@@ -45,16 +52,20 @@
             </div>
             <div class="item-container">
               <div class="title">平均温度</div>
-              <div class="value">{{ (posMonitor['tempAvg'] !== undefined && posMonitor['tempAvg'] !== null) ? posMonitor['tempAvg'] : '-' }} <span>℃</span></div>
+              <div class="value"
+                >{{ posMonitor['tempAvg'] !== undefined && posMonitor['tempAvg'] !== null ? posMonitor['tempAvg'] : '-' }} <span>℃</span></div
+              >
             </div>
           </div>
-           <div class="top-item">
+          <div class="top-item">
             <div class="icon">
               <SvgIcon class="icon-style max-temperature" size="38" name="max-temperature" />
             </div>
             <div class="item-container">
               <div class="title">最高温度</div>
-              <div class="value">{{ (posMonitor['tempMax'] !== undefined && posMonitor['tempMax'] !== null) ? posMonitor['tempMax'] : '-' }} <span>℃</span> </div>
+              <div class="value"
+                >{{ posMonitor['tempMax'] !== undefined && posMonitor['tempMax'] !== null ? posMonitor['tempMax'] : '-' }} <span>℃</span>
+              </div>
             </div>
           </div>
           <div class="top-item">
@@ -63,7 +74,9 @@
             </div>
             <div class="item-container">
               <div class="title">最低温度</div>
-              <div class="value">{{ (posMonitor['tempMin'] !== undefined && posMonitor['tempMin'] !== null) ? posMonitor['tempMin'] : '-' }} <span>℃</span></div>
+              <div class="value"
+                >{{ posMonitor['tempMin'] !== undefined && posMonitor['tempMin'] !== null ? posMonitor['tempMin'] : '-' }} <span>℃</span></div
+              >
             </div>
           </div>
           <div class="top-item warning-box">
@@ -72,428 +85,511 @@
             </div>
             <div class="item-container">
               <div class="title">设备状态</div>
-              <div class="warning-value">{{ posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ? '开启' : '离线'}}</div>
+              <div class="warning-value">{{ posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ? '开启' : '离线' }}</div>
             </div>
           </div>
           <div class="top-item item-data">
             <div class="icon">
-              <SvgIcon class="icon-style" name="temp" style="width: 62px; height: 38px; margin-top: 10px;" />
+              <SvgIcon class="icon-style" name="temp" style="width: 62px; height: 38px; margin-top: 10px" />
             </div>
             <div class="item-container">
-              <div class="title">温度监测<span :class="{'state-close': posMonitor['devicesSTAT'] == 0, 'state-open': posMonitor['devicesSTAT'] == 1, 'state-offline': posMonitor['devicesSTAT'] == 2 }">({{ posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ? '开启' : posMonitor['devicesSTAT'] == 2 ? '离线' :'' }})</span></div>
-              <div class="value" :class="{'alarm-value': posMonitor['isWarn'] == 2 }">{{ (posMonitor['tempRealtime'] !== undefined && posMonitor['tempRealtime'] !== null) ? posMonitor['tempRealtime'] : '-'
-              }} <span>℃</span> </div>
+              <div class="title"
+                >温度监测<span
+                  :class="{
+                    'state-close': posMonitor['devicesSTAT'] == 0,
+                    'state-open': posMonitor['devicesSTAT'] == 1,
+                    'state-offline': posMonitor['devicesSTAT'] == 2,
+                  }"
+                  >({{
+                    posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ? '开启' : posMonitor['devicesSTAT'] == 2 ? '离线' : ''
+                  }})</span
+                ></div
+              >
+              <div class="value" :class="{ 'alarm-value': posMonitor['isWarn'] == 2 }"
+                >{{ posMonitor['tempRealtime'] !== undefined && posMonitor['tempRealtime'] !== null ? posMonitor['tempRealtime'] : '-' }}
+                <span>℃</span>
+              </div>
             </div>
-            <div class="rang">报警阈值：小于<span class="rang-data">{{ posMonitor['warmLow'] ? posMonitor['warmLow'] : '-' }}</span>或大于<span class="rang-data">{{ posMonitor['warnUp'] ? posMonitor['warnUp'] : '-' }}</span></div>
+            <div class="rang"
+              >报警阈值：小于<span class="rang-data">{{ posMonitor['warmLow'] ? posMonitor['warmLow'] : '-' }}</span
+              >或大于<span class="rang-data">{{ posMonitor['warnUp'] ? posMonitor['warnUp'] : '-' }}</span></div
+            >
           </div>
           <div class="top-item item-data">
             <div class="icon">
-              <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px;" />
+              <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px" />
             </div>
             <div class="item-container">
-              <div class="title">CO监测<span :class="{ 'state-close': posMonitor['COSensorSTAT'] == 0, 'state-open': posMonitor['COSensorSTAT'] == 1, 'state-offline': posMonitor['COSensorSTAT'] == 2 }">({{ posMonitor['COSensorSTAT'] == 0 ? '关闭' : posMonitor['COSensorSTAT'] == 1 ? '开启' : posMonitor['COSensorSTAT'] == 2 ? '离线' : '' }})</span></div>
-              <div class="value" :class="{ 'alarm-value': posMonitor['COSensorStatus'] == 2 }">{{ (posMonitor['CORealtime'] !== undefined && posMonitor['CORealtime'] !== null) ? posMonitor['CORealtime'] : '-'
-              }} <span>ppm</span> </div>
+              <div class="title"
+                >CO监测<span
+                  :class="{
+                    'state-close': posMonitor['COSensorSTAT'] == 0,
+                    'state-open': posMonitor['COSensorSTAT'] == 1,
+                    'state-offline': posMonitor['COSensorSTAT'] == 2,
+                  }"
+                  >({{
+                    posMonitor['COSensorSTAT'] == 0
+                      ? '关闭'
+                      : posMonitor['COSensorSTAT'] == 1
+                      ? '开启'
+                      : posMonitor['COSensorSTAT'] == 2
+                      ? '离线'
+                      : ''
+                  }})</span
+                ></div
+              >
+              <div class="value" :class="{ 'alarm-value': posMonitor['COSensorStatus'] == 2 }"
+                >{{ posMonitor['CORealtime'] !== undefined && posMonitor['CORealtime'] !== null ? posMonitor['CORealtime'] : '-' }} <span>ppm</span>
+              </div>
             </div>
-            <div class="rang">报警阈值：<span class="rang-data">{{ posMonitor['COWarn'] ? posMonitor['COWarn'] : '-' }}</span></div>
+            <div class="rang"
+              >报警阈值：<span class="rang-data">{{ posMonitor['COWarn'] ? posMonitor['COWarn'] : '-' }}</span></div
+            >
           </div>
           <div class="top-item item-data">
             <div class="icon">
-              <SvgIcon class="icon-style" name="smoke" style="width: 72px; height: 46px;" />
+              <SvgIcon class="icon-style" name="smoke" style="width: 72px; height: 46px" />
             </div>
             <div class="item-container">
-              <div class="title">烟雾监测<span :class="{ 'state-close': posMonitor['SmokeSTAT485'] == 0, 'state-open': posMonitor['SmokeSTAT485'] == 1, 'state-offline': posMonitor['SmokeSTAT485'] == 2 }">({{ posMonitor['SmokeSTAT485'] == 0 ? '关闭' : posMonitor['SmokeSTAT485'] == 1 ? '开启' : posMonitor['SmokeSTAT485'] == 2 ? '离线' : '' }})</span></div>
-              <div class="value" :class="{ 'alarm-value': posMonitor['SmokeStatus485'] == 2 }">{{ (posMonitor['SmokeRealtime485'] !== undefined && posMonitor['SmokeRealtime485'] !== null) ? posMonitor['SmokeRealtime485'] : '-' }} <span>%</span></div>
+              <div class="title"
+                >烟雾监测<span
+                  :class="{
+                    'state-close': posMonitor['SmokeSTAT485'] == 0,
+                    'state-open': posMonitor['SmokeSTAT485'] == 1,
+                    'state-offline': posMonitor['SmokeSTAT485'] == 2,
+                  }"
+                  >({{
+                    posMonitor['SmokeSTAT485'] == 0
+                      ? '关闭'
+                      : posMonitor['SmokeSTAT485'] == 1
+                      ? '开启'
+                      : posMonitor['SmokeSTAT485'] == 2
+                      ? '离线'
+                      : ''
+                  }})</span
+                ></div
+              >
+              <div class="value" :class="{ 'alarm-value': posMonitor['SmokeStatus485'] == 2 }"
+                >{{ posMonitor['SmokeRealtime485'] !== undefined && posMonitor['SmokeRealtime485'] !== null ? posMonitor['SmokeRealtime485'] : '-' }}
+                <span>%</span></div
+              >
             </div>
-            <div class="rang">报警阈值：<span class="rang-data">{{ posMonitor['SmokeWarn485'] ? posMonitor['SmokeWarn485'] : '-' }}</span></div>
+            <div class="rang"
+              >报警阈值：<span class="rang-data">{{ posMonitor['SmokeWarn485'] ? posMonitor['SmokeWarn485'] : '-' }}</span></div
+            >
           </div>
           <div class="top-item item-data">
             <div class="icon">
-              <SvgIcon class="icon-style" name="pressure" style="width: 62px; height: 38px;" />
+              <SvgIcon class="icon-style" name="pressure" style="width: 62px; height: 38px" />
             </div>
             <div class="item-container">
-              <div class="title">压力监测<span :class="{ 'state-close': posMonitor['PressureSensorSTAT'] == 0, 'state-open': posMonitor['PressureSensorSTAT'] == 1, 'state-offline': posMonitor['PressureSensorSTAT'] == 2 }">({{ posMonitor['PressureSensorSTAT'] == 0 ? '关闭' : posMonitor['PressureSensorSTAT'] == 1 ? '开启' : posMonitor['PressureSensorSTAT'] == 2 ? '离线' : '' }})</span></div>
-              <div class="value" :class="{ 'alarm-value': posMonitor['PressureSensorStatus'] == 2 }">{{ (posMonitor['PressureRealtime'] !== undefined && posMonitor['PressureRealtime'] !== null) ? posMonitor['PressureRealtime'] : '-' }} <span>%</span></div>
+              <div class="title"
+                >压力监测<span
+                  :class="{
+                    'state-close': posMonitor['PressureSensorSTAT'] == 0,
+                    'state-open': posMonitor['PressureSensorSTAT'] == 1,
+                    'state-offline': posMonitor['PressureSensorSTAT'] == 2,
+                  }"
+                  >({{
+                    posMonitor['PressureSensorSTAT'] == 0
+                      ? '关闭'
+                      : posMonitor['PressureSensorSTAT'] == 1
+                      ? '开启'
+                      : posMonitor['PressureSensorSTAT'] == 2
+                      ? '离线'
+                      : ''
+                  }})</span
+                ></div
+              >
+              <div class="value" :class="{ 'alarm-value': posMonitor['PressureSensorStatus'] == 2 }"
+                >{{ posMonitor['PressureRealtime'] !== undefined && posMonitor['PressureRealtime'] !== null ? posMonitor['PressureRealtime'] : '-' }}
+                <span>%</span></div
+              >
             </div>
-            <div class="rang">报警阈值：<span class="rang-data">{{ posMonitor['PressureWarn'] ? posMonitor['PressureWarn'] : '-' }}</span></div>
+            <div class="rang"
+              >报警阈值：<span class="rang-data">{{ posMonitor['PressureWarn'] ? posMonitor['PressureWarn'] : '-' }}</span></div
+            >
           </div>
         </div>
         <div class="right-bottom">
           <span class="base-title">设备监测曲线</span>
-          <a-table
-            size="small"
-            :columns="ballvalveColumns"
-            :data-source="[]"
-            :pagination="false"
-            :scroll="{ y: 300 }"
-          />
+          <a-table size="small" :columns="ballvalveColumns" :data-source="[]" :pagination="false" :scroll="{ y: 300 }" />
         </div>
       </div>
     </div>
   </BasicModal>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watch, shallowRef } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { SvgIcon } from '/@/components/Icon';
-import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
-import dayjs from 'dayjs'
-import { ballvalveColumns } from '../device.data'
-
-export default defineComponent({
-  components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
-  props: {
-    dataSource: { type: Array },
-    activeID: { type: String }
-  },
-  setup(props) {
-    const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
-    const modelRef = ref({});
-    const loading = ref(true);
-    const activeDeviceID = ref('');
-    const deviceList = ref<any[]>([])
-    const historyList = ref<any[]>([])
-    const posList = ref<any[]>([])
-    const posMonitor = shallowRef({})
-
-
-    const [register, { setModalProps, closeModal }] = useModalInner();
-
-    function handleVisibleChange(visible) {
-      if (visible) {
+  import { defineComponent, ref, watch, shallowRef } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+  import dayjs from 'dayjs';
+  import { ballvalveColumns } from '../device.data';
+
+  export default defineComponent({
+    components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
+    props: {
+      dataSource: { type: Array },
+      activeID: { type: String },
+    },
+    setup(props) {
+      const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+      const modelRef = ref({});
+      const loading = ref(true);
+      const activeDeviceID = ref('');
+      const deviceList = ref<any[]>([]);
+      const historyList = ref<any[]>([]);
+      const posList = ref<any[]>([]);
+      const posMonitor = shallowRef({});
+
+      const [register, { setModalProps, closeModal }] = useModalInner();
+
+      function handleVisibleChange(visible) {
+        if (visible) {
+          loading.value = true;
+          setModalProps({ loading: true, confirmLoading: true });
+
+          setTimeout(() => {
+            loading.value = false;
+            setModalProps({ loading: false, confirmLoading: false });
+          }, 1000);
+        }
+      }
+
+      // 选择监测
+      function selectDevice(id) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
-
         setTimeout(() => {
           loading.value = false;
+          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 1000);
+        }, 300);
       }
-    }
-
-    // 选择监测
-    function selectDevice(id) {
-      loading.value = true;
-      setModalProps({ loading: true, confirmLoading: true });
-      setTimeout(() => {
-        loading.value = false;
-        activeDeviceID.value = id
-        setModalProps({ loading: false, confirmLoading: false });
-      }, 300);
-    }
-
-    function handleOk(e) {
-      e.preventDefault()
-      closeModal()
-    }
-
-    function handleCancel(e) {
-      e.preventDefault()
-      closeModal()
-    }
 
-    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-      if (newActiveID != oldActiveID) {
-        activeDeviceID.value = newActiveID as string
+      function handleOk(e) {
+        e.preventDefault();
+        closeModal();
       }
-      deviceList.value = newDataSource?.filter((item: any, index) => {
-        if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
-          activeDeviceID.value = item.deviceID
-          posMonitor.value = Object.assign(item, item.readData)
-          historyList.value = item['history']
-        }
-        item.readTime = item.readTime?.substring(11)
-        return item
-      })
-    })
 
-    return { register, model: modelRef, currentTime, handleVisibleChange, selectDevice, handleOk, handleCancel, ballvalveColumns,  deviceList, historyList, activeDeviceID, posMonitor };
-  },
+      function handleCancel(e) {
+        e.preventDefault();
+        closeModal();
+      }
 
-});
+      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+        if (newActiveID != oldActiveID) {
+          activeDeviceID.value = newActiveID as string;
+        }
+        deviceList.value = newDataSource?.filter((item: any, index) => {
+          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            activeDeviceID.value = item.deviceID;
+            posMonitor.value = Object.assign(item, item.readData);
+            historyList.value = item['history'];
+          }
+          item.readTime = item.readTime?.substring(11);
+          return item;
+        });
+      });
+
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        handleVisibleChange,
+        selectDevice,
+        handleOk,
+        handleCancel,
+        ballvalveColumns,
+        deviceList,
+        historyList,
+        activeDeviceID,
+        posMonitor,
+      };
+    },
+  });
 </script>
 <style lang="less" scoped>
-.fiber-modal {
-  width: 100%;
-  height: 650px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-
-  .modal-left {
-    width: 200px;
-    height: 100%;
-    overflow-y: auto;
-    background: #ffffff11;
-    padding: 5px;
-    border-radius: 5px;
-
-    .active-device-title {
-      color: aqua;
-    }
-
-    .link-item {
-      position: relative;
-      cursor: pointer;
-      line-height: 30px;
-      padding-left: 30px;
-
-      span:hover {
-        color: #89ffff;
+  .fiber-modal {
+    width: 100%;
+    height: 650px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .modal-left {
+      width: 200px;
+      height: 100%;
+      overflow-y: auto;
+      background: #ffffff11;
+      padding: 5px;
+      border-radius: 5px;
+
+      .active-device-title {
+        color: aqua;
       }
 
-      &::after {
-        content: '';
-        position: absolute;
-        display: block;
-        width: 8px;
-        height: 8px;
-        top: 12px;
-        left: 10px;
-        transform: rotateZ(45deg) skew(10deg, 10deg);
-        background: #45d3fd;
-      }
-    }
-  }
+      .link-item {
+        position: relative;
+        cursor: pointer;
+        line-height: 30px;
+        padding-left: 30px;
+
+        span:hover {
+          color: #89ffff;
+        }
 
-  .modal-right {
-    width: calc(100% - 220px);
-    overflow-y: auto;
-    .base-title {
-      line-height: 32px;
-      position: relative;
-      padding-left: 20px;
-
-      &::after {
-        content: '';
-        position: absolute;
-        display: block;
-        width: 4px;
-        height: 12px;
-        top: 4px;
-        left: 10px;
-        background: #45d3fd;
-        border-radius: 4px;
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 8px;
+          height: 8px;
+          top: 12px;
+          left: 10px;
+          transform: rotateZ(45deg) skew(10deg, 10deg);
+          background: #45d3fd;
+        }
       }
     }
 
-    .base-box{
-      width: 100%;
-      height: 100px;
-      font-size: 14px;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      border: 1px solid rgba(25, 237, 255, .4);
-      box-shadow: inset 0 0 10px rgba(0, 197, 255, .3);
-      background: rgba(0, 0, 0, .06666666666666667);
-      padding: 15px 20px;
-      margin-bottom: 10px;
-      .base-item{
-        width: 33%;
-        line-height: 30px;
-        span{
-          display: inline-block;
-        }
-        .title{
-          width: 120px;
+    .modal-right {
+      width: calc(100% - 220px);
+      overflow-y: auto;
+      .base-title {
+        line-height: 32px;
+        position: relative;
+        padding-left: 20px;
 
-        }
-        .value{
-          width: 100px;
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 4px;
+          height: 12px;
+          top: 4px;
+          left: 10px;
+          background: #45d3fd;
+          border-radius: 4px;
         }
       }
-    }
 
-    .right-top {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      margin-bottom: 10px;
-      .top-item {
-        width: 220px;
+      .base-box {
+        width: 100%;
         height: 100px;
+        font-size: 14px;
         display: flex;
         flex-direction: row;
-        justify-content: center;
-        border: 1px solid rgba(25, 237, 255, .4);
-        box-shadow: inset 0 0 10px rgba(0, 197, 255, .6);
-        background: rgba(0, 0, 0, .06666666666666667);
-        padding-top: 20px;
-        margin: 10px 0;
-
-        .icon {
-          margin-right: 10px;
-          margin-top: 5px;
-          color: #FDB146;
+        flex-wrap: wrap;
+        border: 1px solid rgba(25, 237, 255, 0.4);
+        box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.3);
+        background: rgba(0, 0, 0, 0.06666666666666667);
+        padding: 15px 20px;
+        margin-bottom: 10px;
+        .base-item {
+          width: 33%;
+          line-height: 30px;
+          span {
+            display: inline-block;
+          }
+          .title {
+            width: 120px;
+          }
+          .value {
+            width: 100px;
+          }
         }
+      }
 
-        .item-container {
-          width: 100px;
+      .right-top {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        margin-bottom: 10px;
+        .top-item {
+          width: 220px;
+          height: 100px;
           display: flex;
-          flex-direction: column;
+          flex-direction: row;
           justify-content: center;
-      
-          div {
-            text-align: center;
+          border: 1px solid rgba(25, 237, 255, 0.4);
+          box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+          background: rgba(0, 0, 0, 0.06666666666666667);
+          padding-top: 20px;
+          margin: 10px 0;
+
+          .icon {
+            margin-right: 10px;
+            margin-top: 5px;
+            color: #fdb146;
           }
 
-          .title {
-            font-size: 18px;
-          }
+          .item-container {
+            width: 100px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
 
-          .value {
-            text-shadow: 0 0 25px #00fbfe;
-            background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
-            font-style: normal;
-            background-size: cover;
-            font-family: electronicFont;
-            font-size: 30px;
-            -webkit-background-clip: text;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
-            position: relative;
-            top: -8px;
-
-            span {
-              font-family: Arial, Helvetica, sans-serif;
+            div {
+              text-align: center;
+            }
+
+            .title {
               font-size: 18px;
-              color: aliceblue;
             }
 
+            .value {
+              text-shadow: 0 0 25px #00fbfe;
+              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+              font-style: normal;
+              background-size: cover;
+              font-family: electronicFont;
+              font-size: 30px;
+              -webkit-background-clip: text;
+              background-clip: text;
+              -webkit-text-fill-color: transparent;
+              position: relative;
+              top: -8px;
+
+              span {
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 18px;
+                color: aliceblue;
+              }
+            }
+            .alarm-value {
+              text-shadow: 0 0 25px #fe1500;
+              background: linear-gradient(0deg, #fd4545, #fd5e45, #dd7461, #dd6161);
+              -webkit-background-clip: text;
+              background-clip: text;
+              -webkit-text-fill-color: transparent;
+            }
           }
-          .alarm-value{
-            text-shadow: 0 0 25px #fe1500;
-            background: linear-gradient(0deg, #fd4545, #fd5e45, #dd7461, #dd6161);
-            -webkit-background-clip: text;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
-          }
-        }
-      }
-      .item-data{
-        position: relative;
-        height: 130px;
-        padding-top: 0;
-        .icon{
-          position: absolute;
-          left: 20px;
-          top: 30px;
-          // margin-right: 30px;
-          // margin-top: 25px;
         }
-        .item-container{
-          width: 140px;
-          position: absolute;
-          padding-top: 18px;
-          justify-content: flex-start;
-          right: 0;
-          .value{
-            top: 0px;
-          }
-          .state-close{
-            color: #b9b9b9;
+        .item-data {
+          position: relative;
+          height: 130px;
+          padding-top: 0;
+          .icon {
+            position: absolute;
+            left: 20px;
+            top: 30px;
+            // margin-right: 30px;
+            // margin-top: 25px;
           }
-          .state-open{
-            color: #00ff88;
-          }
-          .state-offline{
-            color: #ffd000;
+          .item-container {
+            width: 140px;
+            position: absolute;
+            padding-top: 18px;
+            justify-content: flex-start;
+            right: 0;
+            .value {
+              top: 0px;
+            }
+            .state-close {
+              color: #b9b9b9;
+            }
+            .state-open {
+              color: #00ff88;
+            }
+            .state-offline {
+              color: #ffd000;
+            }
           }
-        }
-        .rang{
-          position: absolute;
-          color: #ff8331;
-          bottom: 10px;
-          right: 20px;
-          .rang-data{
-            padding: 0 5px;
+          .rang {
+            position: absolute;
+            color: #ff8331;
+            bottom: 10px;
+            right: 20px;
+            .rang-data {
+              padding: 0 5px;
+            }
           }
         }
-      }
 
-      .warning-box {
-        padding-top: 0px;
+        .warning-box {
+          padding-top: 0px;
 
-        .icon {
-          margin-top: 20px;
+          .icon {
+            margin-top: 20px;
 
-          :deep(.icon-style) {
-            width: auto;
-            color: #FDB146;
+            :deep(.icon-style) {
+              width: auto;
+              color: #fdb146;
+            }
           }
-        }
 
-        .warning-value {
-          font-size: 18px;
-          color: #61ddb1;
+          .warning-value {
+            font-size: 18px;
+            color: #61ddb1;
+          }
         }
       }
-    }
 
-    .right-center {
-      margin-top: 20px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+      .right-center {
+        margin-top: 20px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
 
-      .table-box {
-        position: relative;
-        width: 500px;
-        height: 250px;
-      }
+        .table-box {
+          position: relative;
+          width: 500px;
+          height: 250px;
+        }
 
-      .warning-box {
-        width: calc(100% - 520px);
+        .warning-box {
+          width: calc(100% - 520px);
 
-        .warning-container {
-          width: 100%;
-          height: convert;
-          background: #009acd00;
+          .warning-container {
+            width: 100%;
+            height: convert;
+            background: #009acd00;
 
-          :deep(.dv-scroll-board) {
-            .row-item {
-              height: 40px !important;
-              line-height: 40px !important;
-            }
+            :deep(.dv-scroll-board) {
+              .row-item {
+                height: 40px !important;
+                line-height: 40px !important;
+              }
 
-            .header-item {
-              border-top: 1px solid #91e9fe !important;
-              border-bottom: 1px solid #91e9fe !important;
+              .header-item {
+                border-top: 1px solid #91e9fe !important;
+                border-bottom: 1px solid #91e9fe !important;
+              }
             }
           }
-
         }
       }
-    }
 
-    .right-bottom {
-      margin-top: 20px;
+      .right-bottom {
+        margin-top: 20px;
 
-      .echarts-box {
-        width: 100%;
-        height: 320px;
-        position: relative;
+        .echarts-box {
+          width: 100%;
+          height: 320px;
+          position: relative;
 
-        .echarts-line {
-          width: calc(100% + 80px);
-          position: absolute
+          .echarts-line {
+            width: calc(100% + 80px);
+            position: absolute;
+          }
         }
       }
     }
   }
-}
 
-:deep(.zxm-table-body) {
-  border: 1px solid rgba(57, 232, 255, 0.2) !important;
+  :deep(.zxm-table-body) {
+    border: 1px solid rgba(57, 232, 255, 0.2) !important;
 
-  .zxm-table-tbody>tr>td {
-    border: none !important;
+    .zxm-table-tbody > tr > td {
+      border: none !important;
+    }
   }
-}
 
-:deep(.zxm-table-cell) {
-  border-right: none !important;
-}</style>
+  :deep(.zxm-table-cell) {
+    border-right: none !important;
+  }
+</style>

src/views/vent/monitorManager/deviceMonitor/components/device/modal/bundle.modal.vue

@@ -1,8 +1,13 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="register" :title="`束管监测详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel" >
+  <BasicModal v-bind="$attrs" @register="register" :title="`束管监测详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel">
     <div class="fiber-modal">
       <div class="modal-left">
-        <div v-for="device in deviceList" class="link-item" :class="{'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
+        <div
+          v-for="device in deviceList"
+          class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
+          :key="device.deviceID"
+        >
           <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
         </div>
       </div>
@@ -11,61 +16,61 @@
         <div class="right-top">
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px;" />
+              <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px" />
             </div>
             <div class="item-container">
               <div class="title">一氧化碳</div>
-              <div class="value">{{ (posMonitor.coval !== undefined && posMonitor.coval !== null) ? posMonitor.coval : '-' }} <span>ppm</span> </div>
+              <div class="value">{{ posMonitor.coval !== undefined && posMonitor.coval !== null ? posMonitor.coval : '-' }} <span>ppm</span> </div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="co2val"  style="width: 72px; height: 46px;" />
+              <SvgIcon class="icon-style" name="co2val" style="width: 72px; height: 46px" />
             </div>
             <div class="item-container">
               <div class="title">二氧化碳</div>
-              <div class="value">{{ (posMonitor.co2val !== undefined && posMonitor.co2val !== null) ? posMonitor.co2val: '-' }} <span>%</span></div>
+              <div class="value">{{ posMonitor.co2val !== undefined && posMonitor.co2val !== null ? posMonitor.co2val : '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="gasval"  style="width: 72px; height: 46px;"/>
+              <SvgIcon class="icon-style" name="gasval" style="width: 72px; height: 46px" />
             </div>
             <div class="item-container">
               <div class="title">甲烷</div>
-              <div class="value">{{ (posMonitor.gasval !== undefined && posMonitor.gasval !== null) ? posMonitor.gasval : '-' }} <span>%</span></div>
+              <div class="value">{{ posMonitor.gasval !== undefined && posMonitor.gasval !== null ? posMonitor.gasval : '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="ch2val"  style="width: 76px; height: 42px;"/>
+              <SvgIcon class="icon-style" name="ch2val" style="width: 76px; height: 42px" />
             </div>
             <div class="item-container">
               <div class="title">乙烯</div>
-              <div class="value">{{ (posMonitor.ch2val !== undefined && posMonitor.ch2val !== null) ? posMonitor.ch2val : '-' }} <span>ppm</span></div>
+              <div class="value">{{ posMonitor.ch2val !== undefined && posMonitor.ch2val !== null ? posMonitor.ch2val : '-' }} <span>ppm</span></div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="chval" style="width: 76px; height: 42px;" />
+              <SvgIcon class="icon-style" name="chval" style="width: 76px; height: 42px" />
             </div>
             <div class="item-container">
               <div class="title">乙炔</div>
-              <div class="value">{{ (posMonitor.chval !== undefined && posMonitor.chval !== null) ? posMonitor.chval : '-' }} <span>ppm</span></div>
+              <div class="value">{{ posMonitor.chval !== undefined && posMonitor.chval !== null ? posMonitor.chval : '-' }} <span>ppm</span></div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="o2val"  style="width: 76px; height: 50px;"/>
+              <SvgIcon class="icon-style" name="o2val" style="width: 76px; height: 50px" />
             </div>
             <div class="item-container">
               <div class="title">氧气</div>
-              <div class="value">{{ (posMonitor.o2val !== undefined && posMonitor.o2val !== null) ? posMonitor.o2val : '-' }} <span>%</span></div>
+              <div class="value">{{ posMonitor.o2val !== undefined && posMonitor.o2val !== null ? posMonitor.o2val : '-' }} <span>%</span></div>
             </div>
           </div>
           <div class="top-item warning-box">
             <div class="icon">
-              <SvgIcon class="icon-style" size="42" name="alarm-warning" style="margin-top: 5px;" />
+              <SvgIcon class="icon-style" size="42" name="alarm-warning" style="margin-top: 5px" />
             </div>
             <div class="item-container">
               <div class="title">风险等级</div>
@@ -74,11 +79,11 @@
           </div>
           <div class="top-item warning-box">
             <div class="icon">
-              <SvgIcon class="icon-style" size="42" name="link" style="margin-top: 5px;"/>
+              <SvgIcon class="icon-style" size="42" name="link" style="margin-top: 5px" />
             </div>
             <div class="item-container">
               <div class="title">连接状态</div>
-              <div class="warning-value">{{ posMonitor['netStatus'] == 1 ? '连接': '未连接' }}</div>
+              <div class="warning-value">{{ posMonitor['netStatus'] == 1 ? '连接' : '未连接' }}</div>
             </div>
           </div>
         </div>
@@ -92,7 +97,8 @@
               height="100%"
               :chartsColumns="chartsColumns"
               :option="echatsOption"
-              chartsType="listMonitor" />
+              chartsType="listMonitor"
+            />
           </div>
         </div>
       </div>
@@ -100,181 +106,194 @@
   </BasicModal>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watch, shallowRef } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { SvgIcon } from '/@/components/Icon';
-import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
-import dayjs from 'dayjs'
+  import { defineComponent, ref, watch, shallowRef } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+  import dayjs from 'dayjs';
 
-export default defineComponent({
-  components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
-  props: {
-    dataSource: {type: Array},
-    activeID: {type: String}
-  },
-  setup(props) {
-    const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
-    const modelRef = ref({});
-    const loading = ref(true);
-    const activeDeviceID = ref('');
-    const deviceList = ref<any[]>([])
-    const historyList = ref<any[]>([])
-    const posList = ref<any[]>([])
-    const posMonitor = shallowRef({})
+  export default defineComponent({
+    components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
+    props: {
+      dataSource: { type: Array },
+      activeID: { type: String },
+    },
+    setup(props) {
+      const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+      const modelRef = ref({});
+      const loading = ref(true);
+      const activeDeviceID = ref('');
+      const deviceList = ref<any[]>([]);
+      const historyList = ref<any[]>([]);
+      const posList = ref<any[]>([]);
+      const posMonitor = shallowRef({});
 
-    const echatsOption = {
-      grid: {
-        top: '25%',
-        left: '30',
-        right: '45',
-        bottom: '3%',
-        containLabel: true
-      },
-      toolbox: {
-        feature: {}
-      },
-    }
+      const echatsOption = {
+        grid: {
+          top: '25%',
+          left: '30',
+          right: '45',
+          bottom: '3%',
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {},
+        },
+      };
+
+      const chartsColumns = [
+        {
+          legend: '一氧化碳',
+          seriesName: '(ppm)',
+          ymax: 10,
+          yname: 'ppm',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#FDB146',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'coval',
+        },
+        {
+          legend: '乙炔',
+          seriesName: '',
+          ymax: 10,
+          yname: 'ppm',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#00FFA8',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'chval',
+        },
+        {
+          legend: '乙烯',
+          seriesName: '',
+          ymax: 10,
+          yname: 'ppm',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#AE19FF',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'ch2val',
+        },
+        {
+          legend: '二氧化碳',
+          seriesName: '(%)',
+          ymax: 20,
+          yname: '1%',
+          linetype: 'line',
+          yaxispos: 'right',
+          color: '#9C83D9',
+          sort: 2,
+          xRotate: 0,
+          dataIndex: 'co2val',
+        },
+        {
+          legend: '甲烷',
+          seriesName: '',
+          ymax: 20,
+          yname: '1%',
+          linetype: 'line',
+          yaxispos: 'right',
+          color: '#DA3914',
+          sort: 2,
+          xRotate: 0,
+          dataIndex: 'gasval',
+        },
+        {
+          legend: '氧气',
+          seriesName: '(氧气%)',
+          ymax: 30,
+          yname: '2%',
+          linetype: 'line',
+          yaxispos: 'right',
+          color: '#03C2EC',
+          sort: 3,
+          xRotate: 0,
+          dataIndex: 'o2val',
+        },
+      ];
+      const [register, { setModalProps, closeModal }] = useModalInner();
+
+      function handleVisibleChange(visible) {
+        if (visible) {
+          loading.value = true;
+          setModalProps({ loading: true, confirmLoading: true });
 
-    const chartsColumns = [
-      {
-        legend: '一氧化碳',
-        seriesName: '(ppm)',
-        ymax: 10,
-        yname: 'ppm',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#FDB146',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'coval',
-      },
-      {
-        legend: '乙炔',
-        seriesName: '',
-        ymax: 10,
-        yname: 'ppm',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#00FFA8',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'chval',
-      },
-      {
-        legend: '乙烯',
-        seriesName: '',
-        ymax: 10,
-        yname: 'ppm',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#AE19FF',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'ch2val',
-      },
-      {
-        legend: '二氧化碳',
-        seriesName: '(%)',
-        ymax: 20,
-        yname: '1%',
-        linetype: 'line',
-        yaxispos: 'right',
-        color: '#9C83D9',
-        sort: 2,
-        xRotate: 0,
-        dataIndex: 'co2val',
-      },
-      {
-        legend: '甲烷',
-        seriesName: '',
-        ymax: 20,
-        yname: '1%',
-        linetype: 'line',
-        yaxispos: 'right',
-        color: '#DA3914',
-        sort: 2,
-        xRotate: 0,
-        dataIndex: 'gasval',
-      },
-      {
-        legend: '氧气',
-        seriesName: '(氧气%)',
-        ymax: 30,
-        yname: '2%',
-        linetype: 'line',
-        yaxispos: 'right',
-        color: '#03C2EC',
-        sort: 3,
-        xRotate: 0,
-        dataIndex: 'o2val',
-      },
-      
-    ]
-    const [register, { setModalProps, closeModal }] = useModalInner();
+          setTimeout(() => {
+            loading.value = false;
+            setModalProps({ loading: false, confirmLoading: false });
+          }, 1000);
+        }
+      }
 
-    function handleVisibleChange(visible) {
-      if (visible) {
+      // 选择监测
+      function selectDevice(id) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
-
         setTimeout(() => {
           loading.value = false;
+          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 1000);
+        }, 300);
       }
-    }
 
-    // 选择监测
-    function selectDevice (id){
-      loading.value = true;
-      setModalProps({ loading: true, confirmLoading: true });
-       setTimeout(() => {
-        loading.value = false;
-        activeDeviceID.value = id
-        setModalProps({ loading: false, confirmLoading: false });
-      }, 300);
-    }
-
-    function handleOk(e) {
-      e.preventDefault()
-      closeModal()
-    }
-
-    function handleCancel(e) {
-      e.preventDefault()
-      closeModal()
-    }
+      function handleOk(e) {
+        e.preventDefault();
+        closeModal();
+      }
 
-    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-      if(newActiveID != oldActiveID){
-        activeDeviceID.value = newActiveID as string
+      function handleCancel(e) {
+        e.preventDefault();
+        closeModal();
       }
-      deviceList.value = newDataSource?.filter((item:any, index) => {
-        if((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value){
-          activeDeviceID.value = item.deviceID
-          posMonitor.value = Object.assign(item, item.readData)
-          historyList.value = item['history']
+
+      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+        if (newActiveID != oldActiveID) {
+          activeDeviceID.value = newActiveID as string;
         }
-        item.readTime = item.readTime?.substring(11)
-        return item
-      })
-    })
+        deviceList.value = newDataSource?.filter((item: any, index) => {
+          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            activeDeviceID.value = item.deviceID;
+            posMonitor.value = Object.assign(item, item.readData);
+            historyList.value = item['history'];
+          }
+          item.readTime = item.readTime?.substring(11);
+          return item;
+        });
+      });
 
-    return { register, model: modelRef, currentTime, handleVisibleChange, selectDevice, handleOk, handleCancel, deviceList, historyList, activeDeviceID, posMonitor, echatsOption, posList, chartsColumns };
-  },
-  
-});
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        handleVisibleChange,
+        selectDevice,
+        handleOk,
+        handleCancel,
+        deviceList,
+        historyList,
+        activeDeviceID,
+        posMonitor,
+        echatsOption,
+        posList,
+        chartsColumns,
+      };
+    },
+  });
 </script>
 <style lang="less" scoped>
-  .fiber-modal{
+  .fiber-modal {
     width: 100%;
     height: 650px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    
-    .modal-left{
+
+    .modal-left {
       width: 200px;
       height: 100%;
       overflow-y: auto;
@@ -284,15 +303,15 @@ export default defineComponent({
       .active-device-title {
         color: aqua;
       }
-      .link-item{
+      .link-item {
         position: relative;
         cursor: pointer;
         line-height: 30px;
         padding-left: 30px;
-        span:hover{
+        span:hover {
           color: #89ffff;
         }
-        &::after{
+        &::after {
           content: '';
           position: absolute;
           display: block;
@@ -305,14 +324,14 @@ export default defineComponent({
         }
       }
     }
-    .modal-right{
+    .modal-right {
       width: calc(100% - 220px);
       overflow-y: auto;
-      .base-title{
+      .base-title {
         line-height: 32px;
         position: relative;
         padding-left: 20px;
-        &::after{
+        &::after {
           content: '';
           position: absolute;
           display: block;
@@ -324,42 +343,42 @@ export default defineComponent({
           border-radius: 4px;
         }
       }
-      .right-top{
+      .right-top {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         flex-wrap: wrap;
         margin-bottom: 10px;
-        .top-item{
+        .top-item {
           width: 220px;
           height: 100px;
           display: flex;
           flex-direction: row;
           justify-content: center;
-          border: 1px solid rgba(25,237,255,.4);
-          box-shadow: inset 0 0 10px rgba(0,197,255,.6);
-          background: rgba(0,0,0,.06666666666666667);
+          border: 1px solid rgba(25, 237, 255, 0.4);
+          box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+          background: rgba(0, 0, 0, 0.06666666666666667);
           padding-top: 20px;
           margin: 10px 0;
-          .icon{
+          .icon {
             margin-right: 10px;
             margin-top: 5px;
-            color: #FDB146;
+            color: #fdb146;
           }
-          .item-container{
-            width: 100px;
+          .item-container {
+            width: 110px;
             display: flex;
             flex-direction: column;
             justify-content: center;
-            div{
+            div {
               text-align: center;
             }
-            .title{
+            .title {
               font-size: 18px;
             }
-            .value{
+            .value {
               text-shadow: 0 0 25px #00fbfe;
-              background: linear-gradient( 0deg,#45d3fd, #45d3fd, #61ddb1,#61ddb1);
+              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
               font-style: normal;
               background-size: cover;
               font-family: electronicFont;
@@ -369,83 +388,80 @@ export default defineComponent({
               -webkit-text-fill-color: transparent;
               position: relative;
               top: -8px;
-              
-              span{
+
+              span {
                 font-family: Arial, Helvetica, sans-serif;
                 font-size: 18px;
                 color: aliceblue;
               }
-              
             }
-            
           }
         }
-        .warning-box{
+        .warning-box {
           padding-top: 0px;
-          .icon{
+          .icon {
             margin-top: 20px;
-            :deep(.icon-style){
+            :deep(.icon-style) {
               width: auto;
-              color: #FDB146;
+              color: #fdb146;
             }
           }
-          .warning-value{
+          .warning-value {
             font-size: 18px;
             color: #61ddb1;
           }
         }
       }
-      .right-center{
+      .right-center {
         margin-top: 20px;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-        .table-box{
+        .table-box {
           position: relative;
           width: 500px;
           height: 250px;
         }
-        .warning-box{
+        .warning-box {
           width: calc(100% - 520px);
-          .warning-container{
+          .warning-container {
             width: 100%;
             height: convert;
             background: #009acd00;
-            :deep(.dv-scroll-board){
-              .row-item{
+            :deep(.dv-scroll-board) {
+              .row-item {
                 height: 40px !important;
                 line-height: 40px !important;
               }
-              .header-item{
+              .header-item {
                 border-top: 1px solid #91e9fe !important;
                 border-bottom: 1px solid #91e9fe !important;
               }
             }
-
           }
         }
       }
-      .right-bottom{
+      .right-bottom {
         margin-top: 20px;
-        .echarts-box{
+        .echarts-box {
           width: 100%;
           height: 320px;
           position: relative;
-          .echarts-line{
+          .echarts-line {
             width: calc(100% + 80px);
-            position: absolute
+            position: absolute;
           }
         }
-      }      
+      }
     }
   }
-  :deep(.zxm-table-body){
+  :deep(.zxm-table-body) {
     border: 1px solid rgba(57, 232, 255, 0.2) !important;
-    .zxm-table-tbody > tr > td{
+    .zxm-table-tbody > tr > td {
       border: none !important;
     }
   }
-  :deep(.zxm-table-cell){
+  :deep(.zxm-table-cell) {
     border-right: none !important;
   }
 </style>

src/views/vent/monitorManager/deviceMonitor/components/device/modal/dust.modal.vue

@@ -1,9 +1,14 @@
 <template>
-  <BasicModal v-bind="$attrs" destroyOnClose @register="register" :title="`粉尘监测详情    ${currentTime}`" width="1200px" >
+  <BasicModal v-bind="$attrs" destroyOnClose @register="register" :title="`粉尘监测详情    ${currentTime}`" width="1200px">
     <div class="fiber-modal">
       <div class="modal-left">
-        <div v-for="device in deviceList" class="link-item" :class="{'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
-          <span class="" @click="selectDevice(device.deviceID)">{{ device.stationname }}</span>
+        <div
+          v-for="device in deviceList"
+          class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
+          :key="device.deviceID"
+        >
+          <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
         </div>
       </div>
       <div class="modal-right">
@@ -14,7 +19,9 @@
             </div>
             <div class="item-container">
               <div class="title">巷道温度</div>
-              <div class="value"><span class="data">{{ dustMonitor.temperature ? dustMonitor.temperature : '-' }}</span> <span>℃</span> </div>
+              <div class="value"
+                ><span class="data">{{ dustMonitor.temperature ? dustMonitor.temperature : '-' }}</span> <span>℃</span>
+              </div>
             </div>
           </div>
           <div class="top-item">
@@ -23,7 +30,9 @@
             </div>
             <div class="item-container">
               <div class="title">粉尘浓度</div>
-              <div class="value"><span class="data">{{ dustMonitor.humidity ? dustMonitor.humidity : '-' }}</span> <span>mg/m³</span></div>
+              <div class="value"
+                ><span class="data">{{ dustMonitor.humidity ? dustMonitor.humidity : '-' }}</span> <span>mg/m³</span></div
+              >
             </div>
           </div>
           <div class="top-item">
@@ -32,7 +41,9 @@
             </div>
             <div class="item-container">
               <div class="title">喷雾水压</div>
-              <div class="value"><span class="data">{{ dustMonitor.waterPressure ? dustMonitor.waterPressure : '-' }}</span> <span>MPa</span></div>
+              <div class="value"
+                ><span class="data">{{ dustMonitor.waterPressure ? dustMonitor.waterPressure : '-' }}</span> <span>MPa</span></div
+              >
             </div>
           </div>
           <div class="top-item warning-box">
@@ -75,7 +86,7 @@
               <div class="title">爆炸浓度(煤尘)</div>
               <div class="value">{{ dustMonitor.dustval ? dustMonitor.dustval : '-' }}<span>mg/m³</span></div>
             </div>
-          </div> 
+          </div>
         </div>
         <div class="right-bottom">
           <span class="base-title">粉尘预测曲线</span>
@@ -86,7 +97,8 @@
               height="100%"
               :chartsColumns="chartsColumns"
               :option="echatsOption"
-              chartsType="listMonitor" />
+              chartsType="listMonitor"
+            />
           </div>
         </div>
       </div>
@@ -94,192 +106,206 @@
   </BasicModal>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { SvgIcon } from '/@/components/Icon';
-import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
-import dayjs from 'dayjs'
+  import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+  import dayjs from 'dayjs';
 
-export default defineComponent({
-  components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
-  props: {
-    dataSource: {type: Array},
-    activeID: {type: String}
-  },
-  setup(props) {
-    const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
-    const modelRef = ref({});
-    const loading = ref(true);
-    const activeDeviceID = ref('');
-    const deviceList = ref<any[]>([])
-    const posList = ref<any[]>([])
-    const dustMonitor = shallowRef({})
-    const dustSwitch = ref(false)
+  export default defineComponent({
+    components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
+    props: {
+      dataSource: { type: Array },
+      activeID: { type: String },
+    },
+    setup(props) {
+      const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+      const modelRef = ref({});
+      const loading = ref(true);
+      const activeDeviceID = ref('');
+      const deviceList = ref<any[]>([]);
+      const posList = ref<any[]>([]);
+      const dustMonitor = shallowRef({});
+      const dustSwitch = ref(false);
 
-    const echatsOption = {
-      grid: {
-        top: '20%',
-        left: '2px',
-        right: '10px',
-        bottom: '3%',
-        containLabel: true
-      },
-      toolbox: {
-        feature: {}
-      }
-    }
+      const echatsOption = {
+        grid: {
+          top: '20%',
+          left: '2px',
+          right: '10px',
+          bottom: '3%',
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {},
+        },
+      };
 
-    const chartsColumns = [
-      {
-        legend: '粉尘平均浓度',
-        seriesName: '(mg/m³)',
-        ymax: 5,
-        yname: 'mg/m³',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#FDB146',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'hourAvg',
-      },
-      {
-        legend: '粉尘最大浓度',
-        seriesName: '(mg/m³)',
-        ymax: 5,
-        yname: 'mg/m³',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#EE6666',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'hourMax',
-      },
-      {
-        legend: '粉尘最小浓度',
-        seriesName: '(mg/m³)',
-        ymax: 5,
-        yname: 'mg/m³',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#9BCB75',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'hourMin',
-      },
-    ]
+      const chartsColumns = [
+        {
+          legend: '粉尘平均浓度',
+          seriesName: '(mg/m³)',
+          ymax: 5,
+          yname: 'mg/m³',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#FDB146',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'hourAvg',
+        },
+        {
+          legend: '粉尘最大浓度',
+          seriesName: '(mg/m³)',
+          ymax: 5,
+          yname: 'mg/m³',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#EE6666',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'hourMax',
+        },
+        {
+          legend: '粉尘最小浓度',
+          seriesName: '(mg/m³)',
+          ymax: 5,
+          yname: 'mg/m³',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#9BCB75',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'hourMin',
+        },
+      ];
 
-    const columns = [
-      {
-        title: '安装位置',
-        dataIndex: 'position',
-        width: 60,
-        align: 'center',
-        customRender: ({ index }) => {
-          return `测点${index}`
-        }
-      },
-      {
-        title: '安装距离(m)',
-        dataIndex: 'pos',
-        align: 'center',
-        width: 60,
-      },
-      {
-        title: '测点温度',
-        dataIndex: 'value',
-        align: 'center',
-        width: 50,
-      },
-      {
-        title: '测点状态',
-        dataIndex: 'state',
-        align: 'center',
-        width: 50,
-        customRender: () => {
-          return `正常`
-        }
-      },
-    ];
+      const columns = [
+        {
+          title: '安装位置',
+          dataIndex: 'position',
+          width: 60,
+          align: 'center',
+          customRender: ({ index }) => {
+            return `测点${index}`;
+          },
+        },
+        {
+          title: '安装距离(m)',
+          dataIndex: 'pos',
+          align: 'center',
+          width: 60,
+        },
+        {
+          title: '测点温度',
+          dataIndex: 'value',
+          align: 'center',
+          width: 50,
+        },
+        {
+          title: '测点状态',
+          dataIndex: 'state',
+          align: 'center',
+          width: 50,
+          customRender: () => {
+            return `正常`;
+          },
+        },
+      ];
+
+      const warningConfig = reactive({
+        data: [
+          ['测点6', '318℃', '严重报警'],
+          ['测点43', '142℃', '一般预警'],
+          ['测点23', '167℃', '一般预警'],
+          ['测点6', '198℃', '超高预警'],
+          ['测点65', '197℃', '超高预警'],
+          ['测点78', '154℃', '一般预警'],
+          ['测点61', '104℃', '一般预警'],
+          ['测点87', '150℃', '一般信息'],
+        ],
+        index: false,
+        columnWidth: [150],
+        oddRowBGC: '#009acd10',
+        evenRowBGC: '#009acd05',
+        align: ['center', 'center', 'center'],
+      });
+
+      const [register, { setModalProps }] = useModalInner();
 
-    const warningConfig = reactive({
-      data: [
-        ['测点6', '318℃', '严重报警'],
-        ['测点43', '142℃', '一般预警'],
-        ['测点23', '167℃', '一版预警'],
-        ['测点6', '198℃', '超高预警'],
-        ['测点65', '197℃', '超高预警'],
-        ['测点78', '154℃', '一般预警'],
-        ['测点61', '104℃', '一般预警'],
-        ['测点87', '150℃', '一般信息'],
-      ],
-      index: false,
-      columnWidth: [150],
-      oddRowBGC: '#009acd10',
-      evenRowBGC: '#009acd05',
-      align: ['center', 'center', 'center'],
-    });
-    
-    const [register, { setModalProps }] = useModalInner();
+      function handleVisibleChange(visible) {
+        if (visible) {
+          loading.value = true;
+          setModalProps({ loading: true, confirmLoading: true });
 
-    function handleVisibleChange(visible) {
-      if (visible) {
+          setTimeout(() => {
+            loading.value = false;
+            setModalProps({ loading: false, confirmLoading: false });
+          }, 1000);
+        }
+      }
+
+      // 选择监测
+      function selectDevice(id) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
-
         setTimeout(() => {
           loading.value = false;
+          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 1000);
+        }, 300);
       }
-    }
-
-    // 选择监测
-    function selectDevice (id){
-      loading.value = true;
-      setModalProps({ loading: true, confirmLoading: true });
-       setTimeout(() => {
-        loading.value = false;
-        activeDeviceID.value = id
-        setModalProps({ loading: false, confirmLoading: false });
-      }, 300);
-    }
 
-    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-      deviceList.value = newDataSource as any[]
-      if(newActiveID != oldActiveID){
-        activeDeviceID.value = newActiveID as string
-      }
-      newDataSource?.forEach((item:any, index) => {
-        if((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value){
-          activeDeviceID.value = item.deviceID
-          // const list = item.summaryHour
-          // list.filter(data => {
-          //   const date = new Date();     //1. js获取当前时间
-          //   const min = date.getMinutes();  //2. 获取当前分钟
-          //   return Object.assign(data, data.dustval, { readTime: (dayjs(date.setMinutes(min + 10))).format('YYYY-MM-DD HH:mm:ss') })
-          // })
-          // if(list.length > 0) posList.value = list
-          posList.value = item['history']
-          dustMonitor.value = item.readData
+      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+        deviceList.value = newDataSource as any[];
+        if (newActiveID != oldActiveID) {
+          activeDeviceID.value = newActiveID as string;
         }
-      })
-    })
+        newDataSource?.forEach((item: any, index) => {
+          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            activeDeviceID.value = item.deviceID;
+            // const list = item.summaryHour
+            // list.filter(data => {
+            //   const date = new Date();     //1. js获取当前时间
+            //   const min = date.getMinutes();  //2. 获取当前分钟
+            //   return Object.assign(data, data.dustval, { readTime: (dayjs(date.setMinutes(min + 10))).format('YYYY-MM-DD HH:mm:ss') })
+            // })
+            // if(list.length > 0) posList.value = list
+            posList.value = item['history'];
+            dustMonitor.value = item.readData;
+          }
+        });
+      });
 
-    return { register, model: modelRef, currentTime, dustSwitch, handleVisibleChange, selectDevice, deviceList, activeDeviceID, dustMonitor, echatsOption, posList, chartsColumns, columns, warningConfig };
-  },
-  
-});
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        dustSwitch,
+        handleVisibleChange,
+        selectDevice,
+        deviceList,
+        activeDeviceID,
+        dustMonitor,
+        echatsOption,
+        posList,
+        chartsColumns,
+        columns,
+        warningConfig,
+      };
+    },
+  });
 </script>
 <style lang="less" scoped>
-  .fiber-modal{
+  .fiber-modal {
     width: 100%;
     height: 600px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    
-    .modal-left{
+
+    .modal-left {
       width: 200px;
       height: 100%;
       overflow-y: auto;
@@ -289,15 +315,15 @@ export default defineComponent({
       .active-device-title {
         color: aqua;
       }
-      .link-item{
+      .link-item {
         position: relative;
         cursor: pointer;
         line-height: 30px;
         padding-left: 30px;
-        span:hover{
+        span:hover {
           color: #89ffff;
         }
-        &::after{
+        &::after {
           content: '';
           position: absolute;
           display: block;
@@ -310,14 +336,14 @@ export default defineComponent({
         }
       }
     }
-    .modal-right{
+    .modal-right {
       width: calc(100% - 220px);
       overflow-y: auto;
-      .base-title{
+      .base-title {
         line-height: 32px;
         position: relative;
         padding-left: 20px;
-        &::after{
+        &::after {
           content: '';
           position: absolute;
           display: block;
@@ -329,13 +355,13 @@ export default defineComponent({
           border-radius: 4px;
         }
       }
-      .right-top{
+      .right-top {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         margin-bottom: 30px;
         padding: 0 10px;
-        .top-item{
+        .top-item {
           width: 155px;
           height: 60px;
           display: flex;
@@ -344,7 +370,7 @@ export default defineComponent({
           align-items: center;
           background: url('/@/assets/images/vent/model_image/dust-monitor-bg.png') no-repeat;
           padding-top: 16px;
-          .icon{
+          .icon {
             width: 58px;
             height: 60px;
             display: flex;
@@ -353,23 +379,23 @@ export default defineComponent({
             position: relative;
             top: -8px;
           }
-          .item-container{
+          .item-container {
             width: 100px;
             display: flex;
             flex-direction: column;
             // justify-content: start;
-            div{
+            div {
               padding-left: 8px;
             }
-            .title{
+            .title {
               font-size: 14px;
               margin-bottom: 8px;
             }
-            .value{
+            .value {
               position: relative;
               width: 110px;
               top: -8px;
-              .data{
+              .data {
                 display: inline-block;
                 width: 50px;
                 font-family: douyuFont;
@@ -377,53 +403,52 @@ export default defineComponent({
                 font-size: 14px;
                 -webkit-background-clip: text;
                 background-clip: text;
-                color: #28DCE4;
+                color: #28dce4;
               }
-              span{
+              span {
                 font-family: Arial, Helvetica, sans-serif;
                 font-size: 14px;
                 color: #ffffffdd;
               }
             }
-            
           }
         }
-        .warning-box{
+        .warning-box {
           padding-top: 0px;
-          .icon{
+          .icon {
             margin-top: 20px;
-            .icon-style{
-              color: #FDB146;
+            .icon-style {
+              color: #fdb146;
             }
           }
-          .title{
+          .title {
             padding-top: 0px;
           }
-          .warning-value{
+          .warning-value {
             font-family: electronicFont;
             font-size: 18px;
             color: #61ddb1;
           }
         }
       }
-      .right-center{
+      .right-center {
         margin-top: 20px;
-        .dust-group{
+        .dust-group {
           display: flex;
           flex-direction: row;
           justify-content: space-between;
-          .dust-item{
+          .dust-item {
             width: 238px;
             height: 148px;
             background: url('/@/assets/images/vent/model_image/dust-bg.png') no-repeat;
             scale: 0.9;
-            .title{
+            .title {
               position: absolute;
               top: 80px;
               left: 70px;
               font-size: 16px;
             }
-            .value{
+            .value {
               position: absolute;
               top: 50px;
               left: 50px;
@@ -432,7 +457,7 @@ export default defineComponent({
               text-shadow: 0 0 25px #00d8ff;
               font-size: 18px;
               font-weight: bolder;
-              span{
+              span {
                 font-family: Arial, Helvetica, sans-serif;
                 font-size: 16px;
                 color: aliceblue;
@@ -442,15 +467,13 @@ export default defineComponent({
           }
         }
       }
-      .right-bottom{
+      .right-bottom {
         margin-top: 20px;
-        .echarts-box{
+        .echarts-box {
           width: 100%;
           height: 270px;
         }
       }
-
-      
     }
   }
 </style>

src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.vue

@@ -1,9 +1,14 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="register" :title="`光纤测温详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel" >
+  <BasicModal v-bind="$attrs" @register="register" :title="`光纤测温详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel">
     <div class="fiber-modal">
       <div class="modal-left">
-        <div v-for="device in deviceList" class="link-item" :class="{'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
-          <span class="" @click="selectDevice(device.deviceID)">{{ device.stationname }}</span>
+        <div
+          v-for="device in deviceList"
+          class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
+          :key="device.deviceID"
+        >
+          <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
         </div>
       </div>
       <div class="modal-right">
@@ -48,18 +53,16 @@
         <div class="right-center">
           <div class="table-box">
             <span class="base-title">测点监测详情</span>
-            <a-table
-              size="small"
-              :columns="columns"
-              :data-source="posList"
-              :pagination="false"
-              :scroll="{ y: 200 }"
-            />
+            <a-table size="small" :columns="columns" :data-source="posList" :pagination="false" :scroll="{ y: 200 }" />
           </div>
           <div class="warning-box">
             <span class="base-title">预警历史详情</span>
             <div class="warning-container">
-              <dv-scroll-board ref="scrollBoard" :config="warningConfig" style="width: 100%; height: 240px; overflow-y: auto; border: 1px solid #39e8ff33;" />
+              <dv-scroll-board
+                ref="scrollBoard"
+                :config="warningConfig"
+                style="width: 100%; height: 240px; overflow-y: auto; border: 1px solid #39e8ff33"
+              />
             </div>
           </div>
         </div>
@@ -72,7 +75,8 @@
               height="100%"
               :chartsColumns="chartsColumns"
               :option="echatsOption"
-              chartsType="listMonitor" />
+              chartsType="listMonitor"
+            />
           </div>
         </div>
       </div>
@@ -80,176 +84,191 @@
   </BasicModal>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { SvgIcon } from '/@/components/Icon';
-import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
-import dayjs from 'dayjs'
+  import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+  import dayjs from 'dayjs';
 
-export default defineComponent({
-  components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
-  props: {
-    dataSource: {type: Array},
-    activeID: {type: String}
-  },
-  setup(props) {
-    const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
-    const modelRef = ref({});
-    const loading = ref(true);
-    const activeDeviceID = ref('');
-    const deviceList = ref<any[]>([])
-    const posList = ref<any[]>([])
-    const posMonitor = shallowRef({})
+  export default defineComponent({
+    components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
+    props: {
+      dataSource: { type: Array },
+      activeID: { type: String },
+    },
+    setup(props) {
+      const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+      const modelRef = ref({});
+      const loading = ref(true);
+      const activeDeviceID = ref('');
+      const deviceList = ref<any[]>([]);
+      const posList = ref<any[]>([]);
+      const posMonitor = shallowRef({});
 
-    const echatsOption = {
-      grid: {
-        top: '20%',
-        left: '2px',
-        right: '10px',
-        bottom: '3%',
-        containLabel: true
-      },
-      toolbox: {
-        feature: {}
-      }
-    }
+      const echatsOption = {
+        grid: {
+          top: '20%',
+          left: '2px',
+          right: '10px',
+          bottom: '3%',
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {},
+        },
+      };
 
-    const chartsColumns = [
-      {
-        legend: '测点温度',
-        seriesName: '(℃)',
-        ymax: 200,
-        yname: '℃',
-        linetype: 'line',
-        yaxispos: 'left',
-        color: '#FDB146',
-        sort: 1,
-        xRotate: 0,
-        dataIndex: 'value',
-      },
-    ]
+      const chartsColumns = [
+        {
+          legend: '测点温度',
+          seriesName: '(℃)',
+          ymax: 200,
+          yname: '℃',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#FDB146',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'value',
+        },
+      ];
 
-    const columns = [
-      {
-        title: '安装位置',
-        dataIndex: 'position',
-        width: 60,
-        align: 'center',
-        customRender: ({ index }) => {
-          return `测点${index}`
-        }
-      },
-      {
-        title: '安装距离(m)',
-        dataIndex: 'pos',
-        align: 'center',
-        width: 60,
-      },
-      {
-        title: '测点温度',
-        dataIndex: 'value',
-        align: 'center',
-        width: 50,
-      },
-      {
-        title: '测点状态',
-        dataIndex: 'state',
-        align: 'center',
-        width: 50,
-        customRender: () => {
-          return `正常`
-        }
-      },
-    ];
+      const columns = [
+        {
+          title: '安装位置',
+          dataIndex: 'position',
+          width: 60,
+          align: 'center',
+          customRender: ({ index }) => {
+            return `测点${index}`;
+          },
+        },
+        {
+          title: '安装距离(m)',
+          dataIndex: 'pos',
+          align: 'center',
+          width: 60,
+        },
+        {
+          title: '测点温度',
+          dataIndex: 'value',
+          align: 'center',
+          width: 50,
+        },
+        {
+          title: '测点状态',
+          dataIndex: 'state',
+          align: 'center',
+          width: 50,
+          customRender: () => {
+            return `正常`;
+          },
+        },
+      ];
+
+      const warningConfig = reactive({
+        header: ['测点', '温度', '预警信息'],
+        data: [
+          ['测点6', '318℃', '严重报警'],
+          ['测点43', '142℃', '一般预警'],
+          ['测点23', '167℃', '一般预警'],
+          ['测点6', '198℃', '超高预警'],
+          ['测点65', '197℃', '超高预警'],
+          ['测点78', '154℃', '一般预警'],
+          ['测点61', '104℃', '一般预警'],
+          ['测点87', '150℃', '一般信息'],
+        ],
+        index: false,
+        columnWidth: [150],
+        headerHeight: 38,
+        headerBGC: '#3d9dd45d',
+        oddRowBGC: '#009acd10',
+        evenRowBGC: '#009acd05',
+        align: ['center', 'center', 'center'],
+      });
 
-    const warningConfig = reactive({
-      header: ['测点', '温度', '预警信息'],
-      data: [
-        ['测点6', '318℃', '严重报警'],
-        ['测点43', '142℃', '一般预警'],
-        ['测点23', '167℃', '一版预警'],
-        ['测点6', '198℃', '超高预警'],
-        ['测点65', '197℃', '超高预警'],
-        ['测点78', '154℃', '一般预警'],
-        ['测点61', '104℃', '一般预警'],
-        ['测点87', '150℃', '一般信息'],
-      ],
-      index: false,
-      columnWidth: [150],
-      headerHeight: 38,
-      headerBGC: '#3d9dd45d',
-      oddRowBGC: '#009acd10',
-      evenRowBGC: '#009acd05',
-      align: ['center', 'center', 'center'],
-    });
-    
-    const [register, { setModalProps, closeModal }] = useModalInner();
+      const [register, { setModalProps, closeModal }] = useModalInner();
 
-    function handleVisibleChange(visible) {
-      if (visible) {
+      function handleVisibleChange(visible) {
+        if (visible) {
+          loading.value = true;
+          setModalProps({ loading: true, confirmLoading: true });
+
+          setTimeout(() => {
+            loading.value = false;
+            setModalProps({ loading: false, confirmLoading: false });
+          }, 1000);
+        }
+      }
+
+      // 选择监测
+      function selectDevice(id) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
-
         setTimeout(() => {
           loading.value = false;
+          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
-        }, 1000);
+        }, 300);
       }
-    }
 
-    // 选择监测
-    function selectDevice (id){
-      loading.value = true;
-      setModalProps({ loading: true, confirmLoading: true });
-       setTimeout(() => {
-        loading.value = false;
-        activeDeviceID.value = id
-        setModalProps({ loading: false, confirmLoading: false });
-      }, 300);
-    }
-
-    function handleOk(e) {
-      e.preventDefault()
-      closeModal()
-    }
-
-    function handleCancel(e) {
-      e.preventDefault()
-      closeModal()
-    }
+      function handleOk(e) {
+        e.preventDefault();
+        closeModal();
+      }
 
-    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-      deviceList.value = newDataSource as any[]
-      if(newActiveID != oldActiveID){
-        activeDeviceID.value = newActiveID as string
+      function handleCancel(e) {
+        e.preventDefault();
+        closeModal();
       }
-      newDataSource?.forEach((item:any, index) => {
-        if((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value){
-          activeDeviceID.value = item.deviceID
-          if(item.readData.fibreTemperature){
-            const list = JSON.parse(item.readData.fibreTemperature)
-            if (list.length > 0) posList.value = list
-          }
-          posMonitor.value = item.readData
+
+      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+        deviceList.value = newDataSource as any[];
+        if (newActiveID != oldActiveID) {
+          activeDeviceID.value = newActiveID as string;
         }
-      })
-    })
+        newDataSource?.forEach((item: any, index) => {
+          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            activeDeviceID.value = item.deviceID;
+            if (item.readData.fibreTemperature) {
+              const list = JSON.parse(item.readData.fibreTemperature);
+              if (list.length > 0) posList.value = list;
+            }
+            posMonitor.value = item.readData;
+          }
+        });
+      });
 
-    return { register, model: modelRef, currentTime, handleVisibleChange, selectDevice, handleOk, handleCancel, deviceList, activeDeviceID, posMonitor, echatsOption, posList, chartsColumns, columns, warningConfig };
-  },
-  
-});
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        handleVisibleChange,
+        selectDevice,
+        handleOk,
+        handleCancel,
+        deviceList,
+        activeDeviceID,
+        posMonitor,
+        echatsOption,
+        posList,
+        chartsColumns,
+        columns,
+        warningConfig,
+      };
+    },
+  });
 </script>
 <style lang="less" scoped>
-  .fiber-modal{
+  .fiber-modal {
     width: 100%;
     height: 650px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    
-    .modal-left{
+
+    .modal-left {
       width: 200px;
       height: 100%;
       overflow-y: auto;
@@ -259,15 +278,15 @@ export default defineComponent({
       .active-device-title {
         color: aqua;
       }
-      .link-item{
+      .link-item {
         position: relative;
         cursor: pointer;
         line-height: 30px;
         padding-left: 30px;
-        span:hover{
+        span:hover {
           color: #89ffff;
         }
-        &::after{
+        &::after {
           content: '';
           position: absolute;
           display: block;
@@ -280,14 +299,14 @@ export default defineComponent({
         }
       }
     }
-    .modal-right{
+    .modal-right {
       width: calc(100% - 220px);
       overflow-y: auto;
-      .base-title{
+      .base-title {
         line-height: 32px;
         position: relative;
         padding-left: 20px;
-        &::after{
+        &::after {
           content: '';
           position: absolute;
           display: block;
@@ -299,40 +318,40 @@ export default defineComponent({
           border-radius: 4px;
         }
       }
-      .right-top{
+      .right-top {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         margin-bottom: 10px;
-        .top-item{
+        .top-item {
           width: 200px;
           height: 80px;
           display: flex;
           flex-direction: row;
           justify-content: center;
-          border: 1px solid rgba(25,237,255,.4);
-          box-shadow: inset 0 0 10px rgba(0,197,255,.6);
-          background: rgba(0,0,0,.06666666666666667);
+          border: 1px solid rgba(25, 237, 255, 0.4);
+          box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+          background: rgba(0, 0, 0, 0.06666666666666667);
           padding-top: 16px;
-          .icon{
+          .icon {
             margin-right: 10px;
             margin-top: 5px;
-            color: #FDB146;
+            color: #fdb146;
           }
-          .item-container{
+          .item-container {
             width: 100px;
             display: flex;
             flex-direction: column;
             justify-content: center;
-            div{
+            div {
               text-align: center;
             }
-            .title{
+            .title {
               font-size: 18px;
             }
-            .value{
+            .value {
               text-shadow: 0 0 25px #00fbfe;
-              background: linear-gradient( 0deg,#45d3fd, #45d3fd, #61ddb1,#61ddb1);
+              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
               font-style: normal;
               background-size: cover;
               font-family: electronicFont;
@@ -342,78 +361,73 @@ export default defineComponent({
               -webkit-text-fill-color: transparent;
               position: relative;
               top: -8px;
-              span{
+              span {
                 font-family: Arial, Helvetica, sans-serif;
                 font-size: 18px;
                 color: aliceblue;
               }
-              
             }
-            
           }
         }
-        .warning-box{
+        .warning-box {
           padding-top: 0px;
-          .icon{
+          .icon {
             margin-top: 20px;
-            .icon-style{
-              color: #FDB146;
+            .icon-style {
+              color: #fdb146;
             }
           }
-          .warning-value{
+          .warning-value {
             font-size: 18px;
             color: #61ddb1;
           }
         }
       }
-      .right-center{
+      .right-center {
         margin-top: 20px;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-        .table-box{
+        .table-box {
           position: relative;
           width: 500px;
           height: 250px;
         }
-        .warning-box{
+        .warning-box {
           width: calc(100% - 520px);
-          .warning-container{
+          .warning-container {
             width: 100%;
             height: convert;
             background: #009acd00;
-            :deep(.dv-scroll-board){
-              .row-item{
+            :deep(.dv-scroll-board) {
+              .row-item {
                 height: 40px !important;
                 line-height: 40px !important;
               }
-              .header-item{
+              .header-item {
                 border-top: 1px solid #91e9fe !important;
                 border-bottom: 1px solid #91e9fe !important;
               }
             }
-
           }
         }
       }
-      .right-bottom{
+      .right-bottom {
         margin-top: 20px;
-        .echarts-box{
+        .echarts-box {
           width: 100%;
           height: 230px;
         }
       }
-
-      
     }
   }
-  :deep(.zxm-table-body){
+  :deep(.zxm-table-body) {
     border: 1px solid rgba(57, 232, 255, 0.2) !important;
-    .zxm-table-tbody > tr > td{
+    .zxm-table-tbody > tr > td {
       border: none !important;
     }
   }
-  :deep(.zxm-table-cell){
+  :deep(.zxm-table-cell) {
     border-right: none !important;
   }
 </style>

src/views/vent/monitorManager/deviceMonitor/index1.vue

@@ -1,657 +1,641 @@
 <template>
-  <div class="scene-box" >
+  <div class="scene-box">
     <DeviceVue ref="DeviceRef" :pageData="pageData" />
   </div>
-  <VentModal style="width: 100%; height: 100%; position: absolute"/>
-  
+  <VentModal style="width: 100%; height: 100%; position: absolute" />
 </template>
 
 <script setup lang="ts">
-import { ref, onUnmounted, onMounted, nextTick, watch } from 'vue';
-import DeviceVue from './components/device/index.vue';
-import Network from './components/network/index.vue'
-import { getActions } from '/@/qiankun/state';
-import { useRoute } from 'vue-router';
-import { onBeforeUnmount } from 'vue';
-import VentModal from '/@/components/vent/micro/ventModal.vue'
-
-
-const route = useRoute()
-const actions = getActions();
-
-const DeviceRef = ref(null)
-const NetworkRef = ref(null)
-
-const routerParam = ref('home')
-const pageData = ref({})
-const pageResult = ref({})
-const { type, deviceType } = route.query
-
-// actions.setGlobalState({ url: { path: '/micro-vent-3dModal/dashboard/analysis', query: { type, deviceType } } });
-
-const changePageType = (pageType) => {
-  console.log('页面类型', pageType)
-  routerParam.value = pageType
-  actions.setGlobalState({ pageObj: { pageType: pageType } });
-}
-
-watch(() => route.fullPath, (fullPath) => {
-  // const { type, deviceType } = routeVal.query
-  // if (type === 'tunMonitor') {
-  //   pageData.value = { pageType: deviceType }
-  //   actions.setGlobalState({ pageObj: { pageType: deviceType } });
-  // }
-  console.log('fullPath------------------->', fullPath)
-})
-
-onMounted(() => {
-
-
-  // nextTick(() => {
-    
-  //   if (type === 'network') {
-  //     routerParam.value = 'network'
-  //     actions.setGlobalState({ pageObj: { pageType: 'network' } });
-  //   } else if (type === 'home') {
-  //     actions.setGlobalState({ pageObj: { pageType: 'home' } });
-  //   }
-  //   else if (type === 'tunMonitor') {
-  //     if (deviceType) {
-  //       pageData.value = { pageType: deviceType }
-  //       actions.setGlobalState({ pageObj: { pageType: deviceType } });
-  //     }
-  //   }
-  //   actions.onGlobalStateChange((newState) => {
-  //     for (const key in newState) {
-  //       if (key === 'pageObj') {
-  //         const pageObj = newState[key]
-  //         if (pageObj && pageObj.pageType) {
-  //           routerParam.value = pageObj.pageType
-  //           pageData.value = pageObj
-  //           console.log('页面参数类型----------->', pageData.value, routerParam.value, pageObj)
-  //           if (pageObj.timesolution) {
-  //             pageResult.value = pageObj.timesolution
-  //           }
-  //         }
-  //       }
-  //     }
-  //   })
-  // })
-})
-
+  import { ref, onUnmounted, onMounted, nextTick, watch } from 'vue';
+  import DeviceVue from './components/device/index.vue';
+  import Network from './components/network/index.vue';
+  import { getActions } from '/@/qiankun/state';
+  import { useRoute } from 'vue-router';
+  import { onBeforeUnmount } from 'vue';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+
+  const route = useRoute();
+  const actions = getActions();
+
+  const DeviceRef = ref(null);
+  const NetworkRef = ref(null);
+
+  const routerParam = ref('home');
+  const pageData = ref({});
+  const pageResult = ref({});
+  const { type, deviceType } = route.query;
+
+  // actions.setGlobalState({ url: { path: '/micro-vent-3dModal/dashboard/analysis', query: { type, deviceType } } });
+
+  const changePageType = (pageType) => {
+    console.log('页面类型', pageType);
+    routerParam.value = pageType;
+    actions.setGlobalState({ pageObj: { pageType: pageType } });
+  };
+
+  watch(
+    () => route.fullPath,
+    (fullPath) => {
+      // const { type, deviceType } = routeVal.query
+      // if (type === 'tunMonitor') {
+      //   pageData.value = { pageType: deviceType }
+      //   actions.setGlobalState({ pageObj: { pageType: deviceType } });
+      // }
+      console.log('fullPath------------------->', fullPath);
+    }
+  );
+
+  onMounted(() => {
+    // nextTick(() => {
+    //   if (type === 'network') {
+    //     routerParam.value = 'network'
+    //     actions.setGlobalState({ pageObj: { pageType: 'network' } });
+    //   } else if (type === 'home') {
+    //     actions.setGlobalState({ pageObj: { pageType: 'home' } });
+    //   }
+    //   else if (type === 'tunMonitor') {
+    //     if (deviceType) {
+    //       pageData.value = { pageType: deviceType }
+    //       actions.setGlobalState({ pageObj: { pageType: deviceType } });
+    //     }
+    //   }
+    //   actions.onGlobalStateChange((newState) => {
+    //     for (const key in newState) {
+    //       if (key === 'pageObj') {
+    //         const pageObj = newState[key]
+    //         if (pageObj && pageObj.pageType) {
+    //           routerParam.value = pageObj.pageType
+    //           pageData.value = pageObj
+    //           console.log('页面参数类型----------->', pageData.value, routerParam.value, pageObj)
+    //           if (pageObj.timesolution) {
+    //             pageResult.value = pageObj.timesolution
+    //           }
+    //         }
+    //       }
+    //     }
+    //   })
+    // })
+  });
 </script>
 
-<style lang="less" scoped >
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
-
-.device-header {
-  position: fixed;
-  width: 100%;
-  height: 56px;
-  background: url('/@/assets/images/vent/home/modal-top.png');
-  text-align: center;
-  line-height: 56px;
-  font-size: 28px;
-  color: #ffffffdd;
-  font-weight: 600;
-  z-index: -1;
-}
-
-.select-node {
-  position: fixed;
-  top: 60px;
-  left: 10px;
-  color: #fff;
-  display: flex;
-  justify-content: center;
-  font-size: 22px;
-
-  .title {
-    margin-left: 10px;
-  }
-}
+<style lang="less" scoped>
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
 
-.expansion-icon {
-  background: url('/@/assets/images/vent/home/tree-icon-bg.png') no-repeat;
-  background-size: contain;
-  position: absolute;
-  left: 190px;
-  top: 25px;
-
-  &:hover {
-    background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
-    background-size: contain;
-  }
-}
-
-.device-select {
-  width: 250px;
-  height: 500px;
-  background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
-  position: fixed;
-  top: 60px;
-  left: 10px;
-  background-size: contain;
-  pointer-events: auto;
-  padding: 20px 10px 30px 10px;
-
-}
-
-.is-expansion-icon {
-  padding: 5px;
-  pointer-events: auto;
-  z-index: 999;
-}
-
-.device-select-show {
-  left: 10px;
-  animation-name: treeShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-
-}
-
-.device-select-hide {
-  left: -250px;
-  animation-name: treeHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.node-select-show {
-  width: 276px;
-  height: 44px;
-  background: url('/@/assets/images/vent/home/tree-expansion-bg.png') no-repeat;
-  left: 10px;
-  animation-name: treeShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-  display: flex;
-  align-items: center;
-  margin-left: 0;
-  justify-content: flex-start;
-  pointer-events: auto;
-
-  &:hover {
-    background: url('/@/assets/images/vent/home/tree-expansion-hover-bg.png') no-repeat;
+  .device-header {
+    position: fixed;
+    width: 100%;
+    height: 56px;
+    background: url('/@/assets/images/vent/home/modal-top.png');
+    text-align: center;
+    line-height: 56px;
+    font-size: 28px;
+    color: #ffffffdd;
+    font-weight: 600;
+    z-index: -1;
   }
 
-  .put-away-icon {
-    position: relative;
-    display: inline-block;
-    left: 4px;
-  }
-}
-
-.node-select-hide {
-  left: -400px;
-  animation-name: treeHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.device-select-box {
-  width: 208px;
-  height: 450px;
-  overflow-y: auto;
-  color: #fff;
-
-  :deep(.zxm-tree) {
-    background: transparent !important;
-    color: #fff !important;
-
-    .zxm-tree-switcher {
-      background: transparent !important;
-    }
+  .select-node {
+    position: fixed;
+    top: 60px;
+    left: 10px;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    font-size: 22px;
 
-    .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
-      background-color: #00b1c8;
+    .title {
+      margin-left: 10px;
     }
+  }
 
-    .zxm-tree-node-content-wrapper:hover {
-      background-color: #00b1c855;
-    }
+  .expansion-icon {
+    background: url('/@/assets/images/vent/home/tree-icon-bg.png') no-repeat;
+    background-size: contain;
+    position: absolute;
+    left: 190px;
+    top: 25px;
 
-    input {
-      height: 0px !important;
+    &:hover {
+      background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
+      background-size: contain;
     }
   }
 
-  &::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
-    background: #ededed22;
-    height: 100px;
+  .device-select {
+    width: 250px;
+    height: 500px;
+    background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
+    position: fixed;
+    top: 60px;
+    left: 10px;
+    background-size: contain;
+    pointer-events: auto;
+    padding: 20px 10px 30px 10px;
   }
 
-  &::-webkit-scrollbar-thumb {
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    background: #4288A444;
-  }
-}
-
-.location-icon {
-  width: 46px;
-  height: 178px;
-  position: absolute;
-  top: 60px;
-  // right: 0;
-  background: url('/@/assets/images/vent/home/location-bg.png') no-repeat;
-  background-size: contain;
-  writing-mode: vertical-lr;
-  line-height: 46px;
-  color: #fff;
-  padding-top: 10px;
-  pointer-events: auto;
-  cursor: pointer;
-
-  &:hover {
-    background: url('/@/assets/images/vent/home/location-hover-bg.png') no-repeat;
+  .is-expansion-icon {
+    padding: 5px;
+    pointer-events: auto;
+    z-index: 999;
   }
 
-  .location-text {
-    padding-top: 20px;
-    letter-spacing: 3px;
-    font-size: 16px;
+  .device-select-show {
+    left: 10px;
+    animation-name: treeShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
   }
-}
-
-.location-select {
-  position: fixed;
-  top: 60px;
-  // right: 240px;
-  pointer-events: auto;
 
-  .location-select-box {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    &::before {
-      content: "";
-      position: absolute;
-      width: 230px;
-      height: 500px;
-      top: 0;
-      left: 0;
-      background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
-      background-size: contain;
-      transform: rotateY(180deg);
-      z-index: -1;
-      // &:hover {
-      //   background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
-      //   background-size: contain;
-      // }
-    }
+  .device-select-hide {
+    left: -250px;
+    animation-name: treeHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
 
-    .location-top-title {
-      color: #fff;
-      position: absolute;
-      width: 225px;
-      height: 68px;
-      background: url('/@/assets/images/vent/home/turn-location-top-bg.png') no-repeat;
-      background-size: contain;
-      top: 5px;
-      left: 5px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: flex-end;
+  .node-select-show {
+    width: 276px;
+    height: 44px;
+    background: url('/@/assets/images/vent/home/tree-expansion-bg.png') no-repeat;
+    left: 10px;
+    animation-name: treeShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+    display: flex;
+    align-items: center;
+    margin-left: 0;
+    justify-content: flex-start;
+    pointer-events: auto;
 
-      .title {
-        font-size: 18px;
-        position: relative;
-        top: -14px;
-        right: 15px;
-      }
+    &:hover {
+      background: url('/@/assets/images/vent/home/tree-expansion-hover-bg.png') no-repeat;
     }
 
-    .location-expansion-icon {
-      background: url('/@/assets/images/vent/home/tree-icon-cover-bg.png') no-repeat;
-      background-size: contain;
+    .put-away-icon {
       position: relative;
-      left: 10px;
-      top: -15px;
-      padding: 5px;
-
-      &:hover {
-        background: url('/@/assets/images/vent/home/tree-icon-cover-hover-bg.png') no-repeat;
-        background-size: contain;
-      }
+      display: inline-block;
+      left: 4px;
     }
   }
 
-  .location-container {
-    width: 200px;
-    height: 390px;
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    top: 80px;
-    left: 18px;
+  .node-select-hide {
+    left: -400px;
+    animation-name: treeHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
+
+  .device-select-box {
+    width: 208px;
+    height: 450px;
     overflow-y: auto;
+    color: #fff;
 
-    .location-item {
-      color: #fff;
-      line-height: 30px;
-      display: flex;
-      justify-content: space-between;
-      background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
-      margin: 3px 0;
-
-      .item-title {
-        width: 80px;
-        text-align: right;
-        color: #87f1ff;
+    :deep(.zxm-tree) {
+      background: transparent !important;
+      color: #fff !important;
+
+      .zxm-tree-switcher {
+        background: transparent !important;
       }
-    }
 
-    .location-bottom-btn {
-      width: 100%;
-      color: #fff;
-      display: flex;
-      justify-content: flex-end;
-      margin-top: 20px;
+      .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
+        background-color: #00b1c8;
+      }
 
-      span {
-        display: inline-block;
-        width: 100%;
-        background: #00709955;
-        border-radius: 3px;
-        border: 1px solid rgba(174, 243, 255, 0.3);
-        text-align: center;
-        padding: 2px 0;
-        cursor: pointer;
+      .zxm-tree-node-content-wrapper:hover {
+        background-color: #00b1c855;
+      }
 
-        &:hover {
-          background: #00557422;
-        }
+      input {
+        height: 0px !important;
       }
     }
+
+    &::-webkit-scrollbar-track {
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      border-radius: 10px;
+      background: #ededed22;
+      height: 100px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      background: #4288a444;
+    }
   }
-}
-
-.location-select-show {
-  right: 240px;
-  animation-name: locationShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.location-select-hide {
-  right: -2px;
-  animation-name: locationHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.location-btn-show {
-  right: -0px;
-  animation-name: locationBtnShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.location-btn-hide {
-  right: -240px;
-  animation-name: locationBtnHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.bottom-tabs-box {
-
-  position: relative;
-
-  .to-small {
-    width: 60px;
-    height: 60px;
-    background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
-    background-size: auto;
+
+  .location-icon {
+    width: 46px;
+    height: 178px;
     position: absolute;
-    top: -65px;
-    right: 36px;
-    border-radius: 10px;
-    padding: 8px;
-    backdrop-filter: blur(10px);
-    background-color: rgba(45, 86, 137, 0.418);
+    top: 60px;
+    // right: 0;
+    background: url('/@/assets/images/vent/home/location-bg.png') no-repeat;
+    background-size: contain;
+    writing-mode: vertical-lr;
+    line-height: 46px;
+    color: #fff;
+    padding-top: 10px;
+    pointer-events: auto;
+    cursor: pointer;
 
     &:hover {
-      background-color: rgba(79, 104, 134, 0.418);
+      background: url('/@/assets/images/vent/home/location-hover-bg.png') no-repeat;
+    }
+
+    .location-text {
+      padding-top: 20px;
+      letter-spacing: 3px;
+      font-size: 16px;
     }
   }
 
-  .device-button-group {
-    position: absolute;
-    top: -30px;
-    display: flex;
-    width: 100%;
+  .location-select {
+    position: fixed;
+    top: 60px;
+    // right: 240px;
+    pointer-events: auto;
 
-    .device-button {
-      height: 26px;
-      padding: 0 20px;
-      background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
-      clip-path: polygon(10px 0,
-          0 50%,
-          10px 100%,
-          100% 100%,
-          calc(100% - 10px) 50%,
-          100% 0);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #FFF;
+    .location-select-box {
+      width: 100%;
+      height: 100%;
       position: relative;
-      cursor: pointer;
 
-      &:nth-child(1) {
-        left: calc(-6px * 1);
+      &::before {
+        content: '';
+        position: absolute;
+        width: 230px;
+        height: 500px;
+        top: 0;
+        left: 0;
+        background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
+        background-size: contain;
+        transform: rotateY(180deg);
+        z-index: -1;
+        // &:hover {
+        //   background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
+        //   background-size: contain;
+        // }
       }
 
-      &:nth-child(2) {
-        left: calc(-6px * 2);
+      .location-top-title {
+        color: #fff;
+        position: absolute;
+        width: 225px;
+        height: 68px;
+        background: url('/@/assets/images/vent/home/turn-location-top-bg.png') no-repeat;
+        background-size: contain;
+        top: 5px;
+        left: 5px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-end;
+
+        .title {
+          font-size: 18px;
+          position: relative;
+          top: -14px;
+          right: 15px;
+        }
       }
 
-      &:nth-child(3) {
-        left: calc(-6px * 3);
-      }
+      .location-expansion-icon {
+        background: url('/@/assets/images/vent/home/tree-icon-cover-bg.png') no-repeat;
+        background-size: contain;
+        position: relative;
+        left: 10px;
+        top: -15px;
+        padding: 5px;
 
-      &:nth-child(4) {
-        left: calc(-6px * 4);
+        &:hover {
+          background: url('/@/assets/images/vent/home/tree-icon-cover-hover-bg.png') no-repeat;
+          background-size: contain;
+        }
       }
+    }
 
-      &:nth-child(5) {
-        left: calc(-6px * 5);
+    .location-container {
+      width: 200px;
+      height: 390px;
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      top: 80px;
+      left: 18px;
+      overflow-y: auto;
+
+      .location-item {
+        color: #fff;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+        background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
+        margin: 3px 0;
+
+        .item-title {
+          width: 80px;
+          text-align: right;
+          color: #87f1ff;
+        }
       }
 
-      &:nth-child(6) {
-        left: calc(-6px * 6);
+      .location-bottom-btn {
+        width: 100%;
+        color: #fff;
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 20px;
+
+        span {
+          display: inline-block;
+          width: 100%;
+          background: #00709955;
+          border-radius: 3px;
+          border: 1px solid rgba(174, 243, 255, 0.3);
+          text-align: center;
+          padding: 2px 0;
+          cursor: pointer;
+
+          &:hover {
+            background: #00557422;
+          }
+        }
       }
+    }
+  }
 
-      &:nth-child(7) {
-        left: calc(-6px * 7);
-      }
+  .location-select-show {
+    right: 240px;
+    animation-name: locationShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
 
-      &:nth-child(8) {
-        left: calc(-6px * 8);
-      }
+  .location-select-hide {
+    right: -2px;
+    animation-name: locationHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
 
-      &:nth-child(9) {
-        left: calc(-6px * 9);
-      }
+  .location-btn-show {
+    right: -0px;
+    animation-name: locationBtnShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
 
-      &:nth-child(10) {
-        left: calc(-6px * 10);
-      }
+  .location-btn-hide {
+    right: -240px;
+    animation-name: locationBtnHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
 
-      &:nth-child(11) {
-        left: calc(-6px * 11);
-      }
+  .bottom-tabs-box {
+    position: relative;
 
-      &:nth-child(12) {
-        left: calc(-6px * 12);
-      }
+    .to-small {
+      width: 60px;
+      height: 60px;
+      background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
+      background-size: auto;
+      position: absolute;
+      top: -65px;
+      right: 36px;
+      border-radius: 10px;
+      padding: 8px;
+      backdrop-filter: blur(10px);
+      background-color: rgba(45, 86, 137, 0.418);
 
-      &:nth-child(13) {
-        left: calc(-6px * 13);
+      &:hover {
+        background-color: rgba(79, 104, 134, 0.418);
       }
+    }
 
-      &:nth-child(14) {
-        left: calc(-6px * 14);
-      }
+    .device-button-group {
+      position: absolute;
+      top: -30px;
+      display: flex;
+      width: 100%;
 
-      &:nth-child(15) {
-        left: calc(-6px * 15);
-      }
+      .device-button {
+        height: 26px;
+        padding: 0 20px;
+        background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
+        clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        position: relative;
+        cursor: pointer;
+
+        &:nth-child(1) {
+          left: calc(-6px * 1);
+        }
+
+        &:nth-child(2) {
+          left: calc(-6px * 2);
+        }
+
+        &:nth-child(3) {
+          left: calc(-6px * 3);
+        }
+
+        &:nth-child(4) {
+          left: calc(-6px * 4);
+        }
+
+        &:nth-child(5) {
+          left: calc(-6px * 5);
+        }
+
+        &:nth-child(6) {
+          left: calc(-6px * 6);
+        }
+
+        &:nth-child(7) {
+          left: calc(-6px * 7);
+        }
+
+        &:nth-child(8) {
+          left: calc(-6px * 8);
+        }
+
+        &:nth-child(9) {
+          left: calc(-6px * 9);
+        }
+
+        &:nth-child(10) {
+          left: calc(-6px * 10);
+        }
+
+        &:nth-child(11) {
+          left: calc(-6px * 11);
+        }
+
+        &:nth-child(12) {
+          left: calc(-6px * 12);
+        }
+
+        &:nth-child(13) {
+          left: calc(-6px * 13);
+        }
+
+        &:nth-child(14) {
+          left: calc(-6px * 14);
+        }
 
-      &:first-child {
-        clip-path: polygon(0 0,
-            10px 50%,
-            0 100%,
-            100% 100%,
-            calc(100% - 10px) 50%,
-            100% 0);
+        &:nth-child(15) {
+          left: calc(-6px * 15);
+        }
+
+        &:first-child {
+          clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
+        }
       }
 
+      .device-active {
+        background: linear-gradient(45deg, #04e6fb, #0c5cab);
+
+        &::before {
+          border-color: #0efcff;
+          box-shadow: 1px 1px 3px 1px #0efcff inset;
+        }
+      }
     }
 
-    .device-active {
-      background: linear-gradient(45deg, #04e6fb, #0c5cab);
+    .enter-detail {
+      color: #fff;
+      cursor: pointer;
+      position: absolute;
+      right: 120px;
+      top: -6px;
+      padding: 5px;
+      border-radius: 5px;
+      margin-left: 8px;
+      margin-right: 8px;
+      width: auto;
+      height: 33px !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      padding: 5px 15px 5px 15px;
+      cursor: pointer;
+
+      &:hover {
+        background: linear-gradient(#2cd1ff55, #1eb0ff55);
+      }
 
       &::before {
-        border-color: #0efcff;
-        box-shadow: 1px 1px 3px 1px #0efcff inset;
+        width: calc(100% - 6px);
+        height: 27px;
+        content: '';
+        position: absolute;
+        top: 3px;
+        right: 0;
+        left: 3px;
+        bottom: 0;
+        z-index: -1;
+        border-radius: inherit;
+        /*important*/
+        background: linear-gradient(#1fa6cb, #127cb5);
       }
     }
   }
 
-  .enter-detail {
-    color: #fff;
-    cursor: pointer;
-    position: absolute;
-    right: 120px;
-    top: -6px;
-    padding: 5px;
-    border-radius: 5px;
-    margin-left: 8px;
-    margin-right: 8px;
-    width: auto;
-    height: 33px !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    padding: 5px 15px 5px 15px;
-    cursor: pointer;
-
-    &:hover {
-      background: linear-gradient(#2cd1ff55, #1eb0ff55);
+  @keyframes treeShow {
+    0% {
+      left: -400px;
+      opacity: 0;
     }
 
-    &::before {
-      width: calc(100% - 6px);
-      height: 27px;
-      content: '';
-      position: absolute;
-      top: 3px;
-      right: 0;
-      left: 3px;
-      bottom: 0;
-      z-index: -1;
-      border-radius: inherit;
-      /*important*/
-      background: linear-gradient(#1fa6cb, #127cb5);
+    100% {
+      left: 10px;
+      opacity: 1;
     }
   }
-}
 
-@keyframes treeShow {
-  0% {
-    left: -400px;
-    opacity: 0;
-  }
+  @keyframes treeHide {
+    0% {
+      left: 10px;
+      opacity: 1;
+    }
 
-  100% {
-    left: 10px;
-    opacity: 1;
+    100% {
+      left: -400px;
+      opacity: 0;
+    }
   }
-}
 
-@keyframes treeHide {
-  0% {
-    left: 10px;
-    opacity: 1;
-  }
+  @keyframes locationShow {
+    0% {
+      right: 0px;
+      opacity: 0;
+    }
 
-  100% {
-    left: -400px;
-    opacity: 0;
+    100% {
+      right: 240px;
+      opacity: 1;
+    }
   }
-}
 
-@keyframes locationShow {
-  0% {
-    right: 0px;
-    opacity: 0;
-  }
+  @keyframes locationHide {
+    0% {
+      right: 240px;
+      opacity: 1;
+    }
 
-  100% {
-    right: 240px;
-    opacity: 1;
+    100% {
+      right: 0;
+      opacity: 0;
+    }
   }
-}
 
-@keyframes locationHide {
-  0% {
-    right: 240px;
-    opacity: 1;
-  }
+  @keyframes locationBtnShow {
+    0% {
+      right: -240px;
+      opacity: 0;
+    }
 
-  100% {
-    right: 0;
-    opacity: 0;
+    100% {
+      right: -2px;
+      opacity: 1;
+    }
   }
-}
 
-@keyframes locationBtnShow {
-  0% {
-    right: -240px;
-    opacity: 0;
-  }
+  @keyframes locationBtnHide {
+    0% {
+      right: -2px;
+      opacity: 1;
+    }
 
-  100% {
-    right: -2px;
-    opacity: 1;
+    100% {
+      right: -240px;
+      opacity: 0;
+    }
   }
-}
 
-@keyframes locationBtnHide {
-  0% {
-    right: -2px;
-    opacity: 1;
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    // overflow: auto;
+    height: 100%;
   }
 
-  100% {
-    right: -240px;
-    opacity: 0;
+  :deep(.zxm-select-dropdown) {
+    left: 0 !important;
+    color: #000000 !important;
   }
-}
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  // overflow: auto;
-  height: 100%;
-}
-
-:deep(.zxm-select-dropdown) {
-  left: 0 !important;
-  color: #000000 !important;
-}</style>
+</style>

src/views/vent/monitorManager/gasPumpMonitor/gasPump.data.ts

@@ -5,7 +5,7 @@ export const warningConfig = reactive({
   data: [
     ['火焰6', '严重报警', '03-05'],
     ['测点43', '一般预警', '03-05'],
-    ['CO23', '一版预警', '03-05'],
+    ['CO23', '一般预警', '03-05'],
     ['测点6', '超高预警', '03-05'],
     ['测点65', '超高预警', '03-05'],
     ['温度4', '一般预警', '03-05'],

src/views/vent/monitorManager/gateMonitor/gate.threejs.qd.ts

@@ -523,7 +523,7 @@ class Fm3 {
         this.addLight();
         // this.deviceDetailCard();
         this.model.animate();
- 
+
         this.backDamperOpenMesh = this.group.getObjectByName('Dampler_open_1');
         if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = false;
         this.backDamperClosedMesh = this.group.getObjectByName('Damper_Closed_1');

src/views/vent/monitorManager/gateMonitor/gate.threejs.three.ts

@@ -362,6 +362,29 @@ class Fm2 {
             this.fmClock.start();
           };
           break;
+
+        case 8: // 打开后门
+          handler = () => {
+            this.clipActionArr.centerDoor.paused = true;
+            this.clipActionArr.centerDoor.reset();
+            this.clipActionArr.centerDoor.time = 1.2;
+            this.clipActionArr.centerDoor.timeScale = timeScale;
+            this.clipActionArr.centerDoor.clampWhenFinished = true;
+            this.clipActionArr.centerDoor.play();
+            this.fmClock.start();
+          };
+          break;
+        case 9: // 关闭后门
+          handler = () => {
+            this.clipActionArr.centerDoor.paused = true;
+            this.clipActionArr.centerDoor.reset();
+            this.clipActionArr.centerDoor.time = 4;
+            this.clipActionArr.centerDoor.timeScale = -timeScale;
+            this.clipActionArr.centerDoor.clampWhenFinished = true;
+            this.clipActionArr.centerDoor.play();
+            this.fmClock.start();
+          };
+          break;
         // case 5: // 打开前后门
         //   handler = () => {
         //     this.clipActionArr.backDoor.paused = true;

src/views/vent/monitorManager/gateMonitor/gate.threejs.ts

@@ -4,6 +4,7 @@ import Fm1 from './gate.threejs.yy';
 import Fm3 from './gate.threejs.qd';
 import FmXR from './gate.threejs.xr';
 import Fm2 from './gate.threejs.three';
+import FmTwoSs from './gate.threejs.two.ss';
 import { animateCamera } from '/@/utils/threejs/util';
 import useEvent from '../../../../utils/threejs/useEvent';
 
@@ -13,6 +14,7 @@ let model,
   fm2: Fm2,
   fm3: Fm3,
   fmXr: FmXR,
+  fmTwoSs: FmTwoSs,
   group: THREE.Object3D,
   fmType = '';
 
@@ -33,6 +35,8 @@ const startAnimation = () => {
       fm3.mouseUpModel.call(fm3);
     } else if (fmType === 'fmXr') {
       fmXr.mouseUpModel.call(fmXr);
+    } else if (fmType === 'fmTwoSs') {
+      fmTwoSs.mouseUpModel.call(fmTwoSs);
     }
   });
 };
@@ -49,6 +53,8 @@ const mouseEvent = (event) => {
         fm3.mousedownModel.call(fm3, intersects);
       } else if (fmType === 'fmXr' && fmXr) {
         fmXr.mousedownModel.call(fmXr, intersects);
+      } else if (fmType === 'fmTwoSs' && fmTwoSs) {
+        fmTwoSs.mousedownModel.call(fmTwoSs, intersects);
       }
     });
     // console.log('摄像头控制信息', model.orbitControls, model.camera);
@@ -64,6 +70,8 @@ export const addMonitorText = (selectData) => {
     return fm3.addMonitorText.call(fm3, selectData);
   } else if (fmType === 'fmXr' && fmXr) {
     return fmXr.addMonitorText.call(fmXr, selectData);
+  } else if (fmType === 'fmTwoSs' && fmTwoSs) {
+    return fmTwoSs.addMonitorText.call(fmTwoSs, selectData);
   }
 };
 
@@ -88,6 +96,8 @@ export const play = (handlerState, flag?) => {
     return fm3.play.call(fm3, handlerState, flag);
   } else if (fmType === 'fmXr' && fmXr) {
     return fmXr.play.call(fmXr, handlerState, flag);
+  } else if (fmType === 'fmTwoSs' && fmTwoSs) {
+    return fmTwoSs.play.call(fmTwoSs, handlerState, flag);
   }
 };
 
@@ -123,6 +133,9 @@ export const setModelType = (type) => {
       if (model.scene.getObjectByName('fmXr')) {
         model.scene.remove(fmXr.group);
       }
+      if (model.scene.getObjectByName('fmTwoSs')) {
+        model.scene.remove(fmTwoSs.group);
+      }
       const oldCameraPosition = { x: -1000, y: 100, z: 500 };
       setTimeout(async () => {
         resolve(null);
@@ -161,6 +174,9 @@ export const setModelType = (type) => {
       if (model.scene.getObjectByName('fmXr')) {
         model.scene.remove(fmXr.group);
       }
+      if (model.scene.getObjectByName('fmTwoSs')) {
+        model.scene.remove(fmTwoSs.group);
+      }
       const oldCameraPosition = { x: -761, y: 569, z: 871 };
       setTimeout(async () => {
         resolve(null);
@@ -202,6 +218,9 @@ export const setModelType = (type) => {
       if (model.scene.getObjectByName('fmXr')) {
         model.scene.remove(fmXr.group);
       }
+      if (model.scene.getObjectByName('fmTwoSs')) {
+        model.scene.remove(fmTwoSs.group);
+      }
       const oldCameraPosition = { x: -1000, y: 100, z: 500 };
       setTimeout(async () => {
         resolve(null);
@@ -242,6 +261,9 @@ export const setModelType = (type) => {
       if (model.scene.getObjectByName('fm3')) {
         model.scene.remove(fm3.group);
       }
+      if (model.scene.getObjectByName('fmTwoSs')) {
+        model.scene.remove(fmTwoSs.group);
+      }
       const oldCameraPosition = { x: -1000, y: 100, z: 500 };
       setTimeout(async () => {
         resolve(null);
@@ -255,6 +277,49 @@ export const setModelType = (type) => {
           0.8
         );
       }, 300);
+    } else if (fmType === 'fmTwoSs' && fmTwoSs && fmTwoSs.group) {
+      if (fmTwoSs.clipActionArr.frontDoor && fmTwoSs.clipActionArr.backDoor) {
+        fmTwoSs.clipActionArr.frontDoor.reset();
+        fmTwoSs.clipActionArr.frontDoor.time = 0.5;
+        fmTwoSs.clipActionArr.backDoor.reset();
+        fmTwoSs.clipActionArr.backDoor.time = 0.5;
+        fmTwoSs.clipActionArr.frontDoor.stop();
+        fmTwoSs.clipActionArr.backDoor.stop();
+      }
+
+      if (fmTwoSs.frontDamperOpenMesh) fmTwoSs.frontDamperOpenMesh.visible = false;
+      if (fmTwoSs.frontDamperClosedMesh) fmTwoSs.frontDamperClosedMesh.visible = true;
+      if (fmTwoSs.backDamperOpenMesh) fmTwoSs.backDamperOpenMesh.visible = false;
+      if (fmTwoSs.backDamperClosedMesh) fmTwoSs.backDamperClosedMesh.visible = true;
+
+      model.startAnimation = fmTwoSs.render.bind(fmTwoSs);
+      group = fmTwoSs.group;
+      group.rotation.y = 0;
+      if (model.scene.getObjectByName('fm2')) {
+        model.scene.remove(fm2.group);
+      }
+      if (model.scene.getObjectByName('fm1')) {
+        model.scene.remove(fm1.group);
+      }
+      if (model.scene.getObjectByName('fm3')) {
+        model.scene.remove(fm3.group);
+      }
+      if (model.scene.getObjectByName('fmXr')) {
+        model.scene.remove(fmXr.group);
+      }
+      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
+      setTimeout(async () => {
+        resolve(null);
+        model.scene.add(fmTwoSs.group);
+        await animateCamera(
+          oldCameraPosition,
+          { x: 0, y: 0, z: 0 },
+          { x: 50.99, y: 69.32, z: 93.61 },
+          { x: -10.04, y: -14.38, z: -31.4 },
+          model,
+          0.8
+        );
+      }, 300);
     }
   });
 };
@@ -287,6 +352,8 @@ export const mountedThree = (playerDom) => {
     fm3.mountedThree(playerDom);
     fmXr = new FmXR(model);
     fmXr.mountedThree(playerDom);
+    fmTwoSs = new FmTwoSs(model);
+    fmTwoSs.mountedThree(playerDom);
     model.animate();
     startAnimation();
   });
@@ -299,10 +366,12 @@ export const destroy = () => {
     if (fm2) fm2.destroy();
     if (fm3) fm3.destroy();
     if (fmXr) fmXr.destroy();
+    if (fmTwoSs) fmTwoSs.destroy();
     fm1 = null;
     fm2 = null;
     fm3 = null;
     fmXr = null;
+    fmTwoSs = null;
     group = null;
     model.mixers = [];
     model.destroy();

src/views/vent/monitorManager/gateMonitor/gate.threejs.two.ss.ts

@@ -0,0 +1,555 @@
+import * as THREE from 'three';
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
+import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
+import { drawHot } from '/@/utils/threejs/util';
+import { useAppStore } from '/@/store/modules/app';
+
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+
+class FmTwoSs {
+  modelName = 'fmTwoSs';
+  model; //
+  group;
+  isLRAnimation = true; // 是否开启左右摇摆动画
+  direction = 1; // 摇摆方向
+  animationTimer: NodeJS.Timeout | null = null; // 摇摆开启定时器
+  player1;
+  player2;
+  deviceDetailCSS3D;
+  playerStartClickTime1 = new Date().getTime();
+  playerStartClickTime2 = new Date().getTime();
+
+  fmClock = new THREE.Clock();
+  mixers: THREE.AnimationMixer | undefined;
+  appStore = useAppStore();
+
+  backDamperOpenMesh;
+  backDamperClosedMesh;
+  frontDamperOpenMesh;
+  frontDamperClosedMesh;
+
+  clipActionArr = {
+    frontDoor: null as unknown as THREE.AnimationAction,
+    backDoor: null as unknown as THREE.AnimationAction,
+  };
+
+  constructor(model) {
+    this.model = model;
+  }
+
+  addLight() {
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
+    directionalLight.position.set(344, 690, 344);
+    this.group?.add(directionalLight);
+    directionalLight.target = this.group as THREE.Object3D;
+
+    const pointLight2 = new THREE.PointLight(0xffeeee, 1, 300);
+    pointLight2.position.set(-4, 10, 1.8);
+    pointLight2.shadow.bias = 0.05;
+    this.group?.add(pointLight2);
+
+    const pointLight3 = new THREE.PointLight(0xffeeee, 1, 200);
+    pointLight3.position.set(-0.5, -0.5, 0.75);
+    pointLight3.shadow.bias = 0.05;
+    this.group?.add(pointLight3);
+
+    // const pointLight4 = new THREE.PointLight(0xffeeee, 1, 150);
+    // pointLight4.position.set(4.3, 1, -0.9);
+    // pointLight4.shadow.bias = 0.05;
+    // this.group?.add(pointLight4);
+
+    // const pointLight5 = new THREE.PointLight(0xffeeee, 1, 150);
+    // pointLight5.position.set(4.3, 1, -0.9);
+    // pointLight5.shadow.bias = 0.05;
+    // this.group?.add(pointLight5);
+
+    // const pointLight6 = new THREE.PointLight(0xffeeee, 1, 150);
+    // pointLight6.position.set(-4.4, 1, -0.9);
+    // pointLight6.shadow.bias = 0.05;
+    // this.group?.add(pointLight6);
+
+    // const pointLightHelper2 = new THREE.PointLightHelper(pointLight2, 1);
+    // this.model.scene?.add(pointLightHelper2);
+
+    // gui.add(pointLight2.position, 'x', -300, 300);
+    // gui.add(pointLight2.position, 'y', -300, 300);
+    // gui.add(pointLight2.position, 'z', -300, 300);
+
+    // gui.add(pointLight3.position, 'x', -300, 300);
+    // gui.add(pointLight3.position, 'y', -300, 300);
+    // gui.add(pointLight3.position, 'z', -300, 300);
+  }
+  // 重置摄像头
+  resetCamera() {
+    this.model.camera.far = 274;
+    this.model.orbitControls?.update();
+    this.model.camera.updateProjectionMatrix();
+  }
+  // 设置模型位置
+  setModalPosition() {
+    this.group?.scale.set(22, 22, 22);
+    this.group?.position.set(-20, 20, 9);
+  }
+
+  /* 添加监控数据 */
+  addMonitorText(selectData) {
+    if (!this.group) {
+      return;
+    }
+    const textArr = [
+      {
+        text: `远程控制自动风门`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 120,
+        y: 100,
+      },
+      {
+        text: `净通行高度(m):`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 155,
+      },
+      {
+        text: `${selectData.fclearheight ? selectData.fclearheight : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 290,
+        y: 155,
+      },
+      {
+        text: `净通行宽度(m): `,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 215,
+      },
+      {
+        text: ` ${selectData.fclearwidth ? selectData.fclearwidth : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 280,
+        y: 215,
+      },
+      {
+        text: `故障诊断:`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 275,
+      },
+      {
+        text: `${selectData.warnLevel_str ? selectData.warnLevel_str : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 280,
+        y: 275,
+      },
+      {
+        text: History_Type['type'] == 'remote' ? `国能神东煤炭集团监制` : '煤炭科学技术研究院有限公司研制',
+        font: 'normal 28px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: History_Type['type'] == 'remote' ? 80 : 20,
+        y: 325,
+      },
+    ];
+
+    //
+    getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
+      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
+      textMap.colorSpace = THREE.SRGBColorSpace;
+      const textMaterial = new THREE.MeshBasicMaterial({
+        // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
+        map: textMap, // 设置纹理贴图
+        transparent: true,
+        side: THREE.FrontSide, // 这里是双面渲染的意思
+      });
+      textMaterial.blending = THREE.CustomBlending;
+      const monitorPlane = this.group.getObjectByName('monitorText');
+      if (monitorPlane) {
+        monitorPlane.material = textMaterial;
+      } else {
+        const planeGeometry = new THREE.PlaneGeometry(526, 346); // 平面3维几何体PlaneGeometry
+        const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
+        planeMesh.name = 'monitorText';
+        planeMesh.scale.set(0.002, 0.002, 0.002);
+        planeMesh.position.set(3.685, 0.09, -0.41);
+        this.group.add(planeMesh);
+      }
+      textMap.dispose();
+    });
+  }
+
+  /** 添加热点 */
+  drawHots() {
+    const hotPositions = [
+      { x: -0.37, y: 0.26, z: -0.32 },
+      { x: 0.28, y: -0.2, z: -0.43 },
+      { x: 0.55, y: -0.22, z: -0.38 },
+    ];
+    for (let i = 0; i < 3; i++) {
+      const hotPoint = drawHot(0.1);
+      const position = hotPositions[i];
+      hotPoint.scale.set(0.1, 0.1, 0.1);
+      hotPoint.position.set(position.x, position.y, position.z);
+      hotPoint.name = 'hotPoint' + i;
+      this.group?.add(hotPoint);
+    }
+  }
+
+  /* 风门动画 */
+  render() {
+    if (!this.model) {
+      return;
+    }
+    if (this.isLRAnimation && this.group) {
+      // 左右摇摆动画
+      if (Math.abs(this.group.rotation.y) >= 0.2) {
+        this.direction = -this.direction;
+        this.group.rotation.y += 0.00002 * 30 * this.direction;
+      } else {
+        this.group.rotation.y += 0.00002 * 30 * this.direction;
+      }
+    }
+
+    if (this.mixers && this.fmClock.running) {
+      this.mixers.update(2);
+    }
+  }
+
+  /* 点击风窗，风窗全屏 */
+  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
+    this.isLRAnimation = false;
+    if (this.animationTimer) {
+      clearTimeout(this.animationTimer);
+      this.animationTimer = null;
+    }
+
+    // 判断是否点击到视频
+    intersects.find((intersect) => {
+      const mesh = intersect.object;
+      // if (mesh.name === 'player1') {
+      //   if (new Date().getTime() - this.playerStartClickTime1 < 400) {
+      //     // 双击，视频放大
+      //     if (this.player1) {
+      //       this.player1.requestPictureInPicture();
+      //     }
+      //   }
+      //   this.playerStartClickTime1 = new Date().getTime();
+      //   return true;
+      // } else if (mesh.name === 'player2') {
+      //   if (new Date().getTime() - this.playerStartClickTime2 < 400) {
+      //     // 双击，视频放大
+      //     if (this.player2) {
+      //       this.player2.requestPictureInPicture();
+      //     }
+      //   }
+      //   this.playerStartClickTime2 = new Date().getTime();
+      //   return true;
+      // } else if (mesh.name.startsWith('hotPoint')) {
+      //   if (this.deviceDetailCSS3D) {
+      //     this.deviceDetailCSS3D.position.set(mesh.position.x + 0.035, mesh.position.y + 0.68, mesh.position.z + 0.02);
+      //     console.log('[ deviceDetailCSS3D.position ] >', this.deviceDetailCSS3D.position);
+      //     this.deviceDetailCSS3D.visible = true;
+      //     return true;
+      //   }
+      // } else {
+      //   if (this.deviceDetailCSS3D) this.deviceDetailCSS3D.visible = false;
+      //   console.log('[ 点击事件 ] >');
+      // }
+      return false;
+    });
+  }
+
+  mouseUpModel() {
+    // 10s后开始摆动
+    if (!this.animationTimer && !this.isLRAnimation) {
+      this.animationTimer = setTimeout(() => {
+        this.isLRAnimation = true;
+      }, 10000);
+    }
+  }
+
+  /* 提取风门序列帧，初始化前后门动画 */
+  initAnimation() {
+    const fmGroup = this.group?.getObjectByName('fmTwoSs');
+    if (fmGroup && fmGroup.animations[0]) {
+      const tracks = fmGroup.animations[0].tracks;
+      const fontTracks: any[] = [],
+        backTracks: any[] = [];
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        if (track.name.startsWith('qianmen')) {
+          fontTracks.push(track);
+        } else if (track.name.startsWith('houmen')) {
+          backTracks.push(track);
+        }
+      }
+
+      this.mixers = new THREE.AnimationMixer(fmGroup);
+
+      const frontDoor = new THREE.AnimationClip('frontDoor', 4, fontTracks);
+      const frontClipAction = this.mixers.clipAction(frontDoor, fmGroup);
+      frontClipAction.clampWhenFinished = true;
+      frontClipAction.loop = THREE.LoopOnce;
+      this.clipActionArr.frontDoor = frontClipAction;
+
+      const backDoor = new THREE.AnimationClip('backDoor', 4, backTracks);
+      const backClipAction = this.mixers.clipAction(backDoor, fmGroup);
+      backClipAction.clampWhenFinished = true;
+      backClipAction.loop = THREE.LoopOnce;
+      this.clipActionArr.backDoor = backClipAction;
+    }
+  }
+
+  deviceDetailCard(position = { x: 0, y: 0, z: 0 }) {
+    const element = document.getElementById('deviceCard') as HTMLElement;
+    if (element) {
+      this.deviceDetailCSS3D = new CSS2DObject(element);
+      this.deviceDetailCSS3D.name = 'deviceCard';
+      this.deviceDetailCSS3D.position.set(position.x, position.y, position.z);
+      this.deviceDetailCSS3D.visible = false;
+      // this.model.scene.add(this.deviceDetailCSS3D);
+      this.group.add(this.deviceDetailCSS3D);
+    }
+  }
+
+  // 播放动画
+  play(handlerState, timeScale = 0.01) {
+    if (this.clipActionArr.frontDoor && this.clipActionArr.backDoor) {
+      let handler = () => {};
+      switch (handlerState) {
+        case 1: // 打开前门
+          handler = () => {
+            this.clipActionArr.frontDoor.paused = true;
+            this.clipActionArr.frontDoor.reset();
+            this.clipActionArr.frontDoor.time = 1.2;
+            this.clipActionArr.frontDoor.timeScale = timeScale;
+            // this.clipActionArr.frontDoor.clampWhenFinished = true;
+            this.clipActionArr.frontDoor.play();
+            this.fmClock.start();
+
+            // 显示打开前门文字
+            if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = true;
+            if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = false;
+          };
+          break;
+        case 2: // 关闭前门
+          handler = () => {
+            this.clipActionArr.frontDoor.paused = true;
+            this.clipActionArr.frontDoor.reset(); //
+            this.clipActionArr.frontDoor.time = 3;
+            this.clipActionArr.frontDoor.timeScale = -timeScale;
+            // this.clipActionArr.frontDoor.clampWhenFinished = true;
+            this.clipActionArr.frontDoor.play();
+            this.fmClock.start();
+
+            if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = false;
+            if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = true;
+          };
+          break;
+        case 3: // 打开后门
+          handler = () => {
+            this.clipActionArr.backDoor.paused = true;
+            this.clipActionArr.backDoor.reset();
+            this.clipActionArr.backDoor.time = 1.2;
+            this.clipActionArr.backDoor.timeScale = timeScale;
+            // this.clipActionArr.backDoor.clampWhenFinished = true;
+            this.clipActionArr.backDoor.play();
+            this.fmClock.start();
+
+            if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = true;
+            if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = false;
+          };
+          break;
+        case 4: // 关闭后门
+          handler = () => {
+            this.clipActionArr.backDoor.paused = true;
+            this.clipActionArr.backDoor.reset();
+            this.clipActionArr.backDoor.time = 3;
+            this.clipActionArr.backDoor.timeScale = -timeScale;
+            // this.clipActionArr.backDoor.clampWhenFinished = true;
+            this.clipActionArr.backDoor.play();
+            this.fmClock.start();
+
+            if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = false;
+            if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = true;
+          };
+          break;
+        // case 5: // 打开前后门
+        //   handler = () => {
+        //     this.clipActionArr.backDoor.paused = true;
+        //     this.clipActionArr.frontDoor.paused = true;
+
+        //     this.clipActionArr.frontDoor.reset();
+        //     this.clipActionArr.frontDoor.time = 0;
+        //     this.clipActionArr.frontDoor.timeScale = 0.01;
+        //     this.clipActionArr.frontDoor.clampWhenFinished = true;
+        //     this.clipActionArr.frontDoor.play();
+
+        //     this.clipActionArr.backDoor.reset();
+        //     this.clipActionArr.backDoor.time = 0;
+        //     this.clipActionArr.backDoor.timeScale = 0.01;
+        //     this.clipActionArr.backDoor.clampWhenFinished = true;
+        //     this.clipActionArr.backDoor.play();
+        //     this.frontClock.start();
+        //     this.backClock.start();
+        //   };
+        //   break;
+        // case 6: // 关闭前后门
+        //   handler = () => {
+        //     debugger;
+        //     this.clipActionArr.backDoor.paused = true;
+        //     this.clipActionArr.frontDoor.paused = true;
+
+        //     this.clipActionArr.frontDoor.reset();
+        //     this.clipActionArr.frontDoor.time = 4;
+        //     this.clipActionArr.frontDoor.timeScale = -0.01;
+        //     this.clipActionArr.frontDoor.clampWhenFinished = true;
+        //     this.clipActionArr.frontDoor.play();
+        //     this.clipActionArr.backDoor.reset();
+        //     this.clipActionArr.backDoor.time = 4;
+        //     this.clipActionArr.backDoor.timeScale = -0.01;
+        //     this.clipActionArr.backDoor.clampWhenFinished = true;
+        //     this.clipActionArr.backDoor.play();
+        //     this.frontClock.start();
+        //     this.backClock.start();
+        //   };
+        //   break;
+        default:
+      }
+
+      handler();
+      // model.clock.start();
+      // const honglvdeng = group.getObjectByName('honglvdeng');
+      // const material = honglvdeng.material;
+      // setTimeout(() => {
+      //   if (handlerState === 2 || handlerState === 4 || handlerState === 6) {
+      //     material.color = new THREE.Color(0x00ff00);
+      //   } else {
+      //     material.color = new THREE.Color(0xff0000);
+      //   }
+      // }, 1000);
+    }
+  }
+
+  async initCamera(dom1) {
+    const videoPlayer1 = dom1;
+    this.player1 = dom1;
+    let monitorPlane: THREE.Mesh | null = null;
+    if (!videoPlayer1) {
+      const textArr = [
+        {
+          text: `无信号输入`,
+          font: 'normal 40px Arial',
+          color: '#009900',
+          strokeStyle: '#002200',
+          x: 170,
+          y: 40,
+        },
+      ];
+      const canvas = await getTextCanvas(320, 180, '', 'noSinge.png');
+
+      let textMaterial: THREE.MeshBasicMaterial | null = null;
+      if (canvas) {
+        const textMap = new THREE.CanvasTexture(canvas); // 关键一步
+        textMaterial = new THREE.MeshBasicMaterial({
+          map: textMap, // 设置纹理贴图
+          transparent: true,
+          side: THREE.DoubleSide, // 这里是双面渲染的意思
+        });
+        textMaterial.blending = THREE.CustomBlending;
+
+        const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry
+        monitorPlane = new THREE.Mesh(planeGeometry, textMaterial);
+
+        textMaterial.dispose();
+        planeGeometry.dispose();
+        textMap.dispose();
+      }
+    }
+    const player1 = this.group.getObjectByName('player1');
+    if (player1) {
+      this.model.clearMesh(player1);
+      this.group.remove(player1);
+    }
+    const noPlayer1 = this.group.getObjectByName('noPlayer1');
+    if (noPlayer1) {
+      this.model.clearMesh(noPlayer1);
+      this.group.remove(noPlayer1);
+    }
+    if (!videoPlayer1 && videoPlayer1 === null) {
+      if (monitorPlane && !this.group.getObjectByName('noPlayer1')) {
+        const planeMesh = monitorPlane.clone();
+        planeMesh.name = 'noPlayer1';
+        planeMesh.scale.set(0.0085, 0.0055, 0.012);
+        planeMesh.position.set(-3.64, 0.01, -0.41);
+        this.group?.add(planeMesh.clone());
+      }
+    } else if (videoPlayer1) {
+      try {
+        const mesh = renderVideo(this.group, videoPlayer1, 'player1');
+        if (mesh) {
+          mesh?.scale.set(-0.0275, 0.028, 1);
+          mesh?.position.set(-3.643, 0.02, -0.4);
+          mesh.rotation.y = -Math.PI;
+          this.group.add(mesh);
+        }
+      } catch (error) {
+        console.log('视频信号异常');
+      }
+    }
+  }
+
+  mountedThree(playerDom) {
+    this.group = new THREE.Object3D();
+    this.group.name = this.modelName;
+    return new Promise((resolve) => {
+      this.model.setGLTFModel(['fmTwoSs'], this.group).then(() => {
+        this.setModalPosition();
+        // 初始化左右摇摆动画;
+        this.initAnimation();
+        // this.drawHots();
+        this.addLight();
+        // this.deviceDetailCard();
+        this.model.animate();
+
+        resolve(this.model);
+        this.initCamera(playerDom);
+      });
+    });
+  }
+
+  destroy() {
+    if (this.model) {
+      if (this.mixers) {
+        this.mixers.uncacheClip(this.clipActionArr.frontDoor.getClip());
+        this.mixers.uncacheClip(this.clipActionArr.backDoor.getClip());
+        this.mixers.uncacheAction(this.clipActionArr.frontDoor.getClip(), this.group);
+        this.mixers.uncacheAction(this.clipActionArr.backDoor.getClip(), this.group);
+        this.mixers.uncacheRoot(this.group);
+
+        if (this.model.animations[0]) this.model.animations[0].tracks = [];
+      }
+      this.model.clearGroup(this.group);
+      this.clipActionArr.backDoor = undefined;
+      this.clipActionArr.frontDoor = undefined;
+
+      this.mixers = undefined;
+
+      // document.getElementById('damper3D').parentElement.remove(document.getElementById('damper3D'))
+    }
+  }
+}
+export default FmTwoSs;

src/views/vent/monitorManager/gateMonitor/index.vue

@@ -25,10 +25,12 @@
       <div class="top-center row">
         <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(1)">打开前门</div>
         <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(2)">关闭前门</div>
+        <div v-if="hasPermission('btn:control') && selectData.deviceType == 'gate_ss'" class="button-box" @click="playAnimation(8)">打开中间门</div>
+        <div v-if="hasPermission('btn:control') && selectData.deviceType == 'gate_ss'" class="button-box" @click="playAnimation(9)">关闭中间门</div>
         <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(3)">打开后门</div>
         <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(4)">关闭后门</div>
-        <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(5)">同时打开</div>
-        <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(6)">同时关闭</div>
+        <div v-if="hasPermission('btn:control') && selectData.deviceType != 'gate_ss'" class="button-box" @click="playAnimation(5)">同时打开</div>
+        <div v-if="hasPermission('btn:control') && selectData.deviceType != 'gate_ss'" class="button-box" @click="playAnimation(6)">同时关闭</div>
       </div>
       <div class="top-right row" v-if="hasPermission('btn:remote')">
         <div class="control-type row">
@@ -86,8 +88,17 @@
                 <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == '0'" color="#46C66F"
                   >打开</a-tag
                 >
+                <a-tag v-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == '0'" color="red"
+                  >正在运行</a-tag
+                >
+                <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == 1" color="default"
+                  >关闭</a-tag
+                >
+                <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == 1 && record.midGateClose == '0'" color="#46C66F"
+                  >打开</a-tag
+                >
                 <template v-if="column.dataIndex === 'ndoortype'">
-                  <span v-if="record.ndoortype == 0">气动风门</span>
+                  <span v-if="record.ndoortype == '0'">气动风门</span>
                   <span v-else color="default">液压风门</span>
                 </template>
                 <template v-if="column.dataIndex === 'doorUse'">
@@ -104,8 +115,8 @@
                   <a-tag v-else-if="record.warnLevel == '1001'" color="default">网络中断</a-tag>
                   <a-tag v-else color="green">正常</a-tag>
                 </template>
-                <a-tag v-else-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
-                  record.warnFlag == 0 ? '正常' : '报警'
+                <a-tag v-else-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
+                  record.warnFlag == '0' ? '正常' : '报警'
                 }}</a-tag>
                 <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
                   record.netStatus == '0' ? '断开' : '连接'
@@ -216,6 +227,7 @@
 
   const frontDoorIsOpen = ref(false); //前门是否开启
   const backDoorIsOpen = ref(false); //后门是否开启
+  const midDoorIsOpen = ref(false); //中间门是否开启
 
   const modalIsShow = ref<boolean>(false); // 是否显示模态框
   const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
@@ -251,6 +263,8 @@
     frontGateClose: '1',
     rearGateOpen: '0',
     rearGateClose: '1',
+    midGateOpen: '0',
+    midGateClose: '1',
     fault: '气源压力超限',
     masterComputer: 0,
     frontGateOpenCtrl: false,
@@ -324,11 +338,11 @@
     const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
     Object.assign(selectData, initData, selectRow, baseData);
     isFrontOpenRunning = false; //开关门动作是否在进行
-    isFrontCloseRunning = false; //开关门动作是否在进行
     isRearOpenRunning = false; //开关门动作是否在进行
-    isRearCloseRunning = false; //开关门动作是否在进行
+    isMidOpenRunning = false; //开关门动作是否在进行
     frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
     rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
+    midDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
     // const type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
     let type;
     if (selectData['doorUse'] == 2) {
@@ -338,6 +352,8 @@
         type = 'fm2';
       } else if (selectData.deviceType == 'gate_qd') {
         type = 'fm3';
+      } else if (selectData.deviceType == 'gate_ss_two') {
+        type = 'fmTwoSs';
       } else {
         type = 'fm1'; // 液压
       }
@@ -389,6 +405,24 @@
           message.warning('后门已经关闭或正在关闭,请勿重新操作');
         }
         break;
+      case 8: // 打开中间门
+        if (selectData.midGateOpen == '0' && selectData.midGateClose == '1') {
+          modalTitle.value = '打开中间门';
+          modalType.value = '8';
+          modalIsShow.value = true;
+        } else {
+          message.warning('后门已经打开或正在打开,请勿重新操作');
+        }
+        break;
+      case 9: // 关闭中间门
+        if (selectData.midGateOpen == '1' && selectData.midGateClose == '0') {
+          modalTitle.value = '关闭中间门';
+          modalType.value = '9';
+          modalIsShow.value = true;
+        } else {
+          message.warning('后门已经关闭或正在关闭,请勿重新操作');
+        }
+        break;
       case 5: // 打开前后门
         if (
           selectData.frontGateOpen == '0' &&
@@ -436,11 +470,14 @@
     //   return;
     // }
 
-    if ((isFrontOpenRunning || isFrontCloseRunning) && (handlerState == 2 || handlerState == 1 || handlerState == 5 || handlerState == 6)) {
-      return;
-    }
+    // if (isOpenRunning && (handlerState == 2 || handlerState == 1 || handlerState == 5 || handlerState == 6)) {
+    //   return;
+    // }
 
-    if ((isRearOpenRunning || isRearCloseRunning) && (handlerState == 3 || handlerState == 4 || handlerState == 5 || handlerState == 6)) {
+    // if (isOpenRunning && (handlerState == 3 || handlerState == 4 || handlerState == 5 || handlerState == 6)) {
+    //   return;
+    // }
+    if (isOpenRunning) {
       return;
     }
 
@@ -453,7 +490,6 @@
       masterComputer: selectData.masterComputer,
     };
     let handler = () => {};
-
     switch (handlerState) {
       case '1': // 打开前门
         if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
@@ -487,6 +523,22 @@
           data.paramcode = 'rearGateClose_S';
         }
         break;
+      case '8': // 打开中间门
+        if (selectData.midGateOpen == '0' && selectData.midGateClose == '1') {
+          handler = () => {
+            midDoorIsOpen.value = true;
+          };
+          data.paramcode = 'midGateOpen_S';
+        }
+        break;
+      case '9': // 关闭中间门
+        if (selectData.midGateOpen == '1' && selectData.midGateClose == '0') {
+          handler = () => {
+            midDoorIsOpen.value = false;
+          };
+          data.paramcode = 'midGateClose_S';
+        }
+        break;
       case '5': // 打开前后门
         if (
           selectData.frontGateOpen == '0' &&
@@ -534,18 +586,21 @@
       });
     }
   }
-
+  let isOpenRunning = false; //开关门动作是否在进行
   /** 开关门动画调用 */
   let isFrontOpenRunning = false; //开关门动作是否在进行
-  let isFrontCloseRunning = false; //开关门动作是否在进行
+  // let isFrontCloseRunning = false; //开关门动作是否在进行
   let isRearOpenRunning = false; //开关门动作是否在进行
-  let isRearCloseRunning = false; //开关门动作是否在进行
+  // let isRearCloseRunning = false; //开关门动作是否在进行
+  let isMidOpenRunning = false; //中间门动作是否在进行
+  // let isMidCloseRunning = false; //中间门动作是否在进行
   let frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
   let rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
+  let midDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
   function monitorAnimation(selectData) {
     const timeScale = 0.003;
 
-    // if (selectData.frontGateOpen == 0 && selectData.frontGateClose == 0) {
+    // if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '0') {
     //   //正在运行
     //   // if (!isFrontOpenRunning) {
     //   //   frontDoorIsOpen.value = true;
@@ -556,8 +611,17 @@
     //   // }
     // }
 
-    if (selectData.frontGateOpen == 1 && selectData.frontGateClose == 0) {
-      isFrontOpenRunning = false;
+    if (
+      (selectData.frontGateOpen == '0' && selectData.frontGateClose == '0') ||
+      (selectData.rearGateOpen == '0' && selectData.rearGateClose == '0') ||
+      (selectData.midGateOpen == '0' && selectData.midGateClose == '0')
+    ) {
+      isOpenRunning = true;
+    } else {
+      isOpenRunning = false;
+    }
+    if (selectData.frontGateOpen == 1 && selectData.frontGateClose == '0' && !isFrontOpenRunning) {
+      isFrontOpenRunning = true;
       if (frontDeviceState != 1) {
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
         play(1, timeScale);
@@ -566,8 +630,8 @@
         backDoorIsOpen.value = true;
       }
     }
-    if (selectData.frontGateClose == 1 && selectData.frontGateOpen == 0) {
-      isFrontCloseRunning = false;
+    if (selectData.frontGateClose == 1 && selectData.frontGateOpen == '0' && isFrontOpenRunning) {
+      isFrontOpenRunning = false;
       if (frontDeviceState != 2) {
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(2, timeScale) : play(2);
         play(2, timeScale);
@@ -576,8 +640,8 @@
         // backDoorIsOpen.value = false
       }
     }
-    if (selectData.rearGateOpen == 1 && selectData.rearGateClose == 0) {
-      isRearOpenRunning = false;
+    if (selectData.rearGateOpen == 1 && selectData.rearGateClose == '0' && !isRearOpenRunning) {
+      isRearOpenRunning = true;
 
       if (rearDeviceState != 3) {
         rearDeviceState = 3;
@@ -588,8 +652,8 @@
       }
     }
 
-    if (selectData.rearGateClose == 1 && selectData.rearGateOpen == 0) {
-      isRearCloseRunning = false;
+    if (selectData.rearGateClose == 1 && selectData.rearGateOpen == '0' && isRearOpenRunning) {
+      isRearOpenRunning = false;
       if (rearDeviceState != 4) {
         rearDeviceState = 4;
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4);
@@ -597,6 +661,28 @@
         backDoorIsOpen.value = false;
       }
     }
+
+    if (selectData.midGateOpen == 1 && selectData.midGateClose == '0' && !isMidOpenRunning) {
+      isMidOpenRunning = true;
+
+      if (midDeviceState != 8) {
+        midDeviceState = 8;
+        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
+        play(8, timeScale);
+        backDoorIsOpen.value = false;
+        frontDoorIsOpen.value = true;
+      }
+    }
+
+    if (selectData.midGateClose == 1 && selectData.midGateOpen == '0' && isMidOpenRunning) {
+      isMidOpenRunning = false;
+      if (midDeviceState != 9) {
+        midDeviceState = 9;
+        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4);
+        play(9, timeScale);
+        backDoorIsOpen.value = false;
+      }
+    }
   }
 
   function handleCancel() {

src/views/vent/monitorManager/groutMonitor/grout.data.ts

@@ -7,7 +7,7 @@ export const warningConfig = reactive({
   data: [
     ['火焰6', '严重报警', '03-05'],
     ['测点43', '一般预警', '03-05'],
-    ['CO23', '一版预警', '03-05'],
+    ['CO23', '一般预警', '03-05'],
     ['测点6', '超高预警', '03-05'],
     ['测点65', '超高预警', '03-05'],
     ['温度4', '一般预警', '03-05'],

src/views/vent/monitorManager/mainFanMonitor/index.vue

@@ -132,10 +132,18 @@
                 <div class="item-name">{{ data.title }}</div>
                 <div v-if="data.dataIndex.startsWith('Fan')">
                   <div class="item-value" v-if="dataMonitorRowIndex == 0">{{
-                    selectData[data.dataIndex.replace('Fan', 'Fan1')] ? selectData[data.dataIndex.replace('Fan', 'Fan1')] : '-'
+                    selectData['Fan1StartStatus'] == '0' && globalConfig?.simulatedPassword
+                      ? '-'
+                      : selectData[data.dataIndex.replace('Fan', 'Fan1')]
+                      ? selectData[data.dataIndex.replace('Fan', 'Fan1')]
+                      : '-'
                   }}</div>
                   <div class="item-value" v-if="dataMonitorRowIndex == 1">{{
-                    selectData[data.dataIndex.replace('Fan', 'Fan2')] ? selectData[data.dataIndex.replace('Fan', 'Fan2')] : '-'
+                    selectData['Fan2StartStatus'] == '0' && globalConfig?.simulatedPassword
+                      ? '-'
+                      : selectData[data.dataIndex.replace('Fan', 'Fan2')]
+                      ? selectData[data.dataIndex.replace('Fan', 'Fan2')]
+                      : '-'
                   }}</div>
                 </div>
                 <div v-else>
@@ -174,40 +182,52 @@
                   <div class="item-name"><div class="icon"></div> {{ state.title }}</div>
                   <div v-if="state.dataIndex.startsWith('Fan')">
                     <div class="signal-item" v-if="warningMonitorRowIndex == 0">
-                      <div
-                        class="signal-round"
-                        :class="{
-                          'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan1')],
-                          'signal-round-warning':
-                            selectData[state.dataIndex.replace('Fan', 'Fan1')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan1')],
-                          'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined,
-                        }"
-                      ></div>
-                      <div class="vent-margin-l-8">{{
-                        selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined
-                          ? '无状态'
-                          : selectData[state.dataIndex.replace('Fan', 'Fan1')]
-                          ? '正常'
-                          : '异常'
-                      }}</div>
+                      <template v-if="selectData['Fan1StartStatus'] == '0' && globalConfig?.simulatedPassword">
+                        <div class="signal-round signal-round-gry"></div>
+                        <div class="vent-margin-l-8">无状态</div></template
+                      >
+                      <template v-else>
+                        <div
+                          class="signal-round"
+                          :class="{
+                            'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan1')],
+                            'signal-round-warning':
+                              selectData[state.dataIndex.replace('Fan', 'Fan1')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan1')],
+                            'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined,
+                          }"
+                        ></div>
+                        <div class="vent-margin-l-8">{{
+                          selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined
+                            ? '无状态'
+                            : selectData[state.dataIndex.replace('Fan', 'Fan1')]
+                            ? '正常'
+                            : '异常'
+                        }}</div>
+                      </template>
                     </div>
                     <div class="signal-item" v-if="warningMonitorRowIndex == 1">
-                      <div
-                        class="signal-round"
-                        :class="{
-                          'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan2')],
-                          'signal-round-warning':
-                            selectData[state.dataIndex.replace('Fan', 'Fan2')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan2')],
-                          'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined,
-                        }"
-                      ></div>
-                      <div class="vent-margin-l-8">{{
-                        selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined
-                          ? '无状态'
-                          : selectData[state.dataIndex.replace('Fan', 'Fan2')]
-                          ? '正常'
-                          : '异常'
-                      }}</div>
+                      <template v-if="selectData['Fan2StartStatus'] == '0' && globalConfig?.simulatedPassword">
+                        <div class="signal-round signal-round-gry"></div>
+                        <div class="vent-margin-l-8">无状态</div></template
+                      >
+                      <template v-else>
+                        <div
+                          class="signal-round"
+                          :class="{
+                            'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan2')],
+                            'signal-round-warning':
+                              selectData[state.dataIndex.replace('Fan', 'Fan2')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan2')],
+                            'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined,
+                          }"
+                        ></div>
+                        <div class="vent-margin-l-8">{{
+                          selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined
+                            ? '无状态'
+                            : selectData[state.dataIndex.replace('Fan', 'Fan2')]
+                            ? '正常'
+                            : '异常'
+                        }}</div>
+                      </template>
                     </div>
                   </div>
                   <div v-else>
@@ -243,6 +263,9 @@
               @selectRow="getSelectRow"
               :scroll="{ y: scroll.y - (headElHeight - 56) }"
             >
+              <template #bodyCell="{ column, record }">
+                <!-- <a-tag :color="record.netStatus == '0' ? '#f00' : 'green'">{{ record.netStatus == '1' ? '报警' : '正常' }}</a-tag> -->
+              </template>
               <template #action="{ record }">
                 <a v-if="globalConfig?.showReport" class="table-action-link" @click="deviceEdit($event, 'reportInfo', record)">报表录入</a>
                 <a class="table-action-link" @click="deviceEdit($event, 'deviceInfo', record)">设备编辑</a>

src/views/vent/monitorManager/nitrogen/components/nitrogenHome.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
   <div
-    id="compressorCss3D"
+    id="compressorCss3D1"
     class="threejs-Object-CSS"
     style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
   >
@@ -198,7 +198,7 @@
 <script lang="ts" setup name="nitrogenHome">
   import { onMounted, onUnmounted, ref, watch } from 'vue';
   import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
-  import { mountedThree, destroy } from '../nitrogen.threejs';
+  import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
   import { list } from '../nitrogen.api';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import { monitorDataGroupNum, airCompressorState, showMonitorData, monitorData } from '../nitrogen.data';
@@ -226,7 +226,7 @@
   }
 
   async function getDataSource() {
-    const res = await list({ devicetype: 'pressurefan', pagetype: 'normal' });
+    const res = await list({ devicetype: 'forcFan', pagetype: 'normal' });
     const dataSource = res.msgTxt[0].datalist || [];
     dataSource.forEach((data, index) => {
       const item = data.readData;
@@ -251,18 +251,12 @@
     //   }
     // })
   }
-  function resetDevice(data) {}
 
-  function handlerControlModel(data) {}
-
-  watch(monitorDataGroupNum, (newVal) => {
-    if (newVal) {
-      destroy();
-      mountedThree(newVal);
-    }
-  });
   onMounted(async () => {
-    await getMonitor(true);
+    mountedThree([[1, 2, 3, 4]]).then(async () => {
+      await getMonitor(true);
+      setModelType('compressor0');
+    });
   });
 
   onUnmounted(() => {

src/views/vent/monitorManager/nitrogen/components/nitrogenHome1.vue

@@ -1,58 +1,66 @@
 <template>
   <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
-  <div
-    id="compressorCss3D"
-    class="threejs-Object-CSS compressorCss3D-box"
-    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
-  >
-    <div v-for="(groupNum, index) in monitorDataGroup" :key="index" class="modal-monitor">
-      <fourBorderBg :class="`kyj${index}`" :id="`nitrogenMonitor${groupNum}`">
-        <div class="title">{{ kyjs[index] }} </div>
-        <template v-for="(preMonitor, preMonitorIndex) in preMonitorList" :key="preMonitorIndex">
-          <div v-if="preMonitor.code !== 'signal'" class="monitor-item">
-            <span class="monitor-title">{{ preMonitor.title }}:</span>
-            <span class="monitor-val"
-              ><span class="val">{{
-                monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)]
-                  ? formatNum(monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)])
-                  : '-'
-              }}</span
-              ><span class="unit">{{ preMonitor.unit }}</span></span
-            >
-          </div>
-          <div v-else class="signal-item">
-            <div class="signal" v-for="(signal, childIndex) in preMonitor.child" :key="childIndex">
-              <span class="monitor-title">{{ signal.title }}</span>
-              <span
-                :class="{
-                  'signal-round': true,
-                  'signal-round-run': signal.title != '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
-                  'signal-round-warning': signal.title == '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
-                  'signal-round-gry': monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
-                }"
-              ></span>
+  <template v-for="(sysItem, sysIndex) in monitorDataGroupArr" :key="sysIndex">
+    <div
+      :id="`compressorCss3D${sysIndex + 1}`"
+      class="threejs-Object-CSS compressorCss3D-box"
+      style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
+    >
+    </div>
+  </template>
+  <div v-for="(sysItem, sysIndex) in monitorDataGroupArr" :key="sysIndex">
+    <div v-show="monitorDataGroupFlag == sysIndex + 1">
+      <div v-for="(groupNum, index) in sysItem" :key="index" class="modal-monitor">
+        <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
+          <div class="title">{{ kyjs[index] }} </div>
+          <template v-for="(preMonitor, preMonitorIndex) in preMonitorList" :key="preMonitorIndex">
+            <div v-if="preMonitor.code !== 'signal'" class="monitor-item">
+              <span class="monitor-title">{{ preMonitor.title }}:</span>
+              <span class="monitor-val"
+                ><span class="val">{{
+                  monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)]
+                    ? formatNum(monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)])
+                    : '-'
+                }}</span
+                ><span class="unit">{{ preMonitor.unit }}</span></span
+              >
             </div>
-          </div>
-        </template>
-      </fourBorderBg>
-      <fourBorderBg :class="`cqg${index}`" :id="`cqgMonitor${groupNum}`">
-        <div class="title">{{ cqgs[index] }}</div>
-        <template v-for="(cqgMonitor, cqgMonitorIndex) in cqgMonitorList" :key="cqgMonitorIndex">
-          <div class="monitor-item">
-            <span class="monitor-title">{{ cqgMonitor.title }}:</span>
-            <span class="monitor-val"
-              ><span class="val">{{
-                monitorData[cqgMonitor.code.replace(prefix[0], `${prefix[1]}${groupNum}`)]
-                  ? formatNum(monitorData[cqgMonitor.code.replace(prefix[1], `${prefix[1]}${groupNum}`)])
-                  : '-'
-              }}</span
-              ><span class="unit">{{ cqgMonitor.unit }}</span></span
-            >
-          </div>
-        </template>
-      </fourBorderBg>
+            <div v-else class="signal-item">
+              <div class="signal" v-for="(signal, childIndex) in preMonitor.child" :key="childIndex">
+                <span class="monitor-title">{{ signal.title }}</span>
+                <span
+                  :class="{
+                    'signal-round': true,
+                    'signal-round-run': signal.title != '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
+                    'signal-round-warning':
+                      signal.title == '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
+                    'signal-round-gry': monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
+                  }"
+                ></span>
+              </div>
+            </div>
+          </template>
+        </fourBorderBg>
+        <fourBorderBg :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`">
+          <div class="title">{{ cqgs[index] }}</div>
+          <template v-for="(cqgMonitor, cqgMonitorIndex) in cqgMonitorList" :key="cqgMonitorIndex">
+            <div class="monitor-item">
+              <span class="monitor-title">{{ cqgMonitor.title }}:</span>
+              <span class="monitor-val"
+                ><span class="val">{{
+                  monitorData[cqgMonitor.code.replace(prefix[0], `${prefix[1]}${groupNum}`)]
+                    ? formatNum(monitorData[cqgMonitor.code.replace(prefix[1], `${prefix[1]}${groupNum}`)])
+                    : '-'
+                }}</span
+                ><span class="unit">{{ cqgMonitor.unit }}</span></span
+              >
+            </div>
+          </template>
+        </fourBorderBg>
+      </div>
     </div>
   </div>
+
   <div class="nitrogen-home">
     <div style="position: absolute; color: #fff; top: 30px; pointer-events: auto; display: flex">
       <div
@@ -60,7 +68,7 @@
         :key="sysIndex"
         class="tab-button-box"
         :class="{ 'tab-button-box-active': monitorDataGroupFlag == sysIndex + 1 }"
-        @click="setMonitorGroupNum(monitorDataGroup1, sysIndex + 1)"
+        @click="setMonitorGroupNum(sysIndex + 1)"
         >{{ '压风系统' + (sysIndex + 1) }} (运行: <p style="padding: 0 5px"></p
         ><span
           :class="{
@@ -82,8 +90,10 @@
     </div>
     <div class="total-data">
       <div class="vent-flex-row">
-        <div class="item"
-          >总管压力(bar)：<span class="val">{{ monitorData[`MainPipePressure`] ? formatNum(monitorData[`MainPipePressure`]) : '-' }}</span></div
+        <div class="item" v-for="(data, index) in totalData" :key="index"
+          >{{ data.title + '(' + data.unit + ')' }}：<span class="val">{{
+            monitorData[data.code] ? formatNum(monitorData[data.code]) : '-'
+          }}</span></div
         >
       </div>
     </div>
@@ -129,7 +139,7 @@
   </div>
 </template>
 <script lang="ts" setup name="nitrogenHome">
-  import { onMounted, onUnmounted, ref, watch } from 'vue';
+  import { onMounted, onUnmounted, ref } from 'vue';
   import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
   import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
   import { list } from '../nitrogen.api';
@@ -138,26 +148,35 @@
   // import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataJj';
   // import type { State } from '../nitrogen.dataJj';
   // 布尔台
-  // import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataBet';
-  // import type { State } from '../nitrogen.dataBet';
+  import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState, totalData } from '../nitrogen.dataBet';
+  import type { State } from '../nitrogen.dataBet';
   // 活鸡兔
   // import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataHjt';
   // import type { State } from '../nitrogen.dataHjt';
   // 大柳塔
-  // import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataDlt';
+  // import {
+  //   monitorDataGroupArr,
+  //   preFanMonitorData,
+  //   monitorData,
+  //   preMonitorList,
+  //   cqgMonitorList,
+  //   prefix,
+  //   getSysState,
+  //   totalData,
+  // } from '../nitrogen.dataDlt';
   // import type { State } from '../nitrogen.dataDlt';
   // 窑街三矿
-  // import { monitorDataGroupArr, preFanMonitorData, monitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataYJ';
+  // import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState } from '../nitrogen.dataYJ';
   // import type { State } from '../nitrogen.dataYJ';
 
   import { formatNum } from '/@/utils/ventutil';
 
   const loading = ref(true);
   const monitorDataGroupFlag = ref(0);
-  const monitorDataGroup = ref([]);
-  const kyjs = ref([]);
-  const cqgs = ref([]);
-  const monitorData = ref([]);
+  const monitorDataGroup = ref<Number[]>([]);
+  const kyjs = ref<string[]>([]);
+  const cqgs = ref<string[]>([]);
+  const monitorData = ref<Object | []>({});
   const sysStateList = ref<State[]>([]);
 
   // https获取监测数据
@@ -187,8 +206,12 @@
     sysStateList.value = getSysState(monitorData.value);
   }
 
-  function setMonitorGroupNum(num, flag) {
+  function setMonitorGroupNum(flag) {
     monitorDataGroupFlag.value = flag;
+    const monitorGroup = monitorDataGroupArr[flag - 1];
+    changeGroup(monitorGroup);
+    setModelType('compressor' + (flag - 1));
+    monitorDataGroup.value = monitorGroup;
   }
 
   function changeGroup(val) {
@@ -206,17 +229,11 @@
     });
   }
 
-  watch(monitorDataGroupFlag, (newVal) => {
-    const monitorGroup = monitorDataGroupArr[newVal - 1];
-    changeGroup(monitorGroup);
-    monitorDataGroup.value = monitorGroup;
-    setModelType(monitorGroup);
-  });
-
   onMounted(async () => {
-    mountedThree().then(async () => {
+    mountedThree(monitorDataGroupArr).then(async () => {
       await getMonitor(true);
       monitorDataGroupFlag.value = 1;
+      setMonitorGroupNum(1);
     });
   });
 

src/views/vent/monitorManager/nitrogen/nitrogen.data.ts

@@ -31,10 +31,7 @@ export const bottomBtnList = ref([
     isHover: false,
   },
 ]);
-export const monitorDataGroupNum1 = [1, 2, 3];
-export const monitorDataGroupNum2 = [4, 5];
-export const monitorDataGroupNum3 = [1, 2, 3, 4];
-export const monitorDataGroupNum = ref(3);
+export const monitorDataGroupNum = ref(4);
 export const airCompressorState = ref([
   {
     id: '',

src/views/vent/monitorManager/nitrogen/nitrogen.dataBet.ts

@@ -0,0 +1,133 @@
+import { ref } from 'vue';
+export const monitorDataGroupArr = [
+  [1, 2],
+  [3, 4, 5],
+];
+export const prefix = ['PRE', 'PRE', 'PRE'];
+export const bottomBtnList = ref([
+  {
+    text: '监控界面',
+    value: 'nitrogenMonitor',
+    isHover: false,
+  },
+  {
+    text: '关键节点监测',
+    value: 'nitrogenNode',
+    isHover: false,
+  },
+  {
+    text: '实时曲线',
+    value: 'nitrogenEcharts',
+    isHover: false,
+  },
+  {
+    text: '压风机历史记录',
+    value: 'nitrogenHistory',
+    isHover: false,
+  },
+  {
+    text: '操作历史记录',
+    value: 'nitrogenHandleHistory',
+    isHover: false,
+  },
+  {
+    text: '故障诊断历史记录',
+    value: 'nitrogenWarningHistory',
+    isHover: false,
+  },
+]);
+export const preMonitorList = [
+  {
+    title: `机头温度`,
+    code: `PRE_CPR_HeadTemp`,
+    unit: '℃',
+    child: [],
+  },
+  {
+    title: `冷却温度`,
+    code: `PRE_CPR_CoolantTemp`,
+    unit: '℃',
+    child: [],
+  },
+  {
+    title: `排气温度`,
+    code: `PRE_CPR_ExhaustTemp`,
+    unit: '℃',
+    child: [],
+  },
+  {
+    code: 'signal',
+    child: [
+      {
+        title: `运行信号`,
+        code: `PRE_MOT_Running`,
+      },
+      {
+        title: `故障信号`,
+        code: `PRE_MOT_Fault`,
+      },
+    ],
+  },
+];
+export const cqgMonitorList = [
+  {
+    title: `气囊温度`,
+    code: `PRE_VLS_Temp`,
+    unit: '℃',
+    child: [],
+  },
+];
+
+export const preFanMonitorData = [
+  {
+    title: '排气压力',
+    code: 'PRE_CPR_ExhaustPre',
+    unit: 'bar',
+  },
+  {
+    title: '加载压力',
+    code: 'PRE_CPR_LoadPre',
+    unit: 'bar',
+  },
+  {
+    title: '卸载压力',
+    code: 'PRE_CPR_UnLoadPre',
+    unit: 'bar',
+  },
+  {
+    title: '加载时间',
+    code: 'PRE_CPR_LoadTime',
+    unit: 'h',
+  },
+  {
+    title: '总运行时间',
+    code: 'PRE_MOT_TotalRunTime',
+    unit: 'h',
+  },
+];
+export const totalData = [
+  {
+    title: '总压力',
+    code: 'MainPipePressure',
+    unit: 'bar',
+  },
+];
+export type State = {
+  isRun: boolean;
+  fault: boolean;
+};
+export function getSysState(monitorData) {
+  const stateArr = <State[]>[];
+  monitorDataGroupArr.forEach((group) => {
+    const stateObj = { isRun: false, fault: false };
+    group.forEach((item) => {
+      if (monitorData['PRE_MOT_Running'.replace('PRE', 'PRE' + item)]) {
+        stateObj.isRun = monitorData['PRE_MOT_Running'.replace('PRE', 'PRE' + item)] == '1';
+      }
+      monitorData['PRE_MOT_Fault'.replace('PRE', 'PRE' + item)] === undefined ? '-' : monitorData['PRE_MOT_Fault'.replace('PRE', 'PRE' + item)];
+      stateObj.fault = monitorData['PRE_MOT_Fault'.replace('PRE', 'PRE' + item)] == '1';
+    });
+    stateArr.push(stateObj);
+  });
+  return stateArr;
+}

src/views/vent/monitorManager/nitrogen/nitrogen.dataDlt.ts

@@ -0,0 +1,135 @@
+import { ref } from 'vue';
+export const monitorDataGroupArr = [[1, 2, 3, 4]];
+export const prefix = ['PRE', 'PRE', 'PRE'];
+export const bottomBtnList = ref([
+  {
+    text: '监控界面',
+    value: 'nitrogenMonitor',
+    isHover: false,
+  },
+  {
+    text: '关键节点监测',
+    value: 'nitrogenNode',
+    isHover: false,
+  },
+  {
+    text: '实时曲线',
+    value: 'nitrogenEcharts',
+    isHover: false,
+  },
+  {
+    text: '压风机历史记录',
+    value: 'nitrogenHistory',
+    isHover: false,
+  },
+  {
+    text: '操作历史记录',
+    value: 'nitrogenHandleHistory',
+    isHover: false,
+  },
+  {
+    text: '故障诊断历史记录',
+    value: 'nitrogenWarningHistory',
+    isHover: false,
+  },
+]);
+export const preMonitorList = [
+  {
+    title: `机头温度`,
+    code: `PRE_CPR_HeadTemp`,
+    unit: '℃',
+    child: [],
+  },
+  {
+    title: `冷却温度`,
+    code: `PRE_CPR_ExhaustTemp`,
+    unit: '℃',
+    child: [],
+  },
+  {
+    title: `排气温度`,
+    code: `PRE_CPR_ExhaustTemp`,
+    unit: '℃',
+    child: [],
+  },
+  {
+    code: 'signal',
+    child: [
+      {
+        title: `运行信号`,
+        code: `PRE_Status`,
+      },
+      {
+        title: `故障信号`,
+        code: `PRE_AlamSignal`,
+      },
+    ],
+  },
+];
+export const cqgMonitorList = [
+  {
+    title: `气囊温度`,
+    code: `PRE_VLS_Temp`,
+    unit: '℃',
+    child: [],
+  },
+];
+
+export const preFanMonitorData = [
+  {
+    title: '排气压力',
+    code: 'PRE_CPR_ExhaustPre',
+    unit: 'bar',
+  },
+  {
+    title: '加载压力',
+    code: 'PRE_CPR_LoadPre',
+    unit: 'bar',
+  },
+  {
+    title: '卸载压力',
+    code: 'PRE_CPR_UnLoadPre',
+    unit: 'bar',
+  },
+  {
+    title: '加载时间',
+    code: 'PRE_CPR_LoadTime',
+    unit: 'h',
+  },
+  {
+    title: '总运行时间',
+    code: 'PRE_MOT_TotalRunTime',
+    unit: 'h',
+  },
+];
+export const totalData = [
+  {
+    title: '总流量',
+    code: 'TotalInPipeFlow',
+    unit: 'bar',
+  },
+  {
+    title: '总压力',
+    code: 'TotalOutPipePre1',
+    unit: 'bar',
+  },
+];
+export type State = {
+  isRun: boolean;
+  fault: boolean;
+};
+export function getSysState(monitorData) {
+  const stateArr = <State[]>[];
+  monitorDataGroupArr.forEach((group) => {
+    const stateObj = { isRun: false, fault: false };
+    group.forEach((item) => {
+      if (monitorData['PRE_Status'.replace('PRE', 'PRE' + item)]) {
+        stateObj.isRun = monitorData['PRE_Status'.replace('PRE', 'PRE' + item)] == '1';
+      }
+      monitorData['PRE_AlamSignal'.replace('PRE', 'PRE' + item)] === undefined ? '-' : monitorData['PRE_AlamSignal'.replace('PRE', 'PRE' + item)];
+      stateObj.fault = monitorData['PRE_AlamSignal'.replace('PRE', 'PRE' + item)] == '1';
+    });
+    stateArr.push(stateObj);
+  });
+  return stateArr;
+}

src/views/vent/monitorManager/nitrogen/nitrogen.dataHjt.ts

@@ -0,0 +1,124 @@
+import { ref } from 'vue';
+export const monitorDataGroupArr = [[1, 2, 3]];
+export const prefix = ['PRE', 'PRE', 'PRE'];
+export const bottomBtnList = ref([
+  {
+    text: '监控界面',
+    value: 'nitrogenMonitor',
+    isHover: false,
+  },
+  {
+    text: '关键节点监测',
+    value: 'nitrogenNode',
+    isHover: false,
+  },
+  {
+    text: '实时曲线',
+    value: 'nitrogenEcharts',
+    isHover: false,
+  },
+  {
+    text: '压风机历史记录',
+    value: 'nitrogenHistory',
+    isHover: false,
+  },
+  {
+    text: '操作历史记录',
+    value: 'nitrogenHandleHistory',
+    isHover: false,
+  },
+  {
+    text: '故障诊断历史记录',
+    value: 'nitrogenWarningHistory',
+    isHover: false,
+  },
+]);
+export const preMonitorList = [
+  {
+    title: `机头温度`,
+    code: `PRE_CPR_HeadTemp`,
+    unit: '℃',
+    child: [],
+  },
+  {
+    title: `冷却温度`,
+    code: `PRE_CPR_ExhaustTemp`,
+    unit: '℃',
+    child: [],
+  },
+  {
+    title: `排气温度`,
+    code: `PRE_CPR_ExhaustTemp`,
+    unit: '℃',
+    child: [],
+  },
+  {
+    code: 'signal',
+    child: [
+      {
+        title: `运行信号`,
+        code: `PRE_MOT_Running`,
+      },
+      {
+        title: `故障信号`,
+        code: `PRE_MOT_Fault`,
+      },
+    ],
+  },
+];
+export const cqgMonitorList = [
+  {
+    title: `气囊温度`,
+    code: `PRE_VLS_Temp`,
+    unit: '℃',
+    child: [],
+  },
+];
+
+export const preFanMonitorData = [
+  {
+    title: '排气压力',
+    code: 'PRE_CPR_ExhaustPre',
+    unit: 'bar',
+  },
+  {
+    title: '加载压力',
+    code: 'PRE_CPR_LoadPre',
+    unit: 'bar',
+  },
+  {
+    title: '卸载压力',
+    code: 'PRE_CPR_UnLoadPre',
+    unit: 'bar',
+  },
+  {
+    title: '加载时间',
+    code: 'PRE_CPR_LoadTime',
+    unit: 'h',
+  },
+  {
+    title: '总运行时间',
+    code: 'PRE_MOT_TotalRunTime',
+    unit: 'h',
+  },
+];
+
+export type State = {
+  isRun: boolean;
+  fault: boolean;
+};
+export function getSysState(monitorData) {
+  const stateArr = <State[]>[];
+  monitorDataGroupArr.forEach((group) => {
+    const stateObj = { isRun: false, fault: false };
+    group.forEach((item) => {
+      if (monitorData['PRE_MOT_Running'.replace('PRE', 'PRE' + item)]) {
+        stateObj.isRun = monitorData['PRE_MOT_Running'.replace('PRE', 'PRE' + item)] == '1';
+      }
+      monitorData['PRE_MOT_Fault'.replace('PRE', 'PRE' + item)] === undefined ? '-' : monitorData['PRE_MOT_Fault'.replace('PRE', 'PRE' + item)];
+      stateObj.fault = monitorData['PRE_MOT_Fault'.replace('PRE', 'PRE' + item)] == '1';
+    });
+    stateArr.push(stateObj);
+  });
+  return stateArr;
+}

src/views/vent/monitorManager/nitrogen/nitrogen.dataJj.ts

@@ -0,0 +1,124 @@
+import { ref } from 'vue';
+export const monitorDataGroupArr = [[1, 2, 3, 4]];
+export const prefix = ['PRE', 'PRE', 'PRE'];
+export const bottomBtnList = ref([
+  {
+    text: '监控界面',
+    value: 'nitrogenMonitor',
+    isHover: false,
+  },
+  {
+    text: '关键节点监测',
+    value: 'nitrogenNode',
+    isHover: false,
+  },
+  {
+    text: '实时曲线',
+    value: 'nitrogenEcharts',
+    isHover: false,
+  },
+  {
+    text: '压风机历史记录',
+    value: 'nitrogenHistory',
+    isHover: false,
+  },
+  {
+    text: '操作历史记录',
+    value: 'nitrogenHandleHistory',
+    isHover: false,
+  },
+  {
+    text: '故障诊断历史记录',
+    value: 'nitrogenWarningHistory',
+    isHover: false,
+  },
+]);
+export const preMonitorList = [
+  {
+    title: `机头温度`,
+    code: `PRE_CPR_HeadTemp`,
+    unit: '℃',
+    child: [],
+  },
+  {
+    title: `冷却温度`,
+    code: `PRE_CPR_CoolantTemp`,
+    unit: '℃',
+    child: [],
+  },
+  {
+    title: `排气温度`,
+    code: `PRE_CPR_ExhaustTemp`,
+    unit: '℃',
+    child: [],
+  },
+  {
+    code: 'signal',
+    child: [
+      {
+        title: `运行信号`,
+        code: `PRE_MOT_Running`,
+      },
+      {
+        title: `故障信号`,
+        code: `PRE_MOT_Fault`,
+      },
+    ],
+  },
+];
+export const cqgMonitorList = [
+  {
+    title: `气囊温度`,
+    code: `PRE_VLS_Temp`,
+    unit: '℃',
+    child: [],
+  },
+];
+
+export const preFanMonitorData = [
+  {
+    title: '排气压力',
+    code: 'PRE_CPR_ExhaustPre',
+    unit: 'bar',
+  },
+  {
+    title: '加载压力',
+    code: 'PRE_CPR_LoadPre',
+    unit: 'bar',
+  },
+  {
+    title: '卸载压力',
+    code: 'PRE_CPR_UnLoadPre',
+    unit: 'bar',
+  },
+  {
+    title: '加载时间',
+    code: 'PRE_CPR_LoadTime',
+    unit: 'h',
+  },
+  {
+    title: '总运行时间',
+    code: 'PRE_MOT_TotalRunTime',
+    unit: 'h',
+  },
+];
+
+export type State = {
+  isRun: boolean;
+  fault: boolean;
+};
+export function getSysState(monitorData) {
+  const stateArr = <State[]>[];
+  monitorDataGroupArr.forEach((group) => {
+    const stateObj = { isRun: false, fault: false };
+    group.forEach((item) => {
+      if (monitorData['PRE_MOT_Running'.replace('PRE', 'PRE' + item)]) {
+        stateObj.isRun = monitorData['PRE_MOT_Running'.replace('PRE', 'PRE' + item)] == '1';
+      }
+      monitorData['PRE_MOT_Fault'.replace('PRE', 'PRE' + item)] === undefined ? '-' : monitorData['PRE_MOT_Fault'.replace('PRE', 'PRE' + item)];
+      stateObj.fault = monitorData['PRE_MOT_Fault'.replace('PRE', 'PRE' + item)] == '1';
+    });
+    stateArr.push(stateObj);
+  });
+  return stateArr;
+}

src/views/vent/monitorManager/nitrogen/nitrogen.dataYJ.ts

@@ -0,0 +1,201 @@
+import { ref } from 'vue';
+export const monitorDataGroupArr = [
+  [1, 2],
+  [3, 4],
+  [5, 6],
+];
+export const prefix = ['Compressor', 'Compressor', 'PreFan'];
+
+export const bottomBtnList = ref([
+  {
+    text: '监控界面',
+    value: 'nitrogenMonitor',
+    isHover: false,
+  },
+  {
+    text: '关键节点监测',
+    value: 'nitrogenNode',
+    isHover: false,
+  },
+  {
+    text: '实时曲线',
+    value: 'nitrogenEcharts',
+    isHover: false,
+  },
+  {
+    text: '压风机历史记录',
+    value: 'nitrogenHistory',
+    isHover: false,
+  },
+  {
+    text: '操作历史记录',
+    value: 'nitrogenHandleHistory',
+    isHover: false,
+  },
+  {
+    text: '故障诊断历史记录',
+    value: 'nitrogenWarningHistory',
+    isHover: false,
+  },
+]);
+export const preMonitorList = [
+  {
+    title: `供气压力`,
+    code: `CompressorGasSupplyPressure`,
+    unit: 'MPa',
+    child: [],
+  },
+  {
+    title: `排气温度`,
+    code: `CompressorExhaustTemp`,
+    unit: '℃',
+    child: [],
+  },
+  {
+    title: `电机电流`,
+    code: `CompressorCurrentA`,
+    unit: 'A',
+    child: [],
+  },
+  {
+    title: `加载时间`,
+    code: `CompressorLoadTime`,
+    unit: 'h',
+    child: [],
+  },
+  {
+    title: `运行时间`,
+    code: `CompressorRunTime`,
+    unit: 'h',
+    child: [],
+  },
+  {
+    code: 'signal',
+    child: [
+      {
+        title: `运行信号`,
+        code: `CompressorWorking`,
+      },
+      {
+        title: `故障信号`,
+        code: `CompressorFault`,
+      },
+    ],
+  },
+  {
+    code: 'signal',
+    child: [
+      {
+        title: `闸阀关到位`,
+        code: `CompressorGateValveOpen`,
+      },
+      {
+        title: `闸阀关到位`,
+        code: `CompressorGateValveShut`,
+      },
+    ],
+  },
+];
+export const cqgMonitorList = [
+  {
+    title: `风包压力`,
+    code: `CompressorWindBagPressure`,
+    unit: '℃',
+    child: [],
+  },
+  {
+    title: `风包温度`,
+    code: `CompressorWindBagTemp`,
+    unit: 'MPa',
+    child: [],
+  },
+];
+export const preFanMonitorData = [
+  {
+    title: '前轴温度',
+    code: 'PreFanFrontTemp',
+    unit: '℃',
+  },
+  {
+    title: '后轴温度',
+    code: 'PreFanBehindTemp',
+    unit: '℃',
+  },
+  {
+    title: '垂直振动值',
+    code: 'PreFanVerticalVibration',
+    unit: 'mm',
+  },
+  {
+    title: '水平振动值',
+    code: 'PreFanLevelVibration',
+    unit: 'mm',
+  },
+  {
+    title: '外壳温度',
+    code: 'PreFanShellTemp',
+    unit: '℃',
+  },
+  {
+    title: '系统故障',
+    code: 'PreFanSystemFault',
+    unit: 'signal',
+  },
+  {
+    title: '启动故障',
+    code: 'PreFanStartFault',
+    unit: 'signal',
+  },
+  {
+    title: '阀门故障',
+    code: 'PreFanValveFault',
+    unit: 'signal',
+  },
+];
+
+export const totalData = [
+  {
+    title: '总压力',
+    code: 'MainPipePressure',
+    unit: 'bar',
+  },
+];
+
+export type State = {
+  isRun: boolean;
+  fault: boolean;
+};
+export function getSysState(monitorData) {
+  const stateArr = <State[]>[];
+  monitorDataGroupArr.forEach((group) => {
+    const stateObj = { isRun: false, fault: false };
+    group.forEach((item) => {
+      if (monitorData['CompressorWorking'.replace('Compressor', 'Compressor' + item)]) {
+        stateObj.isRun = monitorData['CompressorWorking'.replace('Compressor', 'Compressor' + item)] == '1';
+      }
+      monitorData['CompressorFault'.replace('Compressor', 'Compressor' + item)] === undefined
+        ? '-'
+        : monitorData['CompressorFault'.replace('Compressor', 'Compressor' + item)];
+
+      monitorData['PreFanSystemFault'.replace('PreFan', 'PreFan' + item)] === undefined
+        ? '-'
+        : monitorData['PreFanSystemFault'.replace('PreFan', 'PreFan' + item)];
+
+      monitorData['PreFanStartFault'.replace('PreFan', 'PreFan' + item)] === undefined
+        ? '-'
+        : monitorData['PreFanStartFault'.replace('PreFan', 'PreFan' + item)];
+
+      monitorData['PreFanValveFault'.replace('PreFan', 'PreFan' + item)] === undefined
+        ? '-'
+        : monitorData['PreFanValveFault'.replace('PreFan', 'PreFan' + item)];
+
+      stateObj.fault =
+        monitorData['CompressorFault'.replace('Compressor', 'Compressor' + item)] == '1' ||
+        monitorData['PreFanSystemFault'.replace('PreFan', 'PreFan' + item)] == '1' ||
+        monitorData['PreFanStartFault'.replace('PreFan', 'PreFan' + item)] == '1' ||
+        monitorData['PreFanValveFault'.replace('PreFan', 'PreFan' + item)] == '1';
+    });
+    stateArr.push(stateObj);
+  });
+  return stateArr;
+}

src/views/vent/monitorManager/nitrogen/nitrogen.dishang.threejs.ts

@@ -133,7 +133,6 @@ class Nitrogen {
 
   addCssText = (monitorDataGroup) => {
     if (this.nitrogenNum > 0 && this.group) {
-      this.clearCssText();
       for (let i = 0; i < monitorDataGroup.length; i++) {
         const n = monitorDataGroup[i];
         const compressorModal = this.group.getObjectByName('compressorModal' + i) as THREE.Object3D;
@@ -177,14 +176,10 @@ class Nitrogen {
   };
 
   clearCssText = () => {
-    // const n = 5;
-    // const compressorGroup = this.cssGroupParent.getObjectByName('compressorGroup' + n);
-    // if (compressorGroup) {
-    //   compressorGroup.visible = false;
-    //   compressorGroup.children.forEach((item) => {
-    //     item.visible = false;
-    //   });
-    // }
+    for (let i = 0; i < this.cssGroupParent.children.length; i++) {
+      const item = this.cssGroupParent.children[i];
+      this.cssGroupParent.remove(item);
+    }
   };
 
   /**
@@ -250,29 +245,24 @@ class Nitrogen {
       this.group.name = this.modelName;
       setModalCenter(this.group);
       this.setModalPosition();
-      debugger;
     }
   }
 
-  mountedThree(dom) {
+  mountedThree(monitorDataGroup, dom) {
     return new Promise((resolve) => {
       this.CSSCanvasContainer = document.querySelector(dom);
       if (this.CSSCanvasContainer) {
         this.css3dRender = new CSS3DRenderer() as CSS3DRenderer;
         this.css3dRender.setSize(this.model.canvasContainer.clientWidth, this.model.canvasContainer.clientHeight);
         this.CSSCanvasContainer?.appendChild(this.css3dRender.domElement);
-        // this.css3dRender.render(this.model.scene as THREE.Scene, this.model.camera as THREE.PerspectiveCamera);
       }
-      this.model.renderAnimationScene = () => {
-        this.css3dRender?.render(this.model?.scene as THREE.Scene, this.model?.camera as THREE.PerspectiveCamera);
-      };
       this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
         this.singGltf = gltf[0];
-        // this.setModal(monitorDataGroup.length);
-        // this.addCssText(monitorDataGroup);
         resolve(null);
+        this.setModal(monitorDataGroup.length);
+        this.addCssText(monitorDataGroup);
         // this.addLight();
-        this.model.scene.add(this.cssGroupParent);
+        this.group.add(this.cssGroupParent);
       });
     });
   }

src/views/vent/monitorManager/nitrogen/nitrogen.threejs.ts

@@ -12,8 +12,9 @@ import { modal } from 'vxe-table';
 // 模型对象、 文字对象
 let model: UseThree | undefined,
   group: THREE.Object3D | undefined,
-  compressorObj: Nitrogen | undefined,
-  modalType = 'compressor';
+  // compressorObj: Nitrogen | undefined,
+  modalType = 'compressor1';
+const compressorObjArr = <Nitrogen[] | undefined[]>[];
 
 const { mouseDownFn, mousemoveFn, mouseUpFn } = useEvent();
 
@@ -23,9 +24,11 @@ const mouseEvent = (event) => {
   if (event.button == 0 && model && group) {
     model.canvasContainer?.addEventListener('mousemove', mousemove);
     mouseDownFn(model, group, event, (intersects) => {
-      if (modalType === 'compressor') {
-        compressorObj?.mousedownModel.call(compressorObj, intersects);
-      }
+      compressorObjArr.forEach((compressorObj, index) => {
+        if (modalType === 'compressor' + index) {
+          compressorObj?.mousedownModel.call(compressorObj, intersects);
+        }
+      });
       console.log('摄像头控制信息', model?.orbitControls, model?.camera);
     });
   }
@@ -54,39 +57,32 @@ const render = () => {
 /* 添加监控数据 */
 export const addText = () => {
   if (!compressorObj) return;
-  // if (modalType === 'compressor1' && compressorObj1) {
-  //   return compressorObj1.addCssText;
-  // } else if (modalType === 'compressor2' && compressorObj2) {
-  //   return compressorObj2.addCssText;
-  // }
-};
-
-export const play = () => {
-  if (modalType === 'compressor' && compressorObj) {
-    return compressorObj.play.call(compressorObj);
-  }
 };
 
 // 切换风窗类型
-export const setModelType = (monitorDataGroup: number[]) => {
+export const setModelType = (modalTypeName) => {
+  modalType = modalTypeName;
   if (group) {
-    // compressorObj?.clearCssText();
     model?.scene?.remove(group);
     // model?.initCSS3Renderer('#compressorCss3D');
   }
 
-  return new Promise((resolve) => {
-    // 显示双道风窗
-
-    if (modalType === 'compressor' && compressorObj && model) {
-      if (monitorDataGroup.length) {
-        model?.scene?.remove(compressorObj.group);
-        model.clearGroup(compressorObj.group);
-        compressorObj.group = undefined;
-        compressorObj.setModal(monitorDataGroup.length);
-        group = compressorObj.group;
-      }
+  let compressorObj;
+  compressorObjArr.forEach((compressor, index) => {
+    if (modalTypeName === 'compressor' + index) {
+      compressorObj = compressor;
+      if (!compressor.CSSCanvasContainer?.contains(compressor.css3dRender.domElement))
+        compressor.CSSCanvasContainer?.appendChild(compressor.css3dRender.domElement);
+    } else {
+      if (compressor.CSSCanvasContainer?.contains(compressor.css3dRender.domElement))
+        compressor.CSSCanvasContainer?.removeChild(compressor.css3dRender.domElement);
     }
+  });
+  model.renderAnimationScene = () => {
+    compressorObj?.css3dRender?.render(model?.scene as THREE.Scene, model?.camera as THREE.PerspectiveCamera);
+  };
+  return new Promise((resolve) => {
+    group = compressorObj.group;
     model?.camera?.position.set(-1000, 100, 500);
     const oldCameraPosition = { x: -1000, y: 100, z: 500 };
     const oldControlsPosition = { x: 0, y: 0, z: 0 };
@@ -116,18 +112,11 @@ export const setModelType = (monitorDataGroup: number[]) => {
       resolve(null);
       if (group) model?.scene?.add(group);
       await animateCamera(oldCameraPosition, oldControlsPosition, newCameraPosition, newControlsPosition, model, 0.8);
-      compressorObj?.addCssText(monitorDataGroup);
     }, 300);
   });
 };
 
-export const clearCssText = () => {
-  if (modalType === 'compressor' && compressorObj) {
-    return compressorObj.clearCssText.call(compressorObj);
-  }
-};
-
-export const mountedThree = () => {
+export const mountedThree = (monitorDataGroupArr) => {
   return new Promise(async (resolve) => {
     model = new UseThree('#compressor3D');
     model.setEnvMap('test1');
@@ -135,16 +124,18 @@ export const mountedThree = () => {
     model.camera?.layers.enable(0);
     model.canvasContainer?.addEventListener('mousedown', mouseEvent);
     model.canvasContainer?.addEventListener('pointerup', mouseUp);
+    monitorDataGroupArr.forEach(async (monitorDataGroup, i) => {
+      const compressorObj = new Nitrogen(model);
+      await compressorObj.mountedThree(monitorDataGroup, '#compressorCss3D' + (i + 1));
+      compressorObj.modelName = 'compressor' + (i + 1);
+      compressorObjArr.push(compressorObj);
+      if (i == monitorDataGroupArr.length - 1) {
+        resolve(null);
+      }
+    });
 
-    compressorObj = new Nitrogen(model);
-    await compressorObj.mountedThree('#compressorCss3D');
-    compressorObj.modelName = 'compressor';
-
-    model.renderAnimationScene = () => {
-      compressorObj?.css3dRender?.render(model?.scene as THREE.Scene, model?.camera as THREE.PerspectiveCamera);
-    };
     // render();
-    resolve(null);
+
     model.animate();
   });
 };
@@ -153,7 +144,10 @@ export const destroy = () => {
   if (model) {
     model.isRender = false;
     console.log('场景销毁前信息----------->', model.renderer?.info);
-    compressorObj?.destroy();
+    compressorObjArr.forEach((compressorObj) => {
+      compressorObj?.destroy();
+    });
+    compressorObjArr.length = 0;
     group = undefined;
     model.destroy();
     model = undefined;

src/views/vent/monitorManager/obfurageMonitor/obfurage.data.ts

@@ -6,7 +6,7 @@ export const warningConfig = reactive({
   data: [
     ['火焰6', '严重报警', '03-05'],
     ['测点43', '一般预警', '03-05'],
-    ['CO23', '一版预警', '03-05'],
+    ['CO23', '一般预警', '03-05'],
     ['测点6', '超高预警', '03-05'],
     ['测点65', '超高预警', '03-05'],
     ['温度4', '一般预警', '03-05'],

src/views/vent/monitorManager/tunFaceMonitor/components/tunFaceHome.vue

@@ -83,7 +83,8 @@
                 </div>
               </div>
             </div>
-            <dv-scroll-board ref="scrollBoard" :config="warningConfig" style="width: 100%; height: 240px; overflow-y: auto; " />
+            <div class="" style="height: 200px; display: flex; align-items: center; justify-content: center;">暂无数据</div>
+            <!-- <dv-scroll-board ref="scrollBoard" :config="warningConfig" style="width: 100%; height: 240px; overflow-y: auto; " /> -->
           </template>
         </ventBox1>
       </div>
@@ -259,7 +260,7 @@ async function getDataSource(systemID) {
     }
     loading.value = false;
   }
-  workFaceHistorySource.value = res['sysInfo']['history']
+  workFaceHistorySource.value = res['surface_history'][0]
   workFaceSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
   warnInfo.dustS = { warningList: res['warnInfo']['dustS']['devices'] || [], dataList: initWarningData(res['warnInfo']['dustS']['devices']) }
   warnInfo.fireS = { warningList: res['warnInfo']['fireS']['devices'] || [], dataList: initWarningData(res['warnInfo']['fireS']['devices']) }

src/views/vent/monitorManager/tunFaceMonitor/tunFace.data.ts

@@ -191,7 +191,7 @@ export const warningConfig = reactive({
   data: [
     ['火焰6', '严重报警', '03-05'],
     ['测点43', '一般预警', '03-05'],
-    ['CO23', '一版预警', '03-05'],
+    ['CO23', '一般预警', '03-05'],
     ['测点6', '超高预警', '03-05'],
     ['测点65', '超高预警', '03-05'],
     ['温度4', '一般预警', '03-05'],

src/views/vent/monitorManager/windowMonitor/dandaoFc.threejs.ts

@@ -108,7 +108,7 @@ class singleWindow {
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 440,
+        x: 470,
         y: 145,
       },
       {

src/views/vent/monitorManager/windrectMonitor/duisheFixed.threejs.ts

@@ -270,13 +270,12 @@ class fixedWindRect {
 
   mountedThree(playerDom) {
     return new Promise((resolve) => {
-      this.model.setGLTFModel([this.modelName]).then((gltf) => {
-        this.group = gltf[0];
+      this.model.setGLTFModel([this.modelName], this.group).then(() => {
         this.setModalPosition();
         this.addLight();
-        resolve(null);
         this.initAnimation();
         this.initCamera(playerDom);
+        resolve(null);
       });
     });
   }

src/views/vent/monitorManager/windrectMonitor/windrect.threejs.ts

@@ -360,15 +360,6 @@ export const mountedThree = (playerDom) => {
     model.setEnvMap('test1');
     model.renderer.toneMappingExposure = 1.0;
     resolve(null);
-    lmWindRectObj = new lmWindRect(model);
-    lmWindRectObj.mountedThree();
-
-    zdWindRectObj = new zdWindRect(model);
-    zdWindRectObj.mountedThree();
-
-    lmWindRectSideObj = new lmWindRectSide(model);
-    lmWindRectSideObj.mountedThree();
-
     ddWindRectObj = new ddWindRect(model);
     ddWindRectObj.mountedThree();
 
@@ -378,6 +369,15 @@ export const mountedThree = (playerDom) => {
     dsWindRectObj = new dsWindRect(model);
     dsWindRectObj.mountedThree();
 
+    zdWindRectObj = new zdWindRect(model);
+    zdWindRectObj.mountedThree();
+
+    lmWindRectSideObj = new lmWindRectSide(model);
+    lmWindRectSideObj.mountedThree();
+
+    lmWindRectObj = new lmWindRect(model);
+    lmWindRectObj.mountedThree();
+
     model.animate();
     startAnimation();
   });

src/views/vent/monitorManager/workFaceMonitor/components/workFaceHome.vue

@@ -267,7 +267,7 @@ async function getDataSource(systemID) {
   }
 
   junyaInfo.value = res['junyaInfo']
-  workFaceHistorySource.value = res['sysInfo']['history']
+  workFaceHistorySource.value = res['surface_history'][0]
   workFaceSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
   
   if(res['warnInfo']['dustS']) warnInfo.dustS = { warningList: res['warnInfo']['dustS']['devices'] || [], dataList: initWarningData(res['warnInfo']['dustS']['devices']) }

src/views/vent/monitorManager/workFaceMonitor/workFace.data.ts

@@ -153,7 +153,7 @@ export const warningConfig = reactive({
   data: [
     ['火焰6', '严重报警', '03-05'],
     ['测点43', '一般预警', '03-05'],
-    ['CO23', '一版预警', '03-05'],
+    ['CO23', '一般预警', '03-05'],
     ['测点6', '超高预警', '03-05'],
     ['测点65', '超高预警', '03-05'],
     ['温度4', '一般预警', '03-05'],

src/views/vent/performance/comment/DeviceModal.vue

@@ -53,8 +53,8 @@
         height: '100%',
         document: {
           title: '文档管理',
-          // url: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
-          url: `${window.location.origin}:9050/ventanaly-sharefile/fileServer/onlyOffice/read?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
+          url: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
+          // url: `${window.location.origin}:9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
           fileType: props.fileType == 'doc' ? 'docx' : props.fileType == 'xls' ? 'xlsx' : props.fileType == 'ppt' ? 'pptx' : props.fileType, //当文件类型为doc、xls、ppt时，对应用docx、xlsx、pptx否则会保存异常。
           key: '',
           lang: 'zh-CN',
@@ -68,8 +68,8 @@
         editorConfig: {
           lang: 'zh-CN',
           mode: 'edit', //view：只读且可复制内容，edit：可编辑
-          // callbackUrl: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/save?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
-          callbackUrl: `${window.location.origin}:9050/ventanaly-sharefile/fileServer/onlyOffice/save?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
+          callbackUrl: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/save?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
+          // callbackUrl: `${window.location.origin}:9999/ventanaly-sharefile/fileServer/onlyOffice/save?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
           coEditing: {
             mode: 'fast',
             change: true,

src/views/vent/reportManager/comment/DeviceModal.vue

@@ -1,7 +1,17 @@
 <template>
-  <BasicModal :defaultFullscreen="defaultScreen" v-bind="$attrs" @register="registerModal" :title="title" :width="widthV"
-    :showCancelBtn="false" :showOkBtn="false" :footer="null" destroyOnClose :mask-closable="false" @cancel="closeModalFn">
-
+  <BasicModal
+    :defaultFullscreen="defaultScreen"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    :width="widthV"
+    :showCancelBtn="false"
+    :showOkBtn="false"
+    :footer="null"
+    destroyOnClose
+    :mask-closable="false"
+    @cancel="closeModalFn"
+  >
     <!-- 报表新增 -->
     <div v-if="addOredit == 'add'">
       <a-form :model="formState" :label-col="{ style: { width: '130px' } }" :wrapper-col="{ span: 14 }">
@@ -12,7 +22,7 @@
           <JDictSelectTag v-model:value="formState.reportVersion" placeholder="请选择报表版本..." dictCode="reportVersion" />
         </a-form-item>
         <div class="footer">
-          <a-button type="primary" style="margin-right: 20px;" @click="save">保存</a-button>
+          <a-button type="primary" style="margin-right: 20px" @click="save">保存</a-button>
           <a-button type="primar" @click="closeModalFn">取消</a-button>
         </div>
       </a-form>
@@ -21,145 +31,138 @@
     <div v-else>
       <div id="fileEdit"></div>
     </div>
-
   </BasicModal>
 </template>
 <script lang="ts" setup>
-import { computed, unref, inject, reactive, ref, watch, defineProps } from 'vue';
-import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import { useUserStore } from '/@/store/modules/user';
+  import { computed, unref, inject, reactive, ref, watch, defineProps } from 'vue';
+  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useUserStore } from '/@/store/modules/user';
 
-let props = defineProps({
-  addOredit: {
-    type: String,
-    default: ''
-  },
-  editID: {
+  let props = defineProps({
+    addOredit: {
       type: String,
       default: '',
     },
-})
-
-const userStore = useUserStore(); //获取用户信息
-let userId = unref(userStore.getUserInfo).id;
-let userName = unref(userStore.getUserInfo).username;
-console.log(userId, '用户id');
-console.log(userName, '用户名');
-
-let formState = reactive({
-  reportType: '',
-  reportVersion: ''
-})
-
-//设置标题
-let title = computed(() => {
-  if (props.addOredit == 'add') {
-    return '报表新增'
-  } else {
-    return '报表编辑'
-  }
-})
-//弹窗宽度
-let widthV = computed(() => {
-  if (props.addOredit == 'add') {
-    return '600px'
-  } else {
-    return '1000px'
-  }
-})
-
-//弹窗是否全屏
-let defaultScreen = computed(() => {
-  if (props.addOredit == 'add') {
-    return false
-  } else {
-    return true
-  }
-})
-// 声明Emits
-const emit = defineEmits(['saveOrUpdate', 'register',]);
-
-//表单赋值
-const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-  //重置表单
-  setModalProps({ confirmLoading: false });
-  // Object.assign(deviceData, data.record);
-  new DocsAPI.DocEditor(
-    'fileEdit', // 元素id
-    {
-      type: 'desktop',
-      width: '100%',
-      height: '100%',
-      document: {
-        title: '文档管理',
-        // url: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
-        url: `${window.location.origin}:9999/ventanaly-device/safety/reportInfo/onlyOffice/read?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
-        fileType: props.fileType == 'doc' ? 'docx' : props.fileType == 'xls' ? 'xlsx' : props.fileType == 'ppt' ? 'pptx' : props.fileType, //当文件类型为doc、xls、ppt时，对应用docx、xlsx、pptx否则会保存异常。
-        key: '',
-        lang: 'zh-CN',
-        permissions: {
-          download: true, //是否可下载
-          edit: true,
-          fillForms: true,
-          print: true, //是否可打印
-        },
-      },
-      editorConfig: {
-        lang: 'zh-CN',
-        mode: 'edit', //view：只读且可复制内容，edit：可编辑
-        // callbackUrl: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/save?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
-        callbackUrl: `${window.location.origin}:9999/ventanaly-device/safety/reportInfo/onlyOffice/save?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
-        coEditing: {
-          mode: 'fast',
-          change: true,
-        },
-        customization: {
-          toolbarNoTabs: true,
-          autosave: false, //是否自动保存
-          forcesave: true, //定义保存按钮是否显示
-          hideRightMenu: true,
+    editID: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const userStore = useUserStore(); //获取用户信息
+  let userId = unref(userStore.getUserInfo).id;
+  let userName = unref(userStore.getUserInfo).username;
+  console.log(userId, '用户id');
+  console.log(userName, '用户名');
+
+  let formState = reactive({
+    reportType: '',
+    reportVersion: '',
+  });
+
+  //设置标题
+  let title = computed(() => {
+    if (props.addOredit == 'add') {
+      return '报表新增';
+    } else {
+      return '报表编辑';
+    }
+  });
+  //弹窗宽度
+  let widthV = computed(() => {
+    if (props.addOredit == 'add') {
+      return '600px';
+    } else {
+      return '1000px';
+    }
+  });
+
+  //弹窗是否全屏
+  let defaultScreen = computed(() => {
+    if (props.addOredit == 'add') {
+      return false;
+    } else {
+      return true;
+    }
+  });
+  // 声明Emits
+  const emit = defineEmits(['saveOrUpdate', 'register']);
+
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    setModalProps({ confirmLoading: false });
+    // Object.assign(deviceData, data.record);
+    new DocsAPI.DocEditor(
+      'fileEdit', // 元素id
+      {
+        type: 'desktop',
+        width: '100%',
+        height: '100%',
+        document: {
+          title: '文档管理',
+          url: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
+          // url: `${window.location.origin}:9999/ventanaly-device/safety/reportInfo/onlyOffice/read?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
+          fileType: props.fileType == 'doc' ? 'docx' : props.fileType == 'xls' ? 'xlsx' : props.fileType == 'ppt' ? 'pptx' : props.fileType, //当文件类型为doc、xls、ppt时，对应用docx、xlsx、pptx否则会保存异常。
+          key: '',
+          lang: 'zh-CN',
+          permissions: {
+            download: true, //是否可下载
+            edit: true,
+            fillForms: true,
+            print: true, //是否可打印
+          },
         },
-        //用户信息
-        user: {
-          id: userId, //用户ID
-          name: userName, //用户名称
+        editorConfig: {
+          lang: 'zh-CN',
+          mode: 'edit', //view：只读且可复制内容，edit：可编辑
+          callbackUrl: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/save?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
+          // callbackUrl: `${window.location.origin}:9999/ventanaly-device/safety/reportInfo/onlyOffice/save?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
+          coEditing: {
+            mode: 'fast',
+            change: true,
+          },
+          customization: {
+            toolbarNoTabs: true,
+            autosave: false, //是否自动保存
+            forcesave: true, //定义保存按钮是否显示
+            hideRightMenu: true,
+          },
+          //用户信息
+          user: {
+            id: userId, //用户ID
+            name: userName, //用户名称
+          },
         },
-      },
-    }
-  );
-
-});
-
-//点击图标关闭弹框
-const closeModalFn = () => {
-  formState.reportType = ''
-  formState.reportVersion = ''
-  closeModal()
-  // emit('closeModal')
-}
-
-//新增保存
-let save = () => {
-  emit('saveOrUpdate', formState)
-}
-
-
-
-
-
+      }
+    );
+  });
+
+  //点击图标关闭弹框
+  const closeModalFn = () => {
+    formState.reportType = '';
+    formState.reportVersion = '';
+    closeModal();
+    // emit('closeModal')
+  };
+
+  //新增保存
+  let save = () => {
+    emit('saveOrUpdate', formState);
+  };
 </script>
 <style scoped lang="less">
-::v-deep .suffix {
-  height: 32px;
-  line-height: 32px;
-  margin-left: 5px;
-  color: #fff;
-}
+  ::v-deep .suffix {
+    height: 32px;
+    line-height: 32px;
+    margin-left: 5px;
+    color: #fff;
+  }
 
-.footer {
-  width: 100%;
-  text-align: center;
-  padding-top: 30px;
-}
+  .footer {
+    width: 100%;
+    text-align: center;
+    padding-top: 30px;
+  }
 </style>