FE-V2-PC/src/views/comprehensive/system/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">
            <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">
            <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.cameraExtranetAgent">
            <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">
            <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="内网地址IP段：">
          <el-input placeholder="请输入"  v-model="form.ipIdentify" style="width: 300px">
          </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">
            <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">
            <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">
            <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: 290px"
          />
        </el-form-item>
      </div>
      <div class="form-max-box">
        <el-form-item label="MQTT密码-外网：">
          <el-input
            v-model="form.mqttExtranetPassword"
            placeholder="请输入"
            style="width: 290px"
          />
        </el-form-item>
      </div>
      <div class="form-max-box">
        <el-form-item label="MQTT地址-内网：">
          <el-input placeholder="请输入"  v-model="form.mqttIntranetUrl">
            <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: 290px"
          />
        </el-form-item>
      </div>
      <div class="form-max-box">
        <el-form-item label="MQTT密码-内网：">
          <el-input
            v-model="form.mqttIntranetPassword"
            placeholder="请输入"
            style="width: 290px"
          />
        </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.screenExtranetUrl">
            <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">
            <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">
            <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">
            <template slot="prepend">http://</template>
          </el-input>
        </el-form-item>
        <i class="tip"><i class="el-icon-question"></i>跳转后台时访问的地址</i>
      </div>

    </el-form>
    <div class="sub_btn">
      <p class="null-p"></p>
      <p class="inquire-button-one"  @click="submitForm">保存</p>
      <p class="null-p"></p>
    </div>
  </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import { addUrlConfig, getLogoInfo, getUrlConfig } from '@/api/system/publicConfig'
  import store from '@/store'
  import { Encrypt,Decrypt} from '@/utils/secret.js'
  export default {
    name: "publicConfig",
    data() {
      return {
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        form:{

        },
        rules: {
          fileExtranetUrl: [
            { pattern:/http[s]{0,1}:\/\/([\w.]+\/?)\S*/, message: "请输入正确的联系方式", trigger: "blur" }
          ],

        },

      };
    },
    created() {

    },
    mounted(){
      this.getUrlConfig();
    },
    methods: {
      /** 提交按钮 */
      submitForm: function() {
        let _this = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            _this.form.mqttExtranetUrl=Encrypt(_this.form.mqttExtranetUrl)
            _this.form.mqttExtranetUser=Encrypt(_this.form.mqttExtranetUser)
            _this.form.mqttExtranetPassword=Encrypt(_this.form.mqttExtranetPassword)

            _this.form.mqttIntranetUrl=Encrypt(_this.form.mqttIntranetUrl)
            _this.form.mqttIntranetUser=Encrypt(_this.form.mqttIntranetUser)
            _this.form.mqttIntranetPassword=Encrypt(_this.form.mqttIntranetPassword)
            addUrlConfig(_this.form).then(response => {
              _this.msgSuccess(response.msg);
              _this.getUrlConfig()

            });
          }
        });
      },
      //获取数据
      getUrlConfig(){
        let _this=this;
        getUrlConfig().then(response => {
            _this.form=response.data
          _this.form.mqttExtranetUrl=Decrypt(_this.form.mqttExtranetUrl)
          _this.form.mqttExtranetUser=Decrypt(_this.form.mqttExtranetUser)
          _this.form.mqttExtranetPassword=Decrypt(_this.form.mqttExtranetPassword)

          _this.form.mqttIntranetUrl=Decrypt(_this.form.mqttIntranetUrl)
          _this.form.mqttIntranetUser=Decrypt(_this.form.mqttIntranetUser)
          _this.form.mqttIntranetPassword=Decrypt(_this.form.mqttIntranetPassword)
        });
      },
    },
  };
</script>

<style scoped lang="scss">
  .public-config-page{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .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;
      }
    }
    *{
      margin: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>