commit

jsowell-ui/src/views/pile/station/detail.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="app-container">
+    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="订单" name="order">
+        <stationOrderList ref="order" :stationId="stationId"/>
+      </el-tab-pane>
+
+      <el-tab-pane label="设备" name="pile">
+        <pileList ref="pile" :stationId="stationId"/>
+      </el-tab-pane>
+
+      <el-tab-pane label="充电接口" name="connector">
+        <connectorList ref="connector" :stationId="stationId"/>
+      </el-tab-pane>
+
+      <el-tab-pane label="基本资料" name="stationInfo">
+        <div class="over">
+          <div id="map_wrap">
+            <MapContainer ref="map"/>
+          </div>
+          <div class="menu">
+            <site-info ref="stationInfo"/>
+          </div>
+        </div>
+      </el-tab-pane>
+
+      <!--<el-tab-pane label="账单" ></el-tab-pane>-->
+
+      <el-tab-pane label="计费模块" name="billing">
+        <!-- billing 文件到时引入 -->
+        <billing ref="billing" :stationId="stationId"/>
+      </el-tab-pane>
+
+      <el-tab-pane label="客户管理" name="member">
+        角色管理
+      </el-tab-pane>
+
+      <el-tab-pane label="运营管理" name="operation">
+
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import Billing from "./components/billing.vue";
+import SiteInfo from "./components/SiteInfo.vue";
+import connectorList from "./connectorList.vue";
+import pileList from "./pileList.vue";
+import MapContainer from "../../../components/MapContainer/MapContainer.vue";
+import stationOrderList from "@/views/pile/station/stationOrderList";
+export default {
+  components: {
+    SiteInfo,
+    pileList,
+    connectorList,
+    Billing,
+    MapContainer,
+    stationOrderList
+  },
+  data() {
+    return {
+      activeName: 'pile',
+      stationId: this.$route.params.id,
+    };
+  },
+  created() {
+    // console.log(this.stationId, "充电桩详情 create");
+  },
+  mounted() {
+    this.initializeData(this.activeName);
+  },
+  methods: {
+    handleClick(tab, event) {
+      // console.log(tab, event);
+      this.initializeData(tab.name);
+    },
+
+    // 执行对应页面的查询数据方法
+    initializeData(name) {
+      console.log("执行对应页面的查询数据方法", name)
+      if (name === "pile") {
+        this.$refs.pile.getPileList();
+      } else if (name === "connector") {
+        this.$refs.connector.getList();
+      } else if (name === "billing") {
+        this.$refs.billing.getStationBillingTemplateList();
+      } else if (name === "stationInfo") {
+        this.$refs.map.queryStationInfo();
+        this.$refs.stationInfo.queryStationInfo();
+      } else if (name === "order") {
+        this.$refs.order.dataLoading();
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+#container {
+  width: 800px;
+  height: 400px;
+  // margin-left: 50%; transform: translate(-50%,0);
+}
+</style>