diff --git a/src/views/bigScreen/components/bigScreenTabs/index.vue b/src/views/bigScreen/components/bigScreenTabs/index.vue
index c8a99cb..06ce35b 100644
--- a/src/views/bigScreen/components/bigScreenTabs/index.vue
+++ b/src/views/bigScreen/components/bigScreenTabs/index.vue
@@ -1,62 +1,57 @@
-
-
 <template>
-  <div class="BigScreenTabs">
-    <div v-for="(v,index) in titleArr" :key="index" class="button" :class="{active:value == index}">
-      <div @click="updateVal(index)">{{v}}</div>
-    </div>
-  </div>
-
+	<div class="BigScreenTabs">
+		<div v-for="(v, index) in titleArr" :key="index" class="button" :class="{ active: value == index }">
+			<div @click="updateVal(index)">{{ v }}</div>
+		</div>
+	</div>
 </template>
 
 <script>
 export default {
-  name: 'BigScreenTabs',
-  props: {
-    value: {
-      type: Number
-    },
-    titleArr: {
-      type: Array,
-      default: ['部门', '类型'],
-    },
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-    updateVal: function (val) {
-      // 2、手动触发父组件的input事件并将值传给父组件
-      this.$emit('input', val);
-    }
-
-  }
+	name: 'BigScreenTabs',
+	props: {
+		value: {
+			type: Number,
+		},
+		titleArr: {
+			type: Array,
+			default: ['部门', '类型'],
+		},
+	},
+	data() {
+		return {}
+	},
+	methods: {
+		updateVal: function (val) {
+			// 2、手动触发父组件的input事件并将值传给父组件
+			this.$emit('input', val)
+		},
+	},
 }
 </script>
 
 <style lang="scss" scoped>
 .button {
-  display: inline-block;
-  background: rgba(145, 213, 254, 0.2);
-  width: 77px;
-  height: 28px;
-  line-height: 28px;
-  text-align: center;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.65);
-  transform: skewX(-20deg);
-  cursor: pointer;
+	display: inline-block;
+	background: rgba(145, 213, 254, 0.2);
+	min-width: 77px;
+	padding: 0 15px;
+	height: 28px;
+	line-height: 28px;
+	text-align: center;
+	font-weight: 500;
+	color: rgba(255, 255, 255, 0.65);
+	transform: skewX(-20deg);
+	cursor: pointer;
 }
 .button.active {
-  background: linear-gradient(270deg, #3661a8 0%, #8bb1ed 100%);
-  font-weight: 500;
-  color: #ffffff;
+	background: linear-gradient(270deg, #3661a8 0%, #8bb1ed 100%);
+	font-weight: 500;
+	color: #ffffff;
 }
 .button > div {
-  width: 100%;
-  height: 100%;
-  transform: skewX(20deg);
+	width: 100%;
+	height: 100%;
+	transform: skewX(20deg);
 }
 </style>
diff --git a/src/views/bigScreen/management/center.png b/src/views/bigScreen/management/center.png
new file mode 100644
index 0000000..0e0fb9a
Binary files /dev/null and b/src/views/bigScreen/management/center.png differ
diff --git a/src/views/bigScreen/management/center.vue b/src/views/bigScreen/management/center.vue
new file mode 100644
index 0000000..99a3809
--- /dev/null
+++ b/src/views/bigScreen/management/center.vue
@@ -0,0 +1,213 @@
+<template>
+	<div>
+		<center1>
+			<div class="data">
+				<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>
+					<div style="width: 100%">
+						<progressBar :percentage="70" />
+					</div>
+				</div>
+				<div class="data-item">
+					<div><img src="./icon2.png" alt="" /><span style="font-weight: bold">利润</span></div>
+					<div class="box"><i>380/</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="./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 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>
+				</div>
+			</div>
+			<div class="center_box"></div>
+			<div class="center_box"></div>
+		</center1>
+	</div>
+</template>
+
+<script>
+import center1 from './components/center1/index.vue'
+import rocketTit from '../components/rocketTit/index.vue'
+import progressBar from './../components/progress/index.vue'
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+	mixins: [resize],
+	name: 'left1',
+	components: {
+		center1,
+		rocketTit,
+		progressBar,
+	},
+	data() {
+		return {}
+	},
+	mounted() {},
+	beforeDestroy() {},
+	methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+.center_box {
+	margin-top: 20px;
+	width: 100%;
+	height: 225px;
+	background-image: url(./center.png);
+}
+.tit {
+	padding: 16px 24px;
+}
+.img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: -1;
+}
+.data {
+	display: flex;
+	justify-content: space-evenly;
+	margin: 0 30px;
+	background: rgba(2, 18, 63, 0.33);
+	color: #ffffff;
+	font-size: 18px;
+	.data-item {
+		// flex: 1;
+		width: 20%;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		> div {
+			margin: 5px 0;
+			text-align: center;
+			img {
+				// width: 10px;
+				// height: 10px;
+				vertical-align: middle;
+				margin-right: 5px;
+			}
+		}
+		.box {
+			font-size: 26px;
+			font-family: Roboto-BlackItalic, Roboto;
+			font-weight: 600;
+			color: #55c5a2;
+		}
+		.num {
+			font-size: 14px;
+		}
+		.num2 {
+			font-size: 16px;
+			margin-left: 5px;
+			color: #fff;
+		}
+	}
+}
+
+.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;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/bigScreen/management/center2.vue b/src/views/bigScreen/management/center2.vue
new file mode 100644
index 0000000..63bd7b6
--- /dev/null
+++ b/src/views/bigScreen/management/center2.vue
@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <container4 title="今日动态">
+      <vue-seamless-scroll :data="listData" class="warp" :class-option="{
+        singleHeight: 35
+      }">
+        <ul class="item">
+          <li>
+            <el-row>
+              <el-col :span="10"><img src="./img/center2/1.png">今日收入</el-col>
+              <el-col :span="5">1234万</el-col>
+              <el-col :span="7"></el-col>
+            </el-row>
+          </li>
+          <li>
+            <el-row>
+              <el-col :span="10"><img src="./img/center2/2.png">今日支出</el-col>
+              <el-col :span="5">1234万</el-col>
+              <el-col :span="7"></el-col>
+            </el-row>
+          </li>
+          <li>
+            <el-row>
+              <el-col :span="10"><img src="./img/center2/3.png">今日新签合同</el-col>
+              <el-col :span="5">1234份</el-col>
+              <el-col :span="7"></el-col>
+            </el-row>
+          </li>
+          <li>
+            <el-row>
+              <el-col :span="10"><img src="./img/center2/4.png">今日安全问题</el-col>
+              <el-col :span="5">1234个</el-col>
+              <el-col :span="7"></el-col>
+            </el-row>
+          </li>
+          <li>
+            <el-row>
+              <el-col :span="10"><img src="./img/center2/5.png">今日质量问题</el-col>
+              <el-col :span="5">1234个</el-col>
+              <el-col :span="7"></el-col>
+            </el-row>
+          </li>
+          <li>
+            <el-row>
+              <el-col :span="10"><img src="./img/center2/6.png">今日设备数</el-col>
+              <el-col :span="5">123台</el-col>
+              <el-col :span="7">运行率：88%</el-col>
+            </el-row>
+          </li>
+          <li>
+            <el-row>
+              <el-col :span="10"><img src="./img/center2/7.png">今日职工数</el-col>
+              <el-col :span="5">890人</el-col>
+              <el-col :span="7">出勤率：73%</el-col>
+            </el-row>
+          </li>
+          <li>
+            <el-row>
+              <el-col :span="10"><img src="./img/center2/8.png">今日生产任务</el-col>
+              <el-col :span="5">890个</el-col>
+              <el-col :span="7">完成率：66%</el-col>
+            </el-row>
+          </li>
+        </ul>
+      </vue-seamless-scroll>
+    </container4>
+  </div>
+
+</template>
+
+<script>
+import container4 from "./components/container4/index.vue";
+import rocketTit from "../components/rocketTit/index.vue";
+import vueSeamlessScroll from 'vue-seamless-scroll'
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+  mixins: [resize],
+  name: 'left1',
+  components: {
+    container4,
+    rocketTit,
+    vueSeamlessScroll
+  },
+  data () {
+    return {
+      listData: [1, 2, 3, 4, 5, 6, 7, 8],
+    }
+  },
+  mounted () {
+
+  },
+  beforeDestroy () {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tit {
+  padding: 16px 24px;
+}
+.img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+.data {
+  display: flex;
+  margin: 0 15px;
+  background: rgba(2, 18, 63, 0.4);
+  color: #ffffff;
+  font-size: 18px;
+  .data-item {
+    flex: 1;
+    > div {
+      margin: 5px 0;
+      text-align: center;
+    }
+    .num {
+      font-size: 28px;
+      font-family: Roboto-BlackItalic, Roboto;
+      font-weight: 600;
+      color: #55c5a2;
+      vertical-align: sub;
+      padding-right: 3px;
+    }
+  }
+}
+
+.warp {
+  height: 280px;
+  width: 440px;
+  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: 30px;
+      line-height: 30px;
+      background: rgba(2, 18, 63, 0.33);
+      padding-left: 20px;
+      margin: 5px 0;
+      img {
+        vertical-align: sub;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/bigScreen/management/components/center1/index.vue b/src/views/bigScreen/management/components/center1/index.vue
new file mode 100644
index 0000000..8fdedc9
--- /dev/null
+++ b/src/views/bigScreen/management/components/center1/index.vue
@@ -0,0 +1,47 @@
+<template>
+	<div class="centen1">
+		<slot />
+		<div class="centen1bg"></div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'Centen1',
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		selected: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.centen1 {
+	width: 768px;
+	height: 586px;
+	// background-image: url(./bg.png);
+	background-size: cover;
+	overflow: hidden;
+	z-index: 10;
+	.centen1bg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		// background-image: url(./bg.png);
+		background-size: cover;
+		pointer-events: none;
+		user-select: none;
+	}
+}
+</style>
diff --git a/src/views/bigScreen/management/components/container2/bg.png b/src/views/bigScreen/management/components/container2/bg.png
new file mode 100644
index 0000000..d454cea
Binary files /dev/null and b/src/views/bigScreen/management/components/container2/bg.png differ
diff --git a/src/views/bigScreen/management/components/container2/index.vue b/src/views/bigScreen/management/components/container2/index.vue
new file mode 100644
index 0000000..41a1c85
--- /dev/null
+++ b/src/views/bigScreen/management/components/container2/index.vue
@@ -0,0 +1,100 @@
+<template>
+	<div class="container2">
+		<div class="tit">
+			<rocketTit>{{ title }}</rocketTit>
+			<div class="datePicker">
+				<slot name="datePicker"></slot>
+			</div>
+		</div>
+		<div class="content">
+			<div class="snap">
+				<slot name="snap"></slot>
+			</div>
+
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+import rocketTit from '../../../components/rocketTit/index.vue'
+
+export default {
+	name: 'Container2',
+	components: {
+		rocketTit,
+	},
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		selected: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.container2 {
+	display: flex;
+	flex-direction: column;
+	width: 538px;
+	height: 288px;
+	background-image: url(./bg.png);
+	background-size: cover;
+	color: #ffffff;
+	font-size: 16px;
+	font-family: PingFangSC-Semibold, PingFang SC;
+	font-weight: 600;
+
+	.tit {
+		padding: 16px 16px 16px 24px;
+		position: relative;
+		.datePicker {
+			position: absolute;
+			right: 16px;
+			top: 12px;
+
+			::v-deep .el-date-editor {
+				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;
+				}
+			}
+		}
+	}
+
+	.content {
+		flex: 1;
+		padding: 2px;
+		box-sizing: border-box;
+		overflow: hidden;
+		position: relative;
+		.snap {
+			position: absolute;
+			top: 20px;
+			left: 25px;
+			font-weight: 300;
+		}
+	}
+}
+</style>
diff --git a/src/views/bigScreen/management/components/container3/bg.png b/src/views/bigScreen/management/components/container3/bg.png
new file mode 100644
index 0000000..0288246
Binary files /dev/null and b/src/views/bigScreen/management/components/container3/bg.png differ
diff --git a/src/views/bigScreen/management/components/container3/index.vue b/src/views/bigScreen/management/components/container3/index.vue
new file mode 100644
index 0000000..6cc71a5
--- /dev/null
+++ b/src/views/bigScreen/management/components/container3/index.vue
@@ -0,0 +1,100 @@
+<template>
+	<div class="container3">
+		<div class="tit">
+			<rocketTit>{{ title }}</rocketTit>
+			<div class="datePicker">
+				<slot name="datePicker"></slot>
+			</div>
+		</div>
+		<div class="content">
+			<div class="snap">
+				<slot name="snap"></slot>
+			</div>
+
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+import rocketTit from '../../../components/rocketTit/index.vue'
+
+export default {
+	name: 'container3',
+	components: {
+		rocketTit,
+	},
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		selected: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.container3 {
+	display: flex;
+	flex-direction: column;
+	width: 930px;
+	height: 343px;
+	background-image: url(./bg.png);
+	background-size: cover;
+	color: #ffffff;
+	font-size: 16px;
+	font-family: PingFangSC-Semibold, PingFang SC;
+	font-weight: 600;
+
+	.tit {
+		padding: 16px 16px 16px 24px;
+		position: relative;
+		.datePicker {
+			position: absolute;
+			right: 16px;
+			top: 12px;
+
+			::v-deep .el-date-editor {
+				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;
+				}
+			}
+		}
+	}
+
+	.content {
+		flex: 1;
+		padding: 2px 2px 2px 22px;
+		box-sizing: border-box;
+		overflow: hidden;
+		position: relative;
+		.snap {
+			position: absolute;
+			top: 20px;
+			left: 25px;
+			font-weight: 300;
+		}
+	}
+}
+</style>
diff --git a/src/views/bigScreen/management/components/container4/bg.png b/src/views/bigScreen/management/components/container4/bg.png
new file mode 100644
index 0000000..7f938fa
Binary files /dev/null and b/src/views/bigScreen/management/components/container4/bg.png differ
diff --git a/src/views/bigScreen/management/components/container4/index.vue b/src/views/bigScreen/management/components/container4/index.vue
new file mode 100644
index 0000000..31fda5c
--- /dev/null
+++ b/src/views/bigScreen/management/components/container4/index.vue
@@ -0,0 +1,145 @@
+
+
+<template>
+  <div class="container4">
+    <div class="tit">
+      <div>{{title}}</div>
+      <!-- <rocketTit>{{title}}</rocketTit> -->
+      <!-- <div class="datePicker">
+        <slot name="datePicker"></slot>
+      </div> -->
+    </div>
+    <div class="content">
+      <div class="snap">
+        <slot name="snap"></slot>
+      </div>
+
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import rocketTit from "../../../components/rocketTit/index.vue";
+
+export default {
+  name: 'container4',
+  components: {
+    rocketTit,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.container4 {
+  display: flex;
+  flex-direction: column;
+  width: 501px;
+  height: 359px;
+  background-image: url(./bg.png);
+  background-size: cover;
+  color: #ffffff;
+  font-size: 16px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+
+  .tit {
+    position: relative;
+    padding: 16px 16px 16px 24px;
+    text-align: center;
+    color: #ffffff;
+    font-size: 16px;
+    position: relative;
+    display: inline-block;
+    margin: 0 auto;
+
+    ::before {
+      content: "";
+      display: block;
+      position: absolute;
+
+      left: -75px;
+      top: 25px;
+      width: 82px;
+      height: 3px;
+      background: linear-gradient(
+        90deg,
+        rgba(145, 213, 254, 0) 0%,
+        #91d5fe 100%
+      );
+      border-radius: 2px;
+    }
+    ::after {
+      content: "";
+      display: block;
+      position: absolute;
+
+      right: -75px;
+      top: 25px;
+      width: 82px;
+      height: 3px;
+      background: linear-gradient(
+        90deg,
+        #91d5fe 0%,
+        rgba(145, 213, 254, 0) 100%
+      );
+      border-radius: 2px;
+    }
+
+    .datePicker {
+      position: absolute;
+      right: 16px;
+      top: 12px;
+
+      ::v-deep .el-date-editor {
+        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;
+        }
+      }
+    }
+  }
+
+  .content {
+    flex: 1;
+    padding: 2px;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+    .snap {
+      position: absolute;
+      top: 20px;
+      left: 25px;
+      font-weight: 300;
+    }
+  }
+}
+</style>
diff --git a/src/views/bigScreen/management/conter.png b/src/views/bigScreen/management/conter.png
new file mode 100644
index 0000000..6331ce8
Binary files /dev/null and b/src/views/bigScreen/management/conter.png differ
diff --git a/src/views/bigScreen/management/icon1.png b/src/views/bigScreen/management/icon1.png
new file mode 100644
index 0000000..17d4713
Binary files /dev/null and b/src/views/bigScreen/management/icon1.png differ
diff --git a/src/views/bigScreen/management/icon2.png b/src/views/bigScreen/management/icon2.png
new file mode 100644
index 0000000..532a873
Binary files /dev/null and b/src/views/bigScreen/management/icon2.png differ
diff --git a/src/views/bigScreen/management/icon3.png b/src/views/bigScreen/management/icon3.png
new file mode 100644
index 0000000..8b69b71
Binary files /dev/null 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
new file mode 100644
index 0000000..951022e
Binary files /dev/null and b/src/views/bigScreen/management/icon4.png differ
diff --git a/src/views/bigScreen/management/img/center2/1.png b/src/views/bigScreen/management/img/center2/1.png
new file mode 100644
index 0000000..9b5791f
Binary files /dev/null and b/src/views/bigScreen/management/img/center2/1.png differ
diff --git a/src/views/bigScreen/management/img/center2/2.png b/src/views/bigScreen/management/img/center2/2.png
new file mode 100644
index 0000000..2ea88f9
Binary files /dev/null and b/src/views/bigScreen/management/img/center2/2.png differ
diff --git a/src/views/bigScreen/management/img/center2/3.png b/src/views/bigScreen/management/img/center2/3.png
new file mode 100644
index 0000000..bfa8a57
Binary files /dev/null and b/src/views/bigScreen/management/img/center2/3.png differ
diff --git a/src/views/bigScreen/management/img/center2/4.png b/src/views/bigScreen/management/img/center2/4.png
new file mode 100644
index 0000000..f495c57
Binary files /dev/null and b/src/views/bigScreen/management/img/center2/4.png differ
diff --git a/src/views/bigScreen/management/img/center2/5.png b/src/views/bigScreen/management/img/center2/5.png
new file mode 100644
index 0000000..037ba11
Binary files /dev/null and b/src/views/bigScreen/management/img/center2/5.png differ
diff --git a/src/views/bigScreen/management/img/center2/6.png b/src/views/bigScreen/management/img/center2/6.png
new file mode 100644
index 0000000..aed09a4
Binary files /dev/null and b/src/views/bigScreen/management/img/center2/6.png differ
diff --git a/src/views/bigScreen/management/img/center2/7.png b/src/views/bigScreen/management/img/center2/7.png
new file mode 100644
index 0000000..deaeccb
Binary files /dev/null and b/src/views/bigScreen/management/img/center2/7.png differ
diff --git a/src/views/bigScreen/management/img/center2/8.png b/src/views/bigScreen/management/img/center2/8.png
new file mode 100644
index 0000000..0a53b5f
Binary files /dev/null and b/src/views/bigScreen/management/img/center2/8.png differ
diff --git a/src/views/bigScreen/management/index.vue b/src/views/bigScreen/management/index.vue
index 0003e90..cfe90ea 100644
--- a/src/views/bigScreen/management/index.vue
+++ b/src/views/bigScreen/management/index.vue
@@ -1,18 +1,126 @@
 <template>
-    <div class="management">
-      经营管理
-    </div>
+	<div class="management">
+		<div class="left1">
+			<left1></left1>
+		</div>
+		<div class="left2">
+			<left2></left2>
+		</div>
+		<!-- <div class="bg1"></div> -->
+
+		<div class="center1">
+			<center1></center1>
+		</div>
+		<!-- <div class="center2">
+			<center2></center2>
+		</div> -->
+		<div class="right1">
+			<right1></right1>
+		</div>
+
+		<div class="right2">
+			<right2></right2>
+		</div>
+		<!-- <div class="right1">
+        <right1></right1>
+      </div>
+      <div class="right2">
+        <right2></right2>
+      </div>
+      <div class="bottom1">
+        <bottom1></bottom1>
+      </div>
+      <div class="bottom2">
+        <bottom2></bottom2>
+      </div> -->
+	</div>
 </template>
 
 <script>
+import scalseBox from '../components/scaleBox.vue'
+import bigScreenHead from '../components/bigScreenHead/index.vue'
+import rocketTit from '../components/rocketTit/index.vue'
+import container1 from '../components/container1/index.vue'
 
+import left1 from './left1.vue'
+import left2 from './left2.vue'
+import center1 from './center.vue'
+import center2 from './center2.vue'
+import right1 from './right1.vue'
+import right2 from './right2.vue'
 export default {
-  name: 'Management',
-  components: {
-  }
+	name: 'Management',
+	components: {
+		scalseBox,
+		bigScreenHead,
+		rocketTit,
+		container1,
+		left1,
+		left2,
+		center1,
+		right1,
+		right2,
+		center2,
+	},
 }
 </script>
 
 <style lang="scss" scoped>
+.management {
+	position: relative;
+	width: 100%;
+	// background-image: url("../img/bg.png");
+	background-size: cover;
+	.bg1 {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 1920px;
+		height: 485px;
+		background-image: url('../img/bg-1.png');
+		background-size: cover;
+	}
+}
 
-</style>
\ No newline at end of file
+.left1 {
+	position: absolute;
+	top: 3px;
+	left: 24px;
+}
+.left2 {
+	position: absolute;
+	top: 605px;
+	left: 24px;
+}
+.center1 {
+	position: absolute;
+	top: 3px;
+	left: 578px;
+}
+.center2 {
+	position: absolute;
+	top: 605px;
+	left: 710px;
+}
+
+.right1 {
+	position: absolute;
+	top: 3px;
+	right: 24px;
+}
+.right2 {
+	position: absolute;
+	top: 605px;
+	right: 24px;
+}
+.bottom1 {
+	position: absolute;
+	bottom: 16px;
+	left: 24px;
+}
+.bottom2 {
+	position: absolute;
+	bottom: 16px;
+	right: 24px;
+}
+</style>
diff --git a/src/views/bigScreen/management/left1.vue b/src/views/bigScreen/management/left1.vue
new file mode 100644
index 0000000..b4c42c4
--- /dev/null
+++ b/src/views/bigScreen/management/left1.vue
@@ -0,0 +1,314 @@
+<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>
+		</container2>
+		<container2 title="综合指标" style="margin-top: 10px">
+			<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['完成率', '明细']"></bigScreenTabs>
+			<!-- <div style="height: 100%; width: 100%" ref="left2"></div> -->
+		</container2>
+	</div>
+</template>
+
+<script>
+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 colorList from '@/utils/colorPalette'
+// import {Liquid} from '@antv/g2plot';
+// import resize from '../../dashboard/mixins/resize'
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+export default {
+	// mixins: [resize],
+	name: 'left1',
+	components: {
+		rocketTit,
+		container2,
+		bigScreenTabs,
+		progressBar,
+	},
+	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: '类别八' },
+			],
+			colorList,
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.initChart()
+			this.initLine()
+		})
+	},
+	beforeDestroy() {},
+	methods: {
+		initChart() {
+			this.chart = echarts.init(this.$refs.left1, '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,
+					},
+					// formatter: value => {
+					// 	return value + calcAverageValue(this.data, value)
+					// },
+				},
+				series: [
+					{
+						name: '概括',
+						type: 'pie',
+						radius: [0, '85%'],
+						center: ['35%', '50%'],
+						label: {
+							formatter: '',
+							position: 'inner',
+							fontSize: 14,
+						},
+						labelLine: {
+							show: false,
+						},
+						data: this.data,
+					},
+				],
+			})
+		},
+		initLine() {
+			this.chart = echarts.init(this.$refs.left2)
+			this.setOptions2()
+		},
+		setOptions2() {
+			this.chart.setOption({
+				tooltip: {
+					trigger: 'axis',
+					formatter: '{a1}<br/>{b1}：{c1}',
+				},
+				legend: {
+					data: ['收入', '实际', '目标'],
+					textStyle: {
+						color: '#fff', //legend字体颜色
+					},
+					// selectedMode: false,
+				},
+				grid: {
+					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: [
+					{
+						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: 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],
+						itemStyle: {
+							color: '#F6D97E',
+						},
+						data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
+					},
+				],
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	.box {
+		padding: 0 0 5px 15px;
+		display: flex;
+		align-items: center;
+		.num {
+			font-size: 24px;
+			font-weight: 600;
+			margin: 0 10px;
+		}
+	}
+}
+
+.content1 {
+	// height: 200px;
+	height: 100%;
+
+	.chart1 {
+		margin: 0 auto;
+		width: 100%;
+		height: 192px;
+		background: transparent;
+	}
+}
+
+.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;
+	height: 100%;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	.chart2 {
+		height: 100%;
+	}
+
+	.tit {
+		font-size: 16px;
+		font-family: PingFangSC-Semibold, PingFang SC;
+		font-weight: 600;
+		color: #ffffff;
+		line-height: 22px;
+		position: relative;
+		padding-left: 15px;
+	}
+	.tit::after {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 3px;
+		left: 0px;
+		width: 4px;
+		height: 16px;
+		background: #00ffff;
+	}
+}
+</style>
diff --git a/src/views/bigScreen/management/left2.vue b/src/views/bigScreen/management/left2.vue
new file mode 100644
index 0000000..74c81a8
--- /dev/null
+++ b/src/views/bigScreen/management/left2.vue
@@ -0,0 +1,250 @@
+<template>
+	<div>
+		<container3 title="军用产业">
+			<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['总厂情况', '合同信息', '本月情况']"></bigScreenTabs>
+			<!-- <div style="height: 100%; width: 100%" ref="chart"></div> -->
+		</container3>
+	</div>
+</template>
+
+<script>
+import scalseBox from '../components/scaleBox.vue'
+import bigScreenHead from '../components/bigScreenHead/index.vue'
+import rocketTit from '../components/rocketTit/index.vue'
+import container3 from './components/container3/index.vue'
+import bigScreenTabs from '../components/bigScreenTabs/index.vue'
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+	mixins: [resize],
+	name: 'left2',
+	components: {
+		scalseBox,
+		bigScreenHead,
+		rocketTit,
+		container3,
+		bigScreenTabs,
+	},
+	data() {
+		return {
+			index: 0,
+			chart: null,
+			option: {
+				legend: {
+					data: ['利润', '利润预测', '利润目标完成率'],
+					textStyle: {
+						color: '#fff',
+					},
+				},
+				grid: {
+					left: '3%',
+					right: '6%',
+					bottom: '3%',
+					containLabel: true,
+				},
+				xAxis: [
+					{
+						type: 'category',
+						data: [
+							'2021-01',
+							'2021-02',
+							'2021-03',
+							'2021-04',
+							'2021-05',
+							'2021-06',
+							'2021-07',
+							'2021-08',
+							'2021-09',
+							'2021-10',
+							'2021-11',
+							'2021-12',
+						],
+						axisPointer: {
+							type: 'shadow',
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				yAxis: [
+					{
+						type: 'value',
+						name: '万元',
+						min: 0,
+						max: 250,
+						interval: 50,
+						axisLabel: {
+							formatter: '{value}',
+						},
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+					{
+						type: 'value',
+						min: 0,
+						max: 25,
+						interval: 5,
+						axisLabel: {
+							formatter: '{value} %',
+						},
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				grid: {
+					containLabel: true,
+					width: '99%',
+					left: 0,
+					top: 50,
+					bottom: 50,
+				},
+				dataZoom: {},
+				series: [
+					{
+						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)',
+						},
+						barGap: '0',
+					},
+					{
+						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%处的颜色为蓝
+									},
+								],
+							},
+						},
+					},
+					{
+						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],
+						itemStyle: {
+							color: '#55C5A2',
+						},
+						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)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.num {
+	font-size: 30px;
+	font-family: Roboto-Black, Roboto;
+	font-weight: 900;
+	color: #f6d97e;
+	line-height: 35px;
+	//   margin-right: 3px;
+}
+.num2 {
+	font-size: 30px;
+	font-family: Roboto-Black, Roboto;
+	font-weight: 900;
+	color: rgba(16, 152, 255, 1);
+	line-height: 35px;
+}
+</style>
diff --git a/src/views/bigScreen/management/right1.vue b/src/views/bigScreen/management/right1.vue
new file mode 100644
index 0000000..cbe1475
--- /dev/null
+++ b/src/views/bigScreen/management/right1.vue
@@ -0,0 +1,316 @@
+<template>
+	<div>
+		<container2 title="综合计划/绩效计划">
+			<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['完成率', '明细']"></bigScreenTabs>
+			<!-- <div style="height: 100%; width: 100%" ref="left1"></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> -->
+		</container2>
+	</div>
+</template>
+
+<script>
+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 colorList from '@/utils/colorPalette'
+// import {Liquid} from '@antv/g2plot';
+// import resize from '../../dashboard/mixins/resize'
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+export default {
+	// mixins: [resize],
+	name: 'left1',
+	components: {
+		rocketTit,
+		container2,
+		bigScreenTabs,
+		progressBar,
+	},
+	data() {
+		return {
+			index: 0,
+			colorList,
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.initChart()
+			this.initLine()
+		})
+	},
+	beforeDestroy() {},
+	methods: {
+		initChart() {
+			this.chart = echarts.init(this.$refs.left1, 'macarons')
+			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}',
+				},
+				legend: {
+					data: ['预测', '实际', '目标'],
+					textStyle: {
+						color: '#fff', //legend字体颜色
+					},
+					// selectedMode: false,
+				},
+				grid: {
+					containLabel: true,
+					left: 20,
+					right: 10,
+					top: 30,
+					bottom: 50,
+				},
+				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, 60, 70, 80, 70, 60, 50, 40, 30],
+					},
+					{
+						name: '实际',
+						type: 'bar',
+						barWidth: 15,
+						position: [0, 0],
+						itemStyle: {
+							color: 'rgba(90, 216, 166, 0.85)',
+						},
+						data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95, 50, 60, 70, 80, 70, 40, 30, 30],
+					},
+					{
+						name: '目标',
+						type: 'scatter',
+						symbol: 'rect',
+						symbolSize: [30, 4],
+						symbolOffset: [3, 0],
+						position: [0, 0],
+						itemStyle: {
+							color: '#F6D97E',
+						},
+						data: [10, 20, 36, 10, 10, 20, 10, 20, 36, 10, 10, 20, 90, 80, 90, 80, 90, 90, 90, 90],
+					},
+				],
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	.box {
+		padding: 0 0 5px 15px;
+		display: flex;
+		align-items: center;
+		.num {
+			font-size: 24px;
+			font-weight: 600;
+			margin: 0 10px;
+		}
+	}
+}
+
+.content1 {
+	// height: 200px;
+	height: 100%;
+
+	.chart1 {
+		margin: 0 auto;
+		width: 100%;
+		height: 192px;
+		background: transparent;
+	}
+}
+
+.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;
+	height: 100%;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	.chart2 {
+		height: 100%;
+	}
+
+	.tit {
+		font-size: 16px;
+		font-family: PingFangSC-Semibold, PingFang SC;
+		font-weight: 600;
+		color: #ffffff;
+		line-height: 22px;
+		position: relative;
+		padding-left: 15px;
+	}
+	.tit::after {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 3px;
+		left: 0px;
+		width: 4px;
+		height: 16px;
+		background: #00ffff;
+	}
+}
+</style>
diff --git a/src/views/bigScreen/management/right2.vue b/src/views/bigScreen/management/right2.vue
new file mode 100644
index 0000000..fd951f9
--- /dev/null
+++ b/src/views/bigScreen/management/right2.vue
@@ -0,0 +1,257 @@
+<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> -->
+			<bigScreenTabs
+				slot="datePicker"
+				v-model="index"
+				:titleArr="['总厂情况', '合同及产品生产信息', '本月情况']"
+			></bigScreenTabs>
+			<!-- <div style="height: 100%; width: 100%" ref="chart"></div> -->
+		</container3>
+	</div>
+</template>
+
+<script>
+import scalseBox from '../components/scaleBox.vue'
+import bigScreenHead from '../components/bigScreenHead/index.vue'
+import rocketTit from '../components/rocketTit/index.vue'
+import container3 from './components/container3/index.vue'
+import bigScreenTabs from '../components/bigScreenTabs/index.vue'
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+	mixins: [resize],
+	name: 'right2',
+	components: {
+		scalseBox,
+		bigScreenHead,
+		rocketTit,
+		container3,
+		bigScreenTabs,
+	},
+	data() {
+		return {
+			index: 0,
+			chart: null,
+			option: {
+				legend: {
+					data: ['利润', '利润预测', '利润目标完成率'],
+					textStyle: {
+						color: '#fff',
+					},
+				},
+				grid: {
+					left: '3%',
+					right: '6%',
+					bottom: '3%',
+					containLabel: true,
+				},
+				xAxis: [
+					{
+						type: 'category',
+						data: [
+							'2021-01',
+							'2021-02',
+							'2021-03',
+							'2021-04',
+							'2021-05',
+							'2021-06',
+							'2021-07',
+							'2021-08',
+							'2021-09',
+							'2021-10',
+							'2021-11',
+							'2021-12',
+						],
+						axisPointer: {
+							type: 'shadow',
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				yAxis: [
+					{
+						type: 'value',
+						name: '万元',
+						min: 0,
+						max: 250,
+						interval: 50,
+						axisLabel: {
+							formatter: '{value}',
+						},
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+					{
+						type: 'value',
+						min: 0,
+						max: 25,
+						interval: 5,
+						axisLabel: {
+							formatter: '{value} %',
+						},
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				grid: {
+					containLabel: true,
+					width: '99%',
+					left: 0,
+					top: 50,
+					bottom: 50,
+				},
+				dataZoom: {},
+				series: [
+					{
+						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)',
+						},
+					},
+					{
+						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%处的颜色为蓝
+									},
+								],
+							},
+						},
+					},
+					{
+						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],
+						itemStyle: {
+							normal: {
+								color: '#F6D97E',
+							},
+						},
+						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)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.num {
+	font-size: 30px;
+	font-family: Roboto-Black, Roboto;
+	font-weight: 900;
+	color: #f6d97e;
+	line-height: 35px;
+	//   margin-right: 3px;
+}
+.num2 {
+	font-size: 30px;
+	font-family: Roboto-Black, Roboto;
+	font-weight: 900;
+	color: rgba(16, 152, 255, 1);
+	line-height: 35px;
+}
+</style>