Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 6f7b220452 | |||
| ece8914427 |
@ -10,6 +10,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
// import "./flexible.js";
|
||||||
import scalseBox from './components/scaleBox.vue'
|
import scalseBox from './components/scaleBox.vue'
|
||||||
import bigScreenHead from "./components/bigScreenHead/index.vue";
|
import bigScreenHead from "./components/bigScreenHead/index.vue";
|
||||||
|
|
||||||
@ -24,9 +26,25 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.digScreenLayout {
|
.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;
|
position: relative;
|
||||||
width: 1920px;
|
width: 100%;
|
||||||
height: 1080px;
|
height: 100%;
|
||||||
background-color: #0D1049;
|
background-color: #0D1049;
|
||||||
// background-image: url("../img/bg.png");
|
// background-image: url("../img/bg.png");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
@ -39,8 +57,8 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 1920px;
|
width: 10rem;
|
||||||
height: 485px;
|
height: 2.526042rem /* 485/192 */;
|
||||||
background-image: url("./img/bg-1.png");
|
background-image: url("./img/bg-1.png");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -56,19 +56,19 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.bigScreenHead {
|
.bigScreenHead {
|
||||||
width: 1920px;
|
width: 10rem /* 1920/192 */;
|
||||||
height: 100px;
|
height: .520833rem /* 100/192 */;
|
||||||
background-image: url(./bg.png);
|
background-image: url(./bg.png);
|
||||||
background-size: 100% 80px;
|
background-size: 100% .416667rem /* 80/192 */;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
.tit {
|
.tit {
|
||||||
font-size: 36px;
|
font-size: .1875rem /* 36/192 */;
|
||||||
font-family: YouSheBiaoTiHei;
|
font-family: YouSheBiaoTiHei;
|
||||||
color: #91d5fe;
|
color: #91d5fe;
|
||||||
line-height: 47px;
|
line-height: .244792rem /* 47/192 */;
|
||||||
letter-spacing: 6px;
|
letter-spacing: .03125rem /* 6/192 */;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 13px;
|
padding-top: .067708rem /* 13/192 */;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
<template>
|
||||||
<div style="background-color: #000;height: 100%;width:100%">
|
<div class="scaleBoxWrap">
|
||||||
<div class="ScaleBox" ref="ScaleBox" :style="{
|
<div class="ScaleBox" ref="ScaleBox" :style="{
|
||||||
width: width + 'px',
|
width: ScaleBoxWidth + 'px',
|
||||||
height: height + 'px'
|
height: ScaleBoxHeight + 'px'
|
||||||
}">
|
}">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 {
|
export default {
|
||||||
name: 'ScaleBox',
|
name: 'ScaleBox',
|
||||||
props: {},
|
props: {},
|
||||||
@ -17,31 +32,74 @@ export default {
|
|||||||
return {
|
return {
|
||||||
scale: 0,
|
scale: 0,
|
||||||
width: 1920,
|
width: 1920,
|
||||||
height: 1080
|
height: 1080,
|
||||||
|
ScaleBoxWidth: 1920,
|
||||||
|
ScaleBoxHeight: 1080,
|
||||||
|
style: {
|
||||||
|
width: '100%',
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.setScale()
|
this.setScale()
|
||||||
window.addEventListener('resize', this.debounce(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: {
|
methods: {
|
||||||
getScale () {
|
getScale () {
|
||||||
|
|
||||||
|
|
||||||
const { width, height } = this
|
const { width, height } = this
|
||||||
const wh = window.innerHeight / height
|
const wh = window.innerHeight / height
|
||||||
const ww = window.innerWidth / width
|
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
|
return ww < wh ? ww : wh
|
||||||
},
|
},
|
||||||
setScale () {
|
setScale () {
|
||||||
|
this.getScale()
|
||||||
// if (window.innerHeight == 1080) {
|
// if (window.innerHeight == 1080) {
|
||||||
// this.height = 1080
|
// this.height = 1080
|
||||||
// } else {
|
// } else {
|
||||||
// this.height = 937
|
// this.height = 937
|
||||||
// }
|
// }
|
||||||
this.scale = this.getScale()
|
// this.scale = this.getScale()
|
||||||
if (this.$refs.ScaleBox) {
|
// console.log(this.scale)
|
||||||
this.$refs.ScaleBox.style.setProperty('--scale', 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) {
|
debounce (fn, delay) {
|
||||||
const delays = delay || 500
|
const delays = delay || 500
|
||||||
@ -63,19 +121,31 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
#ScaleBox {
|
.scaleBoxWrap {
|
||||||
--scale: 1;
|
display: flex;
|
||||||
|
display: -webkit-flex;
|
||||||
|
background-color: #000;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.ScaleBox {
|
.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;
|
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>
|
</style>
|
||||||
|
|||||||
@ -1,232 +1,202 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<container3>
|
<container3>
|
||||||
<img class="img" src="./conter2.jpg" style="width: 100%;height:100%">
|
<img class="img" src="./conter.png" style="width: 100%; height: 100%" />
|
||||||
<rocketTit class="tit">今日动态</rocketTit>
|
<rocketTit class="tit">全年目标</rocketTit>
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<div class="data-item">
|
<div class="data-item">
|
||||||
<div>收入</div>
|
<div><img src="./icon1.png" alt="" /><span>收入</span></div>
|
||||||
<div><span class="num">3380</span>万</div>
|
<div class="box"><i>3380/</i><i class="num">12342</i><span class="num2">万</span></div>
|
||||||
</div>
|
<div style="padding: 0 15px">
|
||||||
<div class="data-item">
|
<progressBar :percentage="70" />
|
||||||
<div>支出</div>
|
</div>
|
||||||
<div><span class="num">3380</span>万</div>
|
</div>
|
||||||
</div>
|
<div class="data-item">
|
||||||
<div class="data-item">
|
<div><img src="./icon2.png" alt="" /><span>利润</span></div>
|
||||||
<div>合同</div>
|
<div class="box"><i>380/</i><i class="num">12342</i><span class="num2">万</span></div>
|
||||||
<div><span class="num">3380</span>份</div>
|
<div style="padding: 0 15px">
|
||||||
</div>
|
<progressBar :percentage="70" />
|
||||||
<div class="data-item">
|
</div>
|
||||||
<div>装药任务</div>
|
</div>
|
||||||
<div><span class="num">3380</span>件</div>
|
<div class="data-item">
|
||||||
</div>
|
<div><img src="./icon3.png" alt="" /><span>装药量</span></div>
|
||||||
<div class="data-item">
|
<div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div>
|
||||||
<div>职工出勤数</div>
|
<div style="padding: 0 15px">
|
||||||
<div><span class="num">3380</span>人</div>
|
<progressBar :percentage="70" />
|
||||||
</div>
|
</div>
|
||||||
<div class="data-item">
|
</div>
|
||||||
<div>职工出勤数</div>
|
<div class="data-item">
|
||||||
<div><span class="num">42<span style="font-size:22px">/80%</span></span>人</div>
|
<div><img src="./icon4.png" alt="" /><span>交付数量</span></div>
|
||||||
</div>
|
<div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div>
|
||||||
</div>
|
<div style="padding: 0 15px">
|
||||||
|
<progressBar :percentage="70" />
|
||||||
<!-- <div class="con_right">
|
</div>
|
||||||
<div class="con_title">
|
</div>
|
||||||
<img src="./conter1-1.png" alt="">
|
</div>
|
||||||
<span style="margin-left:2px">正在工作</span>
|
</container3>
|
||||||
</div>
|
</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>
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import container3 from "../components/container3/index.vue";
|
import container3 from '../components/container3/index.vue'
|
||||||
import rocketTit from "../components/rocketTit/index.vue";
|
import rocketTit from '../components/rocketTit/index.vue'
|
||||||
|
import progressBar from './../components/progress/index.vue'
|
||||||
|
|
||||||
import echarts from 'echarts'
|
import echarts from 'echarts'
|
||||||
require('echarts/theme/macarons') // echarts theme
|
require('echarts/theme/macarons') // echarts theme
|
||||||
import resize from '../../dashboard/mixins/resize'
|
import resize from '../../dashboard/mixins/resize'
|
||||||
export default {
|
export default {
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
name: 'left1',
|
name: 'left1',
|
||||||
components: {
|
components: {
|
||||||
container3,
|
container3,
|
||||||
rocketTit,
|
rocketTit,
|
||||||
},
|
progressBar,
|
||||||
data () {
|
},
|
||||||
return {}
|
data() {
|
||||||
},
|
return {}
|
||||||
mounted () {
|
},
|
||||||
|
mounted() {},
|
||||||
},
|
beforeDestroy() {},
|
||||||
beforeDestroy () {
|
methods: {},
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.tit {
|
.tit {
|
||||||
padding: 16px 24px;
|
padding: 16px 24px;
|
||||||
}
|
}
|
||||||
.img {
|
.img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.data {
|
.data {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0 15px;
|
margin: 0 15px;
|
||||||
background: rgba(2, 18, 63, 0.4);
|
background: rgba(2, 18, 63, 0.33);
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
.data-item {
|
.data-item {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
>div {
|
> div {
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
img {
|
||||||
.num {
|
// width: 10px;
|
||||||
font-size: 28px;
|
// height: 10px;
|
||||||
font-family: Roboto-BlackItalic, Roboto;
|
vertical-align: middle;
|
||||||
font-weight: 600;
|
margin-right: 5px;
|
||||||
color: #55C5A2;
|
}
|
||||||
vertical-align: sub;
|
}
|
||||||
padding-right: 3px;
|
.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{
|
.container3 {
|
||||||
position: relative;
|
position: relative;
|
||||||
.con_right{
|
.con_right {
|
||||||
width: 88px;
|
width: 88px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20%;
|
top: 20%;
|
||||||
right: 20%;
|
right: 20%;
|
||||||
color: #00FFFF;
|
color: #00ffff;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
img{
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.con_title{
|
.con_title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
img{
|
img {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.con_height{
|
.con_height {
|
||||||
width:2px;
|
width: 2px;
|
||||||
height:20px;
|
height: 20px;
|
||||||
background-color:#00FFFF;
|
background-color: #00ffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.con_two{
|
.con_two {
|
||||||
top: 43%;
|
top: 43%;
|
||||||
right: 12%;
|
right: 12%;
|
||||||
}
|
}
|
||||||
.con_left{
|
.con_left {
|
||||||
width: 186px;
|
width: 186px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 60%;
|
top: 60%;
|
||||||
left: 24%;
|
left: 24%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
img{
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.con_left_title{
|
.con_left_title {
|
||||||
position: relative;
|
position: relative;
|
||||||
.con_card{
|
.con_card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 22%;
|
top: 22%;
|
||||||
div{
|
div {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
span:nth-child(1){
|
span:nth-child(1) {
|
||||||
opacity: .9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
span:nth-child(2){
|
span:nth-child(2) {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.con_h_two{
|
.con_h_two {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 47px;
|
height: 47px;
|
||||||
border: 1px solid #FA8C16;
|
border: 1px solid #fa8c16;
|
||||||
border-top-width: 0;
|
border-top-width: 0;
|
||||||
border-right-width: 0;
|
border-right-width: 0;
|
||||||
.con_bottom{
|
.con_bottom {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -50%;
|
right: -50%;
|
||||||
bottom: -50%;
|
bottom: -50%;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
transform: translate(-50%,-50%);
|
transform: translate(-50%, -50%);
|
||||||
img{
|
img {
|
||||||
width: 38%;
|
width: 38%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -48,17 +48,17 @@ export default {
|
|||||||
.container2 {
|
.container2 {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 538px;
|
width: 2.802083rem /* 538/192 */;
|
||||||
height: 288px;
|
height: 1.5rem /* 288/192 */;
|
||||||
background-image: url(./bg.png);
|
background-image: url(./bg.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 16px;
|
font-size: .083333rem /* 16/192 */;
|
||||||
font-family: PingFangSC-Semibold, PingFang SC;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
.tit {
|
.tit {
|
||||||
padding: 16px 16px 16px 24px;
|
padding: .083333rem /* 16/192 */ .083333rem /* 16/192 */ .083333rem /* 16/192 */ .125rem /* 24/192 */;
|
||||||
position: relative;
|
position: relative;
|
||||||
.datePicker {
|
.datePicker {
|
||||||
position: absolute;
|
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">
|
<div class="left1">
|
||||||
<left1></left1>
|
<left1></left1>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="left2">
|
||||||
|
<left2></left2>
|
||||||
|
</div>
|
||||||
<!-- <div class="bg1"></div> -->
|
<!-- <div class="bg1"></div> -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="center1">
|
<!-- <div class="center1">
|
||||||
<center1></center1>
|
<center1></center1>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="right1">
|
<div class="right1">
|
||||||
<right1></right1>
|
<right1></right1>
|
||||||
</div>
|
</div>
|
||||||
@ -79,13 +82,13 @@ export default {
|
|||||||
|
|
||||||
.left1 {
|
.left1 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 3px;
|
||||||
left: 24px;
|
left: 24px;
|
||||||
}
|
}
|
||||||
.left2 {
|
.left2 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 245px;
|
top: 3.151042rem /* 605/192 */;
|
||||||
left: 24px;
|
left: .125rem /* 24/192 */;
|
||||||
}
|
}
|
||||||
.center1 {
|
.center1 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@ -6,12 +6,14 @@
|
|||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<div id="left1" ref="left1" class="chart1"></div>
|
<div id="left1" ref="left1" class="chart1"></div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<!-- <el-col :span="12">
|
|
||||||
<div class="record">
|
|
||||||
<div>0进展指标 <span class="num">2</span>个</div>
|
|
||||||
</div>
|
|
||||||
</el-col> -->
|
|
||||||
</el-row>
|
</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>
|
</div>
|
||||||
</container2>
|
</container2>
|
||||||
<container2 title="收入概况" style="margin-top: 10px">
|
<container2 title="收入概况" style="margin-top: 10px">
|
||||||
@ -30,6 +32,7 @@
|
|||||||
import rocketTit from '../components/rocketTit/index.vue'
|
import rocketTit from '../components/rocketTit/index.vue'
|
||||||
import container2 from './components/container2/index.vue'
|
import container2 from './components/container2/index.vue'
|
||||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||||
|
import progressBar from '@/views/bigScreen/components/progress/index.vue'
|
||||||
// import {Liquid} from '@antv/g2plot';
|
// import {Liquid} from '@antv/g2plot';
|
||||||
// import resize from '../../dashboard/mixins/resize'
|
// import resize from '../../dashboard/mixins/resize'
|
||||||
export default {
|
export default {
|
||||||
@ -39,74 +42,10 @@ export default {
|
|||||||
rocketTit,
|
rocketTit,
|
||||||
container2,
|
container2,
|
||||||
bigScreenTabs,
|
bigScreenTabs,
|
||||||
|
progressBar,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
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: '部门二',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
@ -117,18 +56,18 @@ export default {
|
|||||||
beforeDestroy() {},
|
beforeDestroy() {},
|
||||||
methods: {
|
methods: {
|
||||||
initChart() {
|
initChart() {
|
||||||
const { Liquid, Pie } = G2Plot
|
const { Pie } = G2Plot
|
||||||
const data = [
|
const data = [
|
||||||
{ type: '类别一', value: 235 },
|
{ type: '类别一', value: Math.round(Math.random() * 100) },
|
||||||
{ type: '类别二', value: 565 },
|
{ type: '类别二', value: Math.round(Math.random() * 100) },
|
||||||
{ type: '类别三', value: 927 },
|
{ type: '类别三', value: Math.round(Math.random() * 100) },
|
||||||
{ type: '类别四', value: 574 },
|
{ type: '类别四', value: Math.round(Math.random() * 100) },
|
||||||
{ type: '类别五', value: 214 },
|
{ type: '类别五', value: Math.round(Math.random() * 100) },
|
||||||
{ type: '类别六', value: 214 },
|
{ type: '类别六', value: Math.round(Math.random() * 100) },
|
||||||
{ type: '类别七', value: 214 },
|
{ type: '类别七', value: Math.round(Math.random() * 100) },
|
||||||
{ type: '类别八', value: 214 },
|
{ type: '类别八', value: Math.round(Math.random() * 100) },
|
||||||
{ type: '类别九', value: 214 },
|
{ type: '类别九', value: Math.round(Math.random() * 100) },
|
||||||
{ type: '类别十', value: 214 },
|
{ type: '类别十', value: Math.round(Math.random() * 100) },
|
||||||
]
|
]
|
||||||
const calcAverageValue = (data, type) => {
|
const calcAverageValue = (data, type) => {
|
||||||
const items = data.filter(d => d.type === type)
|
const items = data.filter(d => d.type === type)
|
||||||
@ -217,40 +156,42 @@ export default {
|
|||||||
lineWidth: 0,
|
lineWidth: 0,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
// const liquidPlot = new Liquid(this.$refs.left1, {
|
liquidPlot.render()
|
||||||
// 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();
|
|
||||||
},
|
},
|
||||||
initLine() {
|
initLine() {
|
||||||
const { Line } = G2Plot
|
const { Column } = G2Plot
|
||||||
let arr = this.data
|
const column = new Column(this.$refs.left2, {
|
||||||
const line = new Line(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;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 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 {
|
.content1 {
|
||||||
@ -314,6 +265,13 @@ export default {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
.chart2 {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
height: 192px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
.titWrap {
|
.titWrap {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
|||||||
@ -1,12 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<container2 title="生产总体走势">
|
<container3 title="利润概况">
|
||||||
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
<!-- <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>
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||||
<span slot="snap">件</span>
|
<span slot="snap">件</span> -->
|
||||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
<div class="chart" ref="chart"></div>
|
||||||
</container2>
|
</container3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
@ -15,7 +14,7 @@
|
|||||||
import scalseBox from '../components/scaleBox.vue'
|
import scalseBox from '../components/scaleBox.vue'
|
||||||
import bigScreenHead from "../components/bigScreenHead/index.vue";
|
import bigScreenHead from "../components/bigScreenHead/index.vue";
|
||||||
import rocketTit from "../components/rocketTit/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'
|
import echarts from 'echarts'
|
||||||
@ -28,92 +27,13 @@ export default {
|
|||||||
scalseBox,
|
scalseBox,
|
||||||
bigScreenHead,
|
bigScreenHead,
|
||||||
rocketTit,
|
rocketTit,
|
||||||
container2,
|
container3,
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
dateRange: [],
|
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 () {
|
mounted () {
|
||||||
@ -130,8 +50,134 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart () {
|
initChart () {
|
||||||
this.chart = echarts.init(this.$refs.chart, 'macarons');
|
const { DualAxes } = G2Plot
|
||||||
this.chart.setOption(this.option);
|
|
||||||
|
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);
|
color: rgba(16, 152, 255, 1);
|
||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
padding: .052083rem /* 10/192 */ .15625rem /* 30/192 */;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,15 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- <container2 title="经营责任书完成概况">
|
<container2 title="生产责任令完成概况">
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<el-row class="content1">
|
<el-row class="content1">
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<div id="left1" ref="left1" class="chart1"></div>
|
<div id="left1" ref="left1" class="chart1"></div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</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>
|
</div>
|
||||||
</container2>
|
</container2>
|
||||||
<container2 title="收入概况" style="margin-top: 10px">
|
<container2 title="交付产品完成概况" style="margin-top: 10px">
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<el-row class="content2">
|
<el-row class="content2">
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
@ -17,77 +24,272 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</container2> -->
|
</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> -->
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import rocketTit from '../components/rocketTit/index.vue'
|
import rocketTit from '../components/rocketTit/index.vue'
|
||||||
import container4 from '../components/container4/index.vue'
|
import container2 from './components/container2/index.vue'
|
||||||
import resize from '../../dashboard/mixins/resize'
|
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 {
|
export default {
|
||||||
mixins: [resize],
|
// mixins: [resize],
|
||||||
name: 'right1',
|
name: 'right1',
|
||||||
components: {
|
components: {
|
||||||
rocketTit,
|
rocketTit,
|
||||||
container4,
|
container2,
|
||||||
|
bigScreenTabs,
|
||||||
|
progressBar,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {}
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart()
|
||||||
|
this.initLine()
|
||||||
|
})
|
||||||
|
},
|
||||||
beforeDestroy() {},
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.right1_bg {
|
.wrap {
|
||||||
width: 211px;
|
display: flex;
|
||||||
height: 132px;
|
flex-direction: column;
|
||||||
background-size: cover;
|
height: 100%;
|
||||||
text-align: center;
|
width: 100%;
|
||||||
padding: 10px 0 10px 0;
|
.box {
|
||||||
margin: 20px auto 0 auto;
|
padding: 0 0 5px 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.num {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
font-size: 14px;
|
.content1 {
|
||||||
.num {
|
// height: 200px;
|
||||||
font-size: 30px;
|
height: 100%;
|
||||||
font-family: Roboto-Black, Roboto;
|
|
||||||
font-weight: 900;
|
.chart1 {
|
||||||
line-height: 35px;
|
margin: 0 auto;
|
||||||
margin-right: 3px;
|
// width: 192px;
|
||||||
vertical-align: middle;
|
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 {
|
||||||
.num {
|
font-size: 30px;
|
||||||
color: #f6d97e;
|
font-family: Roboto-BlackItalic, Roboto;
|
||||||
}
|
font-weight: normal;
|
||||||
|
color: #91d5fe;
|
||||||
|
vertical-align: sub;
|
||||||
|
// margin-right: 3px;
|
||||||
}
|
}
|
||||||
.right1_bg2 {
|
|
||||||
background-image: url(./right1-2.png);
|
.content2 {
|
||||||
.num {
|
padding: 20px;
|
||||||
color: #1098ff;
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user