manual.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <template>
  2. <el-dialog title="手动加测" width="80%" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
  3. <el-radio-group v-model="plain.type" @change="typeHandler">
  4. <el-radio :label="1">根据设置垂线测流</el-radio>
  5. <el-radio :label="2">指定临时垂线测流</el-radio>
  6. </el-radio-group>
  7. <div style="margin-top: 10px">
  8. <ChartList v-if="plain.type===1" :plain="plain" />
  9. <Chart v-if="plain.type===2" :plain="plain" @addPoint="addPoint" />
  10. </div>
  11. <div slot="footer" class="dialog-footer">
  12. <el-button @click="dialogFormVisible = false">取 消</el-button>
  13. <el-button type="primary" @click="submit">确 定</el-button>
  14. </div>
  15. </el-dialog>
  16. </template>
  17. <script>
  18. import {getSiteSection, listPlainPoint} from "@/api/site/berthing";
  19. import {getConfig} from "@/api/site/site";
  20. import {getWaterLevel, manualMeasure} from "@/api/analysis/achievement";
  21. import ChartList from '@/views/site/plain-point/chart-list';
  22. import Chart from '@/views/site/plain-point/chart';
  23. export default {
  24. components: {
  25. ChartList,
  26. Chart,
  27. },
  28. data() {
  29. return {
  30. loading: true,
  31. dialogFormVisible: false,
  32. plain: {
  33. type: 1,
  34. wlevelmax: 0,
  35. wlevelmin: 0,
  36. waterlevel: 0,
  37. wlevel: 0,
  38. sections: [],
  39. list: [],
  40. positions: [],
  41. },
  42. site: {},
  43. }
  44. },
  45. methods: {
  46. open(site) {
  47. this.site = site;
  48. this.dialogFormVisible = true;
  49. this.getList();
  50. this.loadConfig();
  51. this.loadSection();
  52. this.loadWaterLevel();
  53. },
  54. getList() {
  55. this.loading = true;
  56. listPlainPoint({ siteId: this.site.siteId, page: 1, size: 10000 }).then(response => {
  57. this.plain.list = response.data.records;
  58. this.loading = false;
  59. }
  60. );
  61. },
  62. loadConfig() {
  63. getConfig(this.site.siteId).then((res) => {
  64. const { wlevelmax, wlevelmin } = res.data || {};
  65. this.plain.wlevelmax = wlevelmax;
  66. this.plain.wlevelmin = wlevelmin;
  67. })
  68. },
  69. loadSection() {
  70. getSiteSection(this.site.siteId).then((res) => {
  71. const { positions } = res.data || {};
  72. this.plain.sections = JSON.parse(positions) || [];
  73. })
  74. },
  75. loadWaterLevel() {
  76. getWaterLevel(this.site.siteId).then((res) => {
  77. const { waterlevel } = res.data || {};
  78. this.plain.waterlevel = waterlevel;
  79. })
  80. },
  81. typeHandler() {
  82. if (this.plain.type === 1) {
  83. this.plain.wlevel = 0;
  84. } else {
  85. this.plain.wlevel = this.plain.waterlevel || (this.plain.wlevelmin + this.plain.wlevelmax) / 2;
  86. this.plain.positions = [];
  87. }
  88. },
  89. addPoint(point) {
  90. if (this.plain.positions.includes(point)) {
  91. const positions = [...this.plain.positions];
  92. const index = positions.indexOf(point);
  93. positions.splice(index, 1);
  94. this.plain.positions = positions;
  95. return;
  96. }
  97. const positions = [...this.plain.positions, point];
  98. positions.sort((a, b) => a - b);
  99. this.plain.positions = positions;
  100. },
  101. submit() {
  102. const data = {
  103. type: this.plain.type,
  104. siteId: this.site.siteId,
  105. }
  106. if (this.plain.type === 1) {
  107. if (this.plain.list.length === 0) {
  108. return this.$message.error("请先设置停泊点");
  109. }
  110. }
  111. if (this.plain.type === 2) {
  112. if (this.plain.positions.length === 0) {
  113. return this.$message.error("请添加停泊点");
  114. }
  115. data.positions = this.plain.sections.filter((s) => this.plain.positions.includes(s.x));
  116. }
  117. manualMeasure(data).then(() => {
  118. this.$message.success("加测指令下发成功");
  119. this.dialogFormVisible = false;
  120. });
  121. }
  122. }
  123. }
  124. </script>
  125. <style scoped>
  126. </style>