机房列表

whycwx

2021-07-28 dca44dafaf6773c5176ef080368d7266a0fb2bec

机房列表

 src/assets/js/api.js

@@ -12,3 +12,15 @@
        data: null
    })
}

/**
 * 查询机房信息
 * 参数：json = {"StationName1":"北京市","StationName2":"市辖区","StationName5":"海淀区"}
 */
 export const searchStation = (params) => {
    return axios({
        method: "post",
        url: "BattInfAction!serchAllStationName",
        data: "json=" + JSON.stringify(params)
    })
}

 src/components/site/siteList.vue

New file
@@ -0,0 +1,73 @@
<template>
    <div>
        <van-list
            :finished="finished"
            finished-text="没有更多了"
            @load="searchStation()"
            >
            <van-cell v-for="(item,i) in dataList" :key="i" :title="item.label"/>
        </van-list>
    </div>
</template>
<script>
import { searchStation } from "@/assets/js/api";
export default {
    data(){
        return {
            finished: false,
            dataList:[]
        }
    },
    mounted(){

    },
    methods:{
        searchStation:function(){
            let self = this;
                searchStation({
                    StationName1:"",
                    StationName2:"",
                    StationName5:"",
                }).then((res)=>{
                    let rs = JSON.parse(res.data.result);
                    let data = [];
                    if(rs.code == 1) {
                        data = rs.data;
                    }
                    // 格式化数据
                    this.formatData(data);
                });
        },
        formatData(data) {
            let self = this;
            let homeList = [];
            // 遍历数据构造树状
            data.forEach(item=>{
                let tmp = {};
                tmp.label = item.StationName1+"-"+item.StationName2+"-"+item.StationName5+"-"+item.StationName3;
                tmp.key = item.FBSDeviceId+Math.random();
                tmp.id = item.FBSDeviceId;
                tmp.data = item;
                let index = this.checkValIsIn(tmp.label, homeList);
                if(index == -1) {
                    homeList.push(tmp);
                }
            });
            self.dataList = homeList;
            self.finished = true;
        },
        checkValIsIn(val, arr) {
            for(let i=0; i<arr.length; i++) {
                if(arr[i].label == val) {
                    return i;
                }
            }
            return -1;
        },
    }

}
</script>
<style scoped>

</style>

 src/pages/index.vue

@@ -7,16 +7,20 @@
          <china-map ref="chinaMap" id="chinaMap" name="zhongguo"></china-map>
        </div>
      </van-tab>
      <van-tab title="站点列表">内容 2</van-tab>
      <van-tab title="站点列表">
        <site-list ref="siteList" id="siteList"></site-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
  import ChinaMap from '@/components/chart/chinaMap.vue'
  import siteList from '@/components/site/siteList.vue'
  export default {
    components: {
      ChinaMap
      ChinaMap,
      siteList
    },
    data() {
      return {