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 class="machine-pie-chart">
              <pie-chart-block :optCfg="machineOpt"/>
            </div>
            <div class="machine-pie-legend">
              <div class="legend-item">
                <i :style="{ backgroundColor:machineOpt.color[0] }"/>
                <span>Online Machinery</span>
                <span>7</span>
              </div>
              <div class="legend-item">
                <i :style="{ backgroundColor:machineOpt.color[1] }"/>
                <span>Offline Machinery</span>
                <span>7</span>
              </div>
            </div>
          </div>
          <div class="online-list">
            <div class="list-item">
              <span class="machine-name">004</span>
              <span class="cons-unit">Machine Name</span>
            </div>
            <div class="list-item">
              <span class="machine-name">004</span>
              <span class="cons-unit">Machine Name</span>
            </div>
            <div class="list-item">
              <span class="machine-name">004</span>
              <span class="cons-unit">Machine Name</span>
            </div>
          </div>
        </template>
      </content-block>
      <content-block title="Piling Machine" class="pile-machine-status">
        <template v-slot:content>
          <div class="offset-status">
            <div class="offset-title">
              Drill Rod Inclination
            </div>
            <div class="offset-item">
            </div>
          </div>
        </template>
      </content-block>
    </div>
    <el-dialog class="screen-dialog" title="Vibration Pipe Sinking and Stone Crushing Pile Information"
               :visible.sync="open"
               :modal="false"
               append-to-body>
      <div class="dialog-content">

      </div>
    </el-dialog>
  </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";
import PieChartBlock from "@/components/charts/PieChartBlock.vue";

export default {
  components: {PieChartBlock, 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,
      open: true,
      machineOpt: {
        color: ['#006699', '#4cabce'],
        tooltip: {
          show: false
        },
        legend: {
          show: false,
          top: 0
        },
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: false,
          }
        },
        labelLine: {
          show: false
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            label: {
              show: false,
              position: 'center'
            },
            data: [
              {
                value: 19,
                name: 'online',
              },
              {
                value: 75,
                name: 'offline',
              }
            ],
          },
        ],
      },
    };
  },
  // 组件卸载前清空图层信息
  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/>