代码提交

src/components/mainHeader/index.vue

@@ -1,12 +1,21 @@
 <script setup>
 import moment from "moment"
-import  {ref,onMounted} from "vue";
+import  {ref,shallowRef} from "vue";
+import overview from '@/views/overview/index.vue' //总览
+import energyEfficiency from '@/views/energyEfficiency/index.vue' //能效
+import drainage from '@/views/drainage/index.vue' //排水
+import airConditioning from '@/views/air-conditioning/index.vue' //空调
+import lighting from '@/views/lighting/index.vue' //照明
+import carbonEmission from '@/views/carbonEmission/index.vue' //碳排放
+
+import screen from '@/views/screen/index.vue' //显示屏
+import energyMonitoring from '@/views/energyMonitoring/index.vue'
 const nowDate = ref('')
 const nowWeek = ref('')
 const nowMin = ref('')
 
-const timer = ref('')
+const timer = ref(0)
-const getNowDate = (val) =>{
+const getNowDate = () =>{
   nowDate.value = moment().format('YYYY年MM月DD日')
   nowWeek.value = moment().format('dddd')
   nowMin.value = moment().format('HH:mm:ss')
@@ -15,6 +24,29 @@ getNowDate()
 timer.value = setInterval(()=>{
   getNowDate()
 },1000)
+const menuList = ref([
+  {name:shallowRef(overview),default:'../../assets/images/menu/overview.png',select:'../../assets/images/menu/overview-select.png'},
+  {name:shallowRef(energyMonitoring),
+    default:'../../assets/images/menu/energy.png',select:'../../assets/images/menu/energy-select.png'},
+  {name:shallowRef(energyEfficiency),default:'../../assets/images/menu/energy-efficiency.png',select:'../../assets/images/menu/energy-efficiency-select.png'},
+  {name:shallowRef(drainage),default:'../../assets/images/menu/drainage.png',select:'../../assets/images/menu/drainage-select.png'},
+  {name:shallowRef(airConditioning),default:'../../assets/images/menu/air-conditioning.png',select:'../../assets/images/menu/air-conditioning-select.png'},
+  {name:shallowRef(lighting),default:'../../assets/images/menu/lighting.png',select:'../../assets/images/menu/lighting-select.png'},
+  {name:shallowRef(carbonEmission),default:'../../assets/images/menu/carbon.png',select:'../../assets/images/menu/carbon-select.png'},
+  {name:shallowRef(screen),default:'../../assets/images/menu/screen.png',select:'../../assets/images/menu/screen-select.png'}
+])
+const menuIndex = ref(0)
+// 菜单切换方法
+const toggleClick = (item,index) =>{
+  tabName.value = item?.name
+  menuIndex.value = index
+
+}
+const tabName = shallowRef(overview)
+const getImageUrl=(name)=>{
+  return `url(${new URL(name, import.meta.url).href})`
+}
+
 </script>
 
 <template>
@@ -42,7 +74,16 @@ timer.value = setInterval(()=>{
       </p>
 
     </div>
-    <router-view />
+    <div class="menu">
+      <ul>
+        <li @click="toggleClick(item,index)" v-for="(item,index) in menuList"  :style="'background-image:'+ getImageUrl(menuIndex==index?item.select:item.default)" :class="'menu-icon'+index"></li>
+      </ul>
+    </div>
+<!--    <overview></overview>-->
+<!--    <router-view />-->
+    <keep-alive>
+      <component :is="tabName"></component>
+    </keep-alive>
   </div>
 </template>
 
@@ -89,5 +130,26 @@ timer.value = setInterval(()=>{
 .weaIcon{
 
 }
+.menu{
+  position: fixed;
+  bottom: vh(24);
+  z-index:999;
+  left:29.15%;
+  width: vw(800);
+  height: vh(100);
+  ul{
+    //width: 100%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+  li{
+    list-style: none;
+    cursor: pointer;
+    width:12.5%;
+    height: 100%;
+    background-size: 100% 100%;
+  }
+  }
 
+}
 </style>

src/style.scss

@@ -6,7 +6,7 @@
   padding: 0;
   overflow: hidden;
 }
-p{
+p,ul,li{
   margin: 0;
   padding: 0;
 }

src/views/air-conditioning/index.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+<div>
+  空调
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/carbonEmission/index.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+<div>
+  碳排放
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/drainage/index.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+<div>
+  排水
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/energyEfficiency/index.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+<div>
+  能效
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/lighting/index.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+<div>
+  照明
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/overview/index.vue

@@ -156,7 +156,9 @@ const drawPowerEcharts = () =>{
         <span>实时负荷</span>
       </div>
       <div class="margin10 box-bg">
+          <div class="">
 
+          </div>
       </div>
       <!--  气象站-->
       <div class="title margin10">

src/views/screen/index.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+<div>
+  显示屏
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>