index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470
  1. <template>
  2. <div class="map-container">
  3. <div id="map" class="map"></div>
  4. <div v-if="hoverInfo" :style="hoverStyle" class="hover-info">
  5. <h3>{{ hoverInfo.fieldName }}</h3>
  6. <div>
  7. <p>
  8. <span>风场编号</span><span>{{ hoverInfo.codeNumber }}</span>
  9. </p>
  10. <p>
  11. <span>空气密度</span><span>{{ hoverInfo.density }} kg/m3</span>
  12. </p>
  13. <p>
  14. <span>总额定容量</span
  15. ><span
  16. >{{
  17. hoverInfo?.ratedCapacityNumber
  18. ? hoverInfo.ratedCapacityNumber
  19. : 0
  20. }}/KW</span
  21. >
  22. </p>
  23. <p>
  24. <span>经度</span><span>{{ hoverInfo.longitude }}</span>
  25. </p>
  26. <p>
  27. <span>纬度</span><span>{{ hoverInfo.latitude }}</span>
  28. </p>
  29. <p>
  30. <span>海拔高度</span><span>{{ hoverInfo.elevationHeight }} /米</span>
  31. </p>
  32. <p>
  33. <span>最新分析时间</span
  34. ><span> {{ $formatDateTWO(hoverInfo.wfbrCreateTime) }}</span>
  35. </p>
  36. </div>
  37. </div>
  38. <div v-if="hoverfengji" :style="hoverfengjiStyle" class="hover-fengji">
  39. <h3>{{ hoverfengji.engineName }}</h3>
  40. <div>
  41. <p>
  42. <span>风机编号</span><span>{{ hoverfengji.engineCode }}</span>
  43. </p>
  44. <p>
  45. <span>额定容量</span
  46. ><span
  47. >{{
  48. hoverfengji?.ratedCapacity ? hoverfengji?.ratedCapacity : 0
  49. }}
  50. /KW</span
  51. >
  52. </p>
  53. <p>
  54. <span>海拔高度</span
  55. ><span>{{ hoverfengji.elevationHeight }} /米</span>
  56. </p>
  57. <p>
  58. <span>轮毂高度</span><span>{{ hoverfengji.hubHeight }} /米</span>
  59. </p>
  60. <p>
  61. <span>经度</span><span>{{ hoverfengji.longitude }}</span>
  62. </p>
  63. <p>
  64. <span>维度</span><span>{{ hoverfengji.latitude }}</span>
  65. </p>
  66. <p>
  67. 是否标杆风机
  68. <span>{{ hoverfengji.sightcing == 1 ? "是" : "否" }}</span>
  69. </p>
  70. <p>
  71. <span>额定风速</span><span>{{ hoverfengji.ratedWindSpeed }} m/s</span>
  72. </p>
  73. <p>
  74. <span>切入风速</span
  75. ><span>{{ hoverfengji.ratedCutInWindspeed }} m/s</span>
  76. </p>
  77. <p>
  78. <span>切出风速</span
  79. ><span>{{ hoverfengji.ratedCutOutWindspeed }} m/s</span>
  80. </p>
  81. </div>
  82. </div>
  83. <div v-if="hoverta" :style="hovertaStyle" class="hover-ta">
  84. <h3>{{ hoverta.anemometerName }}</h3>
  85. <div>
  86. <p>
  87. <span>测风塔编号</span><span>{{ hoverta.anemometerCode }}</span>
  88. </p>
  89. <p>
  90. <span>经度</span><span>{{ hoverta.longitude }}</span>
  91. </p>
  92. <p>
  93. <span>维度</span><span>{{ hoverta.latitude }}</span>
  94. </p>
  95. <!-- <p>
  96. <span>状态</span><span>{{ }}</span>
  97. </p> -->
  98. <p>
  99. <span>测风塔高度</span
  100. ><span>{{ hoverta.anemometerHeightStrings }}/米</span>
  101. </p>
  102. </div>
  103. </div>
  104. <!-- 这是测试 -->
  105. <el-dialog title="异常描述" :visible.sync="dialogVisible" width="50%">
  106. <el-table :data="tableData" max-height="500" style="width: 100%">
  107. <el-table-column prop="analysisTypeName" label="类型" width="300">
  108. </el-table-column>
  109. <el-table-column prop="errDesc" label="描述"> </el-table-column>
  110. </el-table>
  111. </el-dialog>
  112. </div>
  113. </template>
  114. <script>
  115. import "ol/ol.css";
  116. import { Map, View, Feature } from "ol";
  117. import TileLayer from "ol/layer/Tile.js";
  118. import { XYZ } from "ol/source";
  119. import { fromLonLat } from "ol/proj";
  120. import { Vector } from "ol/source";
  121. import { Vector as VectorLayer } from "ol/layer";
  122. import { Point } from "ol/geom";
  123. import { Icon, Style } from "ol/style";
  124. import ZoomSlider from "ol/control/ZoomSlider.js";
  125. import { defaults as defaultControls } from "ol/control.js";
  126. import icon01 from "../../assets/img/icon01.png";
  127. import icon02 from "../../assets/img/icon02.png";
  128. import icon03 from "../../assets/img/icon03.png";
  129. import icon04 from "../../assets/img/icon04.png";
  130. import icon05 from "../../assets/img/icon05.png";
  131. import icon06 from "../../assets/img/icon06.png";
  132. import defaultIcon from "../../assets/img/icon01.png";
  133. import { queryErrDescByEngine } from "@/api/ledger.js";
  134. export default {
  135. props: {
  136. windEngineGroupByFieldCodeDetail: {
  137. type: Object,
  138. default: () => {
  139. return {};
  140. },
  141. },
  142. },
  143. name: "T-map",
  144. data() {
  145. return {
  146. dialogVisible: false,
  147. tableData: [],
  148. hoverInfo: null,
  149. hoverStyle: {
  150. position: "absolute",
  151. left: "0px",
  152. top: "0px",
  153. },
  154. hoverfengji: null,
  155. hoverfengjiStyle: {
  156. position: "absolute",
  157. left: "0px",
  158. top: "0px",
  159. },
  160. hoverta: null,
  161. hovertaStyle: {
  162. position: "absolute",
  163. left: "0px",
  164. top: "0px",
  165. },
  166. };
  167. },
  168. watch: {
  169. windEngineGroupByFieldCodeDetail: {
  170. handler(data) {
  171. if (data) {
  172. }
  173. },
  174. deep: true, // 深度监听
  175. },
  176. },
  177. mounted() {
  178. this.map = new Map({
  179. target: "map",
  180. view: new View({
  181. projection: "EPSG:4326",
  182. center: fromLonLat([116.389, 39.903]), //地图中心
  183. zoom: 5, //默认缩放级别
  184. minZoom: 5, //最小缩放级别
  185. maxZoom: 15, //最大缩放级别
  186. extent: [
  187. 70.3671875, 18.14576369243164, 134.92927612304688, 55.667146064662596,
  188. ],
  189. }),
  190. layers: [
  191. new TileLayer({
  192. source: new XYZ({
  193. // url: "http://127.0.0.1:8010/tiles/{z}/{x}/{y}.png", //本地
  194. url: "http://192.168.50.235/tiles/{z}/{x}/{y}.png", //内网
  195. // url: "http://106.120.102.238:18000/tiles/{z}/{x}/{y}.png", //外网
  196. // url: "http://10.96.137.5:9080/tiles/{z}/{x}/{y}.png", //大~#@唐
  197. }),
  198. }),
  199. new VectorLayer({
  200. id: "marker",
  201. source: new Vector(),
  202. }),
  203. ],
  204. controls: defaultControls().extend([new ZoomSlider()]),
  205. });
  206. // console.log(this.map.getView().calculateExtent());
  207. this.initEvent();
  208. },
  209. methods: {
  210. /**
  211. * 地图上打点
  212. * @param data
  213. */
  214. addMarker(data = { point: [120.2, 30.35], val: "1" }) {
  215. const layer = this.map
  216. .getLayers()
  217. .getArray()
  218. .find((element) => {
  219. return element.get("id") === "marker";
  220. });
  221. const source = layer.getSource();
  222. const iconSrc = this.getIconForValue(data.val);
  223. const feature = new Feature({
  224. geometry: new Point(fromLonLat(data.point, "EPSG:4326")),
  225. name: "marker",
  226. data,
  227. });
  228. feature.setStyle(
  229. new Style({
  230. image: new Icon({
  231. src: iconSrc,
  232. scale: [0.3, 0.3],
  233. anchor: [0.5, 1],
  234. opacity: 1,
  235. }),
  236. })
  237. );
  238. source.addFeature(feature);
  239. },
  240. /**
  241. * 地图上打点
  242. * @param data
  243. */
  244. clearMarkers() {
  245. const layer = this.map
  246. .getLayers()
  247. .getArray()
  248. .find((element) => {
  249. return element.get("id") === "marker";
  250. });
  251. if (layer) {
  252. const source = layer.getSource();
  253. source.clear(); // 清空所有特征
  254. }
  255. },
  256. getIconForValue(val) {
  257. switch (val) {
  258. case "-1":
  259. case -1:
  260. return icon01;
  261. case "10":
  262. case 10:
  263. return icon01;
  264. case 0:
  265. case "0":
  266. return icon02;
  267. case 20:
  268. case "20":
  269. return icon02;
  270. case 1:
  271. case "1":
  272. return icon03;
  273. case 30:
  274. case "30":
  275. return icon03;
  276. case "4":
  277. return icon04;
  278. case "5":
  279. return icon05;
  280. case "6":
  281. return icon06;
  282. default:
  283. return defaultIcon;
  284. }
  285. },
  286. /**
  287. * 初始化地图事件
  288. */
  289. initEvent() {
  290. this.map.on("pointermove", (evt) => {
  291. const features = this.map.getFeaturesAtPixel(evt.pixel, {
  292. hitTolerance: 1,
  293. });
  294. if (features && features.length > 0) {
  295. const feature = features.at(0);
  296. const val = feature.get("data").val;
  297. if (val == "1" || val == "30") {
  298. this.hoverInfo = feature.get("data");
  299. this.hoverStyle.left = `${evt.pixel[0] + 10}px`;
  300. this.hoverStyle.top = `${evt.pixel[1] - 150}px`;
  301. } else if (val == "4") {
  302. this.hoverfengji = feature.get("data");
  303. this.hoverfengjiStyle.left = `${evt.pixel[0] + 10}px`;
  304. this.hoverfengjiStyle.top = `${evt.pixel[1] - 150}px`;
  305. this.currentFeatureData = feature.get("data");
  306. } else if (val == "5") {
  307. this.hoverta = feature.get("data");
  308. this.hovertaStyle.left = `${evt.pixel[0] + 10}px`;
  309. this.hovertaStyle.top = `${evt.pixel[1] - 150}px`;
  310. this.currentFeatureData = feature.get("data");
  311. } else if (val == "6") {
  312. this.currentFeatureData = feature.get("data");
  313. } else {
  314. this.hoverInfo = null;
  315. this.hoverfengji = false;
  316. this.hoverta = false;
  317. this.currentFeatureData = null;
  318. }
  319. } else {
  320. this.hoverInfo = null;
  321. this.hoverfengji = false;
  322. this.hoverta = false;
  323. this.currentFeatureData = null;
  324. }
  325. });
  326. this.map.on("click", (evt) => {
  327. const features = this.map.getFeaturesAtPixel(evt.pixel, {
  328. hitTolerance: 1,
  329. });
  330. if (features && features.length > 0) {
  331. const feature = features.at(0);
  332. const val = feature.get("data").val;
  333. if (val === "6") {
  334. this.handleFeatureClick(feature.get("data"));
  335. } else {
  336. this.$emit("feature-click", feature.get("data"));
  337. }
  338. } else if (
  339. this.currentFeatureData &&
  340. this.currentFeatureData.val === "6"
  341. ) {
  342. this.handleFeatureClick(this.currentFeatureData);
  343. }
  344. });
  345. },
  346. handleFeatureClick(featureData) {
  347. let dateArr = {
  348. batchCode: this.$route.query.batchCode,
  349. engineCode: featureData.engineCode,
  350. };
  351. queryErrDescByEngine(dateArr).then((res) => {
  352. this.dialogVisible = true;
  353. this.tableData = res.data;
  354. });
  355. },
  356. /**
  357. * 平移缩放
  358. * @param data
  359. */
  360. moveAndZoom(data = { point: [120.2, 30.35], zoom: 15 }) {
  361. this.map.getView().animate({
  362. center: fromLonLat(data.point, "EPSG:4326"),
  363. zoom: data.zoom,
  364. duration: 2000,
  365. });
  366. },
  367. },
  368. };
  369. </script>
  370. <style scoped lang="scss">
  371. .map-container {
  372. position: relative;
  373. width: 100%;
  374. height: 100%;
  375. }
  376. .map {
  377. width: 100%;
  378. height: 100%;
  379. }
  380. .hover-info {
  381. position: absolute;
  382. color: white;
  383. padding: 0px;
  384. z-index: 100;
  385. h3 {
  386. background-color: #008080cc;
  387. width: 240px;
  388. padding: 5px 10px;
  389. font-size: 16px;
  390. }
  391. div {
  392. background-color: #00808097;
  393. width: 240px;
  394. font-size: 12px;
  395. p {
  396. padding: 5px 10px;
  397. display: flex;
  398. justify-content: space-between;
  399. }
  400. }
  401. }
  402. .hover-fengji {
  403. position: absolute;
  404. color: white;
  405. padding: 0px;
  406. z-index: 100;
  407. h3 {
  408. background-color: #027cb4cc;
  409. width: 240px;
  410. padding: 5px 10px;
  411. font-size: 16px;
  412. }
  413. div {
  414. background-color: #027cb49e;
  415. width: 240px;
  416. font-size: 12px;
  417. p {
  418. padding: 5px 10px;
  419. display: flex;
  420. justify-content: space-between;
  421. }
  422. }
  423. }
  424. .hover-ta {
  425. position: absolute;
  426. color: white;
  427. padding: 0px;
  428. z-index: 100;
  429. h3 {
  430. background-color: #d90019b2;
  431. width: 240px;
  432. padding: 5px 10px;
  433. font-size: 16px;
  434. }
  435. div {
  436. background-color: #d9001994;
  437. width: 240px;
  438. font-size: 12px;
  439. p {
  440. padding: 5px 10px;
  441. display: flex;
  442. justify-content: space-between;
  443. }
  444. }
  445. }
  446. </style>