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

<template>
  <div class="body-wrapper">
    <div style="color: white;font-size: 23px;margin-bottom: 20px">全市停车饱和度</div>
    <el-form class="form-wrapper" :inline="true" :model="formInline">
      <el-form-item label="区县:">
        <el-select v-model="formInline.region0" placeholder="区县" popper-class="cur-select">
          <el-option label="源汇区" value="源汇区"></el-option>
          <el-option label="郾城区" value="郾城区"></el-option>
          <el-option label="召陵区" value="召陵区"></el-option>
          <el-option label="舞阳县" value="舞阳县"></el-option>
          <el-option label="临颍县" value="临颍县"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="街道:">
        <el-select v-model="formInline.region1" placeholder="街道" popper-class="cur-select">
          <el-option label="老街街道" value="老街街道"></el-option>
          <el-option label="马路街街道" value="马路街街道"></el-option>
          <el-option label="顺河街街道" value="顺河街街道"></el-option>
          <el-option label="干河陈街道" value="干河陈街道"></el-option>
          <el-option label="大刘镇" value="大刘镇"></el-option>
          <el-option label="阴阳赵镇" value="阴阳赵镇"></el-option>
          <el-option label="空冢郭镇" value="空冢郭镇"></el-option>
          <el-option label="问十乡" value="问十乡"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="路内停车场:">
        <el-select v-model="formInline.region2" placeholder="路内停车场" popper-class="cur-select">
          <el-option label="南街村景区-停车场" value="南街村景区-停车场"></el-option>
          <el-option label="漯河市中医院-地上停车场" value="漯河市中医院-地上停车场"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="路外停车场:">
        <el-select v-model="formInline.region3" placeholder="路外停车场" popper-class="cur-select">
          <el-option label="市图书馆停车场" value="市图书馆停车场"></el-option>
          <el-option label="中山公园停车场" value="中山公园停车场"></el-option>
          <el-option label="市中心医院停车场" value="市中心医院停车场"></el-option>
          <el-option label="妇幼保健院停车场" value="妇幼保健院停车场"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="body-wrapper" style="height: 300px;">
      <linechart
        :autoStop="false"
        :top="30"
        :bottom="30"
        :left="40"
        :legendTop="0"
        yAxisName="(%)"
        :dataset="linedata"
        :tooltipFormat="lineTooltipFormat"
        :encode="[
              { x: 'month', y: 'thisAmount', seriesName: '预警值',col:'red' },
              { x: 'month', y: 'lastAmount', seriesName: '饱和度',bool:'true' },
            ]"
        id="sxcyfzqk"
      />
      <div class="body-wrapper" style=" height: 450px">
        <div style="color: white;font-size: 23px;margin-bottom: 20px">网格化停车饱和预警</div>
        <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>
    </div>
  </div>
</template>
<script>
import linechart from "@/components/lineChart";
import vtable from "@/components/vtableNew";
import api from '@/api/audit'

export default {
  components: {
    linechart,
    vtable,
  },
  data() {
    return {
      formInline: {
        region0: '',
        region1: '',
        region2: '',
        region3: '',
      },
      linedata: [],
      columns: [
        {
          label: '街道名称',
          key: 'jd'
        },
        {
          label: '剩余停车位',
          key: 'sy'
        }
      ],
      tableData: [{"jd": '老街街道',"sy": 30}
        ,{"jd":'马路街街道',"sy": 70}
        ,{"jd":'顺河街街道',"sy": 80}
        ,{"jd":'干河陈街道',"sy": 30}
        ,{"jd":'大刘镇',"sy": 62}
        ,{"jd":'阴阳赵镇',"sy": 44}
        ,{"jd":'空冢郭镇',"sy": 30}
        ,{"jd":'问十乡',"sy": 97}],
      total: 3,
      pageSize: 10,
      pageNum: 1,
      radio: '2',
      dialogVisible: false,
      selRow: {}
    }
  },
  mounted() {
    this.getTcbhyj()
    this.getTableData()
  },
  watch: {
  },
  methods: {
    getTcbhyj() {
      api.tcbhyj().then(res => {
        this.linedata = res.data.map(item => ({...item, thisAmount: 30})) || []
      })
    },
    handlePageChange() {
      this.getTableData()
    },
    getTableData() {
      const {pageNum, pageSize} = this
      // api.applyList({pageNum, pageSize}).then(res => {
      //   this.tableData = []
      //   res.data.records.map((item, index) => {
      //     const newItem = {...item}
      //     newItem.applyTypeText = this.getApplyTypeText(item.applyType)
      //     this.tableData.push(newItem)
      //   })
      //   this.total = res.data.total
      // })
    },
    lineTooltipFormat(params) {
      const data = params[0].data;
      return `<div class="line-tooltip">
        <div style="color: ${params[1].color}">${params[1].seriesName}: ${
        params[0].data.lastAmount || "--"
      }(%)</div>
        <div style="color: red">${params[0].seriesName}: ${
        params[0].data.thisAmount || "--"
      }(%)</div>
      </div>`;
    },
  }
}
</script>
<style  lang="scss" scoped>
.form-wrapper {
  margin-bottom: 20px;
}
/deep/ .el-input__inner {
  background: #2d3744;
  border: none;
  border-radius: 0;
}
/deep/ .el-select {
  height: 40px;
  .el-input__inner {
    height: 40px;
  }
  .el-input__prefix, .el-input__suffix {
    height: 40px;
  }

  /* 下面设置右侧按钮居中 */
  .el-input__suffix {
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }
  /* 输入框加上上下边是 32px + 2px =34px */
  .el-input__icon {
    line-height: 0px;
  }
}
.body-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #0c0c0c;
  .table-pagination{
    text-align: right;
  }
}
</style>