123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- <template>
- <div class='fenbu-box'>
- <!-- 图例 -->
- <div class='legend-boxs'>
- <Legend :floors='floors' type='0'></Legend>
- </div>
- <floor-list v-if='floors.length>0' :floorsArr='floors' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
- <div class='additional-box' v-if='floors.length>0'>
- <div class='additional' @click='additionalColl'>
- <img src='../../assets/imgs/bg.png' alt />
- </div>
- <el-collapse-transition>
- <div v-if='show' class='add-img'>我是放附加数据图片哒。。。</div>
- </el-collapse-transition>
- </div>
- <div v-show='floors.length>0'>
- <floorMap ref='floorMap' :loadName='loadName' :type='"floor"'></floorMap>
- </div>
- <div class='nodata' v-show='floors.length==0'>
- <img class='img1' src='@/assets/imgs/wtp.png' alt />
- <div class='no-img'>暂无分布图,请手动绘制</div>
- </div>
- </div>
- </template>
- <script>
- import floorMap from '@/components/floorMap/index.vue'
- import floorList from '@/components/floorList.vue'
- import { mapGetters } from 'vuex'
- import { queryPics } from '@/api/legendLibrary.js'
- export default {
- components: { floorMap, floorList },
- data() {
- return {
- show: false,
- floorInfo: {
- gname: 'f1',
- code: 'F1'
- },
- loadName: '',
- type: '',
- floors: []
- }
- },
- computed: {
- ...mapGetters(['floorsArr'])
- },
- methods: {
- emitFloor(item) {
- this.floorInfo = item
- this.$refs.floorMap.init(this.floorInfo.gname)
- },
- additionalColl() {
- this.show = !this.show
- },
- getFloorData() {
- let postParams = {
- Distinct: true,
- Filters: "projectId ='1000423';categoryId='LCGN' or categoryId='XFBFYCFL';isPub=true",
- PageNumber: 1,
- PageSize: 500,
- Projection: ['floorId']
- }
- let floor = []
- queryPics({ postParams }).then(res => {
- console.log(res)
- if (res.Total == 0) {
- this.floors = []
- } else {
- floor = res.Content
- this.floorsArr.forEach(el => {
- floor.forEach(ele => {
- if (ele.floorId == el.gname) {
- this.floors.push({
- gname: el.gname,
- code: el.code
- })
- }
- })
- })
- }
- console.log(this.floors)
- })
- }
- },
- mounted() {
- // this.getFloorData()
- // this.$refs.floorMap.init(this.floorInfo.gname)
- }
- }
- </script>
- <style lang="less">
- .fenbu-box {
- display: flex;
- height: 100%;
- justify-content: center;
- align-items: center;
- .legend-boxs {
- position: fixed;
- z-index: 9;
- right: 32px;
- top: 155px;
- }
- .additional-box {
- position: relative;
- .additional {
- width: 44px;
- height: 44px;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
- border-radius: 2px;
- position: fixed;
- right: 32px;
- top: 420px;
- z-index: 2;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- img {
- width: 20px;
- height: 20px;
- }
- }
- .add-img {
- width: 560px;
- height: 325px;
- background: #ffffff;
- -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
- box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
- border-radius: 2px;
- border: 1px solid #e4e5e7;
- position: absolute;
- right: 77px;
- top: 93px;
- z-index: 2;
- }
- }
- .nodata {
- height: calc(100%-50px);
- .img1 {
- width: 126px;
- height: 121px;
- }
- .no-img {
- font-size: 16px;
- font-family: MicrosoftYaHei;
- color: rgba(100, 108, 115, 1);
- margin-top: 8px;
- }
- }
- }
- </style>
|