整体调整，4月17日演示用

src/assets/css/variables.styl

@@ -23,7 +23,7 @@ $selected()
   box-sizing border-box
   border 0.1rem solid $edgeColor
   background-color rgba(0,242,255,0.1)
-$fontColor = #5587b7
+$fontColor = #61c2f3
 $edgeColor = #00f2ff
 $cardBg = rgba(0, 242, 255, 0.1)
 

src/components/MonitorComponents/MonitorBrief/monitor-brief.vue

@@ -2,7 +2,7 @@
   <div class="monitor-brief">
     <img v-if="icon" :src="icon" draggable="false"/>
     <div>
-      <p class="label" :style="`color:${labelColor}`">{{label}}</p>
+      <p class="label">{{label}}</p>
       <count class="count" :style="`font-size:${size};color:${countColor}`" :value="value" :decimal="decimal"/>
       <span v-if="unit">{{unit}}</span>
     </div>
@@ -60,9 +60,11 @@ export default {
   width 100%
   display flex
   align-items center
+  .label
+    color $fontColor
   >img
-    width 2.8rem
-    margin-right 1rem
+    width 2.6rem
+    margin-right 0.5rem
   >div
     flex 1
     .count

src/components/MonitorComponents/MonitorCard/mode1.vue

@@ -13,7 +13,7 @@
 
 <script>
 export default {
-  name: 'Mode2',
+  name: 'Mode1',
   props: {
     title: {
       type: String,

src/components/MonitorComponents/MonitorCard/mode3.vue

 <template>
 <div class="card-wrapper">
-  <div class="card-title" :style="`color:${color}`">
+  <div v-if="!hideTitle" class="card-title" :style="`color:${color}`">
     <img v-if="icon" :src="icon"/>
-    {{title}}
+    <p>{{title}}</p>
+    <img v-if="more" :src="more" @click="$store.commit('CHANGE_ISSHOWMORE',true)">
   </div>
-  <div class="card-content">
+  <div class="card-content" :style="contentStyle">
     <slot />
   </div>
 </div>
@@ -15,6 +16,7 @@ export default {
   name: 'Mode3',
   props: {
     icon: {},
+    more: {},
     title: {
       type: String,
       default: '标题',
@@ -22,6 +24,19 @@ export default {
     color: {
       type: String,
     },
+    hideTitle: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    contentStyle() {
+      if (!this.hideTitle) return {}
+      return {
+        'height': '100%',
+        'overflow-y': 'hidden',
+      }
+    }
   },
 }
 </script>
@@ -32,6 +47,7 @@ export default {
   .card-title
     display flex
     align-items center
+    justify-content space-between
     color #fff
     font-size 1.4rem
     font-weight bold
@@ -39,9 +55,15 @@ export default {
     margin-bottom 0.5rem
     height 3rem
     padding 0 1rem
+    p
+      flex 1
     >img
       width 1.4rem
       margin-right 1rem
+      &:last-child
+        width 1.8rem
+        margin 0
+        cursor pointer
   .card-content
     background $cardBg
     padding 1rem

src/components/MonitorComponents/MonitorCard/monitor-card.vue

 <template>
 <m-animate :enter="enter" :leave="leave">
   <div class="monitor-card">
-    <component :is="card" v-bind="$attrs">
+    <component :is="card" v-bind="$attrs" :title="title">
       <slot/>
     </component>
   </div>
@@ -12,6 +12,9 @@
 export default {
   name: 'MonitorCard',
   props: {
+    title: {
+      type: String,
+    },
     mode: {
       type: [String, Number],
       default: '1',
@@ -49,4 +52,5 @@ $size()
     .card-content
       height calc(100% - 2rem)
       overflow-y auto
+      overflow-x hidden
 </style>

src/components/MonitorComponents/MonitorChart/monitor-chart.vue

@@ -88,6 +88,7 @@ export default {
     /** 设置坐标轴 */
     setAxis(options) {
       const {xAxis, yAxis, shape} = this.config
+      if (shape[0].type === 'pie' || shape[0].type === 'donut') return
       const config = {
         data: this.data.map(item => item[(yAxis && yAxis.key) || xAxis.key]),
         boundaryGap: !shape.every(item => item.type === 'line')
@@ -111,8 +112,8 @@ export default {
         const y1Max = Math.max.apply(null, y1)
         const y2Max = Math.max.apply(null, y2)
         options.yAxis = [
-          Object.assign({}, this.defaultOptions.yAxis, {min:0, max: y1Max, interval: y1Max / 5}),
-          Object.assign({}, this.defaultOptions.yAxis, {min:0, max: y2Max, interval: y2Max / 5}),
+          Object.assign({}, this.defaultOptions.yAxis, {min: 0, max: y1Max, interval: y1Max / 5}),
+          Object.assign({}, this.defaultOptions.yAxis, {min: 0, max: y2Max, interval: y2Max / 5}),
         ]
       } else {
         options.yAxis = Object.assign({}, this.defaultOptions.yAxis, yAxis)
@@ -130,16 +131,16 @@ export default {
     /** 设置图例说明 */
     setLegend(options) {
       const {legend} = this.config
-      if (legend.hide) {
+      if (legend && legend.hide) {
         options.grid.top = '5%'
         return
       }
       options.legend = Object.assign({}, this.defaultOptions.legend, this.options.legend)
-      if (legend.orient) {
+      if (legend && legend.orient) {
         options.legend.orient = legend.orient
       }
       options.legend.data = this.dataSource.map(item => item.name)
-      switch (legend.align) {
+      switch (legend && legend.align) {
       case 'left':
         options.legend.left = '5%'
         break
@@ -156,19 +157,11 @@ export default {
       const {shape} = this.config
       // 如果为饼图则数据需是[{name: 'name', value: 1}]格式，且不需要坐标轴
       if (shape[0].type === 'pie') {
-        options.color = this.colors
-        options.series = [{
-          label: {
-            normal: {
-              show: false,
-            },
-          },
-          ...shape[0],
-        }]
-        options.series[0].data = options.legend.data = this.data
-        options.tooltip.trigger = 'item'
-        this.$delete(options, 'xAxis')
-        this.$delete(options, 'yAxis')
+        this.setPie(options)
+        return
+      }
+      if (shape[0].type === 'donut') {
+        this.setDonut(options)
         return
       }
 
@@ -198,6 +191,90 @@ export default {
         return result
       })
     },
+
+    // 绘制饼图
+    setPie(options) {
+      const {shape} = this.config
+      options.color = this.colors
+      options.series = [{
+        label: {
+          normal: {
+            show: false,
+          },
+        },
+        ...shape[0],
+      }]
+      if (options.legend && options.legend.data) {
+        options.series[0].data = options.legend.data = this.data
+      } else {
+        options.series[0].data = this.data
+      }
+      options.tooltip.trigger = 'item'
+      this.$delete(options, 'xAxis')
+      this.$delete(options, 'yAxis')
+    },
+
+    // 绘制同心圆图
+    setDonut(options) {
+      const {shape} = this.config
+      options.color = this.colors
+      options.series = this.getDonutConfig(shape)
+    },
+
+    getDonutConfig(args) {
+      const len = args.length
+      if (len <= 0 ) return
+      const total = this.data.reduce((acc, cur) => { // 计算数据的value总和
+        return acc + cur.value
+      }, 0)
+
+      return args.map((e, i) => {
+        const rate = Math.round((len - i) * this.borderWidth * 2)
+        let borderColor = this.colors[i]
+        if(Array.isArray(borderColor)) {
+          borderColor = {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0, color: borderColor[0] // 0% 处的颜色
+            }, {
+              offset: 1, color: borderColor[1] // 100% 处的颜色
+            }],
+            global: false, // 缺省为 false
+          }
+        }
+        return {
+          type: 'pie',
+          name: e.name,
+          clockWise: false, //顺时加载
+          hoverAnimation: false, //鼠标移入变大
+          radius: [rate, rate + 1],
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+              borderWidth: this.borderWidth,
+              borderColor: borderColor,
+            }
+          },
+          data: [
+            this.data[i],
+            {
+              value: Math.round(total - this.data[i].value),
+              name: '',
+              itemStyle: this.blackStyle,
+            }
+          ]
+        }
+      })
+    },
   },
   computed: {
     colors() {
@@ -290,10 +367,28 @@ export default {
     fontSize() {
       return Math.floor(screen.height * 1.48 / 100)
     },
+    borderWidth() {
+      return this.$refs.chart.offsetHeight * 0.04
+    },
+    blackStyle() {
+      return {
+        normal: {
+          label: {
+            show: false,
+          },
+          labelLine: {
+            show: false
+          },
+          color: 'transparent',
+          borderColor: 'rgba(0,0,0,0.1)',
+          borderWidth: this.borderWidth,
+        },
+      }
+    },
   },
   watch: {
     data(cur, past) {
-      if (cur && cur !== past && cur.length > 0) {
+      if (cur && cur.length > 0) {
         this.init()
       }
     }

src/components/MonitorComponents/MonitorForm/monitor-form.vue

@@ -3,9 +3,9 @@
     <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 || 'left'}; width:${labelWidth}rem;`">{{col.label}}：</div>
+        <div :style="`text-align: ${col.align || 'right'}; width:${labelWidth}rem;`">{{col.label}}：</div>
         <img v-if="col.type == 'img'" @click="handleView(model[key])" :src="$api.IMG_URL + model[key]"/>
-        <div v-else class="content">{{model[key]}}</div>
+        <div v-else class="content">{{col.format?col.format(model[key]):(model[key]||' ')}}</div>
       </i-col>
     </Row>
     <m-modal v-model="showImg">
@@ -67,15 +67,13 @@ export default {
     margin-bottom 1rem
     border-bottom 0.1rem solid $color-map()
   .row
-    line-height 2.4rem
-    // &:nth-child(2n)
-    //   background-color $color-map(0.15)
+    line-height 3rem
+    &:nth-child(2n)
+      background-color $color-map(0.15)
   .col
     display flex
     align-items center
     padding 0 1rem
-    &:nth-child(2n+1)
-      background-color $color-map(0.15)
     .content
       flex 1
     img

src/components/MonitorComponents/MonitorGrid/monitor-grid.vue

 <template>
   <div class="monitor-grid" ref="grid" :style="style">
+    <m-loader v-show="showLoad" :msg="loadMsg" bgColor="#000"/>
     <slot />
   </div>
 </template>
@@ -24,13 +25,20 @@ export default {
     bgImg: {
       type: String,
     },
+    complete: {
+      type: Boolean,
+      default: true,
+    }
   },
   data() {
     return {
       style: {},
+      showLoad: false,
+      loadMsg: '初始化 . . .',
     }
   },
   mounted() {
+    this.showLoad = !this.complete
     this.$nextTick(() => {
       setTimeout(this.init, 0)
     })
@@ -64,6 +72,14 @@ export default {
       }
     },
   },
+  watch: {
+    complete(cur, past) {
+      if (cur && cur != past) {
+        this.loadMsg = '完成中 . . .'
+        this.showLoad = false
+      }
+    }
+  }
 }
 </script>
 

src/components/MonitorComponents/MonitorLoader/monitor-loader.vue

 <template>
-  <div class="monitor-loader">
+  <div class="monitor-loader" :style="`background:${bgColor}`">
     <div class="loader">
       <div class="outer"/>
       <div class="inner"/>
@@ -15,7 +15,11 @@ export default {
     msg: {
       type: String,
       default: '加载中 . . .',
-    }
+    },
+    bgColor: {
+      type: String,
+      default: 'rgba(0,0,0,0.3)',
+    },
   }
 }
 </script>
@@ -27,13 +31,13 @@ export default {
   left 0
   bottom 0
   right 0
-  background rgba(0,0,0,0.3)
   z-index 9999
   display flex
   align-items center
   justify-content center
   .loader
     position relative
+    z-index 8888
     .msg
       display block
       color #fff

src/components/MonitorComponents/MonitorMap/monitor-map.vue

@@ -30,6 +30,11 @@ export default {
   mounted() {
     this.inject().then(this.initMap)
   },
+  computed: {
+    sizeRate() {
+      return Math.floor(screen.height * 1.48 / 100 / 11)
+    },
+  },
   methods: {
     inject() {
       return new Promise((resolve, reject) => {
@@ -52,8 +57,8 @@ export default {
         url: this.mapUrl,
         onReady: () => {
           // console.log('地图创建完成')
-          this.$emit('complete')
           this.addListener()
+          this.$emit('complete')
         }
       })
     },
@@ -156,7 +161,7 @@ export default {
             symbolLayers: [
               {
                 type: 'icon',
-                size,
+                size: size * this.sizeRate,
                 resource: {
                   href: this.iconUrl + (item.icon || icon),
                 },
@@ -210,7 +215,7 @@ export default {
         datas: data.map(item => {
           return {
             name: labelKey ? item[labelKey] : null,
-            value: size,
+            value: size * this.sizeRate,
             corrd: [item.X || item.x, item.Y || item.y],
             color: color,
           }

src/components/MonitorComponents/MonitorMenu/index.js

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

src/components/MonitorComponents/MonitorMenu/monitor-menu.vue

+<template>
+<m-animate enter="fadeInDown" leave="fadeOutUp">
+  <div class="theme-menu" v-show="value" @mouseleave="closeMenu">
+    <div class="edge top-left" />
+    <div class="edge top-right" />
+    <div class="edge bottom-left" />
+    <div class="edge bottom-right" />
+    <p
+      v-for="theme in themeList"
+      :key="theme.url"
+      :class="`${theme.name == curTheme ? 'on' : ''}`"
+      @click="handleThemeSelect(theme)">
+      {{theme.name}}
+    </p>
+  </div>
+</m-animate>
+</template>
+
+<script>
+export default {
+  name: 'MonitorMenu',
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    themes: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+  },
+  computed: {
+    curTheme() {
+      return document.title
+    },
+    defaultThemes() {
+      let base = 'http://962121.net/hmfmstest'
+      if (window.location.origin.indexOf('sh.gov') >= 0) {
+        base = 'http://962121.fgj.sh.gov.cn/wyweb'
+      }
+      return [
+        {name: '长桥四村智慧感知事件监控', url: null},
+        {name: '物业督查实时专题图', url: base + '/shanghaiwuye/web/dataV/propertyinspector/#/'},
+        {name: '新冠疫情隔离监控', url: base + '/shanghaiwuye/web/dataV/publicsafety/#/'},
+      ]
+    },
+    themeList() {
+      if (this.themes && this.themes.length > 0) return this.themes
+      return this.defaultThemes
+    }
+  },
+  methods: {
+    closeMenu() {
+      this.$emit('input', false)
+    },
+    handleThemeSelect({name, url}) {
+      if (name == this.curTheme) return
+      window.open(url, '_blank')
+      this.closeMenu()
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+$theme-selected()
+  position absolute
+  display block
+  content ''
+  width 0
+  height 0
+  border 0.5rem solid $edgeColor
+  top 1rem
+  transform rotate(45deg)
+.theme-menu
+  font-family $font-din
+  position absolute
+  // min-height 10rem
+  width 26rem
+  padding 1rem
+  text-align center
+  color #ccc
+  font-weight bold
+  background $color-map(0.1)
+  left 0
+  right 0
+  bottom 6rem
+  margin auto
+  border 0.1rem solid $color-map()
+  >p
+    font-size 1.2rem
+    line-height 3rem
+    cursor pointer
+    position relative
+    overflow hidden
+    &:hover
+      color $edgeColor
+    &.on
+      font-size 1.4rem
+      color $edgeColor
+      background $color-map(0.2)
+      &:before
+        $theme-selected()
+        margin-left -0.5rem
+        border-left-color transparent
+        border-bottom-color transparent
+      &:after
+        $theme-selected()
+        right 0
+        margin-right -0.5rem
+        border-right-color transparent
+        border-top-color transparent
+  .edge
+    position absolute
+    width 2rem
+    height 2rem
+    border 0.3rem solid $edgeColor
+    &.top-left
+      top -0.1rem
+      left -0.1rem
+      border-right none
+      border-bottom none
+    &.top-right
+      top -0.1rem
+      right -0.1rem
+      border-left none
+      border-bottom none
+    &.bottom-left
+      bottom -0.1rem
+      left -0.1rem
+      border-right none
+      border-top none
+    &.bottom-right
+      bottom -0.1rem
+      right -0.1rem
+      border-left none
+      border-top none
+</style>
+

src/components/MonitorComponents/MonitorModal/monitor-modal copy.vue

+<template>
+<m-animate :enter="enter" :leave="leave">
+  <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">
+        <div>
+          <slot/>
+        </div>
+      </div>
+      <img class="border bottom" src="@/assets/images/modal-bottom.png"/>
+    </div>
+  </div>
+</m-animate>
+</template>
+
+<script>
+export default {
+  name: 'MonitorModal',
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    width: {
+      type: String,
+      default: '40%',
+    },
+    enter: {
+      type: String,
+      default: 'zoomInUp',
+    },
+    leave: {
+      type: String,
+      default: 'zoomOutDown',
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('close')
+      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
+    padding 2% 0
+    background $color-map(0.1)
+    color #ccc
+    .content
+      min-height 30vh
+      max-height 60vh
+      padding 0 1rem
+      overflow-y auto
+      overflow-x hidden
+      >div
+        $blur()
+    >img
+      position absolute
+      &.close-btn
+        top -0.4rem
+        right -2.6rem
+        width 2.4rem
+        cursor pointer
+      &.border
+        width 103%
+        height 10%
+        left -1.5%
+        &.top
+          top -1rem
+        &.bottom
+          bottom -1rem
+</style>

src/components/MonitorComponents/MonitorModal/monitor-modal-bak.vue

-<template>
-<transition name="custom-classes-transition" enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
-  <div v-if="value" class="monitor-modal" ref="modal">
-    <img @click="handleClose" class="close-btn" src="@/assets/images/title-arrow.png"/>
-    <img class="border left" src="@/assets/images/modal-right.png"/>
-    <div class="content">
-      <div>
-        <slot/>
-      </div>
-    </div>
-    <img class="border right" src="@/assets/images/modal-right.png"/>
-  </div>
-</transition>
-</template>
-
-<script>
-export default {
-  name: 'MonitorModal',
-  props: {
-    value: {
-      type: Boolean,
-      default: false,
-    },
-    width: {
-      type: String,
-      default: '40%',
-    }
-  },
-  methods: {
-    handleClose() {
-      this.$emit('close')
-      this.$emit('input', false)
-    }
-  },
-}
-</script>
-
-<style lang="stylus" scoped>
-.monitor-modal
-  position fixed
-  top 4rem
-  right 1rem
-  bottom 0.6rem
-  z-index 1000
-  width 23.8vw
-  padding 1rem 0
-  background $color-map(0.1)
-  color #ccc
-  .content
-    height 100%
-    padding 0 1rem
-    overflow-y auto
-    overflow-x hidden
-  >img
-    position absolute
-    &.close-btn
-      top 0
-      bottom 0
-      margin auto
-      width 3rem
-      left -3rem
-      transform rotate(270deg)
-      cursor pointer
-    &.border
-      width 2rem
-      height 102%
-      top -0.5rem
-      bottom 0
-      &.left
-        transform rotate(180deg)
-        left -1rem
-      &.right
-        right -1rem
-</style>

src/components/MonitorComponents/MonitorModal/monitor-modal.vue

@@ -2,14 +2,23 @@
 <m-animate :enter="enter" :leave="leave">
   <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="title">
+        <p>
+          {{title}}
+          <span class="left"></span>
+          <span class="right"></span>
+        </p>
+        <div>
+          <img class="flag" src="@/assets/images/modal-title1.png"/>
+          <img @click="handleClose" class="close-btn" src="@/assets/images/close.png"/>
+        </div>
+        <img class="left" src="@/assets/images/modal-title-left.png"/>
+      </div>
       <div class="content">
         <div>
           <slot/>
         </div>
       </div>
-      <img class="border bottom" src="@/assets/images/modal-bottom.png"/>
     </div>
   </div>
 </m-animate>
@@ -29,12 +38,16 @@ export default {
     },
     enter: {
       type: String,
-      default: 'zoomInUp',
+      default: 'fadeInDown',
     },
     leave: {
       type: String,
-      default: 'zoomOutDown',
-    }
+      default: 'fadeOutUp',
+    },
+    title: {
+      type: String,
+      default: 'title',
+    },
   },
   methods: {
     handleClose() {
@@ -58,31 +71,61 @@ export default {
   background rgba(0,0,0,0.1)
   z-index 1000
   >div
-    position relative
-    padding 2% 0
-    background $color-map(0.1)
+    background transparent
     color #ccc
+    .title
+      height 4rem
+      position relative
+      font-weight bold
+      border 0.1rem solid $color-map()
+      display flex
+      align-items center
+      justify-content space-between
+      padding 0 1rem
+      background-image repeating-linear-gradient(45deg, $color-map(0.1), $color-map(0.1), 0.1rem, transparent 0.1rem, transparent 0.8rem)
+      background-color $color-map(0.1)
+      margin-bottom 0.5rem
+      $blur()
+      p
+        color #fff
+        border-bottom 0.1rem solid $edgeColor
+        font-size 1.2rem
+        position relative
+        padding 0.2rem 0.5rem
+        span
+          position absolute
+          width .4rem
+          height .4rem
+          background-color $edgeColor
+          bottom - (@height / 2)
+          &.left
+            left - (@width / 2)
+          &.right
+            right - (@width / 2)
+      >div
+        display flex
+        align-items center
+      img
+        &.close-btn
+          width 2rem
+          cursor pointer
+          margin-left 0.5rem
+          transition transform 0.5s
+          &:hover
+            transform rotate(90deg)
+        &.flag
+          height 2rem
+        &.left
+          position absolute
+          left -0.1rem
+          height 80%
     .content
       min-height 30vh
       max-height 60vh
-      padding 0 1rem
+      padding 1rem
       overflow-y auto
       overflow-x hidden
-      >div
+      border 0.1rem solid $edgeColor
+      border-top none
       $blur()
-    >img
-      position absolute
-      &.close-btn
-        top -0.4rem
-        right -2.6rem
-        width 2.4rem
-        cursor pointer
-      &.border
-        width 103%
-        height 10%
-        left -1.5%
-        &.top
-          top -1rem
-        &.bottom
-          bottom -1rem
 </style>

src/components/MonitorComponents/MonitorScroll/index.js

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

src/components/MonitorComponents/MonitorScroll/monitor-scroll.vue

+<template>
+  <div class="monitor-scroll" @mouseenter="clearTimer" @mouseleave="start">
+    <div ref="scrollContent">
+      <slot />
+    </div>
+    <div v-if="!isShort && !isTooLong" ref="subContent">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MonitorScroll',
+  props: {
+    length: {
+      type: Number,
+      required: true,
+    },
+    limit: {
+      type: Number,
+      default: 6,
+    },
+    duration: {
+      type: Number,
+      default: 5000,
+    },
+    mode: {
+      type: [Number, String],
+      default: 1,
+    },
+    step: {
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      timer: null,
+      index: 0,
+    }
+  },
+  mounted() {
+    this.$nextTick(this.start)
+  },
+  beforeDestroy() {
+    this.clearTimer()
+  },
+  computed: {
+    isShort() {
+      return this.length <= this.limit
+    },
+    isTooLong() {
+      return this.length > 100
+    }
+  },
+  methods: {
+    clearTimer() {
+      clearInterval(this.timer)
+      this.timer = null
+    },
+    start() {
+      if (this.isShort) return
+      if (this.mode == '2') {
+        this.startMode2()
+      } else {
+        this.startMode1()
+      }
+    },
+    startMode1() {
+      const content = this.$refs.scrollContent
+      const subContent = this.$refs.subContent
+      let height = content.offsetHeight
+
+      this.timer = setInterval(() => {
+        if (height <= 0) {
+          height = content.offsetHeight
+          return
+        }
+        if (this.index < height) {
+          this.index += 1
+        } else {
+          this.index = 0
+        }
+        content.style.transform = `translateY(${-this.index}px)`
+        subContent ? subContent.style.transform = `translateY(${-this.index}px)` : null
+      }, 100)
+    },
+    startMode2() {
+      const content = this.$refs.scrollContent
+      const subContent = this.$refs.subContent
+      const len = this.$com.confirm(content, 'children.length', 0)
+
+      this.timer = setInterval(() => {
+        if (this.index < len) {
+          this.index += 1
+          content.style.transition = 'transform 0.5s'
+          subContent ? subContent.style.transition = 'transform 0.5s' : null
+        } else {
+          this.index = 0
+          content.style.transition = 'none'
+          subContent ? subContent.style.transition = 'none' : null
+        }
+        content.style.transform = `translateY(${-this.step * this.index}rem)`
+        subContent ? subContent.style.transform = `translateY(${-this.step * this.index}rem)` : null
+      }, this.duration)
+    },
+  },
+  watch: {
+    length(cur) {
+      this.clearTimer()
+      this.index = 0
+      const content = this.$refs.scrollContent
+      const subContent = this.$refs.subContent
+      if (content) {
+        content.style.transform = 'translateY(0)'
+      }
+      if (subContent) {
+        subContent.style.transform = 'translateY(0)'
+      }
+      this.$nextTick(this.start)
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.monitor-scroll
+  width 100%
+  height 100%
+  overflow hidden
+  box-sizing border-box
+  z-index 10
+</style>

src/components/MonitorComponents/MonitorStep/monitor-step copy.vue

+<template>
+  <div class="monitor-step">
+    <div class="lines" :style="setTop">
+      <div class="line done" :style="`width:${doneWidth}%`"/>
+      <div class="line" :style="`width:${notWidth}%`"/>
+    </div>
+    <div v-for="(step, i) in steps" :key="i" :class="`item ${i == current ? 'on' : ''}`">
+      <p :title="step.name">{{step.name}}</p>
+      <div ref="icon" v-if="i <= current" class="icon" :style="`background-image:url(${require('@/assets/images/true.png')})`"/>
+      <div v-else class="none"/>
+      <span class="msg" :title="step.msg" v-html="msg[i]"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MonitorStep',
+  props: {
+    steps: {
+      type: Array,
+      required: true,
+    },
+    current: {
+      type: [Number, String],
+      default: 0,
+    },
+    msg: {
+      type: Array,
+      default() {
+        return []
+      },
+    }
+  },
+  computed: {
+    setTop() {
+      if (this.msg.length > 0) {
+        return {top: '42%'}
+      }
+      return {top: '57%'}
+    },
+    linePercent() {
+      const len = this.steps.length
+      if (len > 2) return 100 / (len - 1)
+      return 100
+    },
+    doneWidth() {
+      const index = Number(this.current)
+      if (Number.isNaN(index)) {
+        console.error('Props: "current" is NaN!')
+        return
+      }
+      return Math.round(this.linePercent * index)
+    },
+    notWidth() {
+      return 100 - this.doneWidth
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.monitor-step
+  width 90%
+  margin 0.5rem auto 0
+  display flex
+  justify-content space-between
+  position relative
+  font-size 0.9rem
+  .lines
+    display flex
+    position absolute
+    width 100%
+    left -0.5rem
+    z-index -1
+    >.line
+      height 0.3rem
+      background rgba(0,0,0,0.8)
+      border-radius 1rem
+      margin-left 0.5rem
+      &.done
+        background linear-gradient(to right, #3391ff, $edgeColor)
+  .item
+    text-align center
+    width 1rem
+    position relative
+    .icon
+      width 1rem
+      height 1rem
+      border-radius 50%
+      background-color $edgeColor
+      background-position center
+      background-size 60%
+      background-repeat no-repeat
+    .none
+      width 0.8rem
+      height 0.8rem
+      border 0.2rem solid $edgeColor
+      border-radius 50%
+      transform translateY(10%)
+    .msg
+      display inline-block
+      font-size 0.6rem
+      width 4rem
+      transform translateX(-50%)
+      margin 0.2rem 50%
+      font-weight normal
+      color #aaa
+    p
+      width 5rem
+      margin 0.5rem 50%
+      transform translateX(-50%)
+      overflow hidden
+      white-space nowrap
+      text-overflow ellipsis
+      color #aaa
+      font-size 0.8rem
+    &.on
+      .icon
+        transform scale(1.2)
+        animation shine 2s alternate infinite ease-in-out
+      p
+        color $edgeColor
+        font-weight bold
+@keyframes shine {
+  from {
+    box-shadow none
+  }
+  to {
+    box-shadow 0 0 1rem 0.1rem #fff
+  }
+}
+</style>

src/components/MonitorComponents/MonitorStep/monitor-step.vue

 <template>
   <div class="monitor-step">
-    <div v-for="(step, i) in steps" :key="i" :class="`item ${i == current ? 'on' : ''}`">
+    <div class="lines" :style="setTop">
+      <div class="line done" :style="`width:${doneWidth}%`"/>
+      <div class="line" :style="`width:${notWidth}%`"/>
+    </div>
+    <div v-for="(step, i) in steps" :key="i" :class="`item ${i == done ? 'on' : ''}`">
       <p :title="step.name">{{step.name}}</p>
-      <div v-if="i <= current" class="icon" :style="`background-image:url(${require('@/assets/images/true.png')})`"/>
+      <div ref="icon" v-if="i <= current[0]" class="icon" :style="`background-image:url(${require('@/assets/images/true.png')})`"/>
       <div v-else class="none"/>
-    </div>
-    <div class="lines">
-      <div v-for="(line, i) in lines" :key="i" :class="`line ${i < current ? 'done' : ''}`" :style="`width:${lineWidth}`"/>
+      <span class="msg" :title="step.msg">{{msg[i]}}</span>
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  // 顶部的lines是线 , 根据doneWidth 和notWidth 来判断宽度
+  // 枚举数据,判断入参数组的第二项是否为true, 区别设置css  下一个圈是否放大
+  // 下面的 icon 是判断枚举的index 是否小于 cur的第0项, 是的话就给 ✔️  对号
   name: 'MonitorStep',
   props: {
     steps: {
@@ -20,18 +25,54 @@ export default {
       required: true,
     },
     current: {
-      type: [Number, String],
-      default: 0,
+      type: [String, Number, Array],
+      default(){
+        return [0, false]    // 第0项为当前的标识, 后面的布尔是判断后面是否加线
+      }
+    },
+    msg: {
+      type: Array,
+      default() {
+        return []
+      },
+    }
+  },
+  data() {
+    return {
+      setTop: null,
+    }
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.setTop = {top: `calc(${this.$refs.icon[0].offsetTop}px + 0.35rem)`}
+    })
   },
   computed: {
-    lines() {
+    linePercent() {
       const len = this.steps.length
-      if (len > 2) return len - 1
-      return 1
+      if (len > 2) return 100 / (len - 1)      // 跟据steps数组的长度,分隔线每一调的长度占比
+      return 100
+    },
+    doneWidth() {
+      let index = Number(this.current[0])
+      if (this.current[1]) {                   // 如果数组的第二项是 true,  流程线就会向下级多走一条
+        index = index+1
+      }
+      if (Number.isNaN(index)) {
+        console.error('Props: "current" is NaN!')
+        return
+      }
+      return Math.round(this.linePercent * index)
     },
-    lineWidth() {
-      return `${Math.round(100 / this.lines)}%`
+    done() {           // 是否进入下一条
+      let index = Number(this.current[0])
+      if (this.current[1]) {
+        index = index+1
+      }
+      return index
+    },
+    notWidth() {
+      return 100 - this.doneWidth
     }
   }
 }
@@ -40,7 +81,7 @@ export default {
 <style lang="stylus" scoped>
 .monitor-step
   width 90%
-  margin 0.5rem auto
+  margin 0 auto
   display flex
   justify-content space-between
   position relative
@@ -48,10 +89,8 @@ export default {
   .lines
     display flex
     position absolute
-    bottom 0.35rem
-    width 95%
-    margin 0 auto
-    z-index 1
+    width 100%
+    left -0.5rem
     >.line
       height 0.3rem
       background rgba(0,0,0,0.8)
@@ -63,7 +102,7 @@ export default {
     text-align center
     width 1rem
     position relative
-    z-index 2
+    z-index 1
     .icon
       width 1rem
       height 1rem
@@ -78,6 +117,14 @@ export default {
       border 0.2rem solid $edgeColor
       border-radius 50%
       transform translateY(10%)
+    .msg
+      display inline-block
+      font-size 0.6rem
+      width 4rem
+      transform translateX(-50%)
+      margin 0.2rem 50%
+      font-weight normal
+      color #aaa
     p
       width 5rem
       margin 0.5rem 50%
@@ -86,20 +133,16 @@ export default {
       white-space nowrap
       text-overflow ellipsis
       color #aaa
+      font-size 0.8rem
     &.on
+      >div
+        width 0.9rem
+        height 0.9rem
+        border 0.1rem solid $edgeColor
+        transform scale(1.2)
       .icon
         transform scale(1.2)
-        animation shine 2s alternate infinite ease-in-out
       p
         color $edgeColor
-        font-size 1rem
         font-weight bold
-@keyframes shine {
-  from {
-    box-shadow none
-  }
-  to {
-    box-shadow 0 0 1rem 0.1rem #fff
-  }
-}
 </style>

src/components/MonitorComponents/MonitorTable/monitor-table.vue

@@ -8,7 +8,7 @@
     </Row>
     <template v-if="model && model.length > 0 && mode == '1'">
       <div>
-        <Row class="row" v-for="(row, rowIndex) in model" :key="rowIndex">
+        <Row class="row" v-for="(row, rowIndex) in listData" :key="rowIndex">
           <i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
             <template v-if="col.type == 'img'">
               <template v-if="row[col.key] && row[col.key].length > 0">
@@ -19,14 +19,15 @@
                   @click="handleView(img)" />
               </template>
             </template>
-            <div v-else :style="`text-align: ${col.align || 'left'};color: ${col.color} `">{{row[col.key]}}</div>
+            <div v-else :style="`text-align: ${col.align || 'left'};color: ${col.color} `">{{col.format ? col.format(row[col.key]) : (row[col.key] || '暂无')}}</div>
           </i-col>
         </Row>
       </div>
+      <div :class="`no-data ${btnMsg == '加载更多' ? 'btn' : ''}`" @click="more">{{btnMsg}}</div>
     </template>
     <template v-else-if="model && model.length > 0 && mode == '2'">
       <div>
-        <Row class="row" v-for="(row, rowIndex) in model" :key="rowIndex">
+        <Row class="row" v-for="(row, rowIndex) in listData" :key="rowIndex">
           <i-col class="col" :span="16">
             <div>
               <p>{{row.INDEXNAME}}</p>
@@ -83,12 +84,36 @@ export default {
     return {
       curSrc: null,
       showImg: false,
+      listData: [],
+      cur: 0,
+      dataSize: 100,
+      btnMsg: '加载更多',
     }
   },
   methods: {
     handleView(src) {
       this.curSrc = src
       this.showImg = true
+    },
+    more() {
+      this.cur += 1
+      const data = this.model.slice(this.cur * this.dataSize, (this.cur + 1) * this.dataSize)
+      this.listData.push(...data)
+      if (this.model.length <= (this.cur + 1) * this.dataSize) {
+        this.btnMsg = '— 暂无更多数据 —'
+      }
+    },
+  },
+  watch: {
+    'model': {
+      handler(cur) {
+        if (cur.length <= this.dataSize) {
+          this.btnMsg = '— 暂无更多数据 —'
+        }
+        this.cur = 0
+        this.listData = cur.slice(this.cur * this.dataSize, (this.cur + 1) * this.dataSize)
+      },
+      immediate: true,
     }
   }
 }
@@ -102,6 +127,10 @@ export default {
   .no-data
     text-align center
     margin-top 0.5rem
+    &.btn
+      cursor pointer
+      &:hover
+        color $edgeColor
   .title
     font-size 1.2rem
     font-weight bold
@@ -112,11 +141,12 @@ export default {
   .row
     display flex
     align-items center
-    line-height 2.4rem
+    line-height 3rem
     &.row-title
       font-weight bold
       font-size 1.1rem
       background-color $color-map()
+      color $edgeColor
     &:nth-child(2n)
       background-color $color-map(0.15)
   .col

src/components/MonitorComponents/MonitorTitle/monitor-title.vue

@@ -56,7 +56,7 @@ export default {
       this.style = {
         'text-shadow': `0 0.2rem 0.4rem ${this.color}`,
         'color': this.color,
-        'background-image': `linear-gradient(to bottom, #fff, ${this.color})`
+        'background-image': `linear-gradient(to bottom, #fff, ${this.color})`,
       }
     }
     this.style = {...this.style, 'font-size': this.size}
@@ -104,17 +104,17 @@ export default {
     width 15rem
     &.date
       left 20%
-      top 70%
-      transform translateY(-80%)
+      top 50%
+      transform translateY(-40%)
       cursor pointer
     &.time
       right 13%
-      top 70%
-      transform translateY(-80%)
+      top 50%
+      transform translateY(-40%)
   img
     position absolute
     width 100%
-    height 145%
+    height 140%
     top 0
     left 0
     // animation shine 2.5s linear reverse infinite
@@ -122,10 +122,12 @@ export default {
     text-shadow 0 0.2rem 0.4rem #25e7f6
     background-clip text
     -webkit-background-clip text
+    padding-bottom 1rem
     color #25e7f6
     -webkit-text-fill-color transparent
     background-image linear-gradient(to bottom, #fff, #25e7f6)
-    z-index 10
+    z-index 1
+    transform translateY(10%)
 @keyframes shine {
   0% {
     opacity 1

src/components/MonitorComponents/README.md

 
+# Dataview-Cli
+A command line tool to generate a dataview project.
+
+
+## How to start
+
+```bash
+#if you have npx, you can just run
+npx dataview init [name]
+
+#else, you need to install first
+npm install @omniview/dataview-cli -g
+
+#and then call with
+dataview init [name]
+```
+___
+
 # 组件使用方法
 
 > ## m-grid
@@ -9,6 +27,7 @@ columns|列比例|String
 rows|行比例|String
 gap|间距|String
 bgImg|背景图片src|String
+complete|(可选)默认为true，传入false则启动loading图，待地图加载后再置为true|Boolean
 ```html
 <m-grid
   :template="[
@@ -45,7 +64,7 @@ ___
 > ## m-card
 参数|说明|类型
 -|-|-
-mode|容器的类型，目前有3中，默认为'1'|[String, Number]
+mode|容器的类型，目前有4种，默认为'1'|[String, Number]
 title|容器标题，默认为‘标题’|String
 color|标题颜色|String
 enter|容器的进入动画，默认为fadeInRight|String
@@ -131,6 +150,28 @@ ___
 steps|步骤列表|Array[Object]
 -|name:节点名称|String
 current|当前进度节点|[Number, String]
+msg|(可选)其他信息，显示在节点下方|Array[String]
+
+```html
+<m-step :steps="[{name: '报警'},{name: '通知'},{name: '处置完成'}]" :current="1"/>
+```
+---
+>## m-scroll
+
+参数|说明|类型
+-|-|-
+length|数据长度|Number
+limit|临界点，大于此值则滚动，默认为6|Number
+duration|间隔时间，默认为3000|Number
+mode|默认为1，即向上滚动。2为不断将第一个元素高度置为0|[Number, String]
+
+```html
+<m-scroll :length="10" mode="2">
+  <div v-for="i in 10" :key="i" style="height: 5rem;margin-bottom:0.5rem;">
+    {{i}}
+  </div>
+</m-scroll>
+```
 ___
 > ## m-map
 

src/components/MonitorComponents/index.js

@@ -15,7 +15,8 @@ const MonitorProgress = () => import('./MonitorProgress/monitor-progress')
 const MonitorTable = () => import('./MonitorTable/monitor-table')
 const MonitorTitle = () => import('./MonitorTitle/monitor-title')
 const MonitorStep = () => import('./MonitorStep/monitor-step')
-
+const MonitorScroll = () => import('./MonitorScroll/monitor-scroll')
+const MonitorMenu = () => import('./MonitorMenu/monitor-menu')
 
 export default (Vue) => {
   Vue.use(animate)
@@ -35,4 +36,6 @@ export default (Vue) => {
   Vue.component('m-table', MonitorTable)
   Vue.component('m-title', MonitorTitle)
   Vue.component('m-step', MonitorStep)
+  Vue.component('m-scroll', MonitorScroll)
+  Vue.component('m-menu', MonitorMenu)
 }

src/store/actions.js

@@ -3,6 +3,196 @@ import api from '@/server/api'
 import common from '@/util/common.js'
 
 export default {
+  initData({commit}) {
+    const COMMANDLIST = [    // 物业应急指挥体系
+      {
+        title:'指挥长',
+        name:'周少华',
+        img:'person.png',
+      },
+      {
+        title:'值班长',
+        name:'夏毅',
+        img:'person.png',
+      },
+      {
+        title:'值班长',
+        name:'瞿越方',
+        img:'person.png',
+      },
+    ]
+    const OPERATELIST = [     // 运行体征
+      {
+        title:'小区',
+        img:'community.png',
+        unit: '个',
+        num:'2829',
+      },
+      {
+        title:'业委会',
+        img:'group.png',
+        unit: '个',
+        num:'1749',
+      },
+      {
+        title:'物业企业',
+        img:'property.png',
+        unit: '家',
+        num:'498',
+      },
+      {
+        title:'管理面积',
+        img:'map.png',
+        unit: 'k㎡',
+        num:'17337718',
+      },
+    ]
+    const REPAIRLIST = [     // 报修投诉
+      {
+        title:'报修',
+        img:'repair.png',
+        num:'15',
+        allNum: '348',
+      },
+      {
+        title:'投诉',
+        img:'complaint.png',
+        num:'26',
+        allNum: '248',
+      },
+    ]
+    const HANDLELIST = [    //协同处置
+      {
+        title:'金港花园',
+        address:'古楼公路345弄12号',
+        matter:'占用消防通道' ,    // 事项
+        style:'物业督查',
+        department:'消防部门',
+        foundTime:'2020-01-01 12:30:30',  // 可能是moment格式
+        sendTime:'2020-01-02 13:30:30',
+        fixTime:'2020-01-02 14:30:30',
+        successTime:'2020-01-02 16:30:30',
+        overTime:null,
+        step:[
+          {
+            name:'推送',
+          },
+          {
+            name:'处理中',
+          },
+          {
+            name:'完成',
+          },
+          {
+            name:'入库'
+          }
+        ],
+        current:1
+      },
+      {
+        title:'金港花园',
+        address:'古楼公路345弄12号',
+        matter:'占用消防通道' ,    // 事项
+        style:'物业督查',
+        department:'消防部门',
+        foundTime:'2020-01-01 12:30:30',  // 可能是moment格式
+        sendTime:'2020-01-02 13:30:30',
+        fixTime:'2020-01-02 14:30:30',
+        successTime:'2020-01-02 16:30:30',
+        overTime:null,
+        step:[
+          {
+            name:'推送',
+          },
+          {
+            name:'处理中',
+          },
+          {
+            name:'完成',
+          },
+          {
+            name:'入库'
+          }
+        ],
+        current:2
+      },
+      {
+        title:'金港花园',
+        address:'古楼公路345弄12号',
+        matter:'占用消防通道' ,    // 事项
+        style:'物业督查',
+        department:'消防部门',
+        foundTime:'2020-01-01 12:30:30',  // 可能是moment格式
+        sendTime:'2020-01-02 13:30:30',
+        fixTime:'2020-01-02 14:30:30',
+        successTime:'2020-01-02 16:30:30',
+        overTime:null,
+        step:[
+          {
+            name:'推送',
+          },
+          {
+            name:'处理中',
+          },
+          {
+            name:'完成',
+          },
+          {
+            name:'入库'
+          }
+        ],
+        current:3
+      },
+    ]
+    const DISCOVERYLIST = [     //智能发现列表上排
+      {
+        title:'本月新增',
+        img:'data1.png',
+        num:'34',
+        unit:'个',
+      },
+      {
+        title:'历史累计',
+        img:'data2.png',
+        num:'57',
+        unit:'个',
+      },
+    ]
+    const FOUNDLIST = [     //智能发现列表下排
+      {
+        title:'门卫脱岗',
+        img:'mw.png',
+        num:'1',
+      },
+      {
+        title:'消防通道',
+        img:'xf.png',
+        num:'2',
+      },
+      {
+        title:'道闸故障',
+        img:'dz.png',
+        num:'4',
+      },
+      {
+        title:'维修资金',
+        img:'zj.png',
+        num:'3',
+      },
+      {
+        title:'电梯困人',
+        img:'dt.png',
+        num:'1',
+      },
+
+    ]
+    commit('SET_COMMANDLIST', COMMANDLIST)
+    commit('SET_OPERATELIST', OPERATELIST)
+    commit('SET_REPAIRLIST', REPAIRLIST)
+    commit('SET_HANDLELIST', HANDLELIST)
+    commit('SET_DISCOVERYLIST', DISCOVERYLIST)
+    commit('SET_FOUNDLIST', FOUNDLIST)
+  },
   getCheckCommunityList({commit}, params = {}){// 获取检查小区的列表
     ajax.post({
       url: api.POST_CHECKCOMMUNITY_LIST,
@@ -16,6 +206,11 @@ export default {
       if (params.isPublish && params.isPublish == 1) {
         commit('SET_SENDCHECKED',list.length)            // 传了1   已开单小区
       } else {
+        list.forEach((item, i) => { // 营造不同颜色的点，以后要删掉
+          if (i >= 10) {
+            item.icon = 'red.png'
+          }
+        })
         commit('SET_CHECKCOMMUNITYLIST',list)    // 没传ispublish   已检查小区总数
         commit('SET_ALLCHECKED',list.length)
       }

src/store/mutations.js

@@ -5,6 +5,24 @@ export default {
   SET_CURDATE(state, date) {
     state.curDate = date
   },
+  SET_COMMANDLIST(state, data) {
+    state.commandList = data
+  },
+  SET_OPERATELIST(state, data) {
+    state.operateList = data
+  },
+  SET_REPAIRLIST(state, data) {
+    state.repairList = data
+  },
+  SET_HANDLELIST(state, data) {
+    state.handleList = data
+  },
+  SET_DISCOVERYLIST(state, data) {
+    state.discoveryList = data
+  },
+  SET_FOUNDLIST(state, data) {
+    state.foundList = data
+  },
   SET_CHECKPEOPLELIST(state,data){     //修改检查人员列表数据
     state.supervisionPeopleList = data
   },

src/store/state.js

 export default {
   showLoading: false,
   curDate: null,
-  commandList: [    // 物业应急指挥体系
-    {
-      title:'指挥长',
-      name:'周少华',
-      img:'person.png',
-    },
-    {
-      title:'值班长',
-      name:'夏毅',
-      img:'person.png',
-    },
-    {
-      title:'值班长',
-      name:'瞿越方',
-      img:'person.png',
-    },
-  ],
-  operateList: [     // 运行体征
-    {
-      title:'小区',
-      img:'community.png',
-      unit: '个',
-      num:'2829',
-    },
-    {
-      title:'业委会',
-      img:'group.png',
-      unit: '个',
-      num:'1749',
-    },
-    {
-      title:'物业企业',
-      img:'property.png',
-      unit: '家',
-      num:'498',
-    },
-    {
-      title:'管理面积',
-      img:'map.png',
-      unit: 'k㎡',
-      num:'17337718',
-    },
-  ],
-  repairList: [     // 报修投诉
-    {
-      title:'报修',
-      img:'repair.png',
-      num:'15',
-      allNum: '348',
-    },
-    {
-      title:'投诉',
-      img:'complaint.png',
-      num:'26',
-      allNum: '248',
-    },
-  ],
-  discoveryList:[     //智能发现列表上排
-    {
-      title:'本月新增',
-      img:'data1.png',
-      num:'34',
-      unit:'个',
-    },
-    {
-      title:'历史累计',
-      img:'data2.png',
-      num:'57',
-      unit:'个',
-    },
-  ],
-  foundList:[     //智能发现列表下排
-    {
-      title:'门卫脱岗',
-      img:'mw.png',
-      num:'1',
-    },
-    {
-      title:'消防通道',
-      img:'xf.png',
-      num:'2',
-    },
-    {
-      title:'道闸故障',
-      img:'dz.png',
-      num:'4',
-    },
-    {
-      title:'维修资金',
-      img:'zj.png',
-      num:'3',
-    },
-    {
-      title:'电梯困人',
-      img:'dt.png',
-      num:'1',
-    },
 
-  ],
+  commandList: [],
+  operateList: [],
+  repairList: [],
+  discoveryList: [],
+  foundList: [],
   supervisionPeopleList:[   //物业督查检察人员列表
     {
       'TE_NAME': '假数据',
@@ -181,89 +88,5 @@ export default {
       send:'20'
     }
   ],
-  handleList:[    //协同处置
-    {
-      title:'金港花园',
-      address:'古楼公路345弄12号',
-      matter:'占用消防通道' ,    // 事项
-      style:'物业督查',
-      department:'消防部门',
-      foundTime:'2020-01-01 12:30:30',  // 可能是moment格式
-      sendTime:'2020-01-02 13:30:30',
-      fixTime:'2020-01-02 14:30:30',
-      successTime:'2020-01-02 16:30:30',
-      overTime:null,
-      step:[
-        {
-          name:'推送',
-        },
-        {
-          name:'处理中',
-        },
-        {
-          name:'完成',
-        },
-        {
-          name:'数据入库'
-        }
-      ],
-      current:1
-    },
-    {
-      title:'金港花园',
-      address:'古楼公路345弄12号',
-      matter:'占用消防通道' ,    // 事项
-      style:'物业督查',
-      department:'消防部门',
-      foundTime:'2020-01-01 12:30:30',  // 可能是moment格式
-      sendTime:'2020-01-02 13:30:30',
-      fixTime:'2020-01-02 14:30:30',
-      successTime:'2020-01-02 16:30:30',
-      overTime:null,
-      step:[
-        {
-          name:'推送',
-        },
-        {
-          name:'处理中',
-        },
-        {
-          name:'完成',
-        },
-        {
-          name:'数据入库'
-        }
-      ],
-      current:2
-    },
-    {
-      title:'金港花园',
-      address:'古楼公路345弄12号',
-      matter:'占用消防通道' ,    // 事项
-      style:'物业督查',
-      department:'消防部门',
-      foundTime:'2020-01-01 12:30:30',  // 可能是moment格式
-      sendTime:'2020-01-02 13:30:30',
-      fixTime:'2020-01-02 14:30:30',
-      successTime:'2020-01-02 16:30:30',
-      overTime:null,
-      step:[
-        {
-          name:'推送',
-        },
-        {
-          name:'处理中',
-        },
-        {
-          name:'完成',
-        },
-        {
-          name:'数据入库'
-        }
-      ],
-      current:3
-    },
-  ]
-
-
+  handleList: []
 }

src/views/components/emergencyCommand.vue

@@ -21,18 +21,18 @@ export default {
   width 100%
   height 100%
   display flex
+  justify-content space-between
   .person
-    flex 1
     display flex
     align-items center
     >img
       width 2.5rem
       height @width
-      margin 0.5rem
+      margin-right 0.5rem
     >div
       p
-        font-size 0.8rem
+        font-size 0.9rem
         color $fontColor
       span
-        font-size 1rem
+        font-weight bold
 </style>

src/views/components/handle.vue

 <template>
   <div class="handle">
+    <m-scroll :length="$store.state.handleList.length" :limit="2" mode="2" :step="12">
       <div class="card" v-for="(data,i) in $store.state.handleList" :key="i">
         <div class="title">
           <p>{{data.title}}</p>
@@ -27,10 +28,11 @@
         <div class="foot">
           <m-step
             :steps="data.step"
-          :current="data.current"
+            :current="[data.current, true]"
           />
         </div>
       </div>
+    </m-scroll>
   </div>
 </template>
 
@@ -46,6 +48,7 @@ export default {
   height 100%
   .card
     padding-bottom 1rem
+    height 12rem
     .title
       display flex
       align-items center
@@ -61,7 +64,7 @@ export default {
         font-weight 700
         &:last-child
           color $fontColor
-          font-size 0.6rem
+          font-size 0.8rem
     .body
       display flex
       align-items center
@@ -77,7 +80,7 @@ export default {
           overflow hidden
           text-overflow ellipsis
           color $fontColor
-          font-size 0.6rem
+          font-size 0.9rem
           &:last-child
             color $edgeColor
             font-size .9rem

src/views/components/repair.vue

@@ -6,7 +6,7 @@
     :key="i"
     :label="data.title"
     :icon="require(`@/assets/images/${data.img}`) "
-    :unit="`/${data.allNum}`"
+    :unit="`/ ${data.allNum}`"
     :count="+data.num"
     labelColor="#5587b7"
     countColor="#00f2ff"

src/views/components/supervision.vue

@@ -22,9 +22,11 @@
         <div class="line"/>
       </div>
       <div class="list">
-        <div v-for="data in $store.state.supervisionCommunityList" :key="data.CHECKID" @click="$emit('clickCommunity',data)">
+        <m-scroll :length="$store.state.supervisionCommunityList.length" :limit="6">
+          <div class="community" v-for="data in $store.state.supervisionCommunityList" :key="data.CHECKID" @click="$emit('clickCommunity',data)">
             <p>{{data.COMMUNITYNAME}}</p>
           </div>
+        </m-scroll>
       </div>
     </div>
     <div class="situation">
@@ -81,30 +83,33 @@ export default {
   .people
     .list
       >div
-        width 20%
+        width 33.3%
         display flex
         align-items center
         color $fontColor
         margin-top .5rem
-        font-size 0.8rem
+        // font-size 0.8rem
         >img
-          width 1rem
-          height 1rem
-          margin 0 .2rem
+          width 1.1rem
+          height 1.1rem
+          margin-right 0.2rem
   .community
+    height 50%
+    overflow hidden
     .list
-      >div
+      .community
         width 33.3%
         border-left 0.2rem solid yellow
         margin 0.5rem 0
         padding 0 .5rem
+        display inline-block
         p
           white-space nowrap
           overflow hidden
           text-overflow ellipsis
-          color #5587b7
+          color $fontColor
           font-weight 600
-          font-size 0.8rem
+          // font-size 0.8rem
   .situation
     .content
       margin-top 1rem
@@ -121,7 +126,7 @@ export default {
           justify-content space-between
           p
             color lightblue
-            font-size 0.8rem
+            // font-size 0.8rem
             &:last-child
               font-family $font-pang
               color #fff

src/views/main.vue

@@ -7,29 +7,32 @@
       'box3 . box6',
       'box4 . box6',
     ]"
-    columns="1fr 2.5fr 1fr"
+    columns="1fr 2fr 1fr"
     rows="3rem 1fr 1.5fr 1fr 2fr"
     gap="0"
-    :bgImg="require('@/assets/images/stars-bg.png')"
     style="padding: 0"
+    :complete="complete"
   >
+    <m-map ref="map" @event="handleMapClick" @complete="mapComplete" />
+    <m-animate enter="fadeInDown" leave="fadeOutUp">
       <m-title area="title" color="#fff" :bgImg="require('@/assets/images/title-bg.png')">智慧物业管理微平台</m-title>
-    <m-card area="box1" title="物业应急指挥体系" mode="4" :icon="require('@/assets/images/icon1.png')">
+    </m-animate>
+    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box1" title="物业应急指挥体系" mode="4" :icon="require('@/assets/images/icon1.png')">
       <EmergencyCommand />
     </m-card>
-    <m-card area="box2" title="运行体征" mode="4" :icon="require('@/assets/images/icon2.png')">
+    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box2" title="运行体征" mode="4" :icon="require('@/assets/images/icon2.png')">
       <Operation @select="handleSelect" />
     </m-card>
-    <m-card area="box3" title="投诉保修" mode="4" :icon="require('@/assets/images/icon3.png')">
+    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box3" title="投诉保修" mode="4" :icon="require('@/assets/images/icon3.png')">
       <Repair />
     </m-card>
-    <m-card area="box4" title="智能发现" mode="4" :icon="require('@/assets/images/icon4.png')">
+    <m-card v-show="complete" enter="fadeInLeft" leave="fadeOutLeft" area="box4" title="智能发现" mode="4" :icon="require('@/assets/images/icon4.png')">
       <Discovery />
     </m-card>
-    <m-card area="box5" title="物业督查" mode="4" :icon="require('@/assets/images/icon5.png')">
+    <m-card v-show="complete" area="box5" title="物业督查" mode="4" :icon="require('@/assets/images/icon5.png')">
       <Supervision  @clickCommunity="clickCommunity"/>
     </m-card>
-    <m-card area="box6" title="协同处置" mode="4" :icon="require('@/assets/images/icon6.png')">
+    <m-card v-show="complete" area="box6" title="协同处置" mode="4" :icon="require('@/assets/images/icon6.png')">
       <Handle/>
     </m-card>
   </m-grid>
@@ -54,12 +57,34 @@ export default {
     Supervision,
     Handle,
   },
-  created(){
+  data() {
+    return {
+      complete: false,
+    }
+  },
+  methods: {
+    mapComplete() {
+      setTimeout(() => {
+        this.complete = true
+        this.initData()
         this.getCheckCommunityList({isPublish: 1, someday: '20200316'})
         this.getCheckCommunityList()
         this.getCheckedPeopleList()
+      }, 3000)
+    },
+    handleMapClick({layername, data}) {
+      switch (layername) {
+      case 'community': // 当点击图层为小区时
+        const {X, Y} = data[0]
+        const {map} = this.$refs
+        map.removeGifPoint('selected-point') // 先移除已点击的点
+        map.focus(X, Y, 8)
+        map.addGifPoint({name: 'selected-point', key: 'COMMUNITYID', labelKey: 'COMMUNITYNAME', data: data[0], icon: data[0].icon || 'blue.png'})
+        break
+      default:
+        break
+      }
     },
-  methods: {
     handleSelect(data) {
       console.log(data)
     },
@@ -67,9 +92,18 @@ export default {
       console.log(data)
     },
     ...mapActions([
+      'initData',
       'getCheckCommunityList',
       'getCheckedPeopleList'
     ])
   },
+  watch: {
+    '$store.state.supervisionCommunityList': {
+      handler(cur) {
+        this.$refs.map.removePoint('community')
+        this.$refs.map.addPoint({name: 'community', key: 'COMMUNITYID', data: cur, icon: 'blue.png'})
+      }
+    },
+  },
 }
 </script>