doorAnimate.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
  1. <template>
  2. <view style="width: 100%; height: 100%">
  3. <div class="door-container">
  4. <div style="display: flex" v-show="doorcount == 1">
  5. <div class="door1" v-show="doorcount == 1" :style="{ height: height }">
  6. <div
  7. class="left_door"
  8. v-bind:class="
  9. gatestate1 == '1' ||
  10. gatestate1 == '开启' ||
  11. gatestate1 == '打开' ||
  12. gatestate1 == 'true'
  13. ? 'open_left'
  14. : 'close_left'
  15. "
  16. id="leftdoor1"
  17. ></div>
  18. <div
  19. class="right_door"
  20. v-bind:class="
  21. gatestate1 == '1' ||
  22. gatestate1 == '开启' ||
  23. gatestate1 == '打开' ||
  24. gatestate1 == 'true'
  25. ? 'open_right'
  26. : 'close_right'
  27. "
  28. id="rightdoor1"
  29. ></div>
  30. </div>
  31. <div>
  32. <!-- <video
  33. v-if="item.type == 'flv'"
  34. :id="'cameraElement' + item.id"
  35. muted
  36. autoplay
  37. controls
  38. width="100%"
  39. height="100%"
  40. style="width: 100%"
  41. ></video> -->
  42. </div>
  43. </div>
  44. <div style="" v-show="doorcount == 2">
  45. <div class="door2" v-show="doorcount == 2" :style="{ height: height }">
  46. <div
  47. class="left_door"
  48. v-bind:class="
  49. gatestate1 == '1' ||
  50. gatestate1 == '开启' ||
  51. gatestate1 == '打开' ||
  52. gatestate1 == 'true'
  53. ? 'open_left'
  54. : 'close_left'
  55. "
  56. id="leftdoor2"
  57. ></div>
  58. <div
  59. class="right_door"
  60. v-bind:class="
  61. gatestate1 == '1' ||
  62. gatestate1 == '开启' ||
  63. gatestate1 == '打开' ||
  64. gatestate1 == 'true'
  65. ? 'open_right'
  66. : 'close_right'
  67. "
  68. id="rightdoor2"
  69. ></div>
  70. </div>
  71. <div class="door2" v-show="doorcount == 2" :style="{ height: height }">
  72. <div
  73. class="left_door"
  74. v-bind:class="
  75. gatestate3 == '1' ||
  76. gatestate3 == '开启' ||
  77. gatestate3 == '打开' ||
  78. gatestate3 == 'true'
  79. ? 'open_left'
  80. : 'close_left'
  81. "
  82. id="leftdoor3"
  83. ></div>
  84. <div
  85. class="right_door"
  86. v-bind:class="
  87. gatestate3 == '1' ||
  88. gatestate3 == '开启' ||
  89. gatestate3 == '打开' ||
  90. gatestate3 == 'true'
  91. ? 'open_right'
  92. : 'close_right'
  93. "
  94. id="rightdoor3"
  95. ></div>
  96. </div>
  97. <div>
  98. <!-- <view class="video-js flex" ref="video"> </view> -->
  99. </div>
  100. </div>
  101. <div style="" v-show="doorcount == 3">
  102. <div class="door3" v-show="doorcount == 3" :style="{ height: height }">
  103. <div
  104. class="left_door"
  105. v-bind:class="
  106. gatestate1 == '1' ||
  107. gatestate1 == '开启' ||
  108. gatestate1 == '打开' ||
  109. gatestate1 == 'true'
  110. ? 'open_left'
  111. : 'close_left'
  112. "
  113. id="leftdoor4"
  114. ></div>
  115. <div
  116. class="right_door"
  117. v-bind:class="
  118. gatestate1 == '1' ||
  119. gatestate1 == '开启' ||
  120. gatestate1 == '打开' ||
  121. gatestate1 == 'true'
  122. ? 'open_right'
  123. : 'close_right'
  124. "
  125. id="rightdoor4"
  126. ></div>
  127. </div>
  128. <div class="door3" v-show="doorcount == 3" :style="{ height: height }">
  129. <div
  130. class="left_door"
  131. v-bind:class="
  132. gatestate2 == '1' ||
  133. gatestate2 == '开启' ||
  134. gatestate2 == '打开' ||
  135. gatestate2 == 'true'
  136. ? 'open_left'
  137. : 'close_left'
  138. "
  139. id="leftdoor5"
  140. ></div>
  141. <div
  142. class="right_door"
  143. v-bind:class="
  144. gatestate2 == '1' ||
  145. gatestate2 == '开启' ||
  146. gatestate2 == '打开' ||
  147. gatestate2 == 'true'
  148. ? 'open_right'
  149. : 'close_right'
  150. "
  151. id="rightdoor5"
  152. ></div>
  153. </div>
  154. <div class="door3" v-show="doorcount == 3" :style="{ height: height }">
  155. <div
  156. class="left_door"
  157. v-bind:class="
  158. gatestate3 == '1' ||
  159. gatestate3 == '开启' ||
  160. gatestate3 == '打开' ||
  161. gatestate3 == 'true'
  162. ? 'open_left'
  163. : 'close_left'
  164. "
  165. id="leftdoor6"
  166. ></div>
  167. <div
  168. class="right_door"
  169. v-bind:class="
  170. gatestate3 == '1' ||
  171. gatestate3 == '开启' ||
  172. gatestate3 == '打开' ||
  173. gatestate3 == 'true'
  174. ? 'open_right'
  175. : 'close_right'
  176. "
  177. id="rightdoor6"
  178. ></div>
  179. </div>
  180. <div>
  181. <!-- <video
  182. v-if="item.type == 'flv'"
  183. :id="'cameraElement' + item.id"
  184. muted
  185. autoplay
  186. controls
  187. width="100%"
  188. height="100%"
  189. style="width: 100%"
  190. ></video> -->
  191. </div>
  192. </div>
  193. <div style="" v-show="doorcount == 4">
  194. <div class="door4" v-show="doorcount == 4" :style="{ height: height }">
  195. <div
  196. class="left_door"
  197. v-bind:class="
  198. gatestate1 == '1' ||
  199. gatestate1 == '开启' ||
  200. gatestate1 == '打开' ||
  201. gatestate1 == 'true'
  202. ? 'open_left'
  203. : 'close_left'
  204. "
  205. id="leftdoor7"
  206. ></div>
  207. <div
  208. class="right_door"
  209. v-bind:class="
  210. gatestate1 == '1' ||
  211. gatestate1 == '开启' ||
  212. gatestate1 == '打开' ||
  213. gatestate1 == 'true'
  214. ? 'open_right'
  215. : 'close_right'
  216. "
  217. id="rightdoor7"
  218. ></div>
  219. </div>
  220. <div class="door4" v-show="doorcount == 4" :style="{ height: height }">
  221. <div
  222. class="left_door"
  223. v-bind:class="
  224. gatestate2 == '1' ||
  225. gatestate2 == '开启' ||
  226. gatestate2 == '打开' ||
  227. gatestate2 == 'true'
  228. ? 'open_left'
  229. : 'close_left'
  230. "
  231. id="leftdoor8"
  232. ></div>
  233. <div
  234. class="right_door"
  235. v-bind:class="
  236. gatestate2 == '1' ||
  237. gatestate2 == '开启' ||
  238. gatestate2 == '打开' ||
  239. gatestate2 == 'true'
  240. ? 'open_right'
  241. : 'close_right'
  242. "
  243. id="rightdoor8"
  244. ></div>
  245. </div>
  246. <div class="door4" v-show="doorcount == 4" :style="{ height: height }">
  247. <div
  248. class="left_door"
  249. v-bind:class="
  250. gatestate3 == '1' ||
  251. gatestate3 == '开启' ||
  252. gatestate3 == '打开' ||
  253. gatestate3 == 'true'
  254. ? 'open_left'
  255. : 'close_left'
  256. "
  257. id="leftdoor9"
  258. ></div>
  259. <div
  260. class="right_door"
  261. v-bind:class="
  262. gatestate3 == '1' ||
  263. gatestate3 == '开启' ||
  264. gatestate3 == '打开' ||
  265. gatestate3 == 'true'
  266. ? 'open_right'
  267. : 'close_right'
  268. "
  269. id="rightdoor9"
  270. ></div>
  271. </div>
  272. <div class="door4" v-show="doorcount == 4" :style="{ height: height }">
  273. <div
  274. class="left_door"
  275. v-bind:class="
  276. gatestate4 == '1' ||
  277. gatestate4 == '开启' ||
  278. gatestate4 == '打开' ||
  279. gatestate4 == 'true'
  280. ? 'open_left'
  281. : 'close_left'
  282. "
  283. id="leftdoor10"
  284. ></div>
  285. <div
  286. class="right_door"
  287. v-bind:class="
  288. gatestate4 == '1' ||
  289. gatestate4 == '开启' ||
  290. gatestate4 == '打开' ||
  291. gatestate4 == 'true'
  292. ? 'open_right'
  293. : 'close_right'
  294. "
  295. id="rightdoor10"
  296. ></div>
  297. </div>
  298. <div>
  299. <!-- <video
  300. v-if="item.type == 'flv'"
  301. :id="'cameraElement' + item.id"
  302. muted
  303. autoplay
  304. controls
  305. width="100%"
  306. height="100%"
  307. style="width: 100%"
  308. ></video> -->
  309. </div>
  310. </div>
  311. </div>
  312. </view>
  313. </template>
  314. <script>
  315. // import FlvJs from 'flv.js';
  316. export default {
  317. data() {
  318. return {
  319. height: "200px",
  320. videoDeviceId: "",
  321. flvPlayer: "",
  322. VideoDeviceUrl: "",
  323. };
  324. },
  325. props: [
  326. "gatestate1",
  327. "gatestate2",
  328. "gatestate3",
  329. "gatestate4",
  330. "doorcount",
  331. "cameralist",
  332. ],
  333. methods: {
  334. initData(val) {},
  335. // videoPush: function () {
  336. // var video = document.createElement("video");
  337. // video.id = "video";
  338. // video.style = "width: 100%;";
  339. // video.controls = true;
  340. // this.flvPlayer = flvjs.createPlayer({
  341. // type: "flv",
  342. // isLive: true,
  343. // url: this.VideoDeviceUrl,
  344. // });
  345. // this.flvPlayer.attachMediaElement(video);
  346. // this.flvPlayer.load();
  347. // this.flvPlayer.play();
  348. // this.$refs.video.$el.appendChild(video);
  349. // },
  350. // //注销视频
  351. // flv_destroy() {
  352. // this.flvPlayer.pause();
  353. // this.flvPlayer.unload();
  354. // this.flvPlayer.detachMediaElement();
  355. // this.flvPlayer.destroy();
  356. // this.flvPlayer = null;
  357. // },
  358. },
  359. watch: {
  360. doorcount(val) {
  361. if (val == 1) {
  362. this.height = "180px";
  363. }
  364. if (val == 2) {
  365. this.height = "180px";
  366. }
  367. if (val == 3) {
  368. this.height = "110px";
  369. }
  370. if (val == 4) {
  371. this.height = "180px";
  372. }
  373. },
  374. cameralist(val) {
  375. this.initData(val);
  376. },
  377. },
  378. onUnload() {},
  379. };
  380. </script>
  381. <style scoped>
  382. /*门里面*/
  383. div.door1 {
  384. width: 50%;
  385. float: left;
  386. margin-left: 20%;
  387. background-image: url(/static/door.png);
  388. background-size: 100% 100%;
  389. perspective: 800px;
  390. }
  391. div.door2 {
  392. width: 50%;
  393. float: left;
  394. background-image: url(/static/door.png);
  395. background-size: 100% 100%;
  396. perspective: 800px;
  397. }
  398. div.door3 {
  399. width: 33.3%;
  400. float: left;
  401. background-image: url(/static/door.png);
  402. background-size: 100% 100%;
  403. perspective: 400px;
  404. }
  405. div.door4 {
  406. width: 50%;
  407. float: left;
  408. background-image: url(/static/door.png);
  409. background-size: 100% 100%;
  410. perspective: 800px;
  411. }
  412. /*左门/右门*/
  413. div.left_door {
  414. top: 12%;
  415. left: 10%;
  416. width: 40.5%;
  417. height: 78%;
  418. box-sizing: border-box;
  419. float: left;
  420. z-index: 1;
  421. position: absolute;
  422. transition: all 2s ease;
  423. background-image: url(/static/left.png);
  424. background-size: 100% 100%;
  425. }
  426. div.right_door {
  427. top: 12%;
  428. right: 10%;
  429. width: 40.2%;
  430. height: 78%;
  431. box-sizing: border-box;
  432. float: left;
  433. z-index: 1;
  434. position: absolute;
  435. transition: all 2s ease;
  436. background-image: url(/static/left.png);
  437. background-size: 100% 100%;
  438. }
  439. div.left_door {
  440. transform-origin: left center;
  441. border-right: 1px solid rgb(8, 8, 8);
  442. }
  443. div.right_door {
  444. transform-origin: right center;
  445. border-left: 1px solid rgb(8, 8, 8);
  446. }
  447. .open_left {
  448. transform: rotateY(100deg);
  449. }
  450. .open_right {
  451. transform: rotateY(-100deg);
  452. }
  453. .close_left {
  454. transform: rotateY(0);
  455. }
  456. .close_right {
  457. transform: rotateY(0deg);
  458. }
  459. /*使用css变形功能
  460. div.door:hover div.left_door{
  461. transform:rotateY(100deg);
  462. }
  463. div.door:hover div.right_door{
  464. transform:rotateY(-100deg);
  465. }*/
  466. </style>