bug fix

package.json

     "axios": "^0.18.0",
     "blueimp-md5": "^2.10.0",
     "dayjs": "^1.8.12",
+    "echarts": "^4.2.1",
     "element-ui": "^2.6.1",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "vue": "^2.6.6",
+    "vue-echarts": "^4.0.1",
     "vue-router": "^3.0.2",
     "vuex": "^3.1.0"
   },

src/components/EditableInput.vue

+<template>
+  <span @click="toggleFocus" v-if="!focus">
+    {{value}}
+    <span class="empty-tip" v-if="!value">(empty)</span>
+  </span>
+  <el-input ref="ctl" v-model="inputVal" @blur="handleBlur" v-else></el-input>
+</template>
+
+<script>
+export default {
+  name: 'editable-input',
+  props: [
+    'value',
+  ],
+  data () {
+    return {
+      focus: false,
+      inputVal: undefined,
+    }
+  },
+  mounted () {
+    if (!window['__editable-blur']) {
+      window['__editable-blur'] = () => {}
+    }
+  },
+  methods: {
+    toggleFocus () {
+      window['__editable-blur']()
+      window['__editable-blur'] = this.handleBlur.bind(this)
+
+      this.focus = true
+      this.inputVal = this.value
+      this.$nextTick(() => {
+        if (this.$refs.ctl) this.$refs.ctl.focus()
+      })
+    },
+    handleBlur() {
+      this.focus = false
+
+      if (this.inputVal != this.value) {
+        this.$emit('change', this.inputVal )
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.empty-tip {
+  font-size: 0.8em;
+  color: #aaa;
+}
+</style>
+

src/components/EditableSelect.vue

+<template>
+  <span v-if="!focus" @click.stop="toggleFocus">
+    {{valName}}
+    <span class="empty-tip" v-if="!value">(empty)</span>
+  </span>
+  <el-select ref="ctl" v-model="inputVal" @change="handleChange" v-else>
+    <el-option
+      v-for="item in dict"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: 'editable-select',
+  props: [
+    'value',
+    'dict',
+  ],
+  computed: {
+    valName () {
+      return ((this.dict || []).filter(x => x.value === this.value)[0] || {}).label
+    },
+  },
+  data () {
+    return {
+      focus: false,
+      inputVal: undefined,
+    }
+  },
+  mounted () {
+    if (!window['__editable-blur']) {
+      window['__editable-blur'] = () => {}
+    }
+  },
+  methods: {
+    toggleFocus () {
+      window['__editable-blur']()
+      window['__editable-blur'] = this.handleBlur.bind(this)
+
+      this.focus = true
+      this.inputVal = this.value
+      this.$nextTick(() => {
+        if (this.$refs.ctl) this.$refs.ctl.focus()
+      })
+    },
+    handleBlur () {
+      this.focus = false
+    },
+    handleChange() {
+      this.focus = false
+
+      if (this.inputVal != this.value) {
+        this.$emit('change', this.inputVal )
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.empty-tip {
+  font-size: 0.8em;
+  color: #aaa;
+}
+</style>

src/components/charts/StatCard.vue

+<template>
+  <el-card
+    shadow="hover"
+    :body-style="{ paddingLeft: 0, paddingRight: 0 }"
+    :class="{ 'card-box': true, [`theme-${theme || 'default'}`]: true }">
+    <el-row>
+      <el-col :span="10" class="icon">
+        <i :class="icon" v-if="icon"></i>
+        <span v-else>&nbsp;</span>
+      </el-col>
+      <el-col :span="14">
+        <div class="cat">{{tip}}</div>
+        <div class="val">{{val}}</div>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'statis-card',
+  props: [
+    'tip',
+    'val',
+    'icon',
+    'theme',
+  ]
+}
+</script>
+
+<style lang="scss" scoped>
+.card-box {
+  color: #333;
+  font-size: 16px;
+
+  .icon {
+    font-size: 2em;
+    text-align: left;
+    line-height: 1.4em;
+    text-align: center;
+  }
+
+  .cat {
+    font-size: 1em;
+    line-height: 1.2em;
+  }
+
+  .val {
+    font-size: 1.5em;
+    line-height: 1.2em;
+  }
+}
+
+.theme-default {
+  background-color: #fff;
+  color: #333;
+}
+
+.theme-primary {
+  background-color: #409eff;
+  color: #fff;
+}
+
+.theme-success {
+  background-color: #67c23a;
+  color: #fff;
+}
+
+.theme-warn {
+  background-color: #e6a23c;
+  color: #fff;
+}
+
+.theme-danger {
+  background-color: #f56c6c;
+  color: #fff;
+}
+</style>
+

src/components/charts/VisitingDayLine.vue

+<template>
+  <v-chart class="x-chart" :options="options" autoresize></v-chart>
+</template>
+
+<script>
+import 'echarts/lib/chart/line'
+import 'echarts/lib/component/title'
+import 'echarts/lib/component/dataZoom'
+import 'echarts/lib/component/tooltip'
+
+export default {
+  name: 'visiting-day-line',
+  components: {
+    // vChart: () => import('vue-echarts'),
+  },
+  props: [
+    'source',
+  ],
+  data () {
+    return {
+      opts: {
+        title: { text: '日访问量' },
+        tooltip: {
+          formatter: (params, ticket, callback) => {
+            const { visiteDate, amount } = params.data
+            const tip = `${visiteDate}: ${amount}`
+            callback(ticket, tip)
+            return tip
+          }
+        },
+        xAxis: { type: 'category' },
+        yAxis: { name: '人/日' },
+        series: [
+          {
+            type: 'line',
+            smooth: true,
+            encode: {
+              x: 'visiteDate',
+              y: 'amount',
+            },
+          },
+        ],
+        dataZoom: [
+          {
+            type: 'inside',
+            show: true,
+            start: 0,
+            end: 100,
+          },
+          // {
+          //   type: 'slider',
+          //   show: true,
+          //   start: 0,
+          //   end: 100,
+          // }
+        ],
+        dataset: {
+          sourceHeader: false,
+          dimensions: ['visiteDate', 'amount'],
+        },
+      }
+    }
+  },
+  computed: {
+    options () {
+      return {
+        ...this.opts,
+        title: {
+          ...this.opts.title,
+        },
+        dataset: {
+          ...this.opts.dataset,
+          source: this.source || [],
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.x-chart {
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+}
+</style>
+

src/components/charts/VisitingDayTable.vue

+<template>
+  <div>
+    <h3 style="margin: 0">访客记录</h3>
+    <el-table
+      :data="dataSet"
+      stripe
+      style="width: 100%">
+      <el-table-column
+        label="日期"
+        width="180">
+        <template slot-scope="scope">
+          <span>{{formatDate(scope.row.visiteDate)}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="姓名"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="carStyle"
+        label="车辆">
+      </el-table-column>
+      <el-table-column
+        prop="deviceName"
+        label="采集设备">
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      small
+      style="margin-top:10px;"
+      layout="prev, pager, next"
+      :page-size="pageNavi.size"
+      :total="pageNavi.total"
+      :current-page="pageNavi.current"
+      @current-change="changePage"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+
+export default {
+  name: 'visiting-day-table',
+  props: [
+    'source',
+    'page',
+  ],
+  data() {
+    return {
+      sampleData: [
+        { visiteDate: '2019-02-15 17:00', name: '张一', carStyle: '奔驰', channel: '搜房' },
+        { visiteDate: '2019-02-15 16:40', name: '张二', carStyle: '奔驰', channel: '搜房' },
+        { visiteDate: '2019-02-15 16:30', name: '张三', carStyle: '奔驰', channel: '搜房' },
+        { visiteDate: '2019-02-15 15:50', name: '张四', carStyle: '奔驰', channel: '搜房' },
+        { visiteDate: '2019-02-15 15:40', name: '张五', carStyle: '奔驰', channel: '搜房' },
+        { visiteDate: '2019-02-15 15:20', name: '张六', carStyle: '奔驰', channel: '搜房' },
+        { visiteDate: '2019-02-15 15:10', name: '张七', carStyle: '奔驰', channel: '搜房' },
+        { visiteDate: '2019-02-15 15:00', name: '张八', carStyle: '奔驰', channel: '搜房' },
+      ],
+      defPage: {
+        current: 1,
+        size: 10,
+        total: 0,
+      }
+    }
+  },
+  computed: {
+    pageNavi () {
+      return {
+        ...this.defPage,
+        ...(this.page || {})
+      }
+    },
+    dataSet () {
+      return this.source || this.sampleData
+    }
+  },
+  methods: {
+    changePage (nwPg) {
+      this.$emit('page-change', nwPg)
+    },
+    formatDate(dt) {
+      if (!dt || dt.indexOf('0001-') > -1) return ''
+
+      return dayjs(dt).format('YYYY-MM-DD HH:mm')
+    }
+  }
+}
+</script>
+

src/config/api.js

       url: `${commPrefix}/person_type/:id`
     }
   },
+  stats: {
+    person: {
+      method: 'get',
+      url: `${commPrefix}/stats/person`
+    },
+    daily: {
+      visiting: {
+        method: 'get',
+        url: `${commPrefix}/stats/daily/visitinglog`
+      }
+    }
+  },
   notice: {
     add: {
       method: 'post',
     dispatch: {
       method: 'put',
       url: `${commPrefix}/person/:id/avatar`
-    }
+    },
+    merge: {
+      method: 'put',
+      url: `${commPrefix}/merge/person/:id`
+    },
   },
   guard: {
     dispatch: {
     list: {
       method: 'get',
       url: `${commPrefix}/device`
-    }
+    },
+    snapshot: {
+      method: 'get',
+      url: `${commPrefix}/snapshot`
+    },
+    dispatch: {
+      method: 'post',
+      url: `${commPrefix}/device/person`
+    },
   },
   words: {
     add: {

src/layout/default/index.vue

   min-height: calc(100vh - 160px);
   position: relative;
   overflow: hidden;
-  background-color: #fff;
   margin: 0 20px;
+  padding: 0;
+
+  & > * {
+    background-color: #fff;
+    padding: 20px;
+  }
 }
 </style>

src/main.js

 import Vue from 'vue'
 import Element from 'element-ui'
+import ECharts from 'vue-echarts'
 import XMIcon from '@/components/XMIcon.vue'
 import XMRightLay from '@/components/XMRightLay.vue'
 import XMSearchForm from '@/components/XMSearchForm.vue'
 Vue.use(Element)
 
 Vue.config.productionTip = false
+Vue.component('v-chart', ECharts)
 Vue.component('xm-icon', XMIcon)
 Vue.component('xm-rtl', XMRightLay)
 Vue.component('xm-search', XMSearchForm)

src/router.js

   {
     path: '/',
     name: 'index',
+    redirect: '/dashboard',
     component: () => import('@/layout/index.vue'),
     children: [
       ...pages,

src/store/index.js

 import person from './modules/person'
 import sysparam from './modules/sysparam'
 import sysuser from './modules/sysuser'
+import stats from './modules/stats'
 
 Vue.use(Vuex)
 
     person,
     sysparam,
     sysuser,
+    stats,
   }
 })
 

src/store/modules/device.js

 export default {
   namespaced: true,
   state: {
-    devices: {}
+    devices: {},
+    snapshots: {},
   },
   mutations: {
     updateList (state, payload) {
       state.devices = payload
-    }
+    },
+    updateState (state, payload = {}) {
+      Object.keys(payload).forEach((key) => {
+        const val = payload[key]
+        state[key] = Array.isArray(val) ? [ ...val ] : { ...val }
+      })
+    },
   },
   actions: {
     getDeviceList ({ commit }, payload) {
           }
         })
       })
+    },
+    getSnapshots ({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        const api = lodash.get(apis, 'device.snapshot')
+        interact(api, payload).then((data) => {
+          commit('updateState', { snapshots: data })
+          resolve(data)
+        }).catch(({ message }) => {
+          if (typeof message === 'string') {
+            reject(message)
+          }
+        })
+      })
+    },
+    dispatchBatch (ctx, payload) {
+      const api = lodash.get(apis, 'device.dispatch')
+      return interact({ ...api, params: payload })
     }
   }
 }

src/store/modules/person.js

       const { records } = payload
       state.persons = records
     },
+    mergeList (state, payload) {
+      state.persons = state.persons.map((person) => {
+        return person.personId === payload.personId ? { ...payload } : person
+      })
+    },
     updateGuards (state, payload) {
       const { records } = payload
       state.guards = records
     },
     updateDetail (state, payload) {
       state.detail = payload.detail || {}
-      state.visitingLog = payload.visitingLog || []
+      // state.visitingLog = payload.visitingLog || []
+    },
+    updateLog (state, payload) {
+      state.visitingLog = (state.visitingLog || []).map((log) => {
+        return log.logId === payload.logId ? { ...payload } : log
+      })
     },
     resetVisitingLog (state, payload) {
       state.visitingLog = payload || []
         commit('updateDetail', data)
       })
     },
+    getPurPerson (ctx, payload) {
+      const api = replaceApiParams(lodash.get(apis, 'person.detail'), payload)
+      return interact(api);
+    },
+    mergePerson ({ commit }, payload) {
+      const { from, to } = payload
+      const api = replaceApiParams(lodash.get(apis, 'person.merge'), { id: from })
+      return interact(api, JSON.stringify(to)).then(() => {
+        const person = { ...to, personId: from }
+        commit('mergeList', person)
+      })
+    },
     addPerson ( _, payload) {
       const { onSuccess } = payload
       const api = lodash.get(apis, 'person.add')

src/store/modules/stats.js

+import lodash from 'lodash'
+import { interact } from '../../utils'
+import apis from '../../config/api'
+
+export default {
+  namespaced: true,
+  state: {
+    person: [],
+    visitingDaily: [],
+    visitingLog: [],
+  },
+  mutations: {
+    updateStat (state, payload) {
+      Object.keys(payload).forEach((k) => {
+        const val = payload[k]
+        state[k] = Array.isArray(val) ? [ ...val ] : { ...val }
+      })
+    },
+  },
+  actions: {
+    getPersonStats ({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        const api = lodash.get(apis, 'stats.person')
+        interact(api, payload).then((data) => {
+          commit('updateStat', { person :data })
+          resolve(data)
+        }).catch(({ message }) => {
+          if (typeof message === 'string') {
+            reject(message)
+          }
+        })
+      })
+    },
+    
+    getVisitingDaily ({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        const api = lodash.get(apis, 'stats.daily.visiting')
+        interact(api, payload).then((data) => {
+          commit('updateStat', { visitingDaily :data })
+          resolve(data)
+        }).catch(({ message }) => {
+          if (typeof message === 'string') {
+            reject(message)
+          }
+        })
+      })
+    },
+    
+    getVisitingLog ({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        const api = lodash.get(apis, 'visitinglog.list')
+        interact(api, payload).then((data) => {
+          commit('updateStat', { visitingLog :data })
+          resolve(data)
+        }).catch(({ message }) => {
+          if (typeof message === 'string') {
+            reject(message)
+          }
+        })
+      })
+    },
+  }
+}

src/views/Dashboard.vue

 <template>
-  <div>
-    <h1>欢迎使用荟房迎宾系统</h1>
+  <div class="dash-main">
+    <el-row :gutter="24" class="sta-row">
+      <el-col :span="8"><stat-card icon="el-icon-time" theme="success" tip="总到访" :val="personDt.total"></stat-card></el-col>
+      <el-col :span="8"><stat-card icon="el-icon-date" tip="今日到访" theme="danger" :val="personDt.today"></stat-card></el-col>
+      <el-col :span="8"><stat-card icon="el-icon-news" tip="今日老客户" theme="warn" :val="personDt.regular"></stat-card></el-col>
+    </el-row>
+    <div class="sta-row">
+      <el-card shadow="never">
+        <div slot="header" class="short-filters">
+          <div class="flex-item">&nbsp;</div>
+          <div class="static-item item-space">
+            <el-radio-group
+              size="small"
+              v-model="filterData.dateShortcut"
+              @change="handeShortDateChange"
+            >
+              <el-radio-button label="本年"></el-radio-button>
+              <el-radio-button label="本季"></el-radio-button>
+              <el-radio-button label="本月"></el-radio-button>
+            </el-radio-group>
+          </div>
+          <div class="static-item item-space">
+            <el-date-picker
+              size="small"
+              v-model="filterData.dateRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @change="handleDateChange">
+            </el-date-picker>
+          </div>
+        </div>
+        <el-row :gutter="12" type="flex">
+          <el-col :span="12">
+            <table-chart :page="visitingPage" :source="visitingList" @page-change="nextVistingLogPage"></table-chart>
+          </el-col>
+          <el-col :span="12">
+            <line-chart :source="dailyVisiting" :style="{minHeight: '400px'}"></line-chart>
+          </el-col>
+        </el-row>
+      </el-card>
+    </div>
   </div>
 </template>
 
+<script>
+import dayjs from 'dayjs'
+import { createNamespacedHelpers } from 'vuex'
+
+const {mapState: mapStatsState, mapActions: mapStatsActions} = createNamespacedHelpers('stats')
+
+export default {
+  name: 'dashboard',
+  components: {
+    lineChart: () => import('@/components/charts/VisitingDayLine.vue'),
+    tableChart: () => import('@/components/charts/VisitingDayTable.vue'),
+    statCard: () => import('@/components/charts/StatCard.vue'),
+  },
+  data () {
+    return {
+      filterData: {
+        dateRange: [],
+        dateShortcut: '',
+      },
+      visitingLogCurrentPage: 1,
+    }
+  },
+  computed: {
+    ...mapStatsState({
+      personDts: x => x.person,
+      dailyVisiting: x => x.visitingDaily,
+      visitingLog: x => x.visitingLog,
+    }),
+    personDt () {
+      return (this.personDts || [])[0] || {}
+    },
+    visitingPage () {
+      return {
+        total: (this.visitingLog || {}).total || 0,
+        size: (this.visitingLog || {}).size || 10,
+        current: this.visitingLogCurrentPage,
+      }
+    },
+    visitingList () {
+      return (this.visitingLog || {}).records || []
+    }
+  },
+  created () {
+    this.changeDate('week')
+    this.getPersonStats()
+  },
+  methods: {
+    ...mapStatsActions([
+      'getPersonStats',
+      'getVisitingDaily',
+      'getVisitingLog',
+    ]),
+    handleDateChange (dts) {
+      this.filterData.dateRange = dts
+      this.filterData.dateShortcut = ''
+      this.search()
+    },
+    search (rg) {
+      if (!rg || rg === 'visiting-daily') {
+        this.getVisitingDaily({
+          startDate: dayjs(this.filterData.dateRange[0]).format('YYYY-MM-DDT00:00:00'),
+          endDate: dayjs(this.filterData.dateRange[1]).format('YYYY-MM-DDT23:59:59'),
+        })
+      }
+
+      if (!rg || rg === 'visiting-log') {
+        this.getVisitingLog({
+          pageNum: this.visitingLogCurrentPage,
+          pageSize: this.visitingPage.size,
+          beginDate: dayjs(this.filterData.dateRange[0]).format('YYYY-MM-DDT00:00:00'),
+          endDate: dayjs(this.filterData.dateRange[1]).format('YYYY-MM-DDT23:59:59'),
+        })
+      }
+    },
+    changeDate (typ) {
+      this.filterData.dateRange = this.getDateRange(typ)
+      this.search()
+    },
+    nextVistingLogPage (page) {
+      this.visitingLogCurrentPage = page
+      this.search('visiting-log')
+    },
+    handeShortDateChange (val) {
+      switch (val) {
+        case '本年':
+          this.changeDate('year')
+          break
+        case '本季':
+          this.changeDate('quarter')
+          break
+        case '本月':
+          this.changeDate('month')
+          break
+      }
+    },
+    getDateRange(typ) {
+      // typ: https://github.com/iamkun/dayjs/blob/dev/src/constant.js#L13
+      const now = new Date();
+
+      const start = typ === 'quarter' ? this.getQuarterStart(now) : dayjs(now).startOf(typ).toDate()
+
+      return [ start, now ]
+    },
+    getQuarterStart(dt) {
+      const mon = dt.getMonth()
+      const year = dt.getFullYear()
+
+      if (mon < 3) return dayjs(`${year}-01-01`).toDate()
+      if (mon < 6) return dayjs(`${year}-03-01`).toDate()
+      if (mon < 9) return dayjs(`${year}-06-01`).toDate()
+
+      return dayjs(`${year}-09-01`).toDate()
+    }
+  }
+}
+</script>
+
+
 <style lang="scss" scoped>
-h1 {
-  text-align: center;
-  color: #333;
-  margin-top: 200px;
+.dash-main {
+  background-color: transparent !important;
+  padding: 20px 0;
+}
+
+.sta-row {
+  & + .sta-row {
+    margin-top: 24px;
+  }
+}
+
+.short-filters {
+  display: flex;
+
+  .item-space {
+    margin-left: 24px;
+  }
+
+  .flex-item {
+    flex: auto;
+  }
+
+  .static-item {
+    flex: none;
+  }
 }
 </style>
 
+<style lang="scss">
+.dash-main .el-card__header {
+  padding: 12px;
+}
+</style>

src/views/device/list.vue

         <span>{{FormatDate(scope.row.onlineDate)}}</span>
       </template>
     </el-table-column>
+    <el-table-column
+      fixed="right"
+      label="操作">
+      <template slot-scope="scope">
+        <el-button type="text" @click="startDispatch(scope.row)" size="small">下发</el-button>
+        <el-button type="text" @click="gotoSnapshotList(scope.row)"  size="small">抓拍流水</el-button>
+      </template>
+    </el-table-column>
   </el-table>
   <el-pagination
     small
     @current-change="getDevices"
   >
   </el-pagination>
+  <el-dialog title="人脸批量下发" :visible.sync="dipatchProcess.showDialog" width="30%">
+    <el-alert
+      :title="`下发需要${ !duration ? '一段时间' : '大约 ' + duration + ' 分钟' }, 过程中, 请不要进行其他操作, 请耐心等候下发完成!`"
+      type="warning"
+      :closable="false">
+    </el-alert>
+
+    <el-row :style="{ marginTop: '20px' }">
+      <el-col :span="18">
+        <div :style="{ margin: '0 auto', width: '130px' }">
+          <el-progress type="circle" :percentage="dealInfo.percentage" :status="dealInfo.status">{{ `${dealInfo.percentage}%` }}</el-progress>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <el-button
+          type="primary"
+          @click="dispatchToDevice"
+          :loading="dipatchProcess.step == 'process'"
+          :disabled="dipatchProcess.step == 'finish'"
+          :style="{ marginTop: '30px'}"
+          >{{btnText}}</el-button>
+      </el-col>
+    </el-row>
+
+  </el-dialog>
 </div>
 </template>
 
 export default {
   data () {
     return {
+      ws: undefined,
+      wsId: undefined,
       currentPage: 1,
-      pageSize: 20
+      pageSize: 20,
+      checkDevice: undefined,
+      dipatchProcess: {
+        step: 'ready',
+        showDialog: false,
+        total: 0,
+        current: 0,
+        curPer: 0,
+        wsId: undefined,
+        exception: false,
+      },
+      lastTime: undefined,
+      duration: undefined,
     }
   },
   computed: {
     ...mapDeviceState({
       devices: x => x.devices
-    })
+    }),
+    dealInfo () {
+      const { current, total, exception } =  this.dipatchProcess
+      const percentage = !total || total == 0 ? 0 : window.Math.ceil(current * 100 / total)
+      
+      const status = exception ? 'exception' : ( percentage >= 100 ? 'success' : 'text' )
+
+      return { percentage, status }
+    },
+    btnText () {
+      if (this.dipatchProcess.step == 'finish') return '下发完成'
+      if (this.dipatchProcess.step == 'process') return '进行中'
+
+      if (this.dipatchProcess.exception) return '重试'
+
+      return '开始'
+    },
   },
   methods: {
     ...mapDeviceActions([
-      'getDeviceList'
+      'getDeviceList',
+      'dispatchBatch',
     ]),
     GetIndex (inx) {
       return (this.currentPage - 1) * this.pageSize + inx + 1
         return ''
       }
     },
+    gotoSnapshotList (row) {
+      this.$router.push({ name: 'snapshotlist', params: { device: row.deviceId } })
+    },
+    startDispatch (dev) {
+      this.checkDevice = dev
+      this.dipatchProcess = {
+        step: 'ready',
+        showDialog: true,
+        total: 0,
+        current: 0,
+        curPer: 0,
+        wsId: undefined,
+        exception: false,
+      }
+      this.lastTime = undefined
+      this.duration = undefined
+    },
+    dispatchToDevice () {
+      this.newWs().then(() => {
+
+        this.dipatchProcess.step = 'process'
+        this.dispatchBatch({
+          wsId: this.wsId,
+          from: this.dipatchProcess.curPer,
+          deviceId: this.checkDevice.deviceId,
+          lastNum: this.dipatchProcess.current,
+          }).then(() => {
+
+          // 成功完成下发
+          this.dipatchProcess.step = 'finish'
+          this.dipatchProcess.current = this.dipatchProcess.total
+          this.dipatchProcess.exception = false
+          this.lastTime = undefined
+          this.duration = undefined
+
+          this.destroyWs(true)
+        }).catch((e) => {
+          this.dipatchProcess.exception = true
+          this.dipatchProcess.step = 'ready'
+          this.lastTime = undefined
+          this.duration = undefined
+
+          this.$notify.error(e.message)
+        })
+      })
+
+    },
+    destroyWs () {
+      if (this.ws) {
+        this.ws = undefined
+        this.wsId = undefined
+      }
+    },
+    newWs () {
+      if (this.ws) return Promise.resolve()
+
+      return new Promise((resolve) => {
+        this.wsId = `admin-${window.Math.random().toString(36).substr(2)}`
+
+        const wsURL = `${window.location.origin.replace('http', 'ws')}/api/websocket/${this.wsId}`
+        this.ws = new WebSocket(wsURL)
+
+        this.ws.onopen = () => {
+          resolve()
+        }
+        
+        // 处理过程中
+        this.ws.onmessage = (e) => {
+          const { step, current, id, total } =  window.JSON.parse(e.data)
+
+          switch (step) {
+            case 'ready':
+              this.dipatchProcess.step = 'process'
+              this.dipatchProcess.total = total
+              this.dipatchProcess.exception = false
+              break
+            case 'process':
+              this.dipatchProcess.current = current
+              this.dipatchProcess.exception = false
+              this.dipatchProcess.curPer = id
+              this.compDuration()
+              break;
+            case 'finish':
+              break
+            default:
+              break
+          }
+        }
+
+        this.ws.onclose = () => {
+          window.console.error('websocket 连接被断开')
+
+          if (this.dipatchProcess.step == 'process') {
+            this.$notify('进度监控异常, 请耐心等待完成')
+          }
+
+          this.destroyWs()
+        },
+
+        this.ws.onerror = (e) => {
+          window.console.error(e)
+        }
+      })
+    },
+    compDuration () {
+      const { current, total } =  this.dipatchProcess
+      if (!total || total == 0) return 0
+
+      const now = new Date()
+      if (!this.lastTime) {
+        this.lastTime = now
+        return
+      }
+
+      const durPer = now.valueOf() - this.lastTime.valueOf()
+      const totalMin = (total - current) * durPer / ( 1000 * 60 )
+      this.duration = window.Number(totalMin).toFixed(1)
+      this.lastTime = now
+    }
   },
   created () {
     this.getDevices()

src/views/device/snapshot.vue

+<template>
+<div>
+  <xm-search @submit="search">
+    <el-form-item>
+      <el-date-picker
+        v-model="filterData.dateRange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期">
+      </el-date-picker>
+    </el-form-item>
+  </xm-search>
+
+  <el-card shadow="hover">
+    <el-table
+      :data="list"
+      style="width: 100%">
+      <el-table-column
+        label="抓拍日期"
+      >
+        <template slot-scope="scope">
+          <span>{{ formatDate(scope.row.createDate) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="personId"
+        label="入库ID">
+      </el-table-column>
+      <el-table-column
+        label="抓拍图">
+        <template slot-scope="scope">
+          <img class="avatar" :src="scope.row.avatar" alt="">
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="similarity"
+        label="相似度">
+      </el-table-column>
+      <el-table-column
+        label="匹配人">
+        <template slot-scope="scope">
+          <span>{{ scope.row.matchPerson > 0 ? `${scope.row.matchName || ''}(${scope.row.matchPerson})` : '' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="匹配图">
+        <template slot-scope="scope">
+          <img class="avatar" :src="scope.row.matchAvatar" alt="">
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="score"
+        label="人像质量(0-100)">
+      </el-table-column>
+      <el-table-column
+        label="比对结果">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.status == 1" type="success">成功</el-tag>
+          <el-tag v-else-if="scope.row.status == 2" type="danger">失败</el-tag>
+          <el-tag v-else type="info">未知</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-card>
+  <el-pagination
+    small
+    style="margin-top:10px;"
+    layout="prev, pager, next"
+    :current-page="pageNavi.current"
+    :pageSize="pageNavi.size"
+    :total="pageNavi.total"
+    @current-change="handlePageChange"
+  >
+  </el-pagination>
+</div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+import dayjs from 'dayjs';
+
+const {mapState, mapActions } = createNamespacedHelpers('device')
+
+export default {
+  data () {
+    return {
+      deviceId: undefined,
+      filterData: {
+        dateRange: [],
+      },
+    }
+  },
+  computed: {
+    ...mapState({
+      dtSource: x => x.snapshots,
+    }),
+    startDate () {
+      if (!this.filterData.dateRange || this.filterData.dateRange.length < 1) {
+        return undefined;
+      }
+
+      return dayjs(this.filterData.dateRange[0]).format('YYYY-MM-DDT00:00:00')
+    },
+    endDate () {
+      if (!this.filterData.dateRange || this.filterData.dateRange.length < 2) {
+        return undefined;
+      }
+
+      return dayjs(this.filterData.dateRange[1]).format('YYYY-MM-DDT23:59:59')
+    },
+    list () {
+      const { records = [] } = this.dtSource || {}
+      return records
+    },
+    pageNavi () {
+      const { current = 1, size = 20, total = 0 } = this.dtSource || {}
+      return { current, size, total }
+    }
+  },
+  methods: {
+    ...mapActions([
+      'getSnapshots'
+    ]),
+    handlePageChange (nwPage) {
+      this.search(nwPage)
+    },
+    search (page) {
+      this.getSnapshots({
+        pageNum: page || this.pageNavi.current,
+        pageSize: this.pageNavi.size,
+        deviceId: this.deviceId,
+        startDate: this.startDate,
+        endDate: this.endDate,
+      })
+    },
+    formatDate (dt) {
+      if (!dt || dt.indexOf('0001-') > -1) return ''
+      return dayjs(dt).format('YYYY-MM-DD HH:mm:ss')
+    },
+    init () {
+      this.deviceId = this.$route.params.device
+      this.filterData.dateRange = [dayjs().startOf('week').toDate(), new Date()]
+    }
+  },
+  created () {
+    this.init()
+    this.search()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.avatar {
+  width: 64px;
+  height: 64px;
+}
+</style>

src/views/index.js

 
 const pages = [  
   {
-    path: '',
+    path: 'dashboard',
     name: 'dashboard',
     component: () => import('./Dashboard.vue'),
-    redirect: { name: 'personlist' },
     meta: {
       menuShow: true,
       title: 'Dashboard',
     },
     children: [
       {
-        path: 'devicelist',
+        path: 'device',
         name: 'devicelist',
         component: () => import('./device/list.vue'),
         meta: {
           title: '设备管理',
         },
       },
+      {
+        path: 'snapshot/:device',
+        name: 'snapshotlist',
+        component: () => import('./device/snapshot.vue'),
+        meta: {
+          menuShow: false,
+          title: '抓拍列表',
+        },
+      },
       {
         path: 'paramlist',
         name: 'paramlist',

src/views/person/edit.vue

         <el-form-item label="会员ID">
           <el-input v-model="memProfile.personId" readonly></el-input>
         </el-form-item>
+        <el-form-item label="真实ID">
+          <el-input v-model="memProfile.realId" readonly></el-input>
+        </el-form-item>
         <el-form-item label="会员姓名">
           <el-input v-model="memProfile.name"></el-input>
         </el-form-item>
           <el-row>
             <el-button type="primary" @click="onSubmit">保存</el-button>
             <el-tooltip content="同步数据至各抓拍机" placement="top">
-              <el-button type="primary" class="right-space" @click="downFace" :loading="optLoading.sync" :disabled="!(memProfile.personId && memProfile.avatar)">同步</el-button>
+              <el-button type="warn" class="right-space" @click="downFace" :loading="optLoading.sync" :disabled="!(memProfile.personId && memProfile.avatar)">同步</el-button>
             </el-tooltip>
+            <!--
             <el-tooltip content="下发数据至各门禁" placement="top">
               <el-button type="success" @click="showDispatchDialog = true" :disabled="!(memProfile.personId && memProfile.avatar)">下发</el-button>
             </el-tooltip>
             <el-tooltip content="禁用各门禁权限" placement="top">
               <el-button type="danger" class="right-space" :loading="optLoading.forbid" :disabled="!(memProfile.personId && memProfile.avatar)" @click="deleteFromGuard">禁用</el-button>
             </el-tooltip>
+            -->
             <el-button @click="onCancel">取消</el-button>
           </el-row>
         </el-form-item>
       </el-dialog>
     </el-tab-pane>
     <el-tab-pane label="来访记录" name="visiting">
-      <visitinglog :person="memProfile.personId" />
+      <visitinglog :person="memProfile.personId" :sales-list="salesList" @change="handleLogUpdate" />
     </el-tab-pane>
   </el-tabs>
 </template>
 import apis from '../../config/api'
 
 const { mapState: mapTypeState, mapActions: mapTypeActions } = createNamespacedHelpers('type')
+const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('sysuser')
 const { mapState: mapMemberState, mapActions: mapMemberActions, mapMutations: mapMemberMutations } = createNamespacedHelpers('person')
 
 export default {
     }),
     ...mapMemberState({
       detail: x => x.detail,
-      logs: x => x.visitingLog,
+      // logs: x => x.visitingLog,
       guards: x => x.guards,
     }),
+    ...mapUserState({
+      salesList: x => (x.list || {}).records || [],
+    }),
     memProfile: {
       get () {
         return this.detail
       'getList'
     ]),
     ...mapMemberMutations([
-      'updateDetail'
+      'updateDetail',
+      'updateLog',
     ]),
     ...mapMemberActions([
       'getDetail',
       'forbidGuard',
       'getGuards',
     ]),
+    ...mapUserActions([
+      'getSysUserList',
+    ]),
     onCancel () {
       // this.$router.push('personlist')
       this.$router.go(-1)
       this.imgurl = res.message
       this.loading.close()
     },
+    handleLogUpdate (log) {
+      this.updateLog(log)
+    },
     onSubmit () {
       if (!this.memProfile.personId) {
         // 新增
 
       this.getGuards()
 
+      this.getSysUserList({ pageNum: 1, pageSize: 999, isSales: 1 })
+
       this.getList({
         pageNum: 1,
         pageSize: 999

src/views/person/list.vue

     <el-card shadow="hover">
       <div slot="header" class="clearfix">
         <span>
-          <el-select v-model="activeType" @change="handleTypeSelect" placeholder="请选择">
-            <el-option label="全部" value="%"></el-option>
-            <el-option
-              v-for="item in (types.records || [])"
-              :key="item.typeId"
-              :label="item.typeName"
-              :value="`${item.typeId}`">
-            </el-option>
-          </el-select>
         </span>
         <el-button
           type="primary"
           prop="personId">
         </el-table-column>
         <el-table-column
-          label="照片"
-          width="180">
+          label="照片">
           <template slot-scope="scope">
             <div class="avatar">
               <img :src="scope.row.avatar" alt="" />
             </div>
           </template>
         </el-table-column>
-        <el-table-column
-          label="分类"
-        >
+        <el-table-column width="180">
+          <template slot="header" slot-scope="scope">
+            <el-dropdown @command="handleTypeSelect" trigger="click">
+              <span>
+                {{handleTitleName(scope) || '所属分类'}}
+                <i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="%">全部</el-dropdown-item>
+                <el-dropdown-item
+                  v-for="item in (types.records || [])"
+                  :key="item.typeId"
+                  :command="`${item.typeId}`">
+                  {{item.typeName}}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
           <template slot-scope="scope">
-            <span>{{getTypeName(scope.row.typeId)}}</span>
+            <editable-select :dict="typeDict" :value="scope.row.typeId" v-on="{ change: handleRowChange(scope.row, 'typeId') }"></editable-select>
           </template>
         </el-table-column>
         <el-table-column
-          prop="name"
-          label="姓名"
+          label="姓名">
+          <template slot-scope="scope">
+            <editable-input :value="scope.row.name" v-on="{ change: handleRowChange(scope.row, 'name') }"></editable-input>
+          </template>
         >
         </el-table-column>
         <el-table-column
-          prop="phone"
           label="电话"
         >
+          <template slot-scope="scope">
+            <editable-input :value="scope.row.phone" v-on="{ change: handleRowChange(scope.row, 'phone') }"></editable-input>
+          </template>
         </el-table-column>
         <el-table-column
           label="设备名称"
         </el-table-column>
         <el-table-column
           fixed="right"
-          label="操作"
-          width="100">
+          label="操作">
           <template slot-scope="scope">
             <el-button type="text" @click="handleClick(scope.row, 'detail')" size="small">编辑</el-button>
+            <el-button type="text" @click="showMergeDialog(scope.row)" size="small">合并</el-button>
             <el-button type="text" @click="handleClick(scope.row, 'visiting')" size="small">来访</el-button>
             <!-- <el-button @click="handleDel(scope.row)" type="text" size="small">删除</el-button> -->
           </template>
       >
       </el-pagination>
     </xm-rtl>
+    <el-dialog title="人员合并" :visible.sync="mergeDialogVisible">
+      <merge-person
+        :from="mergeFrom"
+        :person-types="(types || {}).records"
+        @cancel="mergeDialogVisible = false"
+      ></merge-person>
+    </el-dialog>
   </div>
 </template>
 
 import { createNamespacedHelpers } from 'vuex'
 
 const {mapState: mapTypeState, mapActions: mapTypeActions} = createNamespacedHelpers('type')
-const {mapState: mapMemberState, mapActions: mapMemberActions} = createNamespacedHelpers('person')
+const {mapState: mapMemberState, mapActions: mapMemberActions, mapMutations: mapMemberMutations } = createNamespacedHelpers('person')
 const {mapState: mapDeviceState, mapActions: mapDeviceActions} = createNamespacedHelpers('device')
 
 export default {
   name: 'person-list',
   components: {
-    // visitinglog: () => import('./visitinglog.vue')
+    // visitinglog: () => import('./visitinglog.vue'),
+    editableInput: () => import('@/components/EditableInput.vue'),
+    editableSelect: () => import('@/components/EditableSelect.vue'),
+    mergePerson: () => import('./merge.vue')
   },
   data () {
     return {
       },
       activeType: '%',
       commPrefix: '',
+      mergeFrom: {},
       dialogVisible: false,
+      mergeDialogVisible: false,
       searchData: {},
       initPage: 1,
       currentPerson: 0,
     perType () {
       return !this.activeType || this.activeType === '%' ? 0 : this.activeType
     },
+    typeDict () {
+      return ((this.types || {}).records || []).map((item) => {
+        return {
+          value: item.typeId,
+          label: item.typeName,
+        }
+      })
+    }
   },
   methods: {
     ...mapTypeActions([
       'getList'
     ]),
+    ...mapMemberMutations([
+      'mergeList',
+    ]),
     ...mapMemberActions([
       'getPersonList',
+      'editPerson',
       'setDetailNull',
       'deletePerson',
     ]),
     ...mapDeviceActions([
       'getDeviceList'
     ]),
+    handleTitleName () { return undefined },
+    handleRowChange (row, key) {
+      return (val) => {
+        const person = { ...row, [`${key}`]: val }
+
+        this.editPerson({
+          onSuccess: () => {
+            this.mergeList(person)
+          },
+          detail: JSON.stringify(person)
+        })
+      }
+    },
     handleTypeSelect (tab) {
       const perType = !tab || tab === '%' ? 0 : tab
       this.refreshPage({ tab: perType })
         })
       })
     },
+    showMergeDialog(row) {
+      this.mergeFrom = row
+      this.mergeDialogVisible = true
+    },
     getSelectVal () {
       const bdt = this.filterData.beginDate ? dayjs(this.filterData.beginDate).format('YYYY-MM-DDTHH:mm:ss') : '';
       const edt = this.filterData.endDate ? dayjs(this.filterData.endDate).format('YYYY-MM-DDTHH:mm:ss') : ''
     //   this.currentPerson = row.personId
     // },
     initData () {
-      this.activeType = this.$route.query.tab || '%'
+      this.activeType = this.$route.query.tab == 0 || this.$route.query.tab == undefined ? '%' : this.$route.query.tab
       this.initPage = (this.$route.query.page || 1) - 0
 
       this.getDeviceList({

src/views/person/merge.vue

+<template>
+  <div class="merge-box">
+    <el-row class="merge-item merge-head" type="flex">
+      <el-col :span="2">#</el-col>
+      <el-col :span="5">待合并</el-col>
+      <el-col :span="1">&nbsp;</el-col>
+      <el-col :span="5">合并目标</el-col>
+      <el-col :span="1">&nbsp;</el-col>
+      <el-col :span="10">合并结果</el-col>
+    </el-row>
+    <el-row class="merge-item">
+      <el-col :span="2">人员ID</el-col>
+      <el-col :span="5">{{ from.personId || '&nbsp;' }}</el-col>
+      <el-col :span="1"><i class="el-icon-plus"></i></el-col>
+      <el-col :span="5">
+        <el-input size="small" v-model="to.personId" @keyup.enter.native="getMergeTo"></el-input>
+      </el-col>
+      <el-col :span="1"><i class="el-icon-arrow-right"></i></el-col>
+      <el-col :span="10">
+        <el-input size="small" v-model="result.personId" readonly></el-input>
+      </el-col>
+    </el-row>
+    <el-row class="merge-item">
+      <el-col :span="2">识别ID</el-col>
+      <el-col :span="5">{{ from.realId || '&nbsp;' }}</el-col>
+      <el-col :span="1"><i class="el-icon-plus"></i></el-col>
+      <el-col :span="5">{{ to.realId || '&nbsp;' }}</el-col>
+      <el-col :span="1"><i class="el-icon-arrow-right"></i></el-col>
+      <el-col :span="10">
+        <el-input size="small" v-model="result.realId" readonly></el-input>
+      </el-col>
+    </el-row>
+    <el-row class="merge-item">
+      <el-col :span="2">姓名</el-col>
+      <el-col :span="5">{{ from.name || '&nbsp;' }}</el-col>
+      <el-col :span="1"><i class="el-icon-plus"></i></el-col>
+      <el-col :span="5">{{ to.name || '&nbsp;' }}</el-col>
+      <el-col :span="1"><i class="el-icon-arrow-right"></i></el-col>
+      <el-col :span="10">
+        <el-input size="small" v-model="result.name"></el-input>
+      </el-col>
+    </el-row>
+    <el-row class="merge-item">
+      <el-col :span="2">分类</el-col>
+      <el-col :span="5">{{ getTypeName(from.typeId) || '&nbsp;' }}</el-col>
+      <el-col :span="1"><i class="el-icon-plus"></i></el-col>
+      <el-col :span="5">{{ getTypeName(to.typeId) || '&nbsp;' }}</el-col>
+      <el-col :span="1"><i class="el-icon-arrow-right"></i></el-col>
+      <el-col :span="10">
+        <el-select :style="{ width: '100%' }" size="small" v-model="result.typeId">
+          <el-option v-for="type in (personTypes || [])" :key="type.typeId" :label="type.typeName" :value="type.typeId"></el-option>
+        </el-select>
+      </el-col>
+    </el-row>
+    <el-row class="merge-item">
+      <el-col :span="2">手机</el-col>
+      <el-col :span="5">{{ from.phone || '&nbsp;' }}</el-col>
+      <el-col :span="1"><i class="el-icon-plus"></i></el-col>
+      <el-col :span="5">{{ to.phone || '&nbsp;' }}</el-col>
+      <el-col :span="1"><i class="el-icon-arrow-right"></i></el-col>
+      <el-col :span="10">
+        <el-input size="small" v-model="result.phone"></el-input>
+      </el-col>
+    </el-row>
+    <el-row class="merge-item">
+      <el-col :span="2">邮箱</el-col>
+      <el-col :span="5">{{ from.email || '&nbsp;' }}</el-col>
+      <el-col :span="1"><i class="el-icon-plus"></i></el-col>
+      <el-col :span="5">{{ to.email || '&nbsp;' }}</el-col>
+      <el-col :span="1"><i class="el-icon-arrow-right"></i></el-col>
+      <el-col :span="10">
+        <el-input size="small" v-model="result.email"></el-input>
+      </el-col>
+    </el-row>
+    <el-row class="merge-item">
+      <el-col :span="2">性别</el-col>
+      <el-col :span="5">{{ from.sex == 1 ? '男' : '女' }}</el-col>
+      <el-col :span="1"><i class="el-icon-plus"></i></el-col>
+      <el-col :span="5">{{ to.sex == 1 ? '男' : '女' }}</el-col>
+      <el-col :span="1"><i class="el-icon-arrow-right"></i></el-col>
+      <el-col :span="10">
+        <el-select :style="{ width: '100%' }" size="small" v-model="result.sex">
+          <el-option label="男" value="1"></el-option>
+          <el-option label="女" value="2"></el-option>
+        </el-select>
+      </el-col>
+    </el-row>
+    <el-row class="merge-item">
+      <el-col :span="2">头像</el-col>
+      <el-col :span="5"><img class="avatar" :src="from.avatar" alt=""></el-col>
+      <el-col :span="1"><i class="el-icon-plus"></i></el-col>
+      <el-col :span="5"><img class="avatar" :src="to.avatar" alt=""></el-col>
+      <el-col :span="1"><i class="el-icon-arrow-right"></i></el-col>
+      <el-col :span="10">头像不处理, 两个头像均会被保留</el-col>
+    </el-row>
+    <el-row class="merge-item">
+      <el-col :span="2">欢迎语</el-col>
+      <el-col :span="5">{{ from.words || '&nbsp;' }}</el-col>
+      <el-col :span="1"><i class="el-icon-plus"></i></el-col>
+      <el-col :span="5">{{ to.words || '&nbsp;' }}</el-col>
+      <el-col :span="1"><i class="el-icon-arrow-right"></i></el-col>
+      <el-col :span="10">
+        <el-input size="small" v-model="result.words"></el-input>
+      </el-col>
+    </el-row>
+    <el-row class="merge-item">
+      <el-col :span="2">备注</el-col>
+      <el-col :span="5">{{ from.remark || '&nbsp;' }}</el-col>
+      <el-col :span="1"><i class="el-icon-plus"></i></el-col>
+      <el-col :span="5">{{ to.remark || '&nbsp;' }}</el-col>
+      <el-col :span="1"><i class="el-icon-arrow-right"></i></el-col>
+      <el-col :span="10">
+        <el-input size="small" v-model="result.remark"></el-input>
+      </el-col>
+    </el-row>
+    <div :style="{ margin: '20px auto', width: '300px' }">
+      <el-button @click="handleCancel" :style="{ marginRight: '48px' }">取消</el-button>
+      <el-button type="primary" @click="submit" >确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+
+const { mapActions } = createNamespacedHelpers('person')
+
+export default {
+  name: 'person-merge',
+  props: [
+    'from',
+    'personTypes',
+  ],
+  data () {
+    return {
+      to: {
+        personId: undefined,
+      },
+      result: {},
+    }
+  },
+  computed: {
+  },
+  methods: {
+    ...mapActions([
+      'getPurPerson',
+      'mergePerson',
+    ]),
+    getMergeTo () {
+      this.getPurPerson({ id: this.to.personId }).then(({ detail }) => {
+        this.to = detail
+        this.result = detail
+      })
+    },
+    getTypeName (typeId) {
+      return ((this.personTypes || []).filter(x => x.typeId === typeId)[0] || {}).typeName
+    },
+    handleCancel () {
+      this.$emit('cancel')
+    },
+    submit() {
+      this.mergePerson({ from: this.from.personId, to: this.result }).then(() => {
+        this.$notify.success('合并成功')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.merge-box {
+
+  .merge-head {
+    font-size: 1.2em;
+    font-weight: 500;
+  }
+
+  .merge-item {
+    padding: 12px 0;
+
+    .el-col {
+      text-align: center;
+      line-height: 32px;
+    }
+
+    & + .merge-item {
+      border-top: 1px solid #ebeef5;
+    }
+
+    .avatar {
+      width: 64px;
+      height: 64px;
+    }
+  }
+}
+</style>

src/views/person/visitinglog.vue

           label="来访目的"
         >
         </el-table-column>
+        <el-table-column
+          prop="salesName"
+          label="销售"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="remark"
+          label="备注"
+        >
+        </el-table-column>
         <el-table-column
           fixed="right"
           label="操作"
           <el-form-item label-width="120px" label="来访目的">
             <el-input v-model="logDetail.visitPurpose"></el-input>
           </el-form-item>
+          <el-form-item label-width="120px" label="跟踪销售">
+            <el-select v-model="logDetail.salesId" @change="handleSalesChange" placeholder="请选择">
+              <el-option
+                v-for="sales in salesList"
+                :key="sales.userId"
+                :label="sales.nickname"
+                :value="sales.userId">
+              </el-option>
+            </el-select>
+          </el-form-item>
           <el-form-item label-width="120px" label="备注">
             <el-input type="textarea" rows="10" v-model="logDetail.remark"></el-input>
           </el-form-item>
   props: [
     'person',
     'pageSize',
+    'salesList',
   ],
   data () {
     return {
         total: 0,
         size: 10,
       },
-      logDetail: {}
+      logDetail: {},
     }
   },
   computed: {
       visitingLogs: x => x.visitingLog,
     }),
   },
+  watch: {
+    person () {
+      this.getDataPaged()
+    }
+  },
   created () {
     this.getDataPaged()
   },
     ...mapMemberMutations([
       'resetVisitingLog',
     ]),
+    handleSalesChange (salesId) {
+      this.logDetail.salesName = this.salesList.filter(x => x.userId === salesId)[0].nickname
+    },
     getDataPaged (page = 1) {
       if (!this.person) return
 
       this.editVisibleLog({detail:JSON.stringify(this.logDetail), logId: this.logDetail.logId}).then(() => {
         this.dialogShow = false
 
+        this.visitingLogs = this.visitingLogs.map((log) => {
+          return log.logId === this.logDetail.logId ? { ...this.logDetail } : log
+        })
+
         this.$emit('change', this.logDetail)
       })
     },
     handleEdit (dt) {
-      this.logDetail = dt
+      this.logDetail = { ...dt }
       this.dialogShow = true
     },
     dispatchHik (dt) {
         return ''
       }
 
-      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
+      return dayjs(date).format('YYYY-MM-DD HH:mm')
     },
     pageChange (page) {
       this.$emit("pageChange", page)

src/views/statis/visiting/index.vue

+<template>
+<div>
+  <xm-search></xm-search>
+  <el-card shadow="hover">
+    
+  </el-card>
+  <el-el-pagination></el-el-pagination>
+</div>
+</template>
+
+<script>
+  export default {
+    name: 'sta-visiting',
+    data () {
+      return {
+
+      }
+    },
+    methods: {
+
+    },
+  }
+</script>

src/views/words/edit.vue

     <el-form-item label="欢迎语" prop="words" required>
       <el-input v-model="detail.words"></el-input>
     </el-form-item>
+    <!--
     <el-form-item label="权重" prop="weight" required>
       <el-input type="number" v-model="detail.weight"></el-input>
     </el-form-item>
+    -->
     <el-form-item label="状态" prop="status" required>
       <el-select v-model="detail.status" placeholder="请选择">
         <el-option label="禁用" :value="0"></el-option>
         status: [
           { required: true, message: '请选择状态', trigger: 'change' }
         ],
-        weight: [{
-          type: 'integer',
-          required: true,
-          trigger: 'blur',
-          validator: (rule, value, callback) => {
-            if (value <= 1 && value >= 0.1) {
-              callback()
-            } else {
-              callback(new Error('权重值 0.1 ~ 1, 默认 0.85'))
-            }
-          }
-        }],
+        // weight: [{
+        //   type: 'integer',
+        //   required: true,
+        //   trigger: 'blur',
+        //   validator: (rule, value, callback) => {
+        //     if (value <= 1 && value >= 0.1) {
+        //       callback()
+        //     } else {
+        //       callback(new Error('权重值 0.1 ~ 1, 默认 0.85'))
+        //     }
+        //   }
+        // }],
       }
     }
   },

vue.config.js

   devServer: {
     proxy: {
       '/api': {
-        target: 'http://10.168.2.125:8000',
+        target: 'http://localhost:8080',
         changeOrigin: true,
-        // pathRewrite: {
-        //   '^/api': '/'
-        // },
+        pathRewrite: {
+          '^/api': '/'
+        },
+      },
+      '/api/websocket': {
+        target: 'ws://localhost:8080',
+        changeOrigin: true,
+        ws: true,
+        pathRewrite: {
+          '^/api': '/'
+        },
       },
     }
-  }
+  },
+  transpileDependencies: [
+    'vue-echarts',
+    'resize-detector'
+  ]
 }