IndexBeiF.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. <template>
  2. <div class="map-ditu">
  3. <Tmap ref="map" :maplist="maplist" @feature-click="featureClick"></Tmap>
  4. <div class="ledata">
  5. <selecttree
  6. placeholder="请选择所属公司"
  7. :list="parentOpt"
  8. type="1"
  9. v-model="companyCode"
  10. @change="parentChange"
  11. :defaultParentProps="{
  12. children: 'children',
  13. label: 'companyName',
  14. value: 'codeNumber',
  15. }"
  16. >
  17. </selecttree>
  18. <p>
  19. <span class="SpText">登录人风场总数:</span>
  20. {{ totalList?.fieldSumNumber ? totalList.fieldSumNumber : 0 }}
  21. </p>
  22. <p>
  23. <span class="SpText">已完成分析风场:</span>
  24. {{
  25. totalList?.analysisFinishNumber ? totalList.analysisFinishNumber : 0
  26. }}
  27. </p>
  28. <p>
  29. <span class="SpText">未完成分析风场:</span>
  30. {{
  31. totalList?.analysisUnFinishedNumber
  32. ? totalList.analysisUnFinishedNumber
  33. : 0
  34. }}
  35. </p>
  36. <p>
  37. <span class="SpText">风机数量:</span>
  38. {{ totalList?.engineGroupNumber ? totalList.engineGroupNumber : 0 }}
  39. </p>
  40. <p>
  41. <span class="SpText">风场状态:</span>
  42. <span class="red"></span>
  43. <span class="yellow"></span>
  44. <span class="green"></span>
  45. </p>
  46. <el-switch
  47. v-model="value1"
  48. active-text="显示"
  49. inactive-text="隐藏"
  50. @change="handleSwitchChange"
  51. >
  52. </el-switch>
  53. </div>
  54. <Rightdata
  55. v-show="ShowRi"
  56. ref="childRef"
  57. :maplistArr="maplistArr"
  58. :defaultdata="defaultdata"
  59. class="ridata"
  60. ></Rightdata>
  61. <router-view></router-view>
  62. </div>
  63. </template>
  64. <script>
  65. import selecttree from "../../../components/selecttree.vue";
  66. import {
  67. getCompanyFieldNumberVo,
  68. getSysOrganizationAuthTreeByRoleId,
  69. } from "@/api/ledger.js";
  70. import Tmap from "@/components/map";
  71. import Rightdata from "./component/rightdata.vue";
  72. export default {
  73. name: "Index",
  74. components: {
  75. Tmap,
  76. Rightdata,
  77. selecttree,
  78. },
  79. data() {
  80. return {
  81. ShowRi: true,
  82. treeval: "",
  83. value1: true,
  84. treeval: "", // 绑定的输入框值
  85. showTree: false, // 控制树列表显示
  86. treeData: [
  87. ],
  88. maplist: [],
  89. maplistArr: {},
  90. totalList: [],
  91. parentOpt: [],
  92. companyCode: "",
  93. defaultdata: {},
  94. };
  95. },
  96. created() {
  97. this.GETtree();
  98. this.GETtotal();
  99. // 页面初始化时手动触发一次赋值操作
  100. this.$watch("defaultdata", (newValue) => {
  101. this.maplistArr = newValue; // 将defaultdata的值赋给maplistArr
  102. });
  103. this.maplistArr = this.defaultdata;
  104. },
  105. mounted() {
  106. //模拟地图上的点位
  107. const data = this.maplist;
  108. // data.forEach((element) => {
  109. // console.log(element);
  110. // // this.$refs.map.addMarker({ point: [116.40740,39.90420], val: "1" });
  111. // });
  112. },
  113. methods: {
  114. // 获取总数
  115. GETtotal() {
  116. getCompanyFieldNumberVo().then((res) => {
  117. this.totalList = res.data;
  118. });
  119. },
  120. // 获取企业数
  121. async GETtree() {
  122. const res = await getSysOrganizationAuthTreeByRoleId();
  123. const treedata = res.data;
  124. const processedData = this.processTreeData(treedata);
  125. this.parentOpt = processedData;
  126. this.defaultdata = res.data[0];
  127. },
  128. //过滤数据
  129. processTreeData(treeData) {
  130. const processedData = [];
  131. function processNode(node) {
  132. if (node.codeType === "field") {
  133. node.companyName = node.fieldName;
  134. }
  135. if (node.children && node.children.length > 0) {
  136. node.children.forEach((child) => {
  137. processNode(child);
  138. });
  139. }
  140. }
  141. treeData.forEach((root) => {
  142. processNode(root);
  143. processedData.push(root);
  144. });
  145. return processedData;
  146. },
  147. parseCoordinates(input) {
  148. if (input && typeof input === "string") {
  149. return input.split(",").map(Number);
  150. }
  151. return [];
  152. },
  153. parentChange(data) {
  154. //data为当前选中对象
  155. this.$refs.map.clearMarkers();
  156. this.maplist = data;
  157. this.maplistArr = data;
  158. console.log(data, "parentChange");
  159. if (data.codeType === "field") {
  160. if (this.parseCoordinates(data.longitudeAndLatitudeString).length > 0) {
  161. this.$refs.map.addMarker({
  162. point: this.parseCoordinates(data.longitudeAndLatitudeString),
  163. val: data.analysisState,
  164. ...data,
  165. });
  166. return;
  167. }
  168. this.$refs.map.clearMarkers();
  169. } else {
  170. const dataMapList = data.children;
  171. dataMapList.forEach((element) => {
  172. console.log(element);
  173. if (
  174. this.parseCoordinates(element.longitudeAndLatitudeString).length >
  175. 0 &&
  176. element.codeType === "field"
  177. ) {
  178. this.$refs.map.addMarker({
  179. point: this.parseCoordinates(element.longitudeAndLatitudeString),
  180. val: element.analysisState,
  181. ...element,
  182. });
  183. return;
  184. }
  185. this.$refs.map.clearMarkers();
  186. });
  187. }
  188. },
  189. featureClick(data) {
  190. console.log(data, "featureClick");
  191. const val = data.val;
  192. if (val === "-1" || val === -1) {
  193. this.$message.error("当前风场未进行分析");
  194. } else if (val === "0" || val === 0) {
  195. this.$message({
  196. message: "当前风场正在分析中",
  197. type: "warning",
  198. });
  199. } else if (val === "1" || val === 1) {
  200. this.$router.push({
  201. path: "cockpitManage/electronic-map",
  202. query: {
  203. fieldCode: data.codeNumber,
  204. },
  205. });
  206. }
  207. },
  208. handleSwitchChange() {
  209. this.ShowRi = !this.ShowRi;
  210. },
  211. },
  212. };
  213. </script>
  214. <style lang="scss" scoped>
  215. .map-ditu {
  216. // min-width: 86.9vw;
  217. // max-width: 94.9vw;
  218. height: 93vh;
  219. position: relative;
  220. }
  221. .ridata {
  222. position: absolute;
  223. top: 20px;
  224. right: 20px;
  225. }
  226. .ledata {
  227. font-size: 14px;
  228. width: 300px;
  229. position: absolute;
  230. top: 20px;
  231. left: 60px;
  232. background: #008080;
  233. padding: 10px;
  234. color: #fff;
  235. border-radius: 5px;
  236. p {
  237. line-height: 24px;
  238. .SpText {
  239. display: inline-block;
  240. width: 120px;
  241. text-align: right;
  242. }
  243. .red,
  244. .yellow,
  245. .green {
  246. display: inline-block;
  247. width: 30px;
  248. height: 12px;
  249. margin-right: 5px;
  250. }
  251. .red {
  252. background-color: #e16757;
  253. }
  254. .yellow {
  255. background-color: #eecb5f;
  256. }
  257. .green {
  258. background-color: #7ecf51;
  259. }
  260. }
  261. }
  262. ::v-deep .el-switch__label.is-active {
  263. color: #fff;
  264. }
  265. </style>