Accueil Explorer Aide
S'inscrire Connexion
yangqishu
/
tmzn-weihe
1
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

feat:新增左右基础面板组件及标题组件

yangqishu il y a 4 mois
Parent
b883def79b
commit
17fe67f655
17 fichiers modifiés avec 346 ajouts et 110 suppressions
Vue séparée Afficher les stats Diff
  1. 7 0
      .prettierrc
  2. 2 2
      public/index.html
  3. BIN
      src/assets/image/common/dataCenterLeftBg.png
  4. BIN
      src/assets/image/common/dataCenterRightBg.png
  5. BIN
      src/assets/image/common/header-bg.png
  6. BIN
      src/assets/image/common/left_hide.png
  7. BIN
      src/assets/image/common/left_show.png
  8. BIN
      src/assets/image/common/right_hide.png
  9. BIN
      src/assets/image/common/right_show.png
  10. 63 58
      src/assets/scss/index.scss
  11. 3 0
      src/assets/scss/px-to-rem.scss
  12. 24 0
      src/components/base-header/BaseHeader.vue
  13. 88 0
      src/components/base-panel/base-panel-left.vue
  14. 91 0
      src/components/base-panel/base-panel-right.vue
  15. 22 22
      src/main.js
  16. 30 28
      src/views/index.vue
  17. 16 0
      src/views/overview/left.vue

+ 7 - 0
.prettierrc
Voir le fichier 

@@ -0,0 +1,7 @@
 
+{
 
+  "eslintIntegration": true,
 
+  "semi": false,
 
+  "trailingComma": "none",
 
+  "singleQuote": true,
 
+  "printWidth": 180
 
+}

+ 2 - 2
public/index.html
Voir le fichier 

@@ -1,5 +1,5 @@
 
 <!DOCTYPE html>
 
-<html lang="zh-cn">
 
+<html lang="zh-cn" style="font-size: calc(9.72763vh)">
 
   <head>
 
     <meta charset="utf-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
@@ -7,7 +7,7 @@
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 
     <title><%= htmlWebpackPlugin.options.title %></title>
 
     <script>
 
-      window.basePathUrl = "<%= BASE_URL %>"; //标识config、widgets所在的目录
 
+      window.basePathUrl = '<%= BASE_URL %>' //标识config、widgets所在的目录
 
     </script>
 
   </head>
 
   <body>

BIN
src/assets/image/common/dataCenterLeftBg.png
Voir le fichier


BIN
src/assets/image/common/dataCenterRightBg.png
Voir le fichier


BIN
src/assets/image/common/header-bg.png
Voir le fichier


BIN
src/assets/image/common/left_hide.png
Voir le fichier


BIN
src/assets/image/common/left_show.png
Voir le fichier


BIN
src/assets/image/common/right_hide.png
Voir le fichier


BIN
src/assets/image/common/right_show.png
Voir le fichier


+ 63 - 58
src/assets/scss/index.scss
Voir le fichier 

@@ -2,22 +2,23 @@
 
 @import '@/assets/scss/reset';
 
 @import '@/assets/scss/variables';
 
 @import '@/assets/scss/mixins';
 
+@import '@/assets/scss/px-to-rem';
 
 
 html,
 
-body{
 
-  font: 14px/1.5 'Microsoft YaHei',tahoma,arial,Hiragino Sans GB, '\5b8b\4f53',sans-serif;
 
+body {
 
+  font: 14px/1.5 'Microsoft YaHei', tahoma, arial, Hiragino Sans GB, '\5b8b\4f53', sans-serif;
 
   background-color: #f3f3f3;
 
   height: 100%;
 
 }
 
 
-#nprogress{
 
+#nprogress {
 
   position: relative;
 
   z-index: 3000;
 
 }
 
 
-.clearfix{
 
+.clearfix {
 
   display: inline-block;
 
-  &::after{
 
+  &::after {
 
     display: block;
 
     content: '';
 
     height: 0;
 
@@ -27,44 +28,43 @@ body{
 
   }
 
 }
 
 
-.ellipsis{
 
+.ellipsis {
 
   overflow: hidden;
 
   white-space: nowrap;
 
   text-overflow: ellipsis;
 
 }
 
 
-
 
-.el-select-dropdown{
 
+.el-select-dropdown {
 
   // z-index: 3000 !important;
 
 }
 
 
-.el-textarea__inner{
 
+.el-textarea__inner {
 
   font-family: inherit;
 
 }
 
 
 .el-table .cell,
 
-.el-table th div{
 
+.el-table th div {
 
   // TODO: FIXME: .el-table .cell, th div 均设置了text-overflow: ellipsis, 部分场景（table-column为非文字slot，如按钮，checkbox，且没有设置宽度）在窗口宽度较小时会出现 `...`
 
   text-overflow: clip !important;
 
 }
 
 
-input:-ms-input-placeholder{
 
+input:-ms-input-placeholder {
 
   color: #c0c4cc;
 
 }
 
 
-.el-message-box{
 
-  .el-message-box__title{
 
+.el-message-box {
 
+  .el-message-box__title {
 
     font-size: 16px;
 
   }
 
 }
 
 
 $spaceamounts: (0, 2, 5, 10, 15, 20);
 
 $sides: (
 
-  "": "all",
 
-  "t": "top",
 
-  "b": "bottom",
 
-  "l": "left",
 
-  "r": "right",
 
+  '': 'all',
 
+  't': 'top',
 
+  'b': 'bottom',
 
+  'l': 'left',
 
+  'r': 'right'
 
 );
 
 
 @each $space in $spaceamounts {
 
@@ -79,53 +79,53 @@ $sides: (
 
   }
 
 }
 
 
-.mg-t-20{
 
+.mg-t-20 {
 
   margin-top: 20px !important;
 
 }
 
-.mg-l-10{
 
+.mg-l-10 {
 
   margin-left: 10px !important;
 
 }
 
 
-.el-dialog{
 
+.el-dialog {
 
   z-index: 4001 !important;
 
-  .el-dialog__body{
 
+  .el-dialog__body {
 
     padding: 10px 15px;
 
   }
 
 }
 
 
-html#baidu-map-hack{
 
+html#baidu-map-hack {
 
   height: auto;
 
   overflow: auto;
 
-  body{
 
+  body {
 
     height: auto;
 
-    #app{
 
+    #app {
 
       height: auto;
 
-      #layout{
 
-        #nav{
 
+      #layout {
 
+        #nav {
 
           position: fixed;
 
           left: 0;
 
           right: 0;
 
           top: 0;
 
           z-index: 2999;
 
         }
 
-        .main-wrapper{
 
+        .main-wrapper {
 
           padding-top: 60px;
 
           height: auto !important;
 
-          #sidebar{
 
+          #sidebar {
 
             position: fixed;
 
             width: $sidebarMainMenuWidth;
 
             left: 0;
 
             bottom: 0;
 
             top: 60px;
 
             z-index: 10;
 
-            &.expand{
 
+            &.expand {
 
               width: $sidebarWidth;
 
-              & + .main{
 
+              & + .main {
 
                 margin-left: $sidebarWidth;
 
               }
 
             }
 
           }
 
-          .main{
 
+          .main {
 
             margin-left: $sidebarMainMenuWidth;
 
           }
 
         }
 
@@ -134,9 +134,8 @@ html#baidu-map-hack{
 
   }
 
 }
 
 
-
 
 .BMap_cpyCtrl,
 
-.anchorBL{
 
+.anchorBL {
 
   display: none !important;
 
 }
 
 
@@ -163,49 +162,55 @@ html#baidu-map-hack{
 
 }
 
 
 @keyframes flash {
 
-  0% {opacity: 1;}
 
-  50% {opacity: 0;}
 
-  100% {opacity: 1;}
 
+  0% {
 
+    opacity: 1;
 
+  }
 
+  50% {
 
+    opacity: 0;
 
+  }
 
+  100% {
 
+    opacity: 1;
 
+  }
 
 }
 
 
-.cameras-notification.el-notification{
 
+.cameras-notification.el-notification {
 
   width: 300px;
 
   padding: 8px 25px 8px 10px;
 
-  .el-notification__group{
 
+  .el-notification__group {
 
     margin-left: 8px;
 
   }
 
-  .el-icon-warning{
 
-    color: #F56C6C;
 
+  .el-icon-warning {
 
+    color: #f56c6c;
 
   }
 
   .el-notification__closeBtn {
 
     top: 8px;
 
     right: 8px;
 
   }
 
-  .el-notification__icon{
 
+  .el-notification__icon {
 
     height: 14px;
 
     width: 14px;
 
     font-size: 14px;
 
     line-height: 21px;
 
   }
 
-  .el-notification__title{
 
+  .el-notification__title {
 
     font-size: 14px;
 
     font-weight: normal;
 
     color: #606266;
 
   }
 
-  .el-notification__content{
 
+  .el-notification__content {
 
     margin: 0;
 
     font-size: 14px;
 
-    p{
 
+    p {
 
       // @include ellipsis;
 
       width: 220px;
 
-      .link{
 
+      .link {
 
         padding-left: 8px;
 
         color: #409eff;
 
         cursor: pointer;
 
-        &:hover{
 
-          opacity: .8;
 
+        &:hover {
 
+          opacity: 0.8;
 
         }
 
-        &.active{
 
+        &.active {
 
           opacity: 1;
 
         }
 
       }
 
@@ -213,24 +218,24 @@ html#baidu-map-hack{
 
   }
 
 }
 
 
-.text-link{
 
+.text-link {
 
   padding-right: 8px;
 
   color: #409eff;
 
   cursor: pointer;
 
-  &.disabled{
 
-    cursor: not-allowed; 
+  &.disabled {
 
+    cursor: not-allowed;
 
     color: #909399;
 
   }
 
-  &.danger{
 
+  &.danger {
 
     color: $--color-danger;
 
   }
 
-  &.warning{
 
+  &.warning {
 
     color: $--color-warning;
 
   }
 
-  &:hover{
 
-    opacity: .8;
 
+  &:hover {
 
+    opacity: 0.8;
 
   }
 
-  &.active{
 
+  &.active {
 
     opacity: 1;
 
   }
 
-}
 
+}

+ 3 - 0
src/assets/scss/px-to-rem.scss
Voir le fichier 

@@ -0,0 +1,3 @@
 
+@function px-to-rem($px) {
 
+  @return calc($px * 1rem / 100);
 
+}

+ 24 - 0
src/components/base-header/BaseHeader.vue
Voir le fichier 

@@ -0,0 +1,24 @@
 
+<template>
 
+  <div class="base-header">
 
+    <slot></slot>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default { name: 'BaseHeader' }
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+.base-header {
 
+  padding: px-to-rem(0) px-to-rem(12) px-to-rem(0) px-to-rem(45);
 
+  width: px-to-rem(368);
 
+  height: px-to-rem(48);
 
+  line-height: px-to-rem(48);
 
+  color: #fff;
 
+  font-size: px-to-rem(16);
 
+  font-family: PingFangSC, PingFang SC;
 
+  font-weight: 500;
 
+  background-size: cover;
 
+  background-image: url('@/assets/image/common/header-bg.png');
 
+}
 
+</style>

+ 88 - 0
src/components/base-panel/base-panel-left.vue
Voir le fichier 

@@ -0,0 +1,88 @@
 
+<template>
 
+  <div class="left-wrapper">
 
+    <div class="base-panel-left" :class="{ hide: isHide }">
 
+      <div class="leftbtn" @click="toggleLeftPanel"></div>
 
+      <div class="left-background" :class="{ leftHide: isHide }">
 
+        <slot></slot>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: 'BasePanelLeft',
 
+  data() {
 
+    return {
 
+      isHide: false
 
+    }
 
+  },
 
+  methods: {
 
+    toggleLeftPanel() {
 
+      console.log('切换左侧面板')
 
+      this.isHide = !this.isHide
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+.left-wrapper {
 
+  .base-panel-left {
 
+    position: absolute;
 
+    top: 0px;
 
+    left: 0;
 
+    height: 100vh;
 
+    width: 4.62rem;
 
+    padding-top: 0.92rem;
 
+    padding-left: 0.22rem;
 
+    transition: all 0.3s;
 
+    pointer-events: auto;
 
+    z-index: 40;
 
+
 
+    .leftbtn {
 
+      pointer-events: none;
 
+      display: block;
 
+      width: 0.7rem;
 
+      height: 100%;
 
+      text-align: center;
 
+      font-size: 0.2rem;
 
+      position: absolute;
 
+      top: 0;
 
+      right: 0;
 
+      z-index: 88;
 
+      background: url('@/assets/image/common/left_hide.png') no-repeat left center / 100% 100%;
 
+      &::after {
 
+        content: '';
 
+        position: absolute;
 
+        right: 0.1rem;
 
+        top: 45%;
 
+        width: 0.3rem;
 
+        height: 2.4rem;
 
+        pointer-events: auto;
 
+        cursor: pointer;
 
+      }
 
+    }
 
+    .left-background {
 
+      position: absolute;
 
+      transition: all 0.3s;
 
+      pointer-events: none;
 
+      width: 6.5rem;
 
+      height: 100%;
 
+      top: 0;
 
+      left: 0;
 
+      background: url('@/assets/image/common/dataCenterLeftBg.png') no-repeat 0 0 / 100%;
 
+    }
 
+  }
 
+  .hide {
 
+    transform: translateX(-5rem);
 
+    .leftbtn {
 
+      right: -1.08rem;
 
+      background: url('@/assets/image/common/left_show.png') no-repeat left center / 100% 100%;
 
+    }
 
+    div {
 
+      overflow: hidden;
 
+    }
 
+  }
 
+}
 
+</style>

+ 91 - 0
src/components/base-panel/base-panel-right.vue
Voir le fichier 

@@ -0,0 +1,91 @@
 
+<template>
 
+  <div class="right-wrapper">
 
+    <div class="base-panel-right" :class="{ hide: isHide }">
 
+      <div class="rightbtn" @click="toggleRightPanel"></div>
 
+      <div class="right-background" :class="{ rightHide: isHide }">
 
+        <slot></slot>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: 'BasePanelRight',
 
+  data() {
 
+    return {
 
+      isHide: false
 
+    }
 
+  },
 
+  methods: {
 
+    toggleRightPanel() {
 
+      console.log('切换右侧面板')
 
+      this.isHide = !this.isHide
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+.right-wrapper {
 
+  .base-panel-right {
 
+    position: absolute;
 
+    top: 0;
 
+    right: 0;
 
+    height: 100%;
 
+    width: 3.94rem;
 
+    padding-top: 0.48rem;
 
+    padding-right: 0.18rem;
 
+    transition: all 0.3s;
 
+    pointer-events: auto;
 
+    z-index: 40;
 
+    .rightbtn {
 
+      display: block;
 
+      width: 0.7rem;
 
+      height: 100%;
 
+      text-align: center;
 
+      font-size: 0.2rem;
 
+      left: -0.7rem;
 
+      position: absolute;
 
+      top: 0;
 
+      pointer-events: none;
 
+      z-index: 1;
 
+      background: url('@/assets/image/common/right_hide.png') no-repeat left center / 100% 100%;
 
+      &::after {
 
+        content: '';
 
+        position: absolute;
 
+        left: 0.1rem;
 
+        top: 45%;
 
+        width: 0.3rem;
 
+        height: 2.4rem;
 
+        pointer-events: auto;
 
+        cursor: pointer;
 
+      }
 
+    }
 
+    .right-background {
 
+      position: absolute;
 
+      transition: all 0.3s;
 
+      pointer-events: none;
 
+      width: 6.5rem;
 
+      height: 100%;
 
+      top: 0;
 
+      right: 0;
 
+      background: url('@/assets/image/common/dataCenterRightBg.png') no-repeat 0 0 / 100%;
 
+    }
 
+    .rightHide {
 
+      right: -0.32rem;
 
+    }
 
+  }
 
+  .hide {
 
+    transform: translateX(3.94rem);
 
+    padding-right: 0;
 
+    .rightbtn {
 
+      right: -1.08rem;
 
+      background: url('@/assets/image/common/right_show.png') no-repeat left center / 100% 100%;
 
+    }
 
+    div {
 
+      overflow: hidden;
 
+    }
 
+  }
 
+}
 
+</style>

+ 22 - 22
src/main.js
Voir le fichier 

@@ -1,32 +1,32 @@
 
-import Vue from "vue";
 
-import App from "./App.vue";
 
-import "@/assets/iconfont/iconfont.css";
 
+import Vue from 'vue'
 
+import App from './App.vue'
 
+import '@/assets/iconfont/iconfont.css'
 
 // element引入
 
-import Element from "element-ui";
 
-import "element-ui/lib/theme-chalk/index.css";
 
+import Element from 'element-ui'
 
+import 'element-ui/lib/theme-chalk/index.css'
 
 // sdk引入
 
-import sdk from "@ct/iframe-connect-sdk";
 
-import router from "./router";
 
-import store from "./store";
 
+import sdk from '@ct/iframe-connect-sdk'
 
+import router from './router'
 
+import store from './store'
 
 
-Vue.config.productionTip = false;
 
+Vue.config.productionTip = false
 
 // 挂载请求sdk
 
-const { iframeSDK, requestSDK, postMsgUtil } = sdk;
 
-Vue.prototype.$iframeSDK = iframeSDK;
 
-Vue.prototype.$requestSDK = requestSDK;
 
-Vue.prototype.$postMsgUtil = postMsgUtil;
 
+const { iframeSDK, requestSDK, postMsgUtil } = sdk
 
+Vue.prototype.$iframeSDK = iframeSDK
 
+Vue.prototype.$requestSDK = requestSDK
 
+Vue.prototype.$postMsgUtil = postMsgUtil
 
 
-Vue.use(Element, { size: "small" });
 
-Vue.prototype.isCross = true;
 
+Vue.use(Element, { size: 'small' })
 
+Vue.prototype.isCross = true
 
 
-localStorage.setItem("isCross", true);
 
-postMsgUtil.listen("checkCrossResult", function ({ data }) {
 
-  Vue.prototype.isCross = data !== 200;
 
-  localStorage.setItem("isCross", data !== 200);
 
-});
 
+localStorage.setItem('isCross', true)
 
+postMsgUtil.listen('checkCrossResult', function ({ data }) {
 
+  Vue.prototype.isCross = data !== 200
 
+  localStorage.setItem('isCross', data !== 200)
 
+})
 
 
 new Vue({
 
   router,
 
   store,
 
-  render: (h) => h(App),
 
-}).$mount("#app");
 
+  render: (h) => h(App)
 
+}).$mount('#app')

+ 30 - 28
src/views/index.vue
Voir le fichier 

@@ -7,6 +7,7 @@
 
       <el-main>
 
         <div class="home-view">
 
           <MainMap :mapKey="mapName" :url="configUrl" :options="mapOptions" @onload="onMapload" />
 
+          <OverviewLeft></OverviewLeft>
 
         </div>
 
       </el-main>
 
     </el-container>
 
@@ -14,22 +15,23 @@
 
 </template>
 
 
 <script>
 
-import menuPanel from "@/views/components/menu";
 
-import { mapState } from "vuex";
 
-import MainMap from "@/views/components/map";
 
-const basePathUrl = window.basePathUrl || "";
 
+import menuPanel from '@/views/components/menu'
 
+import { mapState } from 'vuex'
 
+import MainMap from '@/views/components/map'
 
+import OverviewLeft from './overview/left.vue'
 
+const basePathUrl = window.basePathUrl || ''
 
 export default {
 
-  name: "MainView",
 
-  components: { MainMap, menuPanel },
 
+  name: 'MainView',
 
+  components: { MainMap, menuPanel, OverviewLeft },
 
   computed: {
 
     ...mapState({
 
-      mainMenu: (state) => state.home.mainMenu,
 
-    }),
 
+      mainMenu: (state) => state.home.mainMenu
 
+    })
 
   },
 
   data() {
 
     return {
 
-      mapName: "cMap",
 
-      configUrl: basePathUrl + "config/config.json",
 
+      mapName: 'cMap',
 
+      configUrl: basePathUrl + 'config/config.json',
 
       mapOptions: {
 
         scene: { center: { lat: 32.507731, lng: 111.498888, alt: 1405.2, heading: 350.3, pitch: -11.6 } },
 
         basemaps: [
 
@@ -42,29 +44,29 @@ export default {
 
           //     ],
 
           //   },
 
           {
 
-            name: "天地图影像",
 
-            type: "group",
 
-            layers: [{ name: "底图", type: "tdt", layer: "img_d", key: ["d7077257b0ca8c279c3e1bf92fb437dc"] }],
 
-            show: true,
 
+            name: '天地图影像',
 
+            type: 'group',
 
+            layers: [{ name: '底图', type: 'tdt', layer: 'img_d', key: ['d7077257b0ca8c279c3e1bf92fb437dc'] }],
 
+            show: true
 
           },
 
           {
 
-            type: "tdt",
 
-            name: "天地图注记",
 
-            layer: "img_z",
 
-            key: ["d7077257b0ca8c279c3e1bf92fb437dc"],
 
-            show: true,
 
-          },
 
-        ],
 
-      },
 
-    };
 
+            type: 'tdt',
 
+            name: '天地图注记',
 
+            layer: 'img_z',
 
+            key: ['d7077257b0ca8c279c3e1bf92fb437dc'],
 
+            show: true
 
+          }
 
+        ]
 
+      }
 
+    }
 
   },
 
 
   methods: {
 
     // 地图加载回调优化
 
     async onMapload(map) {
 
-      window.map = map;
 
-      map.hasTerrain = true;
 
-    },
 
+      window.map = map
 
+      map.hasTerrain = true
 
+    }
 
     // 添加水面
 
     // addWaterSurface(map) {
 
     //   const geoJsonLayer = new this.mars3d.layer.GeoJsonLayer({
 
@@ -88,8 +90,8 @@ export default {
 
     //   });
 
     //   map.addLayer(geoJsonLayer);
 
     // },
 
-  },
 
-};
 
+  }
 
+}
 
 </script>
 
 
 <style lang="scss">

+ 16 - 0
src/views/overview/left.vue
Voir le fichier 

@@ -0,0 +1,16 @@
 
+<template>
 
+  <BasePanelLeft></BasePanelLeft>
 
+</template>
 
+<script>
 
+import BasePanelLeft from '@/components/base-panel/base-panel-left'
 
+export default {
 
+  name: 'overviewLeft',
 
+  components: { BasePanelLeft },
 
+  data() {
 
+    return {}
 
+  },
 
+
 
+  methods: {}
 
+}
 
+</script>
 
+<style scoped lang="scss"></style>