修改rem前
This commit is contained in:
熊丽君
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,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>
|
||||
|
||||
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 |
@ -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,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