[update] 完善系统、登录页

2024-04-09 23:50:48 +08:00
parent 46d9540b66
commit b5393f6267
8 changed files with 347 additions and 154 deletions
@@ -365,6 +365,12 @@
  border: 1px solid #0094FF;
  color: @text-color;
 }
+.ant-btn.ant-btn-primary[disabled],
+.ant-btn.ant-btn-primary[disabled]:hover,
+.ant-btn.ant-btn-primary[disabled]:focus {
+  color: @text-color;
+  background: linear-gradient(180deg, rgba(0, 148, 255, 0) 0%, rgba(0, 148, 255, 0.6) 100%);
+}

 .ant-btn.ant-btn-danger,
 .ant-btn.ant-btn-danger:hover,
@@ -1,7 +1,7 @@
 module.exports = {
  // 背景色
  'component-background': '#001B36',
-  'background-color-base': '#001B3688', // 基础背景色
+  'background-color-base': 'rgba(0,27,54,0.67)', // 基础背景色
  'background-color-light': 'rgba(0, 148, 255, 0.30)', // 基础高亮背景色

  // 边框色
@@ -1,7 +1,7 @@
@primary-color: #0094FF;
 /* 背景色 */
@component-background: #001B36;
-@background-color-base: #001B3688;
+@background-color-base: #001B36AA;
@background-color-light: rgba(0, 148, 255, 0.30);

 /* 边框色 */
@@ -37,6 +37,7 @@
      <a-col flex="1">
        <common-card title="设备列表">
          <a-table
+            class="device-table"
            ref="table"
            size="middle"
            bordered
@@ -639,4 +640,9 @@ export default {
    }
  }
 }
+@media screen and (max-width: 1367px) {
+  .device-table/deep/.ant-table.ant-table-fixed-header .ant-table-scroll .ant-table-header {
+    margin-right: -2px;
+  }
+}
 </style>
@@ -0,0 +1,188 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="556"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭"
+    wrapClassName="ant-modal-cust-warp"
+    style="top:5%;height: 85%;overflow-y: hidden">
+
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form" class="custom-vertical-form flex-column-between">
+        <a-form-item>
+          <div class="upload-avatar-box">
+            <j-image-upload v-decorator="['avatar', validatorRules.avatar]"
+                            class="upload-avatar"
+                            :number="1"
+                            uploadLimitHideBtn
+                            accept='.png,.PNG,.jpg,.JPG'></j-image-upload>
+          </div>
+        </a-form-item>
+        <a-row type="flex" :gutter="20" class="mb-20">
+          <a-col :span="12">
+            <a-form-item label="用户名称">
+              <a-input placeholder="请输入用户名称" :max-length="50" disabled
+                       @change="event => event.target.value = event.target.value.trim()"
+                       v-decorator="['username', validatorRules.username]"/>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="用户类别">
+              <j-dict-select-tag :triggerChange="true"
+                                 dictCode="user_type"
+                                 v-decorator="['userType', validatorRules.userType]"
+                                 placeholder="请选择用户类别">
+              </j-dict-select-tag>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item label="所属单位">
+              <j-select-depart
+                placeholder="请选择所属单位"
+                v-decorator="['selecteddeparts', validatorRules.selecteddeparts]"
+                :backDepart="true"
+                :treeOpera="true"></j-select-depart>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item label="联系方式">
+              <a-input placeholder="请输入联系方式"
+                       v-decorator="['phone', validatorRules.phone]" />
+            </a-form-model-item>
+
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { editUserInfo } from '@api/systemOverview'
+import { getAction } from '@api/manage'
+export default {
+  name: 'UserInfoModal',
+  data () {
+    return {
+      title: '操作',
+      form: this.$form.createForm(this),
+      visible: false,
+      roleDisabled: false,
+      model: {},
+      confirmLoading: false,
+      validatorRules: {
+        username: { rules: [{ required: true, message: '请输入用户名称' }], validateTrigger: 'blur' },
+        userType: { rules: [{ required: true, message: '请选择用户类别' }], validateTrigger: 'change' },
+        selecteddeparts: { rules: [{ required: true, message: '请选择所属单位' }], validateTrigger: 'change' },
+        phone: { rules: [{ required: true, message: '请输入联系方式' }, { validator: this.validateMobile }], validateTrigger: 'blur' }
+      }
+    }
+  },
+  methods: {
+    add () {
+      this.edit(this.modelDefault)
+    },
+    edit (record) {
+      this.model = Object.assign({}, record)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(this.model)
+      })
+      this.getUserDeparts(record.id)
+    },
+    close () {
+      this.form.resetFields()
+      this.model = {}
+      this.$emit('close')
+      this.visible = false
+    },
+    handleOk () {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const params = Object.assign({}, this.model, values)
+          editUserInfo(params).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message)
+              that.$emit('ok')
+              that.close()
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancel () {
+      this.close()
+    },
+    // 获取用户部门
+    getUserDeparts (userid) {
+      const that = this
+      getAction('/sys/user/userDepartList', { userId: userid }).then((res) => {
+        if (res.success) {
+          const departOptions = []
+          const selectDepartKeys = []
+          for (let i = 0; i < res.result.length; i++) {
+            selectDepartKeys.push(res.result[i].key)
+            // 新增负责部门选择下拉框
+            departOptions.push({
+              value: res.result[i].key,
+              label: res.result[i].title
+            })
+          }
+          that.model.selecteddeparts = selectDepartKeys.join(',')
+          this.$nextTick(() => {
+            this.form.setFieldsValue({
+              selecteddeparts: this.model.selecteddeparts
+            })
+          })
+          that.nextDepartOptions = departOptions
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.upload-avatar-box {
+  position: relative;
+  width: calc(100% + 40px);
+  height: 168px;
+  margin: -13px -20px 0;
+  background: url("~@/assets/images/systemOverview/systemSettings/upload-avatar.png") no-repeat center center;
+  background-size: 100%;
+
+  .upload-avatar {
+    width: 120px;
+    height: 120px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    // 隐藏上传组件
+    /deep/.ant-upload-select {
+      opacity: 0;
+    }
+    /deep/.ant-upload-list-picture-card .ant-upload-list-item {
+      border: none;
+      width: 120px;
+      height: 120px;
+    }
+    /deep/.ant-upload-list-picture .ant-upload-list-item-thumbnail,
+    /deep/.ant-upload-list-picture-card .ant-upload-list-item-thumbnail {
+      opacity: 1;
+    }
+  }
+}
+</style>
@@ -33,8 +33,8 @@
        </a-row>
      </a-form>
    </div>
-    <a-row :gutter="20" type="flex" class="mb-20">
-      <a-col :xl="12" :xxl="6">
+    <a-row :gutter="20" type="flex">
+      <a-col :xl="12" :xxl="6" class="mb-20">
        <div class="flex-column">
          <div class="mb-20">
            <common-card title="油井基础信息">
@@ -50,14 +50,14 @@
          </div>
        </div>
      </a-col>
-      <a-col :xl="12" :xxl="6">
+      <a-col :xl="12" :xxl="6" class="mb-20">
        <common-card title="油井实时参数">
          <common-card-info :data="oilWellRealTimeData['油井实时参数']"
                            :left-list="data.oilWellsRealTimeParamsLeft || []"
                            :right-list="data.oilWellsRealTimeParamsRight || []"/>
        </common-card>
      </a-col>
-      <a-col :xl="12" :xxl="6">
+      <a-col :xl="12" :xxl="6" class="mb-20">
        <common-card title="油井生产数据">
          <!--  泵型图  -->
          <div class="pump-type mb-20">
@@ -68,7 +68,7 @@
                            :right-list="data.oilWellProductionDataRight"/>
        </common-card>
      </a-col>
-      <a-col :xl="12" :xxl="6">
+      <a-col :xl="12" :xxl="6" class="mb-20">
        <common-card title="油井工作状态">
          <div slot="extra" class="info-row">
            <div class="info-label">工作状态</div>
@@ -91,8 +91,8 @@
        </common-card>
      </a-col>
    </a-row>
-    <a-row :gutter="20" type="flex" class="mb-20">
-      <a-col :xl="8">
+    <a-row :gutter="20" type="flex">
+      <a-col class="mb-20" :xl="12" :xxl="8">
        <common-card title="实时示功图">
          <div slot="extra" class="indicator-diagram-extra">
            <span class="time">2022-03-01 10:21:16</span>
@@ -110,12 +110,12 @@
          <responsive-chart ref="indicatorDiagram" key="indicatorDiagram" height="200px"/>
        </common-card>
      </a-col>
-      <a-col :xl="8">
+      <a-col class="mb-20" :xl="12" :xxl="8">
        <common-card title="功图计产监控">
          <responsive-chart ref="productionMonitoring" key="productionMonitoring" height="200px"/>
        </common-card>
      </a-col>
-      <a-col :xl="8">
+      <a-col class="mb-20" :xl="12" :xxl="8">
        <common-card title="载荷分布图">
          <responsive-chart ref="loadDistribution" key="loadDistribution" height="200px"/>
        </common-card>
@@ -1,117 +1,71 @@
 <template>
  <div class="main">
-    <div class="login-box">
-      <div class="login-left">
-        <div class="logo-image">
-<!--          <img src='@/assets/logo.png' alt=''>-->
-<!--          <img src='@/assets/logo_name.png' alt=''>-->
+    <a-form v-if="!mobile" :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
+      <div class="user-box">
+        <div class="login-header">账号登录</div>
+        <div class="login-body">
+          <a-row>
+            <a-col :span="3"></a-col>
+            <label class="lable-font">账号</label>
+          </a-row>
+          <a-row>
+            <a-col :span="3"></a-col>
+            <a-col :span="18">
+              <a-form-item>
+                <a-input
+                  size="large"
+                  v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
+                  type="text"
+                  placeholder="请输入帐号">
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="3"></a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="3"></a-col>
+            <label class="lable-font">密码</label>
+          </a-row>
+          <a-row>
+            <a-col :span="3"></a-col>
+            <a-col :span="18">
+              <a-form-item>
+                <a-input
+                  v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
+                  size="large"
+                  :type="passwordType"
+                  autocomplete="false"
+                  placeholder="请输入密码"
+                >
+                  <a-icon title="显示密码" @click="passwordType='text'" slot="suffix" v-if="passwordType==='password'" type="eye" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
+                  <a-icon title="隐藏密码" @click="passwordType='password'" slot="suffix" v-else type="eye-invisible" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
+                  <!--                <a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>-->
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="3"></a-col>
+          </a-row>
+          <a-row class="login-btn">
+            <a-col :span="3"></a-col>
+            <a-col :span="18">
+              <a-form-item>
+                <a-button
+                  block
+                  size="large"
+                  type="primary"
+                  htmlType="submit"
+                  :loading="loginBtn"
+                  @click.stop.prevent="handleSubmit"
+                  :disabled="loginBtn">
+                  {{ loginBtn ? "登录中" : "登录" }}
+                </a-button>
+              </a-form-item>
+            </a-col>
+            <a-col :span="3"></a-col>
+          </a-row>
        </div>
      </div>
-    <a-form v-if="!mobile" :form="form" class="user-layout-login login-right" ref="formLogin" id="formLogin">
-      <div class="user-box">
-        <span class="title">账号登录</span>
-        <a-row>
-          <a-col :span="3"></a-col>
-          <label class="lable-font">账号</label>
-        </a-row>
-        <a-row>
-          <a-col :span="3"></a-col>
-          <a-col :span="18">
-            <a-form-item>
-              <a-input
-                size="large"
-                v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
-                type="text"
-                placeholder="请输入帐号">
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :span="3"></a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="3"></a-col>
-          <label class="lable-font">密码</label>
-        </a-row>
-        <a-row>
-          <a-col :span="3"></a-col>
-          <a-col :span="18">
-            <a-form-item>
-              <a-input
-                v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
-                size="large"
-                :type="passwordType"
-                autocomplete="false"
-                placeholder="请输入密码"
-              >
-              <a-icon title="显示密码" @click="passwordType='text'" slot="suffix" v-if="passwordType==='password'" type="eye" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
-               <a-icon title="隐藏密码" @click="passwordType='password'" slot="suffix" v-else type="eye-invisible" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
-<!--                <a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>-->
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :span="3"></a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="3"></a-col>
-          <label class="lable-font">验证码</label>
-        </a-row>
-        <a-row style="margin-bottom: 0;">
-          <a-col :span="3"></a-col>
-          <a-col :span="12">
-            <a-form-item>
-              <a-input
-                v-decorator="['inputCode',validatorRules.inputCode]"
-                size="large"
-                type="text"
-                @change="inputCodeChange"
-                autocomplete="off"
-                placeholder="请输入验证码">
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :span="6" style="text-align: right">
-            <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode" alt=""/>
-            <img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode" alt=""/>
-          </a-col>
-          <a-col :span="3"></a-col>
-        </a-row>
-        <a-row style="margin-bottom: 2%;">
-          <a-col :span="3"></a-col>
-          <a-col :span="7">
-            <a-form-item>
-              <a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">记住用户名密码</a-checkbox>
-            </a-form-item>
-          </a-col>
-          <a-col :span="6"></a-col>
-          <a-col :span="5" style="text-align: right;color: #1891FF;">
-<!--            <a-form-item>-->
-<!--              <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">-->
-<!--                忘记密码-->
-<!--              </router-link>-->
-<!--            </a-form-item>-->
-          </a-col>
-        </a-row>
-        <a-row class="login-btn">
-          <a-col :span="3"></a-col>
-          <a-col :span="18">
-            <a-form-item>
-              <a-button
-                block
-                size="large"
-                type="primary"
-                htmlType="submit"
-                :loading="loginBtn"
-                @click.stop.prevent="handleSubmit"
-                :disabled="loginBtn">
-                {{ loginBtn ? "登录中" : "登录" }}
-              </a-button>
-            </a-form-item>
-          </a-col>
-          <a-col :span="3"></a-col>
-        </a-row>
-      </div>
    </a-form>
-    </div>
  </div>
 </template>
 <script>
@@ -355,6 +309,7 @@ function isMobile () {
 </script>

 <style lang="less" scoped>
+@import "~@/assets/less/modifyLessVars.less";
  .ant-input-affix-wrapper/deep/ .ant-input:not(:first-child){
    padding-left: 40px;
  }
@@ -364,40 +319,63 @@ function isMobile () {
  .main{
    height: 100%;
    overflow: hidden;
-    background: url(~@/assets/login-bg.png);
-    background-size: cover;
-    .login-box{
-      margin:9% auto;
-      width: 62%;
-      height: 64%;
-      display: flex;
+    background: #001125 url("~@/assets/mobile-login-bg.png") no-repeat;
+    background-position: left top;
+    background-size: 50%;

-      .login-right,.login-left{
-        width: 50%;
-        height: 100%;
+    .user-layout-login {
+      position: absolute;
+      right: 8vw;
+      top: 20vh;
+      width: 600px;
+      border: 1px solid rgba(0, 148, 255, 0.24);
+      border-bottom: 1px @primary-color solid;
+      // 左下右下高亮边框
+      &::before, &::after {
+        position: absolute;
+        content: '';
+        display: block;
+        width: 3%;
+        min-width: 16px;
+        height: 1px;
+        bottom: -1px;
+        background-color: #2EE4FD;
      }
-      .login-right{
-        border-top-right-radius: 2%;
-        border-bottom-right-radius: 2%;
+
+      &::before {
+        left: 0;
      }
-      .login-left{
-        border-top-left-radius: 2%;
-        border-bottom-left-radius: 2%;
-        background: url(~@/assets/login-left.png);
-        background-size: cover;
-        .logo-image{
-          margin: 15px;
-          display: flex;
-          &>img{
-            margin-right:8px;
-          }
+
+      &::after {
+        right: 0;
+      }
+
+      .login-header {
+        background-image: url("~@/assets/images/componentImg/header-bg-side.png"),
+        url("~@/assets/images/componentImg/header-bg-center.png"),
+        url("~@/assets/images/componentImg/header-bg-side.png");
+        background-repeat: no-repeat;
+        background-position: left, center, right;
+        background-size: 1px 100%, calc(100% - 2px) 100%, 1px 100%;
+        border: none;
+        line-height: 80px;
+        font-size: 28px;
+        text-align: center;
+        min-height: 100px;
+        height: 100px;
+        padding: 0 16px;
+      }
+
+      .login-body {
+        padding: 20px 0;
+
+        .ant-form label {
+          font-size: 16px;
        }
      }
    }
    @media screen and (min-width: 1370px) {
      .user-layout-login {
-        background-color: #fff;
-        padding: 5% 3%;
        .user-box{
          width: 100%;
          height: 100%;
@@ -408,12 +386,12 @@ function isMobile () {
          flex-direction: column;
          .lable-font{
            font-weight: 500;
-            color:#000;
+            //color:#000;
          }
          .title{
            position:relative;
            display: block;
-            color: #000;
+            //color: #000;
            font-size: 28px;
            font-weight: 500;
            margin: 0 0 3% 0;
@@ -429,7 +407,7 @@ function isMobile () {
            //}
          }
          .login-btn{
-            margin-top: 10px;
+            margin-top: 20px;
            font-size: 10px;
          }
          .ant-row{
@@ -441,8 +419,23 @@ function isMobile () {
    }
    @media screen and (max-width: 1366px) {
      .user-layout-login {
-        background-color: #fff;
-        padding: 4% 3% 0;
+        width: 500px;
+
+        .login-header {
+          line-height: 50px;
+          font-size: 18px;
+          text-align: center;
+          min-height: 60px;
+          height: 60px;
+          padding: 0 16px;
+        }
+
+        .login-body {
+
+          .ant-form label {
+            font-size: 13px;
+          }
+        }
        .user-box{
          width: 100%;
          height: 100%;
@@ -452,12 +445,12 @@ function isMobile () {
          flex-direction: column;
          .lable-font{
            font-weight: 700;
-            color:#000;
+            //color:#000;
          }
          .title{
            position:relative;
            display: block;
-            color: #000;
+            //color: #000;
            font-size: 20px;
            font-weight: 500;
            margin: 0 0 5% 0;
@@ -477,7 +470,7 @@ function isMobile () {
            font-size: 10px;
          }
          .ant-row{
-            margin-bottom: 3px;
+            margin-bottom: 10px;
          }
        }
      }