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