diff --git a/src/views/bigScreen/components/progress/index.vue b/src/views/bigScreen/components/progress/index.vue
index 3427fbb..04f50f8 100644
--- a/src/views/bigScreen/components/progress/index.vue
+++ b/src/views/bigScreen/components/progress/index.vue
@@ -1,11 +1,21 @@
 <template>
 	<div style="min-width: 100px">
-		<el-progress :show-text="false" :stroke-width="6" :percentage="percentage"></el-progress>
+		<el-progress :show-text="showText" :stroke-width="strokeWidth" :percentage="percentage"></el-progress>
 	</div>
 </template>
 <script>
 export default {
 	props: {
+		showText: {
+			type: Boolean,
+			require: true,
+			default: false,
+		},
+		strokeWidth: {
+			type: Number,
+			require: true,
+			default: 6,
+		},
 		percentage: {
 			type: [Number, String],
 			require: true,
diff --git a/src/views/bigScreen/drivingCabin/left1.vue b/src/views/bigScreen/drivingCabin/left1.vue
index 804426c..4658fc6 100644
--- a/src/views/bigScreen/drivingCabin/left1.vue
+++ b/src/views/bigScreen/drivingCabin/left1.vue
@@ -12,7 +12,6 @@
 					<span>总完成任务/完成率</span>
 					<i class="num">55/80%</i>
 					<progressBar :percentage="70" />
-					<el-progress :show-text="false" :stroke-width="6" :percentage="70"></el-progress>
 				</div>
 			</div>
 		</container2>
diff --git a/src/views/bigScreen/securityManage/bottom1.vue b/src/views/bigScreen/securityManage/bottom1.vue
new file mode 100644
index 0000000..519970f
--- /dev/null
+++ b/src/views/bigScreen/securityManage/bottom1.vue
@@ -0,0 +1,382 @@
+<template>
+  <div>
+    <container4 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>
+      <div style="height:100%;width:100%;" ref="chart"></div>
+    </container4>
+  </div>
+
+</template>
+
+<script>
+import container4 from "../components/container4/index.vue";
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+  mixins: [resize],
+  name: 'bottom1',
+  components: {
+    container4,
+  },
+  data () {
+    return {
+      dateRange: [],
+      chart: null,
+
+      option: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+          },
+          formatter: function (params, ticket, callback) {
+            console.log(params)
+            var res = params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
+            }
+            return res;
+          }
+        },
+        grid: {
+          top: '5%',
+          left: '3%',
+          right: '40%',
+          bottom: '3%',
+          containLabel: true
+        },
+        legend: {
+          right: 'center',
+          data: ['收入', '利润', '目标完成'],
+          textStyle: {
+            color: '#fff'
+          },
+        },
+        xAxis: {
+          type: 'category',
+          data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
+          splitLine: {
+            show: false//不显示网格线
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgb(255, 255, 255)'
+            },
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: false//不显示网格线
+          },
+          splitArea: {
+            show: false//不显示网格区域
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgb(255, 255, 255)'
+            },
+          }
+        },
+        series: [
+          {
+            name: '利润',
+            type: 'bar',
+            stack: 'total',
+            data: [120, 132, 101, 134, 90, 230, 210],
+            itemStyle: {
+              color: 'rgb(116,212,184)',
+            },
+            //             label: {
+            //     show : true,
+            //     position : 'top',
+            //     formatter : "{c}",
+            //     textStyle : {
+            //         color: '#fff'
+            //     }
+            // }
+          },
+          {
+            name: '收入',
+            type: 'bar',
+            stack: 'total',
+            data: [320, 332, 301, 334, 390, 330, 320],
+            barWidth: 30,
+            itemStyle: {
+              color: 'rgb(170,202,253)'
+            },
+          },
+          {
+            name: '目标完成',
+            type: 'bar',
+            stack: 'total',
+            data: [220, 182, 191, 234, 290, 330, 310],
+            itemStyle: {
+              color: 'rgb(245,217,126)'
+            },
+          },
+
+
+          // {
+          //   hoverAnimation: false,
+          //   type: 'pie',
+          //   radius: ['55%', '65%'],
+          //   center: ['75%', '50%'],
+          //   roseType: 'area',
+          //   itemStyle: {
+          //     borderRadius: 5,
+          //     color: 'rgb(245,217,126)',
+          //   },
+          //   data: [
+          //     { value: 30, name: '目标' },
+          //   ],
+          //   label: {
+          //     formatter: '{b}：{c}',
+          //   },
+          //   labelLine: {
+          //     showAbove: true,
+          //     length: -60,
+          //     length2: 145,
+          //   }
+          //   // label: {
+          //   //   fontSize: 14,
+          //   //   position: 'outer',
+          //   //   alignTo: 'edge',
+          //   //   margin: 10,
+          //   // },
+          //   // labelLine: {
+          //   //   showAbove: true,
+          //   // }
+          // },
+          //进度线
+          // {
+          //   type: "pie",
+          //   radius: ['55%', '65%'],
+          //   center: ['75%', '50%'],
+          //   itemStyle: {
+          //     borderRadius: 5,
+          //     color: 'rgb(245,217,126)',
+          //   },
+          //   hoverAnimation: false,
+          //   clockwise: false,
+          //   data: [
+          //     {
+          //       name: "",
+          //       value: 80, //进度
+          //       labelLine: {
+          //         show: false
+          //       },
+
+          //       emphasis: {
+          //         labelLine: {
+          //           show: false
+          //         },
+          //         itemStyle: {
+          //           // color: "#5886f0"
+          //         }
+          //       }
+          //     },
+          //     {
+          //       //画剩余的刻度圆环
+          //       name: "",
+          //       value: 100 - 80,
+          //       clockwise: false,
+          //       itemStyle: {
+          //         color: "rgba(255,255,255,0)"
+          //       },
+          //       label: {
+          //         show: false
+          //       },
+          //       labelLine: {
+          //         show: false
+          //       },
+          //       emphasis: {
+          //         labelLine: {
+          //           show: false
+          //         },
+          //         itemStyle: {
+          //           color: "rgba(255,255,255,0)"
+          //         }
+          //       }
+          //     }
+          //   ],
+          //   label: {
+          //     formatter: '{b}：{c}',
+          //   },
+          //   labelLine: {
+          //     showAbove: true,
+          //     length: -60,
+          //     length2: 145,
+          //   }
+          // },
+          {
+            name: '利润',
+            type: 'pie',
+            hoverAnimation: false,
+            radius: ['55%', '65%'],
+            center: ['75%', '50%'],
+            labelLine: {
+              length: 30
+            },
+            label: {
+              formatter: '{b}：{c}',
+              borderWidth: 1,
+              borderRadius: 4,
+              alignTo: 'edge',
+              margin: '10'
+            },
+            itemStyle: {
+              borderRadius: 5,
+              color: 'rgb(116,212,184)'
+            },
+            data: [
+              { value: 10, name: '利润' },
+              {
+                //画剩余的刻度圆环
+                name: "",
+                value: 100 - 80,
+                clockwise: false,
+                itemStyle: {
+                  color: "rgba(255,255,255,0)"
+                },
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false
+                  },
+                  itemStyle: {
+                    color: "rgba(255,255,255,0)"
+                  }
+                }
+              }
+            ],
+          },
+          {
+            name: '目标',
+            type: 'pie',
+            hoverAnimation: false,
+            radius: ['40%', '50%'],
+            center: ['75%', '50%'],
+            labelLine: {
+              length: 30
+            },
+            label: {
+              formatter: '{b}：{c}',
+              borderWidth: 1,
+              borderRadius: 4,
+              alignTo: 'edge',
+              margin: '10'
+            },
+            itemStyle: {
+              borderRadius: 5,
+              color: 'rgb(245,217,126)'
+            },
+            data: [
+              { value: 80, name: '目标' },
+              {
+                //画剩余的刻度圆环
+                name: "",
+                value: 100 - 80,
+                clockwise: false,
+                itemStyle: {
+                  color: "rgba(255,255,255,0)"
+                },
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false
+                  },
+                  itemStyle: {
+                    color: "rgba(255,255,255,0)"
+                  }
+                }
+              }
+            ],
+          },
+                    {
+            name: '收入',
+            type: 'pie',
+            hoverAnimation: false,
+            radius: ['70%', '80%'],
+            center: ['75%', '50%'],
+            labelLine: {
+              length: 30
+            },
+            label: {
+              formatter: '{b}：{c}',
+              borderWidth: 1,
+              borderRadius: 4,
+              alignTo: 'edge',
+              margin: '10'
+            },
+            itemStyle: {
+              borderRadius: 5,
+              color: 'rgb(170,202,253)'
+            },
+            data: [
+              { value: 60, name: '收入' },
+              {
+                //画剩余的刻度圆环
+                name: "",
+                value: 60,
+                clockwise: false,
+                itemStyle: {
+                  color: "rgba(255,255,255,0)"
+                },
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false
+                  },
+                  itemStyle: {
+                    color: "rgba(255,255,255,0)"
+                  }
+                }
+              }
+            ],
+          }
+        ]
+      }
+    }
+  },
+  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, 'macarons');
+      this.chart.setOption(this.option);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/bigScreen/securityManage/bottom2.vue b/src/views/bigScreen/securityManage/bottom2.vue
new file mode 100644
index 0000000..2343c0d
--- /dev/null
+++ b/src/views/bigScreen/securityManage/bottom2.vue
@@ -0,0 +1,348 @@
+<template>
+  <div>
+    <container4 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>
+      <div style="height:100%;width:100%;" ref="chart"></div>
+    </container4>
+  </div>
+
+</template>
+
+<script>
+import container4 from "../components/container4/index.vue";
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+import 'echarts-liquidfill'
+export default {
+  mixins: [resize],
+  name: 'bottom1',
+  components: {
+    container4,
+  },
+  data () {
+    return {
+      dateRange: [],
+      option: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+          },
+          formatter: function (params, ticket, callback) {
+            console.log(params)
+            var res = params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
+            }
+            setTimeout(function () {
+              // 仅为了模拟异步回调
+              callback(ticket, res);
+            }, 100)
+            return 'loading...';
+          }
+        },
+        legend: {
+          data: ['交付产品', '装药量'],
+          textStyle: {
+            color: '#fff'
+          },
+        },
+        grid: {
+          top: '10%',
+          left: '3%',
+          right: '35%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            axisLabel: {
+              formatter: function (value) {
+                return Math.abs(value);//显示的数值都取绝对值
+              }
+            },
+            type: 'value',
+            splitLine: {
+              show: false//不显示网格线
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'rgb(255, 255, 255)'
+              },
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'category',
+            axisTick: { show: false },
+            // data : ['0~5岁','5~10岁','10-30岁','30-50岁','50-70岁','70-100','100以上']
+            data: ['2021.12', '2021.11', '2021.10', '2021.09', '2021.08'].reverse(),
+            splitLine: {
+              show: false//不显示网格线
+            },
+            splitArea: {
+              show: false//不显示网格区域
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'rgb(255, 255, 255)'
+              },
+            },
+          }
+        ],
+        title: {
+          text: `${80}%`,
+          left: "80%",
+          top: "40%",
+          textAlign: 'center',
+          textStyle: {
+            fontWeight: "normal",
+            fontSize: 26,
+            fontWeight: 'bold',
+            color: "rgb(255,255,255)",
+          },
+        },
+        series: [
+          {
+            name: '交付产品',
+            type: 'bar',
+            stack: '总量',
+            barWidth: 20,
+            label: {
+              normal: {
+                show: true,
+                position: 'inside',
+
+              }
+            },
+            data: [320, 302, 341, 374, 390],
+            itemStyle: {
+              color: 'rgb(115,208,183)'
+            },
+          },
+          {
+            name: '装药量',
+            type: 'bar',
+            stack: '总量',
+            label: {
+              normal: {
+                show: true,
+                position: 'inside',
+                formatter: function (v) { return Math.abs(v.data) }
+              }
+            },
+
+            data: [-120, -132, -101, -134, -190],
+            itemStyle: {
+              color: 'rgb(151,186,255)'
+            },
+          },
+          {
+            type: 'liquidFill',
+            radius: '40%',
+            z: 1,
+            center: ['50%', '50%'],
+            amplitude: 20,
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 1,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#324791',
+                },
+                {
+                  offset: 1,
+                  color: '#449090',
+                },
+              ],
+              globalCoord: false,
+            },
+            data: [
+              0.4,
+              {
+                value: 0.4,
+                direction: 'left',
+              },
+            ],
+            backgroundStyle: {
+              borderWidth: 1,
+              color: 'transparent',
+            },
+            label: {
+              normal: {
+                formatter: '',
+              },
+            },
+            outline: {
+              show: true,
+              itemStyle: {
+                borderWidth: 0,
+              },
+              borderDistance: 0,
+            },
+          },
+
+          {
+            type: "liquidFill", // 图表类型
+            radius: "70%",
+            center: ["80%", "50%"],
+            data: [
+              80 / 100,
+              80 / 100,
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "rgba(255,255,255,0)"
+            },
+            label: {
+              normal: {
+                show: false, //不显示label  用副标题代替了
+                formatter: (0.5 * 100).toFixed(0) + "%",
+                textStyle: {
+                  fontSize: 38,
+                  color: "black"
+                }
+              }
+            },
+            color: [  //color一定要是个数组 ，每一项对应一个波浪，可以给每个波浪单独配置颜色
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "rgba(82,157,240,0.1)"
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(104,222,219,0.5)"
+                  }
+                ],
+                globalCoord: false
+              },
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "rgba(82,157,240,0.1)"
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(104,222,219,0.5)"
+                  }
+                ],
+                globalCoord: false
+              },
+            ],
+            outline: {
+              show: false
+            }
+          },
+
+          //进度线
+          {
+            type: "pie",
+            center: ["80%", "50%"],
+            radius: ["75%", "80%"], //进度线粗细
+            hoverAnimation: false,
+            clockwise: false,
+            data: [
+              {
+                name: "",
+                value: 80, //进度
+                labelLine: {
+                  show: false
+                },
+                itemStyle: {
+                  color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 1,
+                    y2: 2,
+                    colorStops: [
+                      // !! 在此添加渐变过程色 !!
+                      { offset: 0, color: "#68DEDB" },
+                      { offset: 1, color: "#529DF0" }
+                    ]
+                  }
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false
+                  },
+                  itemStyle: {
+                    // color: "#5886f0"
+                  }
+                }
+              },
+              {
+                //画剩余的刻度圆环
+                name: "",
+                value: 100 - 80,
+                clockwise: false,
+                itemStyle: {
+                  color: "rgba(255,255,255,0)"
+                },
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false
+                  },
+                  itemStyle: {
+                    color: "rgba(255,255,255,0)"
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      }
+
+
+    }
+  },
+  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, 'macarons');
+      this.chart.setOption(this.option);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/bigScreen/securityManage/center.png b/src/views/bigScreen/securityManage/center.png
new file mode 100644
index 0000000..88b5e78
Binary files /dev/null and b/src/views/bigScreen/securityManage/center.png differ
diff --git a/src/views/bigScreen/securityManage/center.vue b/src/views/bigScreen/securityManage/center.vue
new file mode 100644
index 0000000..c79e570
--- /dev/null
+++ b/src/views/bigScreen/securityManage/center.vue
@@ -0,0 +1,177 @@
+<template>
+	<div>
+		<container3>
+			<img class="img" src="./center.png" style="width: 100%; height: 100%" />
+			<div class="con_right">
+				<div class="con_title con_title_bg1">
+					<img src="./img/left1/icon.png" alt="" />
+					<span style="margin-left: 2px">一级危险点</span>
+				</div>
+				<div class="com_img"><img src="./img/left1/icon1.png" alt="" /></div>
+			</div>
+			<div class="con_right con_two">
+				<div class="con_title con_title_bg2">
+					<img src="./img/left1/icon.png" alt="" />
+					<span style="margin-left: 2px">二级危险点</span>
+				</div>
+				<div class="com_img"><img src="./img/left1/icon2.png" alt="" /></div>
+			</div>
+			<div class="con_right con_three">
+				<div class="con_title con_title_bg3">
+					<img src="./img/left1/icon.png" alt="" />
+					<span style="margin-left: 2px">三级危险点</span>
+				</div>
+				<div class="com_img"><img src="./img/left1/icon3.png" alt="" /></div>
+			</div>
+			<div class="data">
+				<div class="data-item">
+					<div><span style="font-weight: bold">一级危险点/危险源数量</span></div>
+					<div class="box"><i>20/16</i><span class="num2">个</span></div>
+				</div>
+				<div class="data-item">
+					<div><span style="font-weight: bold">二级危险点/危险源数量</span></div>
+					<div class="box"><i>13/23</i><span class="num2">个</span></div>
+				</div>
+				<div class="data-item">
+					<div><span style="font-weight: bold">三级危险点/危险源数量</span></div>
+					<div class="box"><i>10/8</i><span class="num2">个</span></div>
+				</div>
+				<div class="data-item">
+					<div><span style="font-weight: bold">四级危险源数量</span></div>
+					<div class="box"><i>8</i><span class="num2">个</span></div>
+				</div>
+			</div>
+		</container3>
+	</div>
+</template>
+
+<script>
+import container3 from '../components/container3/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: {
+		container3,
+		rocketTit,
+		progressBar,
+	},
+	data() {
+		return {}
+	},
+	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;
+	justify-content: flex-end;
+	margin: 20px 0 0;
+	background: rgba(2, 18, 63, 0.33);
+	color: #ffffff;
+	font-size: 18px;
+	.data-item {
+		// flex: 1;
+		margin-left: 15px;
+		width: 22%;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		> div {
+			margin: 5px 0;
+			text-align: center;
+			font-size: 16px;
+			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: 138px;
+		position: absolute;
+		top: 41%;
+		right: 43%;
+		color: #fff;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		.con_title {
+			width: 100%;
+			height: 42px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			img {
+				width: 18px;
+				height: 18px;
+				margin-right: 3px;
+			}
+		}
+		.con_title_bg1 {
+			background: url('./img/left1/1.png') no-repeat;
+		}
+		.con_title_bg2 {
+			background: url('./img/left1/2.png') no-repeat;
+		}
+		.con_title_bg3 {
+			background: url('./img/left1/3.png') no-repeat;
+		}
+		.com_img {
+			margin-top: 5px;
+			width: 40px;
+			height: 40px;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+	.con_two {
+		top: 37%;
+		left: 13%;
+	}
+	.con_three {
+		top: 70%;
+		right: 16%;
+	}
+}
+</style>
diff --git a/src/views/bigScreen/securityManage/center2.vue b/src/views/bigScreen/securityManage/center2.vue
new file mode 100644
index 0000000..d982fe4
--- /dev/null
+++ b/src/views/bigScreen/securityManage/center2.vue
@@ -0,0 +1,163 @@
+<template>
+	<div>
+		<container4 title="今日动态">
+			<vue-seamless-scroll
+				:data="listData"
+				class="warp"
+				:class-option="{
+					singleHeight: 42,
+				}"
+			>
+				<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>
diff --git a/src/views/bigScreen/securityManage/components/container/index.vue b/src/views/bigScreen/securityManage/components/container/index.vue
new file mode 100644
index 0000000..17963c2
--- /dev/null
+++ b/src/views/bigScreen/securityManage/components/container/index.vue
@@ -0,0 +1,121 @@
+<template>
+	<div class="container2">
+		<div class="tit">
+			<rocketTit>{{ title }}</rocketTit>
+			<hr style="border: 0; border-bottom: 1px solid #91d5fe" />
+			<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: 586px;
+	background-size: cover;
+	color: #ffffff;
+	font-size: 16px;
+	font-family: PingFangSC-Semibold, PingFang SC;
+	font-weight: 600;
+
+	.tit {
+		border-bottom: 1px solid #91d5fe;
+		padding: 0 5px;
+		position: relative;
+		&::before {
+			content: ' ';
+			position: absolute;
+			left: 0;
+			bottom: -4px;
+			width: 6px;
+			height: 6px;
+			background-color: #91d5fe;
+			border-radius: 4px;
+		}
+		&::after {
+			content: ' ';
+			position: absolute;
+			right: 0;
+			bottom: -4px;
+			width: 6px;
+			height: 6px;
+			background-color: #91d5fe;
+			border-radius: 4px;
+		}
+		.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/securityManage/components/container2/bg.png b/src/views/bigScreen/securityManage/components/container2/bg.png
new file mode 100644
index 0000000..d454cea
Binary files /dev/null and b/src/views/bigScreen/securityManage/components/container2/bg.png differ
diff --git a/src/views/bigScreen/securityManage/components/container2/index.vue b/src/views/bigScreen/securityManage/components/container2/index.vue
new file mode 100644
index 0000000..41a1c85
--- /dev/null
+++ b/src/views/bigScreen/securityManage/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/securityManage/components/container3/bg.png b/src/views/bigScreen/securityManage/components/container3/bg.png
new file mode 100644
index 0000000..faa0c5f
Binary files /dev/null and b/src/views/bigScreen/securityManage/components/container3/bg.png differ
diff --git a/src/views/bigScreen/securityManage/components/container3/index.vue b/src/views/bigScreen/securityManage/components/container3/index.vue
new file mode 100644
index 0000000..8ff6954
--- /dev/null
+++ b/src/views/bigScreen/securityManage/components/container3/index.vue
@@ -0,0 +1,104 @@
+
+
+<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: 673px;
+  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 {
+    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/securityManage/components/container4/bg.png b/src/views/bigScreen/securityManage/components/container4/bg.png
new file mode 100644
index 0000000..7f938fa
Binary files /dev/null and b/src/views/bigScreen/securityManage/components/container4/bg.png differ
diff --git a/src/views/bigScreen/securityManage/components/container4/index.vue b/src/views/bigScreen/securityManage/components/container4/index.vue
new file mode 100644
index 0000000..31fda5c
--- /dev/null
+++ b/src/views/bigScreen/securityManage/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/securityManage/img/center2/1.png b/src/views/bigScreen/securityManage/img/center2/1.png
new file mode 100644
index 0000000..9b5791f
Binary files /dev/null and b/src/views/bigScreen/securityManage/img/center2/1.png differ
diff --git a/src/views/bigScreen/securityManage/img/center2/2.png b/src/views/bigScreen/securityManage/img/center2/2.png
new file mode 100644
index 0000000..2ea88f9
Binary files /dev/null and b/src/views/bigScreen/securityManage/img/center2/2.png differ
diff --git a/src/views/bigScreen/securityManage/img/center2/3.png b/src/views/bigScreen/securityManage/img/center2/3.png
new file mode 100644
index 0000000..bfa8a57
Binary files /dev/null and b/src/views/bigScreen/securityManage/img/center2/3.png differ
diff --git a/src/views/bigScreen/securityManage/img/center2/4.png b/src/views/bigScreen/securityManage/img/center2/4.png
new file mode 100644
index 0000000..f495c57
Binary files /dev/null and b/src/views/bigScreen/securityManage/img/center2/4.png differ
diff --git a/src/views/bigScreen/securityManage/img/center2/5.png b/src/views/bigScreen/securityManage/img/center2/5.png
new file mode 100644
index 0000000..037ba11
Binary files /dev/null and b/src/views/bigScreen/securityManage/img/center2/5.png differ
diff --git a/src/views/bigScreen/securityManage/img/center2/6.png b/src/views/bigScreen/securityManage/img/center2/6.png
new file mode 100644
index 0000000..aed09a4
Binary files /dev/null and b/src/views/bigScreen/securityManage/img/center2/6.png differ
diff --git a/src/views/bigScreen/securityManage/img/center2/7.png b/src/views/bigScreen/securityManage/img/center2/7.png
new file mode 100644
index 0000000..deaeccb
Binary files /dev/null and b/src/views/bigScreen/securityManage/img/center2/7.png differ
diff --git a/src/views/bigScreen/securityManage/img/center2/8.png b/src/views/bigScreen/securityManage/img/center2/8.png
new file mode 100644
index 0000000..0a53b5f
Binary files /dev/null and b/src/views/bigScreen/securityManage/img/center2/8.png differ
diff --git a/src/views/bigScreen/securityManage/img/left1/1.jpg b/src/views/bigScreen/securityManage/img/left1/1.jpg
new file mode 100644
index 0000000..3f7d81f
Binary files /dev/null and b/src/views/bigScreen/securityManage/img/left1/1.jpg differ
diff --git a/src/views/bigScreen/securityManage/img/left1/1.png b/src/views/bigScreen/securityManage/img/left1/1.png
new file mode 100644
index 0000000..40eab14
Binary files /dev/null and b/src/views/bigScreen/securityManage/img/left1/1.png differ
diff --git a/src/views/bigScreen/securityManage/img/left1/2.png b/src/views/bigScreen/securityManage/img/left1/2.png
new file mode 100644
index 0000000..6d58b95
Binary files /dev/null and b/src/views/bigScreen/securityManage/img/left1/2.png differ
diff --git a/src/views/bigScreen/securityManage/img/left1/3.png b/src/views/bigScreen/securityManage/img/left1/3.png
new file mode 100644
index 0000000..c346fa5
Binary files /dev/null and b/src/views/bigScreen/securityManage/img/left1/3.png differ
diff --git a/src/views/bigScreen/securityManage/img/left1/icon.png b/src/views/bigScreen/securityManage/img/left1/icon.png
new file mode 100644
index 0000000..25e46af
Binary files /dev/null and b/src/views/bigScreen/securityManage/img/left1/icon.png differ
diff --git a/src/views/bigScreen/securityManage/img/left1/icon1.png b/src/views/bigScreen/securityManage/img/left1/icon1.png
new file mode 100644
index 0000000..a1ff3c0
Binary files /dev/null and b/src/views/bigScreen/securityManage/img/left1/icon1.png differ
diff --git a/src/views/bigScreen/securityManage/img/left1/icon2.png b/src/views/bigScreen/securityManage/img/left1/icon2.png
new file mode 100644
index 0000000..168633a
Binary files /dev/null and b/src/views/bigScreen/securityManage/img/left1/icon2.png differ
diff --git a/src/views/bigScreen/securityManage/img/left1/icon3.png b/src/views/bigScreen/securityManage/img/left1/icon3.png
new file mode 100644
index 0000000..b31c407
Binary files /dev/null and b/src/views/bigScreen/securityManage/img/left1/icon3.png differ
diff --git a/src/views/bigScreen/securityManage/index.vue b/src/views/bigScreen/securityManage/index.vue
index 8c18df6..9abd1e2 100644
--- a/src/views/bigScreen/securityManage/index.vue
+++ b/src/views/bigScreen/securityManage/index.vue
@@ -1,18 +1,117 @@
 <template>
-    <div class="securityManage">
-      安全管理
-    </div>
+	<div class="drivingCabin">
+		<div class="left1">
+			<left1></left1>
+		</div>
+		<div class="left2">
+			<left2></left2>
+		</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>
 </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'
+import bottom1 from './bottom1.vue'
+import bottom2 from './bottom2.vue'
 export default {
-  name: 'SecurityManage',
-  components: {
-  }
+	name: 'SecurityManage',
+	components: {
+		scalseBox,
+		bigScreenHead,
+		rocketTit,
+		container1,
+		left1,
+		left2,
+		center1,
+		right1,
+		right2,
+		bottom1,
+		bottom2,
+		center2,
+	},
 }
 </script>
 
 <style lang="scss" scoped>
+.drivingCabin {
+	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/securityManage/left1.vue b/src/views/bigScreen/securityManage/left1.vue
new file mode 100644
index 0000000..a07e835
--- /dev/null
+++ b/src/views/bigScreen/securityManage/left1.vue
@@ -0,0 +1,426 @@
+<template>
+	<div>
+		<container title="危险点危险源区域分布视频监控情况">
+			<div class="wrap">
+				<el-row class="content1">
+					<el-col :span="24">
+						<!-- <div id="left1" ref="left1" class="chart1"></div> -->
+						<div style="height: 270px; margin: 14px 0 8px">
+							<img style="width: 100%; height: 100%" src="./img/left1/1.jpg" alt="" />
+						</div>
+						<div style="text-align: right; margin-bottom: 14px; font-size: 14px">
+							<span style="opacity: 0.9">视频监控 / </span>
+							<span style="opacity: 0.7">奖惩播放 / </span>
+							<span style="opacity: 0.7">典型案例播放</span>
+						</div>
+						<div style="display: flex; align-items: center; margin-bottom: 28px">
+							<span>危险点视频覆盖率</span>
+							<progressBar :showText="true" :strokeWidth="10" :percentage="89" style="flex: 1; margin-left: 10px" />
+						</div>
+					</el-col>
+					<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,
+						}"
+					>
+						<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">{{ item.name }}</el-col>
+									<el-col style="text-align: center" :span="7">
+										<el-tag v-if="item.level == '一级'" style="background-color: unset" type="danger" effect="plain">
+											{{ item.level }}</el-tag
+										>
+										<el-tag
+											v-else-if="item.level == '二级'"
+											style="background-color: unset"
+											type="warning"
+											effect="plain"
+										>
+											{{ item.level }}</el-tag
+										>
+										<el-tag v-else style="background-color: unset" effect="plain"> {{ item.level }}</el-tag>
+									</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-row>
+							</li>
+						</ul>
+					</vue-seamless-scroll>
+				</el-row>
+			</div>
+		</container>
+	</div>
+</template>
+
+<script>
+import rocketTit from '../components/rocketTit/index.vue'
+import container from './components/container/index.vue'
+import bigScreenTabs from '../components/bigScreenTabs/index.vue'
+import progressBar from '@/views/bigScreen/components/progress/index.vue'
+import colorList from '@/utils/colorPalette'
+import vueSeamlessScroll from 'vue-seamless-scroll'
+// 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,
+		container,
+		bigScreenTabs,
+		progressBar,
+		vueSeamlessScroll,
+	},
+	data() {
+		return {
+			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,
+			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()
+		})
+	},
+	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: [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>
+::v-deep .el-progress-bar__inner {
+	background: linear-gradient(180deg, #fad961 0%, #f76b1c 100%) !important;
+}
+.warp-scroll {
+	height: 126px;
+	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: rgba(42, 67, 125, 1);
+			// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
+			margin-bottom: 1px;
+			img {
+				vertical-align: sub;
+				margin-right: 5px;
+			}
+		}
+	}
+}
+.wrap {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+}
+
+.content1 {
+	// height: 200px;
+	height: 100%;
+
+	.chart1 {
+		margin: 0 auto;
+		width: 100%;
+		height: 192px;
+		background: transparent;
+	}
+}
+.box {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.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/securityManage/left2.vue b/src/views/bigScreen/securityManage/left2.vue
new file mode 100644
index 0000000..eb5881d
--- /dev/null
+++ b/src/views/bigScreen/securityManage/left2.vue
@@ -0,0 +1,252 @@
+<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>
+      <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 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,
+  },
+  data () {
+    return {
+      dateRange: [],
+      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>
\ No newline at end of file
diff --git a/src/views/bigScreen/securityManage/right1-1.png b/src/views/bigScreen/securityManage/right1-1.png
new file mode 100644
index 0000000..b51a443
Binary files /dev/null and b/src/views/bigScreen/securityManage/right1-1.png differ
diff --git a/src/views/bigScreen/securityManage/right1-2.png b/src/views/bigScreen/securityManage/right1-2.png
new file mode 100644
index 0000000..5f04e31
Binary files /dev/null and b/src/views/bigScreen/securityManage/right1-2.png differ
diff --git a/src/views/bigScreen/securityManage/right1.vue b/src/views/bigScreen/securityManage/right1.vue
new file mode 100644
index 0000000..e7f4080
--- /dev/null
+++ b/src/views/bigScreen/securityManage/right1.vue
@@ -0,0 +1,353 @@
+<template>
+	<div>
+		<container2 title="重点危险源部门分布">
+			<div style="height: 100%; width: 100%" ref="left1"></div>
+		</container2>
+		<container2 title="重大危险点部门分布" style="margin-top: 10px">
+			<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 {
+			colorList,
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.initChart()
+			this.initLine()
+		})
+	},
+	beforeDestroy() {},
+	methods: {
+		initChart() {
+			this.chart = echarts.init(this.$refs.left1)
+			this.setOptions()
+		},
+		setOptions() {
+			this.chart.setOption({
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'shadow',
+					},
+				},
+				legend: {
+					data: ['一级危险源', '二级危险源', '三级危险源', '四级危险源'],
+					textStyle: {
+						color: '#fff', //legend字体颜色
+					},
+				},
+				grid: {
+					left: 20,
+					right: 20,
+					top: 30,
+					bottom: 50,
+					containLabel: true,
+				},
+				dataZoom: {
+					type: 'slider',
+					// start: 0,
+					// end: 50,
+					textStyle: {
+						color: '#fff',
+					},
+				},
+				xAxis: [
+					{
+						type: 'category',
+						data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
+						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',
+					},
+				],
+				series: [
+					{
+						name: '四级危险源',
+						type: 'bar',
+						stack: 'Ad',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: '#FF9F43',
+						},
+						barWidth: 30,
+						data: [120, 132, 101, 134, 90, 230, 210],
+					},
+					{
+						name: '三级危险源',
+						type: 'bar',
+						stack: 'Ad',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: '#F7DC87',
+						},
+						barWidth: 30,
+						data: [220, 182, 191, 234, 290, 330, 310],
+					},
+					{
+						name: '二级危险源',
+						type: 'bar',
+						stack: 'Ad',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: '#55C5A2',
+						},
+						barWidth: 30,
+						data: [150, 232, 201, 154, 190, 330, 410],
+					},
+					{
+						name: '一级危险源',
+						type: 'bar',
+						stack: 'Ad',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: '#5B8FF9',
+						},
+						barWidth: 30,
+						data: [150, 232, 201, 154, 190, 330, 410],
+					},
+				],
+			})
+		},
+		initLine() {
+			this.chart = echarts.init(this.$refs.left2)
+			this.setOptions2()
+		},
+		setOptions2() {
+			this.chart.setOption({
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'shadow',
+					},
+				},
+				legend: {
+					data: ['一级危险源', '二级危险源', '三级危险源'],
+					textStyle: {
+						color: '#fff', //legend字体颜色
+					},
+				},
+				grid: {
+					left: 20,
+					right: 20,
+					top: 30,
+					bottom: 50,
+					containLabel: true,
+				},
+				dataZoom: {
+					type: 'slider',
+					// start: 0,
+					// end: 50,
+					textStyle: {
+						color: '#fff',
+					},
+				},
+				xAxis: [
+					{
+						type: 'category',
+						data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
+						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',
+					},
+				],
+				series: [
+					{
+						name: '三级危险源',
+						type: 'bar',
+						stack: 'Ad',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: '#F7DC87',
+						},
+						barWidth: 30,
+						data: [220, 182, 191, 234, 290, 330, 310],
+					},
+					{
+						name: '二级危险源',
+						type: 'bar',
+						stack: 'Ad',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: '#55C5A2',
+						},
+						barWidth: 30,
+						data: [150, 232, 201, 154, 190, 330, 410],
+					},
+					{
+						name: '一级危险源',
+						type: 'bar',
+						stack: 'Ad',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: '#5B8FF9',
+						},
+						barWidth: 30,
+						data: [150, 232, 201, 154, 190, 330, 410],
+					},
+				],
+			})
+		},
+	},
+}
+</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/securityManage/right2.vue b/src/views/bigScreen/securityManage/right2.vue
new file mode 100644
index 0000000..f7e3ea4
--- /dev/null
+++ b/src/views/bigScreen/securityManage/right2.vue
@@ -0,0 +1,253 @@
+<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>
+      <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 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,
+  },
+  data () {
+    return {
+      dateRange: [],
+      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>
\ No newline at end of file