zhgdyun/src/views/jxjadmin/systemSettings.vue

<template>
  <div class="fullHeight enterpriseInfo">
    <div class="enterpriseInfoContent">
      <vue-scroll style="height: 720px">
        <el-form
          style="width: 100%"
          size="medium"
          :model="form"
          ref="form"
          :rules="rules"
          label-width="160px"
        >
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item :label="'平台名称'" prop="platformName">
                <el-input
                  v-model="form.platformName"
                  style="width: 150px"
                  :placeholder="$t('message.companyDiagram.PleaseEnter')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="'模块图标类型'" prop="iconType">
                <el-radio-group v-model="iconType">
                  <el-radio label="1" size="medium">原图标</el-radio>
                  <el-radio label="2" size="small">图标2</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item :label="'大屏地图区域展示类型'" prop="areaType">
                <el-radio-group v-model="areaType">
                  <el-radio label="1" style="margin-left: 10px">省份</el-radio>
                  <el-radio label="2">城市</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col> -->
          </el-row>

          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item :label="'是否开启缩放'" prop="platformLogo">
                <el-switch
                  v-model="zoomType"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="0"
                  :inactive-value="1"
                  @change='switchChange2'
                >
                </el-switch>
                {{ zoomType == 0? '是' : '否' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="'是否开启登录超时处理'" prop="loginTimeOut">
                <el-switch
                  v-model="loginTimeOut"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                  @change='switchChange'
                >
                </el-switch>
                {{ loginTimeOut == 1 ? '是' : '否' }}
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item label="标头配置" prop="headerConfiguration">
                <el-input
                  style="width: 150px"
                  v-model="form.headerConfiguration"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业后台" prop="enterpriseBackground">
                <el-input
                  style="width: 150px"
                  v-model="form.enterpriseBackground"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item label="企业前台" prop="enterpriseFront">
                <el-input
                  style="width: 150px"
                  v-model="form.enterpriseFront"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目后台" prop="projectBackground">
                <el-input
                  style="width: 150px"
                  v-model="form.projectBackground"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item label="设备中台" prop="equipmentChina">
                <el-input
                  style="width: 150px"
                  v-model="form.equipmentChina"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="资料中心" prop="dataCenter">
                <el-input
                  style="width: 150px"
                  v-model="form.dataCenter"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item label="项目前台" prop="projectFront">
                <el-input
                  style="width: 150px"
                  v-model="form.projectFront"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item :label="'登录页面logo'" prop="loginLogo">
                <el-upload
                  :action="$store.state.UPLOADURL"
                  name="files"
                  list-type="picture-card"
                  :limit="1"
                  :on-preview="handlePictureCardPreview"
                  :on-success="handleAvatarSuccess"
                  :file-list="fileList"
                  :on-remove="handleDelete"
                  :class="{ hide_box: upload_btn1 }"
                >
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传一张</div>
                </el-upload>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item :label="'数据看板logo'" prop="bigScreenLogo">
                <el-upload
                  :action="$store.state.UPLOADURL"
                  name="files"
                  list-type="picture-card"
                  :limit="1"
                  :on-preview="handlePictureCardPreview"
                  :on-success="handleAvatarSuccess4"
                  :file-list="fileList4"
                  :on-remove="handleDelete4"
                  :class="{ hide_box: upload_btn2 }"
                >
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传一张</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item :label="'登录页面背景'" prop="loginBackgroundImage">
                <el-upload
                  :action="$store.state.UPLOADURL"
                  name="files"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-success="handleAvatarSuccess2"
                  :file-list="fileList2"
                  :on-remove="handleDelete2"
                  :class="{ hide_box: upload_btn3 }"
                >
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">
                    只能上传一张,建议上传大小为1920 x 562的图片
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="'平台内部logo'" prop="platformLogo">
                <el-upload
                  :action="$store.state.UPLOADURL"
                  name="files"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-success="handleAvatarSuccess3"
                  :file-list="fileList3"
                  :on-remove="handleDelete3"
                  :class="{ hide_box: upload_btn4 }"
                >
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传一张</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- <el-form-item :label="''" >
                <el-button type="primary" style="width: 200px" @click="submitData">保存</el-button>
            </el-form-item> -->
        </el-form>
        <el-button
          type="primary"
          style="width: 11%; margin: -0.5% 0 0 18%; position: absolute"
          @click="submitData"
          >保存</el-button
        >
      </vue-scroll>
    </div>
    <el-dialog
      :modal-append-to-body="false"
      :visible.sync="dialogVisible"
      width="50%"
      title="查看大图"
    >
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import {
  selectSystemLogoConfigApi,
  editSystemLogoConfigApi
} from '@/assets/js/api/jxjadmin'
export default {
  data() {
    return {
      upload_btn1: false, // 是否隐藏上传图片按钮
      upload_btn2: false, // 是否隐藏上传图片按钮
      upload_btn3: false, // 是否隐藏上传图片按钮
      upload_btn4: false, // 是否隐藏上传图片按钮
      form: {
        loginBackgroundImage: '',
        loginLogo: '',
        platformLogo: '',
        platformName: '',
        bigScreenLogo: '',
        headerConfiguration: '', //标头配置
        enterpriseBackground: '', //企业后台
        enterpriseFront: '', //企业前台
        projectBackground: '', //项目后台
        equipmentChina: '', //设备中台
        projectFront: '', // 项目前台
        dataCenter: '', //资料中心
        loginTimeOut:1,
        zoomType:0,

      },
      zoomType: 0,
      iconType: '1',
      areaType: '1',
      loginTimeOut:1,
      rules: {
        platformName: [
          {
            required: true,
            message: this.$t(
              'message.companyDiagram.dialog_Account_box.message'
            ),
            trigger: 'blur'
          }
        ]
      },
      dialogVisible: false,
      dialogImageUrl: '',
      fileList: [],
      fileList2: [],
      fileList3: [],
      fileList4: []
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
     //切换缩放按钮
     switchChange2(val){
        console.log('切换的状态',val);
        this.form.zoomType=val
    },
     //切换登录超时按钮
     switchChange(val){
        this.form.loginTimeOut=val
    },
    getDetail() {
      selectSystemLogoConfigApi().then((res) => {
        if (res.result) {
          console.log(res.result)
          window.localStorage.setItem('systemInfo', JSON.stringify(res.result))
          this.form = res.result
          if (this.form.loginLogo) {
            this.fileList = [{ name: '', url: this.form.loginLogo }]
            this.upload_btn1 = true
          }
          if (this.form.bigScreenLogo) {
            this.fileList4 = [{ name: '', url: this.form.bigScreenLogo }]
            this.upload_btn2 = true;
          }
          if (this.form.loginBackgroundImage) {
            this.fileList2 = [{ name: '', url: this.form.loginBackgroundImage }]
            this.upload_btn3 = true;
          }
          if (this.form.platformLogo) {
            this.fileList3 = [{ name: '', url: this.form.platformLogo }]
            this.upload_btn4 = true;
          }
          this.zoomType = Number(res.result.zoomType) 
          this.loginTimeOut = Number(res.result.loginTimeOut)
          console.log(res.result.iconType)
          this.iconType = res.result.iconType ? res.result.iconType : '1'
          this.areaType = res.result.areaType ? res.result.areaType : '1'
        }
      })
    },
    submitData() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.fileList.length == 0) {
            this.form.loginLogo = ''
          }
          if (this.fileList4.length == 0) {
            this.form.bigScreenLogo = ''
          }
          if (this.fileList2.length == 0) {
            this.form.loginBackgroundImage = ''
          }
          if (this.fileList3.length == 0) {
            this.form.platformLogo = ''
          }
          this.form.zoomType = this.zoomType
          this.form.iconType = this.iconType
          this.form.areaType = this.areaType
          // this.form.headquartersSn = this.$store.state.userInfo.headquartersSn
          // console.log('参数',this.form)
          editSystemLogoConfigApi(this.form).then((res) => {
            console.log('编辑的结果', res)
            if (res.success) {
              this.$message.success(
                this.$t('message.companyDiagram.editSuccess')
              ) //编辑成功！
              this.loginOut()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    loginOut() {
      this.$store.commit('setUserInfo', null)
      this.$store.commit('setMapBackArr', [])
      this.$store.commit('setMoudle', null)
      this.$store.commit('setProDetail', null)
      window.localStorage.removeItem('isIframe')
      window.localStorage.removeItem('soundList')
      let json = {
        name: '工作站',
        id: 1,
        url: '/projectV2/taskList',
        menuList: [
          {
            id: 100000,
            menuName: '任务清单',
            path: '/projectV2/taskList'
          },
          {
            id: 100001,
            menuName: '通知公告',
            path: '/projectV2/noticeList'
          },
          {
            id: 100002,
            menuName: '工作日程',
            path: '/projectV2/workerSchedule'
          }
        ]
      }
      this.$store.commit('setCurModule', json)
      // sessionStorage.clear();
      // this.$router.push('/login')
      if (COMPANY == 'nanchang' || COMPANY == '') {
        window.open('/index.html#/login', '_self')
      } else {
        window.open('/#/login', '_self')
      }
      // this.$router.push('/')
      window._paq.push(['trackEvent', '点击', '退出登录', '退出登录'])
    },

    handleAvatarSuccess(res, file) {
      this.form.loginLogo = this.$store.state.FILEURL + res.data[0].imageUrl
      this.fileList = [{ name: '', url: this.form.loginLogo }]
      if (this.fileList.length >= 1) {
        this.upload_btn1 = true; // 隐藏上传按钮
      }
    },
    handleAvatarSuccess2(res, file) {
      this.form.loginBackgroundImage =
        this.$store.state.FILEURL + res.data[0].imageUrl
      this.fileList2 = [{ name: '', url: this.form.loginBackgroundImage }]
      if (this.fileList2.length >= 1) {
        this.upload_btn3 = true; // 隐藏上传按钮
      }
    },
    handleAvatarSuccess3(res, file) {
      this.form.platformLogo = this.$store.state.FILEURL + res.data[0].imageUrl
      this.fileList3 = [{ name: '', url: this.form.platformLogo }]
      if (this.fileList3.length >= 1) {
        this.upload_btn4 = true; // 隐藏上传按钮
      }
    },
    handleAvatarSuccess4(res, file) {
      this.form.bigScreenLogo = this.$store.state.FILEURL + res.data[0].imageUrl
      this.fileList4 = [{ name: '', url: this.form.bigScreenLogo }]
      if (this.fileList4.length >= 1) {
        this.upload_btn2 = true; // 隐藏上传按钮
      }
    },


    handleDelete(file, fileList) {
      this.upload_btn1 = false;
      this.fileList = fileList
    },
    handleDelete2(file, fileList) {
      this.upload_btn3 = false;

      this.fileList2 = fileList
    },
    handleDelete3(file, fileList) {
      this.upload_btn4 = false;

      this.fileList3 = fileList
    },
    handleDelete4(file, fileList) {
      this.upload_btn2 = false;

      this.fileList4 = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
<style lang="less" scoped>
.enterpriseInfo {
  background-color: white;
}
.enterpriseInfoContent {
  padding: 20px 50px;
  // width: 50%;
  width: 97%;
  // max-width: 430px;
}
.el-upload__tip {
  line-height: 20px;
}
.hide_box /deep/ .el-upload--picture-card {
  display: none;
}
// .vertical-radio-group .el-radio {
//   display: block;
// }
</style>