123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470 |
- <template>
- <div class="map-container">
- <div id="map" class="map"></div>
- <div v-if="hoverInfo" :style="hoverStyle" class="hover-info">
- <h3>{{ hoverInfo.fieldName }}</h3>
- <div>
- <p>
- <span>风场编号</span><span>{{ hoverInfo.codeNumber }}</span>
- </p>
- <p>
- <span>空气密度</span><span>{{ hoverInfo.density }} kg/m3</span>
- </p>
- <p>
- <span>总额定容量</span
- ><span
- >{{
- hoverInfo?.ratedCapacityNumber
- ? hoverInfo.ratedCapacityNumber
- : 0
- }}/KW</span
- >
- </p>
- <p>
- <span>经度</span><span>{{ hoverInfo.longitude }}</span>
- </p>
- <p>
- <span>纬度</span><span>{{ hoverInfo.latitude }}</span>
- </p>
- <p>
- <span>海拔高度</span><span>{{ hoverInfo.elevationHeight }} /米</span>
- </p>
- <p>
- <span>最新分析时间</span
- ><span> {{ $formatDateTWO(hoverInfo.wfbrCreateTime) }}</span>
- </p>
- </div>
- </div>
- <div v-if="hoverfengji" :style="hoverfengjiStyle" class="hover-fengji">
- <h3>{{ hoverfengji.engineName }}</h3>
- <div>
- <p>
- <span>风机编号</span><span>{{ hoverfengji.engineCode }}</span>
- </p>
- <p>
- <span>额定容量</span
- ><span
- >{{
- hoverfengji?.ratedCapacity ? hoverfengji?.ratedCapacity : 0
- }}
- /KW</span
- >
- </p>
- <p>
- <span>海拔高度</span
- ><span>{{ hoverfengji.elevationHeight }} /米</span>
- </p>
- <p>
- <span>轮毂高度</span><span>{{ hoverfengji.hubHeight }} /米</span>
- </p>
- <p>
- <span>经度</span><span>{{ hoverfengji.longitude }}</span>
- </p>
- <p>
- <span>维度</span><span>{{ hoverfengji.latitude }}</span>
- </p>
- <p>
- 是否标杆风机
- <span>{{ hoverfengji.sightcing == 1 ? "是" : "否" }}</span>
- </p>
- <p>
- <span>额定风速</span><span>{{ hoverfengji.ratedWindSpeed }} m/s</span>
- </p>
- <p>
- <span>切入风速</span
- ><span>{{ hoverfengji.ratedCutInWindspeed }} m/s</span>
- </p>
- <p>
- <span>切出风速</span
- ><span>{{ hoverfengji.ratedCutOutWindspeed }} m/s</span>
- </p>
- </div>
- </div>
- <div v-if="hoverta" :style="hovertaStyle" class="hover-ta">
- <h3>{{ hoverta.anemometerName }}</h3>
- <div>
- <p>
- <span>测风塔编号</span><span>{{ hoverta.anemometerCode }}</span>
- </p>
- <p>
- <span>经度</span><span>{{ hoverta.longitude }}</span>
- </p>
- <p>
- <span>维度</span><span>{{ hoverta.latitude }}</span>
- </p>
- <!-- <p>
- <span>状态</span><span>{{ }}</span>
- </p> -->
- <p>
- <span>测风塔高度</span
- ><span>{{ hoverta.anemometerHeightStrings }}/米</span>
- </p>
- </div>
- </div>
- <!-- 这是测试 -->
- <el-dialog title="异常描述" :visible.sync="dialogVisible" width="50%">
- <el-table :data="tableData" max-height="500" style="width: 100%">
- <el-table-column prop="analysisTypeName" label="类型" width="300">
- </el-table-column>
- <el-table-column prop="errDesc" label="描述"> </el-table-column>
- </el-table>
- </el-dialog>
- </div>
- </template>
- <script>
- import "ol/ol.css";
- import { Map, View, Feature } from "ol";
- import TileLayer from "ol/layer/Tile.js";
- import { XYZ } from "ol/source";
- import { fromLonLat } from "ol/proj";
- import { Vector } from "ol/source";
- import { Vector as VectorLayer } from "ol/layer";
- import { Point } from "ol/geom";
- import { Icon, Style } from "ol/style";
- import ZoomSlider from "ol/control/ZoomSlider.js";
- import { defaults as defaultControls } from "ol/control.js";
- import icon01 from "../../assets/img/icon01.png";
- import icon02 from "../../assets/img/icon02.png";
- import icon03 from "../../assets/img/icon03.png";
- import icon04 from "../../assets/img/icon04.png";
- import icon05 from "../../assets/img/icon05.png";
- import icon06 from "../../assets/img/icon06.png";
- import defaultIcon from "../../assets/img/icon01.png";
- import { queryErrDescByEngine } from "@/api/ledger.js";
- export default {
- props: {
- windEngineGroupByFieldCodeDetail: {
- type: Object,
- default: () => {
- return {};
- },
- },
- },
- name: "T-map",
- data() {
- return {
- dialogVisible: false,
- tableData: [],
- hoverInfo: null,
- hoverStyle: {
- position: "absolute",
- left: "0px",
- top: "0px",
- },
- hoverfengji: null,
- hoverfengjiStyle: {
- position: "absolute",
- left: "0px",
- top: "0px",
- },
- hoverta: null,
- hovertaStyle: {
- position: "absolute",
- left: "0px",
- top: "0px",
- },
- };
- },
- watch: {
- windEngineGroupByFieldCodeDetail: {
- handler(data) {
- if (data) {
- }
- },
- deep: true, // 深度监听
- },
- },
- mounted() {
- this.map = new Map({
- target: "map",
- view: new View({
- projection: "EPSG:4326",
- center: fromLonLat([116.389, 39.903]), //地图中心
- zoom: 5, //默认缩放级别
- minZoom: 5, //最小缩放级别
- maxZoom: 15, //最大缩放级别
- extent: [
- 70.3671875, 18.14576369243164, 134.92927612304688, 55.667146064662596,
- ],
- }),
- layers: [
- new TileLayer({
- source: new XYZ({
- // url: "http://127.0.0.1:8010/tiles/{z}/{x}/{y}.png", //本地
- url: "http://192.168.50.235/tiles/{z}/{x}/{y}.png", //内网
- // url: "http://106.120.102.238:18000/tiles/{z}/{x}/{y}.png", //外网
- // url: "http://10.96.137.5:9080/tiles/{z}/{x}/{y}.png", //大~#@唐
- }),
- }),
- new VectorLayer({
- id: "marker",
- source: new Vector(),
- }),
- ],
- controls: defaultControls().extend([new ZoomSlider()]),
- });
- // console.log(this.map.getView().calculateExtent());
- this.initEvent();
- },
- methods: {
- /**
- * 地图上打点
- * @param data
- */
- addMarker(data = { point: [120.2, 30.35], val: "1" }) {
- const layer = this.map
- .getLayers()
- .getArray()
- .find((element) => {
- return element.get("id") === "marker";
- });
- const source = layer.getSource();
- const iconSrc = this.getIconForValue(data.val);
- const feature = new Feature({
- geometry: new Point(fromLonLat(data.point, "EPSG:4326")),
- name: "marker",
- data,
- });
- feature.setStyle(
- new Style({
- image: new Icon({
- src: iconSrc,
- scale: [0.3, 0.3],
- anchor: [0.5, 1],
- opacity: 1,
- }),
- })
- );
- source.addFeature(feature);
- },
- /**
- * 地图上打点
- * @param data
- */
- clearMarkers() {
- const layer = this.map
- .getLayers()
- .getArray()
- .find((element) => {
- return element.get("id") === "marker";
- });
- if (layer) {
- const source = layer.getSource();
- source.clear(); // 清空所有特征
- }
- },
- getIconForValue(val) {
- switch (val) {
- case "-1":
- case -1:
- return icon01;
- case "10":
- case 10:
- return icon01;
- case 0:
- case "0":
- return icon02;
- case 20:
- case "20":
- return icon02;
- case 1:
- case "1":
- return icon03;
- case 30:
- case "30":
- return icon03;
- case "4":
- return icon04;
- case "5":
- return icon05;
- case "6":
- return icon06;
- default:
- return defaultIcon;
- }
- },
- /**
- * 初始化地图事件
- */
- initEvent() {
- this.map.on("pointermove", (evt) => {
- const features = this.map.getFeaturesAtPixel(evt.pixel, {
- hitTolerance: 1,
- });
- if (features && features.length > 0) {
- const feature = features.at(0);
- const val = feature.get("data").val;
- if (val == "1" || val == "30") {
- this.hoverInfo = feature.get("data");
- this.hoverStyle.left = `${evt.pixel[0] + 10}px`;
- this.hoverStyle.top = `${evt.pixel[1] - 150}px`;
- } else if (val == "4") {
- this.hoverfengji = feature.get("data");
- this.hoverfengjiStyle.left = `${evt.pixel[0] + 10}px`;
- this.hoverfengjiStyle.top = `${evt.pixel[1] - 150}px`;
- this.currentFeatureData = feature.get("data");
- } else if (val == "5") {
- this.hoverta = feature.get("data");
- this.hovertaStyle.left = `${evt.pixel[0] + 10}px`;
- this.hovertaStyle.top = `${evt.pixel[1] - 150}px`;
- this.currentFeatureData = feature.get("data");
- } else if (val == "6") {
- this.currentFeatureData = feature.get("data");
- } else {
- this.hoverInfo = null;
- this.hoverfengji = false;
- this.hoverta = false;
- this.currentFeatureData = null;
- }
- } else {
- this.hoverInfo = null;
- this.hoverfengji = false;
- this.hoverta = false;
- this.currentFeatureData = null;
- }
- });
- this.map.on("click", (evt) => {
- const features = this.map.getFeaturesAtPixel(evt.pixel, {
- hitTolerance: 1,
- });
- if (features && features.length > 0) {
- const feature = features.at(0);
- const val = feature.get("data").val;
- if (val === "6") {
- this.handleFeatureClick(feature.get("data"));
- } else {
- this.$emit("feature-click", feature.get("data"));
- }
- } else if (
- this.currentFeatureData &&
- this.currentFeatureData.val === "6"
- ) {
- this.handleFeatureClick(this.currentFeatureData);
- }
- });
- },
- handleFeatureClick(featureData) {
- let dateArr = {
- batchCode: this.$route.query.batchCode,
- engineCode: featureData.engineCode,
- };
- queryErrDescByEngine(dateArr).then((res) => {
- this.dialogVisible = true;
- this.tableData = res.data;
- });
- },
- /**
- * 平移缩放
- * @param data
- */
- moveAndZoom(data = { point: [120.2, 30.35], zoom: 15 }) {
- this.map.getView().animate({
- center: fromLonLat(data.point, "EPSG:4326"),
- zoom: data.zoom,
- duration: 2000,
- });
- },
- },
- };
- </script>
- <style scoped lang="scss">
- .map-container {
- position: relative;
- width: 100%;
- height: 100%;
- }
- .map {
- width: 100%;
- height: 100%;
- }
- .hover-info {
- position: absolute;
- color: white;
- padding: 0px;
- z-index: 100;
- h3 {
- background-color: #008080cc;
- width: 240px;
- padding: 5px 10px;
- font-size: 16px;
- }
- div {
- background-color: #00808097;
- width: 240px;
- font-size: 12px;
- p {
- padding: 5px 10px;
- display: flex;
- justify-content: space-between;
- }
- }
- }
- .hover-fengji {
- position: absolute;
- color: white;
- padding: 0px;
- z-index: 100;
- h3 {
- background-color: #027cb4cc;
- width: 240px;
- padding: 5px 10px;
- font-size: 16px;
- }
- div {
- background-color: #027cb49e;
- width: 240px;
- font-size: 12px;
- p {
- padding: 5px 10px;
- display: flex;
- justify-content: space-between;
- }
- }
- }
- .hover-ta {
- position: absolute;
- color: white;
- padding: 0px;
- z-index: 100;
- h3 {
- background-color: #d90019b2;
- width: 240px;
- padding: 5px 10px;
- font-size: 16px;
- }
- div {
- background-color: #d9001994;
- width: 240px;
- font-size: 12px;
- p {
- padding: 5px 10px;
- display: flex;
- justify-content: space-between;
- }
- }
- }
- </style>
|