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

<template>
  <div class="body-wrapper">
    <div class="body-wrapper" style="height: 300px;">
      <div style="color: #3498db;font-size: 23px;margin-bottom: 20px">各区域停车缺口</div>
      <linechart
        :autoStop="false"
        :top="30"
        :bottom="30"
        :left="40"
        :legendTop="0"
        :dataset="linedata"
        :tooltipFormat="lineTooltipFormat"
        :encode="[
              { x: 'month', y: 'lastYearAmount', seriesName: '预警值',col:'red' },
              { x: 'month', y: 'thisYearAmount', seriesName: '缺口',bool:'true' },
            ]"
        id="sxcyfzqk"
      />
      <div class="body-wrapper" style=" height: 450px">
        <div style="color: #3498db;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 article_z from "../../../api/article_z";

export default {
  components: {
    linechart,
    // article_z
  },
  data() {
    return {
      linedata: [{month: '老街街道',lastYearAmount: 30, thisYearAmount: 20}, {month: '马路街街道', lastYearAmount:30, thisYearAmount:50}
        , {month: '顺河街街道', lastYearAmount:30, thisYearAmount:30}, {month: '干河陈街道', lastYearAmount:30, thisYearAmount:30}
        , {month: '大刘镇', lastYearAmount:30, thisYearAmount:0}, {month: '阴阳赵镇', lastYearAmount:30, thisYearAmount:0}],
      columns: [
        {
          label: '街道名称',
          key: 'jd'
        },
        {
          label: '缺口程度（%）',
          key: 'qk'
        },
        {
          label: '推荐策略',
          key: 'tj'
        }
      ],
      tableData: [{"jd": '老街街道',"qk": 30,"tj":"建议设置路内泊车"}
        ,{"jd":'马路街街道',"qk": 20,"tj":"--"}
        ,{"jd":'顺河街街道',"qk": 50,"tj":"建议设置路内泊车"}
        ,{"jd":'干河陈街道',"qk": 30,"tj":"--"}
        ,{"jd":'大刘镇',"qk": 20,"tj":"建议设置路内泊车"}
        ,{"jd":'阴阳赵镇',"qk": 50,"tj":"--"}],
      total: 3,
      pageSize: 10,
      pageNum: 1,
      radio: '2',
      dialogVisible: false,
      selRow: {},
      searchWords: undefined,
    }
  },
  mounted() {
    this.getTableData()
    // this.linedataData()
  },
  watch: {
  },
  methods: {
    lineTooltipFormat(params) {
      const data = params[0].data;
      return `<div class="line-tooltip">
        <div style="color: ${params[1].color}">${params[1].seriesName}: ${
        params[0].data.thisYearAmount || "--"
      }(%)</div>
        <div style="color: red">${params[0].seriesName}: ${
        params[0].data.lastYearAmount || "--"
      }(%)</div>
      </div>`;
    },
    handlePageChange() {
      this.getTableData()
    },
    handleCancelApply(row) {
      console.log('enter handle cancel apply')
    },
    handleConfirm() {
      const {id} = this.selRow
      console.log('radio', this.radio)
      api.applyResource({id, applyType: this.radio}).then(res => {
        if(res.success) {
          this.dialogVisible = false
          this.$message({
            message: '审核成功!',
            type: 'success'
          })
          this.getTableData()
        }
      })
    },
    getTableData() {
      const {pageNum, pageSize, searchWords} = this
      api.applyList({pageNum, pageSize, resourceName: searchWords}).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
      })
    },
    //初始化
    // linedataData(){
    //   article_z.queryBerthContext().then(res=>{
    //     const lastA=res.data;
    //     this.linedata=res.data.map(item=>({...item,thisAmount: 30}));
    //     console.log(res.data)
    //   })
    // },
  }
}
</script>
<style  lang="scss" scoped>

.body-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #0c0c0c;
  .table-pagination{
    text-align: right;
  }
}
</style>