Merge branch 'master' of http://101.43.70.124:3000/williamet/vis389
This commit is contained in:
hh
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<container3 title="安全隐患整改情况">
|
||||
<container3 title="应用系统">
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
</container3>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<container title="危险点危险源区域分布视频监控情况">
|
||||
<container title="月度工作计划">
|
||||
<div class="wrap">
|
||||
<el-row class="content1">
|
||||
<el-col :span="24">
|
||||
|
||||
@ -2,6 +2,9 @@
|
||||
<div>
|
||||
<center1>
|
||||
<div class="data">
|
||||
<div class="top_tab">
|
||||
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['全年', '本月']"></bigScreenTabs>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<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>
|
||||
@ -17,22 +20,55 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><img src="./icon3.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><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 style="width: 100%">
|
||||
<progressBar :percentage="70" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<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="width: 100%">
|
||||
<progressBar :percentage="70" />
|
||||
<div class="data-item" style="width: 34%">
|
||||
<div><img src="./icon4.png" alt="" /><span style="font-weight: bold">两金</span></div>
|
||||
<div style="display: flex">
|
||||
<div>
|
||||
<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 class="center_box"></div>
|
||||
<div class="center_box"></div>
|
||||
<div class="center_box">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
@ -40,7 +76,10 @@
|
||||
<script>
|
||||
import center1 from './components/center1/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import bigScreenTabs from '../components/bigScreenTabs/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'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
@ -52,22 +91,593 @@ export default {
|
||||
center1,
|
||||
rocketTit,
|
||||
progressBar,
|
||||
bigScreenTabs,
|
||||
},
|
||||
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() {},
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.center_box {
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
height: 225px;
|
||||
padding: 10px 25px;
|
||||
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 {
|
||||
padding: 16px 24px;
|
||||
@ -79,21 +689,30 @@ export default {
|
||||
z-index: -1;
|
||||
}
|
||||
.data {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin: 0 30px;
|
||||
background: rgba(2, 18, 63, 0.33);
|
||||
// margin: 0 30px;
|
||||
height: 120px;
|
||||
background: rgba(145, 213, 254, 0.1);
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
.top_tab {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.data-item {
|
||||
// flex: 1;
|
||||
width: 20%;
|
||||
width: 19%;
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
> div {
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
// text-align: center;
|
||||
img {
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
@ -118,94 +737,20 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.container3 {
|
||||
position: relative;
|
||||
.con_right {
|
||||
width: 88px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
right: 20%;
|
||||
color: #00ffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
.con_title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.con_height {
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: #00ffff;
|
||||
}
|
||||
}
|
||||
.con_two {
|
||||
top: 43%;
|
||||
right: 12%;
|
||||
}
|
||||
.con_left {
|
||||
width: 186px;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 24%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.con_left_title {
|
||||
position: relative;
|
||||
.con_card {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
top: 22%;
|
||||
div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span:nth-child(1) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.con_h_two {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 47px;
|
||||
border: 1px solid #fa8c16;
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
.con_bottom {
|
||||
height: 24px;
|
||||
line-height: 26px;
|
||||
position: absolute;
|
||||
right: -50%;
|
||||
bottom: -50%;
|
||||
text-align: right;
|
||||
transform: translate(-50%, -50%);
|
||||
img {
|
||||
width: 38%;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.top_tab {
|
||||
::v-deep .BigScreenTabs {
|
||||
.button {
|
||||
padding: 0;
|
||||
transform: unset;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
div {
|
||||
transform: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
<div>
|
||||
<container2 title="战略指标">
|
||||
<div class="wrap">
|
||||
<el-row class="content1">
|
||||
<el-col :span="24">
|
||||
<!-- <div id="left1" ref="left1" class="chart1"></div> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
</container2>
|
||||
<container2 title="综合指标" style="margin-top: 10px">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
@ -21,6 +82,7 @@ import rocketTit from '../components/rocketTit/index.vue'
|
||||
import container2 from './components/container2/index.vue'
|
||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||
import progressBar from '@/views/bigScreen/components/progress/index.vue'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import colorList from '@/utils/colorPalette'
|
||||
// import {Liquid} from '@antv/g2plot';
|
||||
// import resize from '../../dashboard/mixins/resize'
|
||||
@ -34,19 +96,45 @@ export default {
|
||||
container2,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
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: '类别八' },
|
||||
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,
|
||||
},
|
||||
],
|
||||
colorList,
|
||||
}
|
||||
@ -58,121 +146,201 @@ export default {
|
||||
})
|
||||
},
|
||||
beforeDestroy() {},
|
||||
watch: {
|
||||
index(newVal, oldVal) {
|
||||
if (newVal == 0) {
|
||||
this.$nextTick(() => {
|
||||
this.initLine()
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.left1, 'macarons')
|
||||
this.chart = echarts.init(this.$refs.chart, 'macarons')
|
||||
this.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({
|
||||
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,
|
||||
title: [
|
||||
{
|
||||
text: '控制力',
|
||||
left: '19%',
|
||||
bottom: 5,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'sans-serif',
|
||||
fontSize: 18,
|
||||
},
|
||||
},
|
||||
// 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: [
|
||||
{
|
||||
name: '概括',
|
||||
type: 'pie',
|
||||
radius: [0, '85%'],
|
||||
center: ['35%', '50%'],
|
||||
label: {
|
||||
formatter: '',
|
||||
position: 'inner',
|
||||
fontSize: 14,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: this.data,
|
||||
type: 'radar',
|
||||
data: [
|
||||
{
|
||||
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
||||
name: '初期',
|
||||
label: {
|
||||
normal: {
|
||||
// show: true,
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
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() {
|
||||
this.chart = echarts.init(this.$refs.left2)
|
||||
this.chart2 = echarts.init(this.$refs.chart2)
|
||||
this.setOptions2()
|
||||
},
|
||||
setOptions2() {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{a1}<br/>{b1}：{c1}',
|
||||
},
|
||||
this.chart2.setOption({
|
||||
legend: {
|
||||
data: ['收入', '实际', '目标'],
|
||||
data: ['实际', '完成率'],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
color: '#fff',
|
||||
},
|
||||
// selectedMode: false,
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
left: 20,
|
||||
right: 10,
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
},
|
||||
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: [
|
||||
xAxis: [
|
||||
{
|
||||
name: '件',
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
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: ['rgba(255, 255, 255,.5)'],
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '个',
|
||||
min: 0,
|
||||
// max: 250,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
@ -183,7 +351,7 @@ export default {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
// interval: 5,
|
||||
axisLabel: {
|
||||
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: [
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
z: '-1',
|
||||
barGap: '-75%',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(85, 197, 162, .3)',
|
||||
},
|
||||
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: 'rgba(90, 216, 166, 0.85)',
|
||||
},
|
||||
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
|
||||
},
|
||||
{
|
||||
name: '目标',
|
||||
type: 'scatter',
|
||||
symbol: 'rect',
|
||||
symbolSize: [30, 4],
|
||||
symbolOffset: [3, 0],
|
||||
position: [0, 0],
|
||||
barWidth: 20,
|
||||
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: '#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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.warp-scroll {
|
||||
height: 126px;
|
||||
width: 100%;
|
||||
.box {
|
||||
padding: 0 0 5px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.num {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
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: 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: 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 {
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
|
||||
@ -2,7 +2,104 @@
|
||||
<div>
|
||||
<container3 title="军用产业">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
@ -13,6 +110,8 @@ import bigScreenHead from '../components/bigScreenHead/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import container3 from './components/container3/index.vue'
|
||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import colorList from '@/utils/colorPalette'
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
@ -26,44 +125,134 @@ export default {
|
||||
rocketTit,
|
||||
container3,
|
||||
bigScreenTabs,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
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: {
|
||||
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',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [
|
||||
'2021-01',
|
||||
'2021-02',
|
||||
'2021-03',
|
||||
'2021-04',
|
||||
'2021-05',
|
||||
'2021-06',
|
||||
'2021-07',
|
||||
'2021-08',
|
||||
'2021-09',
|
||||
'2021-10',
|
||||
'2021-11',
|
||||
'2021-12',
|
||||
],
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
@ -73,20 +262,18 @@ export default {
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '万元',
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
name: '个',
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['rgba(255, 255, 255,.5)'],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
@ -96,8 +283,8 @@ export default {
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
},
|
||||
@ -114,137 +301,298 @@ export default {
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
containLabel: true,
|
||||
width: '99%',
|
||||
left: 0,
|
||||
top: 50,
|
||||
bottom: 50,
|
||||
},
|
||||
dataZoom: {},
|
||||
series: [
|
||||
{
|
||||
name: '利润',
|
||||
name: '绩效',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
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: 'rgb(118,196,166)',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
barGap: '0',
|
||||
itemStyle: {
|
||||
color: '#8BB1ED',
|
||||
},
|
||||
barWidth: 30,
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '利润预测',
|
||||
name: '综合',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#B5D3FE', // 0%处的颜色为红色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#7EA7FC', // 100%处的颜色为蓝
|
||||
},
|
||||
],
|
||||
},
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#53C19D',
|
||||
},
|
||||
barWidth: 30,
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '利润目标完成率',
|
||||
name: '',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
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: {
|
||||
color: '#55C5A2',
|
||||
color: '#53C19D',
|
||||
},
|
||||
symbol: 'none',
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
itemStyle: {
|
||||
color: '#8BB1ED',
|
||||
},
|
||||
data: [600, 500, 700, 620, 750, 800, 600],
|
||||
symbol: 'none',
|
||||
},
|
||||
],
|
||||
// yAxis: {
|
||||
// type: 'value',
|
||||
// splitLine: {
|
||||
// show: false//不显示网格线
|
||||
// },
|
||||
// splitArea: {
|
||||
// show: false//不显示网格区域
|
||||
// },
|
||||
// axisLine: {
|
||||
// lineStyle: {
|
||||
// color: 'rgb(255, 255, 255)'
|
||||
// },
|
||||
// }
|
||||
})
|
||||
},
|
||||
initChart2() {
|
||||
this.chart2 = echarts.init(this.$refs.chart2)
|
||||
this.setOptions2()
|
||||
},
|
||||
setOptions2() {
|
||||
this.chart2.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
title: {
|
||||
text: '型号情况',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'sans-serif',
|
||||
fontSize: 18,
|
||||
},
|
||||
},
|
||||
// legend: {
|
||||
// right: '5%',
|
||||
// orient: 'vertical',
|
||||
// textStyle: {
|
||||
// color: '#fff', //legend字体颜色
|
||||
// },
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// name: '利润',
|
||||
// type: 'bar',
|
||||
// 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
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// name: '利润预测',
|
||||
// type: 'bar',
|
||||
// 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
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// name: '利润目标完成率',
|
||||
// type: 'line',
|
||||
// yAxisIndex: 1,
|
||||
// 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]
|
||||
// }
|
||||
|
||||
// ]
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.chart.setOption(this.option)
|
||||
series: [
|
||||
{
|
||||
name: '名称',
|
||||
type: 'pie',
|
||||
center: ['40%', '50%'],
|
||||
radius: [0, '45%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 48, name: '型号11' },
|
||||
{ value: 48, name: '型号22' },
|
||||
{ value: 48, name: '型号33' },
|
||||
{ value: 48, name: '型号44' },
|
||||
{ value: 48, name: '型号55' },
|
||||
],
|
||||
itemStyle: {
|
||||
opacity: 0.7,
|
||||
color: '#55C5A2',
|
||||
borderWidth: 3,
|
||||
borderColor: '#fff',
|
||||
},
|
||||
// color: blueColorList,
|
||||
},
|
||||
{
|
||||
name: '名称',
|
||||
type: 'pie',
|
||||
radius: ['45%', '80%'],
|
||||
center: ['40%', '50%'],
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
color: #f6d97e;
|
||||
line-height: 35px;
|
||||
// margin-right: 3px;
|
||||
._box {
|
||||
width: 162px;
|
||||
height: 275px;
|
||||
background-image: url(./img/left2/1.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
._item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.num2 {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
color: rgba(16, 152, 255, 1);
|
||||
line-height: 35px;
|
||||
.warp-scroll {
|
||||
height: 215px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
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>
|
||||
|
||||
@ -2,11 +2,114 @@
|
||||
<div>
|
||||
<container2 title="综合计划/绩效计划">
|
||||
<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 title="信息公示" style="margin-top: 10px">
|
||||
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['民用产业项目信息', '信息公示']"></bigScreenTabs>
|
||||
<!-- <div style="height: 100%; width: 100%" ref="left2"></div> -->
|
||||
<bigScreenTabs slot="datePicker" v-model="index2" :titleArr="['民用产业项目信息', '信息公示']"></bigScreenTabs>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
@ -16,6 +119,7 @@ import rocketTit from '../components/rocketTit/index.vue'
|
||||
import container2 from './components/container2/index.vue'
|
||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||
import progressBar from '@/views/bigScreen/components/progress/index.vue'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import colorList from '@/utils/colorPalette'
|
||||
// import {Liquid} from '@antv/g2plot';
|
||||
// import resize from '../../dashboard/mixins/resize'
|
||||
@ -23,147 +127,127 @@ import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
name: 'left1',
|
||||
name: 'right1',
|
||||
components: {
|
||||
rocketTit,
|
||||
container2,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
index2: 0,
|
||||
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() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initLine()
|
||||
})
|
||||
},
|
||||
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: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.left1, 'macarons')
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.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({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{a1}<br/>{b1}：{c1}',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['预测', '实际', '目标'],
|
||||
data: ['综合', '绩效'],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
// selectedMode: false,
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
left: 20,
|
||||
right: 10,
|
||||
right: 20,
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
},
|
||||
xAxis: {
|
||||
data: [
|
||||
'型号一',
|
||||
'型号二',
|
||||
'型号三',
|
||||
'型号四',
|
||||
'型号五',
|
||||
'型号六',
|
||||
'型号七',
|
||||
'型号八',
|
||||
'型号九',
|
||||
'型号十',
|
||||
'型号十一',
|
||||
'型号十二',
|
||||
'型号十三',
|
||||
'型号十四',
|
||||
'型号十五',
|
||||
'型号十六',
|
||||
'型号十七',
|
||||
'型号十八',
|
||||
'型号十九',
|
||||
'型号二十',
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: 50,
|
||||
// start: 0,
|
||||
// end: 50,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
color: ['#ccc', 'red'],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '件',
|
||||
name: '个',
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
@ -204,38 +288,198 @@ export default {
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '预测',
|
||||
name: '绩效',
|
||||
type: 'bar',
|
||||
// z: '-1',
|
||||
barGap: '-75%',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#F64F58',
|
||||
},
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
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],
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
name: '综合',
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: 'rgba(90, 216, 166, 0.85)',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
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: {
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.warp-scroll {
|
||||
height: 126px;
|
||||
width: 100%;
|
||||
.box {
|
||||
padding: 0 0 5px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.num {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
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: 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 {
|
||||
// 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 {
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
|
||||
@ -1,14 +1,59 @@
|
||||
<template>
|
||||
<div>
|
||||
<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> -->
|
||||
<container3 title="民用产业">
|
||||
<bigScreenTabs
|
||||
slot="datePicker"
|
||||
v-model="index"
|
||||
:titleArr="['总厂情况', '合同及产品生产信息', '本月情况']"
|
||||
></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>
|
||||
</div>
|
||||
</template>
|
||||
@ -19,6 +64,7 @@ import bigScreenHead from '../components/bigScreenHead/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import container3 from './components/container3/index.vue'
|
||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||
import colorList from '@/utils/colorPalette'
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
@ -37,9 +83,185 @@ export default {
|
||||
return {
|
||||
index: 0,
|
||||
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: {
|
||||
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: {
|
||||
color: '#fff',
|
||||
},
|
||||
@ -80,10 +302,10 @@ export default {
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '万元',
|
||||
name: '',
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
// max: 250,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
@ -102,8 +324,8 @@ export default {
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
max: 100,
|
||||
// interval: 5,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
},
|
||||
@ -127,131 +349,307 @@ export default {
|
||||
top: 50,
|
||||
bottom: 50,
|
||||
},
|
||||
dataZoom: {},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: 30,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '利润',
|
||||
name: '稀土',
|
||||
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],
|
||||
itemStyle: {
|
||||
color: 'rgb(118,196,166)',
|
||||
color: '#E3F5C2',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '利润预测',
|
||||
name: '隔热',
|
||||
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],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#B5D3FE', // 0%处的颜色为红色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#7EA7FC', // 100%处的颜色为蓝
|
||||
},
|
||||
],
|
||||
},
|
||||
color: '#45D1CC',
|
||||
},
|
||||
},
|
||||
{
|
||||
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',
|
||||
yAxisIndex: 1,
|
||||
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: {
|
||||
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',
|
||||
},
|
||||
],
|
||||
// yAxis: {
|
||||
// type: 'value',
|
||||
// splitLine: {
|
||||
// show: false//不显示网格线
|
||||
// },
|
||||
// splitArea: {
|
||||
// show: false//不显示网格区域
|
||||
// },
|
||||
// axisLine: {
|
||||
// lineStyle: {
|
||||
// color: 'rgb(255, 255, 255)'
|
||||
// },
|
||||
// }
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// name: '利润',
|
||||
// type: 'bar',
|
||||
// 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
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// name: '利润预测',
|
||||
// type: 'bar',
|
||||
// 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
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// name: '利润目标完成率',
|
||||
// type: 'line',
|
||||
// yAxisIndex: 1,
|
||||
// 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]
|
||||
// }
|
||||
|
||||
// ]
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.chart.setOption(this.option)
|
||||
})
|
||||
},
|
||||
initChart3() {
|
||||
this.chart3 = echarts.init(this.$refs.chart3)
|
||||
this.setOptions3()
|
||||
},
|
||||
setOptions3() {
|
||||
this.chart3.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
position: 'inner',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '型号',
|
||||
type: 'pie',
|
||||
center: ['45%', '50%'],
|
||||
radius: ['60%', '80%'],
|
||||
avoidLabelOverlap: false,
|
||||
hoverAnimation: false, // hover 效果
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 4, name: '隔热' },
|
||||
{ value: 2, name: '其他' },
|
||||
{ value: 6, name: '稀土' },
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 1,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: '#fff',
|
||||
},
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}',
|
||||
position: 'inner',
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
// color: colorList,
|
||||
color: ['#5B8FF9', '#5AD8A6', '#5D7092'],
|
||||
},
|
||||
{
|
||||
name: '合同',
|
||||
type: 'pie',
|
||||
radius: ['35%', '55%'],
|
||||
center: ['45%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
hoverAnimation: false, // hover 效果
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 4, name: '合同1' },
|
||||
{ value: 2, name: '合同2' },
|
||||
{ value: 6, name: '合同3' },
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 1,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: '#fff',
|
||||
},
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}',
|
||||
position: 'inner',
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
// color: colorList,
|
||||
color: ['#5B8FF9', '#5AD8A6', '#5D7092'],
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
initChart4() {
|
||||
this.chart4 = echarts.init(this.$refs.chart4)
|
||||
this.setOptions4()
|
||||
},
|
||||
setOptions4() {
|
||||
this.chart4.setOption({
|
||||
tooltip: {
|
||||
// trigger: 'axis',
|
||||
// formatter: '{a1}<br/>{b1}：{c1}',
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
left: 20,
|
||||
right: 10,
|
||||
top: 30,
|
||||
bottom: 10,
|
||||
},
|
||||
xAxis: {
|
||||
data: [
|
||||
'部门一',
|
||||
'部门一',
|
||||
'部门一',
|
||||
'部门一',
|
||||
'部门一',
|
||||
'部门一',
|
||||
'部门一',
|
||||
'部门一',
|
||||
'部门一',
|
||||
'部门一',
|
||||
'部门一',
|
||||
'部门一',
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
color: ['#ccc', 'red'],
|
||||
yAxis: [
|
||||
{
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['rgba(255, 255, 255,.5)'],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '完成率',
|
||||
type: 'bar',
|
||||
z: '-1',
|
||||
barGap: '-100%',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(246, 217, 126, .2)',
|
||||
},
|
||||
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
|
||||
},
|
||||
{
|
||||
name: '数量',
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: 'rgba(246, 217, 126, 1)',
|
||||
},
|
||||
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
color: #f6d97e;
|
||||
line-height: 35px;
|
||||
// margin-right: 3px;
|
||||
.tag {
|
||||
.title {
|
||||
width: 96px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
background: linear-gradient(270deg, rgba(39, 65, 128, 0.3) 0%, rgba(4, 169, 191, 0.6) 100%);
|
||||
}
|
||||
}
|
||||
.num2 {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
color: rgba(16, 152, 255, 1);
|
||||
line-height: 35px;
|
||||
._box {
|
||||
width: 162px;
|
||||
height: 275px;
|
||||
background-image: url(./img/right2/1.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
._item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
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