安全管理-2

src/views/bigScreen/securityManage/components/container3/index.vue

@@ -1,5 +1,3 @@
-
-
 <template>
 	<div class="container3">
 		<div class="tit">
@@ -19,7 +17,7 @@
 </template>
 
 <script>
-import rocketTit from "../../../components/rocketTit/index.vue";
+import rocketTit from '../../../components/rocketTit/index.vue'
 
 export default {
 	name: 'container3',
@@ -37,9 +35,7 @@ export default {
 		},
 	},
 	data() {
-    return {
+		return {}
-
-    }
 	},
 }
 </script>
@@ -48,8 +44,8 @@ export default {
 .container3 {
 	display: flex;
 	flex-direction: column;
-  width: 673px;
+	width: 927px;
-  height: 359px;
+	height: 360px;
 	background-image: url(./bg.png);
 	background-size: cover;
 	color: #ffffff;

src/views/bigScreen/securityManage/components/container4/index.vue

@@ -1,5 +1,3 @@
-
-
 <template>
 	<div class="container4">
 		<div class="tit">
@@ -20,7 +18,7 @@
 </template>
 
 <script>
-import rocketTit from "../../../components/rocketTit/index.vue";
+import rocketTit from '../../../components/rocketTit/index.vue'
 
 export default {
 	name: 'container4',
@@ -38,9 +36,7 @@ export default {
 		},
 	},
 	data() {
-    return {
+		return {}
-
-    }
 	},
 }
 </script>
@@ -49,8 +45,8 @@ export default {
 .container4 {
 	display: flex;
 	flex-direction: column;
-  width: 501px;
+	width: 536px;
-  height: 359px;
+	height: 360px;
 	background-image: url(./bg.png);
 	background-size: cover;
 	color: #ffffff;
@@ -69,7 +65,7 @@ export default {
 		margin: 0 auto;
 
 		::before {
-      content: "";
+			content: '';
 			display: block;
 			position: absolute;
 
@@ -77,15 +73,11 @@ export default {
 			top: 25px;
 			width: 82px;
 			height: 3px;
-      background: linear-gradient(
+			background: linear-gradient(90deg, rgba(145, 213, 254, 0) 0%, #91d5fe 100%);
-        90deg,
-        rgba(145, 213, 254, 0) 0%,
-        #91d5fe 100%
-      );
 			border-radius: 2px;
 		}
 		::after {
-      content: "";
+			content: '';
 			display: block;
 			position: absolute;
 
@@ -93,11 +85,7 @@ export default {
 			top: 25px;
 			width: 82px;
 			height: 3px;
-      background: linear-gradient(
+			background: linear-gradient(90deg, #91d5fe 0%, rgba(145, 213, 254, 0) 100%);
-        90deg,
-        #91d5fe 0%,
-        rgba(145, 213, 254, 0) 100%
-      );
 			border-radius: 2px;
 		}
 

src/views/bigScreen/securityManage/components/container5/index.vue

@@ -0,0 +1,101 @@
+<template>
+	<div class="container5">
+		<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: 'container5',
+	components: {
+		rocketTit,
+	},
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		selected: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.container5 {
+	display: flex;
+	flex-direction: column;
+	width: 381px;
+	height: 360px;
+	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;
+
+		.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>

src/views/bigScreen/securityManage/index.vue

@@ -91,7 +91,7 @@ export default {
 .center2 {
 	position: absolute;
 	top: 605px;
-	left: 710px;
+	left: 968px;
 }
 
 .right1 {

src/views/bigScreen/securityManage/left2.vue

@@ -1,20 +1,26 @@
 <template>
 	<div>
-    <container3 title="利润概况">
+		<container3 title="安全隐患整改情况">
-      <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
+			<div class="wrap">
-        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+				<el-row class="content1" style="height: 100%">
-      <div style="height:100%;width:100%;" ref="chart"></div>
+					<el-col :span="18" style="height: 100%">
+						<div style="height: 100%; width: 100%" ref="chart"></div>
+					</el-col>
+					<el-col :span="6">
+						<!-- <div style="height: 100%; width: 100%" ref="chart"></div> -->
+						12
+					</el-col>
+				</el-row>
+			</div>
 		</container3>
 	</div>
-
 </template>
 
 <script>
 import scalseBox from '../components/scaleBox.vue'
-import bigScreenHead from "../components/bigScreenHead/index.vue";
+import bigScreenHead from '../components/bigScreenHead/index.vue'
-import rocketTit from "../components/rocketTit/index.vue";
+import rocketTit from '../components/rocketTit/index.vue'
-import container3 from "./components/container3/index.vue";
+import container3 from './components/container3/index.vue'
-
 
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
@@ -36,14 +42,14 @@ export default {
 				legend: {
 					data: ['利润', '利润预测', '利润目标完成率'],
 					textStyle: {
-            color: '#fff'
+						color: '#fff',
 					},
 				},
 				grid: {
 					left: '3%',
 					right: '6%',
 					bottom: '3%',
-          containLabel: true
+					containLabel: true,
 				},
 				xAxis: [
 					{
@@ -63,14 +69,14 @@ export default {
 							'2021-12',
 						],
 						axisPointer: {
-              type: 'shadow'
+							type: 'shadow',
 						},
 						axisLine: {
 							lineStyle: {
-                color: 'rgb(255, 255, 255)'
+								color: 'rgb(255, 255, 255)',
+							},
+						},
 					},
-            }
-          }
 				],
 				yAxis: [
 					{
@@ -80,19 +86,19 @@ export default {
 						max: 250,
 						interval: 50,
 						axisLabel: {
-              formatter: '{value}'
+							formatter: '{value}',
 						},
 						splitLine: {
-              show: false//不显示网格线
+							show: false, //不显示网格线
 						},
 						splitArea: {
-              show: false//不显示网格区域
+							show: false, //不显示网格区域
 						},
 						axisLine: {
 							lineStyle: {
-                color: 'rgb(255, 255, 255)'
+								color: 'rgb(255, 255, 255)',
+							},
 						},
-            }
 					},
 					{
 						type: 'value',
@@ -100,24 +106,24 @@ export default {
 						max: 25,
 						interval: 5,
 						axisLabel: {
-              formatter: '{value} %'
+							formatter: '{value} %',
 						},
 						splitLine: {
-              show: false//不显示网格线
+							show: false, //不显示网格线
 						},
 						splitArea: {
-              show: false//不显示网格区域
+							show: false, //不显示网格区域
 						},
 						axisLine: {
 							lineStyle: {
-                color: 'rgb(255, 255, 255)'
+								color: 'rgb(255, 255, 255)',
+							},
+						},
 					},
-            }
-          }
 				],
 				grid: {
 					containLabel: true,
-          width: "99%",
+					width: '99%',
 					left: 0,
 					top: 50,
 					bottom: 50,
@@ -128,21 +134,17 @@ export default {
 						name: '利润',
 						type: 'bar',
 						barWidth: 20,
-            data: [
+						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],
-              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
-            ],
 						itemStyle: {
-              color: 'rgb(118,196,166)'
+							color: 'rgb(118,196,166)',
 						},
-            barGap: '0'
+						barGap: '0',
 					},
 					{
 						name: '利润预测',
 						type: 'bar',
 						barWidth: 20,
-            data: [
+						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],
-              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', // 线性渐变
@@ -150,15 +152,18 @@ export default {
 								y: 0,
 								x2: 0,
 								y2: 1,
-                colorStops: [{
+								colorStops: [
+									{
 										offset: 0,
-                  color: '#B5D3FE' // 0%处的颜色为红色
+										color: '#B5D3FE', // 0%处的颜色为红色
-                }, {
+									},
+									{
 										offset: 1,
-                  color: '#7EA7FC' // 100%处的颜色为蓝
+										color: '#7EA7FC', // 100%处的颜色为蓝
-                }]
+									},
-              }
+								],
-            }
+							},
+						},
 					},
 					{
 						name: '利润目标完成率',
@@ -167,10 +172,10 @@ export default {
 						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'
+							color: '#55C5A2',
+						},
+						symbol: 'none',
 					},
-            symbol: 'none'
-          }
 				],
 				// yAxis: {
 				//   type: 'value',
@@ -226,27 +231,18 @@ export default {
 	},
 	methods: {
 		initChart() {
-      this.chart = echarts.init(this.$refs.chart);
+			this.chart = echarts.init(this.$refs.chart)
-      this.chart.setOption(this.option);
+			this.chart.setOption(this.option)
-    }
+		},
-  }
+	},
 }
 </script>
 
 <style lang="scss" scoped>
-.num {
+.wrap {
-  font-size: 30px;
+	display: flex;
-  font-family: Roboto-Black, Roboto;
+	flex-direction: column;
-  font-weight: 900;
+	height: 100%;
-  color: #f6d97e;
+	width: 100%;
-  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>

src/views/bigScreen/securityManage/right2.vue

@@ -1,20 +1,31 @@
 <template>
 	<div>
-    <container3 title="装药量概况">
+		<container5 title="危险作业厂所压减情况">
-      <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
+			<el-row style="height: 80%; display: flex; align-items: center">
-        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+				<el-col :span="12">
-      <div style="height:100%;width:100%;" ref="chart"></div>
+					<div class="right1_bg right1_bg1">
-    </container3>
+						<div><span class="num">4 / 6</span></div>
+						<div style="font-size: 14px">现有/原有</div>
+						<div class="txt">三人以上危险作业场所</div>
+					</div>
+				</el-col>
+				<el-col :span="12">
+					<div class="right1_bg right1_bg2">
+						<div><span class="num">2 / 7</span></div>
+						<div style="font-size: 14px">现有/原有</div>
+						<div class="txt">十人以上危险作业场所</div>
+					</div>
+				</el-col>
+			</el-row>
+		</container5>
 	</div>
-
 </template>
 
 <script>
 import scalseBox from '../components/scaleBox.vue'
-import bigScreenHead from "../components/bigScreenHead/index.vue";
+import bigScreenHead from '../components/bigScreenHead/index.vue'
-import rocketTit from "../components/rocketTit/index.vue";
+import rocketTit from '../components/rocketTit/index.vue'
-import container3 from "./components/container3/index.vue";
+import container5 from './components/container5/index.vue'
-
 
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
@@ -26,7 +37,7 @@ export default {
 		scalseBox,
 		bigScreenHead,
 		rocketTit,
-    container3,
+		container5,
 	},
 	data() {
 		return {
@@ -36,14 +47,14 @@ export default {
 				legend: {
 					data: ['利润', '利润预测', '利润目标完成率'],
 					textStyle: {
-            color: '#fff'
+						color: '#fff',
 					},
 				},
 				grid: {
 					left: '3%',
 					right: '6%',
 					bottom: '3%',
-          containLabel: true
+					containLabel: true,
 				},
 				xAxis: [
 					{
@@ -63,14 +74,14 @@ export default {
 							'2021-12',
 						],
 						axisPointer: {
-              type: 'shadow'
+							type: 'shadow',
 						},
 						axisLine: {
 							lineStyle: {
-                color: 'rgb(255, 255, 255)'
+								color: 'rgb(255, 255, 255)',
+							},
+						},
 					},
-            }
-          }
 				],
 				yAxis: [
 					{
@@ -80,19 +91,19 @@ export default {
 						max: 250,
 						interval: 50,
 						axisLabel: {
-              formatter: '{value}'
+							formatter: '{value}',
 						},
 						splitLine: {
-              show: false//不显示网格线
+							show: false, //不显示网格线
 						},
 						splitArea: {
-              show: false//不显示网格区域
+							show: false, //不显示网格区域
 						},
 						axisLine: {
 							lineStyle: {
-                color: 'rgb(255, 255, 255)'
+								color: 'rgb(255, 255, 255)',
+							},
 						},
-            }
 					},
 					{
 						type: 'value',
@@ -100,24 +111,24 @@ export default {
 						max: 25,
 						interval: 5,
 						axisLabel: {
-              formatter: '{value} %'
+							formatter: '{value} %',
 						},
 						splitLine: {
-              show: false//不显示网格线
+							show: false, //不显示网格线
 						},
 						splitArea: {
-              show: false//不显示网格区域
+							show: false, //不显示网格区域
 						},
 						axisLine: {
 							lineStyle: {
-                color: 'rgb(255, 255, 255)'
+								color: 'rgb(255, 255, 255)',
+							},
+						},
 					},
-            }
-          }
 				],
 				grid: {
 					containLabel: true,
-          width: "99%",
+					width: '99%',
 					left: 0,
 					top: 50,
 					bottom: 50,
@@ -128,20 +139,16 @@ export default {
 						name: '利润',
 						type: 'bar',
 						barWidth: 20,
-            data: [
+						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],
-              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
-            ],
 						itemStyle: {
-              color: 'rgb(118,196,166)'
+							color: 'rgb(118,196,166)',
-            }
+						},
 					},
 					{
 						name: '利润预测',
 						type: 'bar',
 						barWidth: 20,
-            data: [
+						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],
-              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', // 线性渐变
@@ -149,15 +156,18 @@ export default {
 								y: 0,
 								x2: 0,
 								y2: 1,
-                colorStops: [{
+								colorStops: [
+									{
 										offset: 0,
-                  color: '#B5D3FE' // 0%处的颜色为红色
+										color: '#B5D3FE', // 0%处的颜色为红色
-                }, {
+									},
+									{
 										offset: 1,
-                  color: '#7EA7FC' // 100%处的颜色为蓝
+										color: '#7EA7FC', // 100%处的颜色为蓝
-                }]
+									},
-              }
+								],
-            }
+							},
+						},
 					},
 					{
 						name: '利润目标完成率',
@@ -167,11 +177,11 @@ export default {
 						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'
+								color: '#F6D97E',
-              }
+							},
+						},
+						symbol: 'none',
 					},
-            symbol: 'none'
-          }
 				],
 				// yAxis: {
 				//   type: 'value',
@@ -215,7 +225,7 @@ export default {
 	},
 	mounted() {
 		this.$nextTick(() => {
-      this.initChart()
+			// this.initChart()
 		})
 	},
 	beforeDestroy() {
@@ -227,27 +237,46 @@ export default {
 	},
 	methods: {
 		initChart() {
-      this.chart = echarts.init(this.$refs.chart);
+			this.chart = echarts.init(this.$refs.chart)
-      this.chart.setOption(this.option);
+			this.chart.setOption(this.option)
-    }
+		},
-  }
+	},
 }
 </script>
 
 <style lang="scss" scoped>
+.right1_bg {
+	position: relative;
+	width: 147px;
+	height: 113px;
+	background-size: cover;
+	text-align: center;
+	padding: 0 0 10px 0;
+	margin: 20px auto 0 auto;
+	font-size: 14px;
 	.num {
-  font-size: 30px;
+		font-size: 35px;
 		font-family: Roboto-Black, Roboto;
 		font-weight: 900;
-  color: #f6d97e;
 		line-height: 35px;
-  //   margin-right: 3px;
+		margin-right: 3px;
+		vertical-align: middle;
+	}
+	.txt {
+		position: absolute;
+		bottom: -30px;
+	}
+}
+.right1_bg1 {
+	background-image: url(./right2-1.png);
+	.num {
+		color: #1098ff;
+	}
+}
+.right1_bg2 {
+	background-image: url(./right2-2.png);
+	.num {
+		color: #f6d97e;
 	}
-.num2 {
-  font-size: 30px;
-  font-family: Roboto-Black, Roboto;
-  font-weight: 900;
-  color: rgba(16, 152, 255, 1);
-  line-height: 35px;
 }
 </style>