39 changed files with 9796 additions and 5912 deletions
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 232 KiB |
|
After Width: | Height: | Size: 92 KiB |
@ -0,0 +1,978 @@
|
||||
{ |
||||
"type": "FeatureCollection", |
||||
"features": [ |
||||
{ |
||||
"type": "Feature", |
||||
"properties": { |
||||
"adcode": 210727, |
||||
"name": "义县", |
||||
"center": [121.242831, 41.537224], |
||||
"centroid": [121.297017, 41.530803], |
||||
"childrenNum": 0, |
||||
"level": "district", |
||||
"acroutes": [100000, 210000, 210700], |
||||
"parent": { "adcode": 210700 } |
||||
}, |
||||
"geometry": { |
||||
"type": "MultiPolygon", |
||||
"coordinates": [ |
||||
[ |
||||
[ |
||||
[121.538284, 41.773681], |
||||
[121.536274, 41.772305], |
||||
[121.532812, 41.771276], |
||||
[121.528793, 41.770887], |
||||
[121.526174, 41.770456], |
||||
[121.522964, 41.76897], |
||||
[121.521755, 41.767677], |
||||
[121.521172, 41.765984], |
||||
[121.521059, 41.764182], |
||||
[121.519928, 41.763065], |
||||
[121.516466, 41.762987], |
||||
[121.513595, 41.76425], |
||||
[121.512403, 41.762593], |
||||
[121.512638, 41.754162], |
||||
[121.512455, 41.753726], |
||||
[121.512647, 41.749908], |
||||
[121.512368, 41.748568], |
||||
[121.510159, 41.746973], |
||||
[121.506905, 41.744152], |
||||
[121.506618, 41.743217], |
||||
[121.506818, 41.741185], |
||||
[121.510559, 41.739824], |
||||
[121.511351, 41.738904], |
||||
[121.510829, 41.734654], |
||||
[121.515335, 41.730393], |
||||
[121.515526, 41.728766], |
||||
[121.515091, 41.727483], |
||||
[121.515213, 41.725856], |
||||
[121.515866, 41.724292], |
||||
[121.515892, 41.722899], |
||||
[121.5151, 41.720389], |
||||
[121.513134, 41.718684], |
||||
[121.510985, 41.717847], |
||||
[121.50875, 41.717764], |
||||
[121.506305, 41.717281], |
||||
[121.502321, 41.717749], |
||||
[121.497928, 41.719344], |
||||
[121.495492, 41.720961], |
||||
[121.493291, 41.721673], |
||||
[121.491447, 41.721491], |
||||
[121.490368, 41.720909], |
||||
[121.486592, 41.719557], |
||||
[121.485409, 41.718887], |
||||
[121.482425, 41.715659], |
||||
[121.478459, 41.712993], |
||||
[121.477615, 41.711917], |
||||
[121.477475, 41.708554], |
||||
[121.475266, 41.705169], |
||||
[121.474265, 41.701473], |
||||
[121.474405, 41.70008], |
||||
[121.475797, 41.698323], |
||||
[121.475927, 41.696295], |
||||
[121.475353, 41.69498], |
||||
[121.472839, 41.693482], |
||||
[121.470768, 41.693997], |
||||
[121.467758, 41.692983], |
||||
[121.465871, 41.693519], |
||||
[121.464557, 41.695687], |
||||
[121.46166, 41.69694], |
||||
[121.458989, 41.696565], |
||||
[121.457615, 41.695988], |
||||
[121.45925, 41.698146], |
||||
[121.459355, 41.698848], |
||||
[121.457859, 41.700116], |
||||
[121.457424, 41.701307], |
||||
[121.457685, 41.70244], |
||||
[121.457397, 41.704114], |
||||
[121.457667, 41.706537], |
||||
[121.458154, 41.707535], |
||||
[121.455605, 41.710571], |
||||
[121.452491, 41.719568], |
||||
[121.447411, 41.724235], |
||||
[121.441704, 41.728221], |
||||
[121.435736, 41.733355], |
||||
[121.42936, 41.735288], |
||||
[121.416876, 41.73799], |
||||
[121.403114, 41.738182], |
||||
[121.393875, 41.736467], |
||||
[121.384271, 41.732232], |
||||
[121.374302, 41.726625], |
||||
[121.366603, 41.725576], |
||||
[121.360174, 41.725648], |
||||
[121.350126, 41.729208], |
||||
[121.341601, 41.732056], |
||||
[121.338565, 41.733464], |
||||
[121.335294, 41.737631], |
||||
[121.332727, 41.741809], |
||||
[121.334111, 41.743799], |
||||
[121.335503, 41.7449], |
||||
[121.337503, 41.745601], |
||||
[121.339295, 41.745575], |
||||
[121.340365, 41.746422], |
||||
[121.342018, 41.746438], |
||||
[121.343732, 41.748687], |
||||
[121.344115, 41.750713], |
||||
[121.343262, 41.752027], |
||||
[121.343541, 41.754188], |
||||
[121.342488, 41.75676], |
||||
[121.342958, 41.758484], |
||||
[121.341383, 41.760442], |
||||
[121.34281, 41.76332], |
||||
[121.343019, 41.765636], |
||||
[121.342897, 41.768571], |
||||
[121.340861, 41.769718], |
||||
[121.339095, 41.770206], |
||||
[121.337695, 41.771442], |
||||
[121.33639, 41.772003], |
||||
[121.335363, 41.77151], |
||||
[121.333189, 41.771458], |
||||
[121.330909, 41.772538], |
||||
[121.327891, 41.772076], |
||||
[121.327595, 41.771224], |
||||
[121.324246, 41.77138], |
||||
[121.322802, 41.771816], |
||||
[121.320992, 41.773099], |
||||
[121.321253, 41.772263], |
||||
[121.319626, 41.771619], |
||||
[121.315546, 41.772138], |
||||
[121.314833, 41.771131], |
||||
[121.313615, 41.771827], |
||||
[121.312206, 41.770918], |
||||
[121.31211, 41.772221], |
||||
[121.311266, 41.772517], |
||||
[121.30796, 41.775763], |
||||
[121.304011, 41.777643], |
||||
[121.297617, 41.779782], |
||||
[121.284542, 41.784974], |
||||
[121.279105, 41.789159], |
||||
[121.272746, 41.792445], |
||||
[121.267874, 41.794112], |
||||
[121.263681, 41.794538], |
||||
[121.262907, 41.793344], |
||||
[121.263089, 41.792357], |
||||
[121.261593, 41.791963], |
||||
[121.261471, 41.791205], |
||||
[121.260045, 41.789704], |
||||
[121.259305, 41.788427], |
||||
[121.258044, 41.787337], |
||||
[121.257896, 41.786319], |
||||
[121.259131, 41.785353], |
||||
[121.258801, 41.7835], |
||||
[121.258122, 41.781849], |
||||
[121.256269, 41.780488], |
||||
[121.256121, 41.77877], |
||||
[121.257791, 41.77662], |
||||
[121.258827, 41.775758], |
||||
[121.261289, 41.774486], |
||||
[121.260271, 41.773307], |
||||
[121.259827, 41.77192], |
||||
[121.25747, 41.771822], |
||||
[121.256452, 41.770939], |
||||
[121.25245, 41.771931], |
||||
[121.249884, 41.771681], |
||||
[121.247813, 41.770695], |
||||
[121.246839, 41.768924], |
||||
[121.24703, 41.766955], |
||||
[121.244821, 41.767693], |
||||
[121.243586, 41.768456], |
||||
[121.242585, 41.768337], |
||||
[121.240167, 41.767314], |
||||
[121.238618, 41.767355], |
||||
[121.235669, 41.766815], |
||||
[121.233912, 41.764956], |
||||
[121.230502, 41.764649], |
||||
[121.229571, 41.764011], |
||||
[121.226761, 41.763252], |
||||
[121.226396, 41.761559], |
||||
[121.225404, 41.761492], |
||||
[121.224351, 41.759622], |
||||
[121.224386, 41.758256], |
||||
[121.223325, 41.757149], |
||||
[121.224177, 41.756443], |
||||
[121.226561, 41.755674], |
||||
[121.227579, 41.753747], |
||||
[121.225213, 41.750427], |
||||
[121.22329, 41.748827], |
||||
[121.221872, 41.748443], |
||||
[121.221463, 41.747596], |
||||
[121.218053, 41.745419], |
||||
[121.215939, 41.740224], |
||||
[121.217366, 41.73906], |
||||
[121.217383, 41.737564], |
||||
[121.220167, 41.734088], |
||||
[121.220289, 41.732918], |
||||
[121.219497, 41.731687], |
||||
[121.220811, 41.730902], |
||||
[121.222263, 41.730601], |
||||
[121.222446, 41.727431], |
||||
[121.22503, 41.727696], |
||||
[121.228953, 41.726729], |
||||
[121.230058, 41.725129], |
||||
[121.229797, 41.722764], |
||||
[121.231119, 41.721953], |
||||
[121.233468, 41.721522], |
||||
[121.232616, 41.719032], |
||||
[121.232737, 41.718159], |
||||
[121.231981, 41.716319], |
||||
[121.230998, 41.715477], |
||||
[121.231641, 41.71489], |
||||
[121.229032, 41.713798], |
||||
[121.228501, 41.712868], |
||||
[121.22837, 41.711251], |
||||
[121.22744, 41.709354], |
||||
[121.226778, 41.709058], |
||||
[121.226378, 41.707623], |
||||
[121.227344, 41.706381], |
||||
[121.22958, 41.705882], |
||||
[121.229997, 41.704988], |
||||
[121.229893, 41.702986], |
||||
[121.228649, 41.701432], |
||||
[121.227944, 41.69944], |
||||
[121.224717, 41.699924], |
||||
[121.22356, 41.699607], |
||||
[121.223473, 41.698531], |
||||
[121.222316, 41.698052], |
||||
[121.222394, 41.697226], |
||||
[121.220271, 41.694574], |
||||
[121.218105, 41.689598], |
||||
[121.220898, 41.687996], |
||||
[121.223473, 41.689192], |
||||
[121.226709, 41.688688], |
||||
[121.227553, 41.687206], |
||||
[121.225787, 41.685563], |
||||
[121.226909, 41.683696], |
||||
[121.226309, 41.681226], |
||||
[121.224508, 41.678064], |
||||
[121.222968, 41.678548], |
||||
[121.221446, 41.677819], |
||||
[121.219697, 41.677559], |
||||
[121.218558, 41.677866], |
||||
[121.216113, 41.677793], |
||||
[121.212659, 41.676155], |
||||
[121.210545, 41.677965], |
||||
[121.208118, 41.676743], |
||||
[121.206796, 41.67551], |
||||
[121.204526, 41.676509], |
||||
[121.203543, 41.676124], |
||||
[121.203308, 41.674522], |
||||
[121.202011, 41.673633], |
||||
[121.201568, 41.673945], |
||||
[121.201368, 41.676181], |
||||
[121.199811, 41.676805], |
||||
[121.198471, 41.675635], |
||||
[121.197566, 41.677091], |
||||
[121.195818, 41.677944], |
||||
[121.194199, 41.678038], |
||||
[121.193147, 41.676821], |
||||
[121.191938, 41.67641], |
||||
[121.191555, 41.674839], |
||||
[121.18891, 41.673591], |
||||
[121.184065, 41.670267], |
||||
[121.181429, 41.66931], |
||||
[121.18129, 41.668572], |
||||
[121.179367, 41.666398], |
||||
[121.178436, 41.664821], |
||||
[121.177375, 41.664743], |
||||
[121.177244, 41.665784], |
||||
[121.175948, 41.66607], |
||||
[121.177418, 41.670845], |
||||
[121.176079, 41.671703], |
||||
[121.173913, 41.673846], |
||||
[121.172408, 41.672265], |
||||
[121.171755, 41.669347], |
||||
[121.16711, 41.66698], |
||||
[121.166231, 41.667095], |
||||
[121.164074, 41.668395], |
||||
[121.162804, 41.669737], |
||||
[121.159498, 41.671219], |
||||
[121.156297, 41.671074], |
||||
[121.153591, 41.668962], |
||||
[121.154104, 41.667219], |
||||
[121.152225, 41.66671], |
||||
[121.151555, 41.665243], |
||||
[121.150285, 41.664135], |
||||
[121.14805, 41.664088], |
||||
[121.145692, 41.662762], |
||||
[121.144013, 41.661445], |
||||
[121.145222, 41.659755], |
||||
[121.146292, 41.659521], |
||||
[121.146919, 41.6586], |
||||
[121.145544, 41.657341], |
||||
[121.146118, 41.654859], |
||||
[121.145292, 41.652955], |
||||
[121.147136, 41.649485], |
||||
[121.14664, 41.648902], |
||||
[121.14263, 41.647263], |
||||
[121.140081, 41.648397], |
||||
[121.139289, 41.648356], |
||||
[121.136479, 41.646691], |
||||
[121.13641, 41.646269], |
||||
[121.134618, 41.646581], |
||||
[121.132295, 41.64399], |
||||
[121.130807, 41.643366], |
||||
[121.130129, 41.643975], |
||||
[121.128154, 41.64067], |
||||
[121.126362, 41.640134], |
||||
[121.123831, 41.640509], |
||||
[121.123013, 41.640181], |
||||
[121.122273, 41.638838], |
||||
[121.123683, 41.635758], |
||||
[121.123935, 41.633364], |
||||
[121.125223, 41.632385], |
||||
[121.122656, 41.632115], |
||||
[121.119246, 41.62984], |
||||
[121.11775, 41.627764], |
||||
[121.117924, 41.625291], |
||||
[121.11621, 41.62374], |
||||
[121.114374, 41.62285], |
||||
[121.114374, 41.620336], |
||||
[121.114018, 41.61994], |
||||
[121.111278, 41.619451], |
||||
[121.110825, 41.621039], |
||||
[121.109129, 41.622678], |
||||
[121.105736, 41.624162], |
||||
[121.103857, 41.623324], |
||||
[121.100221, 41.618738], |
||||
[121.099029, 41.618717], |
||||
[121.095201, 41.617062], |
||||
[121.093496, 41.615995], |
||||
[121.091565, 41.615713], |
||||
[121.089755, 41.61652], |
||||
[121.088016, 41.616546], |
||||
[121.084014, 41.617411], |
||||
[121.081056, 41.616739], |
||||
[121.077428, 41.617608], |
||||
[121.076759, 41.616104], |
||||
[121.077394, 41.615469], |
||||
[121.075515, 41.614599], |
||||
[121.075384, 41.613834], |
||||
[121.072174, 41.615474], |
||||
[121.071348, 41.615391], |
||||
[121.071348, 41.618066], |
||||
[121.070947, 41.618472], |
||||
[121.066963, 41.618321], |
||||
[121.068111, 41.620133], |
||||
[121.06946, 41.621627], |
||||
[121.071617, 41.623225], |
||||
[121.072235, 41.624604], |
||||
[121.0714, 41.626181], |
||||
[121.069173, 41.628305], |
||||
[121.067416, 41.62958], |
||||
[121.065963, 41.628492], |
||||
[121.062266, 41.626655], |
||||
[121.062013, 41.62411], |
||||
[121.062561, 41.621096], |
||||
[121.06083, 41.621184], |
||||
[121.060761, 41.623834], |
||||
[121.056072, 41.626213], |
||||
[121.055123, 41.626317], |
||||
[121.054993, 41.625083], |
||||
[121.053314, 41.624714], |
||||
[121.053366, 41.624006], |
||||
[121.052009, 41.624812], |
||||
[121.052053, 41.624167], |
||||
[121.050461, 41.624177], |
||||
[121.049251, 41.62259], |
||||
[121.049704, 41.621028], |
||||
[121.050695, 41.620935], |
||||
[121.051661, 41.617473], |
||||
[121.052035, 41.616994], |
||||
[121.055315, 41.616874], |
||||
[121.055497, 41.618696], |
||||
[121.055811, 41.617598], |
||||
[121.056628, 41.617124], |
||||
[121.057211, 41.615739], |
||||
[121.055715, 41.615094], |
||||
[121.054027, 41.613631], |
||||
[121.051818, 41.61499], |
||||
[121.050843, 41.616453], |
||||
[121.050521, 41.619321], |
||||
[121.050539, 41.616156], |
||||
[121.048329, 41.617166], |
||||
[121.048547, 41.619139], |
||||
[121.049225, 41.620008], |
||||
[121.048242, 41.62032], |
||||
[121.046755, 41.622158], |
||||
[121.046746, 41.621278], |
||||
[121.047538, 41.619821], |
||||
[121.047607, 41.617051], |
||||
[121.048442, 41.616151], |
||||
[121.047442, 41.615271], |
||||
[121.045189, 41.614641], |
||||
[121.043379, 41.611851], |
||||
[121.042579, 41.611419], |
||||
[121.03976, 41.612408], |
||||
[121.037394, 41.61196], |
||||
[121.037055, 41.61082], |
||||
[121.036176, 41.610164], |
||||
[121.035167, 41.610252], |
||||
[121.034097, 41.609529], |
||||
[121.033967, 41.608107], |
||||
[121.030678, 41.607207], |
||||
[121.031235, 41.610908], |
||||
[121.026972, 41.610325], |
||||
[121.026311, 41.610055], |
||||
[121.02592, 41.607545], |
||||
[121.0211, 41.607347], |
||||
[121.01595, 41.607998], |
||||
[121.014524, 41.608498], |
||||
[121.014663, 41.607571], |
||||
[121.017133, 41.606145], |
||||
[121.018543, 41.606181], |
||||
[121.019778, 41.605577], |
||||
[121.016794, 41.602469], |
||||
[121.015498, 41.602906], |
||||
[121.01535, 41.604478], |
||||
[121.014045, 41.606108], |
||||
[121.013245, 41.606342], |
||||
[121.005067, 41.604624], |
||||
[121.002788, 41.602942], |
||||
[121.000439, 41.600709], |
||||
[121.000796, 41.599397], |
||||
[121.000118, 41.598501], |
||||
[120.998552, 41.597762], |
||||
[120.997186, 41.596043], |
||||
[120.996081, 41.596564], |
||||
[120.994611, 41.596559], |
||||
[120.994611, 41.598183], |
||||
[120.993976, 41.599115], |
||||
[120.992453, 41.599615], |
||||
[120.991497, 41.598168], |
||||
[120.988904, 41.596543], |
||||
[120.987129, 41.598449], |
||||
[120.985598, 41.599178], |
||||
[120.985494, 41.599844], |
||||
[120.984137, 41.600454], |
||||
[120.981136, 41.600901], |
||||
[120.980361, 41.600756], |
||||
[120.979257, 41.598824], |
||||
[120.976029, 41.599417], |
||||
[120.975603, 41.597361], |
||||
[120.973924, 41.595434], |
||||
[120.974985, 41.592684], |
||||
[120.976273, 41.591169], |
||||
[120.974455, 41.588862], |
||||
[120.974707, 41.586956], |
||||
[120.973759, 41.583669], |
||||
[120.974063, 41.583154], |
||||
[120.97696, 41.581523], |
||||
[120.977438, 41.580919], |
||||
[120.978387, 41.578117], |
||||
[120.978952, 41.575382], |
||||
[120.977151, 41.574564], |
||||
[120.975333, 41.574132], |
||||
[120.977247, 41.572528], |
||||
[120.978848, 41.570757], |
||||
[120.979953, 41.568673], |
||||
[120.981745, 41.566693], |
||||
[120.979674, 41.565735], |
||||
[120.979413, 41.565141], |
||||
[120.976873, 41.564531], |
||||
[120.971836, 41.560577], |
||||
[120.970783, 41.559055], |
||||
[120.970583, 41.556987], |
||||
[120.968191, 41.556252], |
||||
[120.966034, 41.55632], |
||||
[120.966904, 41.555595], |
||||
[120.966703, 41.554329], |
||||
[120.964824, 41.552584], |
||||
[120.963337, 41.552198], |
||||
[120.962363, 41.551046], |
||||
[120.959727, 41.548873], |
||||
[120.957491, 41.54842], |
||||
[120.958117, 41.547221], |
||||
[120.957743, 41.546127], |
||||
[120.958187, 41.545132], |
||||
[120.956369, 41.545059], |
||||
[120.956838, 41.543188], |
||||
[120.957595, 41.541916], |
||||
[120.957334, 41.541327], |
||||
[120.955142, 41.541286], |
||||
[120.95395, 41.540848], |
||||
[120.952437, 41.541557], |
||||
[120.950444, 41.54151], |
||||
[120.948687, 41.541025], |
||||
[120.947869, 41.539326], |
||||
[120.943476, 41.539597], |
||||
[120.94118, 41.538362], |
||||
[120.940101, 41.53746], |
||||
[120.940701, 41.536574], |
||||
[120.939936, 41.535141], |
||||
[120.937822, 41.533572], |
||||
[120.936473, 41.531137], |
||||
[120.93476, 41.530423], |
||||
[120.930366, 41.529996], |
||||
[120.928078, 41.530429], |
||||
[120.926165, 41.531117], |
||||
[120.925817, 41.528479], |
||||
[120.92486, 41.525471], |
||||
[120.924381, 41.524872], |
||||
[120.920145, 41.525695], |
||||
[120.915847, 41.527212], |
||||
[120.91456, 41.527843], |
||||
[120.913324, 41.527687], |
||||
[120.91262, 41.525961], |
||||
[120.910645, 41.524793], |
||||
[120.908853, 41.524507], |
||||
[120.906017, 41.523428], |
||||
[120.906095, 41.522223], |
||||
[120.906783, 41.521462], |
||||
[120.906313, 41.519518], |
||||
[120.904886, 41.517463], |
||||
[120.902607, 41.515837], |
||||
[120.901432, 41.513558], |
||||
[120.901232, 41.512312], |
||||
[120.902146, 41.510477], |
||||
[120.901754, 41.509309], |
||||
[120.901606, 41.503307], |
||||
[120.902181, 41.501716], |
||||
[120.902259, 41.500074], |
||||
[120.901206, 41.49889], |
||||
[120.899954, 41.496319], |
||||
[120.900432, 41.494869], |
||||
[120.900589, 41.492689], |
||||
[120.898249, 41.489789], |
||||
[120.897448, 41.486742], |
||||
[120.896691, 41.486549], |
||||
[120.896978, 41.485428], |
||||
[120.898475, 41.483242], |
||||
[120.90065, 41.482924], |
||||
[120.902442, 41.483174], |
||||
[120.904973, 41.481177], |
||||
[120.903712, 41.478897], |
||||
[120.903138, 41.476095], |
||||
[120.902163, 41.474353], |
||||
[120.899275, 41.471974], |
||||
[120.897466, 41.471468], |
||||
[120.895143, 41.471838], |
||||
[120.893855, 41.47236], |
||||
[120.892611, 41.472297], |
||||
[120.892707, 41.474118], |
||||
[120.89356, 41.475715], |
||||
[120.892724, 41.475323], |
||||
[120.890941, 41.47548], |
||||
[120.889828, 41.47645], |
||||
[120.887522, 41.477092], |
||||
[120.886061, 41.476737], |
||||
[120.885339, 41.475548], |
||||
[120.882816, 41.477546], |
||||
[120.881737, 41.47704], |
||||
[120.877562, 41.476544], |
||||
[120.877831, 41.473972], |
||||
[120.877005, 41.472871], |
||||
[120.8771, 41.47165], |
||||
[120.878666, 41.469892], |
||||
[120.877875, 41.466354], |
||||
[120.877762, 41.463808], |
||||
[120.879345, 41.462519], |
||||
[120.877744, 41.46015], |
||||
[120.878545, 41.457374], |
||||
[120.878562, 41.455688], |
||||
[120.878031, 41.454379], |
||||
[120.877231, 41.454086], |
||||
[120.876213, 41.452134], |
||||
[120.877657, 41.451326], |
||||
[120.878545, 41.449593], |
||||
[120.877031, 41.445976], |
||||
[120.877361, 41.445177], |
||||
[120.876953, 41.441972], |
||||
[120.879093, 41.43823], |
||||
[120.878318, 41.436497], |
||||
[120.877135, 41.436424], |
||||
[120.876013, 41.435192], |
||||
[120.877274, 41.433218], |
||||
[120.879267, 41.431339], |
||||
[120.87991, 41.428588], |
||||
[120.881085, 41.42841], |
||||
[120.882538, 41.427439], |
||||
[120.882007, 41.425815], |
||||
[120.884121, 41.423904], |
||||
[120.885791, 41.423795], |
||||
[120.886748, 41.42275], |
||||
[120.886965, 41.418939], |
||||
[120.886783, 41.417738], |
||||
[120.888149, 41.416866], |
||||
[120.888923, 41.41484], |
||||
[120.887818, 41.412626], |
||||
[120.886148, 41.4119], |
||||
[120.884947, 41.411999], |
||||
[120.886409, 41.409941], |
||||
[120.885452, 41.40921], |
||||
[120.88533, 41.406024], |
||||
[120.883155, 41.404447], |
||||
[120.881833, 41.40298], |
||||
[120.881354, 41.397918], |
||||
[120.881755, 41.3969], |
||||
[120.883599, 41.39551], |
||||
[120.882398, 41.394847], |
||||
[120.882364, 41.393787], |
||||
[120.881642, 41.393165], |
||||
[120.882764, 41.392684], |
||||
[120.884956, 41.393102], |
||||
[120.884225, 41.392157], |
||||
[120.88573, 41.391342], |
||||
[120.88874, 41.394659], |
||||
[120.890393, 41.397015], |
||||
[120.891359, 41.397788], |
||||
[120.892716, 41.397767], |
||||
[120.895717, 41.396273], |
||||
[120.895769, 41.395432], |
||||
[120.897979, 41.394497], |
||||
[120.899432, 41.390934], |
||||
[120.901171, 41.385872], |
||||
[120.901067, 41.379901], |
||||
[120.898831, 41.37373], |
||||
[120.89784, 41.369388], |
||||
[120.894656, 41.361382], |
||||
[120.89302, 41.354749], |
||||
[120.892142, 41.350667], |
||||
[120.891228, 41.34889], |
||||
[120.89001, 41.347358], |
||||
[120.888279, 41.346386], |
||||
[120.886461, 41.344227], |
||||
[120.881702, 41.342883], |
||||
[120.879997, 41.342131], |
||||
[120.879223, 41.341326], |
||||
[120.878449, 41.339511], |
||||
[120.878431, 41.338293], |
||||
[120.879562, 41.337624], |
||||
[120.884504, 41.336788], |
||||
[120.886765, 41.338931], |
||||
[120.888044, 41.339454], |
||||
[120.892072, 41.340202], |
||||
[120.894682, 41.328113], |
||||
[120.89603, 41.320751], |
||||
[120.894891, 41.320374], |
||||
[120.892011, 41.317467], |
||||
[120.892229, 41.315814], |
||||
[120.890297, 41.31334], |
||||
[120.889932, 41.312242], |
||||
[120.887374, 41.310997], |
||||
[120.886887, 41.304527], |
||||
[120.893116, 41.303632], |
||||
[120.892011, 41.302283], |
||||
[120.894169, 41.301373], |
||||
[120.893829, 41.299845], |
||||
[120.895012, 41.299568], |
||||
[120.898005, 41.29792], |
||||
[120.899771, 41.297627], |
||||
[120.902163, 41.298234], |
||||
[120.904216, 41.297397], |
||||
[120.904312, 41.296419], |
||||
[120.903659, 41.295519], |
||||
[120.90473, 41.29452], |
||||
[120.906661, 41.294635], |
||||
[120.907835, 41.29307], |
||||
[120.910419, 41.293672], |
||||
[120.91369, 41.291088], |
||||
[120.917457, 41.291762], |
||||
[120.920954, 41.292971], |
||||
[120.922328, 41.292746], |
||||
[120.925547, 41.290449], |
||||
[120.9276, 41.288655], |
||||
[120.928235, 41.287221], |
||||
[120.929183, 41.286222], |
||||
[120.930358, 41.285819], |
||||
[120.930045, 41.284192], |
||||
[120.930349, 41.282993], |
||||
[120.931697, 41.285625], |
||||
[120.930941, 41.283459], |
||||
[120.931097, 41.282863], |
||||
[120.932976, 41.286426], |
||||
[120.934681, 41.288608], |
||||
[120.935177, 41.288404], |
||||
[120.937065, 41.289419], |
||||
[120.939944, 41.288168], |
||||
[120.941589, 41.288372], |
||||
[120.941649, 41.289743], |
||||
[120.948861, 41.289539], |
||||
[120.958396, 41.293594], |
||||
[120.964546, 41.296303], |
||||
[120.969183, 41.299019], |
||||
[120.97442, 41.301278], |
||||
[120.978709, 41.301707], |
||||
[120.988182, 41.302325], |
||||
[120.998795, 41.300065], |
||||
[120.999056, 41.298454], |
||||
[121.000231, 41.298909], |
||||
[121.001362, 41.298406], |
||||
[121.002319, 41.296691], |
||||
[121.004084, 41.29544], |
||||
[121.003449, 41.293892], |
||||
[121.003345, 41.292024], |
||||
[121.004554, 41.29103], |
||||
[121.005207, 41.289528], |
||||
[121.005102, 41.28867], |
||||
[121.005955, 41.288163], |
||||
[121.009261, 41.287593], |
||||
[121.008138, 41.284887], |
||||
[121.009817, 41.285086], |
||||
[121.013863, 41.284631], |
||||
[121.015098, 41.284035], |
||||
[121.0203, 41.284636], |
||||
[121.020265, 41.285986], |
||||
[121.018447, 41.287326], |
||||
[121.020752, 41.289], |
||||
[121.02244, 41.291297], |
||||
[121.024624, 41.291987], |
||||
[121.028938, 41.291679], |
||||
[121.029591, 41.292165], |
||||
[121.028843, 41.293269], |
||||
[121.028782, 41.294771], |
||||
[121.029869, 41.296712], |
||||
[121.030626, 41.297313], |
||||
[121.030313, 41.300693], |
||||
[121.030652, 41.302058], |
||||
[121.032375, 41.303308], |
||||
[121.034402, 41.303423], |
||||
[121.035959, 41.305772], |
||||
[121.037803, 41.30652], |
||||
[121.041065, 41.306174], |
||||
[121.041857, 41.306797], |
||||
[121.042353, 41.309093], |
||||
[121.045519, 41.310558], |
||||
[121.04518, 41.311891], |
||||
[121.047103, 41.312472], |
||||
[121.047833, 41.313283], |
||||
[121.053853, 41.315824], |
||||
[121.064336, 41.321237], |
||||
[121.073261, 41.32483], |
||||
[121.084327, 41.329076], |
||||
[121.101491, 41.333494], |
||||
[121.110103, 41.33753], |
||||
[121.123874, 41.341263], |
||||
[121.133878, 41.339538], |
||||
[121.139933, 41.338084], |
||||
[121.145353, 41.335486], |
||||
[121.150772, 41.333123], |
||||
[121.159454, 41.326811], |
||||
[121.167606, 41.324176], |
||||
[121.174809, 41.320175], |
||||
[121.177358, 41.318628], |
||||
[121.175635, 41.317315], |
||||
[121.175809, 41.316719], |
||||
[121.174487, 41.315265], |
||||
[121.17293, 41.31492], |
||||
[121.172756, 41.312937], |
||||
[121.175113, 41.31185], |
||||
[121.179915, 41.312728], |
||||
[121.181177, 41.312257], |
||||
[121.183325, 41.310359], |
||||
[121.184639, 41.309668], |
||||
[121.184604, 41.308099], |
||||
[121.187353, 41.307262], |
||||
[121.188545, 41.30743], |
||||
[121.192399, 41.306467], |
||||
[121.193312, 41.305489], |
||||
[121.196644, 41.304537], |
||||
[121.200698, 41.304919], |
||||
[121.20309, 41.304135], |
||||
[121.205326, 41.303978], |
||||
[121.206231, 41.303151], |
||||
[121.207231, 41.299725], |
||||
[121.208971, 41.298543], |
||||
[121.20844, 41.296576], |
||||
[121.209049, 41.295262], |
||||
[121.209623, 41.295838], |
||||
[121.211998, 41.294384], |
||||
[121.212451, 41.292076], |
||||
[121.215174, 41.291496], |
||||
[121.218592, 41.290318], |
||||
[121.217662, 41.288801], |
||||
[121.218792, 41.28788], |
||||
[121.219993, 41.288001], |
||||
[121.224264, 41.289309], |
||||
[121.226909, 41.291396], |
||||
[121.227718, 41.291558], |
||||
[121.229527, 41.290659], |
||||
[121.231624, 41.292934], |
||||
[121.232755, 41.294734], |
||||
[121.235713, 41.295618], |
||||
[121.238349, 41.298548], |
||||
[121.2364, 41.299531], |
||||
[121.236548, 41.301472], |
||||
[121.237931, 41.302121], |
||||
[121.236391, 41.304108], |
||||
[121.236243, 41.305819], |
||||
[121.238401, 41.30528], |
||||
[121.239245, 41.304412], |
||||
[121.242333, 41.304778], |
||||
[121.246578, 41.303868], |
||||
[121.247787, 41.306975], |
||||
[121.245543, 41.30744], |
||||
[121.244925, 41.308], |
||||
[121.244951, 41.311954], |
||||
[121.252607, 41.31868], |
||||
[121.279027, 41.327538], |
||||
[121.290727, 41.332683], |
||||
[121.30181, 41.336453], |
||||
[121.319104, 41.344525], |
||||
[121.330431, 41.345774], |
||||
[121.342297, 41.344263], |
||||
[121.353832, 41.341143], |
||||
[121.366611, 41.339391], |
||||
[121.38267, 41.347227], |
||||
[121.396485, 41.350954], |
||||
[121.412065, 41.352345], |
||||
[121.425462, 41.352611], |
||||
[121.439781, 41.353547], |
||||
[121.455866, 41.352601], |
||||
[121.466445, 41.350134], |
||||
[121.476179, 41.351117], |
||||
[121.484391, 41.35166], |
||||
[121.493508, 41.351958], |
||||
[121.503774, 41.35017], |
||||
[121.513134, 41.348404], |
||||
[121.524982, 41.349104], |
||||
[121.533812, 41.349867], |
||||
[121.53871, 41.351164], |
||||
[121.539423, 41.355507], |
||||
[121.535735, 41.364752], |
||||
[121.535622, 41.37187], |
||||
[121.534569, 41.377853], |
||||
[121.531603, 41.391671], |
||||
[121.53349, 41.393933], |
||||
[121.541146, 41.396325], |
||||
[121.552481, 41.399574], |
||||
[121.557988, 41.401084], |
||||
[121.559571, 41.403126], |
||||
[121.561963, 41.412714], |
||||
[121.567339, 41.419973], |
||||
[121.572002, 41.42356], |
||||
[121.578814, 41.42758], |
||||
[121.582563, 41.430739], |
||||
[121.582215, 41.435056], |
||||
[121.586617, 41.436893], |
||||
[121.588888, 41.442139], |
||||
[121.592133, 41.448972], |
||||
[121.5969, 41.455777], |
||||
[121.605582, 41.460923], |
||||
[121.611315, 41.469323], |
||||
[121.612332, 41.472751], |
||||
[121.612793, 41.47802], |
||||
[121.612411, 41.486289], |
||||
[121.613194, 41.492245], |
||||
[121.611315, 41.501221], |
||||
[121.608948, 41.504235], |
||||
[121.603833, 41.506837], |
||||
[121.598083, 41.508761], |
||||
[121.592054, 41.511384], |
||||
[121.587939, 41.516723], |
||||
[121.584468, 41.523667], |
||||
[121.582702, 41.525987], |
||||
[121.578257, 41.530877], |
||||
[121.577753, 41.534786], |
||||
[121.580876, 41.54804], |
||||
[121.584782, 41.5567], |
||||
[121.585243, 41.561963], |
||||
[121.583329, 41.570256], |
||||
[121.581406, 41.577862], |
||||
[121.579745, 41.583852], |
||||
[121.579231, 41.587529], |
||||
[121.584164, 41.588831], |
||||
[121.592689, 41.588008], |
||||
[121.598779, 41.586987], |
||||
[121.609061, 41.593945], |
||||
[121.613489, 41.598923], |
||||
[121.619074, 41.60137], |
||||
[121.629244, 41.604197], |
||||
[121.640657, 41.607014], |
||||
[121.654289, 41.611866], |
||||
[121.66632, 41.614225], |
||||
[121.674672, 41.616859], |
||||
[121.680622, 41.621361], |
||||
[121.688495, 41.628138], |
||||
[121.696864, 41.64155], |
||||
[121.697629, 41.646587], |
||||
[121.699047, 41.652986], |
||||
[121.698047, 41.660343], |
||||
[121.696994, 41.676649], |
||||
[121.697873, 41.685578], |
||||
[121.699848, 41.689905], |
||||
[121.703353, 41.693981], |
||||
[121.704763, 41.700387], |
||||
[121.703171, 41.708668], |
||||
[121.703345, 41.714396], |
||||
[121.706259, 41.719635], |
||||
[121.708503, 41.722582], |
||||
[121.715158, 41.729364], |
||||
[121.723049, 41.736816], |
||||
[121.728695, 41.740858], |
||||
[121.729121, 41.744095], |
||||
[121.731365, 41.744656], |
||||
[121.732313, 41.745768], |
||||
[121.735663, 41.745565], |
||||
[121.739786, 41.748256], |
||||
[121.741987, 41.748542], |
||||
[121.743814, 41.749664], |
||||
[121.744901, 41.749456], |
||||
[121.745032, 41.752905], |
||||
[121.745937, 41.754017], |
||||
[121.74538, 41.756905], |
||||
[121.742213, 41.758573], |
||||
[121.739934, 41.75837], |
||||
[121.736959, 41.758479], |
||||
[121.735471, 41.762655], |
||||
[121.736045, 41.764951], |
||||
[121.736994, 41.765605], |
||||
[121.736167, 41.766348], |
||||
[121.73454, 41.766358], |
||||
[121.732731, 41.767179], |
||||
[121.731574, 41.768477], |
||||
[121.73046, 41.768607], |
||||
[121.729512, 41.769516], |
||||
[121.727703, 41.770477], |
||||
[121.726207, 41.772336], |
||||
[121.726354, 41.773177], |
||||
[121.725441, 41.774262], |
||||
[121.723875, 41.77421], |
||||
[121.722057, 41.774782], |
||||
[121.722161, 41.778344], |
||||
[121.722013, 41.783396], |
||||
[121.723066, 41.787737], |
||||
[121.722448, 41.795737], |
||||
[121.714262, 41.799075], |
||||
[121.710965, 41.801872], |
||||
[121.707338, 41.80399], |
||||
[121.70364, 41.80359], |
||||
[121.697046, 41.798867], |
||||
[121.686598, 41.78824], |
||||
[121.678308, 41.778271], |
||||
[121.675124, 41.77419], |
||||
[121.671418, 41.773556], |
||||
[121.664059, 41.773888], |
||||
[121.654916, 41.776308], |
||||
[121.640736, 41.774449], |
||||
[121.637065, 41.77406], |
||||
[121.635612, 41.777274], |
||||
[121.633689, 41.779253], |
||||
[121.631471, 41.779528], |
||||
[121.629052, 41.784019], |
||||
[121.615003, 41.786293], |
||||
[121.604877, 41.787274], |
||||
[121.596326, 41.786807], |
||||
[121.585295, 41.786522], |
||||
[121.574264, 41.786018], |
||||
[121.56446, 41.785722], |
||||
[121.554056, 41.785213], |
||||
[121.553394, 41.784881], |
||||
[121.55035, 41.785302], |
||||
[121.549723, 41.783541], |
||||
[121.548497, 41.784813], |
||||
[121.545365, 41.785348], |
||||
[121.540989, 41.783219], |
||||
[121.538823, 41.783214], |
||||
[121.538145, 41.782804], |
||||
[121.537683, 41.781444], |
||||
[121.5351, 41.775877], |
||||
[121.537353, 41.775773], |
||||
[121.538371, 41.775145], |
||||
[121.538284, 41.773681] |
||||
] |
||||
] |
||||
] |
||||
} |
||||
} |
||||
] |
||||
} |
||||
@ -1,3 +1,5 @@
|
||||
import Echart from './src/Echart.vue' |
||||
|
||||
export { Echart } |
||||
import Charts from './src/charts.vue' |
||||
|
||||
export { Echart,Charts } |
||||
|
||||
@ -0,0 +1,81 @@
|
||||
<script lang="ts" setup> |
||||
import * as echarts from 'echarts' |
||||
import { debounce } from 'lodash-es' |
||||
import 'echarts-wordcloud' |
||||
import YX from '@/assets/json/yx.json' |
||||
|
||||
defineOptions({ name: 'EChart' }) |
||||
const props = defineProps({ |
||||
options: { |
||||
type: Object, |
||||
required: true |
||||
}, |
||||
width: { |
||||
type: String, |
||||
default: '100%' |
||||
}, |
||||
height: { |
||||
type: String, |
||||
default: '100%' |
||||
}, |
||||
id: { |
||||
type: String, |
||||
default: 'echart' |
||||
} |
||||
}) |
||||
const elRef = ref<ElRef>() |
||||
let chartRef: Nullable<echarts.ECharts> = null |
||||
|
||||
const initChart = () => { |
||||
echarts.registerMap('yx', YX as any) |
||||
if (unref(elRef) && props.options) { |
||||
chartRef = echarts.init(unref(elRef) as HTMLElement) |
||||
chartRef.setOption(props.options, true) |
||||
} |
||||
} |
||||
watch( |
||||
() => props.options, |
||||
(options) => { |
||||
if (chartRef) { |
||||
chartRef?.setOption(options, true) |
||||
} |
||||
}, |
||||
{ |
||||
deep: true, |
||||
immediate: true |
||||
} |
||||
) |
||||
|
||||
const resizeHandler = debounce(() => { |
||||
if (chartRef) { |
||||
chartRef.resize() |
||||
} |
||||
}, 200) |
||||
|
||||
const getChartRef = () => { |
||||
return chartRef |
||||
} |
||||
|
||||
onMounted(() => { |
||||
initChart() |
||||
window.addEventListener('resize', resizeHandler) |
||||
}) |
||||
|
||||
onBeforeUnmount(() => { |
||||
window.removeEventListener('resize', resizeHandler) |
||||
}) |
||||
|
||||
onActivated(() => { |
||||
if (chartRef) { |
||||
chartRef.resize() |
||||
} |
||||
}) |
||||
|
||||
defineExpose({ |
||||
getChartRef, |
||||
resizeHandler |
||||
}) |
||||
</script> |
||||
<template> |
||||
<div :id="id" ref="elRef" :class="[$attrs.class]" :style="{ width, height }"></div> |
||||
</template> |
||||
@ -0,0 +1,3 @@
|
||||
import Screen from './src/Screen.vue' |
||||
|
||||
export { Screen } |
||||
@ -0,0 +1,30 @@
|
||||
<script lang="ts" setup> |
||||
import { Icon } from '@/components/Icon' |
||||
import { propTypes } from '@/utils/propTypes' |
||||
import { useDesign } from '@/hooks/web/useDesign' |
||||
|
||||
defineOptions({ name: 'Screen' }) |
||||
|
||||
const router=useRouter() |
||||
|
||||
const { getPrefixCls } = useDesign() |
||||
|
||||
const prefixCls = getPrefixCls('screen') |
||||
|
||||
defineProps({ |
||||
color: propTypes.string.def('') |
||||
}) |
||||
|
||||
|
||||
const screenView = () => { |
||||
router.push({ |
||||
path: '/screen' |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="prefixCls" @click="screenView"> |
||||
<Icon :color="color" icon="svg-icon:screen" :size="18" /> |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,96 @@
|
||||
<template> |
||||
<section class="p-12px"> |
||||
<section class="flex flex-col gap-16px"> |
||||
<section class="flex gap-8px flex-items-center"> |
||||
<section class="p-4px font-bold" style="background-color: rgba(255, 255, 255, 0.1)"> |
||||
一氧化碳 |
||||
</section> |
||||
<section class="flex gap-4px flex-items-center color-#56CA00"> |
||||
<Icon icon="svg-icon:wave-arrow-down" :size="18" /> |
||||
<count-to |
||||
:start-val="0" |
||||
:end-val="0.5" |
||||
:duration="2000" |
||||
:options="{ decimal: 2 }" |
||||
suffix="%" |
||||
/> |
||||
</section> |
||||
</section> |
||||
<section class="flex gap-8px flex-items-center"> |
||||
<section class="p-4px font-bold" style="background-color: rgba(255, 255, 255, 0.1)"> |
||||
二氧化碳 |
||||
</section> |
||||
<section class="flex gap-4px flex-items-center color-#FFE700"> |
||||
<Icon icon="svg-icon:wave-arrow-up" color="red" :size="18" /> |
||||
<count-to |
||||
:start-val="0" |
||||
:end-val="0.5" |
||||
:duration="2000" |
||||
:options="{ decimal: 2 }" |
||||
suffix="%" |
||||
/> |
||||
</section> |
||||
</section> |
||||
</section> |
||||
<section class="mt-16px pt-16px qulity" style="border-top: 1px solid rgba(255, 255, 255, 0.15)"> |
||||
<section class="flex flex-col gap-8px"> |
||||
<span> 空气压力 </span> |
||||
<count-to |
||||
:start-val="0" |
||||
:end-val="1000" |
||||
:duration="2000" |
||||
:options="{ decimal: 2 }" |
||||
suffix="pa" |
||||
class="font-bold" |
||||
/> |
||||
</section> |
||||
<section class="flex flex-col gap-12px"> |
||||
<section> 温度 </section> |
||||
<count-to |
||||
:start-val="0" |
||||
:end-val="29" |
||||
:duration="2000" |
||||
:options="{ decimal: 2 }" |
||||
suffix="℃" |
||||
class="font-bold" |
||||
/> |
||||
</section> |
||||
<section class="flex flex-col gap-12px"> |
||||
<section> 风速 </section> |
||||
<count-to |
||||
:start-val="0" |
||||
:end-val="0.5" |
||||
:duration="2000" |
||||
:options="{ decimal: 2 }" |
||||
suffix="m/s" |
||||
class="font-bold" |
||||
/> |
||||
</section> |
||||
<section class="flex flex-col gap-12px"> |
||||
<section> 温度 </section> |
||||
<count-to |
||||
:start-val="0" |
||||
:end-val="0.5" |
||||
:duration="2000" |
||||
:options="{ decimal: 2 }" |
||||
suffix="%" |
||||
class="font-bold" |
||||
/> |
||||
</section> |
||||
</section> |
||||
</section> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
</script> |
||||
|
||||
|
||||
<style scoped lang="scss"> |
||||
.qulity { |
||||
display: grid; |
||||
grid-template-rows: 1fr 1fr; |
||||
grid-template-columns: 1fr 1fr; |
||||
grid-gap: 16px; |
||||
place-items: center center; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,31 @@
|
||||
<template> |
||||
<section class="header-container"> |
||||
<section class="header-ttile"></section> |
||||
</section> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
onMounted(() => {}) |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.header-container { |
||||
background-image: url('@/assets/imgs/screen/header.png'); |
||||
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
||||
background-position: 50% 50%; |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.header-ttile { |
||||
background-image: url('@/assets/imgs/screen/title.png'); |
||||
background-size: 40% 100%; |
||||
background-repeat: no-repeat; |
||||
background-position: 50% 50%; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,335 @@
|
||||
<template> |
||||
<section class="left-wrapper" ref="leftWrapperRef"> |
||||
<TitleBox> |
||||
<Charts :options="row1Options" ref="row1Chart" /> |
||||
</TitleBox> |
||||
<TitleBox title="各大队企业数量" isRight> |
||||
<Charts :options="row2Options" ref="row2Chart" /> |
||||
</TitleBox> |
||||
<TitleBox title="各大队任务进度" isRight> |
||||
<Charts :options="row3Options" ref="row3Chart" /> |
||||
</TitleBox> |
||||
</section> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import TitleBox from './titleBox.vue' |
||||
|
||||
const leftWrapperRef = ref() |
||||
|
||||
let observer: Nullable<ResizeObserver> = null |
||||
|
||||
const row1Options = ref({ |
||||
grid: { |
||||
top: 40, |
||||
bottom: 0, |
||||
left: 10, |
||||
right: 10, |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
data: ['一大队', '二大队', '三大队', '四大队', '五大队'], |
||||
axisTick: { |
||||
show: false |
||||
}, |
||||
splitLine: { |
||||
show: false |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: 'rgba(255, 255, 255, 0.20)' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
color: '#fff', |
||||
fontSize: 12 |
||||
} |
||||
}, |
||||
yAxis: { |
||||
type: 'value', |
||||
axisTick: { |
||||
show: false, |
||||
lineStyle: { |
||||
color: '#fff' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
show: false |
||||
}, |
||||
splitLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: 'rgba(255,255,255,0.2)' |
||||
} |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'bar', |
||||
data: [100, 90, 10, 90, 90, 20, 56, 89], |
||||
barWidth: 5, |
||||
itemStyle: { |
||||
color: { |
||||
type: 'linear', |
||||
x: 0, |
||||
y: 1, |
||||
x2: 0, |
||||
y2: 0, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: 'rgba(50, 215, 75, 0)' |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: 'rgba(50, 215, 75, 0.4)' |
||||
} |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
{ |
||||
name: '主要任务类型占比', |
||||
type: 'scatter', |
||||
data: [100, 90, 10, 90, 90, 20, 56, 89], |
||||
symbol: |
||||
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASOSURBVHgBzVhBbBNHFP0z610Ht4SkIieSxrRSpZJIlEOpzKElUlult1SFtjcKSs9FIucW7iCFM2mhtxSomlur5hDSQ61yaQ5JD0hVHBxOICVxkIN3vTP8N95dDMTJrOJEPMmenfXszvOfP///N4JSYqRI+aygESXpqCA6ybe6og+wqolKQpvPbE3T1FSBSpQCwnbg6bv0DTdnIhLWYIJzFNLVWwW6YTN+W0KninRSOnSdL/PRI5WQ5B+h8Io+7V/Y8LrvV9x8Bb90BqXOff7Km55YP5JR/glJapgpdUbMSlrRpe2ItSQ08i91eT79wCPOR0PLAWUnVrP9v8QEbNBX/etLTz+5QFr3RcTGfY8uTR2jVWtCX7OfhA79xj++B4somb28mPtognaAw9WZUamCMWMxtpavaGgz/xKbkVEOzZBZIlGuuL1fPMweWaY24KC/0HcgeHDbWKsFKdncwTIlZISYbycZ4JE3UF5zD53SJBbYFHmXVwFztiRkfCa2TKb3XDvJNJOqeIfO8R8uwyWiORMkS4ZtzZ3r8Bm2zMe7QaYZZvn8B9PwKRXS0O0C3cF92cTMMIUD7zYZAJZS0r1sSEgTVighFAW9PJZqp7spDRZzQxNYOvjT6aLh0CDE1vkOrU8dV2iPEehswwAOnTFcom2+yEzX/n/t03dtX4So/EZQGhWqzhE5PIF7vHvmA+qYKL/+4c007+mp3bsLX/JDOiw1J0r8gHRg+xI4ZI9/b9pRtbGYjPl3pAc92hh/+/Gf//TU/uu1eReifjx3hrlIJRrJMtRekSyRBLeW0H2dwfKv+PdkAeRFtIIrCCkE9aMTZPYv2DyM3LQ1mWekumulb8kCgZObN4S4koBT59GpOt1lm4dd9cRqEsAR9YLNuKpz0MzNpUoXCJnQbZvB2U8GyBJCP/OvrRDPLSJCrxRAyNQltg6ohfibLKFIWvllPDcv2ark2ncNnVy4YuGo2I0Z691Yp+w1m3G58JGZm5esJJnVHXTc+rqVb6xk37pmwv22EGXbAOmqqpmbS9wlWGgOHYd8qx0BB0RNszWpRmFHlshwtDeE2DggNGUICTVs60fI1JxmPvDlvvOm2IrA10XO4FceZt/5JE3FIKk+jLbOXEw9xNl+BkGpLju+X9rDbA8YEaA2xvly7uZxOhZv+5/xlVE166DXLhhFwtCs3dAaQreOG61UQrjvr86O0h7BzBUV/LFeSwIjl5Fn0WZ07YJtpt4JUDHwiozhGgIyvp8QQk3LXn6VGR9Apt5NUokc4hoIczar2edSR+DSRYIWR/lQX/5pN0hFZH6MlyqakzYlBHkrQ/qc4E9aD7bbUk1CcTARii9I6peS6yQrSSY1RJGTs6Wm2+HoeIeRPWwZnIhYS+kYUJRuQBdjAYDoCxGQtl7uqi195YraaFzUwWewTKkOG5oRCchI0ZpHKqHI/I4kiyoThV3zcQyStKvWBxzlFxxSnzUfx7D+Ojv5fiN3tkKqAysejKOZo5QOsxz0brTtwOpFQDYZpcLigNs830JNnhzpoZxBkkTSRp6cTHmk9xRXBRnSHOR+CgAAAABJRU5ErkJggg==', |
||||
symbolSize: 15 |
||||
} |
||||
], |
||||
legend: { |
||||
top: 0, |
||||
left: 'center', |
||||
show: true, |
||||
itemWidth: 15, |
||||
itemHeight: 15, |
||||
textStyle: { |
||||
color: '#fff' |
||||
} |
||||
} |
||||
}) |
||||
const row2Options = ref({ |
||||
color: [ |
||||
'rgba(4, 180, 64, 1)', |
||||
'rgba(4, 180, 64, .8)', |
||||
'rgba(4, 180, 64, .6)', |
||||
'rgba(4, 180, 64, .4)', |
||||
'rgba(4, 180, 64, .2)' |
||||
], |
||||
title: { |
||||
text: '500', |
||||
subtext: '入驻企业', |
||||
left: '49%', |
||||
top: '35%', |
||||
textAlign: 'center', |
||||
textStyle: { |
||||
color: '#fff', |
||||
fontSize: 26, |
||||
fontWeight: 'normal' |
||||
}, |
||||
subtextStyle: { |
||||
color: '#fff', |
||||
fontSize: 14, |
||||
fontWeight: 'normal' |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'pie', |
||||
itemStyle: { |
||||
}, |
||||
radius: ['55%', '75%'], |
||||
center: ['50%', '50%'], |
||||
label: { |
||||
show: true, |
||||
position: 'outside', |
||||
formatter: '{b} : {c}', |
||||
color: '#fff' |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 335, |
||||
name: '一大队' |
||||
}, |
||||
{ |
||||
value: 310, |
||||
name: '二大队' |
||||
}, |
||||
{ |
||||
value: 234, |
||||
name: '三大队' |
||||
}, |
||||
{ |
||||
value: 135, |
||||
name: '四大队' |
||||
}, |
||||
{ |
||||
value: 1548, |
||||
name: '五大队' |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}) |
||||
const row3Options = ref({ |
||||
grid: { |
||||
top: 10, |
||||
bottom: 10, |
||||
left: 10, |
||||
right: 10, |
||||
containLabel: true |
||||
}, |
||||
yAxis: [ |
||||
{ |
||||
type: 'category', |
||||
data: ['一大队', '二大队', '三大队', '四大队', '五大队'], |
||||
axisTick: { |
||||
show: false |
||||
}, |
||||
splitLine: { |
||||
show: false |
||||
}, |
||||
axisLine: { |
||||
show: false |
||||
}, |
||||
axisLabel: { |
||||
color: '#fff', |
||||
fontSize: 12 |
||||
} |
||||
}, |
||||
{ |
||||
type: 'category', |
||||
data: ['1', '2', '3', '4', '5'], |
||||
axisTick: { |
||||
show: false |
||||
}, |
||||
splitLine: { |
||||
show: false |
||||
}, |
||||
axisLine: { |
||||
show: false |
||||
}, |
||||
axisLabel: { |
||||
color: '#fff', |
||||
fontSize: 12 |
||||
} |
||||
} |
||||
], |
||||
xAxis: { |
||||
max: 110, |
||||
type: 'value', |
||||
axisTick: { |
||||
show: false |
||||
}, |
||||
axisLabel: { |
||||
show: false |
||||
}, |
||||
splitLine: { |
||||
show: false |
||||
} |
||||
}, |
||||
tooltip: { |
||||
show: true, |
||||
trigger: 'item', |
||||
backgroundColor: 'rgba(25, 119, 43,1)', |
||||
axisPointer: { |
||||
type: 'shadow' |
||||
}, |
||||
textStyle: { |
||||
color: '#fff' |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'bar', |
||||
data: [110, 110, 110, 110, 110], |
||||
barWidth: 15, |
||||
itemStyle: { |
||||
color: 'rgba(255, 255, 255, 0.05)', |
||||
borderRadius: [5, 5, 5, 5] |
||||
}, |
||||
xAxisIndex: 0, |
||||
yAxisIndex: 1, |
||||
tooltip: { |
||||
show: false |
||||
} |
||||
}, |
||||
{ |
||||
xAxisIndex: 0, |
||||
type: 'bar', |
||||
yAxisIndex: 0, |
||||
data: [90, 80, 50, 20, 10], |
||||
barWidth: 15, |
||||
itemStyle: { |
||||
color: { |
||||
type: 'linear', |
||||
x: 0, |
||||
y: 0, |
||||
x2: 1, |
||||
y2: 0, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: 'rgba(86, 202, 0, 0.00)' |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: 'rgba(86, 202, 0, 0.50)' |
||||
} |
||||
] |
||||
}, |
||||
borderRadius: [5, 0, 0, 5] |
||||
} |
||||
}, |
||||
{ |
||||
type: 'pictorialBar', |
||||
yAxisIndex: 0, |
||||
symbolPosition: 'end', |
||||
symbolSize: [10, 15], |
||||
symbolOffset: [5, 0], |
||||
itemStyle: { |
||||
shadowColor: 'rgba(0, 0, 0, .3)', |
||||
shadowBlur: 5, |
||||
shadowOffsetY: 3, |
||||
shadowOffsetX: 0, |
||||
color: 'rgba(86, 202, 0, 1)' |
||||
}, |
||||
data: [90, 80, 50, 20, 10] |
||||
} |
||||
] |
||||
}) |
||||
|
||||
const row1Chart = ref() |
||||
const row2Chart = ref() |
||||
const row3Chart = ref() |
||||
const initChart = () => {} |
||||
|
||||
const handlerResize = () => { |
||||
unref(row1Chart).resizeHandler() |
||||
unref(row2Chart).resizeHandler() |
||||
unref(row3Chart).resizeHandler() |
||||
} |
||||
|
||||
onMounted(() => { |
||||
initChart() |
||||
observer = new ResizeObserver(handlerResize) |
||||
observer.observe(leftWrapperRef.value) |
||||
handlerResize() |
||||
}) |
||||
|
||||
onUnmounted(() => { |
||||
observer?.disconnect() |
||||
}) |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.left-wrapper { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: grid; |
||||
grid-template-rows: 1fr 1fr 1fr; |
||||
grid-template-columns: 1fr; |
||||
grid-gap: 20px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,184 @@
|
||||
<template> |
||||
<section class="map-container" ref="mapWrapperRef"> |
||||
<AirQuality class="air-quality block-box" /> |
||||
<Weather class="weather block-box" /> |
||||
<Numbox class="num-box block-box" /> |
||||
<Tabber class="tabber-box"/> |
||||
<Norm class="block-box nomr-box"/> |
||||
<section class="map"> |
||||
<charts :options="mapOption" ref="mapChartRef" class="mapChart" /> |
||||
</section> |
||||
</section> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import AirQuality from './airQuality.vue' |
||||
import Weather from './weather.vue' |
||||
import Numbox from './numbox.vue' |
||||
import Tabber from './tabber.vue' |
||||
import Norm from './norm.vue' |
||||
let observer: Nullable<ResizeObserver> = null |
||||
|
||||
const mapWrapperRef = ref() |
||||
|
||||
const mapChartRef = ref() |
||||
|
||||
const mapOption = ref({ |
||||
geo: [ |
||||
{ |
||||
map: 'yx', |
||||
layoutCenter: ['50%', '50%'], |
||||
layoutSize: '80%', |
||||
itemStyle: { |
||||
areaColor: { |
||||
type: 'linear', |
||||
x: 0, |
||||
y: 0, |
||||
x2: 1, |
||||
y2: 0, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: '#01996A' |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: '#00553B' |
||||
} |
||||
] |
||||
}, |
||||
borderColor: '#34F6BA' |
||||
}, |
||||
zlevel: 0 |
||||
}, |
||||
{ |
||||
map: 'yx', |
||||
layoutCenter: ['50%', '51%'], |
||||
layoutSize: '80%', |
||||
itemStyle: { |
||||
areaColor: '#002C1F', |
||||
borderColor: 'transparent' |
||||
}, |
||||
zlevel: -1 |
||||
}, |
||||
{ |
||||
map: 'yx', |
||||
layoutCenter: ['50%', '51%'], |
||||
layoutSize: '80%', |
||||
itemStyle: { |
||||
areaColor: '#078B63', |
||||
borderColor: 'transparent' |
||||
}, |
||||
zlevel: -2 |
||||
}, |
||||
{ |
||||
map: 'yx', |
||||
layoutCenter: ['50%', '52%'], |
||||
layoutSize: '80%', |
||||
itemStyle: { |
||||
areaColor: '#002C1F', |
||||
borderColor: 'transparent', |
||||
shadowBlur: 20, |
||||
shadowColor: '#000', |
||||
shadowOffsetX: 0, |
||||
shadowOffsetY: 0 |
||||
}, |
||||
zlevel: -3 |
||||
} |
||||
] |
||||
}) |
||||
|
||||
const handlerResize = () => { |
||||
unref(mapChartRef).resizeHandler() |
||||
} |
||||
|
||||
onMounted(() => { |
||||
observer = new ResizeObserver(handlerResize) |
||||
observer.observe(mapWrapperRef.value) |
||||
}) |
||||
|
||||
onUnmounted(() => { |
||||
observer?.disconnect() |
||||
}) |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.map-container { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
&::before { |
||||
content: ''; |
||||
position: absolute; |
||||
inset: 0; |
||||
background-image: url('@/assets/imgs/screen/mapborder.png'); |
||||
background-size: contain; |
||||
background-repeat: no-repeat; |
||||
background-position: center; |
||||
//animation: rotate 5s linear infinite; |
||||
} |
||||
&::after { |
||||
content: ''; |
||||
position: absolute; |
||||
inset: 0; |
||||
background-image: url('@/assets/imgs/screen/mapCricle.png'); |
||||
background-size: contain; |
||||
background-repeat: no-repeat; |
||||
background-position: center; |
||||
//animation: rotate 5s linear infinite; |
||||
} |
||||
.map { |
||||
position: absolute; |
||||
inset: 0; |
||||
display: flex; |
||||
flex-flow: column nowrap; |
||||
padding: 12px; |
||||
} |
||||
.air-quality { |
||||
position: absolute; |
||||
left: 12px; |
||||
top: 0; |
||||
} |
||||
.nomr-box{ |
||||
position: absolute; |
||||
right: 12px; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
} |
||||
.weather { |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 0; |
||||
transform: translateX(-50%); |
||||
} |
||||
.num-box { |
||||
position: absolute; |
||||
right: 12px; |
||||
top: 0; |
||||
} |
||||
.tabber-box{ |
||||
position: absolute; |
||||
left: 50%; |
||||
bottom: 0; |
||||
transform: translateX(-50%); |
||||
z-index: 2; |
||||
} |
||||
.block-box { |
||||
border: 1px solid rgba(255, 255, 255, 0.15); |
||||
background: rgba(255, 255, 255, 0.02); |
||||
backdrop-filter: blur(3px); |
||||
z-index: 2; |
||||
} |
||||
} |
||||
@keyframes rotate { |
||||
from { |
||||
transform: rotateX(0deg) rotateZ(0); |
||||
} |
||||
50% { |
||||
transform: rotateX(-30deg) rotateZ(30deg); |
||||
} |
||||
to { |
||||
transform: rotateX(0deg) rotateZ(0deg); |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,58 @@
|
||||
<template> |
||||
<section class="flex flex-col gap-12px p-12px"> |
||||
<section class="color-#56CA00"> 实时空气指标 </section> |
||||
<section class="norm" v-for="(item, index) in list" :key="index"> |
||||
<section> |
||||
{{ item.name }} |
||||
</section> |
||||
<count-to :startVal="0" :endVal="item.value" :duration="1" :suffix="item.suffiex" /> |
||||
</section> |
||||
</section> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
const list = ref([ |
||||
{ |
||||
name: 'PM2.5', |
||||
value: '36.0', |
||||
suffix: 'ug/m³' |
||||
}, |
||||
{ |
||||
name: 'PM10', |
||||
value: '36.0', |
||||
suffix: 'ug/m³' |
||||
}, |
||||
{ |
||||
name: 'CO', |
||||
value: '36.0', |
||||
suffix: 'm³' |
||||
}, |
||||
{ |
||||
name: 'NO2', |
||||
value: '36.0', |
||||
suffix: 'm³' |
||||
}, |
||||
|
||||
{ |
||||
name: 'AQI', |
||||
value: '48', |
||||
suffiex: '+' |
||||
} |
||||
]) |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.norm { |
||||
display: flex; |
||||
flex-flow: row nowrap; |
||||
gap: 8px; |
||||
align-items: center; |
||||
&::before { |
||||
content: ''; |
||||
width: 5px; |
||||
height: 5px; |
||||
background-color: #00a261; |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,42 @@
|
||||
<script setup lang="ts"> |
||||
</script> |
||||
|
||||
<template> |
||||
<section class="p-12px flex gap-24px"> |
||||
<section class="flex flex-col gap-8px flex-content-center"> |
||||
<section>任务数</section> |
||||
<count-to |
||||
:start-val="0" |
||||
:end-val="1000" |
||||
:duration="2000" |
||||
:options="{ decimal: 2 }" |
||||
suffix="+" |
||||
class="font-bold color-#FFE700" |
||||
/> |
||||
</section> |
||||
<section class="flex flex-col gap-8px flex-content-center"> |
||||
<section>执法数</section> |
||||
<count-to |
||||
:start-val="0" |
||||
:end-val="1000" |
||||
:duration="2000" |
||||
:options="{ decimal: 2 }" |
||||
suffix="+" |
||||
class="font-bold color-#16B1FF" |
||||
/> |
||||
</section> |
||||
<section class="flex flex-col gap-8px flex-content-center"> |
||||
<section>企业数</section> |
||||
<count-to |
||||
:start-val="0" |
||||
:end-val="1000" |
||||
:duration="2000" |
||||
:options="{ decimal: 2 }" |
||||
suffix="+" |
||||
class="font-bold color-#56CA00" |
||||
/> |
||||
</section> |
||||
</section> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"></style> |
||||
@ -0,0 +1,412 @@
|
||||
<template> |
||||
<section class="right-wrapper" ref="rightWrapperRef"> |
||||
<TitleBox title="执法任务"> |
||||
<Charts :options="row1Options" ref="row1Chart" /> |
||||
</TitleBox> |
||||
<TitleBox> |
||||
<Charts :options="row2Options" ref="row2Chart" /> |
||||
</TitleBox> |
||||
<TitleBox title="资质许可状态"> |
||||
<section></section> |
||||
</TitleBox> |
||||
<TitleBox > |
||||
<Charts :options="row3Options" ref="row3Chart" /> |
||||
</TitleBox> |
||||
</section> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import TitleBox from './titleBox.vue' |
||||
|
||||
const rightWrapperRef = ref() |
||||
|
||||
let observer: Nullable<ResizeObserver> = null |
||||
const row1Options = ref({ |
||||
grid: { |
||||
top: 40, |
||||
bottom: 0, |
||||
left: 10, |
||||
right: 10, |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
data: ['一大队', '二大队', '三大队', '四大队', '五大队'], |
||||
axisTick: { |
||||
show: false |
||||
}, |
||||
splitLine: { |
||||
show: false |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: 'rgba(255, 255, 255, 0.20)' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
color: '#fff', |
||||
fontSize: 12 |
||||
} |
||||
}, |
||||
yAxis: [ |
||||
{ |
||||
type: 'value', |
||||
axisTick: { |
||||
show: false, |
||||
lineStyle: { |
||||
color: '#fff' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
show: false |
||||
}, |
||||
splitLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: 'rgba(255,255,255,0.2)' |
||||
} |
||||
} |
||||
}, |
||||
{ |
||||
type: 'value', |
||||
axisTick: { |
||||
show: false, |
||||
lineStyle: { |
||||
color: '#fff' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
show: false |
||||
}, |
||||
splitLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: 'rgba(255,255,255,0.2)' |
||||
} |
||||
} |
||||
} |
||||
], |
||||
series: [ |
||||
{ |
||||
type: 'bar', |
||||
yAxisIndex: 0, |
||||
name: '执法记录', |
||||
data: [100, 90, 10, 90, 90, 20, 56, 89], |
||||
barWidth: 5, |
||||
itemStyle: { |
||||
color: '#56CA00' |
||||
} |
||||
}, |
||||
{ |
||||
name: '任务数量', |
||||
type: 'line', |
||||
yAxisIndex: 1, |
||||
smooth: true, |
||||
symbol: 'circle', |
||||
itemStyle: { |
||||
color: 'rgba(22, 177, 255, 1)' |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
type: 'linear', |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: 'rgba(22, 177, 255, 0.4)' |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: 'rgba(22, 177, 255, 0)' |
||||
} |
||||
] |
||||
} |
||||
}, |
||||
data: [1000, 900, 100, 900, 900, 200, 560, 819] |
||||
} |
||||
], |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
backgroundColor: 'rgba(25, 119, 43,1)', |
||||
borderColor: 'transparent', |
||||
textStyle: { |
||||
color: '#fff' |
||||
}, |
||||
axisPointer: { |
||||
type: 'shadow', |
||||
label: { |
||||
backgroundColor: '#6a7985' |
||||
} |
||||
} |
||||
}, |
||||
legend: { |
||||
top: 0, |
||||
left: 'center', |
||||
show: true, |
||||
itemWidth: 15, |
||||
itemHeight: 15, |
||||
textStyle: { |
||||
color: '#fff' |
||||
} |
||||
} |
||||
}) |
||||
|
||||
const color = ['#56CA00', '#FFE700', '#16B1FF'] |
||||
const row2Options = ref({ |
||||
series: [ |
||||
{ |
||||
type: 'pie', |
||||
itemStyle: {}, |
||||
center: ['30%', '50%'], |
||||
radius: ['50%', '80%'], |
||||
roseType: true, |
||||
label: { |
||||
show: true, |
||||
position: 'outside', |
||||
color: 'inherit', |
||||
fontSize: 10, |
||||
alignTo: 'labelLine' |
||||
}, |
||||
labelLine: { |
||||
show: true, |
||||
length: 2 |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 335, |
||||
name: '审批通过' |
||||
}, |
||||
{ |
||||
value: 310, |
||||
name: '执法签到' |
||||
}, |
||||
{ |
||||
value: 234, |
||||
name: '整改处理' |
||||
} |
||||
].map((i, index) => { |
||||
return { |
||||
...i, |
||||
itemStyle: { |
||||
color: color[index] |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
], |
||||
legend: { |
||||
show: true, |
||||
itemWidth: 15, |
||||
itemHeight: 15, |
||||
itemGap: 10, |
||||
right: 0, |
||||
top: 'center', |
||||
orient: 'vertical', |
||||
data: [ |
||||
{ |
||||
name: '审批通过' |
||||
}, |
||||
{ |
||||
name: '执法签到' |
||||
}, |
||||
{ |
||||
name: '整改处理' |
||||
} |
||||
].map((i, index) => { |
||||
return { |
||||
...i, |
||||
textStyle: { |
||||
color: color[index] |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
}) |
||||
const row3Options=ref({ |
||||
grid: { |
||||
top: 40, |
||||
bottom: 0, |
||||
left: 10, |
||||
right: 10, |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
data: ['一大队', '二大队', '三大队', '四大队', '五大队'], |
||||
axisTick: { |
||||
show: false |
||||
}, |
||||
splitLine: { |
||||
show: false |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: 'rgba(255, 255, 255, 0.20)' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
color: '#fff', |
||||
fontSize: 12 |
||||
} |
||||
}, |
||||
yAxis: [ |
||||
{ |
||||
type: 'value', |
||||
axisTick: { |
||||
show: false, |
||||
lineStyle: { |
||||
color: '#fff' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
show: false |
||||
}, |
||||
splitLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: 'rgba(255,255,255,0.2)' |
||||
} |
||||
} |
||||
}, |
||||
{ |
||||
type: 'value', |
||||
axisTick: { |
||||
show: false, |
||||
lineStyle: { |
||||
color: '#fff' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
show: false |
||||
}, |
||||
splitLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: 'rgba(255,255,255,0.2)' |
||||
} |
||||
} |
||||
} |
||||
], |
||||
series: [ |
||||
{ |
||||
type: 'line', |
||||
yAxisIndex: 0, |
||||
name: '执法记录', |
||||
data: [120, 70, 10, 90, 90, 20, 56, 89], |
||||
smooth: true, |
||||
symbol: 'circle', |
||||
itemStyle: { |
||||
color: '#56CA00' |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
type: 'linear', |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: 'rgba(86, 220, 0, 0.4)' |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: 'rgba(86, 220, 0, 0)' |
||||
} |
||||
] |
||||
} |
||||
}, |
||||
}, |
||||
{ |
||||
name: '任务数量', |
||||
type: 'line', |
||||
yAxisIndex: 1, |
||||
smooth: true, |
||||
symbol: 'circle', |
||||
itemStyle: { |
||||
color: 'rgba(22, 177, 255, 1)' |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
type: 'linear', |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: 'rgba(22, 177, 255, 0.4)' |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: 'rgba(22, 177, 255, 0)' |
||||
} |
||||
] |
||||
} |
||||
}, |
||||
data: [1000, 900, 100, 900, 900, 200, 560, 819] |
||||
} |
||||
], |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
backgroundColor: 'rgba(25, 119, 43,1)', |
||||
borderColor: 'transparent', |
||||
textStyle: { |
||||
color: '#fff' |
||||
}, |
||||
axisPointer: { |
||||
type: 'shadow', |
||||
label: { |
||||
backgroundColor: '#6a7985' |
||||
} |
||||
} |
||||
}, |
||||
legend: { |
||||
top: 0, |
||||
left: 'center', |
||||
show: true, |
||||
itemWidth: 10, |
||||
itemHeight: 10, |
||||
textStyle: { |
||||
color: '#fff' |
||||
} |
||||
} |
||||
}) |
||||
const row1Chart = ref() |
||||
const row2Chart = ref() |
||||
const row3Chart = ref() |
||||
const initChart = () => {} |
||||
|
||||
const handlerResize = () => { |
||||
unref(row1Chart).resizeHandler() |
||||
unref(row2Chart).resizeHandler() |
||||
unref(row3Chart).resizeHandler() |
||||
} |
||||
|
||||
onMounted(() => { |
||||
initChart() |
||||
observer = new ResizeObserver(handlerResize) |
||||
observer.observe(rightWrapperRef.value) |
||||
handlerResize() |
||||
}) |
||||
|
||||
onUnmounted(() => { |
||||
observer?.disconnect() |
||||
}) |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.right-wrapper { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: grid; |
||||
grid-template-rows: 1.5fr 1fr 1.3fr 1.5fr; |
||||
grid-template-columns: 1fr; |
||||
grid-gap: 20px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,73 @@
|
||||
<template> |
||||
<section class="flex flex-col flex-items-center gap-8px"> |
||||
<section class="tabs-box "> |
||||
<section |
||||
:class="['type-item', curTpye == index ? 'item-active' : '']" |
||||
v-for="(item, index) in typeList" |
||||
:key="index" |
||||
@click="curTpye = index" |
||||
> |
||||
{{ item }} |
||||
</section> |
||||
</section> |
||||
|
||||
<section class="tabs-box"> |
||||
<section |
||||
:class="['item', curTab == index ? 'item-active' : '']" |
||||
v-for="(item, index) in tabberList" |
||||
:key="index" |
||||
@click="curTab = index" |
||||
> |
||||
{{ item }} |
||||
</section> |
||||
</section> |
||||
</section> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
const tabberList = ref([ |
||||
'环境治理专项行动', |
||||
'空气检测平台', |
||||
'环境监测', |
||||
'水质检测平台', |
||||
'土壤检测平台', |
||||
'园区环境综合监管平台' |
||||
]) |
||||
const typeList=ref([ |
||||
'本周', |
||||
'本月', |
||||
'本年', |
||||
]) |
||||
const curTpye = ref(0) |
||||
|
||||
const curTab = ref(0) |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.tabs-box { |
||||
cursor: pointer; |
||||
display: flex; |
||||
flex-flow: row nowrap; |
||||
gap: 8px; |
||||
width: fit-content; |
||||
.item { |
||||
font-size: 12px; |
||||
padding: 6px; |
||||
white-space: nowrap; |
||||
border: 1px solid rgba(255, 255, 255, 0.15); |
||||
transition: .2s all; |
||||
} |
||||
.type-item{ |
||||
font-size: 12px; |
||||
padding: 8px; |
||||
white-space: nowrap; |
||||
border: 1px solid rgba(255, 255, 255, 0.15); |
||||
transition: .2s all; |
||||
} |
||||
.item-active { |
||||
border: 1px solid #56ca00; |
||||
color: #56ca00; |
||||
background: linear-gradient(180deg, rgba(94, 205, 13, 0.17) 0%, rgba(94, 205, 13, 0.00) 100%); |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,98 @@
|
||||
<template> |
||||
<section class="title-box"> |
||||
<section class="header" v-if="title && !isRight"> |
||||
<Icon icon="svg-icon:titleIcon" /> |
||||
<span>{{ title }}</span> |
||||
</section> |
||||
<section class="right-header" v-if="title && isRight"> |
||||
<Icon icon="svg-icon:titleIcon" /> |
||||
<span>{{ title }}</span> |
||||
</section> |
||||
<section class="wrapper-info"> |
||||
<slot></slot> |
||||
</section> |
||||
</section> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
const props = defineProps({ |
||||
title: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
isRight: { |
||||
type: Boolean, |
||||
default: false |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.title-box { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-flow: column nowrap; |
||||
gap: 10px; |
||||
.header { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 4px; |
||||
padding: 6px; |
||||
width: 100%; |
||||
background: rgba(255, 255, 255, 0.05); |
||||
position: relative; |
||||
&::before { |
||||
content: ''; |
||||
position: absolute; |
||||
right: 0; |
||||
width: 2px; |
||||
background-color: rgba(255, 255, 255, 0.2); |
||||
height: 100%; |
||||
} |
||||
&::after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
width: 4px; |
||||
height: 4px; |
||||
border-top: 1px solid #fff; |
||||
border-right: 1px solid #fff; |
||||
} |
||||
} |
||||
.right-header { |
||||
display: flex; |
||||
flex-flow: row-reverse nowrap; |
||||
align-items: center; |
||||
gap: 4px; |
||||
padding: 6px; |
||||
width: 100%; |
||||
background: rgba(255, 255, 255, 0.05); |
||||
position: relative; |
||||
&::before { |
||||
content: ''; |
||||
position: absolute; |
||||
left: 0; |
||||
width: 2px; |
||||
background-color: rgba(255, 255, 255, 0.2); |
||||
height: 100%; |
||||
} |
||||
&::after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 4px; |
||||
height: 4px; |
||||
border-top: 1px solid #fff; |
||||
border-left: 1px solid #fff; |
||||
} |
||||
} |
||||
.wrapper-info { |
||||
flex: 1; |
||||
border: 1px solid rgba(255, 255, 255, 0.15); |
||||
padding: 12px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,19 @@
|
||||
<template> |
||||
<section style="padding: 4px 12px" class="flex"> |
||||
<Icon icon="svg-icon:weather-fine" :size="40"/> |
||||
<section class="flex gap-4px flex-items-center"> |
||||
<Icon icon="svg-icon:bracket" :size="20"/> |
||||
<span style="text-decoration: underline">{{new Date().getFullYear()}}</span> |
||||
<section class="h-3px w-10px bg-#16B1FF b-r-2px"></section> |
||||
<span style="text-decoration: underline">{{new Date().getMonth()+1}}</span> |
||||
<section class="h-3px w-10px bg-#16B1FF b-r-2px"></section> |
||||
<span style="text-decoration: underline">{{new Date().getDate()}}</span> |
||||
<Icon class="rotate-180" icon="svg-icon:bracket" :size="20"/> |
||||
</section> |
||||
</section> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
</script> |
||||
|
||||
<style scoped lang="scss"></style> |
||||
@ -0,0 +1,38 @@
|
||||
<template> |
||||
<section class="screen-container"> |
||||
<Header /> |
||||
<section class="chart-wrapper"> |
||||
<LeftWrapper /> |
||||
<Map /> |
||||
<Rightwrapper /> |
||||
</section> |
||||
</section> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import Header from './compenonts/header.vue' |
||||
import Map from './compenonts/map.vue' |
||||
import LeftWrapper from './compenonts/leftwrapper.vue' |
||||
import Rightwrapper from './compenonts/rightwrapper.vue' |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.screen-container { |
||||
width: 100vw; |
||||
height: 100vh; |
||||
box-sizing: border-box; |
||||
background: linear-gradient(180deg, #00a261 0%, #082019 100%); |
||||
overflow: hidden; |
||||
display: grid; |
||||
grid-template-rows: 83px 1fr; |
||||
grid-template-columns: 1fr; |
||||
padding: 12px 12px; |
||||
grid-gap: 24px; |
||||
color: #fff; |
||||
.chart-wrapper { |
||||
display: grid; |
||||
grid-template-rows: 1fr; |
||||
grid-template-columns: 1fr 2.5fr 1fr; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue