CN-1086: 实体列表静态页面开发
This commit is contained in:
刘洪洪
48
public/images/flag/011-china.svg
Normal file
48
public/images/flag/011-china.svg
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||||
|
<rect y="85.331" style="fill:#D80027;" width="512" height="341.337"/>
|
||||||
|
<g>
|
||||||
|
<polygon style="fill:#FFDA44;" points="178.923,189.567 193.579,234.674 241.008,234.674 202.637,262.552 217.294,307.661
|
||||||
|
178.923,279.782 140.552,307.661 155.208,262.552 116.837,234.674 164.266,234.674 "/>
|
||||||
|
<polygon style="fill:#FFDA44;" points="271.3,339.593 256.91,329.138 242.522,339.592 248.017,322.678 233.628,312.223
|
||||||
|
251.414,312.223 256.91,295.307 262.408,312.223 280.193,312.223 265.804,322.677 "/>
|
||||||
|
<polygon style="fill:#FFDA44;" points="308.837,287.927 291.052,287.927 285.556,304.841 280.06,287.928 262.273,287.927
|
||||||
|
276.664,277.472 271.166,260.557 285.556,271.01 299.945,260.557 294.449,277.472 "/>
|
||||||
|
<polygon style="fill:#FFDA44;" points="308.837,224.063 294.449,234.518 299.944,251.432 285.556,240.979 271.166,251.434
|
||||||
|
276.664,234.517 262.273,224.065 280.061,224.063 285.556,207.147 291.052,224.063 "/>
|
||||||
|
<polygon style="fill:#FFDA44;" points="271.3,172.397 265.805,189.313 280.193,199.766 262.408,199.767 256.91,216.684
|
||||||
|
251.414,199.766 233.629,199.768 248.018,189.312 242.522,172.396 256.91,182.851 "/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
75
public/images/flag/142-australia.svg
Normal file
75
public/images/flag/142-australia.svg
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||||
|
<rect y="85.333" style="fill:#0052B4;" width="512" height="341.337"/>
|
||||||
|
<g>
|
||||||
|
<path style="fill:#F0F0F0;" d="M223.397,255.996c0.273-0.304,0.543-0.609,0.813-0.916c-0.27,0.308-0.546,0.61-0.82,0.916H223.397z"
|
||||||
|
/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="189.217,297.923 200.175,320.836 224.922,315.118 213.839,337.971 233.739,353.752
|
||||||
|
208.963,359.337 209.032,384.735 189.217,368.845 169.403,384.735 169.472,359.337 144.696,353.752 164.596,337.971
|
||||||
|
153.513,315.118 178.259,320.836 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="387.076,326.387 392.303,337.316 404.106,334.588 398.82,345.488 408.312,353.016
|
||||||
|
396.494,355.679 396.526,367.793 387.076,360.215 377.626,367.793 377.658,355.679 365.841,353.016 375.332,345.488
|
||||||
|
370.047,334.588 381.85,337.316 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="338.453,210.448 343.68,221.378 355.483,218.649 350.197,229.55 359.688,237.078
|
||||||
|
347.871,239.741 347.903,251.856 338.453,244.276 329.002,251.856 329.035,239.741 317.217,237.078 326.708,229.55
|
||||||
|
321.424,218.649 333.226,221.378 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="387.076,144.198 392.303,155.128 404.106,152.398 398.82,163.3 408.311,170.827
|
||||||
|
396.494,173.491 396.526,185.605 387.076,178.025 377.626,185.605 377.658,173.491 365.841,170.827 375.332,163.3 370.047,152.398
|
||||||
|
381.85,155.128 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="429.547,193.886 434.774,204.815 446.576,202.087 441.292,212.987 450.783,220.514
|
||||||
|
438.965,223.178 438.998,235.292 429.547,227.714 420.097,235.292 420.129,223.178 408.312,220.514 417.803,212.987
|
||||||
|
412.517,202.087 424.32,204.815 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="399.179,251.856 403.289,264.508 416.593,264.508 405.83,272.328 409.942,284.98
|
||||||
|
399.179,277.161 388.414,284.98 392.526,272.328 381.763,264.508 395.067,264.508 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="256,85.333 256,115.886 210.833,140.985 256,140.985 256,200.344 196.897,200.344
|
||||||
|
256,233.179 256,255.996 229.32,255.996 155.826,215.17 155.826,255.996 100.174,255.996 100.174,207.423 12.744,255.996
|
||||||
|
0,255.996 0,225.443 45.167,200.344 0,200.344 0,140.985 59.103,140.985 0,108.139 0,85.333 26.68,85.333 100.174,126.16
|
||||||
|
100.174,85.333 155.826,85.333 155.826,133.906 243.256,85.333 "/>
|
||||||
|
</g>
|
||||||
|
<polygon style="fill:#D80027;" points="144,85.33 112,85.33 112,154.662 0,154.662 0,186.662 112,186.662 112,255.996 144,255.996
|
||||||
|
144,186.662 256,186.662 256,154.662 144,154.662 "/>
|
||||||
|
<polygon style="fill:#0052B4;" points="155.826,200.344 256,255.996 256,240.259 184.153,200.344 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="155.826,200.344 256,255.996 256,240.259 184.153,200.344 "/>
|
||||||
|
<g>
|
||||||
|
<polygon style="fill:#D80027;" points="155.826,200.344 256,255.996 256,240.259 184.153,200.344 "/>
|
||||||
|
<polygon style="fill:#D80027;" points="71.846,200.344 0,240.259 0,255.996 0,255.996 100.174,200.344 "/>
|
||||||
|
</g>
|
||||||
|
<polygon style="fill:#0052B4;" points="100.174,140.982 0,85.33 0,101.067 71.847,140.982 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="100.174,140.982 0,85.33 0,101.067 71.847,140.982 "/>
|
||||||
|
<g>
|
||||||
|
<polygon style="fill:#D80027;" points="100.174,140.982 0,85.33 0,101.067 71.847,140.982 "/>
|
||||||
|
<polygon style="fill:#D80027;" points="184.154,140.982 256,101.067 256,85.33 256,85.33 155.826,140.982 "/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.6 KiB |
69
public/images/flag/185-united states of america.svg
Normal file
69
public/images/flag/185-united states of america.svg
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||||
|
<rect y="85.331" style="fill:#F0F0F0;" width="512" height="341.337"/>
|
||||||
|
<g>
|
||||||
|
<rect y="127.994" style="fill:#D80027;" width="512" height="42.663"/>
|
||||||
|
<rect y="213.331" style="fill:#D80027;" width="512" height="42.663"/>
|
||||||
|
<rect y="298.657" style="fill:#D80027;" width="512" height="42.663"/>
|
||||||
|
<rect y="383.994" style="fill:#D80027;" width="512" height="42.663"/>
|
||||||
|
</g>
|
||||||
|
<rect y="85.331" style="fill:#2E52B2;" width="256" height="183.797"/>
|
||||||
|
<g>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="99.822,160.624 95.699,173.308 82.363,173.308 93.154,181.143 89.031,193.826
|
||||||
|
99.822,185.991 110.606,193.826 106.484,181.143 117.275,173.308 103.938,173.308 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="103.938,219.08 99.822,206.397 95.699,219.08 82.363,219.08 93.154,226.916 89.031,239.599
|
||||||
|
99.822,231.763 110.606,239.599 106.484,226.916 117.275,219.08 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="47.577,219.08 43.46,206.397 39.337,219.08 26.001,219.08 36.792,226.916 32.669,239.599
|
||||||
|
43.46,231.763 54.245,239.599 50.123,226.916 60.912,219.08 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="43.46,160.624 39.337,173.308 26.001,173.308 36.792,181.143 32.669,193.826 43.46,185.991
|
||||||
|
54.245,193.826 50.123,181.143 60.912,173.308 47.577,173.308 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="99.822,114.85 95.699,127.535 82.363,127.535 93.154,135.371 89.031,148.054
|
||||||
|
99.822,140.218 110.606,148.054 106.484,135.371 117.275,127.535 103.938,127.535 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="43.46,114.85 39.337,127.535 26.001,127.535 36.792,135.371 32.669,148.054 43.46,140.218
|
||||||
|
54.245,148.054 50.123,135.371 60.912,127.535 47.577,127.535 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="156.183,160.624 152.061,173.308 138.725,173.308 149.515,181.143 145.394,193.826
|
||||||
|
156.183,185.991 166.969,193.826 162.846,181.143 173.637,173.308 160.301,173.308 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="160.301,219.08 156.183,206.397 152.061,219.08 138.725,219.08 149.515,226.916
|
||||||
|
145.394,239.599 156.183,231.763 166.969,239.599 162.846,226.916 173.637,219.08 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="216.663,219.08 212.546,206.397 208.423,219.08 195.088,219.08 205.877,226.916
|
||||||
|
201.755,239.599 212.546,231.763 223.331,239.599 219.208,226.916 229.999,219.08 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="212.546,160.624 208.423,173.308 195.088,173.308 205.877,181.143 201.755,193.826
|
||||||
|
212.546,185.991 223.331,193.826 219.208,181.143 229.999,173.308 216.663,173.308 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="156.183,114.85 152.061,127.535 138.725,127.535 149.515,135.371 145.394,148.054
|
||||||
|
156.183,140.218 166.969,148.054 162.846,135.371 173.637,127.535 160.301,127.535 "/>
|
||||||
|
<polygon style="fill:#F0F0F0;" points="212.546,114.85 208.423,127.535 195.088,127.535 205.877,135.371 201.755,148.054
|
||||||
|
212.546,140.218 223.331,148.054 219.208,135.371 229.999,127.535 216.663,127.535 "/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.3 KiB |
38
public/images/flag/207-germany.svg
Normal file
38
public/images/flag/207-germany.svg
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||||
|
<rect y="85.331" style="fill:#D80027;" width="512" height="341.337"/>
|
||||||
|
<rect y="85.331" width="512" height="113.775"/>
|
||||||
|
<rect y="312.882" style="fill:#FFDA44;" width="512" height="113.775"/>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 684 B |
57
public/images/flag/218-south korea.svg
Normal file
57
public/images/flag/218-south korea.svg
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||||
|
<rect y="85.331" style="fill:#FFFFFF;" width="512" height="341.337"/>
|
||||||
|
<path style="fill:#D80027;" d="M318.33,255.994c0,15.583-27.906,54.539-62.33,54.539s-62.33-38.957-62.33-54.539
|
||||||
|
c0-34.424,27.906-62.33,62.33-62.33S318.33,221.57,318.33,255.994z"/>
|
||||||
|
<path style="fill:#0052B4;" d="M318.33,255.994c0,34.424-27.906,62.33-62.33,62.33s-62.33-27.906-62.33-62.33"/>
|
||||||
|
<rect x="324.205" y="300.55" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -119.6501 327.8224)" width="23.374" height="15.582"/>
|
||||||
|
<rect x="296.657" y="328.085" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -147.1889 316.408)" width="23.374" height="15.582"/>
|
||||||
|
<rect x="357.26" y="333.586" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -133.3277 360.8719)" width="23.374" height="15.582"/>
|
||||||
|
<rect x="329.712" y="361.143" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -160.8823 349.464)" width="23.374" height="15.582"/>
|
||||||
|
<rect x="340.732" y="317.068" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -126.4889 344.3472)" width="23.374" height="15.582"/>
|
||||||
|
<rect x="313.185" y="344.614" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -154.0356 332.936)" width="23.374" height="15.582"/>
|
||||||
|
<rect x="307.483" y="165.555" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 455.5344 535.3814)" width="62.33" height="15.582"/>
|
||||||
|
<rect x="296.656" y="168.315" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 401.8486 518.6624)" width="23.374" height="15.581"/>
|
||||||
|
<rect x="324.193" y="195.864" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 429.3763 585.1636)" width="23.374" height="15.581"/>
|
||||||
|
<rect x="329.693" y="135.257" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 481.6206 485.591)" width="23.374" height="15.582"/>
|
||||||
|
<rect x="357.252" y="162.807" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 509.1863 552.108)" width="23.374" height="15.582"/>
|
||||||
|
<rect x="125.671" y="347.369" transform="matrix(0.7071 0.7071 -0.7071 0.7071 297.0721 -6.8758)" width="62.33" height="15.582"/>
|
||||||
|
<rect x="175.435" y="344.62" transform="matrix(0.7071 0.7071 -0.7071 0.7071 303.9983 -29.0962)" width="23.374" height="15.581"/>
|
||||||
|
<rect x="147.898" y="317.072" transform="matrix(0.7071 0.7071 -0.7071 0.7071 276.4547 -17.6934)" width="23.374" height="15.582"/>
|
||||||
|
<rect x="158.724" y="314.322" transform="matrix(0.7071 0.7071 -0.7071 0.7071 283.386 -39.9269)" width="62.33" height="15.582"/>
|
||||||
|
<rect x="125.672" y="149.023" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 378.6212 156.7987)" width="62.33" height="15.582"/>
|
||||||
|
<rect x="142.182" y="165.56" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 418.4998 173.3536)" width="62.33" height="15.582"/>
|
||||||
|
<rect x="158.712" y="182.089" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 458.4043 189.8812)" width="62.33" height="15.581"/>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
@@ -42,6 +42,10 @@
|
|||||||
color: #A6AAAE;
|
color: #A6AAAE;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
.cn-icon-filter {
|
||||||
|
color: #A6AAAE;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
.el-icon-search {
|
.el-icon-search {
|
||||||
color: #3976CB;
|
color: #3976CB;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
@@ -64,6 +68,10 @@
|
|||||||
color: #A6AAAE;
|
color: #A6AAAE;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
.cn-icon-filter {
|
||||||
|
color: #A6AAAE;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
.el-icon-search {
|
.el-icon-search {
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|||||||
@@ -10,9 +10,9 @@
|
|||||||
right: 10px;
|
right: 10px;
|
||||||
|
|
||||||
.search__suffix {
|
.search__suffix {
|
||||||
margin-left: 8px;
|
//margin-left: 8px;
|
||||||
|
|
||||||
.cn-icon-search-advance, .cn-icon-search-normal {
|
.cn-icon-search-advance, .cn-icon-search-normal, .cn-icon-filter {
|
||||||
color: #A6AAAE;
|
color: #A6AAAE;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -50,6 +50,10 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
.explorer-top-tools-new {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
.explorer-top-tools-title {
|
.explorer-top-tools-title {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
@@ -77,6 +81,13 @@
|
|||||||
border: 1px solid #E2E5EC;
|
border: 1px solid #E2E5EC;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
.explorer-result {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #353636;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
.explorer-container {
|
.explorer-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: visible; /*overflow: hidden;*/
|
overflow: visible; /*overflow: hidden;*/
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
transition: all .2s;
|
transition: all .2s;
|
||||||
|
border: 1px solid #E2E5EC;
|
||||||
|
|
||||||
&:hover .cn-entity__header .header__content {
|
&:hover .cn-entity__header .header__content {
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,8 @@
|
|||||||
.cn-entity--list {
|
.cn-entity--list {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
border: 1px #E2E5EC solid;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
.cn-entity__collapse {
|
.cn-entity__collapse {
|
||||||
margin-bottom: 1px;
|
margin-bottom: 1px;
|
||||||
@@ -9,6 +12,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
background-color: #F3F7FA;
|
background-color: #F3F7FA;
|
||||||
|
border-radius: 4px 0 0 4px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
transform: rotate(0);
|
transform: rotate(0);
|
||||||
@@ -36,9 +40,11 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
align-content: center;
|
||||||
padding: 16px 0;
|
padding: 16px 0;
|
||||||
margin-bottom: 1px;
|
margin-bottom: 1px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
border-radius: 0 4px 4px 0;
|
||||||
|
|
||||||
.cn-entity__icon {
|
.cn-entity__icon {
|
||||||
margin-left: 26px;
|
margin-left: 26px;
|
||||||
@@ -70,6 +76,12 @@
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding-bottom: 3px;
|
padding-bottom: 3px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
|
.cn-entity__header-title {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.cn-entity__header-tag {
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cn-entity__body {
|
.cn-entity__body {
|
||||||
@@ -147,8 +159,6 @@
|
|||||||
span:last-of-type {
|
span:last-of-type {
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -156,11 +166,18 @@
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
padding: 0 30px;
|
padding: 0 30px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #3976CB;
|
color: #2C72C6;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-top: -17px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -75,10 +75,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="tag-search__add" @click="addCondition">{{$t('entities.advancedSearch.add')}}</div>
|
<div class="tag-search__add" @click="addCondition">{{$t('entities.advancedSearch.add')}}</div>
|
||||||
<div class="search__suffixes search__suffixes--tag-mode">
|
<div class="search__suffixes search__suffixes--tag-mode">
|
||||||
<div class="search__suffix" @click="changeMode">
|
<div class="search__suffix" style="margin-right: 12px" @click="changeMode">
|
||||||
<i class="cn-icon cn-icon-search-normal"></i>
|
<i class="cn-icon cn-icon-search-normal"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="search__suffix" @click="search">
|
<div class="search__suffix new-search__suffix" @click="search">
|
||||||
<i class="el-icon-search"></i>
|
<i class="el-icon-search"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -415,3 +415,20 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.new-search__suffix {
|
||||||
|
width: 41px;
|
||||||
|
height: 41px;
|
||||||
|
line-height: 41px;
|
||||||
|
background: #38ACD2;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: -10px;
|
||||||
|
margin-right: -10px;
|
||||||
|
|
||||||
|
.el-icon-search {
|
||||||
|
color: #fff !important;
|
||||||
|
margin-top: 9px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -4,9 +4,12 @@
|
|||||||
></textarea>
|
></textarea>
|
||||||
<div class="search__suffixes search__suffixes--text-mode">
|
<div class="search__suffixes search__suffixes--text-mode">
|
||||||
<div class="search__suffix" @click="changeMode">
|
<div class="search__suffix" @click="changeMode">
|
||||||
<i class="cn-icon cn-icon-search-advance"></i>
|
<i class="cn-icon cn-icon-filter"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="search__suffix" @click="search">
|
<div class="search__suffix-close" @click="cleanParams">
|
||||||
|
<i class="el-icon-error"></i>
|
||||||
|
</div>
|
||||||
|
<div class="search__suffix new-search__suffix" @click="search">
|
||||||
<i class="el-icon-search"></i>
|
<i class="el-icon-search"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -38,6 +41,9 @@ export default {
|
|||||||
},
|
},
|
||||||
emits: ['changeMode', 'search'],
|
emits: ['changeMode', 'search'],
|
||||||
methods: {
|
methods: {
|
||||||
|
cleanParams () {
|
||||||
|
toRaw(this.codeMirror).setValue('')
|
||||||
|
},
|
||||||
initCodeMirror () {
|
initCodeMirror () {
|
||||||
this.codeMirror = CodeMirror.fromTextArea(this.$refs.textSearch, {
|
this.codeMirror = CodeMirror.fromTextArea(this.$refs.textSearch, {
|
||||||
mode: {
|
mode: {
|
||||||
@@ -151,3 +157,29 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.search__suffix-close {
|
||||||
|
.el-icon-error {
|
||||||
|
font-size: 17px;
|
||||||
|
color: #C4C4C4;
|
||||||
|
margin: 0 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-search__suffix {
|
||||||
|
width: 41px;
|
||||||
|
height: 41px;
|
||||||
|
line-height: 41px;
|
||||||
|
background: #38ACD2;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: -10px;
|
||||||
|
margin-right: -10px;
|
||||||
|
|
||||||
|
.el-icon-search {
|
||||||
|
color: #fff !important;
|
||||||
|
margin-top: 9px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ export default {
|
|||||||
entityDetectionStyle () {
|
entityDetectionStyle () {
|
||||||
const route = this.$route.name !== undefined ? this.$route.name : this.$route
|
const route = this.$route.name !== undefined ? this.$route.name : this.$route
|
||||||
if (listScrollPath.indexOf(route.path) > -1) {
|
if (listScrollPath.indexOf(route.path) > -1) {
|
||||||
const style = route.path === listScrollPath[0] ? 'overflow:auto;background-color: #EFF2F5;' : 'overflow:auto;'
|
const style = 'overflow:auto;'
|
||||||
return style
|
return style
|
||||||
} else {
|
} else {
|
||||||
return ''
|
return ''
|
||||||
|
|||||||
@@ -3,13 +3,18 @@
|
|||||||
class="entity-explorer"
|
class="entity-explorer"
|
||||||
:class="{'entity-explorer--show-list': showList}">
|
:class="{'entity-explorer--show-list': showList}">
|
||||||
<!-- 顶部工具栏，在列表页显示 -->
|
<!-- 顶部工具栏，在列表页显示 -->
|
||||||
<div class="explorer-top-tools" v-show="showList">
|
<div class="explorer-top-tools explorer-top-tools-new" v-show="showList">
|
||||||
<DateTimeRange :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" :date-range="timeFilter.dateRangeValue" ref="dateTimeRange" @change="reload"/>
|
<div class="explorer-detection-top-tools">
|
||||||
<TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
|
<div class="explorer-top-tools-title">{{$t('network.entity')}}</div>
|
||||||
<el-button-group size="mini">
|
</div>
|
||||||
<el-button size="mini" @click="listMode = 'list'" :class="{'active': listMode === 'list'}"><i class="cn-icon cn-icon-list"></i></el-button>
|
<div class="explorer-top-tools">
|
||||||
<el-button size="mini" @click="listMode = 'block'" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></i></el-button>
|
<DateTimeRange :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" :date-range="timeFilter.dateRangeValue" ref="dateTimeRange" @change="reload"/>
|
||||||
</el-button-group>
|
<TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
|
||||||
|
<el-button-group size="mini">
|
||||||
|
<el-button size="mini" @click="listMode = 'list'" :class="{'active': listMode === 'list'}"><i class="cn-icon cn-icon-list"></i></el-button>
|
||||||
|
<el-button size="mini" @click="listMode = 'block'" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></i></el-button>
|
||||||
|
</el-button-group>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 搜索组件 -->
|
<!-- 搜索组件 -->
|
||||||
<explorer-search
|
<explorer-search
|
||||||
@@ -18,6 +23,11 @@
|
|||||||
:show-list="showList"
|
:show-list="showList"
|
||||||
@search="search"
|
@search="search"
|
||||||
></explorer-search>
|
></explorer-search>
|
||||||
|
|
||||||
|
<!--todo静态数据，之后记得修改-->
|
||||||
|
<div class="explorer-result" v-if="showList">
|
||||||
|
8,866 results，IP 2666，Domain 3200，APP 3000
|
||||||
|
</div>
|
||||||
<!-- 内容区 -->
|
<!-- 内容区 -->
|
||||||
<div class="explorer-container" v-if="showList" style="height: calc(100% - 20px); flex-direction: column">
|
<div class="explorer-container" v-if="showList" style="height: calc(100% - 20px); flex-direction: column">
|
||||||
<div style="display: flex; height: auto;">
|
<div style="display: flex; height: auto;">
|
||||||
|
|||||||
@@ -1,149 +1,382 @@
|
|||||||
<template >
|
<template>
|
||||||
<div class="entity-filter-case">
|
<div class="entity-filter-case">
|
||||||
<div class="filter-case__header">{{$t('entities.filter')}}</div>
|
<div class="filter-case__header">{{ $t('entities.filter1') }}</div>
|
||||||
<div
|
|
||||||
class="entity-filter"
|
|
||||||
v-for="(filters, index) in filterData"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div class="filter__header">{{filters.title}}</div>
|
|
||||||
<div class="filter__body">
|
|
||||||
|
|
||||||
<div class="filter__row" v-for="(item, i) in filters.data" :key="i">
|
<div class="entity-filter" v-for="(item, index) in filterData" :key="index">
|
||||||
<el-popover popper-class="filter__row-popover" placement="right-start" :width="440" v-model:visible="item.showTopTen">
|
<div class="filter__header">
|
||||||
<template #reference>
|
<i :class="item.icon"></i>
|
||||||
<div class="filter__row-popover" @click="showTopDialog(i, item, filters)">
|
{{ item.title }}
|
||||||
<div class="row__label">
|
</div>
|
||||||
<i :class="item.icon"></i>
|
|
||||||
<span>{{item.label}}</span>
|
<div class="filter__body">
|
||||||
</div>
|
<div class="filter__body-item" v-for="(data, i) in item.data" :key="i" @click="filter(data.label, data)">
|
||||||
<div class="row__value">
|
<div class="filter__body-item-left">
|
||||||
<loading :loading="loadingLeft" size="small"></loading>
|
<div v-if="data.flag">
|
||||||
<span>{{item.value}}</span>
|
<img :src="require(`../../../public/images/flag/${data.flag}.svg`)" class="filter-country-flag"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div v-else class="filter__body-item-left-index">{{ i }}</div>
|
||||||
</template>
|
<div class="filter__body-item-left-label">
|
||||||
<entity-top
|
<el-tooltip :content="data.label" placement="top" effect="light" :disabled="disabledLabel">
|
||||||
ref="entityTopTenPop"
|
<span @mouseenter="handleMouse(`filter${index}${i}`)" :id="`filter${index}${i}`">{{ data.label }}</span>
|
||||||
:loading="loading"
|
</el-tooltip>
|
||||||
:popover-data="popoverData"
|
</div>
|
||||||
:item-data="itemData"
|
</div>
|
||||||
:total-count="totalCount"
|
|
||||||
:top-column="item.topColumn"
|
<div class="filter__body-item-right">{{ data.value }}</div>
|
||||||
@filter="filter"
|
|
||||||
></entity-top>
|
|
||||||
</el-popover>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="filter-hr"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import EntityTop from '@/views/entityExplorer/EntityTop'
|
|
||||||
import { get } from '@/utils/http'
|
|
||||||
import { api } from '@/utils/api'
|
|
||||||
import Loading from '@/components/common/Loading'
|
|
||||||
export default {
|
export default {
|
||||||
name: 'EntityFilter',
|
name: 'EntityFilter',
|
||||||
components: {
|
|
||||||
Loading,
|
|
||||||
EntityTop
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
filterData: Array,
|
|
||||||
q: String,
|
|
||||||
timeFilter: Object,
|
|
||||||
loadingLeft: Boolean
|
|
||||||
},
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
topList: 'list',
|
filterData: [
|
||||||
topData: [],
|
{
|
||||||
entityTopTenData: [],
|
icon: 'cn-icon cn-icon-registration-country',
|
||||||
currentColumn: {},
|
title: 'Top Countries',
|
||||||
totalCount: 0,
|
totalCount: 0,
|
||||||
loading: false,
|
data: [
|
||||||
popoverData: [],
|
{
|
||||||
itemData: {}
|
label: 'China',
|
||||||
}
|
flag: '011-china',
|
||||||
},
|
topColumn: 'ip_location_country', // top弹框查询字段
|
||||||
watch: {
|
value: 364
|
||||||
currentColumn (n, o) {
|
},
|
||||||
if (n.column === 'dnsServerOrgCount') {
|
{
|
||||||
this.totalCount = this.filterData[3].orgTotalCount
|
label: 'Australia',
|
||||||
} else if (n.column === 'dnsServerSoftwareCount') {
|
flag: '142-australia',
|
||||||
this.totalCount = this.filterData[3].softwareTotalCount
|
topColumn: 'ip_location_country', // top弹框查询字段
|
||||||
} else if (n.column === 'dnsServerOsCount') {
|
value: 226
|
||||||
this.totalCount = this.filterData[3].osTotalCount
|
},
|
||||||
} else if (n.column === 'categoryDistinctCount' && n.type === 'app') {
|
{
|
||||||
this.totalCount = this.filterData[1].totalCount
|
label: 'South Korea',
|
||||||
} else {
|
flag: '218-south korea',
|
||||||
let count = 0
|
topColumn: 'ip_location_country', // top弹框查询字段
|
||||||
this.filterData.forEach(f => {
|
value: 120
|
||||||
const filter = f.data.some(d => d.column === n.column)
|
},
|
||||||
if (filter) {
|
{
|
||||||
count = f.totalCount
|
label: 'Germany',
|
||||||
}
|
flag: '207-germany',
|
||||||
})
|
topColumn: 'ip_location_country', // top弹框查询字段
|
||||||
this.totalCount = count
|
value: 120
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
label: 'America',
|
||||||
|
flag: '185-united states of america',
|
||||||
|
topColumn: 'ip_location_country', // top弹框查询字段
|
||||||
|
value: 120
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'cn-icon cn-icon-city',
|
||||||
|
title: 'Top Cities',
|
||||||
|
totalCount: 0,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
label: 'Beijing',
|
||||||
|
topColumn: 'ip_location_city', // top弹框查询字段
|
||||||
|
value: 364
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Shanghai',
|
||||||
|
topColumn: 'ip_location_city', // top弹框查询字段
|
||||||
|
value: 226
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Guangzhou',
|
||||||
|
topColumn: 'ip_location_city', // top弹框查询字段
|
||||||
|
value: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Hangzhou',
|
||||||
|
topColumn: 'ip_location_city', // top弹框查询字段
|
||||||
|
value: 64
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Shenzhen',
|
||||||
|
topColumn: 'ip_location_city', // top弹框查询字段
|
||||||
|
value: 48
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'cn-icon cn-icon-org',
|
||||||
|
title: 'Top Oranization',
|
||||||
|
totalCount: 0,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
label: 'China internet network information Center',
|
||||||
|
topColumn: 'ip_location_org', // top弹框查询字段
|
||||||
|
value: 364
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Educause',
|
||||||
|
topColumn: 'ip_location_org', // top弹框查询字段
|
||||||
|
value: 226
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Telecommunication tokelau company',
|
||||||
|
topColumn: 'ip_location_org', // top弹框查询字段
|
||||||
|
value: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Universidad del valle de guatemala',
|
||||||
|
topColumn: 'ip_location_org', // top弹框查询字段
|
||||||
|
value: 64
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Internet systems consortium',
|
||||||
|
topColumn: 'ip_location_org', // top弹框查询字段
|
||||||
|
value: 48
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'cn-icon cn-icon-tag',
|
||||||
|
title: 'Top Tags',
|
||||||
|
totalCount: 0,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
label: 'Internet',
|
||||||
|
topColumn: 'ip_location_tag', // top弹框查询字段
|
||||||
|
value: 364
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Virus software',
|
||||||
|
topColumn: 'ip_location_tag', // top弹框查询字段
|
||||||
|
value: 226
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Information Technology',
|
||||||
|
topColumn: 'ip_location_tag', // top弹框查询字段
|
||||||
|
value: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Information Technology',
|
||||||
|
topColumn: 'ip_location_tag', // top弹框查询字段
|
||||||
|
value: 64
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Security software',
|
||||||
|
topColumn: 'ip_location_tag', // top弹框查询字段
|
||||||
|
value: 48
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'cn-icon cn-icon-category2',
|
||||||
|
title: 'Top Domain Categories',
|
||||||
|
totalCount: 0,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
label: 'Business and Economy',
|
||||||
|
topColumn: 'ip_location_category', // top弹框查询字段
|
||||||
|
value: 364
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Games',
|
||||||
|
topColumn: 'ip_location_category', // top弹框查询字段
|
||||||
|
value: 226
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Society',
|
||||||
|
topColumn: 'ip_location_category', // top弹框查询字段
|
||||||
|
value: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Government',
|
||||||
|
topColumn: 'ip_location_category', // top弹框查询字段
|
||||||
|
value: 64
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Computer and Internet Info',
|
||||||
|
topColumn: 'ip_location_category', // top弹框查询字段
|
||||||
|
value: 48
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'cn-icon cn-icon-category2',
|
||||||
|
title: 'Top App Categories',
|
||||||
|
totalCount: 0,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
label: 'Media',
|
||||||
|
topColumn: 'ip_location_category', // top弹框查询字段
|
||||||
|
value: 364
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Networking',
|
||||||
|
topColumn: 'ip_location_category', // top弹框查询字段
|
||||||
|
value: 226
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Collaboration',
|
||||||
|
topColumn: 'ip_location_category', // top弹框查询字段
|
||||||
|
value: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Bussiness-systems',
|
||||||
|
topColumn: 'ip_location_category', // top弹框查询字段
|
||||||
|
value: 64
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'General-internet',
|
||||||
|
topColumn: 'ip_location_category', // top弹框查询字段
|
||||||
|
value: 48
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'cn-icon cn-icon-as',
|
||||||
|
title: 'Top ASNs',
|
||||||
|
totalCount: 0,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
label: 'AS4837',
|
||||||
|
topColumn: 'ip_location_asn', // top弹框查询字段
|
||||||
|
value: 364
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'AS9808',
|
||||||
|
topColumn: 'ip_location_asn', // top弹框查询字段
|
||||||
|
value: 226
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'AS4134',
|
||||||
|
topColumn: 'ip_location_asn', // top弹框查询字段
|
||||||
|
value: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'AS37963',
|
||||||
|
topColumn: 'ip_location_asn', // top弹框查询字段
|
||||||
|
value: 64
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'AS54994',
|
||||||
|
topColumn: 'ip_location_asn', // top弹框查询字段
|
||||||
|
value: 48
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
disabledLabel: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
showTopDialog (i, item, filter) {
|
/**
|
||||||
if (this.currentColumn.column === item.column && item.showTopTen) {
|
* 判断文字是否溢出，超出则鼠标移入tooltip显示，否则鼠标移入不显示
|
||||||
item.showTopTen = false
|
* @param id
|
||||||
return
|
*/
|
||||||
|
handleMouse (id) {
|
||||||
|
const dom = document.getElementById(id)
|
||||||
|
if (dom) {
|
||||||
|
const width = document.getElementById(id).offsetWidth
|
||||||
|
this.disabledLabel = width < 180
|
||||||
|
} else {
|
||||||
|
this.disabledLabel = true
|
||||||
}
|
}
|
||||||
this.filterData.forEach(f => {
|
|
||||||
f.data.forEach(ff => {
|
|
||||||
ff.showTopTen = false
|
|
||||||
})
|
|
||||||
})
|
|
||||||
item.showTopTen = true
|
|
||||||
this.currentColumn = {
|
|
||||||
column: item.column,
|
|
||||||
type: filter.type
|
|
||||||
}
|
|
||||||
const queryParams = {
|
|
||||||
q: this.q,
|
|
||||||
entityType: filter.type,
|
|
||||||
column: item.topColumn,
|
|
||||||
top: 10,
|
|
||||||
startTime: parseInt(this.timeFilter.startTime / 1000),
|
|
||||||
endTime: parseInt(this.timeFilter.endTime / 1000)
|
|
||||||
}
|
|
||||||
this.loading = true
|
|
||||||
this.popoverData = []
|
|
||||||
this.itemData = {}
|
|
||||||
get(api.filterTop, queryParams).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
if (this.currentColumn.column === item.column) {
|
|
||||||
if (filter.type === 'dns') {
|
|
||||||
this.popoverData = response.data.result.filter(f => {
|
|
||||||
return f.count > 0
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
this.popoverData = response.data.result
|
|
||||||
}
|
|
||||||
this.itemData = item
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.popoverData = []
|
|
||||||
this.itemData = item
|
|
||||||
}
|
|
||||||
this.loading = false
|
|
||||||
}).catch(e => {
|
|
||||||
this.popoverData = []
|
|
||||||
this.itemData = item
|
|
||||||
this.loading = false
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
filter (name, topData) {
|
filter (name, data) {
|
||||||
this.showTopDialog('', topData)
|
this.$emit('filter', name, data)
|
||||||
this.$emit('filter', name, topData)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.entity-filter-case {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 280px;
|
||||||
|
margin-right: 10px;
|
||||||
|
overflow: auto;
|
||||||
|
z-index: 1;
|
||||||
|
border: 1px solid rgba(226, 229, 236, 1) !important;
|
||||||
|
border-radius: 4px !important;
|
||||||
|
|
||||||
|
.filter__header {
|
||||||
|
height: 46px;
|
||||||
|
line-height: 46px;
|
||||||
|
margin: 0 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #353636;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter__body {
|
||||||
|
width: calc(100% - 40px);
|
||||||
|
margin: 0 20px;
|
||||||
|
|
||||||
|
.filter-hr {
|
||||||
|
width: calc(100% + 20px);
|
||||||
|
margin-left: -10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
height: 1px;
|
||||||
|
background: #EFF2F5;
|
||||||
|
//background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter__body-item {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.filter__body-item-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #353636;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
.filter-country-flag {
|
||||||
|
width: 18px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter__body-item-left-index {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: center;
|
||||||
|
background: #EFF2F5;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-right: 6px;
|
||||||
|
font-family: NotoSansHans-Black;
|
||||||
|
font-size: 9px;
|
||||||
|
color: #96A2B0;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter__body-item-left-label {
|
||||||
|
max-width: 180px;
|
||||||
|
font-family: NotoSansSChineseRegular;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #353636;
|
||||||
|
font-weight: 400;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter__body-item-right {
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-family: NotoSansSChineseRegular;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #717171;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -9,8 +9,12 @@
|
|||||||
<div class="cn-entity__case">
|
<div class="cn-entity__case">
|
||||||
<div class="cn-entity__icon"><i :class="iconClass"></i></div>
|
<div class="cn-entity__icon"><i :class="iconClass"></i></div>
|
||||||
<div class="cn-entity__row">
|
<div class="cn-entity__row">
|
||||||
<div class="cn-entity__header">
|
<div class="cn-entity__header" style="display: flex">
|
||||||
{{ entityData.ipAddr || entityData.domainName || entityData.appName || 'Unknown' }}
|
<span class="cn-entity__header-title">{{ entityData.ipAddr || entityData.domainName || entityData.appName || 'Unknown' }}</span>
|
||||||
|
<span class="entity-detail" style="display: flex">
|
||||||
|
<span style="width: 62px;" class="entity-tag entity-tag--small entity-tag--level-two-positive margin-r-6">信息技术</span>
|
||||||
|
<span style="width: 50px;" class="entity-tag entity-tag--small entity-tag--level-two-normal margin-r-6">互联网</span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="cn-entity__body">
|
<div class="cn-entity__body">
|
||||||
<div class="body__basic-info">
|
<div class="body__basic-info">
|
||||||
@@ -127,19 +131,20 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info__item">
|
<!-- <div class="basic-info__item">-->
|
||||||
<i class="cn-icon cn-icon-entity-alert"></i>
|
<!-- <i class="cn-icon cn-icon-entity-alert"></i>-->
|
||||||
<span>{{ $t('entities.recentAlert') }} : </span>
|
<!-- <span>{{ $t('entities.recentAlert') }} : </span>-->
|
||||||
<span>{{ entityData.performanceCount }}</span>
|
<!-- <span>{{ entityData.performanceCount }}</span>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div class="basic-info__item">
|
<!-- <div class="basic-info__item">-->
|
||||||
<i class="cn-icon cn-icon-safe"></i>
|
<!-- <i class="cn-icon cn-icon-safe"></i>-->
|
||||||
<span>{{ $t('entities.recentSecurity') }} : </span>
|
<!-- <span>{{ $t('entities.recentSecurity') }} : </span>-->
|
||||||
<span>{{ entityData.securityCount }}</span>
|
<!-- <span>{{ entityData.securityCount }}</span>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
</div>
|
</div>
|
||||||
<div class="show-detail" @click="showDetail">
|
<div class="show-detail">
|
||||||
{{ $t('overall.detail') }}>
|
<div @click="showDetail"><i class="cn-icon cn-icon-detail"></i>{{ $t('overall.detail') }} ></div>
|
||||||
|
<div><i class="cn-icon cn-icon-graph"></i>{{ $t('entities.graph') }} ></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class="explorer-search">
|
<div class="explorer-search">
|
||||||
<div class="explorer-search__title" v-show="!showList">{{$t('search.title')}}</div>
|
<div class="explorer-search__title" v-show="!showList">{{$t('search.title')}}</div>
|
||||||
<div class="explorer-search__input-case" :class="{'explorer-search__input-case--question-mark-in-line': showList}">
|
<div class="explorer-search__input-case" :class="{'explorer-search__input-case--question-mark-in-line': showList}">
|
||||||
<div class="explorer-search__input">
|
<div class="explorer-search__input" style="border: 1px #DEDEDE solid;height: 42px;">
|
||||||
<advanced-search
|
<advanced-search
|
||||||
ref="search"
|
ref="search"
|
||||||
:column-list="columnList"
|
:column-list="columnList"
|
||||||
|
|||||||
Reference in New Issue
Block a user