|
@@ -57,7 +57,53 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="panel-body">
|
|
|
- <arcgis class="arcgis-layer" @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap"></arcgis>
|
|
|
+ <arcgis class="arcgis-layer" @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap">
|
|
|
+ <template v-for="(fan,index) of fans" :key="index" v-slot:[fan.attributes.code]>
|
|
|
+ <svg v-if="fan.attributes.code != '升压站'" @click="clickFan(fan.attributes.code)" class="can-click esri-component" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 240"
|
|
|
+ enable-background="new 0 0 200 240" xml:space="preserve" width="66" height="66">
|
|
|
+ <!-- 底座 -->
|
|
|
+ <g>
|
|
|
+ <path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][2]"
|
|
|
+ d="M100.681,156.137c24.579,0,44.505,8.548,44.505,19.094
|
|
|
+ c0,10.545-19.926,19.093-44.505,19.093c-24.577,0-42.878-8.548-42.878-19.093C57.803,164.685,76.104,156.137,100.681,156.137z" />
|
|
|
+ </g>
|
|
|
+ <!-- 后面的脑袋 -->
|
|
|
+ <g>
|
|
|
+ <path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][0]" d="M92.875,76.372l27.897-18.417c0,0,4.108-0.096,7.891,2.681
|
|
|
+ c4.305,3.156,1.86,9.235,1.86,9.235l-24.374,23.292L92.875,76.372z" />
|
|
|
+ </g>
|
|
|
+ <!-- 柱 -->
|
|
|
+ <g>
|
|
|
+ <path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][0]"
|
|
|
+ d="M92.152,175.229h18.689l-4.876-94.254H97.84L92.152,175.229z" />
|
|
|
+ </g>
|
|
|
+ <!-- 风扇 -->
|
|
|
+ <g>
|
|
|
+ <path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][1]"
|
|
|
+ d="M109.007,85.525l-16.061,0.268l7.396-83.773L109.007,85.525z" />
|
|
|
+ <path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][1]" d="M95.219,75.597l8.265,13.771l-76.25,35.483L95.219,75.597z
|
|
|
+ M99.108,89.634l7.795-14.04l68.854,48.291L99.108,89.634z" />
|
|
|
+ <animateTransform v-if="fan.attributes.rotate" attributeName="transform" attributeType="XML" type="rotate" from="0 100 82"
|
|
|
+ to="359 100 82" :dur="fan.attributes.dur+'s'" repeatCount="indefinite" />
|
|
|
+ </g>
|
|
|
+ <!-- 前面的尖 -->
|
|
|
+ <g>
|
|
|
+ <path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][2]" d="M92.863,72.903c0,0,13.912-0.343,17.098,4.352
|
|
|
+ c2.984,4.397-2.58,15.473-2.58,15.473l-24.376,0.436L92.863,72.903z" />
|
|
|
+ </g>
|
|
|
+ <!-- 文字 -->
|
|
|
+ <g>
|
|
|
+ <text x="100" y="240" fill="#ffffff" font-size="40" text-anchor="middle" alignment-baseline="baseline">{{fan.attributes.code}}</text>
|
|
|
+ </g>
|
|
|
+ </svg>
|
|
|
+ <div v-if="fan.attributes.code == '升压站'">
|
|
|
+ <div class="syz-img">
|
|
|
+ <img :src="syzImg">
|
|
|
+ </div>
|
|
|
+ <div class="white font-sm mr-t-8" style="text-align: center;">{{fan.attributes.code}}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </arcgis>
|
|
|
<div class="map-popup-panel" v-show="showPopup">
|
|
|
<div class="map-popup-panel-header">
|
|
|
<div class="map-popup-panel-title green">
|
|
@@ -227,14 +273,27 @@ export default {
|
|
|
},
|
|
|
showPopup: true,
|
|
|
mapToolIndex: 0,
|
|
|
+ fans: [],
|
|
|
+ colors: {
|
|
|
+ dj: ["#05bb4c", "#4ad476", "#9fedb2"],
|
|
|
+ yx: ["#4b55ae", "#959dc7", "#d3d6e0"],
|
|
|
+ xd: ["#c531c7", "#e080dc", "#fadef7"],
|
|
|
+ xdStop: ["#c531c7", "#e080dc", "#fadef7"],
|
|
|
+ gz: ["#BA3237", "#d4807d", "#eddad8"],
|
|
|
+ jx: ["#e17e23", "#fabf78", "#ffebcc"],
|
|
|
+ lx: ["#606769", "#757575", "#AFAFAF"],
|
|
|
+ sl: ["#ffffff", "#D8D8D8", "#D8D8D8"],
|
|
|
+ },
|
|
|
+ syzImg: require("@assets/png/booster-station.png"),
|
|
|
};
|
|
|
},
|
|
|
// 函数
|
|
|
methods: {
|
|
|
when: function () {
|
|
|
let jsonObj = dataService.get("arcgis-nx-fc1");
|
|
|
- let data = [{id: "MG13", state: "yx"},{id: "MG12", state: "xd"},{id: "MG34", state: "gz"},{id: "MG39", state: "jc"},
|
|
|
+ let data = [{id: "MG13", state: "yx"},{id: "MG12", state: "xd"},{id: "MG20", state: "xdStop"},{id: "MG34", state: "gz"},{id: "MG39", state: "jx"},
|
|
|
{id: "MG02", state: "lx"}, {id: "MG19", state: "sl"}]
|
|
|
+ this.fans = jsonObj;
|
|
|
jsonObj.forEach(item => {
|
|
|
let obj = data.find(t => t.id == item.attributes.code);
|
|
|
if (obj) {
|
|
@@ -242,6 +301,28 @@ export default {
|
|
|
} else {
|
|
|
item.attributes.state = "dj";
|
|
|
}
|
|
|
+ switch (item.attributes.state) {
|
|
|
+ case "yx":
|
|
|
+ item.attributes.rotate = true; // 转
|
|
|
+ item.attributes.dur = 4; // 转一圈时间
|
|
|
+ break;
|
|
|
+
|
|
|
+ case "xd":
|
|
|
+ item.attributes.rotate = true;
|
|
|
+ item.attributes.dur = 8;
|
|
|
+ break;
|
|
|
+
|
|
|
+ case "xdStop":
|
|
|
+ item.attributes.rotate = false; // 不转
|
|
|
+ item.attributes.dur = 8;
|
|
|
+ break;
|
|
|
+
|
|
|
+ default:
|
|
|
+ item.attributes.rotate = false;
|
|
|
+ item.attributes.dur = 8;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ this.$refs.arcgis.addHtmlPoint([item.geometry.x, item.geometry.y], item.attributes.code, 33, 50, false);
|
|
|
});
|
|
|
let lineJsonObj = dataService.get("arcgis-nx-fc1-line");
|
|
|
this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
|
|
@@ -250,6 +331,10 @@ export default {
|
|
|
console.log(info)
|
|
|
this.showPopup = true;
|
|
|
},
|
|
|
+ clickFan: function (code) {
|
|
|
+ console.log(code);
|
|
|
+ this.showPopup = true;
|
|
|
+ },
|
|
|
popupBack: function () {
|
|
|
this.showPopup = false;
|
|
|
},
|
|
@@ -293,6 +378,20 @@ export default {
|
|
|
flex-direction: row;
|
|
|
}
|
|
|
|
|
|
+ .can-click {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .syz-img {
|
|
|
+ width: 65px;
|
|
|
+ height: 47px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.panel-title {
|
|
|
width: 100%;
|
|
|
background-color: fade(@darkgray, 40%);
|