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

<template>
  <div class="body-wrapper">
    <div style="width: 100%;display: flex;justify-content: space-between;">
      <div style="width: 33%;height: 400px;">
        <h4 style="color: white">车场数量</h4>
        <piechart
          class="model-pie-body"
          id="chart1"
          :radiusArr="['30%', '70%']"
          :roseType = "false"
          :colorArr="modelPieColor"
          :labelFormat="['{name|{b}}', '{sub|{@value} {d}%}', '{hr|}']"
          :dataset="modelData"
          :encode="{ itemName: 'name', value: 'value' }"
        />
      </div>
      <div style="width: 33%;height: 400px;">
        <h4 style="color: white">设备情况</h4>
        <barchart
          class="side-chart"
          :autoStop="false"
          :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
          legendIcon="react"
          :bottom="30"
          :xlabelFormat="xLabelFormat"
          :top="60"
          yAxisName="(个)"
          :tooltip="tooltipFormat"
          :dataset="modelData2"
          :encode="[
            {x: 'month', y: 'hs', seriesName: '在线'},
            {x: 'month', y: 'cs', seriesName: '离线'}]"
          :labelSize="15"
          id="fxdqhszzt"
        />
      </div>
      <div style="width: 33%;height: 400px;">
        <h4 style="color: white">事件数据</h4>
        <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>
    <br>
    <br>
    <div style="width: 100%;display: flex;justify-content: space-between;">
      <div style="width: 33%;height: 400px;">
        <div align="center" style="color: white">停车趋势</div>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(%)"
          :dataset="linedata"
          :tooltipFormat="lineTooltipFormat1"
          :encode="[
              { x: 'month', y: 'lastAmount', seriesName: '停车总时长（时）',bool:'true' },
            ]"
          id="sxcyfzqk1"
        />
      </div>
      <div style="width: 33%;height: 400px;">
        <div align="center" style="color: white">泊位周转趋势</div>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(%)"
          :dataset="linedata2"
          :tooltipFormat="lineTooltipFormat1"
          :encode="[
              { x: 'month', y: 'lastAmount', seriesName: '当日平均周转次数',bool:'true' },
            ]"
          id="bwzzqs"
        />
      </div>
      <div style="width: 33%;height: 400px;">
        <div align="center" style="color: white">泊位利用率趋势</div>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(%)"
          :dataset="linedata3"
          :tooltipFormat="lineTooltipFormat1"
          :encode="[
              { x: 'month', y: 'lastAmount', seriesName: '当日平均利用率（%）',bool:'true' },
            ]"
          id="bwlylqs"
        />
      </div>
    </div>
    <br>
    <br>
    <div style="width: 100%;display: flex;justify-content: space-between;">
      <div style="width: 33%;height: 400px;">
        <div align="center" style="color: white">实缴趋势</div>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(%)"
          :dataset="linedata4"
          :tooltipFormat="lineTooltipFormat1"
          :encode="[
              { x: 'month', y: 'lastAmount', seriesName: '实缴率(%)',bool:'true' },
            ]"
          id="sjqs"
        />
      </div>
      <div style="width: 33%;height: 400px;">
        <div align="center" style="color: white">泊位实时占用率</div>
        <linechart
          :autoStop="false"
          :top="30"
          :bottom="30"
          :left="40"
          :legendTop="0"
          yAxisName="(%)"
          :dataset="linedata5"
          :tooltipFormat="lineTooltipFormat1"
          :encode="[
              { x: 'month', y: 'lastAmount', seriesName: '实时占用率',bool:'true' },
            ]"
          id="bwsszyl"
        />
      </div>
      <div style="width: 33%;height: 400px;">
        <h4 style="color: white">动态信息监控</h4>
        <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>
</template>
<script>
import piechart from "@/components/pieChart";
import barchart from "@/components/barChart";
import linechart from "@/components/lineChart";
import api from "@/api/article_z";
import api_l from "@/api/article_liao";

export default {
  components: {
    piechart,
    barchart,
    linechart
  },
  data() {
    return {
      columns: [
        {
          label: '设备名称',
          key: 'deviceName'
        },
        {
          label: '状态',
          key: 'deviceState'
        }
      ],
      columns2: [
        {
          label: '车牌号',
          key: 'plateNo'
        },
        {
          label: '车辆类型',
          key: 'carTypeName'
        }
      ],
      modelPieColor: ["#2E8B57","#9078f8","#00FFFF","#DAA520","#20B2AA"],
      modelData: [],
      modelPieColor2: ["#2E8B57","#9078f8","#00FFFF","#DAA520","#20B2AA"],
      modelData2: [{
        "mouth": "市图书馆停车场",
        "hs": 6053,
        "cs": 1921
      },
        {
          "mouth": "中山公园停车场",
          "hs": 6033,
          "cs": 3766
        },
        {
          "mouth": "天地广场停车场",
          "hs": 2258,
          "cs": 2513
        }],
      modelPieColor3: ["#2E8B57","#9078f8","#00FFFF","#DAA520","#20B2AA"],
      modelData3: [],
      tableData: [],
      tableData2: [],
      linedata:[{
        "mouth": "星期一",
        "lastAmount": 14
      },
        {
          "mouth": "星期二",
          "lastAmount": 46
        },
        {
          "mouth": "星期三",
          "lastAmount": 59
        },],
      linedata2:[],
      linedata3:[],
      linedata4:[],
      linedata5:[],
      total: 0,
      pageSize: 5,
      pageNum: 1,
      total2: 0,
      pageSize2: 5,
      pageNum2: 1,
      radio: '2',
      dialogVisible: false,
      selRow: {},
    }
  },
  mounted() {
    this.dashBusinessOverviewStat1()
    this.dashBusinessOverviewStat2()
    this.dashBusinessOverviewStat3()
    this.dashBusinessOverviewStat4()
    this.dashBusinessOverviewStat5()
    this.dashBusinessOverviewStat6()
    this.dashBusinessOverviewStat7()
    this.getTableData2()
    const {pageNum, pageSize} = this
    let that = this
    let params4 = {current: pageNum, size: pageSize}
    let requestList = [api.queryEquipmentRunning_Sxt(), api.queryEquipmentRunning_Zj(),api.queryEquipmentRunning_Mwxsq(), api.sbyxjcList(params4)];
    Promise.all(requestList).then(res => {
      //that.modelData = res[0].data || []
      //that.modelData2 = res[1].data || []
      that.modelData3 = res[2].data || []
      this.tableData = res[3].data.records || []
      this.total = res[3].data.total || 0
    })
  },
  watch: {
  },
  methods: {
    dashAccessDataAnalysisStat1(){
      api_l.dashAccessDataAnalysisStat1().then(res =>{
        this.bardata = res.data
      })
    },
    handlePageChange() {
      this.getTableData()
    },
    handlePageChange2() {
      this.getTableData2()
    },
    getTableData() {
      const {pageNum, pageSize} = this
      api.sbyxjcList({current: pageNum, size: pageSize}).then(res => {
        this.tableData = res.data.records || []
        this.total = res.data.total
      })
    },
    getTableData2() {
      const {pageNum2, pageSize2} = this
      api_l.dashBusinessOverviewInfoPage({current: pageNum2, size: pageSize2}).then(res => {
        this.tableData2 = res.data.records || []
        this.total2 = res.data.total
      })
    },
    dashBusinessOverviewStat1(){
      api_l.dashBusinessOverviewStat1().then(res => {
        this.modelData=res.data;
      })
    },
    dashBusinessOverviewStat2(){
      api_l.dashBusinessOverviewStat2().then(res => {
        this.modelData2=res.data;
      })
    },
    dashBusinessOverviewStat3(){
      api_l.dashBusinessOverviewStat3().then(res => {
        this.linedata=res.data;
      })
    },
    dashBusinessOverviewStat4(){
      api_l.dashBusinessOverviewStat4().then(res => {
        this.linedata2=res.data;
      })
    },
    dashBusinessOverviewStat5(){
      api_l.dashBusinessOverviewStat5().then(res => {
        this.linedata3=res.data;
      })
    },
    dashBusinessOverviewStat6(){
      api_l.dashBusinessOverviewStat6().then(res => {
        this.linedata4=res.data;
      })
    },
    dashBusinessOverviewStat7(){
      api_l.dashBusinessOverviewStat7().then(res => {
        this.linedata5=res.data;
      })
    },
    lineTooltipFormat1(params) {
      const data = params[0].data;
      return `<div class="line-tooltip">
        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
        params[0].data.lastAmount || "--"
      }(%)</div>`;
    },
    tooltipFormat(params) {
      const type = params[0].seriesType;
      const data = params[0].data;
      // ${params[0].name || "--"}月：
      return `<div class="line-tooltip">
<div>${params[0].seriesName}: ${
        params[0].data.hs || "--"}个</div>
<div>${params[1].seriesName}: ${
        params[0].data.cs || "--"}个</div>
</div>`;
    },
    xLabelFormat(name) {
      const nameArr = []
      for (let i = 0; i < name.length; i += 7) {
        nameArr.push(name.substring(i, i + 7))
      }
      return nameArr.join('\n');
    },
  }
}
</script>
<style  lang="scss" scoped>
.body-wrapper {
  padding: 20px;
  background: #0c0c0c;
  .button-block{
    text-align: right;
    margin-bottom: 20px;
  }
  .table-pagination{
    text-align: right;
  }
  .search-card{
    font-size: 24px;
    font-weight: bold;
    color: #3498db;
    margin-bottom: 20px;
    .input-wrapper{
      width: 36%;
    }
  }
}
.audit-dialog{
  .mg-bt{
    margin-bottom: 24px;
  }
  .label{
    text-align: right;
  }
}
</style>