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" :stationLat="stationLat" :stationLng="stationLng"/>
          </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-card style="margin-bottom:10px">
          <h2>二维码配置</h2>
          <el-form label-position="right" label-width="200px" style="margin-top:10px">
            <el-row>
              <el-col span="12">
                <el-form-item label="当前配置二维码规则:">
                  <el-input v-model="stationDetail.qrcodePrefix" maxlength="100px" :disabled="true"/>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item>
                  <el-button icon="el-icon-setting" size="big" @click="handleCreate"
                             v-has-permi="['pile:station:edit']">配置参数
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <el-card>
          <h2>互联互通配置</h2>
          <el-button icon="el-icon-edit" size="big" @click="openEdit" v-has-permi="['pile:station:edit']">编辑参数
          </el-button>
          <el-form ref="stationSettingForm" :model="stationSettingInfo" label-position="right" label-width="200px"
                   style="margin-top:10px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="对接平台名称" prop="type">
                  <el-input placeholder="请输入" v-model="stationSettingInfo.type" :disabled="disableFlag"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="对接平台url地址" prop="urlAddress">
                  <el-input placeholder="请输入" v-model="stationSettingInfo.urlAddress" :disabled="disableFlag"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="运营商ID" prop="operatorId">
                  <el-input placeholder="请输入" v-model="stationSettingInfo.operatorId" :disabled="disableFlag"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="运营商密钥" prop="operatorSecret">
                  <el-input placeholder="请输入" v-model="stationSettingInfo.operatorSecret" :disabled="disableFlag"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="消息Data密钥:" prop="dataSecret">
                  <el-input placeholder="请输入" v-model="stationSettingInfo.dataSecret" :disabled="disableFlag"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="签名密钥" prop="signSecret">
                  <el-input placeholder="请输入" v-model="stationSettingInfo.signSecret" :disabled="disableFlag"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="消息Data密钥初始化向量" prop="dataSecretIv">
                  <el-input placeholder="请输入" v-model="stationSettingInfo.dataSecretIv" :disabled="disableFlag"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <el-button size="big" @click="submitConfigForm" v-has-permi="['pile:station:edit']">提交</el-button>
                  <el-button size="big" @click="pushStation" v-has-permi="['pile:station:edit']">推送站点信息</el-button>
                  <!--              <el-button icon="el-icon-edit" size="big" @click="openEdit" v-has-permi = "['pile:station:edit']" >编辑参数</el-button>-->
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="站点白名单" name="whitelist">
        <whitelist ref="whitelist" :stationId="stationId"/>
      </el-tab-pane>
    </el-tabs>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" @submit.native.prevent>
        <el-form-item label="二维码前缀:" prop="prefix" label-width="100px">
          <el-input v-model="form.prefix" placeholder="请输入二维码前缀" style="width: 300px"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </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";
import stationWhiteList from "@/views/pile/station/stationWhiteList";
import {
  getStationInfo,
  updateStationQRCodePrefix,
  getSettingByStationId,
  updateSettingByStationId,
  pushStationInfo
} from "@/api/pile/station";
import Whitelist from "@/views/pile/station/stationWhiteList";

export default {
  components: {
    Whitelist,
    SiteInfo,
    pileList,
    connectorList,
    Billing,
    MapContainer,
    stationOrderList,
    stationWhiteList
  },
  data() {
    return {
      activeName: 'pile',
      form: {
        prefix: '',
      },
      dialogTitle: '',
      qrcodePrefix: '',
      dialogFormVisible: false,
      stationId: this.$route.params.id,
      stationName: this.$route.params.stationName,
      stationDetail: {},
      stationLat: null,
      stationLng: null,
      stationSettingInfo: {},
      disableFlag: true,
    };
  },
  created() {
    // console.log(this.stationId, "充电桩详情 create");
    // const stationId = this.stationId;
    const stationName = this.stationName;
    const title = "【" + stationName + "】站点详情";
    const route = Object.assign({}, this.$route, {title: `${title}`})
    this.$store.dispatch('tagsView/updateVisitedView', route);
    this.queryStationInfo();
    this.getStationSettingInfo();
  },
  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.initMap();
        this.$refs.stationInfo.queryStationInfo();
      } else if (name === "order") {
        this.$refs.order.dataLoading();
      }
    },
    queryStationInfo() {
      console.log("stationId", this.stationId);
      getStationInfo(this.stationId).then((res) => {
        // console.log(res);
        this.stationDetail = res.data;
        this.stationLat = res.data.stationLat
        this.stationLng = res.data.stationLng
        console.log(this.stationLat, this.stationLng, "父组件里面的经纬度")
      });
      console.log("queryStationInfo==", this.stationDetail);
    },
    // 查询站点互联互通配置信息
    getStationSettingInfo() {
      getSettingByStationId(this.stationId).then((res) => {
        console.log("stationId:", this.stationId)
        console.log("getSettingByStationId==", res)
        this.stationSettingInfo = res.data;
      })
    },

    // 开放编辑按钮
    openEdit() {
      this.disableFlag = false;
    },

    // 提交配置设置
    submitConfigForm() {
      const param = {
        stationId: this.stationId,
        urlAddress: this.stationSettingInfo.urlAddress,
        operatorId: this.stationSettingInfo.operatorId,
        operatorSecret: this.stationSettingInfo.operatorSecret,
        dataSecret: this.stationSettingInfo.dataSecret,
        signSecret: this.stationSettingInfo.signSecret,
        dataSecretIv: this.stationSettingInfo.dataSecretIv,
      }
      console.log("param:", param);
      this.$refs.stationSettingForm.validate((valid) => {
        if (valid) {
          updateSettingByStationId(param).then((response) => {
            this.$modal.msgSuccess('修改成功')
            this.disableFlag = true;
          })
        } else {
          return false
        }
      })
    },
    // 推送站点
    pushStation() {
      const param = {
        stationId: this.stationId,
      }
      pushStationInfo(param).then((response) => {
        this.$modal.msgSuccess('推送成功')
        this.disableFlag = true;
      })
    },

    // 配置参数按钮
    handleCreate() {
      this.dialogTitle = '配置参数';
      this.form = {
        prefix: '',
      };
      this.dialogFormVisible = true;
    },
    // 配置参数提交按钮
    submitForm(form) {
      const param = {
        stationId: this.stationId,
        qrcodePrefix: this.form.prefix
      }
      console.log("form:", this.form);
      console.log("param:", param);
      this.$refs.form.validate((valid) => {
        if (valid) {
          updateStationQRCodePrefix(param).then((response) => {
            this.$modal.msgSuccess('修改成功')
            this.dialogFormVisible = false
          })
        } else {
          return false
        }
      })
    },
    // 取消按钮
    cancel() {
      this.dialogFormVisible = false
    }
  }
};
</script>

<style scoped lang="scss">
#container {
  width: 800px;
  height: 400px;
  // margin-left: 50%; transform: translate(-50%,0);
}
</style>