接入mock数据

src/components/MonitorCard/monitor-card.vue

@@ -74,4 +74,5 @@ $size()
       opacity 0.3
   .card-content
     height calc(100% - 2rem)
+    overflow-y auto
 </style>

src/components/MonitorForm/monitor-form.vue

@@ -5,7 +5,7 @@
       <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;
-        <img v-if="col.type == 'img'" @click="handleView(model[key])" :src="require(`@/assets/images/${model[key]}`)" alt="">
+        <img v-if="col.type == 'img'" @click="handleView(model[key])" :src="model[key]"/>
         <div v-else>{{model[key]}}</div>
       </i-col>
     </Row>

src/components/MonitorModal/monitor-modal.vue

@@ -64,6 +64,7 @@ export default {
       max-height 70vh
       padding 0 1rem
       overflow-y auto
+      overflow-x hidden
     >img
       position absolute
       &.close-btn

src/components/MonitorTable/monitor-table.vue

@@ -10,7 +10,15 @@
       <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">
-            <img v-if="col.type == 'img'" @click="handleView(row[col.key])" :src="require(`@/assets/images/${row[col.key]}`)" />
+            <template v-if="col.type == 'img'">
+              <template v-if="row[col.key] && row[col.key].length > 0">
+                <img
+                  v-for="(img, i) in row[col.key]"
+                  :key="img + i"
+                  :src="img"
+                  @click="handleView(img)" />
+              </template>
+            </template>
             <div v-else :style="`text-align: ${col.align || 'left'};color: ${col.color} `">{{row[col.key]}}</div>
           </i-col>
         </Row>
@@ -84,6 +92,7 @@ export default {
     padding 0 1rem
     display flex
     align-items center
+    flex-wrap wrap
     img
       width 50%
       margin 0.5rem 0

src/main.js

@@ -10,6 +10,7 @@ import {Row, Col} from 'view-design'
 import animate from 'animate.css'
 import ajax from '@/server/ajax'
 import api from '@/server/api'
+import common from '@/util/common'
 import moment from 'moment'
 import MonitorCard from '@/components/MonitorCard'
 import MonitorCount from '@/components/MonitorCount'
@@ -28,6 +29,7 @@ Vue.config.productionTip = false
 // Vue.prototype.$echarts = echarts
 Vue.prototype.$ajax = ajax
 Vue.prototype.$api = api
+Vue.prototype.$com = common
 Vue.prototype.$moment = moment
 Vue.use(animate)
 Vue.use(MonitorCard)

src/server/ajax.js

@@ -64,6 +64,7 @@ export default {
     return request({ method: 'GET', ...args })
   },
   post(args) {
+    args.contentType = 'application/x-www-form-urlencoded;charset=UTF-8'
     return request({ method: 'POST', ...args })
   },
   put(args) {

src/server/api.js

 let IMG_URL = ''
 let FILE_URL = ''
+let BASE_URL = ''
 switch (process.env.NODE_ENV) {
 case 'production':
   IMG_URL = 'http://10.221.1.181:8080/dist/static/'
@@ -8,9 +9,16 @@ case 'production':
 default:
   IMG_URL = 'http://localhost:8080/static/'
   FILE_URL = '/static/'
+  BASE_URL = 'https://yapi.omniview.pro/mock/54/propertyinspector/api/v1'
 };
 export default {
-  BASE_URL: 'http://sunmonster.vicp.cc:41318/pudong/',
+  // BASE_URL: 'http://sunmonster.vicp.cc:41318/pudong/',
+  BASE_URL,
   IMG_URL,
   FILE_URL,
+  POST_THEME_LIST: '/sharingplatform/themeListForOneDay',
+  POST_COMMUNITY_LIST: '/sharingplatform/sectListForOneDay',
+  POST_COMMUNITY_DETAIL: '/sharingplatform/detailForOneDay',
+  POST_PERSON_LIST: '/sharingplatform/getInspectors',
+  POST_PERSON_DETAIL: '/sharingplatform/inspectorInfo',
 }

src/store/actions.js

+import ajax from '@/server/ajax'
+import api from '@/server/api'
+import common from '@/util/common'
 export default {
-
+  GET_THEME_LIST({commit}, data = {}) {
+    ajax.post({
+      url: api.POST_THEME_LIST,
+      params: data,
+    }).then(res => {
+      commit('SET_THEME_LIST', common.confirm(res, 'data.content', []))
+    })
+  },
+  GET_COMMUNITY_LIST({commit}, data = {}) {
+    ajax.post({
+      url: api.POST_COMMUNITY_LIST,
+      params: {isPublish: 0, ...data},
+    }).then(res => {
+      commit('SET_CHECKED_LIST', common.confirm(res, 'data.content', []))
+    })
+    ajax.post({
+      url: api.POST_COMMUNITY_LIST,
+      params: {isPublish: 1, ...data},
+    }).then(res => {
+      commit('SET_RECTIFY_LIST', common.confirm(res, 'data.content', []))
+    })
+  },
+  GET_PERSON_LIST({commit}, data = {}) {
+    ajax.post({
+      url: api.POST_PERSON_LIST,
+      params: {pageNo: 1, pageSize: 10000, ...data},
+    }).then(res => {
+      commit('SET_PERSON_LIST', common.confirm(res, 'data.content', []))
+    })
+  },
+  GET_THEME_DATA({commit}, data) {
+    // TODO
+    ajax.get({
+      url: 'test',
+      params: data,
+    }).then(res => {
+      commit('SET_COMMUNITY', res.data)
+      commit('SET_PERSON', res.data)
+    })
+  }
 }

src/store/mutations.js

@@ -2,4 +2,20 @@ export default {
   SET_LOADING(state, val) {
     state.showLoading = val
   },
+  SET_THEME_LIST(state, data) {
+    state.themeList = data
+    state.situation[0].count = data.length
+  },
+  SET_PERSON_LIST(state, data) {
+    state.personList = data
+    state.situation[1].count = data.length
+  },
+  SET_CHECKED_LIST(state, data) {
+    state.checkedCommunityList = data
+    state.situation[2].count = data.length
+  },
+  SET_RECTIFY_LIST(state, data) {
+    state.rectifyCommunityList = data
+    state.situation[3].count = data.length
+  },
 }

src/store/state.js

 export default {
   showLoading: false,
+  themeList: [],
+  checkedCommunityList: [],
+  rectifyCommunityList: [],
+  personList: [],
+  situation: [
+    {
+      label: '检查主题数',
+      icon: 'theme',
+      count: 3,
+    },
+    {
+      label: '检查人员数',
+      icon: 'person',
+      count: 9,
+    },
+    {
+      label: '完成检查小区数',
+      icon: 'complete',
+      count: 64,
+    },
+    {
+      label: '开具整改单数',
+      icon: 'rectify',
+      count: 12,
+    },
+  ]
 }

src/util/common.js

 /** 公共方法 */
-
+const _defaultConfig = {
+  name: 'test-point',
+  mode: 'add',
+  dataArray: [
+    {
+      codX: -1000,
+      codY: -1000,
+      codZ: 100,
+      attrs: {
+        att1: '测试属性',
+        attm: '第1类',
+      },
+    }
+  ],
+  popupEnabled: false, // 是否打开弹出框
+  legendVisible: false, // 图例是否可见
+  type: 'point',
+  fieldJsonArray: [
+    {
+      name: 'att1',
+      alias: '属性1',
+      type: 'string',
+    },
+    {
+      name: 'attm',
+      alias: '属性m',
+      type: 'string',
+    },
+  ],
+  renderer: {
+    type: 'unique-value',
+    field: 'attm',
+    defaultLabel: '无数据',
+    uniqueValueInfos: [
+      {
+        value: '第1类',
+        label: '第I类',
+        symbol: {
+          type: 'point-3d',
+          symbolLayers: [
+            {
+              type: 'icon',
+              size: 24,
+              resource: {
+                href: 'http://168.168.112.76:8181/propertybusinessmanage/tjcmv/images/marker/1.png'
+              // href: 'http://localhost:8080/static/person-bg.png'
+              },
+            },
+          ]
+        }
+      },
+    ]
+  },
+  labelSymbol: {
+    symbol: {
+      type: 'text',
+      color: 'red',
+      haloSize: 2,
+      haloColor: '#fff',
+    },
+    labelPlacement: 'center-right',
+  }
+}
 export default {
   /**
      * 在深层数据结构中取值（为了替代类似 res && res.data && res.data.content这种写法）
@@ -35,205 +97,67 @@ export default {
     }
   },
   /**
-     * 判断一维数组中是否存在某个值
-     * @param {String} value 需要校验的字符串
-     * @param {Array} validList 被查找的一维数组
-     * @return {Boolean}   是否存在的结果
-     */
-  oneOf(value, validList) {
-    for (let i = 0; i < validList.length; i++) {
-      if (value === validList[i]) {
-        return true
-      }
-    }
-    return false
-  },
-  /**
-     * 转换为金钱格式(千分位且保留两位小数)
-     * @param {Number | String} num [需转换的数字或字符串]
-     */
-  toMoney(num) {
-    if (!num) {
-      return 0.00
-    }
-    num = this.toFloat(num).toFixed(2)
-    const arr = num.toString().split('.')
-    let int = (arr[0] || 0).toString(),
-      result = ''
-    while (int.length > 3) {
-      result = ',' + int.slice(-3) + result
-      int = int.slice(0, int.length - 3)
-    }
-    if (int) {
-      result = int + result
-    }
-    return `${result}.${arr[1]}`
-  },
-
-  /**
-     * 手机号码校验
-     * @param {String} num [需校验的手机号码]
-     */
-  checkPhone(num) {
-    if (!num) return false
-    const filter = /^1[3-9][0-9]{9}$/
-    return filter.test(num)
-  },
-
-  /**
-     * 固定电话号码校验
-     * @param {String} num [需校验的固话]
-     */
-  checkTel(num) {
-    if (!num) return false
-    const filter = /^(?:0[1-9][0-9]{1,2}-)?[2-8][0-9]{6,7}$/
-    return filter.test(num)
-  },
-
-  /**
-     * 身份证号码校验
-     * @param {String} num [需校验的身份证号码]
-     */
-  checkID(num) {
-    if (!num) return false
-    const filter = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/
-    return filter.test(num)
-  },
-  /**
-     * 数字校验(整数或者小数)
-     * @param {String} num [需校验的数字]
-     */
-  checkNumber(num) {
-    if (!num && num != 0) return false
-    const filter = /^[0-9]+\.{0,1}[0-9]{0,2}$/
-    return filter.test(num)
-  },
-  /**
-     * 邮编校验(整数或者小数)
-     * @param {String} num [需校验的数字]
-     */
-  checkZipCode(num) {
-    if (!num && num != 0) return false
-    const filter = /^[0-9]{6}$/
-    return filter.test(num)
-  },
-  /**
-     * 文本校验(只能为中文、英文、数字组合，不允许其他特殊符号)
-     * @param {String} txt [需校验的文本]
-     */
-  checkContent(txt) {
-    const filter = /^[\u4E00-\u9FA5A-Za-z0-9]+$/
-    return filter.test(txt)
-  },
-  /**
-     * 密码校验(6位以上数字字母的组合)
-     * @param {String} txt [需校验的文本]
-     */
-  checkPassword(num) {
-    if (!num && num != 0) return false
-    const filter = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/
-    return filter.test(num)
-  },
-
-  /**
-     * 获取URL执行参数值
-     * @param {String} variable 地址参数名
-     * @return false 未找到；
-     */
-  getQueryVariable(variable) {
-    var query = window.location.search.substring(1)
-    var vars = query.split('&')
-    for (var i = 0; i < vars.length; i++) {
-      var pair = vars[i].split('=')
-      if (pair[0] == variable) {
-        return pair[1]
-      }
-    }
-  },
-  /**
-     * 获取当前年
-     *
-     */
-  getCurrentYear() {
-    var date = new Date
-    return date.getFullYear()
-  },
-  /**
-     * 接收带时分秒的时间格式，返回去掉时分秒的时间格式
-     * @param {String} val
-     */
-  strTime(val) {
-    if (val === undefined || val == null) return
-    val = val.toString()
-    if (val == null || val == '') {
-      return ''
-    } else {
-      return val.slice(0, val.indexOf(' '))
-    }
-  },
-  /**
-     *  判断传入参数的类型，以字符串的形式返回
-     *  @obj：数据
-     **/
-  dataType(obj) {
-    if (obj === null) return 'Null'
-    if (obj === undefined) return 'Undefined'
-    return Object.prototype.toString.call(obj).slice(8, -1)
-  },
-  /**
-     * 处理对象参数值，排除对象参数值为”“、null、undefined，并返回一个新对象
-     **/
-  dealObjectValue(obj) {
-    var param = {}
-    if (obj === null || obj === undefined || obj === '') return param
-    for (var key in obj) {
-      if (this.dataType(obj[key]) === 'Object') {
-        param[key] = dealObjectValue(obj[key])
-      } else if (obj[key] !== null && obj[key] !== undefined && obj[key] !== '') {
-        param[key] = obj[key]
-      }
-    }
-    return param
-  },
-
-  /**
-   * 判断是否是ie并返回版本号
+   * ------  从数据中整理出地图撒点所需的参数 -------
+   * @param {Array} data [必填 - 获取的数据]
+   * @param {String} key [必填 - 根据哪个关键字区别撒点（一般是id）]
    */
-  IEVersion() {
-    const userAgent = navigator.userAgent //取得浏览器的userAgent字符串
-    const isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 //判断是否IE<11浏览器
-    const isEdge = userAgent.indexOf('Edge') > -1 && !isIE //判断是否IE的Edge浏览器
-    const isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1
-    if(isIE) {
-      const reIE = new RegExp('MSIE (\\d+\\.\\d+);')
-      reIE.test(userAgent)
-      const fIEVersion = parseFloat(RegExp['$1'])
-      if(fIEVersion == 7) {
-        return 7
-      } else if(fIEVersion == 8) {
-        return 8
-      } else if(fIEVersion == 9) {
-        return 9
-      } else if(fIEVersion == 10) {
-        return 10
-      } else {
-        return 6//IE版本<=7
+  getMapParams(data = [], key) {
+    const dataArray = []
+    const uniqueValueInfos = []
+    const fieldJsonArray = []
+    for (let e in data[0]) {
+      fieldJsonArray.push({
+        name: e,
+        alias: e,
+        type: 'string',
+      })
+    }
+    data.forEach(item => {
+      dataArray.push({
+        codX: item.X,
+        codY: item.Y,
+        codZ: 100,
+        attrs: {
+          ...item,
+        },
+      })
+      uniqueValueInfos.push({
+        value: item[key],
+        label: '?', // TODO
+        symbol: {
+          type: 'point-3d',
+          symbolLayers: [
+            {
+              type: 'icon',
+              size: 24,
+              resource: {
+                href: 'http://localhost:8080/static/person-bg.png'
+              },
+            },
+          ]
+        }
+      })
+    })
+    return {
+      dataArray,
+      popupEnabled: false, // 是否打开弹出框
+      legendVisible: false, // 图例是否可见
+      type: 'point',
+      fieldJsonArray,
+      renderer: {
+        type: 'unique-value',
+        field: key,
+        uniqueValueInfos,
+      },
+      labelSymbol: {
+        symbol: {
+          type: 'text',
+          color: 'red',
+          haloSize: 2,
+          haloColor: '#fff',
+        },
+        labelPlacement: 'center-right',
       }
-    } else if(isEdge) {
-      return 'edge'//edge
-    } else if(isIE11) {
-      return 11 //IE11
-    }else{
-      return -1//不是ie浏览器
     }
-  },
-
-  /**
-   * 输入数字转换成大写字母，比如 输入 0 输出 'A'
-   * @param {Number} num 输入的数字
-   */
-  numToLetter(num) {
-    if (!num && num != 0) return null
-    return (Number(num) + 10).toString(36).toUpperCase()
   }
 }

src/views/components/community-list.vue

@@ -3,11 +3,11 @@
     <div
     v-for="(item, index) in list"
     :key="index"
-    :class="`${getClass(index + 1)} ${curCommunity == item ? 'on' : ''}`"
+    :class="`${getClass(index + 1)} ${curCommunity == item.COMMUNITYID ? 'on' : ''}`"
     @click="handleClick(item)"
     >
       <div class="dot" />
-      {{item}}
+      <p :title="item.COMMUNITYNAME">{{item.COMMUNITYNAME | check}}</p>
     </div>
   </div>
 </template>
@@ -17,23 +17,17 @@ export default {
   name: 'CommunityList',
   data() {
     return {
-      list: [
-        '金港花园一期',
-        '顺驰蓝调国际',
-        '枫蓝国际中心',
-        '旺座中心',
-        '美林·香槟小镇',
-        '定福家园',
-        '万豪君天下',
-        '永泰园-新风景',
-        '光彩国际公寓',
-        '城市复兴·华城',
-        '万泉新新家园',
-        '金地·格林小镇',
-      ],
       curCommunity: null,
     }
   },
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
   methods: {
     getClass(i) {
       const row = Math.ceil(i / 2)
@@ -43,13 +37,22 @@ export default {
         return 'row-odd'
       }
     },
-    handleClick(name) {
-      this.curCommunity = name
-      this.$emit('select', name)
+    handleClick(data) {
+      this.curCommunity = data.COMMUNITYID
+      this.$emit('select', data)
     },
     reset() {
       this.curCommunity = null
     }
+  },
+  filters: {
+    check(val) {
+      if (val && val.length > 7) {
+        return ([].slice.call(val, 0, 7)).join('') + '...'
+      } else {
+        return val
+      }
+    },
   }
 }
 </script>
@@ -63,9 +66,11 @@ export default {
   >div
     display flex
     align-items center
+    justify-content flex-start
     width 47%
     color #fff
     padding 0 0.5rem
+    height 3rem
     margin 0 0.3rem
     cursor pointer
     &.row-even
@@ -76,7 +81,7 @@ export default {
       width 0.2rem
       height 1rem
       background gold
-      margin-right 1rem
+      margin-right 0.5rem
     &.on
       $selected()
 </style>

src/views/components/day-check-comparison.vue

@@ -4,10 +4,10 @@
     <span class="line line2"/>
     <span class="label label1">
       <span class="dot"/>
-      开具整改单数：12
+      开具整改单数：{{count.rectify}}
     </span>
     <span class="label label2">
-      完成检查小区数：64
+      完成检查小区数：{{count.checked}}
       <span class="dot"/>
     </span>
     <div>
@@ -19,6 +19,15 @@
 <script>
 export default {
   name: 'DayCheckComparison',
+  computed: {
+    count() {
+      const sum = this.$store.state.situation
+      return {
+        rectify: sum[3].count,
+        checked: sum[2].count,
+      }
+    }
+  },
   methods: {
     getClass(i) {
       if (i < 10) {

src/views/components/day-check-situation.vue

@@ -13,30 +13,9 @@
 <script>
 export default {
   name: 'DayCheckSituation',
-  data() {
-    return {
-      list: [
-        {
-          label: '检查主题数',
-          icon: 'theme',
-          count: 3,
-        },
-        {
-          label: '检查人员数',
-          icon: 'person',
-          count: 9,
-        },
-        {
-          label: '完成检查小区数',
-          icon: 'complete',
-          count: 64,
-        },
-        {
-          label: '开具整改单数',
-          icon: 'rectify',
-          count: 12,
-        },
-      ]
+  computed: {
+    list() {
+      return this.$store.state.situation
     }
   }
 }

src/views/components/map-operate-bottom.vue

+<template>
+  <div class="map-operate">
+    <img class="bottom" src="@/assets/images/bottom.png" draggable="false"/>
+    <div class="btn-list">
+      <img
+        v-for="btn in btns"
+        :key="btn"
+        :src="require(`@/assets/images/${btn}.png`)"
+        :class="`${btn == curBtn ? 'on' : ''}`"
+        @click="handleClick(btn)"
+        draggable="false"
+        />
+    </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: 'MapOperateBottom',
+  components: {
+    SearchBar,
+  },
+  data() {
+    return {
+      btns: [
+        'plus',
+        'minus',
+        'full',
+        'refresh',
+        'search',
+      ],
+      curBtn: null,
+    }
+  },
+  methods: {
+    handleClick(btn) {
+      if (btn == 'search') {
+        this.curBtn = btn == this.curBtn ? null : btn
+      }
+      // TODO
+    },
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.map-operate
+  position relative
+  >img
+    position absolute
+    width 18%
+    &.bottom
+      bottom 0
+      left 0
+      right 0
+      width 100%
+  .btn-list
+    display flex
+    justify-content space-around
+    position absolute
+    bottom 1rem
+    width 30%
+    left 0
+    right 0
+    margin 0 auto
+    >img
+      width 3rem
+      cursor pointer
+      transition all 0.3s
+      &:hover
+        transform scale(1.3)
+      &.on
+        transform scale(1.3)
+        transform translate(0, -0.5rem)
+  .search-bar
+    position absolute
+    bottom 80%
+    width 50%
+    left 0
+    right 0
+    margin 0 auto
+</style>

src/views/components/map-operate-top.vue

+<template>
+  <div class="map-operate">
+    <img class="top-left" src="@/assets/images/top-left.png" draggable="false"/>
+    <img class="top-right" src="@/assets/images/top-right.png" draggable="false"/>
+    <div class="map-menu">
+      <img class="menu-btn" src="@/assets/images/list-btn.png" draggable="false"/>
+      <div class="menu">
+        <div
+          v-for="item in mapTypes"
+          :key="item"
+          :class="`${item == curMapType ? 'on' : ''}`"
+          @click="choiceMapType(item)"
+          >
+          {{item}}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MapOperateTop',
+  data() {
+    return {
+      mapTypes: ['暗色地图', '政务地图', '航空影像', '2.5维地图', '简易地形图'],
+      curMapType: '暗色地图',
+    }
+  },
+  methods: {
+    choiceMapType(type) {
+      this.curMapType = type
+    },
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.map-operate
+  position relative
+  height 0
+  .map-menu
+    position absolute
+    top 1rem
+    right 1rem
+    &:hover
+      >.menu
+        display block
+    .menu-btn
+      width 2rem
+      cursor pointer
+      position absolute
+      right 0
+      padding-bottom 1rem
+    .menu
+      position absolute
+      top 2rem
+      right 0
+      width 10rem
+      padding 0.5rem
+      border 0.1rem solid $color-map(0.5)
+      margin-top 0.5rem
+      background $color-map(0.2)
+      display none
+      >div
+        cursor pointer
+        color #fff
+        text-align center
+        line-height 2rem
+        &:hover
+          background $color-map()
+        &.on
+          background $color-map()
+          color $edgeColor
+  >img
+    position absolute
+    width 18%
+    &.top-left
+      top 0
+      left 0
+    &.top-right
+      top 0
+      right 0
+</style>

src/views/components/person-list.vue

@@ -3,11 +3,11 @@
     <div
       v-for="(item, index) in list"
       :key="index"
-      :class="`${item == curName ? 'on' : ''}`"
+      :class="`${item.OPER_ID == curId ? 'on' : ''}`"
        @click="handleClick(item)"
       >
       <img src="@/assets/images/location.png"/>
-      <span>{{item}}</span>
+      <span>{{item.TE_NAME}}</span>
     </div>
   </div>
 </template>
@@ -17,27 +17,21 @@ export default {
   name: 'PersonList',
   data() {
     return {
-      curName: null,
-      list: [
-        '张三',
-        '李四',
-        '王五',
-        '赵柳',
-        '陈琦',
-        '周八',
-        '郑九',
-        '石十',
-        '赵二',
-      ]
+      curId: null,
+    }
+  },
+  computed: {
+    list() {
+      return this.$store.state.personList
     }
   },
   methods: {
-    handleClick(name) {
-      this.curName = name
-      this.$emit('select', name)
+    handleClick(data) {
+      this.curId = data.OPER_ID
+      this.$emit('select', data)
     },
     reset() {
-      this.curName = null
+      this.curId = null
     }
   },
 }
@@ -53,6 +47,7 @@ export default {
     display flex
     align-items center
     width 33.3%
+    height 3rem
     padding 0.5rem 1rem
     cursor pointer
     &.on

src/views/components/theme-list.vue

 <template>
   <div class="theme-list">
-    <div v-for="(item, index) in list" :key="index">
-      <div class="flag" :style="`background-image:url(${require('@/assets/images/flag-bg.png')})`">{{item.flag}}</div>
+    <div
+      v-for="(item, index) in list"
+      :key="index"
+      :class="`${item.TASK_ID == curId ? 'on' : ''}`"
+      @click="handleClick(item.TASK_ID)"
+      >
+      <div class="flag" :style="`background-image:url(${require('@/assets/images/flag-bg.png')})`">{{item.DEPTTYPE.charAt(0)}}</div>
       <div class="content">
-        <p class="title" :title="item.title">{{item.title | check}}<span>{{item.tag}}</span></p>
-        <p class="date">{{item.date}}</p>
+        <p class="title" :title="item.TASK_NAME">{{item.TASK_NAME | check}}<span>{{item.THEMETYPE}}</span></p>
+        <p class="date">{{dateFormat(item.START_DATE)}} ~ {{dateFormat(item.END_DATE)}}</p>
       </div>
     </div>
   </div>
@@ -15,32 +20,26 @@ export default {
   name: 'ThemeList',
   data() {
     return {
-      list: [
-        {
-          flag: '市',
-          title: '检查主题名称',
-          date: '2020-01-07 ~ 2020-01-30',
-          tag: '日常',
-        },
-        {
-          flag: '区',
-          title: '检查主题名称',
-          date: '2020-01-07 ~ 2020-01-30',
-          tag: '专项',
-        },
-        {
-          flag: '房',
-          title: '检查主题名称检查主题名称检查题名称检查题名称检查',
-          date: '2020-01-07 ~ 2020-01-30',
-          tag: '重点',
-        },
-        {
-          flag: '区',
-          title: '检查主题名称检查主题名称',
-          date: '2020-01-07 ~ 2020-01-30',
-          tag: '日常',
-        },
-      ]
+      curId: null,
+    }
+  },
+  computed: {
+    list() {
+      return this.$store.state.themeList
+    },
+  },
+  methods: {
+    handleClick(id) {
+      if (this.curId == id) {
+        this.curId = null
+      } else {
+        this.curId = id
+      }
+      this.$emit('select', this.curId)
+    },
+    dateFormat(date) {
+      if (!date) return ''
+      return this.$moment(date).format('YYYY-MM-DD')
     }
   },
   filters: {
@@ -50,7 +49,7 @@ export default {
       } else {
         return val
       }
-    }
+    },
   }
 }
 </script>
@@ -62,7 +61,10 @@ export default {
   >div
     display flex
     align-items center
-    margin 1rem 0
+    padding 0.5rem 0
+    cursor pointer
+    &.on
+      $selected()
     .flag
       display flex
       align-items center

src/views/components/title.vue

@@ -2,8 +2,8 @@
   <div id="title" ref="title">
     <span class="moment date">{{$moment().format('LL')}}</span>
     <span class="moment time">{{time}}</span>
-    <img :src="bgImg"/>
-    <img class="arrow" :src="arrowImg"/>
+    <img :src="bgImg" draggable="false"/>
+    <img class="arrow" :src="arrowImg" draggable="false"/>
     <p><slot /></p>
   </div>
 </template>

src/views/main.vue

 <template>
   <div class="container">
-    <div id="map">
-      <!-- <BaiduMap/> -->
-    </div>
+    <!-- <div id="map">
+      <BaiduMap/>
+    </div> -->
+    <iframe id="map" frameborder="no" scrolling="no" allowtransparency="true"/>
     <ThemeTitle class="title">
       物业督查实时专题图
     </ThemeTitle>
-    <MapOperate class="map"/>
+    <MapOperateTop class="map-top"/>
+    <MapOperateBottom class="map-bottom"/>
     <div class="box1">
       <m-card title="当日检查情况">
         <DayCheckSituation />
@@ -19,12 +21,12 @@
     </div>
     <div class="box3">
       <m-card title="检查主题列表">
-        <ThemeList />
+        <ThemeList @select="handleThemeSelect"/>
       </m-card>
     </div>
     <div class="box4">
       <m-card title="完成检查小区列表" mode="2">
-        <CommunityList @select="handleCommunitySelect" ref="community"/>
+        <CommunityList :list="checkedList" @select="handleCommunitySelect" ref="community"/>
       </m-card>
     </div>
     <div class="box5">
@@ -34,7 +36,7 @@
     </div>
     <div class="box6">
       <m-card title="开具整改单列表" mode="2">
-        <CommunityList @select="handleCommunitySelect" ref="community2"/>
+        <CommunityList :list="rectifyList" @select="handleCommunitySelect" ref="community2"/>
       </m-card>
     </div>
     <m-modal v-model="showPersonModal" @close="closePersonModal">
@@ -50,7 +52,6 @@
 </template>
 
 <script>
-const {ShsmiGis} = window
 // import BaiduMap from './components/baidu'
 import ThemeTitle from './components/title'
 import DayCheckSituation from './components/day-check-situation'
@@ -58,7 +59,8 @@ import ThemeList from './components/theme-list'
 import PersonList from './components/person-list'
 import CommunityList from './components/community-list'
 import DayCheckComparison from './components/day-check-comparison'
-import MapOperate from './components/map-operate'
+import MapOperateTop from './components/map-operate-top'
+import MapOperateBottom from './components/map-operate-bottom'
 export default {
   name: 'Main',
   components: {
@@ -69,7 +71,8 @@ export default {
     PersonList,
     CommunityList,
     DayCheckComparison,
-    MapOperate,
+    MapOperateTop,
+    MapOperateBottom,
   },
   data() {
     return {
@@ -77,195 +80,328 @@ export default {
       showPersonModal: false,
       personLayout: [
         {
-          name: {
+          TE_NAME: {
             label: '检查人员姓名',
             width: 12,
           },
-          company: {
+          ORG_NAME: {
             label: '所在单位',
             width: 12
           }
         },
         {
-          phone: {
+          MOBILE: {
             label: '手机号码',
             width: 12,
           },
         },
         {
-          theme: {
+          TASK_NAME: {
             label: '检查主题名称',
             width: 12,
           },
-          public: {
+          NAME: {
             label: '发布单位',
             width: 12,
           },
         },
         {
-          check: {
+          CHECKCOMMUNITYNUMBER: {
             label: '已检查小区数',
             width: 12,
           },
-          rectify: {
+          RECTIFICATIONNUMBER: {
             label: '已发布整改单数',
             width: 12,
           },
         },
       ],
-      personData: {
-        name: '张三',
-        company: '市物业中心',
-        phone: '1234567890',
-        theme: '主题名称',
-        public: '上海市房办',
-        check: 7,
-        rectify: 3,
-      },
+      personData: {},
       showCommunityModal: false,
       communityLayout: [
         {
-          name: {
+          COMMUNITYNAME: {
             label: '小区名称',
             width: 12,
           },
-          address: {
+          COMMUNITYADDRESS: {
             label: '小区地址',
             width: 12,
           },
         },
         {
-          province: {
+          HP_NAME: {
             label: '行政区',
             width: 12,
           },
-          house: {
+          HO_NAME: {
             label: '房办',
             width: 12,
           },
         },
         {
-          company: {
+          PROPERTYNAME: {
             label: '物业企业',
             width: 12,
           },
-          manager: {
+          COMMUNITYMANAGER: {
             label: '小区经理',
             width: 12,
           },
         },
         {
-          phone: {
+          MANAGERTEL: {
             label: '小区经理手机',
             width: 12,
           },
         },
         {
-          theme: {
+          THEME: {
             label: '主题名称',
             width: 12,
           },
-          public: {
+          DEPTTYPE: {
             label: '发布单位',
             width: 12,
           },
         },
         {
-          checker: {
+          TENAME: {
             label: '检查人员姓名',
             width: 12,
           },
-          partner: {
+          TE_NAME: {
             label: '同行人员姓名',
             width: 12,
           },
         },
         {
-          date: {
+          INSPECTION_DATE: {
             label: '完成检查时间',
             width: 12,
           },
-          isRectify: {
+          IS_PUBLISH: {
             label: '是否开具整改单',
             width: 12,
           },
         },
         {
-          sign: {
+          SIGNATUREIMAGE: {
             label: '小区经理签名',
             width: 12,
             type: 'img',
           },
         },
       ],
-      communityData: {
-        name: '金港花园',
-        address: '上海市松江区横港路155弄',
-        province: '松江区',
-        house: '泗泾房办',
-        company: '上海市XXX物业公司',
-        manager: '张三',
-        phone: '12345667890',
-        theme: '主题名称',
-        public: '上海市房办',
-        checker: '李四',
-        partner: '王五',
-        date: '2020-01-10 15:50:00',
-        isRectify: '是',
-        sign: 'test.png',
-      },
+      communityData: {},
       communityTableLayout: [
         {
           title: '指标名称',
-          key: 'name',
+          key: 'INDEXNAME',
           width: 8,
         },
         {
           title: '检查情况',
-          key: 'situation',
+          key: 'REMARK',
           width: 8,
-          color: 'red',
         },
         {
           title: '附件',
-          key: 'file',
+          key: 'imageList',
           width: 8,
           type: 'img',
         },
       ],
-      communityTableData: [
-        {name: '指标1', situation: '指标有问题', file: 'test.png'},
-        {name: '指标2', situation: '指标有问题', file: 'test.png'},
-        {name: '指标3', situation: '指标有问题', file: 'test.png'},
-      ]
+      communityTableData: [],
     }
   },
   mounted() {
-    this.$nextTick(this.initMap)
+    // this.$nextTick(this.initMap)
+    this.initData()
+  },
+  computed: {
+    checkedList() {
+      return this.$store.state.checkedCommunityList
+    },
+    rectifyList() {
+      return this.$store.state.rectifyCommunityList
+    }
   },
   methods: {
+    initData(themeId = null) {
+      const communityParams = {someday: this.$moment().format('YYYYMMDD')}
+      const personParams = {}
+      if (themeId) {
+        communityParams.taskId = themeId
+        personParams.taskId = themeId
+      }
+      if (!themeId) {
+        this.$store.dispatch('GET_THEME_LIST', {flag: 0, someday: this.$moment().format('YYYYMMDD')})
+      }
+      this.$store.dispatch('GET_COMMUNITY_LIST', communityParams)
+      this.$store.dispatch('GET_PERSON_LIST', personParams)
+    },
     initMap() {
+      const {ShsmiGis} = window
       this.map = new ShsmiGis.Bridge({
         id: 'map',
         url: 'http://168.168.112.76:8181/smimap/index.html',
-        onReady: function () {
+        onReady: () => {
           console.log('地图创建完成')
+          this.addPoint()
+          this.addListener()
+        }
+      })
+    },
+    addListener() {
+      this.map.addEventListener(arg => {
+        switch (arg.action.toLowerCase()) {
+        case 'finished':
+          console.log(arg)
+          break
+        default:
+          // console.log(arg)
+          break
+        }
+      }, this)
+    },
+    addPoint() {
+      const params = {
+        name: 'test-point',
+        mode: 'add',
+        dataArray: [
+          {
+            codX: -1000,
+            codY: -1000,
+            codZ: 100,
+            attrs: {
+              att1: '测试属性',
+              attm: '第1类',
+            },
+          }
+        ],
+        popupEnabled: false, // 是否打开弹出框
+        legendVisible: false, // 图例是否可见
+        type: 'point',
+        fieldJsonArray: [
+          {
+            name: 'att1',
+            alias: '属性1',
+            type: 'string',
+          },
+          {
+            name: 'attm',
+            alias: '属性m',
+            type: 'string',
+          },
+        ],
+        renderer: {
+          type: 'unique-value',
+          field: 'attm',
+          defaultLabel: '无数据',
+          // defaultSymbol: {
+          //   type: 'point-3d',
+          //   symbolLayers: [{
+          //     type: 'icon',
+          //     size: 24,
+          //     resource: {
+          //       href: 'http://168.168.112.76:8181/propertybusinessmanage/tjcmv/images/marker/10.png'
+          //     }
+          //   }]
+          // },
+          uniqueValueInfos: [
+            {
+              value: '第1类',
+              label: '第I类',
+              symbol: {
+                // type: 'point-3d',
+                type: 'text',
+                symbolLayers: [
+                //   {
+                //   type: 'icon',
+                //   size: 24,
+                //   resource: {
+                //     href: 'http://168.168.112.76:8181/propertybusinessmanage/tjcmv/images/marker/1.png'
+                //     // href: 'http://localhost:8080/static/person-bg.png'
+                //   },
+                // },
+                  {
+                    type: 'text',
+                    value: '123',
+                    label: 'sdjfoi',
+                    color: 'red',
+                    haloSize: 2,
+                    haloColor: '#fff',
+                  }
+                ]
+              }
+            },
+            // {
+            //   value: '第1类',
+            //   label: '第I类',
+            //   symbol: {
+            //     type: 'text',
+            //     color: 'red',
+            //     haloSize: 2,
+            //     haloColor: '#fff',
+            //   },
+            // }
+          ]
+        },
+        labelSymbol: {
+          symbol: {
+            type: 'text',
+            color: 'red',
+            haloSize: 2,
+            haloColor: '#fff',
+          },
+          labelPlacement: 'center-right',
         }
+      }
+      this.map.Invoke({
+        ActionName: 'displayJsonData',
+        Parameters: JSON.stringify(params),
       })
     },
-    handlePersonSelect(name) {
-      this.showPersonModal = true
+    handlePersonSelect({OPER_ID, TASK_ID}) {
+      this.$ajax.post({
+        url: this.$api.POST_PERSON_DETAIL,
+        params: {
+          taskId: TASK_ID,
+          operId: OPER_ID,
+        }
+      }).then(res => {
+        this.personData = (this.$com.confirm(res, 'data.content', []))[0]
+        this.showPersonModal = true
+      })
     },
     closePersonModal() {
       this.$refs.person.reset()
     },
-    handleCommunitySelect(name) {
-      this.showCommunityModal = true
+    handleCommunitySelect({COMMUNITYID, CHECKID}) {
+      this.$ajax.post({
+        url: this.$api.POST_COMMUNITY_DETAIL,
+        params: {
+          checkId: CHECKID,
+          communityId: COMMUNITYID,
+        }
+      }).then(res => {
+        const followList = this.$com.confirm(res, 'data.content.fellowList', [])
+        this.communityData = (this.$com.confirm(res, 'data.content.content', []))[0]
+        const follower = followList.find(item => item.THEMEID == this.communityData.TASK_ID)
+        this.communityData.TE_NAME = (follower && follower.TE_NAME) || '无'
+        this.communityData.IS_PUBLISH = this.communityData.IS_PUBLISH == '1' ? '是' : '否'
+        this.communityTableData = this.$com.confirm(res, 'data.content.indexList', [])
+        this.showCommunityModal = true
+      })
     },
     closeCommunityModal() {
       this.$refs.community.reset()
       this.$refs.community2.reset()
     },
+    handleThemeSelect(id) {
+      this.initData(id)
+    },
   }
 }
 </script>
@@ -275,13 +411,13 @@ export default {
   $layout()
   grid-template-areas \
     'title title title'\
-    'box1 map box2'\
-    'box1 map box4'\
-    'box3 map box4'\
-    'box3 map box4'\
-    'box3 map box6'\
-    'box5 map box6'\
-    'box5 map box6'
+    'box1 map-top box2'\
+    'box1 . box4'\
+    'box3 . box4'\
+    'box3 . box4'\
+    'box3 . box6'\
+    'box5 . box6'\
+    'box5 map-bottom box6'
   grid-template-rows 4rem 1fr 1fr 1fr 1fr 1fr 1fr 1fr
   grid-template-columns 1fr 2.2fr 1fr
   #map
@@ -295,11 +431,15 @@ export default {
     bottom 0
   .title
     grid-area title
-  .map
-    grid-area map
+  .map-top
+    grid-area map-top
+  .map-bottom
+    grid-area map-bottom
   .box1
     grid-area box1
   .box2
+    height 20vh
+    overflow hidden
     grid-area box2
   .box3
     grid-area box3