整体思路
- 整体宽高布局100vw，100vh，每个模块的宽高：使用vw，vh
- 字体大小适配：px转化为vw、vh
- 处理公共样式：新建一个rem.scss文件
- 图表根据屏幕尺寸变化自动resize()：自定义指令
- 图表里的文字，例如图例、横坐标等字体大小适配：公共方法
- 子组件监听数据变化实时刷新图表
- websocket：递增间隔重连
- 订单统计列表数据轮播切换
1、按照设计稿的尺寸，将px按比例计算转为vw和vh
util.scss（仅需修改设计稿的默认宽高）
//假设设计稿尺寸为1920x*1080px的屏幕分辨率
//1920px = 100vw
//1080px = 100vh
@use "sass:math";
//默认设计稿的宽度
$designWidth:1920;
//默认设计稿的高度
$designHeight:1080;
//px转为vw的函数
@function vw($px) {
@return math.div($px , $designWidth) * 100vw;
}
//px转为vh的函数
@function vh($px) {
@return math.div($px , $designHeight) * 100vh;
}
vue.config.js
// 配置一下utils.scss的路径,就可以全局使用了
module.exports={
publicPath: '',
configureWebpack: {
name: "app name",
resolve: {
alias: {
'@': resolve('src')
}
}
},
css:{
//全局配置utils.scss
loaderOptions:{
sass:{
prependData:`@import "@/styles/utils.scss";`
}
}
}
}
在.vue文件中使用
<style lang="scss" scoped="scoped">
/*
直接使用vw和vh函数，将像素值传进去，得到的就是具体的vw vh单位
*/
.box{
width: vw(300);
height: vh(100);
font-size: vh(16);
background-color: black;
margin-left: vw(10);
margin-top: vh(10);
border: vh(2) solid red;
}
</style>
2、 处理公共样式：新建一个rem.scss文件
== 类名需要与项目公共类名作区分，不然会相互影响 ==
//默认设计稿的宽度
$designWidth:1920;
//默认设计稿的高度
$designHeight:1080;
@for $value from 1 through 100 {
.pdRem-#{
$value},
.ptbRem-#{
$value},
.ptRem-#{
$value} {
padding-top: $value/$designHeight * 1vh;
}
.pdRem-#{
$value},
.ptbRem-#{
$value},
.pbRem-#{
$value} {
padding-bottom: $value/$designHeight * 1vh;
}
.pdRem-#{
$value},
.plrRem-#{
$value},
.plRem-#{
$value} {
padding-left: $value/$designWidth * 1vw;
}
.pdRem-#{
$value},
.plrRem-#{
$value},
.prRem-#{
$value} {
padding-right: $value/$designWidth * 1vw;
}
.mgRem-#{
$value},
.mtbRem-#{
$value},
.mtRem-#{
$value} {
margin-top: $value/$designHeight * 1vh;
}
.mgRem-#{
$value},
.mtbRem-#{
$value},
.mbRem-#{
$value} {
margin-bottom: $value/$designHeight * 1vh;
}
.mgRem-#{
$value},
.mlrRem-#{
$value},
.mlRem-#{
$value} {
margin-left: $value/$designWidth * 1vw;
}
.mgRem-#{
$value},
.mlrRem-#{
$value},
.mrRem-#{
$value} {
margin-right: $value/$designWidth * 1vw;
}
}
@for $value from 10 through 40 {
.sizeRem-#{
$value} {
font-size: $value/$designHeight * 1vh;
}
}
*{
box-sizing: border-box;
}
.s-yellow{
color: #FFC300;
}
.s-red{
color: #CB272C;
}
.s-blue{
color: #00CDCF;
}
.s-gray{
color: #979797;
}
.line-1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// 引入即可使用
<style lang="scss" scoped>
@import "./components/css/rem.scss";
</style>
3、Echarts图表适配自动resize()
封装指令 directive.js
npm install element-resize-detector --save
// directive.js
import * as ECharts from "echarts";
import elementResizeDetectorMaker from "element-resize-detector";
import Vue from "vue";
const HANDLER = "_vue_resize_handler";
function bind(el, binding) {
el[HANDLER] = binding.value
? binding.value
: () => {
let chart = ECharts.getInstanceByDom(el);
if (!chart) {
return;
}
chart.resize();
};
// 监听绑定的div大小变化，更新 echarts 大小
elementResizeDetectorMaker().listenTo(el, el[HANDLER]);
}
function unbind(el) {
// window.removeEventListener("resize", el[HANDLER]);
elementResizeDetectorMaker().removeListener(el, el[HANDLER]);
delete el[HANDLER];
}
// 自定义指令：v-chart-resize 示例：v-chart-resize="fn"
Vue.directive("resize", {
bind, unbind });
main.js 中引入即可使用
import '@/directive/directive';
<template>
<div class="linechart">
<div ref="chart" v-resize class="chart"></div>
</div>
</template>
4、图表里的文字，例如图例、横坐标等字体大小适配：公共方法
dataUtil.js
export const fitChartSize = (size,defalteWidth = 1920) => {
let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
if (!clientWidth) return size;
let scale = (clientWidth / defalteWidth);
return Number((size*scale).toFixed(3));
}
函数挂载到原型上即可使用
import {
fitChartSize} from '@src/utils/dataUtil.js'
Vue.prototype.fitSize = fitChartSize;
textStyle: {
color: "green",
fontSize: this.fitSize(18) //字体自适应
},
5、子组件监听数据变化实时刷新图表：深度监听+setOption
props: ["list"],
watch: {
list: {
handler(val) {
// 深度监听没有旧值
this.month = val.map((item) => {
return item.month + "月";
});
this.orderNum = val.map((item) => {
return item.orderCount;
});
this.oldNum = val.map((item) => {
return item.servedCount;
});
this.goodRate = val.map((item) => {
return item.favorableRate;
});
let option = {
xAxis: [
{
data: this.month,
},
],
series: [
{
data: this.orderNum, // 订单量
},
{
data: this.oldNum, // 服务人数
},
{
data: this.goodRate, //折线图数据
},
],
};
this.chart.setOption(option);
},
// 这里是关键，代表递归监听的变化
deep: true,
},
},
6、websocket
// index.vue 页面
本地运行时，websocket和接口都用的一个端口号，会导致端口号被占用而运行报错，测试环境没事
<script>
export default {
data() {
return {
lockReconnect: false, //禁止重连
time: 1, // 断开重连的时间间隔
websock: null,
// 对象分析 30秒切换tab，最新订单10条，30秒滚动，更新天气
timerId: null,
// websocket
open: false, //是否真正建立连接
res: {
}, // 所有数据
],
};
},
created() {
this.initWebSocket();
},
mounted() {
this.timerId = setInterval(() => {
this.timeOperated();
}, 30000);
},
// 销毁定时器
beforeDestroy() {
clearInterval(this.timerId); // 在Vue实例销毁前，清除时间定时器
this.timerId = null;
},
destroyed() {
this.websock.close(); //离开路由之后断开websocket连接
},
methods: {
// 定时30s操作
timeOperated() {
if (this.open) {
this.websock.send("ping");
}
// 切换tab
this.$refs.chart5.tab =
this.$refs.chart5.tab == 3 ? 1 : this.$refs.chart5.tab + 1;
// 切换最近订单
this.$refs.chart7.tab = this.$refs.chart7.tab == 1 ? 2 : 1;
// TODO更新天气
this.$refs.header.getWeather();
},
//初始化weosocket
initWebSocket() {
const url=window.location.host
this.websock = new WebSocket(
`ws://${
url}${
process.env.VUE_APP_BASE_API}/report/webSocket/screen/2`
);
// 连接建立时触发
this.websock.onopen = () => {
console.log("连接成功");
this.open = true;
this.time = 1;
};
// 客户端接收服务端数据时触发
this.websock.onmessage = (e) => {
if (e.data != "ping") {
console.log(JSON.parse(e.data));
this.res = JSON.parse(e.data);
} else {
console.log("接收数据：", e.data);
}
};
// 通信发生错误时触发
this.websock.onerror = () => {
console.log("出现错误");
this.open = false;
this.reconnect();
};
// 连接关闭时触发
this.websock.onclose = () => {
console.log("断开连接");
this.open = false;
this.reconnect();
};
},
// 断开重连
reconnect(url) {
// 防止错误和断开重复重连
if (this.lockReconnect) return;
this.lockReconnect = true;
setTimeout(() => {
//没连接上会一直重连，设置延迟避免请求过多
this.initWebSocket();
this.lockReconnect = false;
this.time++;
}, this.time * 1000);
},
},
};
</script>
7、订单统计列表数据轮播切换：轮播图10s切换+双层数组（每页4个）
<template>
<div class="w100 sizeRem-14 white">
<el-carousel indicator-position="none" height="100%" autoplay interval="10000">
<el-carousel-item v-for="(items, index) in newList" :key="index">
<div style="height: 20%" class="flex1 w100" v-for="(item, i) in items" :key="i">
<div class="flex-2 line-1">{
{
item.providerName }}</div>
<div class="flex-1 text-right">{
{
item.totalOrderCount }}</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
props: ["list"],
data() {
return {
newList: []
};
},
watch: {
list: {
handler(val) {
let arr = []
for (var i = 0; i < val.length; i += 4) {
arr.push(val.slice(i, i + 4));
}
this.newList = arr
console.log(111, this.newList)
},
// 这里是关键，代表递归监听的变化
deep: true,
},
},
};
</script>