完善页面

src/assets/css/variables.styl

@@ -16,7 +16,10 @@ $layout(gap = 0.6rem)
   grid-gap gap
   padding 0 gap gap
 
-
+$selected()
+  box-sizing border-box
+  border 0.1rem solid $edgeColor
+  background-color rgba(0,242,255,0.1)
 $fontColor = #2c3e50
 $edgeColor = #00f2ff
 $cardBg = rgba(0, 242, 255, 0.1)

src/components/MonitorForm/index.js

+import MonitorForm from './monitor-form.vue'
+export default (Vue) => {
+  Vue.component('m-form', MonitorForm)
+}

src/components/MonitorForm/monitor-form.vue

+<template>
+  <div class="monitor-form">
+    <p v-if="title" class="title">{{title}}</p>
+    <Row class="row" v-for="(row, rowIndex) in layout" :key="rowIndex">
+      <i-col class="col" v-for="(col, key) in row" :key="key" :span="col.width" :offset="col.offset || 0">
+        <div :style="`text-align: ${col.align || 'right'}; width:${labelWidth}rem;`">{{col.label}}：</div>
+        &nbsp;&nbsp;
+        <div>{{model[key]}}</div>
+      </i-col>
+    </Row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MonitorForm',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    labelWidth: {
+      type: Number,
+      default: 10,
+    },
+    layout: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    model: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.monitor-form
+  font-size 1rem
+  color #fff
+  margin-bottom 1rem
+  .title
+    font-size 1.2rem
+    font-weight bold
+    color $edgeColor
+    padding-bottom 0.5rem
+    margin-bottom 1rem
+    border-bottom 0.1rem solid $color-map()
+  .row
+    line-height 2.4rem
+    &:nth-child(2n)
+      background-color $color-map(0.15)
+  .col
+    display flex
+    align-items center
+</style>

src/components/MonitorModal/index.js

+import MonitorModal from './monitor-modal.vue'
+export default (Vue) => {
+  Vue.component('m-modal', MonitorModal)
+}

src/components/MonitorModal/monitor-modal.vue

+<template>
+<transition name="custom-classes-transition" enter-active-class="animated zoomInUp" leave-active-class="animated zoomOutUp">
+  <div v-if="value" class="monitor-modal">
+    <div :style="`width:${width}`">
+      <img @click="handleClose" class="close-btn" src="@/assets/images/modal-close.png"/>
+      <img class="border top" src="@/assets/images/modal-top.png"/>
+      <div class="content">
+        <slot/>
+      </div>
+      <img class="border bottom" src="@/assets/images/modal-bottom.png"/>
+    </div>
+  </div>
+</transition>
+</template>
+
+<script>
+export default {
+  name: 'MonitorModal',
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    width: {
+      type: String,
+      default: '40%',
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('input', false)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.monitor-modal
+  position fixed
+  top 0
+  left 0
+  right 0
+  bottom 0
+  display flex
+  align-items center
+  justify-content center
+  background rgba(0,0,0,0.1)
+  z-index 1000
+  >div
+    position relative
+    min-height 30%
+    max-height 70%
+    background $color-map(0.1)
+    color #ccc
+    transition height 0.5s
+    .content
+      padding 3% 2%
+    >img
+      position absolute
+      &.close-btn
+        top -0.4rem
+        right -2.6rem
+        width 2.4rem
+        cursor pointer
+      &.border
+        width 103%
+        left -1.5%
+        &.top
+          top -1rem
+        &.bottom
+          bottom -1rem
+</style>

src/components/MonitorTable/index.js

+import MonitorTable from './monitor-table.vue'
+export default (Vue) => {
+  Vue.component('m-table', MonitorTable)
+}

src/components/MonitorTable/monitor-table.vue

+<template>
+  <div class="monitor-table">
+    <p v-if="title" class="title">{{title}}</p>
+    <Row class="row row-title" >
+      <i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
+        <div :style="`text-align: ${col.align || 'left'}; `">{{col.title}}</div>
+      </i-col>
+    </Row>
+    <template v-if="model && model.length > 0">
+      <div>
+        <Row class="row" v-for="(row, rowIndex) in model" :key="rowIndex">
+          <i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
+            <div :style="`text-align: ${col.align || 'left'};color: ${col.color} `">{{row[col.key]}}</div>
+          </i-col>
+        </Row>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MonitorTable',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    layout: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    model: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.monitor-table
+  font-size 1rem
+  color #fff
+  margin-bottom 1rem
+  .title
+    font-size 1.2rem
+    font-weight bold
+    color $edgeColor
+    padding-bottom 0.5rem
+    margin-bottom 1rem
+    border-bottom 0.1rem solid $color-map()
+  .row
+    line-height 2.4rem
+    &.row-title
+      font-weight bold
+      font-size 1.1rem
+      background-color $color-map()
+    &:nth-child(2n)
+      background-color $color-map(0.15)
+  .col
+    display flex
+    align-items center
+    padding 0 1rem
+</style>

src/main.js

@@ -5,7 +5,7 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import echarts from 'echarts'
-import {Button, Divider, Progress, Select, Option, Circle, Icon, Dropdown, DropdownMenu, DropdownItem} from 'view-design'
+import {Row, Col, Button, Divider, Progress, Select, Option, Circle, Icon, Dropdown, DropdownMenu, DropdownItem} from 'view-design'
 import animate from 'animate.css'
 import ajax from '@/server/ajax'
 import api from '@/server/api'
@@ -15,6 +15,9 @@ import MonitorCount from '@/components/MonitorCount'
 import MonitorFlip from '@/components/MonitorFlip'
 import MonitorBrief from '@/components/MonitorBrief'
 import MonitorProgress from '@/components/MonitorProgress'
+import MonitorModal from '@/components/MonitorModal'
+import MonitorForm from '@/components/MonitorForm'
+import MonitorTable from '@/components/MonitorTable'
 import 'view-design/dist/styles/iview.css'
 
 Vue.config.productionTip = false
@@ -28,6 +31,11 @@ Vue.use(MonitorFlip)
 Vue.use(MonitorBrief)
 Vue.use(MonitorProgress)
 Vue.use(MonitorChart)
+Vue.use(MonitorModal)
+Vue.use(MonitorForm)
+Vue.use(MonitorTable)
+Vue.component('Row', Row)
+Vue.component('i-col', Col)
 Vue.component('Button', Button)
 Vue.component('Divider', Divider)
 Vue.component('Progress', Progress)

src/views/components/community-list.vue

 <template>
   <div class="community-list">
-    <div v-for="(item, index) in list" :key="index" :class="getClass(index + 1)">
+    <div
+    v-for="(item, index) in list"
+    :key="index"
+    :class="`${getClass(index + 1)} ${curCommunity == item ? 'on' : ''}`"
+    @click="handleClick(item)"
+    >
       <div class="dot" />
       {{item}}
     </div>
@@ -26,6 +31,7 @@ export default {
         '万泉新新家园',
         '金地·格林小镇',
       ],
+      curCommunity: null,
     }
   },
   methods: {
@@ -36,7 +42,11 @@ export default {
       } else {
         return 'row-odd'
       }
-    }
+    },
+    handleClick(name) {
+      this.curCommunity = name
+      this.$emit('select', name)
+    },
   }
 }
 </script>
@@ -50,10 +60,11 @@ export default {
   >div
     display flex
     align-items center
-    width 46%
-    padding 0.5rem
+    width 47%
     color #fff
-    margin-right 0.5rem
+    padding 0 0.5rem
+    margin 0 0.3rem
+    cursor pointer
     &.row-even
       background rgba(0,0,0,0.2)
       .dot
@@ -63,4 +74,6 @@ export default {
       height 1rem
       background gold
       margin-right 1rem
+    &.on
+      $selected()
 </style>

src/views/components/map-operate.vue

@@ -25,12 +25,19 @@
         @click="handleClick(btn)"
         />
     </div>
+    <transition name="custom-classes-transition" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
+      <SearchBar v-if="curBtn == 'search'" class="search-bar"/>
+    </transition>
   </div>
 </template>
 
 <script>
+import SearchBar from './search-bar'
 export default {
   name: 'MapOperate',
+  components: {
+    SearchBar,
+  },
   data() {
     return {
       btns: [
@@ -124,4 +131,11 @@ export default {
       &.on
         transform scale(1.3)
         transform translate(0, -0.5rem)
+  .search-bar
+    position absolute
+    bottom 12%
+    width 50%
+    left 0
+    right 0
+    margin 0 auto
 </style>

src/views/components/person-list.vue

 <template>
   <div class="person-list">
-    <div v-for="(item, index) in list" :key="index">
+    <div
+      v-for="(item, index) in list"
+      :key="index"
+      :class="`${item == curName ? 'on' : ''}`"
+       @click="handleClick(item)"
+      >
       <img src="@/assets/images/location.png"/>
       <span>{{item}}</span>
     </div>
@@ -12,6 +17,7 @@ export default {
   name: 'PersonList',
   data() {
     return {
+      curName: null,
       list: [
         '张三',
         '李四',
@@ -25,6 +31,12 @@ export default {
       ]
     }
   },
+  methods: {
+    handleClick(name) {
+      this.curName = name
+      this.$emit('select', name)
+    }
+  },
 }
 </script>
 
@@ -39,6 +51,9 @@ export default {
     align-items center
     width 33.3%
     padding 0.5rem 1rem
+    cursor pointer
+    &.on
+      $selected()
     img
       width 1rem
       margin-right 0.8rem

src/views/components/search-bar.vue

+<template>
+  <div class="search-bar">
+    <div class="btn-wrapper">
+      <div
+        v-for="btn in btns"
+        :key="btn"
+        :class="`${btn == curBtn ? 'on' : ''}`"
+        @click="handleClick(btn)"
+        >
+        {{btn}}
+      </div>
+    </div>
+    <div class="input-wrapper">
+      <input v-model="searchKey" @keyup.enter="handleSearch" type="text" placeholder="请输入">
+      <img @click="handleSearch" src="@/assets/images/search.png"/>
+      <span class="edge left"/>
+      <span class="edge right"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchBar',
+  data() {
+    return {
+      curBtn: '小区查询',
+      btns: ['小区查询', '检查主题查询'],
+      searchKey: null,
+    }
+  },
+  methods: {
+    handleClick(btn) {
+      this.curBtn = btn
+    },
+    handleSearch() {
+      console.log(this.searchKey)
+
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.search-bar
+  .btn-wrapper
+    display flex
+    align-items center
+    margin-bottom 0.5rem
+    >div
+      color #ccc
+      cursor pointer
+      transition all 0.3s
+      &:hover
+        color $edgeColor
+      &.on
+        color $edgeColor
+        transform scale(1.1)
+        font-weight bold
+      &+div
+        &::before
+          display inline-block
+          content ''
+          width 0.1rem
+          background #ccc
+          height 0.8rem
+          margin 0 0.5rem 0 1rem
+  .input-wrapper
+    position relative
+    border-bottom 0.1rem solid $edgeColor
+    height 3rem
+    .edge
+      display block
+      position absolute
+      bottom 0
+      width 0
+      height 0
+      border 0.2rem solid transparent
+      border-bottom-color $edgeColor
+      &.left
+        left 0
+        border-left-color $edgeColor
+      &.right
+        right 0
+        border-right-color $edgeColor
+    input
+      display block
+      position absolute
+      left 0
+      top 0
+      width 100%
+      height 100%
+      padding 0 1rem
+      line-height 3rem
+      color #ccc
+      border none
+      outline none
+      font-size 1rem
+      background-color #000
+    img
+      position absolute
+      cursor pointer
+      top 0.5rem
+      right 1rem
+      width 2rem
+</style>

src/views/main.vue

@@ -14,7 +14,7 @@
     </div>
     <div class="box2">
       <m-card title="检查人员列表" mode="2">
-        <PersonList />
+        <PersonList @select="handlePersonSelect"/>
       </m-card>
     </div>
     <div class="box3">
@@ -34,9 +34,18 @@
     </div>
     <div class="box6">
       <m-card title="开具整改单列表" mode="2">
-        <CommunityList />
+        <CommunityList @select="handleCommunitySelect"/>
       </m-card>
     </div>
+    <m-modal v-model="showPersonModal">
+      <m-form title="检查人员详情" :layout="personLayout.slice(0, 2)" :model="personData"></m-form>
+      <m-form title="检查详情" :layout="personLayout.slice(2)" :model="personData"></m-form>
+    </m-modal>
+    <m-modal v-model="showCommunityModal" width="46%">
+      <m-form title="检查小区详情" :layout="communityLayout.slice(0, 4)" :model="communityData"></m-form>
+      <m-form title="检查详情" :layout="communityLayout.slice(4)" :model="communityData"></m-form>
+      <m-table title="未落实指标" :layout="communityTableLayout" :model="communityTableData"></m-table>
+    </m-modal>
   </div>
 </template>
 
@@ -61,6 +70,180 @@ export default {
     DayCheckComparison,
     MapOperate,
   },
+  data() {
+    return {
+      showPersonModal: false,
+      personLayout: [
+        {
+          name: {
+            label: '检查人员姓名',
+            width: 12,
+          },
+          company: {
+            label: '所在单位',
+            width: 12
+          }
+        },
+        {
+          phone: {
+            label: '手机号码',
+            width: 12,
+          },
+        },
+        {
+          theme: {
+            label: '检查主题名称',
+            width: 12,
+          },
+          public: {
+            label: '发布单位',
+            width: 12,
+          },
+        },
+        {
+          check: {
+            label: '已检查小区数',
+            width: 12,
+          },
+          rectify: {
+            label: '已发布整改单数',
+            width: 12,
+          },
+        },
+      ],
+      personData: {
+        name: '张三',
+        company: '市物业中心',
+        phone: '1234567890',
+        theme: '主题名称',
+        public: '上海市房办',
+        check: 7,
+        rectify: 3,
+      },
+      showCommunityModal: false,
+      communityLayout: [
+        {
+          name: {
+            label: '小区名称',
+            width: 12,
+          },
+          address: {
+            label: '小区地址',
+            width: 12,
+          },
+        },
+        {
+          province: {
+            label: '行政区',
+            width: 12,
+          },
+          house: {
+            label: '房办',
+            width: 12,
+          },
+        },
+        {
+          company: {
+            label: '物业企业',
+            width: 12,
+          },
+          manager: {
+            label: '小区经理',
+            width: 12,
+          },
+        },
+        {
+          phone: {
+            label: '小区经理手机',
+            width: 12,
+          },
+        },
+        {
+          theme: {
+            label: '主题名称',
+            width: 12,
+          },
+          public: {
+            label: '发布单位',
+            width: 12,
+          },
+        },
+        {
+          checker: {
+            label: '检查人员姓名',
+            width: 12,
+          },
+          partner: {
+            label: '同行人员姓名',
+            width: 12,
+          },
+        },
+        {
+          date: {
+            label: '完成检查时间',
+            width: 12,
+          },
+          isRectify: {
+            label: '是否开具整改单',
+            width: 12,
+          },
+        },
+        {
+          sign: {
+            label: '小区经理签名',
+            width: 12,
+          },
+        },
+      ],
+      communityData: {
+        name: '金港花园',
+        address: '上海市松江区横港路155弄',
+        province: '松江区',
+        house: '泗泾房办',
+        company: '上海市XXX物业公司',
+        manager: '张三',
+        phone: '12345667890',
+        theme: '主题名称',
+        public: '上海市房办',
+        checker: '李四',
+        partner: '王五',
+        date: '2020-01-10 15:50:00',
+        isRectify: '是',
+        sign: '签名',
+      },
+      communityTableLayout: [
+        {
+          title: '指标名称',
+          key: 'name',
+          width: 8,
+        },
+        {
+          title: '检查情况',
+          key: 'situation',
+          width: 8,
+          color: 'red',
+        },
+        {
+          title: '附件',
+          key: 'file',
+          width: 8,
+        },
+      ],
+      communityTableData: [
+        {name: '指标1', situation: '指标有问题', file: '附件'},
+        {name: '指标2', situation: '指标有问题', file: '附件'},
+        {name: '指标3', situation: '指标有问题', file: '附件'},
+      ]
+    }
+  },
+  methods: {
+    handlePersonSelect(name) {
+      this.showPersonModal = true
+    },
+    handleCommunitySelect(name) {
+      this.showCommunityModal = true
+    }
+  }
 }
 </script>