656 lines
13 KiB
Vue
656 lines
13 KiB
Vue
<template>
|
||
<div>
|
||
<container3 title="民用产业">
|
||
<bigScreenTabs
|
||
slot="datePicker"
|
||
v-model="index"
|
||
:titleArr="['总厂情况', '合同及产品生产信息', '本月情况']"
|
||
></bigScreenTabs>
|
||
<div style="display: flex; height: 100%" v-if="index == 0">
|
||
<div style="height: 100%; width: 13%; display: flex; flex-direction: column; justify-content: space-evenly">
|
||
<div class="tag">
|
||
<div class="title">收入</div>
|
||
<i style="font-size: 24px; font-weight: bold; color: #91d5fe">300/<i style="font-size: 18px">800</i></i> 万
|
||
</div>
|
||
<div class="tag">
|
||
<div class="title">收入</div>
|
||
<i style="font-size: 24px; font-weight: bold; color: #91d5fe">300/<i style="font-size: 18px">800</i></i> 万
|
||
</div>
|
||
<div class="tag">
|
||
<div class="title">收入</div>
|
||
<i style="font-size: 24px; font-weight: bold; color: #91d5fe">300/<i style="font-size: 18px">800</i></i> 万
|
||
</div>
|
||
</div>
|
||
<div style="height: 100%; width: 87%" ref="chart"></div>
|
||
</div>
|
||
<div style="height: 100%" v-else-if="index == 1">
|
||
<el-row :gutter="20" style="height: 100%">
|
||
<el-col :span="5" style="height: 100%">
|
||
<div class="_box">
|
||
<div class="_item">
|
||
<div>
|
||
<img src="./img/right2/2.png" alt="" />
|
||
</div>
|
||
<div style="margin: 5px 0 10px; color: #ccc">签订总数</div>
|
||
<div style="font-size: 30px">567</div>
|
||
</div>
|
||
<div class="_item">
|
||
<div>
|
||
<img src="./img/right2/3.png" alt="" />
|
||
</div>
|
||
<div style="margin: 5px 0 10px; color: #ccc">金额</div>
|
||
<div><span style="font-size: 30px">3245</span><span style="color: #ccc">w</span></div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="13" style="height: 100%">
|
||
<div style="height: 100%; width: 100%" ref="chart2"></div>
|
||
</el-col>
|
||
<el-col :span="6" style="height: 100%">
|
||
<div style="height: 100%; width: 100%" ref="chart3"></div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div style="height: 100%" v-else>
|
||
<div style="height: 100%; width: 100%" ref="chart4"></div>
|
||
</div>
|
||
</container3>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import scalseBox from '../components/scaleBox.vue'
|
||
import bigScreenHead from '../components/bigScreenHead/index.vue'
|
||
import rocketTit from '../components/rocketTit/index.vue'
|
||
import container3 from './components/container3/index.vue'
|
||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||
import colorList from '@/utils/colorPalette'
|
||
|
||
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,
|
||
container3,
|
||
bigScreenTabs,
|
||
},
|
||
data() {
|
||
return {
|
||
index: 0,
|
||
chart: null,
|
||
chart2: null,
|
||
chart3: null,
|
||
chart4: null,
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.initChart()
|
||
})
|
||
},
|
||
watch: {
|
||
index(newVal, oldVal) {
|
||
if (newVal == 0) {
|
||
this.$nextTick(() => {
|
||
this.initChart()
|
||
})
|
||
} else if (newVal == 1) {
|
||
this.$nextTick(() => {
|
||
this.initChart2()
|
||
this.initChart3()
|
||
})
|
||
} else {
|
||
this.$nextTick(() => {
|
||
this.initChart4()
|
||
})
|
||
}
|
||
},
|
||
},
|
||
beforeDestroy() {
|
||
if (!this.chart) {
|
||
return
|
||
}
|
||
this.chart.dispose()
|
||
this.chart = null
|
||
},
|
||
methods: {
|
||
initChart() {
|
||
this.chart = echarts.init(this.$refs.chart)
|
||
this.setOptions()
|
||
},
|
||
setOptions() {
|
||
this.chart.setOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
},
|
||
legend: {
|
||
data: ['收入', '利润'],
|
||
textStyle: {
|
||
color: '#fff', //legend字体颜色
|
||
},
|
||
},
|
||
grid: {
|
||
left: 20,
|
||
right: 20,
|
||
top: 30,
|
||
bottom: 50,
|
||
containLabel: true,
|
||
},
|
||
dataZoom: {
|
||
type: 'slider',
|
||
// start: 0,
|
||
// end: 50,
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: '个',
|
||
splitLine: {
|
||
show: true,
|
||
// 改变轴线颜色
|
||
lineStyle: {
|
||
// 使用深浅的间隔色
|
||
color: ['rgba(255, 255, 255,.5)'],
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
min: 0,
|
||
max: 100,
|
||
interval: 20,
|
||
axisLabel: {
|
||
formatter: '{value} %',
|
||
},
|
||
splitLine: {
|
||
show: false, //不显示网格线
|
||
},
|
||
splitArea: {
|
||
show: false, //不显示网格区域
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '利润',
|
||
type: 'bar',
|
||
stack: 'Ad',
|
||
emphasis: {
|
||
focus: 'series',
|
||
},
|
||
itemStyle: {
|
||
color: '#8BB1ED',
|
||
},
|
||
barWidth: 30,
|
||
data: [150, 232, 201, 154, 190, 330, 410],
|
||
},
|
||
{
|
||
name: '收入',
|
||
type: 'bar',
|
||
stack: 'Ad',
|
||
emphasis: {
|
||
focus: 'series',
|
||
},
|
||
itemStyle: {
|
||
color: '#53C19D',
|
||
},
|
||
barWidth: 30,
|
||
data: [150, 232, 201, 154, 190, 330, 410],
|
||
},
|
||
{
|
||
name: '',
|
||
type: 'line',
|
||
smooth: false,
|
||
data: [500, 550, 700, 520, 650, 520, 550],
|
||
itemStyle: {
|
||
color: '#53C19D',
|
||
},
|
||
symbol: 'none',
|
||
},
|
||
{
|
||
name: '',
|
||
type: 'line',
|
||
smooth: false,
|
||
itemStyle: {
|
||
color: '#8BB1ED',
|
||
},
|
||
data: [600, 500, 700, 620, 750, 800, 600],
|
||
symbol: 'none',
|
||
},
|
||
],
|
||
})
|
||
},
|
||
initChart2() {
|
||
this.chart2 = echarts.init(this.$refs.chart2)
|
||
this.setOptions2()
|
||
},
|
||
setOptions2() {
|
||
this.chart2.setOption({
|
||
legend: {
|
||
// data: ['利润', '利润预测', '利润目标完成率'],
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '6%',
|
||
bottom: '3%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: [
|
||
'2021-01',
|
||
'2021-02',
|
||
'2021-03',
|
||
'2021-04',
|
||
'2021-05',
|
||
'2021-06',
|
||
'2021-07',
|
||
'2021-08',
|
||
'2021-09',
|
||
'2021-10',
|
||
'2021-11',
|
||
'2021-12',
|
||
],
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '',
|
||
min: 0,
|
||
// max: 250,
|
||
// interval: 50,
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
},
|
||
splitLine: {
|
||
show: false, //不显示网格线
|
||
},
|
||
splitArea: {
|
||
show: false, //不显示网格区域
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
min: 0,
|
||
max: 100,
|
||
// interval: 5,
|
||
axisLabel: {
|
||
formatter: '{value} %',
|
||
},
|
||
splitLine: {
|
||
show: false, //不显示网格线
|
||
},
|
||
splitArea: {
|
||
show: false, //不显示网格区域
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
grid: {
|
||
containLabel: true,
|
||
width: '99%',
|
||
left: 0,
|
||
top: 50,
|
||
bottom: 50,
|
||
},
|
||
dataZoom: {
|
||
type: 'slider',
|
||
start: 0,
|
||
end: 30,
|
||
},
|
||
series: [
|
||
{
|
||
name: '稀土',
|
||
type: 'bar',
|
||
// barWidth: 20,
|
||
// barGap: '0',
|
||
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
|
||
itemStyle: {
|
||
color: '#E3F5C2',
|
||
},
|
||
},
|
||
{
|
||
name: '隔热',
|
||
type: 'bar',
|
||
// barWidth: 20,
|
||
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
|
||
itemStyle: {
|
||
color: '#45D1CC',
|
||
},
|
||
},
|
||
{
|
||
name: '其他',
|
||
type: 'bar',
|
||
// barWidth: 20,
|
||
// barGap: '0',
|
||
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
|
||
itemStyle: {
|
||
color: '#61C1FB',
|
||
},
|
||
},
|
||
{
|
||
name: '完成率',
|
||
type: 'line',
|
||
yAxisIndex: 1,
|
||
smooth: false,
|
||
data: [12.0, 12.2, 13.3, 14.5, 16.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#E3F5C2',
|
||
},
|
||
},
|
||
symbol: 'none',
|
||
},
|
||
{
|
||
name: '',
|
||
type: 'line',
|
||
yAxisIndex: 1,
|
||
smooth: false,
|
||
data: [14.0, 14.2, 16.3, 18.5, 12.3, 20.2, 40.3, 43.4, 43.0, 26.5, 22.0, 12.2],
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#45D1CC',
|
||
},
|
||
},
|
||
symbol: 'none',
|
||
},
|
||
{
|
||
name: '',
|
||
type: 'line',
|
||
yAxisIndex: 1,
|
||
smooth: false,
|
||
data: [22.0, 22.2, 32.3, 42.5, 26.3, 50.2, 30.3, 43.4, 43.0, 56.5, 42.0, 56.2],
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#61C1FB',
|
||
},
|
||
},
|
||
symbol: 'none',
|
||
},
|
||
],
|
||
})
|
||
},
|
||
initChart3() {
|
||
this.chart3 = echarts.init(this.$refs.chart3)
|
||
this.setOptions3()
|
||
},
|
||
setOptions3() {
|
||
this.chart3.setOption({
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||
position: 'inner',
|
||
},
|
||
series: [
|
||
{
|
||
name: '型号',
|
||
type: 'pie',
|
||
center: ['45%', '50%'],
|
||
radius: ['60%', '80%'],
|
||
avoidLabelOverlap: false,
|
||
hoverAnimation: false, // hover 效果
|
||
label: {
|
||
show: false,
|
||
position: 'center',
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false,
|
||
fontSize: '40',
|
||
fontWeight: 'bold',
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{ value: 4, name: '隔热' },
|
||
{ value: 2, name: '其他' },
|
||
{ value: 6, name: '稀土' },
|
||
],
|
||
itemStyle: {
|
||
emphasis: {
|
||
shadowBlur: 1,
|
||
shadowOffsetX: 0,
|
||
shadowColor: '#fff',
|
||
},
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
formatter: '{b}',
|
||
position: 'inner',
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
},
|
||
},
|
||
},
|
||
// color: colorList,
|
||
color: ['#5B8FF9', '#5AD8A6', '#5D7092'],
|
||
},
|
||
{
|
||
name: '合同',
|
||
type: 'pie',
|
||
radius: ['35%', '55%'],
|
||
center: ['45%', '50%'],
|
||
avoidLabelOverlap: false,
|
||
hoverAnimation: false, // hover 效果
|
||
label: {
|
||
show: false,
|
||
position: 'center',
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false,
|
||
fontSize: '40',
|
||
fontWeight: 'bold',
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{ value: 4, name: '合同1' },
|
||
{ value: 2, name: '合同2' },
|
||
{ value: 6, name: '合同3' },
|
||
],
|
||
itemStyle: {
|
||
emphasis: {
|
||
shadowBlur: 1,
|
||
shadowOffsetX: 0,
|
||
shadowColor: '#fff',
|
||
},
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
formatter: '{b}',
|
||
position: 'inner',
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
},
|
||
},
|
||
},
|
||
// color: colorList,
|
||
color: ['#5B8FF9', '#5AD8A6', '#5D7092'],
|
||
},
|
||
],
|
||
})
|
||
},
|
||
initChart4() {
|
||
this.chart4 = echarts.init(this.$refs.chart4)
|
||
this.setOptions4()
|
||
},
|
||
setOptions4() {
|
||
this.chart4.setOption({
|
||
tooltip: {
|
||
// trigger: 'axis',
|
||
// formatter: '{a1}<br/>{b1}：{c1}',
|
||
},
|
||
grid: {
|
||
containLabel: true,
|
||
left: 20,
|
||
right: 10,
|
||
top: 30,
|
||
bottom: 10,
|
||
},
|
||
xAxis: {
|
||
data: [
|
||
'部门一',
|
||
'部门一',
|
||
'部门一',
|
||
'部门一',
|
||
'部门一',
|
||
'部门一',
|
||
'部门一',
|
||
'部门一',
|
||
'部门一',
|
||
'部门一',
|
||
'部门一',
|
||
'部门一',
|
||
],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgb(255, 255, 255)',
|
||
},
|
||
},
|
||
},
|
||
color: ['#ccc', 'red'],
|
||
yAxis: [
|
||
{
|
||
min: 0,
|
||
max: 100,
|
||
interval: 20,
|
||
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: '-100%',
|
||
barWidth: 30,
|
||
itemStyle: {
|
||
color: 'rgba(246, 217, 126, .2)',
|
||
},
|
||
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
|
||
},
|
||
{
|
||
name: '数量',
|
||
type: 'bar',
|
||
barWidth: 30,
|
||
position: [0, 0],
|
||
itemStyle: {
|
||
color: 'rgba(246, 217, 126, 1)',
|
||
},
|
||
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
|
||
},
|
||
],
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tag {
|
||
.title {
|
||
width: 96px;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
margin-bottom: 10px;
|
||
background: linear-gradient(270deg, rgba(39, 65, 128, 0.3) 0%, rgba(4, 169, 191, 0.6) 100%);
|
||
}
|
||
}
|
||
._box {
|
||
width: 162px;
|
||
height: 275px;
|
||
background-image: url(./img/right2/1.png);
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-evenly;
|
||
._item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
</style>
|