总貌图

src/components/arcgis/arcgis.vue

@@ -25,7 +25,7 @@
     import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol";
     import "@arcgis/core/assets/esri/themes/light/main.css";
 
-    const mapUrl = "http://61.161.152.110:12345/arcgis/rest/services/NX_MAP_15/MapServer"; // ArcMap地址
+    const mapUrl = "http://10.155.32.4:9080/arcgis/rest/services/nxmap/MapServer"; // ArcMap地址
     // const mapUrl = "http://172.16.6.30:12345/arcgis/rest/services/NX_MAP_15/MapServer"; // ArcMap地址
     let basemap = null;
     let map = null;

src/views/WindSite/components/boosterstation/mch/previewPicture.vue

@@ -60,7 +60,7 @@
 				isChange: true,
 				// 图片显示默认大小
 				width: "1400px",
-				height: "900px",
+				height: "850px",
 				// 可缩小倍数,为空则可无限缩小
 				minification: 3,
 				// 可放大倍数 为空则可无限放大
@@ -610,7 +610,7 @@
 <style lang="less" scoped>
 	.pop-up-main {
 		width: 100%;
-		height: calc(100vh - 12vh);
+		height: calc(100vh - 10vh);
 		overflow-y:hidden ;
 
 		.paln-box {

src/views/WindSite/pages/BoosterStation.vue

@@ -30,6 +30,7 @@ export default {
   // 数据
   data() {
     return {
+      wpId: undefined,
       selectIndex: 0,
       rowIndex: 0,
       btnGroups: [

src/views/WindSite/pages/GeneralAppearance.vue

@@ -1,217 +1,243 @@
 <template>
-    <div class="general-appearance">
-        <div class="btn-group-tabs">
-            <BtnGroup2
-                :btnGroups="btnGroups"
-                :rowIndex="0"
-                :index="1"
-                @select="select"
-            ></BtnGroup2>
+  <div class="general-appearance">
+    <div class="btn-group-tabs">
+      <BtnGroup2
+        :btnGroups="btnGroups"
+        :rowIndex="rowIndex"
+        :index="selectIndex"
+        @select="select"
+      ></BtnGroup2>
+    </div>
+    <div class="panel-title">
+      <div class="panel-title-name">
+        <!-- <span class="svg-icon svg-icon-green svg-icon-sm">
+          <SvgIcon svgid="svg-wind-site"></SvgIcon>
+        </span>
+        <span class="green">某某某风电场总貌</span> -->
+        <div class="sub-title-item">
+          <img src="../../../assets/map/fan/black.png" />
+          <span class="sub-title gray">接入台数</span>
+          <span class="sub-count font-num white">{{wpnumMap.jrts}}</span>
+        </div>
+        <div class="sub-title-item">
+          <img src="../../../assets/map/fan/green.png" />
+          <span class="sub-title green">待机台数</span>
+          <span class="sub-count font-num green">{{wpnumMap.djts}}</span>
+        </div>
+        <div class="sub-title-item">
+          <img src="../../../assets/map/fan/blue.png" />
+          <span class="sub-title blue">并网台数</span>
+          <span class="sub-count font-num blue">{{wpnumMap.yxts}}</span>
+        </div>
+        <div class="sub-title-item">
+          <img src="../../../assets/map/fan/purple.png" />
+          <span class="sub-title pink">限电台数</span>
+          <span class="sub-count font-num pink">{{wpnumMap.xdts}}</span>
+        </div>
+        <div class="sub-title-item">
+          <img src="../../../assets/map/fan/red.png" />
+          <span class="sub-title red">故障台数</span>
+          <span class="sub-count font-num red">{{wpnumMap.gzts}}</span>
+        </div>
+        <div class="sub-title-item">
+          <img src="../../../assets/map/fan/orange.png" />
+          <span class="sub-title orange">检修台数</span>
+          <span class="sub-count font-num orange">{{wpnumMap.whts}}</span>
         </div>
-        <div class="panel-title">
-            <div class="panel-title-name">
-                <span class="svg-icon svg-icon-green svg-icon-sm">
-                    <SvgIcon svgid="svg-wind-site"></SvgIcon>
-                </span>
-                <span class="green">某某某风电场总貌</span>
-                <div class="sub-title-item">
-                    <img src="../../../assets/map/fan/black.png" />
-                    <span class="sub-title gray">接入台数</span>
-                    <span class="sub-count font-num white">256</span>
-                </div>
-                <div class="sub-title-item">
-                    <img src="../../../assets/map/fan/green.png" />
-                    <span class="sub-title green">待机台数</span>
-                    <span class="sub-count font-num green">56</span>
-                </div>
-                <div class="sub-title-item">
-                    <img src="../../../assets/map/fan/blue.png" />
-                    <span class="sub-title blue">并网台数</span>
-                    <span class="sub-count font-num blue">256</span>
-                </div>
-                <div class="sub-title-item">
-                    <img src="../../../assets/map/fan/purple.png" />
-                    <span class="sub-title pink">限电台数</span>
-                    <span class="sub-count font-num pink">3</span>
-                </div>
-                <div class="sub-title-item">
-                    <img src="../../../assets/map/fan/red.png" />
-                    <span class="sub-title red">故障台数</span>
-                    <span class="sub-count font-num red">5</span>
-                </div>
-                <div class="sub-title-item">
-                    <img src="../../../assets/map/fan/orange.png" />
-                    <span class="sub-title orange">检修台数</span>
-                    <span class="sub-count font-num orange">20</span>
-                </div>
-                <div class="sub-title-item">
-                    <img src="../../../assets/map/fan/white.png" />
-                    <span class="sub-title white">受累台数</span>
-                    <span class="sub-count font-num white">256</span>
-                </div>
-                <div class="sub-title-item">
-                    <img src="../../../assets/map/fan/black.png" />
-                    <span class="sub-title gray">离线台数</span>
-                    <span class="sub-count font-num gray">2</span>
-                </div>
-            </div>
+        <div class="sub-title-item">
+          <img src="../../../assets/map/fan/black.png" />
+          <span class="sub-title gray">离线台数</span>
+          <span class="sub-count font-num gray">{{wpnumMap.lxts}}</span>
         </div>
-        <gax6 class="general-appearance-body"></gax6>
+      </div>
     </div>
+    <gax6 class="general-appearance-body"></gax6>
+  </div>
 </template>
 
 <script>
 import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
 import gax6 from "../components/gax6.vue";
-import SvgIcon from "@com/coms/icon/svg-icon.vue";
 export default {
-    // 名称
-    name: "GeneralAppearance",
-    // 使用组件
-    components: {
-        gax6,
-        BtnGroup2,
-        SvgIcon,
+  // 名称
+  name: "GeneralAppearance",
+  // 使用组件
+  components: {
+    gax6,
+    BtnGroup2,
+  },
+  // 数据
+  data() {
+    return {
+      timmer: undefined,
+      wpId: undefined, //场站
+      wpnumMap: {}, //风机监视数量
+      selectIndex: 0,
+      rowIndex: 0,
+      btnGroups: [
+        {
+          icon: "svg-wind-site",
+          btns: [],
+        },
+        {
+          icon: "svg-photovoltaic",
+          btns: [],
+        },
+      ],
+    };
+  },
+  created() {
+    let that = this;
+    that.wpId = that.$route.params.wpId;
+    that.$nextTick(() => {
+      that.getWp();
+      that.requestData();
+      that.timmer = setInterval(() => {
+        that.requestData();
+      }, that.$store.state.websocketTimeSec);
+    });
+  },
+  // 函数
+  methods: {
+    select(res) {
+      this.$router.replace({
+        path: `/monitor/windsite/generalappearance/${res.code}`,
+      });
     },
-    // 数据
-    data() {
-        return {
-            btnGroups: [
-                {
-                    icon: "svg-wind-site",
-                    btns: [
-                        {
-                            text: "某某风场",
-                            code: "mmfdc1",
-                        },
-                        {
-                            text: "某某风场",
-                            code: "mhsfc",
-                        },
-                        {
-                            text: "某某风场",
-                            code: "mmfdc2",
-                        },
-                        {
-                            text: "某某风场",
-                            code: "mmfdc3",
-                        },
-                        {
-                            text: "某某风场",
-                            code: "mmfdc4",
-                        },
-                    ],
-                },
-                {
-                    icon: "svg-photovoltaic",
-                    btns: [
-                        {
-                            text: "某某风场",
-                            code: "mmgf1",
-                        },
-                        {
-                            text: "某某风场",
-                            code: "mmgf2",
-                        },
-                        {
-                            text: "某某风场",
-                            code: "mmgf3",
-                        },
-                        {
-                            text: "某某风场",
-                            code: "mmgf4",
-                        },
-                    ],
-                },
-            ],
-        };
-    },
-    // 函数
-    methods: {
-        select: function (item) {
-            console.log(item)
-        }
-    },
-    // 生命周期钩子
-    beforeCreate() {
-        // 创建前
-    },
-    created() {
-        // 创建后
-    },
-    beforeMount() {
-        // 渲染前
+    getWp() {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windfarmAllAjax",
+        success(res) {
+          let btnGroup = [
+            {
+              icon: "svg-wind-site",
+              btns: [],
+            },
+            {
+              icon: "svg-photovoltaic",
+              btns: [],
+            },
+          ];
+
+          res.data.forEach((ele, index) => {
+            if (ele.id.indexOf("FDC") !== -1) {
+              btnGroup[0].btns.push({
+                text: ele.name,
+                code: ele.id,
+              });
+            } else {
+              btnGroup[1].btns.push({
+                text: ele.name,
+                code: ele.id,
+              });
+            }
+          });
+
+          that.btnGroups = btnGroup;
+          that.renderBtnActiveIndex();
+        },
+      });
     },
-    mounted() {
-        // 渲染后
+    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;
+        },
+      });
     },
-    beforeUpdate() {
-        // 数据更新前
+    renderBtnActiveIndex() {
+      this.btnGroups.forEach((pEle, pIndex) => {
+        pEle.btns.forEach((cEle, cIndex) => {
+          if (cEle.code === this.wpId) {
+            this.rowIndex = pIndex;
+            this.selectIndex = cIndex;
+          }
+        });
+      });
     },
-    updated() {
-        // 数据更新后
+  },
+  unmounted() {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  },
+  watch: {
+    $route(res) {
+      this.wpId = res.params.wpId;
+      if (res.params.wpId) {
+        this.requestData();
+        this.renderBtnActiveIndex();
+      }
     },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .general-appearance {
+  width: 100%;
+  height: calc(100vh - 90px);
+  display: flex;
+  flex-direction: column;
+
+  .btn-group-tabs {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .general-appearance-body {
+    flex-grow: 1;
+  }
+
+  .panel-title {
     width: 100%;
-    height: calc(100vh - 90px);
+    background-color: fade(@darkgray, 40%);
+    margin-top: 1.481vh;
+    padding: 6px;
     display: flex;
-    flex-direction: column;
+    align-items: center;
 
-    .btn-group-tabs {
-        display: flex;
-        flex-direction: row;
-    }
+    .panel-title-name {
+      color: @green;
+      display: flex;
+      align-items: center;
+      line-height: 0;
+      font-size: 0;
 
-    .general-appearance-body {
-        flex-grow: 1;
+      i,
+      span {
+        margin: 0 0 0 1.481vh;
+        line-height: 0;
+        font-size: 13px;
+      }
     }
 
-    .panel-title {
-        width: 100%;
-        background-color: fade(@darkgray, 40%);
-        margin-top: 1.481vh;
-        padding: 6px;
-        display: flex;
-        align-items: center;
+    .sub-title-item {
+      display: flex;
+      align-items: center;
+      margin-left: 16px;
 
-        .panel-title-name {
-            color: @green;
-            display: flex;
-            align-items: center;
-            line-height: 0;
-            font-size: 0;
+      .sub-title {
+        font-size: 13px;
+        margin-left: 6px;
+      }
 
-            i,
-            span {
-                margin: 0 0 0 1.481vh;
-                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;
+      }
 
-            .sub-count {
-                font-size: 13px;
-                font-weight: 500;
-            }
-            
-            img {
-                height: 31px;
-            }
-        }
+      img {
+        height: 31px;
+      }
     }
+  }
 }
 </style>