Dnav.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449
  1. <template>
  2. <div>
  3. <div class="nav">
  4. <div
  5. v-for="(item,index) in navList"
  6. :key="index"
  7. class="nav-item"
  8. :class='{"icon-active":active[index]}'
  9. @click="handleClick(item,index)"
  10. >
  11. <img
  12. class="icon"
  13. :src="item.src"
  14. />
  15. <span class="nav-text">{{item.text}}</span>
  16. <div
  17. class="nav-sec"
  18. v-if="index==2 && isGeneralShow"
  19. >
  20. <div
  21. class="nav-item "
  22. v-for="(item,i) in generalList"
  23. :class='{"sec-active":secActive[i]}'
  24. :key="i"
  25. @click="handleOpen(item.name)"
  26. @mouseover="handSecMouseOver(i,2)"
  27. @mouseleave="handSecMouseLeave"
  28. >
  29. <span class="nav-radio"></span>
  30. <span class="nav-text">{{item.text}}</span>
  31. </div>
  32. </div>
  33. <div
  34. class="nav-sec"
  35. v-if="index==3 && isFireShow"
  36. >
  37. <div
  38. class="nav-item "
  39. v-for="(item,i) in fireList"
  40. :class='{"sec-active":secActive[i]}'
  41. :key="i"
  42. @click="handleOpen(item.name)"
  43. @mouseover="handSecMouseOver(i,1)"
  44. @mouseleave="handSecMouseLeave"
  45. >
  46. <span class="nav-radio"></span>
  47. <span class="nav-text">{{item.text}}</span>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. <img
  53. v-show="isFireShow||isGeneralShow"
  54. src="../../assets/images/device/nav-bg.png"
  55. alt="nav-bg"
  56. class="nav-bg"
  57. >
  58. </div>
  59. </template>
  60. <script>
  61. export default {
  62. name: "Dnav",
  63. props: {
  64. routerName: {
  65. type: String
  66. }
  67. },
  68. data() {
  69. return {
  70. navList: [
  71. {
  72. text: "全部",
  73. src: require("../../assets/images/device/icon1.png")
  74. },
  75. {
  76. text: "供电系统",
  77. src: require("../../assets/images/device/icon2.png")
  78. },
  79. {
  80. text: "暖通系统",
  81. src: require("../../assets/images/device/icon3-active.png")
  82. },
  83. {
  84. text: "消防系统",
  85. src: require("../../assets/images/device/icon4.png")
  86. },
  87. {
  88. text: "弱电系统",
  89. src: require("../../assets/images/device/icon5.png")
  90. },
  91. {
  92. text: "给排水",
  93. src: require("../../assets/images/device/icon6.png")
  94. },
  95. {
  96. text: "电梯系统",
  97. src: require("../../assets/images/device/icon7.png")
  98. },
  99. {
  100. text: "燃气系统",
  101. src: require("../../assets/images/device/icon8.png")
  102. },
  103. {
  104. text: "土建系统",
  105. src: require("../../assets/images/device/icon9.png")
  106. }
  107. ],
  108. fireList: [
  109. {
  110. text: "消防系统原理图",
  111. name: "fire-system"
  112. },
  113. {
  114. text: "主要设备清单",
  115. name: "fire-mainlist"
  116. },
  117. {
  118. text: "维修维保事项(内)",
  119. name: "fire-inner"
  120. },
  121. {
  122. text: "维修维保事项(外)",
  123. name: "fire-outer"
  124. },
  125. {
  126. text: "专项维修及其他事项",
  127. name: "fire-other"
  128. }
  129. ],
  130. generalList: [
  131. {
  132. text: "空调系统原理图",
  133. name: "air-system"
  134. },
  135. {
  136. text: "分水器支路分布明细",
  137. name: "water-layout"
  138. },
  139. {
  140. text: "主要设备清单",
  141. name: "main-list"
  142. },
  143. {
  144. text: "维修维保事项(内)",
  145. name: "maintain-inner"
  146. },
  147. {
  148. text: "维修维保事项(外)",
  149. name: "maintain-outer"
  150. },
  151. {
  152. text: "专项维修及其他事项",
  153. name: "maintain-other"
  154. }
  155. ],
  156. active: [false, false, true, false, false, false, false, false],
  157. secActive: [],
  158. isFireShow: false,
  159. isGeneralShow: true
  160. };
  161. },
  162. mounted() {},
  163. methods: {
  164. handleOpen(name) {
  165. if (
  166. name == "air-system" ||
  167. name == "buseiness" ||
  168. name == "main-list" ||
  169. name == "buseiness" ||
  170. name == "fire-system" ||
  171. name == "buseiness" ||
  172. name == "buseiness"
  173. ) {
  174. this.$emit("handleEmit", { show: true, src: name, istab: true });
  175. } else {
  176. this.$emit("handleEmit", { show: true, src: name, istab: false });
  177. }
  178. },
  179. mouseOver(index) {
  180. this.navList = [
  181. {
  182. text: "全部",
  183. src: require("../../assets/images/device/icon1.png")
  184. },
  185. {
  186. text: "供电系统",
  187. src: require("../../assets/images/device/icon2.png")
  188. },
  189. {
  190. text: "暖通系统",
  191. src: require("../../assets/images/device/icon3.png")
  192. },
  193. {
  194. text: "消防系统",
  195. src: require("../../assets/images/device/icon4.png")
  196. },
  197. {
  198. text: "弱电系统",
  199. src: require("../../assets/images/device/icon5.png")
  200. },
  201. {
  202. text: "给排水",
  203. src: require("../../assets/images/device/icon6.png")
  204. },
  205. {
  206. text: "电梯系统",
  207. src: require("../../assets/images/device/icon7.png")
  208. },
  209. {
  210. text: "燃气系统",
  211. src: require("../../assets/images/device/icon8.png")
  212. },
  213. {
  214. text: "土建系统",
  215. src: require("../../assets/images/device/icon9.png")
  216. }
  217. ];
  218. this.isFireShow = false;
  219. this.isGeneralShow = false;
  220. this.active = [false, false, false, false, false, false, false, false];
  221. this.navList = this.navList.map((item, i) => {
  222. if (i == index) {
  223. item = {
  224. text: item.text,
  225. src: require("../../assets/images/device/icon" +
  226. (index + 1) +
  227. "-active.png")
  228. };
  229. }
  230. return item;
  231. });
  232. this.$set(this.active, index, true);
  233. if (index == 2) {
  234. this.isGeneralShow = true;
  235. }
  236. if (index == 3) {
  237. this.isFireShow = true;
  238. }
  239. },
  240. handSecMouseOver(i, type) {
  241. if (type == 2) {
  242. this.secActive = this.generalList.map((item, index) => {
  243. if (index == i) {
  244. return true;
  245. }
  246. return false;
  247. });
  248. }
  249. this.secActive = this.fireList.map((item, index) => {
  250. if (index == i) {
  251. return true;
  252. }
  253. return false;
  254. });
  255. },
  256. handSecMouseLeave() {
  257. this.secActive = [];
  258. },
  259. handleNav(index) {
  260. this.navList = this.navList.map((item, i) => {
  261. if (i == index) {
  262. item = {
  263. text: item.text,
  264. src: require("../../assets/images/device/icon" +
  265. (index + 1) +
  266. "-active.png")
  267. };
  268. }
  269. return item;
  270. });
  271. this.$set(this.active, index, true);
  272. },
  273. handleClick(item, index) {
  274. this.navList = [
  275. {
  276. text: "全部",
  277. src: require("../../assets/images/device/icon1.png")
  278. },
  279. {
  280. text: "供电系统",
  281. src: require("../../assets/images/device/icon2.png")
  282. },
  283. {
  284. text: "暖通系统",
  285. src: require("../../assets/images/device/icon3.png")
  286. },
  287. {
  288. text: "消防系统",
  289. src: require("../../assets/images/device/icon4.png")
  290. },
  291. {
  292. text: "弱电系统",
  293. src: require("../../assets/images/device/icon5.png")
  294. },
  295. {
  296. text: "给排水",
  297. src: require("../../assets/images/device/icon6.png")
  298. },
  299. {
  300. text: "电梯系统",
  301. src: require("../../assets/images/device/icon7.png")
  302. },
  303. {
  304. text: "燃气系统",
  305. src: require("../../assets/images/device/icon8.png")
  306. },
  307. {
  308. text: "土建系统",
  309. src: require("../../assets/images/device/icon9.png")
  310. }
  311. ];
  312. this.isFireShow = false;
  313. this.isGeneralShow = false;
  314. this.active = [false, false, false, false, false, false, false, false];
  315. this.navList = this.navList.map((item, i) => {
  316. if (i == index) {
  317. item = {
  318. text: item.text,
  319. src: require("../../assets/images/device/icon" +
  320. (index + 1) +
  321. "-active.png")
  322. };
  323. }
  324. return item;
  325. });
  326. this.$set(this.active, index, true);
  327. if (index == 2) {
  328. this.isGeneralShow = true;
  329. }
  330. if (index == 3) {
  331. this.isFireShow = true;
  332. }
  333. if (item.text == "消防系统") {
  334. this.$emit("handleEmit", { show: true, src: "Fire", istab: true });
  335. }
  336. if (item.text == "暖通系统") {
  337. this.$emit("handleEmit", { show: true, src: "General", istab: true });
  338. }
  339. }
  340. },
  341. watch: {
  342. routerName(val) {
  343. if (val == "device") {
  344. this.handleClick(
  345. {
  346. text: "暖通系统",
  347. src: require("../../assets/images/device/icon3-active.png")
  348. },
  349. 2
  350. );
  351. }
  352. }
  353. }
  354. };
  355. </script>
  356. <style lang="less" scoped>
  357. .nav {
  358. position: absolute;
  359. top: 188px;
  360. left: 0;
  361. z-index: 1000;
  362. // border: 1px solid yellow;
  363. .nav-item {
  364. cursor: pointer;
  365. display: flex;
  366. align-items: center;
  367. height: 50px;
  368. padding-right: 40px;
  369. font-size: 16px;
  370. color: #fff;
  371. .nav-text {
  372. margin-left: 22px;
  373. }
  374. }
  375. }
  376. .nav-bg {
  377. position: absolute;
  378. top: 62px;
  379. left: 0;
  380. }
  381. .nav-sec {
  382. position: absolute;
  383. width: 244px;
  384. z-index: 1000;
  385. // border: 1px solid red;
  386. top: 0;
  387. left: 100%;
  388. // display: none;
  389. // border: 1px solid blue;
  390. .nav-radio {
  391. width: 5px;
  392. height: 5px;
  393. background: red;
  394. border-radius: 50%;
  395. }
  396. .nav-item {
  397. font-size: 14px;
  398. margin-bottom: 25px;
  399. padding-right: 0;
  400. &:nth-child(1) {
  401. margin-left: 36px;
  402. }
  403. &:nth-child(2) {
  404. margin-left: 54px;
  405. }
  406. &:nth-child(3) {
  407. margin-left: 60px;
  408. }
  409. &:nth-child(4) {
  410. margin-left: 58px;
  411. }
  412. &:nth-child(5) {
  413. margin-left: 48px;
  414. }
  415. &:nth-child(6) {
  416. margin-left: 28px;
  417. }
  418. .nav-text {
  419. margin-left: 12px;
  420. }
  421. }
  422. .sec-active {
  423. font-size: 16px;
  424. color: #fff;
  425. .nav-radio {
  426. width: 8px;
  427. height: 8px;
  428. }
  429. }
  430. }
  431. .icon {
  432. width: 18px;
  433. height: 14px;
  434. margin-left: 30px;
  435. }
  436. .icon-active {
  437. background: url("../../assets/images/device/active.png");
  438. }
  439. </style>