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

<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,
      stationName: this.$route.params.stationName,
    };
  },
  created() {
    // console.log(this.stationId, "充电桩详情 create");
    const stationName = this.stationName;
    const title = "【" + stationName + "】站点详情";
    const route = Object.assign({}, this.$route, { title: `${title}` })
    this.$store.dispatch('tagsView/updateVisitedView', route)
  },
  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>