diff --git a/src/assets/icons/svg/pm2.5.svg b/src/assets/icons/svg/pm25.svg
similarity index 98%
rename from src/assets/icons/svg/pm2.5.svg
rename to src/assets/icons/svg/pm25.svg
index c6c14f4..6cf089b 100644
--- a/src/assets/icons/svg/pm2.5.svg
+++ b/src/assets/icons/svg/pm25.svg
@@ -1,52 +1,52 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1024 835.7" style="enable-background:new 0 0 1024 835.7;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:url(#路径_1012_1_);}
-	.st1{fill:url(#路径_1013_1_);}
-</style>
-<g id="pm2.5" transform="translate(0)">
-	
-		<linearGradient id="路径_1012_1_" gradientUnits="userSpaceOnUse" x1="2.0099" y1="924.9371" x2="26.9141" y2="904.0443" gradientTransform="matrix(49.0122 0 0 -40.0009 -71.7795 37142.7109)">
-		<stop  offset="0" style="stop-color:#C8E4FF"/>
-		<stop  offset="0.632" style="stop-color:#339CFF"/>
-		<stop  offset="1" style="stop-color:#339CFF"/>
-	</linearGradient>
-	<path id="路径_1012" class="st0" d="M75.3,477.7C54.2,477.3,36.8,494,36.2,515c0.5,21.1,18,37.8,39.1,37.3
-		c21.1,0.5,38.6-16.2,39.2-37.3C114,493.9,96.5,477.2,75.3,477.7z M270.5,547.8c-16.9-0.4-30.9,13-31.3,29.9
-		c0.4,16.9,14.5,30.2,31.3,29.9c16.9,0.4,30.9-13,31.3-29.9C301.4,560.8,287.4,547.4,270.5,547.8z M184.9,74.6
-		c21.1,0.5,38.6-16.2,39.1-37.3C223.4,16.2,206-0.4,184.9,0c-21.1-0.5-38.6,16.2-39.1,37.3C146.3,58.4,163.8,75.1,184.9,74.6
-		L184.9,74.6z M881.4,134.4c16.9,0.4,30.9-13,31.3-29.9c-0.4-16.9-14.5-30.2-31.3-29.9c-16.9-0.4-30.9,13-31.3,29.9
-		C850.5,121.4,864.5,134.7,881.4,134.4z M638.8,209c29.5,0.7,54.1-22.7,54.8-52.2c-0.8-29.5-25.2-52.9-54.8-52.2
-		c-29.5-0.7-54,22.7-54.8,52.2C584.8,186.3,609.3,209.6,638.8,209L638.8,209L638.8,209z M411.8,134.4c-25.3-0.5-46.3,19.5-46.9,44.9
-		c0.6,25.3,21.6,45.4,46.9,44.8c25.3,0.6,46.4-19.5,47-44.8c-0.7-25.3-21.7-45.3-47-44.8L411.8,134.4z M850.1,544.9
-		c-35.4-0.8-64.8,27.3-65.6,62.7c0.9,35.4,30.2,63.4,65.6,62.7c35.4,0.8,64.8-27.3,65.7-62.7C914.9,572.1,885.6,544.1,850.1,544.9
-		L850.1,544.9z M667,682.4c-16.9-0.4-30.9,13-31.3,29.9c0.5,16.9,14.5,30.2,31.3,29.8c16.9,0.4,30.9-13,31.3-29.9
-		C697.9,695.4,683.9,682.1,667,682.4L667,682.4z M537,539.6c16.9-0.4,30.9,13,31.3,29.9c-0.4,16.9-14.4,30.3-31.3,29.9
-		c-16.9,0.4-30.9-13-31.3-29.9C506.1,552.5,520.1,539.2,537,539.6z M761.6,835.7c-65.9,0.5-131-15.3-189.3-46
-		C258.5,598,62,785.3,53.8,793.4c-12.3,11.8-31.6,12.1-44.2,0.8c-11.8-10.7-12.8-29-2.1-40.8c0.4-0.5,0.8-0.9,1.3-1.3
-		c2.3-2.3,239.2-231.5,596.8-12.8c6.5,3.7,177.7,99.3,368.7-33.4c6.8-4.7,15.1-6.6,23.3-5.4c8.1,1.2,15.4,5.4,20.4,11.9
-		c9.8,12.7,7.4,30.9-5.3,40.6c-0.5,0.4-1.1,0.8-1.6,1.1c-72.6,52.5-159.8,81.1-249.4,81.7H761.6z"/>
-	
-		<linearGradient id="路径_1013_1_" gradientUnits="userSpaceOnUse" x1="5.822" y1="892.7612" x2="30.7262" y2="871.8683" gradientTransform="matrix(37.4484 0 0 -9.7017 -48.5744 8950.4355)">
-		<stop  offset="0" style="stop-color:#C8E4FF"/>
-		<stop  offset="0.632" style="stop-color:#339CFF"/>
-		<stop  offset="1" style="stop-color:#339CFF"/>
-	</linearGradient>
-	<path id="路径_1013" class="st1" d="M123.6,265.9h79.7c44.8,0,67.2,19.1,67.2,57.4c0,38.5-22.7,57.9-67.4,57.9H146v79.7h-22.4
-		L123.6,265.9z M146,285.3v76.5h56c12.4,0.9,24.8-2.4,35-9.6c7.9-7.4,12-18.1,11.2-28.9c1-10.8-3.3-21.4-11.5-28.4
-		c-10.1-7.2-22.4-10.6-34.7-9.5H146z M299,265.9v195h22.4V305.7h0.8l67.4,155.1h20.2l67.5-155.1h0.8v155.1h22.4v-195h-27.9
-		l-72.4,166.3h-0.8l-72.7-166.3H299z M604.8,262.1c-18-0.7-35.5,6.5-47.8,19.7c-12.7,14.4-19.2,33.1-18.3,52.2h22.4
-		c-0.7-14,3.5-27.9,12-39.1c7.4-9.3,19-14.4,30.9-13.6c10.8-0.6,21.5,2.9,29.8,9.8c7.4,7.2,11.3,17.3,10.7,27.6
-		c-0.3,13.2-5.7,25.7-15,35c-9.5,8.9-19.8,17-30.6,24.3c-15.4,9.9-29.6,21.5-42.3,34.7c-12.4,13-19.4,30.3-19.4,48.3h130V441H564.7
-		c8.9-19.2,23.9-34.9,42.6-44.8c14.4-9.2,27.9-19.7,40.4-31.3c12.1-12.3,18.9-28.7,19.1-46c0.5-15.6-5.9-30.7-17.5-41.2
-		C637.1,267.1,621.1,261.5,604.8,262.1z M720.1,428.4c-4.5-0.2-8.8,1.6-11.7,4.9c-3.3,3.1-5,7.5-4.9,12c-0.1,4.4,1.7,8.7,4.9,11.7
-		c3,3.3,7.3,5.1,11.7,4.9c4.4,0,8.7-1.8,11.7-4.9c3.2-3.1,5-7.3,4.9-11.7c0.1-4.5-1.7-8.9-4.9-12
-		C728.8,430.1,724.5,428.4,720.1,428.4z M784.9,265.9l-10.4,107.6h21.3c3.8-7.6,9.9-13.7,17.5-17.5c7.6-4.1,16.2-6.2,24.8-6
-		c12.4-0.8,24.6,3.9,33.3,12.8c8.8,9.9,13.3,22.9,12.5,36.1c0.4,12.6-4.5,24.7-13.4,33.6c-9,8.8-21.3,13.5-33.9,13.1
-		c-10.6,0.4-21.1-2.7-29.8-8.8c-8.9-6.8-14.3-17.2-14.8-28.4H770c0.8,16.7,9,32.3,22.4,42.3c12.6,9.5,28.1,14.4,43.9,13.9
-		c17.9,0.4,35.2-5.9,48.6-17.8c13.8-12.2,21.5-29.9,21-48.3c0.9-18.1-5.3-35.9-17.5-49.4c-11.9-11.9-28.2-18.2-45-17.5
-		c-8.5-0.2-17,1.4-24.8,4.7c-8.2,3-15.4,8.1-21,14.8h-1.1l6.6-65.3h95v-19.9H784.7L784.9,265.9z"/>
-</g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 835.7" style="enable-background:new 0 0 1024 835.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#路径_1012_1_);}
+	.st1{fill:url(#路径_1013_1_);}
+</style>
+<g id="pm2.5" transform="translate(0)">
+	
+		<linearGradient id="路径_1012_1_" gradientUnits="userSpaceOnUse" x1="2.0099" y1="924.9371" x2="26.9141" y2="904.0443" gradientTransform="matrix(49.0122 0 0 -40.0009 -71.7795 37142.7109)">
+		<stop  offset="0" style="stop-color:#C8E4FF"/>
+		<stop  offset="0.632" style="stop-color:#339CFF"/>
+		<stop  offset="1" style="stop-color:#339CFF"/>
+	</linearGradient>
+	<path id="路径_1012" class="st0" d="M75.3,477.7C54.2,477.3,36.8,494,36.2,515c0.5,21.1,18,37.8,39.1,37.3
+		c21.1,0.5,38.6-16.2,39.2-37.3C114,493.9,96.5,477.2,75.3,477.7z M270.5,547.8c-16.9-0.4-30.9,13-31.3,29.9
+		c0.4,16.9,14.5,30.2,31.3,29.9c16.9,0.4,30.9-13,31.3-29.9C301.4,560.8,287.4,547.4,270.5,547.8z M184.9,74.6
+		c21.1,0.5,38.6-16.2,39.1-37.3C223.4,16.2,206-0.4,184.9,0c-21.1-0.5-38.6,16.2-39.1,37.3C146.3,58.4,163.8,75.1,184.9,74.6
+		L184.9,74.6z M881.4,134.4c16.9,0.4,30.9-13,31.3-29.9c-0.4-16.9-14.5-30.2-31.3-29.9c-16.9-0.4-30.9,13-31.3,29.9
+		C850.5,121.4,864.5,134.7,881.4,134.4z M638.8,209c29.5,0.7,54.1-22.7,54.8-52.2c-0.8-29.5-25.2-52.9-54.8-52.2
+		c-29.5-0.7-54,22.7-54.8,52.2C584.8,186.3,609.3,209.6,638.8,209L638.8,209L638.8,209z M411.8,134.4c-25.3-0.5-46.3,19.5-46.9,44.9
+		c0.6,25.3,21.6,45.4,46.9,44.8c25.3,0.6,46.4-19.5,47-44.8c-0.7-25.3-21.7-45.3-47-44.8L411.8,134.4z M850.1,544.9
+		c-35.4-0.8-64.8,27.3-65.6,62.7c0.9,35.4,30.2,63.4,65.6,62.7c35.4,0.8,64.8-27.3,65.7-62.7C914.9,572.1,885.6,544.1,850.1,544.9
+		L850.1,544.9z M667,682.4c-16.9-0.4-30.9,13-31.3,29.9c0.5,16.9,14.5,30.2,31.3,29.8c16.9,0.4,30.9-13,31.3-29.9
+		C697.9,695.4,683.9,682.1,667,682.4L667,682.4z M537,539.6c16.9-0.4,30.9,13,31.3,29.9c-0.4,16.9-14.4,30.3-31.3,29.9
+		c-16.9,0.4-30.9-13-31.3-29.9C506.1,552.5,520.1,539.2,537,539.6z M761.6,835.7c-65.9,0.5-131-15.3-189.3-46
+		C258.5,598,62,785.3,53.8,793.4c-12.3,11.8-31.6,12.1-44.2,0.8c-11.8-10.7-12.8-29-2.1-40.8c0.4-0.5,0.8-0.9,1.3-1.3
+		c2.3-2.3,239.2-231.5,596.8-12.8c6.5,3.7,177.7,99.3,368.7-33.4c6.8-4.7,15.1-6.6,23.3-5.4c8.1,1.2,15.4,5.4,20.4,11.9
+		c9.8,12.7,7.4,30.9-5.3,40.6c-0.5,0.4-1.1,0.8-1.6,1.1c-72.6,52.5-159.8,81.1-249.4,81.7H761.6z"/>
+	
+		<linearGradient id="路径_1013_1_" gradientUnits="userSpaceOnUse" x1="5.822" y1="892.7612" x2="30.7262" y2="871.8683" gradientTransform="matrix(37.4484 0 0 -9.7017 -48.5744 8950.4355)">
+		<stop  offset="0" style="stop-color:#C8E4FF"/>
+		<stop  offset="0.632" style="stop-color:#339CFF"/>
+		<stop  offset="1" style="stop-color:#339CFF"/>
+	</linearGradient>
+	<path id="路径_1013" class="st1" d="M123.6,265.9h79.7c44.8,0,67.2,19.1,67.2,57.4c0,38.5-22.7,57.9-67.4,57.9H146v79.7h-22.4
+		L123.6,265.9z M146,285.3v76.5h56c12.4,0.9,24.8-2.4,35-9.6c7.9-7.4,12-18.1,11.2-28.9c1-10.8-3.3-21.4-11.5-28.4
+		c-10.1-7.2-22.4-10.6-34.7-9.5H146z M299,265.9v195h22.4V305.7h0.8l67.4,155.1h20.2l67.5-155.1h0.8v155.1h22.4v-195h-27.9
+		l-72.4,166.3h-0.8l-72.7-166.3H299z M604.8,262.1c-18-0.7-35.5,6.5-47.8,19.7c-12.7,14.4-19.2,33.1-18.3,52.2h22.4
+		c-0.7-14,3.5-27.9,12-39.1c7.4-9.3,19-14.4,30.9-13.6c10.8-0.6,21.5,2.9,29.8,9.8c7.4,7.2,11.3,17.3,10.7,27.6
+		c-0.3,13.2-5.7,25.7-15,35c-9.5,8.9-19.8,17-30.6,24.3c-15.4,9.9-29.6,21.5-42.3,34.7c-12.4,13-19.4,30.3-19.4,48.3h130V441H564.7
+		c8.9-19.2,23.9-34.9,42.6-44.8c14.4-9.2,27.9-19.7,40.4-31.3c12.1-12.3,18.9-28.7,19.1-46c0.5-15.6-5.9-30.7-17.5-41.2
+		C637.1,267.1,621.1,261.5,604.8,262.1z M720.1,428.4c-4.5-0.2-8.8,1.6-11.7,4.9c-3.3,3.1-5,7.5-4.9,12c-0.1,4.4,1.7,8.7,4.9,11.7
+		c3,3.3,7.3,5.1,11.7,4.9c4.4,0,8.7-1.8,11.7-4.9c3.2-3.1,5-7.3,4.9-11.7c0.1-4.5-1.7-8.9-4.9-12
+		C728.8,430.1,724.5,428.4,720.1,428.4z M784.9,265.9l-10.4,107.6h21.3c3.8-7.6,9.9-13.7,17.5-17.5c7.6-4.1,16.2-6.2,24.8-6
+		c12.4-0.8,24.6,3.9,33.3,12.8c8.8,9.9,13.3,22.9,12.5,36.1c0.4,12.6-4.5,24.7-13.4,33.6c-9,8.8-21.3,13.5-33.9,13.1
+		c-10.6,0.4-21.1-2.7-29.8-8.8c-8.9-6.8-14.3-17.2-14.8-28.4H770c0.8,16.7,9,32.3,22.4,42.3c12.6,9.5,28.1,14.4,43.9,13.9
+		c17.9,0.4,35.2-5.9,48.6-17.8c13.8-12.2,21.5-29.9,21-48.3c0.9-18.1-5.3-35.9-17.5-49.4c-11.9-11.9-28.2-18.2-45-17.5
+		c-8.5-0.2-17,1.4-24.8,4.7c-8.2,3-15.4,8.1-21,14.8h-1.1l6.6-65.3h95v-19.9H784.7L784.9,265.9z"/>
+</g>
+</svg>
diff --git a/src/assets/images/largeScreen/bg.png b/src/assets/images/largeScreen/bg.png
new file mode 100644
index 0000000..d53c65d
Binary files /dev/null and b/src/assets/images/largeScreen/bg.png differ
diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss
index 39e6147..42d31aa 100644
--- a/src/assets/styles/yxk-admin.scss
+++ b/src/assets/styles/yxk-admin.scss
@@ -1125,4 +1125,66 @@ input[type='number'] {
     border: none;
     transform: rotate(0);
   }
+}
+
+// 库房空气质量监控
+.msg-list{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(100vw - 800px);
+}
+.msg-list,
+.screen-env-list{
+  display: flex;
+  li{
+    flex: 1;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    // width: calc(100%/6);
+    height: 80px;
+    margin-right: 20px;
+    background: url('~@/assets/images/data_border_default.png') no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    &.li-warn{
+      background: url('~@/assets/images/data_border_warn.png') no-repeat;
+      background-size: 100% 100%;
+    }
+    .msg-list-svg{
+      font-size: 36px;
+      display: inline-block;
+      height: 80px;
+      line-height: 80px;
+      margin-left: 30px;
+    }
+    .msg-pm{
+      font-size: 46px;
+    }
+    .msg-txt{
+      position: relative;
+      flex: 1;
+      height: 80px;
+      text-align: center;
+    }
+    .msg-list-unit{
+      position: absolute;
+      left: 0;
+      bottom: 12px;
+      width: 100%;
+      font-size: 14px;
+      color: #339CFF;
+    }
+    .msg-list-num{
+      color: #fff;
+      font-size: 26px;
+      position: absolute;
+      left: 0;
+      top: 14px;
+      width: 100%;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/views/environmentalScreen/data1.json b/src/views/environmentalScreen/data1.json
new file mode 100644
index 0000000..9a53cb7
--- /dev/null
+++ b/src/views/environmentalScreen/data1.json
@@ -0,0 +1,119 @@
+{
+  "rows":[
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度",
+      "name":"温度温度温度温度温度温度"
+    }
+
+  ]
+}
\ No newline at end of file
diff --git a/src/views/environmentalScreen/index.vue b/src/views/environmentalScreen/index.vue
index fdc3aea..7a39de0 100644
--- a/src/views/environmentalScreen/index.vue
+++ b/src/views/environmentalScreen/index.vue
@@ -7,11 +7,65 @@
           <span class="right-top-line" />
           <span class="left-bottom-line" />
           <h3><i class="iconfont icon-kongqizhiliangshuju" />档案库空气质量数据</h3>
+          <ul class="screen-env-list">
+            <li>
+              <svg-icon icon-class="co2" class-name="msg-list-svg" />
+              <div class="msg-txt">
+                <span class="msg-list-num">60</span>
+                <p class="msg-list-unit">CO2ppm</p>
+              </div>
+            </li>
+            <li>
+              <svg-icon icon-class="voc" class-name="msg-list-svg" />
+              <div class="msg-txt">
+                <span class="msg-list-num">60</span>
+                <p class="msg-list-unit">VOCmg/m³</p>
+              </div>
+            </li>
+            <li class="msg-pm li-warn">
+              <svg-icon icon-class="pm25" class-name="msg-list-svg" />
+              <div class="msg-txt">
+                <span class="msg-list-num">60</span>
+                <p class="msg-list-unit">PM2.5ug/m³</p>
+              </div>
+            </li>
+            <li class="msg-pm">
+              <svg-icon icon-class="pm10" class-name="msg-list-svg" />
+              <div class="msg-txt">
+                <span class="msg-list-num">60</span>
+                <p class="msg-list-unit">PM10ug/m³</p>
+              </div>
+            </li>
+          </ul>
         </div>
         <div class="env-item container-wrap">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
           <h3><i class="iconfont icon-loushuijiance" />漏水检测</h3>
+          <div class="leakage-detection">
+            <div class="state-list">
+              <span>正常</span>
+              <span>报警</span>
+            </div>
+            <ul class="leakage-list">
+              <li class="leakage-warn">
+                <p><i class="iconfont icon-weihubaojing" />维护报警</p>
+                <span class="leakage-state-tip" />
+              </li>
+              <li>
+                <p><i class="iconfont icon-loushuibaojing" />漏水报警</p>
+                <span class="leakage-state-tip" />
+              </li>
+              <li>
+                <p><i class="iconfont icon-ganyingxianduanlie" />感应线断裂</p>
+                <span class="leakage-state-tip" />
+              </li>
+              <li>
+                <p><i class="iconfont icon-loushuiweizhi" />漏水位置</p>
+                <span>8.22</span>
+              </li>
+            </ul>
+          </div>
         </div>
         <div class="env-item container-wrap">
           <span class="right-top-line" />
@@ -42,11 +96,87 @@
             frameborder="0"
             scrolling="no"
           />
+          <ul class="screen-env-list">
+            <li>
+              <svg-icon icon-class="temperature" class-name="msg-list-svg" />
+              <div class="msg-txt">
+                <span class="msg-list-num">60</span>
+                <p class="msg-list-unit">温度℃</p>
+              </div>
+            </li>
+            <li class="li-warn">
+              <svg-icon icon-class="shidu" class-name="msg-list-svg" />
+              <div class="msg-txt">
+                <span class="msg-list-num">60</span>
+                <p class="msg-list-unit">湿度%</p>
+              </div>
+            </li>
+          </ul>
         </div>
-        <div class="env-item container-wrap">
+        <div class="env-item container-wrap  device-container">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
           <h3><i class="iconfont icon-shebeizhuangtai" />设备状态</h3>
+          <div class="state-list">
+            <span>正常</span>
+            <span>报警</span>
+          </div>
+          <ul class="env-device-list">
+            <li class="device-warn">
+              <div class="env-device-img">
+                <img src="~@/assets/images/largeScreen/device-1.png" alt="">
+              </div>
+              <div class="env-device-text">
+                <p>密集架</p>
+                <span />
+              </div>
+            </li>
+            <li>
+              <div class="env-device-img">
+                <img src="~@/assets/images/largeScreen/device-2.png" alt="">
+              </div>
+              <div class="env-device-text">
+                <p>回转柜</p>
+                <span />
+              </div>
+            </li>
+            <li>
+              <div class="env-device-img">
+                <img src="~@/assets/images/largeScreen/device-3.png" alt="">
+              </div>
+              <div class="env-device-text">
+                <p>空调</p>
+                <span />
+              </div>
+            </li>
+            <li>
+              <div class="env-device-img">
+                <img src="~@/assets/images/largeScreen/device-4.png" alt="">
+              </div>
+              <div class="env-device-text">
+                <p>通道门</p>
+                <span />
+              </div>
+            </li>
+            <li>
+              <div class="env-device-img">
+                <img src="~@/assets/images/largeScreen/device-5.png" alt="">
+              </div>
+              <div class="env-device-text">
+                <p>漏水传感器</p>
+                <span />
+              </div>
+            </li>
+            <li>
+              <div class="env-device-img">
+                <img src="~@/assets/images/largeScreen/device-6.png" alt="">
+              </div>
+              <div class="env-device-text">
+                <p>温湿度传感器</p>
+                <span />
+              </div>
+            </li>
+          </ul>
         </div>
       </div>
       <div class="env-main-right">
@@ -54,12 +184,13 @@
           <span class="right-top-line" />
           <span class="left-bottom-line" />
           <h3><i class="iconfont icon-zhenglishi" />阅览室</h3>
-          <LineChart />
+          <LineChart :class-name="className[0]" :chart-data="lineChartData.readRoomData" />
         </div>
         <div class="env-item container-wrap">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
           <h3><i class="iconfont icon-zhenglishi" />整理室</h3>
+          <LineChart :class-name="className[1]" :chart-data="lineChartData.collateRoomData" />
         </div>
         <div class="env-item container-wrap">
           <span class="right-top-line" />
@@ -80,22 +211,104 @@
         </div>
       </div>
     </div>
+    <!-- 摄像头视频 -->
+    <Video ref="camera" />
   </div>
 </template>
 
 <script>
 import LineChart from './module/lineChart'
+import Video from '@/views/storeManage/warehouse3D/module/video'
+import data1 from './data1.json'
+const lineChartData = {
+  readRoomData: {
+    temperatureData: [16, 12, 15, 11, 20, 16, 15, 22],
+    humidnessData: [10, 50, 40, 60, 50, 30, 15, 30]
+  },
+  collateRoomData: {
+    temperatureData: [16, 12, 15, 11, 20, 16, 15, 22],
+    humidnessData: [10, 50, 40, 60, 50, 30, 15, 30]
+  }
+}
 export default {
   name: 'Dashboard',
   components: {
-    LineChart
+    LineChart,
+    Video
   },
   data() {
     return {
-      tableData: []
+      tableData: [],
+      lineChartData: lineChartData,
+      className: ['readRoomContainer', 'collateRoomContainer']
     }
   },
+  mounted() {
+    this.tableData = data1.rows
+    const _this = this
+    this.iframeWin = this.$refs.myIframe.contentWindow
+    // inframe 加载完成之后
+    document.getElementById('myIframe').onload = function() {
+      _this.deviceState()
+    }
+    window.addEventListener('message', this.handleMessageDevice)
+  },
   methods: {
+    // 传入设备状态data  / 给iframe传初始值
+    deviceState(e) {
+      this.iframeWin.postMessage({
+        data: [
+          {
+            id: 'DAK_MO_OAO_001',
+            wendu: 6,
+            sidu: 10,
+            alarmState: false
+          },
+          {
+            id: 'DAK_MO_OAO_002',
+            wendu: 2,
+            sidu: 5,
+            alarmState: false
+          },
+          {
+            id: 'DAK_MO_OAO_003',
+            wendu: 3,
+            sidu: 1,
+            alarmState: false
+          },
+          {
+            id: 'DAK_MO_OAO_004',
+            wendu: 6,
+            sidu: 6,
+            alarmState: false
+          }
+        ]
+      }, '*')
+    },
+    // 点击查看设备状况 / 密集架列号
+    handleMessageDevice(event) {
+      const _this = this
+      if (event.data && event.data.data) {
+        const data = event.data.data
+        // 摄像头
+        if (data.includes('CAM')) {
+          _this.$nextTick(() => {
+            this.$refs.camera.openVideoVisible = true
+            // 后期看接口调试变化
+            this.$refs.camera.videoSrc = 'https://qiniu.aiyxlib.com/1606275873000.mp4'
+            this.$refs.camera.videoTitle = data
+          })
+        }
+      }
+    },
+    // 设置温湿度
+    handleAQI(deviceId, wendu, sidu) {
+      window.frames['iframeMap'].setAlertValue(deviceId, wendu, sidu)
+    },
+    // 设置温湿度报警状况
+    handleAlarm(deviceId) {
+      window.frames['iframeMap'].Myalert(deviceId, true)
+    },
     // 表格隔行变色
     rowBgColor({ row, rowIndex }) {
       if (rowIndex % 2 === 1) {
@@ -124,15 +337,17 @@ export default {
     display: flex;
     justify-content: space-between;
     padding: 0 25px;
+    margin-top: -12px;
     .env-main-left,
     .env-main-right{
       width: 458px;
-      height: calc(100vh - 150px);
+      height: calc(100vh - 138px);
       overflow: hidden;
     }
     .env-main-middle{
       flex: 1;
       margin: 0 20px;
+      height: calc(100vh - 138px);
     }
     .container-wrap{
       height: calc(100%/3 - 14px);
@@ -141,6 +356,7 @@ export default {
     .env-item {
       margin-bottom: 20px;
       text-align: center;
+      overflow: hidden;
       h3{
         position: relative;
         display: inline-block;
@@ -176,13 +392,222 @@ export default {
         }
       }
     }
+    .screen-env-list{
+      flex-wrap: wrap;
+      justify-content: space-between;
+      padding: 0 44px 0 4px;
+      li{
+        flex: none;
+        width: calc(100%/2 - 44px);
+        margin: 15px 0 0 40px;
+        .msg-list-svg{
+          font-size: 40px;
+          margin-left: 20px;
+        }
+        &.msg-pm{
+          .msg-list-svg{
+            font-size: 46px;
+          }
+        }
+      }
+    }
+    .leakage-detection{
+      padding: 0 44px;
+      font-size: 14px;
+      color: #339CFF;
+      margin-top: -3px;
+      .leakage-list{
+        text-align: left;
+        li{
+          position: relative;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 8px;
+          padding: 9px 30px;
+          border: 1px solid #3581CC;
+          background-color: #02255F;
+          border-radius: 2px;
+          &::before{
+            content: "";
+            position: absolute;
+            top: 4px;
+            left: 4px;
+            width: 0;
+            height: 0;
+            border-color: transparent #339CFF;
+            border-width: 0 0 6px 6px;
+            border-style: solid;
+          }
+          p{
+            i{
+              margin-right: 8px;
+            }
+          }
+          span.leakage-state-tip{
+            position: relative;
+            display: block;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background-color: #18B08F;
+            &::before{
+              content: "";
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              width: 14px;
+              height: 14px;
+              border-radius: 50%;
+              box-shadow: inset 0px 0px 10px 1px #18B08F;
+              transform: translate(-50%,-50%);
+            }
+          }
+          &.leakage-warn{
+            border-color: #F65164;
+            box-shadow: inset 0px 0px 15px 1px #F65164;
+            color: #F65164;
+            &::before{
+              border-color: transparent #F65164;
+            }
+            span.leakage-state-tip{
+              background-color: #F65164;
+              &::before{
+                box-shadow: inset 0px 0px 10px 1px #F65164;
+              }
+            }
+          }
+        }
+      }
+    }
+    .state-list{
+      display: flex;
+      justify-content: end;
+      margin-bottom: 6px;
+      font-size: 14px;
+      color: #339CFF;
+      span{
+        position: relative;
+        display: block;
+        padding-left: 16px;
+        margin-left: 30px;
+        &::before{
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 50%;
+          width: 10px;
+          height: 10px;
+          border-radius: 50%;
+          margin-top: -5px;
+          background-color: #18B08F;
+        }
+        &:last-child::before{
+          background-color:#F65164;
+        }
+      }
+    }
+    .device-container{
+      position: relative;
+      .state-list{
+         position: absolute;
+         right: 40px;
+         top: 12px;
+      }
+      .env-device-list{
+        display: flex;
+        height: calc(100% - 38px);
+        justify-content: space-between;
+        padding: 0 0 20px 20px;
+        li{
+          width: calc(100%/6 - 20px);
+          margin-right: 20px;
+          .env-device-img{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: calc(100% - 40px);
+            border: 1px solid #3581CC;
+            margin-bottom: 10px;
+            img{
+              object-fit: cover;
+            }
+          }
+          .env-device-text{
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 36px;
+            line-height: 36px;
+            font-size: 14px;
+            color: #339CFF;
+            border: 1px solid #3581CC;
+            background-color: #02255F;
+            border-radius: 36px;
+            span{
+              position: relative;
+              // position: absolute;
+              // right: 8px;
+              // top: 50%;
+              // margin-top: -3px;
+              display: block;
+              width: 6px;
+              height: 6px;
+              margin-left: 14px;
+              border-radius: 50%;
+              background-color: #18B08F;
+              &::before{
+                content: "";
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                width: 14px;
+                height: 14px;
+                border-radius: 50%;
+                box-shadow: inset 0px 0px 10px 1px #18B08F;
+                transform: translate(-50%,-50%);
+              }
+            }
+          }
+          &.device-warn{
+            .env-device-text{
+              span{
+                background-color: #F65164;
+                &::before{
+                  box-shadow: inset 0px 0px 10px 1px #F65164;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
     .env-3d{
-      height: calc(100vh - (100%/2) - 28px);
+      position: relative;
+      width: 100%;
+      height: calc(100vh - (100%/2) - 14px);
       margin-bottom: 20px;
+      background: url('~@/assets/images/largeScreen/bg.png') no-repeat center -130px;
+      // background-size: 100% 100%;
       overflow: hidden;
       .iframe_box{
         width: 100%;
         height: 100%;
+        margin-left: -80px;
+      }
+      .screen-env-list{
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        padding: 0;
+        width: 165px;
+        li{
+          width: 100%;
+          margin: 20px 0 0 0;
+        }
       }
     }
   }
diff --git a/src/views/environmentalScreen/module/lineChart.vue b/src/views/environmentalScreen/module/lineChart.vue
index 2755e84..35b94c0 100644
--- a/src/views/environmentalScreen/module/lineChart.vue
+++ b/src/views/environmentalScreen/module/lineChart.vue
@@ -1,17 +1,33 @@
 <template>
   <div style="height:84%">
-    <div id="container" style="height:100%" />
+    <div :id="className" style="height:100%" />
   </div>
 </template>
 
 <script>
 import echarts from 'echarts'
 export default {
+  props: {
+    className: {
+      type: String,
+      default: ''
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
   data() {
     return {
-      chart: null,
-      temperatureData: [16, 12, 15, 11, 20, 16, 15, 22],
-      humidnessData: [10, 50, 40, 60, 50, 30, 15, 30]
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
     }
   },
   mounted() {
@@ -28,14 +44,11 @@ export default {
   },
   methods: {
     initChart() {
-      const dom = document.getElementById('container')
-      this.chart = echarts.init(dom, 'dark', {
-        renderer: 'canvas',
-        useDirtyRect: false
-      })
-      this.setOptions()
+      const dom = document.getElementById(this.className)
+      this.chart = echarts.init(dom, 'dark')
+      this.setOptions(this.chartData)
     },
-    setOptions() {
+    setOptions({ temperatureData, humidnessData } = {}) {
       this.chart.setOption({
         backgroundColor: '#021941',
         tooltip: {
@@ -82,7 +95,6 @@ export default {
         }],
         yAxis: [
           {
-            type: 'value',
             // 坐标轴最大值、最小值、强制设置数据的步长间隔
             max: 24,
             min: 10,
@@ -179,7 +191,7 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: this.temperatureData
+            data: temperatureData
           },
           {
             name: '湿度（%）',
@@ -207,7 +219,7 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: this.humidnessData
+            data: humidnessData
           }
         ]
       })
diff --git a/src/views/storeManage/warehouse3D/archivesStorage/index.vue b/src/views/storeManage/warehouse3D/archivesStorage/index.vue
index 0a3c8f6..51b622f 100644
--- a/src/views/storeManage/warehouse3D/archivesStorage/index.vue
+++ b/src/views/storeManage/warehouse3D/archivesStorage/index.vue
@@ -43,7 +43,7 @@
           </li>
           <li class="msg-pm">
             <!-- style="font-size:46px;margin-left:25px;padding-bottom:10px" -->
-            <svg-icon icon-class="pm2.5" class-name="msg-list-svg" />
+            <svg-icon icon-class="pm25" class-name="msg-list-svg" />
             <div class="msg-txt">
               <span class="msg-list-num">60</span>
               <p class="msg-list-unit">PM2.5ug/m³</p>
@@ -238,65 +238,8 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/assets/styles/lend-manage.scss';
-
   .warehouse-left{
     position: relative;
-    .msg-list{
-      display: flex;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: calc(100vw - 800px);
-      li{
-        flex: 1;
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-        align-content: center;
-        justify-content: center;
-        // width: calc(100%/6);
-        height: 80px;
-        margin-right: 20px;
-        background: url('~@/assets/images/data_border_default.png') no-repeat;
-        background-size: 100% 100%;
-        position: relative;
-        &.li-warn{
-          background: url('~@/assets/images/data_border_warn.png') no-repeat;
-          background-size: 100% 100%;
-        }
-        .msg-list-svg{
-          font-size: 36px;
-          display: inline-block;
-          height: 80px;
-          line-height: 80px;
-          margin-left: 30px;
-        }
-        .msg-pm{
-          font-size: 46px;
-        }
-        .msg-txt{
-          position: relative;
-          flex: 1;
-          height: 80px;
-          text-align: center;
-        }
-        .msg-list-unit{
-          position: absolute;
-          left: 0;
-          bottom: 12px;
-          width: 100%;
-          font-size: 14px;
-        }
-        .msg-list-num{
-          color: #fff;
-          font-size: 26px;
-          position: absolute;
-          left: 0;
-          top: 14px;
-          width: 100%;
-        }
-      }
-    }
   }
 .container-wrap{
   min-height: auto;