管理要素明细弹窗修改

src/App.vue

@@ -34,7 +34,7 @@ html, body
   -moz-osx-font-smoothing grayscale
   width 100%
   height 100%
-  font-size 1.01rem
+  font-size 1.05rem
   overflow: hidden
   color #eee
 

src/views/components/issue-detail.vue

 <template>
   <div class="issue-detail">
-    <div><m-table :layout="layout" :model="data"/></div>
-    <div><m-table :layout="tableLayout" :model="tableData"/></div>
+    <div>
+      <div>
+        <h2>联勤联动处置要求</h2>
+        <Row class="row row-title">
+          <i-col v-for="(col, i) in layout" :span="col.width" :key="i" class="col">{{col.title}}</i-col>
+        </Row>
+        <Row class="row" v-for="(row, i) in data" :key="i">
+          <i-col v-for="(col, i) in layout" :key="'col'+i" :span="col.width" class="col">{{row[col.key]}}</i-col>
+        </Row>
+      </div>
+      <div class="color-bar"><span/><span/><span/></div>
+      <div>
+        <h2>管理分类评分模型</h2>
+        <Row class="row row-title">
+          <i-col v-for="(col, i) in modeLayout" :span="col.width" :key="i" class="col">{{col.title}}</i-col>
+        </Row>
+        <Row class="row" v-for="(row, i) in modeData" :key="i">
+          <i-col v-for="(col, i) in modeLayout" :key="'col'+i" :span="col.width" class="col">{{row[col.key]}}</i-col>
+        </Row>
+      </div>
+      <div class="color-bar"><span/><span/><span/></div>
+      <p>
+        评分标准：<br/>
+        每项分类的初始总分为100分，每发生一件且上未解决的事件，按其对应的分类扣减分值，得出最终该类别总分。
+      </p>
+    </div>
+    <div>
+      <h2>小区综合治理管理要素清单表</h2>
+      <Row class="row row-title" :gutter="8">
+        <i-col v-for="(col, i) in tableLayout" :span="col.width" :key="i" class="col" :style="col.align ? `text-align: ${col.align}` : null">{{col.title}}</i-col>
+      </Row>
+      <div class="scroll-content">
+        <Row class="row" v-for="(row, i) in tableData" :key="i" :gutter="8">
+          <i-col v-for="(col, i) in tableLayout" :key="'col'+i" :span="col.width" class="col" :style="col.align ? `text-align: ${col.align}` : null">
+            {{row[col.key]}}
+            <Tooltip v-if="col.tooltip" max-width="10rem" :content="row[col.tooltip]" transfer>
+              <Icon style="font-size:1.2rem;cursor:pointer;margin-left:0.2rem;" type="md-alert" color="gold"/>
+            </Tooltip>
+          </i-col>
+        </Row>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -12,41 +52,64 @@ export default {
     return {
       layout: [
         {
-          title: '等级',
-          key: 'level',
-          width: 4,
-        },
-        {
-          title: '响应名称',
-          key: 'name',
-          width: 4,
+          title: '联动模式',
+          key: 'type',
+          width: 6,
         },
         {
           title: '启动条件',
-          key: 'start',
-          width: 8,
+          key: 'condition',
+          width: 12,
         },
         {
           title: '处置时限',
           key: 'time',
-          width: 8,
+          width: 6,
         },
       ],
       data: [
-        {level: '一级响应', name: '自治共治', start: '直接启动', time: '< 48小时', color: '#D82B2B'},
-        {level: '二级响应', name: '站站联动', start: '一级响应部门推送启动', time: '< 7天', color: 'gold'},
-        {level: '三级响应', name: '协同会商', start: '二级响应部门推送启动', time: '< 30天', color: '#82DF12'},
+        {type: '自治共治', condition: '居民区直接启动', time: '< 48小时'},
+        {type: '站站联动', condition: '居民区推送街镇', time: '< 7天'},
+        {type: '协同会商', condition: '街镇推送条线部门', time: '< 30天'},
+      ],
+      modeLayout: [
+        {
+          title: '管理类别',
+          key: 'type',
+          width: 6,
+        },
+        {
+          title: '分值占比',
+          key: 'rate',
+          width: 6,
+        },
+        {
+          title: '事件项数',
+          key: 'num',
+          width: 6,
+        },
+        {
+          title: '每项分值',
+          key: 'count',
+          width: 6,
+        },
+      ],
+      modeData: [
+        {type: '安全管理', rate: '40%', num: '7项', count: '5.7分'},
+        {type: '有序管理', rate: '50%', num: '13项', count: '3.8分'},
+        {type: '干净管理', rate: '10%', num: '4项', count: '2.5分'},
+        {type: '合计', rate: '100%', num: '24项', count: '-'},
       ],
       tableLayout: [
         {
           title: '序号',
           key: 'index',
-          width: 1,
+          width: 2,
         },
         {
           title: '管理类别',
           key: 'type',
-          width: 2,
+          width: 3,
         },
         {
           title: '事项名称',
@@ -58,21 +121,25 @@ export default {
           title: '自治共治',
           key: 'level1',
           width: 4,
+          align: 'left',
         },
         {
           title: '站站联动',
           key: 'level2',
-          width: 4,
+          width: 3,
+          align: 'left',
         },
         {
           title: '协同会商',
           key: 'level3',
           width: 4,
+          align: 'left',
         },
         {
           title: '发现方式',
           key: 'discover',
-          width: 4,
+          width: 3,
+          align: 'left',
         },
       ],
       tableData: [],
@@ -86,13 +153,75 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+$border = 0.1rem solid $color-blue
+$yellow = #fee902
+$blue = #01a7ff
+$green = #8fd618
+
 .issue-detail
   width 100%
-  height 100%
+  height 75vh
   display flex
+  color #fff
+  text-align center
+  font-size 1.2rem
+  overflow hidden
+  h2
+    margin 1rem 0
+  .row
+    line-height 3rem
+    &.row-title
+      text-align center
+      font-size 1.4rem
+      background #7175a0 !important
+      font-weight bold
+      color #fff !important
   >div
-    flex 1
+    flex 2
+    height 100%
+    &:first-child
+      flex 1
+      margin-right 1rem
+      p
+        text-align left
+        font-size 1rem
+        margin-top 0.5rem
+      .color-bar
+        display flex
+        justify-content flex-end
+        >span
+          display block
+          width 2rem
+          height 1.2rem
+          background $blue
+          margin 1rem 0 0 1rem
+          &:first-child
+            background $yellow
+          &:last-child
+            background $green
+      .row
+        border $border
+        border-bottom none
+        &:nth-child(3)
+          color $yellow
+        &:nth-child(4)
+          color $blue
+        &:nth-child(5)
+          color $green
+        &:last-child
+          border-bottom $border
+        .col
+          border-right $border
+          &:last-child
+            border none
     &:last-child
-      flex 2
-      margin-left 1rem
+      .scroll-content
+        height 85%
+        overflow-y auto
+        overflow-x hidden
+      .row
+        border-bottom $border
+        background rgba(113,117,160,0.3)
+        &:nth-child(2n + 1)
+          background rgba(0,0,0,0.1)
 </style>

src/views/linyi.vue

@@ -64,7 +64,7 @@
     </m-card>
     <MapMenu :full="complete" @full="complete = !complete" @in="$refs.map.zoomIn()" @out="$refs.map.zoomOut()"/>
     <StreetMenu @select="handleStreetSelect"/>
-    <m-modal :value="$store.state.showElementModal" @close="$store.commit('SET_ELEMENTMODAL', false)" width="80%" title="管理要素明细">
+    <m-modal :value="$store.state.showElementModal" @close="$store.commit('SET_ELEMENTMODAL', false)" width="85%" title="管理要素明细">
       <IssueDetail />
     </m-modal>
     <m-modal v-model="remindModal" width="70%" title="智能提示列表">

src/views/main.vue

@@ -93,7 +93,7 @@
     <m-animate enter="fadeInUp" leave="fadeOutDown">
       <BottomTabs v-show="complete" @click="showModal = true"/>
     </m-animate>
-    <m-modal :value="$store.state.showElementModal" @close="$store.commit('SET_ELEMENTMODAL', false)" width="80%" title="管理要素明细">
+    <m-modal :value="$store.state.showElementModal" @close="$store.commit('SET_ELEMENTMODAL', false)" width="85%" title="管理要素明细">
       <IssueDetail />
     </m-modal>
     <m-modal v-model="showEleMap" width="90%" title="电梯加装地图">

src/views/shenjiang.vue

@@ -64,7 +64,7 @@
     </m-card>
     <MapMenu :full="complete" @full="complete = !complete" @in="$refs.map.zoomIn()" @out="$refs.map.zoomOut()"/>
     <StreetMenu @select="handleStreetSelect"/>
-    <m-modal :value="$store.state.showElementModal" @close="$store.commit('SET_ELEMENTMODAL', false)" width="80%" title="管理要素明细">
+    <m-modal :value="$store.state.showElementModal" @close="$store.commit('SET_ELEMENTMODAL', false)" width="85%" title="管理要素明细">
       <IssueDetail />
     </m-modal>
     <m-modal v-model="remindModal" width="70%" title="智能提示列表">