调试防区

src/views/menu/protection/detail.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="detail">
     <nav-bar></nav-bar>
-    <van-cell-group>
-      <van-cell title="防区名称" :value="info.name" />
-      <van-cell title="所属机构" :value="info.orgName" />
-      <van-cell title="24小时防区" :value="info.allHour ? '是' : '否'" />
-    </van-cell-group>
+    <card class="info">
+      <van-cell-group>
+        <van-cell title="防区名称" :value="info.name" />
+        <van-cell title="所属机构" :value="info.orgName" />
+        <van-cell title="24小时防区" :value="info.allHour ? '是' : '否'" />
+      </van-cell-group>
+    </card>
+
     <card title="布撤防历史" class="history">
       <template>
         <k-list :list="history" :params="search">
@@ -18,7 +21,7 @@
           </template>
           <template slot-scope="{ data }">
             <div class="datarow">
-              <span >{{ getLabel(statusOptions, data.status) }}</span>
+              <span>{{ getLabel(statusOptions, data.status) }}</span>
               <span>{{ data.updateTime }}</span>
               <span>{{ data.statusUpdatorName }}</span>
             </div>
@@ -49,7 +52,7 @@ export default {
       ]
     }
   },
-  components: { NavBar,KList, Card },
+  components: { NavBar, KList, Card },
   mounted() {
     this.getInfo()
   },
@@ -65,8 +68,16 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.detail{
-  margin:15px
+.detail {
+  margin: 15px;
+}
+.info{
+  ::v-deep .van-cell__title{
+    max-width:40%;
+  }
+  ::v-deep .van-cell__value{
+    max-width:60%;
+  }
 }
 .history {
   ::v-deep .header {
@@ -75,16 +86,28 @@ export default {
     background-color: rgb(240, 240, 240);
     padding-top: 10px;
     padding-bottom: 10px;
-    
   }
 
   ::v-deep .header > span {
-    width: 33.333333%;
     display: inline-block;
     text-align: center;
   }
 
-  ::v-deep .datarow{
+  ::v-deep .header > span {
+    display: inline-block;
+    text-align: center;
+  }
+  ::v-deep .header > span:nth-child(1) {
+    width: 30%;
+  }
+
+  ::v-deep .header > span:nth-child(2) {
+    width: 40%;
+  }
+  ::v-deep .header > span:nth-child(3) {
+    width: 30%;
+  }
+  ::v-deep .datarow {
     display: flex;
     flex-direction: row;
     padding-top: 15px;
@@ -93,9 +116,19 @@ export default {
   }
 
   ::v-deep .datarow > span {
-    width: 33.333333%;
     display: inline-block;
     text-align: center;
   }
+
+  ::v-deep .datarow > span:nth-child(1) {
+    width: 30%;
+  }
+
+  ::v-deep .datarow > span:nth-child(2) {
+    width: 40%;
+  }
+  ::v-deep .datarow > span:nth-child(3) {
+    width: 30%;
+  }
 }
 </style>

src/views/menu/protection/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="protection_list">
     <nav-bar></nav-bar>
-    <van-search v-model="value" placeholder="请输入搜索关键词" />
-    <van-dropdown-menu>      
-      <van-dropdown-item :title="orgName" @open="onItemClick"/>
+    <van-search v-model="search.key" placeholder="请输入搜索关键词" />
+    <van-dropdown-menu>
+      <van-dropdown-item :title="selectedOrgName" @open="onItemClick" />
       <van-dropdown-item v-model="search.status" :options="statusOptions" />
       <van-dropdown-item v-model="search.hour" :options="hourOptions" />
     </van-dropdown-menu>
@@ -40,7 +40,7 @@ import { list } from '@/api/protection.js'
 import KList from '@/components/list/index.vue'
 import Item from './components/item.vue'
 export default {
-  components: { NavBar, KList,Item },
+  components: { NavBar, KList, Item },
   data() {
     return {
       options: [],
@@ -48,12 +48,13 @@ export default {
         orgId: this.orgId,
         status: null,
         hour: null,
+        key: null,
         updateTime: [],
         pageNum: 1,
         pageSize: 10
       },
       showOrg: false,
-
+      selectedOrgName:null,
       statusOptions: [
         { value: null, text: '防区状态' },
         { value: '0', text: '撤防' },
@@ -71,12 +72,12 @@ export default {
         { value: 24, text: '24小时内' },
         { value: 48, text: '48小时内' }
       ],
-      orgOptions: [
-        {
-          value: null,
-          text: ''
-        }
-      ],
+      // orgOptions: [
+      //   {
+      //     value: null,
+      //     text: ''
+      //   }
+      // ],
       fieldNames: {
         text: 'name',
         value: 'id',
@@ -97,15 +98,13 @@ export default {
       }
     }
   },
-  created() {   
-   
-    
-  },
+  created() {},
   mounted() {
     this.getTreeList()
     this.search.orgId = this.orgId
-    this.orgOptions[0].value = this.orgId
-    this.orgOptions[0].text = this.orgName
+    // this.orgOptions[0].value = this.orgId
+    // this.orgOptions[0].text = this.orgName
+    this.selectedOrgName=this.orgName
   },
   computed: {
     ...mapGetters(['orgName', 'orgId'])
@@ -121,15 +120,16 @@ export default {
         // console.log(res,'3333')
       })
     },
-    onItemClick(){
-      this.showOrg=true;
+    onItemClick() {
+      this.showOrg = true
     },
     //改变机构后将重新发起请求
     changeTree({ selectedOptions }) {
       // console.log(selectedOptions,'aaaaaa')
       // this.search.orgId = selectedOptions[selectedOptions.length-1].id;
-      this.search.orgId = selectedOptions[selectedOptions.length - 1].id
-      this.orgName = selectedOptions[selectedOptions.length - 1].name
+      let option = selectedOptions[selectedOptions.length - 1]
+      this.search.orgId = option.id      
+      this.selectedOrgName = option.name
     },
     onFinish({ selectedOptions }) {
       this.showOrg = false