luohe_fronted/src/pages/index/components/park_monitor.vue

<template>
  <div class="body-wrapper">
    <div class="search-card">
      <h5>停车运行监管</h5>
    </div>
    <div class="all_charts">
    <div class="charts">
        <h4 style="color: #FFFFFF">资源利用分析</h4>
      <div style="width: 100%; height: 550px">
        <piechart
          class="model-pie-body"
          id="chart1"
          :radiusArr="['30%', '70%']"
          :colorArr="modelPieColor"
          :labelFormat="['{name|{b}}', '{sub|{@value}辆 {d}%}','{hr|}']"
          :dataset="modelData"
          :roseType="false"
          :encode="{ itemName: 'name', value: 'value' }"
        />
      </div>
    </div>
    <div style="height: 800px" class="charts2">
      <div style="width: 100%;height: 50%">
      <h3 style="color: white;float: left">停车流量预警</h3>
      <br>
        <br>
        <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
          <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
          </el-table-column>
        </el-table>
        <div class="table-pagination">
          <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
                         :current-page.sync="pageNum" :page-size.sync="pageSize">
          </el-pagination>
        </div>
      </div>
      <br>
      <div style="width: 100%;height: 50%">
      <h3 style="color: white;float: left">泊位停车实况</h3>
      <br>
        <br>
        <el-table :data="tableData2" style="background: #2a2a2a;border-color: #333;">
          <el-table-column v-for="(item, index) in columns2" :key="index" :label="item.label" :prop="item.key">
          </el-table-column>
        </el-table>
        <div class="table-pagination">
          <el-pagination :background="false" layout="total, prev, pager, next" :total="total2" @current-change="handlePageChange2"
                         :current-page.sync="pageNum2" :page-size.sync="pageSize2">
          </el-pagination>
        </div>
      </div>
    </div>
    </div>


  </div>
</template>
<script>
import piechart from "@/components/pieChart";
import vtable from "@/components/vtableNew";
import api from "@/api/article_liao";

export default {
  components: {
    piechart,
    vtable
  },
  data() {
    return {
      modelPieColor: ["#4382f6","#9078f8"],
      modelData: [],
      columns: [
        {
          label: '停车场',
          key: 'carParkName'
        },
        {
          label: '预警信息',
          key: 'alertInfo'
        },
        {
          label: '预警时间',
          key: 'eventTime'
        }
      ],
      columns2: [
        {
          label: '停车场',
          key: 'carParkName'
        },
        {
          label: '泊位号',
          key: 'parkingNo'
        },
        {
          label: '泊车状态',
          key: 'parkingStatus'
        }
      ],
      tableData: [],
      tableData2: [],
      total: 0,
      pageSize: 5,
      pageNum: 1,
      total2: 0,
      pageSize2: 5,
      pageNum2: 1,
    }
  },
  mounted() {
    this.getTableData()
    this.getTableData2()
    this.parkMonitorStat()
  },
  watch: {
  },
  methods: {
    getTableData() {
      const {pageNum, pageSize} = this
      api.llyjListByPage({current: pageNum, size: pageSize}).then(res => {
        this.tableData = res.data.records || []
        this.total = res.data.total || 0
      })
    },
    getTableData2() {
      const {pageNum2, pageSize2} = this
      api.bwtcskListByPage({current: pageNum2, size: pageSize2}).then(res => {
        this.tableData2 = res.data.records || []
        this.total2 = res.data.total || 0
      })
    },
    handlePageChange() {
      this.getTableData()
    },
    handlePageChange2() {
      this.getTableData2()
    },
    parkMonitorStat(){
      api.parkMonitorStat().then(res =>{
        this.modelData = res.data || []
      })
    }
  }
}
</script>
<style  lang="scss" scoped>
.body-wrapper {
  padding: 20px;
  background: #0c0c0c;
  width: 100%;
  .table-pagination{
    text-align: right;
  }
  .search-card{
    font-size: 24px;
    font-weight: bold;
    color: #3498db;
    margin-bottom: 20px;
    .input-wrapper{
      width: 36%;
    }
  }
}
.all_charts{
  display: flex;
  justify-content: space-around;
  text-align: center;

}
.charts{
  width: 45%;
  height: 600px;
  margin-top: 100px;
}
.charts2{
  width: 50%;
  height: 600px;
}
.btn_save{
  background-color: #3498db;
  color: #ffffff;
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  height: 40px;
}

.input-search{
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
  background-color: #2a2a2a;
  border: 1px solid #333;
  color: #ffffff;
}
.audit-dialog{
  .mg-bt{
    margin-bottom: 24px;
  }
  .label{
    text-align: right;
  }
}
</style>