[update] 移动端首页、管理样式调整

2024-04-16 18:42:06 +08:00
parent 7a547ad44c
commit aff66f81bd
18 changed files with 155 additions and 186 deletions
@@ -17,8 +17,8 @@
            </a-form-item>
          </a-col>
          <a-col flex="0.88rem">
-            <span class="search-operate-btns custom-btns-box">
-              <a-button class="btn-blue" type="primary" @click="searchQuery">
+            <span class="search-operate-btns">
+              <a-button style="width: 0.88rem;" type="primary" @click="searchQuery">
                <span class="btn-text">检索设备</span>
              </a-button>
            </span>
@@ -47,11 +47,22 @@
          </common-card>
        </div>
        <!-- 实时示功图 -->
-        <div class="mb-12">
+        <div class="mb-12 indicator-diagram">
          <common-card title="实时示功图">
            <div slot="extra" class="indicator-diagram-extra" v-if="oilWellRealTimeData['实时示功图']">
              <span class="time">{{ oilWellRealTimeData['实时示功图']['时间'] }}</span>
            </div>
+            <div class="indicator-diagram-info">
+              <span class="info-row info-row-inline">
+                <span class="info-label">冲程</span>
+                <span class="info-value">{{ oilWellRealTimeData['实时示功图']['冲程'] }}m</span>
+              </span>
+              <div class="divider-vertical"></div>
+              <span class="info-row info-row-inline">
+                <span class="info-label">冲次</span>
+                <span class="info-value">{{ oilWellRealTimeData['实时示功图']['冲次'] }}次/分</span>
+              </span>
+            </div>
            <responsive-chart ref="indicatorDiagram" key="indicatorDiagram" height="2.03rem"/>
          </common-card>
        </div>
@@ -79,15 +90,15 @@
                </a-form-item>
              </a-col>
              <a-col flex="0.8rem">
-                <span class="search-operate-btns custom-btns-box">
-                  <a-button class="btn-blue bottom-search-btn mb-8" type="primary">
+                <span class="search-operate-btns">
+                  <a-button class="bottom-search-btn mb-8" style="width: 0.8rem;" type="primary">
                    <span class="btn-text">查询</span>
                  </a-button>
                  <div class="flex-between">
-                    <a-button class="btn-blue btn-blue-small" type="primary">
+                    <a-button class="icon-btn" style="margin-right: 0.08rem;" ghost type="primary">
                      <span class="btn-text"><a-icon type="left" /></span>
                    </a-button>
-                    <a-button class="btn-blue btn-blue-small" type="primary">
+                    <a-button class="icon-btn" ghost type="primary">
                      <span class="btn-text"><a-icon type="right" /></span>
                    </a-button>
                  </div>
@@ -146,15 +157,15 @@
                </a-form-item>
              </a-col>
              <a-col flex="0.8rem">
-                <span class="search-operate-btns custom-btns-box">
+                <span class="search-operate-btns">
                  <a-button class="btn-blue bottom-search-btn mb-8" type="primary">
                    <span class="btn-text">查询</span>
                  </a-button>
                  <div class="flex-between">
-                    <a-button class="btn-blue btn-blue-small" type="primary">
+                    <a-button class="icon-btn" style="margin-right: 0.08rem;" type="primary">
                      <span class="btn-text"><a-icon type="left" /></span>
                    </a-button>
-                    <a-button class="btn-blue btn-blue-small" type="primary">
+                    <a-button class="icon-btn" type="primary">
                      <span class="btn-text"><a-icon type="right" /></span>
                    </a-button>
                  </div>
@@ -180,7 +191,6 @@ import ResponsiveChart from '@comp/ResponsiveChart'
 import CommonEmpty from '@comp/CommonEmpty'
 import { getOilWellRealTimeData, getWellheadList } from '@api/systemOverview'
 import { generateBaseOption } from '@/utils/charts'
-import * as echarts from 'echarts'
 import { deviceType, wellheadType } from '@/enums/commonEnums'
 import DictPicker from '@comp/vant/DictPicker'
 import SelectPicker from '@comp/vant/SelectPicker'
@@ -344,7 +354,6 @@ export default {
          clearInterval(this.timer)
          this.timer = null
          this.hasData = false
-          return
      }
    },
    // 加载实时数据(实时示功图)(每10s请求一次)
@@ -391,12 +400,6 @@ export default {
          color: '#FF5353',
          symbol: 'none',
          smooth: true,
-          areaStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(255,83,83,0.2)' },
-              { offset: 1, color: 'rgba(255,83,83,0)' }
-            ])
-          },
          data: data['上冲程']
        },
        {
@@ -406,17 +409,10 @@ export default {
          color: '#8FC7FF',
          symbol: 'none',
          smooth: true,
-          areaStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(0,148,255,0.2)' },
-              { offset: 1, color: 'rgba(0,148,255,0)' }
-            ])
-          },
          data: data['下冲程']
        }
      ]
      // 设置数据
-      JSON.stringify(option).replaceAll('px', 'rem')
      this.$refs.indicatorDiagram && this.$refs.indicatorDiagram.updateMyChartOption(option)
    },
    // 油井下拉
@@ -525,8 +521,12 @@ export default {
 }

 // 实时示功图头部
-.indicator-diagram-extra {
-
+.indicator-diagram-info {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 0.08rem;
+}
+.indicator-diagram {
  .info-row .info-label,
  .info-row .info-value,
  .time {
@@ -538,7 +538,7 @@ export default {
  }

  .info-row .info-value {
-    color: #2EE4FD;
+    color: @primary-color;
  }
  .divider-vertical {
    width: 0.01rem;
@@ -548,4 +548,9 @@ export default {
    display: inline-block;
  }
 }
+// 只有icon的按钮，不用内边距
+.icon-btn {
+  padding: 0;
+  width: 0.36rem;
+}
 </style>
@@ -53,25 +53,25 @@
                <p>{{ item.wellheadId_dictText }}</p>
              </div>
              <div class="device-list-item-main-btns">
-                <a-button type="primary" class="mr-6"
+                <a-button type="primary bold" class="mr-6"
                          @click="handleChangeStatus(item, index)"
                >{{ item.changeDeviceStatus_dictText }}</a-button>
-                <a-button type="danger"
+                <a-button type="primary" ghost
                          @click="handleDelete(item, index)"
                >删除</a-button>
              </div>
            </div>
          </div>
          <!-- 数据大于5条显示折叠 -->
-          <div v-if="deviceData.dataSource.length > 5" class="list-toggle" @click="toggleDeviceList">
-            {{deviceData.showAll ? '收起' : '展开'}}<div class="list-toggle-arrow" :class="`list-toggle-arrow-${deviceData.showAll ? 'up' : 'down'}`"></div>
+          <div v-if="deviceData.dataSource.length > 5" class="list-toggle" @click="toggleDeviceList(!deviceData.showAll)">
+            {{deviceData.showAll ? '收起' : '展开'}}<a-icon class="list-toggle-arrow" :type="`caret-${deviceData.showAll ? 'up' : 'down'}`" />
          </div>
        </div>
      </common-card>
    </div>
    <div class="mb-12">
      <common-card title="添加设备">
-        <a-form :form="deviceForm" class="custom-vertical-form">
+        <a-form :form="deviceForm" class="custom-vertical-form manage-page-form">
          <div class="mb-12">
            <a-form-item label="设备名称">
              <a-input placeholder="请输入设备名称" :max-length="50"
@@ -83,11 +83,6 @@
                           dictCode="device_type"
                           v-decorator="['deviceType', validatorRules.deviceType]"
                           placeholder="请选择设备类型"/>
-<!--              <j-dict-select-tag :triggerChange="true"-->
-<!--                                 dictCode="device_type"-->
-<!--                                 v-decorator="['deviceType', validatorRules.deviceType]"-->
-<!--                                 placeholder="请选择设备类型">-->
-<!--              </j-dict-select-tag>-->
            </a-form-item>
            <a-form-item label="所属井口">
              <select-picker v-decorator="['wellheadId', validatorRules.wellheadId]"
@@ -95,10 +90,6 @@
                             label-key="wellheadName"
                             :list="wellheadList"
                             placeholder="请选择所属井口"/>
-<!--              <a-select v-decorator="['wellheadId', validatorRules.wellheadId]" allowClear-->
-<!--                        placeholder="请选择所属井口">-->
-<!--                <a-select-option v-for="item in wellheadList" :key="item.id" :value="item.id">{{ item.wellheadName }}</a-select-option>-->
-<!--              </a-select>-->
            </a-form-item>
            <a-form-item label="设备描述">
              <a-textarea
@@ -109,12 +100,12 @@
                v-decorator="['deviceDesc', validatorRules.deviceDesc]" />
            </a-form-item>
          </div>
-          <div class="flex-center custom-btns-box">
-            <a-button class="btn-blue btn-blue-155" @click="handleResetForm(deviceForm)" style="margin-right: 0.16rem;">
+          <div class="flex-center">
+            <a-button type="primary" ghost @click="handleResetForm(deviceForm)" style="margin-right: 0.16rem;flex: 1;">
              <img :src="require('@assets/images/icon/refresh.png')" alt="重置" class="btn-icon">
              <span class="btn-text">重置</span>
            </a-button>
-            <a-button class="btn-cyan btn-cyan-155" @click="handleAddDevice">
+            <a-button type="primary" @click="handleAddDevice" style="flex: 1;">
              <img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
              <span class="btn-text">添加</span>
            </a-button>
@@ -124,7 +115,7 @@
    </div>
    <div class="mb-12">
      <common-card title="添加井口">
-        <a-form :form="wellheadForm" class="custom-vertical-form">
+        <a-form :form="wellheadForm" class="custom-vertical-form manage-page-form">
          <div class="mb-12">
            <a-form-item label="所属作业区">
              <a-input placeholder="请输入所属作业区" :max-length="50"
@@ -159,8 +150,8 @@
                       v-decorator.trim="['wellheadName', validatorRules.wellheadName]"/>
            </a-form-item>
          </div>
-          <div class="flex-center custom-btns-box">
-            <a-button class="btn-cyan btn-cyan-327" @click="handleAddWellhead">
+          <div class="flex-center">
+            <a-button type="primary" style="flex: 1;" @click="handleAddWellhead">
              <img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
              <span class="btn-text">添加</span>
            </a-button>
@@ -366,14 +357,16 @@ export default {
      }).catch(() => {})
    },
    // 切换展开折叠列表
-    toggleDeviceList () {
+    toggleDeviceList (isOpen) {
      // 保留当前滚动高度
-      const scrollTop = document.documentElement.scrollTop
      this.deviceData.showAll = !this.deviceData.showAll
-      // 数据更新后保持原来滚动高度
-      this.$nextTick(() => {
-        document.documentElement.scrollTop = scrollTop
-      })
+      // 展开的时候，保持原来滚动高度（展开会直接滚动到表格底部）
+      if (isOpen) {
+        const scrollTop = document.documentElement.scrollTop
+        this.$nextTick(() => {
+          document.documentElement.scrollTop = scrollTop
+        })
+      }
    },
    // 添加设备
    handleAddDevice () {
@@ -527,27 +520,23 @@ export default {
      // 按钮
      &-btns {
        width: 1.46rem;
+        display: flex;
        position: absolute;
        right: 0;
        bottom: 0;
        font-family: PingFang SC, PingFang SC, sans-serif;
-        font-weight: 500;
-        font-size: 0.14rem;
-        color: #FFFFFF;
-        line-height: 0.16rem;

        /deep/.ant-btn {
+          flex: 1;
+          font-size: 0.14rem;
+          line-height: 0.16rem;
          width: 0.7rem;
          height: 0.32rem;
-          border: none;
-        }
-        /deep/.ant-btn-primary {
-          background: url("~@assets/images/componentImg/btn-blue-70.png");
-          background-size: 100% 100%;
-        }
-        /deep/.ant-btn-danger {
-          background: url("~@assets/images/componentImg/btn-red-70.png");
-          background-size: 100% 100%;
+          font-weight: 500;
+
+          &.bold {
+            font-weight: 600;
+          }
        }
      }
    }
@@ -559,38 +548,23 @@ export default {
  margin: 0.12rem auto 0;
  font-family: Rubik, Rubik, sans-serif;
  font-size: 0.12rem;
-  color: #EFEFEF;
+  color: @border-color-base;
  line-height: 0.14rem;

  .list-toggle-arrow {
+    color: @primary-color;
    display: inline-block;
-    width: 0.18rem;
-    height: 0.07rem;
-    background: url("~@assets/images/icon/list-arrow.png");
-    background-size: 100% 100%;
+    font-size: 0.14rem;
    margin-left: 0.06rem;
-
-    &-up {
-      transform: rotate(180deg);
-    }
-    &-down {
-      transform: rotate(0deg);
-    }
  }
 }
-.custom-btns-box {
-  /deep/.ant-btn {
-    &.btn-blue.btn-blue-155 {
-      width: 1.55rem;
-      background-image: url("~@assets/images/componentImg/btn-blue-155.png");
-    }
-    &.btn-cyan.btn-cyan-155 {
-      width: 1.55rem;
-      background-image: url("~@assets/images/componentImg/btn-cyan-155.png");
-    }
-    &.btn-cyan.btn-cyan-327 {
-      width: 3.27rem;
-      background-image: url("~@assets/images/componentImg/btn-cyan-327.png");
+
+// 表单边框
+.manage-page-form {
+  /deep/.ant-form-item-control:not(.has-error) {
+    .ant-input,
+    .ant-select-selection {
+      border-color: @primary-color;
    }
  }
 }
@@ -120,7 +120,7 @@
                      v-decorator="['deviceDesc', validatorRules.deviceDesc]" />
                  </a-form-item>
                </div>
-                <div class="flex-center custom-btns-box">
+                <div class="flex-center">
                  <a-button type="primary" ghost @click="handleResetForm(deviceForm)" style="margin-right: 16px;">
                    <img :src="require('@assets/images/icon/refresh.png')" alt="重置" class="btn-icon">
                    <span class="btn-text">重置</span>
@@ -162,7 +162,7 @@
                             v-decorator.trim="['wellheadName', validatorRules.wellheadName]"/>
                  </a-form-item>
                </div>
-                <div class="flex-center custom-btns-box">
+                <div class="flex-center">
                  <a-button type="primary" @click="handleAddWellhead">
                    <img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
                    <span class="btn-text">添加</span>
@@ -30,7 +30,7 @@
                </j-dict-select-tag>
              </a-form-item>
            </div>
-            <div class="flex-center custom-btns-box">
+            <div class="flex-center">
              <a-button type="primary" ghost @click="handleResetSysSettingForm" style="margin-right: 16px;">
                <img :src="require('@assets/images/icon/refresh.png')" alt="恢复默认设置" class="btn-icon">
                <span class="btn-text">恢复默认设置</span>
@@ -127,7 +127,7 @@

              </a-col>
            </a-row>
-            <div class="flex-center custom-btns-box">
+            <div class="flex-center">
              <a-button type="primary" @click="handleAddUser">
                <img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
                <span class="btn-text">添加</span>
@@ -16,7 +16,7 @@
                <a-icon slot="suffixIcon" type="caret-down" class="select-arrow" />
                <a-select-option v-for="item in singleWellList" :key="item.id" :value="item.id">{{ item.wellheadName }}</a-select-option>
              </a-select>
-              <span class="search-operate-btns custom-btns-box">
+              <span class="search-operate-btns">
                <a-button style="width: 88px;" type="primary" @click="searchQuery">
                  <img :src="require('@assets/images/icon/search.png')" alt="查询" class="btn-icon">
                  <span class="btn-text">查询</span>
@@ -93,7 +93,7 @@
              <div class="working-status-img">
                <img :src="workingStatus" alt="油井工作状态">
              </div>
-              <div class="working-status-btns custom-btns-box">
+              <div class="working-status-btns">
                <a-button @click="handleChangeWorkingCondition(true)" type="primary">远程启井</a-button>
                <a-button @click="handleChangeWorkingCondition(false)" ghost type="primary">远程停井</a-button>
                <a-button @click="handleChangeWorkingCondition(true)" ghost type="primary">频率控制</a-button>
@@ -109,14 +109,14 @@
              <span class="time">{{ oilWellRealTimeData['实时示功图']['时间'] }}</span>
              <div class="divider-vertical"></div>
              <span class="info-row info-row-inline">
-              <span class="info-label">冲程</span>
-              <span class="info-value">{{ oilWellRealTimeData['实时示功图']['冲程'] }}m</span>
-            </span>
+                <span class="info-label">冲程</span>
+                <span class="info-value">{{ oilWellRealTimeData['实时示功图']['冲程'] }}m</span>
+              </span>
              <div class="divider-vertical"></div>
              <span class="info-row info-row-inline">
-              <span class="info-label">冲次</span>
-              <span class="info-value">{{ oilWellRealTimeData['实时示功图']['冲次'] }}次/分</span>
-            </span>
+                <span class="info-label">冲次</span>
+                <span class="info-value">{{ oilWellRealTimeData['实时示功图']['冲次'] }}次/分</span>
+              </span>
            </div>
            <responsive-chart ref="indicatorDiagram" key="indicatorDiagram" height="200px"/>
          </common-card>
@@ -692,7 +692,7 @@ export default {
      const legendData = ['产油量(t/d)', '产液量(m³/d)']
      const option = generateBaseOption()
      option.legend.data = legendData
-      option.xAxis[0].data = data['X轴']
+      option.xAxis[0].data = data.xAxis
      option.yAxis[0].name = '产油量(t/d) / 产液量(m³/d)'
      option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 105]
      option.series = [
@@ -118,7 +118,7 @@
 </template>
 <script>
 import { mapActions } from 'vuex'
-import { timeFix } from '@/utils/util'
+// import { timeFix } from '@/utils/util'
 import Vue from 'vue'
 import { ACCESS_TOKEN/* , ENCRYPTED_STRING, USER_INFO */ } from '@/store/mutation-types'
 import { postAction, getAction } from '@/api/manage'
@@ -142,8 +142,8 @@ export default {
        smsSendBtn: false
      },
      validatorRules: {
-        username: { rules: [{ required: true, message: '请输入用户名!' }, { validator: this.handleUsernameOrEmail }] },
-        password: { rules: [{ required: true, message: '请输入密码!', validator: 'click' }] },
+        username: { rules: [{ required: true, message: '请输入用户名' }, { validator: this.handleUsernameOrEmail }] },
+        password: { rules: [{ required: true, message: '请输入密码', validator: 'click' }] },
        mobile: { rules: [{ validator: this.validateMobile }] },
        captcha: { rule: [{ required: true, message: '请输入验证码!' }] },
        inputCode: { rules: [{ required: true, message: '请输入验证码!' }] }
@@ -371,8 +371,8 @@ function isMobile () {
  }
  // pc端背景
  .main:not(.main-mobile) {
-    background: #001125 url("~@/assets/mobile-login-bg.png") no-repeat;
-    background-position: left top;
+    background: #001125 url("~@/assets/login-bg.png") no-repeat;
+    background-position: 8vw 8vh;
  }
  .main{
    height: 100%;
@@ -524,9 +524,8 @@ function isMobile () {
        display: block;
        width: 100%;
        height: 2.4rem;
-        background: url("~@/assets/mobile-login-bg.png") no-repeat;
-        background-position-y: -0.44rem;
-        background-size: cover;
+        background: url("~@/assets/login-bg.png") no-repeat;
+        background-size: 3.75rem;
      }

      .system-title {