Переглянути джерело

修正测试bug
1.按钮悬浮,点击样式

zy 6 місяців тому
батько
коміт
1e43dc52e1

+ 20 - 56
cpp-ui/src/assets/styles/dark.scss

@@ -1,9 +1,3 @@
-$white: #fff;
-$default-border-color: #2986ce;
-$table-border-color: #3e6b98;
-$table-header-background-color: #284266;
-$table-fixed-background-color: #0a293e;
-
 #app {
 
   .main-container {
@@ -116,49 +110,6 @@ $table-fixed-background-color: #0a293e;
   background-size: 100% 100%;
 }
 
-/*vxe表格*/
-.vxe-table--render-default.border--default .vxe-table--header-wrapper, .vxe-table--render-default.border--full .vxe-table--header-wrapper, .vxe-table--render-default.border--outer .vxe-table--header-wrapper {
-  background-color: $table-header-background-color !important;
-  color: $white;
-}
-
-.vxe-table--render-default .vxe-table--body-wrapper, .vxe-table--render-default .vxe-table--footer-wrapper {
-  background-color: transparent !important;
-  color: $white !important;
-}
-
-.vxe-pager {
-  background-color: transparent !important;
-}
-
-.vxe-pager--jump, .vxe-pager--total {
-  color: $white;
-}
-
-.vxe-table--render-default .vxe-body--row.row--current {
-  background-color: $base-menu-background !important;
-}
-
-.vxe-table--render-default .vxe-body--row.row--hover, .vxe-table-render-default .vxe-body--row.row--hover.row--stripe {
-  background-color: $base-menu-background !important;
-}
-
-// 边框
-.vxe-table--render-default.border--full .vxe-body--column, .vxe-table--render-default.border--full .vxe-footer--column, .vxe-table--render-default.border--full .vxe-header--column {
-  background-image: linear-gradient($table-border-color, $table-border-color), linear-gradient($table-border-color, $table-border-color) !important;
-}
-
-.vxe-table .vxe-table--header-wrapper .vxe-table--header-border-line, .vxe-table--render-default .vxe-table--border-line, .vxe-pager.is--perfect {
-  border: 1px solid $table-border-color !important;
-}
-
-.vxe-table--render-default.border--full .vxe-table--fixed-left-wrapper {
-  border-right: 1px solid $table-border-color !important;
-  background-image: url('../images/pageBg.png');
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
 
 /*element表格*/
 .el-table, .el-table tr {
@@ -204,6 +155,7 @@ $table-fixed-background-color: #0a293e;
 .el-table__fixed-body-wrapper {
   background: $table-fixed-background-color;
 }
+
 /*element 分頁*/
 .el-pagination__total, .el-pagination__jump {
   color: $white !important;
@@ -249,7 +201,12 @@ $table-fixed-background-color: #0a293e;
 .el-radio__label {
   color: white;
 }
-
+.el-button:hover{
+  border-color: #49e9f8 !important;
+}
+.el-button:active{
+  transform: translateY(2px);
+}
 .dark-el-dialog {
   .el-input__inner {
     background-color: transparent;
@@ -259,15 +216,22 @@ $table-fixed-background-color: #0a293e;
 
   .el-button {
     background-color: transparent !important;
-    border-top: none;
-    border-bottom: none;
+    //border-top: none;
+    //border-bottom: none;
     border-color: #1890ff;
     background-image: url('../images/topRightBtuBg.png');
-    background-size: 100% 100%;
+    background-size: 120% 120%;
     background-position: center;
     background-repeat: no-repeat;
     color: white;
   }
+  .el-button:hover{
+    border-color: #49e9f8 !important;
+  }
+  .el-button:active{
+    //transform: scale(0.9);
+    transform: translateY(2px);
+  }
 
   .el-dialog.is-fullscreen {
     background: transparent;
@@ -321,11 +285,11 @@ $table-fixed-background-color: #0a293e;
 .dark-el-button {
   .el-button, .el-button-group .el-button {
     background-color: transparent !important;
-    border-top: none;
-    border-bottom: none;
+    //border-top: none;
+    //border-bottom: none;
     border-color: #1890ff;
     background-image: url('../images/topRightBtuBg.png');
-    background-size: cover;
+    background-size: 120% 120%;
     background-position: center;
     background-repeat: no-repeat;
     color: white;

+ 7 - 0
cpp-ui/src/assets/styles/variables.scss

@@ -21,6 +21,12 @@ $base-logo-light-title-color: #001529;
 $base-sub-menu-background:#1f2d3d;
 $base-sub-menu-hover:#001528;
 
+$white: #fff;
+$default-border-color: #2986ce;
+$table-border-color: #3e6b98;
+$table-header-background-color: #284266;
+$table-fixed-background-color: #0a293e;
+
 // 自定义暗色菜单风格
 /**
 $base-menu-color:hsla(0,0%,100%,.65);
@@ -37,6 +43,7 @@ $base-sub-menu-hover:#001528;
 */
 
 $base-sidebar-width: 200px;
+//$base-sidebar-width: 10.4vw;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

+ 44 - 0
cpp-ui/src/assets/styles/vxe-table.scss

@@ -4,3 +4,47 @@
     overflow-y: auto;
   }
 }
+
+/*vxe表格*/
+.vxe-table--render-default.border--default .vxe-table--header-wrapper, .vxe-table--render-default.border--full .vxe-table--header-wrapper, .vxe-table--render-default.border--outer .vxe-table--header-wrapper {
+  background-color: $table-header-background-color !important;
+  color: $white;
+}
+
+.vxe-table--render-default .vxe-table--body-wrapper, .vxe-table--render-default .vxe-table--footer-wrapper {
+  background-color: transparent !important;
+  color: $white !important;
+}
+
+.vxe-pager {
+  background-color: transparent !important;
+}
+
+.vxe-pager--jump, .vxe-pager--total {
+  color: $white;
+}
+
+.vxe-table--render-default .vxe-body--row.row--current {
+  background-color: $base-menu-background !important;
+}
+
+.vxe-table--render-default .vxe-body--row.row--hover, .vxe-table-render-default .vxe-body--row.row--hover.row--stripe {
+  background-color: $base-menu-background !important;
+}
+
+// 边框
+.vxe-table--render-default.border--full .vxe-body--column, .vxe-table--render-default.border--full .vxe-footer--column, .vxe-table--render-default.border--full .vxe-header--column {
+  background-image: linear-gradient($table-border-color, $table-border-color), linear-gradient($table-border-color, $table-border-color) !important;
+}
+
+.vxe-table .vxe-table--header-wrapper .vxe-table--header-border-line, .vxe-table--render-default .vxe-table--border-line, .vxe-pager.is--perfect {
+  border: 1px solid $table-border-color !important;
+}
+
+.vxe-table--render-default.border--full .vxe-table--fixed-left-wrapper {
+  border-right: 1px solid $table-border-color !important;
+  background-image: url('../images/pageBg.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}

+ 44 - 14
cpp-ui/src/views/largeScreen/echartsMap/index.vue

@@ -35,6 +35,10 @@ export default {
       // 调用后端查询场站列表
       this.$axios({url: '/electricfield/getLargeScreenStation', method: 'get'}).then(response => {
         let scatterData = response.data
+        // let scatterData = response.data.concat([{
+        //   value: [87.6, 43.8],
+        //   name: '新疆乌鲁木齐'
+        // }])
         let lineData = this.filterLines(scatterData)
         this.initOption(lineData, scatterData);
       })
@@ -249,13 +253,28 @@ export default {
                 a: {
                   align: 'center',
                   color: 'white',
+                  // backgroundColor: {
+                  //   image: bg,
+                  // },
                   backgroundColor: {
-                    image: bg,
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                      offset: 0, color: 'rgba(6,121,168,0)' // 0% 处的颜色
+                    }, {
+                      offset: 1, color: 'rgb(6,121,168)' // 100% 处的颜色
+                    }],
+                    global: false // 缺省为 false
                   },
-                  // backgroundColor: '#01e9ff',
-                  borderRadius: 5,
+                  borderWidth: .5,
+                  borderColor: 'rgb(97,177,255)',
+                  fontSize:12,
+                  borderRadius: 2,
                   padding: [0, 5, 0, 5],
-                  height: 30
+                  height: 20
                 }
               }
             },
@@ -267,9 +286,27 @@ export default {
               color: '#ff9100',
             },
             emphasis: {
+              itemStyle: {
+                borderColor: 'rgba(255,215,0,1)',
+                borderWidth: 2
+              },
               label: {
-                show: true
-              }
+                show: true,
+                rich: {
+                  a: {
+                    align: 'center',
+                    color: '#fff',
+                    backgroundColor: {
+                      image: bg,
+                    },
+                    fontSize:16,
+                    borderRadius: 5,
+                    padding: [0, 5, 0, 5],
+                    height: 30
+                  }
+                }
+              },
+
             },
             animation: false // 关闭动画
           },
@@ -277,14 +314,6 @@ export default {
             type: 'effectScatter',
             zlevel: 1,
             coordinateSystem: 'geo',
-            emphasis: {
-              label: {
-                show: true,
-                position: 'top',
-                color: '#fff',
-                formatter: '{b|{b}}',
-              },
-            },
             data: scatterData.map(item => item.value),
             symbol: 'circle',
             symbolSize: function (value) {
@@ -322,6 +351,7 @@ export default {
       window.addEventListener("resize", function () {
         _this.myChart.resize();
       });
+
     }
   }
 

+ 63 - 39
cpp-ui/src/views/largeScreen/index.vue

@@ -81,14 +81,14 @@
       <div class="dark-el-dialog">
         <el-dialog width="60%" style="top:15%" :visible.sync="outerVisible" :close-on-click-modal="false">
           <div slot="title" class="dialog-title flex justify-between">
-            <div>
+            <div class="flex justify-between" style="width: 80%">
               <el-button @click="acknowledgeAll()">全部确认</el-button>
-              <el-button @click="getAbnormalAlarms('')">全部告警</el-button>
-              <el-button @click="getAbnormalAlarms('E1')">通道告警</el-button>
-              <el-button @click="getAbnormalAlarms('E2')">上报告警</el-button>
-              <el-button @click="getAbnormalAlarms('E3')">站端硬件告警</el-button>
-              <el-button @click="getAbnormalAlarms('E4')">中心解析告警</el-button>
-              <el-button @click="getAbnormalAlarms('E5')">通用告警</el-button>
+              <div id="btuAll" class="clickAfter" @click="clickBtuClass('btuAll')"><el-button @click="getAbnormalAlarms('')">全部告警</el-button></div>
+              <div id="btuE1" class="clickBefore" @click="clickBtuClass('btuE1')"><el-button @click="getAbnormalAlarms('E1')">通道告警</el-button></div>
+              <div id="btuE2" class="clickBefore" @click="clickBtuClass('btuE2')"><el-button @click="getAbnormalAlarms('E2')">上报告警</el-button></div>
+              <div id="btuE3" class="clickBefore" @click="clickBtuClass('btuE3')"><el-button @click="getAbnormalAlarms('E3')">站端硬件告警</el-button></div>
+              <div id="btuE4" class="clickBefore" @click="clickBtuClass('btuE4')"><el-button @click="getAbnormalAlarms('E4')">中心解析告警</el-button></div>
+              <div id="btuE5" class="clickBefore" @click="clickBtuClass('btuE5')"><el-button @click="getAbnormalAlarms('E5')">通用告警</el-button></div>
               <el-button @click="getAlarmConfs()">不告警配置</el-button>
             </div>
             <div class="dialog-title-badge flex justify-between">
@@ -180,7 +180,6 @@
                   <el-col :span="1.5">
                     <el-button
                       type="primary"
-                      plain
                       icon="el-icon-plus"
                       size="mini"
                       popper-class="cpp-popper"
@@ -191,7 +190,6 @@
                   <el-col :span="1.5">
                     <el-button
                       type="success"
-                      plain
                       icon="el-icon-edit"
                       size="mini"
                       popper-class="cpp-popper"
@@ -202,7 +200,6 @@
                   <el-col :span="1.5">
                     <el-button
                       type="danger"
-                      plain
                       icon="el-icon-delete"
                       size="mini"
                       popper-class="cpp-popper"
@@ -210,17 +207,17 @@
                     >删除
                     </el-button>
                   </el-col>
-<!--                  <el-col :span="1.5">-->
-<!--                    <el-button-->
-<!--                      type="danger"-->
-<!--                      plain-->
-<!--                      icon="el-icon-select"-->
-<!--                      size="mini"-->
-<!--                      popper-class="cpp-popper"-->
-<!--                      @click="getAlarmConfs"-->
-<!--                    >查询-->
-<!--                    </el-button>-->
-<!--                  </el-col>-->
+                  <!--                  <el-col :span="1.5">-->
+                  <!--                    <el-button-->
+                  <!--                      type="danger"-->
+                  <!--                      plain-->
+                  <!--                      icon="el-icon-select"-->
+                  <!--                      size="mini"-->
+                  <!--                      popper-class="cpp-popper"-->
+                  <!--                      @click="getAlarmConfs"-->
+                  <!--                    >查询-->
+                  <!--                    </el-button>-->
+                  <!--                  </el-col>-->
                 </el-row>
 
                 <div style="padding-top: 10px">
@@ -347,11 +344,11 @@ export default {
     }
 
     return {
-      xdbl:0,
+      xdbl: 0,
       // 限电场站数
-      xdczs:0,
+      xdczs: 0,
       // 总场站数
-      zczs:0,
+      zczs: 0,
       realList: [],
       ableList: [],
       theoryList: [],
@@ -488,7 +485,7 @@ export default {
   },
   methods: {
     formatNumber(num) {
-      if (Number(num)==0){
+      if (Number(num) == 0) {
         return 0
       }
       // 转换为字符串以便处理
@@ -500,8 +497,7 @@ export default {
       if (nums[0].length == 3) {
 
         return parseFloat(num.toFixed(1));
-      }
-      else{
+      } else {
         return nums[0];
       }
     },
@@ -535,7 +531,7 @@ export default {
         this.envData.radiance = envDataMap.fzdAvg
 
         this.drawChart()
-      }).catch(err=>{
+      }).catch(err => {
         clearInterval(this.sysBizDataTimer);
       })
     },
@@ -588,7 +584,7 @@ export default {
 
       })
     },
-    changeInfo(){
+    changeInfo() {
       this.getAlarmConfs()
     },
     getAlarmConfs() {
@@ -641,13 +637,13 @@ export default {
       // }
 
     },
-    /*模拟数据*/
-    mockData(num) {
-      let data = []
-      for (let i = 0; i <= 96; i++) {
-        data.push(Math.floor(Math.round(Math.random() * 10) * num, 2))
-      }
-      return data
+    clickBtuClass(id) {
+      let clickItem = document.getElementById(id)
+      let activeItem = document.querySelector('.clickAfter')
+      activeItem.classList.remove('clickAfter')
+      activeItem.classList.add('clickBefore')
+      clickItem.classList.remove('clickBefore')
+      clickItem.classList.add('clickAfter')
     },
     drawChart() {
       gaugeOption.series[0].data[0].value = this.xdczs
@@ -877,7 +873,7 @@ export default {
       })
       return result
     },
-    checkRadioMethod ({ row }) {
+    checkRadioMethod({row}) {
       return row.expireTime > formatToDateTime(new Date().getTime())
     }
 
@@ -915,6 +911,7 @@ $top-container-height: 11vh;
     top: 5px;
     right: 5px;
   }
+
   ::v-deep .el-badge__content {
     border-radius: .5vw;
     font-size: .6vw;
@@ -925,6 +922,7 @@ $top-container-height: 11vh;
 }
 
 .home-jump-btu {
+  border-color: #1890ff;
   width: 5vw;
   height: 3.15vh;
   cursor: pointer;
@@ -934,6 +932,10 @@ $top-container-height: 11vh;
   font-size: .85vw;
 }
 
+.home-jump-btu:active {
+  transform: translateY(2px);
+}
+
 .chartStyle {
   width: 100%;
   height: 35vh;
@@ -959,12 +961,15 @@ $top-container-height: 11vh;
   left: 3vw;
   font-size: 1vw;
 }
-.left-img{
+
+.left-img {
   width: 5vw;
 }
-.badge-img{
+
+.badge-img {
   width: 1.5vw;
 }
+
 .border-style {
   border-radius: 5px;
   box-shadow: inset 0px 1px 8px 5px rgba(29, 128, 218, 0.63);
@@ -1073,4 +1078,23 @@ $top-container-height: 11vh;
     border: none;
   }
 }
+
+.clickAfter {
+  ::v-deep .el-button {
+    border-color: #49e9f8 !important;
+    font-weight: bold;
+  }
+  ::v-deep .el-button:hover {
+    border-color: #49e9f8 !important;
+  }
+}
+
+.clickBefore {
+  ::v-deep .el-button {
+    border-color: #1890ff !important;
+  }
+  ::v-deep .el-button:hover {
+    border-color: #49e9f8 !important;
+  }
+}
 </style>