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

<template>
  <div class="body-wrapper">
    <el-form class="form-wrapper" :inline="true" :model="formInline">
      <el-form-item label="行政区">
        <el-select v-model="formInline.region" placeholder="行政区" class="cur-select">
          <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="重点区域" 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="道路" class="cur-select">
          <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>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <br>
    <br>
    <br>
    <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.list"
          :encode="{ itemName: 'name', value: 'value' }"
        />
      </div>
      <div style="width: 33%;height: 400px;">
        <h4 style="color: white">充电桩</h4>
        <piechart
          class="model-pie-body"
          id="chart2"
          :radiusArr="['30%', '70%']"
          :roseType = "false"
          :colorArr="modelPieColor2"
          :labelFormat="['{name|{b}}', '{sub|{@value} {d}%}', '{hr|}']"
          :dataset="modelData2.list"
          :encode="{ itemName: 'name', value: 'value' }"
        />
      </div>

      <div style="width: 33%;height: 400px;">
        <h4 style="color: white">残疾车位</h4>
        <piechart
          class="model-pie-body"
          id="chart3"
          :radiusArr="['30%', '70%']"
          :roseType = "false"
          :colorArr="modelPieColor3"
          :labelFormat="['{name|{b}}', '{sub|{@value} {d}%}', '{hr|}']"
          :dataset="modelData3.list"
          :encode="{ itemName: 'name', value: 'value' }"
        />
      </div>
      <br>
    </div>

  </div>
</template>
<script>
import api from "@/api/audit.js";
import piechart from "@/components/pieChart";

export default {
  components: {
    piechart
  },
  data() {
    return {
<<<<<<< Updated upstream
      options: [{
        value: '源汇区',
        label: '源汇区'
      }, {
        value: '召陵区',
        label: '召陵区'
      }],
      options2: [{
        value: '违规停车高发区',
        label: '违规停车高发区'
      }, {
        value: '事故高发区',
        label: '事故高发区'
      }],
      options3: [{
        value: '团结路',
        label: '团结路'
      }, {
        value: '人民东路',
        label: '人民东路'
      }],
      value: '',
      modelPieColor: ["#4382f6","#9078f8"],
=======
      columns: [
        {
          label: '日期',
          key: 'resourceName'
        },
        {
          label: '操作',
          key: 'resourceType'
        },
        {
          label: '用户',
          key: 'userName'
        },
        {
          label: '详情',
          key: 'applyTypeText'
        },
        {
          label: 'IP地址',
          key: 'applyTypeText'
        }
      ],
      modelPieColor: ["#2E8B57","#9078f8"],
>>>>>>> Stashed changes
      modelData: {
        list: [{name: '空闲中', value: 600}, {name: '占用中', value: 800}]
      },
      modelPieColor2: ["#2E8B57","#9078f8"],
      modelData2: {
        list: [{name: '空闲中', value: 600}, {name: '占用中', value: 800}]
      },
      modelPieColor3: ["#2E8B57","#9078f8"],
      modelData3: {
        list: [{name: '空闲中', value: 600}, {name: '占用中', value: 800}]
      },
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      radio: '2',
      dialogVisible: false,
      selRow: {},
      formInline: {
        interfaceName: '',
        region: '',
        region2: '',
        region3: ''
      }
    }
  },
  mounted() {
    this.getTableData()
  },
  watch: {
  },
  methods: {
    handlePageChange() {
      this.getTableData()
    },
    handleDetail(row) {
      this.selRow = row
      this.dialogVisible = true
    },
    getTableData() {
      const {pageNum, pageSize, searchWords} = this
      api.applyList({pageNum, pageSize, interfaceName: this.formInline.interfaceName}).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    onSubmit() {
      console.log('submit!');
    }
  }
}
</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;
  }
}
/deep/ .form-wrapper .el-button {
  background: linear-gradient(90deg,#0158d9,#3c97e4);
  width: 100px;
  height: 40px;
}
.body-wrapper {
  padding: 20px;
  background: #0c0c0c;
  .button-block{
    text-align: right;
    margin-bottom: 20px;
  }
  .table-pagination{
    text-align: right;
  }
}
.audit-dialog{
  .mg-bt{
    margin-bottom: 24px;
  }
  .label{
    text-align: right;
  }
}
/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background: #2a2a2a;
  color: #fff;
}
</style>