Merge branch 'master' of http://101.43.70.124:3000/williamet/vis389
This commit is contained in:
hh
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<container3 title="安全隐患整改情况">
|
<container3 title="应用系统">
|
||||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||||
</container3>
|
</container3>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<container title="危险点危险源区域分布视频监控情况">
|
<container title="月度工作计划">
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<el-row class="content1">
|
<el-row class="content1">
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
|
|||||||
@ -2,6 +2,9 @@
|
|||||||
<div>
|
<div>
|
||||||
<center1>
|
<center1>
|
||||||
<div class="data">
|
<div class="data">
|
||||||
|
<div class="top_tab">
|
||||||
|
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['全年', '本月']"></bigScreenTabs>
|
||||||
|
</div>
|
||||||
<div class="data-item">
|
<div class="data-item">
|
||||||
<div><img src="./icon1.png" alt="" /><span style="font-weight: bold">收入</span></div>
|
<div><img src="./icon1.png" alt="" /><span style="font-weight: bold">收入</span></div>
|
||||||
<div class="box"><i>3380/</i><i class="num">12342</i><span class="num2">万</span></div>
|
<div class="box"><i>3380/</i><i class="num">12342</i><span class="num2">万</span></div>
|
||||||
@ -17,22 +20,55 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-item">
|
<div class="data-item">
|
||||||
<div><img src="./icon3.png" alt="" /><span style="font-weight: bold">装药量</span></div>
|
<div><img src="./icon3.png" alt="" /><span style="font-weight: bold">EVA</span></div>
|
||||||
<div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div>
|
<div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万</span></div>
|
||||||
<div style="width: 100%">
|
<div style="width: 100%">
|
||||||
<progressBar :percentage="70" />
|
<progressBar :percentage="70" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-item">
|
<div class="data-item" style="width: 34%">
|
||||||
<div><img src="./icon4.png" alt="" /><span style="font-weight: bold">交付数量</span></div>
|
<div><img src="./icon4.png" alt="" /><span style="font-weight: bold">两金</span></div>
|
||||||
<div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div>
|
<div style="display: flex">
|
||||||
<div style="width: 100%">
|
<div>
|
||||||
<progressBar :percentage="70" />
|
<div class="box" style="margin-bottom: 0">
|
||||||
|
<i>999/</i><i class="num">12342</i><span class="num2">万</span>
|
||||||
|
</div>
|
||||||
|
<span style="font-size: 12px; position: relative; top: -6px">产成品</span>
|
||||||
|
<div style="display: flex">
|
||||||
|
<progressBar :percentage="70" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="margin-left: 10px">
|
||||||
|
<div class="box" style="margin-bottom: 0">
|
||||||
|
<i>999/</i><i class="num">12342</i><span class="num2">万</span>
|
||||||
|
</div>
|
||||||
|
<span style="font-size: 12px; position: relative; top: -6px">应收账款</span>
|
||||||
|
<div style="display: flex">
|
||||||
|
<progressBar :percentage="70" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="center_box"></div>
|
<div class="center_box">
|
||||||
<div class="center_box"></div>
|
<rocketTit>部门收入完成率</rocketTit>
|
||||||
|
<el-date-picker v-model="dateRange" v-if="index2 == 0" type="month" size="mini" placeholder="选择月">
|
||||||
|
</el-date-picker>
|
||||||
|
<bigScreenTabs slot="datePicker" v-model="index2" :titleArr="['全年', '本月']"></bigScreenTabs>
|
||||||
|
<div style="height: 182px; width: 100%" ref="chart" v-if="index2 == 0"></div>
|
||||||
|
<div style="height: 182px; width: 100%" ref="chart4" v-else></div>
|
||||||
|
</div>
|
||||||
|
<div class="center_box">
|
||||||
|
<rocketTit>成本分析</rocketTit>
|
||||||
|
<el-row style="height: 182px; width: 100%" :gutter="12">
|
||||||
|
<el-col style="height: 100%" :span="18">
|
||||||
|
<div style="height: 100%" ref="chart2"></div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6" style="height: 100%">
|
||||||
|
<div style="height: 100%" ref="chart3"></div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
</center1>
|
</center1>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -40,7 +76,10 @@
|
|||||||
<script>
|
<script>
|
||||||
import center1 from './components/center1/index.vue'
|
import center1 from './components/center1/index.vue'
|
||||||
import rocketTit from '../components/rocketTit/index.vue'
|
import rocketTit from '../components/rocketTit/index.vue'
|
||||||
|
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||||
import progressBar from './../components/progress/index.vue'
|
import progressBar from './../components/progress/index.vue'
|
||||||
|
import colorList from '@/utils/colorPalette'
|
||||||
|
import { blueColorList, greenColorList, yelloColorList } from '@/utils/gradualColor'
|
||||||
|
|
||||||
import echarts from 'echarts'
|
import echarts from 'echarts'
|
||||||
require('echarts/theme/macarons') // echarts theme
|
require('echarts/theme/macarons') // echarts theme
|
||||||
@ -52,22 +91,593 @@ export default {
|
|||||||
center1,
|
center1,
|
||||||
rocketTit,
|
rocketTit,
|
||||||
progressBar,
|
progressBar,
|
||||||
|
bigScreenTabs,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {
|
||||||
|
index: 0,
|
||||||
|
index2: 0,
|
||||||
|
dateRange: '',
|
||||||
|
chart: null,
|
||||||
|
chart2: null,
|
||||||
|
chart3: null,
|
||||||
|
chart4: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart()
|
||||||
|
this.initChart2()
|
||||||
|
this.initChart3()
|
||||||
|
})
|
||||||
},
|
},
|
||||||
mounted() {},
|
|
||||||
beforeDestroy() {},
|
beforeDestroy() {},
|
||||||
methods: {},
|
watch: {
|
||||||
|
index2(newVal, oldVal) {
|
||||||
|
if (newVal == 0) {
|
||||||
|
this.chart4.dispose()
|
||||||
|
this.chart4 = null
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart()
|
||||||
|
this.initChart2()
|
||||||
|
this.initChart3()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart4()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$refs.chart, 'macarons')
|
||||||
|
this.setOptions()
|
||||||
|
},
|
||||||
|
// 子弹图
|
||||||
|
setOptions() {
|
||||||
|
this.chart.setOption({
|
||||||
|
tooltip: {
|
||||||
|
// trigger: 'axis',
|
||||||
|
// formatter: '{a1}<br/>{b1}：{c1}',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['数量', '完成率'],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', //legend字体颜色
|
||||||
|
},
|
||||||
|
left: 'left',
|
||||||
|
left: '10%',
|
||||||
|
// selectedMode: false,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
containLabel: true,
|
||||||
|
left: 20,
|
||||||
|
right: 10,
|
||||||
|
top: 30,
|
||||||
|
bottom: 0,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: ['项目一', '项目二', '项目三', '项目四', '项目五', '项目六'],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// dataZoom: {
|
||||||
|
// type: 'slider',
|
||||||
|
// start: 0,
|
||||||
|
// end: 50,
|
||||||
|
// },
|
||||||
|
color: ['#ccc', 'red'],
|
||||||
|
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',
|
||||||
|
// 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: 30,
|
||||||
|
position: [0, 0],
|
||||||
|
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear', // 线性渐变
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#B5D3FE',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#7EA7FC',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '完成率',
|
||||||
|
type: 'scatter',
|
||||||
|
symbol: 'rect',
|
||||||
|
symbolSize: [30, 4],
|
||||||
|
symbolOffset: [0, 0],
|
||||||
|
position: [0, 0],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F6D97E',
|
||||||
|
},
|
||||||
|
data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 折线图
|
||||||
|
initChart2() {
|
||||||
|
this.chart2 = echarts.init(this.$refs.chart2, 'macarons')
|
||||||
|
this.setOptions2()
|
||||||
|
},
|
||||||
|
setOptions2() {
|
||||||
|
this.chart2.setOption({
|
||||||
|
legend: {
|
||||||
|
left: 'right',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '3%',
|
||||||
|
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',
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value} %',
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
// show: false, //不显示网格线
|
||||||
|
lineStyle: {
|
||||||
|
color: '#2b3b6c',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// splitArea: {
|
||||||
|
// show: false, //不显示网格区域
|
||||||
|
// },
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
grid: {
|
||||||
|
containLabel: true,
|
||||||
|
width: '99%',
|
||||||
|
left: 0,
|
||||||
|
top: 30,
|
||||||
|
bottom: 0,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '预算执行率',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 0,
|
||||||
|
smooth: false,
|
||||||
|
data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#1098FF',
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(16, 152, 255, 1)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(51, 65, 106, 0.18)',
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initChart3() {
|
||||||
|
this.chart3 = echarts.init(this.$refs.chart3, 'macarons')
|
||||||
|
this.setOptions3()
|
||||||
|
},
|
||||||
|
setOptions3() {
|
||||||
|
this.chart3.setOption({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
// color: colorList,
|
||||||
|
// legend: {
|
||||||
|
// top: '5%',
|
||||||
|
// right: '5%',
|
||||||
|
// orient: 'vertical',
|
||||||
|
// y: 'center',
|
||||||
|
// // left: 'right',
|
||||||
|
// textStyle: {
|
||||||
|
// color: '#fff', //legend字体颜色
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '占比',
|
||||||
|
type: 'pie',
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
radius: ['65%', '85%'],
|
||||||
|
clockWise: false, // 逆时针
|
||||||
|
hoverAnimation: false, // hover 效果
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center',
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
fontSize: '40',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 100, name: '总2' },
|
||||||
|
{ value: 48, name: '工装成本占比' },
|
||||||
|
],
|
||||||
|
color: ['#73cdcf', '#2f6a74'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '占比',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['30%', '50%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
clockWise: false, // 逆时针
|
||||||
|
hoverAnimation: false, // hover 效果
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center',
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
fontSize: '40',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 100, name: '总1' },
|
||||||
|
{ value: 50, name: '原材料成本占比' },
|
||||||
|
],
|
||||||
|
color: ['#f6d97e', '#7f7462'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
initChart4() {
|
||||||
|
this.chart4 = echarts.init(this.$refs.chart4)
|
||||||
|
this.setOptions4()
|
||||||
|
},
|
||||||
|
setOptions4() {
|
||||||
|
this.chart4.setOption({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
x: 'right',
|
||||||
|
// y: 'center',
|
||||||
|
top: '20%',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', //legend字体颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 20,
|
||||||
|
right: '25%',
|
||||||
|
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: 'EVA',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F6D97E',
|
||||||
|
},
|
||||||
|
barWidth: 30,
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '两金',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F89343',
|
||||||
|
},
|
||||||
|
barWidth: 30,
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '利润',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#83DDC5',
|
||||||
|
},
|
||||||
|
barWidth: 30,
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '收入',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#ADCDFD',
|
||||||
|
},
|
||||||
|
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: '#8BB1ED',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '利润完成率',
|
||||||
|
type: 'line',
|
||||||
|
smooth: false,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#53C19D',
|
||||||
|
},
|
||||||
|
data: [600, 500, 700, 620, 750, 800, 600],
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '两金完成率',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
smooth: false,
|
||||||
|
data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F64F58',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'EVA完成率',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
smooth: false,
|
||||||
|
data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F6D97E',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.center_box {
|
.center_box {
|
||||||
margin-top: 20px;
|
position: relative;
|
||||||
|
margin-top: 8px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 225px;
|
height: 225px;
|
||||||
|
padding: 10px 25px;
|
||||||
background-image: url(./center.png);
|
background-image: url(./center.png);
|
||||||
|
::v-deep .el-date-editor {
|
||||||
|
position: absolute;
|
||||||
|
right: 190px;
|
||||||
|
top: 12px;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
vertical-align: middle;
|
||||||
|
color: #fff;
|
||||||
|
background-color: transparent;
|
||||||
|
.el-range-input,
|
||||||
|
.el-range-separator {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-range-editor.is-active {
|
||||||
|
border-color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.BigScreenTabs {
|
||||||
|
position: absolute;
|
||||||
|
right: 16px;
|
||||||
|
top: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.tit {
|
.tit {
|
||||||
padding: 16px 24px;
|
padding: 16px 24px;
|
||||||
@ -79,21 +689,30 @@ export default {
|
|||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.data {
|
.data {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
margin: 0 30px;
|
// margin: 0 30px;
|
||||||
background: rgba(2, 18, 63, 0.33);
|
height: 120px;
|
||||||
|
background: rgba(145, 213, 254, 0.1);
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
.top_tab {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
.data-item {
|
.data-item {
|
||||||
// flex: 1;
|
// flex: 1;
|
||||||
width: 20%;
|
width: 19%;
|
||||||
|
padding: 5px 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
> div {
|
> div {
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
img {
|
img {
|
||||||
// width: 10px;
|
// width: 10px;
|
||||||
// height: 10px;
|
// height: 10px;
|
||||||
@ -118,94 +737,20 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.container3 {
|
.top_tab {
|
||||||
position: relative;
|
::v-deep .BigScreenTabs {
|
||||||
.con_right {
|
.button {
|
||||||
width: 88px;
|
padding: 0;
|
||||||
position: absolute;
|
transform: unset;
|
||||||
top: 20%;
|
height: 24px;
|
||||||
right: 20%;
|
line-height: 24px;
|
||||||
color: #00ffff;
|
font-weight: 500;
|
||||||
display: flex;
|
color: #ffffff;
|
||||||
flex-direction: column;
|
font-size: 12px;
|
||||||
justify-content: center;
|
width: 40px;
|
||||||
align-items: center;
|
min-width: 40px;
|
||||||
img {
|
div {
|
||||||
width: 100%;
|
transform: unset;
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 375 B After Width: | Height: | Size: 234 B |
Binary file not shown.
|
Before Width: | Height: | Size: 413 B After Width: | Height: | Size: 319 B |
BIN
src/views/bigScreen/management/img/left2/1.png
Normal file
BIN
src/views/bigScreen/management/img/left2/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/views/bigScreen/management/img/left2/2.png
Normal file
BIN
src/views/bigScreen/management/img/left2/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/views/bigScreen/management/img/left2/3.png
Normal file
BIN
src/views/bigScreen/management/img/left2/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/views/bigScreen/management/img/right2/1.png
Normal file
BIN
src/views/bigScreen/management/img/right2/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/views/bigScreen/management/img/right2/2.png
Normal file
BIN
src/views/bigScreen/management/img/right2/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/views/bigScreen/management/img/right2/3.png
Normal file
BIN
src/views/bigScreen/management/img/right2/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@ -1,17 +1,78 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<container2 title="战略指标">
|
<container2 title="战略指标">
|
||||||
<div class="wrap">
|
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||||
<el-row class="content1">
|
|
||||||
<el-col :span="24">
|
|
||||||
<!-- <div id="left1" ref="left1" class="chart1"></div> -->
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</container2>
|
</container2>
|
||||||
<container2 title="综合指标" style="margin-top: 10px">
|
<container2 title="综合指标" style="margin-top: 10px">
|
||||||
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['完成率', '明细']"></bigScreenTabs>
|
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['完成率', '明细']"></bigScreenTabs>
|
||||||
<!-- <div style="height: 100%; width: 100%" ref="left2"></div> -->
|
<el-row style="height: 100%; width: 100%; padding: 0 0 5px 15px" :gutter="10" v-if="index == 0">
|
||||||
|
<el-col style="height: 100%" :span="16">
|
||||||
|
<div style="height: 100%; width: 100%" ref="chart2"></div>
|
||||||
|
</el-col>
|
||||||
|
<el-col style="height: 100%" :span="8">
|
||||||
|
<section class="wrap">
|
||||||
|
<div>
|
||||||
|
<div class="box">
|
||||||
|
<span style="font-size: 25px; margin-right: 3px">·</span>
|
||||||
|
<span>0进展指标</span>
|
||||||
|
</div>
|
||||||
|
<div style="text-align: center"><span class="num">2</span> <span style="fong-size: 14px">个</span></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="box">
|
||||||
|
<span style="font-size: 25px; margin-right: 3px">·</span>
|
||||||
|
<span>总体完成率</span>
|
||||||
|
</div>
|
||||||
|
<div style="padding: 5px 30px 10px">
|
||||||
|
<progressBar :percentage="80" />
|
||||||
|
</div>
|
||||||
|
<div style="text-align: center"><span class="num">80%</span></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row v-else style="height: 100%; width: 100%; padding: 0 10px 0 20px">
|
||||||
|
<el-col :span="24" style="margin-bottom: 1px">
|
||||||
|
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||||
|
<el-col style="text-align: center" :span="3">序号</el-col>
|
||||||
|
<el-col style="text-align: center" :span="5">项目名称</el-col>
|
||||||
|
<el-col style="text-align: center" :span="5">部门</el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">时间</el-col>
|
||||||
|
<el-col style="text-align: center" :span="4">完成情况</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
<vue-seamless-scroll
|
||||||
|
:data="listData"
|
||||||
|
class="warp-scroll"
|
||||||
|
:class-option="{
|
||||||
|
singleHeight: 43,
|
||||||
|
}"
|
||||||
|
style="height: 168px"
|
||||||
|
>
|
||||||
|
<ul class="item">
|
||||||
|
<li v-for="item in scrollList" :key="item.id">
|
||||||
|
<el-row>
|
||||||
|
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
||||||
|
<el-col style="text-align: center" :span="5">{{ item.name }}</el-col>
|
||||||
|
<el-col style="text-align: center" :span="5"> 部门一 </el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">2021-12-12 </el-col>
|
||||||
|
<el-col style="text-align: center" :span="4">
|
||||||
|
<section class="box">
|
||||||
|
<span v-if="item.status == 1" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
||||||
|
<span v-else-if="item.status == 3" style="color: #f64f58; font-size: 25px; margin-right: 3px"
|
||||||
|
>·</span
|
||||||
|
>
|
||||||
|
<span v-else style="color: #fa8c16; font-size: 25px; margin-right: 3px">·</span>
|
||||||
|
<span v-if="item.status == 1">已完成</span>
|
||||||
|
<span v-else-if="item.status == 3">未完成</span>
|
||||||
|
<span v-else>进行中</span>
|
||||||
|
</section>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll>
|
||||||
|
</el-row>
|
||||||
</container2>
|
</container2>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -21,6 +82,7 @@ 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 progressBar from '@/views/bigScreen/components/progress/index.vue'
|
||||||
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||||
import colorList from '@/utils/colorPalette'
|
import colorList from '@/utils/colorPalette'
|
||||||
// import {Liquid} from '@antv/g2plot';
|
// import {Liquid} from '@antv/g2plot';
|
||||||
// import resize from '../../dashboard/mixins/resize'
|
// import resize from '../../dashboard/mixins/resize'
|
||||||
@ -34,19 +96,45 @@ export default {
|
|||||||
container2,
|
container2,
|
||||||
bigScreenTabs,
|
bigScreenTabs,
|
||||||
progressBar,
|
progressBar,
|
||||||
|
vueSeamlessScroll,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
index: 0,
|
index: 0,
|
||||||
data: [
|
chart: null,
|
||||||
{ value: 154, name: '类别一' },
|
chart2: null,
|
||||||
{ value: 775, name: '类别二' },
|
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||||
{ value: 679, name: '类别三' },
|
scrollList: [
|
||||||
{ value: 679, name: '类别四' },
|
{
|
||||||
{ value: 679, name: '类别五' },
|
id: 1,
|
||||||
{ value: 679, name: '类别六' },
|
name: '计划一',
|
||||||
{ value: 679, name: '类别七' },
|
level: '一级',
|
||||||
{ value: 679, name: '类别八' },
|
status: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: '计划二',
|
||||||
|
level: '二级',
|
||||||
|
status: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: '计划三',
|
||||||
|
level: '三级',
|
||||||
|
status: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: '计划四',
|
||||||
|
level: '二级',
|
||||||
|
status: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: '计划五',
|
||||||
|
level: '三级',
|
||||||
|
status: 3,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
colorList,
|
colorList,
|
||||||
}
|
}
|
||||||
@ -58,121 +146,201 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
beforeDestroy() {},
|
beforeDestroy() {},
|
||||||
|
watch: {
|
||||||
|
index(newVal, oldVal) {
|
||||||
|
if (newVal == 0) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initLine()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart() {
|
initChart() {
|
||||||
this.chart = echarts.init(this.$refs.left1, 'macarons')
|
this.chart = echarts.init(this.$refs.chart, 'macarons')
|
||||||
this.setOptions()
|
this.setOptions()
|
||||||
},
|
},
|
||||||
setOptions() {
|
setOptions() {
|
||||||
const calcAverageValue = (data, name) => {
|
|
||||||
const items = data.filter(d => d.name === name)
|
|
||||||
return items.length ? items.reduce((a, b) => a + b.value, 0) / items.length : '-'
|
|
||||||
}
|
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
tooltip: {
|
title: [
|
||||||
trigger: 'item',
|
{
|
||||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
text: '控制力',
|
||||||
},
|
left: '19%',
|
||||||
color: this.colorList,
|
bottom: 5,
|
||||||
legend: {
|
textStyle: {
|
||||||
data: ['类别一', '类别二', '类别三', '类别四', '类别五', '类别六', '类别七', '类别八'],
|
color: '#fff',
|
||||||
orient: 'vertical',
|
fontStyle: 'normal',
|
||||||
// left: '60%',
|
fontWeight: '600',
|
||||||
right: '2%',
|
fontFamily: 'sans-serif',
|
||||||
y: 'center',
|
fontSize: 18,
|
||||||
textStyle: {
|
},
|
||||||
//图例文字的样式
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
},
|
||||||
// formatter: value => {
|
{
|
||||||
// return value + calcAverageValue(this.data, value)
|
text: '抗风险能力',
|
||||||
// },
|
left: '65%',
|
||||||
|
bottom: 5,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontStyle: 'normal',
|
||||||
|
fontWeight: '600',
|
||||||
|
fontFamily: 'sans-serif',
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
},
|
},
|
||||||
|
legend: {
|
||||||
|
left: 'center',
|
||||||
|
data: ['初期', '当年目标', '末期'],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ['#5AD8A6', '#F6D97E', '#5B8FF9'],
|
||||||
|
radar: [
|
||||||
|
{
|
||||||
|
indicator: [
|
||||||
|
{ name: '登陆频次', max: 6500, axisLabel: { show: true }, color: '#fff' },
|
||||||
|
{ name: '指标二', max: 16000 },
|
||||||
|
{ name: '指标三', max: 30000 },
|
||||||
|
{ name: '指标四', max: 38000 },
|
||||||
|
{ name: '指标五', max: 52000 },
|
||||||
|
{ name: '指标六', max: 25000 },
|
||||||
|
],
|
||||||
|
center: ['25.5%', '50%'],
|
||||||
|
radius: 50,
|
||||||
|
// name: {
|
||||||
|
// // (圆外的标签)雷达图每个指示器名称的配置项。
|
||||||
|
// textStyle: {
|
||||||
|
// color: '#fff',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// 最大值
|
||||||
|
// axisLabel: {
|
||||||
|
// color: '#fff',
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
indicator: [
|
||||||
|
{ name: '登陆频次', max: 6500, axisLabel: { show: true } },
|
||||||
|
{ name: '指标二', max: 16000 },
|
||||||
|
{ name: '指标三', max: 30000 },
|
||||||
|
{ name: '指标四', max: 38000 },
|
||||||
|
{ name: '指标五', max: 52000 },
|
||||||
|
{ name: '指标六', max: 25000 },
|
||||||
|
],
|
||||||
|
radius: 50,
|
||||||
|
center: ['75%', '50%'],
|
||||||
|
},
|
||||||
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '概括',
|
type: 'radar',
|
||||||
type: 'pie',
|
data: [
|
||||||
radius: [0, '85%'],
|
{
|
||||||
center: ['35%', '50%'],
|
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
||||||
label: {
|
name: '初期',
|
||||||
formatter: '',
|
label: {
|
||||||
position: 'inner',
|
normal: {
|
||||||
fontSize: 14,
|
// show: true,
|
||||||
},
|
color: '#fff',
|
||||||
labelLine: {
|
},
|
||||||
show: false,
|
},
|
||||||
},
|
},
|
||||||
data: this.data,
|
{
|
||||||
|
value: [4500, 10000, 25000, 22000, 45000, 20000],
|
||||||
|
name: '当年目标',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: [5000, 14000, 28000, 26000, 42000, 21000],
|
||||||
|
name: '末期',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'radar',
|
||||||
|
radarIndex: 1,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
||||||
|
name: '初期',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: [4500, 10000, 25000, 22000, 45000, 20000],
|
||||||
|
name: '当年目标',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: [5000, 14000, 28000, 26000, 42000, 21000],
|
||||||
|
name: '末期',
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
initLine() {
|
initLine() {
|
||||||
this.chart = echarts.init(this.$refs.left2)
|
this.chart2 = echarts.init(this.$refs.chart2)
|
||||||
this.setOptions2()
|
this.setOptions2()
|
||||||
},
|
},
|
||||||
setOptions2() {
|
setOptions2() {
|
||||||
this.chart.setOption({
|
this.chart2.setOption({
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
formatter: '{a1}<br/>{b1}：{c1}',
|
|
||||||
},
|
|
||||||
legend: {
|
legend: {
|
||||||
data: ['收入', '实际', '目标'],
|
data: ['实际', '完成率'],
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff', //legend字体颜色
|
color: '#fff',
|
||||||
},
|
},
|
||||||
// selectedMode: false,
|
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '6%',
|
||||||
|
bottom: '3%',
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
left: 20,
|
|
||||||
right: 10,
|
|
||||||
top: 30,
|
|
||||||
bottom: 50,
|
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: [
|
||||||
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',
|
|
||||||
],
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgb(255, 255, 255)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dataZoom: {
|
|
||||||
type: 'slider',
|
|
||||||
start: 0,
|
|
||||||
end: 50,
|
|
||||||
},
|
|
||||||
color: ['#ccc', 'red'],
|
|
||||||
yAxis: [
|
|
||||||
{
|
{
|
||||||
name: '件',
|
type: 'category',
|
||||||
splitLine: {
|
data: [
|
||||||
show: true,
|
'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: {
|
lineStyle: {
|
||||||
// 使用深浅的间隔色
|
color: 'rgb(255, 255, 255)',
|
||||||
color: ['rgba(255, 255, 255,.5)'],
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '个',
|
||||||
|
min: 0,
|
||||||
|
// max: 250,
|
||||||
|
// interval: 50,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: '{value}',
|
formatter: '{value}',
|
||||||
},
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false, //不显示网格线
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false, //不显示网格区域
|
||||||
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgb(255, 255, 255)',
|
color: 'rgb(255, 255, 255)',
|
||||||
@ -183,7 +351,7 @@ export default {
|
|||||||
type: 'value',
|
type: 'value',
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 100,
|
max: 100,
|
||||||
interval: 20,
|
// interval: 5,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: '{value} %',
|
formatter: '{value} %',
|
||||||
},
|
},
|
||||||
@ -200,39 +368,38 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
grid: {
|
||||||
|
containLabel: true,
|
||||||
|
width: '99%',
|
||||||
|
left: 0,
|
||||||
|
top: 50,
|
||||||
|
bottom: 50,
|
||||||
|
},
|
||||||
|
dataZoom: {
|
||||||
|
type: 'slider',
|
||||||
|
start: 0,
|
||||||
|
end: 50,
|
||||||
|
},
|
||||||
series: [
|
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: '实际',
|
name: '实际',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 15,
|
barWidth: 20,
|
||||||
position: [0, 0],
|
data: [75.6, 82.2, 26.4, 28.7, 70.7, 50.7, 60.7, 70.7, 80.7, 48.7, 18.8],
|
||||||
itemStyle: {
|
|
||||||
color: 'rgba(90, 216, 166, 0.85)',
|
|
||||||
},
|
|
||||||
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '目标',
|
|
||||||
type: 'scatter',
|
|
||||||
symbol: 'rect',
|
|
||||||
symbolSize: [30, 4],
|
|
||||||
symbolOffset: [3, 0],
|
|
||||||
position: [0, 0],
|
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#F6D97E',
|
color: '#F6D97E',
|
||||||
},
|
},
|
||||||
data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
|
},
|
||||||
|
{
|
||||||
|
name: '完成率',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
smooth: false,
|
||||||
|
data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F64F58',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
@ -242,24 +409,60 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.wrap {
|
.warp-scroll {
|
||||||
display: flex;
|
height: 126px;
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.box {
|
margin: 0 auto;
|
||||||
padding: 0 0 5px 15px;
|
overflow: hidden;
|
||||||
display: flex;
|
ul {
|
||||||
align-items: center;
|
list-style: none;
|
||||||
.num {
|
padding: 0;
|
||||||
font-size: 24px;
|
margin: 0 auto;
|
||||||
font-weight: 600;
|
li,
|
||||||
margin: 0 10px;
|
a {
|
||||||
|
display: block;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
display: block;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
background: rgba(42, 67, 125, 0.25);
|
||||||
|
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||||||
|
margin-bottom: 1px;
|
||||||
|
img {
|
||||||
|
vertical-align: sub;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.wrap {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #91d5fe;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.content1 {
|
.el- .content1 {
|
||||||
// height: 200px;
|
// height: 200px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
@ -271,15 +474,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.num {
|
|
||||||
font-size: 30px;
|
|
||||||
font-family: Roboto-BlackItalic, Roboto;
|
|
||||||
font-weight: normal;
|
|
||||||
color: #91d5fe;
|
|
||||||
vertical-align: sub;
|
|
||||||
// margin-right: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content2 {
|
.content2 {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|||||||
@ -2,7 +2,104 @@
|
|||||||
<div>
|
<div>
|
||||||
<container3 title="军用产业">
|
<container3 title="军用产业">
|
||||||
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['总厂情况', '合同信息', '本月情况']"></bigScreenTabs>
|
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['总厂情况', '合同信息', '本月情况']"></bigScreenTabs>
|
||||||
<!-- <div style="height: 100%; width: 100%" ref="chart"></div> -->
|
<div style="height: 100%" v-if="index == 0">
|
||||||
|
<div style="display: flex; position: relative">
|
||||||
|
<div style="display: flex; justify-content: center; align-items: center">
|
||||||
|
<span style="font-size: 25px">·</span><span>收入</span>
|
||||||
|
<i style="font-size: 24px; font-weight: bold; color: #91d5fe">300/<i style="font-size: 18px">800</i></i> 万
|
||||||
|
</div>
|
||||||
|
<div style="margin-left: 30px">
|
||||||
|
<span style="font-size: 25px">·</span>利润
|
||||||
|
<i style="font-size: 24px; font-weight: bold; color: #91d5fe">800/<i style="font-size: 18px">300</i></i> 万
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; height: calc(100% - 33px)">
|
||||||
|
<div style="height: 100%; width: 68%" ref="chart"></div>
|
||||||
|
<div style="height: 100%; width: 32%" ref="chart2"></div>
|
||||||
|
</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/left2/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/left2/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="19" style="height: 100%">
|
||||||
|
<div style="height: 100%; padding-right: 30px">
|
||||||
|
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||||
|
<el-col style="text-align: center" :span="3">序号</el-col>
|
||||||
|
<el-col style="text-align: center" :span="5">合同名称</el-col>
|
||||||
|
<el-col style="text-align: center" :span="3">数量</el-col>
|
||||||
|
<el-col style="text-align: center" :span="5">金额</el-col>
|
||||||
|
<el-col style="text-align: center" :span="3">生产情况</el-col>
|
||||||
|
<el-col style="text-align: center" :span="3">结算情况</el-col>
|
||||||
|
</el-row>
|
||||||
|
<vue-seamless-scroll
|
||||||
|
:data="listData"
|
||||||
|
class="warp-scroll"
|
||||||
|
:class-option="{
|
||||||
|
singleHeight: 43,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<ul class="item">
|
||||||
|
<li v-for="item in scrollList" :key="item.id">
|
||||||
|
<el-row>
|
||||||
|
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
||||||
|
<el-col style="text-align: center" :span="5">{{ item.name }}</el-col>
|
||||||
|
<el-col style="text-align: center" :span="5">{{ item.number }}</el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">
|
||||||
|
<section class="box">
|
||||||
|
<span v-if="item.status == 1" style="color: #6fd1b4; font-size: 25px; margin-right: 3px"
|
||||||
|
>·</span
|
||||||
|
>
|
||||||
|
<span v-else-if="item.status == 3" style="color: #f64f58; font-size: 25px; margin-right: 3px"
|
||||||
|
>·</span
|
||||||
|
>
|
||||||
|
<span v-else style="font-size: 25px; margin-right: 3px">·</span>
|
||||||
|
<span v-if="item.status == 1">进行中</span>
|
||||||
|
<!-- <span v-else-if="item.status == 3">未完成</span> -->
|
||||||
|
<span v-else>未开始</span>
|
||||||
|
</section>
|
||||||
|
</el-col>
|
||||||
|
<el-col style="text-align: center" :span="4">
|
||||||
|
<section class="box">
|
||||||
|
<span v-if="item.status == 1" style="color: #6fd1b4; font-size: 25px; margin-right: 3px"
|
||||||
|
>·</span
|
||||||
|
>
|
||||||
|
<span v-else-if="item.status == 3" style="color: #f64f58; font-size: 25px; margin-right: 3px"
|
||||||
|
>·</span
|
||||||
|
>
|
||||||
|
<span v-else style="font-size: 25px; margin-right: 3px">·</span>
|
||||||
|
<span v-if="item.status == 1">已结算</span>
|
||||||
|
<span v-else-if="item.status == 3">未结算</span>
|
||||||
|
<span v-else>未开始</span>
|
||||||
|
</section>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
<div style="height: 100%" v-else>
|
||||||
|
<div style="height: 100%; width: 100%" ref="chart3"></div>
|
||||||
|
</div>
|
||||||
</container3>
|
</container3>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -13,6 +110,8 @@ import bigScreenHead from '../components/bigScreenHead/index.vue'
|
|||||||
import rocketTit from '../components/rocketTit/index.vue'
|
import rocketTit from '../components/rocketTit/index.vue'
|
||||||
import container3 from './components/container3/index.vue'
|
import container3 from './components/container3/index.vue'
|
||||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||||
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||||
|
import colorList from '@/utils/colorPalette'
|
||||||
|
|
||||||
import echarts from 'echarts'
|
import echarts from 'echarts'
|
||||||
require('echarts/theme/macarons') // echarts theme
|
require('echarts/theme/macarons') // echarts theme
|
||||||
@ -26,44 +125,134 @@ export default {
|
|||||||
rocketTit,
|
rocketTit,
|
||||||
container3,
|
container3,
|
||||||
bigScreenTabs,
|
bigScreenTabs,
|
||||||
|
vueSeamlessScroll,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
index: 0,
|
index: 0,
|
||||||
chart: null,
|
chart: null,
|
||||||
option: {
|
chart2: null,
|
||||||
|
chart3: null,
|
||||||
|
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||||
|
scrollList: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'Willie Reeves',
|
||||||
|
number: 68,
|
||||||
|
status: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'Mason Herrera',
|
||||||
|
number: 92,
|
||||||
|
money: 1227,
|
||||||
|
money: 4570,
|
||||||
|
status: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'Jeffery Stanley',
|
||||||
|
number: 75,
|
||||||
|
money: 2398,
|
||||||
|
status: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: 'George McDonald',
|
||||||
|
number: 65,
|
||||||
|
money: 2932,
|
||||||
|
status: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: 'Ida Klein',
|
||||||
|
number: 45,
|
||||||
|
money: 7327,
|
||||||
|
status: 3,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
index(newVal, oldVal) {
|
||||||
|
if (newVal == 0) {
|
||||||
|
if (this.chart3) {
|
||||||
|
this.chart3.dispose()
|
||||||
|
this.chart3 = null
|
||||||
|
}
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart()
|
||||||
|
this.initChart2()
|
||||||
|
})
|
||||||
|
} else if (newVal == 2) {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
}
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart3()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// this.chart1.dispose()
|
||||||
|
// this.chart2.dispose()
|
||||||
|
// this.chart3.dispose()
|
||||||
|
// this.chart1 = null
|
||||||
|
// this.chart2 = null
|
||||||
|
// this.chart3 = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart()
|
||||||
|
this.initChart2()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
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: {
|
legend: {
|
||||||
data: ['利润', '利润预测', '利润目标完成率'],
|
data: ['综合', '绩效'],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', //legend字体颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 20,
|
||||||
|
right: 20,
|
||||||
|
top: 30,
|
||||||
|
bottom: 50,
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
dataZoom: {
|
||||||
|
type: 'slider',
|
||||||
|
// start: 0,
|
||||||
|
// end: 50,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '6%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: [
|
data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
|
||||||
'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: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgb(255, 255, 255)',
|
color: 'rgb(255, 255, 255)',
|
||||||
@ -73,20 +262,18 @@ export default {
|
|||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
name: '个',
|
||||||
name: '万元',
|
splitLine: {
|
||||||
min: 0,
|
show: true,
|
||||||
max: 250,
|
// 改变轴线颜色
|
||||||
interval: 50,
|
lineStyle: {
|
||||||
|
// 使用深浅的间隔色
|
||||||
|
color: ['rgba(255, 255, 255,.5)'],
|
||||||
|
},
|
||||||
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: '{value}',
|
formatter: '{value}',
|
||||||
},
|
},
|
||||||
splitLine: {
|
|
||||||
show: false, //不显示网格线
|
|
||||||
},
|
|
||||||
splitArea: {
|
|
||||||
show: false, //不显示网格区域
|
|
||||||
},
|
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgb(255, 255, 255)',
|
color: 'rgb(255, 255, 255)',
|
||||||
@ -96,8 +283,8 @@ export default {
|
|||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 25,
|
max: 100,
|
||||||
interval: 5,
|
interval: 20,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: '{value} %',
|
formatter: '{value} %',
|
||||||
},
|
},
|
||||||
@ -114,137 +301,298 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
grid: {
|
|
||||||
containLabel: true,
|
|
||||||
width: '99%',
|
|
||||||
left: 0,
|
|
||||||
top: 50,
|
|
||||||
bottom: 50,
|
|
||||||
},
|
|
||||||
dataZoom: {},
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '利润',
|
name: '绩效',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 20,
|
stack: 'Ad',
|
||||||
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],
|
emphasis: {
|
||||||
itemStyle: {
|
focus: 'series',
|
||||||
color: 'rgb(118,196,166)',
|
|
||||||
},
|
},
|
||||||
barGap: '0',
|
itemStyle: {
|
||||||
|
color: '#8BB1ED',
|
||||||
|
},
|
||||||
|
barWidth: 30,
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '利润预测',
|
name: '综合',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 20,
|
stack: 'Ad',
|
||||||
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],
|
emphasis: {
|
||||||
itemStyle: {
|
focus: 'series',
|
||||||
color: {
|
|
||||||
type: 'linear', // 线性渐变
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: '#B5D3FE', // 0%处的颜色为红色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: '#7EA7FC', // 100%处的颜色为蓝
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#53C19D',
|
||||||
|
},
|
||||||
|
barWidth: 30,
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '利润目标完成率',
|
name: '',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
yAxisIndex: 1,
|
|
||||||
smooth: false,
|
smooth: false,
|
||||||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
data: [500, 550, 700, 520, 650, 520, 550],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#55C5A2',
|
color: '#53C19D',
|
||||||
},
|
},
|
||||||
symbol: 'none',
|
symbol: 'none',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
type: 'line',
|
||||||
|
smooth: false,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#8BB1ED',
|
||||||
|
},
|
||||||
|
data: [600, 500, 700, 620, 750, 800, 600],
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
// yAxis: {
|
})
|
||||||
// type: 'value',
|
},
|
||||||
// splitLine: {
|
initChart2() {
|
||||||
// show: false//不显示网格线
|
this.chart2 = echarts.init(this.$refs.chart2)
|
||||||
// },
|
this.setOptions2()
|
||||||
// splitArea: {
|
},
|
||||||
// show: false//不显示网格区域
|
setOptions2() {
|
||||||
// },
|
this.chart2.setOption({
|
||||||
// axisLine: {
|
tooltip: {
|
||||||
// lineStyle: {
|
trigger: 'item',
|
||||||
// color: 'rgb(255, 255, 255)'
|
},
|
||||||
// },
|
title: {
|
||||||
// }
|
text: '型号情况',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontStyle: 'normal',
|
||||||
|
fontWeight: '600',
|
||||||
|
fontFamily: 'sans-serif',
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// legend: {
|
||||||
|
// right: '5%',
|
||||||
|
// orient: 'vertical',
|
||||||
|
// textStyle: {
|
||||||
|
// color: '#fff', //legend字体颜色
|
||||||
|
// },
|
||||||
// },
|
// },
|
||||||
// series: [
|
series: [
|
||||||
// {
|
{
|
||||||
// name: '利润',
|
name: '名称',
|
||||||
// type: 'bar',
|
type: 'pie',
|
||||||
// data: [
|
center: ['40%', '50%'],
|
||||||
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
radius: [0, '45%'],
|
||||||
// ]
|
avoidLabelOverlap: false,
|
||||||
// },
|
label: {
|
||||||
// {
|
show: false,
|
||||||
// name: '利润预测',
|
position: 'center',
|
||||||
// type: 'bar',
|
},
|
||||||
// data: [
|
emphasis: {
|
||||||
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
label: {
|
||||||
// ]
|
show: false,
|
||||||
// },
|
fontSize: '40',
|
||||||
// {
|
fontWeight: 'bold',
|
||||||
// name: '利润目标完成率',
|
},
|
||||||
// type: 'line',
|
},
|
||||||
// yAxisIndex: 1,
|
labelLine: {
|
||||||
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
show: false,
|
||||||
// }
|
},
|
||||||
|
data: [
|
||||||
// ]
|
{ value: 48, name: '型号11' },
|
||||||
},
|
{ value: 48, name: '型号22' },
|
||||||
}
|
{ value: 48, name: '型号33' },
|
||||||
},
|
{ value: 48, name: '型号44' },
|
||||||
mounted() {
|
{ value: 48, name: '型号55' },
|
||||||
this.$nextTick(() => {
|
],
|
||||||
this.initChart()
|
itemStyle: {
|
||||||
})
|
opacity: 0.7,
|
||||||
},
|
color: '#55C5A2',
|
||||||
beforeDestroy() {
|
borderWidth: 3,
|
||||||
if (!this.chart) {
|
borderColor: '#fff',
|
||||||
return
|
},
|
||||||
}
|
// color: blueColorList,
|
||||||
this.chart.dispose()
|
},
|
||||||
this.chart = null
|
{
|
||||||
},
|
name: '名称',
|
||||||
methods: {
|
type: 'pie',
|
||||||
initChart() {
|
radius: ['45%', '80%'],
|
||||||
this.chart = echarts.init(this.$refs.chart)
|
center: ['40%', '50%'],
|
||||||
this.chart.setOption(this.option)
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center',
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
fontSize: '40',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 50, name: '型号1' },
|
||||||
|
{ value: 50, name: '型号2' },
|
||||||
|
{ value: 50, name: '型号3' },
|
||||||
|
{ value: 50, name: '型号4' },
|
||||||
|
{ value: 50, name: '型号5' },
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 0.7,
|
||||||
|
color: '#7EA7FC',
|
||||||
|
borderWidth: 3,
|
||||||
|
borderColor: '#fff',
|
||||||
|
},
|
||||||
|
// color: greenColorList,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initChart3() {
|
||||||
|
this.chart3 = echarts.init(this.$refs.chart3)
|
||||||
|
this.setOptions3()
|
||||||
|
},
|
||||||
|
setOptions3() {
|
||||||
|
this.chart3.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(69, 209, 204, .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(69, 209, 204, 1)',
|
||||||
|
},
|
||||||
|
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.num {
|
._box {
|
||||||
font-size: 30px;
|
width: 162px;
|
||||||
font-family: Roboto-Black, Roboto;
|
height: 275px;
|
||||||
font-weight: 900;
|
background-image: url(./img/left2/1.png);
|
||||||
color: #f6d97e;
|
background-size: contain;
|
||||||
line-height: 35px;
|
background-repeat: no-repeat;
|
||||||
// margin-right: 3px;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
._item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.num2 {
|
.warp-scroll {
|
||||||
font-size: 30px;
|
height: 215px;
|
||||||
font-family: Roboto-Black, Roboto;
|
width: 100%;
|
||||||
font-weight: 900;
|
margin: 0 auto;
|
||||||
color: rgba(16, 152, 255, 1);
|
overflow: hidden;
|
||||||
line-height: 35px;
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
li,
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
display: block;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
background: #2a437d;
|
||||||
|
opacity: 0.6;
|
||||||
|
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||||||
|
margin-bottom: 1px;
|
||||||
|
img {
|
||||||
|
vertical-align: sub;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -2,11 +2,114 @@
|
|||||||
<div>
|
<div>
|
||||||
<container2 title="综合计划/绩效计划">
|
<container2 title="综合计划/绩效计划">
|
||||||
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['完成率', '明细']"></bigScreenTabs>
|
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['完成率', '明细']"></bigScreenTabs>
|
||||||
<!-- <div style="height: 100%; width: 100%" ref="left1"></div> -->
|
<div style="display: flex; height: 100%" v-if="index == 0">
|
||||||
|
<div style="height: 100%; width: 75%" ref="chart"></div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
height: 100%;
|
||||||
|
width: 25%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="box"><span style="font-size: 25px">·</span><span style="font-size: 18px">总体完成率</span></div>
|
||||||
|
<progressBar :percentage="80" style="margin: 10px 0 20px" />
|
||||||
|
<i class="num">80%</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; height: 100%" v-else>
|
||||||
|
<div style="height: 100%; width: 75%" ref="chart2"></div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
height: 100%;
|
||||||
|
width: 25%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="box"><span style="font-size: 25px">·</span><span style="font-size: 18px">总体完成率</span></div>
|
||||||
|
<progressBar :percentage="80" style="margin: 10px 0 20px" />
|
||||||
|
<i class="num">80%</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</container2>
|
</container2>
|
||||||
<container2 title="信息公示" style="margin-top: 10px">
|
<container2 title="信息公示" style="margin-top: 10px">
|
||||||
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['民用产业项目信息', '信息公示']"></bigScreenTabs>
|
<bigScreenTabs slot="datePicker" v-model="index2" :titleArr="['民用产业项目信息', '信息公示']"></bigScreenTabs>
|
||||||
<!-- <div style="height: 100%; width: 100%" ref="left2"></div> -->
|
<el-row style="height: 100%; width: 100%; padding: 0 10px 0 20px" v-show="index2 == 0">
|
||||||
|
<el-col :span="24" style="margin-bottom: 1px">
|
||||||
|
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||||
|
<el-col style="text-align: center" :span="3">序号</el-col>
|
||||||
|
<el-col style="text-align: center" :span="5">项目名称</el-col>
|
||||||
|
<el-col style="text-align: center" :span="5">负责人</el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">团队</el-col>
|
||||||
|
<el-col style="text-align: center" :span="4">完成情况</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
<vue-seamless-scroll
|
||||||
|
:data="listData"
|
||||||
|
class="warp-scroll"
|
||||||
|
:class-option="{
|
||||||
|
singleHeight: 43,
|
||||||
|
}"
|
||||||
|
style="height: 168px"
|
||||||
|
>
|
||||||
|
<ul class="item">
|
||||||
|
<li v-for="item in scrollList" :key="item.id">
|
||||||
|
<el-row>
|
||||||
|
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
||||||
|
<el-col style="text-align: center" :span="5">XX开发项目</el-col>
|
||||||
|
<el-col style="text-align: center" :span="5"> 闵茗 </el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">部门一 </el-col>
|
||||||
|
<el-col style="text-align: center" :span="4">
|
||||||
|
<section class="box">
|
||||||
|
<span v-if="item.status == 1" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
||||||
|
<span v-else-if="item.status == 3" style="color: #f64f58; font-size: 25px; margin-right: 3px"
|
||||||
|
>·</span
|
||||||
|
>
|
||||||
|
<span v-else style="color: #fa8c16; font-size: 25px; margin-right: 3px">·</span>
|
||||||
|
<span v-if="item.status == 1">已完成</span>
|
||||||
|
<span v-else-if="item.status == 3">未完成</span>
|
||||||
|
<span v-else>进行中</span>
|
||||||
|
</section>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll>
|
||||||
|
</el-row>
|
||||||
|
<el-row style="height: 100%; width: 100%; padding: 0 10px 0 20px" v-show="index2 == 1">
|
||||||
|
<el-col :span="24" style="margin-bottom: 1px">
|
||||||
|
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||||
|
<el-col style="text-align: center" :span="3">序号</el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">部门</el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">公示内容</el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">时间</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
<vue-seamless-scroll
|
||||||
|
:data="listData"
|
||||||
|
class="warp-scroll"
|
||||||
|
:class-option="{
|
||||||
|
singleHeight: 43,
|
||||||
|
}"
|
||||||
|
style="height: 168px"
|
||||||
|
>
|
||||||
|
<ul class="item">
|
||||||
|
<li v-for="item in scrollList" :key="item.id">
|
||||||
|
<el-row>
|
||||||
|
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">部门一 </el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">易燃作业 </el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">2021-12-12 </el-col>
|
||||||
|
</el-row>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll>
|
||||||
|
</el-row>
|
||||||
</container2>
|
</container2>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -16,6 +119,7 @@ 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 progressBar from '@/views/bigScreen/components/progress/index.vue'
|
||||||
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||||
import colorList from '@/utils/colorPalette'
|
import colorList from '@/utils/colorPalette'
|
||||||
// import {Liquid} from '@antv/g2plot';
|
// import {Liquid} from '@antv/g2plot';
|
||||||
// import resize from '../../dashboard/mixins/resize'
|
// import resize from '../../dashboard/mixins/resize'
|
||||||
@ -23,147 +127,127 @@ import echarts from 'echarts'
|
|||||||
require('echarts/theme/macarons') // echarts theme
|
require('echarts/theme/macarons') // echarts theme
|
||||||
export default {
|
export default {
|
||||||
// mixins: [resize],
|
// mixins: [resize],
|
||||||
name: 'left1',
|
name: 'right1',
|
||||||
components: {
|
components: {
|
||||||
rocketTit,
|
rocketTit,
|
||||||
container2,
|
container2,
|
||||||
bigScreenTabs,
|
bigScreenTabs,
|
||||||
progressBar,
|
progressBar,
|
||||||
|
vueSeamlessScroll,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
index: 0,
|
index: 0,
|
||||||
|
index2: 0,
|
||||||
colorList,
|
colorList,
|
||||||
|
chart: null,
|
||||||
|
chart2: null,
|
||||||
|
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||||
|
scrollList: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: '计划一',
|
||||||
|
level: '一级',
|
||||||
|
status: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: '计划二',
|
||||||
|
level: '二级',
|
||||||
|
status: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: '计划三',
|
||||||
|
level: '三级',
|
||||||
|
status: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: '计划四',
|
||||||
|
level: '二级',
|
||||||
|
status: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: '计划五',
|
||||||
|
level: '三级',
|
||||||
|
status: 3,
|
||||||
|
},
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart()
|
this.initChart()
|
||||||
this.initLine()
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
beforeDestroy() {},
|
beforeDestroy() {},
|
||||||
|
watch: {
|
||||||
|
index(newVal, oldVal) {
|
||||||
|
if (newVal == 0) {
|
||||||
|
this.chart2.dispose()
|
||||||
|
this.chart2 = null
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initLine()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart() {
|
initChart() {
|
||||||
this.chart = echarts.init(this.$refs.left1, 'macarons')
|
this.chart = echarts.init(this.$refs.chart)
|
||||||
this.setOptions()
|
this.setOptions()
|
||||||
},
|
},
|
||||||
setOptions() {
|
setOptions() {
|
||||||
this.chart.setOption({
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
|
||||||
},
|
|
||||||
color: this.colorList,
|
|
||||||
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)
|
|
||||||
this.setOptions2()
|
|
||||||
},
|
|
||||||
setOptions2() {
|
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
formatter: '{a1}<br/>{b1}：{c1}',
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['预测', '实际', '目标'],
|
data: ['综合', '绩效'],
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff', //legend字体颜色
|
color: '#fff', //legend字体颜色
|
||||||
},
|
},
|
||||||
// selectedMode: false,
|
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
containLabel: true,
|
|
||||||
left: 20,
|
left: 20,
|
||||||
right: 10,
|
right: 20,
|
||||||
top: 30,
|
top: 30,
|
||||||
bottom: 50,
|
bottom: 50,
|
||||||
},
|
containLabel: true,
|
||||||
xAxis: {
|
|
||||||
data: [
|
|
||||||
'型号一',
|
|
||||||
'型号二',
|
|
||||||
'型号三',
|
|
||||||
'型号四',
|
|
||||||
'型号五',
|
|
||||||
'型号六',
|
|
||||||
'型号七',
|
|
||||||
'型号八',
|
|
||||||
'型号九',
|
|
||||||
'型号十',
|
|
||||||
'型号十一',
|
|
||||||
'型号十二',
|
|
||||||
'型号十三',
|
|
||||||
'型号十四',
|
|
||||||
'型号十五',
|
|
||||||
'型号十六',
|
|
||||||
'型号十七',
|
|
||||||
'型号十八',
|
|
||||||
'型号十九',
|
|
||||||
'型号二十',
|
|
||||||
],
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgb(255, 255, 255)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
dataZoom: {
|
dataZoom: {
|
||||||
type: 'slider',
|
type: 'slider',
|
||||||
start: 0,
|
// start: 0,
|
||||||
end: 50,
|
// end: 50,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
color: ['#ccc', 'red'],
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
name: '件',
|
name: '个',
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: true,
|
||||||
// 改变轴线颜色
|
// 改变轴线颜色
|
||||||
@ -204,38 +288,198 @@ export default {
|
|||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '预测',
|
name: '绩效',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
// z: '-1',
|
stack: 'Ad',
|
||||||
barGap: '-75%',
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F64F58',
|
||||||
|
},
|
||||||
barWidth: 30,
|
barWidth: 30,
|
||||||
itemStyle: {
|
data: [150, 232, 201, 154, 190, 330, 410],
|
||||||
color: 'rgba(85, 197, 162, .3)',
|
|
||||||
},
|
|
||||||
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95, 60, 70, 80, 70, 60, 50, 40, 30],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '实际',
|
name: '综合',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 15,
|
stack: 'Ad',
|
||||||
position: [0, 0],
|
emphasis: {
|
||||||
itemStyle: {
|
focus: 'series',
|
||||||
color: 'rgba(90, 216, 166, 0.85)',
|
|
||||||
},
|
},
|
||||||
data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95, 50, 60, 70, 80, 70, 40, 30, 30],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '目标',
|
|
||||||
type: 'scatter',
|
|
||||||
symbol: 'rect',
|
|
||||||
symbolSize: [30, 4],
|
|
||||||
symbolOffset: [3, 0],
|
|
||||||
position: [0, 0],
|
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#F6D97E',
|
color: '#F6D97E',
|
||||||
},
|
},
|
||||||
data: [10, 20, 36, 10, 10, 20, 10, 20, 36, 10, 10, 20, 90, 80, 90, 80, 90, 90, 90, 90],
|
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: '#F6D97E',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
type: 'line',
|
||||||
|
smooth: false,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F64F58',
|
||||||
|
},
|
||||||
|
data: [600, 500, 700, 620, 750, 800, 600],
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initLine() {
|
||||||
|
this.chart2 = echarts.init(this.$refs.chart2)
|
||||||
|
this.setOptions2()
|
||||||
|
},
|
||||||
|
setOptions2() {
|
||||||
|
this.chart2.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: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
|
||||||
|
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: '#F64F58',
|
||||||
|
},
|
||||||
|
barWidth: 30,
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '综合',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F6D97E',
|
||||||
|
},
|
||||||
|
barWidth: 30,
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '完成率',
|
||||||
|
type: 'scatter',
|
||||||
|
symbol: 'rect',
|
||||||
|
symbolSize: [30, 4],
|
||||||
|
symbolOffset: [0, 0],
|
||||||
|
position: [0, 0],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#7EA7FC',
|
||||||
|
},
|
||||||
|
data: [600, 650, 700, 750, 800, 750, 700],
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// name: '',
|
||||||
|
// type: 'line',
|
||||||
|
// smooth: false,
|
||||||
|
// data: [500, 550, 700, 520, 650, 520, 550],
|
||||||
|
// itemStyle: {
|
||||||
|
// color: '#F6D97E',
|
||||||
|
// },
|
||||||
|
// symbol: 'none',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '',
|
||||||
|
// type: 'line',
|
||||||
|
// smooth: false,
|
||||||
|
// itemStyle: {
|
||||||
|
// color: '#F64F58',
|
||||||
|
// },
|
||||||
|
// data: [600, 500, 700, 620, 750, 800, 600],
|
||||||
|
// symbol: 'none',
|
||||||
|
// },
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@ -244,22 +488,50 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.wrap {
|
.warp-scroll {
|
||||||
display: flex;
|
height: 126px;
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.box {
|
margin: 0 auto;
|
||||||
padding: 0 0 5px 15px;
|
overflow: hidden;
|
||||||
display: flex;
|
ul {
|
||||||
align-items: center;
|
list-style: none;
|
||||||
.num {
|
padding: 0;
|
||||||
font-size: 24px;
|
margin: 0 auto;
|
||||||
font-weight: 600;
|
li,
|
||||||
margin: 0 10px;
|
a {
|
||||||
|
display: block;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
display: block;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
background: rgba(42, 67, 125, 0.25);
|
||||||
|
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||||||
|
margin-bottom: 1px;
|
||||||
|
img {
|
||||||
|
vertical-align: sub;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
// .box {
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// }
|
||||||
|
.num {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #91d5fe;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
.content1 {
|
.content1 {
|
||||||
// height: 200px;
|
// height: 200px;
|
||||||
@ -273,15 +545,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.num {
|
|
||||||
font-size: 30px;
|
|
||||||
font-family: Roboto-BlackItalic, Roboto;
|
|
||||||
font-weight: normal;
|
|
||||||
color: #91d5fe;
|
|
||||||
vertical-align: sub;
|
|
||||||
// margin-right: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content2 {
|
.content2 {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|||||||
@ -1,14 +1,59 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<container3 title="装药量概况">
|
<container3 title="民用产业">
|
||||||
<!-- <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
|
||||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> -->
|
|
||||||
<bigScreenTabs
|
<bigScreenTabs
|
||||||
slot="datePicker"
|
slot="datePicker"
|
||||||
v-model="index"
|
v-model="index"
|
||||||
:titleArr="['总厂情况', '合同及产品生产信息', '本月情况']"
|
:titleArr="['总厂情况', '合同及产品生产信息', '本月情况']"
|
||||||
></bigScreenTabs>
|
></bigScreenTabs>
|
||||||
<!-- <div style="height: 100%; width: 100%" ref="chart"></div> -->
|
<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>
|
</container3>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -19,6 +64,7 @@ import bigScreenHead from '../components/bigScreenHead/index.vue'
|
|||||||
import rocketTit from '../components/rocketTit/index.vue'
|
import rocketTit from '../components/rocketTit/index.vue'
|
||||||
import container3 from './components/container3/index.vue'
|
import container3 from './components/container3/index.vue'
|
||||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||||
|
import colorList from '@/utils/colorPalette'
|
||||||
|
|
||||||
import echarts from 'echarts'
|
import echarts from 'echarts'
|
||||||
require('echarts/theme/macarons') // echarts theme
|
require('echarts/theme/macarons') // echarts theme
|
||||||
@ -37,9 +83,185 @@ export default {
|
|||||||
return {
|
return {
|
||||||
index: 0,
|
index: 0,
|
||||||
chart: null,
|
chart: null,
|
||||||
option: {
|
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: {
|
legend: {
|
||||||
data: ['利润', '利润预测', '利润目标完成率'],
|
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: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
},
|
},
|
||||||
@ -80,10 +302,10 @@ export default {
|
|||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '万元',
|
name: '',
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 250,
|
// max: 250,
|
||||||
interval: 50,
|
// interval: 50,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: '{value}',
|
formatter: '{value}',
|
||||||
},
|
},
|
||||||
@ -102,8 +324,8 @@ export default {
|
|||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 25,
|
max: 100,
|
||||||
interval: 5,
|
// interval: 5,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: '{value} %',
|
formatter: '{value} %',
|
||||||
},
|
},
|
||||||
@ -127,131 +349,307 @@ export default {
|
|||||||
top: 50,
|
top: 50,
|
||||||
bottom: 50,
|
bottom: 50,
|
||||||
},
|
},
|
||||||
dataZoom: {},
|
dataZoom: {
|
||||||
|
type: 'slider',
|
||||||
|
start: 0,
|
||||||
|
end: 30,
|
||||||
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '利润',
|
name: '稀土',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 20,
|
// 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],
|
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: {
|
itemStyle: {
|
||||||
color: 'rgb(118,196,166)',
|
color: '#E3F5C2',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '利润预测',
|
name: '隔热',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 20,
|
// 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],
|
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: {
|
itemStyle: {
|
||||||
color: {
|
color: '#45D1CC',
|
||||||
type: 'linear', // 线性渐变
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: '#B5D3FE', // 0%处的颜色为红色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: '#7EA7FC', // 100%处的颜色为蓝
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '利润目标完成率',
|
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',
|
type: 'line',
|
||||||
yAxisIndex: 1,
|
yAxisIndex: 1,
|
||||||
smooth: false,
|
smooth: false,
|
||||||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
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: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: '#F6D97E',
|
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',
|
symbol: 'none',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
// yAxis: {
|
})
|
||||||
// type: 'value',
|
},
|
||||||
// splitLine: {
|
initChart3() {
|
||||||
// show: false//不显示网格线
|
this.chart3 = echarts.init(this.$refs.chart3)
|
||||||
// },
|
this.setOptions3()
|
||||||
// splitArea: {
|
},
|
||||||
// show: false//不显示网格区域
|
setOptions3() {
|
||||||
// },
|
this.chart3.setOption({
|
||||||
// axisLine: {
|
tooltip: {
|
||||||
// lineStyle: {
|
trigger: 'item',
|
||||||
// color: 'rgb(255, 255, 255)'
|
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||||
// },
|
position: 'inner',
|
||||||
// }
|
},
|
||||||
// },
|
series: [
|
||||||
// series: [
|
{
|
||||||
// {
|
name: '型号',
|
||||||
// name: '利润',
|
type: 'pie',
|
||||||
// type: 'bar',
|
center: ['45%', '50%'],
|
||||||
// data: [
|
radius: ['60%', '80%'],
|
||||||
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
avoidLabelOverlap: false,
|
||||||
// ]
|
hoverAnimation: false, // hover 效果
|
||||||
// },
|
label: {
|
||||||
// {
|
show: false,
|
||||||
// name: '利润预测',
|
position: 'center',
|
||||||
// type: 'bar',
|
},
|
||||||
// data: [
|
emphasis: {
|
||||||
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
label: {
|
||||||
// ]
|
show: false,
|
||||||
// },
|
fontSize: '40',
|
||||||
// {
|
fontWeight: 'bold',
|
||||||
// name: '利润目标完成率',
|
},
|
||||||
// type: 'line',
|
},
|
||||||
// yAxisIndex: 1,
|
labelLine: {
|
||||||
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
show: false,
|
||||||
// }
|
},
|
||||||
|
data: [
|
||||||
// ]
|
{ value: 4, name: '隔热' },
|
||||||
},
|
{ value: 2, name: '其他' },
|
||||||
}
|
{ value: 6, name: '稀土' },
|
||||||
},
|
],
|
||||||
mounted() {
|
itemStyle: {
|
||||||
this.$nextTick(() => {
|
emphasis: {
|
||||||
this.initChart()
|
shadowBlur: 1,
|
||||||
})
|
shadowOffsetX: 0,
|
||||||
},
|
shadowColor: '#fff',
|
||||||
beforeDestroy() {
|
},
|
||||||
if (!this.chart) {
|
normal: {
|
||||||
return
|
label: {
|
||||||
}
|
show: true,
|
||||||
this.chart.dispose()
|
formatter: '{b}',
|
||||||
this.chart = null
|
position: 'inner',
|
||||||
},
|
},
|
||||||
methods: {
|
labelLine: {
|
||||||
initChart() {
|
show: true,
|
||||||
this.chart = echarts.init(this.$refs.chart)
|
},
|
||||||
this.chart.setOption(this.option)
|
},
|
||||||
|
},
|
||||||
|
// 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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.num {
|
.tag {
|
||||||
font-size: 30px;
|
.title {
|
||||||
font-family: Roboto-Black, Roboto;
|
width: 96px;
|
||||||
font-weight: 900;
|
height: 28px;
|
||||||
color: #f6d97e;
|
line-height: 28px;
|
||||||
line-height: 35px;
|
text-align: center;
|
||||||
// margin-right: 3px;
|
font-size: 14px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background: linear-gradient(270deg, rgba(39, 65, 128, 0.3) 0%, rgba(4, 169, 191, 0.6) 100%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.num2 {
|
._box {
|
||||||
font-size: 30px;
|
width: 162px;
|
||||||
font-family: Roboto-Black, Roboto;
|
height: 275px;
|
||||||
font-weight: 900;
|
background-image: url(./img/right2/1.png);
|
||||||
color: rgba(16, 152, 255, 1);
|
background-size: contain;
|
||||||
line-height: 35px;
|
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>
|
</style>
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.5 MiB |
Reference in New Issue
Block a user