<template> <!-- 设备按钮 --> <div class="typelist-div" @click.stop=""> <div class="t flex" :class="{ show: searchShow }" @click.stop=""> <div class="device-btn-wrapper flex"> <div class="list" v-for="(item, index) in arr" :key="index" :class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''" @click.stop="sel1(index, item)" > <img :src="item.imgurl" style="margin-top: 2px; float: left; margin-right: 3px" /> {{ item.name }} </div> </div> <div class="img-wrapper flex"> <img @click.stop="searchChange" :class="{ show: searchShow }" class="active" src="@/assets/firstimage/top-down.png" alt="" /> </div> <div class="search flex"> <div class="input-wrapper flex"> <input v-model="searchVal" type="text" @keyup.enter="searchClick" /> </div> <div @click.stop="searchClick" class="btn-wrapper">搜索</div> </div> <img src="@/assets/firstimage/index-top-line.png" class="bottom-line" /> </div> <!-- <div class="b"> --> <transition name="fadeBottom" mode="out-in"> <div @click.stop="" class="device-container gdt" v-if="searchShow && searchItemShow" > <div class="devie-item zzz" v-for="item in searchList" :key="item.id + '' + item.type" @click="deviceItemClick(item)" > <!-- {{ item.NAME }} --> <div class="a">{{ devviceData[item.type] }}</div> <div class="b">{{ item.NAME }}</div> </div> </div> </transition> <!-- </div> --> </div> </template> <script> import { searchDevice, searchDeviceDetail } from "@/api/bigWindow/getDevice.js"; export default { name: "", data() { return { selarr1: [1], searchShow: false, searchItemShow: false, searchVal: "", searchList: [], devviceData: { 1: "阀井 :", 2: "调压箱 :", 3: "场站 :", 4: "居民用户 :", 5: "商业用户 :", 6: "工业用户 :", 7: "监控 :", 8: "餐饮单位液化气用户 :", 9: "管道 :", }, arr: [ { val: 3, ischeck: false, imgurl: require("@/assets/firstimage/famen1.png"), name: "阀门井", }, { val: 4, ischeck: false, imgurl: require("@/assets/firstimage/changzhan1.png"), name: "场 站", }, { val: 2, ischeck: false, imgurl: require("@/assets/firstimage/tiaoyaxiang1.png"), name: "调压箱", }, { val: 1, ischeck: false, imgurl: require("@/assets/firstimage/guandao1.png"), name: "管道", }, { val: 5, ischeck: false, imgurl: require("@/assets/firstimage/jiankong1.png"), name: "监 控", }, { val: 6, ischeck: false, imgurl: require("@/assets/firstimage/user1.png"), name: "居民用户", }, { val: 61, ischeck: false, imgurl: require("@/assets/firstimage/syUser1.png"), name: "商业用户", }, { val: 18, ischeck: false, imgurl: require("@/assets/firstimage/yhq1.png"), name: "餐饮用户", }, ], }; }, methods: { searchChange() { this.searchShow = !this.searchShow; // 如果关闭了搜索框,那么搜索联动数据框也要关闭 if (!this.searchShow) { this.searchItemShow = false; } }, searchClick() { searchDevice({ name: this.searchVal }).then((res) => { if (res.code == 200) { this.searchList = Object.values(res.data).flat(); this.searchItemShow = true; console.log(this.searchList); } }); }, deviceItemClick(item) { searchDeviceDetail({ type: item.type, id: item.id }).then((res) => { if (res.code == 200) { let data = null; // console.log(res); // console.log(item); // 1.阀井 iconType=3 // 2.调压箱 iconType=2 // 3.场站 iconType=4 // 4.居民用户 6 // 5.商业用户 61 // 6.工业用户 // 7.监控 5 // 8.餐饮单位液化气用户 conType=18 // 9.管道 1 // 1,2,3的时候 是res.data.data才能获取数据,结构为数组。 // 4,5 是 res.data就能获取数据,结构为数组 // 7,8,9的时候,res.data能获取数据,结构为对象 const type = item.type; if (type < 4) { data = res.data.data[0]; if (type == 1) { data.iconType = 3; } else if (type == 2) { data.iconType = 2; } else { data.iconType = 4; } } else if (type < 7) { data = res.data[0]; if (type == 4) { data.iconType = 6; } else if (type == 5) { data.iconType = 61; } else { data.iconType = 62; } } else { data = res.data; if (type == 7) { data.iconType = 5; } else if (type == 8) { data.iconType = 18; } else { data.iconType = 1; } } this.$emit("deviceSearchClick", item, data); } }); }, clearSearchContainer() { this.searchItemShow = false; }, sel1(index, item) { const ind = this.selarr1.indexOf(item.val); if (ind >= 0) { this.selarr1.splice(ind, 1); } else { this.selarr1.push(item.val); } this.$emit("sel1", this.selarr1); // this.map.allfilter(this.selarr, this.selarr1); }, }, }; </script> <style lang="scss" scoped> .typelist-div { transition: all 0.2s linear; width: 840px; // height: 96px; // height: 56px; z-index: 9999; position: fixed; top: 90px; margin-left: calc((100% - 840px) / 2); background: rgba(2, 41, 81, 0.25); border: 1px solid #275275; box-sizing: border-box; padding-top: 10px; transform: scale(1); .t { transition: all 0.2s linear; height: 40px; // background: blue; position: relative; overflow: hidden; &.show { height: 85px; } .list { z-index: 9999; float: left; margin-left: 15px; height: 28px; // margin-bottom:10px; color: #fff; line-height: auto; text-align: center; /* background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%); box-shadow: inset 0px 1px 2px 1px #125c9b; */ font-size: 12px; padding: 1px 10px; cursor: pointer; line-height: 26px; background: rgba(31, 106, 215, 0.32); box-sizing: border-box; border: 1px solid #2d64b4; border-radius: 2px; &:hover { // opacity: 0.7; } } .list.active { /* background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%); box-shadow: inset 0px 1px 2px 1px #125c9b; */ // font-size: 12px; // color: #00ffff; // border: 1px solid #0f6ca1; // box-shadow: inset 0px 0px 10px 1px #0f6ca1; // background-size: 100% 100%; // background-repeat: no-repeat; background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%); border-radius: 2px; box-sizing: border-box; border: 1px solid #72c1ff; } .list img { width: 20px; height: 20px; } .device-btn-wrapper { width: 780px; margin-right: 5px; flex-wrap: wrap; } .search { width: 785px; position: absolute; top: 40px; .input-wrapper { background: #082337; box-sizing: border-box; border: 1px solid #1a498e; margin-left: 15px; margin-right: 12px; box-sizing: border-box; // width: 600px; flex: 1; height: 28px; align-items: center; input { border: none; background: none; color: #fff; width: 100%; padding-left: 8px; &:focus { outline: none; } } } .btn-wrapper { width: 50px; height: 28px; color: #fff; text-align: center; line-height: 28px; background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%); box-sizing: border-box; border: 1px solid #72c1ff; cursor: pointer; &:hover { opacity: 0.7; } } } .img-wrapper { width: 28px; height: 28px; background: rgba(3, 39, 70, 0.8); border: 1px solid #125c98; margin-right: 10px; align-items: center; justify-content: center; img { width: 20px; height: 12px; transform: rotateZ(0deg); transition: all 0.2s linear; cursor: pointer; &.show { transform: rotateZ(180deg); } } } .bottom-line { position: absolute; right: 0; bottom: 0; width: 280px; height: 1px; // background: red; } } .device-container { width: 838px; max-height: 400px; position: absolute; background: rgba(2, 41, 81, 0.7); border: 1px solid #275275; box-sizing: border-box; top: 100px; padding: 10px; padding-bottom: 0; overflow-y: auto; .devie-item { color: #fff; margin-bottom: 10px; height: 28px; line-height: 28px; cursor: pointer; box-sizing: border-box; padding: 0 2px; display: flex; .a { // width: 150px; } &:hover { // background: linear-gradient(180deg, #ffb464 0%, #e96310 100%); background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%); } } } } </style>