+ 主路光伏

ems-ui-cloud/src/router/index.js

@@ -6,6 +6,7 @@ Vue.use(Router);
 /* Layout */
 import Layout from '@/layout';
 import LargeScreen from '@/views/largeScreen/index.vue'
+import PvRoad from "@/views/largeScreen/pv-road/index.vue";
 /**
  * Note: 路由配置项
  *
@@ -145,6 +146,87 @@ export const constantRoutes = [
     ]
   },
   {
+    path: '/PvRoad',
+    name: 'PvRoad',
+    redirect: { name: 'home' },
+    component: PvRoad,
+    hidden: true,
+    children: [
+      {
+        path: 'home',
+        name: 'home',
+        meta: {
+          title: '首页'
+        },
+        components: {
+          default:() => import('@/views/largeScreen/center.vue'),
+          left: () => import('@/views/largeScreen/home/left.vue'),
+          right: () => import('@/views/largeScreen/home/right.vue')
+        }
+      },
+      {
+        path: 'source',
+        name: 'source',
+        meta: {
+          title: '源'
+        },
+        components: {
+          default:() => import('@/views/largeScreen/center.vue'),
+          left: () => import('@/views/largeScreen/source/left.vue'),
+          right: () => import('@/views/largeScreen/source/right.vue')
+        }
+      },
+      {
+        path: 'storage',
+        name: 'storage',
+        meta: {
+          title: '储'
+        },
+        components: {
+          default:() => import('@/views/largeScreen/center.vue'),
+          left: () => import('@/views/largeScreen/storage/left.vue'),
+          right: () => import('@/views/largeScreen/storage/right.vue')
+        }
+      },
+      {
+        path: 'soc',
+        name: 'soc',
+        meta: {
+          title: '荷'
+        },
+        components: {
+          default:() => import('@/views/largeScreen/center.vue'),
+          left: () => import('@/views/largeScreen/soc/left.vue'),
+          right: () => import('@/views/largeScreen/soc/right.vue')
+        }
+      },
+      {
+        path: 'net',
+        name: 'net',
+        meta: {
+          title: '网'
+        },
+        components: {
+          default:() => import('@/views/largeScreen/center.vue'),
+          left: () => import('@/views/largeScreen/net/left.vue'),
+          right: () => import('@/views/largeScreen/net/right.vue')
+        }
+      },
+      {
+        path: 'device',
+        name: 'device',
+        meta: {
+          title: '设备'
+        },
+        components: {
+          default:() => import('@/views/largeScreen/center.vue'),
+          left: () => import('@/views/largeScreen/device/left.vue'),
+          right: () => import('@/views/largeScreen/device/right.vue')
+        }
+      }
+    ]
+  },
+  {
     path: '',
     component: Layout,
     redirect: 'index',

ems-ui-cloud/src/views/largeScreen/pv-road/index.scss

@@ -0,0 +1,8 @@
+.module-top {
+  margin-top: 30px;
+}
+.unit {
+  font-size: 14px;
+  margin-left: 2px;
+  color: #768f95;
+}

ems-ui-cloud/src/views/largeScreen/pv-road/index.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="large-screen" id="largeScreen">
+    <div class="header">
+      <span class="header-name">{{ sysTitle }}</span>
+    </div>
+    <div class="left-sidebar-container">
+      <div class="top-info-area">
+        <div class="info-block">
+          <img src="@/assets/images/home/tianqi.svg" alt="">
+          <span>{{ weather.text }}</span>
+          <span>{{ weather.temperature }}</span>
+        </div>
+      </div>
+      <router-view class="sidebar-router-view" name="left"></router-view>
+    </div>
+    <router-view></router-view>
+    <div class="right-sidebar-container">
+      <div class="top-info-area">
+        <div class="info-block ">
+          <span class="date-info">
+            <span>{{ nowDay.currentTime }}</span>
+            <span>{{ nowDay.week }}</span>
+          </span>
+        </div>
+      </div>
+      <router-view class="sidebar-router-view" name="right"></router-view>
+    </div>
+    <div class="footer-container">
+      <Footer></Footer>
+    </div>
+
+  </div>
+</template>
+<script>
+import autofit from 'autofit.js'
+import Footer from '../footer.vue';
+import {dateFormat} from '@/utils/index.js'
+import axios from 'axios';
+import {listFactor} from "@/api/basecfg/cacfg";
+import {mapMutations} from 'vuex';
+import {listDisStaCoal} from "@/api/basecfg/disStaCoal";
+
+export default {
+  name: 'LargeScreen',
+  data() {
+    return {
+      sysTitle: '',
+      nowDay: {
+        currentTime: '',
+        week: '',
+      },
+      timer: null,
+      weather: {
+        text: '',
+        temperature: ''
+      }
+    };
+  },
+  components: {
+    Footer
+  },
+  computed: {},
+  async created() {
+    const {rows: regionFactor} = await listFactor({
+      regionCode: process.env.VUE_APP_REGION_CODE,
+    })
+    if (regionFactor && regionFactor.length > 0) {
+      this.setRegionFactor(regionFactor[0].factorValue)
+    }
+
+    const {rows: energyFactor} = await listDisStaCoal({
+      energyCode: '45',
+    })
+    if (regionFactor && regionFactor.length > 0) {
+      this.setElec2CFactor(energyFactor[0].coefficientValue)
+    }
+  },
+  mounted() {
+    autofit.init({
+      designHeight: 1080,
+      designWidth: 1920,
+      renderDom: "#largeScreen",
+      resize: true
+    })
+    this.getDate();
+    this.getWeather()
+    this.timer = setInterval(() => {
+      this.getDate();
+    }, 1000);
+    this.getConfigKey("sys.info.title").then(response => {
+      this.sysTitle = response.msg;
+    });
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    ...mapMutations('userState', ["setRegionFactor", "setElec2CFactor"]),
+    async getDate() {
+      let nowTime = new Date();
+      this.nowDay.week = "星期" + "日一二三四五六".charAt(nowTime.getDay());
+      this.nowDay.currentTime = dateFormat(nowTime, 'yyyy-MM-dd HH:mm:ss')
+    },
+    getWeather() {
+      axios.get('https://api.seniverse.com/v3/weather/now.json?key=SoZVeNXSD1AlWok1V&location=nanjing&language=zh-Hans&unit=c').then(({data: {results}}) => {
+        if (results && results.length) {
+          this.weather.text = results[0].now.text
+          this.weather.temperature = `${results[0].now.temperature}°C`
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.large-screen {
+  background: #000;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  font-size: 18px;
+  display: flex;
+}
+
+.header {
+  width: 100%;
+  z-index: 40;
+  position: absolute;
+  top: 0;
+  height: 230px;
+  text-align: center;
+  background-image: url('~@/assets/images/layout/head.png');
+  background-size: 85% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  .header-name {
+    font-size: 32px;
+    font-weight: bold;
+    letter-spacing: 0.1em;
+    background-clip: text;
+    color: transparent;
+    line-height: 70px;
+    background-image: linear-gradient(to bottom,
+        white 30%,
+        #75bfe9 100%);
+  }
+
+}
+
+// 左侧栏的容器样式
+.left-sidebar-container {
+  position: absolute;
+  z-index: 50;
+  top: 0;
+  left: 0;
+  width: 425px;
+  height: 1081px;
+  background-image: url('~@/assets/images/layout/left.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  padding-left: 7px;
+  padding-right: 6px;
+  padding-top: 4px;
+  padding-bottom: 20px;
+  pointer-events: auto;
+
+  // 顶部信息区域样式
+  .top-info-area {
+    height: 10%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-size: 18px;
+  }
+
+  // 信息块样式
+  .info-block {
+    display: flex;
+    align-items: center;
+    padding-left: 25px;
+    color: #B3E3E8;
+    margin-top: 8px;
+    height: 38px;
+
+    img {
+      height: 24px;
+      margin-right: 5px;
+    }
+
+    span {
+      margin-right: 5px;
+    }
+  }
+
+  // 路由视图容器样式
+  .sidebar-router-view {
+    height: 90%;
+  }
+}
+
+// 右侧栏的容器样式
+.right-sidebar-container {
+  position: absolute;
+  z-index: 40;
+  top: 0;
+  right: 0;
+  width: 425px;
+  height: 1081px;
+  background-image: url('~@/assets/images/layout/right.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  padding-left: 6px;
+  padding-right: 7px;
+  padding-top: 4px;
+  padding-bottom: 20px;
+  pointer-events: auto;
+
+  // 顶部信息区域样式
+  .top-info-area {
+    height: 10%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    text-align: right;
+  }
+
+  // 信息块样式
+  .info-block {
+    display: flex;
+    align-items: center;
+    height: 38px;
+    background-repeat: no-repeat;
+    justify-content: flex-end;
+    padding-right: 25px;
+    margin-top: 8px;
+  }
+
+  // 日期数据样式
+  .date-info {
+    color: #B3E3E8;
+    display: flex;
+    align-items: center;
+
+    span {
+      margin-left: 5px;
+    }
+  }
+
+  // 路由视图容器样式
+  .sidebar-router-view {
+    height: 90%;
+  }
+}
+
+// 底部栏的容器样式
+.footer-container {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  height: 230px;
+  pointer-events: none;
+  background-image: url('~@/assets/images/layout/footer.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 85% 100%;
+  z-index: 20;
+}
+</style>