.
This commit is contained in:
MR-ZC
parent
45e39de2a6
commit
ddd0d9ac66
@ -7,4 +7,5 @@ import { RouterLink, RouterView } from 'vue-router'
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
BIN
src/assets/img/Rectangle 27@1x.png
Normal file
BIN
src/assets/img/Rectangle 27@1x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
src/assets/img/Rectangle 28@1x.png
Normal file
BIN
src/assets/img/Rectangle 28@1x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 17 KiB |
BIN
src/assets/img/header_left_bg——.png
Normal file
BIN
src/assets/img/header_left_bg——.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/img/image@1x.png
Normal file
BIN
src/assets/img/image@1x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 KiB |
1
src/assets/img/zf_event_list_icon.svg
Normal file
1
src/assets/img/zf_event_list_icon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.9 KiB |
1
src/assets/img/zf_position_full_icon.svg
Normal file
1
src/assets/img/zf_position_full_icon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><g><g></g><g><path d="M7.4999559765625,1.6669921875L7.4999559765625,3.3336621875L4.1666259765625,3.3336621875C3.7392659765625,3.3336621875,3.3870359765625,3.6553621874999997,3.3388959765625,4.0698121875L3.3332959765625,4.1669921875L3.3332959765625,7.5003221875L1.6666259765625,7.5003221875L1.6666259765625,4.1669921875C1.6666259765625,2.7862821875,2.7859159765625,1.6669921875,4.1666259765625,1.6669921875L7.4999559765625,1.6669921875ZM15.8329259765625,1.6669921875C17.2137259765625,1.6669921875,18.3329259765625,2.7862821875,18.3329259765625,4.1669921875L18.3329259765625,7.5003221875L16.6663259765625,7.5003221875L16.6663259765625,4.1669921875C16.6663259765625,3.7396321875,16.3446259765625,3.3874021875,15.9301259765625,3.3392621875L15.8329259765625,3.3336621875L12.4996259765625,3.3336621875L12.4996259765625,1.6669921875L15.8329259765625,1.6669921875ZM3.3332959765625,12.4999921875L3.3332959765625,15.8332921875C3.3332959765625,16.2606921875,3.6549959765624997,16.6128921875,4.0694459765625,16.6610921875L4.1666259765625,16.6666921875L7.4999559765625,16.6666921875L7.4999559765625,18.3332921875L4.1666259765625,18.3332921875C2.7859159765625,18.3332921875,1.6666259765625,17.2140921875,1.6666259765625,15.8332921875L1.6666259765625,12.4999921875L3.3332959765625,12.4999921875ZM18.3329259765625,12.4999921875L18.3329259765625,15.8332921875C18.3329259765625,17.2140921875,17.2137259765625,18.3332921875,15.8329259765625,18.3332921875L12.4996259765625,18.3332921875L12.4996259765625,16.6666921875L15.8329259765625,16.6666921875C16.2603259765625,16.6666921875,16.6125259765625,16.3449921875,16.6607259765625,15.9304921875L16.6663259765625,15.8332921875L16.6663259765625,12.4999921875L18.3329259765625,12.4999921875Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="0.6399999856948853"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
1
src/assets/img/zf_position_title_icon.svg
Normal file
1
src/assets/img/zf_position_title_icon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_61_01933"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath><filter id="master_svg1_61_01934" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="1" height="1"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="0" dx="0"/><feGaussianBlur stdDeviation="5"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.30000001192092896 0 0 0 0 1 0 0 0 0.30000001192092896 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow"/></filter></defs><g clip-path="url(#master_svg0_61_01933)"><g filter="url(#master_svg1_61_01934)"><path d="M0.833343505859375,4.1663408125L0.833343505859375,16.6663078125C0.833343505859375,17.126607812499998,1.2064395058593749,17.4997078125,1.666676505859375,17.4997078125L18.333343505859375,17.4997078125C18.793543505859375,17.4997078125,19.166643505859376,17.126607812499998,19.166643505859376,16.6663078125L19.166643505859376,4.1663408125C19.166643505859376,3.7061038125,18.793543505859375,3.3330078125,18.333343505859375,3.3330078125L1.666676505859375,3.3330078125C1.2064395058593749,3.3330078125,0.833343505859375,3.7061038125,0.833343505859375,4.1663408125ZM10.657803505859375,7.1779578125C10.771573505859376,7.0316778125,10.833343505859375,6.8516578125,10.833343505859375,6.6663378125C10.833343505859375,6.2061078125,10.460243505859374,5.8330078125,10.000013505859375,5.8330078125C9.742853505859374,5.8330078125,9.500093505859375,5.951737812499999,9.342213505859375,6.1547278125L7.865433505859375,8.0534378125L4.617303505859375,5.965357812500001C4.482893505859375,5.8789478125,4.326473505859375,5.8330078125,4.166673505859375,5.8330078125C3.706443505859375,5.8330078125,3.333343505859375,6.2061078125,3.333343505859375,6.6663378125C3.333343505859375,6.9498978125,3.477523505859375,7.2139878125,3.716043505859375,7.3673278125L6.838073505859375,9.3743378125L3.508883505859375,13.6547078125C3.395113505859375,13.8010078125,3.333343505859375,13.9810078125,3.333343505859375,14.1663078125C3.333343505859375,14.6266078125,3.706443505859375,14.9997078125,4.166673505859375,14.9997078125C4.423833505859375,14.9997078125,4.666593505859375,14.8809078125,4.824473505859375,14.6780078125L8.245693505859375,10.2792378125L10.885643505859376,11.9763278125L9.329133505859375,14.0887078125C9.223603505859375,14.2319078125,9.166673505859375,14.4051078125,9.166673505859375,14.5830078125C9.166673505859375,15.0432078125,9.539773505859374,15.4163078125,10.000013505859375,15.4163078125C10.264793505859375,15.4163078125,10.513823505859374,15.2905078125,10.671193505859375,15.0769078125L12.290443505859376,12.8794178125L15.382743505859375,14.8673078125C15.517143505859375,14.9537078125,15.673543505859374,14.9997078125,15.833343505859375,14.9997078125C16.293543505859375,14.9997078125,16.666643505859376,14.6266078125,16.666643505859376,14.1663078125C16.666643505859376,13.8828078125,16.522543505859375,13.6187078125,16.283543505859377,13.4651078125L13.281043505859374,11.5349278125L16.504243505859375,7.1606778124999995C16.609743505859377,7.0174578125,16.666643505859376,6.844237812499999,16.666643505859376,6.6663378125C16.666643505859376,6.2061078125,16.293543505859375,5.8330078125,15.833343505859375,5.8330078125C15.568543505859376,5.8330078125,15.319543505859375,5.9588378125000006,15.162443505859375,6.1720078125L11.876243505859374,10.631837812499999L9.273063505859374,8.9583378125L10.657803505859375,7.1779578125Z" fill-rule="evenodd" fill="#09C5E7" fill-opacity="1"/><path d="M19.166643505859376,16.4997078125L0.833343505859375,16.4997078125L0.833343505859375,16.6663078125C0.833343505859375,17.126607812499998,1.2064395058593749,17.4997078125,1.666676505859375,17.4997078125L18.333343505859375,17.4997078125C18.793543505859375,17.4997078125,19.166643505859376,17.126607812499998,19.166643505859376,16.6663078125L19.166643505859376,16.4997078125Z" fill-rule="evenodd" fill="#47CBFF" fill-opacity="1"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 4.3 KiB |
1
src/assets/img/zf_task_controller_aircraft_icon.svg
Normal file
1
src/assets/img/zf_task_controller_aircraft_icon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_61_02488"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_02488)"><g><path d="M1.124920859375,12.99981171875L14.874955859375,12.99981171875C15.220055859375,12.99981171875,15.499955859375,13.27961171875,15.499955859375,13.62481171875C15.499955859375,13.96991171875,15.220055859375,14.24981171875,14.874955859375,14.24981171875L1.124920859375,14.24981171875C0.7797418593750001,14.24981171875,0.499920308375,13.96991171875,0.499920308375,13.62481171875C0.499920308375,13.27961171875,0.7797418593750001,12.99981171875,1.124920859375,12.99981171875ZM15.428055859375,5.4241417187500005C15.584255859375,5.67726171875,15.473655859375,6.02570171875,15.208655859375,6.11289171875L3.997735859375,9.81445171875C3.542425859375,9.96414171875,3.048045859375,9.83039171875,2.710545859375,9.466641718750001L0.590857859375,7.19664171875C0.403357759375,6.99570171875,0.523670359375,6.64351171875,0.784294859375,6.63101171875L1.1224198593749999,6.61445171875C1.301022859375,6.60620171875,1.478241859375,6.64937171875,1.633045859375,6.73883171875L3.008045859375,7.52632171875C3.295045859375,7.69306171875,3.642695859375,7.71886171875,3.951165859375,7.59633171875L6.198675859375,6.70695171875L3.421795859375,2.72788971875C3.223045859375,2.38320171875,3.368665859375,1.92101471875,3.720235859375,1.79382681875C3.906485859375,1.72695181875,4.138045859375,1.72382671875,4.413355859375001,1.86851471875C5.098355859375,2.22851471875,7.916175859375,4.55070171875,8.760235859375,5.25039171875C8.916175859375,5.38007171875,9.105545859375,5.453511718750001,9.301795859375,5.4603917187499995L9.343665859375,5.46164171875L12.440555859375,4.235701718750001C12.773255859375,4.10208171875,13.136155859375,4.0620917187500005,13.489955859375,4.12008171875C14.060255859375,4.21507171875,14.868655859375,4.516951718750001,15.428355859375,5.42383171875L15.428055859375,5.4241417187500005Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
1
src/assets/img/zf_task_controller_altitude_icon.svg
Normal file
1
src/assets/img/zf_task_controller_altitude_icon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_61_02537"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_02537)"><g><path d="M12.7499896484375,11.00006C12.9394896484375,11.00007,13.1125896484375,11.10712,13.1972896484375,11.27656L14.4472896484375,13.7766C14.6133896484375,14.109,14.3716896484375,14.5001,13.9999896484375,14.5001L2.0000176484375,14.5001C1.6283856484374999,14.5001,1.3866476484375,14.109,1.5527676484375,13.7766L2.8027696484374998,11.27656C2.8874496484375003,11.10711,3.0606096484375,11.00006,3.2500196484375,11.00006L12.7499896484375,11.00006ZM10.7500196484375,7.00006C10.9394396484375,7.00007,11.1125996484375,7.10712,11.1972696484375,7.27656L12.4472896484375,9.77656C12.6133896484375,10.10901,12.3716896484375,10.50006,11.9999896484375,10.50006L4.0000196484375,10.50006C3.6283896484375,10.50005,3.3866496484375,10.109,3.5527696484375,9.77656L4.802769648437501,7.27656C4.887449648437499,7.10711,5.0606096484375005,7.00006,5.2500196484375,7.00006L10.7500196484375,7.00006ZM7.5527696484375,1.776562C7.7370196484375,1.4078125,8.2627696484375,1.4078125,8.4472696484375,1.776562L10.4472696484375,5.77656C10.6133796484375,6.10901,10.3716396484375,6.50006,10.0000196484375,6.50006L6.0000196484375,6.50006C5.6283896484375,6.50005,5.3866496484374995,6.109,5.5527696484375,5.77656L7.5527696484375,1.776562Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
1
src/assets/img/zf_task_controller_back_icon.svg
Normal file
1
src/assets/img/zf_task_controller_back_icon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.1 KiB |
1
src/assets/img/zf_task_controller_create_icon.svg
Normal file
1
src/assets/img/zf_task_controller_create_icon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.1 KiB |
1
src/assets/img/zf_task_controller_height_icon.svg
Normal file
1
src/assets/img/zf_task_controller_height_icon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_61_02510"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_02510)"><g><path d="M2.4000244140625,1.3330078125L13.6000244140625,1.3330078125L13.6000244140625,2.6662078124999997L2.4000244140625,2.6662078124999997L2.4000244140625,1.3330078125ZM11.3000244140625,6.2996778125L8.0000244140625,2.9996778125L4.7020244140625,6.2976778125L5.6446944140625,7.2410078125L7.3333544140625,5.5516778125L7.3333544140625,10.4470078125L5.6433544140625,8.7570078125L4.7006944140625,9.6996778125L8.0000244140625,12.9997078125L11.3000244140625,9.6996778125L10.357354414062499,8.7570078125L8.666694414062501,10.4476778125L8.666694414062501,5.5516778125L10.357354414062499,7.2423378125L11.3000244140625,6.2996778125ZM13.6000244140625,13.3330078125L13.6000244140625,14.6662078125L2.4000244140625,14.6662078125L2.4000244140625,13.3330078125L13.6000244140625,13.3330078125Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
1
src/assets/img/zf_task_controller_icon.svg
Normal file
1
src/assets/img/zf_task_controller_icon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_61_05364"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_05364)"><g><path d="M2.4680951171875,14.5121625Q1.0322081171875,12.8892925,0.7686601171875,10.7389625Q0.5050831171875,8.5883825,1.5066041171875,6.667082499999999Q2.5081251171875003,4.7457725,4.4220851171875,3.7302835Q6.3360351171875,2.7147975,8.488495117187501,2.9627094Q10.6409251171875,3.2106215000000002,12.2739451171875,4.6346425Q13.6571451171875,5.8408525000000004,14.2550451171875,7.5311125L14.6053451171875,7.5311125Q16.1444451171875,7.5299225,17.3535451171875,8.2960525Q18.6674451171875,9.1285425,19.1278451171875,10.5817125Q19.5893451171875,12.0385525,19.1006451171875,13.4864625Q18.6118451171875,14.9343625,17.3617451171875,15.8134625C17.2214451171875,15.9121625,17.0540451171875,15.9651625,16.8824451171875,15.9651625C16.4222451171875,15.9651625,16.0491451171875,15.5920625,16.0491451171875,15.1317625C16.0491451171875,14.8604625,16.181145117187498,14.6061625,16.4031451171875,14.4500625L16.4043451171875,14.4492625Q17.2073451171875,13.8840625,17.5215451171875,12.9534625Q17.8358451171875,12.0221325,17.5389451171875,11.0850925Q17.2621451171875,10.2111725,16.461545117187498,9.7038925Q15.6614451171875,9.1969625,14.6053451171875,9.197782499999999L13.6382451171875,9.197782499999999C13.2577451171875,9.197782499999999,12.9256451171875,8.9400925,12.8310451171875,8.571562499999999Q12.4212451171875,6.9744725,11.1785451171875,5.8907825Q9.9358051171875,4.8070924999999995,8.297795117187501,4.6184325Q6.6597551171875,4.4297625,5.2032251171875,5.2025625Q3.7466951171875,5.9753525,2.9845251171875,7.4374825Q2.2223651171875,8.8996025,2.4229451171875,10.536212500000001Q2.6235351171875,12.1728125,3.7162351171875,13.4075625C3.8510651171875,13.5599625,3.9255051171875,13.7563625,3.9255051171875,13.9598625C3.9255051171875,14.4200625,3.5524051171875,14.7931625,3.0921651171875,14.7931625C2.8534951171875,14.7931625,2.6262751171875003,14.6908625,2.4680951171875,14.5121625ZM5.8333751171875,12.4998425L6.6667051171875,12.4998425C7.1269451171875,12.4998425,7.5000451171875,12.1267425,7.5000451171875,11.6665025C7.5000451171875,11.2062625,7.1269451171875,10.8331725,6.6667051171875,10.8331725L5.8333751171875,10.8331725C5.3731351171875,10.8331725,5.0000451171875,11.2062625,5.0000451171875,11.6665025C5.0000451171875,12.1267425,5.3731351171875,12.4998425,5.8333751171875,12.4998425ZM9.1667051171875,10.8331725L14.1667451171875,10.8331725C14.6269451171875,10.8331725,15.0000451171875,11.2062625,15.0000451171875,11.6665025C15.0000451171875,12.1267425,14.6269451171875,12.4998425,14.1667451171875,12.4998425L9.1667051171875,12.4998425C8.7064751171875,12.4998425,8.3333751171875,12.1267425,8.3333751171875,11.6665025C8.3333751171875,11.2062625,8.7064751171875,10.8331725,9.1667051171875,10.8331725ZM5.0000451171875,14.5831625L5.0000451171875,17.0831625C5.0000451171875,17.5433625,5.3731351171875,17.9164625,5.8333751171875,17.9164625L14.1667451171875,17.9164625C14.6269451171875,17.9164625,15.0000451171875,17.5433625,15.0000451171875,17.0831625L15.0000451171875,14.5831625C15.0000451171875,14.1229625,14.6269451171875,13.7498625,14.1667451171875,13.7498625L5.8333751171875,13.7498625C5.3731351171875,13.7498625,5.0000451171875,14.1229625,5.0000451171875,14.5831625Z" fill-rule="evenodd" fill="#09C5E7" fill-opacity="1"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
1
src/assets/img/zf_task_controller_pause_icon.svg
Normal file
1
src/assets/img/zf_task_controller_pause_icon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_61_01164"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_01164)"><g><path d="M10,1.25C14.8325,1.25,18.75,5.16751,18.75,10C18.75,14.8325,14.8325,18.75,10,18.75C5.16751,18.75,1.25,14.8325,1.25,10C1.25,5.16751,5.16751,1.25,10,1.25ZM8.90625,6.71875L6.71875,6.71875L6.71875,13.2812L8.90625,13.2812L8.90625,6.71875ZM13.2812,6.71875L11.09375,6.71875L11.09375,13.2812L13.2812,13.2812L13.2812,6.71875Z" fill="#FFFFFF" fill-opacity="0.6000000238418579" style="mix-blend-mode:passthrough"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 731 B |
1
src/assets/img/zf_task_controller_plus_icon.svg
Normal file
1
src/assets/img/zf_task_controller_plus_icon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="24" viewBox="0 0 16 24"><g><path d="M14.812,12.228L14.812,14.944L9.212,14.944L9.212,20.544L6.496,20.544L6.496,14.944L0.924,14.944L0.924,12.228L6.496,12.228L6.496,6.656L9.212,6.656L9.212,12.228L14.812,12.228Z" fill="#7A8ABA" fill-opacity="1"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 380 B |
1
src/assets/img/zf_task_controller_power_icon.svg
Normal file
1
src/assets/img/zf_task_controller_power_icon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_61_02285"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_02285)"><g><path d="M7.86905,7.21429L7.86905,2.5L4.05952,8.78571L6.34524,8.78571L6.34524,13.5L10.15476,7.21429L7.86905,7.21429ZM1.011905,2.5L13.2024,2.5C13.6232,2.500000280993,13.9643,2.851776,13.9643,3.285714L13.9643,12.7143C13.9643,13.1482,13.6232,13.5,13.2024,13.5L1.011905,13.5C0.591117,13.5,0.250000136239,13.1482,0.25,12.7143L0.25,3.285714C0.25,2.851776,0.591116,2.500000280993,1.011905,2.5ZM14.7262,5.642860000000001L16.25,5.642860000000001L16.25,10.357140000000001L14.7262,10.357140000000001L14.7262,5.642860000000001Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 905 B |
1
src/assets/img/zf_task_controller_satellite_icon.svg
Normal file
1
src/assets/img/zf_task_controller_satellite_icon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_61_02321"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_02321)"><g><path d="M9.700800000000001,7.34467L11.67792,5.20402C12.3461,5.55089,13.1699,5.43196,13.7191,4.82742C14.4239,4.06432,14.4239,2.8354299999999997,13.7191,2.072327C13.0143,1.309224,11.87929,1.309224,11.17449,2.072327C10.62529,2.66695,10.5063,3.55889,10.82666,4.28235L8.849540000000001,6.423L4.3095,1.5173432C1.563501,4.4805600000000005,1.563501,9.29703,4.3095,12.2702C5.6825,13.7567,7.47655,14.5,9.27975,14.5C11.0738,14.5,12.877,13.7567,14.25,12.2702L9.700800000000001,7.34467Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 864 B |
1
src/assets/img/zf_task_controller_speed_icon.svg
Normal file
1
src/assets/img/zf_task_controller_speed_icon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_61_02460"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_02460)"><g><path d="M8,15C4.134,15,1,11.866,1,8C1,4.134,4.134,1,8,1C11.866,1,15,4.134,15,8C15,11.866,11.866,15,8,15ZM9.51056,5.9275C9.53084,5.69558,9.38837,5.48035,9.16695,5.40842C8.945540000000001,5.33648,8.70378,5.42688,8.58388,5.62644L7.03681,8.20169C6.99032,8.2791,6.95277,8.361550000000001,6.92488,8.44744C6.72119,9.07419,7.06425,9.74737,7.691,9.951C7.77688,9.97894,7.86563,9.997,7.95563,10.00488C8.61213,10.06238,9.19094,9.57675,9.24844,8.92025L9.51056,5.9275L9.51056,5.9275ZM8,2C5.89919,2,4.0504999999999995,3.07969,2.9786900000000003,4.7145L3.81556,5.26206C4.70875,3.89975,6.24937,3,8,3C9.77475,3,11.3336,3.92469,12.2209,5.31856L13.0651,4.78231C12.0003,3.10956,10.12975,2,8,2Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
1
src/assets/img/zf_task_controller_start_icon.svg
Normal file
1
src/assets/img/zf_task_controller_start_icon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_61_01175"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_01175)"><g><path d="M10.004642109375,1.185302734375C5.193272109375,1.185302734375,1.253663305075,5.099442734375,1.253663305075,9.936282734375C1.253663603995,14.747702734375,5.165842109375,18.685302734375,10.002682109375,18.685302734375C14.839562109375,18.685302734375,18.751662109375,14.773102734375,18.751662109375,9.936282734375C18.753662109375,5.124912734375,14.841462109375,1.18530236072,10.004642109375,1.185302734375ZM13.552462109375,10.298702734375L8.221932109375,13.374402734375C8.012312109375,13.495802734375,7.751762109375,13.345002734375,7.751762109375,13.102102734375L7.751762109375,6.948762734375C7.751762109375,6.707802734375,8.012312109375,6.556962734375,8.221932109375,6.676462734375L13.552462109375,9.754092734375C13.760062109375,9.875552734375,13.760062109375,10.177242734375,13.552462109375,10.298702734375Z" fill="#FFFFFF" fill-opacity="0.6000000238418579" style="mix-blend-mode:passthrough"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
1
src/assets/img/zf_task_controller_transfer_icon.svg
Normal file
1
src/assets/img/zf_task_controller_transfer_icon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_61_02261"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_02261)"><g><path d="M8.000069765625,6.39990234375C7.282482765625,6.40722608375,6.657547765625,6.89143734375,6.471251965625,7.58446234375C6.284956765625,8.27748234375,6.582874765625,9.00976234375,7.200067765625,9.375902343749999L7.200067765625,15.99990234375L8.800069765625,15.99990234375L8.800069765625,9.375902343749999C9.417259765625,9.00976234375,9.715179765624999,8.27747234375,9.528879765625,7.58446234375C9.342589765625,6.89143734375,8.717649765625,6.40722704375,8.000069765625,6.39990234375Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M8.000011289062499,0C4.4128712890625,0.0106494,1.2713412890625,2.40778,0.3139542890625,5.86481C-0.6434357109375,9.32185,0.8173892890625,12.9936,3.8880112890625,14.848L4.6880112890625,13.48C1.2978012890625,11.4499,0.5391892890625,6.86287,3.0952712890625,3.84933C5.6513512890625,0.8358,10.3006712890625,0.835799,12.8567712890625,3.84933C15.4128712890625,6.86286,14.6542712890625,11.4499,11.2639712890625,13.48L12.0639712890625,14.848C15.1272712890625,12.9983,16.5895712890625,9.3392,15.6448712890625,5.88771C14.7001712890625,2.43621,11.5782712890625,0.0318844,8.000011289062499,0Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M12.799951171875,7.999916875C12.805551171875,4.319736875,8.838001171875,2.0024968750000003,5.635361171875,3.815451875C2.432708171875,5.628406875,2.3776611718750003,10.222756875,5.535951171875,12.111916875L6.335951171875,10.735916875000001C4.638291171875,9.722676875000001,4.256451171875,7.427726875,5.534581171875001,5.919376875C6.812701171875,4.411026875,9.139201171875001,4.411026875,10.417331171875,5.919376875C11.695451171875,7.427726875,11.313611171875,9.722676875000001,9.615951171875,10.735916875000001L10.415951171875001,12.111916875C11.881111171875,11.258526875,12.787331171875,9.695446875,12.799951171875,7.999916875Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
1
src/assets/img/zf_task_controller_zoomout_icon.svg
Normal file
1
src/assets/img/zf_task_controller_zoomout_icon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="13" height="24" viewBox="0 0 13 24"><g><path d="M1.96,14.636L1.96,12.172L10.332,12.172L10.332,14.636L1.96,14.636Z" fill="#7A8ABA" fill-opacity="1"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 274 B |
@ -3,7 +3,11 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
html,body,#app{
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#app {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
84
src/components/selectView/index.vue
Normal file
84
src/components/selectView/index.vue
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
<template>
|
||||||
|
<div class="selsct_wrap">
|
||||||
|
<el-select :teleported="false" :modelValue="modelValue" @change="handleChange" :placeholder="placeholder">
|
||||||
|
<el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { toRefs } from "vue"
|
||||||
|
const props = defineProps(["modelValue", "placeholder", "options"])
|
||||||
|
const emit = defineEmits(["update:modelValue"])
|
||||||
|
const { modelValue, placeholder, options } = toRefs(props)
|
||||||
|
function handleChange(value: any) {
|
||||||
|
emit("update:modelValue", value)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.selsct_wrap {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2016;
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% + 2px);
|
||||||
|
height: calc(100% + 2px);
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
z-index: -1;
|
||||||
|
background-color: antiquewhite;
|
||||||
|
background: linear-gradient(180deg, #004DE7 0%, #009BFC 100%);
|
||||||
|
}
|
||||||
|
:deep(.el-select__wrapper){
|
||||||
|
min-height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-select__wrapper) {
|
||||||
|
background-color: #053b7c;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.el-select__placeholder {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-select-dropdown__item) {
|
||||||
|
color: #fff !important;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 5px;
|
||||||
|
height: 24px;
|
||||||
|
|
||||||
|
&>span {
|
||||||
|
line-height: 24px !important;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-popper.is-light) {
|
||||||
|
border: none !important;
|
||||||
|
background-color: #16286c !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-select-dropdown__list) {
|
||||||
|
padding: 5px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-select-dropdown__item.is-hovering) {
|
||||||
|
background: linear-gradient(180deg, #004ee7, #0099fc);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-popper) {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-popper__arrow) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
61
src/components/zfControlPlatform/eventList/eventItem.vue
Normal file
61
src/components/zfControlPlatform/eventList/eventItem.vue
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<div class="event_item">
|
||||||
|
<img class="cover" src="@/assets/img/Rectangle 28@1x.png" alt="">
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
<span class="label">时间：</span>
|
||||||
|
<span>2024-04-26 11:52:27</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span class="label">地点：</span>
|
||||||
|
<span>东风中路</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span class="label">类型：</span>
|
||||||
|
<span>AI 创建</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span class="label">分类：</span>
|
||||||
|
<span>拥堵</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.event_item {
|
||||||
|
width: 249px;
|
||||||
|
background-color: #053063;
|
||||||
|
margin-right: 16px;
|
||||||
|
.cover {
|
||||||
|
width: 100%;
|
||||||
|
height: 196px;
|
||||||
|
width: 249px;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
background-color: antiquewhite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 8px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #fff;
|
||||||
|
height: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.label {
|
||||||
|
color: rgba(255, 255, 255, 0.65);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
87
src/components/zfControlPlatform/eventList/index.vue
Normal file
87
src/components/zfControlPlatform/eventList/index.vue
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<div class="event_list">
|
||||||
|
<titleView>
|
||||||
|
<template #icon>
|
||||||
|
<img src="@/assets/img/zf_event_list_icon.svg" alt="">
|
||||||
|
</template>
|
||||||
|
<template #title>
|
||||||
|
<span>事件列表</span>
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
<div class="select">
|
||||||
|
<selectView placeholder="请选择分类" v-model="eventType" :options="options"></selectView>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</titleView>
|
||||||
|
<div class="list_wrapper">
|
||||||
|
<el-scrollbar>
|
||||||
|
<div class="list">
|
||||||
|
<eventItem v-for="i in 20"></eventItem>
|
||||||
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue"
|
||||||
|
import titleView from "@/components/zfControlPlatform/titleView/index.vue"
|
||||||
|
import selectView from "@/components/selectView/index.vue"
|
||||||
|
import eventItem from "@/components/zfControlPlatform/eventList/eventItem.vue"
|
||||||
|
const eventType = ref()
|
||||||
|
const options = ref([
|
||||||
|
{
|
||||||
|
label: "拥堵",
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "抛洒物",
|
||||||
|
value: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "涉路施工",
|
||||||
|
value: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "停车",
|
||||||
|
value: 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "塌方",
|
||||||
|
value: 4
|
||||||
|
},
|
||||||
|
])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.event_list {
|
||||||
|
background-color: #053b7b;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-shrink: 0;
|
||||||
|
.select{
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
.list_wrapper{
|
||||||
|
width: 100%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex: 1;
|
||||||
|
// background-color: rgb(222, 175, 100);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow-x: auto;
|
||||||
|
:deep(.el-scrollbar__view){
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.list{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px 16px 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,23 +1,32 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="ZfControlPlatform">
|
<div class="ZfControlPlatform">
|
||||||
<div class="container_left">
|
<div class="container_left">
|
||||||
|
|
||||||
<div class="task">
|
<div class="task">
|
||||||
<taskList></taskList>
|
<taskList></taskList>
|
||||||
</div>
|
</div>
|
||||||
<div class="preview">
|
<div class="preview">
|
||||||
12312
|
<positionView></positionView>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="container_center"></div>
|
<div class="container_center">
|
||||||
<div class="container_right"></div>
|
<div class="map_wrap">
|
||||||
|
<img src="@/assets/img/image@1x.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="event_list_wrap">
|
||||||
|
<eventList></eventList>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container_right">
|
||||||
|
<taskController></taskController>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import taskList from "@/components/zfControlPlatform/taskList/index.vue"
|
import taskList from "@/components/zfControlPlatform/taskList/index.vue"
|
||||||
|
import positionView from "@/components/zfControlPlatform/positionView/index.vue"
|
||||||
|
import eventList from "@/components/zfControlPlatform/eventList/index.vue"
|
||||||
|
import taskController from "@/components/zfControlPlatform/taskController/index.vue"
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@ -25,9 +34,8 @@ import taskList from "@/components/zfControlPlatform/taskList/index.vue"
|
|||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
background-color: rgb(0, 255, 162);
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
|
||||||
.container_left {
|
.container_left {
|
||||||
width: 363px;
|
width: 363px;
|
||||||
@ -36,7 +44,7 @@ import taskList from "@/components/zfControlPlatform/taskList/index.vue"
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: chocolate;
|
|
||||||
.task {
|
.task {
|
||||||
background-color: brown;
|
background-color: brown;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@ -54,8 +62,30 @@ import taskList from "@/components/zfControlPlatform/taskList/index.vue"
|
|||||||
|
|
||||||
.container_center {
|
.container_center {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background-color: pink;
|
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 0;
|
||||||
|
|
||||||
|
.map_wrap {
|
||||||
|
flex: 1;
|
||||||
|
height: 0;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
background-color: aqua;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.event_list_wrap {
|
||||||
|
height: 363px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgb(24, 24, 24);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -63,6 +93,10 @@ import taskList from "@/components/zfControlPlatform/taskList/index.vue"
|
|||||||
width: 371px;
|
width: 371px;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
41
src/components/zfControlPlatform/positionView/index.vue
Normal file
41
src/components/zfControlPlatform/positionView/index.vue
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<template>
|
||||||
|
<div class="position_view">
|
||||||
|
<titleView>
|
||||||
|
<template #icon>
|
||||||
|
<img src="@/assets/img/zf_position_title_icon.svg" alt="">
|
||||||
|
</template>
|
||||||
|
<template #title>
|
||||||
|
<span>飞行器位置</span>
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
<img src="@/assets/img/zf_position_full_icon.svg" alt="">
|
||||||
|
</template>
|
||||||
|
</titleView>
|
||||||
|
<div class="content">
|
||||||
|
<img src="@/assets/img/Rectangle 27@1x.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import titleView from "@/components/zfControlPlatform/titleView/index.vue"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.position_view {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #fff;
|
||||||
|
height: 100%;
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
height: 0;
|
||||||
|
background-color: antiquewhite;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
358
src/components/zfControlPlatform/taskController/index.vue
Normal file
358
src/components/zfControlPlatform/taskController/index.vue
Normal file
@ -0,0 +1,358 @@
|
|||||||
|
<template>
|
||||||
|
<div class="task_controller_wrapper">
|
||||||
|
<titleView>
|
||||||
|
<template #icon>
|
||||||
|
<img src="@/assets/img/zf_task_controller_icon.svg" alt="">
|
||||||
|
</template>
|
||||||
|
<template #title>
|
||||||
|
<span>任务控制</span>
|
||||||
|
</template>
|
||||||
|
</titleView>
|
||||||
|
<div class="controller">
|
||||||
|
<div class="top">
|
||||||
|
<!-- 方向按键 -->
|
||||||
|
<div class="direction_control_wrapper">
|
||||||
|
<div class="direction_control">
|
||||||
|
<div class="button_group">
|
||||||
|
<div class="direction_button up"></div>
|
||||||
|
<div class="direction_button right"></div>
|
||||||
|
</div>
|
||||||
|
<div class="button_group">
|
||||||
|
<div class="direction_button left"></div>
|
||||||
|
<div class="direction_button down"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="zoom_button">
|
||||||
|
<div class="btn zoom_in">
|
||||||
|
<img src="@/assets/img/zf_task_controller_plus_icon.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="btn zoom_out">
|
||||||
|
<img src="@/assets/img/zf_task_controller_zoomout_icon.svg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 状态仪表盘 -->
|
||||||
|
<div class="dash_board">
|
||||||
|
<div class="group">
|
||||||
|
<div class="item" v-for="item in dash_board" :class="{ no_splite: item?.no_splite }">
|
||||||
|
<div class="data">
|
||||||
|
<div class="icon">
|
||||||
|
<img :src="item.icon" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="value" :style="`color:${item.color}`">{{ item.value }}</div>
|
||||||
|
</div>
|
||||||
|
<span class="label">{{ item.label }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<div class="bottom_buttons">
|
||||||
|
<div class="btn">
|
||||||
|
<img class="icon" src="@/assets/img/zf_task_controller_start_icon.svg" alt="">
|
||||||
|
<span>开始任务</span>
|
||||||
|
</div>
|
||||||
|
<div class="btn">
|
||||||
|
<img class="icon" src="@/assets/img/zf_task_controller_pause_icon.svg" alt="">
|
||||||
|
<span>暂停任务</span>
|
||||||
|
</div>
|
||||||
|
<div class="btn">
|
||||||
|
<img class="icon" src="@/assets/img/zf_task_controller_create_icon.svg" alt="">
|
||||||
|
<span>创建事件</span>
|
||||||
|
</div>
|
||||||
|
<div class="btn">
|
||||||
|
<img class="icon" src="@/assets/img/zf_task_controller_back_icon.svg" alt="">
|
||||||
|
<span>一键返航</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue"
|
||||||
|
import titleView from "@/components/zfControlPlatform/titleView/index.vue"
|
||||||
|
import powerIcon from "@/assets/img/zf_task_controller_power_icon.svg"
|
||||||
|
import satelliteIcon from "@/assets/img/zf_task_controller_satellite_icon.svg"
|
||||||
|
import transferImgIcon from "@/assets/img/zf_task_controller_transfer_icon.svg"
|
||||||
|
import speedIcon from "@/assets/img/zf_task_controller_speed_icon.svg"
|
||||||
|
import aircraftIcon from "@/assets/img/zf_task_controller_aircraft_icon.svg"
|
||||||
|
import heightIcon from "@/assets/img/zf_task_controller_height_icon.svg"
|
||||||
|
import altitudeIcon from "@/assets/img/zf_task_controller_altitude_icon.svg"
|
||||||
|
|
||||||
|
const dash_board = ref([
|
||||||
|
{
|
||||||
|
label: "电池电量",
|
||||||
|
value: "87%",
|
||||||
|
icon: powerIcon,
|
||||||
|
color: "#42F5AF"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "搜星质量",
|
||||||
|
value: "8 ",
|
||||||
|
icon: satelliteIcon,
|
||||||
|
color: "#42F5AF"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "图传状态",
|
||||||
|
value: "正常",
|
||||||
|
icon: transferImgIcon,
|
||||||
|
color: "#42F5AF"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "水平速度",
|
||||||
|
value: "HS-m/s",
|
||||||
|
icon: speedIcon,
|
||||||
|
color: "#FFF",
|
||||||
|
no_splite: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "相对起飞点高度",
|
||||||
|
value: "ATM-m",
|
||||||
|
icon: aircraftIcon,
|
||||||
|
color: "#FFF"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "相对地形高度",
|
||||||
|
value: "12883 m",
|
||||||
|
icon: heightIcon,
|
||||||
|
color: "#FFF"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "海拔高度",
|
||||||
|
value: "12883 m",
|
||||||
|
icon: altitudeIcon,
|
||||||
|
color: "#FFF",
|
||||||
|
no_splite: true
|
||||||
|
},
|
||||||
|
|
||||||
|
])
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.task_controller_wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.controller {
|
||||||
|
flex: 1;
|
||||||
|
height: 0;
|
||||||
|
background-color: #053b7b;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.direction_control_wrapper {
|
||||||
|
display: flex;
|
||||||
|
height: 290px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
//方向按钮
|
||||||
|
.direction_control {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 206px;
|
||||||
|
height: 206px;
|
||||||
|
overflow: hidden;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
|
||||||
|
.button_group {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
&+.button_group {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.direction_button {
|
||||||
|
height: 99px;
|
||||||
|
width: 99px;
|
||||||
|
background-color: #1e5499;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: linear-gradient(90deg, #0454e6, #1475e2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&+.direction_button {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: 10px solid skyblue;
|
||||||
|
border-color: skyblue transparent transparent transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.up {
|
||||||
|
&::after {
|
||||||
|
border-color: transparent transparent skyblue transparent;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.down {
|
||||||
|
&::after {
|
||||||
|
border-color: skyblue transparent transparent transparent;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.left {
|
||||||
|
&::after {
|
||||||
|
border-color: transparent skyblue transparent transparent;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
&::after {
|
||||||
|
border-color: transparent transparent transparent skyblue;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom_button {
|
||||||
|
width: 68px;
|
||||||
|
height: 68px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
border: 8px solid #053b7b;
|
||||||
|
background-color: #053b7b;
|
||||||
|
box-sizing: content-box;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
height: 32px;
|
||||||
|
background-color: #054295;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&+.btn {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//数据仪表盘
|
||||||
|
.dash_board {
|
||||||
|
width: 340px;
|
||||||
|
|
||||||
|
background-color: #18549b;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 8px 16px;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 80px;
|
||||||
|
padding-top: 16px;
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
height: 24px;
|
||||||
|
width: 1px;
|
||||||
|
background-color: #2366b7;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.no_splite {
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.data {
|
||||||
|
display: flex;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 4px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(255, 255, 255, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom_buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 340px;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 164px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
background: linear-gradient(180deg, #004DE7 0%, #1577E2 100%);
|
||||||
|
margin-bottom: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
.icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
58
src/components/zfControlPlatform/titleView/index.vue
Normal file
58
src/components/zfControlPlatform/titleView/index.vue
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<template>
|
||||||
|
<div class="title">
|
||||||
|
<div class="left">
|
||||||
|
<span class="icon">
|
||||||
|
<slot name="icon"></slot>
|
||||||
|
</span>
|
||||||
|
<slot name="title"></slot>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<slot name="right"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.title {
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: antiquewhite;
|
||||||
|
border-bottom: 1px #3c7bff solid;
|
||||||
|
padding: 0 20px;
|
||||||
|
background: linear-gradient(90deg, #0A5CC8 3%, #053B7B 95%);
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
.icon :deep(img) {
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
cursor: pointer;
|
||||||
|
:deep(img) {
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -5,7 +5,7 @@
|
|||||||
<img class="logo_border" src="@/assets/img/login_logo_border.png" alt="">
|
<img class="logo_border" src="@/assets/img/login_logo_border.png" alt="">
|
||||||
<img class="logo_img" src="@/assets/img/login_logo.png" alt="">
|
<img class="logo_img" src="@/assets/img/login_logo.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
<h2 class="title">交通综合执法检查系统</h2>
|
<h2 class="title">交通运输综合执法检查系统</h2>
|
||||||
<form class="form_wrap" @submit="submit">
|
<form class="form_wrap" @submit="submit">
|
||||||
<div class="form_item" :class="{ error: errors.userName }">
|
<div class="form_item" :class="{ error: errors.userName }">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user