task 45202 大屏调整

src/components/charts/bar/index.js

@@ -25,6 +25,14 @@ export default {
       type: String,
       default: '单位：万元'
     },
+    interval: {
+      type: Number,
+      default: null
+    },
+    rotate: {
+      type: Number,
+      default: 0
+    },
     serverName: {
       type: String,
       default: '面积'
@@ -76,7 +84,20 @@ export default {
       const erd = elementResizeDetectorMaker();
       erd.listenTo(document.getElementById(this.id), () => {
         this.$nextTick(() => {
+          if (document.getElementById(this.id).offsetWidth > 500){
+            this.rotate = 60;
+          }else{
+            this.rotate = 0;
+          }
           this.chart.resize();
+          this.chart.setOption({
+            // 新的配置项，例如：
+            xAxis: {
+              axisLabel: {
+                rotate: this.rotate
+              },
+            }
+          });
         });
       });
     },
@@ -145,6 +166,7 @@ export default {
             },
             axisLabel: {
               show: true,
+              rotate: this.rotate,
               color: 'rgba(185, 211, 235, 1)'
             },
           },
@@ -254,7 +276,6 @@ export default {
       };
       this.chart.setOption(option);
       this.initResizeCallBack();
-
     }
   }
 };

src/components/pannelNew/index.scss

@@ -84,7 +84,7 @@
     width: 100%;
     position: relative;
     flex: 1;
-    background-color: rgba(1,20,44,.6);
+    background-color: rgba(1,20,44,.9);
     overflow: hidden;
 
     .bottom_line {

src/views/sanqing/main-gis/index.html

@@ -93,7 +93,7 @@
   <div class="select_address">
     <div class="dot left"></div>
     <div class="dot right"></div>
-    <el-cascader :options="addrOptions" v-model="addrText" :props="deptTreeProps" popper-class="header-cascader-drop" @change="selectAddress" ref="cascader">
+    <el-cascader :popper-append-to-body="false" :options="addrOptions" v-model="addrText" :props="deptTreeProps" popper-class="header-cascader-drop" @change="selectAddress" ref="cascader">
       <template slot-scope="{ node, data }">
         <span>{{ data.label }}</span>
         <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@@ -101,4 +101,3 @@
     </el-cascader>
   </div>
 </div>
-

src/views/sanqing/main-gis/index.scss

@@ -39,13 +39,14 @@
     z-index: 1;
     width: 100%;
     height: 100%;
-    box-shadow: inset 150px 0px 150px 0px RGBA(3, 12, 27, 1), inset -150px 0 150px 0px RGBA(3, 12, 27, 1); // 左
+    box-shadow: inset 450px 0px 350px 10px RGBA(3, 12, 27, 1), inset -450px 0 350px 10px RGBA(3, 12, 27, 1); // 左
     /* 四周黑色 */
     pointer-events: none;
     /* 允许地图事件穿透 */
   }
 }
 
+
 //选择地址
 .select_address {
   width: 300px;
@@ -56,6 +57,16 @@
 
   box-shadow: inset 0 0 10px 2px rgba(27, 123, 204, 0.8); /* 添加内发光效果 */
 
+  .dot{
+    width: 0.46vh;
+    height: 0.46vh;
+    background: #0bf1cc;
+    border-radius: 50%;
+    position: absolute;
+    top: 2vh;
+    &.left{left:1vw}
+    &.right{right: 1vw;}
+  }
   // <div class="dot left"></div>
   //     <div class="dot right"></div>
   ::v-deep {
@@ -263,3 +274,4 @@
     transform: translate(-50%,-50%);
   }
 }
+

src/views/sanqing/main-gis/index.vue

@@ -1,4 +1,30 @@
+<style lang="scss">
+    .el-cascader__dropdown{
+        background: rgba(1,11,34,.6);
+        border:1px solid #0096ff;
+        li{
+            color: #fff;
+        }
+    }
+    .header-cascader-drop{
+        background: rgba(1,11,34,.6);
+        border:1px solid #0096ff;
+        .el-cascader-panel{
+            .el-scrollbar {
+                color: #fff;
+                .el-cascader-menu__wrap{
+                    .el-scrollbar__view{
+                        li{
+                            &:hover{
+                                color: #1890ff;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>
 <template src='./index.html'/>
 <script lang='js' src='./index.js'></script>
-<style lang='scss' src='./index.scss' scoped>
-</style>
+<style lang='scss' src='./index.scss' scoped></style>