[update] PC端样式调整

public/index.html

@@ -141,7 +141,7 @@
       top: 0;
       width: 51%;
       height: 100%;
-      background: #0094FF;
+      background: #8FC7FF;
       /* Old browsers */
       z-index: 1000;
       -webkit-transform: translateX(0);
@@ -230,11 +230,11 @@
       border-radius:3px;
     }
     ::-webkit-scrollbar-thumb{
-      background: linear-gradient(180deg, #0094FF 0%, #2EE4FD 100%);
+      background: #647C97;
       border-radius:3px;
     }
     ::-webkit-scrollbar-thumb:hover{
-      background: linear-gradient(180deg, #0094FF 0%, #2EE4FD 100%);
+      background: #647C97;
     }
     ::-webkit-scrollbar-corner {
       background: transparent;

src/assets/less/common.less

@@ -1,7 +1,9 @@
 @import "./modifyLessVars.less";
-@custom-cyan: #2EE4FD;
+// 阿里妈妈数黑体
-@custom-red: #FF5353;
+@font-face {
-
+  font-family: 'Alimama ShuHeiTi';
+  src: url('~@assets/font/AlimamaShuHeiTi-Bold.ttf') format('truetype');
+}
 /*列表上方操作按钮区域*/
 .ant-card-body .table-operator {
   //margin-bottom: 8px;
@@ -87,16 +89,16 @@
 }
 
 /* 表格样式begin */
-.ant-table .ant-table-header,
+.ant-table .ant-table-header tr > th,
-.ant-table .ant-table-thead {
+.ant-table .ant-table-thead tr > th {
-  background: @component-background linear-gradient(180deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0.2) 100%) no-repeat;
+  background: @background-black;
-  background-size: 100% 40px;
 }
 .ant-table.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body,
 .ant-table .ant-table-tbody {
-  background: @component-background linear-gradient(180deg, #001B36 0%, rgba(0,148,255,0.2) 100%);
+  background: #001125;
 }
-.ant-table .ant-table-thead > tr > th,
+.ant-table .ant-table-header,
+.ant-table .ant-table-thead,
 .ant-table .ant-table-fixed-left table,
 .ant-table .ant-table-fixed-right table,
 .ant-table .ant-table-fixed .ant-table-thead {
@@ -121,7 +123,7 @@
   line-height: 20px;
 }
 .ant-table.ant-table-bordered.ant-table-fixed-header .ant-table-scroll .ant-table-header.ant-table-hide-scrollbar .ant-table-thead > tr:only-child > th:last-child {
-  border-right-color: @primary-color;
+  border-right-color: @border-color-base;
   border-radius: 0;
 }
 // 去圆角
@@ -156,12 +158,12 @@ div.ant-table table,
   }
   .ant-pagination-prev .ant-pagination-item-link,
   .ant-pagination-next .ant-pagination-item-link {
-    border-color: @primary-color;
+    border-color: @border-color-base;
     color: @gray;
   }
   .ant-pagination-jump-prev,
   .ant-pagination-jump-next {
-    border: @primary-color 1px solid;
+    border: @border-color-base 1px solid;
     min-width: 24px;
     margin-left: 4px;
     margin-right: 4px;
@@ -183,14 +185,14 @@ div.ant-table table,
     }
 
     &:not(.ant-pagination-item-active) {
-      border-color: @primary-color;
+      border-color: @border-color-base;
     }
   }
   .ant-pagination-item-active {
-    background: linear-gradient( 180deg, rgba(0,148,255,0) 0%, rgba(0,148,255,0.8) 100%);
+    background: @primary-color;
 
-    & > a {
+    & > a, & > a:hover {
-      color: @text-color;
+      color: @text-black;
     }
   }
   .ant-select-arrow {
@@ -213,6 +215,10 @@ div.ant-table table,
 /* 复选框end */
 
 /* 搜索框begin */
+input.ant-input,
+textarea.ant-input {
+  background-color: transparent;
+}
 .input-search-suffix {
   font-size: 0;
   cursor: pointer;
@@ -223,49 +229,24 @@ div.ant-table table,
 /* 输入框end */
 
 /* 下拉框begin */
-.ant-select-selection--multiple .ant-select-selection__choice {
-  color: @text-color;
-  background-color: @primary-1;
-  border: 1px solid @border-color-base;
-  border-radius: 2px;
-}
-.ant-select-selection--multiple .ant-select-selection__choice__remove {
-  color: @text-color;
-}
-.ant-select-selection--multiple .ant-select-selection__choice__remove:hover {
-  color: @text-color !important;
-}
-
 .ant-select-dropdown-menu-item-selected,
 .ant-select-dropdown-menu-item-selected:hover {
   background-color: @primary-2;
   color: @text-color;
 }
-// 箭头
-.ant-select-arrow {
-  display: none;
-  position: relative;
-}
-.ant-select-arrow::after {
-  top: 0;
-  left: 0;
-  width: 12px;
-  height: 12px;
-  content: '';
-  display: block;
-  position: absolute;
-  background: url("~@/assets/images/componentImg/arrow.png") no-repeat center center;
-  background-size: 100%;
-  transform: rotate(0deg);
-  transition: transform .3s;
-}
-.ant-select-open .ant-select-arrow::after {
-  transform: rotate(180deg);
-}
 // 删除
 .ant-select-selection:hover .ant-select-selection__clear {
   color: @text-color-secondary;
 }
+// 箭头颜色（配合插槽使用<a-icon slot="suffixIcon" type="caret-down" class="select-arrow" />）
+.ant-select .select-arrow {
+  color: @primary-color;
+  font-size: 14px;
+}
+.ant-select .ant-select-selection {
+  border-radius: 2px;
+  background-color: transparent;
+}
 /* 下拉框end */
 
 /* 表单禁用样式begin */
@@ -297,166 +278,71 @@ div.ant-table table,
   color: @text-color !important;
 }
 
-// 组件背景
-.ant-input,
-.ant-select-selection
-{
-  //background: url("~@assets/images/componentImg/input.png") no-repeat center center !important;
-  //background-size: 110% calc(100% + 4px) !important;
-  background: linear-gradient(to bottom, rgba(0, 89, 153, 0) 0%, rgba(0, 148, 255, 0.2) 100%) !important;
-}
 // 按钮样式
-.custom-btns-box {
+button.ant-btn {
-  button.ant-btn {
+  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi, sans-serif;
-    .btn-icon {
+  font-size: 14px;
-      margin-right: 3px;
+  line-height: 20px;
-      margin-bottom: 3px;
+  border-radius: 2px;
-      width: 14px;
-    }
-    .btn-text {
-      font-family: PingFang SC, PingFang SC, sans-serif;
-      font-weight: 500;
-      font-size: 14px;
-      color: #FFFFFF;
-      line-height: 16px;
-    }
 
-    // 蓝色按钮
+  .btn-icon {
-    &.btn-blue {
+    margin-right: 4px;
-      background: url("~@assets/images/componentImg/btn-blue.png") no-repeat center center;
+    margin-bottom: 2px;
-      width: 88px;
+    width: 14px;
-    }
+    height: 14px;
-    &.btn-blue-long {
+  }
-      background: url("~@assets/images/componentImg/btn-blue-long.png") no-repeat center center;
+  &.ant-btn-primary {
-      width: 128px;
+    background: #8FC7FF;
-    }
+    color: @text-black;
-    // 青色按钮
-    &.btn-cyan {
-      background: url("~@assets/images/componentImg/btn-cyan.png") no-repeat center center;
-      width: 88px;
-    }
-    &.btn-cyan-medium {
-      background: url("~@assets/images/componentImg/btn-cyan-medium.png") no-repeat center center;
-      width: 108px;
-    }
 
-    // 按钮公共样式
+    // 透明状态（ghost）
-    &.btn-blue,
+    &.ant-btn-background-ghost {
-    &.btn-cyan,
+      color: @primary-color;
-    &.btn-blue-long,
+      background: transparent;
-    &.btn-cyan-medium {
+      border: 1px solid #8FC7FF;
-      border: none !important;
-      background-size: 100% @btn-height-base;
     }
   }
 }
-.ant-btn {
+// 移动端rem
-  &.primary-btn,
-  &.primary-btn:hover,
-  &.primary-btn:focus {
-    width: 88px;
-    height: 32px;
-    background: linear-gradient( 180deg, rgba(0,148,255,0) 0%, rgba(0,148,255,0.6) 100%);
-    border-radius: 2px 2px 2px 2px;
-    border: 1px solid #0094FF;
-    color: @text-color;
-  }
-  &.danger-btn,
-  &.danger-btn:hover,
-  &.danger-btn:focus {
-    width: 88px;
-    height: 32px;
-    background: linear-gradient( 0deg, rgba(255,83,83,0.6) 00%, rgba(255,83,83,0) 100%);
-    border-radius: 2px 2px 2px 2px;
-    border: 1px solid #FF5353;
-    color: @text-color;
-  }
-
-  &.ant-btn-primary,
-  &.ant-btn-primary:hover,
-  &.ant-btn-primary:focus {
-    background: linear-gradient( 180deg, rgba(0,148,255,0) 0%, rgba(0,148,255,0.6) 100%);
-    border: 1px solid #0094FF;
-    color: @text-color;
-  }
-  &.ant-btn-primary[disabled],
-  &.ant-btn-primary[disabled]:hover,
-  &.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-danger,
-  &.ant-btn-danger:hover,
-  &.ant-btn-danger:focus {
-    background: linear-gradient( 0deg, rgba(255,83,83,0.6) 00%, rgba(255,83,83,0) 100%);
-    border: 1px solid #FF5353;
-    color: @text-color;
-  }
-}
 .mobile-html {
-  .ant-btn {
+  button.ant-btn {
-    font-size: 0.14rem;
+    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi, sans-serif;
-    line-height: 0.16rem;
+    font-size: 14px;
-    height: 0.36rem;
+    line-height: 20px;
+    border-radius: 2px;
+
+    .btn-icon {
+      margin-right: 4px;
+      margin-bottom: 2px;
+      width: 14px;
+      height: 14px;
+    }
+    &.ant-btn-primary {
+      background: #8FC7FF;
+      color: @text-black;
+
+      // 透明状态（ghost）
+      &.ant-btn-background-ghost {
+        color: @primary-color;
+        background: transparent;
+        border: 1px solid #8FC7FF;
+      }
+    }
   }
   .custom-btns-box {
-    .ant-btn {
+    button.ant-btn {
       .btn-icon {
-        margin-right: 0.03rem;
+        margin-right: 0.04rem;
-        margin-bottom: 0.03rem;
+        margin-bottom: 0.02rem;
         width: 0.14rem;
-      }
+        height: 0.14rem;
-      .btn-text {
-        font-size: 0.14rem;
-        line-height: 0.16rem;
-      }
-      // 蓝色按钮
-      &.btn-blue {
-        width: 0.88rem;
-      }
-      &.btn-blue-long {
-        width: 1.28rem;
-      }
-      &.btn-blue-small {
-        width: 0.36rem;
-      }
-      // 青色按钮
-      &.btn-cyan {
-        width: 0.88rem;
-      }
-      &.btn-cyan-medium {
-        width: 1.08rem;
-      }
-      &.btn-blue,
-      &.btn-cyan,
-      &.btn-blue-small,
-      &.btn-blue-long,
-      &.btn-cyan-medium {
-        background-size: 100% 0.36rem;
       }
     }
-  }
+    button.ant-btn.ant-btn-primary {
-
+      border-radius: 0.02rem;
-  .ant-btn.primary-btn,
+      font-size: 0.14rem;
-  .ant-btn.primary-btn:hover,
+      line-height: 0.2rem;
-  .ant-btn.primary-btn:focus,
+    }
-  .ant-btn.danger-btn,
-  .ant-btn.danger-btn:hover,
-  .ant-btn.danger-btn:focus {
-    width: 0.88rem;
-    height: 0.32rem;
-    border-radius: 0.02rem;
-    border-width: 0.01rem;
-  }
-
-  .ant-btn.ant-btn-primary,
-  .ant-btn.ant-btn-primary:hover,
-  .ant-btn.ant-btn-primary:focus,
-  .ant-btn.ant-btn-danger,
-  .ant-btn.ant-btn-danger:hover,
-  .ant-btn.ant-btn-danger:focus {
-    border-width: 0.01rem;
   }
 }
 /* 部分组件end */
@@ -496,12 +382,12 @@ div.ant-table table,
 .divider-vertical {
   width: 1px;
   margin: 0 20px;
-  background-color: rgba(108, 128, 151, 0.3);
+  background-color: @background-black;
 }
 .divider-horizontal {
   height: 1px;
   margin: 20px 0;
-  background-color: rgba(108, 128, 151, 0.3);
+  background-color: @background-black;
 }
 
 // 移动端下的样式
@@ -526,7 +412,7 @@ div.ant-table table,
   font-family: PingFang SC, PingFang SC, sans-serif;
   font-weight: 400;
   font-size: 14px;
-  color: @text-color-secondary;
+  color: #D0DEEE;
   line-height: 16px;
 }
 .info-row .info-label::after {
@@ -605,7 +491,7 @@ div.ant-table table,
   line-height: 0.32rem;
 }
 
-// 标题加渐变背景
+// 标题加渐变背景(按需给伪元素设置max-width，否则会超出宽度)
 .title-background {
   margin-bottom: 10px;
   font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
@@ -620,15 +506,14 @@ div.ant-table table,
     content: '';
     display: block;
     position: absolute;
-    top: 4px;
+    top: 6px;
-    left: 0;
+    left: -4px;
     width: calc(100% + 8px);
     height: 16px;
-    background: linear-gradient( 90deg, rgba(0,116,202,0.1) 0%, #0074CA 50%, rgba(0,116,202,0) 100%);
+    background: @background-black;
   }
 
   .title-background-text {
-    margin-left: 4px;
     position: relative;
     height: 22px;
   }
@@ -772,14 +657,14 @@ div.ant-table table,
 
 // 表格中的tag对齐inline-block导致错位，父元素字体调整为0，解决tag对齐问题
 .ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td:has( > .tag-blue),
-.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td:has( > .tag-cyan)
+.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td:has( > .tag-green)
 {
   padding: 0 !important;
   font-size: 0;
 }
 .tag-blue {
   background: rgba(0,148,255,0.2);
-  color: rgba(0,148,255,1);
+  color: @primary-color;
   border-radius: 2px;
   display: inline-block;
   height: 24px;
@@ -788,9 +673,9 @@ div.ant-table table,
   padding: 0 12px;
 
 }
-.tag-cyan {
+.tag-green {
-  background: rgba(46,228,253,0.2);
+  background: rgba(162,255,138,0.2);
-  color: rgba(46,228,253);
+  color: #A2FF8A;
   border-radius: 2px;
   display: inline-block;
   height: 24px;
@@ -810,63 +695,13 @@ div.ant-table table,
 .custom-content-card {
   padding: 12px 16px;
   position: relative;
-  border: 1px solid;
+  border: 1px solid #617C99;
-  background: linear-gradient( 90deg, rgba(0,148,255,0.4) 0%, rgba(0,148,255,0.05) 100%);
+  background: rgba(143,199,255,0.1);
-  border-image: linear-gradient(85deg, rgba(71, 137, 233, 1), rgba(46, 228, 253, 1), rgba(54, 109, 200, 1)) 1 1;
-  border-left: none;
-  border-right: none;
-
-  // 伪元素装饰
-  &::before,
-  &::after {
-    pointer-events: none;
-    user-select: none;
-    content: '';
-    display: block;
-    position: absolute;
-  }
-
-  // 四个角
-  &::before {
-    top: -2px;
-    left: -1px;
-    width: calc(100% + 2px);
-    height: calc(100% + 4px);
-    background-image: url("~@/assets/images/systemOverview/equipmentManagement/left-top.png"),
-    url("~@/assets/images/systemOverview/equipmentManagement/left-bottom.png"),
-    url("~@/assets/images/systemOverview/equipmentManagement/right-top.png"),
-    url("~@/assets/images/systemOverview/equipmentManagement/right-bottom.png");
-    background-repeat: no-repeat;
-    background-position: left top, left bottom, right top, right bottom;
-  }
-  // 两侧的边框
-  &::after {
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    border: 1px solid;
-    border-top: none;
-    border-bottom: none;
-    border-image: linear-gradient(0deg, rgba(46,228,253,0) 0%, #2EE4FD 50%, rgba(46,228,253,0) 100%) 1;
-  }
 }
 // 移动端-内容卡片
 .mobile-html {
   .custom-content-card {
     padding: 0.1rem 0.08rem;
     border-width: 0.01rem;
-
-    // 四个角
-    &::before {
-      top: -0.02rem;
-      left: -0.01rem;
-      width: calc(100% + 0.02rem);
-      height: calc(100% + 0.04rem);
-    }
-    // 两侧的边框
-    &::after {
-      border-width: 0.01rem;
-    }
   }
 }

src/assets/less/modifyLessVars.js

@@ -2,24 +2,24 @@ module.exports = {
   // 背景色
   'component-background': '#001B36',
   'background-color-base': 'rgba(0,27,54,0.67)', // 基础背景色
-  'background-color-light': 'rgba(0, 148, 255, 0.30)', // 基础高亮背景色
+  'background-color-light': 'rgba(143,199,255,0.1)', // 基础高亮背景色
 
   // 边框色
-  'border-color-base': '#0094FF',
+  'border-color-base': '#647C97',
-  'border-color-split': '#0094FF',
+  'border-color-split': '#647C97',
 
   // 字体颜色
   'heading-color': 'rgba(255, 255, 255, 0.96)',
   'text-color': 'rgba(255, 255, 255, 0.96)',
-  'text-color-secondary': '#A5B8CE',
+  'text-color-secondary': '#EFEFEF',
 
   // 主题色
-  'primary-1': 'rgba(0, 148, 255, 0.30)',
+  'primary-1': 'rgba(143,199,255,0.2)',
-  'primary-2': 'rgba(0, 148, 255, 0.10)',
+  'primary-2': 'rgba(143,199,255,0.1)',
 
   // 表格相关
-  'table-selected-row-bg': 'rgba(0, 148, 255, 0.30)', // 勾选行背景色
+  'table-selected-row-bg': 'rgba(143,199,255,0.2)', // 勾选行背景色
-  'table-expanded-row-bg': 'rgba(0, 148, 255, 0.10)', // 扩展行背景色
+  'table-expanded-row-bg': 'rgba(143,199,255,0.1)', // 扩展行背景色
 
   // 高度调整
   'btn-height-base': '36px',
@@ -31,6 +31,6 @@ module.exports = {
   // vant
   white: '#001B36',
   black: 'rgba(255, 255, 255, 0.96)',
-  red: '#0094FF',
+  red: '#8FC7FF',
   'dialog-has-title-message-text-color': 'rgba(255, 255, 255, 0.96)'
 }

src/assets/less/modifyLessVars.less

@@ -1,29 +1,34 @@
-@primary-color: #0094FF;
+@primary-color: #8FC7FF;
 /* 背景色 */
 @component-background: #001B36;
 @background-color-base: #001B36AA;
-@background-color-light: rgba(0, 148, 255, 0.30);
+@background-color-light: rgba(143,199,255,0.1);
 
 /* 边框色 */
-@border-color-base: #0094FF;
+@border-color-base: #647C97;
-@border-color-split: #0094FF;
+@border-color-split: #647C97;
 
 /* 字体颜色 */
 @heading-color: rgba(255, 255, 255, 0.96);
 @text-color: rgba(255, 255, 255, 0.96);
-@text-color-secondary: #A5B8CE;
+@text-color-secondary: #EFEFEF;
 
 /* 主题色 */
-@primary-1: rgba(0, 148, 255, 0.30);
+@primary-1: rgba(143,199,255,0.2);
-@primary-2: rgba(0, 148, 255, 0.10);
+@primary-2: rgba(143,199,255,0.1);
 
 /* 表格相关 */
-@table-selected-row-bg: rgba(0, 148, 255, 0.30);
+@table-selected-row-bg: rgba(143,199,255,0.2);
-@table-expanded-row-bg: rgba(0, 148, 255, 0.10);
+@table-expanded-row-bg: rgba(143,199,255,0.1);
 
 /* 按钮 */
 @btn-height-base: 36px;
 @input-height-base: 36px;
 
 /* 其他 */
-@red-6: #FF5353;
+@red-6: #FF5353;
+
+@custom-cyan: #2EE4FD;
+@custom-red: #FF5353;
+@text-black: #1D2632;
+@background-black: #2A3644;

src/components/CommonCard.vue

@@ -33,42 +33,19 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@import "~@assets/less/common.less";
+@import "~@assets/less/modifyLessVars.less";
 .common-card {
   position: relative;
   height: 100%;
-  border: 1px solid rgba(0,148,255,0.24);
+  border: 1px solid @border-color-base;
-  border-bottom: 1px @primary-color solid;
+  background-color: transparent;
-
-  // 左下右下高亮边框
-  &::before, &::after {
-    position: absolute;
-    content: '';
-    display: block;
-    width: 3%;
-    min-width: 16px;
-    height: 1px;
-    bottom: -1px;
-    background-color: #2EE4FD;
-  }
-  &::before {
-    left: 0;
-  }
-  &::after {
-    right: 0;
-  }
 
   /deep/ .ant-card-head {
-    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;
-    min-height: 43px;
+    min-height: 36px;
-    height: 43px;
+    height: 36px;
     padding: 0 16px;
+    border-bottom: 1px solid @border-color-base;
   }
   /deep/ .ant-card-head-title {
     padding: 0;
@@ -77,7 +54,6 @@ export default {
     font-size: 14px;
     color: @text-color;
     line-height: 36px;
-    text-shadow: 1px 1px 0 rgba(21,154,255,0.7), 1px 1px 0 #000000;
   }
   /deep/ .ant-card-head-title::before {
     content: '';
@@ -88,7 +64,7 @@ export default {
     background-size: 100% 100%;
   }
   /deep/ .ant-card-body {
-    padding: 13px 20px 20px !important;
+    padding: 20px !important;
     height: calc(100% - 42px);
   }
   /deep/ .ant-card-extra {
@@ -116,7 +92,7 @@ export default {
   font-size: 14px;
   color: @text-color;
   line-height: 16px;
-  text-shadow: 1px 1px 0px rgba(21,154,255,0.7), 1px 1px 0px #000000;
+  text-shadow: 1px 1px 0 rgba(21,154,255,0.7), 1px 1px 0 #000000;
 }
 // 如果是移动端设置为rem单位
 .mobile-html {
@@ -155,6 +131,7 @@ export default {
     /deep/ .ant-card-body {
       padding: 0.08rem 0.12rem 0.12rem !important;
       height: calc(100% - 0.42rem);
+      min-height: 1.6rem;
     }
   }
   .card-title {

src/components/CommonCardInfo.vue

@@ -64,8 +64,13 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import "~@assets/less/modifyLessVars.less";
 .info-row {
   height: 19px;
+
+  .info-label {
+    color: @text-color-secondary;
+  }
   .info-value {
     max-width: 50%;
   }

src/components/CommonEmpty.vue

@@ -17,7 +17,7 @@ export default {
   .empty-text {
     font-family: PingFang SC, PingFang SC, sans-serif;
     font-weight: 400;
-    color: #0094FF;
+    color: #8FC7FF;
   }
 }
 // 移动端字体大小

src/components/dict/JDictSelectTag.vue

@@ -8,6 +8,7 @@
   </a-radio-group>
 
   <a-select v-else-if="tagType==='select'" :getPopupContainer = "getPopupContainer" :placeholder="placeholder" :disabled="disabled" :value="getValueSting" v-bind="$attrs" @change="handleInput">
+    <a-icon slot="suffixIcon" type="caret-down" class="select-arrow" />
     <a-select-option :value="undefined">请选择</a-select-option>
     <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
       <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
@@ -73,6 +74,7 @@ export default {
       // 优先从缓存中读取字典配置
       if (getDictItemsFromCache(this.dictCode)) {
         this.dictOptions = (getDictItemsFromCache(this.dictCode) || []).filter(item => !this.filterDictValues.includes(item.value))
+        this.$emit('updateDictOptions', this.dictOptions)
         return
       }
 
@@ -80,6 +82,7 @@ export default {
       ajaxGetDictItems(this.dictCode, null).then((res) => {
         if (res.success) {
           this.dictOptions = (res.result || []).filter(item => !this.filterDictValues.includes(item.value))
+          this.$emit('updateDictOptions', this.dictOptions)
         }
       })
     },

src/components/lazy_vant.js

@@ -8,7 +8,9 @@ import {
   Popup,
   Dialog
 } from 'vant'
-import 'vant/lib/index.less'
+import 'vant/lib/picker/index.less'
+import 'vant/lib/popup/index.less'
+import 'vant/lib/dialog/index.less'
 Vue.use(Picker)
 Vue.use(Popup)
 Vue.prototype.$vantDialog = Dialog

src/components/menu/FirstLevelMenu.vue

@@ -142,7 +142,7 @@ export default {
   color: #fff;
   display: flex;
   justify-content: space-between;
-  padding: 12px 0;
+  margin-top: 5px;
 
   .nav-menu-list {
     display: flex;
@@ -155,7 +155,7 @@ export default {
     li {
       cursor: pointer;
       box-sizing: border-box;
-      margin: 0 20px;
+      margin: 0 22px;
       max-width: 68px;
        // 1366下调整
        @media screen and (max-width: 1367px) {
@@ -167,7 +167,7 @@ export default {
         width: 68px;
         height: 68px;
         background-image: url("~@/assets/images/menu/top-menu.png");
-        background-size: 100%;
+        background-size: 48px 48px;
         background-repeat: no-repeat;
         background-position: center center;
         font-size: 0;
@@ -194,7 +194,6 @@ export default {
         color: rgba(255,255,255,0.96);
         line-height: 19px;
         text-shadow: 0 4px 4px rgba(0,0,0,0.25);
-        transform: translateY(-10px);
       }
 
       // 选中的样式
@@ -207,7 +206,7 @@ export default {
           font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
           font-weight: bold;
           font-size: 16px;
-          color: #FFC97A;
+          color: @primary-color;
           line-height: 19px;
           text-shadow: 0 4px 4px rgba(0,0,0,0.25);
         }

src/components/menu/MobileMenu.vue

@@ -136,7 +136,7 @@ export default {
       .menu-item {
         position: relative;
         background-image: url("~@/assets/images/menu/top-menu.png");
-        background-size: 100%;
+        background-size: 100% 100%;
         background-repeat: no-repeat;
         background-position: center center;
         width: 0.4rem;
@@ -158,8 +158,6 @@ export default {
         font-size: 0.1rem;
         color: #FFC97A;
         line-height: 0.12rem;
-        font-style: normal;
-        text-transform: none;
         word-break: break-all;
         overflow: hidden;
         text-overflow: ellipsis;

src/components/menu/SideMenu.vue

@@ -20,7 +20,6 @@
     <img v-if='!collapsed' src='../../assets/bgImg.png' alt='' class='bgImg'>
     <div v-else></div>
 
-
     <!--    <a-icon-->
 <!--      class='bgImg'-->
 <!--      v-if="device==='mobile'"-->
@@ -166,6 +165,7 @@ export default {
 
 <!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
 <style lang="less">
+@import "~@assets/less/modifyLessVars.less";
 .trigger {
   width: 53px;
   font-size: 22px;
@@ -187,8 +187,8 @@ export default {
 }
 .bgImg {
   position: fixed;
-  bottom: 0px;
+  bottom: 0;
-  left: 0px;
+  left: 0;
   width: 208px;
   z-index: -1;
   transition: width 1.5s linear 1s;

src/components/page/GlobalHeader.vue

@@ -7,9 +7,7 @@
 
     <!--  pc端头部  -->
     <div v-if="device === 'desktop'" class="header" :class="theme">
-      <span class="system-title">
+      <span class="system-title">昆鸿设备管理平台</span>
-        <img :src="require('@/assets/images/system-title.png')" alt=''>
-      </span>
       <span class="system-page-title">{{$route.meta.title}}</span>
       <span class="system-time">{{ systemTime }}</span>
       <user-menu :theme="theme"/>
@@ -21,6 +19,7 @@
     <div v-else-if="device === 'mobile'" class="mobile-header" :class="theme">
       <div class="mobile-header-left">
       </div>
+      <div class="mobile-header-center">{{ headerTitle || $route.meta.title }}</div>
       <div class="mobile-header-right">
         <a-dropdown>
           <a class="ant-dropdown-link">
@@ -111,6 +110,17 @@ export default {
       this.getBreadcrumb()
     }
   },
+  computed: {
+    // 移动端头部标题
+    昆鸿设备管理系统 () {
+      const hideSystemTitlePathList = [
+        // 我的页面
+        '/mobile/mine'
+      ]
+      const path = this.$route.path
+      return hideSystemTitlePathList.includes(path) || '昆鸿设备管理系统'
+    }
+  },
   created () {
     /* 先设置当前时间，如果没有定时器，就添加一个定时器更新当前时间 */
     this.systemTime = moment().format('YYYY-MM-DD HH:mm:ss')
@@ -203,13 +213,8 @@ export default {
     font-weight: bold;
     font-size: 30px;
     line-height: 35px;
-    text-shadow: 1px 2px 1px rgba(0,0,0,0.25);
     text-align: center;
-    font-style: normal;
+    color: #fff;
-    text-transform: none;
-    background: linear-gradient(180deg, #FFFFFF 0%, #A6D1FF 100%);
-    -webkit-background-clip: text;
-    color: transparent;
   }
   .system-page-title {
     user-select: none;
@@ -221,14 +226,8 @@ export default {
     font-weight: bold;
     font-size: 28px;
     line-height: 33px;
-    text-shadow: 1px 2px 1px rgba(0,0,0,0.25);
+    text-align: center;
-    text-align: left;
+    color: #fff;
-    font-style: normal;
-    color: #eee;
-    //text-transform: none;
-    //background: linear-gradient(180deg, #FFFFFF 0%, #A6D1FF 100%);
-    //-webkit-background-clip: text;
-    //color: transparent;
   }
   .system-time {
     user-select: none;
@@ -287,7 +286,7 @@ export default {
     height: 158px;
     position: relative;
     background-color: #001125;
-    background-image: url("~@/assets/images/header/header-bg.png");
+    background-image: url("~@assets/images/header/header-bg.png");
     background-position: center top;
     background-size: auto 100%;
     background-repeat: no-repeat;
@@ -295,11 +294,8 @@ export default {
   // 移动端
   .global-header-mobile {
     height: 0.44rem;
+    line-height: 0.44rem;
     background-color: #001125;
-    background-repeat: no-repeat;
-    background-image: url("~@/assets/images/system-title.png");
-    background-position: center center;
-    background-size: 1.44rem;
   }
   .mobile-header {
     display: flex;
@@ -310,6 +306,13 @@ export default {
       width: 0.44rem;
     }
 
+    .mobile-header-center {
+      font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
+      font-weight: bold;
+      font-size: 0.18rem;
+      color: rgba(255,255,255,0.96);
+    }
+
     .mobile-header-right {
       width: 0.44rem;
       text-align: center;

src/components/page/GlobalLayout.vue

@@ -18,7 +18,7 @@
       <!--   内容布局   -->
       <a-layout :style="{backgroundColor: '#001125', padding: '24px 24px 0'}" v-if="device === 'desktop'">
         <!--  左侧二级菜单    -->
-        <a-layout-sider class="layout-sider" v-if="menuChildren" width="174">
+        <a-layout-sider class="layout-sider" v-if="menuChildren" width="172">
           <s-menu
             :collapsed="collapsed"
             :menu="menuChildren"
@@ -183,6 +183,7 @@ export default {
 </style>
 
 <style lang="less">
+@import "~@assets/less/modifyLessVars.less";
   body {
     // 打开滚动条:有即显示，无则不显示
     overflow-y: auto;
@@ -745,59 +746,43 @@ export default {
     .ant-menu-vertical .ant-menu-item::after, .ant-menu-vertical-left .ant-menu-item::after, .ant-menu-vertical-right .ant-menu-item::after, .ant-menu-inline .ant-menu-item::after {
       display: none;
     }
+    .ant-menu {
+      background-color: transparent;
+    }
     .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
       border-right: none;
     }
     .ant-menu-item {
+      padding: 0 16px !important;
       margin-bottom: 24px !important;
       display: flex;
       align-items: center;
       justify-content: center;
       text-align: center;
+      border: 1px solid @primary-color;
       background-color: transparent;
-      background-image: url("~@assets/images/menu/menu.png");
-      background-size: 100%;
-      background-repeat: no-repeat;
-      background-position: center right;
 
       & > a, &:hover > a {
-        font-style: italic;
         font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
         font-weight: bold;
         font-size: 16px;
-        color: rgba(255,255,255,0.96);
+        color: @primary-color;
         line-height: 24px;
-        text-shadow: 0 0 2px rgba(0,0,0,0.6);
+        text-align: center;
-        text-align: left;
-        text-transform: none;
-        color: #fff;
-        letter-spacing: 1px;
-      }
-      &:active {
-        background-color: transparent;
-        background-image: url("~@assets/images/menu/menu.png");
-        background-size: 100%;
-        background-repeat: no-repeat;
-        background-position: center right;
-      }
-      &.ant-menu-item-selected {
-        background-image: url("~@assets/images/menu/menu-act.png");
       }
     }
     .ant-menu-vertical .ant-menu-item::after, .ant-menu-vertical-left .ant-menu-item::after, .ant-menu-vertical-right .ant-menu-item::after, .ant-menu-inline .ant-menu-item::after {
       display: none;
     }
     .ant-menu-vertical > .ant-menu-item, .ant-menu-vertical-left > .ant-menu-item, .ant-menu-vertical-right > .ant-menu-item, .ant-menu-inline > .ant-menu-item, .ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-vertical-left > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-vertical-right > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
-      height: 46px;
+      height: 40px;
-      line-height: 46px;
+      line-height: 40px;
-    }
-    // 背景色设置透明
-    .ant-menu, .ant-menu-submenu > .ant-menu {
-      background-color: transparent;
-      color: #fff;
     }
     .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
-      background-color: transparent;
+      background-color: @primary-color;
+      & > a {
+        color: @text-black;
+      }
     }
   }
 </style>

src/components/vant/DictPicker.vue

@@ -6,6 +6,7 @@
                        :open="false"
                        ref="dictSelect"
                        :value="value"
+                       @updateDictOptions="updateDictOptions"
                        @click.capture.native="onOpen"></j-dict-select-tag>
     <!-- 移动端下拉框 -->
     <van-popup v-model="show"
@@ -56,6 +57,13 @@ export default {
         ...this.$refs.dictSelect.getCurrentDictOptions()
       ]
     },
+    // 更新下拉数据
+    updateDictOptions (dictOptions) {
+      this.dictOptions = [
+        { text: '请选择', value: undefined },
+        ...dictOptions
+      ]
+    },
     // 确认
     onConfirm (value) {
       this.$emit('change', value.value)

src/components/vant/SelectPicker.vue

@@ -66,6 +66,17 @@ export default {
       options: []
     }
   },
+  watch: {
+    list: {
+      deep: true,
+      handler (val) {
+        this.options = [
+          { [this.labelKey]: '请选择', [this.valueKey]: undefined },
+          ...val
+        ]
+      }
+    }
+  },
   methods: {
     // 打开下拉，并且获取下拉数据
     onOpen () {

src/defaultSettings.js

@@ -14,7 +14,7 @@
  */
 
 export default {
-  primaryColor: '#1890FF', // primary color of ant design
+  primaryColor: '#8FC7FF', // primary color of ant design
   navTheme: 'light', // theme for nav menu
   layout: 'sidemenu', // nav menu position: sidemenu or topmenu
   contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu

src/views/mobile/home/Home.vue

@@ -80,14 +80,14 @@
               </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" @click="searchQuery">
+                  <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" @click="searchQuery">
+                    <a-button class="btn-blue btn-blue-small" type="primary">
                       <span class="btn-text"><a-icon type="left" /></span>
                     </a-button>
-                    <a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
+                    <a-button class="btn-blue btn-blue-small" type="primary">
                       <span class="btn-text"><a-icon type="right" /></span>
                     </a-button>
                   </div>
@@ -147,14 +147,14 @@
               </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" @click="searchQuery">
+                  <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" @click="searchQuery">
+                    <a-button class="btn-blue btn-blue-small" type="primary">
                       <span class="btn-text"><a-icon type="left" /></span>
                     </a-button>
-                    <a-button class="btn-blue btn-blue-small" type="primary" @click="searchQuery">
+                    <a-button class="btn-blue btn-blue-small" type="primary">
                       <span class="btn-text"><a-icon type="right" /></span>
                     </a-button>
                   </div>
@@ -403,7 +403,7 @@ export default {
           name: legendData[1],
           type: 'line',
           stack: 'downStroke',
-          color: '#0094FF',
+          color: '#8FC7FF',
           symbol: 'none',
           smooth: true,
           areaStyle: {

src/views/mobile/manage/Manage.vue

@@ -367,7 +367,13 @@ export default {
     },
     // 切换展开折叠列表
     toggleDeviceList () {
+      // 保留当前滚动高度
+      const scrollTop = document.documentElement.scrollTop
       this.deviceData.showAll = !this.deviceData.showAll
+      // 数据更新后保持原来滚动高度
+      this.$nextTick(() => {
+        document.documentElement.scrollTop = scrollTop
+      })
     },
     // 添加设备
     handleAddDevice () {
@@ -553,7 +559,7 @@ export default {
   margin: 0.12rem auto 0;
   font-family: Rubik, Rubik, sans-serif;
   font-size: 0.12rem;
-  color: #A5B8CE;
+  color: #EFEFEF;
   line-height: 0.14rem;
 
   .list-toggle-arrow {

src/views/systemOverview/equipmentManagement/EquipmentManagement.vue

@@ -25,7 +25,7 @@
                   <!-- 其他数据 -->
                   <template v-if="item.otherData">
                     <div v-for="it in item.otherData" :key="it.id || it.label">
-                      {{it.label}}：{{sysDeviceOverviewData[it.valueField]}}{{it.unit}}
+                      {{it.label}}：{{sysDeviceOverviewData[it.valueField] || 0}}{{it.unit}}
                     </div>
                   </template>
                 </div>
@@ -41,23 +41,25 @@
             ref="table"
             size="middle"
             bordered
-            rowKey="id"
+            :rowKey="(row, index) => row.id || index"
             :loading="deviceData.loading"
             :scroll="{x: true,y:206}"
             :columns="deviceData.columns"
             :dataSource="deviceData.dataSource"
             :pagination="deviceData.ipagination"
             @change="handleTableChange">
-            <template slot="text" slot-scope="text">
+            <template v-slot:text="text">
               <a-tooltip>
                 <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
                 <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
               </a-tooltip>
             </template>
-            <span slot="action" slot-scope="text, record, index" class="operation-btns">
+            <template v-slot:action="text, record, index">
+            <span class="operation-btns">
               <a class="primary" @click="handleChangeStatus(record, index)">{{record.changeDeviceStatus_dictText}}设备</a>
               <a class="danger" @click="handleDelete(record, index)">删除</a>
             </span>
+            </template>
           </a-table>
         </common-card>
       </a-col>
@@ -75,7 +77,7 @@
             :columns="sysMesData.columns"
             :dataSource="sysMesData.dataSource"
             :pagination="false">
-            <template slot="text" slot-scope="text">
+            <template v-slot:text="text">
               <a-tooltip>
                 <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
                 <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
@@ -105,6 +107,7 @@
                   <a-form-item label="所属井口">
                     <a-select v-decorator="['wellheadId', validatorRules.wellheadId]" allowClear
                               placeholder="请选择所属井口">
+                      <a-icon slot="suffixIcon" type="caret-down" class="select-arrow" />
                       <a-select-option v-for="item in wellheadList" :key="item.id" :value="item.id">{{ item.wellheadName }}</a-select-option>
                     </a-select>
                   </a-form-item>
@@ -118,11 +121,11 @@
                   </a-form-item>
                 </div>
                 <div class="flex-center custom-btns-box">
-                  <a-button class="btn-blue" @click="handleResetForm(deviceForm)" style="margin-right: 16px;">
+                  <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>
                   </a-button>
-                  <a-button class="btn-cyan" @click="handleAddDevice">
+                  <a-button type="primary" @click="handleAddDevice">
                     <img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
                     <span class="btn-text">添加</span>
                   </a-button>
@@ -160,7 +163,7 @@
                   </a-form-item>
                 </div>
                 <div class="flex-center custom-btns-box">
-                  <a-button class="btn-cyan" @click="handleAddWellhead">
+                  <a-button type="primary" @click="handleAddWellhead">
                     <img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
                     <span class="btn-text">添加</span>
                   </a-button>

src/views/systemOverview/systemSettings/SystemSettings.vue

@@ -31,11 +31,11 @@
               </a-form-item>
             </div>
             <div class="flex-center custom-btns-box">
-              <a-button class="btn-blue-long" @click="handleResetSysSettingForm" style="margin-right: 16px;">
+              <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>
               </a-button>
-              <a-button class="btn-cyan-medium" @click="handleSaveSysSetting">
+              <a-button type="primary" @click="handleSaveSysSetting">
                 <img :src="require('@assets/images/icon/save.png')" alt="保存设置" class="btn-icon">
                 <span class="btn-text">保存设置</span>
               </a-button>
@@ -67,7 +67,7 @@
                 <div class="table-text"
                      :class="{
                       'tag-blue width-76': record.userType === userType.admin.value,
-                      'tag-cyan width-76': record.userType === userType.common.value
+                      'tag-green width-76': record.userType === userType.common.value
                 }">{{ text || text === 0 ? text : global.emptyLine }}</div>
               </a-tooltip>
             </template>
@@ -128,8 +128,8 @@
               </a-col>
             </a-row>
             <div class="flex-center custom-btns-box">
-              <a-button class="btn-cyan" @click="handleAddUser">
+              <a-button type="primary" @click="handleAddUser">
-                <img :src="require('@assets/images/icon/add.png')" alt="保存设置" class="btn-icon">
+                <img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
                 <span class="btn-text">添加</span>
               </a-button>
             </div>
@@ -161,7 +161,7 @@
                 <div class="table-text"
                      :class="{
                       'tag-blue width-118': text === msgType.hostToDevice.label,
-                      'tag-cyan width-118': text === msgType.deviceToHost.label
+                      'tag-green width-118': text === msgType.deviceToHost.label
                 }">{{ text || text === 0 ? text : global.emptyLine }}</div>
               </a-tooltip>
             </template>
@@ -533,9 +533,8 @@ export default {
   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%;
+  background-size: 124px 124px;
 
   .upload-avatar {
     width: 120px;
@@ -553,6 +552,7 @@ export default {
       border: none;
       width: 120px;
       height: 120px;
+      padding: 1px;
     }
     /deep/.ant-upload-list-picture .ant-upload-list-item-thumbnail,
     /deep/.ant-upload-list-picture-card .ant-upload-list-item-thumbnail {

src/views/systemOverview/systemSettings/modules/UserInfoModal.vue

@@ -158,9 +158,8 @@ export default {
   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%;
+  background-size: 124px 124px;
 
   .upload-avatar {
     width: 120px;
@@ -178,6 +177,7 @@ export default {
       border: none;
       width: 120px;
       height: 120px;
+      padding: 1px;
     }
     /deep/.ant-upload-list-picture .ant-upload-list-item-thumbnail,
     /deep/.ant-upload-list-picture-card .ant-upload-list-item-thumbnail {

src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue

@@ -13,10 +13,11 @@
                                  v-model="queryParam.wellheadArea"
                                  placeholder="请选择所属井场"></j-dict-select-tag>
               <a-select class="search-input" style="margin-left: 8px;" v-model="queryParam.singleWell" placeholder="请选择单井" allowClear>
+                <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">
-                <a-button class="btn-blue" type="primary" @click="searchQuery">
+                <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>
                 </a-button>
@@ -24,8 +25,7 @@
             </a-form-item>
           </a-col>
           <a-col flex="220px">
-<!--            <a-input-search placeholder="请输入井口名称" v-model="queryParam.phone" class="search-input" />-->
+            <a-input class="search-input" placeholder="请输入井口名称" v-model="queryParam.wellheadName">
-            <a-input class="search-input" placeholder="请输入井口名称" v-model="queryParam.phone">
               <span slot="suffix" class="input-search-suffix" @click="searchQuery">
                 <img :src="require('@assets/images/icon/search-primary.png')" alt="查询">
               </span>
@@ -34,7 +34,7 @@
         </a-row>
       </a-form>
     </div>
-    <template v-if="Object.keys('allData').length && dataSource.length">
+    <template v-if="hasData">
       <a-row :gutter="20" type="flex">
         <a-col :xl="12" :xxl="6" class="mb-20">
           <div class="flex-column">
@@ -67,7 +67,9 @@
           <common-card title="油井生产数据">
             <!--  泵型图  -->
             <div class="pump-type mb-20">
-              <div class="pump-type-title">泵型：{{ allData.pumpType }}</div>
+              <div class="title-background pump-type-title">
+                <div class="title-background-text over-text">泵型：{{ allData.pumpType }}</div>
+              </div>
               <div class="over-text pump-type-remarks" :title="allData.comment">备注：{{ allData.comment }}</div>
             </div>
             <common-card-info :data="allData"
@@ -85,14 +87,16 @@
               </div>
             </div>
             <div class="working-status-container">
-              <div class="working-status-title">名称：{{ allData.wellName }}</div>
+              <div class="title-background working-status-title">
+                <div class="title-background-text over-text">名称：{{ allData.wellName }}</div>
+              </div>
               <div class="working-status-img">
                 <img :src="workingStatus" alt="油井工作状态">
               </div>
-              <div class="working-status-btns">
+              <div class="working-status-btns custom-btns-box">
-                <a-button @click="handleChangeWorkingCondition(true)" class="primary-btn">远程启井</a-button>
+                <a-button @click="handleChangeWorkingCondition(true)" type="primary">远程启井</a-button>
-                <a-button @click="handleChangeWorkingCondition(false)" class="danger-btn">远程停井</a-button>
+                <a-button @click="handleChangeWorkingCondition(false)" ghost type="primary">远程停井</a-button>
-                <a-button @click="handleChangeWorkingCondition(true)" class="primary-btn">频率控制</a-button>
+                <a-button @click="handleChangeWorkingCondition(true)" ghost type="primary">频率控制</a-button>
               </div>
             </div>
           </common-card>
@@ -184,7 +188,7 @@
           :dataSource="this.dataSource.length ? [{}]: []"
           :pagination="false">
           <div slot="actionBatch" class="action-batch">
-            <a href='javascript:' @click="handleAllAlarms" class='all-alarms'></a>
+            <a href='javascript:' @click="handleAllAlarms" class="all-alarms">全<br/>部<br/>报<br/>警</a>
           </div>
         </a-table>
       </div>
@@ -200,7 +204,6 @@
 import CommonCard from '@comp/CommonCard'
 import CommonCardInfo from '@comp/CommonCardInfo'
 import ResponsiveChart from '@comp/ResponsiveChart'
-import * as echarts from 'echarts'
 import { getOilWellRealTimeData, getWellheadList } from '@api/systemOverview'
 import { wellheadType } from '@/enums/commonEnums'
 import CommonEmpty from '@comp/CommonEmpty'
@@ -463,6 +466,7 @@ export default {
         align: 'center'
       }],
       dataSource: [],
+      hasData: false, // 是否有数据
       defaultId: 'default', // 默认数据的id
       // 油井实时数据
       oilWellRealTimeData: {},
@@ -531,31 +535,46 @@ export default {
       }
     }
   },
+  watch: {
+    // 是否有数据状态改变
+    hasData () {
+      // 移除当前事件，然后绑定新事件
+      borderTable && borderTable.removeEventListener('scroll', borderTable)
+      leftTable && leftTable.removeEventListener('scroll', leftTable)
+      this.$nextTick(() => {
+        // 还原UI图：左侧两个表格，其中一个只显示滚动条，任意一个滚动，两个表格双向绑定滚动事件
+        borderTable = this.$refs.borderTable.$el.querySelector('.ant-table-body')
+        leftTable = this.$refs.leftTable.$el.querySelector('.ant-table-body')
+        borderTable.addEventListener('scroll', borderTableScroll)
+        leftTable.addEventListener('scroll', leftTableScroll)
+      })
+    }
+  },
   mounted () {
     this.searchQuery()
-    this.$nextTick(() => {
-      /* 处理左侧表格滚动两个表格滚动同步 begin */
-      // 还原UI图：左侧两个表格，其中一个只显示滚动条，任意一个滚动，两个表格双向绑定滚动事件
-      borderTable = this.$refs.borderTable.$el.querySelector('.ant-table-body')
-      leftTable = this.$refs.leftTable.$el.querySelector('.ant-table-body')
-      borderTable.addEventListener('scroll', borderTableScroll)
-      leftTable.addEventListener('scroll', leftTableScroll)
-      /* 处理左侧表格滚动两个表格滚动同步 end */
-    })
   },
   beforeDestroy () {
     // 离开页面前清除定时器
     clearInterval(this.timer)
     // 离开时清除事件
-    borderTable.remove('scroll', borderTableScroll)
+    borderTable && borderTable.removeEventListener('scroll', borderTableScroll)
-    leftTable.remove('scroll', leftTableScroll)
+    leftTable && leftTable.removeEventListener('scroll', leftTableScroll)
   },
   methods: {
     searchQuery () {
       const params = Object.assign({}, this.queryParam)
-      // 没有条件恢复默认数据
+      console.log(params)
-      if (Object.values(params).filter(item => item || item !== 0).length === 0) {
+      // if (!params.singleWell && !params.wellheadName) {
-        this.allData = staticData
+      //   this.$message.warning('请选择油井或输入井口名称查询')
+      //   return
+      // }
+      // 选择单井查询
+      if (params.singleWell) {
+        const singleWell = this.singleWellList.find(item => item.id === params.singleWell)
+        this.hasData = true
+        this.allData = Object.assign({}, staticData, {
+          wellName: singleWell.wellheadName
+        })
         this.dataSource = staticTableData
         setTimeout(() => {
           // 加载功图计产监控
@@ -570,6 +589,7 @@ export default {
         return
       }
       // 置空数据，不请求实时数据
+      this.hasData = false
       this.allData = {}
       this.dataSource = []
       clearInterval(this.timer)
@@ -608,7 +628,7 @@ export default {
           const data = res.result || {}
           this.oilWellRealTimeData = data
           // 将油井实时参数放进全部数据中
-          this.allData = Object.assign({}, staticData, data['油井实时参数'])
+          this.allData = Object.assign({}, this.allData, data['油井实时参数'])
           this.initIndicatorDiagram(data['实时示功图'])
           this.initLoadDistribution(data['载荷分布图'])
         } else {
@@ -642,27 +662,15 @@ 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['上冲程']
         },
         {
           name: legendData[1],
           type: 'line',
           stack: 'downStroke',
-          color: '#0094FF',
+          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['下冲程']
         }
       ]
@@ -696,28 +704,16 @@ export default {
           symbol: lineSymbolBase64,
           symbolSize: 15,
           smooth: true,
-          areaStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(46,228,253,0.2)' },
-              { offset: 1, color: 'rgba(46,228,253,0)' }
-            ])
-          },
           data: data.oilProduction
         },
         {
           name: legendData[1],
           type: 'line',
           stack: 'liquidProduction',
-          color: '#0094FF',
+          color: '#8FC7FF',
           symbol: lineSymbolBase64,
           symbolSize: 15,
           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.liquidProduction
         }
       ]
@@ -817,14 +813,15 @@ export default {
 }
 
 .pump-type {
+  border: 1px solid @border-color-base;
   position: relative;
-  background-image: url("~@assets/images/systemOverview/wellheadDataMonitoring/pump-type-bg.png");
-  background-size: 100%;
-  background-repeat: no-repeat;
-  background-position: left;
   height: 84px;
-  width: 364px;
+  background-color: rgba(143,199,255,0.1);
-  margin: 0 auto 20px;
+  background-image: url("~@assets/images/systemOverview/wellheadDataMonitoring/pump-type.png");
+  background-repeat: no-repeat;
+  background-size: 60px 60px;
+  background-position: 12px 12px;
+  width: 100%;
 
   &-title {
     position: absolute;
@@ -833,8 +830,17 @@ export default {
     font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
     font-weight: 400;
     font-size: 15px;
-    color: rgba(255,255,255,0.96);
+    color: @text-color;
     line-height: 18px;
+    // 最大宽度 = 100% - 距离左侧 - 距离右侧
+    max-width: calc(100% - 88px - 12px);
+    z-index: 1;
+
+    &::before {
+      // 背景宽度 = 内容宽度 + 左侧4px 右侧4px
+      max-width: calc(100% + 8px);
+      min-width: 124px;
+    }
   }
   &-remarks {
     position: absolute;
@@ -845,9 +851,7 @@ export default {
     font-size: 12px;
     color: #D0DEEE;
     line-height: 14px;
-    width: 70%;
+    max-width: calc(100% - 88px - 12px);
-    white-space: nowrap;
-    word-break: break-all;
   }
 }
 
@@ -856,21 +860,25 @@ export default {
   height: 100%;
 
   .working-status-title {
-    background-size: 124px 16px;
-    background: url("~@/assets/images/text-bg.png") no-repeat 0 6px;
-    font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
     font-weight: 400;
     font-size: 15px;
-    color: rgba(255,255,255,0.96);
+    color: @text-color;
     line-height: 18px;
-    padding-left: 4px;
+    max-width: 100%;
+    margin-bottom: 18px;
+
+    // 背景宽度 = 内容宽度 + 左侧4px 右侧4px
+    &::before {
+      max-width: calc(100% + 8px);
+      min-width: 124px;
+    }
   }
 
   .working-status-img {
     height: 178px;
     font-size: 0;
     text-align: center;
-    margin: 12px auto 18px;
+    margin: 0 auto 18px;
 
     img {
       height: 100%;
@@ -881,6 +889,10 @@ export default {
     display: flex;
     justify-content: center;
 
+    /deep/.ant-btn {
+      height: 32px;
+    }
+
     button:not(:last-child) {
       margin-right: 16px;
     }
@@ -901,7 +913,7 @@ export default {
   }
 
   .info-row .info-value {
-    color: #2EE4FD;
+    color: @primary-color;
   }
   .divider-vertical {
     width: 1px;
@@ -935,9 +947,16 @@ export default {
   left: 50%;
   transform: translate(-50%, calc(-50% + 20px));
   display: inline-block;
-  width: 40px;
+  width: 36px;
-  height: 100px;
+  height: 96px;
-  background: url("~@/assets/images/systemOverview/wellheadDataMonitoring/all-alarms-btn.png");
+  padding: 12px 0;
+  background: #8FC7FF;
+  border-radius: 2px;
+  font-family: Rubik, Rubik, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  color: #1D2632;
+  line-height: 18px;
 }
 .left-table {
   display: inline-block;
@@ -962,17 +981,15 @@ export default {
   width: 100%;
   // 屏幕高度 - 头部导航高度 - 搜索部分高度 - 距离底部
   height: calc(100vh - 158px - 84px - 20px);
-  background: rgba(0,148,255,0.08);
+  border: 1px solid @border-color-base;
-  border: 1px solid rgba(0,148,255,0.24);
 
   .empty {
     position: absolute;
-    height: 45%;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     /deep/ .ant-empty-image {
-      height: 100%;
+      height: 140px;
     }
     /deep/ .empty-text {
       font-size: 26px;
@@ -986,7 +1003,7 @@ export default {
   right: 10px;
   top: 40px;
   bottom: 0;
-  width: 5px;
+  width: 6px;
   overflow: hidden;
   .border-table {
     position: absolute;

src/views/user/Login.vue

@@ -276,10 +276,10 @@ export default {
       } else {
         this.$router.push({ path: '/' }).catch((/* res */) => {})
       }
-      this.$notification.success({
+      // this.$notification.success({
-        message: '欢迎',
+      //   message: '欢迎',
-        description: `${timeFix()}，欢迎回来`
+      //   description: `${timeFix()}，欢迎回来`
-      })
+      // })
     },
     cmsFailed (err) {
       this.$notification.error({

vue.config.js

@@ -65,8 +65,8 @@ module.exports = {
       less: {
         modifyVars: {
           /* less 变量覆盖，用于自定义 ant design 主题 */
-          'primary-color': '#0094FF',
+          'primary-color': '#8FC7FF',
-          'link-color': '#0094FF',
+          'link-color': '#8FC7FF',
           'border-radius-base': '4px',
           ...modifyLessVars
         },