|
|
@@ -0,0 +1,502 @@
|
|
|
+<template>
|
|
|
+ <div style="width: 100%; height: 100%">
|
|
|
+ <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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import arcgis from "./arcgis.vue";
|
|
|
+import dataService from "@/helper/data.js";
|
|
|
+
|
|
|
+export default {
|
|
|
+ // 名称
|
|
|
+ name: "Map",
|
|
|
+ // 使用组件
|
|
|
+ components: {
|
|
|
+ arcgis,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ wpId: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 数据
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ wpnumMap: {}, //风机监视数量
|
|
|
+ wpInfoMap: {}, //风机详情
|
|
|
+ fjmap: [], // 风机名
|
|
|
+ sourceId: "",
|
|
|
+ arcgisData: {
|
|
|
+ mode: "2D", // 模式 2D 3D
|
|
|
+ title: "宁夏地图", // 标题
|
|
|
+ center: [107.0391975, 37.31469028], // 初始中心点 106.230909, 38.487193
|
|
|
+ height: 654, // 3D地图初始相机高度
|
|
|
+ tilt: 65, // 俯视角
|
|
|
+ scale: 30000,
|
|
|
+ rotation: -45,
|
|
|
+ ox: -600,
|
|
|
+ oy: -50,
|
|
|
+ },
|
|
|
+ showPopup: false,
|
|
|
+ mapToolIndex: 0,
|
|
|
+ fans: [],
|
|
|
+ colors: {
|
|
|
+ 0: ["#05bb4c", "#4ad476", "#9fedb2"],
|
|
|
+ 1: ["#4b55ae", "#959dc7", "#d3d6e0"],
|
|
|
+ 2: ["#BA3237", "#d4807d", "#eddad8"],
|
|
|
+ 3: ["#606769", "#757575", "#AFAFAF"],
|
|
|
+ 4: ["#e17e23", "#fabf78", "#ffebcc"],
|
|
|
+ 5: ["#c531c7", "#e080dc", "#fadef7"],
|
|
|
+ 6: ["#c531c7", "#e080dc", "#fadef7"],
|
|
|
+ },
|
|
|
+ syzImg: require("@assets/png/booster-station.png"),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ let that = this;
|
|
|
+ that.sourceId = this.wpId;
|
|
|
+ that.$nextTick(() => {
|
|
|
+ that.requestData();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 函数
|
|
|
+ methods: {
|
|
|
+ select(res) {
|
|
|
+ this.$router.replace({
|
|
|
+ path: `/monitor/windsite/map/${res.code}`,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 风机状态监视
|
|
|
+ requestData() {
|
|
|
+ let that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "POST",
|
|
|
+ subUrl: "monitor/findGeneralAppearance",
|
|
|
+ data: {
|
|
|
+ wpId: that.wpId,
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ if (res.code == 200) {
|
|
|
+ that.wpnumMap = res.data.fczbmap.jczbmap;
|
|
|
+ that.wpInfoMap = res.data.wxssmap;
|
|
|
+ that.fjmap = res.data.fjmap[0];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ when: function () {
|
|
|
+ let jsonObj = dataService.get("arcgis-nss");
|
|
|
+ console.log(jsonObj)
|
|
|
+ this.fans = jsonObj;
|
|
|
+ jsonObj.forEach((item) => {
|
|
|
+ let obj = this.fjmap.find((t) => {
|
|
|
+ let wtid = t.wtId.replace("01_", "");
|
|
|
+ if (wtid == item.attributes.code) return t;
|
|
|
+ });
|
|
|
+ if (obj) {
|
|
|
+ item.attributes.state = String(obj.fjzt);
|
|
|
+ } else {
|
|
|
+ item.attributes.state = "4";
|
|
|
+ }
|
|
|
+ switch (item.attributes.state) {
|
|
|
+ case "0": //待机
|
|
|
+ item.attributes.rotate = false; // 转
|
|
|
+ item.attributes.dur = 8; // 转一圈时间
|
|
|
+ break;
|
|
|
+ case "1": //运行
|
|
|
+ item.attributes.rotate = true; // 转
|
|
|
+ item.attributes.dur = 2; // 转一圈时间
|
|
|
+ break;
|
|
|
+ case "2": //故障
|
|
|
+ item.attributes.rotate = false; // 不转
|
|
|
+ item.attributes.dur = 8;
|
|
|
+ break;
|
|
|
+ case "3": //中断
|
|
|
+ item.attributes.rotate = false; // 不转
|
|
|
+ item.attributes.dur = 8;
|
|
|
+ break;
|
|
|
+ case "4": //维护
|
|
|
+ item.attributes.rotate = false; // 不转
|
|
|
+ item.attributes.dur = 8;
|
|
|
+ break;
|
|
|
+ case "5": //限电
|
|
|
+ item.attributes.rotate = true; // 转
|
|
|
+ item.attributes.dur = 6;
|
|
|
+ break;
|
|
|
+ case "6": //停机
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ clickMap: function (info) {
|
|
|
+ console.log(info);
|
|
|
+ },
|
|
|
+ clickFan: function (code) {
|
|
|
+ let wtId = code.replace("G", "G01_");
|
|
|
+ this.$router.push(`/monitor/windsite/info/${this.wpId}/${wtId}`);
|
|
|
+ },
|
|
|
+ popupBack: function () {
|
|
|
+ this.showPopup = false;
|
|
|
+ },
|
|
|
+ clickMapTool: function (index) {
|
|
|
+ // this.mapToolIndex = index;
|
|
|
+ this.showPopup = !this.showPopup;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ wpId(res) {
|
|
|
+ this.sourceId = res;
|
|
|
+ if (res) {
|
|
|
+ this.requestData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+@titleHeight: 40px;
|
|
|
+
|
|
|
+.map-1 {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 90px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .btn-group-tabs {
|
|
|
+ display: flex;
|
|
|
+ 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%);
|
|
|
+ margin-top: 16px;
|
|
|
+ padding: 6px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .panel-title-name {
|
|
|
+ color: @green;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 0;
|
|
|
+ font-size: 0;
|
|
|
+
|
|
|
+ i,
|
|
|
+ span {
|
|
|
+ margin: 0 0 0 16px;
|
|
|
+ line-height: 0;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-title-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 16px;
|
|
|
+
|
|
|
+ .sub-title {
|
|
|
+ font-size: 13px;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-count {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ height: 31px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .panel-body {
|
|
|
+ flex-grow: 1;
|
|
|
+ background-color: fade(@darkgray, 20%);
|
|
|
+ padding: 8px;
|
|
|
+ overflow: auto;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .arcgis-layer {
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .map-popup-panel {
|
|
|
+ width: 760px;
|
|
|
+ position: absolute;
|
|
|
+ left: 71px;
|
|
|
+ top: 22px;
|
|
|
+ z-index: 2;
|
|
|
+
|
|
|
+ .map-popup-panel-header {
|
|
|
+ width: 100%;
|
|
|
+ background: fade(#152221, 90%);
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .map-popup-panel-title {
|
|
|
+ padding: 17px 24px;
|
|
|
+ font-size: @fontsize-s;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ width: calc(50% - 6px);
|
|
|
+ bottom: 0;
|
|
|
+ border-bottom: 2px solid @green;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ position: absolute;
|
|
|
+ width: 11.3px;
|
|
|
+ height: 11.3px;
|
|
|
+ border-left: 2px solid @green;
|
|
|
+ border-top: 2px solid @green;
|
|
|
+ left: calc(50% - 5.65px);
|
|
|
+ bottom: -3px;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .map-popup-panel-date {
|
|
|
+ flex-grow: 1;
|
|
|
+ padding: 17px 24px;
|
|
|
+ font-size: @fontsize-s;
|
|
|
+ text-align: right;
|
|
|
+ border-bottom: 2px solid @green;
|
|
|
+ }
|
|
|
+
|
|
|
+ .map-popup-panel-back {
|
|
|
+ margin-left: auto;
|
|
|
+ width: 54px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ height: 50%;
|
|
|
+ border-left: 1px solid @gray;
|
|
|
+ top: 25%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .map-popup-panel-body {
|
|
|
+ background: fade(#152221, 75%);
|
|
|
+ border: 1px solid fade(@darkgray, 40);
|
|
|
+ border-top: 0px;
|
|
|
+
|
|
|
+ .table-form {
|
|
|
+ .text,
|
|
|
+ .unit {
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ min-width: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value,
|
|
|
+ .unit {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .map-tool {
|
|
|
+ position: absolute;
|
|
|
+ right: 22px;
|
|
|
+ top: 22px;
|
|
|
+ z-index: 2;
|
|
|
+ background: #152221af;
|
|
|
+ padding: 18px 14px;
|
|
|
+
|
|
|
+ .m-btn {
|
|
|
+ width: 124px;
|
|
|
+ height: 44px;
|
|
|
+ background: #152221bf;
|
|
|
+ border: 1px solid #152221bf;
|
|
|
+ color: #ffffff;
|
|
|
+ transition: all 0.3s;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &.active {
|
|
|
+ background: #05bb4c33;
|
|
|
+ border: 1px solid #05bb4c;
|
|
|
+ color: #05bb4c;
|
|
|
+ }
|
|
|
+
|
|
|
+ + .m-btn {
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
mw_666