生活生产条件

src/apps/AppMonitoringObject/MonitorFamilySituation.vue

@@ -1,17 +1,68 @@
 <template>
   <div class="add">
     <div class="form-group">
+      <p>生活条件</p>
       <div class="form-item">
         <div class="form-item__wrapper">
           <div class="left">
-            <i>*</i>
+            <i></i>
-            <span>监测对象类型</span>
+            <span>户类型</span>
           </div>
           <div class="right">
             <AiSelect dict="fpType" v-model="form.objectType"></AiSelect>
           </div>
         </div>
       </div>
+
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i></i>
+            <span>住房面积</span>
+          </div>
+          <div class="right">
+            <u-input v-model="value" placeholder="请输入" placeholder-style="font-size: 15px;" type="text"  />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i></i>
+            <span>与村主干路距离</span>
+          </div>
+          <div class="right">
+            <u-input v-model="value" placeholder="请输入" placeholder-style="font-size: 15px;" type="text"  />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i></i>
+            <span>入户路类型</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpType" v-model="form.objectType"></AiSelect>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i></i>
+            <span>主要燃料类型</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpType" v-model="form.objectType"></AiSelect>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="form-group" style="margin-top: 8px;">
       <div class="form-item">
         <div class="form-item__wrapper">
           <div class="left">
@@ -28,7 +79,7 @@
         <div class="form-item__wrapper">
           <div class="left">
             <i>*</i>
-            <span>是否饮水安全问题</span>
+            <span>是否解决安全饮水</span>
           </div>
           <div class="right">
             <div class="check-item" :class="form.drinkingWaterSafety == '01' ? 'check-active' : '' " @click="form.drinkingWaterSafety='01'">是<img src="./components/img/check-icon.png" alt=""></div>
@@ -40,7 +91,55 @@
         <div class="form-item__wrapper">
           <div class="left">
             <i>*</i>
-            <span>是否搬迁</span>
+            <span>是否住房损坏</span>
+          </div>
+          <div class="right">
+            <div class="check-item" :class="form.move == '01' ? 'check-active' : '' " @click="form.move='01'">是<img src="./components/img/check-icon.png" alt=""></div>
+            <div class="check-item" :class="form.move !='01' ? 'check-active' : '' " @click="form.move='02'">否<img src="./components/img/check-icon.png" alt=""></div>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>是否饮水设施损坏</span>
+          </div>
+          <div class="right">
+            <div class="check-item" :class="form.move == '01' ? 'check-active' : '' " @click="form.move='01'">是<img src="./components/img/check-icon.png" alt=""></div>
+            <div class="check-item" :class="form.move !='01' ? 'check-active' : '' " @click="form.move='02'">否<img src="./components/img/check-icon.png" alt=""></div>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>是否有卫生厕所</span>
+          </div>
+          <div class="right">
+            <div class="check-item" :class="form.move == '01' ? 'check-active' : '' " @click="form.move='01'">是<img src="./components/img/check-icon.png" alt=""></div>
+            <div class="check-item" :class="form.move !='01' ? 'check-active' : '' " @click="form.move='02'">否<img src="./components/img/check-icon.png" alt=""></div>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>是否通生活用电</span>
+          </div>
+          <div class="right">
+            <div class="check-item" :class="form.move == '01' ? 'check-active' : '' " @click="form.move='01'">是<img src="./components/img/check-icon.png" alt=""></div>
+            <div class="check-item" :class="form.move !='01' ? 'check-active' : '' " @click="form.move='02'">否<img src="./components/img/check-icon.png" alt=""></div>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>是否通广播电视</span>
           </div>
           <div class="right">
             <div class="check-item" :class="form.move == '01' ? 'check-active' : '' " @click="form.move='01'">是<img src="./components/img/check-icon.png" alt=""></div>
@@ -49,8 +148,132 @@
         </div>
       </div>
     </div>
-    <div class="btn" hover-class="text" @click="submit">保存</div>
 
+    <div class="form-group" style="margin-top: 8px;">
+      <p>生产条件</p>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i></i>
+            <span>耕地面积(亩)</span>
+          </div>
+          <div class="right">
+            <u-input v-model="value" placeholder="请输入" placeholder-style="font-size: 15px;" type="text"  />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i></i>
+            <span>林果面积(亩)</span>
+          </div>
+          <div class="right">
+            <u-input v-model="value" placeholder="请输入" placeholder-style="font-size: 15px;" type="text"  />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i></i>
+            <span>林地面积(亩)</span>
+          </div>
+          <div class="right">
+            <u-input v-model="value" placeholder="请输入" placeholder-style="font-size: 15px;" type="text"  />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i></i>
+            <span>退耕还林面积(亩)</span>
+          </div>
+          <div class="right">
+            <u-input v-model="value" placeholder="请输入" placeholder-style="font-size: 15px;" type="text"  />
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i></i>
+            <span>牧草地面积(亩)</span>
+          </div>
+          <div class="right">
+            <u-input v-model="value" placeholder="请输入" placeholder-style="font-size: 15px;" type="text"  />
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i></i>
+            <span>水面面积(亩)</span>
+          </div>
+          <div class="right">
+            <u-input v-model="value" placeholder="请输入" placeholder-style="font-size: 15px;" type="text"  />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="form-group" style="margin-top: 8px;">
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>是否有龙头企业带动</span>
+          </div>
+          <div class="right">
+            <div class="check-item" :class="form.dilapidatedHousehold == '01' ? 'check-active' : '' " @click="form.dilapidatedHousehold='01'">是<img src="./components/img/check-icon.png" alt=""></div>
+            <div class="check-item" :class="form.dilapidatedHousehold != '01' ? 'check-active' : '' " @click="form.dilapidatedHousehold='02'">否<img src="./components/img/check-icon.png" alt=""></div>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>是否通生产用电</span>
+          </div>
+          <div class="right">
+            <div class="check-item" :class="form.drinkingWaterSafety == '01' ? 'check-active' : '' " @click="form.drinkingWaterSafety='01'">是<img src="./components/img/check-icon.png" alt=""></div>
+            <div class="check-item" :class="form.drinkingWaterSafety != '01' ? 'check-active' : '' " @click="form.drinkingWaterSafety='02'">否<img src="./components/img/check-icon.png" alt=""></div>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>是否加入农民专业合作社</span>
+          </div>
+          <div class="right">
+            <div class="check-item" :class="form.move == '01' ? 'check-active' : '' " @click="form.move='01'">是<img src="./components/img/check-icon.png" alt=""></div>
+            <div class="check-item" :class="form.move !='01' ? 'check-active' : '' " @click="form.move='02'">否<img src="./components/img/check-icon.png" alt=""></div>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>是否有创业致富带头人带动</span>
+          </div>
+          <div class="right">
+            <div class="check-item" :class="form.move == '01' ? 'check-active' : '' " @click="form.move='01'">是<img src="./components/img/check-icon.png" alt=""></div>
+            <div class="check-item" :class="form.move !='01' ? 'check-active' : '' " @click="form.move='02'">否<img src="./components/img/check-icon.png" alt=""></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="btn" hover-class="text" @click="submit">保存</div>
   </div>
 </template>
 
@@ -84,7 +307,7 @@ export default {
   },
 
   onShow() {
-    document.title = '编辑家庭情况'
+    document.title = '生活生产条件'
   },
 
   methods: {
@@ -143,7 +366,7 @@ export default {
 
   & > div {
     margin-bottom: 16px;
-    background: #fff;
+    // background: #fff;
   }
 
   ::v-deep .u-radio {
@@ -155,8 +378,16 @@ export default {
   }
 
   .form-group {
+    background: #fff;
+    p {
+      color: #333333;
+      font-size: 36px;
+      padding: 20px 32px;
+      // border-bottom: 1px solid #E4E5E6;
+      font-weight: 600;
+    }
     .form-item {
-      padding-left: 32px;
+      padding: 0 32px;
 
       .form-item__wrapper {
         display: flex;
@@ -166,10 +397,16 @@ export default {
         border-bottom: 1px solid #E4E5E6;
       }
 
+      .left {
+        width: 300px;
+      }
+
       .right {
-        height: 112px;
+        width: calc(100% - 300px);
-        line-height: 112px;
+        text-align: right;
-        padding-right: 32px;
+        ::v-deep .u-input .u-input__input .uni-input-wrapper {
+          text-align: right;
+        }
 
         span {
           font-size: 30px;