details.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <template>
  2. <div class="conViews" v-if="isShallow">
  3. <div class="sm-panel sm-function-module-query" v-drag>
  4. <div class="sm-panel-header">
  5. <span>
  6. {{ type == 0 ? "疑似闲置" : type == 1 ? "闲置未处置" : "闲置已处置" }}
  7. 详情
  8. </span>
  9. <i class="el-icon-close" @click="closeInster"></i>
  10. </div>
  11. <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
  12. <el-tab-pane label="基本信息" name="jbxx">
  13. <Info :data="jbxxData"></Info>
  14. </el-tab-pane>
  15. <el-tab-pane label="认定信息" name="rdxx" v-if="type != 0">
  16. <Info :data="rdData" :fileList="rdfileList"></Info>
  17. </el-tab-pane>
  18. <el-tab-pane label="处置信息" name="czxx" v-if="type == 2">
  19. <Info :data="czData" :fileList="czfileList"></Info>
  20. </el-tab-pane>
  21. </el-tabs>
  22. </div>
  23. </div>
  24. </template>
  25. <script>
  26. import {
  27. GetDetail,
  28. GetConfirmDetail,
  29. GetDisposalDetail,
  30. } from "@/api/Idleland.js";
  31. import Info from "./info.vue";
  32. export default {
  33. props: {
  34. interObj: {
  35. type: Object,
  36. },
  37. },
  38. components: {
  39. Info,
  40. },
  41. data() {
  42. return {
  43. activeTabs: "jbxx",
  44. isShallow: false,
  45. jbxxData: [],
  46. rdData: [],
  47. czData: [],
  48. tempdataLayerId: null,
  49. type: 0,
  50. rdfileList: [],
  51. czfileList: [],
  52. cellstyle: {
  53. background: "rgba(10, 25, 38, 0.6)",
  54. color: "#66b1ff",
  55. fontSize: "14px",
  56. fontFamily: "Microsoft YaHei",
  57. fontWeight: "400",
  58. },
  59. };
  60. },
  61. mounted() {
  62. // this.init();
  63. },
  64. methods: {
  65. //关闭详情
  66. closeInster() {
  67. this.isShallow = false;
  68. viewer.entities.removeAll();
  69. viewer.dataSources.removeAll();
  70. },
  71. handleView(val, type) {
  72. this.isShallow = true;
  73. this.type = type;
  74. GetDetail(val.id).then((res) => {
  75. if (res.statuscode == 200) {
  76. // this.jbxxData = res.data;
  77. Object.keys(res.data).forEach((key) => {
  78. this.jbxxData.push({
  79. name: key,
  80. value: res.data[key],
  81. });
  82. });
  83. } else {
  84. this.$message.error(res.message);
  85. }
  86. });
  87. if (type != 0) {
  88. this.rdfileList = [];
  89. GetConfirmDetail(val.id).then((res) => {
  90. if (res.statuscode == 200) {
  91. this.rdData = [
  92. {
  93. name: "认定结论",
  94. value: `${res.data.isIdle ? "" : "不"}是闲置土地`,
  95. },
  96. { name: "闲置时间", value: res.data.idleTime + "天" },
  97. { name: "闲置原因", value: res.data.idleReason },
  98. { name: "认定时间", value: res.data.confirmTime },
  99. { name: "认定情况", value: res.data.confirmBasis },
  100. ];
  101. this.rdfileList = res.data.files;
  102. } else {
  103. this.$message.error(res.message);
  104. }
  105. });
  106. }
  107. if (type == 2) {
  108. this.czfileList = [];
  109. GetDisposalDetail(val.id).then((res) => {
  110. if (res.statuscode == 200) {
  111. this.czData = [
  112. { name: "处置时间", value: res.data.disposalTime },
  113. { name: "处置方式", value: res.data.disposalMethod },
  114. { name: "处置情况", value: res.data.disposalInfo },
  115. ];
  116. this.czfileList = res.data.files;
  117. } else {
  118. this.$message.error(res.message);
  119. }
  120. });
  121. }
  122. },
  123. },
  124. mounted() {},
  125. watch: {},
  126. };
  127. </script>
  128. <style lang="scss" scoped>
  129. /deep/ .el-icon-close:before {
  130. position: absolute;
  131. top: 10px;
  132. right: 10px;
  133. font-size: larger;
  134. font-weight: bold;
  135. &:hover {
  136. color: aqua;
  137. }
  138. }
  139. .sm-panel {
  140. width: 400px;
  141. max-width: 400px;
  142. }
  143. .sm-function-module-query {
  144. max-height: 800px !important;
  145. top: 28px !important;
  146. }
  147. </style>