初次提交

2023-12-12 10:40:42 +08:00 · 2023-12-12 10:40:42 +08:00 · ce2d9dd12d
parent b2d65d7396
commit ce2d9dd12d
27 changed files with 4246 additions and 0 deletions
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,8 @@
+# 页面标题
+VITE_APP_TITLE = 若依管理系统
+
+# 开发环境配置
+VITE_APP_ENV = 'development'
+
+# 若依管理系统/开发环境
+VITE_APP_BASE_API = '/dev-api'
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,11 @@
+# 页面标题
+VITE_APP_TITLE = 若依管理系统
+
+# 生产环境配置
+VITE_APP_ENV = 'production'
+
+# 若依管理系统/生产环境
+VITE_APP_BASE_API = '/prod-api'
+
+# 是否在打包时开启压缩，支持 gzip 和 brotli
+VITE_BUILD_COMPRESS = gzip
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>长岛海洋生态文明展览馆</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,26 @@
+{
+  "name": "vitevue",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "echarts": "^5.4.3",
+    "element-plus": "^2.4.3",
+    "moment": "^2.29.4",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "vue": "^3.2.47",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.1.0",
+    "less": "^4.2.0",
+    "less-loader": "^11.1.3",
+    "vite": "^4.3.2"
+  }
+}
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,16 @@
+<script setup>
+
+import mainHeader from '@/components/mainHeader/index.vue'
+</script>
+
+<template>
+<!-- 背景和三维 -->
+  <mainHeader></mainHeader>
+
+
+
+<!--  <calendar></calendar>-->
+</template>
+
+<style scoped>
+</style>
--- a/src/assets/images/bg.png
+++ b/src/assets/images/bg.png
--- a/src/assets/images/box-bg.png
+++ b/src/assets/images/box-bg.png
--- a/src/assets/images/mask/bottom.png
+++ b/src/assets/images/mask/bottom.png
--- a/src/assets/images/mask/left.png
+++ b/src/assets/images/mask/left.png
--- a/src/assets/images/mask/right.png
+++ b/src/assets/images/mask/right.png
--- a/src/assets/images/mask/top.png
+++ b/src/assets/images/mask/top.png
--- a/src/assets/images/small-icon-select.png
+++ b/src/assets/images/small-icon-select.png
--- a/src/assets/images/small-icon.png
+++ b/src/assets/images/small-icon.png
--- a/src/assets/images/title.png
+++ b/src/assets/images/title.png
--- a/src/assets/styles/utils.scss
+++ b/src/assets/styles/utils.scss
@ -0,0 +1,26 @@
+@use "sass:math";
+//默认设计稿的宽度
+//$designWidth: 3840;
+//默认设计稿的高度
+//$designHeight: 2160;
+#app,html{
+  font-size: 32px;
+}
+@media screen and (max-width:1920px){
+  #app,html{
+    font-size: 16px;
+  }
+
+}
+$designWidth: 1920;
+$designHeight: 1080;
+
+//px转为vw的函数
+@function vw($px) {
+  @return math.div($px , $designWidth) * 100%;
+}
+
+//px转为vh的函数
+@function vh($px) {
+  @return math.div($px , $designHeight) * 100%;
+}
--- a/src/assets/vue.svg
+++ b/src/assets/vue.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/src/components/calendar/index.vue
+++ b/src/components/calendar/index.vue
@ -0,0 +1,64 @@
+<script setup>
+import  {ref} from 'vue'
+// dom
+const calendar = ref()
+const calenderValue = ref(new Date())
+// 时间参数
+const calendarDate = ref()
+const toggleClick = () =>{
+
+}
+const selectDate = (val) => {
+  if (!calendar.value) return
+  calendar.value.selectDate(val)
+}
+</script>
+
+<template>
+  <el-calendar ref="calendar"  v-model="calendarDate">
+    <template #header="{date}">
+<!--      <div class="calender-header">-->
+        <p>
+<!--          <span @click="selectDate('prev-year')">上一年</span>-->
+          <span @click="selectDate('prev-month')">上个月</span>
+        </p>
+        <span @click="toggleClick">{{date}}</span>
+        <p>
+          <span @click="selectDate('next-month')">下个月</span>
+<!--          <span @click="selectDate('next-year')">下一年</span>-->
+        </p>
+
+<!--      </div>-->
+
+    </template>
+    <template #date-cell="{ data }">
+      <p class="day">{{ data.day.split('-').slice(1)[1] }}</p>
+    </template>
+  </el-calendar>
+</template>
+
+<style scoped lang="less">
+:deep(.el-calendar){
+  font-size: .7rem;
+  width: 100% !important;
+  height: 100% !important;
+  background-color: transparent !important;
+}
+:deep(.el-calendar__header){
+  align-items: center;
+  padding: 0.5rem;
+}
+:deep(.el-calendar-day){
+  //display: none;
+  width: 52px !important;
+  padding: 0 !important;
+  height: 30% !important;
+  //max-height:  1.8rem!important;
+}
+:deep(.el-calendar-table thead th){
+  padding: 0;
+}
+:deep(.el-calendar__body){
+  padding: 0.5rem;
+}
+</style>
--- a/src/components/mainHeader/index.vue
+++ b/src/components/mainHeader/index.vue
@ -0,0 +1,92 @@
+<script setup>
+import moment from "moment"
+import  {ref,onMounted} from "vue";
+const nowDate = ref('')
+const nowWeek = ref('')
+const nowMin = ref('')
+
+const timer = ref('')
+const getNowDate = (val) =>{
+  nowDate.value = moment().format('YYYY年MM月DD日')
+  nowWeek.value = moment().format('dddd')
+  nowMin.value = moment().format('HH:mm:ss')
+}
+getNowDate()
+timer.value = setInterval(()=>{
+  getNowDate()
+},1000)
+</script>
+
+<template>
+  <div class="header">
+
+  </div>
+  <!--  左侧遮罩-->
+  <div class="left-mask">
+
+  </div>
+  <!--  右侧遮罩-->
+  <div class="right-mask">
+
+  </div>
+  <div class="container">
+    <div class="date">
+      <p>
+        <span class="m10">{{nowDate}}</span>
+        <span class="m10">{{nowWeek}}</span>
+        <span>{{nowMin}}</span>
+      </p>
+      <p>
+        <span class="m10 weaIcon">晴</span>
+        <span>4~13℃</span>
+      </p>
+
+    </div>
+    <router-view />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header {
+  height: vh(136);
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-image: url('@/assets/images/mask/top.png');
+  background-size: 100% 100%;
+  z-index: -1 !important;
+}
+.left-mask {
+  width: vw(600);
+  left: 0;
+  position: absolute;
+  z-index: -99;
+  height: 100%;
+  background-image: url('@/assets/images/mask/left.png');
+  background-size: 100% 100%;
+}
+
+.right-mask {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: vw(600);
+  height: 100%;
+  z-index: -99;
+  background-image: url('@/assets/images/mask/right.png');
+  background-size: 100% 100%;
+}
+.date{
+  display: flex;
+  color:#fff;
+  margin: 2.5rem 2.2rem 0 2.2rem;
+  justify-content: space-between;
+}
+.m10{
+  margin-right: 1.3rem;
+}
+.weaIcon{
+
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,22 @@
+import { createApp } from 'vue'
+import './style.scss'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+import router from './router/router.js'
+import moment from "moment"
+moment.locale('zh-cn', {
+    weekdays: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
+
+})
+
+// 引入 echarts
+import * as echarts from "echarts";
+// element-plus中文
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import 'element-plus/dist/index.css'
+const app = createApp(App)
+
+app.config.globalProperties.$echarts = echarts;
+app.use(router).use(ElementPlus,{
+    locale: zhCn,
+}).mount('#app')
--- a/src/router/router.js
+++ b/src/router/router.js
@ -0,0 +1,24 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import Overview from '../views/overview/index.vue'
+
+
+const routes = [
+    {
+        path: '/',
+        redirect: '/overview'
+    },
+    {
+        path: '/overview',
+        name: 'overview',
+        component: Overview
+    },
+
+]
+
+const router = createRouter({
+    // history: createWebHistory(),
+    history: createWebHashHistory(),
+    routes,
+})
+
+export default router;
--- a/src/style.scss
+++ b/src/style.scss
@ -0,0 +1,70 @@
+
+#app,html,body{
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+p{
+  margin: 0;
+  padding: 0;
+}
+.container{
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/images/bg.png');
+  background-size: 100% 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index:99;
+
+}
+.m100{
+  position: relative;
+  top:2rem;
+}
+.margin10{
+  margin-top: 0.8rem;
+}
+.box-bg{
+  width: 100%;
+  height: vh(248);
+  background-image: url('@/assets/images/box-bg.png');
+  background-size: 100% 100%;
+}
+.title{
+  font-size: 22px;
+  font-weight: bold;
+  color: #fff;
+  padding-left: 2.75rem;
+  padding-right:1rem;
+  box-sizing: border-box;
+  background-image: url('@/assets/images/title.png');
+  width: 100%;
+  height:vh(38);
+  background-size: 100% 100%;
+  align-items: center;
+  justify-content: space-between;
+  display: flex;
+  p{
+    display: flex;
+    align-items: center;
+    span{
+      font-size: 14px;
+      font-weight: normal;
+    }
+    .year,.month{
+      padding: 0 0.8rem;
+      //display: inline-block;
+      //background-color: #092624;
+      background-image: url('@/assets/images/small-icon.png');
+      background-size: 100% 100%;
+      cursor: pointer;
+    }
+    .year{
+      margin-right: .5rem;
+    }
+  }
+}
--- a/src/views/overview/index.vue
+++ b/src/views/overview/index.vue
@ -0,0 +1,198 @@
+<script setup>
+import calendar from '@/components/calendar/index.vue'
+import * as echarts from 'echarts'
+import {onMounted} from "vue";
+onMounted(()=>{
+  drawPowerEcharts()
+})
+const drawPowerEcharts = () =>{
+  let myChart = echarts.init(document.getElementById('power'))
+  const option = {
+    // backgroundColor: "#05224d",
+    tooltip: {},
+    grid: {
+      top: "18%",
+      left: "4%",
+      right: "4%",
+      bottom: "4%",
+      containLabel: true,
+    },
+    xAxis: [
+
+      {
+        type: "category",
+        boundaryGap: false,
+        axisLine: {
+          //坐标轴轴线相关设置。数学上的x轴
+          show: true,
+          lineStyle: {
+            // type:'dashed',
+            color: "rgba(1, 39, 37, .3)",
+            // color: "#233e64",
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#DDFFFD",
+            margin: 40,
+          },
+
+        },
+
+        axisTick: { show: false },
+        boundaryGap: true,
+        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name:"单位:kW/h",
+        nameTextStyle:{
+          color: "#DDFFFD",
+        },
+        min: 0,
+        max: 500,
+        splitNumber: 5,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type:'dashed',
+            color: "rgba(1, 39, 37, 0.30)",
+          },
+        },
+        axisLine: { show: false },
+        axisLabel: {
+          textStyle: {
+            color: "#DDFFFD",
+          },
+        },
+        axisTick: { show: false },
+      },
+    ],
+    series: [
+      {
+        name: "异常流量",
+        type: "line",
+        smooth: true, //是否平滑曲线显示
+        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
+        symbolSize: 0,
+
+        lineStyle: {
+          normal: {
+            color: "#5BFAF1", // 线条颜色
+          },
+        },
+        areaStyle: {
+          //区域填充样式
+          normal: {
+            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+            color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  { offset: 0, color: "rgba(91, 250, 241, 0.40)" },
+                  { offset: 1, color: "rgba(91, 250, 241, 0)" },
+                ],
+                false
+            ),
+
+            shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
+            shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+          },
+        },
+        data: [110, 200, 300,325, 400, 322, 250],
+      },
+    ],
+  };
+  myChart.setOption(option)
+}
+</script>
+
+<template>
+
+  <div class="overview m100">
+
+    <div class="overview-left-box">
+      <!--  用电量-->
+      <div class="title">
+        <span>用电量</span>
+        <p>
+          <span class="year">年</span>
+          <span class="month">月</span>
+        </p>
+      </div>
+      <div class="margin10 box-bg" id="power">
+
+      </div>
+      <!--  日历-->
+      <div class="title margin10">
+        <span>能耗日历</span>
+        <p>
+          <span>单位：kgce</span>
+        </p>
+      </div>
+      <div class="margin10 box-bg">
+        <calendar />
+      </div>
+      <!--  碳排放-->
+      <div class="title margin10">
+        <span>碳排放</span>
+        <p>
+          <span class="year">年</span>
+          <span class="month">月</span>
+        </p>
+      </div>
+      <div class="margin10 box-bg">
+
+      </div>
+    </div>
+    <div class="overview-right-box">
+      <!--  实时负荷 -->
+      <div class="title">
+        <span>实时负荷</span>
+      </div>
+      <div class="margin10 box-bg">
+
+      </div>
+      <!--  气象站-->
+      <div class="title margin10">
+        <span>气象站</span>
+
+      </div>
+      <div class="margin10 box-bg">
+
+      </div>
+      <!--  系统用电排名-->
+      <div class="title margin10">
+        <span>系统用电排名</span>
+
+      </div>
+      <div class="margin10 box-bg">
+
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<style lang="scss" scoped>
+.overview {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+    &-right-box,&-left-box {
+      height: 100%;
+      width: vw(450);
+  }
+  &-right-box{padding-right: 2.375rem;}
+  &-left-box{padding-left: 2.375rem;}
+
+
+}
+</style>
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,37 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+import path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    // 配置路径别名
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  // vite 相关配置
+  server: {
+    port: 8801,
+    host: true,
+    open: true,
+    proxy: {
+      // https://cn.vitejs.dev/config/#server-proxy
+      '/dev-api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        rewrite: (p) => p.replace(/^\/dev-api/, '')
+      }
+    }
+  },
+  // 全局配置scss方法
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@/assets/styles/utils.scss";`,
+      },
+    },
+  },
+})
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`