v3-lab-web/src/views/systemManagement/publicConfig/exploitConfig.vue

<!--开发配置-->
<template>
  <div class="public-config-page">
    <el-form class="public-form-box scrollbar-box" :model="form" ref="form" :inline="true" :rules="rules" label-width="160px">
      <!--<div class="title-box">-->
        <!--<p>文件预览配置</p>-->
      <!--</div>-->
      <!--<div class="form-max-box">-->
        <!--<el-form-item label="kkFile预览地址-外网：">-->
          <!--<el-input placeholder="请输入"  v-model="form.fileExtranetUrl" style="width:400px;" maxLength="50">-->
            <!--<template slot="prepend">https://</template>-->
          <!--</el-input>-->
        <!--</el-form-item>-->
        <!--<i class="tip"><i class="el-icon-question"></i>调用后台文件预览服务时访问的地址</i>-->
      <!--</div>-->
      <!--<div class="form-max-box">-->
        <!--<el-form-item label="kkFile预览地址-内网：">-->
          <!--<el-input placeholder="请输入"  v-model="form.fileIntranetUrl" style="width:400px;" maxLength="50">-->
            <!--<template slot="prepend">http://</template>-->
          <!--</el-input>-->
        <!--</el-form-item>-->
        <!--<i class="tip"><i class="el-icon-question"></i>调用后台文件预览服务时访问的地址</i>-->
      <!--</div>-->
      <!--<div class="line"></div>-->
      <div class="title-box">
        <p>内网判断地址</p>
      </div>
      <div class="form-max-box">
        <el-form-item label="内网地址IP段：">
          <el-input placeholder="请输入"  v-model="form.ipIdentify"  style="width:400px;" maxLength="50">
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>用于判断用户当前访问的是内网地址还是外网地址</i>
      </div>
      <div class="line"></div>
      <div class="title-box">
        <p>摄像头配置</p>
      </div>
      <div class="form-max-box">
        <el-form-item label="小程序视频地址-外网：">
          <el-input placeholder="请输入"  v-model="form.cameraExtranetAgent" style="width:400px;" maxLength="50">
            <template slot="prepend">https://</template>
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>根据部署外网环境来配置的调用地址</i>
      </div>
      <!--<div class="form-max-box">-->
        <!--<el-form-item label="小程序视频地址-内网：">-->
          <!--<el-input placeholder="请输入"  v-model="form.cameraIntranetAgent" style="width:400px;" maxLength="50">-->
            <!--<template slot="prepend">http://</template>-->
          <!--</el-input>-->
        <!--</el-form-item>-->
        <!--<i class="tip"><i class="el-icon-question"></i>根据部署内网环境来配置的调用地址</i>-->
      <!--</div>-->
      <!--<div class="form-max-box">-->
        <!--<el-form-item label="内网访问地址：">-->
          <!--<el-input placeholder="请输入"  v-model="form.cameraIntranetUrl" style="width:400px;" maxLength="50">-->
            <!--<template slot="prepend">http://</template>-->
          <!--</el-input>-->
        <!--</el-form-item>-->
        <!--<i class="tip"><i class="el-icon-question"></i>在内网环境时连接摄像头所用地址</i>-->
      <!--</div>-->
      <!--<div class="form-max-box">-->
        <!--<el-form-item label="外网访问地址：">-->
          <!--<el-input placeholder="请输入"  v-model="form.cameraExtranetUrl" style="width:400px;" maxLength="50">-->
            <!--<template slot="prepend">https://</template>-->
          <!--</el-input>-->
        <!--</el-form-item>-->
        <!--<i class="tip"><i class="el-icon-question"></i>在外网环境时连接摄像头所用地址</i>-->
      <!--</div>-->
      <div class="line"></div>
      <div class="title-box">
        <p>MQTT配置</p>
      </div>
      <div class="form-max-box">
        <el-form-item label="MQTT地址-外网：">
          <el-input placeholder="请输入"  v-model="form.mqttExtranetUrl" style="width:400px;" maxLength="50">
            <template slot="prepend">wss://</template>
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>MQTT调用相关地址/账号配置</i>
      </div>
      <div class="form-max-box">
        <el-form-item label="MQTT账号-外网：">
          <el-input v-model="form.mqttExtranetUser" placeholder="请输入" style="width:400px;" maxLength="50"/>
        </el-form-item>
      </div>
      <div class="form-max-box">
        <el-form-item label="MQTT密码-外网：">
          <el-input v-model="form.mqttExtranetPassword" placeholder="请输入" style="width:400px;" maxLength="50"/>
        </el-form-item>
      </div>
      <div class="form-max-box">
        <el-form-item label="MQTT地址-内网：">
          <el-input placeholder="请输入"  v-model="form.mqttIntranetUrl" style="width:400px;" maxLength="50">
            <template slot="prepend">ws://</template>
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>MQTT调用相关地址/账号配置</i>
      </div>
      <div class="form-max-box">
        <el-form-item label="MQTT账号-内网：">
          <el-input v-model="form.mqttIntranetUser" placeholder="请输入" style="width:400px;" maxLength="50"/>
        </el-form-item>
      </div>
      <div class="form-max-box">
        <el-form-item label="MQTT密码-内网：">
          <el-input v-model="form.mqttIntranetPassword" placeholder="请输入" style="width:400px" maxLength="50"/>
        </el-form-item>
      </div>
      <div class="line"></div>
      <div class="title-box">
        <p>文件服务环境</p>
      </div>
      <div class="form-max-box">
        <el-form-item label="内网文件服务环境：">
          <el-input placeholder="请输入"  v-model="form.fileBrowseEnvironment" style="width:400px;" maxLength="50">
            <template slot="prepend">http://</template>
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>文件服务相关的调用地址</i>
      </div>
      <div class="form-max-box">
        <el-form-item label="外网文件服务环境：">
          <el-input placeholder="请输入"  v-model="form.fileBrowseEnvironmentExtranet" style="width:400px;" maxLength="50">
            <template slot="prepend">https://</template>
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>文件服务相关的调用地址</i>
      </div>
      <!--<div class="line"></div>-->
      <!--<div class="title-box">-->
        <!--<p>可视化大屏配置</p>-->
      <!--</div>-->
      <!--<div class="form-max-box">-->
        <!--<el-form-item label="访问地址-外网：">-->
          <!--<el-input placeholder="请输入"  v-model="form.screenExtranetUrl" style="width:400px;" maxLength="50">-->
            <!--<template slot="prepend">https://</template>-->
          <!--</el-input>-->
        <!--</el-form-item>-->
        <!--<i class="tip"><i class="el-icon-question"></i>跳转大屏时访问的地址</i>-->
      <!--</div>-->
      <!--<div class="form-max-box">-->
        <!--<el-form-item label="访问地址-内网：">-->
          <!--<el-input placeholder="请输入"  v-model="form.screenIntranetUrl" style="width:400px;" maxLength="50">-->
            <!--<template slot="prepend">http://</template>-->
          <!--</el-input>-->
        <!--</el-form-item>-->
        <!--<i class="tip"><i class="el-icon-question"></i>跳转大屏时访问的地址</i>-->
      <!--</div>-->
      <!--<div class="form-max-box">-->
        <!--<el-form-item label="访问地址-外网：">-->
          <!--<el-input placeholder="请输入"  v-model="form.pcExtranetUrl" style="width:400px;" maxLength="50">-->
            <!--<template slot="prepend">https://</template>-->
          <!--</el-input>-->
        <!--</el-form-item>-->
        <!--<i class="tip"><i class="el-icon-question"></i>跳转后台时访问的地址</i>-->
      <!--</div>-->
      <!--<div class="form-max-box">-->
        <!--<el-form-item label="访问地址-内网：">-->
          <!--<el-input placeholder="请输入"  v-model="form.pcIntranetUrl" style="width:400px;" maxLength="50">-->
            <!--<template slot="prepend">http://</template>-->
          <!--</el-input>-->
        <!--</el-form-item>-->
        <!--<i class="tip"><i class="el-icon-question"></i>跳转后台时访问的地址</i>-->
      <!--</div>-->
      <div class="line"></div>
      <div class="title-box">
        <p>微信小程序二维码配置</p>
      </div>
      <div class="form-max-box">
        <el-form-item label="二维码规则配置：">
          <el-input placeholder="请输入"  v-model="form.codeOnlineAdd" style="width:400px;" maxLength="50">
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>用于微信外部扫一扫跳转指引,需与微信小程序后台二维码规则配置一致</i>
      </div>
      <div class="line"></div>
      <div class="title-box">
        <p>Android端配置</p>
      </div>
      <div class="form-max-box">
        <el-form-item label="安全准入检测环境：">
          <el-input placeholder="请输入"  v-model="form.secureAccessEnvironment" style="width:400px;" maxLength="50">
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>安全准入相关的调用地址</i>
      </div>
      <div class="form-max-box">
        <el-form-item label="api版本：">
          <el-input placeholder="请输入"  v-model="form.apiVersions" style="width:400px;" maxLength="50">
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>用于对应后台服务版本</i>
      </div>
      <div class="line"></div>
      <div class="title-box">
        <p>管控一体机配置</p>
      </div>
      <div class="form-max-box">
        <el-form-item label="工程模式密码：">
          <el-input placeholder="请输入"  v-model="form.controlMachinePassword" style="width:400px;" maxLength="50">
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>用于管控一体机</i>
      </div>
      <div class="line"></div>
      <div class="title-box">
        <p>学习考试一体机配置</p>
      </div>
      <div class="form-max-box">
        <el-form-item label="工程模式密码：">
          <el-input placeholder="请输入"  v-model="form.learnMachinePassword" style="width:400px;" maxLength="50">
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>用于学习考试一体机</i>
      </div>
      <div class="line"></div>
      <div class="title-box">
        <p>电子信息牌配置</p>
      </div>
      <div class="form-max-box">
        <el-form-item label="读卡器串口：">
          <el-input placeholder="请输入"  v-model="form.cardReaderSerialPort" style="width:400px;" maxLength="50">
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>用于匹配读卡器</i>
      </div>
      <div class="form-max-box">
        <el-form-item label="工程模式密码：">
          <el-input placeholder="请输入"  v-model="form.informationBoardPassword" style="width:400px;" maxLength="50">
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>用于电子信息牌</i>
      </div>
      <div class="line"></div>
      <div class="title-box">
        <p>化学品终端配置</p>
      </div>
      <div class="form-max-box">
        <el-form-item label="电子秤串口：">
          <el-input placeholder="请输入"  v-model="form.electronicScaleSerialport" style="width:400px;" maxLength="50">
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>用于匹配电子秤</i>
      </div>
      <div class="form-max-box">
        <el-form-item label="刷卡/RFID串口：">
          <el-input placeholder="请输入"  v-model="form.rfidSerialport" style="width:400px;" maxLength="50">
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>用于匹配刷卡/RFID</i>
      </div>
      <div class="form-max-box">
        <el-form-item label="打印机串口：">
          <el-input placeholder="请输入"  v-model="form.printerSerialport" style="width:400px;" maxLength="50">
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>用于匹配打印机</i>
      </div>
      <div class="form-max-box">
        <el-form-item label="蓝牙称名称：">
          <el-input placeholder="请输入"  v-model="form.bluetoothName" style="width:400px;" maxLength="50">
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>用于匹配蓝牙称</i>
      </div>
      <div class="form-max-box">
        <el-form-item label="人脸识别环境：">
          <el-input placeholder="请输入"  v-model="form.faceRecognitionEnvironment" style="width:400px;" maxLength="50">
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>人脸识别相关的调用地址</i>
      </div>
      <div class="form-max-box">
        <el-form-item label="称重录像环境：">
          <el-input placeholder="请输入"  v-model="form.videoRecordingEnvironment" style="width:400px;" maxLength="50">
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>称重录像相关的调用地址</i>
      </div>
      <div class="form-max-box">
        <el-form-item label="工程模式密码：">
          <el-input placeholder="请输入"  v-model="form.chemicalRerminalPassword" style="width:400px;" maxLength="50">
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>用于化学品终端</i>
      </div>
    </el-form>
  </div>
</template>

<script>
  import { Encrypt,Decrypt} from '@/utils/secret'
  import { getConfigByType } from "@/api/commonality/permission";
  import { addOrUpdate } from "@/api/systemManagement/index";
  export default {
    name: "publicConfig",
    data() {
      return {
        configId:null,
        form:{},
        rules: {
          fileExtranetUrl: [
            { pattern:/http[s]{0,1}:\/\/([\w.]+\/?)\S*/, message: "请输入正确的地址", trigger: "blur" }
          ],
        },
      };
    },
    created() {
    },
    mounted(){
      this.getConfigByType();
    },
    methods: {
      /** 提交按钮 */
      addOrUpdate() {
        let self = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$confirm('是否确认提交?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
            }).then(() => {
              let configValue = JSON.parse(JSON.stringify(this.form))
              configValue.mqttExtranetUrl = configValue.mqttExtranetUrl ? Encrypt(configValue.mqttExtranetUrl) : '';
              configValue.mqttExtranetUser = configValue.mqttExtranetUser ? Encrypt(configValue.mqttExtranetUser) : '';
              configValue.mqttExtranetPassword = configValue.mqttExtranetPassword ? Encrypt(configValue.mqttExtranetPassword) : '';
              configValue.mqttIntranetUrl = configValue.mqttIntranetUrl ? Encrypt(configValue.mqttIntranetUrl) : '';
              configValue.mqttIntranetUser = configValue.mqttIntranetUser ? Encrypt(configValue.mqttIntranetUser) : '';
              configValue.mqttIntranetPassword = configValue.mqttIntranetPassword ? Encrypt(configValue.mqttIntranetPassword) : '';
              configValue.secureAccessEnvironment = configValue.secureAccessEnvironment ? Encrypt(configValue.secureAccessEnvironment) : '';
              configValue.apiVersions = configValue.apiVersions ? Encrypt(configValue.apiVersions) : '';
              configValue.controlMachinePassword = configValue.controlMachinePassword ? Encrypt(configValue.controlMachinePassword) : '';
              configValue.fileBrowseEnvironment = configValue.fileBrowseEnvironment ? Encrypt(configValue.fileBrowseEnvironment) : '';
              configValue.fileBrowseEnvironmentExtranet = configValue.fileBrowseEnvironmentExtranet ? Encrypt(configValue.fileBrowseEnvironmentExtranet) : '';
              configValue.learnMachinePassword = configValue.learnMachinePassword ? Encrypt(configValue.learnMachinePassword) : '';
              configValue.cardReaderSerialPort = configValue.cardReaderSerialPort ? Encrypt(configValue.cardReaderSerialPort) : '';
              configValue.informationBoardPassword = configValue.informationBoardPassword ? Encrypt(configValue.informationBoardPassword) : '';
              configValue.electronicScaleSerialport = configValue.electronicScaleSerialport ? Encrypt(configValue.electronicScaleSerialport) : '';
              configValue.rfidSerialport = configValue.rfidSerialport ? Encrypt(configValue.rfidSerialport) : '';
              configValue.printerSerialport = configValue.printerSerialport ? Encrypt(configValue.printerSerialport) : '';
              configValue.bluetoothName = configValue.bluetoothName ? Encrypt(configValue.bluetoothName) : '';
              configValue.faceRecognitionEnvironment = configValue.faceRecognitionEnvironment ? Encrypt(configValue.faceRecognitionEnvironment) : '';
              configValue.videoRecordingEnvironment = configValue.videoRecordingEnvironment ? Encrypt(configValue.videoRecordingEnvironment) : '';
              configValue.chemicalRerminalPassword = configValue.chemicalRerminalPassword ? Encrypt(configValue.chemicalRerminalPassword) : '';
              let obj = {
                id:self.configId,
                configName: "开发配置",
                category:2,
                configKey:5,
                configValue : JSON.stringify(configValue),
              }
              addOrUpdate(obj).then(response => {
                self.msgSuccess(response.message);
                self.getConfigByType()
              });
            }).catch(() => {});
          }
        });
      },
      getConfigByType(){
        getConfigByType({ category: 2, configType: 5 }).then(response => {
          this.$set(this,'configId',response.data.id);
          let obj = JSON.parse(response.data.configValue)
          obj.mqttExtranetUrl = obj.mqttExtranetUrl ? Decrypt(obj.mqttExtranetUrl) : '';
          obj.mqttExtranetUser = obj.mqttExtranetUser ? Decrypt(obj.mqttExtranetUser) : '';
          obj.mqttExtranetPassword = obj.mqttExtranetPassword ? Decrypt(obj.mqttExtranetPassword) : '';
          obj.mqttIntranetUrl = obj.mqttIntranetUrl ? Decrypt(obj.mqttIntranetUrl) : '';
          obj.mqttIntranetUser = obj.mqttIntranetUser ? Decrypt(obj.mqttIntranetUser) : '';
          obj.mqttIntranetPassword = obj.mqttIntranetPassword ? Decrypt(obj.mqttIntranetPassword) : '';
          obj.secureAccessEnvironment = obj.secureAccessEnvironment ? Decrypt(obj.secureAccessEnvironment) : '';
          obj.apiVersions = obj.apiVersions ? Decrypt(obj.apiVersions) : '';
          obj.controlMachinePassword = obj.controlMachinePassword ? Decrypt(obj.controlMachinePassword) : '';
          obj.fileBrowseEnvironment = obj.fileBrowseEnvironment ? Decrypt(obj.fileBrowseEnvironment) : '';
          obj.fileBrowseEnvironmentExtranet = obj.fileBrowseEnvironmentExtranet ? Decrypt(obj.fileBrowseEnvironmentExtranet) : '';
          obj.learnMachinePassword = obj.learnMachinePassword ? Decrypt(obj.learnMachinePassword) : '';
          obj.cardReaderSerialPort = obj.cardReaderSerialPort ? Decrypt(obj.cardReaderSerialPort) : '';
          obj.informationBoardPassword = obj.informationBoardPassword ? Decrypt(obj.informationBoardPassword) : '';
          obj.electronicScaleSerialport = obj.electronicScaleSerialport ? Decrypt(obj.electronicScaleSerialport) : '';
          obj.rfidSerialport = obj.rfidSerialport ? Decrypt(obj.rfidSerialport) : '';
          obj.printerSerialport = obj.printerSerialport ? Decrypt(obj.printerSerialport) : '';
          obj.bluetoothName = obj.bluetoothName ? Decrypt(obj.bluetoothName) : '';
          obj.faceRecognitionEnvironment = obj.faceRecognitionEnvironment ? Decrypt(obj.faceRecognitionEnvironment) : '';
          obj.videoRecordingEnvironment = obj.videoRecordingEnvironment ? Decrypt(obj.videoRecordingEnvironment) : '';
          obj.chemicalRerminalPassword = obj.chemicalRerminalPassword ? Decrypt(obj.chemicalRerminalPassword) : '';
          this.$set(this,'form',obj);
        })
      },
    },
  };
</script>

<style scoped lang="scss">
  .public-config-page{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    ::v-deep .el-input-group__prepend{
      padding:0 10px;
      width:80px;
    }
    .public-form-box{
      flex:1;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    /*底部按钮弹框*/
    .sub_btn{
      /*position: absolute;*/
      display: flex;
      right: 20px;
      bottom: 0;
      background: #fff;
      height: 112px;
      text-align: center;
      .null-p{
        flex:1;
      }
      .inquire-button-one{
        cursor:pointer;
        display: inline-block;
        text-align: center;
        width: 70px;
        height: 40px;
        border-radius: 6px;
        border: 1px solid #0045af;
        color:#ffffff;
        background:#0045af;
        margin:36px 10px 0 0;
      }
    }
    .title-box{
      p{
        margin-left:78px;
        color:#0045af;
        line-height:60px;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
      }
    }
    .form-max-box{
      margin-top:20px;
      margin-left: 100px;
      .tip{
        font-size: 16px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 40px;
        font-style: normal;
        >i{
          margin: 0 10px 0 24px;
          color: #0045AF;
        }
      }
    }
    .line{
      width: 100%;
      height: 10px;
      background: #F5F5F5;
      margin-top: 40px;
    }
  }
</style>