修改兼容
This commit is contained in:
hh
@ -10,6 +10,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
// import "./flexible.js";
|
||||
import scalseBox from './components/scaleBox.vue'
|
||||
import bigScreenHead from "./components/bigScreenHead/index.vue";
|
||||
|
||||
@ -24,9 +26,25 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.digScreenLayout {
|
||||
// position:fixed;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// width:100%;
|
||||
// height:100%;
|
||||
// min-width: 1000px;
|
||||
// z-index:-10;
|
||||
// zoom: 1;
|
||||
// background-color: #fff;
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: cover;
|
||||
// -webkit-background-size: cover;
|
||||
// -o-background-size: cover;
|
||||
// background-position: center 0;
|
||||
|
||||
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #0D1049;
|
||||
// background-image: url("../img/bg.png");
|
||||
background-size: cover;
|
||||
@ -39,8 +57,8 @@ export default {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 485px;
|
||||
width: 10rem;
|
||||
height: 2.526042rem /* 485/192 */;
|
||||
background-image: url("./img/bg-1.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@ -56,19 +56,19 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bigScreenHead {
|
||||
width: 1920px;
|
||||
height: 100px;
|
||||
width: 10rem /* 1920/192 */;
|
||||
height: .520833rem /* 100/192 */;
|
||||
background-image: url(./bg.png);
|
||||
background-size: 100% 80px;
|
||||
background-size: 100% .416667rem /* 80/192 */;
|
||||
background-repeat: no-repeat;
|
||||
.tit {
|
||||
font-size: 36px;
|
||||
font-size: .1875rem /* 36/192 */;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
color: #91d5fe;
|
||||
line-height: 47px;
|
||||
letter-spacing: 6px;
|
||||
line-height: .244792rem /* 47/192 */;
|
||||
letter-spacing: .03125rem /* 6/192 */;
|
||||
text-align: center;
|
||||
padding-top: 13px;
|
||||
padding-top: .067708rem /* 13/192 */;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,15 +1,30 @@
|
||||
<template>
|
||||
<div style="background-color: #000;height: 100%;width:100%">
|
||||
<div class="ScaleBox" ref="ScaleBox" :style="{
|
||||
width: width + 'px',
|
||||
height: height + 'px'
|
||||
<div class="scaleBoxWrap">
|
||||
<div class="ScaleBox" ref="ScaleBox" :style="{
|
||||
width: ScaleBoxWidth + 'px',
|
||||
height: ScaleBoxHeight + 'px'
|
||||
}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let docEl = document.documentElement;
|
||||
// 获取当前显示设备的物理像素分辨率与CSS像素分辨率之比;
|
||||
let dpr = window.devicePixelRatio || 1;
|
||||
//根据分辨率调整全局字体大小
|
||||
function setBodyFontSize () {
|
||||
// html已完成加载，则立即调整字体大小，否则等待html加载完成再调整字体大小
|
||||
if (document.body) {
|
||||
document.body.style.fontSize = 12 * dpr + "px";
|
||||
} else {
|
||||
// 监听DOMContentLoaded 事件——当初始的 HTML 文档被完全加载和解析完成之后触发，无需等待样式表
|
||||
document.addEventListener("DOMContentLoaded", setBodyFontSize);
|
||||
}
|
||||
}
|
||||
setBodyFontSize();
|
||||
|
||||
export default {
|
||||
name: 'ScaleBox',
|
||||
props: {},
|
||||
@ -17,31 +32,74 @@ export default {
|
||||
return {
|
||||
scale: 0,
|
||||
width: 1920,
|
||||
height: 1080
|
||||
height: 1080,
|
||||
ScaleBoxWidth: 1920,
|
||||
ScaleBoxHeight: 1080,
|
||||
style: {
|
||||
width: '100%',
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.setScale()
|
||||
window.addEventListener('resize', this.debounce(this.setScale))
|
||||
window.addEventListener("pageshow", function (e) {
|
||||
// 若是浏览器中点击后退时显示页面，则重置rem
|
||||
if (e.persisted) {
|
||||
setRemUnit();
|
||||
}
|
||||
});
|
||||
if (dpr >= 2) {
|
||||
var fakeBody = document.createElement("body");
|
||||
var testElement = document.createElement("div");
|
||||
testElement.style.border = ".5px solid transparent";
|
||||
fakeBody.appendChild(testElement);
|
||||
docEl.appendChild(fakeBody);
|
||||
if (testElement.offsetHeight === 1) {
|
||||
docEl.classList.add("hairlines");
|
||||
}
|
||||
docEl.removeChild(fakeBody);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getScale () {
|
||||
|
||||
|
||||
const { width, height } = this
|
||||
const wh = window.innerHeight / height
|
||||
const ww = window.innerWidth / width
|
||||
console.log(ww < wh ? ww : wh)
|
||||
console.log('wh', wh)
|
||||
console.log('ww', ww)
|
||||
if (wh > ww) {
|
||||
this.ScaleBoxWidth = window.innerWidth;
|
||||
this.ScaleBoxHeight = window.innerWidth * (height / width);
|
||||
|
||||
} else {
|
||||
this.ScaleBoxWidth = window.innerHeight * (width / height);
|
||||
this.ScaleBoxHeight = window.innerHeight;
|
||||
}
|
||||
this.setRemUnit();
|
||||
return ww < wh ? ww : wh
|
||||
},
|
||||
setScale () {
|
||||
this.getScale()
|
||||
// if (window.innerHeight == 1080) {
|
||||
// this.height = 1080
|
||||
// } else {
|
||||
// this.height = 937
|
||||
// }
|
||||
this.scale = this.getScale()
|
||||
if (this.$refs.ScaleBox) {
|
||||
this.$refs.ScaleBox.style.setProperty('--scale', this.scale)
|
||||
}
|
||||
// this.scale = this.getScale()
|
||||
// console.log(this.scale)
|
||||
// if (this.$refs.ScaleBox) {
|
||||
// this.$refs.ScaleBox.style.setProperty('--scale', this.scale)
|
||||
// }
|
||||
},
|
||||
|
||||
// 根据屏幕宽度，重置1rem的长度为当前屏幕宽度的1/10
|
||||
setRemUnit () {
|
||||
var rem = this.ScaleBoxWidth / 10;
|
||||
// 1rem的值永远为根元素的字体大小，所以此处通过调整全局字体大小来重置rem
|
||||
docEl.style.fontSize = rem + "px";
|
||||
},
|
||||
debounce (fn, delay) {
|
||||
const delays = delay || 500
|
||||
@ -63,19 +121,31 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#ScaleBox {
|
||||
--scale: 1;
|
||||
.scaleBoxWrap {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
background-color: #000;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ScaleBox {
|
||||
position: absolute;
|
||||
transform: scale(var(--scale)) translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform-origin: 0 0;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transition: 0.3s;
|
||||
z-index: 999;
|
||||
// background: rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
// #ScaleBox {
|
||||
// --scale: 1;
|
||||
// }
|
||||
// .ScaleBox {
|
||||
// position: absolute;
|
||||
// transform: scale(var(--scale)) translate(-50%, -50%);
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// transform-origin: 0 0;
|
||||
// left: 50%;
|
||||
// top: 50%;
|
||||
// transition: 0.3s;
|
||||
// z-index: 999;
|
||||
// // background: rgba(255, 0, 0, 0.3);
|
||||
// }
|
||||
</style>
|
||||
|
||||
@ -48,17 +48,17 @@ export default {
|
||||
.container2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 538px;
|
||||
height: 288px;
|
||||
width: 2.802083rem /* 538/192 */;
|
||||
height: 1.5rem /* 288/192 */;
|
||||
background-image: url(./bg.png);
|
||||
background-size: cover;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-size: .083333rem /* 16/192 */;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
|
||||
.tit {
|
||||
padding: 16px 16px 16px 24px;
|
||||
padding: .083333rem /* 16/192 */ .083333rem /* 16/192 */ .083333rem /* 16/192 */ .125rem /* 24/192 */;
|
||||
position: relative;
|
||||
.datePicker {
|
||||
position: absolute;
|
||||
|
||||
BIN
src/views/bigScreen/drivingCabin/components/container3/bg.png
Normal file
BIN
src/views/bigScreen/drivingCabin/components/container3/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
104
src/views/bigScreen/drivingCabin/components/container3/index.vue
Normal file
104
src/views/bigScreen/drivingCabin/components/container3/index.vue
Normal file
@ -0,0 +1,104 @@
|
||||
|
||||
|
||||
<template>
|
||||
<div class="container3">
|
||||
<div class="tit">
|
||||
<rocketTit>{{title}}</rocketTit>
|
||||
<div class="datePicker">
|
||||
<slot name="datePicker"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="snap">
|
||||
<slot name="snap"></slot>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import rocketTit from "../../../components/rocketTit/index.vue";
|
||||
|
||||
export default {
|
||||
name: 'container3',
|
||||
components: {
|
||||
rocketTit,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container3 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 3.505208rem /* 673/192 */;
|
||||
height: 1.869792rem /* 359/192 */;
|
||||
background-image: url(./bg.png);
|
||||
background-size: cover;
|
||||
color: #ffffff;
|
||||
font-size: .083333rem /* 16/192 */;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
|
||||
.tit {
|
||||
padding: .083333rem /* 16/192 */ .083333rem /* 16/192 */ .083333rem /* 16/192 */ .125rem /* 24/192 */;
|
||||
position: relative;
|
||||
.datePicker {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 12px;
|
||||
|
||||
::v-deep .el-date-editor {
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
vertical-align: middle;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
.el-range-input,
|
||||
.el-range-separator {
|
||||
color: #fff;
|
||||
}
|
||||
.el-range-editor.is-active {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: .010417rem /* 2/192 */;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.snap {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 25px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,13 +3,16 @@
|
||||
<div class="left1">
|
||||
<left1></left1>
|
||||
</div>
|
||||
<div class="left2">
|
||||
<left2></left2>
|
||||
</div>
|
||||
<!-- <div class="bg1"></div> -->
|
||||
|
||||
|
||||
|
||||
<div class="center1">
|
||||
<!-- <div class="center1">
|
||||
<center1></center1>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="right1">
|
||||
<right1></right1>
|
||||
</div>
|
||||
@ -79,13 +82,13 @@ export default {
|
||||
|
||||
.left1 {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
top: 3px;
|
||||
left: 24px;
|
||||
}
|
||||
.left2 {
|
||||
position: absolute;
|
||||
top: 245px;
|
||||
left: 24px;
|
||||
top: 3.151042rem /* 605/192 */;
|
||||
left: .125rem /* 24/192 */;
|
||||
}
|
||||
.center1 {
|
||||
position: absolute;
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<container2 title="生产总体走势">
|
||||
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
||||
<container3 title="利润概况">
|
||||
<!-- <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
<span slot="snap">件</span>
|
||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||
</container2>
|
||||
<span slot="snap">件</span> -->
|
||||
<div class="chart" ref="chart"></div>
|
||||
</container3>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@ -15,7 +14,7 @@
|
||||
import scalseBox from '../components/scaleBox.vue'
|
||||
import bigScreenHead from "../components/bigScreenHead/index.vue";
|
||||
import rocketTit from "../components/rocketTit/index.vue";
|
||||
import container2 from "../components/container2/index.vue";
|
||||
import container3 from './components/container3/index.vue'
|
||||
|
||||
|
||||
import echarts from 'echarts'
|
||||
@ -28,92 +27,13 @@ export default {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
rocketTit,
|
||||
container2,
|
||||
container3,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dateRange: [],
|
||||
chart: null,
|
||||
option: {
|
||||
backgroundColor: '',
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
right: '10',
|
||||
data: ['品类1', '品类2', '品类3'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['03-21', '03-22', '03-23', '03-24', '03-25', '03-26', '03-27'],
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 320
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false//不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
},
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '品类1',
|
||||
type: 'line',
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
smooth: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(203, 97, 79, 1)'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '品类2',
|
||||
type: 'line',
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
smooth: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(215, 170, 34, 1)'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '品类3',
|
||||
type: 'line',
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
smooth: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(121, 139, 219, 1)'
|
||||
},
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
@ -130,8 +50,134 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$refs.chart, 'macarons');
|
||||
this.chart.setOption(this.option);
|
||||
const { DualAxes } = G2Plot
|
||||
|
||||
const uvBillData = [
|
||||
{ time: '2019-03', value: 350, type: '利润预测' },
|
||||
{ time: '2019-04', value: 900, type: '利润预测' },
|
||||
{ time: '2019-05', value: 300, type: '利润预测' },
|
||||
{ time: '2019-06', value: 450, type: '利润预测' },
|
||||
{ time: '2019-07', value: 470, type: '利润预测' },
|
||||
{ time: '2019-03', value: 220, type: '利润' },
|
||||
{ time: '2019-04', value: 300, type: '利润' },
|
||||
{ time: '2019-05', value: 250, type: '利润' },
|
||||
{ time: '2019-06', value: 220, type: '利润' },
|
||||
{ time: '2019-07', value: 362, type: '利润' },
|
||||
];
|
||||
|
||||
const transformData = [
|
||||
{ time: '2019-03', count: 800 },
|
||||
{ time: '2019-04', count: 600 },
|
||||
{ time: '2019-05', count: 400 },
|
||||
{ time: '2019-06', count: 380 },
|
||||
{ time: '2019-07', count: 220 },
|
||||
];
|
||||
|
||||
const dualAxes = new DualAxes(this.$refs.chart, {
|
||||
data: [uvBillData, transformData],
|
||||
xField: 'time',
|
||||
yField: ['value', 'count'],
|
||||
xAxis: {
|
||||
grid: {
|
||||
line: {
|
||||
style: {
|
||||
stroke: 'black',
|
||||
lineWidth: 2,
|
||||
lineDash: [4, 5],
|
||||
strokeOpacity: 0,
|
||||
cursor: 'pointer'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
grid: {
|
||||
line: {
|
||||
style: {
|
||||
stroke: 'rgba(255, 255, 255, 0.5)',
|
||||
lineWidth: 1,
|
||||
}
|
||||
}
|
||||
},
|
||||
min: 0,
|
||||
minLimit: 0,
|
||||
},
|
||||
{
|
||||
|
||||
line: {
|
||||
style: {
|
||||
stroke: 'rgba(255, 255, 255, 0.5)',
|
||||
lineWidth: 1,
|
||||
}
|
||||
},
|
||||
label: {
|
||||
style: {
|
||||
fill: '#ffffff',
|
||||
strokeOpacity: .5,
|
||||
}
|
||||
},
|
||||
min: 0,
|
||||
minLimit: 0,
|
||||
},
|
||||
],
|
||||
// yAxis: {
|
||||
// pv: {
|
||||
// tickCount: 5
|
||||
// },
|
||||
// uv: {
|
||||
// tickCount: 5
|
||||
// }
|
||||
// },
|
||||
legend: {
|
||||
itemName: {
|
||||
style: {
|
||||
fill: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
slider:{
|
||||
start: 0.1,
|
||||
end: 0.5,
|
||||
textStyle: {
|
||||
fill: '#ffffff'
|
||||
}
|
||||
},
|
||||
geometryOptions: [
|
||||
{
|
||||
geometry: 'column',
|
||||
seriesField: 'type',
|
||||
columnStyle: ({ type }) => {
|
||||
if (type === '利润') {
|
||||
return {
|
||||
lineWidth: 10
|
||||
};
|
||||
}
|
||||
return {
|
||||
lineWidth: 0
|
||||
};;
|
||||
},
|
||||
color: ({ type }) => {
|
||||
if (type === '利润') {
|
||||
return 'l(0) 0:#B5D3FE 1:#7EA7FC';
|
||||
}
|
||||
return 'rgba(145, 213, 254, .3)';
|
||||
},
|
||||
},
|
||||
{
|
||||
geometry: 'line',
|
||||
lineStyle: {
|
||||
lineWidth: 2,
|
||||
stroke: '#55C5A2',
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
],
|
||||
});
|
||||
|
||||
dualAxes.render();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -153,4 +199,11 @@ export default {
|
||||
color: rgba(16, 152, 255, 1);
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
padding: .052083rem /* 10/192 */ .15625rem /* 30/192 */;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user