williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改首屏大图

Browse Source
This commit is contained in:
熊丽君
2021-12-08 22:58:15 +08:00
parent 8a2e0b667e
commit 0905e4f5bd
10 changed files with 699 additions and 586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/bigScreen/components/progress/index.vue Normal file
View 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>

392
src/views/bigScreen/drivingCabin/center.vue
View File

@ -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>

BIN
src/views/bigScreen/drivingCabin/conter.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
src/views/bigScreen/drivingCabin/icon1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 654 B

BIN
src/views/bigScreen/drivingCabin/icon2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 635 B

BIN
src/views/bigScreen/drivingCabin/icon3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 375 B

BIN
src/views/bigScreen/drivingCabin/icon4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 413 B

175
src/views/bigScreen/drivingCabin/index.vue
View File

@ -1,29 +1,27 @@
<template>
<div class="drivingCabin">
<div class="left1">
<left1></left1>
</div>
<div class="left2">
<left2></left2>
</div>
<!-- <div class="bg1"></div> -->
<div class="drivingCabin">
<div class="left1">
<left1></left1>
</div>
<div class="left2">
<left2></left2>
</div>
<!-- <div class="bg1"></div> -->
<div class="center1">
<center1></center1>
</div>
<div class="center2">
<center2></center2>
</div>
<div class="right1">
<right1></right1>
</div>
<div class="center1">
<center1></center1>
</div>
<div class="center2">
<center2></center2>
</div>
<div class="right1">
<right1></right1>
</div>
<div class="right2">
<right2></right2>
</div>
<!-- <div class="right1">
<div class="right2">
<right2></right2>
</div>
<!-- <div class="right1">
<right1></right1>
</div>
<div class="right2">
@ -35,99 +33,98 @@
<div class="bottom2">
<bottom2></bottom2>
</div> -->
</div>
</div>
</template>
<script>
import scalseBox from '../components/scaleBox.vue'
import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import container1 from "../components/container1/index.vue";
import bigScreenHead from '../components/bigScreenHead/index.vue'
import rocketTit from '../components/rocketTit/index.vue'
import container1 from '../components/container1/index.vue'
import left1 from "./left1.vue";
import left2 from "./left2.vue";
import center1 from "./center.vue";
import center2 from "./center2.vue";
import right1 from "./right1.vue";
import right2 from "./right2.vue";
import bottom1 from "./bottom1.vue";
import bottom2 from "./bottom2.vue";
import left1 from './left1.vue'
import left2 from './left2.vue'
import center1 from './center.vue'
import center2 from './center2.vue'
import right1 from './right1.vue'
import right2 from './right2.vue'
import bottom1 from './bottom1.vue'
import bottom2 from './bottom2.vue'
export default {
name: 'DrivingCabin',
components: {
scalseBox,
bigScreenHead,
rocketTit,
container1,
left1,
left2,
center1,
right1,
right2,
bottom1,
bottom2,
center2,
}
name: 'DrivingCabin',
components: {
scalseBox,
bigScreenHead,
rocketTit,
container1,
left1,
left2,
center1,
right1,
right2,
bottom1,
bottom2,
center2,
},
}
</script>
<style lang="scss" scoped>
.drivingCabin {
position: relative;
width: 100%;
// background-image: url("../img/bg.png");
background-size: cover;
.bg1 {
position: absolute;
bottom: 0;
left: 0;
width: 1920px;
height: 485px;
background-image: url("../img/bg-1.png");
background-size: cover;
}
position: relative;
width: 100%;
// background-image: url("../img/bg.png");
background-size: cover;
.bg1 {
position: absolute;
bottom: 0;
left: 0;
width: 1920px;
height: 485px;
background-image: url('../img/bg-1.png');
background-size: cover;
}
}
.left1 {
position: absolute;
top: 20px;
left: 24px;
position: absolute;
top: 3px;
left: 24px;
}
.left2 {
position: absolute;
top: 605px;
left: 24px;
position: absolute;
top: 605px;
left: 24px;
}
.center1 {
position: absolute;
top: 20px;
left: 578px;
position: absolute;
top: 3px;
left: 578px;
}
.center2 {
position: absolute;
top: 605px;
left: 710px;
position: absolute;
top: 605px;
left: 710px;
}
.right1 {
position: absolute;
top: 20px;
right: 24px;
position: absolute;
top: 3px;
right: 24px;
}
.right2 {
position: absolute;
top: 605px;
right: 24px;
position: absolute;
top: 605px;
right: 24px;
}
.bottom1 {
position: absolute;
bottom: 16px;
left: 24px;
position: absolute;
bottom: 16px;
left: 24px;
}
.bottom2 {
position: absolute;
bottom: 16px;
right: 24px;
position: absolute;
bottom: 16px;
right: 24px;
}
</style>
</style>

388
src/views/bigScreen/drivingCabin/left1.vue
View File

@ -6,22 +6,25 @@
<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">
<div class="wrap">
<div style="height: 100%; width: 100%" ref="left2"></div>
<!-- <div class="wrap">
<el-row class="content2">
<el-col :span="24">
<el-col :span="24" style="height: 100%">
<div id="left2" ref="left2" class="chart2"></div>
</el-col>
</el-row>
</div>
</div> -->
</container2>
</div>
</template>
@ -30,8 +33,11 @@
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'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
// mixins: [resize],
name: 'left1',
@ -39,73 +45,11 @@ 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: '部门二',
},
],
}
},
mounted() {
@ -117,140 +61,145 @@ export default {
beforeDestroy() {},
methods: {
initChart() {
const { Liquid, 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 },
]
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',
this.chart = echarts.init(this.$refs.left1, 'macarons')
this.setOptions()
},
setOptions() {
this.chart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
},
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',
}
},
data: ['类别一', '类别二', '类别三', '类别四', '类别五', '类别六', '类别七', '类别八'],
orient: 'vertical',
// left: '60%',
right: '2%',
y: 'center',
textStyle: {
//图例文字的样式
color: '#fff',
fontSize: 16,
},
},
// legend: {
// position: 'right-top',
// offsetX: 8,
// title: {
// text: '产品类别 (平均销售量）',
// spacing: 8,
// },
// itemName: {
// style: (item, index) => {
// return {
// fill: calcAverageValue(data, item.value) > 10000 ? 'red' : 'green',
// };
// },
// },
// itemValue: {
// formatter: (text, item) => {
// return calcAverageValue(data, item.value);
// },
// style: (item, index) => {
// return {
// fill: calcAverageValue(data, item.value) > 10000 ? 'red' : 'green',
// };
// },
// },
// },
color: ['#4e7cde', '#4eba97', '#506186', '#d2a31d', '#c65a49'],
radius: 0.9,
label: {
type: 'inner',
offset: '-30%',
content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
style: {
fontSize: 14,
textAlign: 'center',
series: [
{
name: '概括',
type: 'pie',
radius: [0, '85%'],
center: ['35%', '50%'],
label: {
formatter: '{d}%',
position: 'inner',
fontSize: 14,
},
labelLine: {
show: false,
},
data: [
{ value: 154, name: '类别一' },
{ value: 775, name: '类别二' },
{ value: 679, name: '类别三' },
{ value: 679, name: '类别四' },
{ value: 679, name: '类别五' },
{ value: 679, name: '类别六' },
{ value: 679, name: '类别七' },
{ value: 679, name: '类别八' },
],
},
},
interactions: [{ type: 'element-active' }],
pieStyle: {
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();
},
initLine() {
const { Line } = G2Plot
let arr = this.data
const line = new Line(this.$refs.left2, {
//
this.chart = echarts.init(this.$refs.left2)
this.setOptions2()
},
setOptions2() {
this.chart.setOption({
tooltip: {
trigger: 'axis',
formatter: '{a1}<br/>{b1}：{c1}%',
},
legend: {
data: ['收入', '实际', '目标'],
textStyle: {
color: '#fff', //legend字体颜色
},
},
grid: {
containLabel: true,
left: 50,
top: 30,
bottom: 50,
},
xAxis: {
data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07', '2021-08'],
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
dataZoom: {
type: 'slider',
start: 0,
end: 50,
},
color: ['#ccc', 'red'],
yAxis: {
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'],
},
},
axisLabel: {
formatter: '{value}%',
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
series: [
{
name: '收入',
type: 'bar',
z: '-1',
barGap: '-75%',
barWidth: 30,
itemStyle: {
color: 'rgba(85, 197, 162, .3)',
},
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
},
{
name: '实际',
type: 'bar',
barWidth: 15,
position: [0, 0],
itemStyle: {
color: 'rgba(90, 216, 166, 0.85)',
},
data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95],
},
{
name: '目标',
type: 'scatter',
symbol: 'rect',
symbolSize: [30, 4],
symbolOffset: [3, 0],
position: [0, 0],
itemStyle: {
color: '#F6D97E',
},
data: [10, 20, 36, 10, 10, 20, 10, 20, 36, 10, 10, 20],
},
],
})
// line.render()
},
},
}
@ -262,6 +211,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 {
@ -270,33 +229,10 @@ export default {
.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;
}
}
}
}
.num {
@ -311,19 +247,11 @@ export default {
.content2 {
padding: 20px;
flex: 1;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
.titWrap {
height: 30px;
}
.tabContent {
flex: 1;
}
.tabContent > div {
width: 100%;
.chart2 {
height: 100%;
}

304
src/views/bigScreen/drivingCabin/right1.vue
View File

@ -1,93 +1,285 @@
<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">
<div class="wrap">
<container2 title="交付产品完成概况" style="margin-top: 10px">
<div style="height: 100%; width: 100%" ref="left2"></div>
<!-- <div class="wrap">
<el-row class="content2">
<el-col :span="24">
<el-col :span="24" style="height: 100%">
<div id="left2" ref="left2" class="chart2"></div>
</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> -->
</div> -->
</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'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
mixins: [resize],
name: 'right1',
// mixins: [resize],
name: 'left1',
components: {
rocketTit,
container4,
container2,
bigScreenTabs,
progressBar,
},
data() {
return {}
return {
index: 0,
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
this.initLine()
})
},
mounted() {},
beforeDestroy() {},
methods: {},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.left1, 'macarons')
this.setOptions()
},
setOptions() {
this.chart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
},
legend: {
data: ['型号一', '型号二', '型号三', '型号四', '型号五', '型号六', '型号七', '型号八'],
orient: 'vertical',
// left: '60%',
right: '2%',
y: 'center',
textStyle: {
//图例文字的样式
color: '#fff',
fontSize: 16,
},
},
series: [
{
name: '概括',
type: 'pie',
radius: ['40%', '80%'],
center: ['35%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 154, name: '型号一' },
{ value: 775, name: '型号二' },
{ value: 679, name: '型号三' },
{ value: 679, name: '型号四' },
{ value: 679, name: '型号五' },
{ value: 679, name: '型号六' },
{ value: 679, name: '型号七' },
{ value: 679, name: '型号八' },
],
},
],
})
},
initLine() {
this.chart = echarts.init(this.$refs.left2, 'macarons')
this.setOptions2()
},
setOptions2() {
this.chart.setOption({
tooltip: {
trigger: 'axis',
formatter: '{a1}<br/>{b1}：{c1}%',
},
legend: {
data: ['预测', '实际', '目标'],
textStyle: {
color: '#fff', //legend字体颜色
},
},
grid: {
containLabel: true,
left: 50,
top: 30,
bottom: 50,
},
xAxis: {
data: ['型号一', '型号二', '型号三', '型号四', '型号五', '型号六', '型号七', '型号八'],
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
dataZoom: {
type: 'slider',
start: 0,
end: 50,
},
color: ['#ccc', 'red'],
yAxis: {
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'],
},
},
axisLabel: {
formatter: '{value}%',
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
series: [
{
name: '预测',
type: 'bar',
z: '-1',
barGap: '-75%',
barWidth: 30,
itemStyle: {
color: 'rgba(85, 197, 162, .3)',
},
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
},
{
name: '实际',
type: 'bar',
barWidth: 15,
position: [0, 0],
itemStyle: {
color: 'rgba(90, 216, 166, 0.85)',
},
data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95],
},
{
name: '目标',
type: 'scatter',
symbol: 'rect',
symbolSize: [30, 4],
symbolOffset: [3, 0],
position: [0, 0],
itemStyle: {
color: '#F6D97E',
},
data: [10, 20, 36, 10, 10, 20, 10, 20, 36, 10, 10, 20],
},
],
})
},
},
}
</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: 100%;
height: 192px;
background: transparent;
}
}
.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;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
.chart2 {
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>