init2
This commit is contained in:
hh
BIN
src/views/bigScreen/drivingCabin/bottom1.png
Normal file
BIN
src/views/bigScreen/drivingCabin/bottom1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
39
src/views/bigScreen/drivingCabin/bottom1.vue
Normal file
39
src/views/bigScreen/drivingCabin/bottom1.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div>
|
||||
<container4 title="总体经营情况">
|
||||
<img src="./bottom1.png" style="width: 90%;display: block;margin: 0 auto">
|
||||
</container4>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container4 from "../components/container4/index.vue";
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'bottom1',
|
||||
components: {
|
||||
container4,
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
beforeDestroy () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
BIN
src/views/bigScreen/drivingCabin/bottom2.png
Normal file
BIN
src/views/bigScreen/drivingCabin/bottom2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
39
src/views/bigScreen/drivingCabin/bottom2.vue
Normal file
39
src/views/bigScreen/drivingCabin/bottom2.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div>
|
||||
<container4 title="总体生产情况">
|
||||
<img src="./bottom2.png" style="width: 90%;display: block;margin: 0 auto">
|
||||
</container4>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container4 from "../components/container4/index.vue";
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'bottom1',
|
||||
components: {
|
||||
container4,
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
beforeDestroy () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
39
src/views/bigScreen/drivingCabin/center.vue
Normal file
39
src/views/bigScreen/drivingCabin/center.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div>
|
||||
<container3>
|
||||
<img src="./snap.png" style="width: 100%;height:100%">
|
||||
</container3>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container3 from "../components/container3/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,
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
beforeDestroy () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -1,19 +1,121 @@
|
||||
<template>
|
||||
<scalseBox>
|
||||
<div>111</div>
|
||||
<scalseBox>
|
||||
<div class="drivingCabin">
|
||||
<div class="bg1"></div>
|
||||
<bigScreenHead></bigScreenHead>
|
||||
|
||||
</scalseBox>
|
||||
<div class="left1">
|
||||
<left1></left1>
|
||||
</div>
|
||||
<div class="left2">
|
||||
<left2></left2>
|
||||
</div>
|
||||
<div class="center1">
|
||||
<center1></center1>
|
||||
</div>
|
||||
<div class="right1">
|
||||
<right1></right1>
|
||||
</div>
|
||||
<div class="right2">
|
||||
<right2></right2>
|
||||
</div>
|
||||
<div class="bottom1">
|
||||
<bottom1></bottom1>
|
||||
</div>
|
||||
<div class="bottom2">
|
||||
<bottom2></bottom2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</scalseBox>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scalseBox from '../components/scaleBox.vue'
|
||||
import Screen from "../components/Screen";
|
||||
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 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,
|
||||
Screen
|
||||
bigScreenHead,
|
||||
rocketTit,
|
||||
container1,
|
||||
left1,
|
||||
left2,
|
||||
center1,
|
||||
right1,
|
||||
right2,
|
||||
bottom1,
|
||||
bottom2,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.drivingCabin {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background-color: #0D1049;
|
||||
// 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: 120px;
|
||||
left: 24px;
|
||||
}
|
||||
.left2 {
|
||||
position: absolute;
|
||||
top: 345px;
|
||||
left: 24px;
|
||||
}
|
||||
.center1 {
|
||||
position: absolute;
|
||||
top: 107px;
|
||||
left: 578px;
|
||||
}
|
||||
|
||||
.right1 {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
right: 24px;
|
||||
}
|
||||
.right2 {
|
||||
position: absolute;
|
||||
top: 345px;
|
||||
right: 24px;
|
||||
}
|
||||
.bottom1 {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 24px;
|
||||
}
|
||||
.bottom2 {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 24px;
|
||||
}
|
||||
</style>
|
||||
238
src/views/bigScreen/drivingCabin/left1.vue
Normal file
238
src/views/bigScreen/drivingCabin/left1.vue
Normal file
@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<div>
|
||||
<rocketTit style="margin-bottom: 9px">经营动态</rocketTit>
|
||||
<container1>
|
||||
<el-row style="height: 100%">
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<el-row style="height: 100%">
|
||||
<el-col :span="12" style="text-align:center,;padding: 26px 0 0 40px;">
|
||||
<div>
|
||||
今日收入
|
||||
</div>
|
||||
<div style="margin: 10px 0">
|
||||
<span class="num">2890</span>万
|
||||
</div>
|
||||
<div>
|
||||
同比增长
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<div ref="chart1" style="width: 100%;height:100%;"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<el-row style="height: 100%">
|
||||
<el-col :span="12" style="text-align:center,;padding: 26px 0 0 40px;">
|
||||
<div>
|
||||
今日合同
|
||||
</div>
|
||||
<div style="margin: 10px 0">
|
||||
<span class="num2">54</span>份
|
||||
</div>
|
||||
<div>
|
||||
同比增长
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<div ref="chart2" style="width: 100%;height:100%;"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</container1>
|
||||
</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 echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
rocketTit,
|
||||
container1,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart1: null,
|
||||
chart2: null,
|
||||
option1: {
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "10%",
|
||||
right: "10%",
|
||||
bottom: "20%"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
show: false,//不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
// axisTick: {
|
||||
// show: false//不显示坐标轴刻度线
|
||||
// },
|
||||
// axisLine: {
|
||||
// show: false,//不显示坐标轴线
|
||||
// },
|
||||
// axisLabel: {
|
||||
// show: false,//不显示坐标轴上的文字
|
||||
// },
|
||||
// splitLine: {
|
||||
// show: false//不显示网格线
|
||||
// },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
scale: true,
|
||||
show: false,
|
||||
// splitLine: {
|
||||
// show: false//不显示网格线
|
||||
// },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [30, 60, 80, 70, 80, 90, 110],
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
smooth: false,
|
||||
lineStyle: {
|
||||
color: '#f6d97e'
|
||||
},
|
||||
areaStyle: {//区域填充渐变颜色
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#f6d97e' // 0% 处的颜色
|
||||
}, {
|
||||
offset: .95, color: 'rgba(234,174,10, 0)' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
option2: {
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "10%",
|
||||
right: "10%",
|
||||
bottom: "20%"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
show: false,//不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
// axisTick: {
|
||||
// show: false//不显示坐标轴刻度线
|
||||
// },
|
||||
// axisLine: {
|
||||
// show: false,//不显示坐标轴线
|
||||
// },
|
||||
// axisLabel: {
|
||||
// show: false,//不显示坐标轴上的文字
|
||||
// },
|
||||
// splitLine: {
|
||||
// show: false//不显示网格线
|
||||
// },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
scale: true,
|
||||
show: false,
|
||||
// splitLine: {
|
||||
// show: false//不显示网格线
|
||||
// },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [30, 60, 80, 70, 80, 90, 110],
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
smooth: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(16, 152, 255, 1)'
|
||||
},
|
||||
areaStyle: {//区域填充渐变颜色
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(16, 152, 255, 1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: .95, color: 'rgba(16, 152, 255, 0)' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart1 || !this.chart2) {
|
||||
return
|
||||
}
|
||||
this.chart1.dispose()
|
||||
this.chart2.dispose()
|
||||
this.chart1 = null
|
||||
this.chart2 = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart1 = echarts.init(this.$refs.chart1, 'macarons');
|
||||
this.chart2 = echarts.init(this.$refs.chart2, 'macarons');
|
||||
this.chart1.setOption(this.option1);
|
||||
this.chart2.setOption(this.option2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
color: #f6d97e;
|
||||
line-height: 35px;
|
||||
// margin-right: 3px;
|
||||
}
|
||||
.num2 {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
color: rgba(16, 152, 255, 1);
|
||||
line-height: 35px;
|
||||
}
|
||||
</style>
|
||||
137
src/views/bigScreen/drivingCabin/left2.vue
Normal file
137
src/views/bigScreen/drivingCabin/left2.vue
Normal file
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div>
|
||||
<container2 title="生产总体走势">
|
||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||
</container2>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scalseBox from '../components/scaleBox.vue'
|
||||
import bigScreenHead from "../components/bigScreenHead/index.vue";
|
||||
import rocketTit from "../components/rocketTit/index.vue";
|
||||
import container2 from "../components/container2/index.vue";
|
||||
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
rocketTit,
|
||||
container2,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null,
|
||||
option: {
|
||||
backgroundColor: '',
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
right: '10',
|
||||
data: ['品类1', '品类2', '品类3'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false//不显示网格区域
|
||||
}
|
||||
},
|
||||
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 () {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$refs.chart, 'macarons');
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
color: #f6d97e;
|
||||
line-height: 35px;
|
||||
// margin-right: 3px;
|
||||
}
|
||||
.num2 {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
color: rgba(16, 152, 255, 1);
|
||||
line-height: 35px;
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/bigScreen/drivingCabin/right1-1.png
Normal file
BIN
src/views/bigScreen/drivingCabin/right1-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
src/views/bigScreen/drivingCabin/right1-2.png
Normal file
BIN
src/views/bigScreen/drivingCabin/right1-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
84
src/views/bigScreen/drivingCabin/right1.vue
Normal file
84
src/views/bigScreen/drivingCabin/right1.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div>
|
||||
<rocketTit style="margin-bottom: 9px">生产动态</rocketTit>
|
||||
<container1>
|
||||
<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>
|
||||
</container1>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import rocketTit from "../components/rocketTit/index.vue";
|
||||
import container1 from "../components/container1/index.vue";
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'right1',
|
||||
components: {
|
||||
rocketTit,
|
||||
container1,
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
beforeDestroy () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</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;
|
||||
|
||||
font-size: 14px;
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
line-height: 35px;
|
||||
margin-right: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.right1_bg1 {
|
||||
background-image: url(./right1-1.png);
|
||||
.num {
|
||||
color: #f6d97e;
|
||||
}
|
||||
}
|
||||
.right1_bg2 {
|
||||
background-image: url(./right1-2.png);
|
||||
.num {
|
||||
color: #1098ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
163
src/views/bigScreen/drivingCabin/right2.vue
Normal file
163
src/views/bigScreen/drivingCabin/right2.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div>
|
||||
<container2 title="经营总体走势">
|
||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||
</container2>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scalseBox from '../components/scaleBox.vue'
|
||||
import bigScreenHead from "../components/bigScreenHead/index.vue";
|
||||
import rocketTit from "../components/rocketTit/index.vue";
|
||||
import container2 from "../components/container2/index.vue";
|
||||
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'right2',
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
rocketTit,
|
||||
container2,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null,
|
||||
option: {
|
||||
backgroundColor: '',
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
right: '10',
|
||||
data: ['XX零件收入占比', 'XY零件收入占比'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10'],
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false//不显示网格区域
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value}%"
|
||||
},
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'XX零件收入占比',
|
||||
type: 'line',
|
||||
data: [55, 30, 45, 35, 55, 60, 60],
|
||||
smooth: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(78, 187, 147, 1)'
|
||||
},
|
||||
areaStyle: {//区域填充渐变颜色
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(78, 187, 147, 0.5)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: .75, color: 'rgba(78, 187, 147, 0)' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'XY零件收入占比',
|
||||
type: 'line',
|
||||
data: [45, 70, 50, 65, 45, 35, 40],
|
||||
smooth: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(16,148,249, 1)'
|
||||
},
|
||||
areaStyle: {//区域填充渐变颜色
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(16,148,249, 0.5)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: .75, color: 'rgba(16,148,249, 0)' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$refs.chart, 'macarons');
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
color: #f6d97e;
|
||||
line-height: 35px;
|
||||
// margin-right: 3px;
|
||||
}
|
||||
.num2 {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
color: rgba(16, 152, 255, 1);
|
||||
line-height: 35px;
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/bigScreen/drivingCabin/snap.png
Normal file
BIN
src/views/bigScreen/drivingCabin/snap.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1010 KiB |
Reference in New Issue
Block a user