I wrote it before. The blogger is a hard-working coder in Beijing. He has been working in front-end work for 5 years and has done more than ten projects of different types. I recently wrote something here on a whim. I welcome everyone’s advice.
- Please criticize and point out any errors in the article and make sure to correct them in time.
- If you have any questions you want to discuss and learn from, please contact me: [email protected].
- The style of published articles varies from column to column, and they are all self-contained. Please correct me for any shortcomings.
Table of contents
We may encounter various problems during this process
This time is not a step-by-step tutorial, I just give you an overview of the development process, so that newcomers can know how to develop and write for large screens.
Keywords in this article: vue3 background management project inserted into large screen page, vue3 large screen project, large screen adaptation
a brief introdction
Large screen development is a technology for visual display and operation of data on large display screens. It is often used in control centers, financial transactions and other fields. ( If the big screen is made like this, it will be difficult for the leader to reuse you! - Zhihu )
Commonly used plug-ins or component libraries in vue development for large screens include
Alibaba DataV data visualization
Building block report
iGaoWei/BigDataView
jackchen0120/vueDataV
DataV-Team/Datav 7.5K
There are also third-party open source libraries: Echarts ( Apache ECharts ), AntV, Highcharts, D3.js, three.js, etc.
Adapt a page individually to the large screen
mounted() {
this.$nextTick(() => {
// 监控屏幕尺寸变化
var bodyStyle = document.createElement("style");
// 这里根据具体的设计稿尺寸来定
bodyStyle.innerHTML = `body{width:1920px; height:1080px!important;}`;
document.documentElement.firstElementChild.appendChild(bodyStyle);
this.screenWidth = document.body.clientWidth;
this.screenHeight = document.body.clientHeight;
window.onresize = () => {
return (() => {
this.screenWidth = document.documentElement.clientWidth;
this.screenHeight = document.documentElement.clientHeight;
})();
};
document.addEventListener("keydown", (e) => {
if (e.code == "F11") {
this.screenWidth = document.documentElement.clientWidth;
this.screenHeight = document.documentElement.clientHeight;
}
});
});
},
watch: {
screenWidth: {
handler: function () {
// console.log("val", val);
let docWidth = document.documentElement.clientWidth;
let docHeight = document.documentElement.clientHeight;
var designWidth = 1920, // 这里根据具体的设计稿尺寸来定
designHeight = 1080, // 这里根据具体的设计稿尺寸来定
widthRatio = docWidth / designWidth,
heightRatio = docHeight / designHeight;
document.body.style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;overflow: hidden;`;
// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
setTimeout(function () {
var lateWidth = document.documentElement.clientWidth,
lateHeight = document.documentElement.clientHeight;
if (lateWidth === docWidth) return;
widthRatio = lateWidth / designWidth;
heightRatio = lateHeight / designHeight;
document.body.style =
"transform:scale(" +
widthRatio +
"," +
heightRatio +
");transform-origin:left top;overflow: hidden;";
}, 0);
},
immediate: true,
deep: true,
},
screenHeight: {
handler: function () {
// console.log("val", val);
let docWidth = document.documentElement.clientWidth;
let docHeight = document.documentElement.clientHeight;
var designWidth = 1920, // 这里根据具体的设计稿尺寸来定
designHeight = 1080, // 这里根据具体的设计稿尺寸来定
widthRatio = docWidth / designWidth,
heightRatio = docHeight / designHeight;
document.body.style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;overflow: hidden;`;
// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
setTimeout(function () {
var lateWidth = document.documentElement.clientWidth,
lateHeight = document.documentElement.clientHeight;
if (lateWidth === docWidth) return;
widthRatio = lateWidth / designWidth;
heightRatio = lateHeight / designHeight;
document.body.style =
"transform:scale(" +
widthRatio +
"," +
heightRatio +
");transform-origin:left top;overflow: hidden;";
}, 0);
},
immediate: true,
deep: true,
},
},(The above adaptation code comes from - the simplest way to implement vue large screen - Jianshu )
About the use of echarts
Echarts is relatively simple and easy to use, and many projects have been developed for the second time.
Component libraries such as echarts need to write a lot of style coverage, so some companies will require newcomers to change the source code.
But in fact, many times we can also achieve this by hiding elements through the officially provided configuration items and then writing some content ourselves to locate them at the specified location.
In fact, it sometimes takes a lot of time for echart to inject data into the icon, because the data returned by the backend cannot be used directly. You have to convert and filter it into a format suitable for the plug-in.
There are many types of echart charts, and it is impossible for us to remember all the method attributes, so we basically check them every time.
We may encounter various problems during this process
The initial loading style of echart is disordered ( related articles )
We found that there was a problem with the initial loading of the word cloud.
View code
<div
:style="{ width: this.word_width + 'px' }"
ref="wz_word_cont"
class="wz_word_cont"
:class="special?'large-screen':''"
id="wz_word_cont"
v-show="wordArr.length > 0"
></div>
.wz_word_cont{
width: 100% !important;
height: 220px !important;
}The problem is: the width is not specified, and the correct width cannot be recognized during initialization. The solution is as follows, directly fix the width.
.wz_word_cont{
width: 340px !important;
height: 220px !important;
}
For example, there is a blank space after the page is full-screen, and the echarts view page window becomes normal after adjustment (the style is disordered during page initialization)
x-axis data is too long for carousel display
In the process, we may encounter some problems, such as the echarts word cloud initial loading window being squeezed together, adjusting the browser before adapting, or the horizontal axis text of the histogram being too long and needing to be tilted.
Make the abscissa text of eacharts tilt:
xAxis: [
{
data: [],
axisLabel: {
margin: 10,
color: 'rgba(202, 215, 245, 1)',
textStyle: {
fontSize: 7,
}, rotate: 50, // 设置标签倾斜角度，单位为度
},}]
Too much data can cause graphs to overlap. Solution: Related articles
Just add a scroll bar
About SCUI
SCUI ( SCUI ) is a mid- and back-end front-end solution based on VUE3 and elementPlus.
Using the latest front-end technology stack, it provides various practical components for easy invocation during business development, and continuously provides rich business templates to help you quickly build enterprise-level mid- and back-end front-end tasks.
The purpose of SCUI is to make all complex things foolproof.
Today we received a request to develop a large-screen page in the SCUI backend management system. The company bought a library management large-screen project source code for reference. There is only a prototype without design drawings. We can only use psd pictures and icons from other projects first. Come and use it, time is running out.
Directly copy the entire view code of the large-screen project. If there are errors, solve them. If there are missing libraries, import the libraries. To be cautious, install directly according to the original version of the large-screen project library.
The source code of the large-screen project uses flexible adaptation. I don’t know if I need to adapt it to the large-screen page separately. The library’s adaptation is average. The words and elements at the top and bottom of the window are reduced and squeezed together. Normally it should be cancelled. Or adjust the display of some elements
fluency
The smoothness of large-screen projects requires the support of many plug-ins. The animate animation library commonly used for animation effects is as follows:
import WOW from "wow.js";Write in mounted
var wow = new WOW({
boxClass: "wow", // animated element css class (default is wow)
animateClass: "animated", // animation css class (default is animated)
offset: 0, // distance to the element when triggering the animation (default is 0)
mobile: true, // trigger animations on mobile devices (default is true)
live: true, // act on asynchronously loaded content (default is true)
callback: function () {
// the callback is fired every time an animation is started
// the argument that is passed in is the DOM node being animated
},
scrollContainer: null, // optional scroll container selector, otherwise use window,
resetAnimation: true, // reset animation on end (default is true)
});
this.$nextTick(() => wow.init());Finally, add the class name wow to enable the specified animation.
gsap animation library
wow.js animation library
Number silky scrolling ( vue3 number rolling plug-in vue-number-roll-plus - Perfect World ) vue3-number-roll-plus
echarts-wordcloud word cloud library (a bunch of colorful words gathered together, some large and some small scattered) ( related articles )
There are many places to obtain various types of time in the project, and dayjs is used.
For large-screen pages, you need to use vue3-seamless-scroll , a seamless scrolling list . This is very easy to use. There are only a few commonly used attributes. Use them after introduction to complete list scrolling. To be honest, add this scrolling and it will taste good immediately. That’s it. It feels high-end. This plug-in is very easy to use.
import {Vue3SeamlessScroll} from "vue3-seamless-scroll";
components: {Vue3SeamlessScroll},
<Vue3SeamlessScroll :step="0.5" :wheel="true" :hover="true" :list="list" class="tableBody">
</Vue3SeamlessScroll>
Thoughts
Large screens with a high-end feel require various silky effect plug-ins, many of which are essentially packaged marquee animations.
Regarding large screens, many of our element plug-ins are not very practical. It takes a long time to cover table styles and the like, so in many cases it is better to write some ourselves. After all, large screens generally do not have paging.
Large-screen projects require writing a lot of components. After all, small pieces are easy to maintain. I recommend using vuex for data transfer (
I encountered the pitfall of vuex automatically importing file content here.
After writing the new file, you need to restart the project to take effect. If you have not set up automatic import, you can ignore it.
), because if the component encapsulation level is deeper, it will facilitate the communication between ancestor and grandchild components. Monitoring is implemented through computed in the component. It does sound a bit ridiculous to create two large-screen pages in two days, but you can combine it with many open source projects, or buy it directly. Other people's large-screen project source code can be modified on the formed shelf, and the development of large-screen pages can be completed quickly.
Visual effect
We often see some flashing effects on large screens that feel awesome. In fact, some visual effects are formed by looping pictures through canvas, just like the previous cartoons, which are played frame by frame.
<template>
<canvas ref="animation_canvas" class="animation_canvas" id="animation_canvas"></canvas>
</template>
<script>
export default {
name: "sequence",
data() {
return {}
},
props: {
// 文件数量
fileLength: {
type: Number,
default() {
return 70;
}
},
// 动画间隔
IntervalTime: {
type: Number,
default() {
return 80;
}
},
},
async mounted() {
var that = this;
await that.Sequence()
},
methods: {
async Sequence() {
var that = this;
//初始化参数
var canvas = null;
var ctx = null;
var sources = [];
async function loadImages2() {
for (let i = 0; i <= 74; i++) {
const image = await import(`./topbg/topbg_${i}.png`);
sources.push(image.default);
}
}
await loadImages2();
var width = this.$refs.animation_canvas.offsetWidth
var height = this.$refs.animation_canvas.offsetHeight
canvas = this.$refs.animation_canvas;
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext("2d");
//预加载序列图片
function loadImages(sources, callback) {
var loadedImages = 0;
var numImages = 0;
var images = [];
// get num of sources
numImages = sources.length;
for (var i = 0, len = sources.length; i < len; i++) {
images[i] = new Image();
//当一张图片加载完成时执行
images[i].onload = function () {
//当所有图片加载完成时，执行回调函数callback
if (++loadedImages >= numImages) {
callback(images);
}
};
//把sources中的图片信息导入images数组
images[i].src = sources[i];
// console.log(images);
}
}
//播放图片动画
function playImages(images) {
var imageNum = images.length;
var imageNow = 0;
setInterval(function () {
ctx.fillStyle = "rgba(0,0,0,0)";
ctx.clearRect(0, 0, width, height);
ctx.fillRect(0, 0, width, height);
ctx.drawImage(images[imageNow], 0, 0, width, height);
imageNow++;
if (imageNow >= imageNum) {
imageNow = 0;
}
}, that.IntervalTime)
}
//ctx.globalAlpha=0.5
//执行图片预加载，加载完成后执行main
loadImages(sources, function (images) {
playImages(images)
});
}
},
}
</script>
<style lang="scss" scoped>
.animation_canvas {
position: absolute;
left: 0;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
}
</style>
font
How to adjust fonts for large screens
Finally, set all interfaces to be called once every 5 minutes to reassign data to achieve real-time refresh.
Article portal:
Interpretation of vue's html2canvas usage to perfectly avoid possible problems
dicom film display, completed using the cornerstone plug-in cornerstoneTools