提交 494889e0 作者: 翁进城

feat: 飞控中心无人机列表视频播放组件, 可以播放, 但是部分功能还未对接

上级 7fcd220c
......@@ -32,8 +32,8 @@
"recorder-core": "^1.2.23020100",
"terraformer-wkt-parser": "^1.2.1",
"url": "^0.11.0",
"vue-clipboard2": "^0.3.3",
"vue": "^2.6.14",
"vue-clipboard2": "^0.3.3",
"vue-router": "^3.5.2",
"vuex": "^3.6.2"
}
......
......@@ -33,7 +33,6 @@ $axios.interceptors.request.use(
config.headers['token'] = token;
// config.headers['channel'] = 'channel'; // 渠道 主平台 子平台 后台
console.log('config', config)
config.params.token = token;
}
return config;
},
......
<?xml version="1.0" encoding="UTF-8"?>
<svg width="44px" height="44px" viewBox="0 0 44 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 7备份 2</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-7备份-2">
<rect id="矩形" fill-opacity="0.7" fill="#092057" x="0" y="0" width="44" height="44" rx="2.75"></rect>
<g id="样本剪切" transform="translate(22.000000, 22.000000) rotate(-90.000000) translate(-22.000000, -22.000000) translate(10.000000, 10.000000)" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path d="M23.0178516,8.8513125 C22.7471033,9.02581999 22.4468247,9.14953562 22.1317266,9.21639844 C21.9260156,9.28155469 21.7494844,9.30724219 21.564375,9.33639844 C21.2883984,9.37750781 20.9764453,9.42379687 20.3508281,9.64490625 C19.1269922,10.0751484 18.1123125,10.8755859 18.102,10.8824531 C17.7968906,11.1069844 17.5055156,11.4892031 17.2518281,11.9948672 C17.5055156,12.5022187 17.7968906,12.88275 18.0951328,13.102125 C18.1122891,13.1158359 19.1304141,13.9162969 20.3508281,14.3465391 C20.9781562,14.567625 21.2901094,14.6139141 21.5643516,14.6567578 C21.7511953,14.6841797 21.9260156,14.7099141 22.1557266,14.7801797 C22.4419453,14.8401797 22.7453203,14.9653125 23.0110312,15.1366641 C23.6280703,15.5429062 23.9948906,16.1908359 23.9948906,16.8695859 C23.9948906,17.3255391 23.8337578,17.7626016 23.5286484,18.1311328 C22.7333437,19.0858359 21.2061094,19.2932344 20.1228516,18.5939297 C19.7889437,18.3700622 19.5081214,18.0757761 19.300125,17.7317578 C19.2020598,17.5642721 19.0991731,17.3996565 18.9915937,17.2381172 C18.87675,17.0598516 18.7396406,16.8473203 18.5767969,16.5850547 C18.0803262,15.7763487 17.5068807,15.0175029 16.8644531,14.3190937 C16.8610312,14.3156719 16.3845469,13.8391641 15.8651719,13.4243672 C12.9324375,14.5333594 8.13314062,16.3399687 7.6755,16.4410781 C6.98301562,16.5919219 6.32482031,16.1634141 6.29739844,16.1462812 L5.99402344,15.9457266 L6.31797656,15.7725937 L13.3798125,11.9948672 C10.7676094,10.6013437 6.31797656,8.21882812 6.31797656,8.21882812 L5.99402344,8.04569531 L6.29739844,7.84516406 C6.32482031,7.82629687 6.98301562,7.3978125 7.6755,7.55205469 C8.13485156,7.6531875 12.9341719,9.4580625 15.8651719,10.5670547 C16.3845469,10.1522578 16.8610312,9.67575 16.8661875,9.67061719 C17.5083693,8.97304914 18.081256,8.21473663 18.5767734,7.40636719 C18.7129694,7.18830556 18.8506759,6.97119097 18.9898828,6.75503906 C19.1218594,6.55277344 19.2247031,6.39339844 19.2983906,6.2596875 C19.5076996,5.91657995 19.7889972,5.6229995 20.1228516,5.39922656 C21.2061328,4.69816406 22.7333437,4.90558594 23.5286484,5.862 C23.8354687,6.23053125 23.9966016,6.66761719 23.9966016,7.12528125 C23.9966016,7.80060937 23.6297812,8.44680469 23.0178516,8.8513125 Z M20.9421562,17.6100703 C21.1684219,17.7557578 21.4460859,17.8157578 21.7237969,17.7780469 C21.9911158,17.7460845 22.2365481,17.6144842 22.4111016,17.4095156 C22.5418718,17.2572571 22.6141791,17.0634243 22.6150781,16.8627187 C22.6080767,16.5562151 22.446085,16.2741858 22.1848594,16.1137031 C21.7169062,15.8120391 21.057,15.9011484 20.7141797,16.3125234 C20.5845756,16.4660019 20.513003,16.6601303 20.5119609,16.8610078 C20.5119609,17.1558281 20.6713359,17.4352266 20.9421562,17.6100703 L20.9421562,17.6100703 Z M15.510375,11.2715156 C15.0578906,11.2715156 14.6893594,11.5971797 14.6893594,11.9948672 C14.6893594,12.3959531 15.0578906,12.7199062 15.5103984,12.7199062 C15.9629062,12.7199062 16.3314141,12.3959531 16.3314141,11.9948437 C16.3314141,11.5971797 15.9628828,11.2715156 15.5103984,11.2715156 L15.510375,11.2715156 Z M22.411125,6.58190625 C22.2358503,6.37810981 21.9906678,6.24726668 21.7237969,6.21510938 C21.451745,6.17486561 21.1742967,6.23388442 20.9421797,6.381375 C20.6802527,6.54118376 20.5180276,6.82364369 20.5119844,7.13041406 C20.5119844,7.32923438 20.5822266,7.51776563 20.7142031,7.67721094 C21.0909736,8.09178461 21.7108829,8.17630109 22.1848828,7.87771875 C22.4463398,7.71746079 22.6084108,7.43529337 22.6151016,7.12870313 C22.6139071,6.92805173 22.5416366,6.73431732 22.411125,6.58190625 L22.411125,6.58190625 Z M15.4315312,1.71576562 L1.7191875,1.71576562 L1.7191875,22.2825 L15.4315312,22.2825 L15.4315312,17.1404062 L17.1455625,17.1404062 L17.1455625,23.9965781 L16.0005703,24 L2.34374999e-05,24 L2.34374999e-05,-1.0658141e-13 L17.1455625,0.0017109375 L17.1455625,6.85614844 L15.4315312,6.85614844 L15.4315312,1.71576562 Z" id="形状" fill="#FFFFFF"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="44px" height="44px" viewBox="0 0 44 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>航点动作</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="航点动作">
<rect id="矩形备份-22" fill-opacity="0.7" fill="#092057" x="0" y="0" width="44" height="44" rx="2"></rect>
<text font-family="MicrosoftYaHei, Microsoft YaHei" font-size="8" font-weight="normal" fill="#FFFFFF">
<tspan x="6" y="38">航点动作</tspan>
</text>
<g id="编组-10" transform="translate(11.000000, 6.000000)">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="21" height="21"></rect>
<g id="编组-8" transform="translate(1.000000, 1.106295)">
<path d="M18.3115335,1.65064739 L18.3115335,14.4290138 C18.3115335,15.4752049 17.4634281,16.3233104 16.417237,16.3233104 C15.3710459,16.3233104 14.5229404,15.4752049 14.5229404,14.4290138 L14.5229404,3.54494397 C14.5229404,2.49875286 13.6748349,1.65064739 12.6286438,1.65064739 C11.5824527,1.65064739 10.7343473,2.49875286 10.7343473,3.54494397 L10.7343473,16.9994082 C10.7343473,18.0455993 9.88624179,18.8937048 8.84005068,18.8937048 C7.78555085,18.8937048 6.92269809,18.0542246 6.89374757,17.0001222 L6.5241865,3.54422993 C6.49523597,2.49012759 5.63238321,1.65064739 4.57788339,1.65064739 C3.53169228,1.65064739 2.68358681,2.49875286 2.68358681,3.54494397 L2.68358681,9.36183056 L2.68358681,9.36183056" id="路径-29" stroke="#FFFFFF" stroke-width="2"></path>
<ellipse id="椭圆形" stroke="#FFBD36" stroke-width="1.25276377" cx="2.52572877" cy="10.7640992" rx="1.89934688" ry="1.9440125"></ellipse>
<path d="M16.6286166,3.21887609 L16.6061867,0.659737839 L16.6061867,0.659737839 L19.165325,0.682167733 C19.5112528,0.685199662 19.7892249,0.968087479 19.786193,1.31401536 C19.7831625,1.65977383 19.5004133,1.93760979 19.1546548,1.93457934 C19.1545526,1.93457845 19.1544504,1.93457753 19.1543481,1.93457658 L17.8691314,1.92268254 L17.8691314,1.92268254 L17.8810254,3.20789926 C17.8842253,3.55365621 17.6065278,3.83654155 17.2607709,3.83974136 C17.2606687,3.8397423 17.2605664,3.83974322 17.2604642,3.83974412 C16.9145363,3.84277605 16.6316485,3.56480396 16.6286166,3.21887609 Z" id="路径-30" fill="#FFBD36" fill-rule="nonzero" transform="translate(18.198935, 2.252486) rotate(-315.000000) translate(-18.198935, -2.252486) "></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组备份</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="-24.5" y="7.5" width="25" height="25"></rect>
<g id="编组备份" transform="translate(-3.000000, -2.000000)" fill="#00F5FF" fill-rule="nonzero">
<path d="M13.6589533,16.8145125 C12.1577656,18.4056344 9.46094366,17.7607106 8.81627889,15.6564079 C8.17191082,13.5530241 10.0566844,11.554165 12.2013972,12.0649636 C14.6271737,9.99996332 18.395699,6.80533763 20.578825,5.03647794 C21.3401853,4.41928272 21.9975585,5.12233675 21.4055305,5.86039029 C19.6774694,8.01622175 16.4408744,11.7992687 14.3504359,14.2252708 C14.5562674,15.1021542 14.3587437,16.0728479 13.6589951,16.8145126 L13.6589533,16.8145125 Z" id="路径" transform="translate(15.161190, 11.251174) rotate(-45.000000) translate(-15.161190, -11.251174) "></path>
<path d="M18.6650962,22.3895645 C13.0107657,25.1394877 6.40360979,20.6917619 6.80078571,14.4028349 C7.19775576,8.11470013 14.3024095,4.6587253 19.5593883,8.19564124 L21.5978614,6.64412867 C15.1364195,1.53250149 5.57181671,5.29575161 4.42300891,13.4017775 C3.27411747,21.507803 11.3949266,27.9320699 19.0053019,24.9377135 C24.9760954,22.5884394 27.1508107,15.8116558 24.6904828,10.5321101 L22.9231979,12.8464529 C23.9092867,16.4384775 22.4314776,20.5578277 18.6650962,22.3895645 Z" id="路径" transform="translate(15.000000, 15.000000) rotate(-52.000000) translate(-15.000000, -15.000000) "></path>
<g id="编组-4" transform="translate(7.443293, 8.541748)">
<path d="M5.36252649,0.817813202 C5.36252649,0.190575505 4.67187573,-0.203526653 4.12233695,0.110050623 C3.57275618,0.423669472 3.57275618,1.21195693 4.12233695,1.52557578 C4.67191773,1.83919463 5.36252649,1.44500933 5.36252649,0.817813202 Z" id="路径"></path>
<path d="M11.3915235,1.75727087 C11.934727,1.44365202 11.930704,0.64847957 11.3843688,0.329353454 C10.8379767,0.0102117535 10.1553,0.404355484 10.1584775,1.03711603 C10.1616772,1.66987658 10.8483559,2.07086893 11.3915235,1.75727087 Z" id="路径"></path>
<path d="M14.0806064,3.48170933 C14.0806064,2.85447191 13.3899553,2.46036993 12.8404163,2.77394707 C12.2908353,3.08756578 12.2908353,3.87585288 12.8404163,4.18947159 C13.3899973,4.5030903 14.0806064,4.10890517 14.0806064,3.48170933 Z" id="路径" transform="translate(13.254418, 3.481715) rotate(90.000000) translate(-13.254418, -3.481715) "></path>
<path d="M13.5924282,7.44826694 C14.1356318,7.76188579 14.8222595,7.3608155 14.8254742,6.72811211 C14.8286517,6.09535156 14.1459751,5.70120783 13.5995829,6.02034953 C13.0531907,6.33949123 13.0492607,7.13466888 13.5924282,7.44826694 Z" id="路径"></path>
<path d="M1.94753342,6.2848479 C1.94753342,5.65761041 1.25688263,5.26350852 0.707343608,5.5770858 C0.157762588,5.89070465 0.157762435,6.67899185 0.707343332,6.99261048 C1.25692423,7.30622912 1.94753342,6.91204381 1.94753342,6.2848479 Z" id="路径" transform="translate(1.121346, 6.284854) rotate(300.000000) translate(-1.121346, -6.284854) "></path>
<path d="M2.92258645,3.09380838 C2.92258645,2.46657075 2.23193581,2.07246877 1.68239691,2.38604612 C1.13281601,2.69966504 1.13281586,3.48795241 1.68239663,3.80157112 C2.23197741,4.11518983 2.92258645,3.72100443 2.92258645,3.09380838 Z" id="路径" transform="translate(2.096399, 3.093814) rotate(330.000000) translate(-2.096399, -3.093814) "></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>异物检测</title>
<defs>
<path d="M0,16.5 L1.099,16.499 L1.1,19.8 C1.1,20.3641194 1.52464421,20.8290579 2.07171676,20.8925995 L2.2,20.9 L5.5,20.899 L5.5,22 L2.2,22 C0.98497355,22 0,21.0150264 0,19.8 L0,16.5 Z M19.8,0 C21.0150264,0 22,0.98497355 22,2.2 L22,19.8 C22,21.0150264 21.0150264,22 19.8,22 L16.5,22 L16.5,20.899 L19.8,20.9 C20.3641194,20.9 20.8290579,20.4753558 20.8925995,19.9282832 L20.9,19.8 L20.899,16.499 L22,16.5 L22,5.5 L20.899,5.499 L20.9,2.2 C20.9,1.63588058 20.4753558,1.17094212 19.9282832,1.1074005 L19.8,1.1 L16.5,1.1 L16.5,1.81999974e-12 L19.8,0 Z M5.5,1.1 L2.2,1.1 C1.63588058,1.1 1.17094212,1.52464421 1.1074005,2.07171676 L1.1,2.2 L1.099,5.499 L0,5.5 L0,2.2 C0,0.98497355 0.98497355,0 2.2,0 L5.5,1.81797907e-12 L5.5,1.1 Z" id="path-1"></path>
<filter x="-63.6%" y="-59.1%" width="227.3%" height="227.3%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1696.000000, -362.000000)">
<g id="异物检测" transform="translate(1705.000000, 370.000000)">
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<g id="酒吧" transform="translate(4.000000, 4.000000)" fill="#FFBD36" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="14" height="14"></rect>
<g id="编组-114" transform="translate(3.443069, 3.479873) rotate(-30.000000) translate(-3.443069, -3.479873) translate(2.130569, 0.876981)">
<path d="M1.97686741,2.41210845 C2.61809307,2.41210845 2.64338796,2.71946529 2.61935781,2.92573329 L2.28546516,4.82538556 C2.26649399,4.99367219 2.16025542,5.20578347 1.34323023,5.20578347 C0.465497285,5.20578347 0.359258715,4.99367219 0.33965517,4.82538556 L0.0057625219,2.92573329 C-0.0182676308,2.71888096 0.00702726678,2.41210845 0.602722104,2.41210845 L1.97686741,2.41210845 Z M1.40457036,2.47580027 L1.17565153,2.47580027 L1.17565153,4.33805551 L1.08395753,4.67638176 L1.49626436,4.67638176 L1.40457036,4.33805551 L1.40457036,2.47580027 Z" id="形状结合"></path>
<path d="M0.507233866,2.44366219 C0.70263695,2.50267938 0.980880823,2.53949208 1.29011095,2.53949208 C1.59934107,2.53949208 1.87758494,2.50267938 2.07298802,2.44366219 L2.07298802,2.27245391 C1.87884969,2.32796513 1.60882665,2.36302485 1.30971449,2.36302485 C0.989734037,2.36302485 0.703901694,2.3232905 0.507866238,2.26135167 L0.507866238,2.44366219 L0.507233866,2.44366219 Z" id="路径"></path>
<path d="M2.07235565,2.27303824 C1.87821731,2.32854946 1.60819428,2.36360918 1.30908212,2.36360918 C0.989101664,2.36360918 0.703269322,2.32387483 0.507233866,2.261936 L0.724137612,0.158937378 C0.724137612,0.0712880889 0.97771896,1.3556607e-13 1.29011095,1.3556607e-13 C1.60250293,1.3556607e-13 1.85608428,0.0712880889 1.85608428,0.158937378 L2.07235565,2.27303824 L2.07235565,2.27303824 Z" id="路径"></path>
</g>
<g id="编组-114备份" transform="translate(10.005569, 7.818026)">
<path d="M1.97686741,2.41210845 C2.61809307,2.41210845 2.64338796,2.71946529 2.61935781,2.92573329 L2.28546516,4.82538556 C2.26649399,4.99367219 2.16025542,5.20578347 1.34323023,5.20578347 C0.465497285,5.20578347 0.359258715,4.99367219 0.33965517,4.82538556 L0.0057625219,2.92573329 C-0.0182676308,2.71888096 0.00702726678,2.41210845 0.602722104,2.41210845 L1.97686741,2.41210845 Z M1.40457036,2.47580027 L1.17565153,2.47580027 L1.17565153,4.33805551 L1.08395753,4.67638176 L1.49626436,4.67638176 L1.40457036,4.33805551 L1.40457036,2.47580027 Z" id="形状结合"></path>
<path d="M0.507233866,2.44366219 C0.70263695,2.50267938 0.980880823,2.53949208 1.29011095,2.53949208 C1.59934107,2.53949208 1.87758494,2.50267938 2.07298802,2.44366219 L2.07298802,2.27245391 C1.87884969,2.32796513 1.60882665,2.36302485 1.30971449,2.36302485 C0.989734037,2.36302485 0.703901694,2.3232905 0.507866238,2.26135167 L0.507866238,2.44366219 L0.507233866,2.44366219 Z" id="路径"></path>
<path d="M2.07235565,2.27303824 C1.87821731,2.32854946 1.60819428,2.36360918 1.30908212,2.36360918 C0.989101664,2.36360918 0.703269322,2.32387483 0.507233866,2.261936 L0.724137612,0.158937378 C0.724137612,0.0712880889 0.97771896,0 1.29011095,0 C1.60250293,0 1.85608428,0.0712880889 1.85608428,0.158937378 L2.07235565,2.27303824 L2.07235565,2.27303824 Z" id="路径"></path>
</g>
<path d="M8.26980294,1.91744749 L8.26980294,4.11915498 C8.26980294,4.25241761 8.31460568,4.41344442 8.40560568,4.60224897 C8.49660568,4.79105352 8.66600021,4.96734521 8.91378927,5.12838558 C9.13360568,5.26997204 9.32400021,5.47126234 9.48639474,5.7322429 C9.64880294,5.99323703 9.73419747,6.2597623 9.74400021,6.53463851 L9.74400021,8.25462123 C9.74400021,8.69052426 9.74119747,9.15139878 9.73700021,9.64005103 C9.73280294,10.1287033 9.73000021,10.5854294 9.73000021,11.0116123 L9.73000021,12.5317011 C9.73000021,12.6260966 9.72019747,12.7260503 9.70200021,12.830166 C9.68239474,12.9342817 9.64180294,13.0383973 9.58019747,13.142513 C9.51860568,13.2466287 9.42760568,13.3438033 9.30860568,13.4340369 C9.18960568,13.5242705 9.02860568,13.5978428 8.82839474,13.654754 C8.46580294,13.7588696 8.06400021,13.8088533 7.62439474,13.803295 C7.18478927,13.7977368 6.74100021,13.7491495 6.29160568,13.654754 C6.07180294,13.607563 5.89819747,13.5409181 5.76800021,13.4562428 C5.63921114,13.3715675 5.53839474,13.2757756 5.46700021,13.17166 C5.39560568,13.0675443 5.34939474,12.9606495 5.33119747,12.8523719 C5.31160568,12.7440943 5.30319747,12.6469197 5.30319747,12.560848 L5.30319747,6.63457871 C5.31300021,6.20840941 5.40539474,5.87940118 5.58319747,5.64756758 C5.75960568,5.41574754 5.93460568,5.24222142 6.10680294,5.12837202 C6.25939474,5.02425635 6.40500021,4.8798772 6.54360568,4.69526168 C6.68219747,4.51061905 6.75639474,4.34265119 6.76619747,4.191331 L6.76619747,1.91744749 L8.26980294,1.91744749 L8.26980294,1.91744749 Z M8.62819747,8.31153238 L6.40780294,8.31153238 L6.40780294,10.6131936 L8.62819747,10.6131936 L8.62819747,8.31153238 L8.62819747,8.31153238 Z M7.51100021,0.198847548 C7.82600021,0.198847548 8.03180294,0.229390855 8.12700021,0.2918467 C8.22219747,0.352933316 8.26980294,0.507032641 8.26980294,0.754131118 L8.26980294,1.53569003 L6.76619747,1.53569003 L6.76619747,0.781895297 C6.76619747,0.544516993 6.81380294,0.389021325 6.90900021,0.312683391 C7.00419747,0.2363319 7.20439474,0.198847548 7.51100021,0.198847548 Z" id="形状" transform="translate(7.523599, 7.001280) rotate(-330.000000) translate(-7.523599, -7.001280) "></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>游泳检测</title>
<defs>
<path d="M0,16.5 L1.099,16.499 L1.1,19.8 C1.1,20.3641194 1.52464421,20.8290579 2.07171676,20.8925995 L2.2,20.9 L5.5,20.899 L5.5,22 L2.2,22 C0.98497355,22 0,21.0150264 0,19.8 L0,16.5 Z M19.8,0 C21.0150264,0 22,0.98497355 22,2.2 L22,19.8 C22,21.0150264 21.0150264,22 19.8,22 L16.5,22 L16.5,20.899 L19.8,20.9 C20.3641194,20.9 20.8290579,20.4753558 20.8925995,19.9282832 L20.9,19.8 L20.899,16.499 L22,16.5 L22,5.5 L20.899,5.499 L20.9,2.2 C20.9,1.63588058 20.4753558,1.17094212 19.9282832,1.1074005 L19.8,1.1 L16.5,1.1 L16.5,1.81999974e-12 L19.8,0 Z M5.5,1.1 L2.2,1.1 C1.63588058,1.1 1.17094212,1.52464421 1.1074005,2.07171676 L1.1,2.2 L1.099,5.499 L0,5.5 L0,2.2 C0,0.98497355 0.98497355,0 2.2,0 L5.5,1.81797907e-12 L5.5,1.1 Z" id="path-1"></path>
<filter x="-63.6%" y="-59.1%" width="227.3%" height="227.3%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1596.000000, -362.000000)">
<g id="游泳检测" transform="translate(1605.000000, 370.000000)">
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<g id="编组-57" transform="translate(3.000000, 3.000000)">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
<g id="游泳" transform="translate(0.000000, 1.000000)" fill="#FFBD36" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0.799721011" y="0" width="14.2222222" height="14.2222222"></rect>
<path d="M9.78895712,8.32473958 C10.5452939,8.33480903 11.0406932,8.71920139 11.477846,9.05836806 C11.7877766,9.29876736 12.080103,9.52572917 12.4735925,9.63416667 C13.1402592,9.81628472 13.9623946,9.61322917 14.9204155,9.02913194 C15.2236273,8.8440625 15.6196689,8.93984375 15.8043564,9.24305556 C15.9894432,9.54626736 15.8936446,9.94232639 15.5904328,10.1270139 C14.6535405,10.6986632 13.775728,10.9854861 12.9709884,10.9854861 C12.6819953,10.9854861 12.4022905,10.9485417 12.1330543,10.8744618 C11.492655,10.6986632 11.047221,10.3525868 10.689096,10.0746701 C10.2999641,9.77263889 10.0822905,9.61520833 9.77156129,9.61105903 L9.7589224,9.61105903 C9.35399184,9.61105903 8.91211684,9.87654514 8.44614462,10.4013889 L8.41484057,10.4336247 C8.37341962,10.4803128 8.32444026,10.5216962 8.26836684,10.5558507 C7.33166546,11.1271181 6.45385296,11.4143229 5.64850573,11.4143229 C5.35991198,11.4143229 5.08062379,11.3773785 4.81098837,11.303316 C4.17058907,11.1275 3.72515504,10.781441 3.36703004,10.5035069 C2.97789809,10.2014757 2.76020712,10.0440451 2.44949532,10.0398958 C2.04831476,10.0395139 1.5951724,10.3000521 1.12406129,10.8302257 C0.887811288,11.0957118 0.481700177,11.1196007 0.215814761,10.8833507 C-0.0496539894,10.6471181 -0.0735602394,10.2405903 0.162689761,9.97510417 C0.883870316,9.16444444 1.64850573,8.75357639 2.43626615,8.75357639 L2.46687379,8.75357639 C3.22322796,8.76364583 3.71862726,9.14805556 4.15576268,9.48720486 C4.46569323,9.72760417 4.75803698,9.95456597 5.15152657,10.0630208 C5.8011782,10.2405971 6.59938371,10.0515755 7.52691037,9.50094505 L7.48477309,9.54626736 C8.20595365,8.73560764 8.97058907,8.32473958 9.75833212,8.32473958 L9.78895712,8.32473958 Z M12.2296501,4.95864727 C12.6918869,4.69107335 13.2619127,4.69107335 13.7241496,4.95864727 C14.1863864,5.22622119 14.4702758,5.720525 14.4684624,6.25461806 C14.4702758,6.78871111 14.1863864,7.28301492 13.7241496,7.55058884 C13.2619127,7.81816276 12.6918869,7.81816276 12.2296501,7.55058884 C11.7674132,7.28301492 11.4835238,6.78871111 11.4853373,6.25461806 C11.4835238,5.720525 11.7674132,5.22622119 12.2296501,4.95864727 Z M6.60574532,2.89086806 L9.22558907,3.80543403 C9.39230782,3.86369792 9.52762032,3.98715278 9.59991198,4.14795139 L10.430346,5.98557292 C10.5765266,6.30934028 10.4325161,6.68998264 10.1087661,6.83654514 C10.0256429,6.87410409 9.93548444,6.89356199 9.84426962,6.89362847 C9.59932171,6.89362847 9.36525921,6.75300347 9.25760296,6.51496528 L8.54114462,4.92899306 L6.18183907,4.10527778 C5.8464224,3.98854167 5.66925226,3.62152778 5.78657865,3.28612847 C5.9039224,2.95071181 6.27192587,2.77274306 6.60574532,2.89086806 Z" id="形状结合"></path>
<path d="M5.59121407,9.50578125 C5.61157865,9.56720486 5.64317587,9.6209375 5.68051962,9.66972222 C6.22510296,9.66578125 6.85128351,9.45322917 7.55093629,9.03684028 C8.25690851,8.26232639 9.00416546,7.86704861 9.77374879,7.86704861 L9.80435643,7.86704861 C10.3132106,7.87416667 10.7025335,8.05135417 11.0369606,8.26923611 C11.2384363,8.12859375 11.3346342,7.86942708 11.2530543,7.62428819 L10.7766134,6.19060764 C10.6774467,5.89194444 10.3548773,5.73036458 10.0562141,5.82953125 L5.47586684,7.35170139 C5.17720365,7.45086806 5.01562379,7.7734375 5.11479046,8.07210069 L5.59123143,9.50578125 L5.59121407,9.50578125 Z" id="路径"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>火焰烟雾</title>
<defs>
<path d="M0,16.5 L1.099,16.499 L1.1,19.8 C1.1,20.3641194 1.52464421,20.8290579 2.07171676,20.8925995 L2.2,20.9 L5.5,20.899 L5.5,22 L2.2,22 C0.98497355,22 0,21.0150264 0,19.8 L0,16.5 Z M19.8,0 C21.0150264,0 22,0.98497355 22,2.2 L22,19.8 C22,21.0150264 21.0150264,22 19.8,22 L16.5,22 L16.5,20.899 L19.8,20.9 C20.3641194,20.9 20.8290579,20.4753558 20.8925995,19.9282832 L20.9,19.8 L20.899,16.499 L22,16.5 L22,5.5 L20.899,5.499 L20.9,2.2 C20.9,1.63588058 20.4753558,1.17094212 19.9282832,1.1074005 L19.8,1.1 L16.5,1.1 L16.5,1.81999974e-12 L19.8,0 Z M5.5,1.1 L2.2,1.1 C1.63588058,1.1 1.17094212,1.52464421 1.1074005,2.07171676 L1.1,2.2 L1.099,5.499 L0,5.5 L0,2.2 C0,0.98497355 0.98497355,0 2.2,0 L5.5,1.81797907e-12 L5.5,1.1 Z" id="path-1"></path>
<filter x="-63.6%" y="-59.1%" width="227.3%" height="227.3%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1646.000000, -362.000000)">
<g id="火焰烟雾" transform="translate(1655.000000, 370.000000)">
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<g id="报警信息" transform="translate(4.000000, 4.000000)" fill="#FFBD36" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="14" height="14"></rect>
<path d="M12.3975,10.37625 L12.3975,5.75625002 C12.4434087,2.76010525 10.0517698,0.29403369 7.055625,0.24812502 C4.05948023,0.202216351 1.59340867,2.59385525 1.5475,5.59000002 L1.5475,10.3675 L0.41,10.3675 L0.41,13.71875 L13.535,13.71875 L13.535,10.37625 L12.3975,10.37625 Z M3.385,5.53750002 C3.39949752,3.55134602 5.021346,1.95300262 7.0075,1.9675001 C8.993654,1.98199757 10.5919974,3.60384602 10.5775,5.59000002 L10.5775,10.37625 L3.385,10.37625 L3.385,5.59875002 L3.385,5.53750002 Z M2.1775,13.2725 L3.2275,11.4175 L3.7,11.4175 L2.64125,13.2725 L2.1775,13.2725 Z M3.2625,13.2725 L4.3125,11.4175 L4.79375,11.4175 L3.7,13.2725 L3.2625,13.2725 Z M4.3475,13.2725 L5.3975,11.4175 L5.87875,11.4175 L4.81125,13.2725 L4.3475,13.2725 Z M5.4325,13.2725 L6.4825,11.4175 L6.96375,11.4175 L5.89625,13.2725 L5.4325,13.2725 Z M6.5175,13.2725 L7.5675,11.4175 L8.075,11.4175 L6.98125,13.2725 L6.5175,13.2725 Z M7.6025,13.2725 L8.6525,11.4175 L9.13375,11.4175 L8.075,13.2725 L7.6025,13.2725 Z M8.6875,13.2725 L9.7375,11.4175 L10.21875,11.4175 L9.16,13.2725 L8.6875,13.2725 Z M10.1925,13.2725 L9.72875,13.2725 L10.77875,11.4175 L11.26,11.4175 L10.1925,13.2725 Z" id="形状"></path>
<path d="M6.41375,9.1525 C5.95113702,8.81774256 5.78369928,8.20623084 6.01125,7.6825 C6.11151569,7.92428288 6.3302179,8.09659372 6.58875,8.1375 C6.30180719,7.62250351 6.39891793,6.97869525 6.825,6.57125 C6.825,7.28 7.805,7.77 7.805,8.1725 C7.76999851,8.51139183 7.67207288,8.84077805 7.51625,9.14375 C8.29447056,9.04158945 8.93572401,8.48307838 9.14375,7.72625 C8.96636957,7.94668841 8.73818398,8.12083004 8.47875,8.23375 C8.89360752,7.9603338 9.14342687,7.49685318 9.14375,7 C9.14375,6.5975 8.88125,6.44875 8.7325,6.23875 C8.58375,6.02875 8.7325,5.64375 8.7325,5.64375 C8.53327035,5.74929799 8.4136826,5.96113915 8.42625,6.18625 C8.39036871,6.3882442 8.32242819,6.58320396 8.225,6.76375 C8.225,5.29375 7.51625,4.47125 7.51625,4.13875 C7.53505603,3.87438985 7.6258333,3.62021349 7.77875,3.40375 C6.47621956,3.57150509 5.52495484,4.71760716 5.6,6.02875 C5.355,5.8975 5.32,5.36375 5.32,5.36375 C4.65211285,6.01703235 4.472838,7.02237759 4.87375,7.86625 C4.70112386,7.77493405 4.53453195,7.67264077 4.375,7.56 C4.54974943,8.52148948 5.41158928,9.2034671 6.3875,9.1525 L6.41375,9.1525 Z" id="路径"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>绿化带分割</title>
<defs>
<path d="M0,16.5 L1.099,16.499 L1.1,19.8 C1.1,20.3641194 1.52464421,20.8290579 2.07171676,20.8925995 L2.2,20.9 L5.5,20.899 L5.5,22 L2.2,22 C0.98497355,22 0,21.0150264 0,19.8 L0,16.5 Z M19.8,0 C21.0150264,0 22,0.98497355 22,2.2 L22,19.8 C22,21.0150264 21.0150264,22 19.8,22 L16.5,22 L16.5,20.899 L19.8,20.9 C20.3641194,20.9 20.8290579,20.4753558 20.8925995,19.9282832 L20.9,19.8 L20.899,16.499 L22,16.5 L22,5.5 L20.899,5.499 L20.9,2.2 C20.9,1.63588058 20.4753558,1.17094212 19.9282832,1.1074005 L19.8,1.1 L16.5,1.1 L16.5,1.81999974e-12 L19.8,0 Z M5.5,1.1 L2.2,1.1 C1.63588058,1.1 1.17094212,1.52464421 1.1074005,2.07171676 L1.1,2.2 L1.099,5.499 L0,5.5 L0,2.2 C0,0.98497355 0.98497355,0 2.2,0 L5.5,1.81797907e-12 L5.5,1.1 Z" id="path-1"></path>
<filter x="-63.6%" y="-59.1%" width="227.3%" height="227.3%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1646.000000, -418.000000)">
<g id="绿化带分割" transform="translate(1655.000000, 426.000000)">
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<g id="编组-56" transform="translate(3.000000, 3.000000)" fill="#FFBD36">
<rect id="矩形" stroke="#FFBD36" stroke-width="0.666666667" opacity="0" x="0.333333333" y="0.333333333" width="15.3333333" height="15.3333333"></rect>
<g id="编组" transform="translate(0.000000, 0.666667)" fill-rule="nonzero">
<path d="M13.2308211,11.3612781 L13.2308211,8.29508903 L14.9887624,8.29508903 L13.8784837,5.39039922 L14.4336231,5.39039922 L12.6756818,0.705415669 L11.5579164,5.39039922 L12.0205325,5.39039922 L10.8831085,8.29508903 L12.5423767,8.29508903 L12.6756818,11.1997788 C11.166683,10.6797926 9.65768413,10.4197995 8.1486853,10.4197995 C6.63968646,10.4197995 5.13068763,10.6797926 3.6216888,11.1997788 L3.6216888,8.29508903 L5.80874293,8.17353801 L3.98908275,4.82553306 L5.08877736,4.82553306 L2.97891039,0 L1.45375487,4.82553306 L2.42377105,4.82553306 L1.1102787,8.29508903 L2.86821997,8.29508903 L2.86821997,11.1997788 C2.86821997,11.1997788 0.64766257,12.2304752 0,12.9800726 C0.925232249,12.5115742 1.94298773,12.6052739 3.42335932,12.4178746 C2.9607432,12.6989736 2.59065029,12.6989736 2.31308062,12.9800726 C1.66541805,13.4485709 0.555139343,14.6666667 0.555139343,14.6666667 L7.40185798,14.6666667 C7.40185798,14.6666667 4.99625414,13.5422706 5.08877736,12.8863729 C5.08877736,12.5115742 5.82896316,12.0430759 6.19905607,11.7619769 L7.56098186,11.4549778 L8.41961345,11.3612781 C11.2878334,11.4549778 14.334582,11.6682772 16,12.4178746 C15.6299071,11.7619769 13.2308211,11.3612781 13.2308211,11.3612781 Z" id="形状"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>跌倒检测</title>
<defs>
<path d="M0,16.5 L1.099,16.499 L1.1,19.8 C1.1,20.3641194 1.52464421,20.8290579 2.07171676,20.8925995 L2.2,20.9 L5.5,20.899 L5.5,22 L2.2,22 C0.98497355,22 0,21.0150264 0,19.8 L0,16.5 Z M19.8,0 C21.0150264,0 22,0.98497355 22,2.2 L22,19.8 C22,21.0150264 21.0150264,22 19.8,22 L16.5,22 L16.5,20.899 L19.8,20.9 C20.3641194,20.9 20.8290579,20.4753558 20.8925995,19.9282832 L20.9,19.8 L20.899,16.499 L22,16.5 L22,5.5 L20.899,5.499 L20.9,2.2 C20.9,1.63588058 20.4753558,1.17094212 19.9282832,1.1074005 L19.8,1.1 L16.5,1.1 L16.5,1.81999974e-12 L19.8,0 Z M5.5,1.1 L2.2,1.1 C1.63588058,1.1 1.17094212,1.52464421 1.1074005,2.07171676 L1.1,2.2 L1.099,5.499 L0,5.5 L0,2.2 C0,0.98497355 0.98497355,0 2.2,0 L5.5,1.81797907e-12 L5.5,1.1 Z" id="path-1"></path>
<filter x="-63.6%" y="-59.1%" width="227.3%" height="227.3%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1489.000000, -362.000000)">
<g id="跌倒检测" transform="translate(1498.000000, 370.000000)">
<g id="机动车违法信息查询备份-2" transform="translate(4.000000, 4.000000)" fill="#FFBD36" fill-rule="nonzero">
<g id="跌倒评估">
<rect id="矩形" opacity="0" x="0" y="0" width="14" height="14"></rect>
<path d="M7.30000195,3.56000586 C8.01270594,3.56448254 8.65775317,3.13868569 8.93374029,2.48157221 C9.20972741,1.82445873 9.06216469,1.06576635 8.56000195,0.56 C8.04920355,0.0543243095 7.28653642,-0.098997061 6.62000391,0.169996094 C5.95925372,0.443104218 5.52603618,1.08505575 5.52000586,1.79999805 C5.52264539,2.26943646 5.71166528,2.71859831 6.04548132,3.04866836 C6.37929737,3.37873842 6.83056364,3.56267763 7.30000195,3.56004794 L7.30000195,3.56000586 Z M13.5000059,9.07000391 L9.77000391,4.50000195 C9.69907126,4.40595512 9.60643276,4.33047086 9.49999805,4.27999414 C9.0689719,4.05046321 8.53349785,4.2111097 8.30000391,4.64000195 L8.30000391,4.69999414 L7,7.09000195 L5.67999414,6.25000195 C5.49022852,6.13810879 5.26508046,6.1023724 5.04999414,6.15000586 L1.56999609,6.88000195 C1.10692114,6.99293886 0.817939116,7.45402931 0.918181,7.92001721 C1.01842288,8.3860051 1.47144517,8.68747787 1.93999805,8.60000586 L4.68000586,8.00000195 L6.32999609,9.21000391 L3.99999414,9.21000391 C3.77037273,9.21840445 3.5539342,9.31941075 3.40000391,9.49000391 L0.580001953,12.4899961 C0.271140463,12.849213 0.302081355,13.3884729 0.650001953,13.7100059 C0.996044384,14.0338776 1.53396343,14.0338776 1.88000586,13.7100059 L4.45999805,10.9999805 L7.7,10.9999805 C7.95609352,11.001038 8.2002316,10.8917274 8.37000391,10.6999922 C8.41679746,10.644809 8.45706341,10.5844078 8.49000195,10.5199883 L10.2100059,7.87999023 L12.1199805,10.2100059 C12.2598713,10.4018684 12.4706301,10.5298761 12.70538,10.5655576 C12.9401299,10.601239 13.1794051,10.5416355 13.3699863,10.4000039 C13.507828,10.299764 13.6123519,10.1604004 13.6699883,10.0000059 C13.7844782,9.69491067 13.718869,9.35141483 13.4999922,9.10999414 L13.5000059,9.07000391 Z" id="形状"></path>
</g>
</g>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>车牌检测</title>
<defs>
<path d="M0,16.5 L1.099,16.499 L1.1,19.8 C1.1,20.3641194 1.52464421,20.8290579 2.07171676,20.8925995 L2.2,20.9 L5.5,20.899 L5.5,22 L2.2,22 C0.98497355,22 0,21.0150264 0,19.8 L0,16.5 Z M19.8,0 C21.0150264,0 22,0.98497355 22,2.2 L22,19.8 C22,21.0150264 21.0150264,22 19.8,22 L16.5,22 L16.5,20.899 L19.8,20.9 C20.3641194,20.9 20.8290579,20.4753558 20.8925995,19.9282832 L20.9,19.8 L20.899,16.499 L22,16.5 L22,5.5 L20.899,5.499 L20.9,2.2 C20.9,1.63588058 20.4753558,1.17094212 19.9282832,1.1074005 L19.8,1.1 L16.5,1.1 L16.5,1.81999974e-12 L19.8,0 Z M5.5,1.1 L2.2,1.1 C1.63588058,1.1 1.17094212,1.52464421 1.1074005,2.07171676 L1.1,2.2 L1.099,5.499 L0,5.5 L0,2.2 C0,0.98497355 0.98497355,0 2.2,0 L5.5,1.81797907e-12 L5.5,1.1 Z" id="path-1"></path>
<filter x="-63.6%" y="-59.1%" width="227.3%" height="227.3%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1439.000000, -418.000000)">
<g id="车牌检测" transform="translate(1448.000000, 426.000000)">
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<g id="Group" transform="translate(4.200000, 4.700000)">
<path d="M12.4932,3.5766 C13.1218677,3.57726141 13.6313386,4.08673229 13.632,4.7154 L13.632,11.4012 C13.6313386,12.0298677 13.1218677,12.5393386 12.4932,12.54 L1.1388,12.54 C0.510132295,12.5393386 0.000661407919,12.0298677 0,11.4012 L0,4.7154 C0.000661407919,4.08673229 0.510132295,3.57726141 1.1388,3.5766 L12.4932,3.5766 Z M12.4932,4.4158 L1.1388,4.4158 C0.973426847,4.41602035 0.839420351,4.55002685 0.8392,4.7154 L0.8392,11.4012 C0.839420351,11.5665732 0.973426847,11.7005796 1.1388,11.7008 L12.4932,11.7008 C12.6585732,11.7005796 12.7925796,11.5665732 12.7928,11.4012 L12.7928,4.7154 C12.7925796,4.55002685 12.6585732,4.41602035 12.4932,4.4158 Z M10.9316,1.7884 C11.1383229,1.78905871 11.3057413,1.95647714 11.3064,2.1632 C11.3057413,2.36992286 11.1383229,2.53734129 10.9316,2.538 L2.7006,2.538 C2.49387714,2.53734129 2.32645871,2.36992286 2.3258,2.1632 C2.32645871,1.95647714 2.49387714,1.78905871 2.7006,1.7884 L10.9316,1.7884 Z M9.1334,0 C9.34012286,0.00065870771 9.50754129,0.168077136 9.5082,0.3748 C9.50754129,0.581522864 9.34012286,0.748941292 9.1334,0.7496 L4.4986,0.7496 C4.29187714,0.748941292 4.12445871,0.581522864 4.1238,0.3748 C4.12445871,0.168077136 4.29187714,0.00065870771 4.4986,0 L9.1334,0 Z" id="Shape" fill="#FFBD37" fill-rule="nonzero"></path>
<text id="苏J" font-family="SourceHanSansCN-Bold, Source Han Sans CN" font-size="4.5" font-weight="bold" fill="#FFBD36">
<tspan x="3.472" y="10">苏J</tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>车辆朝向</title>
<defs>
<path d="M0,16.5 L1.099,16.499 L1.1,19.8 C1.1,20.3641194 1.52464421,20.8290579 2.07171676,20.8925995 L2.2,20.9 L5.5,20.899 L5.5,22 L2.2,22 C0.98497355,22 0,21.0150264 0,19.8 L0,16.5 Z M19.8,0 C21.0150264,0 22,0.98497355 22,2.2 L22,19.8 C22,21.0150264 21.0150264,22 19.8,22 L16.5,22 L16.5,20.899 L19.8,20.9 C20.3641194,20.9 20.8290579,20.4753558 20.8925995,19.9282832 L20.9,19.8 L20.899,16.499 L22,16.5 L22,5.5 L20.899,5.499 L20.9,2.2 C20.9,1.63588058 20.4753558,1.17094212 19.9282832,1.1074005 L19.8,1.1 L16.5,1.1 L16.5,1.81999974e-12 L19.8,0 Z M5.5,1.1 L2.2,1.1 C1.63588058,1.1 1.17094212,1.52464421 1.1074005,2.07171676 L1.1,2.2 L1.099,5.499 L0,5.5 L0,2.2 C0,0.98497355 0.98497355,0 2.2,0 L5.5,1.81797907e-12 L5.5,1.1 Z" id="path-1"></path>
<filter x="-63.6%" y="-59.1%" width="227.3%" height="227.3%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1439.000000, -362.000000)">
<g id="车辆朝向" transform="translate(1448.000000, 370.000000)">
<g id="机动车违法信息查询备份-2" transform="translate(3.000000, 3.000000)" fill="#FFBD36" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="16" height="16"></rect>
<path d="M10.5071195,3 C11.3578812,3 12.0493895,3.48843979 12.2339532,4.49970467 L12.8082732,6.2770371 C12.8588704,6.24745171 12.9159262,6.23148731 12.9741382,6.23062751 L14.2489188,6.23062751 C14.4447756,6.23062751 14.6024694,6.393047 14.6024694,6.59546311 L14.6024694,6.91388912 C14.6026721,7.01043328 14.5655375,7.10310627 14.499234,7.17152099 C14.4329305,7.23993571 14.3428894,7.27848795 14.2489188,7.27869659 L14.0020581,7.32191376 C13.3744679,6.89442654 12.621431,6.70514684 11.8726283,6.7866706 C11.9212913,6.69666414 11.9571145,6.60186201 11.9648896,6.50064692 L11.8068134,5.85780384 L11.3785237,4.67492195 C11.3395795,4.45491238 11.2515891,4.40650578 11.1125811,4.22168312 L4.50894208,4.22168312 C4.37150829,4.40169606 4.27727579,4.44330999 4.23522434,4.67652519 L4.22899601,4.70372402 L3.80652399,5.85780384 L3.65000825,6.50064692 C3.68621466,6.97149326 4.23522434,7.3427137 4.69349212,7.3427137 L10.38796,7.3427137 C9.66717438,7.84310548 9.17277797,8.62051273 9.01623663,9.49966248 L6.4834167,9.49966248 C6.32618213,9.50010293 6.198827,9.63095217 6.19840584,9.7924929 L6.19840584,10.6153489 C6.19840584,10.7757573 6.32534046,10.9073637 6.4834167,10.9073637 L9.05828809,10.9093747 C9.20827972,11.5334771 9.53110649,12.0995454 9.98770465,12.5390825 L3.65311557,12.5390825 L3.65311557,13.3491407 C3.65311557,13.7091666 3.3700485,14 3.0196197,14 L2.0528332,14 C1.7024044,14 1.41932364,13.7091666 1.41932364,13.3491407 L1.41932364,10.8257672 C1.41932364,10.7841673 1.42556566,10.7457458 1.43178029,10.7069586 C1.42379466,10.6456872 1.41963394,10.5839534 1.41932364,10.522136 L1.59765905,8.42279133 C1.59765905,8.01476669 1.68526625,7.66434619 1.83711416,7.35871797 L1.35508293,7.273915 C1.1589972,7.27346568 1.0002107,7.11014187 1,6.90868562 L1,6.59225663 C1.00020671,6.49571247 1.03773475,6.40320691 1.10432833,6.33509021 C1.17092191,6.26697352 1.261126,6.2288255 1.35509662,6.22903834 L2.63027415,6.22903834 C2.6956784,6.22903834 2.75525129,6.24983827 2.80704905,6.28063736 L3.38251883,4.49811549 C3.53904826,3.6540517 4.13205317,3 5.10974951,3 L10.5071195,3 Z M14.1959712,12.7494867 L14.1959712,13.3491267 C14.1959712,13.7075634 13.9109466,13.9983828 13.5620784,13.9983828 L12.5952782,13.9983828 C12.2784207,13.9985152 12.0106429,13.7571263 11.9695711,13.4343375 C12.0493895,13.4391331 12.1292079,13.445532 12.2121472,13.4471353 C12.9597241,13.4471353 13.6465782,13.1851321 14.1959712,12.7494867 Z M12.2904051,7.29789326 C13.7859695,7.29789326 14.9984531,8.54518606 15,10.0816949 C15.000155,11.2078685 14.3399468,12.223233 13.3272626,12.6542745 C12.3145784,13.0853161 11.1488756,12.8471371 10.373778,12.0508122 C9.59868032,11.2544872 9.36685045,10.0568596 9.78640188,9.01644134 C10.2059533,7.97602308 11.1942515,7.29773402 12.2904051,7.29789326 Z M4.10400518,9.37123449 C3.75680378,9.36399001 3.43290981,9.5501399 3.25723753,9.85790692 C3.08156525,10.1656739 3.08156525,10.5469663 3.25723753,10.8547334 C3.43290981,11.1625004 3.75680378,11.3486503 4.10400518,11.3413917 C4.62607628,11.3306673 5.04384535,10.8927892 5.04384535,10.3563131 C5.04384535,9.81983701 4.62607628,9.38195896 4.10400518,9.37123449 Z M11.478431,9.2 C11.2823526,9.2 11.1254898,9.29698558 10.9916951,9.43328965 L11.1301034,9.62201835 C11.2269892,9.51454784 11.3377159,9.44115334 11.4692038,9.43853211 C11.6306801,9.44115334 11.7298728,9.54862385 11.7298728,9.71900393 C11.7298728,9.9129751 11.6191461,10.0571429 11.2846594,10.0571429 L11.2846594,10.2799476 C11.667589,10.2799476 11.7875429,10.4188729 11.7875429,10.6338139 C11.7875429,10.8330275 11.656055,10.9536042 11.4645902,10.9536042 C11.289273,10.9536042 11.1623987,10.8566186 11.0632061,10.7412844 L10.934025,10.9352556 C11.0470584,11.0794233 11.2200688,11.2 11.4876582,11.2 C11.7990769,11.2 12.0551323,10.9955439 12.0551323,10.6469201 C12.0551323,10.3874181 11.9005763,10.2196592 11.7044979,10.1646134 L11.7044979,10.1515072 C11.8844287,10.0754915 11.9974621,9.92083879 11.9974621,9.69803408 C11.9974621,9.37824377 11.7829293,9.2 11.478431,9.2 Z M12.9478658,9.2 C12.6133791,9.2 12.306574,9.49619921 12.306574,10.2380079 C12.306574,10.8933159 12.5695498,11.2 12.8925025,11.2 C13.1693191,11.2 13.3999996,10.950983 13.3999996,10.5682831 C13.3999996,10.1593709 13.2085348,9.96015727 12.922491,9.96015727 C12.8002303,9.96015727 12.6525948,10.0440367 12.5534021,10.182962 C12.5649362,9.63250328 12.744867,9.44639581 12.9617066,9.44639581 C13.0608993,9.44639581 13.1647055,9.50668414 13.2269892,9.59056356 L13.3723179,9.40707733 C13.2754321,9.29174312 13.1370238,9.2 12.9478658,9.2 Z M12.874048,10.1803408 C13.0562856,10.1803408 13.1531715,10.3192661 13.1531715,10.5682831 C13.1531715,10.8173001 13.0378312,10.9693316 12.8901957,10.9693316 C12.7079581,10.9693316 12.5856974,10.7884666 12.5580158,10.4057667 C12.6595152,10.2406291 12.7748554,10.1803408 12.874048,10.1803408 Z M13.85,8.7 C13.7119288,8.7 13.6,8.81192881 13.6,8.95 C13.6,9.08807119 13.7119288,9.2 13.85,9.2 C13.9880712,9.2 14.1,9.08807119 14.1,8.95 C14.1,8.81192881 13.9880712,8.7 13.85,8.7 Z" id="形状结合"></path>
</g>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>车辆检测</title>
<defs>
<path d="M0,16.5 L1.099,16.499 L1.1,19.8 C1.1,20.3641194 1.52464421,20.8290579 2.07171676,20.8925995 L2.2,20.9 L5.5,20.899 L5.5,22 L2.2,22 C0.98497355,22 0,21.0150264 0,19.8 L0,16.5 Z M19.8,0 C21.0150264,0 22,0.98497355 22,2.2 L22,19.8 C22,21.0150264 21.0150264,22 19.8,22 L16.5,22 L16.5,20.899 L19.8,20.9 C20.3641194,20.9 20.8290579,20.4753558 20.8925995,19.9282832 L20.9,19.8 L20.899,16.499 L22,16.5 L22,5.5 L20.899,5.499 L20.9,2.2 C20.9,1.63588058 20.4753558,1.17094212 19.9282832,1.1074005 L19.8,1.1 L16.5,1.1 L16.5,1.81999974e-12 L19.8,0 Z M5.5,1.1 L2.2,1.1 C1.63588058,1.1 1.17094212,1.52464421 1.1074005,2.07171676 L1.1,2.2 L1.099,5.499 L0,5.5 L0,2.2 C0,0.98497355 0.98497355,0 2.2,0 L5.5,1.81797907e-12 L5.5,1.1 Z" id="path-1"></path>
<filter x="-63.6%" y="-59.1%" width="227.3%" height="227.3%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1489.000000, -418.000000)">
<g id="车辆检测" transform="translate(1498.000000, 426.000000)">
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<g id="机动车违法信息查询备份" transform="translate(3.000000, 3.000000)" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
<path d="M10.5071195,3 C11.3578812,3 12.0493895,3.48843979 12.2339532,4.49970467 L12.8082732,6.2770371 C12.8588704,6.24745171 12.9159262,6.23148731 12.9741382,6.23062751 L14.2489188,6.23062751 C14.4447756,6.23062751 14.6024694,6.393047 14.6024694,6.59546311 L14.6024694,6.91388912 C14.6026721,7.01043328 14.5655375,7.10310627 14.499234,7.17152099 C14.4329305,7.23993571 14.3428894,7.27848795 14.2489188,7.27869659 L14.0020581,7.32191376 C13.3744679,6.89442654 12.621431,6.70514684 11.8726283,6.7866706 C11.9212913,6.69666414 11.9571145,6.60186201 11.9648896,6.50064692 L11.8068134,5.85780384 L11.3785237,4.67492195 C11.3395795,4.45491238 11.2515891,4.40650578 11.1125811,4.22168312 L4.50894208,4.22168312 C4.37150829,4.40169606 4.27727579,4.44330999 4.23522434,4.67652519 L4.22899601,4.70372402 L3.80652399,5.85780384 L3.65000825,6.50064692 C3.68621466,6.97149326 4.23522434,7.3427137 4.69349212,7.3427137 L10.38796,7.3427137 C9.66717438,7.84310548 9.17277797,8.62051273 9.01623663,9.49966248 L6.4834167,9.49966248 C6.32618213,9.50010293 6.198827,9.63095217 6.19840584,9.7924929 L6.19840584,10.6153489 C6.19840584,10.7757573 6.32534046,10.9073637 6.4834167,10.9073637 L9.05828809,10.9093747 C9.20827972,11.5334771 9.53110649,12.0995454 9.98770465,12.5390825 L3.65311557,12.5390825 L3.65311557,13.3491407 C3.65311557,13.7091666 3.3700485,14 3.0196197,14 L2.0528332,14 C1.7024044,14 1.41932364,13.7091666 1.41932364,13.3491407 L1.41932364,10.8257672 C1.41932364,10.7841673 1.42556566,10.7457458 1.43178029,10.7069586 C1.42379466,10.6456872 1.41963394,10.5839534 1.41932364,10.522136 L1.59765905,8.42279133 C1.59765905,8.01476669 1.68526625,7.66434619 1.83711416,7.35871797 L1.35508293,7.273915 C1.1589972,7.27346568 1.0002107,7.11014187 1,6.90868562 L1,6.59225663 C1.00020671,6.49571247 1.03773475,6.40320691 1.10432833,6.33509021 C1.17092191,6.26697352 1.261126,6.2288255 1.35509662,6.22903834 L2.63027415,6.22903834 C2.6956784,6.22903834 2.75525129,6.24983827 2.80704905,6.28063736 L3.38251883,4.49811549 C3.53904826,3.6540517 4.13205317,3 5.10974951,3 L10.5071195,3 Z M14.1959712,12.7494867 L14.1959712,13.3491267 C14.1959712,13.7075634 13.9109466,13.9983828 13.5620784,13.9983828 L12.5952782,13.9983828 C12.2784207,13.9985152 12.0106429,13.7571263 11.9695711,13.4343375 C12.0493895,13.4391331 12.1292079,13.445532 12.2121472,13.4471353 C12.9597241,13.4471353 13.6465782,13.1851321 14.1959712,12.7494867 L14.1959712,12.7494867 Z M12.2904051,7.29789326 C13.7859695,7.29789326 14.9984531,8.54518606 15,10.0816949 C15.000155,11.2078685 14.3399468,12.223233 13.3272626,12.6542745 C12.3145784,13.0853161 11.1488756,12.8471371 10.373778,12.0508122 C9.59868032,11.2544872 9.36685045,10.0568596 9.78640188,9.01644134 C10.2059533,7.97602308 11.1942515,7.29773402 12.2904051,7.29789326 L12.2904051,7.29789326 Z M12.0338255,8.53238802 C11.5833297,8.53210186 11.1669056,8.77875592 10.9414163,9.17943824 C10.7159269,9.58012057 10.7156295,10.073958 10.940636,10.4749267 C11.1656425,10.8758954 11.5817692,11.1230787 12.032265,11.1233651 L12.0369328,11.1213681 C12.2981939,11.1213681 12.5501194,11.0393778 12.7627037,10.883751 C12.7751604,10.8741597 12.7860702,10.8641465 12.7973633,10.8545552 L13.5511822,11.6306078 L13.8062013,11.3689843 L13.0492888,10.5909347 C13.2054212,10.3725283 13.2945889,10.1057013 13.2945889,9.8276798 C13.2937291,9.11267626 12.7297695,8.53327162 12.0338255,8.53238802 L12.0338255,8.53238802 Z M4.10400518,9.37124856 C3.75680378,9.36399001 3.43290981,9.5501399 3.25723753,9.85790692 C3.08156525,10.1656739 3.08156525,10.5469663 3.25723753,10.8547334 C3.43290981,11.1625004 3.75680378,11.3486503 4.10400518,11.3413917 C4.62607628,11.3306673 5.04384535,10.8927892 5.04384535,10.3563131 C5.04384535,9.81983701 4.62607628,9.38195896 4.10400518,9.37123449 L4.10400518,9.37124856 Z M12.032265,8.90321492 C12.2732806,8.90321492 12.5014426,9.00001406 12.6708257,9.17523134 C12.9270474,9.44073526 13.0030009,9.83835806 12.8634544,10.1836587 C12.723908,10.5289594 12.3961647,10.7543777 12.0322513,10.7553512 C11.5347597,10.7546844 11.1316883,10.3403855 11.1312661,9.82926898 C11.1319146,9.31831717 11.5349198,8.904275 12.0322513,8.9036087 L12.032265,8.90321492 Z" id="形状" fill="#FFBD36"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>车道线分割</title>
<defs>
<path d="M0,16.5 L1.099,16.499 L1.1,19.8 C1.1,20.3641194 1.52464421,20.8290579 2.07171676,20.8925995 L2.2,20.9 L5.5,20.899 L5.5,22 L2.2,22 C0.98497355,22 0,21.0150264 0,19.8 L0,16.5 Z M19.8,0 C21.0150264,0 22,0.98497355 22,2.2 L22,19.8 C22,21.0150264 21.0150264,22 19.8,22 L16.5,22 L16.5,20.899 L19.8,20.9 C20.3641194,20.9 20.8290579,20.4753558 20.8925995,19.9282832 L20.9,19.8 L20.899,16.499 L22,16.5 L22,5.5 L20.899,5.499 L20.9,2.2 C20.9,1.63588058 20.4753558,1.17094212 19.9282832,1.1074005 L19.8,1.1 L16.5,1.1 L16.5,1.81999974e-12 L19.8,0 Z M5.5,1.1 L2.2,1.1 C1.63588058,1.1 1.17094212,1.52464421 1.1074005,2.07171676 L1.1,2.2 L1.099,5.499 L0,5.5 L0,2.2 C0,0.98497355 0.98497355,0 2.2,0 L5.5,1.81797907e-12 L5.5,1.1 Z" id="path-1"></path>
<filter x="-63.6%" y="-59.1%" width="227.3%" height="227.3%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1696.000000, -418.000000)">
<g id="车道线分割" transform="translate(1705.000000, 426.000000)">
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<g id="road-(1)备份" transform="translate(4.000000, 4.000000)" fill="#FFBD36" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="14" height="14"></rect>
<path d="M6.46683789,13.44 L7.53316211,13.44 L7.53316211,10.64 L6.46683789,10.64 L6.46683789,13.44 Z M0,14 L1.07683789,14 L2.73991211,0 L1.66308789,0 L0,14 Z M6.46683789,8.4 L7.53316211,8.4 L7.53316211,5.6 L6.46683789,5.6 L6.46683789,8.4 Z M6.46683789,3.36 L7.53316211,3.36 L7.53316211,0.56 L6.46683789,0.56 L6.46683789,3.36 Z M12.3369121,0 L11.2600879,0 L12.9231621,14 L14,14 L12.3369121,0 Z" id="形状"></path>
<path d="M4.43110261,8.75 L3.73554966,8.75 L3.73554966,5.59598638 L4.43110261,5.59598638 L4.43110261,8.75 Z M4.12650856,4.08333333 L5.25,5.59347306 L2.91666667,5.60009011 L4.12650856,4.08333333 Z" id="形状"></path>
<path d="M8.75,4.08333333 L9.19336514,6.25457658 L10.5234106,4.55832908 L8.75,4.08333333 Z M9.63668037,5.63915369 C9.63668037,5.63915369 10.7204119,6.69186843 10.4740979,8.75 C11.1391207,8.75 11.0590624,8.70477977 11.0590624,8.70477977 C11.0590624,8.70477977 11.3299828,6.49583262 10.0615283,5.08606139 L9.63668037,5.63915369 L9.63668037,5.63915369 Z" id="形状"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<template>
<div class="content">
<div class="content_head" v-interact>
<div class="left">
<img src="../../assets/images/mount_head.png" />
<div class="font">车流识别</div>
</div>
<div class="right" @click="() => $emit('close')">关闭</div>
</div>
<div class="content_box">
<div class="items">
<div class="car_item">
<div class="image">
<img :src="baseUrl + trafficData.imagePath" alt="" />
</div>
<div class="info">
<div class="row">
<div class="title">发现车辆:</div>
<div class="props">{{ trafficData.total || "0" }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import data from "./data";
export default {
props:{
trafficData:{
type: Object,
default: () => {}
}
},
data() {
return {
// ...data,
baseUrl: process.env.VUE_APP_IMG_URL,
};
},
methods: {
},
mounted() {
},
};
</script>
<style lang="scss" scoped>
.content {
position: fixed;
z-index: 101;
top: calc(50% - 120px);
left: calc(50% + 80px);
margin-right: 16px;
width: 468px;
max-height: 635px;
margin-bottom: 190px;
background: rgba(0, 39, 121, 0.5);
box-shadow: 0px 2px 8px 0px rgba(1, 162, 255, 0.7),
inset 0px 0px 64px 0px rgba(26, 138, 227, 0.35),
inset 0px 0px 8px 0px #019aff;
backdrop-filter: blur(2px);
border-radius: 10px 10px 0px 0px;
.content_head {
display: flex;
justify-content: space-between;
height: 32px;
background: linear-gradient(
180deg,
#9198ff 0%,
rgba(45, 81, 153, 0.45) 40%,
#05091a 100%
);
box-shadow: inset 0px 0px 10px 2px #3f9dff;
border-radius: 10px 10px 0px 0px;
align-items: center;
padding: 0 16px;
.left {
display: flex;
align-items: center;
.font {
font-size: 20px;
font-family: YouSheBiaoTiHei;
color: #14faff;
line-height: 26px;
text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
background: linear-gradient(
135deg,
#e3aa77 0%,
#f5cda9 38%,
#f9ecd3 58%,
#fcdbb1 79%,
#edb07a 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.right {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #d2dfff;
margin-right: 8px;
cursor: pointer;
}
}
.content_box {
width: 100%;
max-height: 600px;
// padding: 0 16px;
// overflow: auto;
position: relative;
.items {
width: 100%;
height: 100%;
display: flex;
align-content: flex-start;
flex-wrap: wrap;
justify-content: space-between;
.car_item {
margin: 11px auto;
width: 90%;
height: 300px;
border: 1px solid #43deff;
padding: 4px 4px 0 4px;
.image {
position: relative;
width: 100%;
height: 90%;
img {
width: 100%;
height: 100%;
}
.tip {
position: absolute;
bottom: 0;
width: 204px;
height: 16px;
background: #000000;
opacity: 0.8;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #b7bfc8;
text-align: center;
line-height: 16px;
}
}
.info {
width: 204px;
height: 53px;
// border: 1px solid #43deff;
background: url("../../assets/images/info.png");
.row {
margin-left: 9px;
padding-top: 7px;
display: flex;
.title {
font-size: 14px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #b7cae2;
}
.props {
// width: 150px;
// height: 19px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #b7cae2;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
// &:hover {
// background: url("../../assets/images/infos.png");
// }
}
}
}
.detail {
display: flex;
flex-direction: column;
margin-top: 12px;
.image {
position: relative;
width: 436px;
height: 255px;
img {
width: 436px;
height: 255px;
}
.tip {
position: absolute;
bottom: 0;
width: 436px;
height: 31px;
background: #000000;
opacity: 0.8;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #b7bfc8;
text-align: center;
line-height: 31px;
}
}
.info {
// display: flex;
// justify-content: space-between;
// flex-wrap: wrap;
.row {
margin-top: 16px;
display: flex;
justify-content: space-between;
.col {
display: flex;
}
.title {
// flex: 1;
flex-shrink: 0;
font-size: 16px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 21px;
}
.props {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #c5ebff;
line-height: 21px;
}
}
}
.btn {
margin: 20px 0;
// position: absolute;
// bottom: 0;
align-self: center;
width: 79px;
height: 32px;
background: rgba(23, 70, 216, 0.2);
box-shadow: 0px 2px 4px 0px rgba(23, 33, 60, 0.5),
inset 0px 0px 16px 0px rgba(33, 137, 255, 0.4),
inset 0px 0px 4px 0px #00a7ff;
border-radius: 6px;
// border: 1px solid;
border-image: linear-gradient(
180deg,
rgba(138, 218, 255, 1),
rgba(82, 179, 255, 0)
)
1 1;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #00ffff;
text-align: center;
line-height: 32px;
}
}
}
}
</style>
export default {
list: [{
plateNum: '苏J88888',
carBrand: '雷克萨斯',
plateName: 'xxx',
telPhone: '15212345678',
userCode: '91320982734414771N',
carType: "这啥啊",
frame: 'LVHRM1827G5183295',
address: '盐城亭湖',
time: '2022-7-14',
img: 'http://32.128.6.38:9092/1243,0730d691604a8901.jpg',
findAddress: "开发区步湖路与伍龙路北向南反向开发区步湖路与伍龙路北向南反向开发区步湖路与伍龙路北向南反向",
locus: [{
"latitude": "33.325231",
"location_name": "开发区步湖路与伍龙路北向南反向",
"longitude": "120.281554",
"capture_time": "2022-11-22 07:22:00"
},
{
"latitude": "33.370878",
"location_name": "盐南中江嘉城北区南向南(结构枪)",
"longitude": "120.155847",
"capture_time": "2022-11-22 07:01:06"
}
]
}, ]
}
\ No newline at end of file
<template>
<div class="content">
<div class="content_head" v-interact>
<div class="left">
<img src="../../assets/images/mount_head.png" />
<div class="font">车辆识别</div>
</div>
<div class="right" @click="() => $emit('closecar')">关闭</div>
</div>
<div class="content_box">
<div class="items" v-show="!show">
<div
class="car_item"
v-for="item in list"
:key="item"
@click="handleDetail(item)"
>
<div class="image">
<img :src="baseUrl + item.imageUrl" alt="" />
<div class="tip">{{ item.plateNum || "暂无" }}</div>
</div>
<div class="info">
<div class="row">
<div class="title">地点:</div>
<div class="props">{{ item.findAddress || "暂无" }}</div>
</div>
<div class="row">
<div class="title">时间:</div>
<div class="props">{{ item.findTime || "暂无" }}</div>
</div>
</div>
</div>
</div>
<div class="detail" v-show="show">
<div class="image">
<canvas id="canvas" ref="canvas"></canvas>
<!-- <img :src="detail.imageUrl" alt="" /> -->
<div class="tip">抓拍照片</div>
</div>
<div class="info">
<div class="row" v-if="detail.plateNum">
<div style="display: flex" v-if="detail.plateNum">
<div class="title">车牌号:</div>
<div class="props">{{ detail.plateNum || "暂无" }}</div>
</div>
</div>
<div class="row" v-if="detail.carBrand">
<div class="col" v-if="detail.carBrand">
<div class="title">车辆品牌:</div>
<div class="props">{{ detail.carBrand || "暂无" }}</div>
</div>
</div>
<div class="row" v-if="detail.plateName">
<div style="display: flex" v-if="detail.plateName">
<div class="title">车主:</div>
<div class="props">{{ detail.plateName || "暂无" }}</div>
</div>
</div>
<div class="row" v-if="detail.telPhone">
<div class="col" v-if="detail.telPhone">
<div class="title">联系号码:</div>
<div class="props">{{ detail.telPhone || "暂无" }}</div>
</div>
</div>
<div class="row" v-if="detail.userCode">
<div style="display: flex" v-if="detail.userCode">
<div class="title">身份证/单位编号:</div>
<div class="props">{{ detail.userCode || "暂无" }}</div>
</div>
</div>
<div class="row">
<div style="display: flex">
<div class="title">是否有违法未处理:</div>
<div class="props">
{{
detail.illegalRecord
? "有违法未处理"
: "无违法未处理" || "暂无"
}}
</div>
</div>
<div class="col" v-if="detail.carType">
<div class="title">车辆种类:</div>
<div class="props">{{ detail.carType || "暂无" }}</div>
</div>
</div>
<div class="row" v-if="detail.carCode">
<div style="display: flex">
<div class="title">车辆识别代号:</div>
<div class="props">{{ detail.carCode || "暂无" }}</div>
</div>
</div>
<div class="row" v-if="detail.findAddress">
<div style="display: flex">
<div class="title">预警地点:</div>
<div class="props">{{ detail.findAddress || "暂无" }}</div>
</div>
</div>
<div class="row" v-if="detail.findTime">
<div style="display: flex">
<div class="title">识别时间:</div>
<div class="props">{{ detail.findTime || "暂无" }}</div>
</div>
</div>
<div class="row">
<div style="display: flex">
<div class="title">车辆轨迹:</div>
<div class="props">{{ detail.locus && detail.locus.length || "0" }}</div>
<div class="cf" @click="add_zysb(detail.locus)">预览</div>
</div>
</div>
</div>
<div class="btn" @click="show = !show">返回</div>
</div>
</div>
</div>
</template>
<script>
import API from "../../../../../../api";
import data from "./data";
import { Viewer, Utils } from "../../../../../../lib/cesium";
export default {
props: ["uavId","list"],
inject: ["g_cesium_layer", "g_collection"],
compute: {
cesium_layer() {
return this.g_cesium_layer();
},
},
data() {
return {
// ...data,
baseUrl: process.env.VUE_APP_IMG_URL,
show: false,
detail: {},
image: null,
canvas: null,
ctx: null,
gjshow: true,
};
},
methods: {
getAddress() {
this.list.forEach(async (val) => {
if (val.lon) {
let address = await API.MAP.AiRegeo({
location: `${val.lon},${val.lat}`,
});
val.findAddress =
address.province.value +
address.city.value +
address.dist.value +
address.road.roadname +
address.poi;
}
});
// this.handleDetail(this.list[0])
},
handleDetail(item) {
this.show = true;
this.detail = item;
this.getcanvas(item);
},
getcanvas(val) {
// let scale = 1;
setTimeout(() => {
this.canvas = this.$refs.canvas;
this.canvas.width = 436;
this.canvas.height = 255;
console.log(this.canvas);
this.image = new Image();
this.image.src = this.baseUrl + val.imageUrl;
this.image.onload = () => {
this.drawImage(val.yiSaPlateDetection);
};
}, 1500);
},
drawImage(plate_detection) {
this.ctx = this.canvas.getContext("2d");
this.ctx.drawImage(
this.image,
0,
0,
this.canvas.width,
this.canvas.height
);
plate_detection.x =
(this.canvas.width * plate_detection.x) / this.image.width;
plate_detection.y =
(this.canvas.height * plate_detection.y) / this.image.height;
plate_detection.h =
(this.canvas.height * plate_detection.h) / this.image.height;
plate_detection.w =
(this.canvas.width * plate_detection.w) / this.image.width;
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = "yellow";
this.ctx.strokeRect(
plate_detection.x,
plate_detection.y,
plate_detection.w,
plate_detection.h
);
},
async get_car_list() {
if (!this.uavId) {
this.$message.error("请选择无人机");
return;
}
let data = {
uavId: this.uavId,
};
let res = await API.HOME.getflightvideoMsg(data);
// console.log("get_face_list", res);
this.list = res || [];
// console.log("车牌this.list", this.list);
},
add_zysb(res) {
if(!res) return this.$message.error("暂无轨迹!")
let cesium_layer = this.g_cesium_layer();
cesium_layer.fly_to_globe();
let cate_name = "zysb";
let collection = this.init_collection(cate_name);
let list = res;
list.forEach((item) => {
item.longitude *= 1;
item.latitude *= 1;
if (item.latitude && item.longitude) {
collection.add({
position: Utils.transformWGS842Cartesian({
lng: item.longitude,
lat: item.latitude,
alt: 0,
}),
image: require(`../../assets/images/gj.png`),
scale: 1,
width: 54,
height: 89,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
horizontalOrigin: Cesium.VerticalOrigin.CENTER,
id: JSON.stringify({
...item,
entityType: "zdys",
}),
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
0,
2.2e5
),
scaleByDistance: new Cesium.NearFarScalar(2.5e4, 0.7, 2.2e7, 0),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
});
}
});
this.gjshow = !this.gjshow
if(this.gjshow){
this.hide_collection(cate_name)
}else{
this.show_collection(cate_name);
}
},
show_collection(cate) {
let primitive = this.g_collection[cate];
if (Cesium.defined(primitive)) {
let viewer = window.viewer;
let scene = viewer.scene;
if (!scene.primitives.contains(primitive)) {
scene.primitives.add(primitive);
}
primitive.show = true;
}
},
hide_collection(cate) {
let primitive = this.g_collection[cate]
if (Cesium.defined(primitive)) {
// let viewer = this.cesium_layer.viewer()
let viewer = window.viewer
let scene = viewer.scene
if (scene.primitives.contains(primitive)) {
// primitive.show = false
scene.primitives.remove(primitive)
}
}
},
init_collection(cate) {
console.log(cate, "......cate");
let viewer = window.viewer;
let scene = viewer.scene;
if (Cesium.defined(this.g_collection[cate])) {
scene.primitives.remove(this.g_collection[cate]);
}
this.g_collection[cate] = new Cesium.BillboardCollection({
scene,
show: true,
});
return this.g_collection[cate]
},
},
mounted() {
// this.get_car_list();
this.getAddress();
// this.handleDetail(this.list[0]);
},
};
</script>
<style lang="scss" scoped>
.content {
z-index: 101;
position: fixed;
top: 16vh;
left: calc(50%);
margin-left: -234px;
width: 468px;
max-height: 635px;
margin-bottom: 190px;
background: rgba(0, 39, 121, 0.5);
box-shadow: 0px 2px 8px 0px rgba(1, 162, 255, 0.7),
inset 0px 0px 64px 0px rgba(26, 138, 227, 0.35),
inset 0px 0px 8px 0px #019aff;
backdrop-filter: blur(2px);
border-radius: 10px 10px 0px 0px;
.content_head {
display: flex;
justify-content: space-between;
height: 32px;
background: linear-gradient(
180deg,
#9198ff 0%,
rgba(45, 81, 153, 0.45) 40%,
#05091a 100%
);
box-shadow: inset 0px 0px 10px 2px #3f9dff;
border-radius: 10px 10px 0px 0px;
align-items: center;
padding: 0 16px;
.left {
display: flex;
align-items: center;
.font {
font-size: 20px;
font-family: YouSheBiaoTiHei;
color: #14faff;
line-height: 26px;
text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
background: linear-gradient(
135deg,
#e3aa77 0%,
#f5cda9 38%,
#f9ecd3 58%,
#fcdbb1 79%,
#edb07a 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.right {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #d2dfff;
margin-right: 8px;
cursor: pointer;
}
}
.content_box {
width: 436px;
max-height: 600px;
padding: 0 16px;
overflow: auto;
position: relative;
.items {
width: 100%;
height: 100%;
display: flex;
align-content: flex-start;
flex-wrap: wrap;
justify-content: space-between;
.car_item {
margin: 11px auto;
width: 204px;
height: 177px;
border: 1px solid #43deff;
padding: 4px 4px 0 4px;
.image {
position: relative;
width: 204px;
height: 118px;
img {
width: 204px;
height: 118px;
}
.tip {
position: absolute;
bottom: 0;
width: 204px;
height: 16px;
background: #000000;
opacity: 0.8;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #b7bfc8;
text-align: center;
line-height: 16px;
}
}
.info {
width: 204px;
height: 53px;
// border: 1px solid #43deff;
background: url("../../assets/images/info.png");
.row {
margin-left: 9px;
padding-top: 7px;
display: flex;
.title {
font-size: 14px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #b7cae2;
}
.props {
width: 150px;
height: 19px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #b7cae2;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&:hover {
background: url("../../assets/images/infos.png");
}
}
}
}
.detail {
display: flex;
flex-direction: column;
margin-top: 12px;
.image {
position: relative;
width: 436px;
height: 255px;
img {
width: 436px;
height: 255px;
}
.tip {
position: absolute;
bottom: 0;
width: 436px;
height: 31px;
background: #000000;
opacity: 0.8;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #b7bfc8;
text-align: center;
line-height: 31px;
}
}
.info {
// display: flex;
// justify-content: space-between;
// flex-wrap: wrap;
.row {
margin-top: 16px;
display: flex;
justify-content: space-between;
.col {
display: flex;
}
.title {
// flex: 1;
flex-shrink: 0;
font-size: 16px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 21px;
}
.props {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #c5ebff;
line-height: 21px;
}
}
}
.btn {
margin: 20px 0;
// position: absolute;
// bottom: 0;
align-self: center;
width: 79px;
height: 32px;
background: rgba(23, 70, 216, 0.2);
box-shadow: 0px 2px 4px 0px rgba(23, 33, 60, 0.5),
inset 0px 0px 16px 0px rgba(33, 137, 255, 0.4),
inset 0px 0px 4px 0px #00a7ff;
border-radius: 6px;
// border: 1px solid;
border-image: linear-gradient(
180deg,
rgba(138, 218, 255, 1),
rgba(82, 179, 255, 0)
)
1 1;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #00ffff;
text-align: center;
line-height: 32px;
}
}
}
}
</style>
export default {
list: [
// {
// userName: '何元高',
// birthday: '1974-01-11',
// occurTime: '2022-02-25 08:44;55',
// address: '江苏省盐城市亭湖区人民北路66号华府景城31幢1605室',
// idCard: '320902197401112539',
// labels: ['省内人员'],
// similarity: '63',
// img: 'http://32.128.10.139:30080/components/osg-default/_/video_face_cropped/20220225-ca5ae89e-000a580ae000af-00000020-00000c10',
// imgs:'http://32.128.6.48/uploads/2022/02/25/b4e2793c-bba1-475d-9702-6a9c3f7a1adf.jpeg',
// show: false
// },
]
}
\ No newline at end of file
<template>
<div class="content">
<div class="content_head" v-interact>
<div class="left">
<img src="../../assets/images/mount_head.png" />
<div class="font">人脸识别</div>
</div>
<div class="right" @click="() => $emit('closeface')">关闭</div>
</div>
<div class="content_box">
<div class="face-item" v-for="item in list" :key="item.name">
<div class="avatar xiangsi" :class="item.similarity >= 80 ? 'cheng' : ''">
<div class="avatar-box left">
<img :src="baseUrl + item.recordImageUrl" />
<!-- <img :src="item.snapImageUrl" /> -->
</div>
<div class="compare-box" @click="infoFn(item)">
<div class="value">{{ Number(item.similarity).toFixed(2) }}%</div>
<div class="label cp">相似度</div>
</div>
<div class="avatar-box right">
<img :src="baseUrl + item.snapImageUrl" />
</div>
</div>
<div class="detail" v-if="item.show">
<div class="image">
<div class="left">
<img :src="baseUrl + item.recordImageUrl" alt />
<div class="tip">比对照片</div>
</div>
<div class="right">
<img :src="baseUrl + item.snapImageUrl" alt />
<div class="tip">抓拍照片</div>
</div>
</div>
<div class="ds">
<div class="row">
<div class="title">姓名:</div>
<div class="props">{{ item.userName || '暂无' }}</div>
</div>
<div class="row">
<div class="title">身份证号:</div>
<div class="props">{{ item.idCard || '暂无' }}</div>
</div>
<div class="row">
<div class="title">出生年份:</div>
<div class="props">{{ item.birthday || '暂无' }}</div>
</div>
<div class="row">
<div class="title">发现时间:</div>
<div class="props">{{ item.occurTime || '暂无' }}</div>
</div>
<div class="row">
<div class="title">发现地点:</div>
<div class="props">{{ item.addr || item.address || '暂无' }}</div>
</div>
<div class="row">
<div class="title">AI识别:</div>
<div
class="props border"
>{{ item.labels && item.labels.length > 0 ? item.labels[0] : '暂无' }}</div>
</div>
</div>
</div>
<div class="down" @click="item.show = !item.show">
<img v-if="!item.show" src="../../assets/images/down.png" alt />
<img v-else src="../../assets/images/up.png" alt />
</div>
</div>
</div>
</div>
</template>
<script>
import API from "../../../../../../api";
import data from "./data";
export default {
props: ["uavId"],
data() {
return {
...data,
baseUrl: process.env.VUE_APP_IMG_URL,
};
},
methods: {
async get_face_list() {
if (!this.uavId) {
this.$message.error("请选择无人机");
return;
}
let data = {
aiFacePid: this.uavId,
};
let res = await API.AIUSE.getFaceuavvideoMsg(data);
for (let i = 0; i < res.length; i++) {
let item = res[i];
if (res.length == 1) {
item.show = true;
} else {
item.show = false;
}
if (Number(item.longi) && Number(item.lati)) {
let address = await API.MAP.AiRegeo({
location: `${item.longi},${item.lati}`,
});
item.addr =
address.province.value +
address.city.value +
address.dist.value +
address.road.roadname +
address.poi;
}
}
this.list = res || [];
},
},
mounted() {
this.get_face_list();
},
};
</script>
<style lang="scss" scoped>
.content {
z-index: 101;
position: fixed;
top: 16vh;
left: calc(50%);
margin-left: -234px;
width: 468px;
max-height: 635px;
background: rgba(0, 39, 121, 0.5);
box-shadow: 0px 2px 8px 0px rgba(1, 162, 255, 0.7),
inset 0px 0px 64px 0px rgba(26, 138, 227, 0.35),
inset 0px 0px 8px 0px #019aff;
backdrop-filter: blur(2px);
border-radius: 10px 10px 0px 0px;
.content_head {
display: flex;
justify-content: space-between;
height: 32px;
background: linear-gradient(
180deg,
#9198ff 0%,
rgba(45, 81, 153, 0.45) 40%,
#05091a 100%
);
box-shadow: inset 0px 0px 10px 2px #3f9dff;
border-radius: 10px 10px 0px 0px;
align-items: center;
padding: 0 16px;
.left {
display: flex;
align-items: center;
.font {
font-size: 20px;
font-family: YouSheBiaoTiHei;
color: #14faff;
line-height: 26px;
text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
background: linear-gradient(
135deg,
#e3aa77 0%,
#f5cda9 38%,
#f9ecd3 58%,
#fcdbb1 79%,
#edb07a 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.right {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #d2dfff;
margin-right: 8px;
cursor: pointer;
}
}
.content_box {
width: 436px;
max-height: 600px;
padding: 0 16px;
overflow: auto;
.face-item {
position: relative;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
.avatar {
display: flex;
justify-content: space-between;
align-items: center;
height: 130px;
position: relative;
margin-bottom: 15px;
.avatar-box {
width: 130px;
height: 130px;
// box-sizing: border-box;
// display: flex;
// align-items: center;
img {
width: 88px;
height: 88px;
margin-top: 21px;
}
&.left {
margin-left: 7px;
}
&.right {
display: flex;
justify-content: flex-end;
margin-right: 6px;
}
}
.compare-box {
width: 74px;
height: 74px;
border-radius: 74px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
.value {
font-size: 24px;
font-family: UniDreamLED;
color: #ffffff;
line-height: 28px;
}
.label {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #c7ebff;
line-height: 21px;
letter-spacing: 1px;
}
}
}
.detail {
width: 404px;
height: 379px;
padding: 16px;
.image {
height: 150px;
display: flex;
justify-content: space-between;
.left,
.right {
position: relative;
width: 198px;
height: 150px;
img {
width: 198px;
height: 150px;
}
.tip {
position: absolute;
bottom: 0;
width: 198px;
height: 27px;
background: #0c1120;
opacity: 0.8;
font-size: 14px;
font-family: MicrosoftYaHeiUI;
color: #aee9ff;
line-height: 27px;
text-align: center;
}
}
}
.ds {
.row {
margin-top: 16px;
display: flex;
.title {
white-space: nowrap;
width: 70px;
font-size: 14px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #ffffff;
line-height: 18px;
}
.props {
// position: absolute;
margin-left: 30px;
font-size: 16px;
font-family: MicrosoftYaHeiUI;
color: #aee9ff;
line-height: 20px;
}
.border {
width: 70px;
height: 23px;
border-radius: 8px;
border: 1px solid #ff4a4a;
font-size: 14px;
font-family: MicrosoftYaHeiUI;
color: #ff4a4a;
line-height: 23px;
text-align: center;
}
}
}
}
.down {
width: 436px;
height: 20px;
box-shadow: inset 0px 0px 12px 0px #019aff;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 8px;
.icon {
}
}
}
}
}
.xiangsi {
background-image: url("../../assets/images/lan.png");
background-size: 100% 100%;
}
.cheng {
background-image: url("../../assets/images/cheng.png");
background-size: 100% 100%;
}
</style>
\ No newline at end of file
<template>
<div class="flv">
<video controls autoplay="autoplay" muted="muted" id="videoElement">
<source type="video/mp4" />
</video>
<!-- <button @click="play">播放</button> -->
</div>
</template>
<script>
import * as flvjs from "./flv.js";
export default {
props: {
data: Object,
},
data() {
return {
player: null,
flvPlayer: null,
videourl: ""
};
},
mounted() {
this.videourl = this.data.vUrl
console.log(this.data.vUrl);
this.ngOnInit();
},
methods: {
//页面初始化
ngOnInit() {
if (flvjs.default.isSupported()) {
// 获取DOM对象
this.player = document.getElementById("videoElement");
// 创建flvjs对象
this.flvPlayer = flvjs.default.createPlayer({
type: "flv", // 指定视频类型
isLive: true, // 开启直播
hasAudio: false, // 关闭声音
cors: true, // 开启跨域访问
// url: "http://pzlink999bju.powzamedia.com:8000/live/flv/test/mlinkm/channel1?only-video=1", // 指定流链接
url: this.getTarget(this.videourl), // 指定流链接
});
// 将flvjs对象和DOM对象绑定
this.flvPlayer.attachMediaElement(this.player);
}
this.play()
},
getTarget(url) {
const reg = /^pzsp:\/\/(.*):7788.*\/trans\/(.*)\/mlinkm\/(.*)\?/;
url.match(reg);
const hostname = RegExp.$1;
const groupname = RegExp.$2;
const streamname = RegExp.$3;
return `http://${hostname}:8000/live/flv/${groupname}a/mlinkm/${streamname}?only-video=1`;
},
// 播放视频
play() {
this.flvPlayer.load(); // 加载视频
this.flvPlayer.play(); // 播放
},
//页面退出销毁和暂停播放
ngOnDestroy() {
this.flvPlayer.pause();
this.flvPlayer.unload();
// 卸载DOM对象
this.flvPlayer.detachMediaElement();
// 销毁flvjs对象
this.flvPlayer.destroy();
},
},
};
</script>
<style lang="scss" scoped>
.flv {
width: 100%;
height: 100%;
#videoElement {
width: 100%;
height: 100%;
}
}
</style>
<template>
<div class="livenvr pr" :class="className">
<!-- <video style="width:100%;height:100%" controls ref="video" src="./1.mp4"></video> -->
<LivePlayer
:dblclick-fullscreen="false"
aspect="fulllscreen"
:class="{
small: !videoFlag,
'livenvr-player': videoFlag,
vUrl: isStatus && !videoFlag,
vUrlDeffault: !isStatus && !videoFlag,
}"
ref="livePlayer"
:videoUrl="data.vUrl"
/>
<LivePlayer
v-if="fpvUrl.vUrl"
:dblclick-fullscreen="false"
:class="{
vUrl: isStatus,
vUrlDeffault: !isStatus,
small: videoFlag,
'livenvr-player': !videoFlag,
}"
ref="fpvPlayer"
:controls="false"
:videoUrl="fpvUrl.vUrl"
/>
</div>
</template>
<script>
import LivePlayer from "@liveqing/liveplayer";
import { dataURLToBlob, canvasToDataURL } from "../../../../../../utils/image-tool";
export default {
props: {
deviceName: String,
data: {
type: Object,
default: () => ({}),
},
infoflag: Boolean,
fpvUrl: {
type: Object,
default: () => ({}),
},
isStatus: {
type: Boolean,
default: () => false,
},
className: String,
videoFlag: {
type: Boolean,
default: () => true,
},
},
components: { LivePlayer },
data() {
return {};
},
watch: {
fpvUrl: {
handler(value, oldVal) {
if (value.vUrl == oldVal?.vUrl) {
return;
}
if (value && value.vUrl) {
this.$nextTick(() => {
this.$refs["fpvPlayer"].play();
});
}
},
deep: true,
immediate: true,
},
data: {
handler(value, oldVal) {
if (value.vUrl == oldVal?.vUrl) {
return;
}
// console.log('livenvr', value)
if (value && value.vUrl) {
this.$nextTick(() => {
this.$refs["livePlayer"].play();
});
}
},
deep: true,
immediate: true,
},
},
mounted() {
window.player = this;
},
methods: {
init(flag) {
let dom = document.querySelector("." + this.className);
// 开启全屏
if (flag) {
dom.requestFullscreen();
} else {
document.exitFullscreen();
}
},
screenShot() {
let video = {};
let scale = 1;
// video = this.$refs.video;
video = this.$refs.livePlayer.$el.querySelector("video");
if (!video) {
return null;
}
video.useCORS = true; // 解决跨域
video.crossOrigin = "Anonymous"; // 这两个参数必填 解决跨域
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
var img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
const ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // 将video中的数据绘制到canvas里
// const image = canvas.toDataURL("image/png");
const image = canvasToDataURL(canvas);
let blob = dataURLToBlob(image);
return blob;
},
},
};
</script>
<style lang="scss" scoped>
.livenvr::v-deep {
.livenvr_title {
color: #69ceff;
background: rgba(0, 0, 0, 0.4);
border-radius: 1px;
line-height: 26px;
width: 100%;
text-align: center;
font-size: 24px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
}
.livenvr-player {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
z-index: 1;
}
.small {
width: 300px;
height: 170px;
position: absolute;
right: 0;
}
.vjs-volume-panel,
.vjs-playback-rate,
.live-player-stretch-btn,
.vjs-time-divider,
.vjs-duration,
.vjs-live-control {
display: none !important;
}
@media all and (min-height: 1000px) {
.vUrl {
bottom: 7vh !important;
right: 0px !important;
}
}
.vUrl {
bottom: 23vh;
right: 10px;
}
.vUrlDeffault {
bottom: 0;
}
/* 隐藏画中画按钮 */
.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder {
display: none !important;
}
/* 隐藏全屏按钮 */
.video-js .vjs-fullscreen-control {
display: none !important;
}
/* 隐藏截图按钮 */
.video-js .vjs-control-bar .vjs-icon-spinner {
display: none !important;
}
.vjs-control-bar {
display: none !important;
}
}
</style>
\ No newline at end of file
<template>
<div class="obstacle">
<div class="obstacle-top">
<div class="obstacle-bar-content">
<div class="obstacle-bar-block" v-for="i in 4" :key="i">
<template v-for="j in 3">
<img
v-if="j <= blockCount[`${1}-${i}`]"
:key="j"
class="obstacle-bar__item"
:class="`bar${i}-${j}`"
:src="require(`./assets/images/bar${i}-${j}.png`)"
/>
</template>
</div>
</div>
<div class="obstacle__distance" v-if="minDistance[1] !== -1">{{minDistance[1]}}m</div>
</div>
<div class="obstacle-right">
<div class="obstacle-bar-content">
<div class="obstacle-bar-block" v-for="i in 4" :key="i">
<template v-for="j in 3">
<img
v-if="j <= blockCount[`${2}-${i}`]"
:key="j"
class="obstacle-bar__item"
:class="`bar${i}-${j}`"
:src="require(`./assets/images/bar${i}-${j}.png`)"
/>
</template>
</div>
</div>
<div class="obstacle__distance" v-if="minDistance[2] !== -1">{{minDistance[2]}}m</div>
</div>
<div class="obstacle-bottom">
<div class="obstacle-bar-content">
<div class="obstacle-bar-block" v-for="i in 4" :key="i">
<template v-for="j in 3">
<img
v-if="j <= blockCount[`${3}-${i}`]"
:key="j"
class="obstacle-bar__item"
:class="`bar${i}-${j}`"
:src="require(`./assets/images/bar${i}-${j}.png`)"
/>
</template>
</div>
</div>
<div class="obstacle__distance" v-if="minDistance[3] !== -1">{{minDistance[3]}}m</div>
</div>
<div class="obstacle-left">
<div class="obstacle-bar-content">
<div class="obstacle-bar-block" v-for="i in 4" :key="i">
<template v-for="j in 3">
<img
v-if="j <= blockCount[`${4}-${i}`]"
:key="j"
class="obstacle-bar__item"
:class="`bar${i}-${j}`"
:src="require(`./assets/images/bar${i}-${j}.png`)"
/>
</template>
</div>
</div>
<div class="obstacle__distance" v-if="minDistance[4] !== -1">{{minDistance[4]}}m</div>
</div>
</div>
</template>
<script>
//每一个显示块对应避障数组的映射关系
let angleMap = new Map();
angleMap.set("1-1", [32, 33]);
angleMap.set("1-2", [34, 35]);
angleMap.set("1-3", [0, 1]);
angleMap.set("1-4", [2, 3, 4]);
angleMap.set("2-1", [5, 6]);
angleMap.set("2-2", [7, 8]);
angleMap.set("2-3", [9, 10]);
angleMap.set("2-4", [11, 12, 13]);
angleMap.set("3-1", [14, 15]);
angleMap.set("3-2", [16, 17]);
angleMap.set("3-3", [18, 19]);
angleMap.set("3-4", [20, 21, 22]);
angleMap.set("4-1", [23, 24]);
angleMap.set("4-2", [25, 26]);
angleMap.set("4-3", [27, 28]);
angleMap.set("4-4", [29, 30, 31]);
//避障角度与显示块的对应关系
let angleToBlock = new Map();
angleMap.forEach((value, key) => {
value.forEach((index) => {
angleToBlock.set(index, key); //angleToBlock.set(0, '1-3)
});
});
// console.log("angleToBlock", angleToBlock);
window.angleMap = angleMap;
export default {
data() {
//转化value为{indexs: [], count: 0}结构
const blockCount = {};
angleMap.forEach((value, key) => {
blockCount[key] = 0;
});
return {
blockCount, //每一区显示的块数
minDistance: {
//每一区最短距离
1: -1,
2: -1,
3: -1,
4: -1,
},
};
},
computed: {
obstacle() {
return this.$store.state.MMCFlightControlCenter.uavApplications.obstacle;
},
},
watch: {
obstacle: {
immediate: true,
handler() {
if(!this.obstacle){
return;
}
//显示块出发等级
const level = (this.obstacle.obsDistance * 100) / 3;
Object.keys(this.minDistance).forEach(i => {
this.minDistance[i] = -1;
})
//匹配每个10度对应的显示块
this.obstacle.distances.forEach((value, i) => {
//取得当前角度对应的显示块
const index = angleToBlock.get(i);
if (value <= level) {
this.blockCount[index] = 3;
} else if (value <= level * 2) {
this.blockCount[index] = 2;
} else if (value <= level * 3) {
this.blockCount[index] = 1;
} else {
this.blockCount[index] = 0;
}
let block = index.split("-")[0]; //当前区
// console.log('block', block)
if (this.blockCount[index] > 0) {
//计算最近距离,单位米
if (
this.minDistance[block] === -1 ||
this.minDistance[block] > value
) {
if((value / 100).toFixed(2) == '0.00'){
// console.log('this.obstacle.distances', this.obstacle.distances)
// debugger
}
this.minDistance[block] = (value / 100).toFixed(2);
}
}
});
},
},
},
};
</script>
<style lang="scss" scoped>
.obstacle {
left: 0;
top: 0;
}
.obstacle__distance {
font-family: YouSheBiaoTiHei;
font-size: 12px;
padding: 0px 5px;
background-image: linear-gradient(to right, #eb0d0d33, red, #eb0d0d33);
color: #fff;
}
.obstacle-top {
z-index: 1;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 25px;
.obstacle__distance {
position: absolute;
left: 50%;
transform: translate(-50%, 16px);
}
.obstacle-bar-content {
transform: rotatex(57deg) rotatey(180deg) rotate(180deg)
translate(-19px, -93px);
}
}
.obstacle-right {
z-index: 1;
position: absolute;
right: -53px;
transform: translate(0%, -50%);
top: 50%;
.obstacle__distance {
position: absolute;
left: -187px;
top: -28px;
}
.obstacle-bar-content {
transform: rotateY(44deg) rotateX(180deg) rotate(-90deg)
translate(-41px, -267px);
}
}
.obstacle-bottom {
z-index: 1;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
bottom: 5px;
.obstacle__distance {
position: absolute;
left: 50%;
transform: translate(-22px, -93px);
top: 0px;
}
.obstacle-bar-content {
transform: rotatex(57deg) rotatey(180deg) rotate(0deg)
translate(-20px, -213px);
}
}
.obstacle-left {
z-index: 1;
position: absolute;
left: -94px;
transform: translate(0%, -50%);
top: 50%;
.obstacle__distance {
position: absolute;
right: -183px;
top: -26px;
transform: translateY(-50%);
}
.obstacle-bar-content {
transform: rotateY(44deg) rotateX(180deg) rotate(90deg)
translate(5px, -263px);
}
}
.obstacle-bar-content {
display: flex;
justify-content: center;
transform: rotatex(57deg);
.obstacle-bar-block {
display: flex;
flex-direction: column;
position: relative;
.obstacle-bar__item {
position: absolute;
margin: 1px;
// height: 10px;
width: 60px;
background-size: 100% 100%;
overflow: hidden;
&.bar1-1 {
top: 77px;
left: -79px;
width: 50px;
}
&.bar1-2 {
top: 66px;
left: -71px;
width: 45px;
}
&.bar1-3 {
left: -64px;
top: 59px;
width: 42px;
}
&.bar2-1 {
top: 100px;
left: -31px;
width: 50px;
}
&.bar2-2 {
top: 89px;
left: -26px;
width: 45px;
}
&.bar2-3 {
left: -23px;
top: 78px;
width: 42px;
}
&.bar3-1 {
top: 102px;
left: 20px;
width: 50px;
}
&.bar3-2 {
top: 91px;
left: 20px;
width: 45px;
}
&.bar3-3 {
left: 20px;
top: 80px;
width: 42px;
}
&.bar4-1 {
top: 82px;
left: 68px;
width: 50px;
}
&.bar4-2 {
top: 73px;
left: 65px;
width: 45px;
}
&.bar4-3 {
left: 62px;
top: 65px;
width: 42px;
}
}
}
}
.hidden {
visibility: hidden;
}
</style>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>车牌识别</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0830宦1" transform="translate(-218.000000, -391.000000)" fill="#FFFFFF">
<g id="编组-8备份" transform="translate(17.000000, 249.000000)">
<g id="编组-111备份-19" transform="translate(161.000000, 108.000000)">
<g id="编组-112" transform="translate(30.000000, 8.000000)">
<g id="icon" transform="translate(4.000000, 20.000000)">
<g id="车牌识别" transform="translate(6.000000, 6.000000)">
<g id="icon/shape/ai_frame">
<g id="icon/shape/coner">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(3.000000, 17.000000) scale(1, -1) translate(-3.000000, -17.000000) translate(0.000000, 14.000000)">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(17.000000, 3.000000) scale(-1, 1) translate(-17.000000, -3.000000) translate(14.000000, 0.000000)">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(17.000000, 17.000000) scale(-1, -1) translate(-17.000000, -17.000000) translate(14.000000, 14.000000)">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
</g>
<g id="Group" transform="translate(3.000000, 4.000000)" fill-rule="nonzero">
<path d="M12.4932,3.5766 C13.1218677,3.57726141 13.6313386,4.08673229 13.632,4.7154 L13.632,11.4012 C13.6313386,12.0298677 13.1218677,12.5393386 12.4932,12.54 L1.1388,12.54 C0.510132295,12.5393386 0.000661407919,12.0298677 0,11.4012 L0,4.7154 C0.000661407919,4.08673229 0.510132295,3.57726141 1.1388,3.5766 L12.4932,3.5766 Z M12.4932,4.4158 L1.1388,4.4158 C0.973426847,4.41602035 0.839420351,4.55002685 0.8392,4.7154 L0.8392,11.4012 C0.839420351,11.5665732 0.973426847,11.7005796 1.1388,11.7008 L12.4932,11.7008 C12.6585732,11.7005796 12.7925796,11.5665732 12.7928,11.4012 L12.7928,4.7154 C12.7925796,4.55002685 12.6585732,4.41602035 12.4932,4.4158 Z M10.9316,1.7884 C11.1383229,1.78905871 11.3057413,1.95647714 11.3064,2.1632 C11.3057413,2.36992286 11.1383229,2.53734129 10.9316,2.538 L2.7006,2.538 C2.49387714,2.53734129 2.32645871,2.36992286 2.3258,2.1632 C2.32645871,1.95647714 2.49387714,1.78905871 2.7006,1.7884 L10.9316,1.7884 Z M9.1334,0 C9.34012286,0.00065870771 9.50754129,0.168077136 9.5082,0.3748 C9.50754129,0.581522864 9.34012286,0.748941292 9.1334,0.7496 L4.4986,0.7496 C4.29187714,0.748941292 4.12445871,0.581522864 4.1238,0.3748 C4.12445871,0.168077136 4.29187714,0.00065870771 4.4986,0 L9.1334,0 Z" id="Shape"></path>
<g id="苏J" transform="translate(2.834000, 5.272000)">
<path d="M1.296,1.662 L1.854,1.662 L1.854,1.05 L3.384,1.05 L3.384,1.662 L3.942,1.662 L3.942,1.05 L5.244,1.05 L5.244,0.528 L3.942,0.528 L3.942,0 L3.384,0 L3.384,0.528 L1.854,0.528 L1.854,0 L1.296,0 L1.296,0.528 L0,0.528 L0,1.05 L1.296,1.05 L1.296,1.662 Z M0.864,3.072 C0.678,3.48 0.366,3.978 0.024,4.29 L0.492,4.578 C0.816,4.23 1.116,3.702 1.32,3.294 L0.864,3.072 Z M5.316,4.392 C5.214,4.038 4.944,3.474 4.716,3.054 L4.272,3.21 C4.284,2.97 4.296,2.706 4.308,2.406 C4.314,2.334 4.32,2.154 4.32,2.154 L2.658,2.154 C2.67,1.962 2.682,1.764 2.694,1.56 L2.13,1.56 C2.118,1.764 2.112,1.962 2.094,2.154 L0.426,2.154 L0.426,2.682 L2.04,2.682 C1.896,3.744 1.482,4.602 0.084,5.076 C0.21,5.178 0.354,5.376 0.414,5.514 C1.974,4.95 2.43,3.93 2.598,2.682 L3.72,2.682 C3.666,4.158 3.588,4.764 3.45,4.902 C3.39,4.968 3.336,4.986 3.228,4.98 C3.096,4.98 2.802,4.98 2.472,4.956 C2.556,5.094 2.628,5.304 2.634,5.442 C2.952,5.46 3.276,5.466 3.462,5.442 C3.672,5.424 3.828,5.37 3.96,5.208 C4.128,5.016 4.206,4.518 4.272,3.252 C4.488,3.684 4.734,4.242 4.83,4.596 L5.316,4.392 Z" id="形状"></path>
<path d="M7.074,5.106 C7.974,5.106 8.358,4.47 8.358,3.678 L8.358,0.612 L7.662,0.612 L7.662,3.612 C7.662,4.26 7.44,4.5 6.996,4.5 C6.708,4.5 6.468,4.362 6.282,4.02 L5.796,4.374 C6.072,4.86 6.48,5.106 7.074,5.106 Z" id="路径"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>人脸识别</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0830宦1" transform="translate(-103.000000, -391.000000)">
<g id="编组-8备份" transform="translate(17.000000, 249.000000)">
<g id="编组-111备份-10" transform="translate(46.000000, 108.000000)">
<g id="编组-112" transform="translate(30.000000, 8.000000)">
<g id="icon" transform="translate(4.000000, 20.000000)">
<g id="人脸识别" transform="translate(6.000000, 6.000000)">
<g id="icon/shape/ai_frame" fill="#FFFFFF">
<g id="icon/shape/coner">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(3.000000, 17.000000) scale(1, -1) translate(-3.000000, -17.000000) translate(0.000000, 14.000000)">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(17.000000, 3.000000) scale(-1, 1) translate(-17.000000, -3.000000) translate(14.000000, 0.000000)">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(17.000000, 17.000000) scale(-1, -1) translate(-17.000000, -17.000000) translate(14.000000, 14.000000)">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
</g>
<g id="Group-22" transform="translate(5.000000, 7.000000)">
<rect id="Rectangle" fill="#FFFFFF" x="0" y="0" width="2" height="2" rx="1"></rect>
<rect id="Rectangle-Copy-17" fill="#FFFFFF" x="8" y="0" width="2" height="2" rx="1"></rect>
<path d="M1,6 C2,7.33333333 3.33333333,8 5,8 C6.66666667,8 8,7.33333333 9,6" id="Path-3" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>人脸识别 2</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0830宦1" transform="translate(-333.000000, -391.000000)" fill="#FFFFFF">
<g id="编组-8备份" transform="translate(17.000000, 249.000000)">
<g id="编组-111备份-20" transform="translate(276.000000, 108.000000)">
<g id="编组-112" transform="translate(30.000000, 8.000000)">
<g id="icon" transform="translate(4.000000, 20.000000)">
<g id="人脸识别" transform="translate(6.000000, 6.000000)">
<g id="icon/shape/ai_frame">
<g id="icon/shape/coner">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(3.000000, 17.000000) scale(1, -1) translate(-3.000000, -17.000000) translate(0.000000, 14.000000)">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(17.000000, 3.000000) scale(-1, 1) translate(-17.000000, -3.000000) translate(14.000000, 0.000000)">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(17.000000, 17.000000) scale(-1, -1) translate(-17.000000, -17.000000) translate(14.000000, 14.000000)">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
</g>
<g id="Group" transform="translate(3.000000, 2.000000)" fill-rule="nonzero">
<path d="M7.025,3.955 C8.123,3.955 9.01500084,3.068 9.01500084,1.977 C9.016,0.887 8.124,0 7.026,0 C5.929,0 5.036,0.887 5.036,1.978 C5.036,3.068 5.929,3.955 7.026,3.955 L7.025,3.955 Z M7.025,1.227 C7.442,1.227 7.781,1.564 7.781,1.977 C7.781,2.392 7.441,2.72800069 7.025,2.72800069 C6.60974437,2.72855658 6.27220258,2.39325016 6.27,1.978 C6.27,1.564 6.609,1.227 7.025,1.227 Z M2.346,1.507 C1.249,1.507 0.356,2.395 0.356,3.485 C0.356,4.575 1.249,5.463 2.346,5.463 C3.444,5.463 4.336,4.576 4.336,3.485 C4.336,2.395 3.444,1.508 2.346,1.508 L2.346,1.507 Z M2.346,4.23600274 C1.93035443,4.23710835 1.59220355,3.9016412 1.59,3.486 C1.59,3.071 1.93,2.735 2.346,2.735 C2.763,2.735 3.102,3.071 3.102,3.485 C3.102,3.899 2.762,4.235 2.346,4.235 L2.346,4.23600274 Z M13.695,3.486 C13.695,2.395 12.802,1.508 11.705,1.508 C10.607,1.508 9.714,2.395 9.714,3.485 C9.714,4.575 10.607,5.463 11.704,5.463 C12.802,5.463 13.695,4.576 13.695,3.485 L13.695,3.486 Z M10.949,3.486 C10.949,3.071 11.288,2.735 11.705,2.735 C12.121,2.735 12.46,3.071 12.46,3.485 C12.46,3.899 12.121,4.235 11.705,4.235 C11.2893544,4.23610835 10.9512035,3.9006412 10.949,3.485 L10.949,3.486 Z M8.592,4.438 L5.347,4.438 C4.567,4.438 3.933,5.068 3.933,5.843 L3.933,9.974 C3.933,10.664 4.437,11.24 5.099,11.357 L5.099,14.359 C5.099,14.699 5.375,14.973 5.717,14.973 C5.88028125,14.9735312 6.03707147,14.9091086 6.15281039,14.7939324 C6.26854931,14.6787563 6.33373536,14.5222819 6.334,14.359 L6.334,10.949 C6.33234599,10.5075626 5.97343911,10.1508933 5.532,10.152 L5.347,10.152 C5.24853024,10.1520015 5.16855011,10.0724682 5.168,9.974 L5.168,5.843 C5.168,5.745 5.248,5.665 5.348,5.665 L8.592,5.665 C8.692,5.665 8.772,5.745 8.772,5.843 L8.772,9.974 C8.772,10.072 8.692,10.152 8.592,10.152 L8.437,10.152 C8.00108371,10.1508933 7.64665398,10.5030854 7.645,10.939 L7.645,14.387 C7.645,14.725 7.921,15.0000073 8.262,15.0000073 C8.42528129,15.0007974 8.5821773,14.9366295 8.698104,14.8216407 C8.81403069,14.706652 8.87947094,14.5502824 8.88,14.387 L8.88,11.35 C9.53406216,11.2160018 10.0044858,10.6416425 10.007,9.974 L10.007,5.843 C10.007,5.068 9.372,4.438 8.592,4.438 Z M12.586,5.91599267 L11.373,5.91599267 C11.2095458,5.91520244 11.0524983,5.97950734 10.9365427,6.09471239 C10.8205872,6.20991744 10.7552638,6.36654411 10.755,6.53 C10.755,6.868 11.031,7.143 11.373,7.143 L12.586,7.143 C12.696,7.143 12.752,7.186 12.765,7.189 L12.769,10.61 C12.759,10.628 12.697,10.677 12.586,10.677 L12.43,10.677 C11.993,10.677 11.638,11.017 11.638,11.436 L11.638,14.308 C11.638,14.647 11.914,14.9210033 12.256,14.9210033 C12.4191084,14.9215313 12.5757473,14.8572458 12.6914574,14.7422858 C12.8071675,14.6273259 12.8724704,14.4711084 12.873,14.308 L12.873,11.878 C13.516,11.758 14,11.244 14,10.631 L14,7.19 C14,6.488 13.365,5.917 12.586,5.917 L12.586,5.91599267 Z M2.627,5.916 L1.414,5.916 C0.634,5.916 0,6.487 0,7.19 L0,10.632 C0,11.245 0.484,11.759 1.127,11.878 L1.127,14.308 C1.127,14.648 1.403,14.9220073 1.744,14.9220073 C1.90745416,14.9227976 2.0645017,14.8584927 2.18045727,14.7432876 C2.29641284,14.6280826 2.36173616,14.4714559 2.362,14.308 L2.362,11.436 C2.362,11.018 2.007,10.678 1.57,10.678 L1.414,10.678 C1.304,10.678 1.242,10.631 1.235,10.632 L1.23,7.21 C1.24,7.191 1.303,7.142 1.414,7.142 L2.627,7.142 C2.79045416,7.14279756 2.9475017,7.07849266 3.06345727,6.96328761 C3.17941284,6.84808256 3.24473616,6.69145589 3.245,6.528 C3.24447094,6.36471762 3.17903069,6.20834804 3.063104,6.09335927 C2.9471773,5.97837049 2.79028129,5.91420264 2.627,5.91499266 L2.627,5.916 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>游泳识别</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0830宦1" transform="translate(-447.000000, -391.000000)" fill="#FFFFFF">
<g id="编组-8备份" transform="translate(17.000000, 249.000000)">
<g id="编组-111备份-21" transform="translate(390.000000, 108.000000)">
<g id="编组-112" transform="translate(30.000000, 8.000000)">
<g id="icon" transform="translate(4.000000, 20.000000)">
<g id="游泳识别" transform="translate(6.000000, 6.000000)">
<g id="icon/shape/coner">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(3.000000, 17.000000) scale(1, -1) translate(-3.000000, -17.000000) translate(0.000000, 14.000000)">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(17.000000, 3.000000) scale(-1, 1) translate(-17.000000, -3.000000) translate(14.000000, 0.000000)">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(17.000000, 17.000000) scale(-1, -1) translate(-17.000000, -17.000000) translate(14.000000, 14.000000)">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="游泳" transform="translate(2.000000, 3.000000)" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0.799721011" y="0" width="14.2222222" height="14.2222222"></rect>
<path d="M9.78895712,8.32473958 C10.5452939,8.33480903 11.0406932,8.71920139 11.477846,9.05836806 C11.7877766,9.29876736 12.080103,9.52572917 12.4735925,9.63416667 C13.1402592,9.81628472 13.9623946,9.61322917 14.9204155,9.02913194 C15.2236273,8.8440625 15.6196689,8.93984375 15.8043564,9.24305556 C15.9894432,9.54626736 15.8936446,9.94232639 15.5904328,10.1270139 C14.6535405,10.6986632 13.775728,10.9854861 12.9709884,10.9854861 C12.6819953,10.9854861 12.4022905,10.9485417 12.1330543,10.8744618 C11.492655,10.6986632 11.047221,10.3525868 10.689096,10.0746701 C10.2999641,9.77263889 10.0822905,9.61520833 9.77156129,9.61105903 L9.7589224,9.61105903 C9.35399184,9.61105903 8.91211684,9.87654514 8.44614462,10.4013889 L8.41484057,10.4336247 C8.37341962,10.4803128 8.32444026,10.5216962 8.26836684,10.5558507 C7.33166546,11.1271181 6.45385296,11.4143229 5.64850573,11.4143229 C5.35991198,11.4143229 5.08062379,11.3773785 4.81098837,11.303316 C4.17058907,11.1275 3.72515504,10.781441 3.36703004,10.5035069 C2.97789809,10.2014757 2.76020712,10.0440451 2.44949532,10.0398958 C2.04831476,10.0395139 1.5951724,10.3000521 1.12406129,10.8302257 C0.887811288,11.0957118 0.481700177,11.1196007 0.215814761,10.8833507 C-0.0496539894,10.6471181 -0.0735602394,10.2405903 0.162689761,9.97510417 C0.883870316,9.16444444 1.64850573,8.75357639 2.43626615,8.75357639 L2.46687379,8.75357639 C3.22322796,8.76364583 3.71862726,9.14805556 4.15576268,9.48720486 C4.46569323,9.72760417 4.75803698,9.95456597 5.15152657,10.0630208 C5.8011782,10.2405971 6.59938371,10.0515755 7.52691037,9.50094505 L7.48477309,9.54626736 C8.20595365,8.73560764 8.97058907,8.32473958 9.75833212,8.32473958 L9.78895712,8.32473958 Z M12.2296501,4.95864727 C12.6918869,4.69107335 13.2619127,4.69107335 13.7241496,4.95864727 C14.1863864,5.22622119 14.4702758,5.720525 14.4684624,6.25461806 C14.4702758,6.78871111 14.1863864,7.28301492 13.7241496,7.55058884 C13.2619127,7.81816276 12.6918869,7.81816276 12.2296501,7.55058884 C11.7674132,7.28301492 11.4835238,6.78871111 11.4853373,6.25461806 C11.4835238,5.720525 11.7674132,5.22622119 12.2296501,4.95864727 Z M6.60574532,2.89086806 L9.22558907,3.80543403 C9.39230782,3.86369792 9.52762032,3.98715278 9.59991198,4.14795139 L10.430346,5.98557292 C10.5765266,6.30934028 10.4325161,6.68998264 10.1087661,6.83654514 C10.0256429,6.87410409 9.93548444,6.89356199 9.84426962,6.89362847 C9.59932171,6.89362847 9.36525921,6.75300347 9.25760296,6.51496528 L8.54114462,4.92899306 L6.18183907,4.10527778 C5.8464224,3.98854167 5.66925226,3.62152778 5.78657865,3.28612847 C5.9039224,2.95071181 6.27192587,2.77274306 6.60574532,2.89086806 Z" id="形状结合"></path>
<path d="M5.59121407,9.50578125 C5.61157865,9.56720486 5.64317587,9.6209375 5.68051962,9.66972222 C6.22510296,9.66578125 6.85128351,9.45322917 7.55093629,9.03684028 C8.25690851,8.26232639 9.00416546,7.86704861 9.77374879,7.86704861 L9.80435643,7.86704861 C10.3132106,7.87416667 10.7025335,8.05135417 11.0369606,8.26923611 C11.2384363,8.12859375 11.3346342,7.86942708 11.2530543,7.62428819 L10.7766134,6.19060764 C10.6774467,5.89194444 10.3548773,5.73036458 10.0562141,5.82953125 L5.47586684,7.35170139 C5.17720365,7.45086806 5.01562379,7.7734375 5.11479046,8.07210069 L5.59123143,9.50578125 L5.59121407,9.50578125 Z" id="路径"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>异物识别</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0830宦1" transform="translate(-677.000000, -391.000000)" fill="#FFFFFF">
<g id="编组-8备份" transform="translate(17.000000, 249.000000)">
<g id="编组-111备份-22" transform="translate(620.000000, 108.000000)">
<g id="编组-112" transform="translate(30.000000, 8.000000)">
<g id="icon" transform="translate(4.000000, 20.000000)">
<g id="异物识别" transform="translate(6.000000, 6.000000)">
<g id="icon/shape/coner">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(3.000000, 17.000000) scale(1, -1) translate(-3.000000, -17.000000) translate(0.000000, 14.000000)">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(17.000000, 3.000000) scale(-1, 1) translate(-17.000000, -3.000000) translate(14.000000, 0.000000)">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(17.000000, 17.000000) scale(-1, -1) translate(-17.000000, -17.000000) translate(14.000000, 14.000000)">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="酒吧" transform="translate(3.000000, 3.000000)" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0.0587466942" width="14" height="13.8820893"></rect>
<g id="编组-114" transform="translate(3.443069, 3.478593) rotate(-30.000000) translate(-3.443069, -3.478593) translate(2.130569, 0.875701)">
<path d="M1.97686741,2.41210845 C2.61809307,2.41210845 2.64338796,2.71946529 2.61935781,2.92573329 L2.28546516,4.82538556 C2.26649399,4.99367219 2.16025542,5.20578347 1.34323023,5.20578347 C0.465497285,5.20578347 0.359258715,4.99367219 0.33965517,4.82538556 L0.0057625219,2.92573329 C-0.0182676308,2.71888096 0.00702726678,2.41210845 0.602722104,2.41210845 L1.97686741,2.41210845 Z M1.40457036,2.47580027 L1.17565153,2.47580027 L1.17565153,4.33805551 L1.08395753,4.67638176 L1.49626436,4.67638176 L1.40457036,4.33805551 L1.40457036,2.47580027 Z" id="形状结合"></path>
<path d="M0.507233866,2.44366219 C0.70263695,2.50267938 0.980880823,2.53949208 1.29011095,2.53949208 C1.59934107,2.53949208 1.87758494,2.50267938 2.07298802,2.44366219 L2.07298802,2.27245391 C1.87884969,2.32796513 1.60882665,2.36302485 1.30971449,2.36302485 C0.989734037,2.36302485 0.703901694,2.3232905 0.507866238,2.26135167 L0.507866238,2.44366219 L0.507233866,2.44366219 Z" id="路径"></path>
<path d="M2.07235565,2.27303824 C1.87821731,2.32854946 1.60819428,2.36360918 1.30908212,2.36360918 C0.989101664,2.36360918 0.703269322,2.32387483 0.507233866,2.261936 L0.724137612,0.158937378 C0.724137612,0.0712880889 0.97771896,1.3556607e-13 1.29011095,1.3556607e-13 C1.60250293,1.3556607e-13 1.85608428,0.0712880889 1.85608428,0.158937378 L2.07235565,2.27303824 L2.07235565,2.27303824 Z" id="路径"></path>
</g>
<g id="编组-114备份" transform="translate(10.005569, 7.816746)">
<path d="M1.97686741,2.41210845 C2.61809307,2.41210845 2.64338796,2.71946529 2.61935781,2.92573329 L2.28546516,4.82538556 C2.26649399,4.99367219 2.16025542,5.20578347 1.34323023,5.20578347 C0.465497285,5.20578347 0.359258715,4.99367219 0.33965517,4.82538556 L0.0057625219,2.92573329 C-0.0182676308,2.71888096 0.00702726678,2.41210845 0.602722104,2.41210845 L1.97686741,2.41210845 Z M1.40457036,2.47580027 L1.17565153,2.47580027 L1.17565153,4.33805551 L1.08395753,4.67638176 L1.49626436,4.67638176 L1.40457036,4.33805551 L1.40457036,2.47580027 Z" id="形状结合"></path>
<path d="M0.507233866,2.44366219 C0.70263695,2.50267938 0.980880823,2.53949208 1.29011095,2.53949208 C1.59934107,2.53949208 1.87758494,2.50267938 2.07298802,2.44366219 L2.07298802,2.27245391 C1.87884969,2.32796513 1.60882665,2.36302485 1.30971449,2.36302485 C0.989734037,2.36302485 0.703901694,2.3232905 0.507866238,2.26135167 L0.507866238,2.44366219 L0.507233866,2.44366219 Z" id="路径"></path>
<path d="M2.07235565,2.27303824 C1.87821731,2.32854946 1.60819428,2.36360918 1.30908212,2.36360918 C0.989101664,2.36360918 0.703269322,2.32387483 0.507233866,2.261936 L0.724137612,0.158937378 C0.724137612,0.0712880889 0.97771896,0 1.29011095,0 C1.60250293,0 1.85608428,0.0712880889 1.85608428,0.158937378 L2.07235565,2.27303824 L2.07235565,2.27303824 Z" id="路径"></path>
</g>
<path d="M8.26980294,1.91616753 L8.26980294,4.11787502 C8.26980294,4.25113765 8.31460568,4.41216446 8.40560568,4.60096901 C8.49660568,4.78977356 8.66600021,4.96606525 8.91378927,5.12710562 C9.13360568,5.26869208 9.32400021,5.46998238 9.48639474,5.73096294 C9.64880294,5.99195707 9.73419747,6.25848234 9.74400021,6.53335855 L9.74400021,8.25334127 C9.74400021,8.6892443 9.74119747,9.15011882 9.73700021,9.63877107 C9.73280294,10.1274233 9.73000021,10.5841495 9.73000021,11.0103323 L9.73000021,12.5304211 C9.73000021,12.6248166 9.72019747,12.7247704 9.70200021,12.828886 C9.68239474,12.9330017 9.64180294,13.0371174 9.58019747,13.141233 C9.51860568,13.2453487 9.42760568,13.3425233 9.30860568,13.4327569 C9.18960568,13.5229905 9.02860568,13.5965629 8.82839474,13.653474 C8.46580294,13.7575897 8.06400021,13.8075733 7.62439474,13.8020151 C7.18478927,13.7964568 6.74100021,13.7478695 6.29160568,13.653474 C6.07180294,13.606283 5.89819747,13.5396382 5.76800021,13.4549628 C5.63921114,13.3702875 5.53839474,13.2744957 5.46700021,13.17038 C5.39560568,13.0662643 5.34939474,12.9593695 5.33119747,12.8510919 C5.31160568,12.7428144 5.30319747,12.6456397 5.30319747,12.5595681 L5.30319747,6.63329875 C5.31300021,6.20712945 5.40539474,5.87812122 5.58319747,5.64628762 C5.75960568,5.41446758 5.93460568,5.24094146 6.10680294,5.12709206 C6.25939474,5.02297639 6.40500021,4.87859724 6.54360568,4.69398172 C6.68219747,4.50933909 6.75639474,4.34137123 6.76619747,4.19005104 L6.76619747,1.91616753 L8.26980294,1.91616753 L8.26980294,1.91616753 Z M8.62819747,8.31025242 L6.40780294,8.31025242 L6.40780294,10.6119137 L8.62819747,10.6119137 L8.62819747,8.31025242 L8.62819747,8.31025242 Z M7.51100021,0.197567587 C7.82600021,0.197567587 8.03180294,0.228110895 8.12700021,0.29056674 C8.22219747,0.351653355 8.26980294,0.50575268 8.26980294,0.752851157 L8.26980294,1.53441007 L6.76619747,1.53441007 L6.76619747,0.780615336 C6.76619747,0.543237032 6.81380294,0.387741364 6.90900021,0.31140343 C7.00419747,0.235051939 7.20439474,0.197567587 7.51100021,0.197567587 Z" id="形状" transform="translate(7.523599, 7.000000) rotate(-330.000000) translate(-7.523599, -7.000000) "></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>烟雾识别</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0830宦1" transform="translate(-562.000000, -391.000000)">
<g id="编组-8备份" transform="translate(17.000000, 249.000000)">
<g id="编组-111备份-23" transform="translate(505.000000, 108.000000)">
<g id="编组-112" transform="translate(30.000000, 8.000000)">
<g id="icon" transform="translate(4.000000, 20.000000)">
<g id="烟雾识别" transform="translate(6.000000, 6.000000)">
<g id="icon/shape/coner" fill="#FFFFFF">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(3.000000, 17.000000) scale(1, -1) translate(-3.000000, -17.000000) translate(0.000000, 14.000000)" fill="#FFFFFF">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(17.000000, 3.000000) scale(-1, 1) translate(-17.000000, -3.000000) translate(14.000000, 0.000000)" fill="#FFFFFF">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="icon/shape/coner" transform="translate(17.000000, 17.000000) scale(-1, -1) translate(-17.000000, -17.000000) translate(14.000000, 14.000000)" fill="#FFFFFF">
<path d="M6,1 L2,1 C1.44771525,1 1,1.44771525 1,2 L1,6 L0,6 L0,1.75 C-1.18361906e-16,0.783501688 0.783501688,8.43676674e-16 1.75,0 L6,0 L6,1 Z"></path>
</g>
<g id="Group-16" transform="translate(3.200000, 4.600000)" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round">
<path d="M0.86006158,5.3113883 C-1.63993842,8.3113883 1.86006158,11.3113883 4.36006158,9.8113883 C5.86006158,11.8113883 9.36006158,10.8113883 9.86006158,8.3113883 C13.8600616,9.3113883 15.3600616,2.3113883 10.3600616,2.8113883 C10.8600616,-0.188611699 5.36006158,-1.1886117 4.86006158,1.8113883 C2.86006158,0.311388301 -0.63993842,2.3113883 0.86006158,5.3113883 Z" id="Path-8"></path>
<path d="M2.86006158,4.8113883 C2.86006158,3.3113883 4.86006158,1.8113883 6.86006158,2.8113883" id="Path-11"></path>
<path d="M2.86006158,6.8113883 C2.86006158,7.8113883 4.36006158,9.3113883 6.86006158,7.8113883" id="Path-12"></path>
<path d="M8.86006158,6.8113883 C9.86006158,6.8113883 11.8600616,4.8113883 8.86006158,3.8113883" id="Path-16"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<template>
<div class="pointList">
<div class="points" :style="infoShow ? 'height:208px':''">
<div class="title">
<div class="w100"></div>
<div>{{ pointInfo ? "航点" + pointInfo.id : "" }}</div>
<div class="right">
<div
class="btn"
:class="disable && pointList.length >= 2 ? 'active':''"
v-if="disable && pointList.length >= 2"
@click="saveLine"
>生成航线</div>
<div class="btn" v-else>生成航线</div>
<div class="close" @click="$emit('close')">关闭</div>
</div>
</div>
<div class="list" v-if="!infoShow">
<div class="item" v-for="(item, i) in pointList" :key="i">
<img :src="item.img" alt @click="getItem(item)" />
<img class="img" src="./assets/images/close.png" alt @click="delPoint(i)" />
<!-- <span @click="delPoint(i)">{{ i + 1 }}</span> -->
</div>
<div class="box el-icon-plus" @click="getPoint()"></div>
</div>
<div class="info" v-else>
<div class="return el-icon-arrow-left cp" @click="save_point"></div>
<div class="point">
<div class="form">
<!-- <div class="info" :class="active == 1?'active':''" @click="getActive(1,'carmera')">
<div class="num">2/3</div>
<div class="name">相机动作</div>
</div>-->
<div class="info" :class="active == 2 ? 'active' : ''" @click="getActive(2)">
<div class="num">{{ pointInfo.alt.toFixed(2) }}</div>
<div class="name">高度</div>
</div>
<div class="info" :class="active == 3 ? 'active' : ''" @click="getActive(3)">
<div class="num">{{ pointInfo.heading.toFixed(2) }}</div>
<div class="name">偏航角</div>
</div>
<div class="info" :class="active == 4 ? 'active' : ''" @click="getActive(4)">
<div class="num">{{ pointInfo.actions[0].param3.toFixed(2) }}</div>
<div class="name">云台偏航</div>
</div>
<div class="info" :class="active == 5 ? 'active' : ''" @click="getActive(5)">
<div class="num">{{ pointInfo.actions[0].param1.toFixed(2) }}</div>
<div class="name">云台俯仰</div>
</div>
<div class="info" :class="active == 6 ? 'active' : ''" @click="getActive(6)">
<div class="num">{{ (pointInfo.actions[1].param2).toFixed(2) + "X" }}</div>
<div class="name">变焦</div>
</div>
<div class="info" :class="active == 7 ? 'active' : ''" @click="getActive(7, 'ai')">
<div class="num">{{ checkedAI(aiList) + "/" + aiList.length }}</div>
<div class="name">AI识别</div>
</div>
<div class="info" :class="active == 8 ? 'active' : ''" @click="getActive(8, 'stay')">
<div class="num">{{ this.min + "分" + this.se + "秒" }}</div>
<div class="name">悬停</div>
</div>
<div class="info" :class="active == 9 ? 'active' : ''" @click="getActive(9, 'speed')">
<div class="num">{{this.speed}}M/S</div>
<div class="name">速度</div>
</div>
</div>
<div class="ai" v-if="aiShow">
<!-- <div class="head">AI识别</div> -->
<div
class="item"
:class="item.switch ? 'itemActive' : !item.switch && item.history ? 'itemAfter':'itemHover'"
v-for="item in aiList"
:key="item.id"
>
<div class="check">
<div class="flexs" @click="getcheck(item)">
<div class="type">{{ item.type }}</div>
<!-- <el-switch v-model="item.switch"></el-switch> -->
<div class="img">
<img :src="item.img" alt />
</div>
</div>
<el-checkbox v-model="item.check" :disabled="!item.switch">单点</el-checkbox>
</div>
</div>
</div>
<div class="stay" v-if="stayShow">
<!-- <el-slider v-model="stayVal" input-size="small"></el-slider> -->
<el-input-number @change="getMinte" v-model="min" :max="30" :min="0"></el-input-number>
<el-input-number v-model="se" :max="maxSe" :min="0"></el-input-number>
</div>
<div class="stay" v-if="speedStatus">
速度
<el-input-number v-model="speed" :max="12" :min="1"></el-input-number>M/S
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import response from "./methods/response";
import { Utils } from "../../../../../../lib/cesium";
import { mapGetters } from "vuex";
import API from "../../../../../../api";
export default {
props: {
uavData: {
type: Object,
default: () => ({})
},
mountData: {
type: Object,
default: () => ({})
}
},
data() {
return {
disable: true,
pointList: [],
pointInfo: null,
infoShow: false,
eo_zoom: 0, //变焦
picth: 0, //俯仰
yaw: 0, //偏航
active: 2,
aiShow: false,
stayShow: false,
speedStatus: false,
speed: 6,
stayVal: 0,
min: 0,
se: 0,
maxSe: 59,
camShow: false,
aiList: [
{
id: 1,
type: "人脸识别",
switch: false,
check: false,
img: require("./assets/images/face.svg")
},
{
id: 2,
type: "车牌识别",
switch: false,
check: false,
img: require("./assets/images/car.svg")
},
{
id: 3,
type: "人流识别",
switch: false,
check: false,
img: require("./assets/images/people.svg")
},
{
id: 4,
type: "游泳识别",
switch: false,
check: false,
img: require("./assets/images/swim.svg")
},
{
id: 7,
type: "烟雾识别",
switch: false,
check: false,
img: require("./assets/images/yan.svg")
},
{
id: 6,
type: "异物识别",
switch: false,
check: false,
img: require("./assets/images/things.svg")
}
],
lineNameAI: ""
};
},
computed: {
...mapGetters(["user_info"])
},
watch: {
mountData: {
handler(val) {
this.set_payload_data(val.payload);
}
}
},
methods: {
...response,
getMinte() {
if (this.min == 30) {
this.se = 0;
this.maxSe = 0;
} else {
this.maxSe = 59;
}
},
getcheck(item) {
item.switch = !item.switch;
if (!item.switch) {
item.check = false;
}
},
checkedAI() {
let num = 0;
this.aiList.forEach(val => {
if (val.switch) {
num++;
}
});
return num;
},
save_point() {
this.infoShow = false;
if (this.pointInfo) {
if (this.pointList.length > 0) {
this.pointList.forEach(val => {
if (val.id == this.pointInfo.id) {
console.log(val, "val");
val.speed = this.speed;
// this.$set(val, "ailist", this.aiList);
val.ailist = JSON.parse(JSON.stringify(this.aiList));
val.actions[2].param1 = this.min * 60 + this.se;
}
});
}
}
console.log(this.aiList, "save");
// console.log(this.pointInfo);
// console.log(this.pointList);
},
getPoint() {
let blob = this.$parent.screenShot();
let img = null;
let _this = this;
blobToBase64(blob, async base64DataUrl => {
img = base64DataUrl;
let data = {
id: _this.pointList.length + 1,
img: img,
lat: _this.uavData?.locationCoordinate3D?.latitude || 0,
lon: _this.uavData?.locationCoordinate3D?.longitude || 0,
alt: _this.uavData && _this.uavData.rtk && _this.uavData.rtk.type == 19 && _this.uavData.rtk.isMainSensor ? _this.uavData.rtk.relativeAlt : _this.uavData.gps ? _this.uavData.gps.relativeAlt : 0,
speed: this.speed,
frame: 3,
isYawEnable: true,
// isGimbalPitchEnable: true,
heading: _this.uavData?.attitude?.yaw || 0
};
// console.log(this.mountData.payload,"mountData.payload");
// _this.set_payload_data(_this.mountData.payload);
let actions = [
{
actionType: "GIMBAL_PITCH",
param2: 0,
param1: _this.picth,
param3: _this.yaw,
param4: 2
},
{
actionType: "CAMERA_ZOOM",
param1: 2,
param2: _this.eo_zoom
},
{
actionType: "STAY",
param1: 0
}
];
_this.$set(data, "actions", actions);
// console.log(data, "datatattaatatat");
_this.pointList.push(data);
_this.pointInfo = data;
_this.infoShow = true;
_this.getDe();
console.log(_this.pointList, "actitiiti");
});
function blobToBase64(blob, callback) {
let reader = new FileReader();
reader.onload = () => {
callback(reader.result);
};
reader.readAsDataURL(blob);
}
// console.log(_this.uavData,"uavdataaaa");
// console.log(_this.mountData,"mountData");
},
delPoint(i) {
this.pointList.splice(i, 1);
if (this.pointList.length > 0) {
this.aiList = this.pointList[this.pointList.length - 1].ailist;
} else {
this.aiList = [
{
id: 1,
type: "人脸识别",
switch: false,
check: false,
img: require("./assets/images/face.svg")
},
{
id: 2,
type: "车牌识别",
switch: false,
check: false,
img: require("./assets/images/car.svg")
},
{
id: 3,
type: "人流识别",
switch: false,
check: false,
img: require("./assets/images/people.svg")
},
{
id: 4,
type: "游泳识别",
switch: false,
check: false,
img: require("./assets/images/swim.svg")
},
{
id: 7,
type: "烟雾识别",
switch: false,
check: false,
img: require("./assets/images/yan.svg")
},
{
id: 6,
type: "异物识别",
switch: false,
check: false,
img: require("./assets/images/things.svg")
}
];
}
},
getItem(item) {
this.infoShow = true;
this.pointInfo = item;
this.getDe();
},
getActive(num, val) {
this.active = num;
if (val == "ai") {
this.aiShow = true;
this.stayShow = false;
this.camShow = false;
this.speedStatus = false;
} else if (val == "stay") {
this.stayShow = true;
this.aiShow = false;
this.camShow = false;
this.speedStatus = false;
} else if (val == "carmera") {
} else if (val == "speed") {
this.speedStatus = true;
this.aiShow = false;
this.stayShow = false;
this.camShow = false;
} else {
this.aiShow = false;
this.stayShow = false;
this.camShow = false;
this.speedStatus = false;
}
},
getDe() {
this.active = 2;
this.aiShow = false;
this.stayShow = false;
this.camShow = false;
console.log(this.aiList, "123");
// setTimeout(() => {
if (this.pointInfo && this.pointInfo.ailist) {
console.log(this.aiList, "456");
this.aiList = JSON.parse(JSON.stringify(this.pointInfo.ailist));
console.log(this.aiList, "789");
this.stayVal = this.pointInfo.actions[2].param1;
this.min = parseInt(this.pointInfo.actions[2].param1 / 60);
this.se = this.pointInfo.actions[2].param1 - this.min;
} else {
this.stayVal = 0;
this.min = 0;
this.se = 0;
this.aiList.forEach(val => {
if (val.switch && !val.check) {
val.history = 1;
} else {
val.switch = false;
}
val.check = false;
});
}
// }, 2000);
},
async getLineName() {
let filename = "";
if (this.user_info.departmentId == 1) {
filename = `巡特警支队-巡查`;
} else {
filename = `${
this.user_info.parentDepName ? this.user_info.parentDepName + "-" : ""
}${this.user_info.departmentName}-巡查`;
}
let res = await API.AIRSPACE.GetFlightLineCount({ flightName: filename });
// 对res进行判断,有时候会传来对象,但是值是对的,所以手动把值提取出来
if (typeof res == "object") {
res = res.data;
}
let filename_count = res + 1;
filename_count =
filename_count < 10 ? "0" + filename_count : filename_count;
this.lineNameAI = filename + filename_count;
},
async saveLine() {
if (this.pointList.length <= 1)
return this.$message.warning("生成航线至少两个航点");
this.getLineName();
this.disable = false;
setTimeout(async () => {
let distance = 0;
let pointCount = this.pointList.length;
//lng,lat待定
let lng = this.pointList[this.pointList.length - 1].lon;
let lat = this.pointList[this.pointList.length - 1].lat;
this.pointList.forEach((item, i) => {
delete item.img;
item.actions.forEach(val => {
if (val.actionType == "STAY") {
val.param1 = val.param1 * 1000;
}
});
if (this.pointList[i + 1]) {
let cd = Cesium.Cartesian3.distance(
Utils.transformWGS842Cartesian({ lng: item.lon, lat: item.lat }),
Utils.transformWGS842Cartesian({
lng: this.pointList[i + 1].lon,
lat: this.pointList[i + 1].lat
})
);
console.log(cd, "cdcdcd");
// dist = total + cd;
distance = distance + cd;
}
});
let time = parseInt(distance / 6);
let flight = {
filename: this.lineNameAI,
line: {
baseSpeed: this.speed
},
points: this.pointList
};
let waypoints = [];
// waypoints.forEach(val=>{
// val.waypointActions = val.actions
// delete val.actions
// })
this.pointList.forEach(val => {
let data = {
...val,
coordinate: {
latitude: val.lat,
longitude: val.lon
},
altitude: val.alt,
frame: 3,
speed: flight.line.baseSpeed,
waypointActions: val.actions
};
delete data.lon;
delete data.lat;
delete data.alt;
delete data.actions;
delete data.id;
delete data.ailist;
waypoints.push(data);
});
flight.waypoints = waypoints;
// console.log(flight,"waypoints");
// return
let data = {
distance,
time,
pointCount,
lng,
lat,
sourceType: 1,
nestId: null,
flightName: this.lineNameAI,
flightCourseJson: JSON.stringify(flight),
lineType: 2
};
console.log(data, "dataaaa");
let res = await API.AIRWAY.Add(data);
this.$emit("close");
if (res.status != 1) {
this.$message.error(res.message);
} else {
this.$message.success("航线已生成!");
}
}, 1500);
}
}
};
</script>
<style lang="scss" scoped>
.pointList {
margin-top: 50px;
// height: 400px;
position: absolute;
top: 420px;
// display: flex;
.points {
width: 730px;
border-radius: 6px;
height: 158px;
background: #20201e;
.title {
height: 36px;
background: #353434;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.59);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
font-family: MicrosoftYaHei;
color: #ffffff;
.right {
display: flex;
align-items: center;
.btn {
cursor: pointer;
padding: 6px;
background: rgba($color: #9499a5, $alpha: 0.6);
border-radius: 4px;
opacity: 0.58;
backdrop-filter: blur(6.683917952653804px);
// &:hover{
// background: rgba($color: #9499a5, $alpha: 1);
// }
}
.active {
background: url("./assets/images/btn_lan.png") no-repeat;
background-size: 100% 100%;
}
.close {
margin-left: 33px;
margin-right: 4px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #d2dfff;
}
}
}
.list {
// width: 400px;
// height: 80px;
// border: solid 1px #fff;
height: 132px;
display: flex;
// flex-direction: column;
align-items: center;
justify-content: center;
.box {
width: 59px;
height: 59px;
color: #fff;
text-align: center;
line-height: 30px;
background: #02173d;
border-radius: 2px;
border: 1px solid #aab6b9;
line-height: 59px;
}
.item {
position: relative;
width: 59px;
height: 59px;
position: relative;
margin-right: 7px;
background: rgba(0, 0, 0, 0.3);
border-radius: 1px;
img {
width: 100%;
height: 100%;
}
.img {
position: absolute;
right: -5px;
top: -5px;
width: 12px;
height: 12px;
}
span {
position: absolute;
}
}
}
.info {
display: flex;
.return {
line-height: 172px;
text-align: center;
color: #a1a1a1;
font-size: 24px;
width: 36px;
height: 172px;
background: #20201e;
box-shadow: 1px 0px 2px 0px rgba(255, 255, 255, 0.22);
}
.point {
// margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// border: solid 1px #fff;
width: 694px;
height: 172px;
// background: #333;
.form {
margin: 10px;
width: 450px;
display: flex;
color: #fff;
align-items: center;
justify-content: space-between;
.info {
display: flex;
flex-direction: column;
align-items: center;
}
.active {
color: yellow;
}
}
.ai {
padding: 10px 0;
display: flex;
// background: #333;
color: #fff;
align-items: center;
justify-content: space-between;
.item {
width: 100px;
height: 88px;
// border: solid 1px #fff;
margin: 6px;
font-size: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.check {
display: flex;
flex-direction: column;
align-items: center;
.flexs {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.el-checkbox {
color: #fff;
}
.type {
white-space: nowrap;
}
.img {
margin: 4px 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.itemHover {
&:hover {
background: rgba(255, 255, 255, 0.6);
.img {
background: rgba(32, 32, 30, 1);
}
}
}
.itemAfter {
background: rgba(255, 255, 255, 0.6);
}
.itemActive {
background: rgba(253, 220, 5, 0.3);
.img {
border: solid 1px rgba(255, 221, 0, 1);
}
}
}
.stay {
width: 450px;
color: #fff;
}
}
}
}
}
</style>
\ No newline at end of file
var viewlink_cmdID = {
A1C1E1: 0X30,
A1C1E1S1: 0X32,
A2C2E2: 0X31,
A2C2E2S2: 0X33,
A1: 0X1A,
A2: 0X2A,
C1: 0X1C,
C2: 0X2C,
E1: 0x1E,
E2: 0X2E,
S1: 0X16,
S2: 0X26,
U: 0X01,
V: 0X02,
M_AHRS: 0XB1,
HEART_BEAT: 0X10,
SHAKE_HAND: 0X00,
T1F1B1D1: 0x40,
T2F2B2D2: 0X41,
FW: 0XFF
}
//CRC 校验表
var crc_table = new Array(
0x00, 0x31, 0x62, 0x53, 0xc4, 0xf5, 0xa6, 0x97, 0xb9, 0x88, 0xdb, 0xea, 0x7d, 0x4c, 0x1f, 0x2e,
0x43, 0x72, 0x21, 0x10, 0x87, 0xb6, 0xe5, 0xd4, 0xfa, 0xcb, 0x98, 0xa9, 0x3e, 0x0f, 0x5c, 0x6d,
0x86, 0xb7, 0xe4, 0xd5, 0x42, 0x73, 0x20, 0x11, 0x3f, 0x0e, 0x5d, 0x6c, 0xfb, 0xca, 0x99, 0xa8,
0xc5, 0xf4, 0xa7, 0x96, 0x01, 0x30, 0x63, 0x52, 0x7c, 0x4d, 0x1e, 0x2f, 0xb8, 0x89, 0xda, 0xeb,
0x3d, 0x0c, 0x5f, 0x6e, 0xf9, 0xc8, 0x9b, 0xaa, 0x84, 0xb5, 0xe6, 0xd7, 0x40, 0x71, 0x22, 0x13,
0x7e, 0x4f, 0x1c, 0x2d, 0xba, 0x8b, 0xd8, 0xe9, 0xc7, 0xf6, 0xa5, 0x94, 0x03, 0x32, 0x61, 0x50,
0xbb, 0x8a, 0xd9, 0xe8, 0x7f, 0x4e, 0x1d, 0x2c, 0x02, 0x33, 0x60, 0x51, 0xc6, 0xf7, 0xa4, 0x95,
0xf8, 0xc9, 0x9a, 0xab, 0x3c, 0x0d, 0x5e, 0x6f, 0x41, 0x70, 0x23, 0x12, 0x85, 0xb4, 0xe7, 0xd6,
0x7a, 0x4b, 0x18, 0x29, 0xbe, 0x8f, 0xdc, 0xed, 0xc3, 0xf2, 0xa1, 0x90, 0x07, 0x36, 0x65, 0x54,
0x39, 0x08, 0x5b, 0x6a, 0xfd, 0xcc, 0x9f, 0xae, 0x80, 0xb1, 0xe2, 0xd3, 0x44, 0x75, 0x26, 0x17,
0xfc, 0xcd, 0x9e, 0xaf, 0x38, 0x09, 0x5a, 0x6b, 0x45, 0x74, 0x27, 0x16, 0x81, 0xb0, 0xe3, 0xd2,
0xbf, 0x8e, 0xdd, 0xec, 0x7b, 0x4a, 0x19, 0x28, 0x06, 0x37, 0x64, 0x55, 0xc2, 0xf3, 0xa0, 0x91,
0x47, 0x76, 0x25, 0x14, 0x83, 0xb2, 0xe1, 0xd0, 0xfe, 0xcf, 0x9c, 0xad, 0x3a, 0x0b, 0x58, 0x69,
0x04, 0x35, 0x66, 0x57, 0xc0, 0xf1, 0xa2, 0x93, 0xbd, 0x8c, 0xdf, 0xee, 0x79, 0x48, 0x1b, 0x2a,
0xc1, 0xf0, 0xa3, 0x92, 0x05, 0x34, 0x67, 0x56, 0x78, 0x49, 0x1a, 0x2b, 0xbc, 0x8d, 0xde, 0xef,
0x82, 0xb3, 0xe0, 0xd1, 0x46, 0x77, 0x24, 0x15, 0x3b, 0x0a, 0x59, 0x68, 0xff, 0xce, 0x9d, 0xac
);
var D1_CMD = {
SENSOR: 0, //bit0-2
IR_DZOOM: 0,//bit3-6
IR_WHITE_BLACK: 0,//bit7
res: 0x00,
recstatus: 0,// bit0-1
ir_gray_color: 0,//bit2-5
eo_dzoom: 0,//bit6-9
res: 0,//bit10-15
lrf_value: 0,//byte 5-6
v_fov: 0,
h_fov: 0,
eo_zoom: 0
}
var B1_CMD = {
GIMrollangle_8_11: 0,
servestatus: 0x01,
GIMrollangle_0_7: 0x00,
GIMrollangle: 0,
GIMyawangle: 0,
GIMpitchangle: 0
}
var B1_servo_status = {
motorsw: 0x00,
manualcontrol: 0x01,
followyaw: 0x03,
homeposition: 0x04,
trackmode: 0x06,
turntorelativeangle: 0x09,
lockyaw: 0x0a,
turntoframeangle: 0x0b,
RCcontrol: 0x0d,
fingerto: 0x0e,
error: 0x0f
}
export default {
cal_crc_table(array) {
var crc = 0;
var i = 1;
var len = array[2];
while (len--) {
crc = crc_table[crc ^ array[i]];
i++;
}
return crc;
},
set_payload_data(dataArray) {
// console.log(dataArray,"dataArray");
if(dataArray){
if (
dataArray[0] === 0xA5 &&
this.cal_crc_table(dataArray) === dataArray[dataArray.length - 1]
) {
if (dataArray[1] == 0x02) {
// console.log('0x02');
// var pitch = get_float_from_4byte(data.slice(3, 7));
// var roll = get_float_from_4byte(data.slice(7, 11));
// var yaw = get_float_from_4byte(data.slice(11, 15));
// console.log(pitch, roll, yaw, "xxxxxxxxx");
}
if (dataArray[1] == 0x4f) {
// console.log(123456789);
this.gcs_transmit_ctrl(dataArray);
}
if(dataArray[1] == 0x0c){
// console.log('0x0c');
this.msg_euler2(dataArray);
}
}
}
},
msg_euler2(dataArray) {
var pitch = this.g_convert_float16_to_native_float(dataArray[3] | (dataArray[4] << 8));
var roll = this.g_convert_float16_to_native_float(dataArray[5] | (dataArray[6] << 8));
var yaw = this.g_convert_float16_to_native_float(dataArray[7] | (dataArray[8] << 8));
this.set_euler_angle(pitch, roll, yaw);
//console.log(pitch + " " + roll + " " + yaw);
},
set_euler_angle(pitch, roll, yaw) {
// console.log(pitch, roll, yaw,'pitch, roll, yaw');
},
g_convert_float16_to_native_float(value) {
var buffer1 = new ArrayBuffer(4);
var magic = new Uint32Array(buffer1);
var magicf = new Float32Array(buffer1);
var buffer2 = new ArrayBuffer(4);
var was_inf_nan = new Uint32Array(buffer2);
var was_inf_nanf = new Float32Array(buffer2);
var buffer3 = new ArrayBuffer(4);
var out = new Uint32Array(buffer3);
var outf = new Float32Array(buffer3);
magic[0] = (254 - 15) << 23;
was_inf_nan[0] = (127 + 16) << 23;
out[0] = (value & 0x7FFF) << 13;
outf[0] *= magicf[0];
if (outf[0] >= was_inf_nanf[0]) {
out[0] = 255 << 23;
}
out[0] |= (value & 0x8000) << 16;
return Number(outf[0]);
},
viewlink_checksum(array) {
var checksum = array[3];
var i = 4;
var len = (array[3] & 0x3f) - 2;
while (len--) {
checksum = checksum ^ array[i];
i++;
}
return checksum;
},
gcs_transmit_ctrl(rdata) {
// console.log("@@@@@@:" + rdata);
var i = 0;
var viewlinkframelen = 0;
if (rdata[3] == 0x55 && rdata[4] == 0xaa && rdata[5] == 0xdc) {
if (rdata[2] == (rdata[6] & 0x3f) + 5) {
viewlinkframelen = (rdata[6] & 0x3f) + 3;
var readdata = new Uint8Array(viewlinkframelen);
for (i = 0; i < viewlinkframelen; i++) {
readdata[i] = rdata[i + 3];
}
if (this.viewlink_checksum(readdata) == readdata[viewlinkframelen - 1]) {
switch (rdata[7]) {
case viewlink_cmdID.SHAKE_HAND:
// modeltype = msg_shake_hand(readdata);
break;
case viewlink_cmdID.HEART_BEAT:
// modeltype = msg_shake_hand(readdata);
break;
case viewlink_cmdID.T1F1B1D1:
this.msg_TIF1B1D1_parse(readdata);
// console.log("msg_TIF1B1D1_parse:" + readdata);
break;
}
}
}
}
},
msg_TIF1B1D1_parse(rdata) {
var msgdata = new Uint8Array(rdata);
var T1buf = new Uint8Array(22);
var F1buf = new Uint8Array(1);
var B1buf = new Uint8Array(6);
var D1buf = new Uint8Array(12);
var i = 0;
for (i = 0; i < 22; i++) {
T1buf[i] = msgdata[i + 5];
}
for (i = 0; i < 1; i++) {
F1buf[i] = msgdata[i + 27];
}
for (i = 0; i < 6; i++) {
B1buf[i] = msgdata[i + 28];
}
for (i = 0; i < 12; i++) {
D1buf[i] = msgdata[i + 34];
}
this.msg_D1_parse(D1buf)
this.msg_B1_parse(B1buf);
},
msg_D1_parse(rdata) { //品灵云台d1包解包函数
D1_CMD.SENSOR = rdata[0] & 0x07;
D1_CMD.IR_DZOOM = (rdata[0] & 0x78) >> 3;
D1_CMD.IR_WHITE_BLACK = rdata[0] >> 7;
D1_CMD.recstatus = rdata[3] & 0x03;
D1_CMD.ir_gray_color = (rdata[3] & 0x3c) >> 2;
D1_CMD.eo_dzoom = ((rdata[3] & 0xc0) >> 6) | (rdata[2] & 0x03) << 2;
D1_CMD.lrf_value = rdata[4] << 8 | rdata[5];
D1_CMD.v_fov = (rdata[6] << 8 | rdata[7]) * 0.01;
D1_CMD.h_fov = (rdata[8] << 8 | rdata[9]) * 0.01;
D1_CMD.eo_zoom = (rdata[10] << 8 | rdata[11]) * 0.1;
var mode = D1_CMD.recstatus;
this.eo_zoom = D1_CMD.eo_zoom
// console.log(this.eo_zoom);
// set_LRF_distance(D1_CMD.lrf_value / 10);
},
msg_B1_parse(rdata) { //品灵云台B1包解包函数
B1_CMD.GIMrollangle_8_11 = rdata[0] & 0x0F;
B1_CMD.servestatus = rdata[0] >> 4;
B1_CMD.GIMrollangle_0_7 = rdata[1];
B1_CMD.GIMrollangle = (B1_CMD.GIMrollangle_8_11 << 8 | B1_CMD.GIMrollangle_0_7) * 180 / 4095;
B1_CMD.GIMrollangle = B1_CMD.GIMrollangle - 90;
B1_CMD.GIMyawangle = (rdata[2] << 8 | rdata[3]) * 360 / 65536;
B1_CMD.GIMpitchangle = (rdata[4] << 8 | rdata[5]) * 360 / 65536;
B1_CMD.GIMyawangle = (B1_CMD.GIMyawangle + 540) % 360 - 180;
B1_CMD.GIMpitchangle = (B1_CMD.GIMpitchangle + 540) % 360 - 180;
this.picth = 0 - B1_CMD.GIMpitchangle
this.yaw = B1_CMD.GIMyawangle
// console.log(B1_CMD.GIMpitchangle,B1_CMD.GIMrollangle,B1_CMD.GIMyawangle,"B1_CMD.GIMyawangle");
//俯仰2偏航
// set_euler_angle(B1_CMD.GIMpitchangle, B1_CMD.GIMrollangle, B1_CMD.GIMyawangle);
}
}
\ No newline at end of file
<template>
<div class="qingliu pr" :class="classNames" id="qinglliu" ref="qingliu">
<div :id="'qingliu_' + name" class="qingcanvas" ref="qingcanvas">
<div
class="timeStr"
ref="timeStr"
:class="infoflag ? 'timeStrStyle' : ''"
v-if="device.deviceHardId"
v-show="isInfoShow && !device.videos.osd"
>{{ timeStr || "" }}</div>
<div
class="wsDataleft"
ref="wsDataleft"
:class="infoflag ? 'leftStyle' : ''"
v-if="device.deviceHardId"
v-show="isInfoShow && !device.videos.osd"
>
<div>经度:{{ wsData.longitude || 0 }}</div>
<div>纬度:{{ wsData.latitude || 0 }}</div>
<div>高度:{{ wsData.height ? wsData.height.toFixed(2) : 0 }}</div>
<div>速度:{{ wsData.groundSpeed ? wsData.groundSpeed.toFixed(2) : 0 }}</div>
<div>方向:{{ wsData.yaw ? wsData.yaw.toFixed(2) : 0 }}</div>
</div>
<div
class="wsDataright"
ref="wsDataright"
:class="infoflag ? 'rightStyle' : ''"
v-if="device.deviceHardId"
v-show="isInfoShow && !device.videos.osd"
>
<div>盐城</div>
<div v-if="device.customName">{{ org.ername || "" }}</div>
<div v-else>{{ org.ername || "" }}</div>
<div v-if="org.sanname">{{ org.sanname || "" }}</div>
<div class="name">{{ deviceName }}</div>
</div>
</div>
<!-- <div class="cf pa top0 wih100" style="z-index:19" v-show="infoflag" >
<span class="mb10 w489 fw700 dib f24" style="color:#69ceff">{{deviceName}}</span>
</div>-->
<div
ref="wtht"
:id="'wtht' + name"
:class="infoflag ? 'qingliufull' : ''"
class="wih100 ht100 pr"
>
<div ref="player_area"></div>
</div>
</div>
</template>
<script>
import { dataURLToBlob, canvasToDataURL } from "../../../../../../utils/image-tool";
import { newDate } from "../../../../../../utils/formatDate";
export default {
name: "QingLiuPlayer",
props: {
data: Object,
raw_msg: Number,
infoflag: Boolean,
deviceName: String,
info: {
type: Boolean,
default: true
},
isInfoShow: {
type: Boolean,
default: true
},
className: String,
device: Object
},
data() {
return {
name: "QingLiuPlayer" + Date.now(),
ws: null,
wsData: {},
timeStr: "",
timer: null,
flag: false,
org: {},
canvasWidth: 0,
canvasHeight: 0,
entry1: "",
crossNum1: "",
crossNum2: "",
entry2: "",
isStatus:false,
classNames:"",
};
},
watch: {
deviceName: function(val) {
this.flag = false;
},
flag: function(val) {
this.org = this.wsData;
if (this.device.customName) {
if (this.device.customName.includes("县")) {
this.org.ername = this.device.customName.substr(0, 3);
} else {
this.org.ername = this.device.customName.substr(0, 2) + "区";
}
}
},
isInfoShow: function(val) {
if (!this.data.type) {
this.device.videos = {
osd: 0
};
}
},
"$store.state.mapmanage.mapisStatus": function(newVal) {
console.log(newVal,"newValnewValnewVal");
if (newVal.type == "wrj") {
setTimeout(() => {
window.kbt_player_resize("qingliu_"+this.name);
}, 1000);
this.isStatus = newVal.flag;
if (this.isStatus) {
this.classNames = this.className + " qingliumap"
}else{
this.classNames = this.className
}
}
if(newVal.type == "yc"){
window.kbt_player_resize("qingliu_"+this.name);
this.isStatus = newVal.flag;
if (this.isStatus && newVal.num == 0) {
this.classNames = this.className + " ycqingliumap"
}else{
this.classNames = this.className
}
}
},
},
created() {},
mounted() {
this.classNames = this.className
if (this.data.type) {
}
//鹰巢视频大小判断
console.log(this.$store.state.mapmanage.mapisStatus,"this.$store.state.mapmanage.mapisStatus");
if(this.$store.state.mapmanage.mapisStatus.flag && this.$store.state.mapmanage.mapisStatus.type == "yc" && this.$store.state.mapmanage.mapisStatus.num == 0){
this.classNames = this.className + " ycqingliumap"
}
if(this.$store.state.mapmanage.mapisStatus.flag && this.$store.state.mapmanage.mapisStatus.type == "wrj"){
this.classNames = this.className + " qingliumap"
}
this.getFontSize();
if (this.device.customName) {
if (this.device.customName.includes("县")) {
this.org.ername = this.device.customName.substr(0, 3);
} else {
this.org.ername = this.device.customName.substr(0, 2) + "区";
}
}
this.timer = setInterval(() => {
this.timeStr = newDate();
}, 1000);
this.initws();
window.onresize = e => {
const clientheight =
document.documentElement.clientHeight || document.body.clientHeight;
let isFullScreen = screen.height == clientheight;
if (isFullScreen == true) {
return;
} else {
this.$emit("close");
}
};
window.qingliu = this.init;
this.init();
},
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
this.ws && this.ws.close();
this.ws = null;
window.kbt_player_destroy("qingliu_"+this.name);
window.removeEventListener("resize", this.handResize);
},
methods: {
/**
* 初始化
*/
init() {
// 新
window.kbt_sdk_load(this.data.vUrl, "qingliu_" + this.name);
// 监听窗口大小变化事件
window.addEventListener("resize", this.handResize);
var canvas_qinliu = document.getElementById("qingliu_" + this.name);
var resizeObserver = new ResizeObserver((e)=>{
for( let i of e){
window.kbt_player_resize("qingliu_"+this.name);
}
})
resizeObserver.observe(canvas_qinliu)
// 旧
// window.kbt_player_destroy(this.name);
// setTimeout(() => {}, 1500);
// window.kbt_sdk_load().then(() => {
// let parentObj = this.$refs.player_area;
// window.kbt_player_create(
// this.name,
// this.data.vUrl,
// 970,
// 545,
// parentObj
// );
// });
},
handResize() {
// 获取 Canvas 元素
var canvas_qinliu = document.getElementById("qingliu_" + this.name);
// 获取 Canvas 的初始宽度和高度
var initialWidth = canvas_qinliu.width;
var initialHeight = canvas_qinliu.height;
// 获取当前 Canvas 的宽度和高度
var currentWidth = canvas_qinliu.clientWidth;
var currentHeight = canvas_qinliu.clientHeight;
// 检查 Canvas 的大小是否发生变化
if (currentWidth !== initialWidth || currentHeight !== initialHeight) {
// 执行适应新尺寸的操作
window.kbt_player_resize("qingliu_"+this.name);
}
},
initws() {
this.ws = new WebSocket(process.env.VUE_APP_WS_URL_ALARM);
let { appid, username } = JSON.parse(
localStorage.getItem("user_info")
).data;
let token = JSON.parse(localStorage.getItem("user_info")).data[
"mmc-identity"
];
this.ws.onopen = () => {
this.ws.send(
JSON.stringify({
type: 100,
systemCode: "mmc",
state: 1,
username,
token,
appId: appid
})
);
};
this.ws.onmessage = e => {
if(e.data != "CONNECT_KEEP" ){
let metadata = JSON.parse(e.data);
if (metadata.msgnum == 4700 && metadata.type == 500) {
// console.log(this.device,"decive");
if (this.device.customName) {
if (
this.device.deviceList[0].deviceHardId ==
metadata.data.deviceHardId
) {
this.wsData = metadata.data;
if (this.wsData.anotherName) {
this.flag = true;
}
}
} else {
if (this.device.deviceHardId == metadata.data.deviceHardId) {
this.wsData = metadata.data;
if (this.wsData.anotherName != "盐城市") {
if (
this.wsData.anotherName &&
this.wsData.anotherName.indexOf("-") > -1
) {
let arr = this.wsData.anotherName.split("-");
this.wsData.ername = arr[0];
this.wsData.sanname = arr[1];
} else {
this.wsData.ername = this.wsData.anotherName;
}
// if(this.wsData.ername.includes("县")){
// this.wsData.ername = this.wsData.ername.substr(0,3)
// }else{
// this.wsData.ername = this.wsData.ername.substr(0,2) + "区"
// }
}
if (this.wsData.anotherName) {
this.flag = true;
}
}
}
}
}
};
},
screenShot() {
this.getFontSize()
// 新版sdk使用
var Dom = document.querySelector("#qingliu_" + this.name);
var canvas = Dom.getElementsByTagName("canvas")[0];
//旧版skd使用
// var canvas = document.querySelector("#sdk_canvas_" + this.name);
const image = canvasToDataURL(canvas);
let blob = dataURLToBlob(image);
return blob;
},
fullScreen(flag) {
if (flag) {
let dom = document.querySelector("#qingliu_"+this.name);
dom.requestFullscreen();
} else {
document.exitFullscreen();
}
},
//字体大小改变
getFontSize() {
// 获取需要改变字体大小的元素
let timeStr = this.$refs.timeStr;
let qingliu = this.$refs.qingcanvas;
let wsDataleft = this.$refs.wsDataleft;
let wsDataright = this.$refs.wsDataright;
// 根据窗口宽度设置字体大小
var fontSize = Math.floor(qingliu.clientWidth / 40); // 根据需要进行调整
// 应用新的字体大小
timeStr.style.fontSize = fontSize + "px";
wsDataleft.style.fontSize = fontSize + "px";
wsDataright.style.fontSize = fontSize + "px";
let resizeDom = new ResizeObserver(e => {
// console.log(e,"eeeeeeee2");
var fontSize = Math.floor(qingliu.clientWidth / 40); // 根据需要进行调整
// 应用新的字体大小
timeStr.style.fontSize = fontSize + "px";
wsDataleft.style.fontSize = fontSize + "px";
wsDataright.style.fontSize = fontSize + "px";
});
resizeDom.observe(qingliu);
}
}
};
</script>
<style scoped lang="scss">
.qingliumap{
top: -400px;
}
.qingliu ::v-deep {
width: 100%;
height: calc(100% - 46px);
.qingcanvas {
width: 100%;
height: 100%;
}
.ht100 {
position: absolute;
top: 0;
> canvas {
// background: chartreuse;
position: absolute;
top: 0;
left: 0;
z-index: 99; //开启画布即可画线
}
.cross {
z-index: 90; //开启画布即可画线
}
}
.timeStr {
position: absolute;
top: 25px;
right: 10px;
font-size: 14px;
font-family: MicrosoftYaHei;
z-index: 99;
color: #ffffff;
}
.wsDataleft {
position: absolute;
bottom: 40px;
left: 0;
z-index: 99;
color: #fff;
}
.wsDataright {
position: absolute;
bottom: 43px;
right: 0;
// z-index: 99;
color: #fff;
text-align: right;
}
.timeStrStyle {
top: 60px;
font-size: 38px;
}
.leftStyle {
bottom: 10px;
font-size: 38px;
left: 10px;
}
.rightStyle {
font-size: 38px;
bottom: 10px;
right: 10px;
.name {
padding: 20px 0;
font-size: 38px;
}
}
.player_area {
width: 100%;
height: 100%;
}
.cf {
position: fixed;
top: 0;
left: 0;
padding: 10px;
color: #fff;
background: rgba($color: #000000, $alpha: 0.6);
}
canvas {
width: 100% !important;
}
}
.fkLivePlayer {
.wsDataleft {
position: absolute;
bottom: 10px;
left: 0;
z-index: 99;
color: #fff;
}
.wsDataright {
position: absolute;
bottom: 10px;
right: 0;
// z-index: 99;
color: #fff;
text-align: right;
}
.leftStyle {
bottom: 10px;
font-size: 38px;
left: 10px;
}
.rightStyle {
font-size: 38px;
bottom: 10px;
right: 10px;
.name {
padding: 20px 0;
font-size: 38px;
}
}
}
.ycQingLiuPlayer {
width: 100%;
height: 195px;
.timeStr {
top: 35px;
font-size: 8px;
}
.wsDataleft {
font-size: 8px;
bottom: 0px;
}
.wsDataright {
font-size: 8px;
bottom: 0px;
}
.timeStrStyle {
top: 60px;
font-size: 38px;
}
.leftStyle {
bottom: 10px;
font-size: 38px;
left: 10px;
}
.rightStyle {
font-size: 38px;
bottom: 10px;
right: 10px;
.name {
padding: 20px 0;
font-size: 38px;
}
}
}
.ycqingliumap{
height: 92vh;
}
.full-screen-video {
.timeStr {
top: 35px;
font-size: 20px;
}
.wsDataleft {
font-size: 20px;
bottom: 300px;
}
.wsDataright {
font-size: 20px;
bottom: 300px;
}
}
.qingliufull {
&::v-deep {
canvas {
height: 100% !important;
}
}
}
</style>
<template>
<div class="cpt-player-webrtc">
<video id="rtc_media_player"
ref="webrtc"
controls
autoplay></video>
<!-- <div class="cutImg" id="cutImage">
<span class="closeImg">X</span>
</div> -->
</div>
</template>
<script>
let sdk = null;
// import Qs from "qs";
export default {
props: {
data: {
type: Object,
default: () => ({}),
},
},
data () {
return {
curr_data: {
vUrl: null
},
flight_info: null,
};
},
mounted () {
this.curr_data = {}
let self = this;
self.$bus.$on("takePhotos", (flight_info) => {
self.flight_info = flight_info();
self.screenShot(self.flight_info);
});
},
methods: {
init () {
if (this.$refs["webrtc"]) {
if(!this.data?.vUrl){
return;
}
// if (sdk) {
// sdk.close();
// }
// sdk = new SrsRtcPlayerAsync();
// this.$refs["webrtc"].srcObject = sdk.stream;
// sdk.play(curr_data.vUrl);
if (sdk) {
sdk.close();
}
sdk = new SrsRtcPlayerAsync();
// $('#rtc_media_player').prop('srcObject', sdk.stream);
// console.log("sdk...", sdk)
this.$refs["webrtc"].srcObject = sdk.stream;
// curr_data.vUrl = "rtmp://121.43.58.140/live/";
// 'webrtc://srs.mmcuav.cn/live/xxxxxxxxxxxxxxx' // 测试地址,需使用推流工具推流
// console.log("curr_data.vUrl:", curr_data.vUrl);
let self = this
sdk
.play(this.data.vUrl)
.then(function (session) {
console.log(session);
/* if (session) {
self.$bus.$emit("handleVideoState")
} */
})
.catch(function (reason) {
console.log('err reason', reason)
sdk.close();
console.error(reason);
});
}
},
async screenShot (data) {
// console.log("screenShot:", data);
var player = document.getElementById("rtc_media_player"); //获取video的Dom节点
player.setAttribute("crossOrigin", "anonymous"); //添加srossOrigin属性,解决跨域问题
var canvas = document.createElement("canvas");
// var img = document.createElement("img");
canvas.width = player.clientWidth;
canvas.height = player.clientHeight;
canvas
.getContext("2d")
.drawImage(player, 0, 0, canvas.width, canvas.height); //截
// var dataURL = canvas.toDataURL("image/png"); //将图片转成base64格式
// img.src = dataURL;
// img.width = player.clientWidth; //控制截出来的图片宽的大小
// img.height = player.clientHeight; //控制截出来的图片高的大小
// img.style.border = "1px solid #333333"; //控制截出来的图片边框的样式
// document.getElementById("cutImage").appendChild(img); //显示在页面中
// console.log("img:", dataURL);
try {
canvas.toBlob((blob) => {
// 创建a元素来实现下载
// const a = document.createElement("a");
// a.style.display = "none";
// document.body.appendChild(a);
// a.href = window.URL.createObjectURL(blob);
// // 下载的文件名
// let fileName = "nt图片";
// a.download =
// fileName || `screenshot-${canvas.width}x${canvas.height}.png`;
// console.log("IMG-BLOD:", blob);
const myFile = new File([blob], "image.png", {
type: blob.type,
});
this.savaTaskImages(myFile, data.deviceId, data.id);
// a.click();
// // 触发下载后,移除元素
// a.remove();
});
} catch (e) {
console.log(e);
}
// this.downFile(dataURL, "图片.jpg"); //下载截图
},
async savaTaskImages (images, deviceHardId, task_id) {
let forms = new FormData();
forms.append("task_id", task_id);
forms.append("deviceHardId", deviceHardId);
forms.append("images", images);
},
},
watch: {
data: {
handler (newVal, oldVal) {
let self = this
if (newVal?.vUrl != oldVal?.vUrl) {
this.$nextTick(() => {
console.log('self.init')
self.init();
});
}
},
deep: true,
immediate: true,
},
},
};
</script>
<style lang="scss" scoped>
video::-webkit-media-controls-enclosure {
display: none;
}
.cpt-player-webrtc {
height: 100%;
width: 100%;
background-color: #000;
&:hover {
video::-webkit-media-controls-enclosure {
display: inherit !important;
}
}
video {
width: 100%;
height: 100%;
object-fit: fill;
}
}
</style>
\ No newline at end of file
<template>
<div class="content">
<div class="content_head" v-interact>
<div class="left">
<img src="../../assets/images/mount_head.png" />
<div class="font">人流识别</div>
</div>
<div class="right" @click="() => $emit('close')">关闭</div>
</div>
<div class="content_box">
<div class="items">
<div class="car_item">
<div class="image">
<img :src="baseUrl + trafficData.imagePath" alt="" />
</div>
<div class="info">
<div class="row">
<div class="title">发现人员:</div>
<div class="props">{{ trafficData.total || "0" }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import data from "./data";
export default {
props:{
trafficData:{
type: Object,
default: () => {}
}
},
data() {
return {
// ...data,
baseUrl: process.env.VUE_APP_IMG_URL,
};
},
methods: {
},
mounted() {
},
};
</script>
<style lang="scss" scoped>
.content {
position: fixed;
z-index: 101;
top: calc(50% - 120px);
left: calc(50% + 80px);
margin-right: 16px;
width: 468px;
max-height: 635px;
margin-bottom: 190px;
background: rgba(0, 39, 121, 0.5);
box-shadow: 0px 2px 8px 0px rgba(1, 162, 255, 0.7),
inset 0px 0px 64px 0px rgba(26, 138, 227, 0.35),
inset 0px 0px 8px 0px #019aff;
backdrop-filter: blur(2px);
border-radius: 10px 10px 0px 0px;
.content_head {
display: flex;
justify-content: space-between;
height: 32px;
background: linear-gradient(
180deg,
#9198ff 0%,
rgba(45, 81, 153, 0.45) 40%,
#05091a 100%
);
box-shadow: inset 0px 0px 10px 2px #3f9dff;
border-radius: 10px 10px 0px 0px;
align-items: center;
padding: 0 16px;
.left {
display: flex;
align-items: center;
.font {
font-size: 20px;
font-family: YouSheBiaoTiHei;
color: #14faff;
line-height: 26px;
text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
background: linear-gradient(
135deg,
#e3aa77 0%,
#f5cda9 38%,
#f9ecd3 58%,
#fcdbb1 79%,
#edb07a 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.right {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #d2dfff;
margin-right: 8px;
cursor: pointer;
}
}
.content_box {
width: 100%;
max-height: 600px;
// padding: 0 16px;
// overflow: auto;
position: relative;
.items {
width: 100%;
height: 100%;
display: flex;
align-content: flex-start;
flex-wrap: wrap;
justify-content: space-between;
.car_item {
margin: 11px auto;
width: 90%;
height: 300px;
border: 1px solid #43deff;
padding: 4px 4px 0 4px;
.image {
position: relative;
width: 100%;
height: 90%;
img {
width: 100%;
height: 100%;
}
.tip {
position: absolute;
bottom: 0;
width: 204px;
height: 16px;
background: #000000;
opacity: 0.8;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #b7bfc8;
text-align: center;
line-height: 16px;
}
}
.info {
width: 204px;
height: 53px;
// border: 1px solid #43deff;
background: url("../../assets/images/info.png");
.row {
margin-left: 9px;
padding-top: 7px;
display: flex;
.title {
font-size: 14px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #b7cae2;
}
.props {
// width: 150px;
// height: 19px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #b7cae2;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
// &:hover {
// background: url("~@/assets/newImage/infos.png");
// }
}
}
}
.detail {
display: flex;
flex-direction: column;
margin-top: 12px;
.image {
position: relative;
width: 436px;
height: 255px;
img {
width: 436px;
height: 255px;
}
.tip {
position: absolute;
bottom: 0;
width: 436px;
height: 31px;
background: #000000;
opacity: 0.8;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #b7bfc8;
text-align: center;
line-height: 31px;
}
}
.info {
// display: flex;
// justify-content: space-between;
// flex-wrap: wrap;
.row {
margin-top: 16px;
display: flex;
justify-content: space-between;
.col {
display: flex;
}
.title {
// flex: 1;
flex-shrink: 0;
font-size: 16px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 21px;
}
.props {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #c5ebff;
line-height: 21px;
}
}
}
.btn {
margin: 20px 0;
// position: absolute;
// bottom: 0;
align-self: center;
width: 79px;
height: 32px;
background: rgba(23, 70, 216, 0.2);
box-shadow: 0px 2px 4px 0px rgba(23, 33, 60, 0.5),
inset 0px 0px 16px 0px rgba(33, 137, 255, 0.4),
inset 0px 0px 4px 0px #00a7ff;
border-radius: 6px;
// border: 1px solid;
border-image: linear-gradient(
180deg,
rgba(138, 218, 255, 1),
rgba(82, 179, 255, 0)
)
1 1;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #00ffff;
text-align: center;
line-height: 32px;
}
}
}
}
</style>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>电脑</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1531.000000, -783.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="电脑" transform="translate(1531.000000, 783.000000)">
<rect id="矩形" opacity="0" x="0" y="0" width="31.9996488" height="32"></rect>
<path d="M30.5445398,26.3706563 C31.0645341,26.3706563 31.5445288,26.6524375 31.8049947,27.111125 C32.0650018,27.5708228 32.0650018,28.1331772 31.8049947,28.592875 C31.5491408,29.0489672 31.0674879,29.3319197 30.5445398,29.3333438 L1.45423404,29.3333438 C0.651555349,29.3333438 0,28.6702188 0,27.8515625 C0,27.03375 0.651555349,26.3706563 1.45420279,26.3706563 L30.5445398,26.3706563 Z M28.808,2.66665625 C30.5708929,2.66665625 32,4.09576333 32,5.85865625 L32,20.2748845 C32,22.0377775 30.5708929,23.4668845 28.808,23.4668845 L3.192,23.4668845 C1.42910708,23.4668845 2.15892117e-16,22.0377775 0,20.2748845 L0,5.85865625 C-2.15892117e-16,4.09576333 1.42910708,2.66665625 3.192,2.66665625 L28.808,2.66665625 Z M23.0272,8.80009658 C21.9392,8.80009658 21.0688,9.27370178 20.3264,9.93930908 L21.0944,10.8609192 C21.632,10.3361134 22.2464,9.9777095 22.976,9.96490936 C23.872,9.9777095 24.4224,10.5025153 24.4224,11.3345244 C24.4224,12.2817348 23.808,12.9857425 21.952,12.9857425 L21.952,14.0737545 C24.0768,14.0737545 24.7424,14.7521619 24.7424,15.8017734 C24.7424,16.7745841 24.0128,17.3633906 22.9504,17.3633906 C21.9776,17.3633906 21.2736,16.8897854 20.7232,16.3265792 L20.0064,17.2737896 C20.6336,17.9777973 21.5936,18.5666038 23.0784,18.5666038 C24.8064,18.5666038 26.2272,17.5681928 26.2272,15.8657741 C26.2272,14.5985602 25.3696,13.7793512 24.2816,13.5105483 L24.2816,13.4465476 C25.28,13.0753435 25.9072,12.3201352 25.9072,11.2321233 C25.9072,9.67050613 24.7168,8.80009658 23.0272,8.80009658 Z M9.6896,8.97929855 L8.576,8.97929855 C8.0384,9.3121022 7.4112,9.52970459 6.528,9.69610641 L6.528,10.6305167 L8.2176,10.6305167 L8.2176,17.1841886 L6.1568,17.1841886 L6.1568,18.4002019 L11.5328,18.4002019 L11.5328,17.1841886 L9.6896,17.1841886 L9.6896,8.97929855 Z M15.7056,8.80009658 C14.4768,8.80009658 13.6448,9.33770248 12.8384,10.208112 L13.6704,11.027321 C14.1696,10.4513147 14.784,9.9777095 15.5264,9.9777095 C16.576,9.9777095 17.1264,10.6817172 17.1264,11.7057285 C17.1264,13.2545455 15.6928,15.0849656 12.9152,17.5425925 L12.9152,18.4002019 L18.9952,18.4002019 L18.9952,17.1457882 L16.64,17.1457882 C16.1792,17.1457882 15.5904,17.1841886 15.104,17.2353892 C17.1008,15.3281682 18.5472,13.4465476 18.5472,11.6289276 C18.5472,9.92650894 17.4336,8.80009658 15.7056,8.80009658 Z" id="形状结合"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份 2</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1387.000000, -739.000000)">
<g id="编组-8备份-2" transform="translate(1387.000000, 739.000000)">
<g id="电脑备份" fill="#FFFFFF" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="31.9996488" height="32"></rect>
<path d="M30.5445398,26.3706563 C31.0645341,26.3706563 31.5445288,26.6524375 31.8049947,27.111125 C32.0650018,27.5708228 32.0650018,28.1331772 31.8049947,28.592875 C31.5491408,29.0489672 31.0674879,29.3319197 30.5445398,29.3333438 L1.45423404,29.3333438 C0.651555349,29.3333438 0,28.6702188 0,27.8515625 C0,27.03375 0.651555349,26.3706563 1.45420279,26.3706563 L30.5445398,26.3706563 Z M28.8,2.66665625 C30.5673112,2.66665625 32,4.09934505 32,5.86665625 L32,20.2668845 C32,22.0341957 30.5673112,23.4668845 28.8,23.4668845 L3.2,23.4668845 C1.4326888,23.4668845 -6.71745219e-16,22.0341957 0,20.2668845 L0,5.86665625 C-2.164332e-16,4.09934505 1.4326888,2.66665625 3.2,2.66665625 L28.8,2.66665625 Z M10.1376,8.97929855 L9.024,8.97929855 C8.4864,9.3121022 7.8592,9.52970459 6.976,9.69610641 L6.976,10.6305167 L8.6656,10.6305167 L8.6656,17.1841886 L6.6048,17.1841886 L6.6048,18.4002019 L11.9808,18.4002019 L11.9808,17.1841886 L10.1376,17.1841886 L10.1376,8.97929855 Z" id="形状结合"></path>
</g>
<path d="M13.1712,18.4002019 L19.2512,18.4002019 L19.2512,17.1457882 L16.896,17.1457882 C16.4352,17.1457882 15.8464,17.1841886 15.36,17.2353892 C17.3568,15.3281682 18.8032,13.4465476 18.8032,11.6289276 C18.8032,9.92650894 17.6896,8.80009658 15.9616,8.80009658 C14.7328,8.80009658 13.9008,9.33770248 13.0944,10.208112 L13.9264,11.027321 C14.4256,10.4513147 15.04,9.9777095 15.7824,9.9777095 C16.832,9.9777095 17.3824,10.6817172 17.3824,11.7057285 C17.3824,13.2545455 15.9488,15.0849656 13.1712,17.5425925 L13.1712,18.4002019 Z" id="路径" fill="#DDDDDD" fill-rule="nonzero"></path>
<path d="M23.3344,18.5666038 C25.0624,18.5666038 26.4832,17.5681928 26.4832,15.8657741 C26.4832,14.5985602 25.6256,13.7793512 24.5376,13.5105483 L24.5376,13.4465476 C25.536,13.0753435 26.1632,12.3201352 26.1632,11.2321233 C26.1632,9.67050613 24.9728,8.80009658 23.2832,8.80009658 C22.1952,8.80009658 21.3248,9.27370178 20.5824,9.93930908 L21.3504,10.8609192 C21.888,10.3361134 22.5024,9.9777095 23.232,9.96490936 C24.128,9.9777095 24.6784,10.5025153 24.6784,11.3345244 C24.6784,12.2817348 24.064,12.9857425 22.208,12.9857425 L22.208,14.0737545 C24.3328,14.0737545 24.9984,14.7521619 24.9984,15.8017734 C24.9984,16.7745841 24.2688,17.3633906 23.2064,17.3633906 C22.2336,17.3633906 21.5296,16.8897854 20.9792,16.3265792 L20.2624,17.2737896 C20.8896,17.9777973 21.8496,18.5666038 23.3344,18.5666038 Z" id="路径" fill="#DDDDDD" fill-rule="nonzero"></path>
<g id="1" transform="translate(6.604800, 8.979299)"></g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份 3</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1387.000000, -783.000000)">
<g id="编组-8备份-3" transform="translate(1387.000000, 783.000000)">
<g id="电脑备份" fill="#FFFFFF" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="31.9996488" height="32"></rect>
<path d="M30.5445398,26.3706563 C31.0645341,26.3706563 31.5445288,26.6524375 31.8049947,27.111125 C32.0650018,27.5708228 32.0650018,28.1331772 31.8049947,28.592875 C31.5491408,29.0489672 31.0674879,29.3319197 30.5445398,29.3333438 L1.45423404,29.3333438 C0.651555349,29.3333438 0,28.6702188 0,27.8515625 C0,27.03375 0.651555349,26.3706563 1.45420279,26.3706563 L30.5445398,26.3706563 Z M28.808,2.66665625 C30.5708929,2.66665625 32,4.09576333 32,5.85865625 L32,20.2748845 C32,22.0377775 30.5708929,23.4668845 28.808,23.4668845 L3.192,23.4668845 C1.42910708,23.4668845 2.15892117e-16,22.0377775 0,20.2748845 L0,5.85865625 C-2.15892117e-16,4.09576333 1.42910708,2.66665625 3.192,2.66665625 L28.808,2.66665625 Z M15.9616,8.80009658 C14.7328,8.80009658 13.9008,9.33770248 13.0944,10.208112 L13.9264,11.027321 C14.4256,10.4513147 15.04,9.9777095 15.7824,9.9777095 C16.832,9.9777095 17.3824,10.6817172 17.3824,11.7057285 C17.3824,13.2545455 15.9488,15.0849656 13.1712,17.5425925 L13.1712,18.4002019 L19.2512,18.4002019 L19.2512,17.1457882 L16.896,17.1457882 C16.4352,17.1457882 15.8464,17.1841886 15.36,17.2353892 C17.3568,15.3281682 18.8032,13.4465476 18.8032,11.6289276 C18.8032,9.92650894 17.6896,8.80009658 15.9616,8.80009658 Z M10.1376,8.97929855 L9.024,8.97929855 C8.4864,9.3121022 7.8592,9.52970459 6.976,9.69610641 L6.976,10.6305167 L8.6656,10.6305167 L8.6656,17.1841886 L6.6048,17.1841886 L6.6048,18.4002019 L11.9808,18.4002019 L11.9808,17.1841886 L10.1376,17.1841886 L10.1376,8.97929855 Z" id="形状结合"></path>
</g>
<path d="M23.3344,18.5666038 C25.0624,18.5666038 26.4832,17.5681928 26.4832,15.8657741 C26.4832,14.5985602 25.6256,13.7793512 24.5376,13.5105483 L24.5376,13.4465476 C25.536,13.0753435 26.1632,12.3201352 26.1632,11.2321233 C26.1632,9.67050613 24.9728,8.80009658 23.2832,8.80009658 C22.1952,8.80009658 21.3248,9.27370178 20.5824,9.93930908 L21.3504,10.8609192 C21.888,10.3361134 22.5024,9.9777095 23.232,9.96490936 C24.128,9.9777095 24.6784,10.5025153 24.6784,11.3345244 C24.6784,12.2817348 24.064,12.9857425 22.208,12.9857425 L22.208,14.0737545 C24.3328,14.0737545 24.9984,14.7521619 24.9984,15.8017734 C24.9984,16.7745841 24.2688,17.3633906 23.2064,17.3633906 C22.2336,17.3633906 21.5296,16.8897854 20.9792,16.3265792 L20.2624,17.2737896 C20.8896,17.9777973 21.8496,18.5666038 23.3344,18.5666038 Z" id="路径" fill="#DDDDDD" fill-rule="nonzero"></path>
<g id="1" transform="translate(6.604800, 8.979299)"></g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 14</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1483.000000, -783.000000)">
<g id="编组-14" transform="translate(1483.000000, 783.000000)">
<g id="编组-8备份-5">
<g id="电脑备份" fill="#FFFFFF" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="31.9996488" height="32"></rect>
<path d="M30.5445398,26.3706563 C31.0645341,26.3706563 31.5445288,26.6524375 31.8049947,27.111125 C32.0650018,27.5708228 32.0650018,28.1331772 31.8049947,28.592875 C31.5491408,29.0489672 31.0674879,29.3319197 30.5445398,29.3333438 L1.45423404,29.3333438 C0.651555349,29.3333438 0,28.6702188 0,27.8515625 C0,27.03375 0.651555349,26.3706563 1.45420279,26.3706563 L30.5445398,26.3706563 Z M28.808,2.66665625 C30.5708929,2.66665625 32,4.09576333 32,5.85865625 L32,20.2748845 C32,22.0377775 30.5708929,23.4668845 28.808,23.4668845 L3.192,23.4668845 C1.42910708,23.4668845 2.15892117e-16,22.0377775 0,20.2748845 L0,5.85865625 C-2.15892117e-16,4.09576333 1.42910708,2.66665625 3.192,2.66665625 L28.808,2.66665625 Z M23.2832,8.80009658 C22.1952,8.80009658 21.3248,9.27370178 20.5824,9.93930908 L21.3504,10.8609192 C21.888,10.3361134 22.5024,9.9777095 23.232,9.96490936 C24.128,9.9777095 24.6784,10.5025153 24.6784,11.3345244 C24.6784,12.2817348 24.064,12.9857425 22.208,12.9857425 L22.208,14.0737545 C24.3328,14.0737545 24.9984,14.7521619 24.9984,15.8017734 C24.9984,16.7745841 24.2688,17.3633906 23.2064,17.3633906 C22.2336,17.3633906 21.5296,16.8897854 20.9792,16.3265792 L20.2624,17.2737896 C20.8896,17.9777973 21.8496,18.5666038 23.3344,18.5666038 C25.0624,18.5666038 26.4832,17.5681928 26.4832,15.8657741 C26.4832,14.5985602 25.6256,13.7793512 24.5376,13.5105483 L24.5376,13.4465476 C25.536,13.0753435 26.1632,12.3201352 26.1632,11.2321233 C26.1632,9.67050613 24.9728,8.80009658 23.2832,8.80009658 Z M10.1376,8.97929855 L9.024,8.97929855 C8.4864,9.3121022 7.8592,9.52970459 6.976,9.69610641 L6.976,10.6305167 L8.6656,10.6305167 L8.6656,17.1841886 L6.6048,17.1841886 L6.6048,18.4002019 L11.9808,18.4002019 L11.9808,17.1841886 L10.1376,17.1841886 L10.1376,8.97929855 Z" id="形状结合"></path>
</g>
<g id="1" transform="translate(6.604800, 8.979299)"></g>
</g>
<path d="M13.1712,18.4002019 L19.2512,18.4002019 L19.2512,17.1457882 L16.896,17.1457882 C16.4352,17.1457882 15.8464,17.1841886 15.36,17.2353892 C17.3568,15.3281682 18.8032,13.4465476 18.8032,11.6289276 C18.8032,9.92650894 17.6896,8.80009658 15.9616,8.80009658 C14.7328,8.80009658 13.9008,9.33770248 13.0944,10.208112 L13.9264,11.027321 C14.4256,10.4513147 15.04,9.9777095 15.7824,9.9777095 C16.832,9.9777095 17.3824,10.6817172 17.3824,11.7057285 C17.3824,13.2545455 15.9488,15.0849656 13.1712,17.5425925 L13.1712,18.4002019 Z" id="路径" fill="#DDDDDD" fill-rule="nonzero"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份 4</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1435.000000, -739.000000)" fill-rule="nonzero">
<g id="编组-8备份-4" transform="translate(1435.000000, 739.000000)">
<g id="电脑备份" fill="#FFFFFF">
<rect id="矩形" opacity="0" x="0" y="0" width="31.9996488" height="32"></rect>
<path d="M30.5445398,26.3706563 C31.0645341,26.3706563 31.5445288,26.6524375 31.8049947,27.111125 C32.0650018,27.5708228 32.0650018,28.1331772 31.8049947,28.592875 C31.5491408,29.0489672 31.0674879,29.3319197 30.5445398,29.3333438 L1.45423404,29.3333438 C0.651555349,29.3333438 0,28.6702188 0,27.8515625 C0,27.03375 0.651555349,26.3706563 1.45420279,26.3706563 L30.5445398,26.3706563 Z M28.808,2.66665625 C30.5708929,2.66665625 32,4.09576333 32,5.85865625 L32,20.2748845 C32,22.0377775 30.5708929,23.4668845 28.808,23.4668845 L3.192,23.4668845 C1.42910708,23.4668845 2.15892117e-16,22.0377775 0,20.2748845 L0,5.85865625 C-2.15892117e-16,4.09576333 1.42910708,2.66665625 3.192,2.66665625 L28.808,2.66665625 Z M15.9616,8.80009658 C14.7328,8.80009658 13.9008,9.33770248 13.0944,10.208112 L13.9264,11.027321 C14.4256,10.4513147 15.04,9.9777095 15.7824,9.9777095 C16.832,9.9777095 17.3824,10.6817172 17.3824,11.7057285 C17.3824,13.2545455 15.9488,15.0849656 13.1712,17.5425925 L13.1712,18.4002019 L19.2512,18.4002019 L19.2512,17.1457882 L16.896,17.1457882 C16.4352,17.1457882 15.8464,17.1841886 15.36,17.2353892 C17.3568,15.3281682 18.8032,13.4465476 18.8032,11.6289276 C18.8032,9.92650894 17.6896,8.80009658 15.9616,8.80009658 Z" id="形状结合"></path>
</g>
<path d="M23.3344,18.5666038 C25.0624,18.5666038 26.4832,17.5681928 26.4832,15.8657741 C26.4832,14.5985602 25.6256,13.7793512 24.5376,13.5105483 L24.5376,13.4465476 C25.536,13.0753435 26.1632,12.3201352 26.1632,11.2321233 C26.1632,9.67050613 24.9728,8.80009658 23.2832,8.80009658 C22.1952,8.80009658 21.3248,9.27370178 20.5824,9.93930908 L21.3504,10.8609192 C21.888,10.3361134 22.5024,9.9777095 23.232,9.96490936 C24.128,9.9777095 24.6784,10.5025153 24.6784,11.3345244 C24.6784,12.2817348 24.064,12.9857425 22.208,12.9857425 L22.208,14.0737545 C24.3328,14.0737545 24.9984,14.7521619 24.9984,15.8017734 C24.9984,16.7745841 24.2688,17.3633906 23.2064,17.3633906 C22.2336,17.3633906 21.5296,16.8897854 20.9792,16.3265792 L20.2624,17.2737896 C20.8896,17.9777973 21.8496,18.5666038 23.3344,18.5666038 Z" id="路径" fill="#DDDDDD"></path>
<g id="1" transform="translate(6.604800, 8.979299)" fill="#DDDDDD">
<path d="M0,9.42090339 L5.376,9.42090339 L5.376,8.20489005 L3.5328,8.20489005 L3.5328,0 L2.4192,0 C1.8816,0.332803652 1.2544,0.550406041 0.3712,0.716807867 L0.3712,1.65121812 L2.0608,1.65121812 L2.0608,8.20489005 L0,8.20489005 L0,9.42090339 Z" id="路径"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1435.000000, -783.000000)">
<g id="编组-8" transform="translate(1435.000000, 783.000000)">
<g id="电脑备份" fill="#FFFFFF" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="31.9996488" height="32"></rect>
<path d="M30.5445398,26.3706563 C31.0645341,26.3706563 31.5445288,26.6524375 31.8049947,27.111125 C32.0650018,27.5708228 32.0650018,28.1331772 31.8049947,28.592875 C31.5491408,29.0489672 31.0674879,29.3319197 30.5445398,29.3333438 L1.45423404,29.3333438 C0.651555349,29.3333438 0,28.6702188 0,27.8515625 C0,27.03375 0.651555349,26.3706563 1.45420279,26.3706563 L30.5445398,26.3706563 Z M28.808,2.66665625 C30.5708929,2.66665625 32,4.09576333 32,5.85865625 L32,20.2748845 C32,22.0377775 30.5708929,23.4668845 28.808,23.4668845 L3.192,23.4668845 C1.42910708,23.4668845 2.15892117e-16,22.0377775 0,20.2748845 L0,5.85865625 C-2.15892117e-16,4.09576333 1.42910708,2.66665625 3.192,2.66665625 L28.808,2.66665625 Z M23.2832,8.80009658 C22.1952,8.80009658 21.3248,9.27370178 20.5824,9.93930908 L21.3504,10.8609192 C21.888,10.3361134 22.5024,9.9777095 23.232,9.96490936 C24.128,9.9777095 24.6784,10.5025153 24.6784,11.3345244 C24.6784,12.2817348 24.064,12.9857425 22.208,12.9857425 L22.208,14.0737545 C24.3328,14.0737545 24.9984,14.7521619 24.9984,15.8017734 C24.9984,16.7745841 24.2688,17.3633906 23.2064,17.3633906 C22.2336,17.3633906 21.5296,16.8897854 20.9792,16.3265792 L20.2624,17.2737896 C20.8896,17.9777973 21.8496,18.5666038 23.3344,18.5666038 C25.0624,18.5666038 26.4832,17.5681928 26.4832,15.8657741 C26.4832,14.5985602 25.6256,13.7793512 24.5376,13.5105483 L24.5376,13.4465476 C25.536,13.0753435 26.1632,12.3201352 26.1632,11.2321233 C26.1632,9.67050613 24.9728,8.80009658 23.2832,8.80009658 Z M15.9616,8.80009658 C14.7328,8.80009658 13.9008,9.33770248 13.0944,10.208112 L13.9264,11.027321 C14.4256,10.4513147 15.04,9.9777095 15.7824,9.9777095 C16.832,9.9777095 17.3824,10.6817172 17.3824,11.7057285 C17.3824,13.2545455 15.9488,15.0849656 13.1712,17.5425925 L13.1712,18.4002019 L19.2512,18.4002019 L19.2512,17.1457882 L16.896,17.1457882 C16.4352,17.1457882 15.8464,17.1841886 15.36,17.2353892 C17.3568,15.3281682 18.8032,13.4465476 18.8032,11.6289276 C18.8032,9.92650894 17.6896,8.80009658 15.9616,8.80009658 Z" id="形状结合"></path>
</g>
<g id="23" transform="translate(13.094400, 8.800097)"></g>
<g id="1" transform="translate(6.604800, 8.979299)" fill="#DDDDDD" fill-rule="nonzero">
<path d="M0,9.42090339 L5.376,9.42090339 L5.376,8.20489005 L3.5328,8.20489005 L3.5328,0 L2.4192,0 C1.8816,0.332803652 1.2544,0.550406041 0.3712,0.716807867 L0.3712,1.65121812 L2.0608,1.65121812 L2.0608,8.20489005 L0,8.20489005 L0,9.42090339 Z" id="路径"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1483.000000, -739.000000)">
<g id="编组-8备份" transform="translate(1483.000000, 739.000000)">
<g id="电脑备份" fill="#FFFFFF" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="31.9996488" height="32"></rect>
<path d="M30.5445398,26.3706563 C31.0645341,26.3706563 31.5445288,26.6524375 31.8049947,27.111125 C32.0650018,27.5708228 32.0650018,28.1331772 31.8049947,28.592875 C31.5491408,29.0489672 31.0674879,29.3319197 30.5445398,29.3333438 L1.45423404,29.3333438 C0.651555349,29.3333438 0,28.6702188 0,27.8515625 C0,27.03375 0.651555349,26.3706563 1.45420279,26.3706563 L30.5445398,26.3706563 Z M28.808,2.66665625 C30.5708929,2.66665625 32,4.09576333 32,5.85865625 L32,20.2748845 C32,22.0377775 30.5708929,23.4668845 28.808,23.4668845 L3.192,23.4668845 C1.42910708,23.4668845 2.15892117e-16,22.0377775 0,20.2748845 L0,5.85865625 C-2.15892117e-16,4.09576333 1.42910708,2.66665625 3.192,2.66665625 L28.808,2.66665625 Z M23.2832,8.80009658 C22.1952,8.80009658 21.3248,9.27370178 20.5824,9.93930908 L21.3504,10.8609192 C21.888,10.3361134 22.5024,9.9777095 23.232,9.96490936 C24.128,9.9777095 24.6784,10.5025153 24.6784,11.3345244 C24.6784,12.2817348 24.064,12.9857425 22.208,12.9857425 L22.208,14.0737545 C24.3328,14.0737545 24.9984,14.7521619 24.9984,15.8017734 C24.9984,16.7745841 24.2688,17.3633906 23.2064,17.3633906 C22.2336,17.3633906 21.5296,16.8897854 20.9792,16.3265792 L20.2624,17.2737896 C20.8896,17.9777973 21.8496,18.5666038 23.3344,18.5666038 C25.0624,18.5666038 26.4832,17.5681928 26.4832,15.8657741 C26.4832,14.5985602 25.6256,13.7793512 24.5376,13.5105483 L24.5376,13.4465476 C25.536,13.0753435 26.1632,12.3201352 26.1632,11.2321233 C26.1632,9.67050613 24.9728,8.80009658 23.2832,8.80009658 Z" id="形状结合"></path>
</g>
<path d="M13.1712,18.4002019 L19.2512,18.4002019 L19.2512,17.1457882 L16.896,17.1457882 C16.4352,17.1457882 15.8464,17.1841886 15.36,17.2353892 C17.3568,15.3281682 18.8032,13.4465476 18.8032,11.6289276 C18.8032,9.92650894 17.6896,8.80009658 15.9616,8.80009658 C14.7328,8.80009658 13.9008,9.33770248 13.0944,10.208112 L13.9264,11.027321 C14.4256,10.4513147 15.04,9.9777095 15.7824,9.9777095 C16.832,9.9777095 17.3824,10.6817172 17.3824,11.7057285 C17.3824,13.2545455 15.9488,15.0849656 13.1712,17.5425925 L13.1712,18.4002019 Z" id="路径" fill="#DDDDDD" fill-rule="nonzero"></path>
<text id="1" font-family="SourceHanSansCN-Medium, Source Han Sans CN" font-size="12.768" font-weight="400" fill="#DDDDDD">
<tspan x="4.5297588" y="19.0239559">1</tspan>
</text>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>电脑备份 3</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1277.000000, -855.000000)" fill="#3DE123" fill-rule="nonzero">
<g id="编组-27" transform="translate(1117.000000, 795.000000)">
<g id="电脑备份-3" transform="translate(160.000000, 60.000000)">
<rect id="矩形" opacity="0" x="0" y="0" width="31.9996488" height="32"></rect>
<path d="M30.5445398,26.3706563 C31.0645341,26.3706563 31.5445288,26.6524375 31.8049947,27.111125 C32.0650018,27.5708228 32.0650018,28.1331772 31.8049947,28.592875 C31.5491408,29.0489672 31.0674879,29.3319197 30.5445398,29.3333438 L1.45423404,29.3333438 C0.651555349,29.3333438 0,28.6702188 0,27.8515625 C0,27.03375 0.651555349,26.3706563 1.45420279,26.3706563 L30.5445398,26.3706563 Z M28.808,2.66665625 C30.5708929,2.66665625 32,4.09576333 32,5.85865625 L32,20.2748845 C32,22.0377775 30.5708929,23.4668845 28.808,23.4668845 L3.192,23.4668845 C1.42910708,23.4668845 2.15892117e-16,22.0377775 0,20.2748845 L0,5.85865625 C-2.15892117e-16,4.09576333 1.42910708,2.66665625 3.192,2.66665625 L28.808,2.66665625 Z M23.0272,8.80009658 C21.9392,8.80009658 21.0688,9.27370178 20.3264,9.93930908 L21.0944,10.8609192 C21.632,10.3361134 22.2464,9.9777095 22.976,9.96490936 C23.872,9.9777095 24.4224,10.5025153 24.4224,11.3345244 C24.4224,12.2817348 23.808,12.9857425 21.952,12.9857425 L21.952,14.0737545 C24.0768,14.0737545 24.7424,14.7521619 24.7424,15.8017734 C24.7424,16.7745841 24.0128,17.3633906 22.9504,17.3633906 C21.9776,17.3633906 21.2736,16.8897854 20.7232,16.3265792 L20.0064,17.2737896 C20.6336,17.9777973 21.5936,18.5666038 23.0784,18.5666038 C24.8064,18.5666038 26.2272,17.5681928 26.2272,15.8657741 C26.2272,14.5985602 25.3696,13.7793512 24.2816,13.5105483 L24.2816,13.4465476 C25.28,13.0753435 25.9072,12.3201352 25.9072,11.2321233 C25.9072,9.67050613 24.7168,8.80009658 23.0272,8.80009658 Z M9.6896,8.97929855 L8.576,8.97929855 C8.0384,9.3121022 7.4112,9.52970459 6.528,9.69610641 L6.528,10.6305167 L8.2176,10.6305167 L8.2176,17.1841886 L6.1568,17.1841886 L6.1568,18.4002019 L11.5328,18.4002019 L11.5328,17.1841886 L9.6896,17.1841886 L9.6896,8.97929855 Z M15.7056,8.80009658 C14.4768,8.80009658 13.6448,9.33770248 12.8384,10.208112 L13.6704,11.027321 C14.1696,10.4513147 14.784,9.9777095 15.5264,9.9777095 C16.576,9.9777095 17.1264,10.6817172 17.1264,11.7057285 C17.1264,13.2545455 15.6928,15.0849656 12.9152,17.5425925 L12.9152,18.4002019 L18.9952,18.4002019 L18.9952,17.1457882 L16.64,17.1457882 C16.1792,17.1457882 15.5904,17.1841886 15.104,17.2353892 C17.1008,15.3281682 18.5472,13.4465476 18.5472,11.6289276 C18.5472,9.92650894 17.4336,8.80009658 15.7056,8.80009658 Z" id="形状结合"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份 9</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1133.000000, -811.000000)">
<g id="编组-27" transform="translate(1117.000000, 795.000000)">
<g id="编组-8备份-9" transform="translate(16.000000, 16.000000)">
<g id="电脑备份" fill="#3DE123" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="31.9996488" height="32"></rect>
<path d="M30.5445398,26.3706563 C31.0645341,26.3706563 31.5445288,26.6524375 31.8049947,27.111125 C32.0650018,27.5708228 32.0650018,28.1331772 31.8049947,28.592875 C31.5491408,29.0489672 31.0674879,29.3319197 30.5445398,29.3333438 L1.45423404,29.3333438 C0.651555349,29.3333438 0,28.6702188 0,27.8515625 C0,27.03375 0.651555349,26.3706563 1.45420279,26.3706563 L30.5445398,26.3706563 Z M28.808,2.66665625 C30.5708929,2.66665625 32,4.09576333 32,5.85865625 L32,20.2748845 C32,22.0377775 30.5708929,23.4668845 28.808,23.4668845 L3.192,23.4668845 C1.42910708,23.4668845 2.15892117e-16,22.0377775 0,20.2748845 L0,5.85865625 C-2.15892117e-16,4.09576333 1.42910708,2.66665625 3.192,2.66665625 L28.808,2.66665625 Z M10.1376,8.97929855 L9.024,8.97929855 C8.4864,9.3121022 7.8592,9.52970459 6.976,9.69610641 L6.976,10.6305167 L8.6656,10.6305167 L8.6656,17.1841886 L6.6048,17.1841886 L6.6048,18.4002019 L11.9808,18.4002019 L11.9808,17.1841886 L10.1376,17.1841886 L10.1376,8.97929855 Z" id="形状结合"></path>
</g>
<path d="M13.1712,18.4002019 L19.2512,18.4002019 L19.2512,17.1457882 L16.896,17.1457882 C16.4352,17.1457882 15.8464,17.1841886 15.36,17.2353892 C17.3568,15.3281682 18.8032,13.4465476 18.8032,11.6289276 C18.8032,9.92650894 17.6896,8.80009658 15.9616,8.80009658 C14.7328,8.80009658 13.9008,9.33770248 13.0944,10.208112 L13.9264,11.027321 C14.4256,10.4513147 15.04,9.9777095 15.7824,9.9777095 C16.832,9.9777095 17.3824,10.6817172 17.3824,11.7057285 C17.3824,13.2545455 15.9488,15.0849656 13.1712,17.5425925 L13.1712,18.4002019 Z" id="路径" fill="#C5D7DD" fill-rule="nonzero"></path>
<path d="M23.3344,18.5666038 C25.0624,18.5666038 26.4832,17.5681928 26.4832,15.8657741 C26.4832,14.5985602 25.6256,13.7793512 24.5376,13.5105483 L24.5376,13.4465476 C25.536,13.0753435 26.1632,12.3201352 26.1632,11.2321233 C26.1632,9.67050613 24.9728,8.80009658 23.2832,8.80009658 C22.1952,8.80009658 21.3248,9.27370178 20.5824,9.93930908 L21.3504,10.8609192 C21.888,10.3361134 22.5024,9.9777095 23.232,9.96490936 C24.128,9.9777095 24.6784,10.5025153 24.6784,11.3345244 C24.6784,12.2817348 24.064,12.9857425 22.208,12.9857425 L22.208,14.0737545 C24.3328,14.0737545 24.9984,14.7521619 24.9984,15.8017734 C24.9984,16.7745841 24.2688,17.3633906 23.2064,17.3633906 C22.2336,17.3633906 21.5296,16.8897854 20.9792,16.3265792 L20.2624,17.2737896 C20.8896,17.9777973 21.8496,18.5666038 23.3344,18.5666038 Z" id="路径" fill="#C5D7DD" fill-rule="nonzero"></path>
<g id="1" transform="translate(6.604800, 8.979299)"></g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份 10</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1133.000000, -855.000000)">
<g id="编组-27" transform="translate(1117.000000, 795.000000)">
<g id="编组-8备份-10" transform="translate(16.000000, 60.000000)">
<g id="电脑备份" fill="#3DE123" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="31.9996488" height="32"></rect>
<path d="M30.5445398,26.3706563 C31.0645341,26.3706563 31.5445288,26.6524375 31.8049947,27.111125 C32.0650018,27.5708228 32.0650018,28.1331772 31.8049947,28.592875 C31.5491408,29.0489672 31.0674879,29.3319197 30.5445398,29.3333438 L1.45423404,29.3333438 C0.651555349,29.3333438 0,28.6702188 0,27.8515625 C0,27.03375 0.651555349,26.3706563 1.45420279,26.3706563 L30.5445398,26.3706563 Z M28.808,2.66665625 C30.5708929,2.66665625 32,4.09576333 32,5.85865625 L32,20.2748845 C32,22.0377775 30.5708929,23.4668845 28.808,23.4668845 L3.192,23.4668845 C1.42910708,23.4668845 2.15892117e-16,22.0377775 0,20.2748845 L0,5.85865625 C-2.15892117e-16,4.09576333 1.42910708,2.66665625 3.192,2.66665625 L28.808,2.66665625 Z M15.9616,8.80009658 C14.7328,8.80009658 13.9008,9.33770248 13.0944,10.208112 L13.9264,11.027321 C14.4256,10.4513147 15.04,9.9777095 15.7824,9.9777095 C16.832,9.9777095 17.3824,10.6817172 17.3824,11.7057285 C17.3824,13.2545455 15.9488,15.0849656 13.1712,17.5425925 L13.1712,18.4002019 L19.2512,18.4002019 L19.2512,17.1457882 L16.896,17.1457882 C16.4352,17.1457882 15.8464,17.1841886 15.36,17.2353892 C17.3568,15.3281682 18.8032,13.4465476 18.8032,11.6289276 C18.8032,9.92650894 17.6896,8.80009658 15.9616,8.80009658 Z M10.1376,8.97929855 L9.024,8.97929855 C8.4864,9.3121022 7.8592,9.52970459 6.976,9.69610641 L6.976,10.6305167 L8.6656,10.6305167 L8.6656,17.1841886 L6.6048,17.1841886 L6.6048,18.4002019 L11.9808,18.4002019 L11.9808,17.1841886 L10.1376,17.1841886 L10.1376,8.97929855 Z" id="形状结合"></path>
</g>
<path d="M23.3344,18.5666038 C25.0624,18.5666038 26.4832,17.5681928 26.4832,15.8657741 C26.4832,14.5985602 25.6256,13.7793512 24.5376,13.5105483 L24.5376,13.4465476 C25.536,13.0753435 26.1632,12.3201352 26.1632,11.2321233 C26.1632,9.67050613 24.9728,8.80009658 23.2832,8.80009658 C22.1952,8.80009658 21.3248,9.27370178 20.5824,9.93930908 L21.3504,10.8609192 C21.888,10.3361134 22.5024,9.9777095 23.232,9.96490936 C24.128,9.9777095 24.6784,10.5025153 24.6784,11.3345244 C24.6784,12.2817348 24.064,12.9857425 22.208,12.9857425 L22.208,14.0737545 C24.3328,14.0737545 24.9984,14.7521619 24.9984,15.8017734 C24.9984,16.7745841 24.2688,17.3633906 23.2064,17.3633906 C22.2336,17.3633906 21.5296,16.8897854 20.9792,16.3265792 L20.2624,17.2737896 C20.8896,17.9777973 21.8496,18.5666038 23.3344,18.5666038 Z" id="路径" fill="#DDDDDD" fill-rule="nonzero"></path>
<g id="1" transform="translate(6.604800, 8.979299)"></g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 10</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1229.000000, -855.000000)" fill-rule="nonzero">
<g id="编组-27" transform="translate(1117.000000, 795.000000)">
<g id="编组-10" transform="translate(112.000000, 60.000000)">
<g id="电脑备份" fill="#3DE123">
<rect id="矩形" opacity="0" x="0" y="0" width="31.9996488" height="32"></rect>
<path d="M30.5445398,26.3706563 C31.0645341,26.3706563 31.5445288,26.6524375 31.8049947,27.111125 C32.0650018,27.5708228 32.0650018,28.1331772 31.8049947,28.592875 C31.5491408,29.0489672 31.0674879,29.3319197 30.5445398,29.3333438 L1.45423404,29.3333438 C0.651555349,29.3333438 0,28.6702188 0,27.8515625 C0,27.03375 0.651555349,26.3706563 1.45420279,26.3706563 L30.5445398,26.3706563 Z M28.808,2.66665625 C30.5708929,2.66665625 32,4.09576333 32,5.85865625 L32,20.2748845 C32,22.0377775 30.5708929,23.4668845 28.808,23.4668845 L3.192,23.4668845 C1.42910708,23.4668845 2.15892117e-16,22.0377775 0,20.2748845 L0,5.85865625 C-2.15892117e-16,4.09576333 1.42910708,2.66665625 3.192,2.66665625 L28.808,2.66665625 Z M23.2832,8.80009658 C22.1952,8.80009658 21.3248,9.27370178 20.5824,9.93930908 L21.3504,10.8609192 C21.888,10.3361134 22.5024,9.9777095 23.232,9.96490936 C24.128,9.9777095 24.6784,10.5025153 24.6784,11.3345244 C24.6784,12.2817348 24.064,12.9857425 22.208,12.9857425 L22.208,14.0737545 C24.3328,14.0737545 24.9984,14.7521619 24.9984,15.8017734 C24.9984,16.7745841 24.2688,17.3633906 23.2064,17.3633906 C22.2336,17.3633906 21.5296,16.8897854 20.9792,16.3265792 L20.2624,17.2737896 C20.8896,17.9777973 21.8496,18.5666038 23.3344,18.5666038 C25.0624,18.5666038 26.4832,17.5681928 26.4832,15.8657741 C26.4832,14.5985602 25.6256,13.7793512 24.5376,13.5105483 L24.5376,13.4465476 C25.536,13.0753435 26.1632,12.3201352 26.1632,11.2321233 C26.1632,9.67050613 24.9728,8.80009658 23.2832,8.80009658 Z M10.1376,8.97929855 L9.024,8.97929855 C8.4864,9.3121022 7.8592,9.52970459 6.976,9.69610641 L6.976,10.6305167 L8.6656,10.6305167 L8.6656,17.1841886 L6.6048,17.1841886 L6.6048,18.4002019 L11.9808,18.4002019 L11.9808,17.1841886 L10.1376,17.1841886 L10.1376,8.97929855 Z" id="形状结合"></path>
</g>
<path d="M13.1712,18.4002019 L19.2512,18.4002019 L19.2512,17.1457882 L16.896,17.1457882 C16.4352,17.1457882 15.8464,17.1841886 15.36,17.2353892 C17.3568,15.3281682 18.8032,13.4465476 18.8032,11.6289276 C18.8032,9.92650894 17.6896,8.80009658 15.9616,8.80009658 C14.7328,8.80009658 13.9008,9.33770248 13.0944,10.208112 L13.9264,11.027321 C14.4256,10.4513147 15.04,9.9777095 15.7824,9.9777095 C16.832,9.9777095 17.3824,10.6817172 17.3824,11.7057285 C17.3824,13.2545455 15.9488,15.0849656 13.1712,17.5425925 L13.1712,18.4002019 Z" id="路径备份" fill="#DDDDDD"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份 11</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1181.000000, -811.000000)" fill-rule="nonzero">
<g id="编组-27" transform="translate(1117.000000, 795.000000)">
<g id="编组-8备份-11" transform="translate(64.000000, 16.000000)">
<g id="电脑备份" fill="#3DE123">
<rect id="矩形" opacity="0" x="0" y="0" width="31.9996488" height="32"></rect>
<path d="M30.5445398,26.3706563 C31.0645341,26.3706563 31.5445288,26.6524375 31.8049947,27.111125 C32.0650018,27.5708228 32.0650018,28.1331772 31.8049947,28.592875 C31.5491408,29.0489672 31.0674879,29.3319197 30.5445398,29.3333438 L1.45423404,29.3333438 C0.651555349,29.3333438 0,28.6702188 0,27.8515625 C0,27.03375 0.651555349,26.3706563 1.45420279,26.3706563 L30.5445398,26.3706563 Z M28.808,2.66665625 C30.5708929,2.66665625 32,4.09576333 32,5.85865625 L32,20.2748845 C32,22.0377775 30.5708929,23.4668845 28.808,23.4668845 L3.192,23.4668845 C1.42910708,23.4668845 2.15892117e-16,22.0377775 0,20.2748845 L0,5.85865625 C-2.15892117e-16,4.09576333 1.42910708,2.66665625 3.192,2.66665625 L28.808,2.66665625 Z M15.9616,8.80009658 C14.7328,8.80009658 13.9008,9.33770248 13.0944,10.208112 L13.9264,11.027321 C14.4256,10.4513147 15.04,9.9777095 15.7824,9.9777095 C16.832,9.9777095 17.3824,10.6817172 17.3824,11.7057285 C17.3824,13.2545455 15.9488,15.0849656 13.1712,17.5425925 L13.1712,18.4002019 L19.2512,18.4002019 L19.2512,17.1457882 L16.896,17.1457882 C16.4352,17.1457882 15.8464,17.1841886 15.36,17.2353892 C17.3568,15.3281682 18.8032,13.4465476 18.8032,11.6289276 C18.8032,9.92650894 17.6896,8.80009658 15.9616,8.80009658 Z" id="形状结合"></path>
</g>
<path d="M23.3344,18.5666038 C25.0624,18.5666038 26.4832,17.5681928 26.4832,15.8657741 C26.4832,14.5985602 25.6256,13.7793512 24.5376,13.5105483 L24.5376,13.4465476 C25.536,13.0753435 26.1632,12.3201352 26.1632,11.2321233 C26.1632,9.67050613 24.9728,8.80009658 23.2832,8.80009658 C22.1952,8.80009658 21.3248,9.27370178 20.5824,9.93930908 L21.3504,10.8609192 C21.888,10.3361134 22.5024,9.9777095 23.232,9.96490936 C24.128,9.9777095 24.6784,10.5025153 24.6784,11.3345244 C24.6784,12.2817348 24.064,12.9857425 22.208,12.9857425 L22.208,14.0737545 C24.3328,14.0737545 24.9984,14.7521619 24.9984,15.8017734 C24.9984,16.7745841 24.2688,17.3633906 23.2064,17.3633906 C22.2336,17.3633906 21.5296,16.8897854 20.9792,16.3265792 L20.2624,17.2737896 C20.8896,17.9777973 21.8496,18.5666038 23.3344,18.5666038 Z" id="路径" fill="#C5D7DD"></path>
<g id="1" transform="translate(6.604800, 8.979299)" fill="#C5D7DD">
<path d="M0,9.42090339 L5.376,9.42090339 L5.376,8.20489005 L3.5328,8.20489005 L3.5328,0 L2.4192,0 C1.8816,0.332803652 1.2544,0.550406041 0.3712,0.716807867 L0.3712,1.65121812 L2.0608,1.65121812 L2.0608,8.20489005 L0,8.20489005 L0,9.42090339 Z" id="路径"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份 6</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1181.000000, -855.000000)">
<g id="编组-27" transform="translate(1117.000000, 795.000000)">
<g id="编组-8备份-6" transform="translate(64.000000, 60.000000)">
<g id="电脑备份" fill="#3DE123" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="31.9996488" height="32"></rect>
<path d="M30.5445398,26.3706563 C31.0645341,26.3706563 31.5445288,26.6524375 31.8049947,27.111125 C32.0650018,27.5708228 32.0650018,28.1331772 31.8049947,28.592875 C31.5491408,29.0489672 31.0674879,29.3319197 30.5445398,29.3333438 L1.45423404,29.3333438 C0.651555349,29.3333438 0,28.6702188 0,27.8515625 C0,27.03375 0.651555349,26.3706563 1.45420279,26.3706563 L30.5445398,26.3706563 Z M28.808,2.66665625 C30.5708929,2.66665625 32,4.09576333 32,5.85865625 L32,20.2748845 C32,22.0377775 30.5708929,23.4668845 28.808,23.4668845 L3.192,23.4668845 C1.42910708,23.4668845 2.15892117e-16,22.0377775 0,20.2748845 L0,5.85865625 C-2.15892117e-16,4.09576333 1.42910708,2.66665625 3.192,2.66665625 L28.808,2.66665625 Z M23.2832,8.80009658 C22.1952,8.80009658 21.3248,9.27370178 20.5824,9.93930908 L21.3504,10.8609192 C21.888,10.3361134 22.5024,9.9777095 23.232,9.96490936 C24.128,9.9777095 24.6784,10.5025153 24.6784,11.3345244 C24.6784,12.2817348 24.064,12.9857425 22.208,12.9857425 L22.208,14.0737545 C24.3328,14.0737545 24.9984,14.7521619 24.9984,15.8017734 C24.9984,16.7745841 24.2688,17.3633906 23.2064,17.3633906 C22.2336,17.3633906 21.5296,16.8897854 20.9792,16.3265792 L20.2624,17.2737896 C20.8896,17.9777973 21.8496,18.5666038 23.3344,18.5666038 C25.0624,18.5666038 26.4832,17.5681928 26.4832,15.8657741 C26.4832,14.5985602 25.6256,13.7793512 24.5376,13.5105483 L24.5376,13.4465476 C25.536,13.0753435 26.1632,12.3201352 26.1632,11.2321233 C26.1632,9.67050613 24.9728,8.80009658 23.2832,8.80009658 Z M15.9616,8.80009658 C14.7328,8.80009658 13.9008,9.33770248 13.0944,10.208112 L13.9264,11.027321 C14.4256,10.4513147 15.04,9.9777095 15.7824,9.9777095 C16.832,9.9777095 17.3824,10.6817172 17.3824,11.7057285 C17.3824,13.2545455 15.9488,15.0849656 13.1712,17.5425925 L13.1712,18.4002019 L19.2512,18.4002019 L19.2512,17.1457882 L16.896,17.1457882 C16.4352,17.1457882 15.8464,17.1841886 15.36,17.2353892 C17.3568,15.3281682 18.8032,13.4465476 18.8032,11.6289276 C18.8032,9.92650894 17.6896,8.80009658 15.9616,8.80009658 Z" id="形状结合"></path>
</g>
<g id="23" transform="translate(13.094400, 8.800097)"></g>
<g id="1" transform="translate(6.604800, 8.979299)" fill="#DDDDDD" fill-rule="nonzero">
<path d="M0,9.42090339 L5.376,9.42090339 L5.376,8.20489005 L3.5328,8.20489005 L3.5328,0 L2.4192,0 C1.8816,0.332803652 1.2544,0.550406041 0.3712,0.716807867 L0.3712,1.65121812 L2.0608,1.65121812 L2.0608,8.20489005 L0,8.20489005 L0,9.42090339 Z" id="路径"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份 8</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1229.000000, -811.000000)">
<g id="编组-27" transform="translate(1117.000000, 795.000000)">
<g id="编组-8备份-8" transform="translate(112.000000, 16.000000)">
<g id="电脑备份" fill="#3DE123" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="31.9996488" height="32"></rect>
<path d="M30.5445398,26.3706563 C31.0645341,26.3706563 31.5445288,26.6524375 31.8049947,27.111125 C32.0650018,27.5708228 32.0650018,28.1331772 31.8049947,28.592875 C31.5491408,29.0489672 31.0674879,29.3319197 30.5445398,29.3333438 L1.45423404,29.3333438 C0.651555349,29.3333438 0,28.6702188 0,27.8515625 C0,27.03375 0.651555349,26.3706563 1.45420279,26.3706563 L30.5445398,26.3706563 Z M28.808,2.66665625 C30.5708929,2.66665625 32,4.09576333 32,5.85865625 L32,20.2748845 C32,22.0377775 30.5708929,23.4668845 28.808,23.4668845 L3.192,23.4668845 C1.42910708,23.4668845 2.15892117e-16,22.0377775 0,20.2748845 L0,5.85865625 C-2.15892117e-16,4.09576333 1.42910708,2.66665625 3.192,2.66665625 L28.808,2.66665625 Z M23.2832,8.80009658 C22.1952,8.80009658 21.3248,9.27370178 20.5824,9.93930908 L21.3504,10.8609192 C21.888,10.3361134 22.5024,9.9777095 23.232,9.96490936 C24.128,9.9777095 24.6784,10.5025153 24.6784,11.3345244 C24.6784,12.2817348 24.064,12.9857425 22.208,12.9857425 L22.208,14.0737545 C24.3328,14.0737545 24.9984,14.7521619 24.9984,15.8017734 C24.9984,16.7745841 24.2688,17.3633906 23.2064,17.3633906 C22.2336,17.3633906 21.5296,16.8897854 20.9792,16.3265792 L20.2624,17.2737896 C20.8896,17.9777973 21.8496,18.5666038 23.3344,18.5666038 C25.0624,18.5666038 26.4832,17.5681928 26.4832,15.8657741 C26.4832,14.5985602 25.6256,13.7793512 24.5376,13.5105483 L24.5376,13.4465476 C25.536,13.0753435 26.1632,12.3201352 26.1632,11.2321233 C26.1632,9.67050613 24.9728,8.80009658 23.2832,8.80009658 Z" id="形状结合"></path>
</g>
<path d="M13.1712,18.4002019 L19.2512,18.4002019 L19.2512,17.1457882 L16.896,17.1457882 C16.4352,17.1457882 15.8464,17.1841886 15.36,17.2353892 C17.3568,15.3281682 18.8032,13.4465476 18.8032,11.6289276 C18.8032,9.92650894 17.6896,8.80009658 15.9616,8.80009658 C14.7328,8.80009658 13.9008,9.33770248 13.0944,10.208112 L13.9264,11.027321 C14.4256,10.4513147 15.04,9.9777095 15.7824,9.9777095 C16.832,9.9777095 17.3824,10.6817172 17.3824,11.7057285 C17.3824,13.2545455 15.9488,15.0849656 13.1712,17.5425925 L13.1712,18.4002019 Z" id="路径" fill="#C5D7DD" fill-rule="nonzero"></path>
<text id="1" font-family="SourceHanSansCN-Medium, Source Han Sans CN" font-size="12.768" font-weight="400" fill="#C5D7DD">
<tspan x="4.5297588" y="19.0239559">1</tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份 9</title>
<g id="鹰视2023" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2023-0607宦" transform="translate(-1133.000000, -811.000000)">
<g id="编组-27" transform="translate(1117.000000, 795.000000)">
<g id="编组-8备份-9" transform="translate(16.000000, 16.000000)">
<g id="电脑备份" fill="#3DE123" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="31.9996488" height="32"></rect>
<path d="M30.5445398,26.3706563 C31.0645341,26.3706563 31.5445288,26.6524375 31.8049947,27.111125 C32.0650018,27.5708228 32.0650018,28.1331772 31.8049947,28.592875 C31.5491408,29.0489672 31.0674879,29.3319197 30.5445398,29.3333438 L1.45423404,29.3333438 C0.651555349,29.3333438 0,28.6702188 0,27.8515625 C0,27.03375 0.651555349,26.3706563 1.45420279,26.3706563 L30.5445398,26.3706563 Z M28.808,2.66665625 C30.5708929,2.66665625 32,4.09576333 32,5.85865625 L32,20.2748845 C32,22.0377775 30.5708929,23.4668845 28.808,23.4668845 L3.192,23.4668845 C1.42910708,23.4668845 2.15892117e-16,22.0377775 0,20.2748845 L0,5.85865625 C-2.15892117e-16,4.09576333 1.42910708,2.66665625 3.192,2.66665625 L28.808,2.66665625 Z M10.1376,8.97929855 L9.024,8.97929855 C8.4864,9.3121022 7.8592,9.52970459 6.976,9.69610641 L6.976,10.6305167 L8.6656,10.6305167 L8.6656,17.1841886 L6.6048,17.1841886 L6.6048,18.4002019 L11.9808,18.4002019 L11.9808,17.1841886 L10.1376,17.1841886 L10.1376,8.97929855 Z" id="形状结合"></path>
</g>
<path d="M13.1712,18.4002019 L19.2512,18.4002019 L19.2512,17.1457882 L16.896,17.1457882 C16.4352,17.1457882 15.8464,17.1841886 15.36,17.2353892 C17.3568,15.3281682 18.8032,13.4465476 18.8032,11.6289276 C18.8032,9.92650894 17.6896,8.80009658 15.9616,8.80009658 C14.7328,8.80009658 13.9008,9.33770248 13.0944,10.208112 L13.9264,11.027321 C14.4256,10.4513147 15.04,9.9777095 15.7824,9.9777095 C16.832,9.9777095 17.3824,10.6817172 17.3824,11.7057285 C17.3824,13.2545455 15.9488,15.0849656 13.1712,17.5425925 L13.1712,18.4002019 Z" id="路径" fill="#C5D7DD" fill-rule="nonzero"></path>
<path d="M23.3344,18.5666038 C25.0624,18.5666038 26.4832,17.5681928 26.4832,15.8657741 C26.4832,14.5985602 25.6256,13.7793512 24.5376,13.5105483 L24.5376,13.4465476 C25.536,13.0753435 26.1632,12.3201352 26.1632,11.2321233 C26.1632,9.67050613 24.9728,8.80009658 23.2832,8.80009658 C22.1952,8.80009658 21.3248,9.27370178 20.5824,9.93930908 L21.3504,10.8609192 C21.888,10.3361134 22.5024,9.9777095 23.232,9.96490936 C24.128,9.9777095 24.6784,10.5025153 24.6784,11.3345244 C24.6784,12.2817348 24.064,12.9857425 22.208,12.9857425 L22.208,14.0737545 C24.3328,14.0737545 24.9984,14.7521619 24.9984,15.8017734 C24.9984,16.7745841 24.2688,17.3633906 23.2064,17.3633906 C22.2336,17.3633906 21.5296,16.8897854 20.9792,16.3265792 L20.2624,17.2737896 C20.8896,17.9777973 21.8496,18.5666038 23.3344,18.5666038 Z" id="路径" fill="#C5D7DD" fill-rule="nonzero"></path>
<g id="1" transform="translate(6.604800, 8.979299)"></g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<template>
<div class="videoModelChange_box">
<div class="videoModelChange_list" v-if="isShow">
<div v-for="(item,index) in imgList" :key="index">
<el-image
@click="change(item,true)"
v-if="item.id != 5"
class="w30 h36 ml10 mr10"
:src="require(`./img/select/${item.id}.svg`)"
></el-image>
<div v-else class="tc lh34 ml11" @click="handclickFn" title="主画面切换">切换</div>
</div>
</div>
<div class="current mt13" @click="isShow = !isShow">
<el-image class="w20 h20" :src="getImg(key)"></el-image>
</div>
</div>
</template>
<script>
import API from "../../../../../../api";
export default {
data() {
return {
imgList: [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 5 },
{ id: 12 },
{ id: 13 },
{ id: 23 },
{ id: 0 }
],
key: 1,
flag: false,
isShow: false,
controlflag: true
};
},
props: {
data: {
type: Object,
default: () => ({})
},
uavData: {
type: Object,
default: () => ({})
}
},
inject: ["uav_This", "NXdata"],
watch: {
"uav_This.NXdata": {
handler(value) {
if (value.data && value.data.message == "ok") {
this.key = value.data.modeType || 1;
if (this.timeOut) {
clearTimeout(this.timeOut);
}
}
// 返回视频融合信息
if (value.messageID === 2032) {
this.key = value.modeType;
}
},
deep: true
}
},
created() {
// 查询清流拼接状态(视频融合是几分屏)
const streamData = {
data: {
data: {},
messageID: 1032
},
type: 528
};
this.$emit("fn", streamData);
// this.handclickFn()
},
methods: {
async checkUseOperateFn(device) {
// 查看是否有控制权限
let res = await API.FCKERNEL.checkUseOperate({ deviceHardId: device });
if (res.code == 201) {
this.$message.warning(res.msg);
return false;
} else {
return true;
}
},
getImg(key) {
let arr = this.imgList.filter(item => item.id == key);
if (arr) {
let img = require(`./img/default/${arr[0].id}.svg`);
return img;
}
return "";
},
async change(item, status) {
if (item.id == 5) return false;
if (status) {
let res = await this.checkUseOperateFn(this.data.deviceHardId);
if (!res) {
return false;
}
}
let streamData = {
data: {
data: {
modeType: item.id
},
messageID: 1033
},
type: 528
};
this.$emit("fn", streamData);
console.log(streamData, "streamData");
this.flag = true;
if (this.timeOut) {
clearTimeout(this.timeOut);
}
this.timeOut = setTimeout(() => {
// status 判断是否 是主动触发
if (status) {
this.$message.error("请联系运维人员升级固件!");
}
}, 2000);
},
async handclickFn() {
let res = await this.checkUseOperateFn(this.data.deviceHardId);
if (!res) {
return false;
}
this.controlflag = !this.controlflag;
// fuseFlag 是否进行视频融合 true为融合
// controlflag 是否需要画中画主次画面切换 true 为切换
let streamData = {
data: {
data: {
fuseFlag: true,
controlflag: this.controlflag
},
messageID: 1018
},
type: 528
};
console.log(streamData, "streamData");
this.$emit("fn", streamData);
}
}
};
</script>
<style scoped lang='scss'>
.videoModelChange_box {
height: 32px;
position: absolute;
.videoModelChange_list {
// display: none;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
position: absolute;
bottom: 32px;
right: -26px;
width: 200px;
height: 64px;
padding: 10px;
z-index: 20;
background: #000000a3;
border: 1px solid rgba(26, 92, 246, 0.5);
}
&.current {
margin-left: 5px;
margin-top: 30px;
line-height: 30px;
}
}
// .videoModelChange_box:hover {
// .videoModelChange_list {
// display: flex;
// }
// }
</style>
\ No newline at end of file
<template>
<!-- 清流融合 -->
<div>
<div :class="{ 'full-video': isStatus }" ref="wrap">
<div :class="infoflag ? 'interact-wrap':'interact_wrap_full'" @dblclick="screen">
<div class="cpt_video" :class="big" @click="fn" v-if="flag" ref="video" v-interact>
<Obstacle v-if="!isStatus"></Obstacle>
<div class="video">
<div class="name" v-clipboard:copy="vUrl.vUrl">{{ device.name }}</div>
<!-- <div class="type" v-if="networkType">{{ networkType }}</div> -->
<!-- <div class="types">{{ streamName }}</div> -->
<div v-show="!isStatus" class="close" @click="close(device)">关闭</div>
</div>
<videoModelChange
:data="data"
@fn="videoModelChangeFn"
v-if="streamSelect == 'QingLiu' && !isStatus"
class="cp pa cf modelStyle"
@click="VideoModelChange"
:uavData="uavData"
:NXdata="NXdata"
></videoModelChange>
<components
:is="playerCom"
:videoFlag="videoFlag"
:isStatus="isStatus"
ref="player"
:LivePlayerInfor="false"
:fpvUrl="fpvUrl"
:data="vUrl"
:device="device"
:controls="false"
:className="'fkLivePlayer'"
:infoflag="infoflag"
:deviceName="device.name"
:raw_msg="raw_msg"
:isInfoShow="isInfoShow"
@close="infoflag = false"
/>
<!-- @entryCross="entryCross" -->
<div class="info" v-if="infoshow && streamSelect == 'QingLiu'&&!isStatus">
<div class="de">
<div class="title">bitrate:</div>
<div class="detail">{{ raw_msg ? raw_msg / 1000 : "0" }}kbps</div>
</div>
<div class="de">
<div class="title">venc_avg:</div>
<div class="detail">{{ infoData ? infoData.venc_avg / 1000 : "0" }}ms</div>
</div>
<div class="de">
<div class="title">venc_last:</div>
<div class="detail">{{ infoData ? infoData.venc_last / 1000 : "0" }}ms</div>
</div>
<div class="de">
<div class="title">pushrtt_avg:</div>
<div class="detail">{{ infoData ? infoData.pushrtt_avg[0] / 1000 : "0" }}ms</div>
</div>
<div class="de">
<div class="title">pushrtt_last:</div>
<div class="detail">{{ infoData ? infoData.pushrtt_last[0] / 1000 : "0" }}ms</div>
</div>
<div class="de">
<div class="title">recvrtt_avg:</div>
<div class="detail">{{ infoData ? infoData.recvrtt_avg[0] / 1000 : "0" }}ms</div>
</div>
<div class="de">
<div class="title">recvrtt_last:</div>
<div class="detail">{{ infoData ? infoData.recvrtt_last[0] / 1000 : "0" }}ms</div>
</div>
<div class="de">
<div class="title">pushretrans_avg:</div>
<div class="detail">
{{
infoData ? (infoData.pushretrans_avg[0] * 0.1).toFixed(2) : "0"
}}%
</div>
</div>
<div class="de">
<div class="title">pushretrans_last:</div>
<div class="detail">
{{
infoData
? (infoData.pushretrans_last[0] * 0.1).toFixed(2)
: "0"
}}%
</div>
</div>
<div class="de">
<div class="title">recvretrans_avg:</div>
<div class="detail">
{{
infoData ? (infoData.recvretrans_avg[0] * 0.1).toFixed(2) : "0"
}}%
</div>
</div>
<div class="de">
<div class="title">recvretrans_last:</div>
<div class="detail">
{{
infoData
? (infoData.recvretrans_last[0] * 0.1).toFixed(2)
: "0"
}}%
</div>
</div>
<div class="de">
<div class="title">vdec:</div>
<div class="detail">{{ infoData ? infoData.vdec / 1000 : "0" }}ms</div>
</div>
<div class="de">
<div class="title">vbuffer:</div>
<div class="detail">{{ infoData ? infoData.vbuffer / 1000 : "0" }}ms</div>
</div>
</div>
<div class="info_isStatus" v-if="infoshow && streamSelect == 'QingLiu'&&isStatus">
<div class="title_box" v-interact>
<div class="title pl20">
<img src="./assets/images/mount_head.png" />
<div class="font">视频信息</div>
</div>
<div style="display: flex">
<div class="icon-box"></div>
<div class="cf ml20 mr10 c70d cp" @click="infoshow = false">关闭</div>
</div>
</div>
<div class="content">
<div class="de">
<div class="title">bitrate:</div>
<div class="detail">{{ raw_msg ? raw_msg / 1000 : "0" }}kbps</div>
</div>
<div class="de">
<div class="title">venc_avg:</div>
<div
class="detail"
>{{ infoData&&infoData.venc_avg ? infoData.venc_avg / 1000 : "0" }}ms</div>
</div>
<div class="de">
<div class="title">venc_last:</div>
<div
class="detail"
>{{ infoData&&infoData.venc_last ? infoData.venc_last / 1000 : "0" }}ms</div>
</div>
<div class="de">
<div class="title">pushrtt_avg:</div>
<div
class="detail"
>{{ infoData&&infoData.pushrtt_avg ? infoData.pushrtt_avg[0] / 1000 : "0" }}ms</div>
</div>
<div class="de">
<div class="title">pushrtt_last:</div>
<div
class="detail"
>{{ infoData&&infoData.pushrtt_last ? infoData.pushrtt_last[0] / 1000 : "0" }}ms</div>
</div>
<div class="de">
<div class="title">recvrtt_avg:</div>
<div
class="detail"
>{{ infoData&&infoData.recvrtt_avg ? infoData.recvrtt_avg[0] / 1000 : "0" }}ms</div>
</div>
<div class="de">
<div class="title">recvrtt_last:</div>
<div
class="detail"
>{{ infoData&&infoData.recvrtt_last ? infoData.recvrtt_last[0] / 1000 : "0" }}ms</div>
</div>
<div class="de">
<div class="title">pushretrans_avg:</div>
<div class="detail">
{{
infoData&&infoData.pushretrans_avg ? (infoData.pushretrans_avg[0] * 0.1).toFixed(2) : "0"
}}%
</div>
</div>
<div class="de">
<div class="title">pushretrans_last:</div>
<div class="detail">
{{
infoData&&infoData.pushretrans_last ? (infoData.pushretrans_last[0] * 0.1).toFixed(2) : "0"
}}%
</div>
</div>
<div class="de">
<div class="title">recvretrans_avg:</div>
<div class="detail">
{{
infoData&&infoData.recvretrans_avg ? (infoData.recvretrans_avg[0] * 0.1).toFixed(2) : "0"
}}%
</div>
</div>
<div class="de">
<div class="title">recvretrans_last:</div>
<div class="detail">
{{
infoData&&infoData.recvretrans_last ? (infoData.recvretrans_last[0] * 0.1).toFixed(2) : "0"
}}%
</div>
</div>
<div class="de">
<div class="title">vdec:</div>
<div class="detail">{{ infoData&&infoData.vdec ? infoData.vdec / 1000 : "0" }}ms</div>
</div>
<div class="de">
<div class="title">vbuffer:</div>
<div
class="detail"
>{{ infoData&&infoData.vbuffer ? infoData.vbuffer / 1000 : "0" }}ms</div>
</div>
</div>
</div>
<!-- 瞄准 -->
<div class="kedu" :style="backgroundStyle" v-if="ShowCenter">
<div class="num">
<div class="first">{{ num.one }}</div>
<div class="first">{{ num.two }}</div>
<div class="first">{{ num.three }}</div>
<div class="first">{{ num.four }}</div>
<div class="first">{{ num.five }}</div>
<div class="first">{{ num.six }}</div>
<div class="first">{{ num.seven }}</div>
</div>
<div class="center">
<img src="./assets/images/center.png" alt />
</div>
<div class="longLine">
<img src="./assets/images/line2.png" alt />
</div>
<!-- <img :style="{transform: `translateY(${uavData && uavData.gps ? uavData.gps.relativeAlt : 120}%)`}" class="line" src="./assets/images/line.png" alt=""> -->
<div class="text">
<span class>
{{
uavData && uavData.rtk && uavData.rtk.type == 19 && uavData.rtk.isMainSensor ? uavData.rtk.relativeAlt : uavData && uavData.gps ? uavData.gps.relativeAlt : 0
}}
</span>
<span class style="color: black">m</span>
</div>
</div>
<div class="iconBG" v-if="isStatus">
<div class="cp infop cf right50" @click="getInfo" alt />
<div
:class="type == 4 ? 'right17' : 'right23'"
class="cp reset cf iconfont icon-gengxin"
@click="reset"
/>
</div>
<div class="bottom-menu">
<div class="left">
<el-tooltip
v-if="streamSelect.toUpperCase() == 'QINGLIU'"
content="视频信息"
placement="bottom"
:style="isStatus ? 'margin-left:100px' : ''"
>
<img
class="menu-item"
src="./assets/images/info.png"
@click="getInfo"
style="transform: scale(1.4)"
alt
/>
</el-tooltip>
<el-tooltip content="是否启动瞄准镜" placement="bottom" v-if="!isStatus">
<img class="menu-item" src="./assets/images/center.png" @click="showCenterFn" alt />
</el-tooltip>
<el-tooltip
v-if="!isStatus"
:content="
ygisCenterFlag
? `摇杆位于中位 ${(ygValue && ygValue.toFixed(2)) || ''}`
: `摇杆未在中位 ${(ygValue && ygValue.toFixed(2)) || ''}`
"
placement="bottom"
>
<img
:class="ygisCenterFlag ? '' : 'play_ymzw'"
src="./assets/images/ymzw.svg"
class="menu-item"
/>
</el-tooltip>
</div>
<div class="right">
<div class="search mr22" v-if="!isStatus">
<el-select class="video_type mr24" v-model="streamSelect" placeholder="切换源">
<el-option
v-for="item in streamOptions"
:key="item.label"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<el-select
class="big_type"
v-model="sizeSelect"
placeholder="比例"
@change="changeBig"
>
<el-option
v-for="item in sizeOptions2"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div class="pointer iconfont icon-gengxin cf f16 mr40 menu-item" @click="reset"></div>
<!-- FPV切换 -->
<el-tooltip content="模式切换" placement="bottom">
<div
v-if="streamSelect.toUpperCase() !== 'QINGLIU'"
class="cp pa iconfont icon-moshiqiehuan cf modelStyle menu-item"
@click="change"
></div>
</el-tooltip>
<div
class="pointer iconfont icon-quanping cf mr3 f16 menu-item"
@click="screen"
v-if="!isStatus"
></div>
</div>
</div>
<div class="right-menu">
<el-tooltip content="拍照" placement="bottom">
<div class="menu-item plate" @click="photojz">
<img src="./assets/images/ai.png" />
</div>
</el-tooltip>
<el-tooltip content="AI识别" placement="bottom">
<div class="menu-item ai" @click="aiVisible = !aiVisible">
<img src="./assets/images/car.png" />
</div>
</el-tooltip>
<el-tooltip v-if="!record" content="开始录像" placement="bottom">
<div class="record menu-item" @click="getrecord">
<img src="./assets/images/record.png" />
</div>
</el-tooltip>
<el-tooltip v-else content="停止录像" placement="bottom">
<div class="record menu-item" @click="getrecord">
<img src="./assets/images/stop.png" />
</div>
</el-tooltip>
<el-tooltip content="截图" placement="bottom">
<div class="photojz menu-item" @click="photo">
<img src="./assets/images/photojz.svg" />
</div>
</el-tooltip>
<div class="menu-item" @click="startLinePoint">
<img src="./assets/images/point_small.svg" />
<!-- <span class="dib f8">航点动作</span> -->
</div>
</div>
<div class="faceAndcar cp pa right140 cf" v-if="aiVisible">
<el-tooltip
v-for="(item,index) in aiIdentifyList"
:key="index"
:content="item.title"
placement="bottom"
>
<div class="cp pa cf" :class="item.class" @click="aiIdentifyType(item.aiType)">
<img class="img_src" :src="item.Img" />
</div>
</el-tooltip>
<el-tooltip content="人脸识别" placement="bottom">
<div class="cp pa plan right28" @click="handle('a')">
<img src="~./assets/images/faceAI2.png" />
</div>
</el-tooltip>
<el-tooltip content="车牌识别" placement="bottom">
<div class="cp pa plan right-11" @click="handle('b')">
<img src="~./assets/images/carAI.png" />
</div>
</el-tooltip>
<el-tooltip content="人流识别" placement="bottom">
<div class="cp pa plan right-50" @click="frame()">
<img src="~./assets/images/trafficAI.png" />
</div>
</el-tooltip>
<el-tooltip content="车流识别" placement="bottom">
<div class="cp pa plan right-88" @click="carFrame()">
<img src="~./assets/images/carAI2.png" />
</div>
</el-tooltip>
</div>
</div>
<PointList
:uavData="uavData"
:mountData="mountDatas"
v-if="pointListFlag"
@close="$parent.pointListFlag = false"
></PointList>
</div>
<!-- <PointList :uavData="uavData" :mountData="mountData" v-if="pointListFlag"></PointList> -->
</div>
<FaceAI v-if="faceAiShow" :uavId="pid" @closeface="faceAiShow = false" />
<CarAI
v-if="carAiShow"
:uavId="device.deviceHardId"
:list="carList"
@closecar="carAiShow = false"
/>
<Traffic v-if="trafficShow" :trafficData="trafficData" @close="trafficShow = false" />
<carTraffic
v-if="cartrafficShow"
:trafficData="cartrafficData"
@close="cartrafficShow = false"
/>
</div>
</template>
<script>
import API from "../../../../api";
import dayjs from "dayjs";
import FaceAI from "./components/faceai";
import CarAI from "./components/carai";
import Traffic from "./components/traffic";
import carTraffic from "./components/carTraffic";
import LiveNVRPlayer from "./components/livenvr/index.vue";
import QingLiuPlayer from "./components/qingliu";
import SRSPlayer from "./components/srs";
import { saveAs } from "file-saver";
import { to_moveMount } from "../../../../utils/to_moveMount.js";
import { newDate } from "../../../../utils/formatDate";
import Obstacle from "./components/obstacle";
import PointList from "./components/pointList";
import videoModelChange from "./components/videoModelChange";
import methods from "./methods";
import fkutils from "./methods/utils";
import Vue from "vue";
const Bus = new Vue();
export default {
name: "Float-Playerfk",
components: {
QingLiuPlayer,
LiveNVRPlayer,
FaceAI,
CarAI,
Traffic,
carTraffic,
PointList,
Obstacle,
SRSPlayer,
videoModelChange,
},
props: {
scheduleData: {
type: Object,
default: () => ({}),
},
mountDatas: {
type: Object,
default: () => ({}),
},
NXdata: {
type: Object,
default: () => {},
},
device: {
type: Object,
default: () => ({}),
},
uavData: {
type: Object,
default: () => ({}),
},
_index: Number,
lineLableName: {
type: String,
default: () => "",
},
keyFlag: {
type: Boolean,
default: () => false,
},
pointListFlag: {
type: Boolean,
default: () => false,
},
},
data() {
return {
aiPopup: null,
timerList: [],
timers: [],
aiNameList: [],
backgroundStyle: {
"background-position-y": 0,
},
aiIdentifyList: [
{
title: "车牌识别",
aiType: 12,
class: "right28 top40",
Img: require("./assets/images/车牌检测.svg"),
},
// {
// title: "绿化带分割",
// aiType: 11,
// class: "right102 top40",
// Img: require("./assets/images/绿化带分割.svg"),
// },
// {
// title: "车道分割线",
// aiType: 10,
// class: "right142 top40",
// Img: require("./assets/images/车道线分割.svg"),
// },
{
title: "车辆类型检测",
aiType: 9,
class: "right66 top40",
Img: require("./assets/images/车辆检测.svg"),
},
// {
// title: "车辆朝向",
// aiType: 8,
// class: "right62 top40",
// Img: require("./assets/images/车辆朝向.svg"),
// },
{
title: "火焰烟雾",
aiType: 7,
class: "right-88 top40",
Img: require("./assets/images/火焰烟雾.svg"),
},
{
title: "异物检测",
aiType: 6,
class: "right-11 top40",
Img: require("./assets/images/异物检测.svg"),
},
{
title: "跌倒检测",
aiType: 5,
class: "right-50 top40",
Img: require("./assets/images/跌倒检测.svg"),
},
{
title: "游泳检测",
aiType: 4,
class: " right66",
Img: require("./assets/images/游泳检测.svg"),
},
],
setIntervalzoom: null,
ygisCenterFlag: false,
ygValue: null,
showCenter: false, //开启瞄准
fuseFlag: true, //清流是否进行视频融合true为融合
controlflag: false, //清流 是否需要画中画主次画面切换,true为切换
record: false,
infoshow: false, //清流视频信息展示
infoData: null, //清流信息
raw_msg: 0,
imgshow: false, //·
imgshowurl: "", //弹出的图片路径
carList: [], //车牌识别结果
aiVisible: false, //打开ai
pid: null,
faceAiShow: false,
carAiShow: false,
trafficShow: false,
cartrafficShow: false,
trafficData: {},
cartrafficData: {},
flag: true,
isPlay: true,
videoFlag: true,
isStatus: false,
big: "",
streamSelect: "", //选择的流
sizeSelect: 2, //选择的大小
sizeOptions2: [
//大小可选项
{
value: 1,
label: "X1",
},
{
value: 2,
label: "X2",
},
{
value: 3,
label: "X3",
},
],
infoflag: false,
mountData: {},
num: {
one: 15,
two: 10,
three: 5,
four: 0,
five: -5,
six: -10,
seven: -15,
},
isInfoShow: false,
osdFlage: true,
AISetInterval: null,
aiLable: "",
aiFlag: false,
ShowCenter: false,
};
},
computed: {
/**
* 播放器组件名
*/
playerCom() {
if (this.stream?.brand) {
switch (this.stream.brand.toLowerCase()) {
case "flv":
return "FLVPlayer";
case "srs":
return "SRSPlayer";
case "livenvr":
return "LiveNVRPlayer";
case "qingliu":
return "QingLiuPlayer";
case "webrtc":
return "WebRtcPlayer";
default:
throw "不支持的播放器品牌!";
}
} else {
if (this.vUrl.vUrl?.includes("pzsp://")) {
return "QingLiuPlayer";
} else {
return "LiveNVRPlayer";
}
}
},
/**
* 流类型名
*/
streamName() {
let find = this.streamOptions.find((item) => {
return item.value === this.streamSelect;
});
return find?.label || "";
},
taskId() {
if (window.location.hash.includes("accident")) {
return this.$store.state.fckernel.YJtaskId;
} else {
return this.$store.state.fckernel.taskId;
}
},
lineInfo() {
return this.$store.state.fckernel.lineInfo;
},
/**
* 网络类型
* @returns 专网 | 公网
*/
networkType() {
// console.log('网络判断', this.device.videos)
let name = "公网";
return name;
},
/**
* 流选项
* @returns [{
value: "RTC",
label: "低延迟"
}]
*/
streamOptions() {
let streamOptions = [];
// this.streamSelect = "hlsUrl";
this.device.streamConfiguration.forEach((item1) => {
item1.streamUrlMessage.forEach((item2) => {
let brand = item1.videoSource?.toUpperCase() || "";
if (item2.streamType === "WEBRTC") {
brand = "SRS";
}
streamOptions.unshift({
label: item2.streamType,
value: item2.streamType,
brand,
url: item2.streamUrl,
// 只有liveNVR支持fpvUrl
fpvUrl: "",
});
});
});
return streamOptions;
},
/**
* 播放的视频流
*/
vUrl() {
let find = this.streamOptions.find(
(item) => item.value === this.streamSelect
);
return {
vUrl: find?.url || "",
};
},
fpvUrl() {
return {
vUrl: "",
};
},
},
watch: {
pointListFlag(val) {
if (val) {
let width = this.$refs.video.clientWidth;
let height = this.$refs.video.clientHeight;
let fullWidth = window.innerWidth;
let fullHeight = window.innerHeight - 100;
let centerX = fullWidth / 2 - width / 2;
let centerY = fullHeight / 2 - height / 2;
this.$refs.wrap.setAttribute("data-x", centerX);
this.$refs.wrap.setAttribute("data-y", centerY);
this.$refs.wrap.setAttribute(
"style",
`transform: translate(${centerX}px, ${50}px)`
);
this.big = "big_02";
}
},
// 获取航点
scheduleData(val) {
console.log("获取航点", val);
let data = {
deviceHardId: this.device.deviceHardId,
mqttType: false,
id: this.device.id,
};
this.lineAi(val, data);
},
NXdata(val) {
if (val.messageID == 2043) {
// console.log(val,"valnx")
if (val.data.osdstatus == "false") {
this.osdFlage = false;
} else {
this.osdFlage = true;
}
}
},
lineLableName(val) {
this.aiFlag = true;
this.aiLable = val;
console.log(val, "lineLableName");
},
"$store.state.device.ygisCenterFlag"(val) {
this.ygisCenterFlag = val;
},
"$store.state.device.ygValue"(val) {
this.ygValue = val;
},
"$store.state.device.eo_zoom"(val) {
if (val > 8) {
if (this.setIntervalzoom) {
clearInterval(this.setIntervalzoom);
}
this.setIntervalzoom = setInterval(() => {
this.frame();
}, 3000);
}
},
device: function (val) {
this.clearInter();
console.log(val, "deviceval");
},
infoData: function () {
// this.qoeInform(this.raw_msg);
},
raw_msg: function (newval1) {
// this.qoeInform(this.raw_msg);
},
uavData: function (newval) {
let data = {
data: {
messageID: 1043,
data: {},
},
type: 528,
};
let gps = null;
if (
newval &&
newval.rtk &&
newval.rtk.type == 19 &&
newval.rtk.isMainSensor
) {
gps = newval.rtk;
} else {
gps = newval.gps;
}
if (!gps) {
return;
}
this.backgroundStyle = {
"background-position-y": gps.relativeAlt + "px",
};
this.num.one = Number(gps.relativeAlt.toFixed(0)) + 15;
this.num.two = Number(gps.relativeAlt.toFixed(0)) + 10;
this.num.three = Number(gps.relativeAlt.toFixed(0)) + 5;
this.num.four = Number(gps.relativeAlt.toFixed(0)) + 0;
this.num.five = Number(gps.relativeAlt.toFixed(0)) - 5;
this.num.six = Number(gps.relativeAlt.toFixed(0)) - 10;
this.num.seven = Number(gps.relativeAlt.toFixed(0)) - 15;
// }
},
"$store.state.device.move_data": {
handler(value) {
this.mountData = value;
},
deep: true,
},
streamOptions: {
handler(value) {
//当流选项变化时,如果未选择流类型,则自动选择第一个流类型
if (this.streamSelect == "" && this.streamOptions.length > 0) {
this.streamSelect = this.streamOptions[0].value;
}
},
deep: true,
immediate: true,
},
streamSelect: function (val) {},
networkType() {
let find = this.streamOptions.find((item) => {
return item.value == this.streamSelect;
});
if (!find) {
this.streamSelect = ""; //网络类型改变时,未有当前选择的流类型, 则重置
}
},
// 结束任务时触发
"$store.state.fckernel.uav_task_status"(val) {
console.log("清除识别点2");
if (val && this.aiPopup) {
// 清除AI识别标记点
this.aiPopup.removeAll();
}
},
deep: true,
},
async mounted() {
window.$uavPlayer = this;
// this.wrapCenter();
//视屏截图
Bus.$on("uav_take_photo", ({ callback }) => {
let blob = this.screenShot();
callback && callback(blob);
});
window.addEventListener("resize", this.fullScreenChangeFn);
},
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
this.ws && this.ws.close();
this.ws = null;
window.removeEventListener("resize", this.fullScreenChangeFn);
},
methods: {
...methods,
...fkutils,
startLinePoint() {
let gps = {};
if (this.uavData) {
if (
this.uavData.rtk &&
this.uavData.rtk.type == 19 &&
this.uavData.rtk.isMainSensor
) {
gps = this.uavData.rtk;
} else {
gps = this.uavData.gps;
}
}
if (this.uavData && gps && gps.relativeAlt > 20) {
this.$emit("startLinePoint");
} else {
this.$message.warning("当前高度不可创建航点动作!");
}
},
setAll() {
let data = {
deviceHardId: this.device.deviceHardId,
mqttType: false,
};
this.timers.forEach((val) => {
data.aiType = val;
this.lineAi(this.scheduleData, data);
});
},
async checkUseOperateFn(device) {
// 查看是否有控制权限
let res = await API.FCKERNEL.checkUseOperate({ deviceHardId: device });
if (res.code == 201) {
this.$message.warning(res.msg);
return false;
} else {
return true;
}
},
getUavInfo() {
this.isInfoShow = !this.isInfoShow;
},
//OSD无人机信息
async getOSD() {
let res = await this.checkUseOperateFn(this.device.deviceHardId);
if (!res) {
return false;
}
this.osdFlage = !this.osdFlage;
let data = null;
if (this.osdFlage) {
data = {
data: {
messageID: 1042,
data: {
status: "true",
},
},
type: 528,
};
this.$message.success("开启OSD");
} else {
data = {
data: {
messageID: 1042,
data: {
status: "false",
},
},
type: 528,
};
this.$message.success("关闭OSD");
}
console.log(data, "data---eeeeeeeee");
this.$emit("fn", data);
},
setFlyInfo() {
if (
this.device.anotherName &&
this.device.anotherName.indexOf("-") > -1
) {
let arr = this.device.anotherName.split("-");
this.device.ername = arr[0];
this.device.sanname = arr[1];
} else {
this.device.ername = this.device.anotherName;
}
let nxdata = {
city: "盐城市",
county: this.device.ername,
// "policeStation":this.device.sanname || '',
flyname: this.device.name,
};
if (this.device.sanname) {
nxdata.policeStation = this.device.sanname;
}
let data = {
data: {
messageID: 1041,
data: nxdata,
},
type: 528,
};
this.$emit("fn", data);
},
// entryCross(val){
// let data = {
// data: {
// messageID: 1036,
// data: {
// streamInputType: 1,
// "line-crossing-Entry": val.entryAll,
// "line-crossing-Exit": val.crossAll,
// "line-crossing-classId": "0;1;2;3",
// "line-crossing-enable": 1,
// classList: [
// {
// className: "person",
// classID: 0,
// },
// {
// className: "car",
// classID: 1,
// },
// ],
// },
// },
// type: 528,
// };
// console.log(data,"entry");
// this.$emit("fn", data);
// },
setAiMessage() {
let data = {
data: {
messageID: 1036,
data: {
streamInputType: 1,
"line-crossing-Entry": "1200;50;1200;800;120;360;1800;360;",
"line-crossing-Exit": "1000;830;1000;90;120;400;1830;400;",
"line-crossing-classId": "0;1;2;3",
"line-crossing-enable": 1,
classList: [
{
className: "person",
classID: 0,
},
{
className: "car",
classID: 1,
},
],
},
},
type: 528,
};
this.$emit("fn", data);
let data2 = {
data: {
messageID: 1037,
data: {},
},
type: 528,
};
this.$emit("fn", data2);
},
qoeInform(raw_msg) {
let { infoData } = this;
let {
deviceHardId,
udpStatus,
cateId,
cateName,
deviceName,
flightState,
goodsName,
reportStatus,
socketStatus,
state,
stationType,
store,
firmId,
firmName,
} = this.device;
let data = {
uavId: deviceHardId,
udpStatus,
cateId,
cateName,
deviceName,
flightState,
goodsName,
reportStatus,
socketStatus,
state,
stationType,
store,
firmId,
firmName,
info: {
bitrate: raw_msg ? raw_msg / 1000 + "kbps" : "0kbps",
venc_avg: infoData ? infoData.venc_avg / 1000 + "ms" : "0ms",
venc_last: infoData ? infoData.venc_last / 1000 + "ms" : "0ms",
pushrtt_avg: infoData ? infoData.pushrtt_avg[0] / 1000 + "ms" : "0ms",
pushrtt_last: infoData
? infoData.pushrtt_last[0] / 1000 + "ms"
: "0ms",
recvrtt_avg: infoData ? infoData.recvrtt_avg[0] / 1000 + "ms" : "0ms",
recvrtt_last: infoData
? infoData.recvrtt_last[0] / 1000 + "ms"
: "0ms",
pushretrans_avg: infoData
? (infoData.pushretrans_avg[0] * 0.1).toFixed(2) + "%"
: "0%",
pushretrans_last: infoData
? (infoData.pushretrans_last[0] * 0.1).toFixed(2) + "%"
: "0%",
recvretrans_avg: infoData
? (infoData.recvretrans_avg[0] * 0.1).toFixed(2) + "%"
: "0%",
recvretrans_last: infoData
? (infoData.recvretrans_last[0] * 0.1).toFixed(2) + "%"
: "0%",
vdec: infoData ? infoData.vdec / 1000 + "ms" : "0ms",
vbuffer: infoData ? infoData.vbuffer / 1000 + "ms" : "0ms",
},
};
API.QINGLIU.qoeInform(data);
},
videoModelChangeFn(streamData) {
this.$emit("fn", streamData);
},
showCenterFn() {
this.ShowCenter = !this.ShowCenter;
},
async VideoModelChange() {
let res = await API.FCKERNEL.checkUseOperate({
deviceHardId: this.device.deviceHardId,
});
if (res.code == 201) {
this.$message.warning(res.msg);
return false;
} else {
console.log(1111);
}
},
getInfo() {
this.infoshow = !this.infoshow;
},
async change() {
this.videoFlag = !this.videoFlag;
},
//监听屏幕是否全屏
fullScreenChangeFn(e) {
if (window.screen.height - window.document.body.offsetHeight > 5) {
this.infoflag = false;
} else {
this.infoflag = true;
}
},
close(data) {
this.$emit("close", data);
},
screen() {
if (this.playerCom === "LiveNVRPlayer") {
this.infoflag = !this.infoflag;
this.$refs.player.init(this.infoflag);
} else {
this.infoflag = !this.infoflag;
this.$refs.player.fullScreen(this.infoflag);
}
},
play() {
if (this.playerCom === "LiveNVRPlayer") {
this.$refs.player.$refs["livePlayer"].pause();
this.isPlay = false;
}
},
pause() {
if (this.playerCom === "LiveNVRPlayer") {
this.$refs.player.$refs["livePlayer"].play();
this.isPlay = true;
}
},
async reset() {
this.flag = false;
this.$nextTick(() => {
this.flag = true;
});
// if (this.taskId) {
// let dataRun = {
// taskId: this.taskId,
// typeId: 3,
// deviceId: this.device.id
// };
// let run = await API.FCKERNEL.saveDeviceRunMonitorLog(dataRun);
// }
},
changeBig(id) {
this.big = "big_0" + id;
this.wrapCenter();
},
//车流密度
async carFrame() {
this.carFlow(this.device.deviceHardId);
},
//人流密度
async frame() {
this.flow(this.device.deviceHardId);
},
/**
* 截图
*/
screenShot() {
return this.$refs.player.screenShot();
},
async getrecord() {
if (!this.keyFlag) return this.$message.error("录像失败,NX通信异常!");
this.recordNX(this.device.id, this.streamSelect, 0);
},
async photojz() {
console.log(11111);
if (!this.keyFlag) return this.$message.error("拍照失败,NX通信异常!");
this.photoNX(this.device.id, this.streamSelect, 0);
},
clearInter() {
clearInterval(this.AISetInterval);
},
//游泳识别
async aiIdentifyType(aiType) {
const data = {
deviceHardId: this.device.deviceHardId,
mqttType: true,
aiType,
id: this.device.id,
};
this.aiIdentify(data, true);
},
async photoGuide() {
// if (!this.taskId) {
// this.$message.error("暂无任务!");
// return;
// }
let blob = this.screenShot();
console.log(blob, "blob");
saveAs(blob, "交通拍照.png");
let fd = new FormData();
fd.append("uploadFile", blob, `拍照.png`);
if (this.taskId) {
fd.append("taskId", this.taskId);
}
fd.append("deviceHardId", this.device.deviceHardId);
let res = await API.FCKERNEL.Upload(fd);
if (this.taskId) {
let dataRun = {
taskId: this.taskId,
typeId: 1,
deviceId: this.device.id,
};
// 运行日志
let run = await API.FCKERNEL.saveDeviceRunMonitorLog(dataRun);
}
console.log(this.uavData);
let { latitude, longitude } = this.uavData.locationCoordinate3D;
console.log(this.uavData, "uavData");
let address = await API.MAP.AiRegeo({
location: `${longitude},${latitude}`,
});
let addr =
address.province.value +
address.city.value +
address.dist.value +
address.road.roadname +
address.poi;
this.$message.success("截图成功!");
let imgshowurl = process.env.VUE_APP_IMG_URL + "/uploads" + res.fileKey;
const img = "opt/uploads" + res.fileKey;
if (this.taskId) {
await API.FCKERNEL.addTrafficTrouble({
images: img,
taskId: this.taskId,
types: 0,
position: addr || "",
arrivalTime: dayjs().format("YYYY/MM/DD hh:mm:ss"),
});
}
this.$emit("imgUrl", imgshowurl);
},
async photo() {
// this.device.id,
this.photoSelf(this.device.deviceHardId);
},
// 人脸车牌识别
handle(command) {
// this.getcanvas(command);
this.getcanvasFaceCar(command, this.device.deviceHardId, this.device.id);
},
/**
* 居中
*/
wrapCenter() {
console.log(this.$refs.video, "this.$refs.video");
this.$nextTick(() => {
let width = this.$refs.video.clientWidth;
let height = this.$refs.video.clientHeight;
let fullWidth = window.innerWidth;
let fullHeight = window.innerHeight - 100;
let centerX = fullWidth / 2 - width / 2;
let centerY = fullHeight / 2 - height / 2;
this.$refs.wrap.setAttribute("data-x", centerX);
this.$refs.wrap.setAttribute("data-y", centerY);
this.$refs.wrap.setAttribute(
"style",
`transform: translate(${centerX}px, ${centerY}px)`
);
});
},
/**
* 视频指点
*/
async fn(el) {
// let mountData =this.$store.state.device.move_data
let { device, mountData } = this;
// if mountStatus =1 代表启用 屏幕指点功能
if (
mountData.mountStatus == 1 &&
device.deviceHardId == mountData.deviceHardId &&
mountData.moveType == "wrj"
) {
let evt = window.event || el;
var div = null;
if (this.streamSelect == "QingLiu") {
// div = document.getElementById("canvas_layer0") ;
div = document.getElementsByClassName("qingliu")[0];
} else {
div = document.getElementsByClassName("vjs-tech")[0];
}
let data = {
x: (evt.offsetX * 1920) / div.offsetWidth - 960,
y: -((evt.offsetY * 1080) / div.offsetHeight) + 540,
w: 1920,
h: 1080,
};
let buffer = null;
// console.log(evt.offsetX,"fndata");
if (mountData.name == "MMC_Gimbal_Z30Pro") {
// z30pro
buffer = await to_moveMount.move_track_focus_ctrl(data.x, data.y);
} else if (mountData.name == "MMC_Gimbal_Z40S") {
//z40s
buffer = await to_moveMount.move_or_focus_ctrl(data);
} else if (
mountData.name == "MMC_Gimbal_Z60S" ||
mountData.name == "MMC_Gimbal_ZT60R"
) {
buffer = await to_moveMount.move_track_focus_ctrl(data.x, data.y, 3);
} else if (mountData.name == "DJI_H20T") {
// buffer = await to_moveMount.move_track_focus_ctrl(data.x, data.y, 3);
} else {
buffer = await to_moveMount.gcs_click_coordinates(data);
}
let mounteList = { data: buffer, ...mountData };
if (buffer) {
this.$emit("directiveFn", mounteList);
}
}
},
},
};
</script>
<style lang="scss" scoped>
.noStyle {
opacity: 0.3;
}
.cpt_video {
border: 1px solid #fff;
width: 718px;
height: 450px;
background: #333;
.video {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 99;
.name {
position: absolute;
top: 0;
left: 0;
// width: 122px;
height: 26px;
border-radius: 1px;
line-height: 26px;
text-align: center;
font-size: 16px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #69ceff;
background: rgba(0, 0, 0, 0.4);
}
.type {
position: absolute;
top: 0;
right: 112px;
width: 56px;
height: 26px;
text-align: center;
line-height: 26px;
background: #fc8959;
border-radius: 13px;
opacity: 0.58;
backdrop-filter: blur(6.7px);
font-size: 16px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
}
.types {
position: absolute;
top: 0;
right: 50px;
width: 56px;
height: 26px;
text-align: center;
line-height: 26px;
background: #4d9dff;
border-radius: 13px;
opacity: 0.58;
backdrop-filter: blur(6.67px);
font-size: 16px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
}
.close {
cursor: pointer;
position: absolute;
top: 0;
right: 0;
width: 46px;
height: 26px;
text-align: center;
line-height: 26px;
background: #000000;
border-radius: 1px;
opacity: 0.6;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #ffffff;
}
}
.info {
position: absolute;
top: 0;
left: 0;
z-index: 5;
padding: 0 10px;
padding-top: 30px;
height: calc(100% - 75px);
background: rgba($color: #000000, $alpha: 0.6);
.de {
margin-top: 8px;
display: flex;
color: #fff;
font-size: 14px;
.detail {
margin-left: 8px;
}
}
}
.bottom-menu {
position: absolute;
bottom: 0;
width: 100%;
height: 46px;
background: #000000;
opacity: 0.7;
display: flex;
align-items: center;
justify-content: space-between;
.play_ymzw {
opacity: 0.5;
}
.menu-item {
cursor: pointer;
}
.left {
display: flex;
align-items: center;
gap: 10px;
padding-left: 10px;
}
::v-deep .right {
display: flex;
align-items: center;
gap: 20px;
color: #fff;
padding-right: 20px;
.search {
display: flex;
gap: 20px;
.video_type {
width: 96px;
height: 26px;
}
.big_type {
width: 70px;
height: 26px;
}
.el-input--suffix {
width: 100%;
height: 100%;
.el-input__inner {
width: 100%;
height: 100%;
}
}
.el-input__suffix {
display: flex;
align-items: center;
}
.el-input__inner {
background-color: #02173d;
color: #00aacb;
border: 1px solid #2b56b7;
}
}
}
}
}
.big_01 {
width: 416px;
height: 274px;
}
.big_03 {
width: 1000px;
height: 600px;
}
.big_04 {
top: 0%;
left: 0;
width: 100%;
height: 100%;
}
.ai {
bottom: 53%;
z-index: 1;
}
.plate {
bottom: 80%;
z-index: 1;
}
.record {
bottom: 71%;
z-index: 1;
}
.photojz {
bottom: 62%;
z-index: 1;
img {
width: 36px;
height: 36px;
}
}
.point {
// width: 50px;
// height: 50px;
// // padding: 10px 5px;
// background: rgba(9, 32, 87, 0.7);
// border: 1px solid transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1;
transform: scale(0.76);
bottom: 43.4%;
border-radius: 19px;
}
.full-video ::v-deep {
transform: none !important;
.interact-wrap {
transform: translate(0px, -30px) !important;
}
.interact_wrap_full {
transform: translate(0px, -144px) !important;
}
.cpt_video {
// margin-top: 150px;
position: relative;
left: 0;
top: 0;
width: 100vw;
// height: calc(100vh - 70px);
height: 100vw;
z-index: 0 !important;
}
}
.modelStyle {
bottom: 15px;
right: 28px;
z-index: 3;
font-size: 13px;
}
// position: relative;
.faceAndcar {
z-index: 1;
width: 59px;
bottom: 60%;
display: flex;
justify-content: space-between;
.plan {
// margin-right: 6px;
display: flex;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
// padding: 0 5px;
background: rgba(9, 32, 87, 0.7);
}
.img_src {
background: rgba(9, 32, 87, 0.7);
width: 35px;
height: 35px;
}
}
.kedu {
z-index: 1001;
top: calc(50% - 25%);
left: calc(50% - 25%);
width: 50%;
height: 50%;
position: absolute;
// background: yellow;
background: url("~./assets/images/line.png");
background-size: 100% 100%;
transition: 0.5s;
// overflow-y: hidden;
.num {
position: absolute;
left: -30px;
z-index: 1002;
height: 100%;
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.line {
// transform: translateY(-250px);
position: absolute;
bottom: calc(50%);
width: 100%;
height: 100%;
}
.longLine {
position: absolute;
// top: calc(50% - 25px);
// left: calc(50% - 25px);
width: 100%;
height: 100%;
display: flex;
align-items: center;
img {
width: 100%;
}
}
.text {
position: absolute;
top: calc(50% - 25px);
left: calc(50% + 25px);
width: 75px;
height: 25px;
background: url("~./assets/images/textbg.png") no-repeat;
background-size: 100% 100%;
text-align: center;
line-height: 25px;
color: red;
font-weight: bold;
}
.center {
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
width: 50px;
height: 50px;
}
}
.iconBG {
right: 300px;
height: 35px !important;
padding-top: 5px;
position: fixed;
bottom: 50%;
padding-top: 5px;
border-radius: 20px;
width: 80px;
display: flex;
justify-content: space-evenly;
background-size: 100% 100%;
background-repeat: no-repeat;
background: #409eff;
.reset {
width: 18px;
height: 18px;
margin-top: 7px;
// background: url("./img/img3.png");
// background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 0px;
}
.infop {
width: 20px;
height: 20px;
z-index: 4;
margin-left: 0px;
margin-top: 7px;
background: url("./assets/images/info.png") !important;
background-size: cover !important;
background-repeat: no-repeat;
}
.infop:hover {
transform: scale(1.2);
}
.reset:hover {
transform: scale(1.2);
}
}
.info_isStatus {
position: fixed;
top: 20%;
left: 32%;
display: flex;
background: rgba(9, 32, 87, 0.7);
border-radius: 10px 10px 0 0;
flex-direction: column;
.title_box {
width: 100%;
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
height: 32px;
background: linear-gradient(
180deg,
#9198ff 0%,
rgba(45, 81, 153, 0.45) 40%,
#05091a 100%
);
box-shadow: inset 0px 0px 10px 2px #3f9dff;
border-radius: 10px 10px 0px 0px;
border: 1px solid #427dff;
.title {
display: flex;
align-items: center;
.font {
font-size: 20px;
font-family: YouSheBiaoTiHei;
color: #14faff;
line-height: 26px;
text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
background: linear-gradient(
135deg,
#e3aa77 0%,
#f5cda9 38%,
#f9ecd3 58%,
#fcdbb1 79%,
#edb07a 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.icon-box {
display: flex;
align-items: center;
cursor: pointer;
.iconfont {
font-size: 18px;
color: #00ffff;
margin-right: 4px;
}
.icon-text {
font-family: MicrosoftYaHeiUI;
font-size: 14px;
color: #ccedff;
font-weight: 400;
}
}
}
.content {
padding: 16px;
.de {
margin-top: 8px;
display: flex;
color: #fff;
font-size: 14px;
.detail {
margin-left: 8px;
}
}
}
}
.right-menu {
position: absolute;
right: 10px;
top: 50px;
display: flex;
flex-direction: column;
align-items: center;
.menu-item {
cursor: pointer;
width: 36px;
img {
width: 100%;
}
}
}
</style>
import axios from 'axios';
import API from "../../../../../api";
export default {
interfaceAI(url) {
let blob = this.screenShot();
let data = {
image: null
}
blobToBase64(blob, async (base64DataUrl) => {
data.image = base64DataUrl
let res = await axios.post("http://32.128.6.151:9090/api/inflet/v1/tasks/3b2c435f-0652-418c-82d0-37efed27e9c1/predict", data)
// console.log(res);
console.log(res.data.data,"swiming");
// if(this.indexswim == 10){
if (res.data.data.targets && res.data.data.targets.length > 0) {
clearInterval(this.AISetInterval)
this.AISetInterval = null
// this.$emit("fn", {data: "POSITION",type: 513});
// if (this.lineLableName.includes("河道")) {
this.$emit("AIDialog", true, "当前区域发现疑似游泳人员")
// }
let fd = new FormData();
fd.append("uploadFiles", blob, `下载.jpeg`);
let res2 = await API.MAPMANAGE.fileUpload(fd);
let data2 = {
imageUrl: res2[0].storage,
deviceHardId: this.device.deviceHardId,
jsonData: JSON.stringify(res.data.data)
}
let swimres = await API.FCKERNEL.insertSwimmingMonitor(data2)
// process.env.VUE_APP_IMG_URL +
let imgshowurl = process.env.VUE_APP_IMG_URL + res2[0].url;
this.$emit("imgUrl", imgshowurl,4,JSON.stringify(res.data.data));
}
});
function blobToBase64(blob, callback) {
let reader = new FileReader()
reader.onload = () => {
callback(reader.result)
}
reader.readAsDataURL(blob)
}
},
//人流识别
async setIntervalFrame() {
let blob = this.screenShot();
let fd = new FormData();
fd.append("uploadFiles", blob, `下载.jpeg`);
let res = await API.MAPMANAGE.fileUpload(fd);
let data = {
// imageUrl:"http://32.128.6.52:9000/uploads/2023/05/26/2f183488-ad62-41c2-bb89-736ade5d8f36.png",
imageUrl: res[0].storage,
deviceHardId: this.device.deviceHardId,
};
let res2 = await API.FCKERNEL.crowdDensity(data);
if (res2.total && res2.total > 20) {
clearInterval(this.AISetInterval)
this.AISetInterval = null
this.$emit("fn", {
data: "POSITION",
type: 513
});
this.$emit("AIDialog", true, "当前区域人流聚集")
}
},
}
\ No newline at end of file
import API from "../../../../../api";
import axios from 'axios';
import { Utils } from "../../../../../lib/cesium";
import { zoomTo } from "./zoomTo";
// 识别类型 4 代表游泳 5:跌倒检测 6:异物检测7:火焰烟雾8:车辆朝向9:车辆类型检测 10:车道分割线 11:绿化带分割12:车牌识别
let urlList = {
4: "http://32.128.6.151:9090/api/inflet/v1/tasks/3b2c435f-0652-418c-82d0-37efed27e9c1/predict",
5: "http://32.128.6.151:9090/api/inflet/v1/tasks/f1017eee-bbe2-4b24-bc16-a61c49c52451/predict",
6: "http://32.128.6.151:9090/api/inflet/v1/tasks/8811f0de-8cda-48f1-9e0c-b556ae1b22ee/predict",
7: "http://32.128.6.151:9090/api/inflet/v1/tasks/296c2a65-ed65-428f-a3f8-680747c3e1ef/predict",
8: "http://32.128.6.151:9090/api/inflet/v1/tasks/9d2f312d-c8d1-4e17-bb6c-0149ed77cee4/predict",
9: "http://32.128.6.151:9090/api/inflet/v1/tasks/f971b94f-a63e-4094-aa16-2a5b4ce4e468/predict",
10: "http://32.128.6.151:9090/api/inflet/v1/tasks/aad14687-7a17-46df-b0e4-9664e4e529d9/predict",
11: "http://32.128.6.151:9090/api/inflet/v1/tasks/b27e6ebd-feed-4011-a794-9d8a69b20084/predict",
12: "http://32.128.6.151:9090/api/inflet/v1/tasks/3b96b26d-dfd0-4362-8031-d77c7bfed369/predict"
}
export default {
//机载拍照
async photoNX(id, streamSelect, device, dialogFlag) {
console.log(id, '机载拍照');
/**
* id代表设备id
* streamSelect代表是否为清流
* device代表什么设备,0入云龙1鹰巢
* dialogFlag 为true 不提示拍照成功
*/
let streamData = {
data: {
data: {
videoID: 1,
},
},
type: 528,
}
if (streamSelect == "QingLiu") {
streamData.data.messageID = 1016;
} else {
streamData.data.messageID = 1007;
}
if (device == 1) {
this.$emit("fn", streamData, "wrj");
} else {
this.$emit("fn", streamData);
}
if (!dialogFlag) {
this.$message.success("拍照成功!");
}
// if (this.taskId) {
// let dataRun = {
// taskId: this.taskId,
// typeId: 2,
// deviceId: id,
// };
// let run = await API.FCKERNEL.saveDeviceRunMonitorLog(dataRun);
// }
},
//机载录制
async recordNX(id, streamSelect, device) {
/**
* id代表设备id
* streamSelect代表是否为清流
* device代表什么设备,0入云龙1鹰巢
*/
this.record = !this.record;
if (this.record) {
this.$message.success("开始录像!");
} else {
this.$message.success("停止录像!");
}
let streamData = {
data: {
data: {
taskID: this.taskId,
videoID: 1,
},
},
type: 528,
};
if (streamSelect == "QingLiu") {
streamData.data.messageID = 1017;
streamData.data.data.status = this.record;
} else {
streamData.data.messageID = 1006;
streamData.data.data.recordControl = this.record;
}
if (device == 1) {
this.$emit("fn", streamData, "wrj");
} else {
this.$emit("fn", streamData);
}
// if (this.taskId && this.record) {
// let dataRun = {
// taskId: this.taskId,
// typeId: 25,
// deviceId: id,
// };
// // try {
// // let run = await API.FCKERNEL.saveDeviceRunMonitorLog(dataRun);
// // } catch (error) {
// // console.log(error);
// // }
// }
},
//平台截图
async photoSelf(deviceHardId, flag) {
/**
* id代表设备id
* deviceHardId代表无人机序列号
*/
let blob = this.screenShot();
let fd = new FormData();
fd.append("uploadFile", blob, `拍照.png`);
if (this.taskId) {
fd.append("taskId", this.taskId);
}
fd.append("deviceHardId", deviceHardId);
let res = await API.FCKERNEL.Upload(fd);
// if (this.taskId) {
// let dataRun = {
// taskId: this.taskId,
// typeId: 1,
// deviceId: id,
// };
// let run = await API.FCKERNEL.saveDeviceRunMonitorLog(dataRun);
// }
if (flag) {
this.$message.error("无识别结果,截图已保存到视图库!");
} else {
this.$message.success("截图成功!");
let imgshowurl = process.env.VUE_APP_IMG_URL + "/uploads" + res.fileKey;
this.$emit("imgUrl", imgshowurl);
}
},
// 人脸车牌识别
async getcanvasFaceCar(command, deviceHardId, id) {
/**
* command人脸or车牌,a人脸,b车牌
* id代表设备id
* deviceHardId代表无人机序列号
*/
let blob = this.screenShot();
let fd = new FormData();
fd.append("uploadFiles", blob, `下载.jpeg`);
let res = await API.MAPMANAGE.fileUpload(fd);
if (command == "a") {
this.aiuse(res[0].storage, deviceHardId, id);
} else {
this.plate(res[0].storage, deviceHardId, id);
}
},
getPopup(flag, val) {
let scene = viewer.scene
this.aiPopup = new Cesium.BillboardCollection({
scene,
show: true,
});
this.aiPopup.add({
position: Utils.transformWGS842Cartesian({
lng: Number(this.uavData.locationCoordinate3D.longitude),
lat: Number(this.uavData.locationCoordinate3D.latitude),
alt: Number(this.uavData.locationCoordinate3D.altitude),
}),
image: require(`../assets/images/${flag ? 'aisu' : 'aier'}.png`),
scale: 1,
width: 54,
height: 89,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
horizontalOrigin: Cesium.VerticalOrigin.CENTER,
id: 258,//字444444
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
0,
2.2e5
),
scaleByDistance: new Cesium.NearFarScalar(2.5e4, 0.7, 2.2e7, 0),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
});
scene.primitives.add(this.aiPopup);
},
// 人脸
async aiuseV2(url, deviceHardId, single, aiData) {
let data = {
imageUrl: url,
deviceHardId: deviceHardId,
};
if (aiData) {
//区域识别
let res = await API.AIUSE.aiphoto(data);
if (res.code == 200) {
let datapid = {
aiFacePid: res.pid,
};
let resFace = await API.AIUSE.getFaceuavvideoMsg(datapid);
for (let i = 0; i < resFace.length; i++) {
if (resFace[i].idCard == aiData.faceData.id) {
this.$emit("fn", {
data: "POSITION",
type: 513
});
// this.$emit("AIDialog", true, "当前位置识别到人");
this.getPopup(true)
this.pid = res.pid;
this.faceAiShow = true;
}
}
} else {
if (single) {
this.getPopup(false)
}
}
} else {
let res = await API.AIUSE.aiphoto(data);
if (res.code == 200) {
this.$emit("fn", {
data: "POSITION",
type: 513
});
this.$emit("AIDialog", true, "当前位置识别到人");
this.getPopup(true)
this.pid = res.pid;
this.faceAiShow = true;
} else {
if (single) {
this.getPopup(false)
}
}
}
},
// 车牌
async plateV2(url, deviceHardId, single, aiData) {
let data = {
imgUrl: url,
deviceHardId: deviceHardId,
};
if (aiData) {
//区域识别
let res = await API.AIUSE.palteId(data);
if (res.code == 200) {
res.data.forEach(val => {
if (val.plateNum == aiData.carData.carnum) {
this.$emit("fn", {
data: "POSITION",
type: 513
});
// this.$emit("AIDialog", true, "当前位置识别到车辆");
this.getPopup(true)
this.carList = res.data;
this.carAiShow = true;
}
})
} else {
if (single) {
this.getPopup(false)
}
}
} else {
let res = await API.AIUSE.palteId(data);
if (res.code == 200) {
this.$emit("fn", {
data: "POSITION",
type: 513
});
this.$emit("AIDialog", true, "当前位置识别到车辆");
this.getPopup(true)
this.carList = res.data;
this.carAiShow = true;
} else {
if (single) {
this.getPopup(false)
}
}
}
},
//人流识别
async flowV2(url, deviceHardId, single) {
let data = {
imageUrl: url,
deviceHardId: deviceHardId,
};
let res2 = await API.FCKERNEL.crowdDensity(data);
if (res2 && res2.total) {
this.$emit("fn", {
data: "POSITION",
type: 513
});
this.$emit("AIDialog", true, "当前位置识别到人群");
this.getPopup(true)
this.trafficShow = true;
this.trafficData = res2;
} else {
if (single) {
this.getPopup(false)
}
}
},
//ai识别
async aiIdentify(aiData, flag, single) {
console.log(aiData,"aiData");
let {
mqttType, //发送数据类型 true 代表无人机 false 代表鹰巢
deviceHardId,
id,
aiType, // 识别类型 4 代表游泳 5:跌倒检测 6:异物检测7:火焰烟雾8:车辆朝向9:车辆类型检测 10:车道分割线
} = aiData
let blob = this.screenShot();
let data = {
image: null,
};
if (aiType > 3) {
blobToBase64(blob, async (base64DataUrl) => {
data.image = base64DataUrl;
// console.log(aiData.aiType,"aiTypeaiTypev");
let res = await axios.post(
urlList[aiType],
data
);
// if(this.indexswim == 10){
if (res.data.data.targets && res.data.data.targets.length > 0) {
// clearInterval(this.AISetInterval);
// this.AISetInterval = null;
this.timerList.forEach(v => {
clearInterval(v)
})
this.timerList = []
// if (aiType == 4) {
if (flag) {
if (aiType != 12) {
this.$message.success("识别成功!")
}
} else {
if (mqttType) {
this.$emit("fn", {
data: "HOLD",
type: 513
}, "wrj");
} else if(!mqttType && aiType != 6) {
// } else {
this.$emit("fn", {
data: "POSITION",
type: 513
});
}
if (aiType == 4) {
this.$emit("AIDialog", true, "当前识别到有人游泳");
} else if (aiType == 5) {
this.$emit("AIDialog", true, "当前识别到有人员跌倒");
} else if (aiType == 6) { //
this.$emit("AIDialog", true, "当前区域识别到异物");
// let deviceTyoe = null
// if (mqttType) {
// deviceTyoe = 0
// } else {
// deviceTyoe = 1
// }
// 识别到异物后机载拍照三张
// stream 视频播放类型 deviceTyoe 代表无人机类型
// let stream = this.$store.state.fckernel.stream
// this.photoNX(id, stream, deviceTyoe, true)
// this.photoNX(id, stream, deviceTyoe, true)
// this.photoNX(id, stream, deviceTyoe, true)
} else if (aiType == 7) {
this.$emit("AIDialog", true, "当前区域识别到烟雾");
}
this.getPopup(true)
}
// }
let fd = new FormData();
fd.append("uploadFiles", blob, `下载.jpeg`);
let res2 = await API.MAPMANAGE.fileUpload(fd);
let carJson = res.data.data//出鬼了,无人机识别车辆没用,鹰巢有用,才写的
if (aiType != 12) {
let data2 = {
aiType: aiType,
imageUrl: res2[0].storage,
deviceHardId: deviceHardId,
jsonData: JSON.stringify(res.data.data),
};
let swimres = await API.FCKERNEL.insertSwimmingMonitor(data2);
} else {
let arr = []
carJson.targets.forEach(val => {
let data = {
plate_detection: null
}
data.plate_detection = {
x: val.bbox.box.left_top_x,
y: val.bbox.box.left_top_y,
w: val.bbox.box.right_bottom_x - val.bbox.box.left_top_x,
h: val.bbox.box.right_bottom_y - val.bbox.box.left_top_y
}
data.plate_number = val.bbox.label
data.imageUrl = res2[0].storage
data.deviceHardId = deviceHardId
arr.push(data)
})
let resCar = await API.FCKERNEL.addPlateInfoByNumber(arr);
// console.log(Array.isArray(resCar),"dfsfaf");
if (Array.isArray(resCar)) {
this.carList = resCar;
this.carAiShow = true;
} else {
this.$message.error(resCar)
}
}
// process.env.VUE_APP_IMG_URL +
let imgshowurl = process.env.VUE_APP_IMG_URL + res2[0].url;
let jsondata = {
jsonData: JSON.stringify(res.data.data)
}
this.$emit("imgUrl", imgshowurl, aiType, jsondata);
} else {
if (single) {
this.getPopup(false)
}
// this.$message.error("无识别结果!")
if (flag) {
this.photoSelf(deviceHardId, true)
}
}
});
} else if (aiType <= 3) {
let fd = new FormData();
fd.append("uploadFiles", blob, `下载.jpeg`);
let res = await API.MAPMANAGE.fileUpload(fd);
if (aiData.spaceFlag) {
if (aiType == 1) {
this.aiuseV2(res[0].storage, deviceHardId, single, aiData.spaceFlag)
} else if (aiType == 2) {
this.plateV2(res[0].storage, deviceHardId, single, aiData.spaceFlag)
} else if (aiType == 3) {
this.flowV2(res[0].storage, deviceHardId, single, aiData.spaceFlag);
}
} else {
if (aiType == 1) {
this.aiuseV2(res[0].storage, deviceHardId, single)
} else if (aiType == 2) {
this.plateV2(res[0].storage, deviceHardId, single)
} else if (aiType == 3) {
this.flowV2(res[0].storage, deviceHardId, single);
}
}
}
function blobToBase64(blob, callback) {
let reader = new FileReader();
reader.onload = () => {
callback(reader.result);
};
reader.readAsDataURL(blob);
}
},
async aiIdentify_zd(aiData, flag, single) {
let flightMode = this.$store.state.shoudong.Mstate
if (flightMode != '航线模式') {
return false
}
let {
mqttType, //发送数据类型 true 代表无人机 false 代表鹰巢
deviceHardId,
id,
aiType, // 识别类型 4 代表游泳 5:跌倒检测 6:异物检测7:火焰烟雾8:车辆朝向9:车辆类型检测 10:车道分割线
} = aiData
let blob = this.screenShot();
let data = {
image: null,
};
if (aiType > 3) {
blobToBase64(blob, async (base64DataUrl) => {
data.image = base64DataUrl;
// console.log(aiData.aiType,"aiTypeaiTypev");
let res = await axios.post(
urlList[aiType],
data
);
// if(this.indexswim == 10){
if (res.data.data.targets && res.data.data.targets.length > 0) {
// clearInterval(this.AISetInterval);
// this.AISetInterval = null;
this.timerList.forEach(v => {
clearInterval(v)
})
this.timerList = []
// if (aiType == 4) {
if (flag) {
if (aiType != 12) {
this.$message.success("识别成功!")
}
} else {
if (mqttType) {
this.$emit("fn", {
data: "HOLD",
type: 513
}, "wrj");
} else if(!mqttType && aiType != 6) {
this.$emit("fn", {
data: "POSITION",
type: 513
});
}
if (aiType == 4) {
this.$emit("AIDialog", true, "当前识别到有人游泳");
} else if (aiType == 5) {
this.$emit("AIDialog", true, "当前识别到有人员跌倒");
} else if (aiType == 6) { //
// this.$emit("AIDialog", true, "当前区域识别到异物");
this.$emit("continue")
// let deviceTyoe = null
// if (mqttType) {
// deviceTyoe = 0
// } else {
// deviceTyoe = 1
// }
// // 识别到异物后机载拍照三张
// // stream 视频播放类型 deviceTyoe 代表无人机类型
// let stream = this.$store.state.fckernel.stream
// this.photoNX(id, stream, deviceTyoe, true)
// this.photoNX(id, stream, deviceTyoe, true)
// this.photoNX(id, stream, deviceTyoe, true)
} else if (aiType == 7) {
this.$emit("AIDialog", true, "当前区域识别到烟雾");
}
this.getPopup(true)
}
// }
let fd = new FormData();
fd.append("uploadFiles", blob, `下载.jpeg`);
let res2 = await API.MAPMANAGE.fileUpload(fd);
let carJson = res.data.data//出鬼了,无人机识别车辆没用,鹰巢有用,才写的
if (aiType != 12) {
let data2 = {
aiType: aiType,
imageUrl: res2[0].storage,
deviceHardId: deviceHardId,
jsonData: JSON.stringify(res.data.data),
};
let swimres = await API.FCKERNEL.insertSwimmingMonitor(data2);
} else {
let arr = []
carJson.targets.forEach(val => {
let data = {
plate_detection: null
}
data.plate_detection = {
x: val.bbox.box.left_top_x,
y: val.bbox.box.left_top_y,
w: val.bbox.box.right_bottom_x - val.bbox.box.left_top_x,
h: val.bbox.box.right_bottom_y - val.bbox.box.left_top_y
}
data.plate_number = val.bbox.label
data.imageUrl = res2[0].storage
data.deviceHardId = deviceHardId
arr.push(data)
})
let resCar = await API.FCKERNEL.addPlateInfoByNumber(arr);
// console.log(Array.isArray(resCar),"dfsfaf");
if (Array.isArray(resCar)) {
this.carList = resCar;
this.carAiShow = true;
} else {
this.$message.error(resCar)
}
}
// process.env.VUE_APP_IMG_URL +
let imgshowurl = process.env.VUE_APP_IMG_URL + res2[0].url;
let jsondata = {
jsonData: JSON.stringify(res.data.data)
}
this.$emit("imgUrl", imgshowurl, aiType, jsondata);
} else {
if (single) {
this.getPopup(false)
}
// this.$message.error("无识别结果!")
if (flag) {
this.photoSelf(deviceHardId, true)
}
}
});
} else if (aiType <= 3) {
let fd = new FormData();
fd.append("uploadFiles", blob, `下载.jpeg`);
let res = await API.MAPMANAGE.fileUpload(fd);
if (aiData.spaceFlag) {
if (aiType == 1) {
this.aiuseV2(res[0].storage, deviceHardId, single, aiData.spaceFlag)
} else if (aiType == 2) {
this.plateV2(res[0].storage, deviceHardId, single, aiData.spaceFlag)
} else if (aiType == 3) {
this.flowV2(res[0].storage, deviceHardId, single, aiData.spaceFlag);
}
} else {
if (aiType == 1) {
this.aiuseV2(res[0].storage, deviceHardId, single)
} else if (aiType == 2) {
this.plateV2(res[0].storage, deviceHardId, single)
} else if (aiType == 3) {
this.flowV2(res[0].storage, deviceHardId, single);
}
}
}
function blobToBase64(blob, callback) {
let reader = new FileReader();
reader.onload = () => {
callback(reader.result);
};
reader.readAsDataURL(blob);
}
},
// 人脸
async aiuse(url, deviceHardId, id) {
let data = {
imageUrl: url,
deviceHardId: deviceHardId,
};
if (id) {
this.$el_message("正在识别中...", () => { }, "info", 0);
}
let res = await API.AIUSE.aiphoto(data);
let dataRun = {
taskId: this.taskId,
deviceId: id,
};
if (res.code == 200) {
if (this.taskId && id) {
dataRun.typeId = 5;
let run = await API.FCKERNEL.saveDeviceRunMonitorLog(dataRun);
}
if (id) {
this.$el_message("识别成功!", () => { }, "success");
}
this.pid = res.pid;
this.faceAiShow = true;
} else if (res.code == 201) {
if (id) {
this.$el_message(res.message, () => { }, "error");
}
if (this.taskId && id) {
dataRun.typeId = 7;
let run = await API.FCKERNEL.saveDeviceRunMonitorLog(dataRun);
}
} else {
if (id) {
this.$el_message(res.message, () => { }, "error");
}
if (this.taskId && id) {
dataRun.typeId = 6;
let run = await API.FCKERNEL.saveDeviceRunMonitorLog(dataRun);
}
}
},
// 车牌
async plate(url, deviceHardId, id) {
let data = {
imgUrl: url,
deviceHardId: deviceHardId,
};
if (id) {
this.$el_message("正在识别中...", () => { }, "info", 0);
}
let res = await API.AIUSE.palteId(data);
let dataRun = {
taskId: this.taskId,
deviceId: id,
};
if (res.code == 200) {
if (this.taskId && id) {
dataRun.typeId = 8;
let run = await API.FCKERNEL.saveDeviceRunMonitorLog(dataRun);
}
if (id) {
this.$el_message("识别完成", () => { }, "success");
}
this.carList = res.data;
this.carAiShow = true;
} else if (res.code == 201) {
if (id) {
this.$el_message(res.message, () => { }, "error");
}
if (this.taskId && id) {
dataRun.typeId = 10;
let run = await API.FCKERNEL.saveDeviceRunMonitorLog(dataRun);
}
} else {
if (id) {
this.$el_message(res.message, () => { }, "error");
}
if (this.taskId && id) {
dataRun.typeId = 9;
let run = await API.FCKERNEL.saveDeviceRunMonitorLog(dataRun);
}
}
},
//车流识别
async carFlow(deviceHardId) {
let blob = this.screenShot();
let fd = new FormData();
fd.append("uploadFiles", blob, `下载.jpeg`);
let res = await API.MAPMANAGE.fileUpload(fd);
let data = {
// imageUrl:"http://32.128.6.52:9000/uploads/2023/12/06/16976801912736.png",
imageUrl: res[0].storage,
deviceHardId: deviceHardId,
};
let res2 = await API.FCKERNEL.carCrowdDensity(data);
// console.log(res2,"SSSSS");
// return
if (res2 && res2.total) {
this.cartrafficShow = true;
this.cartrafficData = res2;
let jsondata = {
jsonData: JSON.stringify(res2.location)
}
this.$emit("imgUrl", process.env.VUE_APP_IMG_URL+res[0].url, 13,jsondata);
}
else {
this.$el_message("识别失败!", () => { }, "error");
}
},
//人流识别
async flow(deviceHardId) {
let blob = this.screenShot();
let fd = new FormData();
fd.append("uploadFiles", blob, `下载.jpeg`);
let res = await API.MAPMANAGE.fileUpload(fd);
let data = {
// imageUrl:"http://32.128.6.52:9000/uploads/2023/05/26/2f183488-ad62-41c2-bb89-736ade5d8f36.png",
imageUrl: res[0].storage,
deviceHardId: deviceHardId,
};
let res2 = await API.FCKERNEL.crowdDensity(data);
// console.log(res2,"SSSSS");
// return
if (res2 && res2.total) {
this.trafficShow = true;
this.trafficData = res2;
let jsondata = {
jsonData: JSON.stringify(res2.data)
}
// this.$emit("imgUrl", res[0].storage, 3,jsondata);
}
else {
this.$el_message("识别失败!", () => { }, "error");
}
},
async mount_angle() {
let mount = this.$store.state.fckernel.mount
let data = {
"type": 514,
"data": {
"mountId": mount.mountId,//挂载ID
"payload": [165, 79, 17, 85, 170, 220, 12, 26, 11, 0, 0, 64, 0, 0, 0, 0, 0, 93, 221]
}
}
this.$emit("fn", data, "wrj");
this.$emit("fn", data, "wrj");
},
CAMERA_ZOOM(data) {
if (data.actions.length > 0) {
data.actions.forEach(item => {
if (item.actionType == "CAMERA_ZOOM") {
let mount = this.$store.state.fckernel.mount
let buffer = zoomTo(item.param2)
let data = {
"type": 514,
"data": {
"mountId": mount.mountId,//挂载ID
"payload": buffer
}
}
this.$emit("fn", data, "wrj");
}
});
}
},
async lineAi(val, aiData) {
let aiDataLine = aiData
let progress = val.waypointIndex
// if(val.isFinish){
if (this.lineInfo.points) {
let data = this.lineInfo.points[progress - 1]
console.log(progress, data, '航点');
// 执行变倍操作
this.CAMERA_ZOOM(data)
// 如果是异物识别挂载调整90°
let yw = data.ailist.filter(item => item.id == 6)
if (yw && yw[0].switch) {
this.mount_angle()
//如果是异物识别挂载调整90°
val.isFinishAction = true
console.log('挂载调整90°');
}
let timer = null
if (val.isFinishAction) {
console.log(data.ailist, 'data.ailist');
if (data.ailist) {
console.log(this.aiPopup, 'this.aiPopup-----');
if (!this.aiPopup) {
let scene = viewer.scene
this.aiPopup = new Cesium.BillboardCollection({
scene,
show: true,
});
this.aiPopup.add({
position: Utils.transformWGS842Cartesian({
lng: Number(this.uavData.locationCoordinate3D.longitude),
lat: Number(this.uavData.locationCoordinate3D.latitude),
alt: Number(this.uavData.locationCoordinate3D.altitude),
}),
image: require("../assets/images/aiing.png"),
scale: 1,
width: 54,
height: 89,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
horizontalOrigin: Cesium.VerticalOrigin.CENTER,
id: 258,//字444444
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
0,
2.2e5
),
scaleByDistance: new Cesium.NearFarScalar(2.5e4, 0.7, 2.2e7, 0),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
});
scene.primitives.add(this.aiPopup);
this.$emit("getAiPopup", this.aiPopup)
}
data.ailist.forEach(item => {
console.log(item.check, 'item.check');
if (item.check) {
aiDataLine.aiType = item.id
if (this.lineInfo.carData || this.lineInfo.faceData) {
aiDataLine.spaceFlag = true
aiDataLine.carData = this.lineInfo.carData
aiDataLine.faceData = this.lineInfo.faceData
} else {
aiDataLine.spaceFlag = false
}
this.aiIdentify(aiDataLine, false, true)
} else if (!item.check && item.switch) {
if (this.timers.indexOf(item.id) == -1) {
timer = setInterval(() => {
this.aiIdentify_zd(aiDataLine, false)
}, 300);
this.timers.push(item.id)
this.timerList.push(timer)
} else {
aiDataLine.aiType = item.id,
timer = setInterval(() => {
this.aiIdentify_zd(aiDataLine, false)
}, 300);
this.timerList.push(timer)
}
} else if (!item.switch && item.history) {
console.log('结束航点');
let num = this.timers.indexOf(item.id)
// console.log(num,"mmmm");
if (this.timers.indexOf(item.id) > -1) {
this.timers.splice(num, 1)
clearInterval(this.timerList[num])
this.timerList.splice(num, 1)
// console.log(this.timerList,"222");
}
}
})
}
}
}
}
// }
}
\ No newline at end of file
//CRC 校验表
var crc_table = new Array(
0x00, 0x31, 0x62, 0x53, 0xc4, 0xf5, 0xa6, 0x97, 0xb9, 0x88, 0xdb, 0xea, 0x7d, 0x4c, 0x1f, 0x2e,
0x43, 0x72, 0x21, 0x10, 0x87, 0xb6, 0xe5, 0xd4, 0xfa, 0xcb, 0x98, 0xa9, 0x3e, 0x0f, 0x5c, 0x6d,
0x86, 0xb7, 0xe4, 0xd5, 0x42, 0x73, 0x20, 0x11, 0x3f, 0x0e, 0x5d, 0x6c, 0xfb, 0xca, 0x99, 0xa8,
0xc5, 0xf4, 0xa7, 0x96, 0x01, 0x30, 0x63, 0x52, 0x7c, 0x4d, 0x1e, 0x2f, 0xb8, 0x89, 0xda, 0xeb,
0x3d, 0x0c, 0x5f, 0x6e, 0xf9, 0xc8, 0x9b, 0xaa, 0x84, 0xb5, 0xe6, 0xd7, 0x40, 0x71, 0x22, 0x13,
0x7e, 0x4f, 0x1c, 0x2d, 0xba, 0x8b, 0xd8, 0xe9, 0xc7, 0xf6, 0xa5, 0x94, 0x03, 0x32, 0x61, 0x50,
0xbb, 0x8a, 0xd9, 0xe8, 0x7f, 0x4e, 0x1d, 0x2c, 0x02, 0x33, 0x60, 0x51, 0xc6, 0xf7, 0xa4, 0x95,
0xf8, 0xc9, 0x9a, 0xab, 0x3c, 0x0d, 0x5e, 0x6f, 0x41, 0x70, 0x23, 0x12, 0x85, 0xb4, 0xe7, 0xd6,
0x7a, 0x4b, 0x18, 0x29, 0xbe, 0x8f, 0xdc, 0xed, 0xc3, 0xf2, 0xa1, 0x90, 0x07, 0x36, 0x65, 0x54,
0x39, 0x08, 0x5b, 0x6a, 0xfd, 0xcc, 0x9f, 0xae, 0x80, 0xb1, 0xe2, 0xd3, 0x44, 0x75, 0x26, 0x17,
0xfc, 0xcd, 0x9e, 0xaf, 0x38, 0x09, 0x5a, 0x6b, 0x45, 0x74, 0x27, 0x16, 0x81, 0xb0, 0xe3, 0xd2,
0xbf, 0x8e, 0xdd, 0xec, 0x7b, 0x4a, 0x19, 0x28, 0x06, 0x37, 0x64, 0x55, 0xc2, 0xf3, 0xa0, 0x91,
0x47, 0x76, 0x25, 0x14, 0x83, 0xb2, 0xe1, 0xd0, 0xfe, 0xcf, 0x9c, 0xad, 0x3a, 0x0b, 0x58, 0x69,
0x04, 0x35, 0x66, 0x57, 0xc0, 0xf1, 0xa2, 0x93, 0xbd, 0x8c, 0xdf, 0xee, 0x79, 0x48, 0x1b, 0x2a,
0xc1, 0xf0, 0xa3, 0x92, 0x05, 0x34, 0x67, 0x56, 0x78, 0x49, 0x1a, 0x2b, 0xbc, 0x8d, 0xde, 0xef,
0x82, 0xb3, 0xe0, 0xd1, 0x46, 0x77, 0x24, 0x15, 0x3b, 0x0a, 0x59, 0x68, 0xff, 0xce, 0x9d, 0xac
);
var control_speed = 20;
var cam_index = 0;
var altitude = 0;
var latitude = 0;
var longitude = 0;
var record_status = 0;
var click_mode_status = 1;
var goteuler2msg = false;
var gotstatus2 = false;
var gotversion = false;
var pitch_move = false;
var yaw_move = false;
var gimbal_mode = 1;
var IAMODE = 0;
var backlight = false;
var defog = false;
var nightmode = false;
var finger_mode = 0;
var photo_last = 0;
var record_last = 0;
var zoom_last = 0;
var gimbal_mode_last = 0;
var camera_mode_last = 0;
var f1_last = 0;
var f2_last = 0;
var f3_last = 0;
var f4_last = 0;
var joint_control_status = 0;
var pitch_last = 0;
var yaw_last = 0;
////////////////////////////////viewpro viewlink protocol for MMC ////////////////////////////////////////////////////////
// viewlink protocol for MMC drone 2020-12
var viewlink_cmdID = {
A1C1E1: 0X30,
A1C1E1S1: 0X32,
A2C2E2: 0X31,
A2C2E2S2: 0X33,
A1: 0X1A,
A2: 0X2A,
C1: 0X1C,
C2: 0X2C,
E1: 0x1E,
E2: 0X2E,
S1: 0X16,
S2: 0X26,
U: 0X01,
V: 0X02,
M_AHRS: 0XB1,
HEART_BEAT: 0X10,
SHAKE_HAND: 0X00,
T1F1B1D1: 0x40,
T2F2B2D2: 0X41,
FW: 0XFF
}
var viewlink_cmdLEN = {
// cmd_DATA_len + 3(len+cmdid+cs)
A1C1E1: 17,
A1C1E1S1: 31,
A2C2E2: 13,
A2C2E2S2: 18,
T1F1B1D1: 44,
T2F2B2D2: 52,
A1: 12,
A2: 5,
C1: 5,
C2: 6,
E1: 6,
E2: 8,
S1: 17,
S2: 8,
U: 5,
V: 5,
M_AHRS: 45,
HEART_BEAT: 4,
SHAKE_HAND: 4,
////FOLLOW CMD NOT +3
T1F1B1D1_DATA: 41,
T2F2B2D2_DATA: 49,
T1_DATA: 22,
F1_DATA: 1,
B1_DATA: 6,
D1_DATA: 12,
T2_DATA: 18,
F2_DATA: 15,
B2_DATA: 11,
D2_DATA: 5
}
var viewlinkheadlen = 3;
var viewlinkFrameLen = {// the position of checksum
A1C1E1: viewlink_cmdLEN.A1C1E1 + viewlinkheadlen,
A1C1E1S1: viewlink_cmdLEN.A1C1E1S1 + viewlinkheadlen,
A2C2E2: viewlink_cmdLEN.A2C2E2 + viewlinkheadlen,
A2C2E2S2: viewlink_cmdLEN.A2C2E2S2 + viewlinkheadlen,
A1: viewlink_cmdLEN.A1 + viewlinkheadlen,
A2: viewlink_cmdLEN.A2 + viewlinkheadlen,
C1: viewlink_cmdLEN.C1 + viewlinkheadlen,
C2: viewlink_cmdLEN.C2 + viewlinkheadlen,
E1: viewlink_cmdLEN.E1 + viewlinkheadlen,
E2: viewlink_cmdLEN.E2 + viewlinkheadlen,
S1: viewlink_cmdLEN.S1 + viewlinkheadlen,
S2: viewlink_cmdLEN.S2 + viewlinkheadlen,
U: viewlink_cmdLEN.U + viewlinkheadlen,
V: viewlink_cmdLEN.V + viewlinkheadlen,
M_AHRS: viewlink_cmdLEN.M_AHRS + viewlinkheadlen,
HEART_BEAT: viewlink_cmdLEN.HEART_BEAT + viewlinkheadlen,
SHAKE_HAND: viewlink_cmdLEN.SHAKE_HAND + viewlinkheadlen,
}
var viewlink_cs_pos = {// the position of checksum
A1C1E1: viewlinkFrameLen.A1C1E1 - 1,
A1C1E1S1: viewlinkFrameLen.A1C1E1S1 - 1,
A2C2E2: viewlinkFrameLen.A2C2E2 - 1,
A2C2E2S2: viewlinkFrameLen.A2C2E2S2 - 1,
A1: viewlinkFrameLen.A1 - 1,
A2: viewlinkFrameLen.A2 - 1,
C1: viewlinkFrameLen.C1 - 1,
C2: viewlinkFrameLen.C2 - 1,
E1: viewlinkFrameLen.E1 - 1,
E2: viewlinkFrameLen.E2 - 1,
S1: viewlinkFrameLen.S1 - 1,
S2: viewlinkFrameLen.S2 - 1,
U: viewlinkFrameLen.U - 1,
V: viewlinkFrameLen.V - 1,
M_AHRS: viewlinkFrameLen.M_AHRS - 1,
HEART_BEAT: viewlinkFrameLen.HEART_BEAT - 1,
SHAKE_HAND: viewlinkFrameLen.SHAKE_HAND - 1,
}
var mmcAddLen = 2;//(len+cs)
var mmcCmdLen = {// the position of checksum
A1C1E1: viewlinkFrameLen.A1C1E1 + mmcAddLen,
A1C1E1S1: viewlinkFrameLen.A1C1E1S1 + mmcAddLen,
A2C2E2: viewlinkFrameLen.A2C2E2 + mmcAddLen,
A2C2E2S2: viewlinkFrameLen.A2C2E2S2 + mmcAddLen,
A1: viewlinkFrameLen.A1 + mmcAddLen,
A2: viewlinkFrameLen.A2 + mmcAddLen,
C1: viewlinkFrameLen.C1 + mmcAddLen,
C2: viewlinkFrameLen.C2 + mmcAddLen,
E1: viewlinkFrameLen.E1 + mmcAddLen,
E2: viewlinkFrameLen.E2 + mmcAddLen,
S1: viewlinkFrameLen.S1 + mmcAddLen,
S2: viewlinkFrameLen.S2 + mmcAddLen,
U: viewlinkFrameLen.U + mmcAddLen,
V: viewlinkFrameLen.V + mmcAddLen,
M_AHRS: viewlinkFrameLen.M_AHRS + mmcAddLen,
HEART_BEAT: viewlinkFrameLen.HEART_BEAT + mmcAddLen,
SHAKE_HAND: viewlinkFrameLen.SHAKE_HAND + mmcAddLen,
}
var mmcHeadLen = 2;
var mmcFrameLen = {// the position of checksum
A1C1E1: mmcCmdLen.A1C1E1 + mmcHeadLen,
A1C1E1S1: mmcCmdLen.A1C1E1S1 + mmcHeadLen,
A2C2E2: mmcCmdLen.A2C2E2 + mmcHeadLen,
A2C2E2S2: mmcCmdLen.A2C2E2S2 + mmcHeadLen,
A1: mmcCmdLen.A1 + mmcHeadLen,
A2: mmcCmdLen.A2 + mmcHeadLen,
C1: mmcCmdLen.C1 + mmcHeadLen,
C2: mmcCmdLen.C2 + mmcHeadLen,
E1: mmcCmdLen.E1 + mmcHeadLen,
E2: mmcCmdLen.E2 + mmcHeadLen,
S1: mmcCmdLen.S1 + mmcHeadLen,
S2: mmcCmdLen.S2 + mmcHeadLen,
U: mmcCmdLen.U + mmcHeadLen,
V: mmcCmdLen.V + mmcHeadLen,
M_AHRS: mmcCmdLen.M_AHRS + mmcHeadLen,
HEART_BEAT: mmcCmdLen.HEART_BEAT + mmcHeadLen,
SHAKE_HAND: mmcCmdLen.SHAKE_HAND + mmcHeadLen,
}
var mmc_cs_pos = {// the position of checksum
A1C1E1: mmcFrameLen.A1C1E1 - 1,
A1C1E1S1: mmcFrameLen.A1C1E1S1 - 1,
A2C2E2: mmcFrameLen.A2C2E2 - 1,
A2C2E2S2: mmcFrameLen.A2C2E2S2 - 1,
A1: mmcFrameLen.A1 - 1,
A2: mmcFrameLen.A2 - 1,
C1: mmcFrameLen.C1 - 1,
C2: mmcFrameLen.C2 - 1,
E1: mmcFrameLen.E1 - 1,
E2: mmcFrameLen.E2 - 1,
S1: mmcFrameLen.S1 - 1,
S2: mmcFrameLen.S2 - 1,
U: mmcFrameLen.U - 1,
V: mmcFrameLen.V - 1,
M_AHRS: mmcFrameLen.M_AHRS - 1,
HEART_BEAT: mmcFrameLen.HEART_BEAT - 1,
SHAKE_HAND: mmcFrameLen.SHAKE_HAND - 1,
}
var FW_data_len = 0;
var viewlink_cmdLEN_FW = FW_data_len + 3;
var viewlinkFrameLen_FW = viewlink_cmdLEN_FW + viewlinkheadlen;
var viewlink_cs_pos_FW = viewlinkFrameLen_FW - 1;
var mmcCmdLen_FW = viewlinkFrameLen_FW + mmcAddLen;
var mmcFrameLen_FW = mmcCmdLen_FW + mmcHeadLen;
var mmc_cs_pos_FW = mmcFrameLen_FW - 1;
var viewlink_cmd_ID_LEN = {
cmdID: viewlink_cmdID.A1,
cmdLEN: viewlink_cmdLEN.A1
}
// A1
var A1_SERVO_STATUS = {
motoroff: 0x00,
manualcontrol: 0x01,
followyaw: 0x03,
homeposition: 0x04,
trackmode: 0x06,
turntorelativeangle: 0x09,
lockyaw: 0x0a,
turntoframeangle: 0x0b,
rcmode: 0x0d,
movetofinger: 0x0E,
noaction: 0x0f,
lookdown: 0x12,
centeryaw: 0x16,
levelpitch: 0x17
}
var A1_PARAM_INT16 = {
PARAM1: 0x0000,
PARAM2: 0x0000,
PARAM3: 0x0000,
PARAM4: 0x0000
}
var A1_CMD = {
server_status: A1_SERVO_STATUS.noaction,
param1: A1_PARAM_INT16.PARAM1,
param2: A1_PARAM_INT16.PARAM2,
param3: A1_PARAM_INT16.PARAM3,
param4: A1_PARAM_INT16.PARAM4
}
var A1_CMD_RC = {
server_status: A1_SERVO_STATUS.noaction,
param1: A1_PARAM_INT16.PARAM1,
param2: A1_PARAM_INT16.PARAM2,
param3: A1_PARAM_INT16.PARAM3,
param4: A1_PARAM_INT16.PARAM4
}
var A1_CMD_MOVE = {
server_status: A1_SERVO_STATUS.noaction,
param1: A1_PARAM_INT16.PARAM1,
param2: A1_PARAM_INT16.PARAM2,
param3: A1_PARAM_INT16.PARAM3,
param4: A1_PARAM_INT16.PARAM4
}
var A1_CMD_ANGLE = {
server_status: A1_SERVO_STATUS.noaction,
param1: A1_PARAM_INT16.PARAM1,
param2: A1_PARAM_INT16.PARAM2,
param3: A1_PARAM_INT16.PARAM3,
param4: A1_PARAM_INT16.PARAM4
}
function A1_to_array(A1_CMD) {
var array = new Array();
array[0] = A1_CMD.server_status;
array[1] = A1_CMD.param1 >> 8;
array[2] = A1_CMD.param1 & 0xff;
array[3] = A1_CMD.param2 >> 8;
array[4] = A1_CMD.param2 & 0xff;
array[5] = A1_CMD.param3 >> 8;
array[6] = A1_CMD.param3 & 0xff;
array[7] = A1_CMD.param4 >> 8;
array[8] = A1_CMD.param4 & 0xff;
return array;
}
////////////////AI END//////////////////////
var viewlink_A2_servo = {
noAction: 0,
yawZeroAdj: 0x08
}
var viewlink_A2_fdctr = {
disable: 0,
enable: 1
}
var viewlink_A2_framecount = {
counter: 0
}
var viewlink_A2_param = {
param1: 0x00
}
var A2_CMD = {
servo: viewlink_A2_servo.noAction,
fdctr: viewlink_A2_fdctr.enable,
framecounter: viewlink_A2_framecount.counter,
param1: viewlink_A2_param.param1
}
function A2_to_array(A2_CMD) {
var array = new Array();
var temp = 0x0;
temp = (A2_CMD.servo & 0x1f) | ((A2_CMD.fdctr & 0x01) << 5) | ((A2_CMD.framecounter & 0x03) << 6);
array[0] = temp & 0xff;
array[1] = A2_CMD.param1;
return array;
}
var C1_VIDEO_SOURCE = {
noaction: 0,
EO: 1,
IR: 2,
EOir: 3,
IReo: 4,
fusion: 5
}
var C1_ZOOM_SPEED = {
noaction: 0,
zoomspeed1: 1,
zoomspeed2: 2,
zoomspeed3: 3,
zoomspeed4: 4,
zoomspeed5: 5,
zoomspeed6: 6,
zoomspeed7: 7
}
var C1_CAM_CTR = {
noaction: 0x0000,
stopfocus: 0x0001,
brightup: 0x0002,
brightdown: 3,
zoomout: 8,
zoomin: 9,
focusout: 0x0a,
focusin: 0x0b,
whitehot: 0x0e,
blackhot: 0x0f,
colorhot: 0x12,
takepicture: 0x13,
startrecord: 0x14,
stoprecord: 0x15,
topicturemode: 0x16,
torecordmode: 0x17,
invertmode: 0x18,
afon: 0x19,
afoff: 0x1a,
irdzoomin: 0x1b,
irdzoomout: 0x1c,
sdcardformat: 0x1d
}
var C1_LRF = {
noaction: 0,
onetimeLRF: 1,
LRFstart: 2,
LRFstart2: 3,
outsynLRF: 4,
stopLRF: 5
}
var C1_CMD = {
videosource: C1_VIDEO_SOURCE.noaction,
zoom_speed: C1_ZOOM_SPEED.speed,
camera_ctrl: C1_CAM_CTR.noaction,
LRFctr: C1_LRF.noaction
}
function C1_to_array(C1_CMD) {
var array = new Array();
var temp = 0x0000;
temp = (C1_CMD.videosource & 0x07) | ((C1_CMD.zoom_speed & 0x07) << 3)
| ((C1_CMD.camera_ctrl & 0x007f) << 6) | ((C1_CMD.LRFctr & 0x07) << 13);
array[0] = (temp >> 8) & 0xff;
array[1] = temp & 0xff;
return array;
}
//////////////////C1 END/////////////////
//////////////////////C2 ////////////////////
var C2_ctrl = {
noaction: 0,
eodzoomon: 6,
eodzoomoff: 7,
eoVEon: 0x10,
eoVEoff: 0x11,
ircolorbaron: 0x12,
ircolorbaroff: 0x13,
eoflipoff: 0x14,
eoflipon: 0x15,
defogon: 0x16,
defogoff: 0x17,
osdon: 0x18,
osdoff: 0x19,
irflipoff: 0x1a,
irflipon: 0x1b,
eoICRon: 0x4a,
eoICRoff: 0x4b,
eozoomto: 0x53,
laserctrl: 0x74
}
var C2_laser_cmd = {
noaction: 0,
laseron: 0X0100,
laseroff: 0X0200,
laserzoomout: 0X0400,
laserzoomin: 0X0500,
synauto: 0X0600,
manulaser: 0X0700
}
var C2_CMD = {
ctrl: C2_ctrl.noaction,
param: C2_laser_cmd.noaction
}
var C2_CMD_ZOOM = {
ctrl: C2_ctrl.eozoomto,
param: 0x0000
};
function C2_to_array(C2_CMD) {
var array = new Array();
array[0] = C2_CMD.ctrl;
array[1] = C2_CMD.param >> 8;
array[2] = C2_CMD.param & 0XFF;
return array;
}
/////////////////////////////////C2 END//////////
//////////////E1 ///////////////////
var E1_tracksource = {
noaction: 0,
eo1: 1,
ir: 2,
eo2: 3
}
var E1_param1 = {
param1: 0x00
}
var E1_ctrl = {
noaction: 0,
stoptrack: 1,
searchobject: 2,
starttrack: 3,
re_track: 4,
ai_detec: 5,
ai_opendetec: 0x01,
ai_closedetec: 0x00,
smalltemplate: 0x21,
middletemplate: 0x22,
bigtemplate: 0x23,
midsmalltemplate: 0x24,
bigmidtemplate: 0x26,
autotemplate: 0x28
}
var E1_param2 = {
param2: 0x00
}
var E1_CMD = {
tracksource: E1_tracksource.noaction,
param1: A1_PARAM_INT16.PARAM1,
ctrl: E1_ctrl.noaction,
param2: E1_param2.param2
}
function E1_to_array(E1_CMD) {
var array = new Array();
var temp = 0x00;
temp = (E1_CMD.tracksource) | (E1_CMD.param1 << 3);
array[0] = temp;
array[1] = E1_CMD.ctrl;
array[2] = E1_CMD.param2;
return array;
}
/////////E1 END /////////////////
var E2_ctr = {
noaction: 0,
fingertracktopos: 0x0a
}
var E2_CMD = {
ctr: E2_ctr.noaction,
param1: 0x0000,
param2: 0x0000
}
function E2_to_array(E2_CMD) {
var array = new Array();
array[0] = E2_CMD.ctr;
array[1] = E2_CMD.param1 >> 8;
array[2] = E2_CMD.param1 & 0xff;
array[3] = E2_CMD.param2 >> 8;
array[4] = E2_CMD.param2 & 0xff;
return array;
}
// var FW_CMD_data = new Array();
/* function FW_to_array(){
var array = new Array();
var i=0;
for(i=0;i< FW_data_len;i++){
array[i] = FW_CMD_data[i];
}
return array;
} */
//viewlink checksum data
function viewlink_checksum(array) {
var checksum = array[3];
var i = 4;
var len = (array[3] & 0x3f) - 2;
while (len--) {
checksum = checksum ^ array[i];
i++;
}
return checksum;
}
function pack_A1(A1CMD) {
var A1_data_array = A1_to_array(A1CMD);//9
var A1pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
A1pack_array[3] = viewlink_cmdLEN.A1; //12
A1pack_array[4] = viewlink_cmdID.A1;
A1_data_array.forEach(function (item) { // 将A1CMD的数据提取出,拼接在A1pack_array
A1pack_array.push(item)
})
A1pack_array[viewlink_cs_pos.A1] = viewlink_checksum(A1pack_array);
return A1pack_array;
}
function pack_C1(C1CMD) {
var C1_data_array = C1_to_array(C1CMD);//9
var C1pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
C1pack_array[3] = viewlink_cmdLEN.C1;
C1pack_array[4] = viewlink_cmdID.C1;
C1_data_array.forEach(function (item) {
C1pack_array.push(item)
})
C1pack_array[viewlink_cs_pos.C1] = viewlink_checksum(C1pack_array);
return C1pack_array;
}
function pack_E1(E1_CMD) {
var E1_data_array = E1_to_array(E1_CMD);//9
var E1pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
E1pack_array[3] = viewlink_cmdLEN.E1;
E1pack_array[4] = viewlink_cmdID.E1;
E1_data_array.forEach(function (item) {
E1pack_array.push(item)
})
E1pack_array[viewlink_cs_pos.E1] = viewlink_checksum(E1pack_array);
return E1pack_array;
}
function pack_S1(S1_CMD) {
var S1_data_array = S1_to_array(S1_CMD);//9
var S1pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
S1pack_array[3] = viewlink_cmdLEN.S1;
S1pack_array[4] = viewlink_cmdID.S1;
S1_data_array.forEach(function (item) {
S1pack_array.push(item)
})
S1pack_array[viewlink_cs_pos.S1] = viewlink_checksum(S1pack_array);
return S1pack_array;
}
function pack_A2(A2_CMD) {
var A2_data_array = A2_to_array(A2_CMD);//9
var A2pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
A2pack_array[3] = viewlink_cmdLEN.A2; //12
A2pack_array[4] = viewlink_cmdID.A2;
A2_data_array.forEach(function (item) {
A2pack_array.push(item)
})
A2pack_array[viewlink_cs_pos.A2] = viewlink_checksum(A2pack_array);
return A2pack_array;
}
function pack_C2(C2_CMD) {
var C2_data_array = C2_to_array(C2_CMD);//9
var C2pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
C2pack_array[3] = viewlink_cmdLEN.C2;
C2pack_array[4] = viewlink_cmdID.C2;
C2_data_array.forEach(function (item) {
C2pack_array.push(item)
})
C2pack_array[viewlink_cs_pos.C2] = viewlink_checksum(C2pack_array);
return C2pack_array;
}
function pack_E2(E2_CMD) {
var E2_data_array = E2_to_array(E2_CMD);//9
var E2pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
E2pack_array[3] = viewlink_cmdLEN.E2;
E2pack_array[4] = viewlink_cmdID.E2;
E2_data_array.forEach(function (item) {
E2pack_array.push(item)
})
E2pack_array[viewlink_cs_pos.E2] = viewlink_checksum(E2pack_array);
return E2pack_array;
}
function pack_S2(S2_CMD) {
var S2_data_array = S1_to_array(S2_CMD);//9
var S2pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
S2pack_array[3] = viewlink_cmdLEN.S2;
S2pack_array[4] = viewlink_cmdID.S2;
S2_data_array.forEach(function (item) {
S2pack_array.push(item)
})
S2pack_array[viewlink_cs_pos.S2] = viewlink_checksum(S2pack_array);
return S2pack_array;
}
function pack_FW(data, len) {
var FW_data_array = data;//9
var FWpack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
var viewlink_cmdLEN_FW = len + 3;
var viewlinkFrameLen_FW = viewlink_cmdLEN_FW + viewlinkheadlen;
var viewlink_cs_pos_FW = viewlinkFrameLen_FW - 1;
FWpack_array[3] = viewlink_cmdLEN_FW;
FWpack_array[4] = viewlink_cmdID.FW;
FW_data_array.forEach(function (item) {
FWpack_array.push(item)
})
FWpack_array[viewlink_cs_pos_FW] = viewlink_checksum(FWpack_array);
return FWpack_array;
}
//////////////A1C1E1 ///////////////
function pack_A1C1E1(A1CMD, C1CMD, E1CMD) {
var A1_array = A1_to_array(A1CMD);//9
var C1_array = C1_to_array(C1CMD);//2
var E1_array = E1_to_array(E1CMD);//3
//var temp_array1 = a1_array.concat(c1_array, e1_array);
var A1C1E1_array = [0x55, 0xaa, 0xdc, 0X11, 0X30];
A1_array.forEach(function (item) {
A1C1E1_array.push(item)
})
C1_array.forEach(function (item) {
A1C1E1_array.push(item)
})
E1_array.forEach(function (item) {
A1C1E1_array.push(item)
})
A1C1E1_array[19] = viewlink_checksum(A1C1E1_array);
return A1C1E1_array;
}
var T1_1_012_LRFsource = {
noObject: 0,
LRFvalue: 1,
altitudevalue: 2,
rfvalue: 3
}
var T1_1_34_signal = {
nosignal: 0,
timelock: 1,
lock2D: 2,
lock3D: 3
}
var T1_1_567_GPS_H_signal = {
data: 1
}
var T1_2_012_GPS_V_signal = {
data: 1
}
var T1_2_3_S2 = {
no: 0,
yes: 1
}
var T1_2_4567_N = {
gyrooffsetadj: 0
}
var T1_CMD = {
B1_bit012: T1_1_012_LRFsource.LRFvalue,
B1_bit34: T1_1_34_signal.nosignal,
B1_bit567: T1_1_567_GPS_H_signal.data,
B2_bit012: T1_2_012_GPS_V_signal.data,
B2_bit3: T1_2_3_S2.no,
B2_bit4567: T1_2_4567_N.gyrooffsetadj,
UAV_latitude: 0x00000000,//1e7
UAV_longitude: 0x00000000,
UAV_altitude: 0x0000,
Target_latitude: 0x00000000,
Target_longitude: 0x00000000,
Target_altitude: 0x0000
}
var T2_2_year = {
year: 2020
}
var T2_2_month = {
month: 12
}
var T2_day = {
day: 12
}
var T2_time = {
time: 0x00000000
}
var T2_CMD = {
byte1res: 0X00,
year: T2_2_year.year,
month: T2_2_month.month,
day: T2_day.day,
time: T2_time.time,
yawGPS: 0x0000,
UAVyaw: 0x0000,
UAVpitch: 0x0000,
UAVroll: 0x0000,
res1516: 0x0000,
res1718: 0x0000
}
var T1F1B1D1_CMD = {
T1data: T1_CMD,
}
var F1_tracksensor = { //跟踪传感器
eo1: 0,
ir: 1,
eo2: 2
}
var F1_trackstatus = { //跟踪状态
stop: 0,
search: 1,
tracking: 2,
lost: 3
}
var F1_CMD = {
tracksource: F1_tracksensor.eo1,
tracksource: F1_tracksensor.ir,
tracksource: F1_tracksensor.eo2,
trackstatus: F1_trackstatus.stop,
trackstatus: F1_trackstatus.search,
trackstatus: F1_trackstatus.tracking,
trackstatus: F1_trackstatus.lost
}
var B1_servo_status = {
motorsw: 0x00,
manualcontrol: 0x01,
followyaw: 0x03,
homeposition: 0x04,
trackmode: 0x06,
turntorelativeangle: 0x09,
lockyaw: 0x0a,
turntoframeangle: 0x0b,
RCcontrol: 0x0d,
fingerto: 0x0e,
error: 0x0f
}
var B1_CMD = {
GIMrollangle_8_11: 0,
servestatus: B1_servo_status.manualcontrol,
GIMrollangle_0_7: 0x00,
GIMrollangle: 0,
GIMyawangle: 0,
GIMpitchangle: 0
}
var D1_CMD = {
SENSOR: 0, //bit0-2
IR_DZOOM: 0,//bit3-6
IR_WHITE_BLACK: 0,//bit7
res: 0x00,
recstatus: 0,// bit0-1
ir_gray_color: 0,//bit2-5
eo_dzoom: 0,//bit6-9
res: 0,//bit10-15
lrf_value: 0,//byte 5-6
v_fov: 0,
h_fov: 0,
eo_zoom: 0
}
var modeltype = 0;
//crc校验字节生成函数
function cal_crc_table(array) {
var crc = 0;
var i = 1;
var len = array[2];
while (len--) {
crc = crc_table[crc ^ array[i]];
i++;
}
return crc;
}
//数据分包发送函数
function package_send(buff, len) {
var i = 0;
var j = 0;
var count = 0;
// var alen = len;
var hexbuf = [];
var sendbuf = [];
if (len % 48 == 0) {
count = parseInt(len / 48, 10);
}
else {
count = parseInt(len / 48, 10) + 1;
}
for (i = 0; i < count; i++) {
if ((count - i) == 1) {
for (j = 0; j < len - i * 48; j++) {
sendbuf[j] = buff[i * 48 + j];
hexbuf[j] = Number(buff[i * 48 + j]).toString(16);
}
return sendbuf
}
else {
for (j = 0; j < 48; j++) {
sendbuf[j] = buff[i * 48 + j];
hexbuf[j] = Number(buff[i * 48 + j]).toString(16);
}
return sendbuf
}
}
}
// EO zoomTo
export function zoomTo(value) {
var zoom = value
var buff = new Array(0xA5, 0x4f, 0x00);
buff[2] = mmcCmdLen.C2;
var zoomRatio = zoom;
C2_CMD_ZOOM.param = zoomRatio * 10;
console.log("zoomRatio:" + zoomRatio);
var buff_arr = pack_C2(C2_CMD_ZOOM);
console.log("buff_arr:" + buff_arr);
buff_arr.forEach(function (item) {
buff.push(item)
})
buff[mmc_cs_pos.C2] = cal_crc_table(buff);
return package_send(buff, mmcFrameLen.C2);
}
......@@ -57,6 +57,7 @@
class="iconfont icon-luxiang_xianxing"
:class="{ active: device.showPlayer }"
title="视频"
@click="showPlayer(device)"
></div>
<div
......@@ -78,6 +79,7 @@
</template>
<script>
import { mapActions } from 'vuex'
export default {
name: "Item",
......@@ -95,7 +97,12 @@ export default {
default: -1
}
},
inject: ["fn"],
computed: {
},
methods: {
...mapActions('MMCFlightControlCenter/uavApplications', ['showPlayer'])
}
};
</script>
......
<template>
<div>
<uavList></uavList>
<UavList></UavList>
<FloatPlayer
class="player"
ref="FloatPlayer"
v-if="uavPlayer"
:pointListFlag="pointListFlag"
@getAiPopup="getAiPopup"
@imgUrl="getimgUrl"
@startLinePoint="startLinePoint"
:scheduleData="scheduleData"
:keyFlag="keyFlag"
:NXdata="NXdata"
@changeLableName="(e) => (lineLableName = e)"
:lineLableName="lineLableName"
:device="uavPlayer"
@AIDialog="(e, val) => getAIDialog(e, val)"
@continue="continueReset"
:videoItem="videoItem"
:showCenter="showCenter"
/>
</div>
</template>
<script>
import uavList from './components/uavList';
import UavList from "./components/uavList";
import FloatPlayer from "./components/float-playerfk";
import { mapState } from "vuex";
export default {
components: {
uavList
}
}
</script>
UavList,
FloatPlayer,
},
data() {
return {
pointListFlag: false,
aiPopup: null, //识别图标
scheduleData: {}, //航线执行进度
keyFlag: false, //NX状态
NXdata: {}, //NX数据
lineLableName: "", //当前航线标签
videoItem: 0,
showCenter: false,
};
},
computed: {
...mapState("MMCFlightControlCenter/uavApplications", ["uav", "uavPlayer"]),
taskId() {
return this.$store.state.fckernel.taskId;
},
YJTaskInfo() {
return this.$store.state.fckernel.YJTaskInfo;
},
lineInfo() {
return this.$store.state.fckernel.lineInfo;
},
uav_mounts() {
let { mounts } = this.uav.control;
return mounts
.map((item) => {
let find_item = this.mount.list.find(
(m) => m.name === item.gimbalName
);
return find_item || undefined;
})
.filter((item) => item);
},
},
created() {
// 等待航线上传成功在执行
// 判断是否以一键任务
/* Bus.$on("off_take", () => {
this.takeOff = true;
}); */
},
mounted() {},
beforeDestroy() {},
methods: {
// 结束任务确认框,确定结束任务
async queding() {
this.$refs.ControlMenu.queding();
this.endRenwu = false;
},
getAiPopup(val) {
this.aiPopup = val;
},
startLinePoint() {
this.pointListFlag = !this.pointListFlag;
if (this.pointListFlag) {
this.pointFlag = true;
setTimeout(() => {
this.pointFlag = false;
}, 1000);
}
},
continueReset() {
setTimeout(() => {
this.resetSwim();
}, 3000);
},
getAIDialog(e, val) {
this.AIFlag = e;
this.aiTitle = val;
setTimeout(() => {
this.resetSwim();
}, 3000);
// this.$refs.P3.$refs.ItemA.text="盐城公安提醒您不私自下水游泳不擅自与他人结伴游泳不在无成年人带领的情况下游泳不到无安全设施无救援人员的水域游泳不到不熟悉的水域游泳不擅自下水施救"
// this.$refs.P3.$refs.ItemA.handleSendTTSText()
},
//检测
resetSwim() {
let data = {
data: "AUTO_MISSION",
type: 513,
};
this.uav_mqtt_fn(data);
// console.log(this.$refs["FloatPlayer"]);
this.AIFlag = false;
setTimeout(() => {
this.$refs["FloatPlayer"][0].setAll();
}, 1000);
},
getcanvas(val, item) {
let data = null;
if (item.jsonData) {
data = JSON.parse(item.jsonData);
} else {
data = item;
}
// let targets = data.targets;
setTimeout(() => {
this.canvas = this.$refs.canvas;
this.canvas.width = 1000;
this.canvas.height = 500;
this.image = new Image();
this.image.src = val;
this.image.onload = () => {
if (this.aiType >= 4 && this.aiType != 13) {
this.drawImage(data.targets);
} else if (this.aiType == 1) {
this.drawImage(data.detections);
} else if (this.aiType == 2) {
this.drawImage(data.aiPlateShiJuResultInfoDtoList);
} else if (this.aiType == 3 || this.aiType == 13) {
this.drawImage(data);
}
};
}, 50);
},
drawImage(list) {
this.ctx = this.canvas.getContext("2d");
this.ctx.drawImage(
this.image,
0,
0,
this.canvas.width,
this.canvas.height
);
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = "red";
if (this.aiType >= 4 && this.aiType != 13) {
list.forEach((targets) => {
let plate_detection = {
x: 0,
y: 0,
h: 0,
w: 0,
};
plate_detection.x =
(this.canvas.width * targets.bbox.box.left_top_x) /
this.image.width;
plate_detection.y =
(this.canvas.height * targets.bbox.box.left_top_y) /
this.image.height;
plate_detection.h =
(this.canvas.height *
(targets.bbox.box.right_bottom_y - targets.bbox.box.left_top_y)) /
this.image.height;
plate_detection.w =
(this.canvas.width *
(targets.bbox.box.right_bottom_x - targets.bbox.box.left_top_x)) /
this.image.width;
this.ctx.strokeRect(
plate_detection.x,
plate_detection.y,
plate_detection.w,
plate_detection.h
);
this.ctx.fillStyle = "rgba(0,0,0,0.8)";
let text =
targets.bbox.label +
":" +
(targets.bbox.prob * 100).toFixed(2) +
"%(相似度)";
let offX = 0;
let offY = 0;
if (plate_detection.x + text.length * 11 > 1000) {
offX = 1000 - text.length * 11;
} else {
offX = plate_detection.x - 5;
}
if (plate_detection.y - 20 < 0) {
offY = plate_detection.y + plate_detection.h;
} else {
offY = plate_detection.y - 22;
}
this.ctx.fillRect(
// plate_detection.x - 5,
offX,
offY,
text.length * 11,
20
);
this.ctx.fillStyle = "white"; // 设置文本颜色
this.ctx.font = "16px Arial"; // 设置文本字体大小和样式
this.ctx.fillText(
text,
// plate_detection.x - 5,
offX,
offY + 15
); // 绘制文本
});
} else if (this.aiType == 1) {
list.forEach((targets) => {
let plate_detection = {
x: 0,
y: 0,
h: 0,
w: 0,
};
plate_detection.x =
(this.canvas.width * targets.x) / this.image.width;
plate_detection.y =
(this.canvas.height * targets.y) / this.image.height;
plate_detection.h =
(this.canvas.height * targets.h) / this.image.height;
plate_detection.w =
(this.canvas.width * targets.w) / this.image.width;
this.ctx.strokeRect(
plate_detection.x,
plate_detection.y,
plate_detection.w,
plate_detection.h
);
this.ctx.fillStyle = "rgba(0,0,0,0.5)";
this.ctx.fillRect(
plate_detection.x - 5,
plate_detection.y - 22,
20,
20
);
this.ctx.fillStyle = "white"; // 设置文本颜色
this.ctx.font = "12px Arial"; // 设置文本字体大小和样式
this.ctx.fillText("人", plate_detection.x - 3, plate_detection.y - 8); // 绘制文本
});
} else if (this.aiType == 2) {
list.forEach((targets) => {
let plate_detection = {
x: 0,
y: 0,
h: 0,
w: 0,
};
plate_detection.x =
(this.canvas.width * targets.yiSaPlateDetection.x) /
this.image.width;
plate_detection.y =
(this.canvas.height * targets.yiSaPlateDetection.y) /
this.image.height;
plate_detection.h =
(this.canvas.height * targets.yiSaPlateDetection.h) /
this.image.height;
plate_detection.w =
(this.canvas.width * targets.yiSaPlateDetection.w) /
this.image.width;
<style>
this.ctx.strokeRect(
plate_detection.x,
plate_detection.y,
plate_detection.w,
plate_detection.h
);
this.ctx.fillStyle = "rgba(0,0,0,0.5)";
this.ctx.fillRect(
plate_detection.x - 5,
plate_detection.y - 22,
60,
20
);
this.ctx.fillStyle = "white"; // 设置文本颜色
this.ctx.font = "12px Arial"; // 设置文本字体大小和样式
this.ctx.fillText(
targets.plateNum,
plate_detection.x - 3,
plate_detection.y - 8
); // 绘制文本
});
} else if (this.aiType == 3) {
list.forEach((targets) => {
let plate_detection = {
x: 0,
y: 0,
h: 0,
w: 0,
};
plate_detection.x =
(this.canvas.width * targets.bbox[0]) / this.image.width;
plate_detection.y =
(this.canvas.height * targets.bbox[1]) / this.image.height;
plate_detection.h =
(this.canvas.height * (targets.bbox[3] - targets.bbox[1])) /
this.image.height;
plate_detection.w =
(this.canvas.width * (targets.bbox[2] - targets.bbox[0])) /
this.image.width;
this.ctx.strokeRect(
plate_detection.x,
plate_detection.y,
plate_detection.w,
plate_detection.h
);
this.ctx.fillStyle = "rgba(0,0,0,0.5)";
this.ctx.fillRect(
plate_detection.x - 5,
plate_detection.y - 22,
20,
20
);
this.ctx.fillStyle = "white"; // 设置文本颜色
this.ctx.font = "16px Arial"; // 设置文本字体大小和样式
this.ctx.fillText("人", plate_detection.x - 3, plate_detection.y - 8); // 绘制文本
});
} else if (this.aiType == 13) {
list.crowdDensityDataList.forEach((targets) => {
let plate_detection = {
x: 0,
y: 0,
h: 0,
w: 0,
};
plate_detection.x =
(this.canvas.width * targets.bbox[0]) / this.image.width;
plate_detection.y =
(this.canvas.height * targets.bbox[1]) / this.image.height;
plate_detection.h =
(this.canvas.height * (targets.bbox[3] - targets.bbox[1])) /
this.image.height;
plate_detection.w =
(this.canvas.width * (targets.bbox[2] - targets.bbox[0])) /
this.image.width;
this.ctx.strokeRect(
plate_detection.x,
plate_detection.y,
plate_detection.w,
plate_detection.h
);
this.ctx.fillStyle = "rgba(0,0,0,0.5)";
let text = targets.desc;
let offX = 0;
let offY = 0;
if (plate_detection.x + text.length * 11 > 1000) {
offX = 1000 - text.length * 11;
} else {
offX = plate_detection.x - 5;
}
if (plate_detection.y - 20 < 0) {
offY = plate_detection.y + plate_detection.h;
} else {
offY = plate_detection.y - 22;
}
this.ctx.fillRect(offX, offY, text.length * 11, 20);
this.ctx.fillStyle = "white"; // 设置文本颜色
this.ctx.font = "11px Arial"; // 设置文本字体大小和样式
this.ctx.fillText(text, offX, offY + 15); // 绘制文本
});
}
},
closeVideo() {
this.$message.warning("无人机已离线!");
this.healthData = {};
this.uav.control.mounts = [];
// this.VideoTomapFlag = false
// this.uav_hide_control(this.uavId)
this.$emit("healthWaringShow", [], false);
this.uav_hide_video(this.uavId);
// this.controlMenuFlag = false
// this.ControlFlag = false
// this.uav_list()
},
getModeStatus(val) {
// console.log(val,"ModeStatus");
this.ModeStatus = val;
},
async addMessage() {
let res = await API.FCKERNEL.exceptionAdd(this.message);
},
showLine(val) {
this.showCenter = val;
},
auto() {
//定点-->航线
//摇杆手动-->自动
this.$refs.ControlMenu.changeAuto();
},
async getimgUrl(val, aiType, item) {
this.aiType = aiType;
this.imgshow = true;
this.imgshowurl = val;
//人流
if (aiType == 3) {
this.aiTotal = item.detectPersonCount;
this.getcanvas(val, item);
}
//车流
if (aiType == 13) {
// this.aiTotal = item.detectPersonCount;
let data = JSON.parse(item.jsonData).label;
console.log(data, "datatat");
let car = "";
let van = "";
let truck = "";
let bus = "";
for (let t in data) {
if (t == "car" && data["car"]) {
car = "小轿车" + data["car"] + "辆";
} else if (t == "truck" && data["truck"]) {
truck = "卡车" + data["truck"] + "辆";
} else if (t == "van" && data["van"]) {
van = "面包车" + data["van"] + "辆";
} else if (t == "bus" && data["bus"]) {
bus = "巴士" + data["bus"] + "辆";
}
}
this.aiTotal = car + truck + van + bus;
this.getcanvas(val, item);
}
//游泳
if (aiType >= 4) {
this.getcanvas(val, item);
}
//人脸
if (aiType == 1 || aiType == 2) {
let data = {
fileKey: item.visitUrl,
aiType: aiType,
};
let res = await API.FCKERNEL.getFaceResultByFileKey(data);
if (aiType == 1) {
this.faceList = res.faceImageInfo?.faceResults;
this.faceShow = true;
this.getcanvas(val, res.faceImageInfo);
} else {
this.carList = res.aiPlateShiJuResultInfoDtoList;
this.carShow = true;
this.getcanvas(val, res);
}
}
},
async qzjg() {
let res = await API.DEVICE.forceTakeOver({
deviceHardId: this.uav.NoticeData.deviceHardId,
});
if (res.code == 200) {
this.$message.success(res.msg);
this.uav.NoticeFlag = false;
}
},
fly_take_off() {
// 等待航线上传成功在执行
this.$refs.TaskListRef.upload_complete();
// Bus.$emit("take_off");
},
getYd() {
this.controlMenuFlag = !this.controlMenuFlag;
if (this.collapseFlag == true) {
// 修改飞控 无人机 左边'任务库'的位置
Bus.$emit("ydh", false);
} else {
Bus.$emit("ydh", true);
}
},
collapseFlagfn() {
this.collapseFlag = !this.collapseFlag;
if (this.collapseFlag == true) {
// 修改飞控 无人机 左边'任务库'的位置
Bus.$emit("ydh", false);
} else {
Bus.$emit("ydh", true);
}
},
Lsdom(item) {
this.$emit("Lsdom", item);
},
clearIdFn() {
if (this.$refs["FloatPlayer"][0]) {
this.$refs["FloatPlayer"][0].clearInter();
}
if (this.$refs.TaskListRef) {
this.$refs.TaskListRef.close();
try {
let deviceHardId = this.uav.control.device.deviceHardId;
// this.uav_hide_airway(this.uav.control.device);
this.uav.online[deviceHardId].positions = [
this.uav.online[deviceHardId].position,
];
} catch (error) {}
}
},
videoItemFn(index) {
this.videoItem = index;
this.$store.commit("mapmanage/SET_MAP_IS_VIDEOITEM", index);
},
LoggerFn() {
this.loggerFlag = !this.loggerFlag;
// this.collapseFlag = false;
},
videoChange() {
this.videoFlag = !this.videoFlag;
},
showTakeOver() {
this.uav.TakeOverFlag = !this.uav.TakeOverFlag;
if (this.uav.TakeOverFlag) {
this.collapseFlag = true;
}
},
// 关闭航线创建列表
AirwayQuit() {
this.isAirwayEdit = false;
// 运行监测关闭
this.powerFlag = true;
this.Videoflag = true;
this.ControlFlag = true;
this.collapseFlag = false;
},
taskTypeFn(item) {
this.taskType = item;
},
// 创建航线
CraeteRoute() {
this.isAirwayEdit = true;
// // 运行监测关闭
this.powerFlag = false;
this.ControlFlag = false;
this.collapseFlag = true;
},
createTaskClick() {
this.CreateTaskFlag = !this.CreateTaskFlag;
this.controlMenuFlag = false;
},
async checkUseOperateFn(device) {
// 查看是否有控制权限
let res = await API.FCKERNEL.checkUseOperate({ deviceHardId: device });
if (res.code == 201) {
this.$message.warning(res.msg);
return false;
} else {
return true;
}
},
/**
* 无人机搜索
*/
onUavSearch() {
this.uav_list(
{
search: this.uavSearchContent,
},
false
);
},
//点击任务按钮
onChangeTask(open) {
if (open === undefined) {
this.controlMenuFlag = !this.controlMenuFlag;
} else {
this.controlMenuFlag = open;
}
},
},
};
</script>
<style lang="scss" scoped>
.player {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
\ No newline at end of file
/**
* covert canvas to image
* and save the image file
*/
var Canvas2Image = function() {
// check if support sth.
var $support = (function() {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d')
return {
canvas: !!ctx,
// @ts-ignore
imageData: !!ctx.getImageData,
dataURL: !!canvas.toDataURL,
btoa: !!window.btoa,
}
})()
var downloadMime = 'image/octet-stream'
function scaleCanvas(canvas, width, height) {
var w = canvas.width,
h = canvas.height
if (width == undefined) {
width = w
}
if (height == undefined) {
height = h
}
var retCanvas = document.createElement('canvas')
var retCtx = retCanvas.getContext('2d')
retCanvas.width = width
retCanvas.height = height
// @ts-ignore
retCtx.drawImage(canvas, 0, 0, w, h, 0, 0, width, height)
return retCanvas
}
function getDataURL(canvas, type, width, height) {
canvas = scaleCanvas(canvas, width, height)
return canvas.toDataURL(type)
}
function saveFile(strData) {
document.location.href = strData
}
function genImage(strData) {
var img = document.createElement('img')
img.src = strData
return img
}
function fixType(type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg')
var r = type.match(/png|jpeg|bmp|gif/)[0]
return 'image/' + r
}
function encodeData(data) {
if (!window.btoa) {
throw 'btoa undefined'
}
var str = ''
if (typeof data == 'string') {
str = data
} else {
for (var i = 0; i < data.length; i++) {
str += String.fromCharCode(data[i])
}
}
return btoa(str)
}
function getImageData(canvas) {
var w = canvas.width,
h = canvas.height
return canvas.getContext('2d').getImageData(0, 0, w, h)
}
function makeURI(strData, type) {
return 'data:' + type + ';base64,' + strData
}
/**
* create bitmap image
* 按照规则生成图片响应头和响应体
*/
var genBitmapImage = function(oData) {
//
// BITMAPFILEHEADER: http://msdn.microsoft.com/en-us/library/windows/desktop/dd183374(v=vs.85).aspx
// BITMAPINFOHEADER: http://msdn.microsoft.com/en-us/library/dd183376.aspx
//
var biWidth = oData.width
var biHeight = oData.height
var biSizeImage = biWidth * biHeight * 3
var bfSize = biSizeImage + 54 // total header size = 54 bytes
//
// typedef struct tagBITMAPFILEHEADER {
// WORD bfType;
// DWORD bfSize;
// WORD bfReserved1;
// WORD bfReserved2;
// DWORD bfOffBits;
// } BITMAPFILEHEADER;
//
var BITMAPFILEHEADER = [
// WORD bfType -- The file type signature; must be "BM"
0x42,
0x4d,
// DWORD bfSize -- The size, in bytes, of the bitmap file
bfSize & 0xff,
(bfSize >> 8) & 0xff,
(bfSize >> 16) & 0xff,
(bfSize >> 24) & 0xff,
// WORD bfReserved1 -- Reserved; must be zero
0,
0,
// WORD bfReserved2 -- Reserved; must be zero
0,
0,
// DWORD bfOffBits -- The offset, in bytes, from the beginning of the BITMAPFILEHEADER structure to the bitmap bits.
54,
0,
0,
0,
]
//
// typedef struct tagBITMAPINFOHEADER {
// DWORD biSize;
// LONG biWidth;
// LONG biHeight;
// WORD biPlanes;
// WORD biBitCount;
// DWORD biCompression;
// DWORD biSizeImage;
// LONG biXPelsPerMeter;
// LONG biYPelsPerMeter;
// DWORD biClrUsed;
// DWORD biClrImportant;
// } BITMAPINFOHEADER, *PBITMAPINFOHEADER;
//
var BITMAPINFOHEADER = [
// DWORD biSize -- The number of bytes required by the structure
40,
0,
0,
0,
// LONG biWidth -- The width of the bitmap, in pixels
biWidth & 0xff,
(biWidth >> 8) & 0xff,
(biWidth >> 16) & 0xff,
(biWidth >> 24) & 0xff,
// LONG biHeight -- The height of the bitmap, in pixels
biHeight & 0xff,
(biHeight >> 8) & 0xff,
(biHeight >> 16) & 0xff,
(biHeight >> 24) & 0xff,
// WORD biPlanes -- The number of planes for the target device. This value must be set to 1
1,
0,
// WORD biBitCount -- The number of bits-per-pixel, 24 bits-per-pixel -- the bitmap
// has a maximum of 2^24 colors (16777216, Truecolor)
24,
0,
// DWORD biCompression -- The type of compression, BI_RGB (code 0) -- uncompressed
0,
0,
0,
0,
// DWORD biSizeImage -- The size, in bytes, of the image. This may be set to zero for BI_RGB bitmaps
biSizeImage & 0xff,
(biSizeImage >> 8) & 0xff,
(biSizeImage >> 16) & 0xff,
(biSizeImage >> 24) & 0xff,
// LONG biXPelsPerMeter, unused
0,
0,
0,
0,
// LONG biYPelsPerMeter, unused
0,
0,
0,
0,
// DWORD biClrUsed, the number of color indexes of palette, unused
0,
0,
0,
0,
// DWORD biClrImportant, unused
0,
0,
0,
0,
]
var iPadding = (4 - ((biWidth * 3) % 4)) % 4
var aImgData = oData.data
var strPixelData = ''
var biWidth4 = biWidth << 2
var y = biHeight
var fromCharCode = String.fromCharCode
do {
var iOffsetY = biWidth4 * (y - 1)
var strPixelRow = ''
for (var x = 0; x < biWidth; x++) {
var iOffsetX = x << 2
strPixelRow +=
fromCharCode(aImgData[iOffsetY + iOffsetX + 2]) +
fromCharCode(aImgData[iOffsetY + iOffsetX + 1]) +
fromCharCode(aImgData[iOffsetY + iOffsetX])
}
for (var c = 0; c < iPadding; c++) {
strPixelRow += String.fromCharCode(0)
}
strPixelData += strPixelRow
} while (--y)
var strEncoded =
encodeData(BITMAPFILEHEADER.concat(BITMAPINFOHEADER)) +
encodeData(strPixelData)
return strEncoded
}
/**
* saveAsImage
* @param canvasElement
* @param {String} image type
* @param {Number} [optional] png width
* @param {Number} [optional] png height
*/
var saveAsImage = function(canvas, width, height, type) {
if ($support.canvas && $support.dataURL) {
if (typeof canvas == 'string') {
canvas = document.getElementById(canvas)
}
if (type == undefined) {
type = 'png'
}
type = fixType(type)
if (/bmp/.test(type)) {
var data = getImageData(scaleCanvas(canvas, width, height))
var strData = genBitmapImage(data)
saveFile(makeURI(strData, downloadMime))
} else {
// @ts-ignore
var strData = getDataURL(canvas, type, width, height)
saveFile(strData.replace(type, downloadMime))
}
}
}
var convertToImage = function(canvas, width, height, type) {
if ($support.canvas && $support.dataURL) {
if (typeof canvas == 'string') {
canvas = document.getElementById(canvas)
}
if (type == undefined) {
type = 'png'
}
type = fixType(type)
if (/bmp/.test(type)) {
var data = getImageData(scaleCanvas(canvas, width, height))
var strData = genBitmapImage(data)
return genImage(makeURI(strData, 'image/bmp'))
} else {
// @ts-ignore
var strData = getDataURL(canvas, type, width, height)
return genImage(strData)
}
}
}
return {
saveAsImage: saveAsImage,
saveAsPNG: function(canvas, width, height) {
return saveAsImage(canvas, width, height, 'png')
},
saveAsJPEG: function(canvas, width, height) {
return saveAsImage(canvas, width, height, 'jpeg')
},
saveAsGIF: function(canvas, width, height) {
return saveAsImage(canvas, width, height, 'gif')
},
saveAsBMP: function(canvas, width, height) {
return saveAsImage(canvas, width, height, 'bmp')
},
convertToImage: convertToImage,
convertToPNG: function(canvas, width, height) {
return convertToImage(canvas, width, height, 'png')
},
convertToJPEG: function(canvas, width, height) {
return convertToImage(canvas, width, height, 'jpeg')
},
convertToGIF: function(canvas, width, height) {
return convertToImage(canvas, width, height, 'gif')
},
convertToBMP: function(canvas, width, height) {
return convertToImage(canvas, width, height, 'bmp')
},
}
}
export default Canvas2Image
export function createPoint(viewer, { position, image, title }) {
let point = viewer.entities.add({
name: 'point',
position,
billboard: {
image,
width: 30,
height: 30,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
label: {
text: title,
font: '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian3(0.0, 32, 0.0),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
})
return point
}
export function createLine(
viewer,
{ polyCenter, positions, width, color, title }
) {
let line = viewer.entities.add({
position: polyCenter,
polyline: {
positions,
width,
material: Cesium.Color.fromCssColorString(color),
},
label: {
// @ts-ignore
text: title,
font: '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, 0),
},
})
return line
}
export function createPolygon(
viewer,
{ polyCenter, outlineColor, positions, title, color }
) {
var polygon = viewer.entities.add({
position: polyCenter,
polygon: {
hierarchy: positions,
material: Cesium.Color.fromCssColorString(color),
outline: true,
outlineWidth: 1,
outlineColor: Cesium.Color.fromCssColorString(outlineColor),
},
label: {
text: title,
font: '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, 0),
},
})
return polygon
}
import point_icon_01 from '@/assets/images/point-icon/point_icon_01.svg'
export const CreatePoint = function(viewer, style) {
this.objId = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
this.viewer = viewer;
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
this.modifyHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
this.polyline = null;
this.positions = [];
this.style = style;
this.floatPoint = null;
this.linePointArr = [];
this.modifyPoint = null;
this.state = 0; //1为新增 2为编辑 0为清除
this.centerPoint = null
}
CreatePoint.prototype = {
startCreate: function(callBack) {
document.documentElement.style.cursor = 'crosshair';
var $this = this;
this.handler.setInputAction(function(evt) { //单机开始绘制
var cartesian = $this.getCatesian3FromPX(evt.position,$this.viewer,[$this.polyline]);
if ($this.positions.length == 0) {
$this.positions.push(cartesian.clone());
$this.floatPoint = $this.createPoint(cartesian.clone());
}
$this.positions.push(cartesian);
// var point = $this.createPoint(cartesian);
var point = $this.createBillboard(cartesian);
// point.wz = $this.linePointArr.length;
// $this.linePointArr.push(point);
$this.handler.destroy();
document.documentElement.style.cursor = 'default';
callBack(point, $this.positions);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
this.handler.setInputAction(function(evt) { //移动时绘制线
if ($this.positions.length < 1) return;
var cartesian = $this.getCatesian3FromPX(evt.endPosition,$this.viewer,[$this.polyline]);
if($this.floatPoint) $this.floatPoint.position.setValue(cartesian);
if ($this.positions.length == 2) {
if (!Cesium.defined($this.polyline)) {
$this.polyline = $this.createPolyline($this.style);
}
}
if ($this.polyline) {
$this.positions.pop();
$this.positions.push(cartesian);
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
this.handler.setInputAction(function(evt) { //单机开始绘制
if(!$this.polyline) return ;
var cartesian = $this.getCatesian3FromPX(evt.position,$this.viewer,[$this.polyline]);
$this.state = 1;
$this.handler.destroy();
if($this.floatPoint){
if($this.floatPoint) $this.floatPoint.show = false;
$this.floatPoint = null;
}
$this.positions.pop();
$this.positions.push(cartesian);
var point = $this.createPoint(cartesian);
point.wz = $this.linePointArr.length;
$this.linePointArr.push(point);
// 获取中心点
const polyCenter = Cesium.BoundingSphere.fromPoints($this.positions).center
// $this.centerPoint = $this.createPoint(polyCenter)
const centerPoint = $this.createPoint(polyCenter);
centerPoint.wz = $this.linePointArr.length;
centerPoint.zx = 1;
$this.linePointArr.push(centerPoint);
document.documentElement.style.cursor = 'default';
callBack($this.polyline, $this.positions);
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
},
createByPositions:function(lnglatArr,callBack){ //通过传入坐标数组创建面
if(!lnglatArr) return ;
var positions = this.lnglatArrToCartesianArr(lnglatArr);
if(!positions) return ;
this.polyline = this.createPolyline(this.style);
this.positions = positions;
callBack(this.polyline);
for(var i=0;i<positions.length;i++){
var point = this.createPoint(positions[i]);
point.wz = this.linePointArr.length;
this.linePointArr.push(point);
}
this.state = 1;
},
startModify: function() {
if(this.state!=2 && this.state !=1) return ; //表示还没绘制完成
if(!this.modifyHandler) this.modifyHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
var $this = this;
for(var i=0;i<$this.linePointArr.length;i++){
var point = $this.linePointArr[i];
if(point) point.show = true;
}
this.modifyHandler.setInputAction(function(evt) {
document.documentElement.style.cursor = 'move';
var pick = $this.viewer.scene.pick(evt.position);
if (Cesium.defined(pick) && pick.id){
if(!pick.id.objId)
$this.modifyPoint = pick.id;
$this.forbidDrawWorld(true);
}else{
for(var i=0;i<$this.linePointArr.length;i++){
var point = $this.linePointArr[i];
if(point) point.show = false;
}
if($this.modifyHandler){
$this.modifyHandler.destroy();
$this.modifyHandler = null;
}
}
$this.state = 2;
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
this.modifyHandler.setInputAction(function(evt) { //移动时绘制线
if ($this.positions.length < 1 || !$this.modifyPoint) return;
//记录尾随的坐标
let startPosition = $this.getCatesian3FromPX(evt.startPosition, $this.viewer,[$this.polyline,$this.modifyPoint]);
let endPosition = $this.getCatesian3FromPX(evt.endPosition, $this.viewer,[$this.polyline,$this.modifyPoint]);
if(endPosition){
if($this.modifyPoint.zx) {
//计算每次的偏差
if(startPosition) {
let changed_x = endPosition.x-startPosition.x;
let changed_y = endPosition.y-startPosition.y;
let changed_z = endPosition.z-startPosition.z;
$this.modifyPoint.position.setValue(endPosition);
for(let i=0; i<$this.positions.length; i++){
//与之前的算差 替换掉
$this.positions[i].x = $this.positions[i].x + changed_x;
$this.positions[i].y = $this.positions[i].y + changed_y;
$this.positions[i].z = $this.positions[i].z + changed_z;
}
}
} else {
$this.modifyPoint.position.setValue(endPosition);
$this.positions[$this.modifyPoint.wz] = endPosition;
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
this.modifyHandler.setInputAction(function(evt) {
if(!$this.modifyPoint) return;
// var cartesian = $this.getCatesian3FromPX(evt.position, $this.viewer,[$this.polyline,$this.modifyPoint]);
// $this.modifyPoint.position.setValue(cartesian);
// $this.positions[$this.modifyPoint.wz] = cartesian;
$this.modifyPoint = null;
$this.forbidDrawWorld(false);
document.documentElement.style.cursor = 'default';
}, Cesium.ScreenSpaceEventType.LEFT_UP);
},
createBillboard: function(position) {
return this.viewer.entities.add({
position: position,
billboard: {
image: point_icon_01,
width: 32,
height: 32,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
},
createPoint: function(position) {
if (!position) return;
return this.viewer.entities.add({
position: position,
point: {
pixelSize:5,
color:Cesium.Color.YELLOW,
outlineWidth:2,
outlineColor:Cesium.Color.DARKRED,
// heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance : Number.POSITIVE_INFINITY
},
show : false
});
},
createPolyline: function(obj) {
if(!obj) obj = {};
var $this = this;
var polyline = this.viewer.entities.add({
polyline: {
positions: new Cesium.CallbackProperty(function() {
return $this.positions
}, false),
clampToGround: obj.clampToGround ,
show: true,
fill: obj.fill || true ,
// material: obj.material || Cesium.Color.WHITE,
material: obj.material || Cesium.Color.fromCssColorString('rgba(255, 255, 0, 0.6)'),
width: obj.width || 3
}
});
polyline.objId = this.objId;
return polyline;
},
getPositions: function() {
return this.positions;
},
setStyle: function(obj) {},
remove: function() {
if (this.polyline) {
this.state = 0;
this.viewer.entities.remove(this.polyline);
this.polyline = null;
}
},
setVisible: function(vis) {
this.polyline.show = vis;
},
forbidDrawWorld:function(isForbid){
this.viewer.scene.screenSpaceCameraController.enableRotate = !isForbid;
        this.viewer.scene.screenSpaceCameraController.enableTilt = !isForbid;
        this.viewer.scene.screenSpaceCameraController.enableTranslate = !isForbid;
        this.viewer.scene.screenSpaceCameraController.enableInputs = !isForbid;
},
destroy:function(){
this.linePointArr = [];
if(this.handler){
this.handler.destroy();
this.handler = null;
}
if(this.modifyHandler){
this.modifyHandler.destroy();
this.modifyHandler = null;
}
if(this.polyline){
this.viewer.entities.remove(this.polyline);
this.polyline = null;
}
if(this.floatPoint){
this.viewer.entities.remove(this.floatPoint);
this.floatPoint = null;
}
this.positions = [];
this.style = null;
for(var i=0;i<this.linePointArr.length;i++){
var point = this.linePointArr[i];
this.viewer.entities.remove(point);
}
this.linePointArr = [];
this.modifyPoint = null;
},
getCatesian3FromPX:function(px, viewer, entitys) {
var pick = viewer.scene.pick(px);
var cartesian;
var drillPick = viewer.scene.drillPick(px);
var truePick = null;
// if (entitys) {
// for (var i = 0; i < drillPick.length; i++) {
// if (drillPick[i].id._id != entitys[0].id && drillPick[i].id._id != entitys[1].id) {
// truePick = drillPick[i].id;
// break;
// }
// }
// } else {
// truePick = pick;
// }
// if (viewer.scene.pickPositionSupported && Cesium.defined(truePick)) {
// console.log('truePick')
// cartesian = viewer.scene.pickPosition(px);
// } else {
// var ray = viewer.camera.getPickRay(px);
// if (!ray) return;
// cartesian = viewer.scene.globe.pick(ray, viewer.scene);
// }
// return cartesian;
viewer.render();
let bool = drillPick.some(item => {
return item.content
})
if (bool > 0) {
cartesian = viewer.scene.pickPosition(px);
// console.log('truePick', cartesian)
} else {
var ray = viewer.camera.getPickRay(px);
if (!ray) return;
cartesian = viewer.scene.globe.pick(ray, viewer.scene);
}
return cartesian;
},
lnglatArrToCartesianArr:function(lnglatArr){
if (!lnglatArr) return [];
var arr = [];
for (var i = 0; i < lnglatArr.length; i++) {
arr.push(Cesium.Cartesian3.fromDegrees(lnglatArr[i]));
}
return arr;
}
}
import Canvas2Image from './Canvas2Image'
import cropGif from '@/assets/images/map-manage/crop.gif'
function mousePosition(e) {
if (e.pageX || e.pageY) {
return { x: e.pageX, y: e.pageY }
}
return {
x: e.clientX + document.body.scrollLeft - document.body.clientLeft,
y: e.clientY + document.body.scrollTop - document.body.clientTop,
}
}
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image()
image.src = canvas.toDataURL('image/png', 0.1)
return image
}
// Converts image to canvas returns new canvas element
function convertImageToCanvas(image, startX, startY, width, height) {
var canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
// @ts-ignore
canvas
.getContext('2d')
.drawImage(image, startX, startY, width, height, 0, 0, width, height)
return canvas
}
function screenshot(viewer, callback) {
let onmousedownPosition,
width = 1,
height = 1,
canvas,
isDraw,
onmousemovePosition,
img,
canvasDom,
minX,
minY
let canvas2Image = Canvas2Image()
let drawShade = document.createElement('div')
let drawDom = document.createElement('div')
let dragBox = document.createElement('div')
let lineT = document.createElement('div')
let lineB = document.createElement('div')
let lineL = document.createElement('div')
let lineR = document.createElement('div')
lineT.setAttribute(
'style',
`position: absolute; width: 100%; height: 1px; opacity: 0.4; background: #fff url(${cropGif});`
)
lineB.setAttribute(
'style',
`position: absolute; bottom: 0; width: 100%; height: 1px; opacity: 0.4; background: #fff url(${cropGif});`
)
lineL.setAttribute(
'style',
`position: absolute; left: 0; width: 1px; height: 100%; opacity: 0.4; background: #fff url(${cropGif});`
)
lineR.setAttribute(
'style',
`position: absolute; right: 0; width: 1px; height: 100%; opacity: 0.4; background: #fff url(${cropGif});`
)
dragBox.appendChild(lineT)
dragBox.appendChild(lineB)
dragBox.appendChild(lineL)
dragBox.appendChild(lineR)
let dragDom = document.createElement('div')
let dragN = document.createElement('div')
let dragS = document.createElement('div')
let dragW = document.createElement('div')
let dragE = document.createElement('div')
let dragT = document.createElement('div')
let dragB = document.createElement('div')
let dragL = document.createElement('div')
let dragR = document.createElement('div')
let dragLT = document.createElement('div')
let dragLB = document.createElement('div')
let dragRT = document.createElement('div')
let dragRB = document.createElement('div')
dragDom.setAttribute('style', `z-index: 310; width: 100%; height: 100%;`)
dragBox.setAttribute(
'style',
`position: absolute; z-index: 280; width: 100%; height: 100%; cursor: move; overflow: hidden;`
)
dragN.setAttribute(
'style',
'position: absolute; z-index: 300; width: 100%; height: 8px; margin-top: -4px; cursor: n-resize;'
)
dragS.setAttribute(
'style',
'position: absolute; bottom: 0; z-index: 302; width: 100%; height: 8px; margin-bottom: -4px; cursor: s-resize;'
)
dragW.setAttribute(
'style',
'position: absolute; left: 0; z-index: 301; width: 8px; height: 100%; margin-left: -4px; cursor: w-resize;'
)
dragE.setAttribute(
'style',
'position: absolute; right: 0; z-index: 303; width: 8px; height: 100%; margin-right: -4px; cursor: e-resize;'
)
dragT.setAttribute(
'style',
'position: absolute; top: 0; left: 50%; z-index: 304; width: 8px; height: 8px; margin-top: -4px; margin-left: -4px; cursor: n-resize; border: 1px #eee solid; background-color: #333; opacity: 0.5;'
)
dragB.setAttribute(
'style',
'position: absolute; bottom: 0; left: 50%; z-index: 305; width: 8px; height: 8px; margin-bottom: -4px; margin-left: -4px; cursor: s-resize; border: 1px #eee solid; background-color: #333; opacity: 0.5;'
)
dragL.setAttribute(
'style',
'position: absolute; left: 0; top: 50%; z-index: 306; width: 8px; height: 8px; margin-left: -4px; margin-top: -4px; cursor: w-resize; border: 1px #eee solid; background-color: #333; opacity: 0.5;'
)
dragR.setAttribute(
'style',
'position: absolute; right: 0; top: 50%; z-index: 307; width: 8px; height: 8px; margin-right: -4px; margin-top: -4px; cursor: e-resize; border: 1px #eee solid; background-color: #333; opacity: 0.5;'
)
dragLT.setAttribute(
'style',
'position: absolute; top: 0; left: 0; z-index: 308; width: 8px; height: 8px; margin-top: -4px; margin-left: -4px; cursor: nw-resize; border: 1px #eee solid; background-color: #333; opacity: 0.5;'
)
dragLB.setAttribute(
'style',
'position: absolute; bottom: 0; left: 0; z-index: 309; width: 8px; height: 8px; margin-bottom: -4px; margin-left: -4px; cursor: sw-resize; border: 1px #eee solid; background-color: #333; opacity: 0.5;'
)
dragRT.setAttribute(
'style',
'position: absolute; top: 0; right: 0; z-index: 310; width: 8px; height: 8px; margin-top: -4px; margin-right: -4px; cursor: ne-resize; border: 1px #eee solid; background-color: #333; opacity: 0.5;'
)
dragRB.setAttribute(
'style',
'position: absolute; bottom: 0; right: 0; z-index: 311; width: 8px; height: 8px; margin-bottom: -4px; margin-right: -4px; cursor: se-resize; border: 1px #eee solid; background-color: #333; opacity: 0.5;'
)
dragDom.appendChild(dragN)
dragDom.appendChild(dragS)
dragDom.appendChild(dragW)
dragDom.appendChild(dragE)
dragDom.appendChild(dragT)
dragDom.appendChild(dragB)
dragDom.appendChild(dragL)
dragDom.appendChild(dragR)
dragDom.appendChild(dragLT)
dragDom.appendChild(dragLB)
dragDom.appendChild(dragRT)
dragDom.appendChild(dragRB)
let drawTool = document.createElement('div')
drawTool.setAttribute(
'style',
'display: none; position: absolute; right: 0; bottom: -40px; width: 106px; background-color: rgba(20, 24, 39, 0.9); border: 1px solid #0a4a88;'
)
let drawOK = document.createElement('div')
let drawCancel = document.createElement('div')
drawOK.setAttribute(
'style',
'padding: 0 10px; height: 30px; line-height: 30px; color: #aaa; cursor: pointer; font-size: 14px;'
)
drawCancel.setAttribute(
'style',
'padding: 0 10px; height: 30px; line-height: 30px; color: #aaa; cursor: pointer; font-size: 14px;'
)
let textOK = document.createTextNode('完 成')
let textCancel = document.createTextNode('取 消')
drawOK.appendChild(textOK)
drawCancel.appendChild(textCancel)
drawTool.appendChild(drawCancel)
drawTool.appendChild(drawOK)
drawShade.setAttribute(
'style',
'position: fixed; top: 0px; left: 0px; z-index: 500; width: 100%; height: 100%; cursor: crosshair;'
)
document.body.appendChild(drawShade)
drawDom.appendChild(dragBox)
drawDom.appendChild(dragDom)
drawDom.appendChild(drawTool)
// document.body.appendChild(drawDom)
// document.body.setAttribute('style', 'cursor: crosshair')
drawShade.onmousedown = (e) => {
isDraw = true
e = e || window.event
onmousedownPosition = mousePosition(e)
width = 2
height = 2
minX = Math.min(onmousedownPosition.x, onmousedownPosition.x)
minY = Math.min(onmousedownPosition.y, onmousedownPosition.y)
drawDom.setAttribute(
'style',
`position: absolute; z-index: 600; top: ${minY}px; left: ${minX}px; width: ${width}px; height: ${height}px;`
)
document.body.appendChild(drawDom)
drawTool.style.display = 'none'
}
document.body.onmousemove = (e) => {
if (isDraw) {
e = e || window.event
onmousemovePosition = mousePosition(e)
width = Math.abs(onmousemovePosition.x - onmousedownPosition.x)
height = Math.abs(onmousemovePosition.y - onmousedownPosition.y)
minX = Math.min(onmousemovePosition.x, onmousedownPosition.x)
minY = Math.min(onmousemovePosition.y, onmousedownPosition.y)
drawDom.setAttribute(
'style',
`position: absolute; z-index: 600; top: ${minY}px; left: ${minX}px; width: ${width}px; height: ${height}px;`
)
}
}
document.body.onmouseup = (e) => {
isDraw = false
drawTool.style.display = 'flex'
drawShade.onmousedown = null
document.body.onmousemove = null
document.body.onmouseup = null
document.body.setAttribute('style', 'cursor: default')
// document.body.removeChild(drawDom)
// document.body.removeChild(drawShade)
// drawDom.appendChild(drawTool)
// viewer.render()
// canvas = viewer.scene.canvas
// img = canvas2Image.convertToImage(canvas, canvas.width, canvas.height, 'png')
// document.body.appendChild(img)
// img.onload = () => {
// img.onload = null
// canvasDom = convertImageToCanvas(img, minX, minY, width, height)
// img.src = convertCanvasToImage(canvasDom).src
// document.body.onmouseup = null
// callback(img)
// }
}
drawOK.onmouseover = (e) => {
drawOK.style.color = '#eee'
}
drawOK.onmouseout = (e) => {
drawOK.style.color = '#aaa'
}
drawOK.onmousedown = (e) => {
document.body.removeChild(drawDom)
document.body.removeChild(drawShade)
viewer.render()
canvas = viewer.scene.canvas
img = canvas2Image.convertToImage(
canvas,
canvas.width,
canvas.height,
'png'
)
// document.body.appendChild(img)
img.onload = () => {
document.body.setAttribute('style', 'cursor: default')
img.onload = null
canvasDom = convertImageToCanvas(img, minX, minY - 50, width, height)
img.src = convertCanvasToImage(canvasDom).src
document.body.onmouseup = null
callback(img)
}
}
drawCancel.onmouseover = (e) => {
drawCancel.style.color = '#eee'
}
drawCancel.onmouseout = (e) => {
drawCancel.style.color = '#aaa'
}
drawCancel.onmousedown = (e) => {
document.body.removeChild(drawDom)
document.body.removeChild(drawShade)
callback()
}
var disX, disY
dragBox.onmousedown = function(event) {
var event = event || window.event
disX = event.clientX - drawDom.offsetLeft
disY = event.clientY - drawDom.offsetTop
document.onmousemove = function(event) {
var event = event || window.event
var iL = event.clientX - disX
var iT = event.clientY - disY
var maxL = document.documentElement.clientWidth - drawDom.offsetWidth
var maxT = document.documentElement.clientHeight - drawDom.offsetHeight
iL <= 0 && (iL = 0)
iT <= 0 && (iT = 0)
iL >= maxL && (iL = maxL)
iT >= maxT && (iT = maxT)
drawDom.style.left = iL + 'px'
drawDom.style.top = iT + 'px'
minX = iL
minY = iT
return false
}
document.onmouseup = function() {
document.onmousemove = null
document.onmouseup = null
return false
}
}
//四角点
resize(drawDom, dragLT, true, true, false, false)
resize(drawDom, dragRT, false, true, false, false)
resize(drawDom, dragRB, false, false, false, false)
resize(drawDom, dragLB, true, false, false, false)
//四边点
resize(drawDom, dragL, true, false, false, true)
resize(drawDom, dragT, false, true, true, false)
resize(drawDom, dragR, false, false, false, true)
resize(drawDom, dragB, false, false, true, false)
//四边bar
resize(drawDom, dragW, true, false, false, true)
resize(drawDom, dragN, false, true, true, false)
resize(drawDom, dragE, false, false, false, true)
resize(drawDom, dragS, false, false, true, false)
/*-------------------------- +
改变大小函数
+-------------------------- */
var dragMinWidth = 1
var dragMinHeight = 1
function resize(oParent, handle, isLeft, isTop, lockX, lockY) {
handle.onmousedown = function(event) {
event.preventDefault()
var event = event || window.event
var disX = event.clientX - handle.offsetLeft
var disY = event.clientY - handle.offsetTop
var iParentTop = oParent.offsetTop
var iParentLeft = oParent.offsetLeft
var iParentWidth = oParent.offsetWidth
var iParentHeight = oParent.offsetHeight
document.onmousemove = function(event) {
event.preventDefault()
var event = event || window.event
var iL = event.clientX - disX
var iT = event.clientY - disY
var maxW = document.documentElement.clientWidth - oParent.offsetLeft - 2
var maxH = document.documentElement.clientHeight - oParent.offsetTop - 2
var iW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL
var iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT
isLeft &&
(oParent.style.left = iParentLeft + iL + 'px') &&
(minX = iParentLeft + iL)
isTop &&
(oParent.style.top = iParentTop + iT + 'px') &&
(minY = iParentTop + iT)
iW < dragMinWidth && (iW = dragMinWidth)
iW > maxW && (iW = maxW)
lockX || ((oParent.style.width = iW + 'px') && (width = iW))
iH < dragMinHeight && (iH = dragMinHeight)
iH > maxH && (iH = maxH)
lockY || ((oParent.style.height = iH + 'px') && (height = iH))
if ((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight))
document.onmousemove = null
return false
}
document.onmouseup = function(event) {
event.preventDefault()
document.onmousemove = null
document.onmouseup = null
}
return false
}
}
}
export default screenshot
export default class CesiumWidget extends Cesium.CesiumWidget {
constructor(container, options){
super(container, {
creditContainer: document.createElement("div"),
...options
})
}
}
\ No newline at end of file
// const Cesium = require("cesium/Cesium")
// export default Cesium
\ No newline at end of file
export const CreatePolygon = function(viewer, style) {
this.objId = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
this.viewer = viewer;
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
this.modifyHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
this.polygon = null;
this.polyline = null;
this.positions = [];
this.style = style;
this.state = 0; //1为新增 2为编辑 0为清除
this.gonPointArr = [];
this.modifyPoint = null;
}
CreatePolygon.prototype = {
startCreate: function(callBack) {
document.documentElement.style.cursor = 'crosshair';
var $this = this;
this.handler.setInputAction(function(evt) { //单机开始绘制
var cartesian = $this.getCatesian3FromPX(evt.position, $this.viewer,[$this.polygon]);
if ($this.positions.length == 0) {
$this.positions.push(cartesian.clone());
}
$this.positions.push(cartesian);
var point = $this.createPoint(cartesian);
point.wz = $this.gonPointArr.length;
$this.gonPointArr.push(point);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
this.handler.setInputAction(function(evt) { //移动时绘制面
if ($this.positions.length < 1) return;
var cartesian = $this.getCatesian3FromPX(evt.endPosition, $this.viewer,[$this.polygon]);
if ($this.positions.length == 2) {
if (!Cesium.defined($this.polygon)) {
$this.polygon = $this.createPolygon($this.style);
$this.polygon.objId = $this.objId;
}
}
if ($this.polygon) {
$this.positions.pop();
$this.positions.push(cartesian);
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
this.handler.setInputAction(function(evt) {
if (!$this.polygon) return;
var cartesian = $this.getCatesian3FromPX(evt.position, $this.viewer,[$this.polygon]);
$this.state = 1;
$this.handler.destroy();
if ($this.floatPoint) {
if ($this.floatPoint) $this.floatPoint.show = false;
$this.floatPoint = null;
}
$this.positions.pop();
$this.positions.push(cartesian);
var point = $this.createPoint(cartesian);
point.wz = $this.gonPointArr.length;
$this.gonPointArr.push(point);
// var polygon = window.viewer.entities.add({
// name: "Cyan vertical polygon with per-position heights and outline",
// polygon: {
// hierarchy: $this.positions,
// perPositionHeight: false,
// // material: Cesium.Color.CYAN.withAlpha(0.5),
// material: Cesium.Color.fromCssColorString('rgba(255, 255, 0, 0.6)'),
// },
// })
// console.log('$this.positions', $this.positions)
// $this.viewer.entities.remove($this.polygon) // 结束删除实体
// $this.polygon.hierarchy = new Cesium.PolygonHierarchy($this.positions)
// callBack(polygon, $this.positions);
callBack($this.polygon, $this.positions);
document.documentElement.style.cursor = 'default';
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
},
createByPositions: function(lnglatArr, callBack) { //通过传入坐标数组创建面
if (!lnglatArr) return;
var positions = this.lnglatArrToCartesianArr(lnglatArr);
if (!positions) return;
this.polygon = this.createPolygon(this.style);
this.positions = positions;
callBack(this.polygon);
for (var i = 0; i < positions.length; i++) {
var point = this.createPoint(positions[i]);
point.wz = this.gonPointArr.length;
this.gonPointArr.push(point);
}
this.state = 1;
this.polygon.objId = this.objId;
},
startModify: function() {
if (this.state != 1 && this.state != 2) return; //表示还没绘制完成
if (!this.modifyHandler) this.modifyHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
var $this = this;
for (var i = 0; i < $this.gonPointArr.length; i++) {
var point = $this.gonPointArr[i];
if (point) point.show = true;
}
this.modifyHandler.setInputAction(function(evt) {
document.documentElement.style.cursor = 'move';
var pick = $this.viewer.scene.pick(evt.position);
if (Cesium.defined(pick) && pick.id) {
if (!pick.id.objId)
$this.modifyPoint = pick.id;
$this.forbidDrawWorld(true);
} else {
for (var i = 0; i < $this.gonPointArr.length; i++) {
var point = $this.gonPointArr[i];
if (point) point.show = false;
}
if ($this.modifyHandler) {
$this.modifyHandler.destroy();
$this.modifyHandler = null;
}
}
//$this.state = 2;
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
this.modifyHandler.setInputAction(function(evt) { //移动时绘制面
if ($this.positions.length < 1 || !$this.modifyPoint) return;
var cartesian = $this.getCatesian3FromPX(evt.endPosition, $this.viewer,[$this.polygon,$this.modifyPoint]);
if (cartesian) {
$this.modifyPoint.position.setValue(cartesian);
$this.positions[$this.modifyPoint.wz] = cartesian;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
this.modifyHandler.setInputAction(function(evt) {
$this.forbidDrawWorld(false);
if (!$this.modifyPoint) return;
// var cartesian = $this.getCatesian3FromPX(evt.position, $this.viewer,[$this.polygon,$this.modifyPoint]);
// $this.modifyPoint.position.setValue(cartesian);
// // $this.modifyPoint = null;
// $this.positions[$this.modifyPoint.wz] = cartesian;
$this.modifyPoint = null;
$this.forbidDrawWorld(false);
document.documentElement.style.cursor = 'default';
}, Cesium.ScreenSpaceEventType.LEFT_UP);
},
createPoint: function(position) {
if (!position) return;
return this.viewer.entities.add({
position: position,
point: {
pixelSize: 5,
color: Cesium.Color.YELLOW,
outlineWidth: 2,
outlineColor: Cesium.Color.DARKRED,
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY
},
show: false
});
},
createPolygon: function(obj) {
var $this = this;
return this.viewer.entities.add({
polygon: {
hierarchy: new Cesium.CallbackProperty(function() {
return new Cesium.PolygonHierarchy($this.positions);
}, false),
perPositionHeight: false,
// clampToGround: obj.clampToGround || true,
show: true,
fill: obj.fill || true,
// material: obj.material || Cesium.Color.WHITE,
material: obj.material || Cesium.Color.fromCssColorString('rgba(40, 126, 255, 0.7)'),
width: obj.width || 3,
outlineColor: obj.outlineColor || Cesium.Color.BLACK,
outlineWidth: obj.outlineWidth || 1,
outline: false || obj.outline
}
});
},
createPolyline: function() {
return this.viewer.entities.add({
polyline: {
positions: new Cesium.CallbackProperty(function() {
return $this.positions
}, false),
clampToGround: true || obj.clampToGround,
show: true,
fill: true || obj.fill,
material: Cesium.Color.WHITE || obj.material,
width: 3 || obj.width
}
});
},
getPositions: function() {
return this.positions;
},
setStyle: function(obj) {},
remove: function() {
if (this.polygon) {
this.state = 0;
this.viewer.entities.remove(this.polygon);
this.polygon = null;
}
},
setVisible: function(vis) {
this.polygon.show = vis;
},
forbidDrawWorld: function(isForbid) {
this.viewer.scene.screenSpaceCameraController.enableRotate = !isForbid;
this.viewer.scene.screenSpaceCameraController.enableTilt = !isForbid;
this.viewer.scene.screenSpaceCameraController.enableTranslate = !isForbid;
this.viewer.scene.screenSpaceCameraController.enableInputs = !isForbid;
},
destroy: function() {
if (this.handler) {
this.handler.destroy();
this.handler = null;
}
if (this.modifyHandler) {
this.modifyHandler.destroy();
this.modifyHandler = null;
}
if (this.polygon) {
this.viewer.entities.remove(this.polygon);
this.polygon = null;
}
if (this.polyline) {
this.viewer.entities.remove(this.polyline);
this.polyline = null;
}
this.positions = [];
this.style = null;
if (this.modifyPoint) {
this.viewer.entities.remove(this.modifyPoint);
this.modifyPoint = null;
}
for (var i = 0; i < this.gonPointArr.length; i++) {
var point = this.gonPointArr[i];
this.viewer.entities.remove(point);
}
this.gonPointArr = [];
this.state = 0;
},
getCatesian3FromPX:function(px, viewer, entitys) {
var pick = viewer.scene.pick(px);
var cartesian;
var drillPick = viewer.scene.drillPick(px);
var truePick = null;
// if (entitys) {
// for (var i = 0; i < drillPick.length; i++) {
// if (drillPick[i].id && drillPick[i].id._id != entitys[0].id && drillPick[i].id._id != entitys[1].id) {
// truePick = drillPick[i].id;
// break;
// }
// }
// } else {
// truePick = pick;
// }
// if (viewer.scene.pickPositionSupported && Cesium.defined(truePick)) {
// cartesian = viewer.scene.pickPosition(px);
// } else {
// var ray = viewer.camera.getPickRay(px);
// if (!ray) return;
// cartesian = viewer.scene.globe.pick(ray, viewer.scene);
// }
// return cartesian;
viewer.render();
let bool = drillPick.some(item => {
return item.content
})
// let bool = drillPick[0].content ? true : false
if (bool > 0) {
cartesian = viewer.scene.pickPosition(px);
} else {
var ray = viewer.camera.getPickRay(px);
if (!ray) return;
cartesian = viewer.scene.globe.pick(ray, viewer.scene);
}
return cartesian;
},
lnglatArrToCartesianArr:function(lnglatArr){
if (!lnglatArr) return [];
var arr = [];
for (var i = 0; i < lnglatArr.length; i++) {
arr.push(Cesium.Cartesian3.fromDegrees(lnglatArr[i]));
}
return arr;
}
}
export const CreatePolyline = function(viewer, style) {
this.objId = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
this.viewer = viewer;
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
this.modifyHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
this.polyline = null;
this.positions = [];
this.style = style;
this.floatPoint = null;
this.linePointArr = [];
this.modifyPoint = null;
this.state = 0; //1为新增 2为编辑 0为清除
this.centerPoint = null
}
CreatePolyline.prototype = {
startCreate: function(callBack) {
document.documentElement.style.cursor = 'crosshair';
var $this = this;
this.handler.setInputAction(function(evt) { //单机开始绘制
var cartesian = $this.getCatesian3FromPX(evt.position,$this.viewer,[$this.polyline]);
if ($this.positions.length == 0) {
$this.positions.push(cartesian.clone());
$this.floatPoint = $this.createPoint(cartesian.clone());
}
$this.positions.push(cartesian);
var point = $this.createPoint(cartesian);
point.wz = $this.linePointArr.length;
$this.linePointArr.push(point);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
this.handler.setInputAction(function(evt) { //移动时绘制线
if ($this.positions.length < 1) return;
var cartesian = $this.getCatesian3FromPX(evt.endPosition,$this.viewer,[$this.polyline]);
if($this.floatPoint) $this.floatPoint.position.setValue(cartesian);
if ($this.positions.length == 2) {
if (!Cesium.defined($this.polyline)) {
$this.polyline = $this.createPolyline($this.style);
}
}
if ($this.polyline) {
$this.positions.pop();
$this.positions.push(cartesian);
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
this.handler.setInputAction(function(evt) { //单机开始绘制
if(!$this.polyline) return ;
var cartesian = $this.getCatesian3FromPX(evt.position,$this.viewer,[$this.polyline]);
$this.state = 1;
$this.handler.destroy();
if($this.floatPoint){
if($this.floatPoint) $this.floatPoint.show = false;
$this.floatPoint = null;
}
$this.positions.pop();
$this.positions.push(cartesian);
var point = $this.createPoint(cartesian);
point.wz = $this.linePointArr.length;
$this.linePointArr.push(point);
// 获取中心点
const polyCenter = Cesium.BoundingSphere.fromPoints($this.positions).center
// $this.centerPoint = $this.createPoint(polyCenter)
const centerPoint = $this.createPoint(polyCenter);
centerPoint.wz = $this.linePointArr.length;
centerPoint.zx = 1;
$this.linePointArr.push(centerPoint);
document.documentElement.style.cursor = 'default';
callBack($this.polyline, $this.positions);
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
},
createByPositions:function(lnglatArr,callBack){ //通过传入坐标数组创建面
if(!lnglatArr) return ;
var positions = this.lnglatArrToCartesianArr(lnglatArr);
if(!positions) return ;
this.polyline = this.createPolyline(this.style);
this.positions = positions;
callBack(this.polyline);
for(var i=0;i<positions.length;i++){
var point = this.createPoint(positions[i]);
point.wz = this.linePointArr.length;
this.linePointArr.push(point);
}
this.state = 1;
},
startModify: function() {
if(this.state!=2 && this.state !=1) return ; //表示还没绘制完成
if(!this.modifyHandler) this.modifyHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
var $this = this;
for(var i=0;i<$this.linePointArr.length;i++){
var point = $this.linePointArr[i];
if(point) point.show = true;
}
this.modifyHandler.setInputAction(function(evt) {
document.documentElement.style.cursor = 'move';
var pick = $this.viewer.scene.pick(evt.position);
if (Cesium.defined(pick) && pick.id){
if(!pick.id.objId)
$this.modifyPoint = pick.id;
$this.forbidDrawWorld(true);
}else{
for(var i=0;i<$this.linePointArr.length;i++){
var point = $this.linePointArr[i];
if(point) point.show = false;
}
if($this.modifyHandler){
$this.modifyHandler.destroy();
$this.modifyHandler = null;
}
}
$this.state = 2;
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
this.modifyHandler.setInputAction(function(evt) { //移动时绘制线
if ($this.positions.length < 1 || !$this.modifyPoint) return;
//记录尾随的坐标
let startPosition = $this.getCatesian3FromPX(evt.startPosition, $this.viewer,[$this.polyline,$this.modifyPoint]);
let endPosition = $this.getCatesian3FromPX(evt.endPosition, $this.viewer,[$this.polyline,$this.modifyPoint]);
if(endPosition){
if($this.modifyPoint.zx) {
//计算每次的偏差
if(startPosition) {
let changed_x = endPosition.x-startPosition.x;
let changed_y = endPosition.y-startPosition.y;
let changed_z = endPosition.z-startPosition.z;
$this.modifyPoint.position.setValue(endPosition);
for(let i=0; i<$this.positions.length; i++){
//与之前的算差 替换掉
$this.positions[i].x = $this.positions[i].x + changed_x;
$this.positions[i].y = $this.positions[i].y + changed_y;
$this.positions[i].z = $this.positions[i].z + changed_z;
}
}
} else {
$this.modifyPoint.position.setValue(endPosition);
$this.positions[$this.modifyPoint.wz] = endPosition;
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
this.modifyHandler.setInputAction(function(evt) {
if(!$this.modifyPoint) return;
// var cartesian = $this.getCatesian3FromPX(evt.position, $this.viewer,[$this.polyline,$this.modifyPoint]);
// $this.modifyPoint.position.setValue(cartesian);
// $this.positions[$this.modifyPoint.wz] = cartesian;
$this.modifyPoint = null;
$this.forbidDrawWorld(false);
document.documentElement.style.cursor = 'default';
}, Cesium.ScreenSpaceEventType.LEFT_UP);
},
createPoint: function(position) {
if (!position) return;
return this.viewer.entities.add({
position: position,
point: {
pixelSize:5,
color:Cesium.Color.YELLOW,
outlineWidth:2,
outlineColor:Cesium.Color.DARKRED,
// heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance : Number.POSITIVE_INFINITY
},
show : false
});
},
createPolyline: function(obj) {
if(!obj) obj = {};
var $this = this;
var polyline = this.viewer.entities.add({
polyline: {
positions: new Cesium.CallbackProperty(function() {
return $this.positions
}, false),
clampToGround: obj.clampToGround,
show: true,
fill: obj.fill || true ,
// material: obj.material || Cesium.Color.WHITE,
material: obj.material || Cesium.Color.fromCssColorString('rgba(40, 126, 255, 1)'),
width: obj.width || 3
}
});
polyline.objId = this.objId;
return polyline;
},
getPositions: function() {
return this.positions;
},
setStyle: function(obj) {},
remove: function() {
if (this.polyline) {
this.state = 0;
this.viewer.entities.remove(this.polyline);
this.polyline = null;
}
},
setVisible: function(vis) {
this.polyline.show = vis;
},
forbidDrawWorld:function(isForbid){
this.viewer.scene.screenSpaceCameraController.enableRotate = !isForbid;
this.viewer.scene.screenSpaceCameraController.enableTilt = !isForbid;
this.viewer.scene.screenSpaceCameraController.enableTranslate = !isForbid;
this.viewer.scene.screenSpaceCameraController.enableInputs = !isForbid;
},
destroy:function(){
this.linePointArr = [];
if(this.handler){
this.handler.destroy();
this.handler = null;
}
if(this.modifyHandler){
this.modifyHandler.destroy();
this.modifyHandler = null;
}
if(this.polyline){
this.viewer.entities.remove(this.polyline);
this.polyline = null;
}
if(this.floatPoint){
this.viewer.entities.remove(this.floatPoint);
this.floatPoint = null;
}
this.positions = [];
this.style = null;
for(var i=0;i<this.linePointArr.length;i++){
var point = this.linePointArr[i];
this.viewer.entities.remove(point);
}
this.linePointArr = [];
this.modifyPoint = null;
},
getCatesian3FromPX:function(px, viewer, entitys) {
var pick = viewer.scene.pick(px);
var cartesian;
var drillPick = viewer.scene.drillPick(px);
// console.log('drillPick', drillPick)
var truePick = null;
// if (entitys) {
// for (var i = 0; i < drillPick.length; i++) {
// if (drillPick[i].id._id != entitys[0].id && drillPick[i].id._id != entitys[1].id) {
// truePick = drillPick[i].id;
// break;
// }
// }
// } else {
// truePick = pick;
// }
// if (viewer.scene.pickPositionSupported && Cesium.defined(truePick)) {
// console.log('truePick')
// cartesian = viewer.scene.pickPosition(px);
// } else {
// var ray = viewer.camera.getPickRay(px);
// if (!ray) return;
// cartesian = viewer.scene.globe.pick(ray, viewer.scene);
// }
// return cartesian;
viewer.render();
let bool = drillPick.some(item => {
return item.content
})
if (bool > 0) {
cartesian = viewer.scene.pickPosition(px);
} else {
var ray = viewer.camera.getPickRay(px);
if (!ray) return;
cartesian = viewer.scene.globe.pick(ray, viewer.scene);
}
return cartesian;
},
lnglatArrToCartesianArr:function(lnglatArr){
if (!lnglatArr) return [];
var arr = [];
for (var i = 0; i < lnglatArr.length; i++) {
arr.push(Cesium.Cartesian3.fromDegrees(lnglatArr[i]));
}
return arr;
}
}
/**
* dataURL to blob, ref to https://gist.github.com/fupslot/5015897
* @param dataURI
* @returns {Blob}
*/
export default function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1])
var mimeString = dataURI
.split(',')[0]
.split(':')[1]
.split(';')[0]
var ab = new ArrayBuffer(byteString.length)
var ia = new Uint8Array(ab)
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i)
}
var blob = new Blob([ab], { type: mimeString })
return new File([blob], new Date() + '.png', { type: mimeString })
}
export const DRAW_TYPE = Object.freeze({
POINT: Symbol('POINT'),
LINE: Symbol('LINE'),
AREA: Symbol('AREA'),
})
class AbstractDraw {
layer_name = 'DRAW_LAYER'
$onStart = null
$onMove = null
$onEnd = null
$dataSource = null
$entities = null
$isMouseDown = false
$drawType = null
constructor(options) {
this.$options = options
options.layer_name && (this.layer_name = options.layer_name)
this.$viewer = options.viewer
this.$drawType = options.drawType
this.$init()
this.$createEventHandler()
}
$init() {
this.$onStart = new Cesium.Event()
this.$onMove = new Cesium.Event()
this.$onEnd = new Cesium.Event()
// 不创建重复的 dataSource
let dataSource = this.$viewer.dataSources.getByName(this.layer_name)
if (!dataSource.length) {
dataSource = new Cesium.CustomDataSource(this.layer_name)
this.$viewer.dataSources.add(dataSource)
}
this.$dataSource = dataSource
this.$entities = dataSource.entities
}
$createEventHandler() {
if (this.$drawType) {
let handler = (this.handler = new Cesium.ScreenSpaceEventHandler(
this.$viewer.canvas
))
handler.setInputAction((moment) => {
this.$isMouseDown = true
this.$onStart.raiseEvent(moment)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
// 绘制点的时候没有移动事件监听
if (this.$drawType !== DRAW_TYPE.POINT) {
handler.setInputAction((moment) => {
if (this.$isMouseDown) {
this.$onMove.raiseEvent(moment)
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
handler.setInputAction((moment) => {
this.$onEnd.raiseEvent(moment)
this.$isMouseDown = false
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
}
}
}
$createDrawPoint(position, options) {
let entity = new Cesium.Entity()
entity.position = position
entity.point = {
pixelSize: 6,
color: Cesium.Color.YELLOWGREEN,
outlineColor: Cesium.Color.ORANGE,
outlineWidth: 2,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
}
if (options && options.label) {
entity.label = {
text: options.text,
show: true,
showBackground: true,
font: '14px monospace',
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(-3, -20),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
}
}
return entity
}
$createDrawPolyline(positions, options) {
let entity = new Cesium.Entity()
entity.polyline = {
positions,
arcType: Cesium.ArcType.NONE,
width: 2,
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.RED,
}),
depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.RED,
}),
...options,
}
return entity
}
$createDrawPolygon(positions, options) {
let entity = new Cesium.Entity()
entity.polygon = {
show: true,
hierarchy: positions,
// classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
material: new Cesium.ColorMaterialProperty(
Cesium.Color.YELLOWGREEN.withAlpha(0.7)
),
perPositionHeight: true,
arcType: undefined,
zIndex: Number.POSITIVE_INFINITY,
}
return entity
}
$createDrawRectangle() {}
$addLabelOnDrawEntity(entity, options) {
entity.label = {
text: 'label',
show: true,
showBackground: true,
font: '14px monospace',
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(-3, -20),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
...options,
}
return entity
}
$addLabelOnEntityByCenter(drawType, entity, options) {
// 算出中点
let positions = null
if (drawType === DRAW_TYPE.LINE) {
positions = entity.polyline.positions.getValue(Cesium.JulianDate.now())
} else if (drawType === DRAW_TYPE.AREA) {
let hierarchy = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now())
positions = hierarchy.positions
}
if (positions) {
let center = Cesium.BoundingSphere.fromPoints(positions).center
entity.position = center
// 添加 label
this.$addLabelOnDrawEntity(entity, {
text: '默认标注',
...options,
})
}
}
}
export default AbstractDraw
import AbstractDraw, { DRAW_TYPE } from "./AbstractDraw";
import { getCartesian3FromPX } from "../utils"
class AreaDraw extends AbstractDraw {
positions = []
entity = null
constructor(options) {
super({
...options,
drawType: DRAW_TYPE.AREA
})
this.init()
}
init() {
this.positions = []
this.initEventHandler()
}
initEventHandler() {
this.$onStart.addEventListener(this.onStart.bind(this))
this.$onMove.addEventListener(this.onMove.bind(this))
this.$onEnd.addEventListener(this.onEnd.bind(this))
}
onStart(moment) {
let cartesian = getCartesian3FromPX(this.$viewer, moment.position)
if (cartesian) {
if (!this.positions.length) {
this.positions.push(cartesian)
let entity = this.entity = this.$createDrawPolygon(new Cesium.CallbackProperty(() => {
return new Cesium.PolygonHierarchy(this.positions)
}, false))
this.$entities.add(entity)
}
this.positions.push(cartesian)
this.$options.start && this.$options.start({
entity: this.entity,
positions: this.positions
})
}
}
onMove(moment) {
let cartesian = getCartesian3FromPX(this.$viewer, moment.endPosition)
if (cartesian) {
this.positions.pop()
this.positions.push(cartesian)
}
}
async onEnd(moment) {
this.positions.pop()
this.$entities.remove(this.entity)
this.entity = null
let entity = await this.createClampedPolygon(this.$viewer, this.positions.map(item => Cesium.Cartesian3.clone(item)))
this.$entities.add(entity)
//给中心点添加 label
this.$addLabelOnEntityByCenter(DRAW_TYPE.AREA, entity)
this.$options.end && this.$options.end({
entity: this.entity,
positions: this.positions,
})
}
createClampedPolygon(viewer, positions, options) {
return new Promise((resolve, reject) => {
viewer.scene
.clampToHeightMostDetailed(positions)
.then((clampedCartesians) => {
let entity = new Cesium.Entity()
entity.polygon = {
hierarchy: new Cesium.PolygonHierarchy(clampedCartesians),
// material: new Cesium.ColorMaterialProperty(
// Cesium.Color.YELLOWGREEN.withAlpha(0.7)
// ),
classificationType: Cesium.ClassificationType.TERRAIN,
show: true,
material: new Cesium.ColorMaterialProperty(
Cesium.Color.YELLOWGREEN.withAlpha(0.7)
),
depthFailMaterial: new Cesium.ColorMaterialProperty(
Cesium.Color.YELLOWGREEN.withAlpha(0.7)
),
perPositionHeight: true,
arcType: undefined,
zIndex: Number.POSITIVE_INFINITY
}
resolve(entity)
})
})
}
}
export default AreaDraw
\ No newline at end of file
import AreaDraw from "./AreaDraw"
import LineDraw from "./LineDraw"
import PointDraw from "./PointDraw"
import { DRAW_TYPE } from "./AbstractDraw";
class DrawFactory {
static getFactory(type, options) {
switch (type) {
case DRAW_TYPE.POINT:
return new PointDraw(options)
case DRAW_TYPE.LINE:
return new LineDraw(options)
case DRAW_TYPE.AREA:
return new AreaDraw(options)
default:
throw new Error("类型错误")
}
}
}
export default DrawFactory
\ No newline at end of file
import AbstractDraw, { DRAW_TYPE } from "./AbstractDraw";
import { getCartesian3FromPX, transformCartesian2WGS84 } from "../utils"
class LineDraw extends AbstractDraw {
positions = []
entity = null
constructor(options) {
super({
...options,
drawType: DRAW_TYPE.LINE
})
this.init()
}
init() {
this.positions = []
this.initEventHandler()
}
initEventHandler() {
this.$onStart.addEventListener(this.onStart.bind(this))
this.$onMove.addEventListener(this.onMove.bind(this))
this.$onEnd.addEventListener(this.onEnd.bind(this))
}
onStart(moment) {
let cartesian = getCartesian3FromPX(this.$viewer, moment.position)
if (cartesian) {
if (!this.positions.length) {
this.positions.push(cartesian)
let entity = this.entity = this.$createDrawPolyline(new Cesium.CallbackProperty(() => {
return this.positions
}, false))
this.$entities.add(entity)
}
this.positions.push(cartesian)
this.$options.start && this.$options.start({
entity: this.entity,
positions: this.positions,
//wgs84s: this.positions.map(item => transformCartesian2WGS84(item))
})
}
}
onMove(moment) {
let cartesian = getCartesian3FromPX(this.$viewer, moment.endPosition)
if (cartesian) {
this.positions.pop()
this.positions.push(cartesian)
}
}
async onEnd(moment) {
this.positions.pop()
this.$entities.remove(this.entity)
this.entity = null
let positions = this.positions.map(item => Cesium.Cartesian3.clone(item))
let entity = await this.createClampedPolyline(this.$viewer, positions)
this.$entities.add(entity)
//给 entity 添加中心点 label
this.$addLabelOnEntityByCenter(DRAW_TYPE.LINE, entity)
this.$options.end && this.$options.end({
entity: entity,
positions: positions,
})
}
createClampedPolyline(viewer, positions, options) {
return new Promise((resolve, reject) => {
viewer.scene
.clampToHeightMostDetailed(positions)
.then((clampedCartesians) => {
let entity = new Cesium.Entity()
entity.polyline = {
positions: clampedCartesians,
arcType: Cesium.ArcType.NONE,
width: 2,
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.YELLOW,
}),
depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.YELLOW,
}),
...options
}
resolve(entity)
})
})
}
}
export default LineDraw
\ No newline at end of file
import AbstractDraw, { DRAW_TYPE } from "./AbstractDraw";
import { getCartesian3FromPX, transformCartesian2WGS84 } from "../utils"
class PointDraw extends AbstractDraw {
positions = []
entity = null
constructor(options){
super({
...options,
drawType: DRAW_TYPE.POINT
})
this.init()
}
init(){
this.initEventHandler()
}
initEventHandler(){
this.$onStart.addEventListener(this.onStart.bind(this))
this.$onEnd.addEventListener(this.onEnd.bind(this))
}
onStart(moment){
let cartesian = getCartesian3FromPX(this.$viewer, moment.position)
if(cartesian){
let point = this.entity = this.$createDrawPoint(cartesian)
this.$entities.add(point)
this.positions.push(point)
this.$addLabelOnDrawEntity(point, {
text: "默认点标注"
})
this.$options.start && this.$options.start({
entity: point,
wgs84: transformCartesian2WGS84(cartesian)
})
}
}
// onMove(moment){
// this.$options.move && this.$options.move(this.positions)
// }
onEnd(moment){
this.$options.end && this.$options.end({
entity: this.entity,
positions: this.positions
})
}
}
export default PointDraw
\ No newline at end of file
import AbstractDraw, { DRAW_TYPE } from "./AbstractDraw";
import { getCartesian3FromPX } from "../utils"
class Rectangle extends AbstractDraw {
positions = []
entity = null
constructor(options) {
super({
...options,
drawType: DRAW_TYPE.LINE
})
this.init()
}
init() {
this.positions = []
this.initEventHandler()
}
initEventHandler() {
this.$onStart.addEventListener(this.onStart.bind(this))
this.$onMove.addEventListener(this.onMove.bind(this))
this.$onEnd.addEventListener(this.onEnd.bind(this))
}
onStart(moment) {
let cartesian = getCartesian3FromPX(this.$viewer, moment.position)
if (cartesian) {
if (!this.positions.length) {
this.positions.push(cartesian)
let entity = this.entity = this.$createDrawPolyline(new Cesium.CallbackProperty(() => {
return this.positions
}, false))
this.$entities.add(entity)
}
this.positions.push(cartesian)
this.$options.start && this.$options.start({
entity: this.entity,
positions: this.positions,
//wgs84s: this.positions.map(item => transformCartesian2WGS84(item))
})
}
}
onMove(moment) {
let cartesian = getCartesian3FromPX(this.$viewer, moment.endPosition)
if (cartesian) {
this.positions.pop()
this.positions.push(cartesian)
}
}
async onEnd(moment) {
this.positions.pop()
this.$entities.remove(this.entity)
this.entity = null
let positions = this.positions.map(item => Cesium.Cartesian3.clone(item))
let entity = await this.createClampedPolyline(this.$viewer, positions)
this.$entities.add(entity)
//给 entity 添加中心点 label
this.$addLabelOnEntityByCenter(DRAW_TYPE.LINE, entity)
this.$options.end && this.$options.end({
entity: entity,
positions: positions,
})
}
createClampedPolyline(viewer, positions, options) {
return new Promise((resolve, reject) => {
viewer.scene
.clampToHeightMostDetailed(positions)
.then((clampedCartesians) => {
let entity = new Cesium.Entity()
entity.polyline = {
positions: clampedCartesians,
arcType: Cesium.ArcType.NONE,
width: 2,
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.YELLOW,
}),
depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.YELLOW,
}),
...options
}
resolve(entity)
})
})
}
}
export default Rectangle
\ No newline at end of file
import { DRAW_TYPE } from "./AbstractDraw"
import DrawFactory from "./DrawFactory";
export default {
DRAW_TYPE,
DrawFactory
}
\ No newline at end of file
import { CreatePoint } from './CreatePoint'
import { CreatePolyline } from './createPolyline'
import { CreatePolygon } from './createPolygon'
const DrawTool = function(obj) {
this.viewer = obj.viewer;
this.hasEdit = obj.hasEdit;
this.toolArr = [];
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
}
DrawTool.prototype = {
startDraw: function(opt) {
if (this.hasEdit) {
this.bindEdit();
}
if (opt.type == "polyline") {
var polyline = new CreatePolyline(this.viewer, opt.style);
polyline.startCreate(opt.success); //绘制完成之后的回调
this.toolArr.push(polyline);
}
if (opt.type == "polygon") {
var polygon = new CreatePolygon(this.viewer, opt.style);
polygon.startCreate(opt.success); //绘制完成之后的回调
this.toolArr.push(polygon);
}
// if (opt.type == "singleline") {
// var singleline = new CreateSingleline(this.viewer, opt.style);
// singleline.startCreate(opt.success); //绘制完成之后的回调
// this.toolArr.push(singleline);
// }
if (opt.type == "point") {
var point = new CreatePoint(this.viewer, opt.style);
point.startCreate(opt.success);
this.toolArr.push(point)
}
},
drawByPositions:function(opt){
if (this.hasEdit) {
this.bindEdit();
}
if(!opt) opt = {};
if (opt.type == "polyline") {
var polyline = new CreatePolyline(this.viewer, opt.style);
polyline.createByPositions(opt.positions,opt.success);
this.toolArr.push(polyline);
}
if (opt.type == "polygon") {
var polygon = new CreatePolygon(this.viewer, opt.style);
polygon.createByPositions(opt.positions,opt.success);
this.toolArr.push(polygon);
}
if (opt.type == "point") {
console.log("point")
}
},
destroy:function(){
for(var i=0;i<this.toolArr.length;i++){
var obj = this.toolArr[i];
obj.destroy();
}
},
lastSelectEntity: null,
bindEdit: function() {
var $this = this;
this.handler.setInputAction(function(evt) { //单机开始绘制
var pick = $this.viewer.scene.pick(evt.position);
if (Cesium.defined(pick) && pick.id) {
for (var i = 0; i < $this.toolArr.length; i++) {
if (pick.id.objId == $this.toolArr[i].objId) {
$this.lastSelectEntity = $this.toolArr[i];
$this.toolArr[i].startModify();
break;
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
}
export default DrawTool
\ No newline at end of file
import point_icon_01 from '@/assets/images/point-icon/point_icon_01.svg'
import point_icon_02 from '@/assets/images/point-icon/point_icon_02.svg'
import point_icon_03 from '@/assets/images/point-icon/point_icon_03.svg'
import point_icon_04 from '@/assets/images/point-icon/point_icon_04.svg'
import point_icon_05 from '@/assets/images/point-icon/point_icon_05.svg'
import point_icon_06 from '@/assets/images/point-icon/point_icon_06.svg'
import point_icon_07 from '@/assets/images/point-icon/point_icon_07.svg'
import point_icon_08 from '@/assets/images/point-icon/point_icon_08.svg'
import point_icon_09 from '@/assets/images/point-icon/point_icon_09.svg'
import point_icon_10 from '@/assets/images/point-icon/point_icon_10.svg'
import point_icon_11 from '@/assets/images/point-icon/point_icon_11.svg'
import point_icon_12 from '@/assets/images/point-icon/point_icon_12.svg'
const iconData = [
{
id: 1,
label: '默认',
image: point_icon_01
},
{
id: 2,
label: '排污',
image: point_icon_02
},
{
id: 3,
label: '违建',
image: point_icon_03
},
{
id: 4,
label: '垃圾',
image: point_icon_04
},
{
id: 5,
label: '彩钢棚',
image: point_icon_05
},
{
id: 6,
label: '水面垃圾',
image: point_icon_06
},
{
id: 7,
label: '水闸',
image: point_icon_07
},
{
id: 8,
label: '烟窗',
image: point_icon_08
},
{
id: 9,
label: '秸秆焚烧点',
image: point_icon_09
},
{
id: 10,
label: '政府',
image: point_icon_10
},
{
id: 11,
label: '学校',
image: point_icon_11
},
{
id: 12,
label: '医院',
image: point_icon_12
},
]
export default iconData
// import core from "./core"
// export { default as Viewer } from "./viewer"
export { default as CesiumWidget } from "./cesiumWidget"
export { default as PopupWidget } from "./popupWidget"
export { default as Utils } from "./utils"
export { default as Draw } from "./draw"
// export default core
\ No newline at end of file
import * as turf from '@turf/turf';
import { Message } from 'element-ui'
// geom转cesium坐标数组
export function geomToCartesian3(geom) {
const positions = [];
const geojson = wkt.parse(geom);
const { type, coordinates } = geojson;
if (type === 'Point') {
const [x, y, z] = coordinates;
positions.push(Cesium.Cartesian3.fromDegrees(x, y, z));
} else if (type === 'LineString') {
coordinates.forEach(element => {
const [x, y, z] = element;
positions.push(Cesium.Cartesian3.fromDegrees(x, y, z));
});
} else if (type === 'Polygon') {
coordinates.forEach(element => {
element.forEach(item => {
const [x, y, z] = item;
positions.push(Cesium.Cartesian3.fromDegrees(x, y, z));
});
});
}
return {
type,
positions,
};
}
// 点位转WKTString
export function positionToGeom(wgs84Obj) {
const { type, positions } = wgs84Obj;
let geom = '';
if (type === 'Point') {
geom = wkt.convert({
type: 'Point',
coordinates: positions[0],
});
} else if (type === 'LineString') {
geom = wkt.convert({
type: 'LineString',
coordinates: positions,
});
} else if (type === 'Polygon') {
geom = wkt.convert({
type: 'Polygon',
coordinates: [positions],
});
}
return geom;
}
// cesium坐标转WGS84坐标
export function simpleCartesian3ToWGS84(viewer, position) {
const { ellipsoid } = viewer.scene.globe;
const wgs84 = ellipsoid.cartesianToCartographic(position);
let lng;
let lat;
let alt;
// 弧度转经度
lng = Cesium.Math.toDegrees(wgs84.longitude);
lat = Cesium.Math.toDegrees(wgs84.latitude);
alt = wgs84.height;
return new Cesium.Cartesian3(lng, lat, alt);
}
// Cartesian3ToWGS84
export function cartesian3ToWGS84(viewer, cartesian3Obj) {
const { type, positions } = cartesian3Obj;
let wgs84Positions;
if (type === 'Point') {
wgs84Positions = Array.prototype.map.call(positions, item => {
const wgs84 = simpleCartesian3ToWGS84(viewer, item);
return [wgs84.x, wgs84.y, wgs84.z];
});
} else if (type === 'LineString') {
wgs84Positions = Array.prototype.map.call(positions, item => {
const wgs84 = simpleCartesian3ToWGS84(viewer, item);
return [wgs84.x, wgs84.y, wgs84.z];
});
} else if (type === 'Polygon') {
wgs84Positions = Array.prototype.map.call(positions, item => {
const wgs84 = simpleCartesian3ToWGS84(viewer, item);
return [wgs84.x, wgs84.y, wgs84.z];
});
wgs84Positions.push(wgs84Positions[0]);
}
return {
type,
positions: wgs84Positions,
};
}
// 获取实体中心点
export function computePositionsCenter(wgs84Obj) {
const { type, positions } = wgs84Obj;
let turfPositions;
let positionCenter;
if (type === 'LineString') {
turfPositions = turf.lineString(positions);
positionCenter = turf.centerOfMass(turfPositions);
} else if (type === 'Polygon') {
turfPositions = turf.polygon([positions]);
positionCenter = turf.centerOfMass(turfPositions); // 中心点计算
}
return positionCenter;
}
// 颜色格式调整
export function agbrToRgba(color) {
return color.substring(2, 8) + color.substring(0, 2);
}
// 颜色格式调整
export function hexArgbToHexAbgr(color) {
return `${color.slice(0, 2)}${color.slice(6, 8)}${color.slice(4, 6)}${color.slice(2, 4)}`;
}
// 颜色转换
export function fromCssColorString(param) {
if (typeof param === 'object') {
const { r, g, b, a } = param;
return Cesium.Color.fromCssColorString(`rgba(${r}, ${g}, ${b}, ${a})`);
}
const r = Number.parseInt(param.substring(0, 2), 16);
const g = Number.parseInt(param.substring(2, 4), 16);
const b = Number.parseInt(param.substring(4, 6), 16);
const a = Number.parseInt(param.substring(6, 8), 16);
return Cesium.Color.fromBytes(r, g, b, a);
}
export function getRandomColor() {
const colors = [
'8a2be250',
'ff7f5050',
'dc143c50',
'008b8b50',
'1e90ff50',
'adff2f50',
'ffa50050',
'db709350',
'ff634750',
'48d1cc50',
'f0e68c50',
'6495ed50',
'9370db50',
'da70d650',
'2e8b5750',
'ff7f5050',
];
return colors[Math.floor(Math.random() * colors.length)];
}
// 创建Cesium实体
export const createPolygon = (viewer, options) => {
const { text, geom, color } = options;
// geom转Cartesian3
const cartesian3Obj = geomToCartesian3(geom);
// 坐标转换
const wgs84Obj = cartesian3ToWGS84(viewer, cartesian3Obj);
// 获取中心点
const positionsCenter = computePositionsCenter(wgs84Obj);
const entity = new Cesium.Entity({
position: Cesium.Cartesian3.fromDegrees(
positionsCenter.geometry.coordinates[0],
positionsCenter.geometry.coordinates[1],
wgs84Obj.positions[0][2],
),
polygon: {
hierarchy: cartesian3Obj.positions,
material: fromCssColorString(color),
clampToGround: true,
},
label: {
text,
font: '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, 0),
},
});
viewer.entities.add(entity);
return entity;
};
export const createBillboard = (viewer, options) => {
const { position, text, image } = options;
const entity = new Cesium.Entity({
position,
billboard: {
image,
width: 32,
height: 32,
// scale: 0.6,
// eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -64.0)
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 5000),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
label: {
text,
font: '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian3(0.0, 32, 0.0),
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 5000),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
zIndex: 5000,
},
});
viewer.entities.add(entity);
return entity;
};
export const createPolyline = (viewer, options) => {
const { positions, color = Cesium.Color.YELLOWGREEN, width = 5 } = options;
const entity = new Cesium.Entity({
polyline: new Cesium.PolylineGraphics({
positions,
width,
material: color,
// clampToGround: true,
zIndex: 5000,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 5000),
}),
});
viewer.entities.add(entity);
viewer.flyTo(entity);
return entity;
};
export const createGeomToPoint = (viewer, geom, image, title) => {
const { positions } = geomToCartesian3(geom);
const entity = new Cesium.Entity({
position: positions[0],
billboard: {
image,
width: 32,
height: 32,
// scale: 0.6,
// eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -64.0)
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 5000),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
label: {
text: title,
font: '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian3(0.0, 32, 0.0),
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 5000),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
zIndex: 5000,
},
});
viewer.entities.add(entity);
return entity;
};
export const createGeomToPolyline = (viewer, geom, style, title) => {
const styleObj = JSON.parse(style);
const styleJson = convert.xml2json(styleObj.GeoSymbolXml, { compact: true, spaces: 4 });
const styles = JSON.parse(styleJson);
const color = `0x${hexArgbToHexAbgr(styles.CurveSymbol._attributes.Color)}`;
const width = Math.abs(styles.CurveSymbol._attributes.Width);
const clampToGround = styleObj.HeightStyle !== '1';
const cartesian3Obj = geomToCartesian3(geom); // geom转Cartesian3
const { positions } = cartesian3Obj;
// const wgs84Obj = cartesian3ToWGS84(viewer, cartesian3Obj) // 坐标转换
// const positionsCenter = computePositionsCenter(wgs84Obj) // 获取中心点
// 获取中心点
const polyCenter = Cesium.BoundingSphere.fromPoints(positions).center;
const entity = new Cesium.Entity({
// position: Cesium.Cartesian3.fromDegrees(positionsCenter.geometry.coordinates[0], positionsCenter.geometry.coordinates[1], positions[0][2]),
position: polyCenter,
label: {
text: title,
font: '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -10),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 5000),
pixelOffset: new Cesium.Cartesian2(0, 0),
// clampToGround: clampToGround,
// disableDepthTestDistance: Number.POSITIVE_INFINITY
},
polyline: {
positions,
width,
material: Cesium.Color.fromRgba(color),
clampToGround,
zIndex: 5000,
},
});
viewer.entities.add(entity);
return entity;
};
export const createGeomToPolygon = (viewer, geom, style, title) => {
const styleObj = JSON.parse(style);
const styleJson = convert.xml2json(styleObj.GeoSymbolXml, { compact: true, spaces: 4 });
const styles = JSON.parse(styleJson);
const color = `0x${hexArgbToHexAbgr(styles.SurfaceSymbol._attributes.Color)}`;
const outlineColor = `0x${hexArgbToHexAbgr(styles.SurfaceSymbol.CurveSymbol._attributes.Color)}`;
const width = Math.abs(styles.SurfaceSymbol.CurveSymbol._attributes.Width);
const clampToGround = styleObj.HeightStyle !== '1';
const cartesian3Obj = geomToCartesian3(geom); // geom转Cartesian3
const { positions } = cartesian3Obj;
const wgs84Obj = cartesian3ToWGS84(viewer, cartesian3Obj); // 坐标转换
const positionsCenter = computePositionsCenter(wgs84Obj); // 获取中心点
// const polyCenter = Cesium.BoundingSphere.fromPoints(positions).center
// console.log(color, outlineColor, width)
const point = Cesium.Cartographic.fromDegrees(
positionsCenter.geometry.coordinates[0],
positionsCenter.geometry.coordinates[1],
);
const height = viewer.scene.sampleHeight(point);
const entity = new Cesium.Entity({
position: Cesium.Cartesian3.fromDegrees(
positionsCenter.geometry.coordinates[0],
positionsCenter.geometry.coordinates[1],
height,
),
// position: polyCenter,
label: {
text: title,
font: '18pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -10),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 32.0),
pixelOffset: new Cesium.Cartesian2(0, 0),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
polygon: {
hierarchy: positions,
// material: fromCssColorString(color),
material: Cesium.Color.fromRgba(color),
outline: true,
outlineWidth: width,
// outlineColor: fromCssColorString(outlineColor),
outlineColor: Cesium.Color.fromRgba(outlineColor),
clampToGround,
perPositionHeight: !clampToGround,
},
});
viewer.entities.add(entity);
return entity;
};
// 空间两点距离计算函数
export function getSpaceDistance(positions) {
let distance = 0;
for (let i = 0; i < positions.length - 1; i++) {
const point1cartographic = Cesium.Cartographic.fromCartesian(positions[i]);
const point2cartographic = Cesium.Cartographic.fromCartesian(positions[i + 1]);
/** 根据经纬度计算出距离* */
const geodesic = new Cesium.EllipsoidGeodesic();
geodesic.setEndPoints(point1cartographic, point2cartographic);
let s = geodesic.surfaceDistance;
// console.log(Math.sqrt(Math.pow(distance, 2) + Math.pow(endheight, 2)));
// 返回两点之间的距离
s = Math.sqrt(
Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2),
);
distance += s;
}
return distance.toFixed(2);
}
// 空间面积计算
export function getSpaceArea(positions) {
const col = getCoordinates(positions);
const newCol = col.concat(col.slice(0, 1));
const polygongeojson = turf.polygon([newCol]);
const area = turf.area(polygongeojson);
return area.toFixed(2);
}
const getCoordinates = t => {
const e = [];
for (let i = 0; i < t.length; i++) {
const n = Cesium.Cartographic.fromCartesian(t[i]);
const r = Number(Cesium.Math.toDegrees(n.longitude).toFixed(6));
const o = Number(Cesium.Math.toDegrees(n.latitude).toFixed(6));
const a = Number(n.height.toFixed(1));
e.push([r, o, a]);
}
return e;
};
// 以下三个方法为官方绘制demo
const createPoint = (viewer, drawingMode, worldPosition, activeShapePoints) => {
let distance = 0;
let textDisance = '';
if (activeShapePoints.length > 2 && drawingMode === 'line') {
distance = getSpaceDistance(activeShapePoints);
textDisance = `${distance}米`;
}
const point = viewer.entities.add({
position: worldPosition,
point: {
color: Cesium.Color.RED,
pixelSize: 5,
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND // 开启后点贴地
},
label: {
text: textDisance,
font: '18px sans-serif',
fillColor: Cesium.Color.GOLD,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(20, -20),
},
});
return point;
};
const createLabel = (viewer, positionData) => {
const col = getCoordinates(positionData);
const newCol = col.concat(col.slice(0, 1));
const polygongeojson = turf.polygon([newCol]);
const area = turf.area(polygongeojson);
const textArea = `${area.toFixed(2)}平方米`;
// const centerPoint = turf.centerOfMass(polygongeojson)
// 获取中心点
const polyCenter = Cesium.BoundingSphere.fromPoints(positionData).center;
const label = viewer.entities.add({
name: '多边形面积',
// position: Cesium.Cartesian3.fromDegrees(centerPoint.geometry.coordinates[0], centerPoint.geometry.coordinates[1]),
position: polyCenter,
label: {
text: textArea,
font: '18px sans-serif',
fillColor: Cesium.Color.GOLD,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -10),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, 0),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
return label;
};
export const drawShape = (viewer, drawingMode, positionData) => {
let shape;
if (drawingMode === 'line') {
shape = viewer.entities.add({
polyline: {
positions: positionData,
// clampToGround: true,
material: Cesium.Color.RED.withAlpha(0.4),
width: 3,
},
});
} else if (drawingMode === 'polygon') {
shape = viewer.entities.add({
polygon: {
hierarchy: positionData,
material: new Cesium.ColorMaterialProperty(Cesium.Color.YELLOW.withAlpha(0.4)),
// clampToGround: false,
},
});
}
return shape;
};
export const measure = function (viewer, drawingMode, callback) {
if (!viewer.scene.pickPositionSupported) {
window.alert('This browser does not support pickPosition.');
}
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
);
let activeShapePoints = [];
let activeShape = null;
let floatingPoint = null;
let backShapePoints = null;
const backShapeEntities = [];
if (drawingMode == 'line') {
viewer.scene.globe.depthTestAgainstTerrain = false; // 开启地形深度检测
} else {
viewer.scene.globe.depthTestAgainstTerrain = true; // 开启地形深度检测
}
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(event => {
// We use `viewer.scene.pickPosition` here instead of `viewer.camera.pickEllipsoid` so that
// we get the correct point when mousing over terrain.
// let earthPosition = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid)
const earthPosition = viewer.scene.pickPosition(event.position);
// `earthPosition` will be undefined if our mouse is not over the globe.
if (Cesium.defined(earthPosition)) {
if (!activeShapePoints || activeShapePoints.length === 0) {
floatingPoint = createPoint(earthPosition);
activeShapePoints.push(earthPosition);
const dynamicPositions = new Cesium.CallbackProperty(() => {
if (drawingMode === 'polygon') {
return new Cesium.PolygonHierarchy(activeShapePoints);
}
return activeShapePoints;
}, false);
activeShape = drawShape(dynamicPositions);
}
activeShapePoints.push(earthPosition);
// createPoint(earthPosition)
createPoint(earthPosition, activeShapePoints);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(event => {
if (Cesium.defined(floatingPoint)) {
const newPosition = viewer.scene.pickPosition(event.endPosition);
if (Cesium.defined(newPosition)) {
floatingPoint.position.setValue(newPosition);
activeShapePoints.pop();
activeShapePoints.push(newPosition);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(event => {
const result = terminateShape();
if (result) {
// viewer.scene.globe.depthTestAgainstTerrain = false // 关闭地形深度检测
callback(backShapePoints, backShapeEntities);
handler.destroy() //关闭事件句柄
handler = null
viewer.scene.globe.depthTestAgainstTerrain = false; // 关闭地形深度检测
}
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
//点
function createPoint(worldPosition, activeShapePoints) {
let point;
if (drawingMode === 'line' && Array.isArray(activeShapePoints)) {
const distance = getSpaceDistance(activeShapePoints);
point = viewer.entities.add({
position: worldPosition,
point: {
color: Cesium.Color.RED,
pixelSize: 20,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
label: {
text: `${distance}米`,
font: '18px sans-serif',
fillColor: Cesium.Color.BLUE,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(20, -20),
},
});
} else {
point = viewer.entities.add({
position: worldPosition,
point: {
color: Cesium.Color.RED,
pixelSize: 20,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
}
backShapeEntities.push(point);
return point;
}
// Redraw the shape so it's not dynamic and remove the dynamic shape.
function terminateShape() {
activeShapePoints.pop();
const result = drawShape(activeShapePoints);
if (!result) return false;
viewer.entities.remove(floatingPoint);
viewer.entities.remove(activeShape);
floatingPoint = undefined;
activeShape = undefined;
activeShapePoints = [];
return true;
}
//画形状
function drawShape(positionData) {
backShapePoints = positionData;
let shape;
let label;
if (drawingMode === 'line') {
if (backShapePoints.length < 2) {
new Message.warning({
message: "请最少选择两个点",
duration: 2000
})
//message.warning('请最少选择两个点');
return false;
}
shape = viewer.entities.add({
//线
polyline: {
positions: positionData,
material: Cesium.Color.RED.withAlpha(0.7),
clampToGround: true,
width: 3,
},
});
} else if (drawingMode === 'polygon') {
if (backShapePoints.length < 3) {
new Message.warning({
message: "请最少选择三个点",
duration: 2000
})
return false;
}
shape = viewer.entities.add({
polygon: {
hierarchy: positionData,
material: new Cesium.ColorMaterialProperty(Cesium.Color.BLUE.withAlpha(0.4)),
},
});
}
if (drawingMode === 'polygon' && Array.isArray(positionData)) {
if (backShapePoints.length < 3) {
new Message.warning({
message: "请最少选择三个点",
duration: 2000
})
return false;
}
const wgs84Obj = cartesian3ToWGS84(viewer, {
type: 'Polygon',
positions: positionData,
});
// 获取中心点
const positionsCenter = computePositionsCenter(wgs84Obj);
const point = Cesium.Cartographic.fromDegrees(
positionsCenter.geometry.coordinates[0],
positionsCenter.geometry.coordinates[1],
);
const height = viewer.scene.sampleHeight(point);
const polyCenter = Cesium.Cartesian3.fromDegrees(
positionsCenter.geometry.coordinates[0],
positionsCenter.geometry.coordinates[1],
height,
);
// const polyCenter = Cesium.BoundingSphere.fromPoints(positionData).center
const col = getCoordinates(positionData);
const newCol = col.concat(col.slice(0, 1));
const polygongeojson = turf.polygon([newCol]);
const area = turf.area(polygongeojson);
// console.log(area)
label = viewer.entities.add({
position: polyCenter,
label: {
text: `${area.toFixed(2)}平方米`,
font: '18px sans-serif',
fillColor: Cesium.Color.GOLD,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(20, -20),
eyeOffset: new Cesium.Cartesian3(0, 0, -10),
},
});
}
backShapeEntities.push(shape);
backShapeEntities.push(label);
return shape;
}
return handler;
};
export const measureElevation = (viewer, callback) => {
if (!viewer.scene.pickPositionSupported) {
window.alert('This browser does not support pickPosition.');
}
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
);
let activeShapePoints = [];
let activeShape;
let floatingPoint;
let backShapePoints = [];
const backShapeEntities = [];
viewer.scene.globe.depthTestAgainstTerrain = true; // 开启地形深度检测
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction((event) => {
// We use `viewer.scene.pickPosition` here instead of `viewer.camera.pickEllipsoid` so that
// we get the correct point when mousing over terrain.
// let earthPosition = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid)
const earthPosition = viewer.scene.pickPosition(event.position);
// `earthPosition` will be undefined if our mouse is not over the globe.
if (Cesium.defined(earthPosition)) {
if (activeShapePoints.length === 0) {
floatingPoint = createPoint(earthPosition);
activeShapePoints.push(earthPosition);
const dynamicPositions = new Cesium.CallbackProperty((() =>
// if (drawingMode === "polygon") {
// return new Cesium.PolygonHierarchy(activeShapePoints)
// }
activeShapePoints
), false);
activeShape = drawShape(dynamicPositions);
}
activeShapePoints.push(earthPosition);
// createPoint(earthPosition)
createPoint(earthPosition, activeShapePoints);
if (activeShapePoints.length >= 3) {
terminateShape();
// viewer.scene.globe.depthTestAgainstTerrain = false // 关闭地形深度检测
callback(backShapePoints, backShapeEntities);
handler.destroy(); // 关闭事件句柄
handler = null;
// backShapeEntities.forEach(item => {
// // viewer.entities.removeById(item)
// viewer.entities.remove(item)
// })
// measureElevation(viewer, callback)
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction((event) => {
if (Cesium.defined(floatingPoint)) {
const newPosition = viewer.scene.pickPosition(event.endPosition);
if (Cesium.defined(newPosition)) {
floatingPoint.position.setValue(newPosition);
activeShapePoints.pop();
activeShapePoints.push(newPosition);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction((event) => {
terminateShape();
// viewer.scene.globe.depthTestAgainstTerrain = false // 关闭地形深度检测
callback(backShapePoints, backShapeEntities);
// handler.destroy() //关闭事件句柄
// handler = null
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
function createPoint(worldPosition, activeShapePoints) {
let point;
if (Array.isArray(activeShapePoints)) {
// let distance = getSpaceDistance(activeShapePoints)
// var cartographic1 = Cesium.Cartographic.fromCartesian(activeShapePoints[0]);
const height1 = Cesium.Cartographic.fromCartesian(activeShapePoints[0]).height;
// var cartographic1 = Cesium.Cartographic.fromCartesian(cartesian);
const height2 = Cesium.Cartographic.fromCartesian(activeShapePoints[1]).height;
const distance = Math.abs(height1 - height2).toFixed(2);
point = viewer.entities.add({
position: worldPosition,
point: {
color: Cesium.Color.RED,
pixelSize: 5,
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 添加后显示点贴地
},
label: {
text: `${distance}米`,
font: '18px sans-serif',
fillColor: Cesium.Color.GOLD,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(20, -20),
},
});
} else {
point = viewer.entities.add({
position: worldPosition,
point: {
color: Cesium.Color.RED,
pixelSize: 8,
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 添加后显示点贴地
},
});
}
backShapeEntities.push(point);
return point;
}
// Redraw the shape so it's not dynamic and remove the dynamic shape.
function terminateShape() {
activeShapePoints.pop();
drawShape(activeShapePoints);
viewer.entities.remove(floatingPoint);
viewer.entities.remove(activeShape);
floatingPoint = undefined;
activeShape = undefined;
activeShapePoints = [];
}
function drawShape(positionData) {
backShapePoints = positionData;
const shape = viewer.entities.add({
polyline: {
positions: positionData,
material: Cesium.Color.RED.withAlpha(0.4),
clampToGround: false,
width: 3,
},
});
backShapeEntities.push(shape);
return shape;
}
return handler;
};
// 标注相关
export const createLabelPolyline = (viewer, options) => {
const { positions, text, color, width = 5 } = options;
// 获取中心点
const polyCenter = Cesium.BoundingSphere.fromPoints(positions).center;
const entity = new Cesium.Entity({
position: polyCenter,
label: {
text,
font: '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -10),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, 0),
},
polyline: new Cesium.PolylineGraphics({
positions,
width,
material: color ? fromCssColorString(color) : Cesium.Color.YELLOWGREEN,
clampToGround: true,
zIndex: 5000,
}),
});
viewer.entities.add(entity);
return entity;
};
export const createLabelPolygon = (viewer, options) => {
const { text, positions, color } = options;
// geom转Cartesian3
// let cartesian3Obj = geomToCartesian3(geom)
// 坐标转换
const wgs84Obj = cartesian3ToWGS84(viewer, {
type: 'Polygon',
positions,
});
// 获取中心点
// const polyCenter = Cesium.BoundingSphere.fromPoints(positions).center
const positionsCenter = computePositionsCenter(wgs84Obj);
const point = Cesium.Cartographic.fromDegrees(
positionsCenter.geometry.coordinates[0],
positionsCenter.geometry.coordinates[1],
);
const height = viewer.scene.sampleHeight(point);
const entity = new Cesium.Entity({
position: Cesium.Cartesian3.fromDegrees(
positionsCenter.geometry.coordinates[0],
positionsCenter.geometry.coordinates[1],
height,
),
// position: polyCenter,
label: {
// text,
// font: '14pt monospace',
// style: Cesium.LabelStyle.FILL_AND_OUTLINE,
// outlineWidth: 2,
// eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -10),
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// pixelOffset: new Cesium.Cartesian2(0, 0),
// disableDepthTestDistance: Number.POSITIVE_INFINITY,
text,
font: '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -10),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// pixelOffset: new Cesium.Cartesian2(0, 0),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
pixelOffset: new Cesium.Cartesian2(20, -20),
},
polygon: {
hierarchy: positions,
// perPositionHeight: true,
material: fromCssColorString(color),
outline: true,
outlineColor: Cesium.Color.BLACK,
clampToGround: true,
perPositionHeight: false,
},
});
viewer.entities.add(entity);
return entity;
};
/**
* 32位色值转rgba
* @param {*} hex 例如:ffff0000 (顺序:argb)
* @returns
*/
export function hexToRgba(hex) {
return {
a: parseInt(`0x${hex.slice(0, 2)}`) / 255,
r: parseInt(`0x${hex.slice(2, 4)}`),
g: parseInt(`0x${hex.slice(4, 6)}`),
b: parseInt(`0x${hex.slice(6, 8)}`),
};
}
/**
* rgba转32位色值
* @param rgba { r: 255, g: 0, b: 0, a: 1 }
* @returns hex 例如:ffff0000 (顺序:argb)
*/
export function rgbaToHex(rgba) {
let r;
let g;
let b;
let a;
a = `0${Math.floor(rgba.a * 255).toString(16)}`.slice(-2);
r = `0${parseInt(rgba.r).toString(16)}`.slice(-2);
g = `0${parseInt(rgba.g).toString(16)}`.slice(-2);
b = `0${parseInt(rgba.b).toString(16)}`.slice(-2);
return (a + r + g + b).toUpperCase();
}
// 根据经纬度获取高度
export function getHeigthByLonLat(viewer, lon = 87.5968, lat = 43.8084) {
// viewer.scene.globe.depthTestAgainstTerrain = true // 开启地形深度检测
const positions = Cesium.Cartographic.fromDegrees(lon, lat);
const height = viewer.scene.sampleHeight(positions);
// var height = viewer.scene.globe.getHeight(positions)
// let promise = viewer.scene.sampleHeightMostDetailed([positions]);
// promise.then(function (updatedPosition) {
// // positions[0].height and positions[1].height have been updated.
// // updatedPositions is just a reference to positions.
// console.log("zhang", lon, lat, updatedPosition[0].height)
// })
// let promise = new Cesium.sampleTerrain(viewer.terrainProvider, 13, [positions])
// promise = Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, positions)
// Cesium.when(new Cesium.sampleTerrain(viewer.terrainProvider, 13, [positions]), function (updatedPositions) {
// console.log("zhang",lon,lat,updatedPositions[0].height)
// })
}
// 获取XML style
export function getXMLStyle(type, width, height, hex, fillHex) {
let cmObj;
let cmXml;
let style = '';
if (type === 'polyline') {
cmObj = {
CurveSymbol: {
_attributes: {
Color: hex,
RepeatLength: '1.000000',
Width: width,
DashStyle: 'DashSolid',
},
},
};
} else if (type === 'polygon') {
cmObj = {
SurfaceSymbol: {
_attributes: {
Color: fillHex,
EnableLight: 'false',
RepeatLengthU: '1.000000',
RepeatLengthV: '1.000000',
Rotation: '0.000000',
},
CurveSymbol: {
_attributes: {
Color: hex,
RepeatLength: '1.000000',
Width: width,
DashStyle: 'DashSolid',
},
},
},
};
}
cmXml = convert.js2xml(cmObj, { compact: true, spaces: 4 });
style = JSON.stringify({
HeightStyle: height,
GeoSymbolXml: cmXml,
TextSymbolXml: '',
});
return style;
}
/**
* 方量计算中使用
* @param points 顶点坐标
*/
// 计算多边形面积
export function getArea(points) {
const radiansPerDegree = Math.PI / 180.0; // 角度转化为弧度(rad)
const degreesPerRadian = 180.0 / Math.PI; // 弧度转化为角度
/* 角度 */
function Angle(p1, p2, p3) {
const bearing21 = Bearing(p2, p1);
const bearing23 = Bearing(p2, p3);
let angle = bearing21 - bearing23;
if (angle < 0) {
angle += 360;
}
return angle;
}
/* 方向 */
function Bearing(from, to) {
from = Cesium.Cartographic.fromCartesian(from);
to = Cesium.Cartographic.fromCartesian(to);
const lat1 = from.latitude;
const lon1 = from.longitude;
const lat2 = to.latitude;
const lon2 = to.longitude;
let angle = -Math.atan2(
Math.sin(lon1 - lon2) * Math.cos(lat2),
Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2),
);
if (angle < 0) {
angle += Math.PI * 2.0;
}
angle *= degreesPerRadian; // 角度
return angle;
}
function distance(point1, point2) {
const point1cartographic = Cesium.Cartographic.fromCartesian(point1);
const point2cartographic = Cesium.Cartographic.fromCartesian(point2);
/** 根据经纬度计算出距离* */
const geodesic = new Cesium.EllipsoidGeodesic();
geodesic.setEndPoints(point1cartographic, point2cartographic);
let s = geodesic.surfaceDistance;
// console.log(Math.sqrt(Math.pow(distance, 2) + Math.pow(endheight, 2)));
// 返回两点之间的距离
s = Math.sqrt(
Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2),
);
return s;
}
let res = 0;
// 拆分三角曲面
for (let i = 0; i < points.length - 2; i++) {
const j = (i + 1) % points.length;
const k = (i + 2) % points.length;
const totalAngle = Angle(points[i], points[j], points[k]);
const dis_temp1 = distance(points[j], points[0]);
const dis_temp2 = distance(points[k], points[0]);
res += (dis_temp1 * dis_temp2 * Math.sin(totalAngle)) / 2;
// console.log(res);
}
// if (res < 1000000) {
//
// res = Math.abs(res).toFixed(4) + " 平方米";
// } else {
//
// res = Math.abs((res / 1000000.0).toFixed(4)) + " 平方公里";
// }
return Math.abs(res);
}
export const measureTypes = {
HORL: 'horizontal',
VERL: 'vertical',
AREA: 'area',
VOLUME: 'volume',
};
export function drawGraphic(viewer, drawingMode, callback) {
if (!viewer.scene.pickPositionSupported) {
window.alert("This browser does not support pickPosition.")
}
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
)
let activeShapePoints = []
let activeShape = null
let floatingPoint = null
let backShapePoints = []
const backShapeEntities = []
viewer.scene.globe.depthTestAgainstTerrain = true // 开启地形深度检测
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
handler.setInputAction((event) => {
// We use `viewer.scene.pickPosition` here instead of `viewer.camera.pickEllipsoid` so that
// we get the correct point when mousing over terrain.
// let earthPosition = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid)
const earthPosition = viewer.scene.pickPosition(event.position)
// try {
// let ellipsoid = viewer.scene.globe.ellipsoid
// cartesian3 = ellipsoid.cartographicToCartesian(earthPosition)
// } catch (e) {
// console.log(e)
// }
// if (!earthPosition) {
// earthPosition = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid)
// }
// `earthPosition` will be undefined if our mouse is not over the globe.
if (Cesium.defined(earthPosition)) {
if (activeShapePoints.length === 0) {
floatingPoint = createPoint(earthPosition)
if (drawingMode === "point") {
handler.destroy() // 关闭事件句柄
handler = null
callback([earthPosition], [floatingPoint])
return
}
activeShapePoints.push(earthPosition)
const dynamicPositions = new Cesium.CallbackProperty((() => {
if (drawingMode === "polygon") {
return new Cesium.PolygonHierarchy(activeShapePoints)
}
return activeShapePoints
}), false)
if (drawingMode !== 'point') {
activeShape = drawShape(dynamicPositions)
}
}
activeShapePoints.push(earthPosition)
createPoint(earthPosition)
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
handler.setInputAction((event) => {
if (Cesium.defined(floatingPoint)) {
const newPosition = viewer.scene.pickPosition(event.endPosition)
if (Cesium.defined(newPosition)) {
floatingPoint.position.setValue(newPosition)
activeShapePoints.pop()
activeShapePoints.push(newPosition)
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
handler.setInputAction((event) => {
terminateShape()
viewer.scene.globe.depthTestAgainstTerrain = false // 关闭地形深度检测
callback(backShapePoints, backShapeEntities)
handler.destroy() // 关闭事件句柄
handler = null
// viewer.entities.remove(floatingPoint)
// viewer.entities.remove(activeShapePoints)
// viewer.entities.remove(activeShape)
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
function createPoint(worldPosition) {
const point = viewer.entities.add({
position: worldPosition,
point: {
color: Cesium.Color.RED,
pixelSize: 5,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
})
backShapeEntities.push(point)
return point
}
// Redraw the shape so it's not dynamic and remove the dynamic shape.
function terminateShape() {
activeShapePoints.pop()
drawShape(activeShapePoints)
viewer.entities.remove(floatingPoint)
viewer.entities.remove(activeShape)
floatingPoint = undefined
activeShape = undefined
activeShapePoints = []
}
function drawShape(positionData) {
backShapePoints = positionData
let shape
if (drawingMode === "line") {
shape = viewer.entities.add({
polyline: {
positions: positionData,
clampToGround: true,
width: 3,
material: new Cesium.ColorMaterialProperty(
Cesium.Color.RED.withAlpha(0.5)
)
},
})
} else if (drawingMode === "polygon") {
shape = viewer.entities.add({
polygon: {
hierarchy: positionData,
material: new Cesium.ColorMaterialProperty(
Cesium.Color.YELLOWGREEN.withAlpha(0.5)
),
},
})
}
backShapeEntities.push(shape)
return shape
}
}
\ No newline at end of file
class Popup {
handler=null
constructor(viewer, options){
this.$viewer = viewer
this.$options = options
this.init()
}
init(){
let viewer = this.$viewer
this.handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
viewer.clock.onTick.addEventListener(() => {
console.log("onTick:");
})
}
render(){}
destroy(){}
createHtml(header, content){
let html = `<div>html test</div>`
}
}
export default Popup
\ No newline at end of file
// import Cesium from "./core"
import wkt from 'terraformer-wkt-parser'
export function transformWGS842Cartesian(position, alt) {
return position
? Cesium.Cartesian3.fromDegrees(
position.lng,
position.lat,
(position.alt = alt || position.alt),
Cesium.Ellipsoid.WGS84
)
: Cesium.Cartesian3.ZERO;
}
export function transformCartesian2WGS84(cartesian) {
let ellipsoid = Cesium.Ellipsoid.WGS84;
let cartographic = ellipsoid.cartesianToCartographic(cartesian);
return {
lng: Cesium.Math.toDegrees(cartographic.longitude),
lat: Cesium.Math.toDegrees(cartographic.latitude),
alt: cartographic.height,
};
}
export function getCartesian3FromPX(viewer, px) {
let picks = viewer.scene.drillPick(px);
let isOn3dtiles = false,
isOnTerrain = false,
cartesian = null;
for (let i in picks) {
let pick = picks[i];
if (
pick &&
(pick.primitive instanceof Cesium.Cesium3DTileFeature ||
pick.primitive instanceof Cesium.Cesium3DTileset ||
pick.primitive instanceof Cesium.Model)
) {
isOn3dtiles = true;
}
//is on 3dtiles
if (isOn3dtiles) {
viewer.scene.pick(px);
cartesian = viewer.scene.pickPosition(px);
if (cartesian) {
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
if (cartographic.height < 0) cartographic.height = 0;
let lng = Cesium.Math.toDegrees(cartographic.longitude);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
let alt = cartographic.height;
cartesian = transformWGS842Cartesian({ lng, lat, alt });
}
}
}
// is ellipsoid terrain
let boolTerrain =
viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider;
// is other terrain
if (!isOn3dtiles && !boolTerrain) {
let ray = viewer.scene.camera.getPickRay(px);
if (!ray) return null;
cartesian = viewer.scene.globe.pick(ray, viewer.scene);
isOnTerrain = true;
}
if (!isOn3dtiles && !isOnTerrain && boolTerrain) {
cartesian = viewer.scene.camera.pickEllipsoid(
px,
viewer.scene.globe.ellipsoid
);
}
// 避免位置陷入地下
if (cartesian) {
let position = transformCartesian2WGS84(cartesian);
if (position.alt < 0) {
cartesian = transformWGS842Cartesian(position, 0.1);
}
}
return cartesian;
}
//geom转position
export function geomToCartesian3(geom) {
let positions = []
let geojson = wkt.parse(geom)
let { type, coordinates } = geojson
if (type === 'Point') {
let [x, y, z] = coordinates
positions.push(Cesium.Cartesian3.fromDegrees(x, y, z))
} else if (type === 'LineString') {
coordinates.forEach((element) => {
let [x, y, z] = element
positions.push(Cesium.Cartesian3.fromDegrees(x, y, z))
})
} else if (type === 'Polygon') {
coordinates.forEach((element) => {
element.forEach((item) => {
let [x, y, z] = item
positions.push(Cesium.Cartesian3.fromDegrees(x, y, z))
})
})
}
return {
type,
positions,
}
}
/**
* 将单个 Cartesian3 坐标转换为 WGS84 坐标
*
* @export
* @param {*} position
* @returns
*/
export function simpleCartesian3ToWGS84(position, viewer) {
let ellipsoid = viewer.scene.globe.ellipsoid
let cartographic = ellipsoid.cartesianToCartographic(position)
//弧度转经度
let wgs84 = {}
wgs84.longitude = Cesium.Math.toDegrees(cartographic.longitude)
wgs84.latitude = Cesium.Math.toDegrees(cartographic.latitude)
wgs84.altitude = cartographic.height
return wgs84
}
// 点位转WKTString
export function positionToGeom(wgs84Obj) {
const { type, positions } = wgs84Obj
let geom = ''
if (type === 'Point') {
geom = wkt.convert({
type: 'Point',
coordinates: positions[0],
})
} else if (type === 'LineString') {
geom = wkt.convert({
type: 'LineString',
coordinates: positions,
})
} else if (type === 'Polygon') {
geom = wkt.convert({
type: 'Polygon',
coordinates: [positions],
})
}
return geom
}
// Cartesian3ToWGS84
export function cartesian3ToWGS84(viewer, cartesian3Obj) {
const { type, positions } = cartesian3Obj
let wgs84Positions
if (type === 'Point') {
wgs84Positions = Array.prototype.map.call(positions, (item) => {
let wgs84 = simpleCartesian3ToWGS84(item, viewer)
return [wgs84.longitude, wgs84.latitude, wgs84.altitude]
})
} else if (type === 'LineString') {
wgs84Positions = Array.prototype.map.call(positions, (item) => {
let wgs84 = simpleCartesian3ToWGS84(item, viewer)
return [wgs84.longitude, wgs84.latitude, wgs84.altitude]
})
} else if (type === 'Polygon') {
wgs84Positions = Array.prototype.map.call(positions, (item) => {
let wgs84 = simpleCartesian3ToWGS84(item, viewer)
return [wgs84.longitude, wgs84.latitude, wgs84.altitude]
})
wgs84Positions.push(wgs84Positions[0])
}
return {
type,
positions: wgs84Positions,
}
}
export function addZero(num) {
if (parseInt(num) < 10) {
num = '0' + num
}
return num
}
export default {
transformWGS842Cartesian,
transformCartesian2WGS84,
getCartesian3FromPX,
}
\ No newline at end of file
// import Cesium from "./core"
export default class Viewer extends Cesium.Viewer {
constructor(container, options){
super(container, {
animation: false, // 动画控制不显示
shouldAnimate: true,
timeline: false, // 时间线不显示
fullscreenButton: false, // 全屏按钮不显示
creditContainer: document.createElement("div"),
geocoder: false,
homeButton: false,
sceneModePicker: false, // 切换球形和平面型
baseLayerPicker: false,
navigationHelpButton: false,
infoBox: false,
selectionIndicator: false,
// imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
// url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
// }),
// imageryProvider: false,
...options
})
}
}
//CRC 校验表
var crc_table = new Array(
0x00, 0x31, 0x62, 0x53, 0xc4, 0xf5, 0xa6, 0x97, 0xb9, 0x88, 0xdb, 0xea, 0x7d, 0x4c, 0x1f, 0x2e,
0x43, 0x72, 0x21, 0x10, 0x87, 0xb6, 0xe5, 0xd4, 0xfa, 0xcb, 0x98, 0xa9, 0x3e, 0x0f, 0x5c, 0x6d,
0x86, 0xb7, 0xe4, 0xd5, 0x42, 0x73, 0x20, 0x11, 0x3f, 0x0e, 0x5d, 0x6c, 0xfb, 0xca, 0x99, 0xa8,
0xc5, 0xf4, 0xa7, 0x96, 0x01, 0x30, 0x63, 0x52, 0x7c, 0x4d, 0x1e, 0x2f, 0xb8, 0x89, 0xda, 0xeb,
0x3d, 0x0c, 0x5f, 0x6e, 0xf9, 0xc8, 0x9b, 0xaa, 0x84, 0xb5, 0xe6, 0xd7, 0x40, 0x71, 0x22, 0x13,
0x7e, 0x4f, 0x1c, 0x2d, 0xba, 0x8b, 0xd8, 0xe9, 0xc7, 0xf6, 0xa5, 0x94, 0x03, 0x32, 0x61, 0x50,
0xbb, 0x8a, 0xd9, 0xe8, 0x7f, 0x4e, 0x1d, 0x2c, 0x02, 0x33, 0x60, 0x51, 0xc6, 0xf7, 0xa4, 0x95,
0xf8, 0xc9, 0x9a, 0xab, 0x3c, 0x0d, 0x5e, 0x6f, 0x41, 0x70, 0x23, 0x12, 0x85, 0xb4, 0xe7, 0xd6,
0x7a, 0x4b, 0x18, 0x29, 0xbe, 0x8f, 0xdc, 0xed, 0xc3, 0xf2, 0xa1, 0x90, 0x07, 0x36, 0x65, 0x54,
0x39, 0x08, 0x5b, 0x6a, 0xfd, 0xcc, 0x9f, 0xae, 0x80, 0xb1, 0xe2, 0xd3, 0x44, 0x75, 0x26, 0x17,
0xfc, 0xcd, 0x9e, 0xaf, 0x38, 0x09, 0x5a, 0x6b, 0x45, 0x74, 0x27, 0x16, 0x81, 0xb0, 0xe3, 0xd2,
0xbf, 0x8e, 0xdd, 0xec, 0x7b, 0x4a, 0x19, 0x28, 0x06, 0x37, 0x64, 0x55, 0xc2, 0xf3, 0xa0, 0x91,
0x47, 0x76, 0x25, 0x14, 0x83, 0xb2, 0xe1, 0xd0, 0xfe, 0xcf, 0x9c, 0xad, 0x3a, 0x0b, 0x58, 0x69,
0x04, 0x35, 0x66, 0x57, 0xc0, 0xf1, 0xa2, 0x93, 0xbd, 0x8c, 0xdf, 0xee, 0x79, 0x48, 0x1b, 0x2a,
0xc1, 0xf0, 0xa3, 0x92, 0x05, 0x34, 0x67, 0x56, 0x78, 0x49, 0x1a, 0x2b, 0xbc, 0x8d, 0xde, 0xef,
0x82, 0xb3, 0xe0, 0xd1, 0x46, 0x77, 0x24, 0x15, 0x3b, 0x0a, 0x59, 0x68, 0xff, 0xce, 0x9d, 0xac
);
var control_speed = 20;
var cam_index = 0;
var altitude = 0;
var latitude = 0;
var longitude = 0;
var record_status = 0;
var click_mode_status = 1;
var goteuler2msg = false;
var gotstatus2 = false;
var gotversion = false;
var pitch_move = false;
var yaw_move = false;
var gimbal_mode = 1;
var IAMODE = 0;
var backlight = false;
var defog = false;
var nightmode = false;
var finger_mode = 0;
var photo_last = 0;
var record_last = 0;
var zoom_last = 0;
var gimbal_mode_last = 0;
var camera_mode_last = 0;
var f1_last = 0;
var f2_last = 0;
var f3_last = 0;
var f4_last = 0;
var joint_control_status = 0;
var pitch_last = 0;
var yaw_last = 0;
////////////////////////////////viewpro viewlink protocol for MMC ////////////////////////////////////////////////////////
// viewlink protocol for MMC drone 2020-12
var viewlink_cmdID = {
A1C1E1: 0X30,
A1C1E1S1: 0X32,
A2C2E2: 0X31,
A2C2E2S2: 0X33,
A1: 0X1A,
A2: 0X2A,
C1: 0X1C,
C2: 0X2C,
E1: 0x1E,
E2: 0X2E,
S1: 0X16,
S2: 0X26,
U: 0X01,
V: 0X02,
M_AHRS: 0XB1,
HEART_BEAT: 0X10,
SHAKE_HAND: 0X00,
T1F1B1D1: 0x40,
T2F2B2D2: 0X41,
FW: 0XFF
}
var viewlink_cmdLEN = {
// cmd_DATA_len + 3(len+cmdid+cs)
A1C1E1: 17,
A1C1E1S1: 31,
A2C2E2: 13,
A2C2E2S2: 18,
T1F1B1D1: 44,
T2F2B2D2: 52,
A1: 12,
A2: 5,
C1: 5,
C2: 6,
E1: 6,
E2: 8,
S1: 17,
S2: 8,
U: 5,
V: 5,
M_AHRS: 45,
HEART_BEAT: 4,
SHAKE_HAND: 4,
////FOLLOW CMD NOT +3
T1F1B1D1_DATA: 41,
T2F2B2D2_DATA: 49,
T1_DATA: 22,
F1_DATA: 1,
B1_DATA: 6,
D1_DATA: 12,
T2_DATA: 18,
F2_DATA: 15,
B2_DATA: 11,
D2_DATA: 5
}
var viewlinkheadlen = 3;
var viewlinkFrameLen = {// the position of checksum
A1C1E1: viewlink_cmdLEN.A1C1E1 + viewlinkheadlen,
A1C1E1S1: viewlink_cmdLEN.A1C1E1S1 + viewlinkheadlen,
A2C2E2: viewlink_cmdLEN.A2C2E2 + viewlinkheadlen,
A2C2E2S2: viewlink_cmdLEN.A2C2E2S2 + viewlinkheadlen,
A1: viewlink_cmdLEN.A1 + viewlinkheadlen,
A2: viewlink_cmdLEN.A2 + viewlinkheadlen,
C1: viewlink_cmdLEN.C1 + viewlinkheadlen,
C2: viewlink_cmdLEN.C2 + viewlinkheadlen,
E1: viewlink_cmdLEN.E1 + viewlinkheadlen,
E2: viewlink_cmdLEN.E2 + viewlinkheadlen,
S1: viewlink_cmdLEN.S1 + viewlinkheadlen,
S2: viewlink_cmdLEN.S2 + viewlinkheadlen,
U: viewlink_cmdLEN.U + viewlinkheadlen,
V: viewlink_cmdLEN.V + viewlinkheadlen,
M_AHRS: viewlink_cmdLEN.M_AHRS + viewlinkheadlen,
HEART_BEAT: viewlink_cmdLEN.HEART_BEAT + viewlinkheadlen,
SHAKE_HAND: viewlink_cmdLEN.SHAKE_HAND + viewlinkheadlen,
}
var viewlink_cs_pos = {// the position of checksum
A1C1E1: viewlinkFrameLen.A1C1E1 - 1,
A1C1E1S1: viewlinkFrameLen.A1C1E1S1 - 1,
A2C2E2: viewlinkFrameLen.A2C2E2 - 1,
A2C2E2S2: viewlinkFrameLen.A2C2E2S2 - 1,
A1: viewlinkFrameLen.A1 - 1,
A2: viewlinkFrameLen.A2 - 1,
C1: viewlinkFrameLen.C1 - 1,
C2: viewlinkFrameLen.C2 - 1,
E1: viewlinkFrameLen.E1 - 1,
E2: viewlinkFrameLen.E2 - 1,
S1: viewlinkFrameLen.S1 - 1,
S2: viewlinkFrameLen.S2 - 1,
U: viewlinkFrameLen.U - 1,
V: viewlinkFrameLen.V - 1,
M_AHRS: viewlinkFrameLen.M_AHRS - 1,
HEART_BEAT: viewlinkFrameLen.HEART_BEAT - 1,
SHAKE_HAND: viewlinkFrameLen.SHAKE_HAND - 1,
}
var mmcAddLen = 2;//(len+cs)
var mmcCmdLen = {// the position of checksum
A1C1E1: viewlinkFrameLen.A1C1E1 + mmcAddLen,
A1C1E1S1: viewlinkFrameLen.A1C1E1S1 + mmcAddLen,
A2C2E2: viewlinkFrameLen.A2C2E2 + mmcAddLen,
A2C2E2S2: viewlinkFrameLen.A2C2E2S2 + mmcAddLen,
A1: viewlinkFrameLen.A1 + mmcAddLen,
A2: viewlinkFrameLen.A2 + mmcAddLen,
C1: viewlinkFrameLen.C1 + mmcAddLen,
C2: viewlinkFrameLen.C2 + mmcAddLen,
E1: viewlinkFrameLen.E1 + mmcAddLen,
E2: viewlinkFrameLen.E2 + mmcAddLen,
S1: viewlinkFrameLen.S1 + mmcAddLen,
S2: viewlinkFrameLen.S2 + mmcAddLen,
U: viewlinkFrameLen.U + mmcAddLen,
V: viewlinkFrameLen.V + mmcAddLen,
M_AHRS: viewlinkFrameLen.M_AHRS + mmcAddLen,
HEART_BEAT: viewlinkFrameLen.HEART_BEAT + mmcAddLen,
SHAKE_HAND: viewlinkFrameLen.SHAKE_HAND + mmcAddLen,
}
var mmcHeadLen = 2;
var mmcFrameLen = {// the position of checksum
A1C1E1: mmcCmdLen.A1C1E1 + mmcHeadLen,
A1C1E1S1: mmcCmdLen.A1C1E1S1 + mmcHeadLen,
A2C2E2: mmcCmdLen.A2C2E2 + mmcHeadLen,
A2C2E2S2: mmcCmdLen.A2C2E2S2 + mmcHeadLen,
A1: mmcCmdLen.A1 + mmcHeadLen,
A2: mmcCmdLen.A2 + mmcHeadLen,
C1: mmcCmdLen.C1 + mmcHeadLen,
C2: mmcCmdLen.C2 + mmcHeadLen,
E1: mmcCmdLen.E1 + mmcHeadLen,
E2: mmcCmdLen.E2 + mmcHeadLen,
S1: mmcCmdLen.S1 + mmcHeadLen,
S2: mmcCmdLen.S2 + mmcHeadLen,
U: mmcCmdLen.U + mmcHeadLen,
V: mmcCmdLen.V + mmcHeadLen,
M_AHRS: mmcCmdLen.M_AHRS + mmcHeadLen,
HEART_BEAT: mmcCmdLen.HEART_BEAT + mmcHeadLen,
SHAKE_HAND: mmcCmdLen.SHAKE_HAND + mmcHeadLen,
}
var mmc_cs_pos = {// the position of checksum
A1C1E1: mmcFrameLen.A1C1E1 - 1,
A1C1E1S1: mmcFrameLen.A1C1E1S1 - 1,
A2C2E2: mmcFrameLen.A2C2E2 - 1,
A2C2E2S2: mmcFrameLen.A2C2E2S2 - 1,
A1: mmcFrameLen.A1 - 1,
A2: mmcFrameLen.A2 - 1,
C1: mmcFrameLen.C1 - 1,
C2: mmcFrameLen.C2 - 1,
E1: mmcFrameLen.E1 - 1,
E2: mmcFrameLen.E2 - 1,
S1: mmcFrameLen.S1 - 1,
S2: mmcFrameLen.S2 - 1,
U: mmcFrameLen.U - 1,
V: mmcFrameLen.V - 1,
M_AHRS: mmcFrameLen.M_AHRS - 1,
HEART_BEAT: mmcFrameLen.HEART_BEAT - 1,
SHAKE_HAND: mmcFrameLen.SHAKE_HAND - 1,
}
var FW_data_len = 0;
var viewlink_cmdLEN_FW = FW_data_len + 3;
var viewlinkFrameLen_FW = viewlink_cmdLEN_FW + viewlinkheadlen;
var viewlink_cs_pos_FW = viewlinkFrameLen_FW - 1;
var mmcCmdLen_FW = viewlinkFrameLen_FW + mmcAddLen;
var mmcFrameLen_FW = mmcCmdLen_FW + mmcHeadLen;
var mmc_cs_pos_FW = mmcFrameLen_FW - 1;
var viewlink_cmd_ID_LEN = {
cmdID: viewlink_cmdID.A1,
cmdLEN: viewlink_cmdLEN.A1
}
// A1
var A1_SERVO_STATUS = {
motoroff: 0x00,
manualcontrol: 0x01,
followyaw: 0x03,
homeposition: 0x04,
trackmode: 0x06,
turntorelativeangle: 0x09,
lockyaw: 0x0a,
turntoframeangle: 0x0b,
rcmode: 0x0d,
movetofinger: 0x0E,
noaction: 0x0f,
lookdown: 0x12,
centeryaw: 0x16,
levelpitch: 0x17
}
var A1_PARAM_INT16 = {
PARAM1: 0x0000,
PARAM2: 0x0000,
PARAM3: 0x0000,
PARAM4: 0x0000
}
var A1_CMD = {
server_status: A1_SERVO_STATUS.noaction,
param1: A1_PARAM_INT16.PARAM1,
param2: A1_PARAM_INT16.PARAM2,
param3: A1_PARAM_INT16.PARAM3,
param4: A1_PARAM_INT16.PARAM4
}
var A1_CMD_RC = {
server_status: A1_SERVO_STATUS.noaction,
param1: A1_PARAM_INT16.PARAM1,
param2: A1_PARAM_INT16.PARAM2,
param3: A1_PARAM_INT16.PARAM3,
param4: A1_PARAM_INT16.PARAM4
}
var A1_CMD_MOVE = {
server_status: A1_SERVO_STATUS.noaction,
param1: A1_PARAM_INT16.PARAM1,
param2: A1_PARAM_INT16.PARAM2,
param3: A1_PARAM_INT16.PARAM3,
param4: A1_PARAM_INT16.PARAM4
}
var A1_CMD_ANGLE = {
server_status: A1_SERVO_STATUS.noaction,
param1: A1_PARAM_INT16.PARAM1,
param2: A1_PARAM_INT16.PARAM2,
param3: A1_PARAM_INT16.PARAM3,
param4: A1_PARAM_INT16.PARAM4
}
function A1_to_array(A1_CMD) {
var array = new Array();
array[0] = A1_CMD.server_status;
array[1] = A1_CMD.param1 >> 8;
array[2] = A1_CMD.param1 & 0xff;
array[3] = A1_CMD.param2 >> 8;
array[4] = A1_CMD.param2 & 0xff;
array[5] = A1_CMD.param3 >> 8;
array[6] = A1_CMD.param3 & 0xff;
array[7] = A1_CMD.param4 >> 8;
array[8] = A1_CMD.param4 & 0xff;
return array;
}
////////////////AI END//////////////////////
var viewlink_A2_servo = {
noAction: 0,
yawZeroAdj: 0x08
}
var viewlink_A2_fdctr = {
disable: 0,
enable: 1
}
var viewlink_A2_framecount = {
counter: 0
}
var viewlink_A2_param = {
param1: 0x00
}
var A2_CMD = {
servo: viewlink_A2_servo.noAction,
fdctr: viewlink_A2_fdctr.enable,
framecounter: viewlink_A2_framecount.counter,
param1: viewlink_A2_param.param1
}
function A2_to_array(A2_CMD) {
var array = new Array();
var temp = 0x0;
temp = (A2_CMD.servo & 0x1f) | ((A2_CMD.fdctr & 0x01) << 5) | ((A2_CMD.framecounter & 0x03) << 6);
array[0] = temp & 0xff;
array[1] = A2_CMD.param1;
return array;
}
var C1_VIDEO_SOURCE = {
noaction: 0,
EO: 1,
IR: 2,
EOir: 3,
IReo: 4,
fusion: 5
}
var C1_ZOOM_SPEED = {
noaction: 0,
zoomspeed1: 1,
zoomspeed2: 2,
zoomspeed3: 3,
zoomspeed4: 4,
zoomspeed5: 5,
zoomspeed6: 6,
zoomspeed7: 7
}
var C1_CAM_CTR = {
noaction: 0x0000,
stopfocus: 0x0001,
brightup: 0x0002,
brightdown: 3,
zoomout: 8,
zoomin: 9,
focusout: 0x0a,
focusin: 0x0b,
whitehot: 0x0e,
blackhot: 0x0f,
colorhot: 0x12,
takepicture: 0x13,
startrecord: 0x14,
stoprecord: 0x15,
topicturemode: 0x16,
torecordmode: 0x17,
invertmode: 0x18,
afon: 0x19,
afoff: 0x1a,
irdzoomin: 0x1b,
irdzoomout: 0x1c,
sdcardformat: 0x1d
}
var C1_LRF = {
noaction: 0,
onetimeLRF: 1,
LRFstart: 2,
LRFstart2: 3,
outsynLRF: 4,
stopLRF: 5
}
var C1_CMD = {
videosource: C1_VIDEO_SOURCE.noaction,
zoom_speed: C1_ZOOM_SPEED.speed,
camera_ctrl: C1_CAM_CTR.noaction,
LRFctr: C1_LRF.noaction
}
function C1_to_array(C1_CMD) {
var array = new Array();
var temp = 0x0000;
temp = (C1_CMD.videosource & 0x07) | ((C1_CMD.zoom_speed & 0x07) << 3)
| ((C1_CMD.camera_ctrl & 0x007f) << 6) | ((C1_CMD.LRFctr & 0x07) << 13);
array[0] = (temp >> 8) & 0xff;
array[1] = temp & 0xff;
return array;
}
//////////////////C1 END/////////////////
//////////////////////C2 ////////////////////
var C2_ctrl = {
noaction: 0,
eodzoomon: 6,
eodzoomoff: 7,
eoVEon: 0x10,
eoVEoff: 0x11,
ircolorbaron: 0x12,
ircolorbaroff: 0x13,
eoflipoff: 0x14,
eoflipon: 0x15,
defogon: 0x16,
defogoff: 0x17,
osdon: 0x18,
osdoff: 0x19,
irflipoff: 0x1a,
irflipon: 0x1b,
eoICRon: 0x4a,
eoICRoff: 0x4b,
eozoomto: 0x53,
laserctrl: 0x74
}
var C2_laser_cmd = {
noaction: 0,
laseron: 0X0100,
laseroff: 0X0200,
laserzoomout: 0X0400,
laserzoomin: 0X0500,
synauto: 0X0600,
manulaser: 0X0700
}
var C2_CMD = {
ctrl: C2_ctrl.noaction,
param: C2_laser_cmd.noaction
}
var C2_CMD_ZOOM = {
ctrl: C2_ctrl.eozoomto,
param: 0x0000
};
function C2_to_array(C2_CMD) {
var array = new Array();
array[0] = C2_CMD.ctrl;
array[1] = C2_CMD.param >> 8;
array[2] = C2_CMD.param & 0XFF;
return array;
}
/////////////////////////////////C2 END//////////
//////////////E1 ///////////////////
var E1_tracksource = {
noaction: 0,
eo1: 1,
ir: 2,
eo2: 3
}
var E1_param1 = {
param1: 0x00
}
var E1_ctrl = {
noaction: 0,
stoptrack: 1,
searchobject: 2,
starttrack: 3,
re_track: 4,
ai_detec: 5,
ai_opendetec: 0x01,
ai_closedetec: 0x00,
smalltemplate: 0x21,
middletemplate: 0x22,
bigtemplate: 0x23,
midsmalltemplate: 0x24,
bigmidtemplate: 0x26,
autotemplate: 0x28
}
var E1_param2 = {
param2: 0x00
}
var E1_CMD = {
tracksource: E1_tracksource.noaction,
param1: A1_PARAM_INT16.PARAM1,
ctrl: E1_ctrl.noaction,
param2: E1_param2.param2
}
function E1_to_array(E1_CMD) {
var array = new Array();
var temp = 0x00;
temp = (E1_CMD.tracksource) | (E1_CMD.param1 << 3);
array[0] = temp;
array[1] = E1_CMD.ctrl;
array[2] = E1_CMD.param2;
return array;
}
/////////E1 END /////////////////
var E2_ctr = {
noaction: 0,
fingertracktopos: 0x0a
}
var E2_CMD = {
ctr: E2_ctr.noaction,
param1: 0x0000,
param2: 0x0000
}
function E2_to_array(E2_CMD) {
var array = new Array();
array[0] = E2_CMD.ctr;
array[1] = E2_CMD.param1 >> 8;
array[2] = E2_CMD.param1 & 0xff;
array[3] = E2_CMD.param2 >> 8;
array[4] = E2_CMD.param2 & 0xff;
return array;
}
// var FW_CMD_data = new Array();
/* function FW_to_array(){
var array = new Array();
var i=0;
for(i=0;i< FW_data_len;i++){
array[i] = FW_CMD_data[i];
}
return array;
} */
//viewlink checksum data
function viewlink_checksum(array) {
var checksum = array[3];
var i = 4;
var len = (array[3] & 0x3f) - 2;
while (len--) {
checksum = checksum ^ array[i];
i++;
}
return checksum;
}
function pack_A1(A1CMD) {
var A1_data_array = A1_to_array(A1CMD);//9
var A1pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
A1pack_array[3] = viewlink_cmdLEN.A1; //12
A1pack_array[4] = viewlink_cmdID.A1;
A1_data_array.forEach(function (item) { // 将A1CMD的数据提取出,拼接在A1pack_array
A1pack_array.push(item)
})
A1pack_array[viewlink_cs_pos.A1] = viewlink_checksum(A1pack_array);
return A1pack_array;
}
function pack_C1(C1CMD) {
var C1_data_array = C1_to_array(C1CMD);//9
var C1pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
C1pack_array[3] = viewlink_cmdLEN.C1;
C1pack_array[4] = viewlink_cmdID.C1;
C1_data_array.forEach(function (item) {
C1pack_array.push(item)
})
C1pack_array[viewlink_cs_pos.C1] = viewlink_checksum(C1pack_array);
return C1pack_array;
}
function pack_E1(E1_CMD) {
var E1_data_array = E1_to_array(E1_CMD);//9
var E1pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
E1pack_array[3] = viewlink_cmdLEN.E1;
E1pack_array[4] = viewlink_cmdID.E1;
E1_data_array.forEach(function (item) {
E1pack_array.push(item)
})
E1pack_array[viewlink_cs_pos.E1] = viewlink_checksum(E1pack_array);
return E1pack_array;
}
function pack_S1(S1_CMD) {
var S1_data_array = S1_to_array(S1_CMD);//9
var S1pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
S1pack_array[3] = viewlink_cmdLEN.S1;
S1pack_array[4] = viewlink_cmdID.S1;
S1_data_array.forEach(function (item) {
S1pack_array.push(item)
})
S1pack_array[viewlink_cs_pos.S1] = viewlink_checksum(S1pack_array);
return S1pack_array;
}
function pack_A2(A2_CMD) {
var A2_data_array = A2_to_array(A2_CMD);//9
var A2pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
A2pack_array[3] = viewlink_cmdLEN.A2; //12
A2pack_array[4] = viewlink_cmdID.A2;
A2_data_array.forEach(function (item) {
A2pack_array.push(item)
})
A2pack_array[viewlink_cs_pos.A2] = viewlink_checksum(A2pack_array);
return A2pack_array;
}
function pack_C2(C2_CMD) {
var C2_data_array = C2_to_array(C2_CMD);//9
var C2pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
C2pack_array[3] = viewlink_cmdLEN.C2;
C2pack_array[4] = viewlink_cmdID.C2;
C2_data_array.forEach(function (item) {
C2pack_array.push(item)
})
C2pack_array[viewlink_cs_pos.C2] = viewlink_checksum(C2pack_array);
return C2pack_array;
}
function pack_E2(E2_CMD) {
var E2_data_array = E2_to_array(E2_CMD);//9
var E2pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
E2pack_array[3] = viewlink_cmdLEN.E2;
E2pack_array[4] = viewlink_cmdID.E2;
E2_data_array.forEach(function (item) {
E2pack_array.push(item)
})
E2pack_array[viewlink_cs_pos.E2] = viewlink_checksum(E2pack_array);
return E2pack_array;
}
function pack_S2(S2_CMD) {
var S2_data_array = S1_to_array(S2_CMD);//9
var S2pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
S2pack_array[3] = viewlink_cmdLEN.S2;
S2pack_array[4] = viewlink_cmdID.S2;
S2_data_array.forEach(function (item) {
S2pack_array.push(item)
})
S2pack_array[viewlink_cs_pos.S2] = viewlink_checksum(S2pack_array);
return S2pack_array;
}
function pack_FW(data, len) {
var FW_data_array = data;//9
var FWpack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
var viewlink_cmdLEN_FW = len + 3;
var viewlinkFrameLen_FW = viewlink_cmdLEN_FW + viewlinkheadlen;
var viewlink_cs_pos_FW = viewlinkFrameLen_FW - 1;
FWpack_array[3] = viewlink_cmdLEN_FW;
FWpack_array[4] = viewlink_cmdID.FW;
FW_data_array.forEach(function (item) {
FWpack_array.push(item)
})
FWpack_array[viewlink_cs_pos_FW] = viewlink_checksum(FWpack_array);
return FWpack_array;
}
//////////////A1C1E1 ///////////////
function pack_A1C1E1(A1CMD, C1CMD, E1CMD) {
var A1_array = A1_to_array(A1CMD);//9
var C1_array = C1_to_array(C1CMD);//2
var E1_array = E1_to_array(E1CMD);//3
//var temp_array1 = a1_array.concat(c1_array, e1_array);
var A1C1E1_array = [0x55, 0xaa, 0xdc, 0X11, 0X30];
A1_array.forEach(function (item) {
A1C1E1_array.push(item)
})
C1_array.forEach(function (item) {
A1C1E1_array.push(item)
})
E1_array.forEach(function (item) {
A1C1E1_array.push(item)
})
A1C1E1_array[19] = viewlink_checksum(A1C1E1_array);
return A1C1E1_array;
}
var T1_1_012_LRFsource = {
noObject: 0,
LRFvalue: 1,
altitudevalue: 2,
rfvalue: 3
}
var T1_1_34_signal = {
nosignal: 0,
timelock: 1,
lock2D: 2,
lock3D: 3
}
var T1_1_567_GPS_H_signal = {
data: 1
}
var T1_2_012_GPS_V_signal = {
data: 1
}
var T1_2_3_S2 = {
no: 0,
yes: 1
}
var T1_2_4567_N = {
gyrooffsetadj: 0
}
var T1_CMD = {
B1_bit012: T1_1_012_LRFsource.LRFvalue,
B1_bit34: T1_1_34_signal.nosignal,
B1_bit567: T1_1_567_GPS_H_signal.data,
B2_bit012: T1_2_012_GPS_V_signal.data,
B2_bit3: T1_2_3_S2.no,
B2_bit4567: T1_2_4567_N.gyrooffsetadj,
UAV_latitude: 0x00000000,//1e7
UAV_longitude: 0x00000000,
UAV_altitude: 0x0000,
Target_latitude: 0x00000000,
Target_longitude: 0x00000000,
Target_altitude: 0x0000
}
var T2_2_year = {
year: 2020
}
var T2_2_month = {
month: 12
}
var T2_day = {
day: 12
}
var T2_time = {
time: 0x00000000
}
var T2_CMD = {
byte1res: 0X00,
year: T2_2_year.year,
month: T2_2_month.month,
day: T2_day.day,
time: T2_time.time,
yawGPS: 0x0000,
UAVyaw: 0x0000,
UAVpitch: 0x0000,
UAVroll: 0x0000,
res1516: 0x0000,
res1718: 0x0000
}
var T1F1B1D1_CMD = {
T1data: T1_CMD,
}
var F1_tracksensor = { //跟踪传感器
eo1: 0,
ir: 1,
eo2: 2
}
var F1_trackstatus = { //跟踪状态
stop: 0,
search: 1,
tracking: 2,
lost: 3
}
var F1_CMD = {
tracksource: F1_tracksensor.eo1,
tracksource: F1_tracksensor.ir,
tracksource: F1_tracksensor.eo2,
trackstatus: F1_trackstatus.stop,
trackstatus: F1_trackstatus.search,
trackstatus: F1_trackstatus.tracking,
trackstatus: F1_trackstatus.lost
}
var B1_servo_status = {
motorsw: 0x00,
manualcontrol: 0x01,
followyaw: 0x03,
homeposition: 0x04,
trackmode: 0x06,
turntorelativeangle: 0x09,
lockyaw: 0x0a,
turntoframeangle: 0x0b,
RCcontrol: 0x0d,
fingerto: 0x0e,
error: 0x0f
}
var B1_CMD = {
GIMrollangle_8_11: 0,
servestatus: B1_servo_status.manualcontrol,
GIMrollangle_0_7: 0x00,
GIMrollangle: 0,
GIMyawangle: 0,
GIMpitchangle: 0
}
var D1_CMD = {
SENSOR: 0, //bit0-2
IR_DZOOM: 0,//bit3-6
IR_WHITE_BLACK: 0,//bit7
res: 0x00,
recstatus: 0,// bit0-1
ir_gray_color: 0,//bit2-5
eo_dzoom: 0,//bit6-9
res: 0,//bit10-15
lrf_value: 0,//byte 5-6
v_fov: 0,
h_fov: 0,
eo_zoom: 0
}
var modeltype = 0;
//crc校验字节生成函数
function cal_crc_table(array) {
var crc = 0;
var i = 1;
var len = array[2];
while (len--) {
crc = crc_table[crc ^ array[i]];
i++;
}
return crc;
}
//数据分包发送函数
function package_send(buff, len) {
var i = 0;
var j = 0;
var count = 0;
// var alen = len;
var hexbuf = [];
var sendbuf = [];
if (len % 48 == 0) {
count = parseInt(len / 48, 10);
}
else {
count = parseInt(len / 48, 10) + 1;
}
for (i = 0; i < count; i++) {
if ((count - i) == 1) {
for (j = 0; j < len - i * 48; j++) {
sendbuf[j] = buff[i * 48 + j];
hexbuf[j] = Number(buff[i * 48 + j]).toString(16);
}
return sendbuf
}
else {
for (j = 0; j < 48; j++) {
sendbuf[j] = buff[i * 48 + j];
hexbuf[j] = Number(buff[i * 48 + j]).toString(16);
}
return sendbuf
}
}
}
// EO zoomTo
export function zoomTo(value) {
var zoom = value
var buff = new Array(0xA5, 0x4f, 0x00);
buff[2] = mmcCmdLen.C2;
var zoomRatio = zoom;
C2_CMD_ZOOM.param = zoomRatio * 10;
console.log("zoomRatio:" + zoomRatio);
var buff_arr = pack_C2(C2_CMD_ZOOM);
console.log("buff_arr:" + buff_arr);
buff_arr.forEach(function (item) {
buff.push(item)
})
buff[mmc_cs_pos.C2] = cal_crc_table(buff);
return package_send(buff, mmcFrameLen.C2);
}
import store from './index';
import { Control_API } from '../api';
import mount from '../components/mount';
import store from "./index";
import { Control_API } from "../api";
import mount from "../components/mount";
let positions = []; // 飞机走过的点
const defaultPos = {
latitude: 22.433, // 纬度
longitude: 113.75 // 经度
longitude: 113.75, // 经度
};
window.state = function () {
return store.state;
......@@ -15,7 +15,7 @@ const uavRealTimeData = {
attitude: {
roll: 0, // 飞机的俯仰值:向前为正,向后为负。单位为度。
pitch: 0, // 飞机的横滚值:正向为正,反向为负。单位为度。
yaw: 0 // 飞机的偏航值,其中0对应于正北航向。顺时针偏航会增加偏航值。
yaw: 0, // 飞机的偏航值,其中0对应于正北航向。顺时针偏航会增加偏航值。
},
parachute: 1, // 降落伞状态 0正常,1未启用,2控制器不在线,3伞包未连接,4降落伞故障
parachuteState: 1, // 1降落伞进入警戒,2降落伞退出警戒,3降落伞开伞
......@@ -24,12 +24,12 @@ const uavRealTimeData = {
// 地理位置信息
altitude: 0, // 相对高度,如果需要获取绝对高度 请查看Gps类
latitude: defaultPos.latitude, // 纬度
longitude: defaultPos.longitude // 经度
longitude: defaultPos.longitude, // 经度
},
gps: {
absoluteAlt: 0, // 绝对高度,以米为单位
relativeAlt: 0, // 相对高度,以米为单位
satelliteCount: 0 // 搜星数,卫星数越大,GPS信号越强
satelliteCount: 0, // 搜星数,卫星数越大,GPS信号越强
},
flyDistance: 0, // 当前飞行里程
distanceToHome: 0, // 距离home的位置
......@@ -37,7 +37,7 @@ const uavRealTimeData = {
groundSpeed: 0, // hud地速,单位m/s, 飞行速度
velocityZ: 0, // 使用NED(北-东-下)坐标系,飞机在z方向上的当前速度,以米/秒为单位, 爬升率
voltage: 0, // 返回当前电池电压(V)
chargeRemaining: 0 // 电池中的剩余能量百分比
chargeRemaining: 0, // 电池中的剩余能量百分比
};
const state = {
......@@ -51,7 +51,7 @@ const state = {
uavModelEntity: null, // 飞机模型实例
smuTime: false, // 模拟上报定时器
airlineData: null, // 当前选择的航线数据
flyMode: 'auto', // 飞行模式, auto: 自动, manual: 手动,
flyMode: "auto", // 飞行模式, auto: 自动, manual: 手动,
showVideo: false, // 显示视频
showAIVideo: false, // 显示AI视频
showViewLibrary: false, // 显示视图库
......@@ -74,7 +74,9 @@ const state = {
getPageBasicPropertyInfosById: null, // 资源id
isPreventClick: false, // 是否可点击
mapRadio: 1, // 分屏模式时 代表当前控制的是第几个地图实例
dimensionReset: null,//关闭三维标注弹框
dimensionReset: null, //关闭三维标注弹框
uavPlayer: null, // 播放器使用的无人机信息
obstacle: null, //避障信息 { deviceHardId: string(设备id), distances: array<int>(每10度一个与障碍物的距离厘米); enable: boolean(是否在避障中); obsDistance:int(避障警告距离米)}
};
const mutations = {
......@@ -87,9 +89,9 @@ const mutations = {
try {
state[data.key] = data.value;
} catch (e) {
console.log('setDate err', e);
console.log("setDate err", e);
}
}
},
};
const actions = {
......@@ -101,19 +103,19 @@ const actions = {
destroy({ commit, state, dispatch }, data) {
viewer.entities.remove(state.airlineEntity);
viewer.entities.remove(state.uavModelEntity);
commit('setState', { key: 'uav', value: null });
commit('setState', { key: 'uavLog', value: null });
commit('setState', { key: 'airlineEntity', value: null });
commit('setState', { key: 'uavModelEntity', value: null });
commit('setState', { key: 'airlineData', value: null });
commit('setState', { key: 'flyMode', value: 'auto' });
commit('setState', { key: 'mountList', value: [] });
commit('setState', { key: 'selectMount', value: null });
commit('setState', { key: 'showVideo', value: false });
commit('setState', { key: 'showViewLibrary', value: false });
commit('setState', { key: 'showAIVideo', value: false });
commit('setState', { key: 'showMenu', value: false });
commit('setState', { key: 'uavRealTimeData', value: uavRealTimeData });
commit("setState", { key: "uav", value: null });
commit("setState", { key: "uavLog", value: null });
commit("setState", { key: "airlineEntity", value: null });
commit("setState", { key: "uavModelEntity", value: null });
commit("setState", { key: "airlineData", value: null });
commit("setState", { key: "flyMode", value: "auto" });
commit("setState", { key: "mountList", value: [] });
commit("setState", { key: "selectMount", value: null });
commit("setState", { key: "showVideo", value: false });
commit("setState", { key: "showViewLibrary", value: false });
commit("setState", { key: "showAIVideo", value: false });
commit("setState", { key: "showMenu", value: false });
commit("setState", { key: "uavRealTimeData", value: uavRealTimeData });
positions = [];
},
/**
......@@ -142,24 +144,24 @@ const actions = {
// 地理位置信息
altitude: Math.random() * 10, // 相对高度,如果需要获取绝对高度 请查看Gps类
latitude: 22.433 + Math.random() * 0.01, // 纬度
longitude: 113.75 + Math.random() * 0.01 // 经度
}
longitude: 113.75 + Math.random() * 0.01, // 经度
},
};
dispatch('updateByMQTT', {
dispatch("updateByMQTT", {
258: { data },
259: {
data: {
gimbalName: 'MMC_Gimbal_Z40Pro',
gimbalName: "MMC_Gimbal_Z40Pro",
mountId: 11,
mountType: 1036,
payload: [165, 9, 3, 0, 57],
widgetHeight: 500,
widgetWidth: 540
}
}
widgetWidth: 540,
},
},
});
}, 10000);
commit('setState', { key: 'smuTime', value: time });
commit("setState", { key: "smuTime", value: time });
} else {
clearInterval(state.smuTime);
}
......@@ -175,26 +177,30 @@ const actions = {
const type259 = data[259]?.data;
const type2006 = data[2006]?.data;
const type2017 = data[2017]?.data;
const type272 = data[272]?.data;
// gps 需要判断使用哪个
if (type258.rtk?.isMainSensor) {
type258.gps = type258.rtk;
}
commit('setState', {
key: 'uavRealTimeData',
commit("setState", {
key: "uavRealTimeData",
value: {
...state.uavRealTimeData,
...type258,
...type268,
...type257,
...type2006,
...type2017
}
...type2017,
...type272,
},
});
if (type259) {
// 通过返回的259类型,获取挂载列表
const find = state.mountList.find((item) => item.mountId === type259.mountId);
const find = state.mountList.find(
(item) => item.mountId === type259.mountId
);
if (!find) {
state.mountList.push(type259);
state.mountList.forEach((item) => {
......@@ -205,34 +211,45 @@ const actions = {
item.icon = find.icon;
}
});
commit('setState', { key: 'mountList', value: [...state.mountList] });
commit("setState", { key: "mountList", value: [...state.mountList] });
}
}
if (type272) {
//避障信息
this.$store.commit("setState", {
key: "obstacle",
value: {
...data.data,
hardId: state.uav?.hardId,
},
});
}
} else {
const uavInfo = data?.deviceData?.data?.uavInfo;
if (uavInfo) {
// 地面站链路
commit('setState', {
key: 'uavRealTimeData',
commit("setState", {
key: "uavRealTimeData",
value: {
...state.uavRealTimeData,
attitude: {
roll: uavInfo.roll, // 飞机的俯仰值:向前为正,向后为负。单位为度。
pitch: uavInfo.pitch, // 飞机的横滚值:正向为正,反向为负。单位为度。
yaw: uavInfo.yaw // 飞机的偏航值,其中0对应于正北航向。顺时针偏航会增加偏航值。
yaw: uavInfo.yaw, // 飞机的偏航值,其中0对应于正北航向。顺时针偏航会增加偏航值。
},
accelerator: 0, // 飞机油门通道值
locationCoordinate3D: {
// 地理位置信息
altitude: 0, // 相对高度,如果需要获取绝对高度 请查看Gps类
latitude: uavInfo.latitude, // 纬度
longitude: uavInfo.longitude // 经度
longitude: uavInfo.longitude, // 经度
},
gps: {
absoluteAlt: uavInfo.altitude, // 绝对高度,以米为单位
relativeAlt: uavInfo.height, // 相对高度,以米为单位
satelliteCount: 0 // 搜星数,卫星数越大,GPS信号越强
satelliteCount: 0, // 搜星数,卫星数越大,GPS信号越强
},
flyDistance: uavInfo.flightDistance, // 当前飞行里程
distanceToHome: uavInfo.distanceToHome, // 距离home的位置
......@@ -241,8 +258,8 @@ const actions = {
velocityZ: uavInfo.climbRate, // 使用NED(北-东-下)坐标系,飞机在z方向上的当前速度,以米/秒为单位, 爬升率
voltage: uavInfo.voltage, // 返回当前电池电压(V)
chargeRemaining: uavInfo.battaryRemain, // 电池中的剩余能量百分比
flightSortie: uavInfo.flightSortie // 本次架次
}
flightSortie: uavInfo.flightSortie, // 本次架次
},
});
}
......@@ -258,16 +275,18 @@ const actions = {
return {
gimbalName: item.mountName,
mountId: item.mountType,
icon: item.icon
icon: item.icon,
};
}) || [];
commit('setState', { key: 'mountList', value: mountList });
commit("setState", { key: "mountList", value: mountList });
}
if (state.uavRealTimeData.locationCoordinate3D.longitude) {
if (
state.uavRealTimeData.locationCoordinate3D.longitude === defaultPos.longitude &&
state.uavRealTimeData.locationCoordinate3D.latitude === defaultPos.latitude
state.uavRealTimeData.locationCoordinate3D.longitude ===
defaultPos.longitude &&
state.uavRealTimeData.locationCoordinate3D.latitude ===
defaultPos.latitude
) {
// 默认坐标不记录
} else {
......@@ -278,9 +297,9 @@ const actions = {
// window.positions = positions;
if (!state.uavModelEntity) {
dispatch('createUavModel');
dispatch('createAirline');
dispatch('flyToUavModel');
dispatch("createUavModel");
dispatch("createAirline");
dispatch("flyToUavModel");
}
}
},
......@@ -297,7 +316,7 @@ const actions = {
// 'modelRequest'
// );
const entity = viewer.entities.add({
id: 'model_' + state.uav.hardId,
id: "model_" + state.uav.hardId,
orientation: new Cesium.CallbackProperty(() => {
const posData = UAVDataParser(state.uavRealTimeData);
return posData.orientation;
......@@ -307,25 +326,27 @@ const actions = {
return posData.position;
}, false),
model: {
uri: state.uav.modelVictor || 'cesium/model/1800_20220816_no_effect283g2color.gltf',
uri:
state.uav.modelVictor ||
"cesium/model/1800_20220816_no_effect283g2color.gltf",
minimumPixelSize: 100,
maximumScale: 20000,
scale: 1,
color: Cesium.Color.fromCssColorString('#550088'), // 颜色
color: Cesium.Color.fromCssColorString("#550088"), // 颜色
// color: Cesium.Color.fromAlpha(Cesium.Color.BLACK, parseFloat(1.0)), //包含透明度的颜色
colorBlendMode: Cesium.ColorBlendMode['MIX']
colorBlendMode: Cesium.ColorBlendMode["MIX"],
},
label: {
text: state.uav.name || '',
font: '14pt monospace',
text: state.uav.name || "",
font: "14pt monospace",
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -20),
eyeOffset: new Cesium.Cartesian3(0, 0, -10)
}
eyeOffset: new Cesium.Cartesian3(0, 0, -10),
},
});
commit('setState', { key: 'uavModelEntity', value: entity });
commit("setState", { key: "uavModelEntity", value: entity });
}
},
/**
......@@ -337,19 +358,19 @@ const actions = {
if (!state.airlineEntity) {
// 创建航线
const airlineEntity = state.cesiumViewer.entities.add({
id: 'airline_' + state.uav.hardId,
id: "airline_" + state.uav.hardId,
polyline: {
positions: new Cesium.CallbackProperty((time, result) => {
return positions;
}, false),
width: 5,
show: true,
material: Cesium.Color.fromCssColorString('#6DD400')
}
material: Cesium.Color.fromCssColorString("#6DD400"),
},
});
airlineEntity.show = true;
commit('setState', { key: 'airlineEntity', value: airlineEntity });
commit("setState", { key: "airlineEntity", value: airlineEntity });
}
},
/**
......@@ -360,7 +381,11 @@ const actions = {
flyToUavModel({ state, commit }, data) {
if (state.uavModelEntity) {
state.cesiumViewer.flyTo(state.uavModelEntity, {
offset: new Cesium.HeadingPitchRange(0, -Cesium.Math.PI_OVER_TWO, 10000)
offset: new Cesium.HeadingPitchRange(
0,
-Cesium.Math.PI_OVER_TWO,
10000
),
});
}
},
......@@ -376,12 +401,12 @@ const actions = {
// 生成架次號
const getFlightSortic = await Control_API.getFlightSortic({
taskId: state.airlineData.id,
deviceHardId: state.uav.hardId
deviceHardId: state.uav.hardId,
});
// 上传航线指令
const waypointList = JSON.parse(state.airlineData?.content);
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: store.state.MMCMQTT.orders.航线上传,
data: {
......@@ -389,66 +414,66 @@ const actions = {
flightSortiesID: getFlightSortic.data,
waypointList: waypointList,
autoFlightSpeed: 6,
finishedAction: 'GO_HOME',
headingMode: 'AUTO',
finishedAction: "GO_HOME",
headingMode: "AUTO",
isExitMissionOnRCSignalLostEnabled: true,
maxFlightSpeed: 12
}
maxFlightSpeed: 12,
},
},
callback() { }
callback() {},
});
// 告诉飞控开始任务,并且把架次号和 任务id传过去
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: store.state.MMCMQTT.orders.绑定任务id,
data: {
taskId: state.airlineData.id,
flightSortiesID: getFlightSortic.data
}
flightSortiesID: getFlightSortic.data,
},
},
callback() { }
callback() {},
});
// 更改任务状态
// 起飞指令
setTimeout(() => {
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: store.state.MMCMQTT.orders.航线一键起飞,
data: {
taskId: state.airlineData.id,
seq: 0
}
seq: 0,
},
},
callback() {
data.callback && data.callback(true);
}
},
});
}, 3000);
} catch (e) {
console.log('一键起飞失败', e);
console.log("一键起飞失败", e);
data.callback && data.callback(false);
}
} else {
// 地面站链路
store.dispatch('MMCGroundStation/order', {
order: '航线上传',
store.dispatch("MMCGroundStation/order", {
order: "航线上传",
data: {
cmdValue: state.airlineData?.id
cmdValue: state.airlineData?.id,
},
deviceHardId: state.uav.hardId
deviceHardId: state.uav.hardId,
});
// 起飞指令
setTimeout(() => {
store.dispatch('MMCGroundStation/order', {
order: '起飞',
store.dispatch("MMCGroundStation/order", {
order: "起飞",
data: {},
deviceHardId: state.uav.hardId
deviceHardId: state.uav.hardId,
});
data.callback && data.callback(true);
}, 3000);
......@@ -463,33 +488,33 @@ const actions = {
if (state.uav.network == 1) {
try {
// 结束航线指令
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: 525,
data: null
data: null,
},
callback() {
data.callback && data.callback(true);
}
},
});
} catch (e) {
console.log('任务结束失败', e);
console.log("任务结束失败", e);
data.callback && data.callback(false);
}
} else {
try {
// //地面站链路
store.dispatch('MMCGroundStation/order', {
order: '结束平台任务',
store.dispatch("MMCGroundStation/order", {
order: "结束平台任务",
data: {
cmdFunction: 2280,
taskId: state.airlineData.id
taskId: state.airlineData.id,
},
deviceHardId: state.uav.hardId
deviceHardId: state.uav.hardId,
});
} catch (e) {
console.log('任务结束失败', e);
console.log("任务结束失败", e);
data.callback && data.callback(false);
}
......@@ -511,21 +536,21 @@ const actions = {
*/
land({ state }, data) {
if (state.uav.network == 1) {
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: store.state.MMCMQTT.orders.原地降落
type: store.state.MMCMQTT.orders.原地降落,
},
callback() {
data.callback && data.callback(true);
}
},
});
} else {
// 地面站链路
store.dispatch('MMCGroundStation/order', {
order: '降落',
store.dispatch("MMCGroundStation/order", {
order: "降落",
data: {},
deviceHardId: state.uav.hardId
deviceHardId: state.uav.hardId,
});
data.callback && data.callback(true);
}
......@@ -537,21 +562,21 @@ const actions = {
*/
pauseFly({ state }, data) {
if (state.uav.network == 1) {
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: store.state.MMCMQTT.orders.暂停航线任务
type: store.state.MMCMQTT.orders.暂停航线任务,
},
callback() {
data.callback && data.callback(true);
}
},
});
} else {
// 地面站链路
store.dispatch('MMCGroundStation/order', {
order: '悬停',
store.dispatch("MMCGroundStation/order", {
order: "悬停",
data: {},
deviceHardId: state.uav.hardId
deviceHardId: state.uav.hardId,
});
data.callback && data.callback(true);
}
......@@ -563,21 +588,21 @@ const actions = {
*/
continueFly({ state }, data) {
if (state.uav.network == 1) {
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: store.state.MMCMQTT.orders.继续航线任务
type: store.state.MMCMQTT.orders.继续航线任务,
},
callback() {
data.callback && data.callback(true);
}
},
});
} else {
// 地面站链路
store.dispatch('MMCGroundStation/order', {
order: '航线模式',
store.dispatch("MMCGroundStation/order", {
order: "航线模式",
data: {},
deviceHardId: state.uav.hardId
deviceHardId: state.uav.hardId,
});
data.callback && data.callback(true);
}
......@@ -589,21 +614,21 @@ const actions = {
*/
returnFlight({ state }, data) {
if (state.uav.network == 1) {
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: store.state.MMCMQTT.orders.返航
type: store.state.MMCMQTT.orders.返航,
},
callback() {
data.callback && data.callback(true);
}
},
});
} else {
// 地面站链路
store.dispatch('MMCGroundStation/order', {
order: '返航',
store.dispatch("MMCGroundStation/order", {
order: "返航",
data: {},
deviceHardId: state.uav.hardId
deviceHardId: state.uav.hardId,
});
data.callback && data.callback(true);
}
......@@ -615,24 +640,24 @@ const actions = {
*/
routeControl({ state }, data) {
if (state.uav.network == 1) {
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: store.state.MMCMQTT.orders.航线控制,
data: {
latitude: data.latitude,
longitude: data.longitude,
speed: data.speed
}
speed: data.speed,
},
},
callback() {
data.callback && data.callback(true);
}
},
});
} else {
// 地面站链路
data.callback && data.callback(false);
throw '地面站链路不支持指点移动';
throw "地面站链路不支持指点移动";
}
},
......@@ -641,15 +666,15 @@ const actions = {
*/
modeManual({ state }, data) {
if (state.uav.network == 1) {
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: store.state.MMCMQTT.orders.无人机模式切换,
data: 'POSITION'
data: "POSITION",
},
callback() {
data.callback && data.callback(true);
}
},
});
} else {
// 地面站链路
......@@ -661,15 +686,15 @@ const actions = {
*/
modeAuto({ state }, data) {
if (state.uav.network == 1) {
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: store.state.MMCMQTT.orders.无人机模式切换,
data: 'AUTO_MISSION'
data: "AUTO_MISSION",
},
callback() {
data.callback && data.callback(true);
}
},
});
} else {
// 地面站链路
......@@ -683,20 +708,20 @@ const actions = {
console.log(
{
type: 514,
data: data
data: data,
},
'xxx'
"xxx"
);
if (state.uav.network == 1) {
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: 514,
data: data
data: data,
},
callback() {
data.callback && data.callback(true);
}
},
});
}
},
......@@ -705,30 +730,30 @@ const actions = {
*/
modeLAND({ state }, data) {
if (state.uav.network == 1) {
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: store.state.MMCMQTT.orders.无人机模式切换,
data: 'LAND'
data: "LAND",
},
callback() {
data.callback && data.callback(true);
}
},
});
} else {
// 地面站链路
store.dispatch('MMCGroundStation/order', {
order: '指点飞行',
store.dispatch("MMCGroundStation/order", {
order: "指点飞行",
data: {},
deviceHardId: state.uav.hardId
deviceHardId: state.uav.hardId,
});
data.callback && data.callback(true);
}
},
changeYGPermissions({ state }, data) {
if (state.uav.network == 1) {
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: 534,
data: {
......@@ -739,12 +764,12 @@ const actions = {
param4: 0,
param5: 0,
param6: 0,
param7: 0
}
param7: 0,
},
},
callback() {
data.callback && data.callback(true);
}
},
});
} else {
}
......@@ -754,22 +779,22 @@ const actions = {
*/
modeAUTO_RTL({ state }, data) {
if (state.uav.network == 1) {
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: store.state.MMCMQTT.orders.无人机模式切换,
data: 'AUTO_RTL'
data: "AUTO_RTL",
},
callback() {
data.callback && data.callback(true);
}
},
});
} else {
// 地面站链路
store.dispatch('MMCGroundStation/order', {
order: '指点飞行',
store.dispatch("MMCGroundStation/order", {
order: "指点飞行",
data: {},
deviceHardId: state.uav.hardId
deviceHardId: state.uav.hardId,
});
data.callback && data.callback(true);
}
......@@ -779,22 +804,22 @@ const actions = {
*/
modeAUTO_MISSION({ state }, data) {
if (state.uav.network == 1) {
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: store.state.MMCMQTT.orders.无人机模式切换,
data: 'AUTO_MISSION'
data: "AUTO_MISSION",
},
callback() {
data.callback && data.callback(true);
}
},
});
} else {
// 地面站链路
store.dispatch('MMCGroundStation/order', {
order: '指点飞行',
store.dispatch("MMCGroundStation/order", {
order: "指点飞行",
data: {},
deviceHardId: state.uav.hardId
deviceHardId: state.uav.hardId,
});
data.callback && data.callback(true);
}
......@@ -805,22 +830,22 @@ const actions = {
*/
modePOSITION({ state }, data) {
if (state.uav.network == 1) {
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: store.state.MMCMQTT.orders.无人机模式切换,
data: 'POSITION'
data: "POSITION",
},
callback() {
data.callback && data.callback(true);
}
},
});
} else {
// 地面站链路
store.dispatch('MMCGroundStation/order', {
order: '指点飞行',
store.dispatch("MMCGroundStation/order", {
order: "指点飞行",
data: {},
deviceHardId: state.uav.hardId
deviceHardId: state.uav.hardId,
});
data.callback && data.callback(true);
}
......@@ -837,10 +862,10 @@ const actions = {
taskID: data.taskID,
videoID: 1,
name: data.name,
dbID: data.dbID
}
dbID: data.dbID,
},
},
type: 528
type: 528,
};
// if (streamSelect == "QingLiu") {
streamData.data.messageID = 1017;
......@@ -849,8 +874,8 @@ const actions = {
// streamData.data.messageID = 1006;
// streamData.data.data.recordControl = this.record;
// }
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
// data:{
// // videoID:1, //视频通道ID(需保持唯一)
// dbID:data.dbID, //历史记录id
......@@ -861,7 +886,7 @@ const actions = {
data: streamData,
callback() {
data.callback && data.callback(true);
}
},
});
}
},
......@@ -873,9 +898,9 @@ const actions = {
if (state.uav.network == 1) {
const streamData = {
data: {
data: {}
data: {},
},
type: 528
type: 528,
};
// if (streamSelect == "QingLiu") {
streamData.data.messageID = 1031;
......@@ -883,12 +908,12 @@ const actions = {
// streamData.data.messageID = 1006;
// streamData.data.data.recordControl = this.record;
// }
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: streamData,
callback() {
data.callback && data.callback(true);
}
},
});
}
},
......@@ -901,23 +926,23 @@ const actions = {
*/
mountDirective({ state }, data) {
if (state.uav.network == 1) {
store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.hardId,
store.dispatch("MMCMQTT/publish", {
topic: "PX4/OBTAIN/" + state.uav.hardId,
data: {
type: store.state.MMCMQTT.orders.云台控制指令can包透传,
data: {
mountId: data.mountId,
payload: data.buffer
}
payload: data.buffer,
},
},
callback() {
data.callback && data.callback(true);
}
},
});
} else {
// 地面站链路
const buff = data.buffer.join(',');
store.dispatch('MMCGroundStation/publish', {
const buff = data.buffer.join(",");
store.dispatch("MMCGroundStation/publish", {
type: 200,
cmdFunction: null,
data: {
......@@ -925,20 +950,45 @@ const actions = {
cmdState: null,
cmdValue: null,
cmdBuffer: buff,
cmdName: state.selectMount.gimbalName
cmdName: state.selectMount.gimbalName,
},
deviceHardId: state.uav.hardId
deviceHardId: state.uav.hardId,
});
}
},
/**
* 显示播放器
* @param {*} param0
* @param {Object} data 无人机信息
*/
async showPlayer({ state, commit }, data) {
// 选中与取消选中
if (state.uavPlayer?.hardId === data.hardId) {
commit("setState", {
key: "uavPlayer",
value: null,
});
} else {
// 获取该无人机视频流信息
let res = await Control_API.uavDetail({
id: data.id,
});
data.streamConfiguration = res.data.streamConfiguration;
commit("setState", {
key: "uavPlayer",
value: data,
});
}
}
},
};
export default {
namespaced: true,
name: 'uavApplications',
name: "uavApplications",
state,
mutations,
actions
actions,
};
/**
......@@ -963,9 +1013,12 @@ function UAVDataParser(data) {
Cesium.Math.toRadians(data.attitude.pitch),
Cesium.Math.toRadians(data.attitude.roll)
);
const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
);
return {
position,
orientation
orientation,
};
}
export function formatDate(t, str) {
var obj = {
yyyy: t.getFullYear(),
yy: ("" + t.getFullYear()).slice(-2),
M: t.getMonth() + 1,
MM: ("0" + (t.getMonth() + 1)).slice(-2),
d: t.getDate(),
dd: ("0" + t.getDate()).slice(-2),
H: t.getHours(),
HH: ("0" + t.getHours()).slice(-2),
h: t.getHours() % 12,
hh: ("0" + t.getHours() % 12).slice(-2),
m: t.getMinutes(),
mm: ("0" + t.getMinutes()).slice(-2),
s: t.getSeconds(),
ss: ("0" + t.getSeconds()).slice(-2),
w: ['日', '一', '二', '三', '四', '五', '六'][t.getDay()],
yyyyMMddhhmmss: t.getFullYear() + ("0" + (t.getMonth() + 1)).slice(-2) + ("0" + t.getDate()).slice(-2) + ("0" + t.getHours() % 12).slice(-2) + ("0" + t.getMinutes()).slice(-2) + ("0" + t.getSeconds()).slice(-2),
};
return str.replace(/([a-z]+)/ig, function ($1) {
return obj[$1]
});
}
export function newDate() {
let date = new Date();
let Year = date.getFullYear();
let Month =
date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1;
let Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
let Hours =
date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let Minutes =
date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let Seconds =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
let getDay = date.getDay();
return Year+"-"+Month+"-"+Day+" "+Hours+":"+Minutes+":"+Seconds
}
\ No newline at end of file
// canvas转dataURL:canvas对象、转换格式、图像品质
export function canvasToDataURL(canvas, format, quality){
return canvas.toDataURL(format||'image/jpeg', quality||1.0);
}
// DataURL转canvas
export function dataURLToCanvas(dataurl, cb){
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
cb(canvas);
};
img.src = dataurl;
}
/*-----------------------------------------------------------------------*/
// image转canvas:图片地址
export function imageToCanvas(src, cb){
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = src;
img.onload = function (){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
cb(canvas);
};
}
// canvas转image
export function canvasToImage(canvas){
var img = new Image();
img.src = canvas.toDataURL('image/jpeg', 1.0);
return img;
}
/*-----------------------------------------------------------------------*/
// File/Blob对象转DataURL
export function fileOrBlobToDataURL(obj, cb){
var a = new FileReader();
a.readAsDataURL(obj);
a.onload = function (e){
cb(e.target.result);
};
}
// DataURL转Blob对象
export function dataURLToBlob(dataurl){
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
/*-----------------------------------------------------------------------*/
// Blob转image
export function blobToImage(blob, cb){
fileOrBlobToDataURL(blob, function (dataurl){
var img = new Image();
img.src = dataurl;
cb(img);
});
}
// image转Blob
export function imageToBlob(src, cb){
imageToCanvas(src, function (canvas){
cb(dataURLToBlob(canvasToDataURL(canvas)));
});
}
/*-----------------------------------------------------------------------*/
// Blob转canvas
export function BlobToCanvas(blob, cb){
fileOrBlobToDataURL(blob, function (dataurl){
dataURLToCanvas(dataurl, cb);
});
}
// canvas转Blob
export function canvasToBlob(canvas, cb){
cb(dataURLToBlob(canvasToDataURL(canvas)));
}
/*-----------------------------------------------------------------------*/
// image转dataURL
export function imageToDataURL(src, cb){
imageToCanvas(src, function (canvas){
cb(canvasToDataURL(canvas));
});
}
// dataURL转image,这个不需要转,直接给了src就能用
export function dataURLToImage(dataurl){
var img = new Image();
img.src = dataurl;
return img;
}
\ No newline at end of file
//CRC 校验表
var crc_table = new Array(
0x00, 0x31, 0x62, 0x53, 0xc4, 0xf5, 0xa6, 0x97, 0xb9, 0x88, 0xdb, 0xea, 0x7d, 0x4c, 0x1f, 0x2e,
0x43, 0x72, 0x21, 0x10, 0x87, 0xb6, 0xe5, 0xd4, 0xfa, 0xcb, 0x98, 0xa9, 0x3e, 0x0f, 0x5c, 0x6d,
0x86, 0xb7, 0xe4, 0xd5, 0x42, 0x73, 0x20, 0x11, 0x3f, 0x0e, 0x5d, 0x6c, 0xfb, 0xca, 0x99, 0xa8,
0xc5, 0xf4, 0xa7, 0x96, 0x01, 0x30, 0x63, 0x52, 0x7c, 0x4d, 0x1e, 0x2f, 0xb8, 0x89, 0xda, 0xeb,
0x3d, 0x0c, 0x5f, 0x6e, 0xf9, 0xc8, 0x9b, 0xaa, 0x84, 0xb5, 0xe6, 0xd7, 0x40, 0x71, 0x22, 0x13,
0x7e, 0x4f, 0x1c, 0x2d, 0xba, 0x8b, 0xd8, 0xe9, 0xc7, 0xf6, 0xa5, 0x94, 0x03, 0x32, 0x61, 0x50,
0xbb, 0x8a, 0xd9, 0xe8, 0x7f, 0x4e, 0x1d, 0x2c, 0x02, 0x33, 0x60, 0x51, 0xc6, 0xf7, 0xa4, 0x95,
0xf8, 0xc9, 0x9a, 0xab, 0x3c, 0x0d, 0x5e, 0x6f, 0x41, 0x70, 0x23, 0x12, 0x85, 0xb4, 0xe7, 0xd6,
0x7a, 0x4b, 0x18, 0x29, 0xbe, 0x8f, 0xdc, 0xed, 0xc3, 0xf2, 0xa1, 0x90, 0x07, 0x36, 0x65, 0x54,
0x39, 0x08, 0x5b, 0x6a, 0xfd, 0xcc, 0x9f, 0xae, 0x80, 0xb1, 0xe2, 0xd3, 0x44, 0x75, 0x26, 0x17,
0xfc, 0xcd, 0x9e, 0xaf, 0x38, 0x09, 0x5a, 0x6b, 0x45, 0x74, 0x27, 0x16, 0x81, 0xb0, 0xe3, 0xd2,
0xbf, 0x8e, 0xdd, 0xec, 0x7b, 0x4a, 0x19, 0x28, 0x06, 0x37, 0x64, 0x55, 0xc2, 0xf3, 0xa0, 0x91,
0x47, 0x76, 0x25, 0x14, 0x83, 0xb2, 0xe1, 0xd0, 0xfe, 0xcf, 0x9c, 0xad, 0x3a, 0x0b, 0x58, 0x69,
0x04, 0x35, 0x66, 0x57, 0xc0, 0xf1, 0xa2, 0x93, 0xbd, 0x8c, 0xdf, 0xee, 0x79, 0x48, 0x1b, 0x2a,
0xc1, 0xf0, 0xa3, 0x92, 0x05, 0x34, 0x67, 0x56, 0x78, 0x49, 0x1a, 0x2b, 0xbc, 0x8d, 0xde, 0xef,
0x82, 0xb3, 0xe0, 0xd1, 0x46, 0x77, 0x24, 0x15, 0x3b, 0x0a, 0x59, 0x68, 0xff, 0xce, 0x9d, 0xac
);
var A1_SERVO_STATUS = {
motoroff: 0x00,
manualcontrol: 0x01,
followyaw: 0x03,
homeposition: 0x04,
trackmode: 0x06,
turntorelativeangle: 0x09,
lockyaw: 0x0a,
turntoframeangle: 0x0b,
rcmode: 0x0d,
movetofinger: 0x0E,
noaction: 0x0f
}
var A1_PARAM_INT16 = {
PARAM1: 0x0000,
PARAM2: 0x0000,
PARAM3: 0x0000,
PARAM4: 0x0000
}
var FW_data_len = 0;
var click_mode_status = 1
var viewlink_cmdID = {
A1C1E1: 0X30,
A1C1E1S1: 0X32,
A2C2E2: 0X31,
A2C2E2S2: 0X33,
A1: 0X1A,
A2: 0X2A,
C1: 0X1C,
C2: 0X2C,
E1: 0x1E,
E2: 0X2E,
S1: 0X16,
S2: 0X26,
U: 0X01,
V: 0X02,
M_AHRS: 0XB1,
HEART_BEAT: 0X10,
SHAKE_HAND: 0X00,
T1F1B1D1: 0x40,
T2F2B2D2: 0X41,
FW: 0XFF
}
var viewlink_cmdLEN = {
// cmd_DATA_len + 3(len+cmdid+cs)
A1C1E1: 17,
A1C1E1S1: 31,
A2C2E2: 13,
A2C2E2S2: 18,
T1F1B1D1: 44,
T2F2B2D2: 52,
A1: 12,
A2: 5,
C1: 5,
C2: 6,
E1: 6,
E2: 8,
S1: 17,
S2: 8,
U: 5,
V: 5,
M_AHRS: 45,
HEART_BEAT: 4,
SHAKE_HAND: 4,
////FOLLOW CMD NOT +3
T1F1B1D1_DATA: 41,
T2F2B2D2_DATA: 49,
T1_DATA: 22,
F1_DATA: 1,
B1_DATA: 6,
D1_DATA: 12,
T2_DATA: 18,
F2_DATA: 15,
B2_DATA: 11,
D2_DATA: 5
}
var viewlinkheadlen = 3;
var viewlinkFrameLen = {// the position of checksum
A1C1E1: viewlink_cmdLEN.A1C1E1 + viewlinkheadlen,
A1C1E1S1: viewlink_cmdLEN.A1C1E1S1 + viewlinkheadlen,
A2C2E2: viewlink_cmdLEN.A2C2E2 + viewlinkheadlen,
A2C2E2S2: viewlink_cmdLEN.A2C2E2S2 + viewlinkheadlen,
A1: viewlink_cmdLEN.A1 + viewlinkheadlen,
A2: viewlink_cmdLEN.A2 + viewlinkheadlen,
C1: viewlink_cmdLEN.C1 + viewlinkheadlen,
C2: viewlink_cmdLEN.C2 + viewlinkheadlen,
E1: viewlink_cmdLEN.E1 + viewlinkheadlen,
E2: viewlink_cmdLEN.E2 + viewlinkheadlen,
S1: viewlink_cmdLEN.S1 + viewlinkheadlen,
S2: viewlink_cmdLEN.S2 + viewlinkheadlen,
U: viewlink_cmdLEN.U + viewlinkheadlen,
V: viewlink_cmdLEN.V + viewlinkheadlen,
M_AHRS: viewlink_cmdLEN.M_AHRS + viewlinkheadlen,
HEART_BEAT: viewlink_cmdLEN.HEART_BEAT + viewlinkheadlen,
SHAKE_HAND: viewlink_cmdLEN.SHAKE_HAND + viewlinkheadlen,
}
var viewlink_cs_pos = {// the position of checksum
A1C1E1: viewlinkFrameLen.A1C1E1 - 1,
A1C1E1S1: viewlinkFrameLen.A1C1E1S1 - 1,
A2C2E2: viewlinkFrameLen.A2C2E2 - 1,
A2C2E2S2: viewlinkFrameLen.A2C2E2S2 - 1,
A1: viewlinkFrameLen.A1 - 1,
A2: viewlinkFrameLen.A2 - 1,
C1: viewlinkFrameLen.C1 - 1,
C2: viewlinkFrameLen.C2 - 1,
E1: viewlinkFrameLen.E1 - 1,
E2: viewlinkFrameLen.E2 - 1,
S1: viewlinkFrameLen.S1 - 1,
S2: viewlinkFrameLen.S2 - 1,
U: viewlinkFrameLen.U - 1,
V: viewlinkFrameLen.V - 1,
M_AHRS: viewlinkFrameLen.M_AHRS - 1,
HEART_BEAT: viewlinkFrameLen.HEART_BEAT - 1,
SHAKE_HAND: viewlinkFrameLen.SHAKE_HAND - 1,
}
var mmcAddLen = 2;//(len+cs)
var mmcCmdLen = {// the position of checksum
A1C1E1: viewlinkFrameLen.A1C1E1 + mmcAddLen,
A1C1E1S1: viewlinkFrameLen.A1C1E1S1 + mmcAddLen,
A2C2E2: viewlinkFrameLen.A2C2E2 + mmcAddLen,
A2C2E2S2: viewlinkFrameLen.A2C2E2S2 + mmcAddLen,
A1: viewlinkFrameLen.A1 + mmcAddLen,
A2: viewlinkFrameLen.A2 + mmcAddLen,
C1: viewlinkFrameLen.C1 + mmcAddLen,
C2: viewlinkFrameLen.C2 + mmcAddLen,
E1: viewlinkFrameLen.E1 + mmcAddLen,
E2: viewlinkFrameLen.E2 + mmcAddLen,
S1: viewlinkFrameLen.S1 + mmcAddLen,
S2: viewlinkFrameLen.S2 + mmcAddLen,
U: viewlinkFrameLen.U + mmcAddLen,
V: viewlinkFrameLen.V + mmcAddLen,
M_AHRS: viewlinkFrameLen.M_AHRS + mmcAddLen,
HEART_BEAT: viewlinkFrameLen.HEART_BEAT + mmcAddLen,
SHAKE_HAND: viewlinkFrameLen.SHAKE_HAND + mmcAddLen,
}
var mmcHeadLen = 2;
var mmcFrameLen = {// the position of checksum
A1C1E1: mmcCmdLen.A1C1E1 + mmcHeadLen,
A1C1E1S1: mmcCmdLen.A1C1E1S1 + mmcHeadLen,
A2C2E2: mmcCmdLen.A2C2E2 + mmcHeadLen,
A2C2E2S2: mmcCmdLen.A2C2E2S2 + mmcHeadLen,
A1: mmcCmdLen.A1 + mmcHeadLen,
A2: mmcCmdLen.A2 + mmcHeadLen,
C1: mmcCmdLen.C1 + mmcHeadLen,
C2: mmcCmdLen.C2 + mmcHeadLen,
E1: mmcCmdLen.E1 + mmcHeadLen,
E2: mmcCmdLen.E2 + mmcHeadLen,
S1: mmcCmdLen.S1 + mmcHeadLen,
S2: mmcCmdLen.S2 + mmcHeadLen,
U: mmcCmdLen.U + mmcHeadLen,
V: mmcCmdLen.V + mmcHeadLen,
M_AHRS: mmcCmdLen.M_AHRS + mmcHeadLen,
HEART_BEAT: mmcCmdLen.HEART_BEAT + mmcHeadLen,
SHAKE_HAND: mmcCmdLen.SHAKE_HAND + mmcHeadLen,
}
var mmc_cs_pos = {// the position of checksum
A1C1E1: mmcFrameLen.A1C1E1 - 1,
A1C1E1S1: mmcFrameLen.A1C1E1S1 - 1,
A2C2E2: mmcFrameLen.A2C2E2 - 1,
A2C2E2S2: mmcFrameLen.A2C2E2S2 - 1,
A1: mmcFrameLen.A1 - 1,
A2: mmcFrameLen.A2 - 1,
C1: mmcFrameLen.C1 - 1,
C2: mmcFrameLen.C2 - 1,
E1: mmcFrameLen.E1 - 1,
E2: mmcFrameLen.E2 - 1,
S1: mmcFrameLen.S1 - 1,
S2: mmcFrameLen.S2 - 1,
U: mmcFrameLen.U - 1,
V: mmcFrameLen.V - 1,
M_AHRS: mmcFrameLen.M_AHRS - 1,
HEART_BEAT: mmcFrameLen.HEART_BEAT - 1,
SHAKE_HAND: mmcFrameLen.SHAKE_HAND - 1,
}
var FW_data_len = 0;
var viewlink_cmdLEN_FW = FW_data_len + 3;
var viewlinkFrameLen_FW = viewlink_cmdLEN_FW + viewlinkheadlen;
var viewlink_cs_pos_FW = viewlinkFrameLen_FW - 1;
var mmcCmdLen_FW = viewlinkFrameLen_FW + mmcAddLen;
var mmcFrameLen_FW = mmcCmdLen_FW + mmcHeadLen;
var mmc_cs_pos_FW = mmcFrameLen_FW - 1;
var viewlink_cmd_ID_LEN = {
cmdID: viewlink_cmdID.A1,
cmdLEN: viewlink_cmdLEN.A1
}
// A1
var A1_SERVO_STATUS = {
motoroff: 0x00,
manualcontrol: 0x01,
followyaw: 0x03,
homeposition: 0x04,
trackmode: 0x06,
turntorelativeangle: 0x09,
lockyaw: 0x0a,
turntoframeangle: 0x0b,
rcmode: 0x0d,
movetofinger: 0x0E,
noaction: 0x0f
}
var A1_PARAM_INT16 = {
PARAM1: 0x0000,
PARAM2: 0x0000,
PARAM3: 0x0000,
PARAM4: 0x0000
}
var A1_CMD = {
server_status: A1_SERVO_STATUS.noaction,
param1: A1_PARAM_INT16.PARAM1,
param2: A1_PARAM_INT16.PARAM2,
param3: A1_PARAM_INT16.PARAM3,
param4: A1_PARAM_INT16.PARAM4
}
function A1_to_array(A1_CMD) {
var array = new Array();
array[0] = A1_CMD.server_status;
array[1] = A1_CMD.param1 >> 8;
array[2] = A1_CMD.param1 & 0xff;
array[3] = A1_CMD.param2 >> 8;
array[4] = A1_CMD.param2 & 0xff;
array[5] = A1_CMD.param3 >> 8;
array[6] = A1_CMD.param3 & 0xff;
array[7] = A1_CMD.param4 >> 8;
array[8] = A1_CMD.param4 & 0xff;
return array;
}
////////////////AI END//////////////////////
// var viewlink_A2_servo = {
// noAction:00,
// yawZeroAdj:0x08
// }
var viewlink_A2_fdctr = {
disable: 0,
enable: 1
}
var viewlink_A2_framecount = {
counter: 0
}
var viewlink_A2_param = {
param1: 0x00
}
// var A2_CMD ={
// servo: viewlink_A2_servo.noAction,
// fdctr:viewlink_A2_fdctr.enable,
// framecounter:viewlink_A2_framecount.counter,
// param1:viewlink_A2_param.param1
// }
function A2_to_array(A2_CMD) {
var array = new Array();
var temp = 0x0;
temp = (A2_CMD.servo & 0x1f) | ((A2_CMD.fdctr & 0x01) << 5) | ((A2_CMD.framecounter & 0x03) << 6);
array[0] = temp & 0xff;
array[1] = A2_CMD.param1;
return array;
}
var C1_VIDEO_SOURCE = {
noaction: 0,
EO: 1,
IR: 2,
EOir: 3,
IReo: 4,
EO2: 5,
fusion: 6
}
var C1_ZOOM_SPEED = {
zoomspeed1: 1,
zoomspeed2: 2,
zoomspeed3: 3,
zoomspeed4: 4,
zoomspeed5: 5,
zoomspeed6: 6,
zoomspeed7: 7
}
var C1_CAM_CTR = {
noaction: 0x0000,
stopfocus: 0x0001,
brightup: 0x0002,
brightdown: 3,
zoomout: 8,
zoomin: 9,
focusout: 0x0a,
focusin: 0x0b,
whitehot: 0x0e,
blackhot: 0x0f,
colorhot: 0x12,
takepicture: 0x13,
startrecord: 0x14,
stoprecord: 0x15,
topicturemode: 0x16,
torecordmode: 0x17,
invertmode: 0x18,
afon: 0x19,
afoff: 0x1a,
irdzoomin: 0x1b,
irdzoomout: 0x1c,
sdcardformat: 0x1d
}
var C1_LRF = {
noaction: 0,
onetimeLRF: 1,
LRFstart: 2,
LRFstart2: 3,
outsynLRF: 4,
stopLRF: 5
}
var C1_CMD = {
videosource: C1_VIDEO_SOURCE.noaction,
zoom_speed: C1_ZOOM_SPEED.speed,
camera_ctrl: C1_CAM_CTR.noaction,
LRFctr: C1_LRF.noaction
}
function C1_to_array(C1_CMD) {
var array = new Array();
var temp = 0x0000;
temp = (C1_CMD.videosource & 0x07) | ((C1_CMD.zoom_speed & 0x07) << 3)
| ((C1_CMD.camera_ctrl & 0x007f) << 6) | ((C1_CMD.LRFctr & 0x07) << 13);
array[0] = (temp >> 8) & 0xff;
array[1] = temp & 0xff;
return array;
}
//////////////////C1 END/////////////////
//////////////////////C2 ////////////////////
var C2_ctrl = {
noaction: 0,
eodzoomon: 6,
eodzoomoff: 7,
eoVEon: 0x10,
eoVEoff: 0x11,
ircolorbaron: 0x12,
ircolorbaroff: 0x13,
eoflipoff: 0x14,
eoflipon: 0x15,
defogon: 0x16,
defogoff: 0x17,
osdon: 0x18,
osdoff: 0x19,
irflipoff: 0x1a,
irflipon: 0x1b,
eoICRon: 0x4a,
eoICRoff: 0x4b,
eozoomto: 0x53,
laserctrl: 0x74
}
var C2_laser_cmd = {
noaction: 0,
laseron: 0X0100,
laseroff: 0X0200,
laserzoomout: 0X0400,
laserzoomin: 0X0500,
synauto: 0X0600,
manulaser: 0X0700
}
var C2_CMD = {
ctrl: C2_ctrl.noaction,
param: C2_laser_cmd.noaction
}
function C2_to_array(C2_CMD) {
var array = new Array();
array[0] = C2_CMD.ctrl;
array[1] = C2_CMD.param >> 8;
array[2] = C2_CMD.param & 0XFF;
return array;
}
/////////////////////////////////C2 END//////////
//////////////E1 ///////////////////
var E1_tracksource = {
noaction: 0,
eo1: 1,
ir: 2,
eo2: 3
}
var E1_param1 = {
param1: 0x00
}
var E1_ctrl = {
noaction: 0,
stoptrack: 1,
searchobject: 2,
starttrack: 3,
re_track: 4,
smalltemplate: 0x21,
middletemplate: 0x22,
bigtemplate: 0x23,
midsmalltemplate: 0x24,
bigmidtemplate: 0x26,
autotemplate: 0x28
}
var E1_param2 = {
param2: 0x00
}
var E1_CMD = {
tracksource: E1_tracksource.noaction,
param1: A1_PARAM_INT16.PARAM1,
ctrl: E1_ctrl.noaction,
param2: E1_param2.param2
}
function E1_to_array(E1_CMD) {
var array = new Array();
var temp = 0x00;
temp = (E1_CMD.tracksource) | (E1_CMD.param1 << 3);
array[0] = temp;
array[1] = E1_CMD.ctrl;
array[2] = E1_CMD.param2;
return array;
}
/////////E1 END /////////////////
var E2_ctr = {
noaction: 0,
fingertracktopos: 0x0a
}
var E2_CMD = {
ctr: E2_ctr.noaction,
param1: 0x0000,
param2: 0x0000
}
function E2_to_array(E2_CMD) {
var array = new Array();
array[0] = E2_CMD.ctr;
array[1] = E2_CMD.param1 >> 8;
array[2] = E2_CMD.param1 & 0xff;
array[3] = E2_CMD.param2 >> 8;
array[4] = E2_CMD.param2 & 0xff;
return array;
}
// var FW_CMD_data = new Array();
/* function FW_to_array(){
var array = new Array();
var i=0;
for(i=0;i< FW_data_len;i++){
array[i] = FW_CMD_data[i];
}
return array;
} */
//viewlink checksum data
function viewlink_checksum(array) {
var checksum = array[3];
var i = 4;
var len = (array[3] & 0x3f) - 2;
while (len--) {
checksum = checksum ^ array[i];
i++;
}
return checksum;
}
function pack_A1(A1CMD) {
var A1_data_array = A1_to_array(A1CMD);//9
var A1pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
A1pack_array[3] = viewlink_cmdLEN.A1; //12
A1pack_array[4] = viewlink_cmdID.A1;
A1_data_array.forEach(function (item) { // 将A1CMD的数据提取出,拼接在A1pack_array
A1pack_array.push(item)
})
A1pack_array[viewlink_cs_pos.A1] = viewlink_checksum(A1pack_array);
return A1pack_array;
}
function pack_C1(C1CMD) {
var C1_data_array = C1_to_array(C1CMD);//9
var C1pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
C1pack_array[3] = viewlink_cmdLEN.C1;
C1pack_array[4] = viewlink_cmdID.C1;
C1_data_array.forEach(function (item) {
C1pack_array.push(item)
})
C1pack_array[viewlink_cs_pos.C1] = viewlink_checksum(C1pack_array);
return C1pack_array;
}
function pack_E1(E1_CMD) {
var E1_data_array = E1_to_array(E1_CMD);//9
var E1pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
E1pack_array[3] = viewlink_cmdLEN.E1;
E1pack_array[4] = viewlink_cmdID.E1;
E1_data_array.forEach(function (item) {
E1pack_array.push(item)
})
E1pack_array[viewlink_cs_pos.E1] = viewlink_checksum(E1pack_array);
return E1pack_array;
}
function pack_S1(S1_CMD) {
var S1_data_array = S1_to_array(S1_CMD);//9
var S1pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
S1pack_array[3] = viewlink_cmdLEN.S1;
S1pack_array[4] = viewlink_cmdID.S1;
S1_data_array.forEach(function (item) {
S1pack_array.push(item)
})
S1pack_array[viewlink_cs_pos.S1] = viewlink_checksum(S1pack_array);
return S1pack_array;
}
function pack_A2(A2_CMD) {
var A2_data_array = A2_to_array(A2_CMD);//9
var A2pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
A2pack_array[3] = viewlink_cmdLEN.A2; //12
A2pack_array[4] = viewlink_cmdID.A2;
A2_data_array.forEach(function (item) {
A2pack_array.push(item)
})
A2pack_array[viewlink_cs_pos.A2] = viewlink_checksum(A2pack_array);
return A2pack_array;
}
function pack_C2(C2_CMD) {
var C2_data_array = C2_to_array(C2_CMD);//9
var C2pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
C2pack_array[3] = viewlink_cmdLEN.C2;
C2pack_array[4] = viewlink_cmdID.C2;
C2_data_array.forEach(function (item) {
C2pack_array.push(item)
})
C2pack_array[viewlink_cs_pos.C2] = viewlink_checksum(C2pack_array);
return C2pack_array;
}
function pack_E2(E2_CMD) {
var E2_data_array = E2_to_array(E2_CMD);//9
var E2pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
E2pack_array[3] = viewlink_cmdLEN.E2;
E2pack_array[4] = viewlink_cmdID.E2;
E2_data_array.forEach(function (item) {
E2pack_array.push(item)
})
E2pack_array[viewlink_cs_pos.E2] = viewlink_checksum(E2pack_array);
return E2pack_array;
}
function pack_S2(S2_CMD) {
var S2_data_array = S1_to_array(S2_CMD);//9
var S2pack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
S2pack_array[3] = viewlink_cmdLEN.S2;
S2pack_array[4] = viewlink_cmdID.S2;
S2_data_array.forEach(function (item) {
S2pack_array.push(item)
})
S2pack_array[viewlink_cs_pos.S2] = viewlink_checksum(S2pack_array);
return S2pack_array;
}
//////////////A1C1E1 ///////////////
function pack_A1C1E1(A1CMD, C1CMD, E1CMD) {
var A1_array = A1_to_array(A1CMD);//9
var C1_array = C1_to_array(C1CMD);//2
var E1_array = E1_to_array(E1CMD);//3
//var temp_array1 = a1_array.concat(c1_array, e1_array);
var A1C1E1_array = [0x55, 0xaa, 0xdc, 0X11, 0X30];
A1_array.forEach(function (item) {
A1C1E1_array.push(item)
})
C1_array.forEach(function (item) {
A1C1E1_array.push(item)
})
E1_array.forEach(function (item) {
A1C1E1_array.push(item)
})
A1C1E1_array[19] = viewlink_checksum(A1C1E1_array);
return A1C1E1_array;
}
var T1_1_012_LRFsource = {
noObject: 0,
LRFvalue: 1,
altitudevalue: 2,
rfvalue: 3
}
var T1_1_34_signal = {
nosignal: 0,
timelock: 1,
lock2D: 2,
lock3D: 3
}
var T1_1_567_GPS_H_signal = {
data: 1
}
var T1_2_012_GPS_V_signal = {
data: 1
}
var T1_2_3_S2 = {
no: 0,
yes: 1
}
var T1_2_4567_N = {
gyrooffsetadj: 0
}
var T1_CMD = {
B1_bit012: T1_1_012_LRFsource.LRFvalue,
B1_bit34: T1_1_34_signal.nosignal,
B1_bit567: T1_1_567_GPS_H_signal.data,
B2_bit012: T1_2_012_GPS_V_signal.data,
B2_bit3: T1_2_3_S2.no,
B2_bit4567: T1_2_4567_N.gyrooffsetadj,
UAV_latitude: 0x00000000,//1e7
UAV_longitude: 0x00000000,
UAV_altitude: 0x0000,
Target_latitude: 0x00000000,
Target_longitude: 0x00000000,
Target_altitude: 0x0000
}
var T2_2_year = {
year: 2020
}
var T2_2_month = {
month: 12
}
var T2_day = {
day: 12
}
var T2_time = {
time: 0x00000000
}
var T2_CMD = {
byte1res: 0X00,
year: T2_2_year.year,
month: T2_2_month.month,
day: T2_day.day,
time: T2_time.time,
yawGPS: 0x0000,
UAVyaw: 0x0000,
UAVpitch: 0x0000,
UAVroll: 0x0000,
res1516: 0x0000,
res1718: 0x0000
}
var T1F1B1D1_CMD = {
T1data: T1_CMD,
}
var F1_tracksensor = {
eo1: 0,
ir: 1,
eo2: 2
}
var F1_trackstatus = {
stop: 0,
search: 1,
tracking: 2,
lost: 3
}
var F1_CMD = {
tracksource: F1_tracksensor.eo1,
trackstatus: F1_trackstatus.stop
}
var B1_servo_status = {
motorsw: 0x00,
manualcontrol: 0x01,
followyaw: 0x03,
homeposition: 0x04,
trackmode: 0x06,
turntorelativeangle: 0x09,
lockyaw: 0x0a,
turntoframeangle: 0x0b,
RCcontrol: 0x0d,
fingerto: 0x0e,
error: 0x0f
}
var B1_CMD = {
GIMrollangle_8_11: 0,
servestatus: B1_servo_status.manualcontrol,
GIMrollangle_0_7: 0x00,
GIMrollangle: 0,
GIMyawangle: 0,
GIMpitchangle: 0
}
var D1_CMD = {
SENSOR: 0, //bit0-2
IR_DZOOM: 0,//bit3-6
IR_WHITE_BLACK: 0,//bit7
res: 0x00,
recstatus: 0,// bit0-1
ir_gray_color: 0,//bit2-5
eo_dzoom: 0,//bit6-9
res: 0,//bit10-15
lrf_value: 0,//byte 5-6
v_fov: 0,
h_fov: 0,
eo_zoom: 0
}
var modeltype = 0;
function cal_crc_table(array) {
var crc = 0;
var i = 1;
var len = array[2];
while (len--) {
crc = crc_table[crc ^ array[i]];
i++;
}
return crc;
};
var A1_CMD = {
server_status: A1_SERVO_STATUS.noaction,
param1: A1_PARAM_INT16.PARAM1,
param2: A1_PARAM_INT16.PARAM2,
param3: A1_PARAM_INT16.PARAM3,
param4: A1_PARAM_INT16.PARAM4
}
function pack_FW(data, len) {
var FW_data_array = data;//9
var FWpack_array = [0x55, 0xaa, 0xdc, 0X00, 0X00];
var viewlink_cmdLEN_FW = len + 3;
var viewlinkFrameLen_FW = viewlink_cmdLEN_FW + viewlinkheadlen;
var viewlink_cs_pos_FW = viewlinkFrameLen_FW - 1;
FWpack_array[3] = viewlink_cmdLEN_FW;
FWpack_array[4] = viewlink_cmdID.FW;
FW_data_array.forEach(function (item) {
FWpack_array.push(item)
})
FWpack_array[viewlink_cs_pos_FW] = viewlink_checksum(FWpack_array);
return FWpack_array;
};
export const to_moveMount = {
gcs_click_coordinates(data) {
var x = data.x || 0
var y = data.y || 0
var w = data.w || 1920
var h = data.h || 1080
var buff = new Array(0xA5, 0x0B, 11, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00);
buff[3] = click_mode_status;
buff[4] = (x) & 0xff;
buff[5] = (x >> 8) & 0xff;
buff[6] = (y) & 0xff;
buff[7] = (y >> 8) & 0xff;
buff[8] = (w) & 0xff;
buff[9] = (w >> 8) & 0xff;
buff[10] = (h) & 0xff;
buff[11] = (h >> 8) & 0xff;
buff[12] = cal_crc_table(buff);
return buff
},
// z30s
move_track_focus_ctrl(x, y,num=0) {
// 指点跟踪0,指点移动1
var finger_mode = num
var buff = new Array(0xA5, 0x4f, 0x00);
if (finger_mode == 1) {// finger track mode or focus
FW_data_len = 10;
var FW_CMD_data = [0x81, 0x01, 0x05, 0x69, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff];
FW_CMD_data[5] = Math.trunc((x + 960) / 240);
FW_CMD_data[7] = Math.trunc((x + 960) / 240 + 1);
if (y != 0) {
FW_CMD_data[6] = Math.trunc((-y + 540) / 180);
FW_CMD_data[8] = Math.trunc((-y + 540) / 180 + 1);
}
else {
FW_CMD_data[6] = Math.trunc(540 / 180);
FW_CMD_data[8] = Math.trunc(540 / 180 + 1);
}
mmcCmdLen_FW = FW_data_len + 3 + viewlinkheadlen + mmcAddLen;
mmcFrameLen_FW = mmcCmdLen_FW + mmcHeadLen;
mmc_cs_pos_FW = mmcFrameLen_FW - 1;
buff[2] = mmcCmdLen_FW;
var buff_arr = pack_FW(FW_CMD_data, FW_data_len);
buff_arr.forEach(function (item) {
buff.push(item)
})
buff[mmc_cs_pos_FW] = cal_crc_table(buff);
return buff
}
else if (finger_mode == 0) {//move
buff[2] = mmcCmdLen.A1;
A1_CMD.server_status = A1_SERVO_STATUS.movetofinger;
if (x >= 0) {
A1_CMD.param2 = x;
}
else
A1_CMD.param2 = x + 65536;
if (y < 0)// MMC UP + ,DOWN - ,BUT VIEWPRO IS UP - ,DOWN IS +
A1_CMD.param4 = -y;
else if (y > 0)
A1_CMD.param4 = -y + 65536;
else
A1_CMD.param4 = 0;
var buff_arr = pack_A1(A1_CMD);
buff_arr.forEach(function (item) {
buff.push(item)
})
buff[mmc_cs_pos.A1] = cal_crc_table(buff);
return buff
package_send(buff,mmcFrameLen.A1);
}
else if (finger_mode == 2) {// spot AE mode
FW_data_len = 10;
var FW_CMD_data = [0x81, 0x01, 0x05, 0x6A, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff];
FW_CMD_data[5] = Math.trunc((x + 960) / 240);
FW_CMD_data[7] = Math.trunc((x + 960) / 240 + 1);
if (y != 0) {
FW_CMD_data[6] = Math.trunc((-y + 540) / 180);
FW_CMD_data[8] = Math.trunc((-y + 540) / 180 + 1);
}
else {
FW_CMD_data[6] = Math.trunc(540 / 180);
FW_CMD_data[8] = Math.trunc(540 / 180 + 1);
}
mmcCmdLen_FW = FW_data_len + 3 + viewlinkheadlen + mmcAddLen;
mmcFrameLen_FW = mmcCmdLen_FW + mmcHeadLen;
mmc_cs_pos_FW = mmcFrameLen_FW - 1;
buff[2] = mmcCmdLen_FW;
var buff_arr = pack_FW(FW_CMD_data, FW_data_len);
buff_arr.forEach(function (item) {
buff.push(item)
})
buff[mmc_cs_pos_FW] = cal_crc_table(buff);
return buff
}else if(finger_mode==3){
buff[2] = mmcCmdLen.E2;
E2_CMD.ctr = E2_ctr.fingertracktopos;
if (x >= 0)
E2_CMD.param1 = x;
else
E2_CMD.param1 = x + 65536;
if (y < 0)// MMC UP + ,DOWN - ,BUT VIEWPRO IS UP - ,DOWN IS -
E2_CMD.param2 = -y;
else if (y > 0)
E2_CMD.param2 = -y + 65536;
else
E2_CMD.param2 = 0;
var buff_arr = pack_E2(E2_CMD);
buff_arr.forEach(function (item) {
buff.push(item)
})
buff[mmc_cs_pos.E2] = cal_crc_table(buff);
// package_send(buff, mmcFrameLen.E2);
return buff
}
},//z40s 跟踪
move_or_focus_ctrl(data) {
console.log(data, ' window.tatrack_AI_status');
let x = data.x -90 || 0
let y = data.y+50 || 0
let w = data.w || 1920
let h = data.h || 1080
let buff = new Array(0xA5, 0x0B, 11, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00);
buff[4] = (x) & 0xff;
buff[5] = (x >> 8) & 0xff;
buff[6] = (y) & 0xff;
buff[7] = (y >> 8) & 0xff;
buff[8] = (w) & 0xff;
buff[9] = (w >> 8) & 0xff;
buff[10] = (h) & 0xff;
buff[11] = (h >> 8) & 0xff;
buff[3] = window.click_mode_status || 1;;
buff[12] = cal_crc_table(buff);
return buff
}
}
\ No newline at end of file
......@@ -10,12 +10,15 @@
<el-form-item label="token">{{ token }}</el-form-item>
<el-button @click="login">登录</el-button>
</el-form>
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<el-button>上左</el-button>
</el-tooltip>
<MMCFlightControlCenter v-if="token" :token="token" :devMode="true"></MMCFlightControlCenter>
</div>
</template>
<script>
import { Base64 } from "js-base64"
import { Base64 } from "js-base64";
export default {
name: "fkzx1",
......@@ -46,9 +49,9 @@ export default {
await fetch("/crm/user/platformPermission", {
method: "get",
headers: {
"Token": data1.data.token
Token: data1.data.token,
},
})
});
this.token = data1.data.token;
}
},
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论