berth_recommend.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <template>
  2. <div class="body-wrapper">
  3. <div class="body-wrapper" style="height: 300px;">
  4. <div style="color: #3498db;font-size: 23px;margin-bottom: 20px">各区域停车缺口</div>
  5. <linechart
  6. :autoStop="false"
  7. :top="30"
  8. :bottom="30"
  9. :left="40"
  10. :legendTop="0"
  11. :dataset="linedata"
  12. :tooltipFormat="lineTooltipFormat"
  13. :encode="[
  14. { x: 'month', y: 'lastYearAmount', seriesName: '预警值',col:'red' },
  15. { x: 'month', y: 'thisYearAmount', seriesName: '缺口',bool:'true' },
  16. ]"
  17. id="sxcyfzqk"
  18. />
  19. <div class="body-wrapper" style=" height: 450px">
  20. <div style="color: #3498db;font-size: 23px;margin-bottom: 20px">各区域路内泊位</div>
  21. <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
  22. <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
  23. </el-table-column>
  24. </el-table>
  25. <div class="table-pagination">
  26. <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
  27. :current-page.sync="pageNum" :page-size.sync="pageSize">
  28. </el-pagination>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. </template>
  34. <script>
  35. import linechart from "@/components/lineChart";
  36. // import article_z from "../../../api/article_z";
  37. export default {
  38. components: {
  39. linechart,
  40. // article_z
  41. },
  42. data() {
  43. return {
  44. linedata: [{month: '老街街道',lastYearAmount: 30, thisYearAmount: 20}, {month: '马路街街道', lastYearAmount:30, thisYearAmount:50}
  45. , {month: '顺河街街道', lastYearAmount:30, thisYearAmount:30}, {month: '干河陈街道', lastYearAmount:30, thisYearAmount:30}
  46. , {month: '大刘镇', lastYearAmount:30, thisYearAmount:0}, {month: '阴阳赵镇', lastYearAmount:30, thisYearAmount:0}],
  47. columns: [
  48. {
  49. label: '街道名称',
  50. key: 'jd'
  51. },
  52. {
  53. label: '缺口程度(%)',
  54. key: 'qk'
  55. },
  56. {
  57. label: '推荐策略',
  58. key: 'tj'
  59. }
  60. ],
  61. tableData: [{"jd": '老街街道',"qk": 30,"tj":"建议设置路内泊车"}
  62. ,{"jd":'马路街街道',"qk": 20,"tj":"--"}
  63. ,{"jd":'顺河街街道',"qk": 50,"tj":"建议设置路内泊车"}
  64. ,{"jd":'干河陈街道',"qk": 30,"tj":"--"}
  65. ,{"jd":'大刘镇',"qk": 20,"tj":"建议设置路内泊车"}
  66. ,{"jd":'阴阳赵镇',"qk": 50,"tj":"--"}],
  67. total: 3,
  68. pageSize: 10,
  69. pageNum: 1,
  70. radio: '2',
  71. dialogVisible: false,
  72. selRow: {},
  73. searchWords: undefined,
  74. }
  75. },
  76. mounted() {
  77. this.getTableData()
  78. // this.linedataData()
  79. },
  80. watch: {
  81. },
  82. methods: {
  83. lineTooltipFormat(params) {
  84. const data = params[0].data;
  85. return `<div class="line-tooltip">
  86. <div style="color: ${params[1].color}">${params[1].seriesName}: ${
  87. params[0].data.thisYearAmount || "--"
  88. }(%)</div>
  89. <div style="color: red">${params[0].seriesName}: ${
  90. params[0].data.lastYearAmount || "--"
  91. }(%)</div>
  92. </div>`;
  93. },
  94. handlePageChange() {
  95. this.getTableData()
  96. },
  97. handleCancelApply(row) {
  98. console.log('enter handle cancel apply')
  99. },
  100. handleConfirm() {
  101. const {id} = this.selRow
  102. console.log('radio', this.radio)
  103. api.applyResource({id, applyType: this.radio}).then(res => {
  104. if(res.success) {
  105. this.dialogVisible = false
  106. this.$message({
  107. message: '审核成功!',
  108. type: 'success'
  109. })
  110. this.getTableData()
  111. }
  112. })
  113. },
  114. getTableData() {
  115. const {pageNum, pageSize, searchWords} = this
  116. api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
  117. this.tableData = []
  118. res.data.records.map((item, index) => {
  119. const newItem = {...item}
  120. newItem.applyTypeText = this.getApplyTypeText(item.applyType)
  121. this.tableData.push(newItem)
  122. })
  123. this.total = res.data.total
  124. })
  125. },
  126. //初始化
  127. // linedataData(){
  128. // article_z.queryBerthContext().then(res=>{
  129. // const lastA=res.data;
  130. // this.linedata=res.data.map(item=>({...item,thisAmount: 30}));
  131. // console.log(res.data)
  132. // })
  133. // },
  134. }
  135. }
  136. </script>
  137. <style lang="scss" scoped>
  138. .body-wrapper {
  139. width: 100%;
  140. height: 100%;
  141. box-sizing: border-box;
  142. background: #0c0c0c;
  143. .table-pagination{
  144. text-align: right;
  145. }
  146. }
  147. </style>