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

<template>
  <div class="app-container Input">
    <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="计费模块" name="billing">
        <!-- billing 文件到时引入 -->
        <billing ref="billing" :stationId="stationId" />
      </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 style="margin-bottom: 10px">
          <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-checkbox-group v-model="checkList">
                    <el-checkbox
                      v-for="dict in dict.type.third_party_type"
                      :label="dict.label"
                      :key="dict.value"
                      :value="dict.value"
                      :disabled="firstList.includes(dict.label)"
                      @change="getPlatform(dict.raw.dictValue)"
                    />
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <!--<el-button size="big" @click="pushStation" v-has-permi="['pile:station:edit']">-->
                  <!--  推送站点信息-->
                  <!--</el-button>-->
                  <el-button
                    size="big"
                    @click="saveStationThirdParty"
                    v-has-permi="['pile:station:edit']"
                  >
                    保存对接平台关系
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <el-card style="margin-bottom: 10px">
          <h2>绑定停车平台(配置完成后，订单完成将自动下发优惠券)</h2>
          <el-button
            icon="el-icon-edit"
            size="big"
            @click="parkingOpenEdit"
            v-has-permi="['pile:station:edit']"
            >编辑参数
          </el-button>
          <el-form
            ref="parkingForm"
            :model="parkingInfo"
            label-position="right"
            label-width="200px"
            style="margin-top: 10px"
          >
            <el-row>
              <el-col :span="5">
                <el-form-item label="停车平台名称:" prop="type">
                  <el-select
                    v-model="parkingInfo.parkingName"
                    placeholder="请选择停车平台名称"
                    clearable
                    filterable
                    style="width: 220px"
                    :disabled="parkingDisableFlag"
                    @change="getParkingInfo($event)"
                  >
                    <el-option
                      v-for="item in parkingInfoList"
                      :key="item.id"
                      :label="item.parkingName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <el-button
                    size="big"
                    @click="saveParkingSetting(parkingInfo.id)"
                    v-has-permi="['pile:station:edit']"
                  >
                    保存
                  </el-button>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="停车场库secretKey:" prop="secretKey">
                  <el-input
                    placeholder="请输入"
                    v-model="parkingInfo.secretKey"
                    :disabled="true"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="停车场库appId:" prop="appId">
                  <el-input
                    placeholder="请输入"
                    v-model="parkingInfo.appId"
                    :disabled="true"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="票券id:" prop="couponId">
                  <el-input
                    placeholder="请输入"
                    v-model="parkingInfo.couponId"
                    :disabled="false"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="停车场库商户id:" prop="parkingMerchantId">
                  <el-input
                    placeholder="请输入"
                    v-model="parkingInfo.parkingMerchantId"
                    :disabled="false"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <el-card style="margin-top: 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="查询地锁列表二维码:" />
                <div>
                  <vue-qr
                    ref="Qrcode"
                    :text="queryGroundLockQrCode"
                    qid="lockListQrCode"
                    :width="150"
                    style="margin-left: 190px; margin-top: -10px"
                  />
                </div>
              </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-tab-pane label="订单日报" name="orderReport">
        <order-report ref="orderReport"></order-report>
      </el-tab-pane>

      <el-tab-pane label="分润配置" name="Config">
        <Config ref="Config" :stationId="stationId" :merchantId="merchantId"></Config>
      </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 VueQr from "vue-qr";
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,
  updateSettingByStationId,
  pushStationInfo,
  getParkingInfoList,
  bindParkingPlatform,
  getRelationByStationId,
  updateThirdPartyStationRelation,
} from "@/api/pile/station";
import Whitelist from "@/views/pile/station/stationWhiteList";
import OrderReport from "./orderReport.vue";
import Config from "@/views/pile/station/splitConfig.vue";

export default {
  dicts: ["third_party_type"],
  components: {
    VueQr,
    Whitelist,
    SiteInfo,
    pileList,
    connectorList,
    Billing,
    MapContainer,
    stationOrderList,
    stationWhiteList,
    OrderReport,
    Config,
  },
  data() {
    return {
      activeName: "pile",
      form: {
        prefix: "",
      },
      parkingInfo: {},
      parkingInfoList: [],
      queryGroundLockQrCode: "",
      dialogTitle: "",
      qrcodePrefix: "",
      dialogFormVisible: false,
      checkList: [],
      stationId: this.$route.params.id,
      stationName: this.$route.params.stationName,
      stationDetail: {},
      stationLat: null,
      stationLng: null,
      stationSettingInfo: {},
      disableFlag: true,
      parkingDisableFlag: true,
      exchange: [],
      firstList: [], //第一次复选框的默认值
      merchantId: "", //运营商id
    };
  },
  created() {
    // console.log(this.stationId, "充电桩详情 create");
    // const stationId = this.stationId;
    this.queryGroundLockQrCode =
      "https://api.jsowellcloud.com/app-xcx-h5/getGroundLockInfo/" + this.stationId;
    this.updateTitle();
    this.getRelationByStationId();
    this.getParkingList();
    this.queryStationInfo();
  },
  mounted() {
    this.initializeData(this.activeName);
  },
  methods: {
    // 更新页面title显示
    updateTitle() {
      const stationName = this.stationName;
      const title = "【" + stationName + "】站点详情";
      const route = Object.assign({}, this.$route, { title: `${title}` });
      this.$store.dispatch("tagsView/updateVisitedView", route);
    },
    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();
      } else if (name === "orderReport") {
        this.$refs.orderReport.getList();
      } else if (name === "Config") {
        this.queryStationInfo();
        this.$refs.Config.getList();
      }
    },
    async queryStationInfo() {
      console.log("stationId", this.stationId);
      await getStationInfo(this.stationId).then((res) => {
        this.stationDetail = res.data;
        this.stationLat = res.data.stationLat;
        this.stationLng = res.data.stationLng;
        this.merchantId = res.data.merchantId;
        console.log(this.merchantId, "父组件里面的运营商id");
        console.log("res.data", res.data);
        if (res.data.parkingId != null) {
          this.getParkingInfo(parseInt(res.data.parkingId));
        }
      });
      console.log("queryStationInfo==", this.stationDetail);
    },
    // 查询站点互联互通配置信息
    getRelationByStationId() {
      getRelationByStationId(this.stationId).then((res) => {
        console.log("stationId:", this.stationId);
        console.log("res", res);
        console.log("res.rows", res.rows);
        res.rows.forEach((item, index) => {
          this.checkList.push(item.thirdPartyType);
          this.firstList.push(item.thirdPartyType);
        });
        console.log("this.checkList", this.checkList, this.firstList);
        // if (res.data === undefined) {
        //   this.stationSettingInfo.thirdPartyType = "0";
        // } else {
        //   this.stationSettingInfo = res.data;
        // }
      });
    },

    // 根据对接平台类型查询配置信息
    // getSettingParams() {
    //   const param = {
    //     // stationId: this.stationId,
    //     type: this.stationSettingInfo.type,
    //   };
    //   console.log("param", param);
    //   getSettingInfo(param).then((res) => {
    //     console.log("getSettingInfo", res);
    //     if (res.data === undefined) {
    //       this.stationSettingInfo = [];
    //     } else {
    //       this.stationSettingInfo = res.data;
    //     }
    //   });
    // },

    // 获取停车平台列表
    getParkingList() {
      getParkingInfoList().then((response) => {
        console.info("response", response);
        this.parkingInfoList = response.obj;
      });
    },
    // 通过id获取停车平台信息
    getParkingInfo(parkingId) {
      console.log("parkingId", parkingId);
      this.parkingInfoList.forEach((item) => {
        if (parkingId === item.id) {
          console.log("item", item);
          this.parkingInfo = item;
          console.log("this.parkingInfo", this.parkingInfo);
        }
      });
    },

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

    // 提交配置设置
    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() {
      let exchange = "";
      const param = {
        stationId: this.stationId,
        thirdPartyTypes: this.exchange,
      };
      console.log("param", param);
      pushStationInfo(param).then((response) => {
        console.log("response", response);
        this.$modal.msg(response.obj);
        this.disableFlag = true;
      });
    },

    // 保存站点与第三方平台关系
    saveStationThirdParty() {
      const param = {
        stationId: this.stationId,
        thirdPartyTypes: this.exchange,
      };
      console.log("param", param);
      updateThirdPartyStationRelation(param).then((response) => {
        this.$message.success(response.msg);
      });
    },

    // 绑定站点与停车平台配置
    saveParkingSetting(parkingId) {
      console.log("parkingId", parkingId, this.stationId);
      const params = {
        stationId: this.stationId,
        parkingId: parkingId,
      };
      bindParkingPlatform(params).then((response) => {
        console.log("绑定站点与停车平台配置 response", response);
      });
    },
    // 配置参数按钮
    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;
    },
    // 复选框状态
    getPlatform(id) {
      this.exchange.push(id);
    },
  },
  //监听复选框状态
  watch: {
    checkList: {
      handler(newVal) {
        this.exchange = newVal.map(
          (item) =>
            this.dict.type.third_party_type.find((dict) => dict.label === item)?.raw
              ?.dictValue
        );
      },
      deep: true,
    },
  },
};
</script>

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

::v-deep .Input .el-input--medium {
  width: 400px;
}
</style>