Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 6f7b220452 | |||
| ece8914427 |
@ -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>
|
||||
|
||||
26
src/views/bigScreen/components/progress/index.vue
Normal file
26
src/views/bigScreen/components/progress/index.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div style="min-width: 100px">
|
||||
<el-progress :show-text="false" :stroke-width="6" :percentage="percentage"></el-progress>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
percentage: {
|
||||
type: [Number, String],
|
||||
require: true,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-progress {
|
||||
::v-deep .el-progress-bar__outer {
|
||||
background-color: rgba(85, 197, 162, 0.29);
|
||||
.el-progress-bar__inner {
|
||||
background: linear-gradient(180deg, #91d5fe 0%, #53c19d 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
||||
@ -1,232 +1,202 @@
|
||||
<template>
|
||||
<div>
|
||||
<container3>
|
||||
<img class="img" src="./conter2.jpg" style="width: 100%;height:100%">
|
||||
<rocketTit class="tit">今日动态</rocketTit>
|
||||
<div class="data">
|
||||
<div class="data-item">
|
||||
<div>收入</div>
|
||||
<div><span class="num">3380</span>万</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div>支出</div>
|
||||
<div><span class="num">3380</span>万</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div>合同</div>
|
||||
<div><span class="num">3380</span>份</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div>装药任务</div>
|
||||
<div><span class="num">3380</span>件</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div>职工出勤数</div>
|
||||
<div><span class="num">3380</span>人</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div>职工出勤数</div>
|
||||
<div><span class="num">42<span style="font-size:22px">/80%</span></span>人</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="con_right">
|
||||
<div class="con_title">
|
||||
<img src="./conter1-1.png" alt="">
|
||||
<span style="margin-left:2px">正在工作</span>
|
||||
</div>
|
||||
<div class="con_height"></div>
|
||||
<div class="com_img"><img src="./conter1-2.png" alt=""></div>
|
||||
</div>
|
||||
<div class="con_right con_two">
|
||||
<div class="con_title">
|
||||
<img src="./conter1-1.png" alt="">
|
||||
<span>正在工作</span>
|
||||
</div>
|
||||
<div class="con_height"></div>
|
||||
<div class="com_img"><img src="./conter1-2.png" alt=""></div>
|
||||
</div>
|
||||
<div class="con_left">
|
||||
<div class="con_left_title">
|
||||
<img src="./conter2-1.png" alt="">
|
||||
<div class="con_card">
|
||||
<div>
|
||||
<span>当日生产任务</span>
|
||||
<span>2890</span>
|
||||
</div>
|
||||
<div style="margin:7px 0">
|
||||
<span>正在执行中任务</span>
|
||||
<span>542</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>已完成</span>
|
||||
<span>2348</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con_h_two">
|
||||
<div class="con_bottom">
|
||||
<img src="./conter2-2.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</container3>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<container3>
|
||||
<img class="img" src="./conter.png" style="width: 100%; height: 100%" />
|
||||
<rocketTit class="tit">全年目标</rocketTit>
|
||||
<div class="data">
|
||||
<div class="data-item">
|
||||
<div><img src="./icon1.png" alt="" /><span>收入</span></div>
|
||||
<div class="box"><i>3380/</i><i class="num">12342</i><span class="num2">万</span></div>
|
||||
<div style="padding: 0 15px">
|
||||
<progressBar :percentage="70" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><img src="./icon2.png" alt="" /><span>利润</span></div>
|
||||
<div class="box"><i>380/</i><i class="num">12342</i><span class="num2">万</span></div>
|
||||
<div style="padding: 0 15px">
|
||||
<progressBar :percentage="70" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><img src="./icon3.png" alt="" /><span>装药量</span></div>
|
||||
<div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div>
|
||||
<div style="padding: 0 15px">
|
||||
<progressBar :percentage="70" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><img src="./icon4.png" alt="" /><span>交付数量</span></div>
|
||||
<div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div>
|
||||
<div style="padding: 0 15px">
|
||||
<progressBar :percentage="70" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</container3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container3 from "../components/container3/index.vue";
|
||||
import rocketTit from "../components/rocketTit/index.vue";
|
||||
import container3 from '../components/container3/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import progressBar from './../components/progress/index.vue'
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
container3,
|
||||
rocketTit,
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
beforeDestroy () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
container3,
|
||||
rocketTit,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tit {
|
||||
padding: 16px 24px;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
.img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.data {
|
||||
display: flex;
|
||||
margin: 0 15px;
|
||||
background: rgba(2, 18, 63, 0.4);
|
||||
color: #FFFFFF;
|
||||
font-size: 18px;
|
||||
.data-item {
|
||||
flex: 1;
|
||||
>div {
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.num {
|
||||
font-size: 28px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: 600;
|
||||
color: #55C5A2;
|
||||
vertical-align: sub;
|
||||
padding-right: 3px;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
margin: 0 15px;
|
||||
background: rgba(2, 18, 63, 0.33);
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
.data-item {
|
||||
flex: 1;
|
||||
> div {
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
img {
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
font-size: 26px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: 600;
|
||||
color: #55c5a2;
|
||||
}
|
||||
.num {
|
||||
font-size: 14px;
|
||||
}
|
||||
.num2 {
|
||||
font-size: 16px;
|
||||
margin-left: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container3{
|
||||
position: relative;
|
||||
.con_right{
|
||||
width: 88px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
right: 20%;
|
||||
color: #00FFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
.con_title{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img{
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.con_height{
|
||||
width:2px;
|
||||
height:20px;
|
||||
background-color:#00FFFF;
|
||||
}
|
||||
}
|
||||
.con_two{
|
||||
top: 43%;
|
||||
right: 12%;
|
||||
}
|
||||
.con_left{
|
||||
width: 186px;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 24%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
img{
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.con_left_title{
|
||||
position: relative;
|
||||
.con_card{
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
top: 22%;
|
||||
div{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span:nth-child(1){
|
||||
opacity: .9;
|
||||
}
|
||||
span:nth-child(2){
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.con_h_two{
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 47px;
|
||||
border: 1px solid #FA8C16;
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
.con_bottom{
|
||||
height: 24px;
|
||||
line-height: 26px;
|
||||
position: absolute;
|
||||
right: -50%;
|
||||
bottom: -50%;
|
||||
text-align: right;
|
||||
transform: translate(-50%,-50%);
|
||||
img{
|
||||
width: 38%;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.container3 {
|
||||
position: relative;
|
||||
.con_right {
|
||||
width: 88px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
right: 20%;
|
||||
color: #00ffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
.con_title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.con_height {
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: #00ffff;
|
||||
}
|
||||
}
|
||||
.con_two {
|
||||
top: 43%;
|
||||
right: 12%;
|
||||
}
|
||||
.con_left {
|
||||
width: 186px;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 24%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.con_left_title {
|
||||
position: relative;
|
||||
.con_card {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
top: 22%;
|
||||
div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span:nth-child(1) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.con_h_two {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 47px;
|
||||
border: 1px solid #fa8c16;
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
.con_bottom {
|
||||
height: 24px;
|
||||
line-height: 26px;
|
||||
position: absolute;
|
||||
right: -50%;
|
||||
bottom: -50%;
|
||||
text-align: right;
|
||||
transform: translate(-50%, -50%);
|
||||
img {
|
||||
width: 38%;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 432 KiB |
BIN
src/views/bigScreen/drivingCabin/icon1.png
Normal file
BIN
src/views/bigScreen/drivingCabin/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 654 B |
BIN
src/views/bigScreen/drivingCabin/icon2.png
Normal file
BIN
src/views/bigScreen/drivingCabin/icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 635 B |
BIN
src/views/bigScreen/drivingCabin/icon3.png
Normal file
BIN
src/views/bigScreen/drivingCabin/icon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 375 B |
BIN
src/views/bigScreen/drivingCabin/icon4.png
Normal file
BIN
src/views/bigScreen/drivingCabin/icon4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 413 B |
@ -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;
|
||||
|
||||
@ -6,12 +6,14 @@
|
||||
<el-col :span="24">
|
||||
<div id="left1" ref="left1" class="chart1"></div>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<div class="record">
|
||||
<div>0进展指标 <span class="num">2</span>个</div>
|
||||
</div>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<div class="box">
|
||||
<span style="font-size: 25px; margin-right: 3px">·</span>
|
||||
<span>总完成任务/完成率</span>
|
||||
<i class="num">55/80%</i>
|
||||
<progressBar :percentage="70" />
|
||||
<el-progress :show-text="false" :stroke-width="6" :percentage="70"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
</container2>
|
||||
<container2 title="收入概况" style="margin-top: 10px">
|
||||
@ -30,6 +32,7 @@
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import container2 from './components/container2/index.vue'
|
||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||
import progressBar from '@/views/bigScreen/components/progress/index.vue'
|
||||
// import {Liquid} from '@antv/g2plot';
|
||||
// import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
@ -39,74 +42,10 @@ export default {
|
||||
rocketTit,
|
||||
container2,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
|
||||
data: [
|
||||
{
|
||||
year: '2021-01',
|
||||
value: ~~(Math.random() * 100),
|
||||
category: '部门一',
|
||||
},
|
||||
{
|
||||
year: '2021-02',
|
||||
value: ~~(Math.random() * 100),
|
||||
category: '部门一',
|
||||
},
|
||||
{
|
||||
year: '2021-03',
|
||||
value: ~~(Math.random() * 100),
|
||||
category: '部门一',
|
||||
},
|
||||
{
|
||||
year: '2021-04',
|
||||
value: ~~(Math.random() * 100),
|
||||
category: '部门一',
|
||||
},
|
||||
{
|
||||
year: '2021-05',
|
||||
value: ~~(Math.random() * 100),
|
||||
category: '部门一',
|
||||
},
|
||||
{
|
||||
year: '2021-06',
|
||||
value: ~~(Math.random() * 100),
|
||||
category: '部门一',
|
||||
},
|
||||
{
|
||||
year: '2021-01',
|
||||
value: ~~(Math.random() * 100),
|
||||
category: '部门二',
|
||||
},
|
||||
{
|
||||
year: '2021-02',
|
||||
value: ~~(Math.random() * 100),
|
||||
category: '部门二',
|
||||
},
|
||||
{
|
||||
year: '2021-03',
|
||||
value: ~~(Math.random() * 100),
|
||||
category: '部门二',
|
||||
},
|
||||
{
|
||||
year: '2021-04',
|
||||
value: ~~(Math.random() * 100),
|
||||
category: '部门二',
|
||||
},
|
||||
{
|
||||
year: '2021-05',
|
||||
value: ~~(Math.random() * 100),
|
||||
category: '部门二',
|
||||
},
|
||||
{
|
||||
year: '2021-06',
|
||||
value: ~~(Math.random() * 100),
|
||||
category: '部门二',
|
||||
},
|
||||
],
|
||||
}
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
@ -117,18 +56,18 @@ export default {
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
initChart() {
|
||||
const { Liquid, Pie } = G2Plot
|
||||
const { Pie } = G2Plot
|
||||
const data = [
|
||||
{ type: '类别一', value: 235 },
|
||||
{ type: '类别二', value: 565 },
|
||||
{ type: '类别三', value: 927 },
|
||||
{ type: '类别四', value: 574 },
|
||||
{ type: '类别五', value: 214 },
|
||||
{ type: '类别六', value: 214 },
|
||||
{ type: '类别七', value: 214 },
|
||||
{ type: '类别八', value: 214 },
|
||||
{ type: '类别九', value: 214 },
|
||||
{ type: '类别十', value: 214 },
|
||||
{ type: '类别一', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别二', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别三', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别四', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别五', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别六', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别七', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别八', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别九', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别十', value: Math.round(Math.random() * 100) },
|
||||
]
|
||||
const calcAverageValue = (data, type) => {
|
||||
const items = data.filter(d => d.type === type)
|
||||
@ -217,40 +156,42 @@ export default {
|
||||
lineWidth: 0,
|
||||
},
|
||||
})
|
||||
// const liquidPlot = new Liquid(this.$refs.left1, {
|
||||
// percent: 0.25,
|
||||
// statistic: {
|
||||
// content: {
|
||||
// style: {
|
||||
// color: 'rgb(255,255,255)',
|
||||
// fontSize: 18,
|
||||
// },
|
||||
// customHtml: (container, view, { percent }) => {
|
||||
// const text = `总体<br/>完成情况 ${(percent * 100).toFixed(0)}%`;
|
||||
// return `<div>${text}</div>`;
|
||||
// },
|
||||
// }
|
||||
// },
|
||||
// outline: {
|
||||
// border: 4,
|
||||
// style: {
|
||||
// stroke: 'l(0) 0:rgba(89, 184, 244, 1) 0.5:rgba(106, 232, 216, 1) 1:rgba(88, 151, 240, 1)'
|
||||
// }
|
||||
// },
|
||||
// wave: {
|
||||
// length: 128,
|
||||
// },
|
||||
// });
|
||||
console.log(liquidPlot.render())
|
||||
// liquidPlot.render();
|
||||
liquidPlot.render()
|
||||
},
|
||||
initLine() {
|
||||
const { Line } = G2Plot
|
||||
let arr = this.data
|
||||
const line = new Line(this.$refs.left2, {
|
||||
//
|
||||
const { Column } = G2Plot
|
||||
const column = new Column(this.$refs.left2, {
|
||||
data: [
|
||||
{ 城市: '七台河', 销售额: 52827.32 },
|
||||
{ 城市: '万县', 销售额: 16921.576 },
|
||||
{ 城市: '三亚', 销售额: 22698.396 },
|
||||
{ 城市: '三岔子', 销售额: 3262.98 },
|
||||
{ 城市: '三明', 销售额: 1458.8 },
|
||||
{ 城市: '上梅', 销售额: 11704.476 },
|
||||
{ 城市: '上海', 销售额: 58245.567999 },
|
||||
{ 城市: '上虞', 销售额: 10672.872 },
|
||||
{ 城市: '东丰', 销售额: 1785.84 },
|
||||
{ 城市: '东村', 销售额: 13692.14 },
|
||||
{ 城市: '东海', 销售额: 4508.28 },
|
||||
{ 城市: '东胜', 销售额: 12766.068 },
|
||||
{ 城市: '东莞', 销售额: 10165.89 },
|
||||
{ 城市: '东营', 销售额: 17153.92 },
|
||||
{ 城市: '东台', 销售额: 2789.892 },
|
||||
{ 城市: '东宁', 销售额: 2706.2 },
|
||||
],
|
||||
xField: '城市',
|
||||
yField: '销售额',
|
||||
xAxis: {
|
||||
label: {
|
||||
autoRotate: false,
|
||||
},
|
||||
},
|
||||
slider: {
|
||||
start: 0,
|
||||
end: 0.5,
|
||||
},
|
||||
})
|
||||
// line.render()
|
||||
column.render()
|
||||
},
|
||||
},
|
||||
}
|
||||
@ -262,6 +203,16 @@ export default {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.box {
|
||||
padding: 0 0 5px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.num {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content1 {
|
||||
@ -314,6 +265,13 @@ export default {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.chart2 {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 192px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.titWrap {
|
||||
height: 30px;
|
||||
|
||||
@ -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>
|
||||
@ -1,15 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <container2 title="经营责任书完成概况">
|
||||
<container2 title="生产责任令完成概况">
|
||||
<div class="wrap">
|
||||
<el-row class="content1">
|
||||
<el-col :span="24">
|
||||
<div id="left1" ref="left1" class="chart1"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="box">
|
||||
<span style="font-size: 25px; margin-right: 3px">·</span>
|
||||
<span>已完成任务/完成率</span>
|
||||
<i class="num">55/80%</i>
|
||||
<progressBar :percentage="70" />
|
||||
<el-progress :show-text="false" :stroke-width="6" :percentage="70"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
</container2>
|
||||
<container2 title="收入概况" style="margin-top: 10px">
|
||||
<container2 title="交付产品完成概况" style="margin-top: 10px">
|
||||
<div class="wrap">
|
||||
<el-row class="content2">
|
||||
<el-col :span="24">
|
||||
@ -17,77 +24,272 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</container2> -->
|
||||
<!-- <rocketTit style="margin-bottom: 9px">生产动态</rocketTit>
|
||||
<container4>
|
||||
<el-row style="height: 100%">
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<div class="right1_bg right1_bg1">
|
||||
<div style="padding: 10px 0 20px 0"><span class="num">2890</span>件</div>
|
||||
<div style="font-size: 18px">今日装药任务</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<div class="right1_bg right1_bg2">
|
||||
<div style="padding: 10px 0 20px 0"><span class="num">824</span>人</div>
|
||||
<div style="font-size: 18px">今日职工数</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</container4> -->
|
||||
</container2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import container4 from '../components/container4/index.vue'
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
|
||||
import container2 from './components/container2/index.vue'
|
||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||
import progressBar from '@/views/bigScreen/components/progress/index.vue'
|
||||
// import {Liquid} from '@antv/g2plot';
|
||||
// import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
// mixins: [resize],
|
||||
name: 'right1',
|
||||
components: {
|
||||
rocketTit,
|
||||
container4,
|
||||
container2,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initLine()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {},
|
||||
methods: {
|
||||
initChart() {
|
||||
const { Pie } = G2Plot
|
||||
const data = [
|
||||
{ type: '类别一', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别二', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别三', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别四', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别五', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别六', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别七', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别八', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别九', value: Math.round(Math.random() * 100) },
|
||||
{ type: '类别十', value: Math.round(Math.random() * 100) },
|
||||
]
|
||||
const calcAverageValue = (data, type) => {
|
||||
const items = data.filter(d => d.type === type)
|
||||
return items.length ? items.reduce((a, b) => a + b.value, 0) / items.length : '-'
|
||||
}
|
||||
const liquidPlot = new Pie(this.$refs.left1, {
|
||||
data: data,
|
||||
angleField: 'value',
|
||||
colorField: 'type',
|
||||
legend: {
|
||||
itemHeight: 13,
|
||||
pageNavigator: {
|
||||
marker: {
|
||||
style: {
|
||||
// 非激活，不可点击态时的填充色设置
|
||||
inactiveFill: '#fff',
|
||||
inactiveOpacity: 0.45,
|
||||
// 默认填充色设置
|
||||
fill: '#fff',
|
||||
opacity: 0.8,
|
||||
size: 12,
|
||||
},
|
||||
},
|
||||
text: {
|
||||
style: {
|
||||
fill: '#fff',
|
||||
fontSize: 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
offsetX: -30,
|
||||
itemName: {
|
||||
style: {
|
||||
fill: '#fff',
|
||||
},
|
||||
},
|
||||
itemValue: {
|
||||
formatter: (text, item) => {
|
||||
return calcAverageValue(data, item.value)
|
||||
},
|
||||
style: (item, index) => {
|
||||
return {
|
||||
fill: '#fff',
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
color: ['#4e7cde', '#4eba97', '#506186', '#d2a31d', '#c65a49'],
|
||||
radius: 0.9,
|
||||
label: {
|
||||
type: 'inner',
|
||||
offset: '-50%',
|
||||
content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
|
||||
style: {
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
},
|
||||
},
|
||||
interactions: [{ type: 'element-active' }],
|
||||
pieStyle: {
|
||||
lineWidth: 0,
|
||||
},
|
||||
innerRadius: 0.5,
|
||||
statistic: {
|
||||
title: false,
|
||||
content: {
|
||||
style: {
|
||||
whiteSpace: 'pre-wrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
},
|
||||
content: '',
|
||||
},
|
||||
},
|
||||
})
|
||||
liquidPlot.render()
|
||||
},
|
||||
initLine() {
|
||||
const { Column } = G2Plot
|
||||
const column = new Column(this.$refs.left2, {
|
||||
data: [
|
||||
{ 城市: '七台河', 销售额: 52827.32 },
|
||||
{ 城市: '万县', 销售额: 16921.576 },
|
||||
{ 城市: '三亚', 销售额: 22698.396 },
|
||||
{ 城市: '三岔子', 销售额: 3262.98 },
|
||||
{ 城市: '三明', 销售额: 1458.8 },
|
||||
{ 城市: '上梅', 销售额: 11704.476 },
|
||||
{ 城市: '上海', 销售额: 58245.567999 },
|
||||
{ 城市: '上虞', 销售额: 10672.872 },
|
||||
{ 城市: '东丰', 销售额: 1785.84 },
|
||||
{ 城市: '东村', 销售额: 13692.14 },
|
||||
{ 城市: '东海', 销售额: 4508.28 },
|
||||
{ 城市: '东胜', 销售额: 12766.068 },
|
||||
{ 城市: '东莞', 销售额: 10165.89 },
|
||||
{ 城市: '东营', 销售额: 17153.92 },
|
||||
{ 城市: '东台', 销售额: 2789.892 },
|
||||
{ 城市: '东宁', 销售额: 2706.2 },
|
||||
],
|
||||
xField: '城市',
|
||||
yField: '销售额',
|
||||
xAxis: {
|
||||
label: {
|
||||
autoRotate: false,
|
||||
},
|
||||
},
|
||||
slider: {
|
||||
start: 0,
|
||||
end: 0.5,
|
||||
},
|
||||
})
|
||||
column.render()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.right1_bg {
|
||||
width: 211px;
|
||||
height: 132px;
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
padding: 10px 0 10px 0;
|
||||
margin: 20px auto 0 auto;
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.box {
|
||||
padding: 0 0 5px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.num {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
font-size: 14px;
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
line-height: 35px;
|
||||
margin-right: 3px;
|
||||
vertical-align: middle;
|
||||
.content1 {
|
||||
// height: 200px;
|
||||
height: 100%;
|
||||
|
||||
.chart1 {
|
||||
margin: 0 auto;
|
||||
// width: 192px;
|
||||
width: 100%;
|
||||
height: 192px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.record {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 192px;
|
||||
padding-left: 30px;
|
||||
> div {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: -18px;
|
||||
top: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right1_bg1 {
|
||||
background-image: url(./right1-1.png);
|
||||
.num {
|
||||
color: #f6d97e;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: normal;
|
||||
color: #91d5fe;
|
||||
vertical-align: sub;
|
||||
// margin-right: 3px;
|
||||
}
|
||||
.right1_bg2 {
|
||||
background-image: url(./right1-2.png);
|
||||
.num {
|
||||
color: #1098ff;
|
||||
|
||||
.content2 {
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.chart2 {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 192px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.titWrap {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.tabContent {
|
||||
flex: 1;
|
||||
}
|
||||
.tabContent > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.tit::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0px;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #00ffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user