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

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

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

@ -6,22 +6,25 @@
<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">
<div class="wrap"> <div style="height: 100%; width: 100%" ref="left2"></div>
<!-- <div class="wrap">
<el-row class="content2"> <el-row class="content2">
<el-col :span="24"> <el-col :span="24" style="height: 100%">
<div id="left2" ref="left2" class="chart2"></div> <div id="left2" ref="left2" class="chart2"></div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div> -->
</container2> </container2>
</div> </div>
</template> </template>
@ -30,8 +33,11 @@
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'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default { export default {
// mixins: [resize], // mixins: [resize],
name: 'left1', name: 'left1',
@ -39,73 +45,11 @@ export default {
rocketTit, rocketTit,
container2, container2,
bigScreenTabs, bigScreenTabs,
progressBar,
}, },
data() { data() {
return { return {
index: 0, 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() {
@ -117,140 +61,145 @@ export default {
beforeDestroy() {}, beforeDestroy() {},
methods: { methods: {
initChart() { initChart() {
const { Liquid, Pie } = G2Plot this.chart = echarts.init(this.$refs.left1, 'macarons')
const data = [ this.setOptions()
{ type: '类别一', value: 235 }, },
{ type: '类别二', value: 565 }, setOptions() {
{ type: '类别三', value: 927 }, this.chart.setOption({
{ type: '类别四', value: 574 }, tooltip: {
{ type: '类别五', value: 214 }, trigger: 'item',
{ type: '类别六', value: 214 }, formatter: '{a} <br/>{b}: {c} ({d}%)',
{ 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',
legend: { legend: {
itemHeight: 13, data: ['类别一', '类别二', '类别三', '类别四', '类别五', '类别六', '类别七', '类别八'],
pageNavigator: { orient: 'vertical',
marker: { // left: '60%',
style: { right: '2%',
// 非激活，不可点击态时的填充色设置 y: 'center',
inactiveFill: '#fff', textStyle: {
inactiveOpacity: 0.45, //图例文字的样式
// 默认填充色设置 color: '#fff',
fill: '#fff', fontSize: 16,
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',
}
},
}, },
}, },
// legend: { series: [
// position: 'right-top', {
// offsetX: 8, name: '概括',
// title: { type: 'pie',
// text: '产品类别 (平均销售量）', radius: [0, '85%'],
// spacing: 8, center: ['35%', '50%'],
// }, label: {
// itemName: { formatter: '{d}%',
// style: (item, index) => { position: 'inner',
// return { fontSize: 14,
// fill: calcAverageValue(data, item.value) > 10000 ? 'red' : 'green', },
// }; labelLine: {
// }, show: false,
// }, },
// itemValue: { data: [
// formatter: (text, item) => { { value: 154, name: '类别一' },
// return calcAverageValue(data, item.value); { value: 775, name: '类别二' },
// }, { value: 679, name: '类别三' },
// style: (item, index) => { { value: 679, name: '类别四' },
// return { { value: 679, name: '类别五' },
// fill: calcAverageValue(data, item.value) > 10000 ? 'red' : 'green', { value: 679, name: '类别六' },
// }; { value: 679, name: '类别七' },
// }, { value: 679, name: '类别八' },
// }, ],
// },
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',
}, },
}, ],
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() { initLine() {
const { Line } = G2Plot this.chart = echarts.init(this.$refs.left2)
let arr = this.data this.setOptions2()
const line = new Line(this.$refs.left2, { },
// 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; 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 {
@ -270,33 +229,10 @@ export default {
.chart1 { .chart1 {
margin: 0 auto; margin: 0 auto;
// width: 192px;
width: 100%; width: 100%;
height: 192px; height: 192px;
background: transparent; 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 { .num {
@ -311,19 +247,11 @@ export default {
.content2 { .content2 {
padding: 20px; padding: 20px;
flex: 1; flex: 1;
height: 100%;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.chart2 {
.titWrap {
height: 30px;
}
.tabContent {
flex: 1;
}
.tabContent > div {
width: 100%;
height: 100%; height: 100%;
} }

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

@ -1,93 +1,285 @@
<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 style="height: 100%; width: 100%" ref="left2"></div>
<!-- <div class="wrap">
<el-row class="content2"> <el-row class="content2">
<el-col :span="24"> <el-col :span="24" style="height: 100%">
<div id="left2" ref="left2" class="chart2"></div> <div id="left2" ref="left2" class="chart2"></div>
</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'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default { export default {
mixins: [resize], // mixins: [resize],
name: 'right1', name: 'left1',
components: { components: {
rocketTit, rocketTit,
container4, container2,
bigScreenTabs,
progressBar,
}, },
data() { data() {
return {} return {
index: 0,
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
this.initLine()
})
}, },
mounted() {},
beforeDestroy() {}, 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> </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: 100%;
vertical-align: middle; height: 192px;
background: transparent;
} }
} }
.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;
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> </style>