park-application-fe/src/views/cons/screen/index.vue

<template>
  <div class="screen-container">
    <bd-map :loaded="loaded"/>
    <div class="screen-title-container"><span class="title-content">Digital Construction Dashboard</span></div>
    <content-block title="Construction Management" class="screen-left-container">
      <template v-slot:content>
        <div class="control-content">
          <div class="ctl-item">
            <el-input placeholder="请输入内容" v-model="searchVal" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
          <div class="ctl-item">
            <cons-unit-tree v-model="consUnit"/>
          </div>
        </div>
        <div class="machine-list">
          <div class="list-container-title">
            Machine List <span v-if="loading" style="font-size: 10px;color: #fefefe;margin-left: 10px">加载中...</span>
          </div>
          <div class="content-list infinite-list-wrapper"
               v-infinite-scroll="load"
               :infinite-scroll-disabled="disabled"
          >
            <div v-for="i in count" class="list-item">machine {{ i }}</div>
            <p v-if="noMore">没有更多了</p>
          </div>
        </div>
      </template>
    </content-block>

    <div class="screen-right-container">
      <content-block title="Online Machinery" class="online-machine-block">
        <template v-slot:content>
          <div class="online-summery">
          </div>
          <div class="online-list">
          </div>
        </template>
      </content-block>
    </div>
  </div>
</template>

<script>
import BdMap from "@/components/map/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import ConsUnitTree from "@/views/cons/consUnit/ConsUnitTree.vue";
import ContentBlock from "@/views/cons/screen/ContentBlock.vue";

export default {
  components: {ContentBlock, ConsUnitTree, BdMap, Treeselect},
  props: {
    ws: {
      type: String,
      default: '',
    },
  },
  computed: {
    noMore() {
      return this.count >= 100
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
  watch: {
    consUnit(val) {
      console.log(val)
    },
  },
  data() {
    return {
      consUnit: null,
      searchVal: "",
      count: 10,
      loading: false
    };
  },
  // 组件卸载前清空图层信息
  beforeDestroy() {
  },
  created() {

  },
  mounted() {
    this.init();
  },
  methods: {
    init() {

    },
    loaded(map) {

    },
    load() {
      this.loading = true
      setTimeout(() => {
        this.count += 2
        this.loading = false
      }, 2000)
    }
  },
};
</script>
<style lang="scss" src="./index.scss" scoped/>