From 36856f57e487de401352f8ca52189ffab0420aab Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期一, 18 三月 2024 13:50:15 +0800
Subject: [PATCH] chore:大屏初始化

---
 src/assets/images/screen/pageBg1.jpg                 |    0 
 src/assets/images/screen/icon/icon2.png              |    0 
 src/views/screen/components/screen-wrapper/index.vue |   64 +++++++++
 src/views/screen/index.vue                           |   38 +++++
 src/router/index.js                                  |    8 +
 src/views/screen/components/screen-face/index.vue    |  204 +++++++++++++++++++++++++++++
 src/assets/images/screen/icon/icon1.png              |    0 
 src/assets/images/screen/title_bg.png                |    0 
 src/main.js                                          |   10 +
 package.json                                         |    2 
 src/views/screen/components/screen-title/index.vue   |   41 +++++
 src/assets/images/screen/header_bg.png               |    0 
 src/views/screen/components/select-wrapper/index.vue |   15 ++
 13 files changed, 381 insertions(+), 1 deletions(-)

diff --git a/package.json b/package.json
index 6064f00..a1a5874 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "url": "https://gitee.com/y_project/RuoYi-Vue.git"
   },
   "dependencies": {
+    "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
@@ -54,6 +55,7 @@
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
+    "v-scale-screen": "1.0.0",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
diff --git a/src/assets/images/screen/header_bg.png b/src/assets/images/screen/header_bg.png
new file mode 100644
index 0000000..a3a906a
--- /dev/null
+++ b/src/assets/images/screen/header_bg.png
Binary files differ
diff --git a/src/assets/images/screen/icon/icon1.png b/src/assets/images/screen/icon/icon1.png
new file mode 100644
index 0000000..0663b6d
--- /dev/null
+++ b/src/assets/images/screen/icon/icon1.png
Binary files differ
diff --git a/src/assets/images/screen/icon/icon2.png b/src/assets/images/screen/icon/icon2.png
new file mode 100644
index 0000000..f0146c6
--- /dev/null
+++ b/src/assets/images/screen/icon/icon2.png
Binary files differ
diff --git a/src/assets/images/screen/pageBg1.jpg b/src/assets/images/screen/pageBg1.jpg
new file mode 100644
index 0000000..fa8b0e0
--- /dev/null
+++ b/src/assets/images/screen/pageBg1.jpg
Binary files differ
diff --git a/src/assets/images/screen/title_bg.png b/src/assets/images/screen/title_bg.png
new file mode 100644
index 0000000..76ae280
--- /dev/null
+++ b/src/assets/images/screen/title_bg.png
Binary files differ
diff --git a/src/main.js b/src/main.js
index a8d407c..9ede569 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 
 import Cookies from 'js-cookie'
-import {getToken} from "@/utils/auth";
+import { getToken } from "@/utils/auth";
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
 
@@ -38,6 +38,12 @@
 // 瀛楀吀鏁版嵁缁勪欢
 import DictData from '@/components/DictData'
 
+// 澶у睆
+import VScaleScreen from 'v-scale-screen'
+import dataV from '@jiaminghi/data-view'
+
+
+
 // 鍏ㄥ眬鏂规硶鎸傝浇
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -62,6 +68,8 @@
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
+Vue.use(VScaleScreen)
+Vue.use(dataV)
 DictData.install()
 
 /**
diff --git a/src/router/index.js b/src/router/index.js
index 71907b6..f244038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -75,6 +75,14 @@
     ]
   },
   {
+    path: '/screen',
+    component: Layout,
+    hidden: true,
+    component: () => import('@/views/screen/index'),
+    name: 'Profile',
+    meta: { title: '澶у睆淇℃伅', icon: 'user' }
+  },
+  {
     path: '/user',
     component: Layout,
     hidden: true,
diff --git a/src/views/screen/components/screen-face/index.vue b/src/views/screen/components/screen-face/index.vue
new file mode 100644
index 0000000..0f4a90c
--- /dev/null
+++ b/src/views/screen/components/screen-face/index.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="face-container">
+    <div class="title-container">
+      <span class="title">浜鸿劯鏁版嵁瓒嬪娍</span>
+    </div>
+    <div class="face-content">
+      <div class="data-plane">
+        <dv-border-box-13 class="plane">
+          <div class="data-item">
+            <div class="data-icon">
+              <img src="@/assets/images/screen/icon/icon1.png" alt="" class="width-img">
+            </div>
+            <div class="data-info">
+              <div class="data-lable">鏄ㄦ棩浜鸿劯閲囬泦璁惧鎬绘暟</div>
+              <div class="data-num">{{formatNumber(1123)}}</div>
+            </div>
+          </div>
+        </dv-border-box-13>
+
+        <dv-border-box-13 class="plane">
+          <div class="data-item">
+            <div class="data-icon">
+              <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
+            </div>
+            <div class="data-info">
+              <div class="data-lable">鏄ㄦ棩鎶撴媿鏁版嵁閲�</div>
+              <div class="data-num">{{ formatNumber(200000) }}</div>
+            </div>
+          </div>
+        </dv-border-box-13>
+
+        <dv-border-box-13 class="plane">
+          <div class="data-item">
+            <div class="data-icon">
+              <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
+            </div>
+            <div class="data-info">
+              <div class="data-lable">鍘嗗彶鎶撴媿鏁版嵁閲�</div>
+              <div class="data-num">{{ formatNumber(112313141111) }}</div>
+            </div>
+          </div>
+        </dv-border-box-13>
+      </div>
+      <div id="faceChart" ref="faceChart"></div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import * as echarts from 'echarts';
+let lineChart = null;
+export default {
+  name: 'ScreenFace',
+  data() {
+    return {
+      dataList: {
+        state: { '01:00': 1000, '02:00': 2131, '03:00': 1233, '04:00': 2132, '05:00': 3211, '06:00': 213, '07:00': 123, '08:00': 566 },
+        state2: { '01:00': 900, '02:00': 1131, '03:00': 1533, '04:00': 2132, '05:00': 3011, '06:00': 13, '07:00': 113, '08:00': 566 },
+      },
+    }
+  },
+
+  methods: {
+    initChart() {
+      const option = {
+        legend: {
+          right: 'right',
+          top: 'top',
+          orient: "vertical",
+          icon: 'rect',
+          data: [
+            {
+              name: '姝e父鏁�',
+              itemStyle: {
+                color: 'rgba(62, 144, 247, 1)'
+              }
+            },
+            {
+              name: '寮傚父鏁�',
+              itemStyle: {
+                color: 'rgba(85, 192, 191, 1)'
+              }
+            },
+          ],
+        },
+        grid: {
+          left: '2%',
+          right: '5%',
+          bottom: '5%',
+          top: '8%',
+          containLabel: true
+        },
+        tooltip: {},
+        xAxis: {
+          type: 'category',
+          data: Object.keys(this.dataList.state),
+        },
+        yAxis: {},
+        series: [
+          {
+            name: '浠婃棩',
+            data: Object.entries(this.dataList.state).map(([key, value]) => value),
+            type: 'line',
+            itemStyle: {
+              color: 'rgba(62, 144, 247, 1)'
+            }
+          },
+          {
+            name: '鏄ㄦ棩',
+            data: Object.entries(this.dataList.state2).map(([key, value]) => value),
+            type: 'line',
+            itemStyle: {
+              color: 'rgba(85, 192, 191, 1)'
+            }
+          }
+        ]
+      };
+      lineChart.setOption(option, true);
+    },
+
+    formatNumber(value) {
+      return new Intl.NumberFormat('en-US').format(value);
+    }
+  },
+
+  mounted() {
+    lineChart = echarts.init(this.$refs.faceChart);
+    this.initChart();
+  },
+  beforeDestroy() {
+    if (lineChart) {
+      lineChart.dispose();
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.title-container {
+  background-image: url("../../../../assets/images/screen/title_bg.png");
+  background-size: 231px 100%;
+  background-repeat: no-repeat;
+  height: 38px;
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+
+  .title {
+    margin-left: 20px;
+    margin-top: -2px;
+    color: #fff;
+    letter-spacing: 2px;
+    font-size: 20px;
+    font-style: italic;
+  }
+}
+
+.face-content {
+  background: rgba(67, 102, 155, 0.3);
+  border: 1px solid rgba(47, 91, 157, 0.8);
+
+  .plane {
+    margin-bottom: 10px;
+  }
+
+  .data-plane {
+    .data-item {
+      width: 100%;
+      padding: 20px 20px;
+      display: flex;
+      align-items: center;
+
+      .data-icon {
+        width: 40px;
+        margin: 0 20px;
+      }
+
+      .data-info {
+        flex: 1;
+        color: #5b83bd;
+        font-size: 16px;
+
+        .data-num {
+          margin-top: 5px;
+          font-size: 24px;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  #faceChart {
+    width: 100%;
+    height: 300px;
+  }
+}
+
+.width-img {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/screen/components/screen-title/index.vue b/src/views/screen/components/screen-title/index.vue
new file mode 100644
index 0000000..1cf07c4
--- /dev/null
+++ b/src/views/screen/components/screen-title/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="header-container">
+    <div class="header-content">
+      <div class="header-bg">
+        <img src="@/assets/images/screen/header_bg.png" class="width-img" alt="">
+      </div>
+      <div class="header-text">
+        鑷础杩愮淮鑰冩牳鍙鍖栧ぇ灞�
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScreenTitle'
+}
+</script>
+
+<style lang="scss" scoped>
+.header-container {
+  width: 1000px;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.width-img {
+  width: 100%;
+  display: block;
+}
+.header-text {
+  position: absolute;
+  left: 49%;
+  top: 15px;
+  transform: translateX(-50%);
+  color: #fff;
+  font-size: 30px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue
new file mode 100644
index 0000000..c8e55ed
--- /dev/null
+++ b/src/views/screen/components/screen-wrapper/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="wrapper-container">
+    <div class="wrapper-content">
+      <div class="left-container wrapper">
+        <screen-face></screen-face>
+      </div>
+      <div class="center-container wrapper">
+
+      </div>
+      <div class="right-container wrapper">
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ScreenFace from '../screen-face/index';
+export default {
+  name: 'ScreenWrapper',
+  components: {
+    ScreenFace
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.wrapper-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  .wrapper-content {
+    width: 100%;
+    height: calc(100% - 100px);
+    margin-top: 100px;
+    border: 1px solid red;
+    position: relative;
+    box-sizing: border-box;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.wrapper {
+  width: 33.3%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 10px;
+  border: 1px solid red;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  &:first-of-type {
+    padding-left: 0;
+  }
+  &:last-of-type {
+    padding-right: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/screen/components/select-wrapper/index.vue b/src/views/screen/components/select-wrapper/index.vue
new file mode 100644
index 0000000..f458ad6
--- /dev/null
+++ b/src/views/screen/components/select-wrapper/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="select-container">
+    
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
new file mode 100644
index 0000000..7f4fb93
--- /dev/null
+++ b/src/views/screen/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="screen-container">
+    <screen-title></screen-title>
+    <v-scale-screen width="1920" height="1080" :autoScale="true" :delay="0" class="screen">
+      <screen-wrapper></screen-wrapper>
+    </v-scale-screen>
+  </div>
+
+</template>
+
+<script>
+import ScreenTitle from './components/screen-title/index.vue';
+import ScreenWrapper from './components/screen-wrapper/index.vue';
+
+export default {
+  name: 'App',
+  components: {
+    ScreenTitle,
+    ScreenWrapper,
+  },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.screen {
+  background: url('../../assets/images/screen/pageBg1.jpg') !important;
+  background-size: cover !important;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
+}
+</style>
\ No newline at end of file

--
Gitblit v1.8.0