diff --git a/src/views/bigScreen/information/left2.vue b/src/views/bigScreen/information/left2.vue
index 39b4d75..e9bced6 100644
--- a/src/views/bigScreen/information/left2.vue
+++ b/src/views/bigScreen/information/left2.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<container3 title="安全隐患整改情况">
+		<container3 title="应用系统">
 			<div style="height: 100%; width: 100%" ref="chart"></div>
 		</container3>
 	</div>
diff --git a/src/views/bigScreen/information/right1.vue b/src/views/bigScreen/information/right1.vue
index d5abaf7..b434ef6 100644
--- a/src/views/bigScreen/information/right1.vue
+++ b/src/views/bigScreen/information/right1.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<container title="危险点危险源区域分布视频监控情况">
+		<container title="月度工作计划">
 			<div class="wrap">
 				<el-row class="content1">
 					<el-col :span="24">
diff --git a/src/views/bigScreen/management/center.vue b/src/views/bigScreen/management/center.vue
index 99a3809..2883eb8 100644
--- a/src/views/bigScreen/management/center.vue
+++ b/src/views/bigScreen/management/center.vue
@@ -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;
 			}
 		}
 	}
diff --git a/src/views/bigScreen/management/icon3.png b/src/views/bigScreen/management/icon3.png
index 8b69b71..5f5d8f7 100644
Binary files a/src/views/bigScreen/management/icon3.png and b/src/views/bigScreen/management/icon3.png differ
diff --git a/src/views/bigScreen/management/icon4.png b/src/views/bigScreen/management/icon4.png
index 951022e..057f1bc 100644
Binary files a/src/views/bigScreen/management/icon4.png and b/src/views/bigScreen/management/icon4.png differ
diff --git a/src/views/bigScreen/management/img/left2/1.png b/src/views/bigScreen/management/img/left2/1.png
new file mode 100644
index 0000000..5b7d86b
Binary files /dev/null and b/src/views/bigScreen/management/img/left2/1.png differ
diff --git a/src/views/bigScreen/management/img/left2/2.png b/src/views/bigScreen/management/img/left2/2.png
new file mode 100644
index 0000000..c64e0a2
Binary files /dev/null and b/src/views/bigScreen/management/img/left2/2.png differ
diff --git a/src/views/bigScreen/management/img/left2/3.png b/src/views/bigScreen/management/img/left2/3.png
new file mode 100644
index 0000000..220b05c
Binary files /dev/null and b/src/views/bigScreen/management/img/left2/3.png differ
diff --git a/src/views/bigScreen/management/img/right2/1.png b/src/views/bigScreen/management/img/right2/1.png
new file mode 100644
index 0000000..97b0fef
Binary files /dev/null and b/src/views/bigScreen/management/img/right2/1.png differ
diff --git a/src/views/bigScreen/management/img/right2/2.png b/src/views/bigScreen/management/img/right2/2.png
new file mode 100644
index 0000000..e28e759
Binary files /dev/null and b/src/views/bigScreen/management/img/right2/2.png differ
diff --git a/src/views/bigScreen/management/img/right2/3.png b/src/views/bigScreen/management/img/right2/3.png
new file mode 100644
index 0000000..0cac973
Binary files /dev/null and b/src/views/bigScreen/management/img/right2/3.png differ
diff --git a/src/views/bigScreen/management/left1.vue b/src/views/bigScreen/management/left1.vue
index b4c42c4..475428f 100644
--- a/src/views/bigScreen/management/left1.vue
+++ b/src/views/bigScreen/management/left1.vue
@@ -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;
diff --git a/src/views/bigScreen/management/left2.vue b/src/views/bigScreen/management/left2.vue
index 74c81a8..8ce9d47 100644
--- a/src/views/bigScreen/management/left2.vue
+++ b/src/views/bigScreen/management/left2.vue
@@ -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>
diff --git a/src/views/bigScreen/management/right1.vue b/src/views/bigScreen/management/right1.vue
index cbe1475..e230a18 100644
--- a/src/views/bigScreen/management/right1.vue
+++ b/src/views/bigScreen/management/right1.vue
@@ -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;
diff --git a/src/views/bigScreen/management/right2.vue b/src/views/bigScreen/management/right2.vue
index fd951f9..418da32 100644
--- a/src/views/bigScreen/management/right2.vue
+++ b/src/views/bigScreen/management/right2.vue
@@ -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>
diff --git a/src/views/bigScreen/securityManage/center.png b/src/views/bigScreen/securityManage/center.png
index 88b5e78..703c4ba 100644
Binary files a/src/views/bigScreen/securityManage/center.png and b/src/views/bigScreen/securityManage/center.png differ