[新增]天气栏

src/app/ui/collection-tools-examinee/collection-tools.component.html

@@ -28,6 +28,39 @@
       <app-working-area #canvas [init]='this'></app-working-area>
       <!-- H5Canvas -->
 
+      <!-- 天气 -->
+      <div class="weatherBox">
+        <span class="name">天气</span>
+        <input disabled class="weatherInput" [(ngModel)]="weatherData.weather" type="text" placeholder="最多输入10字节" maxlength="10">
+        <span class="name">气温</span>
+        <div style="display: inline-block;position: relative;">
+          <input disabled [(ngModel)]="weatherData.airTemperature" style="width: 60px;" type="number" value="0"
+            oninput="if(value.length>2)value=value.slice(0,2)">
+          <span style="position: absolute;right: 16px;top: 2px;color: #9c9fa5;">℃</span>
+        </div>
+        <span class="name">风力</span>
+        <select disabled class="weatherSelect" [(ngModel)]="weatherData.windScale">
+          <option value="0">0(无风)</option>
+          <option value="1">1(软风)</option>
+          <option value="2">2(轻风)</option>
+          <option value="3">3(微风)</option>
+          <option value="4">4(和风)</option>
+          <option value="5">5(清风)</option>
+          <option value="6">6(强风)</option>
+        </select>
+        <span class="name">风向</span>
+        <select disabled class="weatherSelect" [(ngModel)]="weatherData.windDirection">
+          <option value="0">东</option>
+          <option value="1">西</option>
+          <option value="2">南</option>
+          <option value="3">北</option>
+          <option value="4">东南</option>
+          <option value="5">西南</option>
+          <option value="6">东北</option>
+          <option value="7">西北</option>
+        </select>
+      </div>
+
       <!-- 拖拽窗口 -->
       <div (mousewheel)="$event.stopPropagation()" class="centerBuildingDiv" style="user-select: none;" cdkDrag>
         <div class="centerTotal">

src/app/ui/collection-tools-examinee/collection-tools.component.scss

@@ -1,7 +1,10 @@
 @import './panel.scss';
+
 ::-webkit-scrollbar {
-  display: none; /* Chrome Safari */
+  display: none;
+  /* Chrome Safari */
 }
+
 .content {
   width: 100%;
   height: 100%;
@@ -10,6 +13,7 @@
   padding: 3px;
   display: flex;
   flex-direction: column;
+
   .buildingbtnchecked {
     background-color: #07CDCF;
     color: white;
@@ -26,6 +30,7 @@
   align-items: center;
   background-color: #fff;
   box-shadow: inset 0px -3px 5px 0px rgb(165, 163, 163);
+
   .headerTitle {
     width: 235px;
     overflow: hidden;
@@ -35,13 +40,16 @@
     font-size: 20px;
     font-weight: 550;
   }
+
   .headerCenter {
     flex: 1;
     overflow: hidden;
+
     .mainPointDiv {
       box-sizing: border-box;
       padding-left: 8px;
       cursor: default;
+
       span {
         font-family: Source Han Sans CN;
         color: #FF8678;
@@ -50,11 +58,13 @@
 
     }
   }
+
   .headerRight {
     width: 350px;
     overflow: hidden;
     box-sizing: border-box;
     padding-left: 10px;
+
     button {
       font-size: 14px;
       color: #07CDCF;
@@ -63,6 +73,7 @@
       outline: none;
       cursor: pointer;
     }
+
     .mat-icon {
       font-size: 22px;
       vertical-align: middle;
@@ -79,9 +90,11 @@
     vertical-align: middle;
     margin-left: 1px;
   }
+
   span {
     font-size: 18px;
   }
+
   flex: 5%;
   display: flex;
   align-items:center;
@@ -89,13 +102,16 @@
   box-sizing: border-box;
   margin: 3px 0;
   background-color: white;
+
   button {
     border: 0.5px solid rgb(208, 211, 214);
     margin: 0 2px;
   }
+
   .editdeletebtn {
     display: none;
   }
+
   .bigeditdeletebtn:hover {
     .editdeletebtn {
       display: inline-block;
@@ -109,6 +125,7 @@
   cursor: pointer;
   vertical-align: middle;
 }
+
 //左右两侧功能栏 统一样式
 .publicCss {
   border-radius: 5px;
@@ -116,14 +133,17 @@
   height: 100%;
   top: 0;
 }
+
 .functionalDomain {
   flex: 1;
   overflow: hidden;
+
   .functionalDomainContent {
     position: relative;
     width: 100%;
     height: 100%;
   }
+
   .centerBuildingDiv {
     position: absolute;
     max-width: 400px;
@@ -132,6 +152,7 @@
     z-index: 150;
     display: flex;
   }
+
   .functionalDomainLeft {
     background-color: #fff;
     display: flex;
@@ -143,6 +164,7 @@
     width: 235px;
     left: 0;
     z-index: 111;
+
     .leftDragDiv {
       position: absolute;
       right: 0;
@@ -152,6 +174,7 @@
       cursor: e-resize;
     }
   }
+
   .functionalDomainRight {
     z-index: 111;
     margin-right: 0px;
@@ -161,11 +184,13 @@
     min-width: 235px;
     right: 0;
   }
+
   //右边导航栏显示隐藏
   .togglePanel2 {
     margin-right: -2000px;
     transition: margin-right 1s;
   }
+
   //左侧导航栏显示隐藏
   .togglePanel {
     margin-left: -2000px;
@@ -182,19 +207,26 @@
   border-radius: 5px;
   box-sizing: border-box;
   padding: 5px 0;
+
   .centerTotalHeader {
     height: 30px;
     line-height: 30px;
     box-sizing: border-box;
     padding: 0 5px;
     font-size: 14px;
-    .above:hover {cursor: move;;}
+
+    .above:hover {
+      cursor: move;
+      ;
+    }
+
     .above {
       font-size: 24px;
       color: rgb(175, 164, 164);
       margin: 0 10px 0 10px;
     }
   }
+
   .everyTotal {
     width: 100%;
     height: 30px;
@@ -206,6 +238,7 @@
     font-size: 16px;
   }
 }
+
 //中间建筑/楼层
 
 //右边操作栏
@@ -216,21 +249,36 @@
   padding-left: 5px;
   box-sizing: border-box;
   color: #07CDCF;
-  .mat-icon {vertical-align: middle; margin-right: 5px; font-size: 22px;}
+
+  .mat-icon {
+    vertical-align: middle;
+    margin-right: 5px;
+    font-size: 22px;
+  }
+}
+
+input {
+  border: none;
+  outline: none;
+  background-color: #d6dddf;
+  box-sizing: border-box;
+  padding-left: 5px;
 }
-input { border: none; outline: none; background-color: #d6dddf; box-sizing: border-box; padding-left: 5px; }
 
 //右侧属性
 .property {
   display: flex;
   flex-flow: column;
+
   .siteproperty {
     height: 100%;
     overflow-y: auto;
+
     p {
       color: #9c9fa5;
       padding-left: 5px;
     }
+
     .siteproperty_size {
       background-color: #F2F5F6;
       width: 93%;
@@ -238,6 +286,7 @@ input { border: none; outline: none; background-color: #d6dddf; box-sizing: bord
       border-radius: 3px;
       min-height: 21px;
     }
+
     .rightAttribute {
       width: 12%;
       height: 99.5%;
@@ -248,55 +297,69 @@ input { border: none; outline: none; background-color: #d6dddf; box-sizing: bord
       border: 2px solid #464646;
     }
   }
+
   .assetsproperty {
     overflow-y: auto;
     height: 100%;
+
     p {
       color: #9c9fa5;
       margin: 1px 0 3px 8px;
       font-size: 14px;
     }
+
     span {
       font-size: 15px;
     }
+
     input {
       height: 24px;
       border-radius: 3px;
     }
+
     .biginput {
       display: block;
       width: 88%;
       margin: 0 auto;
     }
+
     .smallinput {
       display: block;
       width: 19%;
       margin-left: 14px;
     }
+
     .textarea {
       display: block;
       width: 88%;
       height: 50px;
       margin: 0 auto;
     }
+
     .swiper-button-next {
       right: 6px;
     }
+
     .swiper-button-prev {
       left: 6px;
     }
+
     .swiper-container {
       // --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
       // --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
-      --swiper-navigation-size:20px;/* 设置按钮大小 */
+      --swiper-navigation-size: 20px;
+      /* 设置按钮大小 */
     }
+
     .hoverred:hover {
       color: rgb(187, 28, 28);
     }
+
     .selectDiv {
       height: 21px;
       position: relative;
       margin-bottom: 5px;
+
       select {
         width: 98px;
         height: 22px;
@@ -308,9 +371,11 @@ input { border: none; outline: none; background-color: #d6dddf; box-sizing: bord
         border-radius: 2px;
       }
     }
+
     .colorBigDiv {
       width: 88%;
       margin-left: 8px;
+
       .colorBigTemplateDiv {
         span {
           color: #9c9fa5;
@@ -318,6 +383,7 @@ input { border: none; outline: none; background-color: #d6dddf; box-sizing: bord
           height: 26px;
           line-height: 26px;
         }
+
         .colorTemplateDiv {
           width: 65%;
           height: 22px;
@@ -335,6 +401,7 @@ input { border: none; outline: none; background-color: #d6dddf; box-sizing: bord
           float: left;
           border: 2px solid white;
         }
+
         .coloractive {
           border: 2px solid black;
         }
@@ -343,11 +410,13 @@ input { border: none; outline: none; background-color: #d6dddf; box-sizing: bord
 
   }
 }
+
 //右侧消防要素
 .firecategories {
   position: relative;
   display: flex;
   flex-flow: column;
+
   .firecategoriesTree {
     overflow-y: auto;
     height: 100%;
@@ -358,11 +427,14 @@ input { border: none; outline: none; background-color: #d6dddf; box-sizing: bord
 div:focus {
   outline: none;
 }
+
 //没有图片时显示无图片背景图
 .noImgCss {
   background: url(../../../assets/images/noImg.png) no-repeat center center;
-  background-size: 88% 100%;/*按比例缩放*/
+  background-size: 88% 100%;
+  /*按比例缩放*/
 }
+
 .input {
   width: 18px;
   height: 18px;
@@ -375,10 +447,12 @@ div:focus {
 .isLookCss {
   margin-left: auto;
   color: #07CDCF;
+
   .icongray {
     color: #D9D0DC;
   }
 }
+
 .mat-tree-node {
   padding-right: 3px;
   min-height: 30px;
@@ -386,12 +460,15 @@ div:focus {
   font-size: 12px;
   cursor: pointer;
 }
+
 .treeNode:hover {
   background-color: #ccebf8;
 }
+
 .isLookPattern {
   display: none;
 }
+
 .treeText {
   overflow: hidden;
   white-space: nowrap;
@@ -400,48 +477,48 @@ div:focus {
   width: 65px;
 }
 
-.bigBox{
-  width: 700px;
-  height: 40px;
-  position: absolute;
-  overflow: hidden;
-  right: 0;
-}
 .weatherBox {
+  width: 600px;
   height: 40px;
-  width: 700px;
-  line-height: 40px;
+  box-sizing: border-box;
+  padding: 0 12px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
   position: absolute;
-  right: 0;
-  transition: right linear .5s;
+  right: 238px;
+  top: 2px;
+  background: #fff;
+  border-radius: 3px;
+
   .openbtn {
     font-size: 45px;
     height: 45px;
     width: 40px;
   }
+
   .name {
     font-size: 16px;
     vertical-align: middle;
     margin-left: 3px;
   }
+
   input {
-    width: 140px;
-    height: 22px;
+    width: 145px;
+    height: 25px;
     margin-left: 3px;
+    border: 1px solid black;
+    background: none;
   }
+
   select {
-    width: 96px;
+    width: 85px;
     height: 25px;
     margin-left: 3px;
     vertical-align: middle;
   }
 }
-.open{
-  right: 0px;
-}
-.close{
-  right:-622px;
-}
+
 .bottomCss {
   position: absolute;
   left: 232px;
@@ -452,6 +529,7 @@ div:focus {
   z-index: 111;
   background-color: white;
   border: 1px solid #464646;
+
   .dragDiv {
     width: 100%;
     height: 3px;
@@ -460,9 +538,11 @@ div:focus {
     z-index: 111;
     cursor: n-resize;
   }
+
   .title {
     height: 35px;
     background-color: #464646;
+
     div {
       background-color: #464646;
       float: left;
@@ -472,10 +552,12 @@ div:focus {
       padding-left: 5px;
       cursor: pointer;
     }
+
     .detailsAndattentBtn {
       background-color: #595959;
     }
   }
+
   .body {
     textarea {
       width: 100%;

src/app/ui/collection-tools-examinee/collection-tools.component.ts

@@ -462,6 +462,13 @@ export class CollectionToolsExamineeComponent implements OnInit {
   planData: any //当前考题题目
   Facilities: any //当前预案考题所有楼层要考的基本信息素材
   //获得单位预案设定
+  //上传考题
+  weatherData = {
+    weather: null,
+    airTemperature: null,
+    windScale: null,
+    windDirection: null
+  }
   async getPaperPlanData() {
     let params = {
       paperId: this.paperId
@@ -477,6 +484,7 @@ export class CollectionToolsExamineeComponent implements OnInit {
         this.handleHybridTree(questions, '题目')
         this.Facilities = JSON.parse(this.planData.examFacilityAssetsData)
         console.log('当前预案设定需要隐藏的基本信息图标', this.Facilities)
+        this.weatherData = JSON.parse(this.planData.weather) 
         resolve(1)
       })
     })

src/app/ui/collection-tools-read/collection-tools.component.html

@@ -33,7 +33,38 @@
       <!-- H5Canvas -->
       <app-working-area #canvas [init]='this'></app-working-area>
       <!-- H5Canvas -->
-
+      <!-- 天气 -->
+      <div class="weatherBox">
+        <span class="name">天气</span>
+        <input disabled class="weatherInput" [(ngModel)]="weatherData.weather" type="text" placeholder="最多输入10字节" maxlength="10">
+        <span class="name">气温</span>
+        <div style="display: inline-block;position: relative;">
+          <input disabled [(ngModel)]="weatherData.airTemperature" style="width: 60px;" type="number" value="0"
+            oninput="if(value.length>2)value=value.slice(0,2)">
+          <span style="position: absolute;right: 16px;top: 2px;color: #9c9fa5;">℃</span>
+        </div>
+        <span class="name">风力</span>
+        <select disabled class="weatherSelect" [(ngModel)]="weatherData.windScale">
+          <option value="0">0(无风)</option>
+          <option value="1">1(软风)</option>
+          <option value="2">2(轻风)</option>
+          <option value="3">3(微风)</option>
+          <option value="4">4(和风)</option>
+          <option value="5">5(清风)</option>
+          <option value="6">6(强风)</option>
+        </select>
+        <span class="name">风向</span>
+        <select disabled class="weatherSelect" [(ngModel)]="weatherData.windDirection">
+          <option value="0">东</option>
+          <option value="1">西</option>
+          <option value="2">南</option>
+          <option value="3">北</option>
+          <option value="4">东南</option>
+          <option value="5">西南</option>
+          <option value="6">东北</option>
+          <option value="7">西北</option>
+        </select>
+      </div>
       <!-- 拖拽窗口 -->
       <div (mousewheel)="$event.stopPropagation()" class="centerBuildingDiv" style="user-select: none;" cdkDrag>
         <div class="centerTotal">

src/app/ui/collection-tools-read/collection-tools.component.scss

@@ -1,7 +1,10 @@
 @import './panel.scss';
+
 ::-webkit-scrollbar {
-  display: none; /* Chrome Safari */
+  display: none;
+  /* Chrome Safari */
 }
+
 .content {
   width: 100%;
   height: 100%;
@@ -10,6 +13,7 @@
   padding: 3px;
   display: flex;
   flex-direction: column;
+
   .buildingbtnchecked {
     background-color: #07CDCF;
     color: white;
@@ -26,6 +30,7 @@
   align-items: center;
   background-color: #fff;
   box-shadow: inset 0px -3px 5px 0px rgb(165, 163, 163);
+
   .headerTitle {
     width: 235px;
     overflow: hidden;
@@ -35,13 +40,16 @@
     font-size: 20px;
     font-weight: 550;
   }
+
   .headerCenter {
     flex: 1;
     overflow: hidden;
+
     .mainPointDiv {
       box-sizing: border-box;
       padding-left: 8px;
       cursor: default;
+
       span {
         font-family: Source Han Sans CN;
         color: #FF8678;
@@ -50,11 +58,13 @@
 
     }
   }
+
   .headerRight {
     width: 350px;
     overflow: hidden;
     box-sizing: border-box;
     padding-left: 10px;
+
     button {
       font-size: 14px;
       color: #07CDCF;
@@ -63,6 +73,7 @@
       outline: none;
       cursor: pointer;
     }
+
     .mat-icon {
       font-size: 22px;
       vertical-align: middle;
@@ -79,9 +90,11 @@
     vertical-align: middle;
     margin-left: 1px;
   }
+
   span {
     font-size: 18px;
   }
+
   flex: 5%;
   display: flex;
   align-items:center;
@@ -89,13 +102,16 @@
   box-sizing: border-box;
   margin: 3px 0;
   background-color: white;
+
   button {
     border: 0.5px solid rgb(208, 211, 214);
     margin: 0 2px;
   }
+
   .editdeletebtn {
     display: none;
   }
+
   .bigeditdeletebtn:hover {
     .editdeletebtn {
       display: inline-block;
@@ -109,6 +125,7 @@
   cursor: pointer;
   vertical-align: middle;
 }
+
 //左右两侧功能栏 统一样式
 .publicCss {
   border-radius: 5px;
@@ -116,14 +133,17 @@
   height: 100%;
   top: 0;
 }
+
 .functionalDomain {
   flex: 1;
   overflow: hidden;
+
   .functionalDomainContent {
     position: relative;
     width: 100%;
     height: 100%;
   }
+
   .answerDivDrag {
     position: absolute;
     width: 230px;
@@ -137,6 +157,7 @@
     border-radius: 5px;
     // display: flex;
   }
+
   .centerBuildingDiv {
     position: absolute;
     max-width: 400px;
@@ -145,6 +166,7 @@
     z-index: 150;
     display: flex;
   }
+
   .functionalDomainLeft {
     background-color: #fff;
     display: flex;
@@ -156,6 +178,7 @@
     width: 235px;
     left: 0;
     z-index: 111;
+
     .leftDragDiv {
       position: absolute;
       right: 0;
@@ -165,6 +188,7 @@
       cursor: e-resize;
     }
   }
+
   .functionalDomainRight {
     z-index: 111;
     margin-right: 0px;
@@ -174,11 +198,13 @@
     min-width: 235px;
     right: 0;
   }
+
   //右边导航栏显示隐藏
   .togglePanel2 {
     margin-right: -2000px;
     transition: margin-right 1s;
   }
+
   //左侧导航栏显示隐藏
   .togglePanel {
     margin-left: -2000px;
@@ -195,19 +221,26 @@
   border-radius: 5px;
   box-sizing: border-box;
   padding: 5px 0;
+
   .centerTotalHeader {
     height: 30px;
     line-height: 30px;
     box-sizing: border-box;
     padding: 0 5px;
     font-size: 14px;
-    .above:hover {cursor: move;;}
+
+    .above:hover {
+      cursor: move;
+      ;
+    }
+
     .above {
       font-size: 24px;
       color: rgb(175, 164, 164);
       margin: 0 10px 0 10px;
     }
   }
+
   .everyTotal {
     width: 100%;
     height: 30px;
@@ -219,6 +252,7 @@
     font-size: 16px;
   }
 }
+
 //中间建筑/楼层
 
 //右边操作栏
@@ -229,21 +263,36 @@
   padding-left: 5px;
   box-sizing: border-box;
   color: #07CDCF;
-  .mat-icon {vertical-align: middle; margin-right: 5px; font-size: 22px;}
+
+  .mat-icon {
+    vertical-align: middle;
+    margin-right: 5px;
+    font-size: 22px;
+  }
+}
+
+input {
+  border: none;
+  outline: none;
+  background-color: #d6dddf;
+  box-sizing: border-box;
+  padding-left: 5px;
 }
-input { border: none; outline: none; background-color: #d6dddf; box-sizing: border-box; padding-left: 5px; }
 
 //右侧属性
 .property {
   display: flex;
   flex-flow: column;
+
   .siteproperty {
     height: 100%;
     overflow-y: auto;
+
     p {
       color: #9c9fa5;
       padding-left: 5px;
     }
+
     .siteproperty_size {
       background-color: #F2F5F6;
       width: 93%;
@@ -251,6 +300,7 @@ input { border: none; outline: none; background-color: #d6dddf; box-sizing: bord
       border-radius: 3px;
       min-height: 21px;
     }
+
     .rightAttribute {
       width: 12%;
       height: 99.5%;
@@ -261,55 +311,69 @@ input { border: none; outline: none; background-color: #d6dddf; box-sizing: bord
       border: 2px solid #464646;
     }
   }
+
   .assetsproperty {
     overflow-y: auto;
     height: 100%;
+
     p {
       color: #9c9fa5;
       margin: 1px 0 3px 8px;
       font-size: 14px;
     }
+
     span {
       font-size: 15px;
     }
+
     input {
       height: 24px;
       border-radius: 3px;
     }
+
     .biginput {
       display: block;
       width: 88%;
       margin: 0 auto;
     }
+
     .smallinput {
       display: block;
       width: 19%;
       margin-left: 14px;
     }
+
     .textarea {
       display: block;
       width: 88%;
       height: 50px;
       margin: 0 auto;
     }
+
     .swiper-button-next {
       right: 6px;
     }
+
     .swiper-button-prev {
       left: 6px;
     }
+
     .swiper-container {
       // --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
       // --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
-      --swiper-navigation-size:20px;/* 设置按钮大小 */
+      --swiper-navigation-size: 20px;
+      /* 设置按钮大小 */
     }
+
     .hoverred:hover {
       color: rgb(187, 28, 28);
     }
+
     .selectDiv {
       height: 21px;
       position: relative;
       margin-bottom: 5px;
+
       select {
         width: 98px;
         height: 22px;
@@ -321,9 +385,11 @@ input { border: none; outline: none; background-color: #d6dddf; box-sizing: bord
         border-radius: 2px;
       }
     }
+
     .colorBigDiv {
       width: 88%;
       margin-left: 8px;
+
       .colorBigTemplateDiv {
         span {
           color: #9c9fa5;
@@ -331,6 +397,7 @@ input { border: none; outline: none; background-color: #d6dddf; box-sizing: bord
           height: 26px;
           line-height: 26px;
         }
+
         .colorTemplateDiv {
           width: 65%;
           height: 22px;
@@ -348,6 +415,7 @@ input { border: none; outline: none; background-color: #d6dddf; box-sizing: bord
           float: left;
           border: 2px solid white;
         }
+
         .coloractive {
           border: 2px solid black;
         }
@@ -356,11 +424,13 @@ input { border: none; outline: none; background-color: #d6dddf; box-sizing: bord
 
   }
 }
+
 //右侧消防要素
 .firecategories {
   position: relative;
   display: flex;
   flex-flow: column;
+
   .firecategoriesTree {
     overflow-y: auto;
     height: 100%;
@@ -371,11 +441,14 @@ input { border: none; outline: none; background-color: #d6dddf; box-sizing: bord
 div:focus {
   outline: none;
 }
+
 //没有图片时显示无图片背景图
 .noImgCss {
   background: url(../../../assets/images/noImg.png) no-repeat center center;
-  background-size: 88% 100%;/*按比例缩放*/
+  background-size: 88% 100%;
+  /*按比例缩放*/
 }
+
 .input {
   width: 18px;
   height: 18px;
@@ -388,10 +461,12 @@ div:focus {
 .isLookCss {
   margin-left: auto;
   color: #07CDCF;
+
   .icongray {
     color: #D9D0DC;
   }
 }
+
 .mat-tree-node {
   padding-right: 3px;
   min-height: 30px;
@@ -399,12 +474,15 @@ div:focus {
   font-size: 12px;
   cursor: pointer;
 }
+
 .treeNode:hover {
   background-color: #ccebf8;
 }
+
 .isLookPattern {
   display: none;
 }
+
 .treeText {
   overflow: hidden;
   white-space: nowrap;
@@ -413,48 +491,48 @@ div:focus {
   width: 65px;
 }
 
-.bigBox{
-  width: 700px;
-  height: 40px;
-  position: absolute;
-  overflow: hidden;
-  right: 0;
-}
 .weatherBox {
+  width: 600px;
   height: 40px;
-  width: 700px;
-  line-height: 40px;
+  box-sizing: border-box;
+  padding: 0 12px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
   position: absolute;
-  right: 0;
-  transition: right linear .5s;
+  right: 238px;
+  top: 2px;
+  background: #fff;
+  border-radius: 3px;
+
   .openbtn {
     font-size: 45px;
     height: 45px;
     width: 40px;
   }
+
   .name {
     font-size: 16px;
     vertical-align: middle;
     margin-left: 3px;
   }
+
   input {
-    width: 140px;
-    height: 22px;
+    width: 145px;
+    height: 25px;
     margin-left: 3px;
+    border: 1px solid black;
+    background: none;
   }
+
   select {
-    width: 96px;
+    width: 85px;
     height: 25px;
     margin-left: 3px;
     vertical-align: middle;
   }
 }
-.open{
-  right: 0px;
-}
-.close{
-  right:-622px;
-}
+
 .bottomCss {
   position: absolute;
   left: 232px;
@@ -465,6 +543,7 @@ div:focus {
   z-index: 111;
   background-color: white;
   border: 1px solid #464646;
+
   .dragDiv {
     width: 100%;
     height: 3px;
@@ -473,9 +552,11 @@ div:focus {
     z-index: 111;
     cursor: n-resize;
   }
+
   .title {
     height: 35px;
     background-color: #464646;
+
     div {
       background-color: #464646;
       float: left;
@@ -485,10 +566,12 @@ div:focus {
       padding-left: 5px;
       cursor: pointer;
     }
+
     .detailsAndattentBtn {
       background-color: #595959;
     }
   }
+
   .body {
     textarea {
       width: 100%;

src/app/ui/collection-tools-read/collection-tools.component.ts

@@ -229,6 +229,12 @@ export class CollectionToolsReadComponent implements OnInit {
   planData: any //当前考题题目
   Facilities: any //当前预案考题所有楼层要考的基本信息素材
   //获得单位预案设定
+  weatherData = {
+    weather: null,
+    airTemperature: null,
+    windScale: null,
+    windDirection: null
+  }
   async getPaperPlanData() {
     let params = {
       paperId: this.paperId
@@ -244,6 +250,7 @@ export class CollectionToolsReadComponent implements OnInit {
         this.handleHybridTree(questions, '题目')
         this.Facilities = JSON.parse(this.planData.examFacilityAssetsData)
         console.log('当前预案设定需要隐藏的基本信息图标', this.Facilities)
+        this.weatherData = JSON.parse(this.planData.weather) 
         resolve(1)
       })
     })

src/app/ui/collection-tools/collection-tools.component.html

@@ -22,6 +22,41 @@
       <!-- H5Canvas -->
       <app-working-area #canvas [init]='this'></app-working-area>
       <!-- H5Canvas -->
+
+
+      <!-- 天气 -->
+      <div class="weatherBox">
+        <span class="name">天气</span>
+        <input class="weatherInput" [(ngModel)]="weatherData.weather" type="text" placeholder="最多输入10字节" maxlength="10">
+        <span class="name">气温</span>
+        <div style="display: inline-block;position: relative;">
+          <input [(ngModel)]="weatherData.airTemperature" style="width: 60px;" type="number" value="0"
+            oninput="if(value.length>2)value=value.slice(0,2)">
+          <span style="position: absolute;right: 16px;top: 2px;color: #9c9fa5;">℃</span>
+        </div>
+        <span class="name">风力</span>
+        <select class="weatherSelect" [(ngModel)]="weatherData.windScale">
+          <option value="0">0(无风)</option>
+          <option value="1">1(软风)</option>
+          <option value="2">2(轻风)</option>
+          <option value="3">3(微风)</option>
+          <option value="4">4(和风)</option>
+          <option value="5">5(清风)</option>
+          <option value="6">6(强风)</option>
+        </select>
+        <span class="name">风向</span>
+        <select class="weatherSelect" [(ngModel)]="weatherData.windDirection">
+          <option value="0">东</option>
+          <option value="1">西</option>
+          <option value="2">南</option>
+          <option value="3">北</option>
+          <option value="4">东南</option>
+          <option value="5">西南</option>
+          <option value="6">东北</option>
+          <option value="7">西北</option>
+        </select>
+      </div>
+
       <div (mousewheel)="$event.stopPropagation()" class="centerBuildingDiv" style="user-select: none;" cdkDrag>
         <div class="centerTotal">
           <div class="centerTotalHeader overflowText">

src/app/ui/collection-tools/collection-tools.component.scss

@@ -471,21 +471,20 @@ div:focus {
   width: 65px;
 }
 
-.bigBox {
-  width: 700px;
-  height: 40px;
-  position: absolute;
-  overflow: hidden;
-  right: 0;
-}
 
 .weatherBox {
+  width: 600px;
   height: 40px;
-  width: 700px;
-  line-height: 40px;
+  box-sizing: border-box;
+  padding: 0 12px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
   position: absolute;
-  right: 0;
-  transition: right linear .5s;
+  right: 238px;
+  top: 2px;
+  background: #fff;
+  border-radius: 3px;
 
   .openbtn {
     font-size: 45px;
@@ -500,26 +499,21 @@ div:focus {
   }
 
   input {
-    width: 140px;
-    height: 22px;
+    width: 145px;
+    height: 25px;
     margin-left: 3px;
+    border: 1px solid black;
+    background: none;
   }
 
   select {
-    width: 96px;
+    width: 85px;
     height: 25px;
     margin-left: 3px;
     vertical-align: middle;
   }
 }
 
-.open {
-  right: 0px;
-}
-
-.close {
-  right: -622px;
-}
 
 .bottomCss {
   position: absolute;

src/app/ui/collection-tools/collection-tools.component.ts

@@ -1057,11 +1057,17 @@ export class CollectionToolsComponent implements OnInit {
   }
 
   //上传考题
+  weatherData = {
+    weather: null,
+    airTemperature: null,
+    windScale: null,
+    windDirection: null
+  }
   openUploadQuestions() {
     let treeData = JSON.parse(JSON.stringify(this.dataSource.data))
     let nodes = JSON.parse(JSON.stringify(JSON.parse(sessionStorage.getItem('examNodeList'))))
     if (nodes) {
-      let data = { treeData: treeData, question: JSON.parse(JSON.stringify(this.examMsg)), node: nodes, allFireElements: this.allFireElements }
+      let data = { treeData: treeData, question: JSON.parse(JSON.stringify(this.examMsg)), node: nodes, allFireElements: this.allFireElements, weatherData: this.weatherData }
       let dialogRef = this.dialog.open(uploadQuestions, { data });
     } else {
       const config = new MatSnackBarConfig();

src/app/ui/collection-tools/examinationQuestions.ts

@@ -176,6 +176,8 @@ export class uploadQuestions {
     this.renderData = data
     this.getProfiles()
     this.nodeInit()
+
+    console.log('天气信息', this.data.weatherData)
   }
 
   //处理数据 将消防要素模板与真实素材结合
@@ -284,7 +286,8 @@ export class uploadQuestions {
       score: 0,
       examFacilityAssetsData: sessionStorage.getItem('消防设施' + sessionStorage.getItem('paperId')) ? sessionStorage.getItem('消防设施' + sessionStorage.getItem('paperId')) : null,
       examDisposalNodesData: sessionStorage.getItem('examNodeList') ? sessionStorage.getItem('examNodeList') : null,
-      companyId: sessionStorage.getItem('companyId')
+      companyId: sessionStorage.getItem('companyId'),
+      weather: JSON.stringify(this.data.weatherData)
     }