5-27 布局修改

src/App.vue

@@ -1,13 +1,66 @@
 <template>
-  <div id="app" :class="'mainTheme-' + $store.state.themeName" v-loading="$store.state.loading" element-loading-text="拼命加载中"
-    element-loading-spinner="el-icon-loading">
-    <router-view />
+
+  <div
+    id="app"
+    :class="'mainTheme-' + this.themeName"
+    style="width: 100%; height: 100%"
+    v-loading="$store.state.loading"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading"
+  >
+  <router-view name="rally"></router-view>
+    <el-container style="height: 100%">
+      <el-header style="height: 60px; padding: 0 0px">
+        <headers></headers>
+      </el-header>
+
+      <el-container class="fot">
+        <el-aside class="son" :style="this.asidez">
+          <asiders></asiders>
+        </el-aside>
+        <el-main class="sis" :style="this.mainy">
+          <mains></mains>
+        </el-main>
+      </el-container>
+    </el-container>
   </div>
 </template>
-
+<script>
+import { mapGetters } from "vuex";
+import asiders from "@layout/aside";
+import headers from "@layout/header";
+import mains from "@layout/main";
+export default {
+  computed: {
+    ...mapGetters(["asidez", "mainy", "themeName"]),
+  },
+  components: {
+    asiders,
+    headers,
+    mains,
+  },
+};
+</script>
 <style lang="scss">
-@import '@assets/css/base.scss';
+@import "@assets/css/base.scss";
 </style>
 <style lang="scss" scoped>
-@import '@assets/css/theme.scss';
+@import "@assets/css/theme.scss";
+.fot {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  width: 100%;
+  height: 100%;
+}
+.son {
+  display: flex;
+  width: 10%;
+  height: 100%;
+}
+.sis {
+  display: flex;
+  width: 90%;
+  height: 100%;
+}
 </style>

src/api/axios.js

@@ -69,6 +69,7 @@ export function requestData (options) {
       if (options.showLoading) {
         store.state.loading = false;
       }
+      debugger
       if (response.code === 501) { // 用户类请求错误code (账号密码错误、用户锁定、token过期等)
         localStorage.removeItem('authToken');
         Message.error(response.data.msg);

src/assets/css/login.scss

@@ -5,33 +5,37 @@ $light_gray:#eee;
   background:url("/static/img/login.jpg") center center no-repeat;
   background-size:100% 100%;
   height: 100%;
+  width:100%;
   display:flex;
   align-items:center;
   justify-content:center;
-}
-.login-container{
-  background: $bg;
-  box-shadow: 0 15px 30px 0 rgba(0,0,0,0.3);
-  border-radius: 9px;
-  width: 50%;
-  height: 330px;
-  display: flex;
-  justify-content: center;
-  flex-direction: row ;
-  align-items: center;
 
-  .pic{
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-  }
-
-  .tab{
-    width: 390px;
-  }
-
-  .btn{
+  .login-container{
     display: flex;
     justify-content: center;
+    flex-direction: row ;
+    align-items: center;
+    background: $bg;
+    box-shadow: 0 15px 30px 0 rgba(0,0,0,0.3);
+    border-radius: 9px;
+    width: 50%;
+    height: 50%;
+   
+  
+    .pic{
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+    }
+  
+    .tab{
+      width: 390px;
+    }
+  
+    .btn{
+      display: flex;
+      justify-content: center;
+    }
   }
 }
+

src/assets/css/main.scss

@@ -1,24 +0,0 @@
-$top-height: 100px;
-.page{
-  >.top{
-    height: $top-height;
-    .logo{
-      height: 40px;
-      line-height: 40px;
-      font-size: 24px;
-      font-weight: bold;
-      padding-left: 20px;
-      color: #666;
-    }
-  }
-  >.main{
-    width: 100%;
-    height: calc(100vh - #{$top-height});
-  }
-  
-.head{
-  position: absolute;
-  left: 1800px;
-  top: 0px;
-}
-}

src/assets/js/login.js

@@ -1,39 +1,39 @@
-import { mapMutations} from 'vuex'
-export default {
-  data() {
-    return {
-      loginForm:{
-        username:'',
-        password:'',
-      }
+// import { mapMutations} from 'vuex'
+// export default {
+//   data() {
+//     return {
+//       loginForm:{
+//         username:'',
+//         password:'',
+//       }
       
-    }
-  },
-  components: {
-  },
-  created() {
-  },
+//     }
+//   },
+//   components: {
+//   },
+//   created() {
+//   },
   
-  methods: {
+//   methods: {
     
-    ...mapMutations("user", ["SET_TOKEN"]),
-    login(){
-      let _this = this;
-      var digital = new URLSearchParams();
-      digital.append("username",this.loginForm.username),
-      digital.append("password",this.loginForm.password),
-      this.API.post("/admin/loginvue", digital).then((res) => {
-       const {data,code} = res;
-       if(code == 200){
-				this.SET_TOKEN({"token":data,"username":this.loginForm.username});
-				this.$message({
-          message: '登陆成功',
-          type: 'success'
-        });
-         this.$router.push('/'); // 跳转到首页
-			} else {
-        this.$message.error('登录失败');// ui弹窗提示
-			}
-      });
-    }
-  }}
+//     ...mapMutations("user", ["SET_TOKEN"]),
+//     login(){
+//       let _this = this;
+//       var digital = new URLSearchParams();
+//       digital.append("username",this.loginForm.username),
+//       digital.append("password",this.loginForm.password),
+//       this.API.post("/admin/loginvue", digital).then((res) => {
+//        const {data,code} = res;
+//        if(code == 200){
+// 				this.SET_TOKEN({"token":data,"username":this.loginForm.username});
+// 				this.$message({
+//           message: '登陆成功',
+//           type: 'success'
+//         });
+//          this.$router.push('/'); // 跳转到首页
+// 			} else {
+//         this.$message.error('登录失败');// ui弹窗提示
+// 			}
+//       });
+//     }
+//   }}

src/assets/js/main.js

@@ -1,40 +0,0 @@
-import menuData from "@jsonData/menu.json" //动态导入
-import menuZj from "@components/common/menu"
-import headPortrait from "@views/headPortrait"
-export default {
-  data () {
-    return {
-      menuIndex: '1', // 菜单默认选中项
-      menu: [], // 菜单数据
-    }
-  },
-
-  components: {
-    menuZj, headPortrait
-  },
-
-  mounted () {
-    this.getMenu();
-  },
-
-  methods: {
-    // 获取菜单
-    getMenu () {
-      this.API.requestData({
-        subUrl: "admin/usermenu",
-        success (res) {
-          console.log("getMenu", res);
-        }
-      });
-      return;
-      this.menu = menuData.menu;
-      // this.API.get('/powercompare/windfarmAjax').then(res => {
-      //   console.log(res)
-      //   // if (res.code === 200) {
-      //   //   this.eqType = this.BASE.cascaderBugRepair(res.data.result);
-      //   // }
-
-      // });
-    },
-  }
-}

src/components/common/menu.vue

@@ -37,6 +37,7 @@ export default {
     init () { },
     // 菜单点击跳转
     menuC (item) {
+      debugger
       if (item.type === 'changeTheme') {
         this.$store.commit('changeTheme', item.url);
       } else {

src/layout/aside.vue

@@ -0,0 +1,90 @@
+<template>
+  <el-menu
+    default-active="1"
+    class="el-menu-vertical-demo"
+    @open="handleOpen"
+    @close="handleClose"
+    :collapse="Boolean(isCollapse)"
+    :collapse-transition="false"
+    unique-opened="true"
+    mode="vertical"
+    background-color="#545c64"
+    text-color="#fff"
+  >
+    <el-menu-item index="0" @click="open">
+      <i class="el-icon-s-operation"></i>
+    </el-menu-item>
+
+    <el-submenu index="1">
+      <template slot="title">
+        <i class="el-icon-location"></i>
+
+        <span slot="title">导航一</span>
+      </template>
+
+      <el-menu-item index="1-1-1">选项1-1</el-menu-item>
+
+      <el-menu-item index="1-2-1">选项2-1</el-menu-item>
+
+      <el-menu-item index="1-3-1">选项3-1</el-menu-item>
+    </el-submenu>
+
+    <el-submenu index="6" @click="open">
+      <template slot="title">
+        <i class="el-icon-location"></i>
+        <span slot="title">导航一</span>
+      </template>
+
+      <el-submenu index="1-1">
+        <span slot="title">选项1</span>
+        <el-menu-item index="1-1-1">选项1-1</el-menu-item>
+      </el-submenu>
+
+      <el-submenu index="1-2">
+        <span slot="title">选项2</span>
+        <el-menu-item index="1-2-1">选项2-1</el-menu-item>
+      </el-submenu>
+
+      <el-submenu index="1-3">
+        <span slot="title">选项3</span>
+        <el-menu-item index="1-3-1">选项3-1</el-menu-item>
+      </el-submenu>
+    </el-submenu>
+  </el-menu>
+</template>
+
+<script>
+import { mapMutations , mapGetters} from "vuex";
+export default {
+  data() {
+    return {
+      isCollapse: "asa",
+    };
+  },
+  created() {},
+  methods: {
+    ...mapMutations(["changeZ","changeY"]),
+    open() {
+      if(this.isCollapse){
+        this.changeZ("width:7%");
+        this.changeY("width:93%");
+        this.isCollapse = null
+
+      }else{
+        this.isCollapse = "lko"
+        this.changeZ("width:4%");
+        this.changeY("width:96%");
+      }
+    },
+    handleOpen(key, keyPath) {},
+    handleClose(key, keyPath) {},
+  },
+};
+</script>
+
+<style>
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  min-height: 400px;
+}
+</style>

src/layout/header.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="top">
+    <div class="title">
+      <div class="logo">国电电力宁夏新能源集中监控系统</div>
+      <div class="title_y">
+        <menuZj :menu="menu" :menuIndex="menuIndex"></menuZj>
+        <span
+          style="
+            height: 40px;
+            line-height: 40px;
+            margin-top:9px;
+            font-size: 20px;
+            font-weight: bold;
+            color:#fff;
+          "
+          >{{ username }}</span
+        >
+        <headPortrait style="margin: 8px"></headPortrait>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from "vuex";
+import menuData from "@jsonData/menu.json"; //动态导入
+import menuZj from "@components/common/menu";
+import headPortrait from "@views/headPortrait";
+export default {
+  data() {
+    return {
+      menuIndex: "1", // 菜单默认选中项
+      menu: [], // 菜单数据
+      username: localStorage.getItem("username"),
+    };
+  },
+  created() {
+    this.name = this.username
+      ? this.username
+      : localStorage.getItem("username");
+  },
+  components: {
+    menuZj,
+    headPortrait,
+  },
+  mounted() {
+    this.getMenu();
+  },
+  computed: {
+    // 使用对象展开运算符将 getter 混入 computed 对象中
+    ...mapGetters(["username"]),
+  },
+  methods: {
+    // 获取菜单
+    getMenu() {
+      //   this.API.requestData({
+      //     subUrl: "admin/usermenu",
+      //     success (res) {
+      //       console.log("getMenu", res);
+      //     }
+      //   });
+      //   return;
+      this.menu = menuData.menu;
+      this.API.get("/powercompare/windfarmAjax").then((res) => {
+        console.log(res);
+        if (res.code === 200) {
+          this.eqType = this.BASE.cascaderBugRepair(res.data.result);
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style>
+.top {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  height: 60px;
+  background-color: #545c64;
+}
+.logo {
+  height: 40px;
+  line-height: 40px;
+  font-size: 35px;
+  font-weight: bold;
+  margin: 6px 0 0 8px;
+  color: rgb(252, 249, 250);
+}
+.title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.title_y {
+  display: flex;
+  flex-direction: row;
+}
+</style>

src/layout/main.vue

@@ -0,0 +1,10 @@
+<template>
+      <VueScroll><router-view></router-view></VueScroll> 
+    <!--
+          <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
+          当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
+        -->
+    <!-- <keep-alive v-if="$route.meta.keepAlive || $route.meta.keepAlive === undefined">
+          <router-view></router-view>
+        </keep-alive> -->
+</template>

src/main.js

@@ -37,6 +37,7 @@ Vue.prototype.Moment = moment;
 // 滚动条
 import vuescroll from "vuescroll";
 Vue.use(vuescroll, {
+  sizeStrategy: 'percent',
   ops: {
     scrollPanel: {
       easing: "easeInOutQuad",
@@ -65,6 +66,31 @@ Vue.use(vuescroll, {
 
 // 引入外部字体
 import '@assets/css/font.scss'
+//路由前置导航
+router.beforeEach((to, from, next) => {
+  // 登录后登录处理办法
+  // if (to.path === '/login' && store.getters.authToken) {
+  //   next({ path: '/' })
+  // } else
+   if (to.matched.some(m => m.meta.requireAuth)) {    // 需要登录
+    if (window.localStorage.authToken) {
+      next()
+    } else if (to.path !== '/login') {
+      let token = localStorage.getItem('authToken');
+      if (token === null || token === '' || token === undefined) {
+        next({ path: '/login' })
+      } else { next() }
+    } else {
+      next()
+    }
+  } else {   // 不需要登录
+    next()
+  }
+  if (to.matched.length === 0) { // 如果未匹配到路由
+    // sessionStorage.removeItem("btrh_sxsd_locationHref");
+    next('/404')   // 如果上级也未匹配到路由则跳转登录页面，如果上级能匹配到则转上级路由
+  }
+})
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -16,7 +16,7 @@ VueRouter.prototype.replace = function replace (location) {
 import main from '@views/main'
 import error404 from '@views/404'
 import login from '@views/login'
-
+import contents from '@layout/main'
 // 子路由
 import yRouter from '@router/ylf';
 import lRouter from '@router/lzx';
@@ -30,25 +30,29 @@ const routes = [
     meta: {
       requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
     },
-    component: main,
+    component:contents
+    ,
     children: [
-      { // 首页
-        path: '/',
-        component: r => require.ensure([], () => r(require('@views/index/index')), 'indexM')
-      },
+      // { // 首页
+      //   path: '/',
+      //   component: r => require.ensure([], () => r(require('@views/index/index')), 'indexM')
+      // },
       ...yRouter,
       ...lRouter,
       ...zRouter
     ]
   },
   {
+    
     path: '/404', // 页面不存在的情况下会跳到404页面
     meta: {
-      requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的  /进路由勾子函数beforeEach
+      requireAuth: false, // 添加该字段，表示进入这个路由是需要登录的  /进路由勾子函数beforeEach
     },
     name: 'error404',
     component: error404,
-  },
+    components:{rally:error404}
+  }
+  ,
   {
     path: '/login',
     meta: {
@@ -56,6 +60,7 @@ const routes = [
     },
     name: 'login',
     component: login,
+    components:{rally:login}
   }
   // { // 健康评价报告 - 临时  /部署单页面
   //   path:'/healthAssessmentDetailed2',
@@ -66,12 +71,10 @@ const routes = [
 const router = new VueRouter({
   mode: 'history',
   //base: '/sis/', // 部署单页面 404 history  带井号解决（去掉history 放web-inf）
-  routes
+  routes,
 })
 
-/**
- * 路由的钩子函数，处理是否登录的判断
- * **/
+//路由前置导航
 router.beforeEach((to, from, next) => {
   // 登录后登录处理办法
   // if (to.path === '/login' && store.getters.authToken) {
@@ -96,5 +99,9 @@ router.beforeEach((to, from, next) => {
     next('/404')   // 如果上级也未匹配到路由则跳转登录页面，如果上级能匹配到则转上级路由
   }
 })
+/**
+ * 路由的钩子函数，处理是否登录的判断
+ * **/
+
 
 export default router

src/store/getters.js

@@ -4,5 +4,7 @@ const getters = {
   loading: state => state.loading,
   username: state => state.user.username,
   themeName: state => state.themeName,
+  asidez: state => state.z,
+  mainy: state => state.y,
 }
 export default getters

src/store/index.js

@@ -8,6 +8,8 @@ const state = {
   submitDDTag: false,   //提交 - 防抖动 - 针对快速请求问题的拦截机制
   loading: false,   //全局 - 加载中....
   themeName: "light",
+  z:"width:4%",
+  y:"width:96%"
 };
 //改变状态的方法
 const mutations = {
@@ -20,6 +22,12 @@ const mutations = {
   changeTheme(state, tag) {
     state.themeName = tag;
   },
+  changeZ(state, tag){
+    state.z = tag;
+  },
+  changeY(state, tag){
+    state.y = tag;
+  }
 };
 var vuexStore = new Vuex.Store({
   modules: {

src/views/headPortrait.vue

@@ -2,7 +2,7 @@
   <div class="head">
     <el-popover placement="bottom" width="200" trigger="click">
       <div class="border">
-        <p id="character">你好:</p>
+        <p id="character">已登录用户:</p>
         <p id="character-yh">{{ name }}</p>
       </div>
       <el-divider></el-divider>
@@ -15,7 +15,7 @@
       <el-button
         style="border-radius: 50px"
         icon="el-icon-user-solid"
-        type="info"
+        type="warning"
         slot="reference"
       ></el-button>
     </el-popover>

src/views/main.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="page">
-    <headPortrait></headPortrait>
-    <div class="top">
-      <div class="logo">国电电力宁夏新能源集中监控系统</div>
-      <!-- 住菜单 -->
-      <menuZj :menu="menu" :menuIndex="menuIndex"></menuZj>
-      
-    </div>
-
-    <!-- 主显示区域 -->
-    <div class="main">
-      <VueScroll>
-        <!--
-          <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
-          当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
-        -->
-        <!-- <keep-alive v-if="$route.meta.keepAlive || $route.meta.keepAlive === undefined">
-          <router-view></router-view>
-        </keep-alive> -->
-        <router-view></router-view>
-      </VueScroll>
-    </div>
-  </div>
-</template>
-
-
-<script>
-  import main from '@assets/js/main'
-  export default main
-</script>
-
-<style lang="scss" scoped>
-  @import "@assets/css/main.scss";
-</style>

src/views/singlePerformanceAnalysis/powerandWindspeedChart.vue

@@ -1,78 +1,72 @@
 <template>
-  <v-main>
-    <v-card>
-      <el-form
-        :inline="true"
-        class="demo-form-inline"
-        style="margin-top: 1%; margin-left: 1%"
-      >
-        <el-form-item label="风场">
-          <el-select
-            v-model="fc"
-            clearable
-            placeholder="请选择"
-            @change="query()"
+  <div>
+    <el-form
+    style="width:9000px"
+      :inline="true"
+    >
+      <el-form-item label="风场">
+        <el-select
+          v-model="fc"
+          clearable
+          placeholder="请选择"
+          @change="query()"
+        >
+          <el-option
+            v-for="item in wpIdslist"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
           >
-            <el-option
-              v-for="item in wpIdslist"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
+          </el-option>
+        </el-select>
+      </el-form-item>
 
-        <el-form-item label="风机">
-          <el-select v-model="fj" placeholder="请选择" :multiple-limit="5">
-            <el-option
-              v-for="item in wtIdslist"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="年">
-          <el-date-picker
-            v-model="year"
-            type="year"
-            value-format="yyyy"
-            placeholder="选择年"
-            :picker-options="pickerOptions">
+      <el-form-item label="风机">
+        <el-select v-model="fj" placeholder="请选择" :multiple-limit="5">
+          <el-option
+            v-for="item in wtIdslist"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
           >
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="月">
-          <el-date-picker
-            v-model="month"
-            type="month"
-            value-format="M"
-            placeholder="选择月"
-            :picker-options="pickerOptions">
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="年">
+        <el-date-picker
+          v-model="year"
+          type="year"
+          value-format="yyyy"
+          placeholder="选择年"
+          :picker-options="pickerOptions"
+        >
           >
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="query_scatter" :plain="true"
-            >查询</el-button
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="月">
+        <el-date-picker
+          v-model="month"
+          type="month"
+          value-format="M"
+          placeholder="选择月"
+          :picker-options="pickerOptions"
+        >
           >
-        </el-form-item>
-      </el-form>
-      <div
-        v-loading="loading"
-        id="scatter_diagram"
-        style="
-          height: 730px;
-          width: 95%;
-          margin-left: 9px;
-          margin-bottom: 39px;
-        "
-      ></div>
-    </v-card>
-  </v-main>
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="query_scatter" :plain="true"
+          >查询</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <div
+      v-loading="loading"
+      id="scatter_diagram"
+      style="height: 730px; width: 100%; margin-left: 9px; margin-bottom: 39px"
+    ></div>
+  </div>
 </template>
 
 <script>
@@ -81,5 +75,5 @@ export default powerandWindspeedChart;
 </script>
 
 <style lang="scss" scoped>
- @import "@assets/css/singlePerformanceAnalysis/powerandWindspeedChart.scss";
+@import "@assets/css/singlePerformanceAnalysis/powerandWindspeedChart.scss";
 </style>

vue.config.js

@@ -23,6 +23,7 @@ module.exports = {
       .set('@views', resolve('src/views'))
       .set('@router', resolve('src/router'))
       .set('@store', resolve('src/store'))
+      .set('@layout',resolve('src/layout'))
       .set('@jsonData', resolve('src/jsonData'));
     // 压缩图片
     if (IS_PROD) {