list.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. <template>
  2. <div class="xzlist">
  3. <div v-if="type == 1" class="xztype">
  4. <span :class="{ usable: pageObj.isConfirm }" @click="changerdxz">
  5. 认定为闲置未处置情况
  6. </span>
  7. <span :class="{ usable: !pageObj.isConfirm }" @click="changerdxz">
  8. 认定为未非闲置情况
  9. </span>
  10. </div>
  11. <custom-form ref="formRef" :model="pageObj" :config="formConfig">
  12. <template #region>
  13. <!-- clearable -->
  14. <el-cascader
  15. v-model="pageObj.xzqh"
  16. :show-all-levels="false"
  17. :options="store.state.region_tree"
  18. placeholder="行政区"
  19. :props="{
  20. checkStrictly: true,
  21. expandTrigger: 'hover',
  22. emitPath: false,
  23. }"
  24. ></el-cascader>
  25. </template>
  26. <template #type>
  27. <el-select v-model="pageObj.idleReason" placeholder="闲置原因">
  28. <el-option
  29. v-for="item in reasonList"
  30. :key="item.code"
  31. :label="item.name"
  32. :value="item.name"
  33. >
  34. </el-option>
  35. </el-select>
  36. </template>
  37. <template #action>
  38. <el-button
  39. size="mini"
  40. type="primary"
  41. icon="el-icon-search"
  42. @click="searchFun"
  43. >
  44. </el-button>
  45. </template>
  46. </custom-form>
  47. <div class="content">
  48. <div class="item">
  49. <p>项目数(个)</p>
  50. <span>{{ table.total || 0 }} </span>
  51. </div>
  52. <div class="item">
  53. <p>土地面积(亩)</p>
  54. <span>{{ table.area || 0 }} </span>
  55. </div>
  56. </div>
  57. <tablePage
  58. :class="'tablePage' + type"
  59. :cloumn="cloumn"
  60. :table="table"
  61. :indexed="false"
  62. :showTotal="false"
  63. layout="prev, pager,next"
  64. ref="tableDialogRef"
  65. @currentChange="searchFun"
  66. >
  67. <template #action="{ row }">
  68. <span class="usable" @click="detail(row)">详情</span>
  69. <span class="usable" v-if="type == 0" @click="judge(row)"> 判定 </span>
  70. <span class="usable" v-if="type == 1" @click="handle(row)"> 处置 </span>
  71. </template>
  72. </tablePage>
  73. <div class="tip" v-if="type == 0">
  74. 说明:系统判断疑似闲置的条件(合同约定开工之日起仍未开工的项目)
  75. </div>
  76. <handleModal ref="handleRef" @close="searchFun()"></handleModal>
  77. </div>
  78. </template>
  79. <script>
  80. import tablePage from "@/components/mapView/tablePage.vue";
  81. import customForm from "@/components/mapView/custom-form.vue";
  82. import handleModal from "./handleModal.vue";
  83. import { GetList, idleLandList } from "@/api/Idleland.js";
  84. import {
  85. ysForm,
  86. xzForm,
  87. TableHeader,
  88. TableHeader2,
  89. reasonList,
  90. } from "./config";
  91. import { loadGeoJSON } from "@/utils/MapHelper/help.js";
  92. let geoSources = {};
  93. export default {
  94. components: {
  95. tablePage,
  96. customForm,
  97. handleModal,
  98. },
  99. props: {
  100. type: {
  101. type: String,
  102. },
  103. recordBsm: {
  104. type: String,
  105. },
  106. },
  107. data() {
  108. return {
  109. pageObj: {
  110. key: "",
  111. xzqh: "",
  112. idleReason: "",
  113. isConfirm: true,
  114. pageNum: 1,
  115. pageSize: 10,
  116. isDisposal: false,
  117. },
  118. datalist: [{}],
  119. formConfig: ysForm,
  120. cloumn: TableHeader,
  121. reasonList: reasonList,
  122. table: {
  123. data: [],
  124. total: 20,
  125. },
  126. now: "",
  127. };
  128. },
  129. mounted() {
  130. this.formConfig = this.$props.type == 0 ? ysForm : xzForm;
  131. this.cloumn = this.$props.type == 0 ? TableHeader : TableHeader2;
  132. this.pageObj.isConfirm = this.$props.type == 2;
  133. this.pageObj.isDisposal = this.$props.type == 2;
  134. },
  135. methods: {
  136. searchFun(page = {}) {
  137. this.getTableData({
  138. ...this.pageObj,
  139. pageNum: page.pageIndex || 1,
  140. pageSize: page.size || 10,
  141. });
  142. },
  143. getTableData() {
  144. this.$emit("updateParent", "loading", true);
  145. this.removeGeoJSON();
  146. if (this.$props.type == 0) {
  147. GetList(this.pageObj).then((res) => {
  148. this.$emit("updateParent", "loading", false);
  149. this.table = {
  150. ...res.data,
  151. total: res.data.count,
  152. data: res.data.list,
  153. };
  154. this.active_tableData(res.data.list);
  155. });
  156. } else {
  157. idleLandList(this.pageObj).then((res) => {
  158. this.$emit("updateParent", "loading", false);
  159. this.table = {
  160. ...res.data,
  161. total: res.data.count,
  162. data: res.data.list,
  163. };
  164. this.active_tableData(res.data.list);
  165. });
  166. }
  167. },
  168. active_tableData(newVal) {
  169. newVal.forEach((res, index) => {
  170. res.type = "图斑上图";
  171. if (res.geom || res.st_asewkt)
  172. loadGeoJSON(
  173. res.geom || res.st_asewkt,
  174. "#55A1E3",
  175. { isfly: false },
  176. (data) => {
  177. geoSources[res.id] = data;
  178. data.name = "Idleland";
  179. data.entities.values.forEach((entity) => {
  180. entity.properties = res;
  181. });
  182. }
  183. );
  184. });
  185. },
  186. flyTo(item) {
  187. let id = "h_" + item.id;
  188. this.tempdataLayerId = id;
  189. if (geoSources[id]) return;
  190. loadGeoJSON(
  191. item.geom || item.st_asewkt,
  192. "#ff0000",
  193. { isfly: true },
  194. (data) => {
  195. data.name = "Idleland";
  196. geoSources[id] = data;
  197. }
  198. );
  199. },
  200. removeGeoJSON() {
  201. if (!viewer) return;
  202. viewer.entities.removeAll();
  203. viewer.dataSources.removeAll();
  204. // viewer.dataSources._dataSources.forEach((das) => {
  205. // if (das.name == "Idleland") {viewer.dataSources.remove(das);}
  206. // });
  207. },
  208. reset() {},
  209. detail(row) {
  210. this.flyTo(row);
  211. this.bus.$emit("handleView", row, this.$props.type);
  212. },
  213. judge(row) {
  214. this.$refs.handleRef.Init(row, "judge");
  215. },
  216. handle(row) {
  217. this.$refs.handleRef.Init(row, "deal");
  218. },
  219. changerdxz() {
  220. this.pageObj.isConfirm = !this.pageObj.isConfirm;
  221. this.searchFun();
  222. },
  223. },
  224. watch: {
  225. tempdataLayerId(newVal, oldVal) {
  226. if (oldVal && geoSources[oldVal]) {
  227. viewer.dataSources.remove(geoSources[oldVal]);
  228. geoSources[oldVal] = null;
  229. }
  230. },
  231. },
  232. beforeDestroy() {
  233. this.pageObj = {
  234. kssj: "",
  235. sj: [],
  236. jssj: "",
  237. xmmc: "",
  238. page: 1,
  239. };
  240. },
  241. };
  242. </script>
  243. <style lang="scss" scoped>
  244. .xzlist {
  245. width: 100%;
  246. height: 100%;
  247. .content {
  248. width: 100%;
  249. height: 50px;
  250. margin: 10px 0;
  251. background: #2e5a70;
  252. border-radius: 5px;
  253. padding-top: 5px;
  254. .item {
  255. width: 48%;
  256. height: 100%;
  257. display: inline-block;
  258. position: relative;
  259. text-align: center;
  260. span {
  261. font-family: "Arial Negreta", "Arial Normal", "Arial";
  262. font-weight: 700;
  263. font-style: normal;
  264. color: #68f4fb;
  265. }
  266. }
  267. }
  268. .tablePage0,
  269. .tablePage1 {
  270. height: calc(100% - 160px);
  271. }
  272. .tablePage2 {
  273. height: calc(100% - 120px);
  274. }
  275. .tip {
  276. color: #f56c6c;
  277. }
  278. .xztype {
  279. display: flex;
  280. margin: 5px 0;
  281. align-items: center;
  282. justify-content: space-between;
  283. span {
  284. display: inline-block;
  285. border: 1px solid #3f93f5;
  286. border-radius: 5px;
  287. padding: 0 10px;
  288. line-height: 30px;
  289. }
  290. }
  291. }
  292. </style>
  293. <style lang="scss">
  294. .xzlist {
  295. .el-col {
  296. padding-right: 0 !important;
  297. }
  298. }
  299. </style>