|
@@ -2,46 +2,43 @@
|
|
|
<div class="map-container">
|
|
|
<div id="map" class="map"></div>
|
|
|
<div v-if="hoverInfo" :style="hoverStyle" class="hover-info">
|
|
|
- <h3>XXXX风场</h3>
|
|
|
+ <h3>{{hoverInfo.fieldName}}</h3>
|
|
|
<div>
|
|
|
- <p><span>风场编号</span><span>xxxx</span></p>
|
|
|
- <p><span>风场名称</span><span>xxxx</span></p>
|
|
|
- <p><span>空气密度-合同</span><span>xxxx</span></p>
|
|
|
- <p><span>启用状态</span><span>xxxx</span></p>
|
|
|
- <p><span>风机数量</span><span>xxxx</span></p>
|
|
|
- <p><span>总额定容量</span><span>xxxx</span></p>
|
|
|
- <p><span>经度</span><span>xxxx</span></p>
|
|
|
- <p><span>纬度</span><span>xxxx</span></p>
|
|
|
- <p><span>海拔高度</span><span>xxxx</span></p>
|
|
|
- <p><span>更新时间</span><span>xxxx</span></p>
|
|
|
+ <p><span>风场编号</span><span>{{hoverInfo.codeNumber}}</span></p>
|
|
|
+ <p><span>空气密度</span><span>{{hoverInfo.density}}</span></p>
|
|
|
+ <p><span>总额定容量</span><span>{{hoverInfo.ratedCapacityNumber}}</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> {{ $formatDate(hoverInfo.wfbrCreateTime) }}</span></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<div v-if="hoverfengji" :style="hoverfengjiStyle" class="hover-fengji">
|
|
|
- <h3>XXX风机</h3>
|
|
|
+ <h3>{{hoverfengji.engineName}}</h3>
|
|
|
<div>
|
|
|
- <p><span>风机编号</span><span>xxxx</span></p>
|
|
|
- <p><span>风机名称</span><span>xxxx</span></p>
|
|
|
- <p><span>额定容量</span><span>xxxx</span></p>
|
|
|
- <p><span>海拔高度</span><span>xxxx</span></p>
|
|
|
- <p><span>轮毂高度</span><span>xxxx</span></p>
|
|
|
- <p><span>经度</span><span>xxxx</span></p>
|
|
|
- <p><span>维度</span><span>xxxx</span></p>
|
|
|
- <p><span>是否标杆风机</span><span>xxxx</span></p>
|
|
|
- <p><span>创建时间</span><span>xxxx</span></p>
|
|
|
- <p><span>更新人</span><span>xxxx</span></p>
|
|
|
- <p><span>更新时间</span><span>xxxx</span></p>
|
|
|
+ <p><span>风机编号</span><span>{{hoverfengji.engineCode}}</span></p>
|
|
|
+ <p><span>额定容量</span><span>{{hoverfengji.ratedCapacity}}</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.rated_wind_speed}}</span></p>
|
|
|
+ <p><span>切入风速</span><span>{{hoverfengji.ratedCutInWindspeed}}</span></p>
|
|
|
+ <p><span>切出风速</span><span>{{hoverfengji.ratedCutOutWindspeed}}</span></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-if="hoverta" :style="hovertaStyle" class="hover-ta">
|
|
|
- <h3>XXXXX测风塔</h3>
|
|
|
+ <h3>{{hoverta.anemometerName}}</h3>
|
|
|
<div>
|
|
|
- <p><span>测风塔编号</span><span>xxxx</span></p>
|
|
|
- <p><span>机型类型</span><span>xxxx</span></p>
|
|
|
- <p><span>经度</span><span>xxxx</span></p>
|
|
|
- <p><span>维度</span><span>xxxx</span></p>
|
|
|
- <p><span>状态</span><span>xxxx</span></p>
|
|
|
- <p><span>测风塔高度</span><span>xxxx</span></p>
|
|
|
- <p><span>创建时间</span><span>xxxx</span></p>
|
|
|
+ <p><span>测风塔编号</span><span>{{hoverta.anemometerCode}}</span></p>
|
|
|
+
|
|
|
+ <p><span>经度</span><span>{{hoverta.longitude}}</span></p>
|
|
|
+ <p><span>维度</span><span>{{hoverta.anemometerName}}</span></p>
|
|
|
+ <p><span>状态</span><span>{{hoverta.latitude}}</span></p>
|
|
|
+ <p><span>测风塔高度</span><span>{{hoverta.anemometerHeightStrings}}</span></p>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -60,8 +57,6 @@ 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 icon from "../../assets/location.png";
|
|
|
-import icon2 from "../../assets/location.png"; //这只是一个演示 具体图片自己去定义
|
|
|
|
|
|
import icon01 from "../../assets/img/icon01.png";
|
|
|
import icon02 from "../../assets/img/icon02.png";
|
|
@@ -70,10 +65,12 @@ import icon04 from "../../assets/img/icon04.png";
|
|
|
import icon05 from "../../assets/img/icon05.png";
|
|
|
import defaultIcon from "../../assets/img/icon05.png";
|
|
|
export default {
|
|
|
- maplist: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {};
|
|
|
+ props: {
|
|
|
+ windEngineGroupByFieldCodeDetail: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
name: "T-map",
|
|
@@ -82,28 +79,27 @@ export default {
|
|
|
hoverInfo: null,
|
|
|
hoverStyle: {
|
|
|
position: "absolute",
|
|
|
- left: "0px", // Initialize left property
|
|
|
+ left: "0px",
|
|
|
top: "0px",
|
|
|
},
|
|
|
hoverfengji: null,
|
|
|
hoverfengjiStyle: {
|
|
|
position: "absolute",
|
|
|
- left: "0px", // Initialize left property
|
|
|
+ left: "0px",
|
|
|
top: "0px",
|
|
|
},
|
|
|
hoverta: null,
|
|
|
hovertaStyle: {
|
|
|
position: "absolute",
|
|
|
- left: "0px", // Initialize left property
|
|
|
+ left: "0px",
|
|
|
top: "0px",
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
- maplist: {
|
|
|
+ windEngineGroupByFieldCodeDetail: {
|
|
|
handler(data) {
|
|
|
if (data) {
|
|
|
- console.log(data);
|
|
|
}
|
|
|
},
|
|
|
deep: true, // 深度监听
|
|
@@ -189,20 +185,23 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
getIconForValue(val) {
|
|
|
- // Define icon sources based on different values of val
|
|
|
+
|
|
|
switch (val) {
|
|
|
- case "-1" || -1:
|
|
|
- return icon01; // Define icon1 variable with the path to the icon for val 1
|
|
|
- case "2":
|
|
|
- return icon02; // Define icon2 variable with the path to the icon for val 2
|
|
|
- case "3":
|
|
|
- return icon03; // Define icon3 variable with the path to the icon for val 3
|
|
|
+ case "-1":
|
|
|
+ case -1:
|
|
|
+ return icon01;
|
|
|
+ case 0:
|
|
|
+ case "0":
|
|
|
+ return icon02;
|
|
|
+ case 1:
|
|
|
+ case "1":
|
|
|
+ return icon03;
|
|
|
case "4":
|
|
|
- return icon04; // Define icon3 variable with the path to the icon for val 3
|
|
|
+ return icon04;
|
|
|
case "5":
|
|
|
- return icon05; // Define icon3 variable with the path to the icon for val 3
|
|
|
+ return icon05;
|
|
|
default:
|
|
|
- return defaultIcon; // Define defaultIcon variable with the path to the default icon
|
|
|
+ return defaultIcon;
|
|
|
}
|
|
|
},
|
|
|
|
|
@@ -217,17 +216,17 @@ export default {
|
|
|
if (features && features.length > 0) {
|
|
|
const feature = features.at(0);
|
|
|
const val = feature.get("data").val;
|
|
|
- if (val === "3") {
|
|
|
- this.hoverInfo = `Marker at ${feature.get("data").point}`;
|
|
|
+ if (val == "1") {
|
|
|
+ this.hoverInfo = feature.get("data");
|
|
|
this.hoverStyle.left = `${evt.pixel[0] + 10}px`;
|
|
|
this.hoverStyle.top = `${evt.pixel[1] + 10}px`;
|
|
|
- } else if (val === "4") {
|
|
|
- this.hoverfengji = true;
|
|
|
+ } else if (val == "4") {
|
|
|
+ this.hoverfengji = feature.get("data");
|
|
|
this.hoverfengjiStyle.left = `${evt.pixel[0] + 10}px`;
|
|
|
this.hoverfengjiStyle.top = `${evt.pixel[1] + 10}px`;
|
|
|
this.currentFeatureData = feature.get("data"); // Store the feature data for click event
|
|
|
- } else if (val === "5") {
|
|
|
- this.hoverta = true;
|
|
|
+ } else if (val == "5") {
|
|
|
+ this.hoverta = feature.get("data");
|
|
|
this.hovertaStyle.left = `${evt.pixel[0] + 10}px`;
|
|
|
this.hovertaStyle.top = `${evt.pixel[1] + 10}px`;
|
|
|
this.currentFeatureData = feature.get("data"); // Store the feature data for click event
|
|
@@ -271,7 +270,7 @@ export default {
|
|
|
* 平移缩放
|
|
|
* @param data
|
|
|
*/
|
|
|
- moveAndZoom(data = { point: [120.2, 30.35], zoom: 10 }) {
|
|
|
+ moveAndZoom(data = { point: [120.2, 30.35], zoom: 15 }) {
|
|
|
this.map.getView().animate({
|
|
|
center: fromLonLat(data.point, "EPSG:4326"),
|
|
|
zoom: data.zoom,
|
|
@@ -299,16 +298,19 @@ export default {
|
|
|
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;
|
|
@@ -316,21 +318,25 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.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;
|
|
@@ -338,21 +344,25 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.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;
|