HD.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <template>
  2. <div class="map-ditu">
  3. <Tmap ref="map" :maplist="maplist" @feature-click="featureClick"></Tmap>
  4. <bottom-data :maplistArr="maplistArr" :defaultdata="defaultdata" />
  5. <div class="zuobian">
  6. <selecttree
  7. placeholder="请选择所属公司"
  8. :list="parentOpt"
  9. type="1"
  10. v-model="companyCode"
  11. @change="parentChange"
  12. :defaultParentProps="{
  13. children: 'children',
  14. label: 'companyName',
  15. value: 'codeNumber',
  16. }"
  17. >
  18. </selecttree>
  19. </div>
  20. <router-view></router-view>
  21. </div>
  22. </template>
  23. <script>
  24. import selecttree from "../../../components/selecttree.vue";
  25. import {
  26. getCompanyFieldNumberVo,
  27. getSysOrganizationAuthTreeByRoleId,
  28. } from "@/api/ledger.js";
  29. import Tmap from "@/components/map";
  30. import BottomData from "./component/bottomData.vue";
  31. export default {
  32. name: "Index",
  33. components: {
  34. Tmap,
  35. BottomData,
  36. selecttree,
  37. },
  38. props: {
  39. fieldCode: "",
  40. batchCode: "",
  41. },
  42. data() {
  43. return {
  44. ShowRi: true,
  45. treeval: "",
  46. value1: true,
  47. treeval: "", // 绑定的输入框值
  48. showTree: false, // 控制树列表显示
  49. treeData: [],
  50. maplist: [],
  51. maplistArr: {},
  52. totalList: [],
  53. parentOpt: [],
  54. companyCode: "",
  55. defaultdata: {},
  56. };
  57. },
  58. created() {
  59. this.GETtree();
  60. this.GETtotal();
  61. },
  62. mounted() {
  63. //模拟地图上的点位
  64. const data = this.maplist;
  65. // data.forEach((element) => {
  66. // console.log(element);
  67. // // this.$refs.map.addMarker({ point: [116.40740,39.90420], val: "1" });
  68. // });
  69. },
  70. methods: {
  71. // 获取总数
  72. GETtotal() {
  73. getCompanyFieldNumberVo().then((res) => {
  74. this.totalList = res.data;
  75. });
  76. },
  77. // 获取企业数
  78. async GETtree() {
  79. const res = await getSysOrganizationAuthTreeByRoleId();
  80. const treedata = res.data;
  81. const processedData = this.processTreeData(treedata);
  82. this.parentOpt = processedData;
  83. this.defaultdata = res.data[0];
  84. this.parentChange(this.defaultdata);
  85. // const firstLayer = this.findFirstFieldLayer(processedData);
  86. // if (firstLayer) {
  87. // this.parentChange( this.defaultdata);
  88. // }
  89. },
  90. //过滤数据
  91. processTreeData(treeData) {
  92. const processedData = [];
  93. function processNode(node) {
  94. if (node.codeType === "field") {
  95. node.companyName = node.fieldName;
  96. }
  97. if (node.children && node.children.length > 0) {
  98. node.children.forEach((child) => {
  99. processNode(child);
  100. });
  101. }
  102. }
  103. treeData.forEach((root) => {
  104. processNode(root);
  105. processedData.push(root);
  106. });
  107. return processedData;
  108. },
  109. handleTreeData() {
  110. this.treeData = this.processTreeData(this.treeData);
  111. },
  112. parseCoordinates(input) {
  113. if (input && typeof input === "string") {
  114. return input.split(",").map(Number);
  115. }
  116. // debugger;
  117. return [];
  118. },
  119. parentChange(data) {
  120. //data为当前选中对象
  121. this.$refs.map.clearMarkers();
  122. this.maplist = data;
  123. this.maplistArr = data;
  124. if (data.codeType === "field") {
  125. if (this.parseCoordinates(data.longitudeAndLatitudeString).length > 0) {
  126. this.$refs.map.addMarker({
  127. point: this.parseCoordinates(data.longitudeAndLatitudeString),
  128. val: data.analysisState,
  129. ...data,
  130. });
  131. return;
  132. }
  133. this.$refs.map.clearMarkers();
  134. } else {
  135. const dataMapList = data.children;
  136. dataMapList.forEach((element) => {
  137. if (
  138. this.parseCoordinates(element.longitudeAndLatitudeString).length >
  139. 0 &&
  140. element.codeType === "field"
  141. ) {
  142. this.$refs.map.addMarker({
  143. point: this.parseCoordinates(element.longitudeAndLatitudeString),
  144. val: element.analysisState,
  145. ...element,
  146. });
  147. return;
  148. }
  149. this.$refs.map.clearMarkers();
  150. });
  151. }
  152. },
  153. findFirstFieldLayer(data) {
  154. for (const item of data) {
  155. if (item.codeType === "field") {
  156. return item;
  157. }
  158. if (item.children && item.children.length > 0) {
  159. const childResult = this.findFirstFieldLayer(item.children);
  160. if (childResult) {
  161. return childResult;
  162. }
  163. }
  164. }
  165. return null;
  166. },
  167. featureClick(data) {
  168. const val = data.val;
  169. if (val === "-1" || val === -1 || val === 10) {
  170. this.$message.error("当前风场未完成分析");
  171. } else if (val === "0" || val === 0) {
  172. this.$message({
  173. message: "当前风场正在分析中",
  174. type: "warning",
  175. });
  176. } else if (val === "1" || val === 1 || val === "30" || val === 30) {
  177. console.log("打包成功");
  178. this.$router.push({
  179. path: "cockpitManage/electronic-map",
  180. query: {
  181. fieldCode: data.codeNumber,
  182. batchCode: data.batchCode,
  183. },
  184. });
  185. }
  186. },
  187. handleSwitchChange() {
  188. this.ShowRi = !this.ShowRi;
  189. },
  190. },
  191. };
  192. </script>
  193. <style lang="scss" scoped>
  194. .map-ditu {
  195. height: 93.3vh;
  196. display: flex;
  197. flex-direction: column;
  198. }
  199. // 动态计算 Tmap 组件高度
  200. Tmap {
  201. height: calc(93.3vh - 230px);
  202. min-height: 0; // 防止 flex 项溢出
  203. }
  204. // 设置 bottom-data 组件高度为 230px
  205. bottom-data {
  206. height: 230px;
  207. flex-shrink: 0; // 防止组件缩小
  208. }
  209. .zuobian{
  210. width: 180px;
  211. position: absolute;
  212. top: 10px;
  213. left: 10px;
  214. }
  215. </style>