发布v1.1版本

vue/src/views/components/icons/element-icons.js

@@ -0,0 +1,3 @@
+const elementIcons = ['platform-eleme', 'eleme', 'delete-solid', 'delete', 's-tools', 'setting', 'user-solid', 'user', 'phone', 'phone-outline', 'more', 'more-outline', 'star-on', 'star-off', 's-goods', 'goods', 'warning', 'warning-outline', 'question', 'info', 'remove', 'circle-plus', 'success', 'error', 'zoom-in', 'zoom-out', 'remove-outline', 'circle-plus-outline', 'circle-check', 'circle-close', 's-help', 'help', 'minus', 'plus', 'check', 'close', 'picture', 'picture-outline', 'picture-outline-round', 'upload', 'upload2', 'download', 'camera-solid', 'camera', 'video-camera-solid', 'video-camera', 'message-solid', 'bell', 's-cooperation', 's-order', 's-platform', 's-fold', 's-unfold', 's-operation', 's-promotion', 's-home', 's-release', 's-ticket', 's-management', 's-open', 's-shop', 's-marketing', 's-flag', 's-comment', 's-finance', 's-claim', 's-custom', 's-opportunity', 's-data', 's-check', 's-grid', 'menu', 'share', 'd-caret', 'caret-left', 'caret-right', 'caret-bottom', 'caret-top', 'bottom-left', 'bottom-right', 'back', 'right', 'bottom', 'top', 'top-left', 'top-right', 'arrow-left', 'arrow-right', 'arrow-down', 'arrow-up', 'd-arrow-left', 'd-arrow-right', 'video-pause', 'video-play', 'refresh', 'refresh-right', 'refresh-left', 'finished', 'sort', 'sort-up', 'sort-down', 'rank', 'loading', 'view', 'c-scale-to-original', 'date', 'edit', 'edit-outline', 'folder', 'folder-opened', 'folder-add', 'folder-remove', 'folder-delete', 'folder-checked', 'tickets', 'document-remove', 'document-delete', 'document-copy', 'document-checked', 'document', 'document-add', 'printer', 'paperclip', 'takeaway-box', 'search', 'monitor', 'attract', 'mobile', 'scissors', 'umbrella', 'headset', 'brush', 'mouse', 'coordinate', 'magic-stick', 'reading', 'data-line', 'data-board', 'pie-chart', 'data-analysis', 'collection-tag', 'film', 'suitcase', 'suitcase-1', 'receiving', 'collection', 'files', 'notebook-1', 'notebook-2', 'toilet-paper', 'office-building', 'school', 'table-lamp', 'house', 'no-smoking', 'smoking', 'shopping-cart-full', 'shopping-cart-1', 'shopping-cart-2', 'shopping-bag-1', 'shopping-bag-2', 'sold-out', 'sell', 'present', 'box', 'bank-card', 'money', 'coin', 'wallet', 'discount', 'price-tag', 'news', 'guide', 'male', 'female', 'thumb', 'cpu', 'link', 'connection', 'open', 'turn-off', 'set-up', 'chat-round', 'chat-line-round', 'chat-square', 'chat-dot-round', 'chat-dot-square', 'chat-line-square', 'message', 'postcard', 'position', 'turn-off-microphone', 'microphone', 'close-notification', 'bangzhu', 'time', 'odometer', 'crop', 'aim', 'switch-button', 'full-screen', 'copy-document', 'mic', 'stopwatch', 'medal-1', 'medal', 'trophy', 'trophy-1', 'first-aid-kit', 'discover', 'place', 'location', 'location-outline', 'location-information', 'add-location', 'delete-location', 'map-location', 'alarm-clock', 'timer', 'watch-1', 'watch', 'lock', 'unlock', 'key', 'service', 'mobile-phone', 'bicycle', 'truck', 'ship', 'basketball', 'football', 'soccer', 'baseball', 'wind-power', 'light-rain', 'lightning', 'heavy-rain', 'sunrise', 'sunrise-1', 'sunset', 'sunny', 'cloudy', 'partly-cloudy', 'cloudy-and-sunny', 'moon', 'moon-night', 'dish', 'dish-1', 'food', 'chicken', 'fork-spoon', 'knife-fork', 'burger', 'tableware', 'sugar', 'dessert', 'ice-cream', 'hot-water', 'water-cup', 'coffee-cup', 'cold-drink', 'goblet', 'goblet-full', 'goblet-square', 'goblet-square-full', 'refrigerator', 'grape', 'watermelon', 'cherry', 'apple', 'pear', 'orange', 'coffee', 'ice-tea', 'ice-drink', 'milk-tea', 'potato-strips', 'lollipop', 'ice-cream-square', 'ice-cream-round']
+
+export default elementIcons

vue/src/views/components/icons/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="icons-container">
+    <aside>
+      <a href="#" target="_blank">Add and use
+      </a>
+    </aside>
+    <el-tabs type="border-card">
+      <el-tab-pane label="Icons">
+        <div v-for="item of svgIcons" :key="item">
+          <el-tooltip placement="top">
+            <div slot="content">
+              {{ generateIconCode(item) }}
+            </div>
+            <div class="icon-item">
+              <svg-icon :icon-class="item" class-name="disabled" />
+              <span>{{ item }}</span>
+            </div>
+          </el-tooltip>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="Element-UI Icons">
+        <div v-for="item of elementIcons" :key="item">
+          <el-tooltip placement="top">
+            <div slot="content">
+              {{ generateElementIconCode(item) }}
+            </div>
+            <div class="icon-item">
+              <i :class="'el-icon-' + item" />
+              <span>{{ item }}</span>
+            </div>
+          </el-tooltip>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import svgIcons from './svg-icons'
+import elementIcons from './element-icons'
+
+export default {
+  name: 'Icons',
+  data() {
+    return {
+      svgIcons,
+      elementIcons
+    }
+  },
+  methods: {
+    generateIconCode(symbol) {
+      return `<svg-icon icon-class="${symbol}" />`
+    },
+    generateElementIconCode(symbol) {
+      return `<i class="el-icon-${symbol}" />`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icons-container {
+  margin: 10px 20px 0;
+  overflow: hidden;
+
+  .icon-item {
+    margin: 20px;
+    height: 85px;
+    text-align: center;
+    width: 100px;
+    float: left;
+    font-size: 30px;
+    color: #24292e;
+    cursor: pointer;
+  }
+
+  span {
+    display: block;
+    font-size: 16px;
+    margin-top: 10px;
+  }
+
+  .disabled {
+    pointer-events: none;
+  }
+}
+</style>

vue/src/views/components/icons/svg-icons.js

@@ -0,0 +1,10 @@
+const req = require.context('../../../assets/icons/svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys()
+
+const re = /\.\/(.*)\.svg/
+
+const svgIcons = requireAll(req).map(i => {
+  return i.match(re)[1]
+})
+
+export default svgIcons

vue/src/views/dashboard/BarChart.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 6000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          }
+        }],
+        series: [{
+          name: 'pageA',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [79, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageB',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [80, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageC',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [30, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>

vue/src/views/dashboard/LineChart.vue

@@ -0,0 +1,135 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: ['expected', 'actual']
+        },
+        series: [{
+          name: 'expected', itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: expectedData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        },
+        {
+          name: 'actual',
+          smooth: true,
+          type: 'line',
+          itemStyle: {
+            normal: {
+              color: '#3888fa',
+              lineStyle: {
+                color: '#3888fa',
+                width: 2
+              },
+              areaStyle: {
+                color: '#f3f8ff'
+              }
+            }
+          },
+          data: actualData,
+          animationDuration: 2800,
+          animationEasing: 'quadraticOut'
+        }]
+      })
+    }
+  }
+}
+</script>

vue/src/views/dashboard/PanelGroup.vue

@@ -0,0 +1,181 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
+        <div class="card-panel-icon-wrapper icon-people">
+          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            访客
+          </div>
+          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('messages')">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon icon-class="message" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            消息
+          </div>
+          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('purchases')">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon icon-class="money" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            金额
+          </div>
+          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
+        <div class="card-panel-icon-wrapper icon-shopping">
+          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            订单
+          </div>
+          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+  components: {
+    CountTo
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.$emit('handleSetLineChartData', type)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>

vue/src/views/dashboard/PieChart.vue

@@ -0,0 +1,79 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+        },
+        series: [
+          {
+            name: 'WEEKLY WRITE ARTICLES',
+            type: 'pie',
+            roseType: 'radius',
+            radius: [15, 95],
+            center: ['50%', '38%'],
+            data: [
+              { value: 320, name: 'Industries' },
+              { value: 240, name: 'Technology' },
+              { value: 149, name: 'Forex' },
+              { value: 100, name: 'Gold' },
+              { value: 59, name: 'Forecasts' }
+            ],
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

vue/src/views/dashboard/RaddarChart.vue

@@ -0,0 +1,116 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 3000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        radar: {
+          radius: '66%',
+          center: ['50%', '42%'],
+          splitNumber: 8,
+          splitArea: {
+            areaStyle: {
+              color: 'rgba(127,95,132,.3)',
+              opacity: 1,
+              shadowBlur: 45,
+              shadowColor: 'rgba(0,0,0,.5)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 15
+            }
+          },
+          indicator: [
+            { name: 'Sales', max: 10000 },
+            { name: 'Administration', max: 20000 },
+            { name: 'Information Techology', max: 20000 },
+            { name: 'Customer Support', max: 20000 },
+            { name: 'Development', max: 20000 },
+            { name: 'Marketing', max: 20000 }
+          ]
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+        },
+        series: [{
+          type: 'radar',
+          symbolSize: 0,
+          areaStyle: {
+            normal: {
+              shadowBlur: 13,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1
+            }
+          },
+          data: [
+            {
+              value: [5000, 7000, 12000, 11000, 15000, 14000],
+              name: 'Allocated Budget'
+            },
+            {
+              value: [4000, 9000, 15000, 15000, 13000, 11000],
+              name: 'Expected Spending'
+            },
+            {
+              value: [5500, 11000, 12000, 15000, 12000, 12000],
+              name: 'Actual Spending'
+            }
+          ],
+          animationDuration: animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>

vue/src/views/dashboard/mixins/resize.js

@@ -0,0 +1,56 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.initListener()
+  },
+  activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const { chart } = this
+      chart && chart.resize()
+    }
+  }
+}

vue/src/views/error/401.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="errPage-container">
+    <el-button icon="arrow-left" class="pan-back-btn" @click="back">
+      返回
+    </el-button>
+    <el-row>
+      <el-col :span="12">
+        <h1 class="text-jumbo text-ginormous">
+          401错误!
+        </h1>
+        <h2>您没有访问权限！</h2>
+        <h6>对不起，您没有访问权限，请不要进行非法操作！您可以返回主页面</h6>
+        <ul class="list-unstyled">
+          <li class="link-type">
+            <router-link to="/">
+              回首页
+            </router-link>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :span="12">
+        <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import errGif from '@/assets/401_images/401.gif'
+
+export default {
+  name: 'Page401',
+  data() {
+    return {
+      errGif: errGif + '?' + +new Date()
+    }
+  },
+  methods: {
+    back() {
+      if (this.$route.query.noGoBack) {
+        this.$router.push({ path: '/' })
+      } else {
+        this.$router.go(-1)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .errPage-container {
+    width: 800px;
+    max-width: 100%;
+    margin: 100px auto;
+    .pan-back-btn {
+      background: #008489;
+      color: #fff;
+      border: none!important;
+    }
+    .pan-gif {
+      margin: 0 auto;
+      display: block;
+    }
+    .pan-img {
+      display: block;
+      margin: 0 auto;
+      width: 100%;
+    }
+    .text-jumbo {
+      font-size: 60px;
+      font-weight: 700;
+      color: #484848;
+    }
+    .list-unstyled {
+      font-size: 14px;
+      li {
+        padding-bottom: 5px;
+      }
+      a {
+        color: #008489;
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+</style>

vue/src/views/error/404.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">
+          404错误!
+        </div>
+        <div class="bullshit__headline">
+          {{ message }}
+        </div>
+        <div class="bullshit__info">
+          对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
+        </div>
+        <router-link to="/" class="bullshit__return-home">
+          返回首页
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Page404',
+  computed: {
+    message() {
+      return '找不到网页！'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

vue/src/views/index.vue

@@ -0,0 +1,817 @@
+<template>
+<div class="app-container home">
+    <el-row :gutter="40">
+        <el-col :span="14">
+            <el-card style="margin:-10px;" shadow="hover" body-style="background-color:#F8F8F8;">
+                <div ref="map" style="height:650px;margin:-10px;margin-top:-5px;"></div>
+            </el-card>
+        </el-col>
+
+        <el-col :span="10">
+            <el-card style="margin:-10px;" shadow="hover">
+                <h3 style="font-weight:bold">Mqtt 统计指标</h3>
+                <el-row :gutter="40" class="panel-group">
+                    <el-col :span="12" class="card-panel-col">
+                        <div class="card-panel">
+                            <div class="card-panel-icon-wrapper icon-message">
+                                <svg-icon icon-class="guide" class-name="card-panel-icon" />
+                            </div>
+                            <div class="card-panel-description">
+                                <div class="card-panel-text">
+                                    发送字节
+                                </div>
+                                <count-to :start-val="0" :end-val="this.static['bytes.sent']" :duration="3000" class="card-panel-num" />
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="12" class="card-panel-col">
+                        <div class="card-panel">
+                            <div class="card-panel-icon-wrapper icon-shopping">
+                                <svg-icon icon-class="receiver" class-name="card-panel-icon" />
+                            </div>
+                            <div class="card-panel-description">
+                                <div class="card-panel-text">
+                                    接收字节
+                                </div>
+                                <count-to :start-val="0" :end-val="this.static['bytes.received']" :duration="3000" class="card-panel-num" />
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="12" class="card-panel-col">
+                        <div class="card-panel">
+                            <div class="card-panel-icon-wrapper icon-message">
+                                <svg-icon icon-class="authenticate" class-name="card-panel-icon" />
+                            </div>
+                            <div class="card-panel-description">
+                                <div class="card-panel-text">
+                                    认证次数
+                                </div>
+                                <count-to :start-val="0" :end-val="this.static['client.authenticate']" :duration="1000" class="card-panel-num" />
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="12" class="card-panel-col">
+                        <div class="card-panel">
+                            <div class="card-panel-icon-wrapper icon-shopping">
+                                <svg-icon icon-class="connect" class-name="card-panel-icon" />
+                            </div>
+                            <div class="card-panel-description">
+                                <div class="card-panel-text">
+                                    连接次数
+                                </div>
+                                <count-to :start-val="0" :end-val="this.static['client.connected']" :duration="1000" class="card-panel-num" />
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="12" class="card-panel-col">
+                        <div class="card-panel">
+                            <div class="card-panel-icon-wrapper icon-message">
+                                <svg-icon icon-class="subscribe1" class-name="card-panel-icon" />
+                            </div>
+                            <div class="card-panel-description">
+                                <div class="card-panel-text">
+                                    订阅次数
+                                </div>
+                                <count-to :start-val="0" :end-val="this.static['client.subscribe']" :duration="2000" class="card-panel-num" />
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="12" class="card-panel-col">
+                        <div class="card-panel">
+                            <div class="card-panel-icon-wrapper icon-shopping">
+                                <svg-icon icon-class="message" class-name="card-panel-icon" />
+                            </div>
+                            <div class="card-panel-description">
+                                <div class="card-panel-text">
+                                    接收消息
+                                </div>
+                                <count-to :start-val="0" :end-val="this.static['messages.received']" :duration="2000" class="card-panel-num" />
+                            </div>
+                        </div>
+                    </el-col>
+                </el-row>
+            </el-card>
+            <el-card style="margin:-10px;margin-top:20px;" shadow="hover">
+                <div ref="statsChart" style="height:296px;"></div>
+            </el-card>
+        </el-col>
+
+    </el-row>
+
+    <el-row :gutter="40" style="margin-top:80px;">
+        <el-col :span="1">
+            <el-card style="margin:-10px;height:218px;margin-right:-31px;padding-top:35px;text-align:center;font-weight:bold;" shadow="none">
+                服<br />务<br />器<br />状<br />态
+            </el-card>
+        </el-col>
+        <el-col :span="5">
+            <el-card style="margin:-10px;height:218px;" shadow="hover">
+                <el-descriptions :column="1">
+                    <el-descriptions-item label="服务器名称"><strong>{{server.sys.computerName}}</strong></el-descriptions-item>
+                    <el-descriptions-item label="服务器IP"><strong>{{server.sys.computerIp}}</strong></el-descriptions-item>
+                    <el-descriptions-item label="操作系统"><strong>{{server.sys.osName}}</strong></el-descriptions-item>
+                    <el-descriptions-item label="系统架构"><strong>{{server.sys.osArch}}</strong></el-descriptions-item>
+                    <el-descriptions-item label="CPU核心"><strong>{{server.cpu.cpuNum}}核</strong></el-descriptions-item>
+                    <el-descriptions-item label="总内存"><strong>{{server.mem.total}}G</strong></el-descriptions-item>
+                </el-descriptions>
+            </el-card>
+        </el-col>
+        <el-col :span="4">
+            <el-card style="margin:-10px;" shadow="hover">
+                <div ref="pieCpu" style="height:200px;margin-bottom:-20px;"></div>
+            </el-card>
+        </el-col>
+        <el-col :span="4">
+            <el-card style="margin:-10px;" shadow="hover">
+                <div ref="pieMemery" style="height:200px;margin-bottom:-20px;"></div>
+            </el-card>
+        </el-col>
+        <el-col :span="4">
+            <el-card style="margin:-10px;" shadow="hover">
+                <div ref="pieDisk" style="height:200px;margin-bottom:-20px;"></div>
+            </el-card>
+        </el-col>
+        <el-col :span="6">
+            <el-card style="margin:-10px;height:218px;" shadow="hover">
+                <el-descriptions :column="1">
+                    <el-descriptions-item label="Java名称"><strong>{{server.jvm.name}}</strong></el-descriptions-item>
+                    <el-descriptions-item label="启动时间"><strong>{{ server.jvm.startTime }}</strong></el-descriptions-item>
+                    <el-descriptions-item label="Java版本"><strong>{{ server.jvm.version }}</strong></el-descriptions-item>
+                    <el-descriptions-item label="运行时长"><strong>{{ server.jvm.runTime }}</strong></el-descriptions-item>
+                    <el-descriptions-item label="占用内存"><strong>{{server.jvm.used}}M</strong></el-descriptions-item>
+                    <el-descriptions-item label="JVM总内存"><strong>{{server.jvm.total}}M</strong></el-descriptions-item>
+                </el-descriptions>
+            </el-card>
+        </el-col>
+    </el-row>
+
+    <div style="margin:-21px;margin-top:100px;bottom:0;border:1px solid #ccc;padding:10px;margin-bottom:-21px;">
+        <div>
+            <el-link href="http://wumei.live" target="_blank" type="primary" style="margin-left:20px;">开源生活物联网平台 >></el-link>
+            <el-link href="https://github.com/kerwincui/wumei-smart" target="_blank" type="danger" style="margin-left:30px;">Github源码 >></el-link>
+            <el-link href="https://gitee.com/kerwincui/wumei-smart" target="_blank" type="success" style="margin-left:30px;">码云源码 >></el-link>
+        </div>
+    </div>
+
+</div>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+import * as echarts from 'echarts';
+require('echarts/theme/macarons') // echarts theme
+import {
+    loadBMap
+} from './iot/map.js'
+//安装的是echarts完整包，里面包含百度地图扩展，路径为 echarts/extension/bmap/bmap.js，将其引入
+//ECharts的百度地图扩展，可以在百度地图上展现点图，线图，热力图等可视化
+require('echarts/extension/bmap/bmap')
+import {
+    getServer
+} from "@/api/monitor/server";
+import {
+    getMqttStats,
+    statisticMqtt
+} from "@/api/iot/emqx";
+import {
+    listAllDeviceShort,
+} from "@/api/iot/device";
+
+export default {
+    name: "Index",
+    components: {
+        CountTo
+    },
+    data() {
+        return {
+            // 设备列表
+            deviceList: [],
+            // 设备总数
+            deviceCount:0,
+            // emqx状态数据
+            stats: {},
+            // emqx统计信息
+            static: {},
+            // 版本号
+            version: "3.8.0",
+            // 服务器信息
+            server: {
+                jvm: {
+                    name: "",
+                    version: "",
+                    startTime: "",
+                    runTime: "",
+                    used: "",
+                    total: 100
+                },
+                sys: {
+                    computerName: "",
+                    osName: "",
+                    computerIp: "",
+                    osArch: ""
+                },
+                cpu: {
+                    cpuNum: 1
+                },
+                mem: {
+                    total: 2
+                }
+            }
+        };
+    },
+    created() {
+        // this.deviceList = [{
+        //         id: 21,
+        //         name: '海门',
+        //         value: 9,
+        //         long: 121.15,
+        //         lat: 31.89,
+        //         address: "海门",
+        //         product: "测试产品",
+        //         version: 1.0,
+        //         status: 1,
+        //     },
+        //     {
+        //         id: 21,
+        //         name: '鄂尔多斯',
+        //         value: 12,
+        //         long: 109.781327,
+        //         lat: 39.608266,
+        //         address: "海门",
+        //         product: "测试产品",
+        //         version: 2.0,
+        //         status: 2
+        //     },
+        //     {
+        //         id: 21,
+        //         name: '招远',
+        //         value: 12,
+        //         long: 120.38,
+        //         lat: 37.35,
+        //         address: "海门",
+        //         product: "测试产品",
+        //         version: 1.0,
+        //         status: 3
+        //     },
+        //     {
+        //         id: 21,
+        //         name: '海口',
+        //         value: 12,
+        //         long: 110.38,
+        //         lat: 20.35,
+        //         address: "测试",
+        //         product: "测试产品",
+        //         version: 1.0,
+        //         status: 4
+        //     }
+        // ];
+        this.getAllDevice();
+        this.getServer();
+        this.getMqttStats();
+        this.statisticMqtt();
+
+    },
+    methods: {
+        /**查询所有设备 */
+        getAllDevice() {
+            listAllDeviceShort().then(response => {
+                this.deviceList = response.rows;
+                this.deviceCount=response.total;
+                this.$nextTick(() => {
+                    loadBMap().then(() => {
+                        this.getmap();
+                    });
+                })
+            })
+        },
+        /** 查询emqx统计*/
+        statisticMqtt() {
+            statisticMqtt().then(response => {
+                this.static = response.data.data[0].metrics;
+            })
+        },
+        /** 查询emqx状态数据*/
+        getMqttStats() {
+            getMqttStats().then(response => {
+                this.stats = response.data.data[0].stats;
+                this.drawStats();
+            })
+        },
+        /** 查询服务器信息 */
+        getServer() {
+            getServer().then(response => {
+                this.server = response.data;
+                this.$nextTick(() => {
+                    this.drawPieCpu();
+                    this.drawPieMemery();
+                    this.drawPieDisk();
+                })
+            });
+        },
+
+        /** 地图 */
+        getmap() {
+            var myChart = echarts.init(this.$refs.map);
+            var option;
+
+            // 格式化数据
+            let convertData = function (data, status) {
+                var res = [];
+                for (var i = 0; i < data.length; i++) {
+                    var geoCoord = [data[i].longitude, data[i].latitude];
+                    if (geoCoord && data[i].status == status) {
+                        res.push({
+                            name: data[i].deviceName,
+                            value: geoCoord,
+                            serialNumber: data[i].serialNumber,
+                            status: data[i].status,
+                            isShadow: data[i].isShadow,
+                            firmwareVersion: data[i].firmwareVersion,
+                            networkAddress: data[i].networkAddress,
+                            productName: data[i].productName,
+                            activeTime: data[i].activeTime,
+                        });
+                    }
+                }
+                return res;
+            };
+            option = {
+                title: {
+                    text: '设备分布和状态（数量 '+this.deviceCount+'）',
+                    subtext: 'wumei-smart open source living iot platform',
+                    sublink: 'https://iot.wumei.live',
+                    target: "_blank",
+                    textStyle: {
+                        color: '#333',
+                        textBorderColor: '#fff',
+                        textBorderWidth: 10,
+                    },
+                    top: 10,
+                    left: 'center'
+                },
+                tooltip: {
+                    trigger: 'item',
+                    formatter: function (params) {
+                        var htmlStr = '<div style="padding:5px;line-height:28px;">';
+                        htmlStr += "设备名称： <span style='color:#409EFF'>" + params.data.name + "</span><br />";
+                        htmlStr += "设备状态： ";
+                        if (params.data.status == 1) {
+                            htmlStr += "<span style='color:#E6A23C'>未激活</span>" + "<br />";
+                        } else if (params.data.status == 2) {
+                            htmlStr += "<span style='color:#F56C6C'>禁用</span>" + "<br />";
+                        } else if (params.data.status == 3) {
+                            htmlStr += "<span style='color:#67C23A'>在线</span>" + "<br />";
+                        } else if (params.data.status == 4) {
+                            htmlStr += "<span style='color:#909399'>离线</span>" + "<br />";
+                        }
+                        if (params.data.isShadow == 1) {
+                            htmlStr += "设备影子： " + "<span style='color:#67C23A'>启用</span>" + "<br />";
+                        } else {
+                            htmlStr += "设备影子： " + "<span style='color:#909399'>未启用</span>" + "<br />";
+                        }
+                        htmlStr += "产品名称： " + params.data.productName + "<br />";
+                        htmlStr += "固件版本： Version " + params.data.firmwareVersion + "<br />";
+                        htmlStr += "激活时间： " + params.data.activeTime + "<br />";
+                        htmlStr += "所在地址： " + params.data.networkAddress + "<br />";
+                        htmlStr += '</div>';
+                        return htmlStr;
+                    }
+                },
+                bmap: {
+                    center: [133, 37],
+                    zoom: 5,
+                    roam: true,
+                    mapStyle: {
+                        styleJson: [{
+                                featureType: 'water',
+                                elementType: 'all',
+                                stylers: {
+                                    color: '#a0cfff'
+                                }
+                            },
+                            {
+                                featureType: 'land',
+                                elementType: 'all',
+                                stylers: {
+                                    color: '#FFFFFF'
+                                }
+                            },
+                            {
+                                featureType: 'railway',
+                                elementType: 'all',
+                                stylers: {
+                                    visibility: 'off'
+                                }
+                            },
+                            {
+                                featureType: 'highway',
+                                elementType: 'all',
+                                stylers: {
+                                    color: '#fdfdfd'
+                                }
+                            },
+                            {
+                                featureType: 'highway',
+                                elementType: 'labels',
+                                stylers: {
+                                    visibility: 'off'
+                                }
+                            },
+                            {
+                                featureType: 'arterial',
+                                elementType: 'geometry',
+                                stylers: {
+                                    color: '#fefefe'
+                                }
+                            },
+                            {
+                                featureType: 'arterial',
+                                elementType: 'geometry.fill',
+                                stylers: {
+                                    color: '#fefefe'
+                                }
+                            },
+                            {
+                                featureType: 'poi',
+                                elementType: 'all',
+                                stylers: {
+                                    visibility: 'off'
+                                }
+                            },
+                            {
+                                featureType: 'green',
+                                elementType: 'all',
+                                stylers: {
+                                    visibility: 'off'
+                                }
+                            },
+                            {
+                                featureType: 'subway',
+                                elementType: 'all',
+                                stylers: {
+                                    visibility: 'off'
+                                }
+                            },
+                            {
+                                featureType: 'manmade',
+                                elementType: 'all',
+                                stylers: {
+                                    color: '#d1d1d1'
+                                }
+                            },
+                            {
+                                featureType: 'local',
+                                elementType: 'all',
+                                stylers: {
+                                    color: '#d1d1d1'
+                                }
+                            },
+                            {
+                                featureType: 'arterial',
+                                elementType: 'labels',
+                                stylers: {
+                                    visibility: 'off'
+                                }
+                            },
+                            {
+                                featureType: 'boundary',
+                                elementType: 'all',
+                                stylers: {
+                                    color: '#999999'
+                                }
+                            },
+                            {
+                                featureType: 'building',
+                                elementType: 'all',
+                                stylers: {
+                                    color: '#d1d1d1'
+                                }
+                            },
+                            {
+                                featureType: 'label',
+                                elementType: 'labels.text.fill',
+                                stylers: {
+                                    color: '#999999'
+                                }
+                            }
+                        ]
+                    }
+                },
+                series: [{
+                        type: 'scatter',
+                        coordinateSystem: 'bmap',
+                        data: convertData(this.deviceList, 1),
+                        symbolSize: 15,
+                        itemStyle: {
+                            color: '#E6A23C'
+                        }
+                    },
+                    {
+                        type: 'scatter',
+                        coordinateSystem: 'bmap',
+                        data: convertData(this.deviceList, 2),
+                        symbolSize: 15,
+                        itemStyle: {
+                            color: '#F56C6C'
+                        }
+                    }, {
+                        type: 'scatter',
+                        coordinateSystem: 'bmap',
+                        data: convertData(this.deviceList, 4),
+                        symbolSize: 15,
+                        itemStyle: {
+                            color: '#909399'
+                        }
+                    }, {
+                        type: 'effectScatter',
+                        coordinateSystem: 'bmap',
+                        data: convertData(this.deviceList, 3),
+                        symbolSize: 15,
+                        showEffectOn: 'render',
+                        rippleEffect: {
+                            brushType: 'stroke',
+                            scale: 5
+                        },
+                        label: {
+                            formatter: '{b}',
+                            position: 'right',
+                            show: false
+                        },
+                        itemStyle: {
+                            color: '#67C23A',
+                            shadowBlur: 100,
+                            shadowColor: '#333'
+                        },
+                        zlevel: 1
+                    }
+                ]
+            };
+
+            option && myChart.setOption(option);
+
+        },
+        /** EMQX状态统计 */
+        drawStats() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = echarts.init(this.$refs.statsChart);
+            var option;
+
+            option = {
+                title: {
+                    text: 'Mqtt 状态数据'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                legend: {},
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'value',
+                    boundaryGap: [0, 0.01]
+                },
+                yAxis: {
+                    type: 'category',
+                    axisLabel: {
+                        fontSize: 14
+                    },
+                    data: ['连接数量', '会话数量', '主题数量', '订阅数量', '路由数量', '保留消息']
+                },
+                series: [{
+                        name: '历史最大数',
+                        type: 'bar',
+                        data: [this.stats["connections.max"], this.stats["sessions.max"], this.stats["topics.max"], this.stats["subscribers.max"], this.stats["routes.max"], this.stats["retained.max"]],
+                        itemStyle: {
+                            color: '#409EFF'
+                        }
+                    },
+                    {
+                        name: '当前数量',
+                        type: 'bar',
+                        data: [this.stats["connections.count"], this.stats["sessions.count"], this.stats["topics.count"], this.stats["subscribers.count"], this.stats["routes.count"], this.stats["retained.count"]],
+                        itemStyle: {
+                            color: '#67C23A'
+                        }
+                    }
+                ]
+            };
+
+            option && myChart.setOption(option);
+
+        },
+        drawPieCpu() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = echarts.init(this.$refs.pieCpu);
+            var option;
+            option = {
+                title: {
+                    text: 'CPU使用率 %',
+                    left: 'left'
+                },
+                tooltip: {
+                    trigger: 'item',
+                },
+                legend: {
+                    orient: 'vertical',
+                    left: 'right'
+                },
+                color: ['#E6A23C', '#F56C6C', '#DDD'],
+                series: [{
+                    name: 'CPU使用率 %',
+                    type: 'pie',
+                    radius: '55%',
+                    label: {
+                        show: false
+                    },
+                    labelLine: {
+                        normal: {
+                            position: "inner",
+                            show: false
+                        }
+                    },
+                    data: [{
+                            value: this.server.cpu.used,
+                            name: '用户'
+                        },
+                        {
+                            value: this.server.cpu.sys,
+                            name: '系统'
+                        },
+                        {
+                            value: this.server.cpu.free,
+                            name: '空闲'
+                        }
+                    ],
+                }]
+            };
+            option && myChart.setOption(option);
+        },
+        drawPieMemery() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = echarts.init(this.$refs.pieMemery);
+            var option;
+            option = {
+                title: {
+                    text: '内存使用 G',
+                    left: 'left'
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    left: 'right'
+                },
+                color: ['#F56C6C', '#DDD'],
+                series: [{
+                    name: '内存使用率 G',
+                    type: 'pie',
+                    radius: '55%',
+                    label: {
+                        show: false
+                    },
+                    labelLine: {
+                        normal: {
+                            position: "inner",
+                            show: false
+                        }
+                    },
+                    data: [{
+                            value: this.server.mem.used,
+                            name: '已用'
+                        },
+                        {
+                            value: this.server.mem.free,
+                            name: '剩余'
+                        }
+                    ]
+                }]
+            };
+            option && myChart.setOption(option);
+        },
+        drawPieDisk() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = echarts.init(this.$refs.pieDisk);
+            var option;
+            let one = this.server.sysFiles[0].used.replace("GB", "");
+            let two = this.server.sysFiles[0].free.replace("GB", "");;
+            option = {
+                title: {
+                    text: 'C盘状态 G',
+                    left: 'left'
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    left: 'right'
+                },
+                color: ['#F56C6C', '#DDD'],
+                series: [{
+                    name: '磁盘状态 G',
+                    type: 'pie',
+                    radius: '55%',
+                    label: {
+                        show: false
+                    },
+                    labelLine: {
+                        normal: {
+                            position: "inner",
+                            show: false
+                        }
+                    },
+                    data: [{
+                            value: one,
+                            name: '已用'
+                        },
+                        {
+                            value: two,
+                            name: '可用'
+                        }
+                    ]
+                }]
+            };
+            option && myChart.setOption(option);
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+    .card-panel-col {
+        margin-bottom: 10px;
+    }
+
+    .card-panel {
+        height: 68px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        color: #666;
+        box-shadow: 2px 2px 10px rgba(0, 0, 0, .1);
+
+        &:hover {
+            .card-panel-icon-wrapper {
+                color: #fff;
+            }
+
+            .icon-message {
+                background: #36a3f7;
+            }
+
+            .icon-shopping {
+                background: #34bfa3
+            }
+        }
+
+        .icon-message {
+            color: #36a3f7;
+        }
+
+        .icon-shopping {
+            color: #34bfa3
+        }
+
+        .card-panel-icon-wrapper {
+            float: left;
+            margin: 10px;
+            padding: 10px;
+            transition: all 0.38s ease-out;
+            border-radius: 6px;
+        }
+
+        .card-panel-icon {
+            float: left;
+            font-size: 32px;
+        }
+
+        .card-panel-description {
+            float: right;
+            font-weight: bold;
+            margin: 15px;
+            margin-left: 0px;
+
+            .card-panel-text {
+                line-height: 14px;
+                color: rgba(0, 0, 0, 0.45);
+                font-size: 14px;
+                margin-bottom: 12px;
+                text-align: right;
+            }
+
+            .card-panel-num {
+                font-size: 18px;
+            }
+        }
+    }
+}
+</style>

vue/src/views/index_v1.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="dashboard-editor-container">
+
+    <panel-group @handleSetLineChartData="handleSetLineChartData" />
+
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+      <line-chart :chart-data="lineChartData" />
+    </el-row>
+
+    <el-row :gutter="32">
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <raddar-chart />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <pie-chart />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <bar-chart />
+        </div>
+      </el-col>
+    </el-row>
+
+    
+  </div>
+</template>
+
+<script>
+import PanelGroup from './dashboard/PanelGroup'
+import LineChart from './dashboard/LineChart'
+import RaddarChart from './dashboard/RaddarChart'
+import PieChart from './dashboard/PieChart'
+import BarChart from './dashboard/BarChart'
+
+const lineChartData = {
+  newVisitis: {
+    expectedData: [100, 120, 161, 134, 105, 160, 165],
+    actualData: [120, 82, 91, 154, 162, 140, 145]
+  },
+  messages: {
+    expectedData: [200, 192, 120, 144, 160, 130, 140],
+    actualData: [180, 160, 151, 106, 145, 150, 130]
+  },
+  purchases: {
+    expectedData: [80, 100, 121, 104, 105, 90, 100],
+    actualData: [120, 90, 100, 138, 142, 130, 130]
+  },
+  shoppings: {
+    expectedData: [130, 140, 141, 142, 145, 150, 160],
+    actualData: [120, 82, 91, 154, 162, 140, 130]
+  }
+}
+
+export default {
+  name: 'Index',
+  components: {
+    PanelGroup,
+    LineChart,
+    RaddarChart,
+    PieChart,
+    BarChart
+  },
+  data() {
+    return {
+      lineChartData: lineChartData.newVisitis
+    }
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
+}
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
+</style>

vue/src/views/iot/alertLog/index.vue

@@ -0,0 +1,266 @@
+<template>
+<div style="padding:6px;">
+    <el-card v-show="showSearch" style="margin-bottom:6px;">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" style="margin-bottom:-20px;">
+            <el-form-item label="告警名称" prop="alertName">
+                <el-input v-model="queryParams.alertName" placeholder="请输入告警名称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="告警级别" prop="alertLevel">
+                <el-select v-model="queryParams.alertLevel" placeholder="请选择告警级别" clearable size="small">
+                    <el-option v-for="dict in dict.type.iot_alert_level" :key="dict.value" :label="dict.label" :value="dict.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="处理状态" prop="status">
+                <el-select v-model="queryParams.status" placeholder="请选择处理状态" clearable size="small">
+                    <el-option v-for="dict in dict.type.iot_process_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+
+    <el-card style="padding-bottom:100px;">
+        <el-table v-loading="loading" :data="alertLogList" @selection-change="handleSelectionChange" border>
+            <el-table-column label="告警名称" align="center" prop="alertName" />
+            <el-table-column label="告警级别" align="center" prop="alertLevel">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.iot_alert_level" :value="scope.row.alertLevel" />
+                </template>
+            </el-table-column>
+            <el-table-column label="处理状态" align="center" prop="status">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.iot_process_status" :value="scope.row.status" />
+                </template>
+            </el-table-column>
+            <el-table-column label="产品ID" align="center" prop="productId" />
+            <el-table-column label="产品名称" align="center" prop="productName" />
+            <el-table-column label="设备ID" align="center" prop="deviceId" />
+            <el-table-column label="设备名称" align="center" prop="deviceName" />
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+                <template slot-scope="scope">
+                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="处理结果" align="center" prop="remark" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:alertLog:edit']">处理</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+        <!-- 添加或修改设备告警对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                <el-form-item label="处理结果" prop="remark">
+                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" rows="8" />
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+    </el-card>
+</div>
+</template>
+
+<script>
+import {
+    listAlertLog,
+    getAlertLog,
+    delAlertLog,
+    addAlertLog,
+    updateAlertLog
+} from "@/api/iot/alertLog";
+
+export default {
+    name: "AlertLog",
+    dicts: ['iot_alert_level', 'iot_process_status'],
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 设备告警表格数据
+            alertLogList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                alertName: null,
+                alertLevel: null,
+                status: null,
+                productId: null,
+                productName: null,
+                deviceId: null,
+                deviceName: null,
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                alertName: [{
+                    required: true,
+                    message: "告警名称不能为空",
+                    trigger: "blur"
+                }],
+                alertLevel: [{
+                    required: true,
+                    message: "告警级别不能为空",
+                    trigger: "change"
+                }],
+                status: [{
+                    required: true,
+                    message: "处理状态(0=不需要处理,1=未处理,2=已处理)不能为空",
+                    trigger: "change"
+                }],
+                productId: [{
+                    required: true,
+                    message: "产品ID不能为空",
+                    trigger: "blur"
+                }],
+                productName: [{
+                    required: true,
+                    message: "产品名称不能为空",
+                    trigger: "blur"
+                }],
+                deviceId: [{
+                    required: true,
+                    message: "设备ID不能为空",
+                    trigger: "blur"
+                }],
+                deviceName: [{
+                    required: true,
+                    message: "设备名称不能为空",
+                    trigger: "blur"
+                }],
+            }
+        };
+    },
+    created() {
+        this.getList();
+    },
+    methods: {
+        /** 查询设备告警列表 */
+        getList() {
+            this.loading = true;
+            listAlertLog(this.queryParams).then(response => {
+                this.alertLogList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                alertLogId: null,
+                alertName: null,
+                alertLevel: null,
+                status: null,
+                productId: null,
+                productName: null,
+                deviceId: null,
+                deviceName: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null
+            };
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map(item => item.alertLogId)
+            this.single = selection.length !== 1
+            this.multiple = !selection.length
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "添加设备告警";
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const alertLogId = row.alertLogId || this.ids
+            getAlertLog(alertLogId).then(response => {
+                this.form = response.data;
+                this.open = true;
+                this.title = "修改设备告警";
+            });
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.form.alertLogId != null) {
+                        updateAlertLog(this.form).then(response => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addAlertLog(this.form).then(response => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const alertLogIds = row.alertLogId || this.ids;
+            this.$modal.confirm('是否确认删除设备告警编号为"' + alertLogIds + '"的数据项？').then(function () {
+                return delAlertLog(alertLogIds);
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download('iot/alertLog/export', {
+                ...this.queryParams
+            }, `alertLog_${new Date().getTime()}.xlsx`)
+        }
+    }
+};
+</script>

vue/src/views/iot/category/index.vue

@@ -0,0 +1,262 @@
+<template>
+<div style="padding:6px;">
+    <el-card v-show="showSearch" style="margin-bottom:6px;">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
+            <el-form-item label="分类名称" prop="categoryName">
+                <el-input v-model="queryParams.categoryName" placeholder="请输入产品分类名称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="系统定义" prop="isSys">
+                <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
+                    <el-option v-for="dict in dict.type.iot_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+
+    <el-card style="padding-bottom:100px;">
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:category:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:category:edit']">修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['iot:category:remove']">删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['iot:category:export']">导出</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange" border>
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="产品分类名称" align="center" prop="categoryName" />
+            <el-table-column label="备注" align="left" prop="remark" min-width="150" />
+            <el-table-column label="系统定义" align="center" prop="isSys">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isSys" />
+                </template>
+            </el-table-column>
+            <el-table-column label="显示顺序" align="center" prop="orderNum" />
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+                <template slot-scope="scope">
+                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
+                <template slot-scope="scope">
+                    <el-button size="small" type="primary" style="padding:5px;" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:category:edit']">修改</el-button>
+                    <el-button size="small" type="danger" style="padding:5px;" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:category:remove']">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+        <!-- 添加或修改产品分类对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                <el-form-item label="分类名称" prop="categoryName">
+                    <el-input v-model="form.categoryName" placeholder="请输入产品分类名称" />
+                </el-form-item>
+                <el-form-item label="显示顺序" prop="orderNum">
+                    <el-input v-model="form.orderNum" type="number" placeholder="请输入显示顺序" />
+                </el-form-item>
+                <el-form-item label="备注" prop="remark">
+                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+    </el-card>
+</div>
+</template>
+
+<script>
+import {
+    listCategory,
+    getCategory,
+    delCategory,
+    addCategory,
+    updateCategory
+} from "@/api/iot/category";
+
+export default {
+    name: "Category",
+    dicts: ["iot_yes_no"],
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 产品分类表格数据
+            categoryList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                categoryName: null,
+                tenantName: null,
+                isSys: null,
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                categoryName: [{
+                    required: true,
+                    message: "产品分类名称不能为空",
+                    trigger: "blur"
+                }],
+                tenantId: [{
+                    required: true,
+                    message: "租户ID不能为空",
+                    trigger: "blur"
+                }],
+                tenantName: [{
+                    required: true,
+                    message: "租户名称不能为空",
+                    trigger: "blur"
+                }],
+                isSys: [{
+                    required: true,
+                    message: "是否系统通用不能为空",
+                    trigger: "blur"
+                }],
+            }
+        };
+    },
+    created() {
+        this.getList();
+    },
+    methods: {
+        /** 查询产品分类列表 */
+        getList() {
+            this.loading = true;
+            listCategory(this.queryParams).then(response => {
+                this.categoryList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                categoryId: null,
+                categoryName: null,
+                tenantId: null,
+                tenantName: null,
+                isSys: null,
+                parentId: null,
+                orderNum: null,
+                delFlag: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null
+            };
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map(item => item.categoryId)
+            this.single = selection.length !== 1
+            this.multiple = !selection.length
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "添加产品分类";
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const categoryId = row.categoryId || this.ids
+            getCategory(categoryId).then(response => {
+                this.form = response.data;
+                this.open = true;
+                this.title = "修改产品分类";
+            });
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.form.categoryId != null) {
+                        updateCategory(this.form).then(response => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addCategory(this.form).then(response => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const categoryIds = row.categoryId || this.ids;
+            let msg="";
+            this.$modal.confirm('是否确认删除产品分类编号为"' + categoryIds + '"的数据项？').then(function () {
+                return delCategory(categoryIds).then(response => {
+                    msg=response.msg;
+                });
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess(msg);
+            }).catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download('iot/category/export', {
+                ...this.queryParams
+            }, `category_${new Date().getTime()}.xlsx`)
+        }
+    }
+};
+</script>

vue/src/views/iot/clientDetails/index.vue

@@ -0,0 +1,306 @@
+<template>
+<div style="padding: 6px">
+    <el-card v-show="showSearch" style="margin-bottom: 6px">
+    <div style="height:50px; color:#F56C6C;margin-left:20px;">该功能下个版本发布</div>
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" style="margin-bottom:-20px;">
+            <el-form-item label="客户端ID" prop="clientId">
+                <el-input v-model="queryParams.clientId" placeholder="请输入客户端ID" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="授权平台" prop="type">
+                <el-select v-model="queryParams.type" placeholder="请选择平台" clearable size="small">
+                    <el-option v-for="dict in dict.type.oauth_platform" :key="dict.value" :label="dict.label" :value="dict.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+
+    <el-card style="padding-bottom: 100px">
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:clientDetails:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:clientDetails:edit']">修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="danger" plain icon="el-icon-delete" size="mini" disabled @click="handleDelete" v-hasPermi="['iot:clientDetails:remove']">删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['iot:clientDetails:export']">导出</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="clientDetailsList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="授权平台" align="center" prop="type">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.oauth_platform" :value="scope.row.type" />
+                </template>
+            </el-table-column>
+            <el-table-column label="客户端ID" align="center" prop="clientId" />
+            <el-table-column label="资源" align="center" prop="resourceIds" />
+            <el-table-column label="权限范围" align="center" prop="scope" />
+            <el-table-column label="自动授权" align="center" prop="autoapprove">
+                <template slot-scope="scope">
+                    <span v-if="scope.row.autoapprove=='true'">自动授权</span>
+                    <span v-if="scope.row.autoapprove=='false'">用户验证</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="授权模式" align="center" prop="authorizedGrantTypes">
+                <template slot-scope="scope">
+                    <div v-html="formatGrantTypesDisplay(scope.row.authorizedGrantTypes)"></div>
+                </template>
+            </el-table-column>
+            <el-table-column label="回调地址" align="center" prop="webServerRedirectUri" min-width="130" />
+            <el-table-column label="权限" align="center" prop="authorities" />
+            <el-table-column label="Token有效期" align="center" prop="accessTokenValidity" />
+            <el-table-column label="Token刷新时间" align="center" prop="refreshTokenValidity" />
+
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:clientDetails:edit']">修改</el-button>
+                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:clientDetails:remove']" disabled>删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+        <!-- 添加或修改云云对接对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+                <el-form-item label="授权平台" prop="type">
+                    <el-select v-model="form.type" placeholder="请选择授权平台">
+                        <el-option v-for="dict in dict.type.oauth_platform" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="客户端ID" prop="clientId">
+                    <el-input v-model="form.clientId" placeholder="请输入客户端ID" />
+                </el-form-item>
+                <el-form-item label="资源集合" prop="resourceIds">
+                    <el-input v-model="form.resourceIds" placeholder="请输入资源" />
+                </el-form-item>
+                <el-form-item label="授权模式" prop="authorizedGrantTypes">
+                    <el-input v-model="form.authorizedGrantTypes" type="textarea" placeholder="请输入授权模式" />
+                </el-form-item>
+                <el-form-item label="秘钥" prop="clientSecret">
+                    <el-input v-model="form.clientSecret" placeholder="请输入客户端秘钥" />
+                </el-form-item>
+                <el-form-item label="回调地址" prop="webServerRedirectUri">
+                    <el-input v-model="form.webServerRedirectUri" type="textarea" placeholder="请输入回调地址" />
+                </el-form-item>
+                <el-form-item label="权限" prop="authorities">
+                    <el-input v-model="form.authorities" placeholder="请输入权限" />
+                </el-form-item>
+                <el-form-item label="Token有效期" prop="accessTokenValidity">
+                    <el-input v-model="form.accessTokenValidity" placeholder="请输入Token有效时间" />
+                </el-form-item>
+                <el-form-item label="Token刷新时间" prop="refreshTokenValidity">
+                    <el-input v-model="form.refreshTokenValidity" placeholder="请输入Token刷新有效时间" />
+                </el-form-item>
+                <el-form-item label="预留信息" prop="additionalInformation">
+                    <el-input v-model="form.additionalInformation" type="textarea" placeholder="请输入内容" />
+                </el-form-item>
+
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm" disabled>确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+    </el-card>
+</div>
+</template>
+
+<script>
+import {
+    listClientDetails,
+    getClientDetails,
+    delClientDetails,
+    addClientDetails,
+    updateClientDetails,
+} from "@/api/iot/clientDetails";
+
+export default {
+    name: "ClientDetails",
+    dicts: ["oauth_platform"],
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 云云对接表格数据
+            clientDetailsList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                clientId: null,
+                authorizedGrantTypes: null,
+                autoapprove: null,
+                type: null,
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {},
+        };
+    },
+    created() {
+        this.getList();
+    },
+    methods: {
+        /** 查询云云对接列表 */
+        getList() {
+            this.loading = true;
+            listClientDetails(this.queryParams).then((response) => {
+                this.clientDetailsList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                clientId: null,
+                resourceIds: null,
+                clientSecret: null,
+                scope: null,
+                authorizedGrantTypes: null,
+                webServerRedirectUri: null,
+                authorities: null,
+                accessTokenValidity: null,
+                refreshTokenValidity: null,
+                additionalInformation: null,
+                autoapprove: null,
+                type: null,
+            };
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map((item) => item.clientId);
+            this.single = selection.length !== 1;
+            this.multiple = !selection.length;
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "添加云云对接";
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const clientId = row.clientId || this.ids;
+            getClientDetails(clientId).then((response) => {
+                this.form = response.data;
+                this.open = true;
+                this.title = "修改云云对接";
+            });
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate((valid) => {
+                if (valid) {
+                    if (this.form.clientId != null) {
+                        updateClientDetails(this.form).then((response) => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addClientDetails(this.form).then((response) => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const clientIds = row.clientId || this.ids;
+            this.$modal
+                .confirm('是否确认删除云云对接编号为"' + clientIds + '"的数据项？')
+                .then(function () {
+                    return delClientDetails(clientIds);
+                })
+                .then(() => {
+                    this.getList();
+                    this.$modal.msgSuccess("删除成功");
+                })
+                .catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download(
+                "iot/clientDetails/export", {
+                    ...this.queryParams,
+                },
+                `clientDetails_${new Date().getTime()}.xlsx`
+            );
+        },
+        /** 格式化显示授权模式 */
+        formatGrantTypesDisplay(data){
+          let dataArray=data.split(",");
+          let displayHtml=""
+          for(let i=0;i<dataArray.length;i++){
+              displayHtml=displayHtml+"<div style='background-color:#eee;margin:0 auto;margin-bottom:5px;width:86px;border-radius:5px;padding:3px;'>"+this.convertGrantType(dataArray[i])+"</div>"
+          }
+          return displayHtml;
+        },
+        /** 授权模式转换 */
+        convertGrantType(type){
+          if(type=="client_credentials"){
+            return "客户端模式"
+          }else if(type=="password"){
+            return "密码模式";
+          }else if(type=="authorization_code"){
+            return "授权码模式";
+          }else if(type=="implicit"){
+            return "简化模式";
+          }else if(type=="refresh_token"){
+            return "刷新Token";
+          }else{
+            return "";
+          }
+        }
+
+    },
+};
+</script>

vue/src/views/iot/device/device-edit.vue

@@ -0,0 +1,406 @@
+<template>
+<el-card style="margin:6px;padding-bottom:100px;">
+    <el-tabs v-model="activeName" tab-position="left" style="padding:10px;">
+        <el-tab-pane name="basic">
+            <span slot="label"> * 基本信息</span>
+            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+                <el-row :gutter="100">
+                    <el-col :span="7">
+                        <el-form-item label="设备名称" prop="deviceName">
+                            <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
+                        </el-form-item>
+                        <el-form-item label="" prop="serialNumber">
+                            <template slot="label">
+                                <span style="color:red;">* </span>设备编号
+                            </template>
+                            <el-input v-model="form.serialNumber" placeholder="请输入设备编号" :disabled="form.status!=1">
+                                <el-button slot="append" @click="generateNum" :loading="genDisabled" :disabled="form.status!=1">生成</el-button>
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="" prop="productName">
+                            <template slot="label">
+                                <span style="color:red;">* </span>所属产品
+                            </template>
+                            <el-input readonly v-model="form.productName" placeholder="请选择产品" :disabled="form.status!=1">
+                                <el-button slot="append" @click="selectProduct()" :disabled="form.status!=1">选择</el-button>
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="固件版本" prop="firmwareVersion">
+                            <el-input v-model="form.firmwareVersion" placeholder="请输入固件版本" type="number" :disabled="form.status!=1">
+                                <template slot="prepend">Version</template>
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="禁用设备" prop="deviceStatus">
+                            <el-switch v-model="deviceStatus" active-text="" inactive-text="" :disabled="form.status==1" :active-value="1" :inactive-value="0" active-color="#F56C6C">
+                            </el-switch>
+                        </el-form-item>
+                        <el-form-item label="设备影子" prop="isShadow">
+                            <el-switch v-model="form.isShadow" active-text="" inactive-text="" :active-value="1" :inactive-value="0">
+                            </el-switch>
+                        </el-form-item>
+                        <el-form-item label="备注信息" prop="remark">
+                            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" rows="4" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="7">
+                        <!--
+                        <el-form-item label="设备图片" prop="imageUrl">
+                            <el-image style="height:225px;border:1px solid #dee4ed;border-radius:5px;padding:5px;" :src="imageUrl" :preview-src-list="[imageUrl]" fit="cover"></el-image>
+                        </el-form-item>
+                        -->
+                        <el-form-item label="自定义位置" prop="isCustomLocation">
+                            <el-switch v-model="form.isCustomLocation" active-text="" inactive-text="" :active-value="1" :inactive-value="0">
+                            </el-switch>
+                        </el-form-item>
+                        <el-form-item label="设备经度" prop="longitude">
+                            <el-input v-model="form.longitude" placeholder="请输入设备经度" type="number" :disabled="form.isCustomLocation==0">
+                                <el-link slot="append" :underline="false" href="https://api.map.baidu.com/lbsapi/getpoint/index.html" target="_blank">坐标拾取</el-link>
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="设备纬度" prop="latitude">
+                            <el-input v-model="form.latitude" placeholder="请输入设备纬度" type="number" :disabled="form.isCustomLocation==0">
+                                <el-link slot="append" :underline="false" href="https://api.map.baidu.com/lbsapi/getpoint/index.html" target="_blank">坐标拾取</el-link>
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="所在地址" prop="networkAddress">
+                            <el-input v-model="form.networkAddress" placeholder="请输入设备所在地址" :disabled="form.isCustomLocation==0" />
+                        </el-form-item>
+                        <el-form-item label="入网地址" prop="networkIp">
+                            <el-input v-model="form.networkIp" placeholder="设备入网IP" disabled />
+                        </el-form-item>
+                        <el-form-item label="激活时间" prop="activeTime">
+                            <el-date-picker clearable v-model="form.activeTime" type="date" value-format="yyyy-MM-dd" placeholder="设备激活时间" disabled style="width:100%">
+                            </el-date-picker>
+                        </el-form-item>
+                        <el-form-item label="设备信号" prop="rssi">
+                            <el-input v-model="form.rssi" placeholder="设备信号强度" disabled />
+                        </el-form-item>
+                        <el-form-item label="设备状态" prop="status">
+                            <dict-tag :options="dict.type.iot_device_status" :value="form.status" style="width:60px;display:inline-block;" />
+                        </el-form-item>
+                    </el-col>
+
+                    <el-col :span="10">
+                        <div style="border:1px solid #dfe4ed;border-radius:5px;padding:5px;text-align:center;line-height:400px;">
+                            <div id="map" style="height:435px;width:100%;">地图展示区域，新增后显示</div>
+                        </div>
+                    </el-col>
+                </el-row>
+            </el-form>
+
+            <el-form label-width="100px" style="margin-top:50px;">
+                <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
+                    <el-button size="small" type="primary" @click="submitForm">保 存</el-button>
+                </el-form-item>
+            </el-form>
+
+            <!-- 选择产品 -->
+            <product-list ref="productList" :productId="form.productId" @productEvent="getProductData($event)" />
+        </el-tab-pane>
+
+        <el-tab-pane name="runningStatus" :disabled="form.deviceId==0">
+            <span slot="label">运行状态</span>
+            <running-status ref="runningStatus" :device="form" />
+        </el-tab-pane>
+
+        <el-tab-pane name="deviceTimer" :disabled="form.deviceId==0">
+            <span slot="label">设备定时</span>
+            <device-timer ref="deviceTimer" :device="form" />
+        </el-tab-pane>
+
+        <!--
+         <el-tab-pane name="deviceUser" :disabled="form.deviceId==0">
+            <span slot="label">设备用户</span>
+            <device-user ref="deviceUser" :device="form" @userEvent="getUserData($event)" />
+        </el-tab-pane>
+        -->
+
+        <el-tab-pane name="deviceLog" :disabled="form.deviceId==0">
+            <span slot="label">设备日志</span>
+            <device-log ref="deviceLog" :device="form" />
+        </el-tab-pane>
+
+        <el-tab-pane name="deviceStastic" :disabled="form.deviceId==0">
+            <span slot="label">监测统计</span>
+            <device-statistic ref="deviceStatistic" :device="form" />
+        </el-tab-pane>
+
+        <el-tab-pane label="" disabled name="device01" />
+        <el-tab-pane label="" disabled name="device02" />
+        <el-tab-pane label="" disabled name="device03" />
+        <el-tab-pane name="device04">
+            <span slot="label">
+                <el-tooltip class="item" effect="dark" content="用于查看发送的指令，设备是否已经响应" placement="right-start">
+                    <el-button type="success" size="mini" @click="dataSynchronization()" :disabled="form.deviceId==0">数据同步</el-button>
+                </el-tooltip>
+            </span>
+        </el-tab-pane>
+        <el-tab-pane name="device05">
+            <span slot="label">
+                <el-button type="info" size="mini" @click="goBack()" :disabled="!isLoaded">返回列表</el-button>
+            </span>
+        </el-tab-pane>
+    </el-tabs>
+
+</el-card>
+</template>
+
+<script>
+import productList from "./product-list"
+import deviceLog from './device-log';
+import deviceUser from './device-user';
+import runningStatus from './running-status';
+import deviceStatistic from './device-statistic'
+import deviceTimer from './device-timer'
+import {
+    loadBMap
+} from '../map.js'
+import {
+    getDevice,
+    addDevice,
+    updateDevice,
+    generatorDeviceNum
+} from "@/api/iot/device";
+
+export default {
+    name: "device-edit",
+    dicts: ['iot_device_status'],
+    components: {
+        deviceLog,
+        deviceUser,
+        deviceStatistic,
+        runningStatus,
+        productList,
+        deviceTimer,
+    },
+    watch: {
+        activeName(val) {
+            if (val == "deviceStastic") {
+                this.$nextTick(() => {
+                    // TODO 重置统计表格的尺寸
+
+                })
+            }
+        }
+    },
+    data() {
+        return {
+            // 是否加载完成
+            isLoaded: false,
+            // 生成设备编码是否禁用
+            genDisabled: false,
+            // 选中选项卡
+            activeName: 'basic',
+            // 遮罩层
+            loading: true,
+            // 设备状态（1=禁用，0=不禁用）
+            deviceStatus: 0,
+            // 表单参数
+            form: {
+                productId: 0,
+                status: 1,
+            },
+            // 图片地址
+            imageUrl: require('@/assets/images/product.jpg'),
+            // 地址
+            baseUrl: process.env.VUE_APP_BASE_API,
+            // 地图相关
+            map: null,
+            local: null,
+            mk: null,
+            latitude: '',
+            longitude: '',
+            keyWords: '',
+            // 表单校验
+            rules: {
+                deviceName: [{
+                    required: true,
+                    message: "设备名称不能为空",
+                    trigger: "blur"
+                }],
+                firmwareVersion: [{
+                    required: true,
+                    message: "固件版本不能为空",
+                    trigger: "blur"
+                }],
+            }
+        };
+    },
+    created() {
+        // 获取设备信息
+        this.form.deviceId = this.$route.query && this.$route.query.deviceId;
+        if (this.form.deviceId != 0) {
+            this.getDevice(this.form.deviceId);
+        }
+        // 未加载完，直接返回会报错
+        setTimeout(() => {
+            this.isLoaded = true;
+        }, 2000);
+    },
+    methods: {
+        /** 数据同步*/
+        dataSynchronization(){
+            getDevice(this.form.deviceId).then(response => {
+                this.form = response.data;
+                // 选项卡切换
+                this.activeName='runningStatus';
+                // 禁用状态
+                if (this.form.status == 2) {
+                    this.deviceStatus = 1;
+                }
+                if (this.form.imgUrl != null && this.form.imgUrl != "") {
+                    this.imageUrl = this.form.imgUrl;
+                }
+                this.loadMap();
+
+            });
+        },
+        /**获取设备详情*/
+        getDevice(deviceId) {
+            getDevice(deviceId).then(response => {
+                this.form = response.data;
+                // 禁用状态
+                if (this.form.status == 2) {
+                    this.deviceStatus = 1;
+                }
+                if (this.form.imgUrl != null && this.form.imgUrl != "") {
+                    this.imageUrl = this.form.imgUrl;
+                }
+                this.loadMap();
+
+            });
+        },
+        /**加载地图*/
+        loadMap() {
+            this.$nextTick(() => {
+                loadBMap().then(() => {
+                    this.getmap();
+                });
+            })
+        },
+        /** 返回按钮 */
+        goBack() {
+            const obj = {
+                path: "/iot/device",
+                query: {
+                    t: Date.now(),
+                    pageNum: this.$route.query.pageNum
+                }
+            };
+            this.$tab.closeOpenPage(obj);
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                deviceId: 0,
+                deviceName: null,
+                productId: null,
+                productName: null,
+                userId: null,
+                userName: null,
+                tenantId: null,
+                tenantName: null,
+                serialNumber: null,
+                firmwareVersion: null,
+                status: 1,
+                rssi: null,
+                networkAddress: null,
+                networkIp: null,
+                longitude: null,
+                latitude: null,
+                activeTime: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                isCustomLocation: 0,
+            };
+            this.deviceStatus = 0;
+            this.resetForm("form");
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.form.deviceId != 0) {
+                        // 设置设备状态
+                        this.setDeviceStatus();
+                        console.log(this.form);
+                        updateDevice(this.form).then(response => {
+                            this.$modal.alertSuccess("修改成功");
+                            this.open = false;
+                            this.loadMap();
+                        });
+                    } else {
+                        addDevice(this.form).then(response => {
+                            this.$modal.alertSuccess("新增成功, 可以烧录sdk到设备了");
+                            this.open = false;
+                            this.form = response.data;
+                            if (this.form.status == 2) {
+                                this.deviceStatus = 1;
+                            }
+                            this.loadMap();
+                        });
+                    }
+                }
+            });
+        },
+        /**选择产品 */
+        selectProduct() {
+            this.$refs.productList.open = true;
+            this.$refs.productList.getList();
+        },
+        /**获取选中的产品 */
+        getProductData(product) {
+            this.form.productId = product.productId;
+            this.form.productName = product.productName;
+            console.log(product);
+        },
+        // 获取选中的用户
+        getUserData(user) {
+
+        },
+
+        // 地图定位
+        getmap() {
+            this.map = new BMap.Map('map')
+            let point = null;
+            if (this.form.longitude != null && this.form.longitude != "" && this.form.latitude != null && this.form.latitude != "") {
+                point = new BMap.Point(this.form.longitude, this.form.latitude)
+            } else {
+                point = new BMap.Point(116.404, 39.915)
+            }
+            this.map.centerAndZoom(point, 19)
+            this.map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
+            this.map.addControl(new BMap.NavigationControl())
+
+            // 标注设备位置
+            this.mk = new BMap.Marker(point)
+            this.map.addOverlay(this.mk)
+            this.map.panTo(point)
+        },
+        // 设置设备的状态
+        setDeviceStatus() {
+            if (this.deviceStatus == 1) {
+                this.form.status = 2;
+            } else {
+                // 禁用状态，启用后状态是离线
+                if (this.form.status == 2) {
+                    this.form.status = 4;
+                }
+            }
+        },
+        // 生成随机字母和数字
+        generateNum() {
+            this.genDisabled = true;
+            generatorDeviceNum().then(response => {
+                this.form.serialNumber = response.data;
+                this.genDisabled = false;
+            })
+        }
+
+    }
+};
+</script>

vue/src/views/iot/device/device-log.vue

@@ -0,0 +1,208 @@
+<template>
+<div style="padding-left:20px;">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="类型" prop="logType">
+            <el-select v-model="queryParams.logType" placeholder="请选择类型" clearable size="small">
+                <el-option v-for="dict in dict.type.iot_device_log_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+        </el-form-item>
+        <el-form-item label="标识符" prop="identity">
+            <el-input v-model="queryParams.identity" placeholder="请输入标识符" clearable size="small" @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="deviceLogList" size="mini">
+        <el-table-column label="编号" align="center" prop="logId" width="100" />
+        <el-table-column label="类型" align="center" prop="logType" width="120">
+            <template slot-scope="scope">
+                <dict-tag :options="dict.type.iot_device_log_type" :value="scope.row.logType" />
+            </template>
+        </el-table-column>
+        <el-table-column label="时间" align="center" prop="createTime" width="180">
+            <template slot-scope="scope">
+                <span>{{ scope.row.createTime }}</span>
+            </template>
+        </el-table-column>
+        <el-table-column label="动作" align="left" header-align="center" prop="logValue">
+            <template slot-scope="scope">
+                <div v-html="formatValueDisplay(scope.row)"></div>
+            </template>
+        </el-table-column>
+        <el-table-column label="标识符" align="center" prop="identity" />
+        <el-table-column label="备注" header-align="center" align="left" prop="remark">
+            <template slot-scope="scope">
+                {{scope.row.remark==null ?"无":scope.row.remark}}
+            </template>
+        </el-table-column>
+
+    </el-table>
+    <div style="height:40px;">
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+    </div>
+
+</div>
+</template>
+
+<script>
+import {
+    listDeviceLog
+} from "@/api/iot/deviceLog";
+import {
+    cacheJsonThingsModel
+} from "@/api/iot/model";
+
+export default {
+    name: "DeviceLog",
+    dicts: ['iot_device_log_type', "iot_yes_no"],
+    props: {
+        device: {
+            type: Object,
+            default: null
+        }
+    },
+    watch: {
+        // 获取到父组件传递的device后，刷新列表
+        device: function (newVal, oldVal) {
+            this.deviceInfo = newVal;
+            if (this.deviceInfo && this.deviceInfo.deviceId != 0) {
+                this.queryParams.deviceId = this.deviceInfo.deviceId;
+                this.getList();
+                // 获取物模型
+                this.getCacheThingsModdel(this.deviceInfo.productId);
+            }
+        }
+    },
+    data() {
+        return {
+            // 物模型
+            thingsModel: {},
+            // 遮罩层
+            loading: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 设备日志表格数据
+            deviceLogList: [],
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                logType: null,
+                logValue: null,
+                deviceId: null,
+                deviceName: null,
+                identity: null,
+                isMonitor: null,
+            },
+        };
+    },
+    created() {
+
+    },
+    methods: {
+        /** 查询设备日志列表 */
+        getList() {
+            this.loading = true;
+            listDeviceLog(this.queryParams).then(response => {
+                this.deviceLogList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download('iot/deviceLog/export', {
+                ...this.queryParams
+            }, `deviceLog_${new Date().getTime()}.xlsx`)
+        },
+        /** 获取物模型*/
+        getCacheThingsModdel(productId) {
+            // 获取缓存的Json物模型
+            cacheJsonThingsModel(productId).then(response => {
+                this.thingsModel = JSON.parse(response.data);
+            });
+        },
+        /** 格式化显示数据定义 */
+        formatValueDisplay(row) {
+            // 类型（1=属性上报，2=调用功能，3=事件上报，4=设备升级，5=设备上线，6=设备离线）
+            if (row.logType == 1) {
+                let propertyItem = this.getThingsModelItem(1, row.identity);
+                if (propertyItem != "") {
+                    return propertyItem.name + '： <span style="color:#409EFF;">' + this.getThingsModelItemValue(propertyItem, row.logValue) + ' ' + (propertyItem.datatype.unit != undefined ? propertyItem.datatype.unit : '') + '</span>';
+                }
+            } else if (row.logType == 2) {
+                let functionItem = this.getThingsModelItem(2, row.identity);
+                if (functionItem != "") {
+                    return functionItem.name + '： <span style="color:#409EFF">' + this.getThingsModelItemValue(functionItem, row.logValue) + ' ' + (functionItem.datatype.unit != undefined ? functionItem.datatype.unit : '') + '</span>';
+                }
+            } else if (row.logType == 3) {
+                let eventItem = this.getThingsModelItem(3, row.identity);
+                if (eventItem != "") {
+                    return eventItem.name + '： <span style="color:#409EFF">' + this.getThingsModelItemValue(eventItem, row.logValue) + ' ' + (eventItem.datatype.unit != undefined ? eventItem.datatype.unit : '') + '</span>';
+                }
+            } else if (row.logType == 4) {
+                return '<span style="font-weight:bold">设备升级</span>';
+            } else if (row.logType == 5) {
+                return '<span style="font-weight:bold">设备上线</span>';
+            } else if (row.logType == 6) {
+                return '<span style="font-weight:bold">设备离线</span>';
+            }
+            return "";
+        },
+        /** 获取物模型项中的值*/
+        getThingsModelItemValue(item, oldValue) {
+            if (item.datatype.type == "bool") {
+                if (oldValue == "0") {
+                    return item.datatype.falseText;
+                } else if (oldValue == "1") {
+                    return item.datatype.trueText;
+                }
+            } else if (item.datatype.type == "enum") {
+                for (let i = 0; i < item.datatype.enumList.length; i++) {
+                    if (oldValue == item.datatype.enumList[i].value) {
+                        return item.datatype.enumList[i].text;
+                    }
+                }
+            }
+            return oldValue;
+        },
+        /** 获取物模型中的项*/
+        getThingsModelItem(type, identity) {
+            if (type == 1 && this.thingsModel.properties) {
+                for (let i = 0; i < this.thingsModel.properties.length; i++) {
+                    if (this.thingsModel.properties[i].id == identity) {
+                        return this.thingsModel.properties[i];
+                    }
+                }
+            } else if (type == 2 && this.thingsModel.functions) {
+                for (let i = 0; i < this.thingsModel.functions.length; i++) {
+                    if (this.thingsModel.functions[i].id == identity) {
+                        return this.thingsModel.functions[i];
+                    }
+                }
+            } else if (type == 3 && this.thingsModel.events) {
+                for (let i = 0; i < this.thingsModel.events.length; i++) {
+                    if (this.thingsModel.events[i].id == identity) {
+                        return this.thingsModel.events[i];
+                    }
+                }
+            }
+            return "";
+        }
+    }
+};
+</script>

vue/src/views/iot/device/device-statistic.vue

@@ -0,0 +1,184 @@
+<template>
+<div style="padding-left:20px;">
+    <el-row>
+        <el-col :span="24">
+            <div v-for="(item,index) in monitorThings" :key="index" style="margin-bottom:50px;">
+                <el-card shadow="hover" :body-style="{ padding: '10px 0px',overflow:'auto' }">
+                    <div ref="statisticMap" style="height:250px;width:1470px;"></div>
+                </el-card>
+            </div>
+        </el-col>
+    </el-row>
+
+</div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import {
+    cacheJsonThingsModel
+} from "@/api/iot/model";
+import {
+    listMonitor
+} from "@/api/iot/deviceLog";
+
+export default {
+    name: "device-statistic",
+    props: {
+        device: {
+            type: Object,
+            default: null
+        }
+    },
+    watch: {
+        // 获取到父组件传递的device后
+        device: function (newVal, oldVal) {
+            this.deviceInfo = newVal;
+            if (this.deviceInfo && this.deviceInfo.deviceId != 0) {
+                this.getCacheThingsModdel(this.deviceInfo.productId);
+            }
+        }
+    },
+    data() {
+        return {
+            // 设备信息
+            deviceInfo: {},
+            // 监测物模型
+            monitorThings: [],
+            // 图表集合
+            chart: [],
+        };
+    },
+    mounted() {
+        
+    },
+    methods: {
+        /** 获取物模型*/
+        getCacheThingsModdel(productId) {
+            // 获取缓存的Json物模型
+            cacheJsonThingsModel(productId).then(response => {
+                let thingsModel = JSON.parse(response.data);
+                // 筛选监测数据
+                this.monitorThings = thingsModel.properties.filter(item => item.isMonitor == 1);
+                // 加载图表
+                this.$nextTick(function () {   
+                    // 绘制图表
+                    this.getStatistic();                 
+                    // 获取统计数据
+                    this.getStatisticData(this.monitorThings);                    
+                });
+
+            });
+        },
+        /** 获取统计数据 */
+        getStatisticData(monitorThingsModel) {
+            for (let i = 0; i < monitorThingsModel.length; i++) {
+                let queryParams = {};
+                queryParams.deviceId = this.deviceInfo.deviceId;
+                queryParams.identity = monitorThingsModel[i].id;
+                listMonitor(queryParams).then(response => {
+                    let data = response.rows;
+                    // 对象转数组
+                    let dataList=[];
+                    for(let j=0; j<data.length; j++) {
+                        let item=[];
+                        item[0]=data[j].time;
+                        item[1]=data[j].value;
+                        dataList.push(item);
+                    }
+                    this.chart[i].setOption({
+                        series: [{
+                            data:dataList
+                        }]
+                    });
+                });
+            }
+        },
+        /**监测统计数据 */
+        getStatistic() {
+            for (let i = 0; i < this.monitorThings.length; i++) {
+                this.chart[i] = echarts.init(this.$refs.statisticMap[i]);
+                var option;
+                option = {
+                    animationDurationUpdate:3000,
+                    tooltip: {
+                        trigger: 'axis',
+                    },
+                    title: {
+                        left: 'center',
+                        text: this.monitorThings[i].name + '统计 （单位 ' + (this.monitorThings[i].datatype.unit != undefined ? this.monitorThings[i].datatype.unit : "无") + "）",
+                    },
+                    grid: {
+                        top: '80px',
+                        left: '40px',
+                        right: '80px',
+                        bottom: '60px',
+                        containLabel: true
+                    },
+                    toolbox: {
+                        feature: {
+                            dataZoom: {
+                                yAxisIndex: 'none'
+                            },
+                            restore: {},
+                            saveAsImage: {}
+                        }
+                    },
+                    xAxis: {
+                        type: 'time',
+                        boundaryGap: false,
+                        name: "时间", //坐标名字
+                        nameLocation: "end", //坐标位置，支持start,end，middle
+                        nameTextStyle: { //字体样式            
+                            fontSize: 16, //字体大小            
+                            padding: 20 //距离坐标位置的距离    
+                        },
+                    },
+                    yAxis: {
+                        type: 'value',
+                        boundaryGap: [0, '100%'],
+                        name: this.monitorThings[i].name, //坐标名字
+                        nameLocation: "end", //坐标位置，支持start,end，middle
+                        nameTextStyle: { //字体样式            
+                            fontSize: 16, //字体大小            
+                            padding: 10 //距离坐标位置的距离    
+                        },
+                    },
+                    dataZoom: [{
+                            type: 'inside',
+                            start: 0,
+                            end: 100
+                        },
+                        {
+                            start: 0,
+                            end: 100
+                        }
+                    ],
+                    series: [{
+                        name: this.monitorThings[i].name,
+                        type: 'line',
+                        symbol: 'none',
+                        sampling: 'lttb',
+                        itemStyle: {
+                            color: 'rgb(64, 158, 255)'
+                        },
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgb(64, 158, 255)'
+                                },
+                                {
+                                    offset: 1,
+                                    color: 'rgb(255, 255, 255)'
+                                }
+                            ])
+                        },
+                        data: []
+                    }]
+                };
+                option && this.chart[i].setOption(option);
+            }
+        },
+    }
+};
+</script>

vue/src/views/iot/device/device-timer.vue

@@ -0,0 +1,808 @@
+<template>
+<div style="padding-left:20px;">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="70px">
+        <el-form-item label="定时名称" prop="jobName">
+            <el-input v-model="queryParams.jobName" placeholder="请输入定时名称" clearable size="small" @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="定时状态" prop="status" style="margin-left:20px;">
+            <el-select v-model="queryParams.status" placeholder="请选择定时状态" clearable size="small">
+                <el-option v-for="dict in dict.type.sys_job_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+        </el-form-item>
+        <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:job:add']">新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:job:edit']">修改</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['iot:job:remove']">删除</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['iot:job:export']">导出</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange" size="mini">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
+        <el-table-column label="描述" align="center" prop="cronText">
+            <template slot-scope="scope">
+                <div v-html="formatCronDisplay(scope.row)"></div>
+            </template>
+        </el-table-column>
+        <el-table-column label="CRON表达式" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
+        <el-table-column label="动作" align="left" prop="actions" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+                <div v-html="formatActionsDisplay(scope.row.actions)"></div>
+            </template>
+        </el-table-column>
+
+        <el-table-column label="状态" align="center">
+            <template slot-scope="scope">
+                <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" active-text="启用" @change="handleStatusChange(scope.row)"></el-switch>
+            </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:job:edit']">修改</el-button>
+                <el-button size="mini" type="text" icon="el-icon-caret-right" @click="handleView(scope.row)" v-hasPermi="['iot:job:query']">定时详细</el-button><br />
+                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:job:remove']">删除</el-button>
+                <el-button size="mini" type="text" icon="el-icon-caret-right" @click="handleRun(scope.row)" v-hasPermi="['iot:job:changeStatus']">执行一次</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+    <!-- 添加或修改定时定时对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+            <el-row>
+                <el-col :span="15">
+                    <el-form-item label="定时名称" prop="jobName">
+                        <el-input v-model="form.jobName" placeholder="请输入定时名称" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                    <el-form-item label="执行时间" prop="timerTimeValue">
+                        <el-time-picker v-model="timerTimeValue" value-format="HH:mm" placeholder="选择时间" style="width:354px;" @change="timeChange" :disabled="form.isAdvance==1"></el-time-picker>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                    <el-form-item label="重复执行" prop="timerWeek">
+                        <el-row>
+                            <el-col :span="4">
+                                <el-select v-model="timerRepeatValue" placeholder="请选择" @change="repeatChange" :disabled="form.isAdvance==1">
+                                    <el-option v-for="item in timerRepeats" :key="item.value" :label="item.label" :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-col>
+                            <el-col :span="15" :offset="1" v-if="timerRepeatValue==2">
+                                <el-select v-model="timerWeekValue" placeholder="请选择" multiple style="width:485px" @change="weekChange" :disabled="form.isAdvance==1">
+                                    <el-option v-for="item in timerWeeks" :key="item.value" :label="item.label" :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-col>
+                        </el-row>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                    <el-form-item label="cron表达式" prop="">
+                        <el-row>
+                            <el-col :span="18">
+                                <el-input v-model="form.cronExpression" placeholder="cron执行表达式" :disabled="form.isAdvance==0">
+                                    <template slot="append">
+                                        <el-button type="primary" @click="handleShowCron" :disabled="form.isAdvance==0">
+                                            生成表达式
+                                            <i class="el-icon-time el-icon--right"></i>
+                                        </el-button>
+                                    </template>
+                                </el-input>
+                            </el-col>
+                            <el-col :span="4" :offset="1">
+                                <el-checkbox v-model="form.isAdvance" :true-label="1" :false-label="0" @change="customerCronChange">自定义表达式</el-checkbox>
+                            </el-col>
+                        </el-row>
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24">
+                    <div style="padding-bottom:15px;padding:0 20px;">
+                        <el-divider></el-divider>
+                    </div>
+                    <el-form-item label="执行动作">
+                        <el-row v-for="(actionItem,index) in actionList" :key="index+'action'" style="margin-bottom:10px;">
+                            <el-col :span="4">
+                                <el-select v-model="actionItem.type" placeholder="请选择类别">
+                                    <el-option v-for="(subItem,subIndex) in modelTypes" :key="subIndex+'type'" :label="subItem.label" :value="subItem.value">
+                                    </el-option>
+                                </el-select>
+                            </el-col>
+                            <el-col :span="4" :offset="1">
+                                <el-select v-model="actionItem.id" placeholder="请选择" v-if="actionItem.type==1" @change="thingsModelItemChange($event,index)">
+                                    <el-option v-for="(subItem,subIndex) in thingsModel.properties" :key="subIndex+'property'" :label="subItem.name" :value="subItem.id">
+                                    </el-option>
+                                </el-select>
+                                <el-select v-model="actionItem.id" placeholder="请选择" v-else-if="actionItem.type==2" @change="thingsModelItemChange($event,index)">
+                                    <el-option v-for="(subItem,subIndex) in thingsModel.functions" :key="subIndex+'func'" :label="subItem.name" :value="subItem.id">
+                                    </el-option>
+                                </el-select>
+                            </el-col>
+                            <el-col :span="10" :offset="1">
+                                <!--物模型项的值-->
+                                <span v-if="actionItem.thingsModelItem &&(actionItem.thingsModelItem.datatype.type=='integer' || actionItem.thingsModelItem.datatype.type=='decimal')">
+                                    <el-input style="width:180px;" v-model="actionItem.value" placeholder="值" :max="actionItem.thingsModelItem.datatype.max" :min="actionItem.thingsModelItem.datatype.min" type="number" />
+                                    <el-input style="width:70px;margin-left:15px;" v-model="actionItem.thingsModelItem.datatype.unit" placeholder="请输入整数或小数" disabled />
+                                </span>
+                                <span v-else-if=" actionItem.thingsModelItem && actionItem.thingsModelItem.datatype.type=='bool'">
+                                    <el-switch v-model="actionItem.value" :active-text="actionItem.thingsModelItem.datatype.trueText" :inactive-text="actionItem.thingsModelItem.datatype.falseText" active-value="1" inactive-value="0">
+                                    </el-switch>
+                                </span>
+                                <span v-else-if="actionItem.thingsModelItem && actionItem.thingsModelItem.datatype.type=='enum'">
+                                    <el-select v-model="actionItem.value" placeholder="请选择" style="width:100%">
+                                        <el-option v-for="(subItem,subIndex) in actionItem.thingsModelItem.datatype.enumList" :key="subIndex+'things'" :label="subItem.text" :value="subItem.value">
+                                        </el-option>
+                                    </el-select>
+                                </span>
+                                <span v-else-if="actionItem.thingsModelItem && actionItem.thingsModelItem.datatype.type=='string'">
+                                    <el-input v-model="actionItem.value" placeholder="请输入字符串" :max="actionItem.thingsModelItem.datatype.maxLength" />
+                                </span>
+                                <span v-else-if="actionItem.thingsModelItem && actionItem.thingsModelItem.datatype.type=='array'">
+                                    <el-input v-model="actionItem.value" placeholder="请输入英文逗号分隔的数组" />
+                                </span>
+                            </el-col>
+                            <el-col :span="2" :offset="1" v-if="index!=0"><a style="color:#F56C6C" @click="removeEnumItem(index)">删除</a></el-col>
+                        </el-row>
+                        <div>+ <a style="color:#409EFF" @click="addEnumItem()">添加执行动作</a></div>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="定时状态">
+                        <el-radio-group v-model="form.status">
+                            <el-radio v-for="dict in dict.type.sys_job_status" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="submitForm" :loading="submitButtonLoading">确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+        </div>
+    </el-dialog>
+
+    <el-dialog title="Cron表达式生成器" :visible.sync="openCron" append-to-body destroy-on-close class="scrollbar">
+        <crontab @hide="openCron=false" @fill="crontabFill" :expression="expression" style="padding-bottom:80px;"></crontab>
+    </el-dialog>
+
+    <!-- 定时日志详细 -->
+    <el-dialog title="定时详细" :visible.sync="openView" width="700px" append-to-body>
+        <el-form ref="form" :model="form" label-width="120px" size="mini">
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="定时编号：">{{ form.jobId }}</el-form-item>
+                    <el-form-item label="定时名称：">{{ form.jobName }}</el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="定时分组：">{{ jobGroupFormat(form) }}</el-form-item>
+                    <el-form-item label="创建时间：">{{ form.createTime }}</el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="是否并发：">
+                        <div v-if="form.concurrent == 0">允许</div>
+                        <div v-else-if="form.concurrent == 1">禁止</div>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="cron表达式：">{{ form.cronExpression }}</el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="执行策略：">
+                        <div v-if="form.misfirePolicy == 0">默认策略</div>
+                        <div v-else-if="form.misfirePolicy == 1">立即执行</div>
+                        <div v-else-if="form.misfirePolicy == 2">执行一次</div>
+                        <div v-else-if="form.misfirePolicy == 3">放弃执行</div>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="下次执行时间：">{{ parseTime(form.nextValidTime) }}</el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="定时状态：">
+                        <div v-if="form.status == 0">正常</div>
+                        <div v-else-if="form.status == 1">暂停</div>
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24">
+                    <el-form-item label="执行动作：">
+                        <div v-html="formatActionsDisplay(form.actions)" style="border:1px solid #ddd;padding:10px;border-radius:5px;width:465px;"></div>
+                    </el-form-item>
+                </el-col>
+
+            </el-row>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="openView = false">关 闭</el-button>
+        </div>
+    </el-dialog>
+</div>
+</template>
+
+<script>
+import {
+    listJob,
+    getJob,
+    delJob,
+    addJob,
+    updateJob,
+    runJob,
+    changeJobStatus
+} from "@/api/iot/deviceJob";
+import Crontab from '@/components/Crontab'
+import {
+    cacheJsonThingsModel
+} from "@/api/iot/model";
+export default {
+    components: {
+        Crontab
+    },
+    name: "device-timer",
+    dicts: ['sys_job_group', 'sys_job_status'],
+    props: {
+        device: {
+            type: Object,
+            default: null
+        }
+    },
+    watch: {
+        // 获取到父组件传递的device后
+        device: function (newVal, oldVal) {
+            this.deviceInfo = newVal;
+            if (this.deviceInfo && this.deviceInfo.deviceId != 0) {
+                // 获取缓存的Json物模型
+                cacheJsonThingsModel(this.deviceInfo.productId).then(response => {
+                    this.thingsModel = JSON.parse(response.data);
+                    // 过滤监测数据，监测数据为只读
+                    this.thingsModel.properties = this.thingsModel.properties.filter(item => item.isMonitor == 0);
+                    this.queryParams.deviceId= this.deviceInfo.deviceId;
+                    this.getList();
+                });
+            }
+        }
+    },
+    data() {
+        return {
+            // 物模型JSON
+            thingsModel: {},
+            // 动作列表
+            actionList: [],
+            // 设备
+            deviceInfo: {},
+            // 遮罩层
+            loading: false,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 定时定时表格数据
+            jobList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 是否显示详细弹出层
+            openView: false,
+            // 是否显示Cron表达式弹出层
+            openCron: false,
+            // 传入的表达式
+            expression: "",
+            // 提交按钮加载
+            submitButtonLoading: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                deviceId:0,
+                jobName: undefined,
+                jobGroup: undefined,
+                status: undefined
+            },
+            // 重复执行项
+            timerRepeats: [{
+                value: 1,
+                label: '每天'
+            }, {
+                value: 2,
+                label: '指定'
+            }],
+            timerRepeatValue: 1,
+            // 周
+            timerWeeks: [{
+                value: 1,
+                label: '周一'
+            }, {
+                value: 2,
+                label: '周二'
+            }, {
+                value: 3,
+                label: '周三'
+            }, {
+                value: 4,
+                label: '周四'
+            }, {
+                value: 5,
+                label: '周五'
+            }, {
+                value: 6,
+                label: '周六'
+            }, {
+                value: 7,
+                label: '周日'
+            }],
+            timerWeekValue: [1, 2, 3, 4, 5, 6, 7],
+            // 时间
+            timerTimeValue: '',
+            // 物模型类别
+            modelTypes: [{
+                value: 1,
+                label: '属性'
+            }, {
+                value: 2,
+                label: '功能'
+            }],
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                jobName: [{
+                    required: true,
+                    message: "定时名称不能为空",
+                    trigger: "blur"
+                }],
+                actions: [{
+                    required: true,
+                    message: "执行动作不能为空",
+                    trigger: "blur"
+                }],
+                cronExpression: [{
+                    required: true,
+                    message: "cron执行表达式不能为空",
+                    trigger: "blur"
+                }]
+            }
+        };
+    },
+    created() {
+
+    },
+    methods: {
+        /** 查询定时定时列表 */
+        getList() {
+            this.loading = true;
+            listJob(this.queryParams).then(response => {
+                this.jobList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 定时组名字典翻译
+        jobGroupFormat(row, column) {
+            return this.selectDictLabel(this.dict.type.sys_job_group, row.jobGroup);
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                jobId: undefined,
+                jobName: undefined,
+                cronExpression: undefined,
+                status: "0",
+                jobGroup: "DEFAULT", // 定时分组
+                misfirePolicy: 2, // 1=立即执行，2=执行一次，3=放弃执行
+                concurrent: 1, // 是否并发，1=禁止，0=允许
+                isAdvance: 0, // 是否详细cron表达式
+                jobType: 1, // 任务类型 1=设备定时，2=设备告警，3=场景联动
+                productId: 0,
+                productName: "",
+                sceneId: 0, //场景ID
+                alertId: 0, // 告警ID
+                actions: "",
+            };
+            this.submitButtonLoading = false;
+            this.timerRepeatValue = 1;
+            this.timerWeekValue = [1, 2, 3, 4, 5, 6, 7];
+            this.timerTimeValue = "";
+            this.actionList = [{
+                id: "",
+                name: "",
+                value: "",
+                type: 2, // 1=属性，2=功能，3=事件，5=设备上线，6=设备下线
+                source: 2, // 1=设备，2=定时，3=告警输出
+                deviceId: this.deviceInfo.deviceId,
+                deviceName: this.deviceInfo.deviceName,
+                alertName: "", // 告警名称 可选
+                alertLevel: 1, // 告警级别 告警级别（1=提醒通知，2=轻微问题，3=严重警告）
+                thingsModelItem: {
+                    id: "",
+                    name: "",
+                    datatype: {
+                        type: "",
+                    }
+                }
+            }];
+            // 物模型项,对应actions
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map(item => item.jobId);
+            this.single = selection.length != 1;
+            this.multiple = !selection.length;
+        },
+        // 定时状态修改
+        handleStatusChange(row) {
+            let text = row.status === "0" ? "启用" : "停用";
+            this.$modal.confirm('确认要"' + text + '""' + row.jobName + '"定时吗？').then(function () {
+                return changeJobStatus(row.jobId, row.status);
+            }).then(() => {
+                this.$modal.msgSuccess(text + "成功");
+            }).catch(function () {
+                row.status = row.status === "0" ? "1" : "0";
+            });
+        },
+        /* 立即执行一次 */
+        handleRun(row) {
+            this.$modal.confirm('确认要立即执行一次"' + row.jobName + '"定时吗？').then(function () {
+                return runJob(row.jobId, row.jobGroup);
+            }).then(() => {
+                this.$modal.msgSuccess("执行成功");
+            }).catch(() => {});
+        },
+        /** 定时详细信息 */
+        handleView(row) {
+            getJob(row.jobId).then(response => {
+                this.form = response.data;
+                this.openView = true;
+            });
+        },
+        /** cron表达式按钮操作 */
+        handleShowCron() {
+            this.expression = this.form.cronExpression;
+            this.openCron = true;
+        },
+        /** 确定后回传值 */
+        crontabFill(value) {
+            this.form.cronExpression = value;
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "添加定时";
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const jobId = row.jobId || this.ids;
+            getJob(jobId).then(response => {
+                this.form = response.data;
+                // actionList赋值
+                this.actionList = JSON.parse(this.form.actions);
+                for (let i = 0; i < this.actionList.length; i++) {
+                    if (this.actionList[i].type == 1) {
+                        for (let j = 0; j < this.thingsModel.properties.length; j++) {
+                            if (this.actionList[i].id == this.thingsModel.properties[j].id) {
+                                this.actionList[i].thingsModelItem = this.thingsModel.properties[j];
+                                break;
+                            }
+                        }
+                    } else if (this.actionList[i].type == 2) {
+                        for (let j = 0; j < this.thingsModel.functions.length; j++) {
+                            if (this.actionList[i].id == this.thingsModel.functions[j].id) {
+                                this.actionList[i].thingsModelItem = this.thingsModel.functions[j];
+                                break;
+                            }
+                        }
+                    }
+                }
+                if (this.form.isAdvance == 0) {
+                    // 解析执行时间和重复执行项
+                    if (this.form.cronExpression.substring(12) == "1,2,3,4,5,6,7") {
+                        this.timerRepeatValue = 1; // 每天
+                    } else {
+                        this.timerRepeatValue = 2; // 指定
+                    }
+                    let arrayValue = this.form.cronExpression.substring(12).split(",").map(Number);
+                    this.timerWeekValue = arrayValue;
+                    this.timerTimeValue = this.form.cronExpression.substring(5, 7) + ":" + this.form.cronExpression.substring(2, 4)
+                }
+                this.open = true;
+                this.title = "修改定时";
+            });
+        },
+        /** 提交按钮 */
+        submitForm: function () {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    // 验证不能为空
+                    if (this.form.isAdvance == 0) {
+                        if (this.timerTimeValue == "" || this.timerTimeValue == null) {
+                            this.$modal.alertError("执行时间不能空");
+                            return;
+                        }
+                        if (this.timerRepeatValue == 2 && (this.timerWeekValue == null || this.timerWeekValue == "")) {
+                            this.$modal.alertError("请选择要执行的星期");
+                            return;
+                        }
+                    } else if (this.form.isAdvance == 1) {
+                        if (this.form.cronExpression == "") {
+                            this.$modal.alertError("cron表达式不能为空");
+                            return;
+                        }
+                    }
+                    for (let i = 0; i < this.actionList.length; i++) {
+                        if (this.actionList[i].id == "" || this.actionList[i].name == "" || this.actionList[i].value == "") {
+                            this.$modal.alertError("执行动作中的选项和值不能为空");
+                            return;
+                        }
+                    }
+                    // 动作
+                    this.actionList[0].deviceId = this.deviceInfo.deviceId;
+                    this.actionList[0].deviceName = this.deviceInfo.deviceName;
+                    // 删除对象中的物模型属性
+                    for (let i = 0; i < this.actionList.length; i++) {
+                        this.$delete(this.actionList[i], 'thingsModelItem');
+                    }
+                    this.form.actions = JSON.stringify(this.actionList);
+                    // 设备信息
+                    this.form.deviceId = this.deviceInfo.deviceId;
+                    this.form.deviceName = this.deviceInfo.deviceName;
+                    this.form.serialNumber = this.deviceInfo.serialNumber;
+                    this.form.productId = this.deviceInfo.productId;
+                    this.form.productName = this.deviceInfo.productName;
+                    console.log("this.form:",this.form);
+                    // 按钮等待后端加载完
+                    this.submitButtonLoading = true;
+                    if (this.form.jobId != undefined) {
+                        updateJob(this.form).then(response => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.submitButtonLoading = false;
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addJob(this.form).then(response => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.submitButtonLoading = false;
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const jobIds = row.jobId || this.ids;
+            this.$modal.confirm('是否确认删除定时定时编号为"' + jobIds + '"的数据项？').then(function () {
+                return delJob(jobIds);
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download('iot/job/export', {
+                ...this.queryParams
+            }, `job_${new Date().getTime()}.xlsx`)
+        },
+
+        /** 添加枚举项 */
+        addEnumItem() {
+            this.actionList.push({
+                id: "",
+                name: "",
+                value: "",
+                type: 2, // 1=属性，2=功能，3=事件，5=设备上线，6=设备下线
+                source: 2, // 1=设备，2=定时，3=告警输出
+                deviceId: this.deviceInfo.deviceId,
+                deviceName: this.deviceInfo.deviceName,
+                alertName: "", // 告警名称 可选
+                alertLevel: 1, // 告警级别 告警级别（1=提醒通知，2=轻微问题，3=严重警告）
+                thingsModelItem: {
+                    id: "",
+                    name: "",
+                    datatype: {
+                        type: "",
+                    }
+                }
+            });
+        },
+        /** 删除枚举项 */
+        removeEnumItem(index) {
+            this.actionList.splice(index, 1);
+        },
+        /** 修改重复事件 **/
+        repeatChange(data) {
+            if (data == 1) {
+                // 每天
+                this.timerWeekValue = [1, 2, 3, 4, 5, 6, 7];
+            } else if (data == 2) {
+                // 指定
+                this.timerWeekValue = [1, 2, 3, 4, 5, 6, 7];
+            }
+            this.gentCronExpression();
+        },
+        /** 星期改变事件 **/
+        weekChange(data) {
+            this.gentCronExpression();
+        },
+        /** 时间改变事件 **/
+        timeChange(data) {
+            this.gentCronExpression();
+        },
+        /**自定义cron表达式选项改变事件 */
+        customerCronChange(data) {
+            if (data == 0) {
+                this.gentCronExpression();
+            }
+        },
+        /** 生成cron表达式**/
+        gentCronExpression() {
+            let hour = "00";
+            let minute = "00";
+            if (this.timerTimeValue != null && this.timerTimeValue != "") {
+                hour = this.timerTimeValue.substring(0, 2);
+                minute = this.timerTimeValue.substring(3);
+            }
+            let week = "*";
+            if (this.timerWeekValue.length > 0) {
+                week = this.timerWeekValue;
+            }
+            this.form.cronExpression = "0 " + minute + " " + hour + " ? * " + week;
+        },
+
+        /** 物模型项改变事件 **/
+        thingsModelItemChange(identifier, index) {
+            this.actionList[index].value = "";
+            if (this.actionList[index].type == 1) {
+                //属性
+                for (let i = 0; i < this.thingsModel.properties.length; i++) {
+                    if (this.thingsModel.properties[i].id == identifier) {
+                        this.actionList[index].name = this.thingsModel.properties[i].name;
+                        this.actionList[index].thingsModelItem = this.thingsModel.properties[i];
+                        break;
+                    }
+                }
+            } else if (this.actionList[index].type == 2) {
+                //事件
+                for (let i = 0; i < this.thingsModel.functions.length; i++) {
+                    if (this.thingsModel.functions[i].id == identifier) {
+                        this.actionList[index].name = this.thingsModel.functions[i].name;
+                        this.actionList[index].thingsModelItem = this.thingsModel.functions[i];
+                        break;
+                    }
+                }
+            }
+        },
+        /** 格式化显示动作 */
+        formatActionsDisplay(json) {
+            if (json == null || json == "") {
+                return;
+            }
+            let actions = JSON.parse(json);
+            let result = "";
+            for (let i = 0; i < actions.length; i++) {
+                let value = actions[i].value;
+                if (actions[i].type == 1) {
+                    // 属性
+                    for (let j = 0; j < this.thingsModel.properties.length; j++) {
+                        if (actions[i].id == this.thingsModel.properties[j].id) {
+                            if (this.thingsModel.properties[j].datatype == "decimal" || this.thingsModel.properties[j].datatype == "integer") {
+                                value = actions[i].value + this.thingsModel.properties[j].datatype.unit;
+                            } else if (this.thingsModel.properties[j].datatype == "enum") {
+                                for (let k = 0; k < this.thingsModel.properties[j].datatype.enumList.length; k++) {
+                                    if (actions[i].value == this.thingsModel.properties[j].datatype.enumList[k].value) {
+                                        value = this.thingsModel.properties[j].datatype.enumList[k].text;
+                                        break;
+                                    }
+                                }
+                            } else if (this.thingsModel.properties[j].datatype == "bool") {
+                                value = actions[i].value == "1" ? this.thingsModel.properties[j].datatype.trueText : this.thingsModel.properties[j].datatype.falseText;
+                            }
+                            break;
+                        }
+                    }
+                } else if (actions[i].type == 2) {
+                    // 功能
+                    for (let j = 0; j < this.thingsModel.functions.length; j++) {
+                        if (actions[i].id == this.thingsModel.functions[j].id) {
+                            if (this.thingsModel.functions[j].datatype.type == "decimal" || this.thingsModel.functions[j].datatype.type == "integer") {
+                                value = actions[i].value + this.thingsModel.functions[j].datatype.unit;
+                            } else if (this.thingsModel.functions[j].datatype.type == "enum") {
+                                for (let k = 0; k < this.thingsModel.functions[j].datatype.enumList.length; k++) {
+                                    if (actions[i].value == this.thingsModel.functions[j].datatype.enumList[k].value) {
+                                        value = this.thingsModel.functions[j].datatype.enumList[k].text;
+                                        break;
+                                    }
+                                }
+                            } else if (this.thingsModel.functions[j].datatype.type == "bool") {
+                                value = actions[i].value == "1" ? this.thingsModel.functions[j].datatype.trueText : this.thingsModel.functions[j].datatype.falseText;
+                            }
+                            break;
+                        }
+                    }
+                }
+                result = result + actions[i].name + "：</span><span style=\"color:#F56C6C\">" + value + "</span><br />";
+            }
+            return result;
+        },
+        /** 格式化显示CRON描述 */
+        formatCronDisplay(item) {
+            let result = "";
+            if (item.isAdvance == 0) {
+                let time = "<br /><span style=\"color:#F56C6C\">时间 " + item.cronExpression.substring(5, 7) + ":" + item.cronExpression.substring(2, 4) + "</span>";
+                let week = item.cronExpression.substring(12);
+                if (week == "1,2,3,4,5,6,7") {
+                    result = "每天 " + time;
+                } else {
+                    let weekArray = week.split(",");
+                    for (let i = 0; i < weekArray.length; i++) {
+                        if (weekArray[i] == "1") {
+                            result = result + "周一、";
+                        } else if (weekArray[i] == "2") {
+                            result = result + "周二、";
+                        } else if (weekArray[i] == "3") {
+                            result = result + "周三、";
+                        } else if (weekArray[i] == "4") {
+                            result = result + "周四、";
+                        } else if (weekArray[i] == "5") {
+                            result = result + "周五、";
+                        } else if (weekArray[i] == "6") {
+                            result = result + "周六、";
+                        } else if (weekArray[i] == "7") {
+                            result = result + "周日、";
+                        }
+                    }
+                    result = result.substring(0, result.length - 1) + " " + time;
+                }
+            } else {
+                result = "自定义Cron表达式";
+            }
+            return result;
+        },
+
+    }
+};
+</script>

vue/src/views/iot/device/device-user.vue

@@ -0,0 +1,230 @@
+<template>
+<div style="padding-left:20px;">
+    <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="selectUser" v-hasPermi="['iot:deviceUser:add']">分享设备</el-button>
+        </el-col>
+        <right-toolbar @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="deviceUserList" @selection-change="handleSelectionChange" size="mini">
+        <el-table-column label="用户昵称" align="center" prop="userName" width="200" />
+        <el-table-column label="手机号码" align="center" prop="phonenumber" width="200" />
+        <el-table-column label="设备所有者" align="center" prop="isOwner" width="100">
+            <template slot-scope="scope">
+                <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isOwner" />
+            </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime" width="150">
+            <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+            </template>
+        </el-table-column>
+        <el-table-column label="备注" align="left" prop="remark" al />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
+            <template slot-scope="scope">
+                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:deviceUser:edit']" v-if="scope.row.isOwner==0">备注</el-button>
+                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:deviceUser:remove']" v-if="scope.row.isOwner==0">删除</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改设备用户对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+            <el-form-item label="备注" prop="remark">
+                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" rows="8" />
+            </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="submitForm">确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+        </div>
+    </el-dialog>
+
+    <!-- 选择用户 -->
+    <user-list ref="userList" :device="device" />
+
+</div>
+</template>
+
+<script>
+import userList from "./user-list"
+import {
+    listDeviceUser,
+    getDeviceUser,
+    delDeviceUser,
+    updateDeviceUser
+} from "@/api/iot/deviceuser";
+
+export default {
+    name: "device-user",
+    dicts: ['iot_yes_no'],
+    components: {
+        userList
+    },
+    props: {
+        device: {
+            type: Object,
+            default: null
+        }
+    },
+    watch: {
+        // 获取到父组件传递的device后，刷新列表
+        device: function (newVal, oldVal) {
+            this.deviceInfo = newVal;
+            if (this.deviceInfo && this.deviceInfo.deviceId != 0) {
+                this.queryParams.deviceId = this.deviceInfo.deviceId;
+                this.getList();
+            }
+        }
+    },
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 设备用户表格数据
+            deviceUserList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                deviceName: null,
+                userName: null,
+                tenantName: null,
+                isOwner: null,
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                deviceName: [{
+                    required: true,
+                    message: "设备名称不能为空",
+                    trigger: "blur"
+                }],
+                userName: [{
+                    required: true,
+                    message: "用户昵称不能为空",
+                    trigger: "blur"
+                }],
+            }
+        };
+    },
+    created() {
+        this.getList();
+    },
+    methods: {
+        /** 查询设备用户列表 */
+        getList() {
+            this.loading = true;
+            listDeviceUser(this.queryParams).then(response => {
+                this.deviceUserList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                deviceId: null,
+                userId: null,
+                deviceName: null,
+                userName: null,
+                tenantId: null,
+                tenantName: null,
+                isOwner: null,
+                limitNum: null,
+                delFlag: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null
+            };
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map(item => item.deviceId)
+            this.single = selection.length !== 1
+            this.multiple = !selection.length
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "添加设备用户";
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const deviceId = row.deviceId || this.ids
+            getDeviceUser(deviceId).then(response => {
+                this.form = response.data;
+                this.open = true;
+                this.title = "用户备注";
+            });
+        },
+        /** 提交按钮 */
+        submitForm() {
+            if (this.form.deviceId != null) {
+                updateDeviceUser(this.form).then(response => {
+                    this.$modal.msgSuccess("备注成功");
+                    this.open = false;
+                    this.getList();
+                });
+            }
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const deviceIds = row.deviceId || this.ids;
+            this.$modal.confirm('是否确认删除设备用户编号为"' + deviceIds + '"的数据项？').then(function () {
+                return delDeviceUser(deviceIds);
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download('iot/deviceUser/export', {
+                ...this.queryParams
+            }, `deviceUser_${new Date().getTime()}.xlsx`)
+        },
+        // 选择用户
+        selectUser() {
+            this.$refs.userList.openSelectUser = true;
+        },
+    }
+};
+</script>

vue/src/views/iot/device/index.vue

@@ -0,0 +1,595 @@
+<template>
+<div style="padding:6px;">
+    <el-card style="margin-bottom:6px;">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="75px" style="margin-bottom:-20px;">
+            <el-form-item label="设备名称" prop="deviceName">
+                <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="产品名称" prop="productName">
+                <el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="设备状态" prop="status">
+                <el-select v-model="queryParams.status" placeholder="请选择设备状态" clearable size="small">
+                    <el-option v-for="dict in dict.type.iot_device_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="激活时间">
+                <el-date-picker v-model="daterangeActiveTime" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+            <el-form-item style="float:right;">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleEditDevice(0)" v-hasPermi="['iot:device:add']">新增</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+
+    <el-card style="padding-bottom:100px;">
+        <el-row :gutter="30" v-loading="loading">
+            <el-col :span="6" v-for="(item,index) in deviceList" :key="index" style="margin-bottom:30px;text-align:center;">
+                <el-card :body-style="{ padding: '20px'}" shadow="always">
+                    <el-row type="flex" :gutter="10" justify="space-between">
+                        <el-col :span="20" style="text-align:left;">
+                            <el-link type="" :underline="false" @click="handleEditDevice(item)" style="font-weight:bold;font-size:16px;line-height:32px;">
+                                <svg-icon icon-class="device" /> {{item.deviceName}}
+                                <el-tag size="mini" type="info">Version {{item.firmwareVersion}}</el-tag>
+                            </el-link>
+                        </el-col>
+                        <el-col :span="4">
+                            <div style="font-size:28px;color:#ccc;">
+                                <svg-icon v-if="item.status==3 && item.rssi >= '-55'" icon-class="wifi_4" />
+                                <svg-icon v-else-if="item.status==3 && item.rssi >= '-70' && item.rssi < '-55' " icon-class="wifi_3" />
+                                <svg-icon v-else-if="item.status==3 && item.rssi >= '-85' && item.rssi < '-70' " icon-class="wifi_2" />
+                                <svg-icon v-else-if="item.status==3 && item.rssi >= '-100' && item.rssi < '-85' " icon-class="wifi_1" />
+                                <svg-icon v-else icon-class="wifi_0" />
+                            </div>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="10">
+                        <el-col :span="15">
+                            <div style="text-align:left;line-height:40px;font-size:14px;">
+                                <dict-tag :options="dict.type.iot_device_status" :value="item.status" size="small" style="width:60px;display:inline-block;" />
+                                <el-tag type="success" size="small" v-if="item.isShadow==1">启用影子</el-tag>
+                                <el-tag type="info" size="small" v-else>禁用影子</el-tag>
+                            </div>
+                            <el-descriptions :column="1" size="mini">
+                                <el-descriptions-item label="编号">
+                                    {{item.serialNumber}}
+                                </el-descriptions-item>
+                                <el-descriptions-item label="产品">
+                                    {{item.productName}}
+                                </el-descriptions-item>
+                                <el-descriptions-item label="激活时间">
+                                    {{ parseTime(item.activeTime, '{y}-{m}-{d}') }}
+                                </el-descriptions-item>
+                            </el-descriptions>
+                        </el-col>
+                        <el-col :span="9">
+                            <div style="margin-top:10px;">
+                                <el-image style="width:100%;height:100px;border:1px solid #ccc;border-radius:5px;" lazy :preview-src-list="[baseUrl+item.imgUrl]" :src="baseUrl+item.imgUrl" fit="cover" v-if="item.imgUrl!=null && item.imgUrl!=''"></el-image>
+                                <!-- 用于显示本地计算机、手机、树莓派等设备图片-->
+                                <el-image style="width:100%;height:100px;border:1px solid #ccc;border-radius:5px;" :preview-src-list="[require('@/assets/images/esp8266.jpg')]" :src="require('@/assets/images/esp8266.jpg')" fit="cover" v-else-if="item.productName.indexOf('ESP8266')!=-1"></el-image>
+                                <el-image style="width:100%;height:100px;border:1px solid #ccc;border-radius:5px;" :preview-src-list="[require('@/assets/images/esp32.jpg')]" :src="require('@/assets/images/esp32.jpg')" fit="cover" v-else-if="item.productName.indexOf('ESP32')!=-1"></el-image>
+                                <el-image style="width:100%;height:100px;border:1px solid #ccc;border-radius:5px;" :preview-src-list="[require('@/assets/images/raspberry.jpg')]" :src="require('@/assets/images/raspberry.jpg')" fit="cover" v-else-if="item.productName.indexOf('Raspberry')!=-1"></el-image>
+                                <el-image style="width:100%;height:100px;border:1px solid #ccc;border-radius:5px;" :preview-src-list="[require('@/assets/images/telphone.jpg')]" :src="require('@/assets/images/telphone.jpg')" fit="cover" v-else-if="item.productName.indexOf('Phone')!=-1"></el-image>
+                                <el-image style="width:100%;height:100px;border:1px solid #ccc;border-radius:5px;" :preview-src-list="[require('@/assets/images/computer.jpg')]" :src="require('@/assets/images/computer.jpg')" fit="cover" v-else-if="item.productName.indexOf('Computer')!=-1"></el-image>
+                                <el-image style="width:100%;height:100px;border:1px solid #ccc;border-radius:5px;" :preview-src-list="[require('@/assets/images/product.jpg')]" :src="require('@/assets/images/product.jpg')" fit="cover" v-else></el-image>
+                            </div>
+                        </el-col>
+                    </el-row>
+                    <el-descriptions :column="2" border size="mini" style="height:82px;margin-top:10px;overflow:hidden;">
+                        <el-descriptions-item v-for="subItem in item.readOnlyList" :key="subItem.id" :contentStyle="{height:'40px'}">
+                            <template slot="label">
+                                <span style="white-space: nowrap;text-overflow: ellipsis;width:40px;overflow:hidden;height:40px;">{{subItem.name}}</span>
+                            </template>
+                            <el-link type="primary" :underline="false" style="white-space: nowrap;">{{subItem.shadow==""?"0":subItem.shadow}} {{subItem.unit==null?"":subItem.unit}}</el-link>
+                        </el-descriptions-item>
+                        <el-descriptions-item v-for="subItem in item.boolList" :key="subItem.id" :contentStyle="{height:'40px'}">
+                            <template slot="label">
+                                <div style="white-space: nowrap;text-overflow:ellipsis;width:40px;overflow:hidden;" :title="subItem.name">{{subItem.name}}</div>
+                            </template>
+                            <el-switch v-model="subItem.shadow" @change="publishThingsModel(item,subItem)" :active-value="'1'" :inactive-value="'0'" :disabled="shadowUnEnable(item)" />
+                        </el-descriptions-item>
+                        <el-descriptions-item v-for="subItem in item.enumList" :key="subItem.id" :contentStyle="{height:'40px'}">
+                            <template slot="label">
+                                <div style="white-space: nowrap;text-overflow:ellipsis;width:40px;overflow:hidden;" :title="subItem.name">{{subItem.name}}</div>
+                            </template>
+                            <el-select v-model="subItem.shadow" placeholder="请选择" @change="publishThingsModel(item,subItem)" clearable size="mini" :title="subItem.name" :disabled="shadowUnEnable(item)">
+                                <el-option v-for="children in subItem.enumList" :key="children.value" :label="children.text" :value="children.value" />
+                            </el-select>
+                        </el-descriptions-item>
+                        <el-descriptions-item v-for="subItem in item.decimalList" :key="subItem.id" :contentStyle="{height:'40px'}">
+                            <template slot="label">
+                                <div style="white-space: nowrap;text-overflow:ellipsis;width:40px;overflow:hidden;" :title="subItem.name">{{subItem.name}}</div>
+                            </template>
+                            <el-input v-model="subItem.shadow" :placeholder="'小数：'+subItem.name" size="mini" :title="'小数：'+subItem.name" :disabled="shadowUnEnable(item)">
+                                <el-button slot="append" icon="el-icon-s-promotion" @click="publishThingsModel(item,subItem)" style="font-size:16px;padding:10px;" title="指令发送"></el-button>
+                            </el-input>
+                        </el-descriptions-item>
+                        <el-descriptions-item v-for="subItem in item.integerList" :key="subItem.id" :contentStyle="{height:'40px'}">
+                            <template slot="label">
+                                <div style="white-space: nowrap;text-overflow:ellipsis;width:40px;overflow:hidden;" :title="subItem.name">{{subItem.name}}</div>
+                            </template>
+                            <el-input v-model="subItem.shadow" :placeholder="'整数：'+subItem.name" :title="'整数：'+subItem.name" size="mini" :disabled="shadowUnEnable(item)">
+                                <el-button slot="append" icon="el-icon-s-promotion" @click="publishThingsModel(item,subItem)" style="font-size:16px;padding:10px;" title="指令发送"></el-button>
+                            </el-input>
+                        </el-descriptions-item>
+                        <el-descriptions-item v-for="subItem in item.arrayList" :key="subItem.id" :contentStyle="{height:'40px'}">
+                            <template slot="label">
+                                <div style="white-space: nowrap;text-overflow:ellipsis;width:40px;overflow:hidden;" :title="subItem.name">{{subItem.name}}</div>
+                            </template>
+                            <el-input v-model="subItem.shadow" :placeholder="'数组：'+subItem.name" :title="'数组：'+subItem.name" size="mini" :disabled="shadowUnEnable(item)">
+                                <el-button slot="append" icon="el-icon-s-promotion" @click="publishThingsModel(item,subItem)" style="font-size:16px;padding:10px;" title="指令发送"></el-button>
+                            </el-input>
+                        </el-descriptions-item>
+                        <el-descriptions-item v-for="subItem in item.stringList" :key="subItem.id" :contentStyle="{height:'40px'}">
+                            <template slot="label">
+                                <div style="white-space: nowrap;text-overflow:ellipsis;width:40px;overflow:hidden;" :title="subItem.name">{{subItem.name}}</div>
+                            </template>
+                            <el-input v-model="subItem.shadow" :placeholder="'字符串：'+subItem.name" :title="'字符串：'+subItem.name" size="mini" :disabled="shadowUnEnable(item)">
+                                <el-button slot="append" icon="el-icon-s-promotion" @click="publishThingsModel(item,subItem)" style="font-size:16px;padding:10px;" title="指令发送"></el-button>
+                            </el-input>
+                        </el-descriptions-item>
+                    </el-descriptions>
+                    <el-button-group style="margin-top:15px;">
+                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEditDevice(item)" v-hasPermi="['iot:device:edit']">详情 </el-button>
+                        <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(item)" v-hasPermi="['iot:device:remove']">删除</el-button>
+                        <el-button type="success" size="mini" icon="el-icon-odometer" @click="handleMonitor(item)" v-hasPermi="['iot:device:edit']" :disabled="item.status!=3">实时监测</el-button>
+                    </el-button-group>
+                </el-card>
+            </el-col>
+        </el-row>
+
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+        <!-- 查看监测数据 -->
+        <el-dialog title="实时监测" :visible.sync="open" width="800px">
+            <div style="margin-top:-50px;">
+                <el-divider></el-divider>
+            </div>
+            <el-form :inline="true" label-width="100px">
+                <el-form-item label="监测间隔(ms)">
+                    <el-tooltip class="item" effect="light" content="取值范围500-10000毫秒" placement="top">
+                        <el-input v-model="monitorInterval" placeholder="请输入监测间隔" type="number" clearable size="small" style="width:180px;" />
+                    </el-tooltip>
+                </el-form-item>
+                <el-form-item label="监测次数">
+                    <el-tooltip class="item" effect="light" content="取值方位1-300" placement="top">
+                        <el-input v-model="monitorNumber" placeholder="请输入监测次数" type="number" clearable size="small" style="width:180px;" />
+                    </el-tooltip>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="success" icon="el-icon-refresh" size="mini" @click="updateMonitorParameters()" style="margin-left:30px;" :disabled="monitorDevice.status !=3">更 新</el-button>
+                </el-form-item>
+            </el-form>
+            <el-row :gutter="20" v-loading="chartLoading" element-loading-text="正在接收设备数据，请耐心等待......" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
+                <el-col :span="12" v-for="(item,index) in monitorThings" :key="index" style="margin-bottom:20px;">
+                    <el-card shadow="hover" :body-style="{ paddingTop: '10px',marginBottom:'-20px' }">
+                        <div ref="monitor" style="height:210px;padding:0"></div>
+                    </el-card>
+                </el-col>
+            </el-row>
+
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="cancel">关 闭</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- Mqtt通讯 -->
+        <mqtt-client ref="mqttClient" :publish="publish" :subscribes="subscribes" @callbackEvent="mqttCallback($event)" />
+    </el-card>
+</div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import {
+    listDeviceShort,
+    delDevice,
+} from "@/api/iot/device";
+import {
+    cacheJsonThingsModel
+} from "@/api/iot/model";
+
+export default {
+    name: "Device",
+    dicts: ['iot_device_status', 'iot_is_enable'],
+    data() {
+        return {
+            // 实时监测间隔
+            monitorInterval: 1000,
+            // 实时监测次数
+            monitorNumber: 30,
+            // 选中的实时监测设备
+            monitorDevice: {},
+            // 发布消息
+            publish: {},
+            // 订阅集合
+            subscribes: [],
+            // 图表集合
+            chart: [],
+            // 图表数据集合
+            dataList: [],
+            // 监测物模型
+            monitorThings: [],
+            // mqtt客户端
+            client: {},
+            // 遮罩层
+            loading: true,
+            // 图表遮罩层
+            chartLoading: true,
+            // 总条数
+            total: 0,
+            // 设备列表数据
+            deviceList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 激活时间范围
+            daterangeActiveTime: [],
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                deviceName: null,
+                productId: null,
+                groupId: null,
+                productName: null,
+                userId: null,
+                userName: null,
+                tenantId: null,
+                tenantName: null,
+                serialNumber: null,
+                status: null,
+                networkAddress: null,
+                activeTime: null,
+            },
+        };
+    },
+    created() {
+        this.getList();
+
+    },
+    activated() {
+        const time = this.$route.query.t;
+        if (time != null && time != this.uniqueId) {
+            this.uniqueId = time;
+            this.queryParams.pageNum = Number(this.$route.query.pageNum);
+            // 产品筛选
+            let productId = this.$route.query.productId
+            if (productId != null) {
+                this.queryParams.productId = Number(productId);
+            }
+            this.getList();
+        }
+    },
+    methods: {
+        /** 发布物模型 类型(1=属性，2=功能) */
+        publishThingsModel(device, model) {
+            // 获取缓存的Json物模型
+            cacheJsonThingsModel(device.productId).then(response => {
+                let thingsModel = JSON.parse(response.data);
+                let type = 0;
+                for (let i = 0; i < thingsModel.functions.length; i++) {
+                    if (model.id == thingsModel.functions[i].id) {
+                        type = 2;
+                        break;
+                    }
+                }
+                if (type == 0) {
+                    for (let i = 0; i < thingsModel.properties.length; i++) {
+                        if (model.id == thingsModel.properties[i].id) {
+                            type = 1;
+                            break;
+                        }
+                    }
+                }
+                if (type != 0) {
+                    this.mqttPublish(type, device, model);
+                }
+            })
+        },
+        /** 
+         * Mqtt发布消息
+         * @type 类型(1=属性，2=功能，3=OTA升级，4=实时监测)
+         * @device 设备
+         * @model 物模型
+         * */
+        mqttPublish(type, device, model) {
+            let topic = "";
+            let message = ""
+            if (type == 1) {
+                if (device.status == 3) {
+                    // 属性,在线模式
+                    topic = "/" + device.productId + "/" + device.serialNumber + "/property-online/get";
+                } else if (device.isShadow) {
+                    // 属性,离线模式
+                    topic = "/" + device.productId + "/" + device.serialNumber + "/property-offline/post";
+                }
+                message = '[{"id":"' + model.id + '","value":"' + model.shadow + '"}]';
+            } else if (type == 2) {
+                if (device.status == 3) {
+                    // 功能,在线模式
+                    topic = "/" + device.productId + "/" + device.serialNumber + "/function-online/get";
+
+                } else if (device.isShadow) {
+                    // 功能,离线模式
+                    topic = "/" + device.productId + "/" + device.serialNumber + "/function-offline/post";
+                }
+                message = '[{"id":"' + model.id + '","value":"' + model.shadow + '"}]';
+            } else if (type == 3) {
+                // OTA升级
+                topic = "/" + device.productId + "/" + device.serialNumber + "/ota/get";
+                message = '{"version":1.1}';
+            } else if (type == 4) {
+                // 实时监测
+                topic = "/" + device.productId + "/" + device.serialNumber + "/monitor/get";
+                message = '{"count":' + model.value + ',"interval":' + this.monitorInterval + '}'
+            } else {
+                return;
+            }
+            if (topic != "") {
+                // 发布
+                this.publish = {
+                    topic: topic,
+                    message: message
+                };
+                if (model.name != "") {
+                    this.$modal.notifySuccess("[ " + model.name + " ] 指令发送成功");
+                }
+            }
+        },
+        /** 接收到Mqtt回调 */
+        mqttCallback(data) {
+            let topics = [];
+            topics = data.topic.split("/");
+            let productId = topics[1];
+            let deviceNum = topics[2]
+            if (topics[3] == "status") {
+                // 更新列表中设备的状态
+                for (let i = 0; i < this.deviceList.length; i++) {
+                    if (this.deviceList[i].serialNumber == deviceNum) {
+                        this.deviceList[i].status = data.message.status;
+                        this.deviceList[i].isShadow = data.message.isShadow;
+                    }
+                }
+                // 更新实时监测模型的状态
+                if (this.monitorDevice.serialNumber == deviceNum) {
+                    this.monitorDevice.status = data.message.status;
+                    this.monitorDevice.isShadow = data.message.isShadow;
+                }
+            } else if (topics[3] == "monitor") {
+                // 实时监测
+                this.chartLoading = false;
+                for (let k = 0; k < data.message.length; k++) {
+                    let value = data.message[k].value;
+                    let id = data.message[k].id;
+                    let remark = data.message[k].remark;
+                    // 数据加载到图表
+                    for (let i = 0; i < this.dataList.length; i++) {
+                        if (id == this.dataList[i].id) {
+                            if (this.dataList[i].length > 50) {
+                                this.dataList[i].shift();
+                            }
+                            this.dataList[i].data.push([this.getTime(), value]);
+                            // 更新图表
+                            this.chart[i].setOption({
+                                series: [{
+                                    data: this.dataList[i].data
+                                }]
+                            });
+                        }
+                    }
+                }
+            }
+        },
+        /** Mqtt订阅主题 */
+        mqttSubscribe(list) {
+            // 订阅当前页面设备状态和实时监测
+            let topics = [];
+            for (let i = 0; i < list.length; i++) {
+                let topicStatus = "/" + list[i].productId + "/" + list[i].serialNumber + "/status/post";
+                let topicMonitor = "/" + list[i].productId + "/" + list[i].serialNumber + "/monitor/post";
+                topics.push(topicStatus);
+                topics.push(topicMonitor);
+            }
+            this.subscribes = topics;
+        },
+        /** 更新实时监测参数*/
+        updateMonitorParameters() {
+            // 清空图表数据
+            for (let i = 0; i < this.dataList.length; i++) {
+                this.dataList[i].data = [];
+            }
+            if (this.monitorInterval < 500 || this.monitorInterval > 10000) {
+                this.$modal.alertError("实时监测的间隔范围500-10000毫秒");
+            }
+            if (this.monitorNumber == 0 || this.monitorNumber > 300) {
+                this.$modal.alertError("实时监测数量范围1-300");
+            }
+            // Mqtt发布实时监测消息
+            let model = {};
+            model.name = "更新实时监测";
+            model.value = this.monitorNumber;
+            this.mqttPublish(4, this.monitorDevice, model);
+            this.chartLoading = true;
+        },
+        /** 查看监测数据 */
+        handleMonitor(item) {
+            this.open = true;
+            this.monitorLoading = true;
+            this.monitorDevice = item;
+            // 获取物模型
+            this.getCacheThingsModdel(item.productId);
+            // Mqtt发布实时监测
+            let model = {};
+            model.name = "";
+            model.value = this.monitorNumber;
+            this.mqttPublish(4, item, model);
+        },
+        /** 停止实时监测 */
+        stopMonitor() {
+            // 清空图表数据
+            this.dataList = [];
+            this.chartLoading = true;
+            // Mqtt发布实时监测
+            let model = {};
+            model.name = "";
+            model.value = 0;
+            this.mqttPublish(4, this.monitorDevice, model);
+        },
+        /** 查询设备列表 */
+        getList() {
+            this.loading = true;
+            if (null != this.daterangeActiveTime && '' != this.daterangeActiveTime) {
+                this.queryParams.params["beginActiveTime"] = this.daterangeActiveTime[0];
+                this.queryParams.params["endActiveTime"] = this.daterangeActiveTime[1];
+            }
+            listDeviceShort(this.queryParams).then(response => {
+                this.deviceList = response.rows;
+                this.total = response.total;
+                // 订阅设备状态
+                this.mqttSubscribe(this.deviceList);
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.stopMonitor();
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.daterangeActiveTime = [];
+            this.queryParams.productId = null;
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        /** 修改按钮操作 */
+        handleEditDevice(row) {
+            let deviceId = 0;
+            if (row != 0) {
+                deviceId = row.deviceId || this.ids
+            }
+            this.$router.push({
+                path: '/iot/device-edit',
+                query: {
+                    deviceId: deviceId,
+                    pageNum: this.queryParams.pageNum
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const deviceIds = row.deviceId || this.ids;
+            this.$modal.confirm('是否确认删除设备编号为"' + deviceIds + '"的数据项？').then(function () {
+                return delDevice(deviceIds);
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+        },
+        /** 未启用设备影子*/
+        shadowUnEnable(item) {
+            // 1-未激活，2-禁用，3-在线，4-离线
+            if (item.status != 3 && item.isShadow == 0) {
+                return true;
+            }
+            return false;
+        },
+        /** 获取物模型*/
+        getCacheThingsModdel(productId) {
+            // 获取缓存的Json物模型
+            cacheJsonThingsModel(productId).then(response => {
+                let thingsModel = JSON.parse(response.data);
+                // 筛选监测数据
+                this.monitorThings = thingsModel.properties.filter(item => item.isMonitor == 1);
+                // 监测数据集合初始化
+                for (let i = 0; i < this.monitorThings.length; i++) {
+                    this.dataList.push({
+                        id: this.monitorThings[i].id,
+                        name: this.monitorThings[i].name,
+                        data: []
+                    });
+                    // this.dataList[i].data.push(["2022-03-14 23:32:09", "30"]);
+                }
+                // 绘制监测图表
+                this.$nextTick(function () {
+                    this.getMonitorChart();
+                });
+            });
+        },
+        /**监测数据 */
+        getMonitorChart() {
+            for (let i = 0; i < this.monitorThings.length; i++) {
+                this.chart[i] = echarts.init(this.$refs.monitor[i]);
+                var option;
+                option = {
+                    title: {
+                        left: 'center',
+                        text: this.monitorThings[i].name + ' 单位 ' + (this.monitorThings[i].datatype.unit != undefined ? this.monitorThings[i].datatype.unit : "无") + "）",
+                        textStyle: {
+                            fontSize: 14,
+                        }
+                    },
+                    grid: {
+                        top: '40px',
+                        left: '20px',
+                        right: '20px',
+                        bottom: '10px',
+                        containLabel: true
+                    },
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            animation: true
+                        }
+                    },
+                    xAxis: {
+                        type: 'time',
+                        show: false,
+                        splitLine: {
+                            show: false
+                        }
+                    },
+                    yAxis: {
+                        type: 'value',
+                        boundaryGap: [0, '100%'],
+                        splitLine: {
+                            show: true
+                        }
+                    },
+                    series: [{
+                        name: this.monitorThings[i].name,
+                        type: 'line',
+                        showSymbol: false,
+                        data: this.dataList[i].data
+                    }]
+                };
+                option && this.chart[i].setOption(option);
+            }
+        },
+        getTime() {
+            let date = new Date();
+            let y = date.getFullYear();
+            let m = date.getMonth() + 1;
+            let d = date.getDate();
+            let H = date.getHours();
+            let mm = date.getMinutes();
+            let s = date.getSeconds()
+            m = m < 10 ? "0" + m : m;
+            d = d < 10 ? "0" + d : d;
+            H = H < 10 ? "0" + H : H;
+            return y + "-" + m + "-" + d + " " + H + ":" + mm + ":" + s;
+        },
+    }
+};
+</script>

vue/src/views/iot/device/mqtt-client.vue

@@ -0,0 +1,133 @@
+<template>
+<span></span>
+</template>
+
+<script>
+import mqtt from 'mqtt'
+import {
+    cacheJsonThingsModel
+} from "@/api/iot/model";
+import {
+    getToken
+} from "@/utils/auth";
+
+export default {
+    name: "mqttClient",
+    props: {
+        publish: {
+            type: Object,
+            default: null
+        },
+        subscribes: {
+            type: Array,
+            default: null
+        }
+    },
+    watch: {
+        // 获取到父组件传递的值
+        publish: function (val, oldVal) {
+            this.mqttPublish(val.topic, val.message);
+        },
+        subscribes: function (val, oldVal) {
+            this.connectMqtt(val);
+        }
+    },
+    data() {
+        return {
+            // 设备信息
+            deviceInfo: {},
+        };
+    },
+    created() {
+
+    },
+    methods: {
+        /** 连接Mqtt */
+        connectMqtt(subscribeTopics) {
+            let options = {
+                username: "wumei-smart",
+                password: getToken(),
+                cleanSession: false,
+                keepAlive: 30,
+                clientId: 'web-' + Math.random().toString(16).substr(2),
+                connectTimeout: 60000
+            }
+            this.client = mqtt.connect(process.env.VUE_APP_BROKEN_URL, options);
+            this.client.on("connect", (e) => {
+                console.log("成功连接服务器:", e);
+                // 订阅主题
+                this.client.subscribe(subscribeTopics, {
+                    qos: 1
+                }, (err) => {
+                    if (!err) {
+                        console.log("订阅成功");
+                        console.log(subscribeTopics.join(", "));
+                    } else {
+                        console.log('消息订阅失败！')
+                    }
+                });
+            });
+            // 重新连接
+            this.reconnectMqtt()
+            // 是否已经断开连接
+            this.mqttError()
+            // 监听获取信息
+            this.mqttSubscribe()
+        },
+
+        /** 发布消息 */
+        mqttPublish(topic, message) {
+            if (!this.client.connected) {
+                console.log('客户端未连接')
+                return
+            }
+            this.client.publish(topic, message, {
+                qos: 1
+            }, (err) => {
+                if (!err) {
+                    console.log('成功发布主题：' + topic)
+                    console.log('主题内容：' + message);
+                }
+            })
+        },
+
+        /** 监听Mqtt消息 */
+        mqttSubscribe() {
+            this.client.on("message", (topic, message) => {
+                console.log('收到来自', topic, '的信息', message.toString())
+                // 传递信息到父组件
+                let data = {};
+                data.topic = topic;
+                data.message = JSON.parse(message.toString());
+                this.$emit('callbackEvent', data);
+            });
+        },
+        /** 监听服务器是否连接失败 */
+        mqttError() {
+            this.client.on('error', (error) => {
+                console.log('连接失败：', error)
+                this.client.end()
+            })
+        },
+        /** 取消订阅 */
+        unsubscribeMqtt() {
+            this.client.unsubscribe(this.mtopic, (error) => {
+                console.log('主题为' + this.mtopic + '取消订阅成功', error)
+            })
+        },
+        /** 断开连接 */
+        unconnectMqtt() {
+            this.client.end()
+            this.client = null
+            console.log('服务器已断开连接！')
+        },
+        /** 监听服务器重新连接 */
+        reconnectMqtt() {
+            this.client.on('reconnect', (error) => {
+                console.log('正在重连:', error)
+            });
+        },
+
+    }
+};
+</script>

vue/src/views/iot/device/product-list.vue

@@ -0,0 +1,145 @@
+<template>
+<el-dialog title="选择产品" :visible.sync="open" width="800px">
+    <div style="margin-top:-55px;">
+        <el-divider style="margin-top:-30px;"></el-divider>
+        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+            <el-form-item label="产品名称" prop="productName">
+                <el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+
+        <el-table v-loading="loading" ref="singleTable" :data="productList" @current-change="handleCurrentChange" highlight-current-row border size="mini">
+            <el-table-column label="选择" width="50" align="center">
+                <template slot-scope="scope">
+                    <input type="radio" :checked="scope.row.isSelect" name="product" />
+                </template>
+            </el-table-column>
+            <el-table-column label="产品名称" align="center" prop="productName" />
+            <el-table-column label="分类名称" align="center" prop="categoryName" />
+            <el-table-column label="状态" align="center" prop="status">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.iot_product_status" :value="scope.row.status" />
+                </template>
+            </el-table-column>
+            <el-table-column label="联网方式" align="center" prop="networkMethod">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.iot_network_method" :value="scope.row.networkMethod" />
+                </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center" prop="createTime" width="150">
+                <template slot-scope="scope">
+                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+    </div>
+    <div slot="footer" class="dialog-footer">
+        <el-button @click="confirmSelectProduct" type="primary">确定</el-button>
+        <el-button @click="closeDialog" type="info">关 闭</el-button>
+    </div>
+</el-dialog>
+</template>
+
+<script>
+import {
+    listProduct,
+} from "@/api/iot/product";
+
+export default {
+    name: "Product",
+    dicts: [ 'iot_product_status', 'iot_network_method'],
+    props: {
+        productId: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 总条数
+            total: 0,
+            // 打开选择产品对话框
+            open: false,
+            // 产品列表
+            productList: [],
+            // 选中的产品
+            product: {},
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                productName: null,
+                categoryId: null,
+                categoryName: null,
+                tenantId: null,
+                tenantName: null,
+                isSys: null,
+                status: 2, //已发布
+                deviceType: null,
+                networkMethod: null,
+            },
+        };
+    },
+    created() {
+
+    },
+    methods: {
+        /** 查询产品列表 */
+        getList() {
+            this.loading = true;
+            listProduct(this.queryParams).then(response => {
+                this.productList = response.rows;
+                this.total = response.total;
+                if (this.productId != 0) {
+                    this.setRadioSelected(this.productId);
+                }
+                this.loading = false;
+            });
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        /** 单选数据 */
+        handleCurrentChange(product) {
+            if (product != null) {
+                this.setRadioSelected(product.productId);
+                this.product = product;
+            }
+        },
+        /** 设置单选按钮选中 */
+        setRadioSelected(productId) {
+            for (let i = 0; i < this.productList.length; i++) {
+                if (this.productList[i].productId == productId) {
+                    this.productList[i].isSelect = true;                    
+                } else {
+                    this.productList[i].isSelect = false;
+                }
+            }
+        },
+        /**确定选择产品，产品传递给父组件 */
+        confirmSelectProduct() {
+            this.$emit('productEvent', this.product);
+            this.open = false;
+        },
+        /**关闭对话框 */
+        closeDialog() {
+            this.open = false;
+        }
+    }
+};
+</script>

vue/src/views/iot/device/running-status.vue

@@ -0,0 +1,423 @@
+<template>
+<div style="padding-left:20px;">
+    <el-row :gutter="80">
+        <el-col :span="9">
+            <el-descriptions :column="1" border :title="title">
+                <!-- 设备升级-->
+                <el-descriptions-item :labelStyle="statusColor">
+                    <template slot="label">
+                        <svg-icon icon-class="ota" />
+                        OTA升级
+                    </template>
+                    <el-link :underline="false" style="line-height:28px;font-size:16px;padding-right:10px;">Version {{deviceInfo.firmwareVersion}}</el-link>
+                    <el-link type="success" :underline="false" style="font-size:12px;display:none;">已经是最新版本</el-link>
+                    <el-button type="success" size="mini" style="float:right;" @click="otaUpgrade()" :disabled="deviceInfo.status!=3">升级</el-button>
+                </el-descriptions-item>
+                <!-- bool类型-->
+                <el-descriptions-item v-for="(item,index) in deviceInfo.boolList" :key="index" :labelStyle="statusColor">
+                    <template slot="label">
+                        <i class="el-icon-open"></i>
+                        {{item.name}}
+                    </template>
+                    <el-switch v-model="item.shadow" @change="publishThingsModel(deviceInfo,item)" active-text="" inactive-text="" active-value="1" inactive-value="0" style="min-width:100px;" :disabled="shadowUnEnable" />
+                </el-descriptions-item>
+
+                <!-- enum类型-->
+                <el-descriptions-item v-for="(item,index) in deviceInfo.enumList" :key="index" :labelStyle="statusColor">
+                    <template slot="label">
+                        <i class="el-icon-s-unfold"></i>
+                        {{item.name}}
+                    </template>
+                    <el-select v-model="item.shadow" placeholder="请选择" @change="publishThingsModel(deviceInfo,item)" clearable :disabled="shadowUnEnable">
+                        <el-option v-for="subItem in item.enumList" :key="subItem.value" :label="subItem.text" :value="subItem.value" />
+                    </el-select>
+                </el-descriptions-item>
+
+                <!-- string类型-->
+                <el-descriptions-item v-for="(item,index) in deviceInfo.stringList" :key="index" :labelStyle="statusColor">
+                    <template slot="label">
+                        <i class="el-icon-tickets"></i>
+                        {{item.name}}
+                    </template>
+                    <el-input v-model="item.shadow" placeholder="请输入字符串" :disabled="shadowUnEnable">
+                        <el-button slot="append" icon="el-icon-s-promotion" @click="publishThingsModel(deviceInfo,item)" style="font-size:20px;" title="指令发送"></el-button>
+                    </el-input>
+                </el-descriptions-item>
+
+                <!-- array类型-->
+                <el-descriptions-item v-for="(item,index) in deviceInfo.arrayList" :key="index" :labelStyle="statusColor">
+                    <template slot="label">
+                        <i class="el-icon-tickets"></i>
+                        {{item.name}}
+                    </template>
+                    <el-input v-model="item.shadow" placeholder="请输入英文逗号分隔的字符串" :disabled="shadowUnEnable">
+                        <el-button slot="append" icon="el-icon-s-promotion" @click="publishThingsModel(deviceInfo,item)" style="font-size:20px;" title="指令发送"></el-button>
+                    </el-input>
+                </el-descriptions-item>
+
+                <!-- decimal类型-->
+                <el-descriptions-item v-for="(item,index) in deviceInfo.decimalList" :key="index" :labelStyle="statusColor">
+                    <template slot="label">
+                        <i class="el-icon-star-off"></i>
+                        {{item.name}}
+                    </template>
+                    <el-input v-model="item.shadow" type="number" placeholder="请输入小数 " :disabled="shadowUnEnable">
+                        <el-button slot="append" icon="el-icon-s-promotion" @click="publishThingsModel(deviceInfo,item)" style="font-size:20px;" title="指令发送"></el-button>
+                    </el-input>
+                </el-descriptions-item>
+
+                <!-- integer类型-->
+                <el-descriptions-item v-for="(item,index) in deviceInfo.integerList" :key="index" :labelStyle="statusColor">
+                    <template slot="label">
+                        <i class="el-icon-paperclip"></i>
+                        {{item.name}}
+                    </template>
+                    <el-input v-model="item.shadow" type="integer" placeholder="请输入整数 " :disabled="shadowUnEnable">
+                        <el-button slot="append" icon="el-icon-s-promotion" @click="publishThingsModel(deviceInfo,item)" style="font-size:20px;" title="指令发送"></el-button>
+                    </el-input>
+                </el-descriptions-item>
+            </el-descriptions>
+
+            <!-- 监测数据-->
+            <el-descriptions :column="2" border style="margin:40px 0;" title="监测数据">
+                <el-descriptions-item v-for="(item,index) in deviceInfo.readOnlyList" :key="index">
+                    <template slot="label">
+                        <i class="el-icon-odometer"></i>
+                        {{item.name}}
+                    </template>
+                    <el-link type="primary" :underline="false">{{item.shadow}} {{item.unit==null?"":item.unit}}</el-link>
+                </el-descriptions-item>
+            </el-descriptions>
+
+            <!---设备状态(影子模式，value值不会更新)-->
+            <el-descriptions :column="1" border size="mini" v-if="deviceInfo.isShadow==1 && deviceInfo.status!=3">
+                <template slot="title">
+                    <span style="font-size:14px;color:#606266;">设备处于离线状态</span>
+                </template>
+                <!-- bool类型-->
+                <el-descriptions-item v-for="(item,index) in deviceInfo.boolList" :key="index">
+                    <template slot="label">
+                        <i class="el-icon-open"></i>
+                        {{item.name}}
+                    </template>
+                    <el-switch v-model="item.value" size="mini" active-text="" inactive-text="" active-value="1" inactive-value="0" style="min-width:100px;" disabled />
+                </el-descriptions-item>
+
+                <!-- enum类型-->
+                <el-descriptions-item v-for="(item,index) in deviceInfo.enumList" :key="index">
+                    <template slot="label">
+                        <i class="el-icon-s-unfold"></i>
+                        {{item.name}}
+                    </template>
+                    <el-select v-model="item.value" placeholder="请选择" clearable size="mini" disabled >
+                        <el-option v-for="subItem in item.enumList" :key="subItem.value" :label="subItem.text" :value="subItem.value" />
+                    </el-select>
+                </el-descriptions-item>
+
+                <!-- string类型-->
+                <el-descriptions-item v-for="(item,index) in deviceInfo.stringList" :key="index">
+                    <template slot="label">
+                        <i class="el-icon-tickets"></i>
+                        {{item.name}}
+                    </template>
+                    <el-input v-model="item.value" placeholder="请输入字符串" size="mini" disabled></el-input>
+                </el-descriptions-item>
+
+                <!-- array类型-->
+                <el-descriptions-item v-for="(item,index) in deviceInfo.arrayList" :key="index">
+                    <template slot="label">
+                        <i class="el-icon-tickets"></i>
+                        {{item.name}}
+                    </template>
+                    <el-input v-model="item.value" placeholder="请输入英文逗号分隔的字符串" size="mini" disabled></el-input>
+                </el-descriptions-item>
+
+                <!-- decimal类型-->
+                <el-descriptions-item v-for="(item,index) in deviceInfo.decimalList" :key="index">
+                    <template slot="label">
+                        <i class="el-icon-star-off"></i>
+                        {{item.name}}
+                    </template>
+                    <el-input v-model="item.value" type="number" placeholder="请输入小数" size="mini" disabled></el-input>
+                </el-descriptions-item>
+
+                <!-- integer类型-->
+                <el-descriptions-item v-for="(item,index) in deviceInfo.integerList" :key="index">
+                    <template slot="label">
+                        <i class="el-icon-paperclip"></i>
+                        {{item.name}}
+                    </template>
+                    <el-input v-model="item.value" type="integer" placeholder="请输入整数 " size="mini" disabled></el-input>
+                </el-descriptions-item>
+            </el-descriptions>
+
+            <!-- Mqtt通讯 -->
+            <mqtt-client ref="mqttClient" :publish="publish" :subscribes="subscribes" @callbackEvent="mqttCallback($event)" />
+        </el-col>
+
+        <el-col :span="14" :offset="1">
+            <el-row :gutter="20" style="background-color:#F5F7FA;padding:20px;padding-left:10px;">
+                <el-col :span="8" v-for="(item,index) in deviceInfo.readOnlyList" :key="index" style="margin-bottom:20px;">
+                    <el-card shadow="hover" style="border-radius:30px;">
+                        <div ref="map" style="height:230px;width:180px;margin:0 auto;margin-top:-10px;"></div>
+                    </el-card>
+                </el-col>
+            </el-row>
+        </el-col>
+    </el-row>
+</div>
+</template>
+
+<script>
+import {
+    getDeviceRunningStatus
+} from "@/api/iot/device"
+import {
+    cacheJsonThingsModel
+} from "@/api/iot/model";
+import * as echarts from 'echarts';
+
+export default {
+    name: "running-status",
+    dicts: ['iot_yes_no'],
+    props: {
+        device: {
+            type: Object,
+            default: null
+        }
+    },
+    watch: {
+        // 获取到父组件传递的device后，刷新列表
+        device: function (newVal, oldVal) {
+            this.deviceInfo = newVal;
+            if (this.deviceInfo && this.deviceInfo.deviceId != 0) {
+                getDeviceRunningStatus(this.deviceInfo.deviceId).then(response => {
+                    this.deviceInfo = response.data;
+                    this.updateDeviceStatus(this.deviceInfo);
+                    this.$nextTick(function () {
+                        this.MonitorChart();
+                    });
+                    // Mqtt订阅主题
+                    this.mqttSubscribe(this.deviceInfo);
+                });
+            }
+        }
+    },
+    data() {
+        return {
+            // 发布消息
+            publish: {},
+            // 订阅集合
+            subscribes: [],
+            // 控制模块标题
+            title: "设备控制 ",
+            // 未启用设备影子
+            shadowUnEnable: false,
+            // 控制项标题背景
+            statusColor: {
+                background: '#67C23A',
+                color: '#fff',
+            },
+            // 遮罩层
+            loading: true,
+            // 设备信息
+            deviceInfo: {
+                boolList: [],
+                enumList: [],
+                stringList: [],
+                integerList: [],
+                decimalList: [],
+                arrayList: [],
+                readonlyList: []
+            },
+        }
+    },
+    created() {
+
+    },
+    methods: {
+        /** 发布物模型 类型(1=属性，2=功能) */
+        publishThingsModel(device, model) {
+            // 获取缓存的Json物模型
+            cacheJsonThingsModel(device.productId).then(response => {
+                let thingsModel = JSON.parse(response.data);
+                let type = 0;
+                for (let i = 0; i < thingsModel.functions.length; i++) {
+                    if (model.id == thingsModel.functions[i].id) {
+                        type = 2;
+                        break;
+                    }
+                }
+                if (type == 0) {
+                    for (let i = 0; i < thingsModel.properties.length; i++) {
+                        if (model.id == thingsModel.properties[i].id) {
+                            type = 1;
+                            break;
+                        }
+                    }
+                }
+                if (type != 0) {
+                    this.mqttPublish(type, device, model);
+                }
+            })
+        },
+        /** 
+         * Mqtt发布消息
+         * @type 类型(1=属性，2=功能，3=OTA升级，4=实时监测)
+         * @device 设备
+         * @model 物模型
+         * */
+        mqttPublish(type, device, model) {
+            let topic = "";
+            let message = ""
+            if (type == 1) {
+                if (device.status == 3) {
+                    // 属性,在线模式
+                    topic = "/" + device.productId + "/" + device.serialNumber + "/property-online/get";
+                } else if (device.isShadow) {
+                    // 属性,离线模式
+                    topic = "/" + device.productId + "/" + device.serialNumber + "/property-offline/post";
+                }
+                message = '[{"id":"' + model.id + '","value":"' + model.shadow + '"}]';
+            } else if (type == 2) {
+                if (device.status == 3) {
+                    // 功能,在线模式
+                    topic = "/" + device.productId + "/" + device.serialNumber + "/function-online/get";
+
+                } else if (device.isShadow) {
+                    // 功能,离线模式
+                    topic = "/" + device.productId + "/" + device.serialNumber + "/function-offline/post";
+                }
+                message = '[{"id":"' + model.id + '","value":"' + model.shadow + '"}]';
+            } else if (type == 3) {
+                // OTA升级
+                topic = "/" + device.productId + "/" + device.serialNumber + "/ota/get";
+                message = '{"version":' + device.firmwareVersion + '}';
+            } else {
+                return;
+            }
+            if (topic != "") {
+                // 发布
+                this.publish = {
+                    topic: topic,
+                    message: message
+                }
+                if (model) {
+                    this.$modal.notifySuccess("[ " + model.name + " ] 指令发送成功");
+                }
+            }
+        },
+        /** 接收到Mqtt回调 */
+        mqttCallback(data) {
+            let topics = [];
+            topics = data.topic.split("/");
+            let productId = topics[1];
+            let deviceNum = topics[2]
+            if (topics[3] == "status") {
+                // 更新列表中设备的状态
+                this.deviceInfo.status = data.message.status;
+                this.deviceInfo.isShadow = data.message.isShadow;
+                this.updateDeviceStatus(this.deviceInfo);
+            }
+        },
+        /** Mqtt订阅主题 */
+        mqttSubscribe(device) {
+            // 订阅当前设备状态
+            let topic = "/" + device.productId + "/" + device.serialNumber + "/status/post";
+            this.subscribes = [topic];
+        },
+        /** 更新设备状态 */
+        updateDeviceStatus(device) {
+            if (device.status == 3) {
+                this.statusColor.background = '#67C23A';
+                this.title = "设备控制（在线）";
+            } else {
+                if (device.isShadow == 1) {
+                    this.statusColor.background = '#409EFF';
+                    this.title = "设备控制（影子模式）";
+                } else {
+                    this.statusColor.background = '#909399';
+                    this.title = "设备控制（设备不在线 未启用影子）";
+                    this.shadowUnEnable = true;
+                }
+            }
+        },
+        /** 设备升级 */
+        otaUpgrade() {
+            let model = {};
+            model.name = "设备升级"
+            this.mqttPublish(3, this.deviceInfo, model);
+        },
+        /**监测图表*/
+        MonitorChart() {
+            for (let i = 0; i < this.deviceInfo.readOnlyList.length; i++) {
+                var myChart = echarts.init(this.$refs.map[i]);
+                var option;
+                option = {
+                    tooltip: {
+                        formatter: ' {b} <br/> {c}' + this.deviceInfo.readOnlyList[i].unit
+                    },
+                    series: [{
+                        name: this.deviceInfo.readOnlyList[i].type,
+                        type: 'gauge',
+                        min: this.deviceInfo.readOnlyList[i].min,
+                        max: this.deviceInfo.readOnlyList[i].max,
+                        colorBy: 'data',
+                        splitNumber: 10,
+                        radius: '100%',
+                        // 分割线
+                        splitLine: {
+                            distance: 4,
+                        },
+                        axisLabel: {
+                            fontSize: 10,
+                            distance: 10
+                        },
+                        // 刻度线
+                        axisTick: {
+                            distance: 4,
+                        },
+                        // 仪表盘轴线
+                        axisLine: {
+                            lineStyle: {
+                                width: 8,
+                                color: [
+                                    [0.3, '#409EFF'], // 0~30% 
+                                    [0.7, '#67C23A'], // 30~70%
+                                    [1, '#F56C6C'], // 70~100%
+                                ],
+                                opacity: 0.3
+                            }
+
+                        },
+                        pointer: {
+                            icon: 'triangle',
+                            length: '60%',
+                            width: 7
+                        },
+                        progress: {
+                            show: true,
+                            width: 8,
+                        },
+                        detail: {
+                            valueAnimation: true,
+                            formatter: '{value}' + ' ' + this.deviceInfo.readOnlyList[i].unit,
+                            offsetCenter: [0, "80%"],
+                            fontSize: 20,
+                        },
+                        data: [{
+                            value: this.deviceInfo.readOnlyList[i].shadow,
+                            name: this.deviceInfo.readOnlyList[i].name
+                        }],
+                        title: {
+                            offsetCenter: [0, "115%"],
+                            fontSize: 16
+                        }
+                    }]
+                };
+                option && myChart.setOption(option);
+            }
+        }
+    },
+}
+</script>

vue/src/views/iot/device/user-list.vue

@@ -0,0 +1,168 @@
+<template>
+<el-dialog title="选择产品" :visible.sync="openSelectUser" width="800px">
+    <div style="margin-top:-50px;">
+        <el-divider></el-divider>
+    </div>
+    <!--用户数据-->
+    <el-form :model="queryParams" ref="queryForm" :rules="rules" :inline="true" label-width="80px">
+        <el-form-item label="手机号码" prop="phonenumber">
+            <el-input type="text" placeholder="请输入用户手机号码" v-model="queryParams.phonenumber" minlength="10" clearable size="small" show-word-limit style="width: 240px" @keyup.enter.native="handleQuery"></el-input>
+        </el-form-item>
+        <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
+        </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="userList" highlight-current-row size="mini" @current-change="handleCurrentChange" border>
+        <el-table-column label="选择" width="50" align="center">
+            <template slot-scope="scope">
+                <input type="radio" :checked="scope.row.isSelect" name="user" />
+            </template>
+        </el-table-column>
+        <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" />
+        <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="120" />
+        <el-table-column label="创建时间" align="center" prop="createTime" width="160">
+            <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+        </el-table-column>
+
+    </el-table>
+    <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="addDeviceUser">添加</el-button>
+        <el-button @click="closeSelectUser">关 闭</el-button>
+    </div>
+</el-dialog>
+</template>
+
+<script>
+import {
+    listUser
+} from "@/api/system/user";
+import {
+    addDeviceUser,
+} from "@/api/iot/deviceuser";
+
+export default {
+    name: "user-list",
+    props: {
+        device: {
+            type: Object,
+            default: null
+        }
+    },
+    watch: {
+        // 获取到父组件传递的device
+        device: function (newVal, oldVal) {
+            this.deviceInfo = newVal;
+        }
+    },
+    data() {
+        return {
+            // 遮罩层
+            loading: false,
+            // 选中数组
+            ids: [],
+            // 弹出层标题
+            title: "",
+            // 用户列表
+            userList: [],
+            // 选中的用户
+            user: {},
+            // 设备信息
+            deviceInfo: {},
+            // 是否显示选择用户弹出层
+            openSelectUser: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                userName: undefined,
+                phonenumber: undefined,
+                status: 0,
+                deptId: undefined
+            },
+            // 表单校验
+            rules: {
+                phonenumber: [{
+                    required: true,
+                    message: "手机号码不能为空",
+                    trigger: "blur"
+                }, {
+                    min: 11,
+                    max: 11,
+                    message: '手机号码长度为11位',
+                    trigger: 'blur'
+                }],
+            },
+        };
+    },
+    created() {},
+    methods: {
+        /** 查询用户列表 */
+        getList() {
+            this.loading = true;
+            listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+                this.userList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.$refs["queryForm"].validate(valid => {
+                if (valid) {
+                    this.queryParams.pageNum = 1;
+                    this.getList();
+                }
+            });
+
+        },
+        // 重置查询
+        resetQuery() {
+            this.$refs["queryForm"].resetFields();
+            this.userList = [];
+        },
+        //设置单选按钮选中
+        setRadioSelected(userId) {
+            for (let i = 0; i < this.userList.length; i++) {
+                if (this.userList[i].userId == userId) {
+                    this.userList[i].isSelect = true;
+                    this.user = this.userList[i];
+                } else {
+                    this.userList[i].isSelect = false;
+                }
+            }
+        },
+        // 单选数据
+        handleCurrentChange(user) {
+            if (user != null) {
+                this.setRadioSelected(user.userId);
+                this.user = user;
+            }
+        },
+        // 关闭选择用户
+        closeSelectUser() {
+            this.openSelectUser = false;
+            this.resetQuery();
+        },
+        // 添加设备用户
+        addDeviceUser() {
+            if (this.deviceInfo.deviceId != null) {
+                var form = {};
+                form.deviceId = this.deviceInfo.deviceId;
+                form.deviceName = this.deviceInfo.deviceName;
+                form.userId = this.user.userId;
+                form.userName = this.user.userName;
+                form.phonenumber=this.user.phonenumber;
+                addDeviceUser(form).then(response => {
+                    this.$modal.msgSuccess("新增成功");
+                    this.resetQuery();
+                    this.openSelectUser = false;
+                    this.$parent.getList();
+                });
+            }
+        },
+    }
+};
+</script>

vue/src/views/iot/emqx/client.vue

@@ -0,0 +1,136 @@
+<template>
+<div style="padding:6px;">
+    <el-card v-show="showSearch" style="margin-bottom:6px;">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
+            <el-form-item label="客户端" prop="categoryName">
+                <el-input v-model="queryParams.categoryName" placeholder="请输入客户端ID" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+
+    <el-card style="padding-bottom:100px;">
+        <el-table v-loading="loading" :data="clientList">
+            <el-table-column label="客户端ID" align="left" header-align="center" prop="clientid">
+                <template slot-scope="scope">
+                    <el-link :underline="false" type="primary">{{scope.row.clientid}}</el-link>
+                </template>
+            </el-table-column>
+            <el-table-column label="节点" align="center" prop="node" width="120" />
+            <el-table-column label="IP地址" align="center" prop="ip_address" />
+            <el-table-column label="类型" align="center" prop="type">
+                <template slot-scope="scope">
+                    <el-tag type="danger" v-if="scope.row.clientid.indexOf('server')==0">服务端</el-tag>
+                    <el-tag type="success" v-else-if="scope.row.clientid.indexOf('web')==0">Web端</el-tag>
+                    <el-tag type="warning" v-else-if="scope.row.clientid.indexOf('phone')==0">移动端</el-tag>
+                    <el-tag type="info" v-else-if="scope.row.clientid.indexOf('test')==0">测试端</el-tag>
+                    <el-tag type="primary" v-else>设备端</el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column label="连接状态" align="center" prop="connected">
+                <template slot-scope="scope">
+                    <el-tag type="success" v-if="scope.row.connected">已连接</el-tag>
+                    <el-tag type="info" v-else>已断开</el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column label="心跳(秒)" align="center" prop="keepalive" width="100" />
+            <el-table-column label="会话过期间隔" align="center" prop="expiry_interval" width="100" />
+            <el-table-column label="当前订阅数量" align="center" prop="subscriptions_cnt" width="100" />
+            <el-table-column label="连接时间" align="center" prop="connected_at" />
+            <el-table-column label="会话创建时间" align="center" prop="created_at" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
+                <template slot-scope="scope">
+                    <el-button size="small" type="danger" v-if="scope.row.connected" style="padding:5px;" v-hasPermi="['monitor:online:edit']">
+                        <svg-icon icon-class="disconnect" /> 断开连接
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams._page" :limit.sync="queryParams._limit" @pagination="getList" />
+
+        <!-- 添加或修改产品分类对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+            <el-form ref="form" :model="form" label-width="80px">
+                <el-form-item label="分类名称" prop="categoryName">
+                    <el-input v-model="form.categoryName" placeholder="请输入产品分类名称" />
+                </el-form-item>
+                <el-form-item label="显示顺序" prop="orderNum">
+                    <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="cancel">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+    </el-card>
+</div>
+</template>
+
+<script>
+import {
+    listMqttClient
+} from "@/api/iot/emqx"
+
+export default {
+    name: "Category",
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 产品分类表格数据
+            clientList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                _limit: 10,
+                _page: 1,
+            },
+            // 表单参数
+            form: {},
+        };
+    },
+    created() {
+        this.getList();
+
+    },
+    methods: {
+        /** 查询客户端列表 */
+        getList() {
+            this.loading = true;
+            listMqttClient(this.queryParams).then(response => {
+                this.clientList = response.data.data;
+                this.total = response.data.meta.count;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+    }
+};
+</script>

vue/src/views/iot/emqx/listener.vue

@@ -0,0 +1,80 @@
+<template>
+<div style="padding:6px;">
+    <el-card style="padding-bottom:100px;">
+        <el-table v-loading="loading" :data="listenerList">
+            <el-table-column label="协议" align="center" prop="protocol" />
+            <el-table-column label="监听地址" align="center" prop="listen_on"  />
+            <el-table-column label="最大连接数" align="center" prop="max_conns" />
+            <el-table-column label="当前连接数" align="center" prop="current_conns"/>            
+            <el-table-column label="连接成功数" align="center" prop="acceptors" />
+            <el-table-column label="账号错误数" align="center" prop="shutdown_count.bad_username_or_password" />
+            <el-table-column label="功能错误数" align="center" prop="shutdown_count.function_clause" />
+            <el-table-column label="SSL关闭数" align="center" prop="shutdown_count.ssl_closed" />
+        </el-table>
+
+        <!-- 添加或修改产品分类对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+            <el-form ref="form" :model="form" label-width="80px">
+                <el-form-item label="分类名称" prop="categoryName">
+                    <el-input v-model="form.categoryName" placeholder="请输入产品分类名称" />
+                </el-form-item>
+                <el-form-item label="显示顺序" prop="orderNum">
+                    <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="cancel">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+    </el-card>
+</div>
+</template>
+
+<script>
+import{listMqttListener} from "@/api/iot/emqx"
+
+
+export default {
+    name: "Category",
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 列表
+            listenerList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 表单参数
+            form: {},
+        };
+    },
+    created() {
+        this.getList();
+        
+    },
+    methods: {
+        /** 查询客户端列表 */
+        getList() {
+            this.loading = true;
+            listMqttListener().then(response => {
+                this.listenerList=response.data.data[0].listeners;
+                console.log(response);
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },    
+    }
+};
+</script>

vue/src/views/iot/emqx/plugin.vue

@@ -0,0 +1,133 @@
+<template>
+<div style="padding:6px;">
+    <el-card style="padding-bottom:100px;">
+        <el-table v-loading="loading" :data="pluginList">
+            <el-table-column label="插件名称" align="center" prop="name" width="300" />
+            <el-table-column label="版本" align="center" prop="version" width="100" />
+            <el-table-column label="类型" align="center" prop="type" width="120" />
+            <el-table-column label="状态" align="center" prop="active" width="150">
+                <template slot-scope="scope">
+                    <el-tag type="success" v-if="scope.row.active">运行中</el-tag>
+                    <el-tag type="info" v-else>已停止</el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column label="描述" align="left" prop="description" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
+                <template slot-scope="scope">
+                    <el-button size="small" type="success" style="padding:5px;" @click="loadMqttPlugin(scope.row.name)" v-if="!scope.row.active" v-hasPermi="['monitor:online:edit']">
+                    <svg-icon icon-class="start" /> 启动
+                    </el-button>
+                    <el-button size="small" type="danger" style="padding:5px;" @click="unloadMqttPlugin(scope.row.name)" v-else v-hasPermi="['monitor:online:edit']">
+                    <svg-icon icon-class="stop" /> 停止
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <!-- 添加或修改产品分类对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+            <el-form ref="form" :model="form" label-width="80px">
+                <el-form-item label="分类名称" prop="categoryName">
+                    <el-input v-model="form.categoryName" placeholder="请输入产品分类名称" />
+                </el-form-item>
+                <el-form-item label="显示顺序" prop="orderNum">
+                    <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="cancel">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+    </el-card>
+</div>
+</template>
+
+<script>
+import {
+    listMqttPlugin,
+    loadMqttPlugin,
+    unloadMqttPlugin
+} from "@/api/iot/emqx"
+
+export default {
+    name: "Category",
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 列表
+            pluginList: [],
+            // 节点名称
+            node: "",
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 表单参数
+            form: {},
+        };
+    },
+    created() {
+        this.getList();
+
+    },
+    methods: {
+        /** 查询客户端列表 */
+        getList() {
+            this.loading = true;
+            listMqttPlugin().then(response => {
+                this.pluginList = response.data.data[0].plugins;
+                this.node = response.data.data[0].node;
+                this.loading = false;
+            });
+        },
+        /** 启用插件*/
+        loadMqttPlugin(plugin) {
+            this.$confirm('是否启用插件：' + plugin + ' ?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                loadMqttPlugin(this.node, plugin).then(response => {
+                    if (response.data.code == 0) {
+                        this.getList();
+                        this.$message({
+                            type: 'success',
+                            message: '成功启用插件!'
+                        });
+                    }
+                })
+            }).catch(() => {});
+        },
+        /** 卸载插件*/
+        unloadMqttPlugin(plugin) {
+            this.$confirm('是否停止插件：' + plugin + ' ?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                unloadMqttPlugin(this.node, plugin).then(response => {
+                    if (response.data.code == 0) {
+                        this.getList();
+                        this.$message({
+                            type: 'success',
+                            message: '成功停止插件!'
+                        });
+                    }
+                })
+            }).catch(() => {});
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+    }
+};
+</script>

vue/src/views/iot/emqx/subscribe.vue

@@ -0,0 +1,123 @@
+<template>
+<div style="padding:6px;">
+    <el-card v-show="showSearch" style="margin-bottom:6px;">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
+            <el-form-item label="客户端" prop="categoryName">
+                <el-input v-model="queryParams.categoryName" placeholder="请输入客户端ID" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+
+    <el-card style="padding-bottom:100px;">
+        <el-table v-loading="loading" :data="subscribeList">
+            <el-table-column label="类型" align="center" prop="type" width="150">
+                <template slot-scope="scope">
+                    <el-tag type="danger" v-if="scope.row.clientid.indexOf('server')==0">服务端</el-tag>
+                    <el-tag type="success" v-else-if="scope.row.clientid.indexOf('web')==0">Web端</el-tag>
+                    <el-tag type="warning" v-else-if="scope.row.clientid.indexOf('phone')==0">移动端</el-tag>
+                    <el-tag type="info" v-else-if="scope.row.clientid.indexOf('test')==0">测试端</el-tag>
+                    <el-tag type="primary" v-else>设备端</el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column label="主题" align="left" header-align="center" prop="topic">
+                <template slot-scope="scope">
+                    <span style="font-weight:bold">{{scope.row.topic}}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="客户端ID" align="center" header-align="center" prop="clientid">
+                <template slot-scope="scope">
+                    <el-link :underline="false">{{scope.row.clientid}}</el-link>
+                </template>
+            </el-table-column>
+            <el-table-column label="Qos" align="center" prop="qos" width="100" />
+            <el-table-column label="节点" align="center" prop="node" />
+        </el-table>
+
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams._page" :limit.sync="queryParams._limit" @pagination="getList" />
+
+        <!-- 添加或修改产品分类对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+            <el-form ref="form" :model="form" label-width="80px">
+                <el-form-item label="分类名称" prop="categoryName">
+                    <el-input v-model="form.categoryName" placeholder="请输入产品分类名称" />
+                </el-form-item>
+                <el-form-item label="显示顺序" prop="orderNum">
+                    <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="cancel">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+    </el-card>
+</div>
+</template>
+
+<script>
+import {
+    listMqttSubscribe
+} from "@/api/iot/emqx"
+
+export default {
+    name: "Category",
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 列表
+            subscribeList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                _limit: 10,
+                _page: 1,
+            },
+            // 表单参数
+            form: {},
+        };
+    },
+    created() {
+        this.getList();
+
+    },
+    methods: {
+        /** 查询客户端列表 */
+        getList() {
+            this.loading = true;
+            listMqttSubscribe(this.queryParams).then(response => {
+                this.subscribeList = response.data.data;
+                this.total = response.data.meta.count;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+    }
+};
+</script>

vue/src/views/iot/emqx/topic.vue

@@ -0,0 +1,103 @@
+<template>
+<div style="padding:6px;">
+    <el-card v-show="showSearch" style="margin-bottom:6px;">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
+            <el-form-item label="主题" prop="categoryName">
+                <el-input v-model="queryParams.categoryName" placeholder="请输入主题" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+
+    <el-card style="padding-bottom:100px;">
+        <el-table v-loading="loading" :data="topicList">
+            <el-table-column label="节点" align="center" prop="node" width="300"/>
+            <el-table-column label="主题" align="left" prop="topic" />
+        </el-table>
+
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams._page" :limit.sync="queryParams._limit" @pagination="getList" />
+
+        <!-- 添加或修改产品分类对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+            <el-form ref="form" :model="form" label-width="80px">
+                <el-form-item label="分类名称" prop="categoryName">
+                    <el-input v-model="form.categoryName" placeholder="请输入产品分类名称" />
+                </el-form-item>
+                <el-form-item label="显示顺序" prop="orderNum">
+                    <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="cancel">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+    </el-card>
+</div>
+</template>
+
+<script>
+import{listMqttTopic} from "@/api/iot/emqx"
+
+
+export default {
+    name: "Category",
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 列表
+            topicList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                _limit: 10,
+                _page: 1,
+            },
+            // 表单参数
+            form: {},
+        };
+    },
+    created() {
+        this.getList();
+        
+    },
+    methods: {
+        /** 查询客户端列表 */
+        getList() {
+            this.loading = true;
+            listMqttTopic(this.queryParams).then(response => {
+                this.topicList=response.data.data;
+                this.total=response.data.meta.count;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },        
+    }
+};
+</script>

vue/src/views/iot/firmware/index.vue

@@ -0,0 +1,374 @@
+<template>
+<div style="padding:6px;">
+    <el-card v-show="showSearch" style="margin-bottom:6px;">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
+            <el-form-item label="固件名称" prop="firmwareName">
+                <el-input v-model="queryParams.firmwareName" placeholder="请输入固件名称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="产品名称" prop="productName">
+                <el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+
+    <el-card style="padding-bottom:100px;">
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:firmware:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:firmware:edit']">修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['iot:firmware:remove']">删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['iot:firmware:export']">导出</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="firmwareList" @selection-change="handleSelectionChange" border>
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="固件名称" align="center" prop="firmwareName" />
+            <el-table-column label="产品名称" align="center" prop="productName" />
+            <el-table-column label="租户名称" align="center" prop="tenantName" />
+            <el-table-column label="系统定义" align="center" prop="isSys">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isSys" />
+                </template>
+            </el-table-column>
+            <el-table-column label="固件版本" align="center" prop="version">
+                <template slot-scope="scope">
+                    <span>Version </span> {{scope.row.version}}
+                </template>
+            </el-table-column>
+            <el-table-column label="路径" align="left" prop="filePath" />
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+                <template slot-scope="scope">
+                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="备注" align="center" prop="remark" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
+                <template slot-scope="scope">
+                    <el-button size="small" type="info" style="padding:5px;" icon="el-icon-download" @click="handleDownload(scope.row)">下载</el-button>
+                    <el-button size="small" type="primary" style="padding:5px;" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:firmware:edit']">修改</el-button>
+                    <el-button size="small" type="danger" style="padding:5px;" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:firmware:remove']">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+        <!-- 添加或修改产品固件对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                <el-form-item label="固件名称" prop="firmwareName">
+                    <el-input v-model="form.firmwareName" placeholder="请输入固件名称" />
+                </el-form-item>
+                <el-form-item label="所属产品" prop="productId">
+                    <el-select v-model="form.productId" placeholder="请选择产品" @change="selectProduct">
+                        <el-option v-for="product in productShortList" :key="product.id" :label="product.name" :value="product.id"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="固件版本" prop="version">
+                    <el-input v-model="form.version" placeholder="请输入固件版本" type="number" />
+                </el-form-item>
+
+                <el-form-item label="固件上传" prop="filePath">
+                    <fileUpload ref="file-upload" :value="form.filePath" :limit="1" :fileSize="10" :fileType='["bin", "zip", "pdf"]' @input="getFilePath($event)"></fileUpload>
+                </el-form-item>
+                <el-form-item label="备注" prop="remark">
+                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+    </el-card>
+</div>
+</template>
+
+<script>
+import {
+    download
+} from '@/api/iot/tool'
+import fileUpload from '../../../components/FileUpload/index'
+import {
+    listShortProduct
+} from "@/api/iot/product"
+import {
+    listFirmware,
+    getFirmware,
+    delFirmware,
+    addFirmware,
+    updateFirmware
+} from "@/api/iot/firmware";
+import {
+    getToken
+} from "@/utils/auth";
+
+export default {
+    name: "Firmware",
+    dicts: ["iot_yes_no"],
+    components: {
+        fileUpload
+    },
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 产品固件表格数据
+            firmwareList: [],
+            // 产品简短列表
+            productShortList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                firmwareName: null,
+                productName: null,
+                tenantName: null,
+                isSys: null,
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                firmwareName: [{
+                    required: true,
+                    message: "固件名称不能为空",
+                    trigger: "blur"
+                }],
+                productId: [{
+                    required: true,
+                    message: "产品ID不能为空",
+                    trigger: "blur"
+                }],
+                productName: [{
+                    required: true,
+                    message: "产品名称不能为空",
+                    trigger: "blur"
+                }],
+                tenantId: [{
+                    required: true,
+                    message: "租户ID不能为空",
+                    trigger: "blur"
+                }],
+                tenantName: [{
+                    required: true,
+                    message: "租户名称不能为空",
+                    trigger: "blur"
+                }],
+                isSys: [{
+                    required: true,
+                    message: "是否系统通用不能为空",
+                    trigger: "blur"
+                }],
+                version: [{
+                    required: true,
+                    message: "固件版本不能为空",
+                    trigger: "blur"
+                }],
+                filePath: [{
+                    required: true,
+                    message: "文件路径不能为空",
+                    trigger: "blur"
+                }],
+            },
+            // 上传参数
+            upload: {
+                // 是否禁用上传
+                isUploading: false,
+                // 设置上传的请求头部
+                headers: {
+                    Authorization: "Bearer " + getToken()
+                },
+                // 上传的地址
+                url: process.env.VUE_APP_BASE_API + "/iot/tool/upload",
+                // 上传的文件列表
+                fileList: []
+            },
+
+        };
+    },
+    created() {
+        this.getList();
+        this.getProductShortList();
+    },
+    methods: {
+        /** 查询产品固件列表 */
+        getList() {
+            this.loading = true;
+            listFirmware(this.queryParams).then(response => {
+                this.firmwareList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        /** 查询产品简短列表 */
+        getProductShortList() {
+            listShortProduct().then(response => {
+                this.productShortList = response.data;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                firmwareId: null,
+                firmwareName: null,
+                productId: null,
+                productName: null,
+                tenantId: null,
+                tenantName: null,
+                isSys: null,
+                version: null,
+                filePath: null,
+                delFlag: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null
+            };
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map(item => item.firmwareId)
+            this.single = selection.length !== 1
+            this.multiple = !selection.length
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "添加产品固件";
+            this.upload.fileList = [];
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const firmwareId = row.firmwareId || this.ids
+            getFirmware(firmwareId).then(response => {
+                this.form = response.data;
+                this.open = true;
+                this.title = "修改产品固件";
+                this.upload.fileList = [{
+                    name: this.form.firmwareName,
+                    url: this.form.filePath
+                }];
+            });
+
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.form.firmwareId != null) {
+                        updateFirmware(this.form).then(response => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addFirmware(this.form).then(response => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const firmwareIds = row.firmwareId || this.ids;
+            this.$modal.confirm('是否确认删除产品固件编号为"' + firmwareIds + '"的数据项？').then(function () {
+                return delFirmware(firmwareIds);
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download('iot/firmware/export', {
+                ...this.queryParams
+            }, `firmware_${new Date().getTime()}.xlsx`)
+        },
+        /** 选择产品 */
+        selectProduct(val) {
+            for (var i = 0; i < this.productShortList.length; i++) {
+                if (this.productShortList[i].id == val) {
+                    this.form.productName = this.productShortList[i].name;
+                    return;
+                }
+            }
+        },
+        // 获取文件路径
+        getFilePath(data){
+            console.log(data);
+            this.form.filePath=data;
+        },
+
+        // 文件提交处理
+        submitUpload() {
+            this.$refs.upload.submit();
+        },
+        // 文件上传中处理
+        handleFileUploadProgress(event, file, fileList) {
+            this.upload.isUploading = true;
+        },
+        // 文件上传成功处理
+        handleFileSuccess(response, file, fileList) {
+            this.upload.isUploading = false;
+            this.form.filePath = response.url;
+            this.$modal.msgSuccess(response.msg);
+        },
+        // 文件下载处理
+        handleDownload(row) {
+            download(row.filePath);
+        }
+
+    },
+
+};
+</script>

vue/src/views/iot/group/device-list.vue

@@ -0,0 +1,147 @@
+<template>
+<div style="padding:6px;">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+        <el-form-item label="设备名称" prop="deviceName">
+            <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable size="small" @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="deviceList" @select="handleSelectionChange" ref="multipleTable" size="mini" border>
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="设备名称" align="center" prop="deviceName" />
+        <el-table-column label="设备编号" align="center" prop="serialNumber" />
+        <el-table-column label="产品名称" align="center" prop="productName" />
+        <el-table-column label="设备状态" align="center" prop="status">
+            <template slot-scope="scope">
+                <dict-tag :options="dict.type.iot_device_status" :value="scope.row.status" />
+            </template>
+        </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+</div>
+</template>
+
+<script>
+import {
+    getDeviceIds
+} from "@/api/iot/group"
+import {
+    listDeviceShort,
+} from "@/api/iot/device";
+
+export default {
+    name: "device-list",
+    dicts: ['iot_device_status'],
+    props: {
+        groupId: {
+            type: Number,
+            default: null
+        }
+    },
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 分组信息
+            parentGroupId:0,
+            // 选中数组
+            ids: [],
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 设备表格数据
+            deviceList: [],
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                deviceName: null,
+                productId: null,
+                productName: null,
+                userId: null,
+                userName: null,
+                tenantId: null,
+                tenantName: null,
+                serialNumber: null,
+                status: null,
+                networkAddress: null,
+                activeTime: null,
+            },
+        };
+    },
+    watch: {
+        // 获取到父组件传递的group后，刷新列表
+        groupId: {
+            handler(newVal, oldVal) {
+                this.parentGroupId = newVal;
+                // 获取分组下的设备
+                this.queryParams.pageNum=1;
+                this.getDeviceIdsByGroupId();
+            },
+            immediate: true
+        }
+    },
+    created() {  
+
+    },
+    methods: {
+        // 获取分组下关联的设备ID数组
+        getDeviceIdsByGroupId() {
+            getDeviceIds(this.parentGroupId).then(response => {
+                this.ids = response.data;
+                this.getList();
+            });
+        },
+        /** 查询设备列表 */
+        getList() {
+            this.loading = true;
+            this.queryParams.params = {};            
+            if (null != this.daterangeActiveTime && '' != this.daterangeActiveTime) {
+                this.queryParams.params["beginActiveTime"] = this.daterangeActiveTime[0];
+                this.queryParams.params["endActiveTime"] = this.daterangeActiveTime[1];
+            }
+            listDeviceShort(this.queryParams).then(response => {
+                this.deviceList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+                // 设置分组关联的设备选中
+                this.deviceList.forEach(row => {
+                    this.$nextTick(() => {
+                        if (this.ids.some(x => x === row.deviceId)) {
+                            this.$refs.multipleTable.toggleRowSelection(row, true);
+                        }
+                    })
+                });
+            });
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.daterangeActiveTime = [];
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map(item => item.deviceId)
+            console.log("选择赋值");
+            console.log(this.ids);
+            this.single = selection.length !== 1
+            this.multiple = !selection.length
+            // Id数组传递到父组件
+            this.$emit('idsToParentEvent', this.ids)
+        },
+    }
+};
+</script>

vue/src/views/iot/group/index.vue

@@ -0,0 +1,281 @@
+<template>
+<div style="padding:6px;">
+    <el-card v-show="showSearch" style="margin-bottom:6px;">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
+            <el-form-item label="分组名称" prop="groupName">
+                <el-input v-model="queryParams.groupName" placeholder="请输入分组名称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+
+    <el-card style="padding-bottom:100px;">
+
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:group:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:group:edit']">修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['iot:group:remove']">删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['iot:group:export']">导出</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+        <el-table v-loading="loading" :data="groupList" @selection-change="handleSelectionChange" border>
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="分组名称" align="center" prop="groupName" width="200" />
+            <el-table-column label="分组排序" align="center" prop="groupOrder" width="100" />
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+                <template slot-scope="scope">
+                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="备注" align="left" prop="remark" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="230">
+                <template slot-scope="scope">
+                    <el-button size="small" type="success" style="padding:5px;" icon="el-icon-edit" @click="selectDevice(scope.row)" v-hasPermi="['iot:group:edit']">添加设备</el-button>
+                    <el-button size="small" type="primary" style="padding:5px;" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:group:edit']">修改</el-button>
+                    <el-button size="small" type="danger" style="padding:5px;" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:group:remove']">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+        <el-dialog title="选择设备" :visible.sync="openDeviceList" width="800px" append-to-body>
+            <device-list ref="deviceList" :groupId="deviceGroup.groupId" @idsToParentEvent="getChildData($event)"></device-list>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="handleDeviceSelected">确 定</el-button>
+                <el-button @click="closeSelectDeviceList">取 消</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 添加或修改设备分组对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                <el-form-item label="分组名称" prop="groupName">
+                    <el-input v-model="form.groupName" placeholder="请输入分组名称" />
+                </el-form-item>
+                <el-form-item label="分组排序" prop="groupOrder">
+                    <el-input v-model="form.groupOrder" type="number" placeholder="请输入分组排序" />
+                </el-form-item>
+                <el-form-item label="备注" prop="remark">
+                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+    </el-card>
+</div>
+</template>
+
+<script>
+import deviceList from "./device-list"
+import {
+    listGroup,
+    getGroup,
+    delGroup,
+    addGroup,
+    updateGroup,
+    updateDeviceGroups
+} from "@/api/iot/group";
+
+export default {
+    name: "Group",
+    components: {
+        deviceList
+    },
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 设备分组表格数据
+            groupList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 是否显示设备列表
+            openDeviceList: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                groupName: null,
+                userName: null,
+            },
+            // 设备分组
+            deviceGroup: {},
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                groupName: [{
+                    required: true,
+                    message: "分组名称不能为空",
+                    trigger: "blur"
+                }],
+                groupOrder: [{
+                        required: true,
+                        message: "分组排序不能为空,最大值为99",
+                        trigger: "blur"
+                    },
+                    {
+                        min: 1,
+                        max: 2,
+                        message: '范围在 0 到 99',
+                        trigger: 'blur'
+                    }
+                ],
+            }
+        };
+    },
+    created() {
+        this.getList();
+    },
+    methods: {
+        /** 查询设备分组列表 */
+        getList() {
+            this.loading = true;
+            listGroup(this.queryParams).then(response => {
+                this.groupList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 关闭选择设备列表
+        closeSelectDeviceList() {
+            this.openDeviceList = false;
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                groupId: null,
+                groupName: null,
+                groupOrder: null,
+                userId: null,
+                userName: null,
+                delFlag: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null
+            };
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map(item => item.groupId)
+            console.log(this.ids);
+            this.single = selection.length !== 1
+            this.multiple = !selection.length
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "添加设备分组";
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const groupId = row.groupId || this.ids
+            getGroup(groupId).then(response => {
+                this.form = response.data;
+                this.open = true;
+                this.title = "修改设备分组";
+            });
+        },
+        /** 选择设备 */
+        selectDevice(row) {
+            this.deviceGroup.groupId = row.groupId;
+            this.openDeviceList = true;
+            this.$refs.deviceList.getDeviceIdsByGroupId();
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.form.groupId != null) {
+                        updateGroup(this.form).then(response => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addGroup(this.form).then(response => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const groupIds = row.groupId || this.ids;
+            this.$modal.confirm('是否确认删除设备分组编号为"' + groupIds + '"的数据项？').then(function () {
+                return delGroup(groupIds);
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download('iot/group/export', {
+                ...this.queryParams
+            }, `group_${new Date().getTime()}.xlsx`)
+        },
+        // 获取子组件选中的ID数组
+        getChildData(data) {
+            this.deviceGroup.deviceIds = data;
+        },
+        // 更新分组下的设备
+        handleDeviceSelected() {
+            updateDeviceGroups(this.deviceGroup).then(response => {
+                this.$modal.msgSuccess("更新分组下的设备成功");
+                this.openDeviceList = false;
+            })
+        }
+    }
+};
+</script>

vue/src/views/iot/log/index.vue

@@ -0,0 +1,391 @@
+<template>
+<div style="padding:6px;">
+    <el-card v-show="showSearch" style="margin-bottom:6px;">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
+            <el-form-item label="日志名称" prop="logName">
+                <el-input v-model="queryParams.logName" placeholder="请输入日志名称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="类型" prop="logType">
+                <el-select v-model="queryParams.logType" placeholder="请选择类型" clearable size="small">
+                    <el-option v-for="dict in dict.type.iot_things_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="日志级别" prop="logLevel">
+                <el-input v-model="queryParams.logLevel" placeholder="请输入日志级别" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="设备ID" prop="deviceId">
+                <el-input v-model="queryParams.deviceId" placeholder="请输入设备ID" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="设备名称" prop="deviceName">
+                <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="用户昵称" prop="userName">
+                <el-input v-model="queryParams.userName" placeholder="请输入用户昵称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="租户名称" prop="tenantName">
+                <el-input v-model="queryParams.tenantName" placeholder="请输入租户名称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="生成告警" prop="isAlert">
+                <el-input v-model="queryParams.isAlert" placeholder="请输入是否生成告警" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="告警处理" prop="status">
+                <el-select v-model="queryParams.status" placeholder="请选择告警处理" clearable size="small">
+                    <el-option v-for="dict in dict.type.iot_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+
+    <el-card style="padding-bottom:100px;">
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:log:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:log:edit']">修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['iot:log:remove']">删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['iot:log:export']">导出</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="logList" @selection-change="handleSelectionChange" border>
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="日志名称" align="center" prop="logName" />
+            <el-table-column label="值" align="center" prop="logValue" />
+            <el-table-column label="类型" align="center" prop="logType">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.iot_things_type" :value="scope.row.logType" />
+                </template>
+            </el-table-column>
+            <el-table-column label="日志级别" align="center" prop="logLevel">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.logLevel" />
+                </template>
+            </el-table-column>
+            <el-table-column label="设备ID" align="center" prop="deviceId" />
+            <el-table-column label="设备名称" align="center" prop="deviceName" />
+            <el-table-column label="用户ID" align="center" prop="userId" />
+            <el-table-column label="用户昵称" align="center" prop="userName" />
+            <el-table-column label="租户ID" align="center" prop="tenantId" />
+            <el-table-column label="租户名称" align="center" prop="tenantName" />
+            <el-table-column label="触发源" align="center" prop="triggerSource">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.triggerSource" />
+                </template>
+            </el-table-column>
+            <el-table-column label="生成告警" align="center" prop="isAlert">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isAlert" />
+                </template>
+            </el-table-column>
+            <el-table-column label="告警处理" align="center" prop="status">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.status" />
+                </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+                <template slot-scope="scope">
+                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="备注" align="center" prop="remark" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
+                <template slot-scope="scope">
+                    <el-button size="small" type="primary" style="padding:5px;" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:log:edit']">处理</el-button>
+                    <!-- <el-button size="small" type="danger" style="padding:5px;" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:log:remove']">删除</el-button> -->
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+        <!-- 添加或修改设备日志对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                <el-form-item label="日志名称" prop="logName">
+                    <el-input v-model="form.logName" placeholder="请输入日志名称" />
+                </el-form-item>
+                <el-form-item label="类型" prop="logType">
+                    <el-select v-model="form.logType" placeholder="请选择类型">
+                        <el-option v-for="dict in dict.type.iot_things_type" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="日志级别" prop="logLevel">
+                    <el-input v-model="form.logLevel" placeholder="请输入日志级别" />
+                </el-form-item>
+                <el-form-item label="设备ID" prop="deviceId">
+                    <el-input v-model="form.deviceId" placeholder="请输入设备ID" />
+                </el-form-item>
+                <el-form-item label="设备名称" prop="deviceName">
+                    <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
+                </el-form-item>
+                <el-form-item label="用户ID" prop="userId">
+                    <el-input v-model="form.userId" placeholder="请输入用户ID" />
+                </el-form-item>
+                <el-form-item label="用户昵称" prop="userName">
+                    <el-input v-model="form.userName" placeholder="请输入用户昵称" />
+                </el-form-item>
+                <el-form-item label="租户ID" prop="tenantId">
+                    <el-input v-model="form.tenantId" placeholder="请输入租户ID" />
+                </el-form-item>
+                <el-form-item label="租户名称" prop="tenantName">
+                    <el-input v-model="form.tenantName" placeholder="请输入租户名称" />
+                </el-form-item>
+                <el-form-item label="触发源" prop="triggerSource">
+                    <el-input v-model="form.triggerSource" placeholder="请输入触发源" />
+                </el-form-item>
+                <el-form-item label="是否生成告警" prop="isAlert">
+                    <el-input v-model="form.isAlert" placeholder="请输入是否生成告警" />
+                </el-form-item>
+                <el-form-item label="告警处理">
+                    <el-radio-group v-model="form.status">
+                        <el-radio v-for="dict in dict.type.iot_yes_no" :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="备注" prop="remark">
+                    <el-input v-model="form.remark" placeholder="请输入备注" />
+                </el-form-item>
+                <el-form-item label="日志收到的值" prop="logValue">
+                    <el-input v-model="form.logValue" placeholder="请输入日志收到的值" />
+                </el-form-item>
+                <el-form-item label="是否置顶" prop="istop">
+                    <el-input v-model="form.istop" placeholder="请输入是否置顶" />
+                </el-form-item>
+                <el-form-item label="是否监测" prop="ismonitor">
+                    <el-input v-model="form.ismonitor" placeholder="请输入是否监测" />
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+    </el-card>
+</div>
+</template>
+
+<script>
+import {
+    listLog,
+    getLog,
+    delLog,
+    addLog,
+    updateLog
+} from "@/api/iot/log";
+
+export default {
+    name: "Log",
+    dicts: ['iot_things_type', 'iot_yes_no'],
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 设备日志表格数据
+            logList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                logName: null,
+                logType: null,
+                logLevel: null,
+                deviceId: null,
+                deviceName: null,
+                userName: null,
+                tenantName: null,
+                triggerSource: null,
+                isAlert: null,
+                status: null,
+                istop: null,
+                ismonitor: null
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                logName: [{
+                    required: true,
+                    message: "日志名称不能为空",
+                    trigger: "blur"
+                }],
+                logType: [{
+                    required: true,
+                    message: "类型不能为空",
+                    trigger: "change"
+                }],
+                logLevel: [{
+                    required: true,
+                    message: "日志级别不能为空",
+                    trigger: "blur"
+                }],
+                deviceId: [{
+                    required: true,
+                    message: "设备ID不能为空",
+                    trigger: "blur"
+                }],
+                deviceName: [{
+                    required: true,
+                    message: "设备名称不能为空",
+                    trigger: "blur"
+                }],
+                userId: [{
+                    required: true,
+                    message: "用户ID不能为空",
+                    trigger: "blur"
+                }],
+                userName: [{
+                    required: true,
+                    message: "用户昵称不能为空",
+                    trigger: "blur"
+                }],
+                tenantId: [{
+                    required: true,
+                    message: "租户ID不能为空",
+                    trigger: "blur"
+                }],
+                tenantName: [{
+                    required: true,
+                    message: "租户名称不能为空",
+                    trigger: "blur"
+                }],
+            }
+        };
+    },
+    created() {
+        this.getList();
+    },
+    methods: {
+        /** 查询设备日志列表 */
+        getList() {
+            this.loading = true;
+            listLog(this.queryParams).then(response => {
+                this.logList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                deviceLogId: null,
+                logName: null,
+                logType: null,
+                logLevel: null,
+                deviceId: null,
+                deviceName: null,
+                userId: null,
+                userName: null,
+                tenantId: null,
+                tenantName: null,
+                triggerSource: null,
+                isAlert: null,
+                status: 0,
+                createBy: null,
+                createTime: null,
+                remark: null,
+                logValue: null,
+                istop: null,
+                ismonitor: null
+            };
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map(item => item.deviceLogId)
+            this.single = selection.length !== 1
+            this.multiple = !selection.length
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "添加设备日志";
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const deviceLogId = row.deviceLogId || this.ids
+            getLog(deviceLogId).then(response => {
+                this.form = response.data;
+                this.open = true;
+                this.title = "修改设备日志";
+            });
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.form.deviceLogId != null) {
+                        updateLog(this.form).then(response => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addLog(this.form).then(response => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const deviceLogIds = row.deviceLogId || this.ids;
+            this.$modal.confirm('是否确认删除设备日志编号为"' + deviceLogIds + '"的数据项？').then(function () {
+                return delLog(deviceLogIds);
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download('iot/log/export', {
+                ...this.queryParams
+            }, `log_${new Date().getTime()}.xlsx`)
+        }
+    }
+};
+</script>

vue/src/views/iot/map.js

@@ -0,0 +1,18 @@
+export function loadBMap() {
+    let baiduAK="nAtaBg9FYzav6c8P9rF9qzsWZfT8O0PD";
+    return new Promise(function(resolve, reject) {
+        if (typeof BMap !== 'undefined') {
+            resolve(BMap)
+            return true
+        }
+        window.onBMapCallback = function() {
+            resolve(BMap)
+        }
+        let script = document.createElement('script')
+        script.type = 'text/javascript'
+        script.src =
+            'http://api.map.baidu.com/api?v=2.0&ak='+ baiduAK +'&__ec_v__=20190126&callback=onBMapCallback'
+        script.onerror = reject
+        document.head.appendChild(script)
+    })
+}

vue/src/views/iot/product/index.vue

@@ -0,0 +1,256 @@
+<template>
+<div style="padding:6px;">
+    <el-card style="margin-bottom:6px;">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
+            <el-form-item label="产品名称" prop="productName">
+                <el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="分类名称" prop="categoryName">
+                <el-input v-model="queryParams.categoryName" placeholder="请输入产品分类名称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+                <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
+                    <el-option v-for="dict in dict.type.iot_product_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+            <el-form-item style="float:right;">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleEditProduct(0)" v-hasPermi="['iot:product:add']">新增</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+
+    <el-card style="padding-bottom:100px;">
+        <el-row :gutter="30" v-loading="loading" >
+            <el-col :span="6" v-for="(item,index) in productList" :key="index" style="margin-bottom:30px;text-align:center;">
+                <el-card :body-style="{ padding: '20px'}" shadow="always">
+                    <el-row type="flex" :gutter="10" justify="space-between">
+                        <el-col :span="20" style="text-align:left;">
+                            <el-link type="" :underline="false" @click="handleEditProduct(item)" style="font-weight:bold;font-size:16px;line-height:32px;">
+                                <svg-icon icon-class="product" /> {{item.productName}}
+                                <el-tag type="info" size="mini" style="margin-left:5px;font-weight:200" v-if="item.isSys==1">系统</el-tag>
+                            </el-link>
+                        </el-col>
+                        <el-col :span="4">
+                            <el-tooltip class="item" effect="dark" content="取消发布" placement="top-start" v-if="item.status==2">
+                                <el-button type="success" size="mini" style="padding:5px;" @click="changeProductStatus(item.productId,1)">已发布</el-button>
+                            </el-tooltip>
+                            <el-tooltip class="item" effect="dark" content="现在发布" placement="top-start" v-if="item.status==1">
+                                <el-button type="info" size="mini" style="padding:5px;" @click="changeProductStatus(item.productId,2)">未发布</el-button>
+                            </el-tooltip>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="10">
+                        <el-col :span="14">
+                            <el-descriptions :column="1" size="small" style="margin-top:10px;">
+                                <el-descriptions-item label="所属分类">
+                                    <el-link type="primary" :underline="false">{{item.categoryName}}</el-link>
+                                </el-descriptions-item>
+                                <el-descriptions-item label="产品类型">
+                                    <dict-tag :options="dict.type.iot_device_type" :value="item.deviceType" />
+                                </el-descriptions-item>
+                                <el-descriptions-item label="联网方式">
+                                    <dict-tag :options="dict.type.iot_network_method" :value="item.networkMethod" />
+                                </el-descriptions-item>
+                                <el-descriptions-item label="创建时间">
+                                    <span>{{ parseTime(item.createTime, '{y}-{m}-{d}') }}</span>
+                                </el-descriptions-item>
+                            </el-descriptions>
+                        </el-col>
+                        <el-col :span="10">
+                            <div style="margin-top:10px;">
+                                <el-image style="width:100%;height:100px;border:1px solid #ccc;border-radius:5px;" lazy :preview-src-list="[baseUrl+item.imgUrl]" :src="baseUrl+item.imgUrl" fit="cover" v-if="item.imgUrl!=null && item.imgUrl!=''"></el-image>
+                                <!-- 用于显示本地计算机、手机、树莓派等设备图片-->
+                                <el-image style="width:100%;height:100px;border:1px solid #ccc;border-radius:5px;" :preview-src-list="[require('@/assets/images/esp8266.jpg')]" :src="require('@/assets/images/esp8266.jpg')" fit="cover" v-else-if="item.productName.indexOf('ESP8266')!=-1"></el-image>
+                                <el-image style="width:100%;height:100px;border:1px solid #ccc;border-radius:5px;" :preview-src-list="[require('@/assets/images/esp32.jpg')]" :src="require('@/assets/images/esp32.jpg')" fit="cover" v-else-if="item.productName.indexOf('ESP32')!=-1"></el-image>
+                                <el-image style="width:100%;height:100px;border:1px solid #ccc;border-radius:5px;" :preview-src-list="[require('@/assets/images/raspberry.jpg')]" :src="require('@/assets/images/raspberry.jpg')" fit="cover" v-else-if="item.productName.indexOf('Raspberry')!=-1"></el-image>
+                                <el-image style="width:100%;height:100px;border:1px solid #ccc;border-radius:5px;" :preview-src-list="[require('@/assets/images/telphone.jpg')]" :src="require('@/assets/images/telphone.jpg')" fit="cover" v-else-if="item.productName.indexOf('Phone')!=-1"></el-image>
+                                <el-image style="width:100%;height:100px;border:1px solid #ccc;border-radius:5px;" :preview-src-list="[require('@/assets/images/computer.jpg')]" :src="require('@/assets/images/computer.jpg')" fit="cover" v-else-if="item.productName.indexOf('Computer')!=-1"></el-image>
+                                <el-image style="width:100%;height:100px;border:1px solid #ccc;border-radius:5px;" :preview-src-list="[require('@/assets/images/product.jpg')]" :src="require('@/assets/images/product.jpg')" fit="cover" v-else></el-image>
+                            </div>
+                        </el-col>
+                    </el-row>
+                    <el-button-group style="margin-top:15px;">
+                        <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEditProduct(item)" v-hasPermi="['iot:product:edit']">详情</el-button>
+                        <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(item)" v-hasPermi="['iot:product:remove']" v-if="item.status==1">删除</el-button>
+                        <el-button size="mini" type="info" icon="el-icon-download" @click="handleGeneratorSDK(item)" v-hasPermi="['iot:product:edit']" v-if="item.status==2">下载SDK</el-button>
+                        <el-button size="mini" type="warning" icon="el-icon-search" @click="handleViewDevice(item.productId)" v-hasPermi="['tool:gen:edit']">查看设备</el-button>
+                    </el-button-group>
+                </el-card>
+            </el-col>
+        </el-row>
+
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+        <!-- 下载SDK -->
+        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+            <el-link type="danger" style="padding-left:10px;" :underline="false">该功能暂未实现，参考教程和项目的SDK示例</el-link>
+            <el-form label-width="80px">
+                <el-form-item label="选择设备">
+                    <el-radio-group v-model="form.datatype">
+                        <el-radio v-for="dict in dict.type.iot_device_chip" :key="dict.value" :label="dict.value" style="margin-top:15px;width:160px;">{{dict.label}}</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="downloadSdk" disabled>下 载</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+    </el-card>
+</div>
+</template>
+
+<script>
+import {
+    listProduct,
+    delProduct,
+    changeProductStatus
+} from "@/api/iot/product";
+
+export default {
+    name: "Product",
+    dicts: ['iot_yes_no', 'iot_product_status', 'iot_device_type', 'iot_network_method', 'iot_vertificate_method', 'iot_device_chip'],
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 总条数
+            total: 0,
+            // 产品表格数据
+            productList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                productName: null,
+                categoryId: null,
+                categoryName: null,
+                tenantId: null,
+                tenantName: null,
+                isSys: null,
+                status: null,
+                deviceType: null,
+                networkMethod: null,
+            },
+            // 表单参数
+            form: {},
+            baseUrl: process.env.VUE_APP_BASE_API,
+        };
+    },
+    created() {
+        this.getList();
+    },
+    activated() {
+        const time = this.$route.query.t;
+        if (time != null && time != this.uniqueId) {
+            this.uniqueId = time;
+            this.queryParams.pageNum = Number(this.$route.query.pageNum);
+            this.getList();
+        }
+    },
+    methods: {
+        /** 查询产品列表 */
+        getList() {
+            this.loading = true;
+            listProduct(this.queryParams).then(response => {
+                this.productList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        /** 更新产品状态 */
+        changeProductStatus(productId,status) {
+            let message="发生错误了";
+            if(status==2){
+                message="产品发布后不能再更改产品内容和对应物模型 ！";
+            }else if(status==1){
+                message="产品下不能有已经创建的设备，才能取消发布哦 ！"
+            }
+            this.$confirm(message, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                let data = {};
+                data.productId = productId;
+                data.status = status;
+                changeProductStatus(data).then(response => {
+                    this.getList();
+                    this.$modal.alertSuccess(response.msg);
+                }).catch(() => {});
+            }).catch(() => {});
+        },
+        /** 修改按钮操作 */
+        handleViewDevice(productId) {
+            this.$router.push({
+                path: '/iot/device',
+                query: {
+                    t: Date.now(),
+                    productId: productId,
+                }
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        /** 生成SDK */
+        handleGeneratorSDK(row) {
+            this.title = "生成SDK"
+            this.open = true;
+        },
+        /** 下载SDK */
+        downloadSdk() {
+            this.$download.zip("/iot/tool/genSdk?deviceChip=" + 1, "wumeismart-sdk");
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const productIds = row.productId || this.ids;
+            let msg = "";
+            this.$modal.confirm('是否确认删除产品编号为"' + productIds + '"的数据项？').then(function () {
+                return delProduct(productIds).then(response => {
+                    msg = response.msg;
+                });
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess(msg);
+            }).catch(() => {});
+        },
+        /** 修改按钮操作 */
+        handleEditProduct(row) {
+            let productId = 0;
+            if (row != 0) {
+                productId = row.productId || this.ids
+            }
+            this.$router.push({
+                path: '/iot/product-edit',
+                query: {
+                    productId: productId,
+                    pageNum: this.queryParams.pageNum
+                }
+            });
+        },
+    }
+};
+</script>

vue/src/views/iot/product/product-alert.vue

@@ -0,0 +1,670 @@
+<template>
+<div style="padding-left:20px;">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="告警名称" prop="alertName">
+            <el-input v-model="queryParams.alertName" placeholder="请输入告警名称" clearable size="small" @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="告警级别" prop="alertLevel">
+            <el-select v-model="queryParams.alertLevel" placeholder="请选择告警级别" clearable size="small">
+                <el-option v-for="dict in dict.type.iot_alert_level" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+        </el-form-item>
+        <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+        <el-form-item>
+            <el-link type="danger" style="padding-top:5px" :underline="false">该功能，未完成</el-link>
+        </el-form-item>
+
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:alert:add']">新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:alert:edit']">修改</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['iot:alert:remove']">删除</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['iot:alert:export']">导出</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="alertList" @selection-change="handleSelectionChange" border>
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="告警ID" align="center" prop="alertId" />
+        <el-table-column label="告警名称" align="center" prop="alertName" />
+        <el-table-column label="状态" align="center" prop="status">
+            <template slot-scope="scope">
+                <el-tag type="success" v-if="scope.row.status==1">启动</el-tag>
+                <el-tag type="danger" v-if="scope.row.status==2">暂停</el-tag>
+            </template>
+        </el-table-column>
+        <el-table-column label="告警级别" align="center" prop="alertLevel">
+            <template slot-scope="scope">
+                <dict-tag :options="dict.type.iot_alert_level" :value="scope.row.alertLevel" />
+            </template>
+        </el-table-column>
+        <el-table-column label="产品ID" align="center" prop="productId" />
+        <el-table-column label="产品名称" align="center" prop="productName" />
+        <el-table-column label="触发器" align="center" prop="triggers" />
+        <el-table-column label="执行动作" align="center" prop="actions" />
+        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+            <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+            </template>
+        </el-table-column>
+        <el-table-column label="备注" align="center" prop="remark" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:alert:edit']">修改</el-button>
+                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:alert:remove']">删除</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+    <!-- 添加或修改设备告警对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+            <el-row>
+                <el-col :span="15">
+                    <el-form-item label="告警名称" prop="alertName">
+                        <el-input v-model="form.alertName" placeholder="请输入告警名称" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="20">
+                    <el-form-item label="告警级别" prop="alertLevel">
+                        <el-select v-model="form.alertLevel" placeholder="请选择告警级别">
+                            <el-option v-for="dict in dict.type.iot_alert_level" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="21">
+                    <el-form-item label="告警状态">
+                        <el-radio-group v-model="form.status">
+                            <el-radio v-for="dict in alertType" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24">
+                    <el-form-item label="触发器" prop="griggers">
+                        <el-select v-model="form.condition" placeholder="请选择" size="small" style="margin-bottom:10px;">
+                            <el-option v-for="item in triggerConditions" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                        <div v-for="(item,index) in form.triggers" :key="index" style="margin-bottom:15px;border:1px solid #ddd;padding:10px;">
+                            <el-row>
+                                <el-col :span="4">
+                                    <el-select v-model="item.source" placeholder="请选择" size="small" @change="changeTriggerSource">
+                                        <el-option v-for="subItem in triggerSource" :key="subItem.value" :label="subItem.label" :value="subItem.value">
+                                        </el-option>
+                                    </el-select>
+                                </el-col>
+                                <el-col :span="16" :offset="1" v-if="item.source==2">
+                                    <el-time-picker v-model="timerTimeValue" size="small" value-format="HH:mm" placeholder="选择执行时间" @change="timeChange" :disabled="item.isAdvance==1"></el-time-picker>
+                                </el-col>
+                                <el-col :span="2" :offset="item.source==1?17:1" v-if="index!=0"><a style="color:#F56C6C" @click="removeTriggerItem(index)">删除</a></el-col>
+                            </el-row>
+
+                            <!--定时-->
+                            <el-row v-if="item.source==2">
+                                <el-col :span="24">
+                                    <el-row style="margin-bottom:5px;">
+                                        <el-col :span="4">
+                                            <el-select v-model="timerWeekRepeatValue" placeholder="请选择" @change="repeatChange" size="small" :disabled="item.isAdvance==1">
+                                                <el-option v-for="item in timerWeekRepeats" :key="item.value" :label="item.label" :value="item.value">
+                                                </el-option>
+                                            </el-select>
+                                        </el-col>
+                                        <el-col :span="15" :offset="1" v-if="timerWeekRepeatValue==3">
+                                            <el-select v-model="timerWeekValue" placeholder="请选择" multiple style="width:485px" @change="weekChange" size="small" :disabled="item.isAdvance==1">
+                                                <el-option v-for="item in timerWeeks" :key="item.value" :label="item.label" :value="item.value">
+                                                </el-option>
+                                            </el-select>
+                                        </el-col>
+                                    </el-row>
+                                </el-col>
+                                <el-col :span="24">
+                                    <el-row>
+                                        <el-col :span="18">
+                                            <el-input v-model="item.cronExpression" placeholder="cron执行表达式" :disabled="item.isAdvance==0" size="small">
+                                                <template slot="append">
+                                                    <el-button type="primary" @click="handleShowCron(item,index)" :disabled="item.isAdvance==0">
+                                                        生成表达式
+                                                        <i class="el-icon-time el-icon--right"></i>
+                                                    </el-button>
+                                                </template>
+                                            </el-input>
+                                        </el-col>
+                                        <el-col :span="4" :offset="1">
+                                            <el-checkbox v-model="item.isAdvance" :true-label="1" :false-label="0" @change="customerCronChange">自定义表达式</el-checkbox>
+                                        </el-col>
+                                    </el-row>
+                                </el-col>
+                            </el-row>
+                            <!--设备-->
+                            <el-row>
+                                <el-col :span="4">
+                                    <el-select v-model="item.modelType" placeholder="请选择" size="small">
+                                        <el-option v-for="subItem in modelTypes" :key="subItem.value" :label="subItem.label" :value="subItem.value">
+                                        </el-option>
+                                    </el-select>
+                                </el-col>
+                                <el-col :span="4" :offset="1">
+                                    <el-select v-model="item.modelType" placeholder="请选择" size="small">
+                                        <el-option v-for="subItem in modelTypes" :key="subItem.value" :label="subItem.label" :value="subItem.value">
+                                        </el-option>
+                                    </el-select>
+                                </el-col>
+                                <el-col :span="5" :offset="1">
+                                    <el-select v-model="item.operator" placeholder="请选择操作符" size="small">
+                                        <el-option key="=" label="等于(=)" value="=" />
+                                        <el-option key="!=" label="不等于(!=)" value="!=" />
+                                        <el-option key=">" label="大于(>)" value=">" />
+                                        <el-option key="<" label="小于(<)" value="<" />
+                                        <el-option key=">=" label="大于等于(>=)" value=">=" />
+                                        <el-option key="<=" label="小于等于(<=)" value="<=" />
+                                        <el-option key="contain" label="包含(contain)" value="contain" />
+                                        <el-option key="notcontain" label="不包含(not contain)" value="notcontain" />
+                                    </el-select>
+                                </el-col>
+                                <el-col :span="5" :offset="1">
+                                    <el-input v-model="item.value" placeholder="值" size="small" />
+                                </el-col>
+                            </el-row>
+
+                        </div>
+                        <div>+ <a style="color:#409EFF" @click="addTriggerItem()">添加触发器</a></div>
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24">
+                    <el-form-item label="执行动作">
+                        <el-row v-for="(item,index) in form.actions" :key="index" style="margin-bottom:10px;">
+                            <el-col :span="4">
+                                <el-select v-model="item.modelType" placeholder="请选择">
+                                    <el-option v-for="subItem in modelTypes" :key="subItem.value" :label="subItem.label" :value="subItem.value">
+                                    </el-option>
+                                </el-select>
+                            </el-col>
+                            <el-col :span="4" :offset="1">
+                                <el-select v-model="item.modelType" placeholder="请选择">
+                                    <el-option v-for="subItem in modelTypes" :key="subItem.value" :label="subItem.label" :value="subItem.value">
+                                    </el-option>
+                                </el-select>
+                            </el-col>
+                            <el-col :span="11" :offset="1">
+                                <el-input v-model="item.value" placeholder="值" />
+                            </el-col>
+                            <el-col :span="2" :offset="1" v-if="index!=0"><a style="color:#F56C6C" @click="removeActionItem(index)">删除</a></el-col>
+                        </el-row>
+                        <div>+ <a style="color:#409EFF" @click="addActionItem()">添加执行动作</a></div>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <el-col :span="16">
+                <el-form-item label="备注" prop="remark">
+                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+                </el-form-item>
+            </el-col>
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="submitForm" disabled>确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+        </div>
+    </el-dialog>
+
+    <el-dialog title="Cron表达式生成器" :visible.sync="openCron" append-to-body destroy-on-close class="scrollbar">
+        <crontab @hide="openCron=false" @fill="crontabFill" :expression="expression" style="padding-bottom:80px;"></crontab>
+    </el-dialog>
+</div>
+</template>
+
+<script>
+import {
+    listAlert,
+    getAlert,
+    delAlert,
+    addAlert,
+    updateAlert
+} from "@/api/iot/alert";
+import {
+    cacheJsonThingsModel
+} from "@/api/iot/model";
+import Crontab from '@/components/Crontab'
+export default {
+    name: "device-alert",
+    dicts: ['iot_alert_level', 'sys_job_status'],
+    components: {
+        Crontab
+    },
+    props: {
+        product: {
+            type: Object,
+            default: null
+        }
+    },
+    watch: {
+        // 获取到父组件传递的productId后，刷新列表
+        product: function (newVal, oldVal) {
+            this.productInfo = newVal;
+            if (this.productInfo && this.productInfo.productId != 0) {
+                this.queryParams.productId = this.productInfo.productId;
+                this.getList();
+                // 获取缓存的Json物模型
+                cacheJsonThingsModel(newVal.productId).then(response => {
+                    this.thingsModel = JSON.parse(response.data);
+                });
+            }
+        }
+    },
+    data() {
+        return {
+            // 物模型JSON
+            thingsModel: {},
+            // 遮罩层
+            loading: false,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 设备告警表格数据
+            alertList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 是否显示Cron表达式弹出层
+            openCron: false,
+            // 传入的表达式
+            expression: "",
+            // 触发器的索引，用于接收传入的表达式
+            triggerIndex: 0,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                alertName: null,
+                alertLevel: null,
+                productId: null,
+                productName: null,
+            },
+            // 周
+            timerWeekRepeats: [{
+                value: '1',
+                label: '每天'
+            }, {
+                value: '2',
+                label: '仅此一次'
+            }, {
+                value: '3',
+                label: '指定'
+            }],
+            timerWeekRepeatValue: "1",
+
+            timerWeeks: [{
+                value: 1,
+                label: '周一'
+            }, {
+                value: 2,
+                label: '周二'
+            }, {
+                value: 3,
+                label: '周三'
+            }, {
+                value: 4,
+                label: '周四'
+            }, {
+                value: 5,
+                label: '周五'
+            }, {
+                value: 6,
+                label: '周六'
+            }, {
+                value: 7,
+                label: '周日'
+            }],
+            timerWeekValue: [1, 2, 3, 4, 5, 6, 7],
+            // 时间
+            timerTimeValue: '',
+            // 触发器源 1=设备，2=定时，3=告警输出
+            triggerSource: [{
+                value: 1,
+                label: '设备'
+            }, {
+                value: 2,
+                label: '定时'
+            }],
+            // 执行动作源
+            actionSource: [{
+                value: 1,
+                label: '设备'
+            }, {
+                value: 3,
+                label: '告警输出'
+            }],
+            // 物模型类别
+            modelTypes: [{
+                value: 1,
+                label: '属性'
+            }, {
+                value: 2,
+                label: '功能'
+            }],
+            // 触发器条件
+            triggerConditions: [{
+                value: "all",
+                label: '满足所有条件'
+            }, {
+                value: "any",
+                label: '满足任一条件'
+            }],
+            // 告警状态
+            alertType: [{
+                value: 1,
+                label: '启动'
+            }, {
+                value: 2,
+                label: '停止'
+            }],
+            // 表单参数
+            form: {
+                condition: "all", // 触发器条件
+                triggers: [],
+                actions: []
+            },
+            // 表单校验
+            rules: {
+                alertName: [{
+                    required: true,
+                    message: "告警名称不能为空",
+                    trigger: "blur"
+                }],
+                alertLevel: [{
+                    required: true,
+                    message: "告警级别不能为空",
+                    trigger: "change"
+                }],
+                productId: [{
+                    required: true,
+                    message: "产品ID不能为空",
+                    trigger: "blur"
+                }],
+                productName: [{
+                    required: true,
+                    message: "产品名称不能为空",
+                    trigger: "blur"
+                }],
+                triggers: [{
+                    required: true,
+                    message: "触发器不能为空",
+                    trigger: "blur"
+                }],
+                actions: [{
+                    required: true,
+                    message: "执行动作不能为空",
+                    trigger: "blur"
+                }],
+            }
+        };
+    },
+
+    created() {
+        // this.getList();
+    },
+    methods: {
+        /** 查询设备告警列表 */
+        getList() {
+            this.loading = true;
+            listAlert(this.queryParams).then(response => {
+                this.alertList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                alertId: null,
+                alertName: null,
+                alertLevel: null,
+                productId: null,
+                productName: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                status: 1,
+                condition: "all", // 触发器条件
+                triggers: [{
+                    id: "",
+                    name: "",
+                    value: "",
+                    deviceId: 0,
+                    deviceName: "请选择一个设备",
+                    source: 1, //1=设备，2=定时，3=告警输出
+                    modelType: 1, // 1=属性，2=功能
+                    jobId: 0,
+                    cronExpression: "",
+                    isAdvance: 0
+                }],
+                actions: [{
+                    id: "",
+                    name: "",
+                    value: "",
+                    deviceId: 0,
+                    deviceName: "请选择一个设备",
+                    source: 1, //1=设备，2=定时，3=告警输出
+                    modelType: 1, // 1=属性，2=功能
+                }]
+            };
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map(item => item.alertId)
+            this.single = selection.length !== 1
+            this.multiple = !selection.length
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "添加自定义告警";
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const alertId = row.alertId || this.ids
+            getAlert(alertId).then(response => {
+                this.form = response.data;
+                this.open = true;
+                this.title = "修改设备告警";
+            });
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.form.alertId != null) {
+                        updateAlert(this.form).then(response => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addAlert(this.form).then(response => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const alertIds = row.alertId || this.ids;
+            this.$modal.confirm('是否确认删除设备告警编号为"' + alertIds + '"的数据项？').then(function () {
+                return delAlert(alertIds);
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download('iot/alert/export', {
+                ...this.queryParams
+            }, `alert_${new Date().getTime()}.xlsx`)
+        },
+        /** 添加动作 */
+        addActionItem() {
+            this.form.actions.push({
+                id: "",
+                name: "",
+                value: ""
+            })
+        },
+        /** 删除动作 */
+        removeActionItem(index) {
+            this.form.actions.splice(index, 1);
+        },
+        /** 触发器源改变事件 **/
+        changeTriggerSource() {
+            this.setTriggerSource();
+        },
+        /** 设置触发器源 **/
+        setTriggerSource() {
+            // 触发器智能包含一个定时
+            let hasTimer = false;
+            for (let i = 0; i < this.form.triggers.length; i++) {
+                if (this.form.triggers[i].source == 2) {
+                    hasTimer = true;
+                }
+            }
+            if (hasTimer) {
+                this.triggerSource = [{
+                    value: 1,
+                    label: '设备'
+                }];
+            } else {
+                //定时
+                this.triggerSource = [{
+                    value: 1,
+                    label: '设备'
+                }, {
+                    value: 2,
+                    label: '定时'
+                }];
+
+            }
+        },
+        /** 添加触发器 */
+        addTriggerItem() {
+            this.setTriggerSource();
+            this.form.triggers.push({
+                id: "",
+                name: "",
+                value: "",
+                deviceId: 0,
+                deviceName: "请选择一个设备",
+                source: 1, //1=设备，2=定时，3=告警输出
+                modelType: 1, // 1=属性，2=功能
+                jobId: 0,
+                cronExpression: "",
+                isAdvance: 0
+            })
+
+        },
+        /** 删除触发器 */
+        removeTriggerItem(index) {
+            this.form.triggers.splice(index, 1);
+            this.setTriggerSource();
+        },
+        /** cron表达式按钮操作 */
+        handleShowCron(item, index) {
+            this.expression = item.cronExpression;
+            this.triggerIndex = index;
+            this.openCron = true;
+        },
+        /** 确定后回传值 */
+        crontabFill(value) {
+            this.form.triggers[this.triggerIndex].cronExpression = value;
+        },
+        /** 修改重复事件 **/
+        repeatChange(data) {
+            if (this.timerWeekRepeatValue == 1) {
+                // 每天
+                this.timerWeekValue = [1, 2, 3, 4, 5, 6, 7];
+                this.form.repeat = 1;
+            } else if (this.timerWeekRepeatValue == 2) {
+                // 仅此一次
+                this.timerWeekValue = [];
+                this.form.isRepeat = 0;
+            } else {
+                // 指定
+                this.form.isRepeat = 1;
+            }
+            this.gentCronExpression();
+        },
+        /** 星期改变事件 **/
+        weekChange(data) {
+            this.gentCronExpression();
+        },
+        /** 时间改变事件 **/
+        timeChange(data) {
+            this.gentCronExpression();
+        },
+        /**自定义cron表达式选项改变事件 */
+        customerCronChange(data) {
+            this.gentCronExpression();
+        },
+        /** 生成cron表达式**/
+        gentCronExpression() {
+            if (this.timerTimeValue == "") {
+                this.$modal.alertError("执行时间不能为空");
+            }
+            let minute = this.timerTimeValue.substring(0, 2);
+            let hour = this.timerTimeValue.substring(3);
+            let week = "*";
+            if (this.timerWeekValue.length > 0) {
+                week = this.timerWeekValue;
+            }
+            this.form.triggers[this.triggerIndex].cronExpression = "0 " + minute + " " + hour + " ? * " + week;
+        }
+    }
+};
+</script>

vue/src/views/iot/product/product-app.vue

@@ -0,0 +1,121 @@
+<template>
+<div style="padding-left:20px;">
+    <el-row :gutter="10">
+        <el-col :span="14">
+         <el-link type="danger" style="padding-top:5px" :underline="false">该功能，未完成</el-link>
+            <el-table v-loading="loading" :data="modelList" border style="margin-bottom:60px;margin-top:20px;">
+                <el-table-column label="名称" align="center" prop="modelName" />
+                <el-table-column label="标识符" align="center" prop="identifier" />
+                <el-table-column label="物模型类别" align="center" prop="type">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.iot_things_type" :value="scope.row.type" />
+                    </template>
+                </el-table-column>
+                <el-table-column label="数据类型" align="center" prop="datatype">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.iot_data_type" :value="scope.row.datatype" />
+                    </template>
+                </el-table-column>
+                <el-table-column label="部件" align="center" prop="part">
+                    <template slot-scope="scope">
+                        {{scope.row.part}} 系统定义的部件
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <el-divider>高级功能</el-divider>
+            <el-form ref="form" :model="form" label-width="100px">
+                <el-form-item label="自定义页面" prop="page">
+                    <el-input v-model="form.page" placeholder="请输入自定义页面" />
+                </el-form-item>
+            </el-form>
+
+        </el-col>
+        <el-col :span="8" :offset="2">
+            <div class="phone">
+                <div class="phone-container"></div>
+            </div>
+            <div style="text-align:center;margin-top:15px;width:370px;">界面展示</div>
+        </el-col>
+
+    </el-row>
+</div>
+</template>
+
+<script>
+import {
+    listModel,
+} from "@/api/iot/model";
+export default {
+    name: "device-log",
+    dicts: ["iot_things_type", "iot_data_type", "iot_yes_no"],
+    props: {
+        product: {
+            type: Object,
+            default: null
+        }
+    },
+    data() {
+        return {
+            // 遮罩层
+            loading: false,
+            // 产品物模型表格数据
+            modelList: [],
+            // 弹出层标题
+            title: "",
+            // 查询参数
+            queryParams: {
+                productId: 0,
+                // 1-属性，2-功能，3-事件，4-属性和功能
+                type: 4,
+            },
+            form: {},
+        };
+    },
+    watch: {
+        // 获取到父组件传递的productId后，刷新列表
+        product: function (newVal, oldVal) {
+            this.productInfo = newVal;
+            if (this.productInfo && this.productInfo.productId != 0) {
+                this.queryParams.productId = this.productInfo.productId;
+                this.getList();
+            }
+        }
+    },
+    created() {
+
+    },
+    methods: {
+        /** 查询产品物模型列表 */
+        getList() {
+            this.loading = true;
+            listModel(this.queryParams).then((response) => {
+                this.modelList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+    }
+};
+</script>
+
+<style scoped>
+.phone {
+    height: 700px;
+    width: 370px;
+    background-image: url("../../../assets/images/phone.jpg");
+    background-size: cover;
+    top: 0px;
+}
+
+.phone-container {
+    height: 620px;
+    width: 345px;
+    border-radius: 20px;
+    position: relative;
+    top: 45px;
+    left: 12px;
+    border: 1px solid #888;
+    background: linear-gradient(23deg, #AFF7FF 0%, #ffc3a0 100%);
+}
+</style>

vue/src/views/iot/product/product-edit.vue

@@ -0,0 +1,288 @@
+<template>
+<el-card style="margin:6px;padding-bottom:100px;">
+    <el-tabs v-model="activeName" tab-position="left" style="padding:10px;">
+        <el-tab-pane name="basic">
+            <span slot="label"> * 基本信息</span>
+            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+                <el-row :gutter="100">
+                    <el-col :span="7">
+                        <el-form-item label="产品名称" prop="productName">
+                            <el-input v-model="form.productName" placeholder="请输入产品名称" />
+                        </el-form-item>
+                        <el-form-item label="产品分类" prop="categoryId">
+                            <el-select v-model="form.categoryId" placeholder="请选择分类" @change="selectCategory" style="width:100%">
+                                <el-option v-for="category in categoryShortList" :key="category.id" :label="category.name" :value="category.id"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="联网方式" prop="networkMethod">
+                            <el-select v-model="form.networkMethod" placeholder="请选择联网方式" style="width:100%;">
+                                <el-option v-for="dict in dict.type.iot_network_method" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="备注信息" prop="remark">
+                            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" rows="7" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="7">
+                        <el-form-item label="设备类型" prop="deviceType">
+                            <el-select v-model="form.deviceType" placeholder="请选择设备类型" disabled style="width:100%">
+                                <el-option v-for="dict in dict.type.iot_device_type" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="设备认证" prop="vertificateMethod">
+                            <el-select v-model="form.vertificateMethod" placeholder="请选择认证方式" disabled style="width:100%">
+                                <el-option v-for="dict in dict.type.iot_vertificate_method" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="产品编号" prop="productId">
+                            <el-input v-model="form.productId" placeholder="自动生成" :disabled="!form.mqttAccount" readonly />
+                        </el-form-item>
+                        <el-form-item label="Mqtt账号" prop="mqttAccount">
+                            <el-input v-model="form.mqttAccount" placeholder="自动生成" :disabled="!form.mqttAccount" readonly :type="accountInputType">
+                                <el-button slot="append" icon="el-icon-view" style="font-size:18px;" @click="changeInputType('account')"></el-button>
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="Mqtt密码" prop="mqttPassword">
+                            <el-input v-model="form.mqttPassword" placeholder="自动生成" :disabled="!form.mqttAccount" readonly :type="passwordInputType">
+                                <el-button slot="append" icon="el-icon-view" style="font-size:18px;" @click="changeInputType('password')"></el-button>
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="产品秘钥" prop="mqttSecret">
+                            <el-input v-model="form.mqttSecret" placeholder="自动生成" :disabled="!form.mqttAccount" readonly :type="keyInputType">
+                                <el-button slot="append" icon="el-icon-view" style="font-size:18px;" @click="changeInputType('key')"></el-button>
+                            </el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="产品图片">
+                            <imageUpload ref="image-upload" :value="form.imgUrl" :limit="1" :fileSize="1" @input="getImagePath($event)"></imageUpload>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-col :span="20">
+                    <el-form-item style="text-align: center;margin:40px 0px;">
+                        <el-button type="primary" @click="submitForm()" v-if="form.status!=2">提交</el-button>
+                    </el-form-item>
+                </el-col>
+            </el-form>
+        </el-tab-pane>
+
+        <el-tab-pane label="" name="things" :disabled="form.productId==0">
+            <span slot="label">* 定义物模型</span>
+            <product-things-model ref="productThingsModel" :product="form" />
+        </el-tab-pane>
+
+        <el-tab-pane label="" name="alert" disabled>
+            <span slot="label"> 告警配置</span>
+            <product-alert ref="productAlert" :product="form"></product-alert>
+        </el-tab-pane>
+
+        <el-tab-pane label="" name="productApp" disabled>
+            <span slot="label">自定义APP</span>
+            <product-app ref="productApp" :product="form" />
+        </el-tab-pane>
+
+        <el-tab-pane label="" disabled name="product01" />
+        <el-tab-pane label="" disabled name="product02" />
+        <el-tab-pane label="" disabled name="product03" />
+        <el-tab-pane v-if="form.status==1" name="product04">
+            <span slot="label">
+                <el-button type="success" size="mini" @click="changeProductStatus(2)">发布产品</el-button>
+            </span>
+        </el-tab-pane>
+        <el-tab-pane v-if="form.status==2" name="product05">
+            <span slot="label">
+                <el-button type="danger" size="mini" @click="changeProductStatus(1)">取消发布</el-button>
+            </span>
+        </el-tab-pane>
+        <el-tab-pane name="product06">
+            <span slot="label">
+                <el-button type="info" size="mini" @click="goBack()">返回列表</el-button>
+            </span>
+        </el-tab-pane>
+    </el-tabs>
+
+</el-card>
+</template>
+
+<script>
+import productThingsModel from "./product-things-model";
+import productApp from "./product-app"
+import productAlert from "./product-alert"
+import imageUpload from "../../../components/ImageUpload/index"
+import {
+    listShortCategory
+} from "@/api/iot/category";
+import {
+    getProduct,
+    addProduct,
+    updateProduct,
+    changeProductStatus
+} from "@/api/iot/product";
+
+export default {
+    name: "Product-edit",
+    dicts: ['iot_device_type', 'iot_network_method', 'iot_vertificate_method'],
+    components: {
+        productThingsModel,
+        productApp,
+        productAlert,
+        imageUpload,
+    },
+    data() {
+        return {
+            // 输入框类型
+            keyInputType: "password",
+            accountInputType: "text",
+            passwordInputType: "password",
+            // 选中选项卡
+            activeName: 'basic',
+            // 分类短列表
+            categoryShortList: [],
+            // 表单参数
+            form: {
+                networkMethod: 1,
+                deviceType: 1,
+                vertificateMethod: 3,
+            },
+            // 表单校验
+            rules: {
+                productName: [{
+                    required: true,
+                    message: "产品名称不能为空",
+                    trigger: "blur"
+                }],
+                categoryId: [{
+                    required: true,
+                    message: "产品分类ID不能为空",
+                    trigger: "blur"
+                }]
+            },
+
+        };
+    },
+    created() {
+        // 获取产品信息
+        const productId = this.$route.query && this.$route.query.productId;
+        this.form.productId = productId;
+        if (this.form.productId != 0) {
+            this.getProduct();
+        }
+        // 获取简短分类列表
+        listShortCategory().then(response => {
+            this.categoryShortList = response.data;
+        })
+    },
+    methods: {
+        /** 返回按钮 */
+        goBack() {
+            const obj = {
+                path: "/iot/product",
+                query: {
+                    t: Date.now(),
+                    pageNum: this.$route.query.pageNum
+                }
+            };
+            this.$tab.closeOpenPage(obj);
+            this.reset();
+        },
+        /** 获取产品信息 */
+        getProduct() {
+            getProduct(this.form.productId).then(response => {
+                this.form = response.data;
+            });
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                productId: 0,
+                productName: null,
+                categoryId: null,
+                categoryName: null,
+                status: 0,
+                tslJson: null,
+                deviceType: 1,
+                networkMethod: 1,
+                vertificateMethod: 3,
+                mqttAccount: null,
+                mqttPassword: null,
+                mqttSecret: null,
+                remark: null
+            };
+            this.resetForm("form");
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.form.productId != null && this.form.productId != 0) {
+                        updateProduct(this.form).then(response => {
+                            this.$modal.alertSuccess("修改成功");
+                        });
+                    } else {
+                        addProduct(this.form).then(response => {
+                            this.$modal.alertSuccess("添加成功,可以开始定义物模型了");
+                            this.form = response.data;
+                            this.activeName = "things";
+                        });
+                    }
+                }
+            });
+        },
+        /** 更新产品状态 */
+        changeProductStatus(status) {
+            let message="发生错误了";
+            if(status==2){
+                message="产品发布后不能再更改产品内容和对应物模型 ！";
+            }else if(status==1){
+                message="产品下不能有已经创建的设备，才能取消发布哦 ！"
+            }
+            this.$confirm(message, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                let data = {};
+                data.productId = this.form.productId;
+                data.status = status;
+                changeProductStatus(data).then(response => {
+                    this.$modal.alertSuccess(response.msg);
+                    this.goBack();
+                }).catch(()=>{
+                    if(status==2){
+                    this.activeName = "things";
+                    }else{
+                        this.goBack();
+                    }
+                });
+            }).catch(() => {
+                this.activeName = "basic";
+            });
+        },
+        /** 选择分类 */
+        selectCategory(val) {
+            for (var i = 0; i < this.categoryShortList.length; i++) {
+                if (this.categoryShortList[i].id == val) {
+                    this.form.categoryName = this.categoryShortList[i].name;
+                    return;
+                }
+            }
+        },
+        /**获取上传图片的路径 */
+        getImagePath(data) {
+            this.form.imgUrl = data;
+        },
+        /**改变输入框类型**/
+        changeInputType(name) {
+            if (name == "key") {
+                this.keyInputType = this.keyInputType == "password" ? "text" : "password";
+            } else if (name == "account") {
+                this.accountInputType = this.accountInputType == "password" ? "text" : "password";
+            } else if (name == "password") {
+                this.passwordInputType = this.passwordInputType == "password" ? "text" : "password";
+            }
+        }
+    }
+};
+</script>

vue/src/views/iot/product/product-select-template.vue

@@ -0,0 +1,112 @@
+<template>
+<div style="margin-top:-35px;">
+    <el-divider></el-divider>
+    <el-form :model="queryParams" ref="product-select-template" :inline="true" label-width="48px">
+        <el-form-item label="名称" prop="templateName">
+            <el-input v-model="queryParams.templateName" placeholder="请输入物模型名称" clearable size="small" @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="类别" prop="type">
+            <el-select v-model="queryParams.type" placeholder="请选择模型类别" clearable size="small">
+                <el-option v-for="dict in dict.type.iot_things_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+        </el-form-item>
+        <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange"  ref="selectTemplateTable" border>
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="名称" align="center" prop="templateName" />
+        <el-table-column label="标识符" align="center" prop="identifier" />
+        <el-table-column label="物模型类别" align="center" prop="type">
+            <template slot-scope="scope">
+                <dict-tag :options="dict.type.iot_things_type" :value="scope.row.type" />
+            </template>
+        </el-table-column>
+        <el-table-column label="首页显示" align="center" prop="isTop">
+            <template slot-scope="scope">
+                <el-switch v-model="scope.row.isTop" :active-value="1" :inactive-value="0" active-color="#81c0fb" disabled></el-switch>
+            </template>
+        </el-table-column>
+        <el-table-column label="监测值" align="center" prop="isMonitor">
+            <template slot-scope="scope">
+                <el-switch v-model="scope.row.isMonitor" :active-value="1" :inactive-value="0" active-color="#81c0fb" disabled></el-switch>
+            </template>
+        </el-table-column>
+        <el-table-column label="数据类型" align="center" prop="datatype">
+            <template slot-scope="scope">
+                <dict-tag :options="dict.type.iot_data_type" :value="scope.row.datatype" />
+            </template>
+        </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+</div>
+</template>
+
+<script>
+import {
+    listTemplate,
+} from "@/api/iot/template";
+export default {
+    name: "product-select-template",
+    dicts: ["iot_things_type", "iot_data_type", "iot_yes_no"],
+    data() {
+        return {
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 总条数
+            total: 0,
+            // 通用物模型表格数据
+            templateList: [],
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                templateName: null,
+                type: null,
+            },
+        };
+    },
+    created() {
+        this.getList();
+        this.ids = [];
+    },
+    methods: {
+        /** 查询通用物模型列表 */
+        getList() {
+            this.loading = true;
+            listTemplate(this.queryParams).then((response) => {
+                this.templateList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map((item) => item.templateId);
+            this.single = selection.length !== 1;
+            this.multiple = !selection.length;
+            // Id数组传递到父组件
+            this.$emit('idsToParentEvent', this.ids)
+        },
+
+    },
+};
+</script>

vue/src/views/iot/product/product-things-model.vue

@@ -0,0 +1,590 @@
+<template>
+<div style="padding-left:20px;">
+    <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-if="productInfo.status==1">新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button type="success" plain icon="el-icon-plus" size="mini" @click="handleSelect" v-if="productInfo.status==1">导入通用物模型</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button type="info" plain icon="el-icon-plus" size="mini" @click="handleOpenThingsModel">查看物模型</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-link type="danger" style="padding-top:5px" :underline="false">注意：标识符不能重复</el-link>
+        </el-col>
+        <right-toolbar @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="modelList" border>
+        <el-table-column label="名称" align="center" prop="modelName" />
+        <el-table-column label="标识符" align="center" prop="identifier" />
+        <el-table-column label="首页显示" align="center" prop="isTop" width="100">
+            <template slot-scope="scope">
+                <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isTop" />
+            </template>
+        </el-table-column>
+        <el-table-column label="实时监测" align="center" prop="isMonitor" width="100">
+            <template slot-scope="scope">
+                <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isMonitor" />
+            </template>
+        </el-table-column>
+        <el-table-column label="物模型类别" align="center" prop="type">
+            <template slot-scope="scope">
+                <dict-tag :options="dict.type.iot_things_type" :value="scope.row.type" />
+            </template>
+        </el-table-column>
+        <el-table-column label="数据类型" align="center" prop="datatype">
+            <template slot-scope="scope">
+                <dict-tag :options="dict.type.iot_data_type" :value="scope.row.datatype" />
+            </template>
+        </el-table-column>
+        <el-table-column label="数据定义" align="left" prop="specs" min-width="150" class-name="specsColor">
+            <template slot-scope="scope">
+                <div v-html="formatSpecsDisplay(scope.row.specs)"></div>
+            </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
+                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改物模型对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+            <el-form-item label="名称" prop="modelName">
+                <el-input v-model="form.modelName" placeholder="请输入物模型名称，例如：温度" />
+            </el-form-item>
+            <el-form-item label="标识符" prop="identifier">
+                <el-input v-model="form.identifier" placeholder="请输入标识符，例如：temperature" />
+            </el-form-item>
+            <el-form-item label="模型类别" prop="type">
+                <el-radio-group v-model="form.type" @change="typeChange(form.type)">
+                    <el-radio-button label="1">属性</el-radio-button>
+                    <el-radio-button label="2">功能</el-radio-button>
+                    <el-radio-button label="3">事件</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="首页显示" prop="isTop" v-show="form.type != 3">
+                <el-switch v-model="form.isTop" active-text="" inactive-text="" :active-value="1" :inactive-value="0" active-color="#13ce66">
+                </el-switch>
+            </el-form-item>
+            <el-form-item label="实时监测" prop="isMonitor" v-show="form.type == 1">
+                <el-switch v-model="form.isMonitor" active-text="" inactive-text="" :active-value="1" :inactive-value="0" active-color="#13ce66" @change="changeMonitor(form.isMonitor)">
+                </el-switch>
+            </el-form-item>
+            <el-divider></el-divider>
+            <el-form-item label="数据类型" prop="datatype">
+                <el-select v-model="form.datatype" placeholder="请选择数据类型" @change="dataTypeChange">
+                    <el-option key="integer" label="整数" value="integer"></el-option>
+                    <el-option key="decimal" label="小数" value="decimal"></el-option>
+                    <el-option key="bool" label="布尔" value="bool" :disabled="form.isMonitor==1"></el-option>
+                    <el-option key="enum" label="枚举" value="enum" :disabled="form.isMonitor==1"></el-option>
+                    <el-option key="string" label="字符串" value="string" :disabled="form.isMonitor==1"></el-option>
+                    <el-option key="array" label="数组" value="array" :disabled="form.isMonitor==1"></el-option>
+                </el-select>
+            </el-form-item>
+
+            <div v-if="form.datatype == 'integer' || form.datatype == 'decimal'">
+                <el-form-item label="取值范围">
+                    <el-row>
+                        <el-col :span="9">
+                            <el-input v-model="form.specs.min" placeholder="最小值" type="number" />
+                        </el-col>
+                        <el-col :span="2" align="center">到</el-col>
+                        <el-col :span="9">
+                            <el-input v-model="form.specs.max" placeholder="最大值" type="number" />
+                        </el-col>
+                    </el-row>
+                </el-form-item>
+                <el-form-item label="单位">
+                    <el-input v-model="form.specs.unit" placeholder="请输入单位，例如：℃" />
+                </el-form-item>
+                <el-form-item label="步长">
+                    <el-input v-model="form.specs.step" placeholder="请输入步长，例如：1" type="number" />
+                </el-form-item>
+            </div>
+
+            <div v-if="form.datatype == 'bool'">
+                <el-form-item label="布尔值" prop="">
+                    <el-row style="margin-bottom:10px;">
+                        <el-col :span="11">
+                            <el-input v-model="form.specs.falseText" placeholder="0 对应的文本，例如：关闭" />
+                        </el-col>
+                        <el-col :span="10" :offset="1"> 0 对应文本</el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="11">
+                            <el-input v-model="form.specs.trueText" placeholder="1 对应的文本，例如：打开" />
+                        </el-col>
+                        <el-col :span="10" :offset="1"> 1 对应文本</el-col>
+                    </el-row>
+                </el-form-item>
+            </div>
+
+            <div v-if="form.datatype == 'enum'">
+                <el-form-item label="枚举项" prop="">
+                    <el-row v-for="(item,index) in form.specs.enumList" :key="index" style="margin-bottom:10px;">
+                        <el-col :span="8">
+                            <el-input v-model="item.value" placeholder="参数值，例如：0" type="number" />
+                        </el-col>
+                        <el-col :span="12" :offset="1">
+                            <el-input v-model="item.text" placeholder="参数描述，例如：中速档位" />
+                        </el-col>
+                        <el-col :span="2" :offset="1" v-if="index!=0"><a style="color:#F56C6C" @click="removeEnumItem(index)">删除</a></el-col>
+                    </el-row>
+                    <div>+ <a style="color:#409EFF" @click="addEnumItem()">添加枚举项</a></div>
+                </el-form-item>
+            </div>
+
+            <div v-if="form.datatype == 'string'">
+                <el-form-item label="最大长度" prop="">
+                    <el-input v-model="form.specs.maxLength" placeholder="请输入字符串最大长度，例如：1024" type="number" />
+                </el-form-item>
+            </div>
+
+            <div v-if="form.datatype == 'array'">
+                <el-form-item label="数组类型" prop="">
+                    <el-radio-group v-model="form.specs.arrayType">
+                        <el-radio label="int">int（整数）</el-radio>
+                        <el-radio label="double">double（小数）</el-radio>
+                        <el-radio label="string">string（字符串）</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+            </div>
+        </el-form>
+
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="submitForm">确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+        </div>
+    </el-dialog>
+
+    <!-- 导入通用物模型对话框 -->
+    <el-dialog :title="title" :visible.sync="openSelect" width="800px" append-to-body>
+        <product-select-template ref="productSelectTemplate" @idsToParentEvent="getChildData($event)" />
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="importSelect">导 入</el-button>
+            <el-button @click="cancelSelect">取 消</el-button>
+        </div>
+    </el-dialog>
+
+    <!-- 物模型JSON -->
+    <el-dialog :title="title" :visible.sync="openThingsModel" width="600px" append-to-body>
+        <div style="border:1px solid #ccc;margin-top:-15px;height:600px; overflow:scroll;">
+            <json-viewer :value="thingsModel" :expand-depth=10 copyable>
+                <template v-slot:copy>
+                    复制
+                </template>
+            </json-viewer>
+        </div>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="info" @click="handleCloseThingsModel">关 闭</el-button>
+        </div>
+    </el-dialog>
+</div>
+</template>
+
+<style>
+.specsColor {
+    background-color: #fcfcfc;
+}
+</style>
+
+<script>
+import productSelectTemplate from "./product-select-template";
+import JsonViewer from 'vue-json-viewer'
+import 'vue-json-viewer/style.css'
+import {
+    listModel,
+    getModel,
+    delModel,
+    addModel,
+    updateModel,
+    importModel
+} from "@/api/iot/model";
+export default {
+    name: "product-things-model",
+    dicts: ["iot_things_type", "iot_data_type", "iot_yes_no"],
+    components: {
+        productSelectTemplate,
+        JsonViewer
+    },
+    props: {
+        product: {
+            type: Object,
+            default: null
+        }
+    },
+    watch: {
+        // 获取到父组件传递的productId后，刷新列表
+        product: function (newVal, oldVal) {
+            this.productInfo = newVal;
+            if (this.productInfo && this.productInfo.productId != 0) {
+                this.queryParams.productId = this.productInfo.productId;
+                this.getList();
+            }
+        }
+    },
+    data() {
+        return {
+            // 物模型
+            thingsModel: {},
+            // 父组件接收的产品信息
+            productInfo: {},
+            // 子组件选中的id数组
+            templateIds: [],
+            // 遮罩层
+            loading: false,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 产品物模型表格数据
+            modelList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            openSelect: false,
+            openThingsModel: false,
+            // 查询参数
+            queryParams: {
+                productId: 0,
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                modelName: [{
+                    required: true,
+                    message: "物模型名称不能为空",
+                    trigger: "blur"
+                }],
+                identifier: [{
+                    required: true,
+                    message: "标识符，产品下唯一不能为空",
+                    trigger: "blur",
+                }, ],
+                type: [{
+                    required: true,
+                    message: "模型类别不能为空",
+                    trigger: "change"
+                }, ],
+                datatype: [{
+                    required: true,
+                    message: "数据类型不能为空",
+                    trigger: "change"
+                }, ],
+                specs: [{
+                    required: true,
+                    message: "数据定义不能为空",
+                    trigger: "blur"
+                }, ],
+            },
+        };
+    },
+    created() {
+
+    },
+    methods: {
+        /** 查询产品物模型列表 */
+        getList() {
+            this.loading = true;
+            listModel(this.queryParams).then((response) => {
+                this.modelList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                modelId: null,
+                modelName: null,
+                productId: null,
+                productName: null,
+                tenantId: null,
+                tenantName: null,
+                identifier: null,
+                type: null,
+                datatype: null,
+                isSys: null,
+                isTop: null,
+                isMonitor: null,
+                delFlag: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                specs: null,
+            };
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "添加物模型";
+            this.form.type = 1;
+            this.form.datatype = "integer"
+            this.form.specs = {
+                enumList: [],
+            };
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const modelId = row.modelId;
+            getModel(modelId).then((response) => {
+                this.form = response.data;
+                this.open = true;
+                this.title = "修改物模型";
+                // Json转对象
+                this.form.specs = JSON.parse(this.form.specs);
+            });
+        },
+        /**查看物模型 */
+        handleOpenThingsModel() {
+            this.title = "物模型";
+            // 生成物模型
+            this.thingsModel = {
+                properties: [],
+                functions: [],
+                events: []
+            }
+            for (var i = 0; i < this.modelList.length; i++) {
+                let thingsItem = {};
+                thingsItem.id = this.modelList[i].identifier;
+                thingsItem.name = this.modelList[i].modelName;
+                if (this.modelList[i].type == 1) {
+                    //属性
+                    thingsItem.isTop = this.modelList[i].isTop;
+                    thingsItem.isMonitor = this.modelList[i].isMonitor;
+                    thingsItem.datatype = JSON.parse(this.modelList[i].specs);
+                    this.thingsModel.properties.push(thingsItem);
+                } else if (this.modelList[i].type == 2) {
+                    // 功能
+                    thingsItem.isTop = this.modelList[i].isTop;
+                    thingsItem.datatype = JSON.parse(this.modelList[i].specs);
+                    this.thingsModel.functions.push(thingsItem);
+                } else if (this.modelList[i].type == 3) {
+                    // 事件
+                    thingsItem.datatype = JSON.parse(this.modelList[i].specs);
+                    this.thingsModel.events.push(thingsItem);
+                }
+            }
+
+            this.openThingsModel = true;
+        },
+        /**关闭物模型 */
+        handleCloseThingsModel() {
+            this.openThingsModel = false;
+        },
+        /** 选择物模型 */
+        handleSelect() {
+            this.openSelect = true;
+            this.title = "导入通用物模型";
+            this.form.type = 1;
+            this.form.datatype = "integer"
+            this.form.specs = {
+                enumList: [],
+            };
+        },
+        // 取消导入通用物模型按钮
+        cancelSelect() {
+            this.openSelect = false;
+            this.$refs.productSelectTemplate.$refs.selectTemplateTable.clearSelection();
+        },
+        // 获取子组件的值
+        getChildData(data) {
+            this.templateIds = data;
+        },
+        // 导入通用物模型按钮
+        importSelect() {
+            if (this.templateIds != null && this.templateIds.length > 0) {
+                var importData = {
+                    productId: this.productInfo.productId,
+                    productName: this.productInfo.productName,
+                    templateIds: this.templateIds
+                }
+                importModel(importData).then(response => {
+                    this.$modal.msgSuccess(response.msg);
+                    this.openSelect = false;
+                    this.$refs.productSelectTemplate.$refs.selectTemplateTable.clearSelection();
+                    this.getList();
+                });
+            }
+
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate((valid) => {
+                if (valid) {
+                    if (this.form.modelId != null) {
+                        // 格式化specs
+                        this.form.specs = this.formatThingsSpecs();
+                        if (this.form.type == 2) {
+                            this.form.isMonitor = 0;
+                        } else if (this.form.type == 3) {
+                            this.form.isMonitor = 0;
+                            this.form.isTop = 0;
+                        }
+                        updateModel(this.form).then((response) => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        // 格式化specs
+                        this.form.specs = this.formatThingsSpecs();
+                        this.form.productId = this.productInfo.productId;
+                        this.form.productName = this.productInfo.productName;
+                        if (this.form.type == 2) {
+                            this.form.isMonitor = 0;
+                        } else if (this.form.type == 3) {
+                            this.form.isMonitor = 0;
+                            this.form.isTop = 0;
+                        }
+                        addModel(this.form).then((response) => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const modelIds = row.modelId;
+            this.$modal
+                .confirm('是否确认删除物模型编号为"' + modelIds + '"的数据项？')
+                .then(function () {
+                    return delModel(modelIds);
+                })
+                .then(() => {
+                    this.getList();
+                    this.$modal.msgSuccess("删除成功");
+                })
+                .catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download(
+                "iot/model/export", {
+                    ...this.queryParams,
+                },
+                `model_${new Date().getTime()}.xlsx`
+            );
+        },
+        // 类型改变
+        typeChange(label) {
+            if (label == 2 || label == 3) {
+                this.form.isMonitor = 0;
+            }
+        },
+        // 实时监测改变
+        changeMonitor(isMonitor) {
+            if (isMonitor == 1 && this.form.datatype != "integer" && this.form.datatype != "decimal") {
+                this.form.datatype = "integer";
+            }
+        },
+        // 格式化物模型
+        formatThingsSpecs() {
+            var data = {};
+            data.type = this.form.datatype;
+            if (this.form.datatype == "integer" || this.form.datatype == "decimal") {
+                data.min = Number(this.form.specs.min);
+                data.max = Number(this.form.specs.max);
+                data.unit = this.form.specs.unit;
+                data.step = Number(this.form.specs.step);
+            } else if (this.form.datatype == "string") {
+                data.maxLength = Number(this.form.specs.maxLength);
+            } else if (this.form.datatype == "bool") {
+                data.falseText = this.form.specs.falseText;
+                data.trueText = this.form.specs.trueText;
+            } else if (this.form.datatype == "array") {
+                data.arrayType = this.form.specs.arrayType;
+            } else if (this.form.datatype == "enum") {
+                data.enumList = this.form.specs.enumList;
+            }
+            return JSON.stringify(data);
+        },
+        /** 切换为枚举项 */
+        dataTypeChange(val) {
+            if (val == "enum") {
+                this.form.specs.enumList = [{
+                    value: "",
+                    text: ""
+                }];
+            } else if (val == "array") {
+                this.form.specs.arrayType = "int";
+            }
+        },
+        /** 添加枚举项 */
+        addEnumItem() {
+            this.form.specs.enumList.push({
+                value: "",
+                text: ""
+            })
+        },
+        /** 删除枚举项 */
+        removeEnumItem(index) {
+            this.form.specs.enumList.splice(index, 1);
+        },
+        /** 格式化显示数据定义 */
+        formatSpecsDisplay(json) {
+            let specs = JSON.parse(json);
+            if (specs.type === "integer" || specs.type === "decimal") {
+                return "<span style='width:50%;display:inline-block;'>最大值：<span style=\"color:#F56C6C\">" + specs.max +
+                    "</span></span>最小值：<span style=\"color:#F56C6C\">" + specs.min +
+                    "</span><br /><span style='width:50%;display:inline-block;'>步长：<span style=\"color:#F56C6C\">" + specs.step +
+                    "</span></span>单位：<span style=\"color:#F56C6C\">" + specs.unit;
+            } else if (specs.type === "string") {
+                return "最大长度：<span style=\"color:#F56C6C\">" + specs.maxLength + "</span>";
+            } else if (specs.type === "array") {
+                return "数组类型：<span style=\"color:#F56C6C\">" + specs.arrayType + "</span>";
+            } else if (specs.type === "enum") {
+                let items = "";
+                for (let i = 0; i < specs.enumList.length; i++) {
+                    items = items + "<span style='width:50%;display:inline-block;'>" + specs.enumList[i].value + "：<span style='color:#F56C6C'>" + specs.enumList[i].text + "</span></span>"
+                    if (i > 0 && i % 2 != 0) {
+                        items = items + "<br />"
+                    }
+                }
+                return items;
+            } else if (specs.type === "bool") {
+                return "<span style='width:50%;display:inline-block;'>0：<span style=\"color:#F56C6C\">" + specs.falseText +
+                    "</span></span>1：<span style=\"color:#F56C6C\">" + specs.trueText
+            }
+        },
+
+    },
+};
+</script>

vue/src/views/iot/scene/index.vue

@@ -0,0 +1,624 @@
+<template>
+<div style="padding:6px;">
+
+    <el-card v-show="showSearch" style="margin-bottom:6px;">
+    <div style="height:50px; color:#F56C6C;margin-left:20px;">该功能下个版本发布</div>
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" style="margin-bottom:-20px;">
+            <el-form-item label="场景名称" prop="sceneName">
+                <el-input v-model="queryParams.sceneName" placeholder="请输入场景名称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+
+    <el-card style="padding-bottom:100px;">
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:scene:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:scene:edit']">修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="danger" plain icon="el-icon-delete" size="mini" disabled @click="handleDelete" v-hasPermi="['iot:scene:remove']">删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['iot:scene:export']">导出</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="sceneList" @selection-change="handleSelectionChange" border>
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="场景名称" align="center" prop="sceneName" />
+            <el-table-column label="用户ID" align="center" prop="userId" />
+            <el-table-column label="用户名称" align="center" prop="userName" />
+            <el-table-column label="触发器" align="center" prop="triggers" />
+            <el-table-column label="执行动作" align="center" prop="actions" />
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+                <template slot-scope="scope">
+                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="备注" align="center" prop="remark" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:scene:edit']">修改</el-button>
+                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:scene:remove']" disabled>删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+        <!-- 添加或修改场景联动对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                <el-row>
+                    <el-col :span="16">
+                        <el-form-item label="场景名称" prop="sceneName">
+                            <el-input v-model="form.sceneName" placeholder="请输入场景名称" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="触发器" prop="griggers">
+                            <el-select v-model="form.condition" placeholder="请选择" size="small" style="margin-bottom:10px;">
+                                <el-option v-for="item in triggerConditions" :key="item.value" :label="item.label" :value="item.value">
+                                </el-option>
+                            </el-select>
+                            <div v-for="(item,index) in form.triggers" :key="index" style="margin-bottom:15px;border:1px solid #ddd;padding:10px;">
+                                <el-row>
+                                    <el-col :span="4">
+                                        <el-select v-model="item.source" placeholder="请选择" size="small" @change="changeTriggerSource">
+                                            <el-option v-for="subItem in triggerSource" :key="subItem.value" :label="subItem.label" :value="subItem.value">
+                                            </el-option>
+                                        </el-select>
+                                    </el-col>
+                                    <el-col :span="16" :offset="1" v-if="item.source==1">
+                                        <el-link :underline="false">请选择一个设备<i class="el-icon-edit el-icon--right"></i></el-link>
+                                    </el-col>
+                                    <el-col :span="16" :offset="1" v-if="item.source==2">
+                                        <el-time-picker v-model="timerTimeValue" size="small" value-format="HH:mm" placeholder="选择执行时间" @change="timeChange" :disabled="item.isAdvance==1"></el-time-picker>
+                                    </el-col>
+                                    <el-col :span="2" :offset="1" v-if="index!=0"><a style="color:#F56C6C" @click="removeTriggerItem(index)">删除</a></el-col>
+                                </el-row>
+                                <!--设备-->
+                                <el-row v-if="item.source==1">
+                                    <el-col :span="4">
+                                        <el-select v-model="item.modelType" placeholder="请选择" size="small">
+                                            <el-option v-for="subItem in modelTypes" :key="subItem.value" :label="subItem.label" :value="subItem.value">
+                                            </el-option>
+                                        </el-select>
+                                    </el-col>
+                                    <el-col :span="4" :offset="1">
+                                        <el-select v-model="item.modelType" placeholder="请选择" size="small">
+                                            <el-option v-for="subItem in modelTypes" :key="subItem.value" :label="subItem.label" :value="subItem.value">
+                                            </el-option>
+                                        </el-select>
+                                    </el-col>
+                                    <el-col :span="5" :offset="1">
+                                        <el-select v-model="item.operator" placeholder="请选择操作符" size="small">
+                                            <el-option key="=" label="等于(=)" value="=" />
+                                            <el-option key="!=" label="不等于(!=)" value="!=" />
+                                            <el-option key=">" label="大于(>)" value=">" />
+                                            <el-option key="<" label="小于(<)" value="<" />
+                                            <el-option key=">=" label="大于等于(>=)" value=">=" />
+                                            <el-option key="<=" label="小于等于(<=)" value="<=" />
+                                            <el-option key="contain" label="包含(contain)" value="contain" />
+                                            <el-option key="notcontain" label="不包含(not contain)" value="notcontain" />
+                                        </el-select>
+                                    </el-col>
+                                    <el-col :span="5" :offset="1">
+                                        <el-input v-model="item.value" placeholder="值" size="small" />
+                                    </el-col>                                    
+                                </el-row>
+                                <!--定时-->
+                                <el-row v-if="item.source==2">
+                                    <el-col :span="24">
+                                        <el-row style="margin-bottom:5px;">
+                                            <el-col :span="4">
+                                                <el-select v-model="timerWeekRepeatValue" placeholder="请选择" @change="repeatChange" size="small" :disabled="item.isAdvance==1">
+                                                    <el-option v-for="item in timerWeekRepeats" :key="item.value" :label="item.label" :value="item.value">
+                                                    </el-option>
+                                                </el-select>
+                                            </el-col>
+                                            <el-col :span="15" :offset="1" v-if="timerWeekRepeatValue==3">
+                                                <el-select v-model="timerWeekValue" placeholder="请选择" multiple style="width:485px" @change="weekChange" size="small" :disabled="item.isAdvance==1">
+                                                    <el-option v-for="item in timerWeeks" :key="item.value" :label="item.label" :value="item.value">
+                                                    </el-option>
+                                                </el-select>
+                                            </el-col>
+                                        </el-row>
+                                    </el-col>
+                                    <el-col :span="24">
+                                        <el-row>
+                                            <el-col :span="18">
+                                                <el-input v-model="item.cronExpression" placeholder="cron执行表达式" :disabled="item.isAdvance==0" size="small">
+                                                    <template slot="append">
+                                                        <el-button type="primary" @click="handleShowCron(item,index)" :disabled="item.isAdvance==0">
+                                                            生成表达式
+                                                            <i class="el-icon-time el-icon--right"></i>
+                                                        </el-button>
+                                                    </template>
+                                                </el-input>
+                                            </el-col>
+                                            <el-col :span="4" :offset="1">
+                                                <el-checkbox v-model="item.isAdvance" :true-label="1" :false-label="0" @change="customerCronChange">自定义表达式</el-checkbox>
+                                            </el-col>
+                                        </el-row>
+                                    </el-col>
+                                </el-row>
+                            </div>
+                            <div>+ <a style="color:#409EFF" @click="addTriggerItem()">添加触发器</a></div>
+                        </el-form-item>
+                    </el-col>
+
+                    <el-col :span="24">
+                        <el-form-item label="执行动作">
+                            <div v-for="(item,index) in form.actions" :key="index" style="margin-bottom:15px;border:1px solid #ddd;padding:10px;">
+                                <el-row>
+                                    <el-col :span="4">
+                                        <el-select v-model="item.source" placeholder="请选择" size="small">
+                                            <el-option v-for="subItem in actionSource" :key="subItem.value" :label="subItem.label" :value="subItem.value">
+                                            </el-option>
+                                        </el-select>
+                                    </el-col>
+                                    <el-col :span="10" :offset="1" v-if="item.source==1">
+                                        <el-link :underline="false">请选择一个设备<i class="el-icon-edit el-icon--right"></i></el-link>
+                                    </el-col>
+                                </el-row>
+                                <!---设备-->
+                                <el-row v-if="item.source==1">
+                                    <el-col :span="4">
+                                        <el-select v-model="item.modelType" placeholder="请选择" size="small">
+                                            <el-option v-for="subItem in modelTypes" :key="subItem.value" :label="subItem.label" :value="subItem.value">
+                                            </el-option>
+                                        </el-select>
+                                    </el-col>
+                                    <el-col :span="4" :offset="1">
+                                        <el-select v-model="item.modelType" placeholder="请选择" size="small">
+                                            <el-option v-for="subItem in modelTypes" :key="subItem.value" :label="subItem.label" :value="subItem.value">
+                                            </el-option>
+                                        </el-select>
+                                    </el-col>
+                                    <el-col :span="11" :offset="1">
+                                        <el-input v-model="item.value" placeholder="值" size="small" />
+                                    </el-col>
+                                    <el-col :span="2" :offset="1" v-if="index!=0"><a style="color:#F56C6C" @click="removeActionItem(index)">删除</a></el-col>
+                                </el-row>
+                                <!--告警输出-->
+                                <el-row v-if="item.source==3">
+                                    <el-col :span="4">
+                                        <el-select v-model="item.alertLevel" placeholder="告警级别" size="small">
+                                            <el-option v-for="dict in dict.type.iot_alert_level" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+                                        </el-select>
+                                    </el-col>
+                                    <el-col :span="16" :offset="1">
+                                        <el-input v-model="item.alertName" placeholder="请输入告警名称" size="small" />
+                                    </el-col>
+                                </el-row>
+                            </div>
+                            <div>+ <a style="color:#409EFF" @click="addActionItem()">添加执行动作</a></div>
+                        </el-form-item>
+                    </el-col>
+                    <el-col>
+                        <el-form-item label="备注" prop="remark">
+                            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm" disabled>确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog title="Cron表达式生成器" :visible.sync="openCron" append-to-body destroy-on-close class="scrollbar">
+            <crontab @hide="openCron=false" @fill="crontabFill" :expression="expression" style="padding-bottom:80px;"></crontab>
+        </el-dialog>
+    </el-card>
+</div>
+</template>
+
+<script>
+import {
+    listScene,
+    getScene,
+    delScene,
+    addScene,
+    updateScene
+} from "@/api/iot/scene";
+import Crontab from '@/components/Crontab'
+
+export default {
+    components: {
+        Crontab
+    },
+    name: "Scene",
+    dicts: ['iot_alert_level'],
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 场景联动表格数据
+            sceneList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 是否显示Cron表达式弹出层
+            openCron: false,
+            // 传入的表达式
+            expression: "",
+            // 触发器的索引，用于接收传入的表达式
+            triggerIndex:0,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                sceneName: null,
+                userId: null,
+                userName: null,
+            },
+            // 周
+            timerWeekRepeats: [{
+                value: '1',
+                label: '每天'
+            }, {
+                value: '2',
+                label: '仅此一次'
+            }, {
+                value: '3',
+                label: '指定'
+            }],
+            timerWeekRepeatValue: "1",
+
+            timerWeeks: [{
+                value: 1,
+                label: '周一'
+            }, {
+                value: 2,
+                label: '周二'
+            }, {
+                value: 3,
+                label: '周三'
+            }, {
+                value: 4,
+                label: '周四'
+            }, {
+                value: 5,
+                label: '周五'
+            }, {
+                value: 6,
+                label: '周六'
+            }, {
+                value: 7,
+                label: '周日'
+            }],
+            timerWeekValue: [1, 2, 3, 4, 5, 6, 7],
+            // 时间
+            timerTimeValue: '',
+            // 触发器源 1=设备，2=定时，3=告警输出
+            triggerSource: [{
+                value: 1,
+                label: '设备'
+            }, {
+                value: 2,
+                label: '定时'
+            }],
+            // 执行动作源
+            actionSource: [{
+                value: 1,
+                label: '设备'
+            }, {
+                value: 3,
+                label: '告警输出'
+            }],
+            // 物模型类别
+            modelTypes: [{
+                value: 1,
+                label: '属性'
+            }, {
+                value: 2,
+                label: '功能'
+            }],
+            // 触发器条件
+            triggerConditions: [{
+                value: "all",
+                label: '满足所有条件'
+            }, {
+                value: "any",
+                label: '满足任一条件'
+            }],
+            // 表单参数
+            form: {
+                condition: "all", // 触发器条件
+                triggers: [],
+                actions: []
+            },
+            // 表单校验
+            rules: {
+                sceneName: [{
+                    required: true,
+                    message: "场景名称不能为空",
+                    trigger: "blur"
+                }],
+                userId: [{
+                    required: true,
+                    message: "用户ID不能为空",
+                    trigger: "blur"
+                }],
+                userName: [{
+                    required: true,
+                    message: "用户名称不能为空",
+                    trigger: "blur"
+                }],
+                triggers: [{
+                    required: true,
+                    message: "触发器不能为空",
+                    trigger: "blur"
+                }],
+                actions: [{
+                    required: true,
+                    message: "执行动作不能为空",
+                    trigger: "blur"
+                }],
+            }
+        };
+    },
+    created() {
+        this.getList();
+    },
+    methods: {
+        /** 查询场景联动列表 */
+        getList() {
+            this.loading = true;
+            listScene(this.queryParams).then(response => {
+                this.sceneList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                sceneId: null,
+                sceneName: null,
+                userId: null,
+                userName: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                condition: "all", // 触发器条件
+                triggers: [{
+                    id: "",
+                    name: "",
+                    value: "",
+                    deviceId: 0,
+                    deviceName: "请选择一个设备",
+                    source: 1, //1=设备，2=定时，3=告警输出
+                    modelType: 1, // 1=属性，2=功能
+                    jobId: 0,
+                    cronExpression: "",
+                    isAdvance: 0
+                }],
+                actions: [{
+                    id: "",
+                    name: "",
+                    value: "",
+                    deviceId: 0,
+                    deviceName: "请选择一个设备",
+                    source: 1, //1=设备，2=定时，3=告警输出
+                    modelType: 1, // 1=属性，2=功能
+                }]
+            };
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map(item => item.sceneId)
+            this.single = selection.length !== 1
+            this.multiple = !selection.length
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "添加场景联动";
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const sceneId = row.sceneId || this.ids
+            getScene(sceneId).then(response => {
+                this.form = response.data;
+                this.open = true;
+                this.title = "修改场景联动";
+            });
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.form.sceneId != null) {
+                        updateScene(this.form).then(response => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addScene(this.form).then(response => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const sceneIds = row.sceneId || this.ids;
+            this.$modal.confirm('是否确认删除场景联动编号为"' + sceneIds + '"的数据项？').then(function () {
+                return delScene(sceneIds);
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download('iot/scene/export', {
+                ...this.queryParams
+            }, `scene_${new Date().getTime()}.xlsx`)
+        },
+        /** 添加动作 */
+        addActionItem() {
+            this.form.actions.push({
+                id: "",
+                name: "",
+                value: ""
+            })
+        },
+        /** 删除动作 */
+        removeActionItem(index) {
+            this.form.actions.splice(index, 1);
+        },
+        /** 触发器源改变事件 **/
+        changeTriggerSource(data) {
+            this.setTriggerSource();
+        },
+        /** 设置触发器源 **/
+        setTriggerSource() {
+            // 触发器智能包含一个定时
+            let hasTimer = false;
+            for (let i = 0; i < this.form.triggers.length; i++) {
+                if (this.form.triggers[i].source == 2) {
+                    hasTimer = true;
+                    this.triggerIndex=i;
+                }
+            }
+            if (hasTimer) {
+                this.triggerSource = [{
+                    value: 1,
+                    label: '设备'
+                }];
+            } else {
+                //定时
+                this.triggerSource = [{
+                    value: 1,
+                    label: '设备'
+                }, {
+                    value: 2,
+                    label: '定时'
+                }];
+
+            }
+        },
+        /** 添加触发器 */
+        addTriggerItem() {
+            this.setTriggerSource();
+            this.form.triggers.push({
+                id: "",
+                name: "",
+                value: "",
+                deviceId: 0,
+                deviceName: "请选择一个设备",
+                source: 1, //1=设备，2=定时，3=告警输出
+                modelType: 1, // 1=属性，2=功能
+                jobId: 0,
+                cronExpression: "",
+                isAdvance: 0
+            })
+
+        },
+        /** 删除触发器 */
+        removeTriggerItem(index) {
+            this.form.triggers.splice(index, 1);
+            this.setTriggerSource();
+        },
+        /** cron表达式按钮操作 */
+        handleShowCron(item,index) {
+            this.expression=item.cronExpression;
+            this.triggerIndex=index;
+            this.openCron = true;
+        },
+        /** 确定后回传值 */
+        crontabFill(value) {
+            this.form.triggers[this.triggerIndex].cronExpression = value;
+        },
+        /** 修改重复事件 **/
+        repeatChange(data) {
+            if (this.timerWeekRepeatValue == 1) {
+                // 每天
+                this.timerWeekValue = [1, 2, 3, 4, 5, 6, 7];
+                this.form.isRepeat = 1;
+            } else if (this.timerWeekRepeatValue == 2) {
+                // 仅此一次
+                this.timerWeekValue = [];
+                this.form.isRepeat = 0;
+            } else {
+                // 指定
+                this.form.isRepeat = 1;
+            }
+            this.gentCronExpression();
+        },
+        /** 星期改变事件 **/
+        weekChange(data) {
+            this.gentCronExpression();
+        },
+        /** 时间改变事件 **/
+        timeChange(data) {
+            this.gentCronExpression();
+        },
+        /**自定义cron表达式选项改变事件 */
+        customerCronChange(data){
+            this.gentCronExpression();
+        },
+        /** 生成cron表达式**/
+        gentCronExpression() {
+            if (this.timerTimeValue == "") {
+                this.$modal.alertError("执行时间不能为空");
+            }
+            let minute = this.timerTimeValue.substring(0, 2);
+            let hour = this.timerTimeValue.substring(3);
+            let week = "*";
+            if (this.timerWeekValue.length > 0) {
+                week = this.timerWeekValue;
+            }
+            this.form.triggers[this.triggerIndex].cronExpression = "0 " + minute + " " + hour + " ? * " + week;
+        }
+    }
+};
+</script>

vue/src/views/iot/template/index.vue

@@ -0,0 +1,497 @@
+<template>
+<div style="padding:6px;">
+    <el-card v-show="showSearch" style="margin-bottom:6px;">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
+            <el-form-item label="名称" prop="templateName">
+                <el-input v-model="queryParams.templateName" placeholder="请输入物模型名称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="类别" prop="type">
+                <el-select v-model="queryParams.type" placeholder="请选择模型类别" clearable size="small">
+                    <el-option v-for="dict in dict.type.iot_things_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+
+    <el-card style="padding-bottom:100px;">
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:template:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:template:edit']">修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['iot:template:remove']">删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['iot:template:export']">导出</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange" border>
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="名称" align="center" prop="templateName" />
+            <el-table-column label="标识符" align="center" prop="identifier" />
+            <el-table-column label="首页显示" align="center" prop="isTop" width="80">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isTop" />
+                </template>
+            </el-table-column>
+            <el-table-column label="监测值" align="center" prop="isMonitor" width="80">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isMonitor" />
+                </template>
+            </el-table-column>
+            <el-table-column label="系统定义" align="center" prop="isSys" width="80">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isSys" />
+                </template>
+            </el-table-column>
+            <el-table-column label="物模型类别" align="center" prop="type">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.iot_things_type" :value="scope.row.type" />
+                </template>
+            </el-table-column>
+            <el-table-column label="数据类型" align="center" prop="datatype">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.iot_data_type" :value="scope.row.datatype" />
+                </template>
+            </el-table-column>
+            <el-table-column label="数据定义" align="left" prop="specs" min-width="150" class-name="specsColor">
+                <template slot-scope="scope">
+                    <div v-html="formatSpecsDisplay(scope.row.specs)"></div>
+                </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+                <template slot-scope="scope">
+                    <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
+                <template slot-scope="scope">
+                    <el-button size="small" type="primary" style="padding:5px;" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:template:edit']">修改</el-button>
+                    <el-button size="small" type="danger" style="padding:5px;" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:template:remove']">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+        <!-- 添加或修改通用物模型对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+                <el-form-item label="名称" prop="templateName">
+                    <el-input v-model="form.templateName" placeholder="请输入物模型名称，例如：温度" />
+                </el-form-item>
+                <el-form-item label="标识符" prop="identifier">
+                    <el-input v-model="form.identifier" placeholder="请输入标识符，例如：temperature" />
+                </el-form-item>
+                <el-form-item label="模型类别" prop="type">
+                    <el-radio-group v-model="form.type" @change="typeChange(form.type)">
+                        <el-radio-button label="1">属性</el-radio-button>
+                        <el-radio-button label="2">功能</el-radio-button>
+                        <el-radio-button label="3">事件</el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="首页显示" prop="isTop" v-show="form.type != 3">
+                    <el-switch v-model="form.isTop" active-text="" inactive-text="" :active-value="1" :inactive-value="0" active-color="#13ce66">
+                    </el-switch>
+                </el-form-item>
+                <el-form-item label="实时监测" prop="isMonitor" v-show="form.type == 1">
+                    <el-switch v-model="form.isMonitor" active-text="" inactive-text="" :active-value="1" :inactive-value="0" active-color="#13ce66" @change="changeMonitor(form.isMonitor)">
+                    </el-switch>
+                </el-form-item>
+                <el-divider></el-divider>
+                <el-form-item label="数据类型" prop="datatype">
+                    <el-select v-model="form.datatype" placeholder="请选择数据类型" @change="dataTypeChange">
+                        <el-option key="integer" label="整数" value="integer"></el-option>
+                        <el-option key="decimal" label="小数" value="decimal"></el-option>
+                        <el-option key="bool" label="布尔" value="bool" :disabled="form.isMonitor==1"></el-option>
+                        <el-option key="enum" label="枚举" value="enum" :disabled="form.isMonitor==1"></el-option>
+                        <el-option key="string" label="字符串" value="string" :disabled="form.isMonitor==1"></el-option>
+                        <el-option key="array" label="数组" value="array" :disabled="form.isMonitor==1"></el-option>
+                    </el-select>
+                </el-form-item>
+                <div v-if="form.datatype == 'integer' || form.datatype == 'decimal'">
+                    <el-form-item label="取值范围">
+                        <el-row>
+                            <el-col :span="9">
+                                <el-input v-model="form.specs.min" placeholder="最小值" type="number" />
+                            </el-col>
+                            <el-col :span="2" align="center">到</el-col>
+                            <el-col :span="9">
+                                <el-input v-model="form.specs.max" placeholder="最大值" type="number" />
+                            </el-col>
+                        </el-row>
+                    </el-form-item>
+                    <el-form-item label="单位">
+                        <el-input v-model="form.specs.unit" placeholder="请输入单位，例如：℃" />
+                    </el-form-item>
+                    <el-form-item label="步长">
+                        <el-input v-model="form.specs.step" placeholder="请输入步长，例如：1" type="number" />
+                    </el-form-item>
+                </div>
+                <div v-if="form.datatype == 'bool'">
+                    <el-form-item label="布尔值" prop="">
+                        <el-row style="margin-bottom:10px;">
+                            <el-col :span="11">
+                                <el-input v-model="form.specs.falseText" placeholder="0 对应的文本，例如：关闭" />
+                            </el-col>
+                            <el-col :span="10" :offset="1"> 0 对应文本</el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="11">
+                                <el-input v-model="form.specs.trueText" placeholder="1 对应的文本，例如：打开" />
+                            </el-col>
+                            <el-col :span="10" :offset="1"> 1 对应文本</el-col>
+                        </el-row>
+                    </el-form-item>
+                </div>
+                <div v-if="form.datatype == 'enum'">
+                    <el-form-item label="枚举项" prop="">
+                        <el-row v-for="(item,index) in form.specs.enumList" :key="index" style="margin-bottom:10px;">
+                            <el-col :span="8">
+                                <el-input v-model="item.value" placeholder="参数值，例如：0" type="number" />
+                            </el-col>
+                            <el-col :span="12" :offset="1">
+                                <el-input v-model="item.text" placeholder="参数描述，例如：中速档位" />
+                            </el-col>
+                            <el-col :span="2" :offset="1" v-if="index!=0"><a style="color:#F56C6C" @click="removeEnumItem(index)">删除</a></el-col>
+                        </el-row>
+                        <div>+ <a style="color:#409EFF" @click="addEnumItem()">添加枚举项</a></div>
+                    </el-form-item>
+                </div>
+                <div v-if="form.datatype == 'string'">
+                    <el-form-item label="最大长度" prop="">
+                        <el-input v-model="form.specs.maxLength" placeholder="请输入字符串最大长度，例如：1024" type="number" />
+                    </el-form-item>
+                </div>
+                <div v-if="form.datatype == 'array'">
+                    <el-form-item label="数组类型" prop="">
+                        <el-radio-group v-model="form.specs.arrayType">
+                            <el-radio label="int">int（整数）</el-radio>
+                            <el-radio label="double">double（小数）</el-radio>
+                            <el-radio label="string">string（字符串）</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                </div>
+            </el-form>
+
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+    </el-card>
+</div>
+</template>
+
+<style>
+.specsColor {
+    background-color: #fcfcfc;
+}
+</style>
+
+<script>
+import {
+    listTemplate,
+    getTemplate,
+    delTemplate,
+    addTemplate,
+    updateTemplate,
+} from "@/api/iot/template";
+export default {
+    name: "Template",
+    dicts: ["iot_things_type", "iot_data_type", "iot_yes_no"],
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 通用物模型表格数据
+            templateList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                templateName: null,
+                type: null,
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                templateName: [{
+                    required: true,
+                    message: "物模型名称不能为空",
+                    trigger: "blur"
+                }, ],
+                identifier: [{
+                    required: true,
+                    message: "标识符，产品下唯一不能为空",
+                    trigger: "blur",
+                }, ],
+                type: [{
+                    required: true,
+                    message: "模型类别不能为空",
+                    trigger: "change"
+                }, ],
+                datatype: [{
+                    required: true,
+                    message: "数据类型不能为空",
+                    trigger: "change"
+                }, ],
+                specs: [{
+                    required: true,
+                    message: "数据定义不能为空",
+                    trigger: "blur"
+                }, ],
+            },
+        };
+    },
+    created() {
+        this.getList();
+    },
+    methods: {
+        /** 查询通用物模型列表 */
+        getList() {
+            this.loading = true;
+            listTemplate(this.queryParams).then((response) => {
+                this.templateList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                templateId: null,
+                templateName: null,
+                userId: null,
+                userName: null,
+                tenantId: null,
+                tenantName: null,
+                identifier: null,
+                type: null,
+                datatype: null,
+                isSys: null,
+                isTop: null,
+                isMonitor: null,
+                delFlag: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                specs: null,
+            };
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map((item) => item.templateId);
+            this.single = selection.length !== 1;
+            this.multiple = !selection.length;
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "添加通用物模型";
+            this.form.type = 1;
+            this.form.datatype = "integer"
+            this.form.specs = {
+                enumList: [],
+            };
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const templateId = row.templateId || this.ids;
+            getTemplate(templateId).then((response) => {
+                this.form = response.data;
+                this.open = true;
+                this.title = "修改通用物模型";
+                // Json转对象
+                this.form.specs = JSON.parse(this.form.specs);
+            });
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate((valid) => {
+                if (valid) {
+                    if (this.form.templateId != null) {
+                        // 格式化specs
+                        this.form.specs = this.formatThingsSpecs();
+                        if (this.form.type == 2) {
+                            this.form.isMonitor = 0;
+                        } else if (this.form.type == 3) {
+                            this.form.isMonitor = 0;
+                            this.form.isTop = 0;
+                        }
+                        updateTemplate(this.form).then((response) => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        // 格式化specs
+                        this.form.specs = this.formatThingsSpecs();
+                        if (this.form.type == 2) {
+                            this.form.isMonitor = 0;
+                        } else if (this.form.type == 3) {
+                            this.form.isMonitor = 0;
+                            this.form.isTop = 0;
+                        }
+                        addTemplate(this.form).then((response) => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const templateIds = row.templateId || this.ids;
+            this.$modal
+                .confirm('是否确认删除通用物模型编号为"' + templateIds + '"的数据项？')
+                .then(function () {
+                    return delTemplate(templateIds);
+                })
+                .then(() => {
+                    this.getList();
+                    this.$modal.msgSuccess("删除成功");
+                })
+                .catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download(
+                "iot/template/export", {
+                    ...this.queryParams,
+                },
+                `template_${new Date().getTime()}.xlsx`
+            );
+        },
+        // 类型改变
+        typeChange(label){
+            if(label==2 || label==3){
+                this.form.isMonitor=0;
+            }
+        },
+        // 实时监测改变
+        changeMonitor(isMonitor){
+            if(isMonitor==1 && this.form.datatype!="integer" && this.form.datatype!="decimal"){
+                this.form.datatype="integer";
+            }
+        },
+        // 格式化物模型
+        formatThingsSpecs() {
+            var data = {};
+            data.type = this.form.datatype;
+            if (this.form.datatype == "integer" || this.form.datatype == "decimal") {
+                data.min = Number(this.form.specs.min);
+                data.max = Number(this.form.specs.max);
+                data.unit = this.form.specs.unit;
+                data.step = Number(this.form.specs.step);
+            } else if (this.form.datatype == "string") {
+                data.maxLength = Number(this.form.specs.maxLength);
+            } else if (this.form.datatype == "bool") {
+                data.falseText = this.form.specs.falseText;
+                data.trueText = this.form.specs.trueText;
+            } else if (this.form.datatype == "array") {
+                data.arrayType = this.form.specs.arrayType;
+            } else if (this.form.datatype == "enum") {
+                data.enumList = this.form.specs.enumList;
+            }
+            return JSON.stringify(data);
+        },
+        /** 切换为枚举项 */
+        dataTypeChange(val) {
+            if (val == "enum") {
+                this.form.specs.enumList = [{
+                    value: "",
+                    text: ""
+                }];
+            } else if (val == "array") {
+                this.form.specs.arrayType = "int";
+            }
+        },
+        /** 添加枚举项 */
+        addEnumItem() {
+            this.form.specs.enumList.push({
+                value: "",
+                text: ""
+            })
+        },
+        /** 删除枚举项 */
+        removeEnumItem(index) {
+            this.form.specs.enumList.splice(index, 1);
+        },
+        /** 格式化显示数据定义 */
+        formatSpecsDisplay(json) {
+            let specs = JSON.parse(json);
+            if (specs.type === "integer" || specs.type === "decimal") {
+                return "<span style='width:50%;display:inline-block;'>最大值：<span style=\"color:#F56C6C\">" + specs.max +
+                    "</span></span>最小值：<span style=\"color:#F56C6C\">" + specs.min +
+                    "</span><br /><span style='width:50%;display:inline-block;'>步长：<span style=\"color:#F56C6C\">" + specs.step +
+                    "</span></span>单位：<span style=\"color:#F56C6C\">" + specs.unit;
+            } else if (specs.type === "string") {
+                return "最大长度：<span style=\"color:#F56C6C\">" + specs.maxLength + "</span>";
+            } else if (specs.type === "array") {
+                return "数组类型：<span style=\"color:#F56C6C\">" + specs.arrayType + "</span>";
+            } else if (specs.type === "enum") {
+                let items = "";
+                for (let i = 0; i < specs.enumList.length; i++) {
+                    items = items + "<span style='width:50%;display:inline-block;'>" + specs.enumList[i].value + "：<span style='color:#F56C6C'>" + specs.enumList[i].text + "</span></span>"
+                    if (i > 0 && i % 2 != 0) {
+                        items = items + "<br />"
+                    }
+                }
+                return items;
+            } else if (specs.type === "bool") {
+                return "<span style='width:50%;display:inline-block;'>0：<span style=\"color:#F56C6C\">" + specs.falseText +
+                    "</span></span>1：<span style=\"color:#F56C6C\">" + specs.trueText
+            }
+        },
+
+    },
+};
+</script>

vue/src/views/login.vue

@@ -0,0 +1,253 @@
+<template>
+<div class="login">
+
+    <div style="width:520px;padding:20px;">
+        <el-row :gutter="10">
+            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+                <div class="login-top">
+                    <h1>物美智能 - 开源生活物联网平台</h1>
+                    <h2>wumei smart open source iot platform</h2>
+                </div>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" style="z-index:1000">
+                    <h3 class="title">账号登录</h3>
+                    <el-form-item prop="username">
+                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+                            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item prop="password">
+                        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
+                            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item prop="code" v-if="captchaOnOff">
+                        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
+                            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+                        </el-input>
+                        <div class="login-code">
+                            <img :src="codeUrl" @click="getCode" class="login-code-img" />
+                        </div>
+                    </el-form-item>
+                    <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;color:#000;">记住密码</el-checkbox>
+                    <el-form-item style="width:100%;">
+                        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
+                            <span v-if="!loading">登 录</span>
+                            <span v-else>登 录 中...</span>
+                        </el-button>
+                        <div style="float: right;margin-top:10px;" v-if="register">
+                            <span style="margin-right:20px; color:#eee">演示账号：wumei<span style="margin:0 10px;">123456</span></span>
+                            <a style="margin-right:20px;color:#222" target="_blank" href="http://wumei.live">返回官网</a>
+                            <router-link style="color:#fff;font-size:16px;display:none;" :to="'/register'" >立即注册 >></router-link>
+                        </div>
+                    </el-form-item>
+                </el-form>
+            </el-col>
+        </el-row>
+    </div>
+    <!--  底部  -->
+    <div class="el-login-footer">
+        <span>Copyright © 2018-2021 <a target="_blank" href="http://wumei.live">wumei smart</a> All Rights Reserved.</span>
+    </div>
+</div>
+</template>
+
+<script>
+import {
+    getCodeImg
+} from "@/api/login";
+import Cookies from "js-cookie";
+import {
+    encrypt,
+    decrypt
+} from '@/utils/jsencrypt'
+
+export default {
+    name: "Login",
+    data() {
+        return {
+            codeUrl: "",
+            loginForm: {
+                username: "",
+                password: "",
+                rememberMe: false,
+                code: "",
+                uuid: ""
+            },
+            loginRules: {
+                username: [{
+                    required: true,
+                    trigger: "blur",
+                    message: "请输入您的账号"
+                }],
+                password: [{
+                    required: true,
+                    trigger: "blur",
+                    message: "请输入您的密码"
+                }],
+                code: [{
+                    required: true,
+                    trigger: "change",
+                    message: "请输入验证码"
+                }]
+            },
+            loading: false,
+            // 验证码开关
+            captchaOnOff: true,
+            // 注册开关
+            register: true,
+            redirect: undefined
+        };
+    },
+    watch: {
+        $route: {
+            handler: function (route) {
+                this.redirect = route.query && route.query.redirect;
+            },
+            immediate: true
+        }
+    },
+    created() {
+        this.getCode();
+        this.getCookie();
+    },
+    methods: {
+        getCode() {
+            getCodeImg().then(res => {
+                this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
+                if (this.captchaOnOff) {
+                    this.codeUrl = "data:image/gif;base64," + res.img;
+                    this.loginForm.uuid = res.uuid;
+                }
+            });
+        },
+        getCookie() {
+            const username = Cookies.get("username");
+            const password = Cookies.get("password");
+            const rememberMe = Cookies.get('rememberMe')
+            this.loginForm = {
+                username: username === undefined ? this.loginForm.username : username,
+                password: password === undefined ? this.loginForm.password : decrypt(password),
+                rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+            };
+        },
+        handleLogin() {
+            this.$refs.loginForm.validate(valid => {
+                if (valid) {
+                    this.loading = true;
+                    if (this.loginForm.rememberMe) {
+                        Cookies.set("username", this.loginForm.username, {
+                            expires: 30
+                        });
+                        Cookies.set("password", encrypt(this.loginForm.password), {
+                            expires: 30
+                        });
+                        Cookies.set('rememberMe', this.loginForm.rememberMe, {
+                            expires: 30
+                        });
+                    } else {
+                        Cookies.remove("username");
+                        Cookies.remove("password");
+                        Cookies.remove('rememberMe');
+                    }
+                    this.$store.dispatch("Login", this.loginForm).then(() => {
+                        this.$router.push({
+                            path: this.redirect || "/"
+                        }).catch(() => {});
+                    }).catch(() => {
+                        this.loading = false;
+                        if (this.captchaOnOff) {
+                            this.getCode();
+                        }
+                    });
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+.login {
+    display: flex;
+    justify-content: center;
+    background: linear-gradient(303deg, #48c6ef 10%, #6f86d6 80%);
+    height: 100%;
+    overflow: auto;
+}
+
+.title {
+    margin: 0px auto 30px auto;
+    text-align: center;
+    color: #333;
+    font-size: 24px;
+}
+
+.login-top {
+    color: #fff;
+    text-align: center;
+    font-weight: bold;
+    margin-top: 100px;
+
+    h1 {
+        font-size: 30px;
+    }
+
+    h2 {
+        font-size: 24px;
+        margin-top: -12px;
+    }
+}
+
+.login-form {
+    border-radius: 6px;
+    background-color: rgba(250, 250, 250, 0.2);
+    border: 1px solid #fff;
+    padding: 25px 25px 5px 25px;
+    margin: 20px;
+    margin-bottom: 100px;
+
+    .el-input {
+        height: 38px;
+
+        input {
+            height: 38px;
+        }
+    }
+
+    .input-icon {
+        height: 39px;
+        width: 14px;
+        margin-left: 2px;
+    }
+}
+
+.login-code {
+    width: 33%;
+    height: 38px;
+    float: right;
+
+    img {
+        cursor: pointer;
+        vertical-align: middle;
+    }
+}
+
+.el-login-footer {
+    height: 40px;
+    line-height: 40px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    font-family: Arial;
+    font-size: 12px;
+    letter-spacing: 1px;
+}
+
+.login-code-img {
+    height: 38px;
+}
+</style>

vue/src/views/monitor/cache/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="app-container">
+    <el-row>
+      <el-col :span="24" class="card-box">
+        <el-card>
+          <div slot="header"><span>基本信息</span></div>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <table cellspacing="0" style="width: 100%">
+              <tbody>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">Redis版本</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">运行模式</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">端口</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">客户端数</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">运行时间(天)</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">使用内存</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">使用CPU</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">内存配置</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">AOF是否开启</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">RDB是否成功</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">Key数量</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">网络入口/出口</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12" class="card-box">
+        <el-card>
+          <div slot="header"><span>命令统计</span></div>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <div ref="commandstats" style="height: 420px" />
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12" class="card-box">
+        <el-card>
+          <div slot="header">
+            <span>内存信息</span>
+          </div>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <div ref="usedmemory" style="height: 420px" />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getCache } from "@/api/monitor/cache";
+import echarts from "echarts";
+
+export default {
+  name: "Server",
+  data() {
+    return {
+      // 统计命令信息
+      commandstats: null,
+      // 使用内存
+      usedmemory: null,
+      // cache信息
+      cache: [],
+    };
+  },
+  created() {
+    this.getList();
+    this.openLoading();
+  },
+  methods: {
+    /** 查缓存询信息 */
+    getList() {
+      getCache().then((response) => {
+        this.cache = response.data;
+        this.$modal.closeLoading();
+
+        this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
+        this.commandstats.setOption({
+          tooltip: {
+            trigger: "item",
+            formatter: "{a} <br/>{b} : {c} ({d}%)",
+          },
+          series: [
+            {
+              name: "命令",
+              type: "pie",
+              roseType: "radius",
+              radius: [15, 95],
+              center: ["50%", "38%"],
+              data: response.data.commandStats,
+              animationEasing: "cubicInOut",
+              animationDuration: 1000,
+            },
+          ],
+        });
+        this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
+        this.usedmemory.setOption({
+          tooltip: {
+            formatter: "{b} <br/>{a} : " + this.cache.info.used_memory_human,
+          },
+          series: [
+            {
+              name: "峰值",
+              type: "gauge",
+              min: 0,
+              max: 1000,
+              detail: {
+                formatter: this.cache.info.used_memory_human,
+              },
+              data: [
+                {
+                  value: parseFloat(this.cache.info.used_memory_human),
+                  name: "内存消耗",
+                },
+              ],
+            },
+          ],
+        });
+      });
+    },
+    // 打开加载层
+    openLoading() {
+      this.$modal.loading("正在加载缓存监控数据，请稍候！");
+    },
+  },
+};
+</script>

vue/src/views/monitor/druid/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <i-frame :src="url" />
+</template>
+<script>
+import iFrame from "@/components/iFrame/index";
+export default {
+  name: "Druid",
+  components: { iFrame },
+  data() {
+    return {
+      url: process.env.VUE_APP_BASE_API + "/druid/login.html"
+    };
+  },
+};
+</script>

vue/src/views/monitor/job/index.vue

@@ -0,0 +1,516 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="任务名称" prop="jobName">
+        <el-input
+          v-model="queryParams.jobName"
+          placeholder="请输入任务名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="任务组名" prop="jobGroup">
+        <el-select v-model="queryParams.jobGroup" placeholder="请选择任务组名" clearable size="small">
+          <el-option
+            v-for="dict in dict.type.sys_job_group"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="任务状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable size="small">
+          <el-option
+            v-for="dict in dict.type.sys_job_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['monitor:job:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['monitor:job:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['monitor:job:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['monitor:job:export']"
+        >导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-s-operation"
+          size="mini"
+          @click="handleJobLog"
+          v-hasPermi="['monitor:job:query']"
+        >日志</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="任务编号" width="100" align="center" prop="jobId" />
+      <el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
+      <el-table-column label="任务组名" align="center" prop="jobGroup">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_job_group" :value="scope.row.jobGroup"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
+      <el-table-column label="cron执行表达式" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
+      <el-table-column label="状态" align="center">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.status"
+            active-value="0"
+            inactive-value="1"
+            @change="handleStatusChange(scope.row)"
+          ></el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['monitor:job:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['monitor:job:remove']"
+          >删除</el-button>
+          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['monitor:job:changeStatus', 'monitor:job:query']">
+            <span class="el-dropdown-link">
+              <i class="el-icon-d-arrow-right el-icon--right"></i>更多
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="handleRun" icon="el-icon-caret-right"
+                v-hasPermi="['monitor:job:changeStatus']">执行一次</el-dropdown-item>
+              <el-dropdown-item command="handleView" icon="el-icon-view"
+                v-hasPermi="['monitor:job:query']">任务详细</el-dropdown-item>
+              <el-dropdown-item command="handleJobLog" icon="el-icon-s-operation"
+                v-hasPermi="['monitor:job:query']">调度日志</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改定时任务对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="任务名称" prop="jobName">
+              <el-input v-model="form.jobName" placeholder="请输入任务名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="任务分组" prop="jobGroup">
+              <el-select v-model="form.jobGroup" placeholder="请选择">
+                <el-option
+                  v-for="dict in dict.type.sys_job_group"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item prop="invokeTarget">
+              <span slot="label">
+                调用方法
+                <el-tooltip placement="top">
+                  <div slot="content">
+                    Bean调用示例：ryTask.ryParams('ry')
+                    <br />Class类调用示例：com.ruoyi.quartz.task.RyTask.ryParams('ry')
+                    <br />参数说明：支持字符串，布尔类型，长整型，浮点型，整型
+                  </div>
+                  <i class="el-icon-question"></i>
+                </el-tooltip>
+              </span>
+              <el-input v-model="form.invokeTarget" placeholder="请输入调用目标字符串" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="cron表达式" prop="cronExpression">
+              <el-input v-model="form.cronExpression" placeholder="请输入cron执行表达式">
+                <template slot="append">
+                  <el-button type="primary" @click="handleShowCron">
+                    生成表达式
+                    <i class="el-icon-time el-icon--right"></i>
+                  </el-button>
+                </template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="错误策略" prop="misfirePolicy">
+              <el-radio-group v-model="form.misfirePolicy" size="small">
+                <el-radio-button label="1">立即执行</el-radio-button>
+                <el-radio-button label="2">执行一次</el-radio-button>
+                <el-radio-button label="3">放弃执行</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否并发" prop="concurrent">
+              <el-radio-group v-model="form.concurrent" size="small">
+                <el-radio-button label="0">允许</el-radio-button>
+                <el-radio-button label="1">禁止</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态">
+              <el-radio-group v-model="form.status">
+                <el-radio
+                  v-for="dict in dict.type.sys_job_status"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog title="Cron表达式生成器" :visible.sync="openCron" append-to-body destroy-on-close class="scrollbar">
+      <crontab @hide="openCron=false" @fill="crontabFill" :expression="expression"></crontab>
+    </el-dialog>
+
+    <!-- 任务日志详细 -->
+    <el-dialog title="任务详细" :visible.sync="openView" width="700px" append-to-body>
+      <el-form ref="form" :model="form" label-width="120px" size="mini">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="任务编号：">{{ form.jobId }}</el-form-item>
+            <el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="任务分组：">{{ jobGroupFormat(form) }}</el-form-item>
+            <el-form-item label="创建时间：">{{ form.createTime }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="cron表达式：">{{ form.cronExpression }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="下次执行时间：">{{ parseTime(form.nextValidTime) }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="调用目标方法：">{{ form.invokeTarget }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="任务状态：">
+              <div v-if="form.status == 0">正常</div>
+              <div v-else-if="form.status == 1">失败</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否并发：">
+              <div v-if="form.concurrent == 0">允许</div>
+              <div v-else-if="form.concurrent == 1">禁止</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="执行策略：">
+              <div v-if="form.misfirePolicy == 0">默认策略</div>
+              <div v-else-if="form.misfirePolicy == 1">立即执行</div>
+              <div v-else-if="form.misfirePolicy == 2">执行一次</div>
+              <div v-else-if="form.misfirePolicy == 3">放弃执行</div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="openView = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job";
+import Crontab from '@/components/Crontab'
+
+export default {
+  components: { Crontab },
+  name: "Job",
+  dicts: ['sys_job_group', 'sys_job_status'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 定时任务表格数据
+      jobList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否显示详细弹出层
+      openView: false,
+      // 是否显示Cron表达式弹出层
+      openCron: false,
+      // 传入的表达式
+      expression: "",
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        jobName: undefined,
+        jobGroup: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        jobName: [
+          { required: true, message: "任务名称不能为空", trigger: "blur" }
+        ],
+        invokeTarget: [
+          { required: true, message: "调用目标字符串不能为空", trigger: "blur" }
+        ],
+        cronExpression: [
+          { required: true, message: "cron执行表达式不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询定时任务列表 */
+    getList() {
+      this.loading = true;
+      listJob(this.queryParams).then(response => {
+        this.jobList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 任务组名字典翻译
+    jobGroupFormat(row, column) {
+      return this.selectDictLabel(this.dict.type.sys_job_group, row.jobGroup);
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        jobId: undefined,
+        jobName: undefined,
+        jobGroup: undefined,
+        invokeTarget: undefined,
+        cronExpression: undefined,
+        misfirePolicy: 1,
+        concurrent: 1,
+        status: "0"
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.jobId);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    // 更多操作触发
+    handleCommand(command, row) {
+      switch (command) {
+        case "handleRun":
+          this.handleRun(row);
+          break;
+        case "handleView":
+          this.handleView(row);
+          break;
+        case "handleJobLog":
+          this.handleJobLog(row);
+          break;
+        default:
+          break;
+      }
+    },
+    // 任务状态修改
+    handleStatusChange(row) {
+      let text = row.status === "0" ? "启用" : "停用";
+      this.$modal.confirm('确认要"' + text + '""' + row.jobName + '"任务吗？').then(function() {
+        return changeJobStatus(row.jobId, row.status);
+      }).then(() => {
+        this.$modal.msgSuccess(text + "成功");
+      }).catch(function() {
+        row.status = row.status === "0" ? "1" : "0";
+      });
+    },
+    /* 立即执行一次 */
+    handleRun(row) {
+      this.$modal.confirm('确认要立即执行一次"' + row.jobName + '"任务吗？').then(function() {
+        return runJob(row.jobId, row.jobGroup);
+      }).then(() => {
+        this.$modal.msgSuccess("执行成功");
+      }).catch(() => {});
+    },
+    /** 任务详细信息 */
+    handleView(row) {
+      getJob(row.jobId).then(response => {
+        this.form = response.data;
+        this.openView = true;
+      });
+    },
+    /** cron表达式按钮操作 */
+    handleShowCron() {
+      this.expression = this.form.cronExpression;
+      this.openCron = true;
+    },
+    /** 确定后回传值 */
+    crontabFill(value) {
+      this.form.cronExpression = value;
+    },
+    /** 任务日志列表查询 */
+    handleJobLog(row) {
+      const jobId = row.jobId || 0;
+      this.$router.push({ path: '/monitor/job-log/index', query: { jobId: jobId } })
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加任务";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const jobId = row.jobId || this.ids;
+      getJob(jobId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改任务";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.jobId != undefined) {
+            updateJob(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addJob(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const jobIds = row.jobId || this.ids;
+      this.$modal.confirm('是否确认删除定时任务编号为"' + jobIds + '"的数据项？').then(function() {
+        return delJob(jobIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('monitor/job/export', {
+        ...this.queryParams
+      }, `job_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

vue/src/views/monitor/job/log.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="任务名称" prop="jobName">
+        <el-input
+          v-model="queryParams.jobName"
+          placeholder="请输入任务名称"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="任务组名" prop="jobGroup">
+        <el-select
+          v-model="queryParams.jobGroup"
+          placeholder="请任务组名"
+          clearable
+          size="small"
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in dict.type.sys_job_group"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="执行状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择执行状态"
+          clearable
+          size="small"
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in dict.type.sys_common_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="执行时间">
+        <el-date-picker
+          v-model="dateRange"
+          size="small"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['monitor:job:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          @click="handleClean"
+          v-hasPermi="['monitor:job:remove']"
+        >清空</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['monitor:job:export']"
+        >导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-close"
+          size="mini"
+          @click="handleClose"
+        >关闭</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="jobLogList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="日志编号" width="80" align="center" prop="jobLogId" />
+      <el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
+      <el-table-column label="任务组名" align="center" prop="jobGroup" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_job_group" :value="scope.row.jobGroup"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
+      <el-table-column label="日志信息" align="center" prop="jobMessage" :show-overflow-tooltip="true" />
+      <el-table-column label="执行状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="执行时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleView(scope.row)"
+            v-hasPermi="['monitor:job:query']"
+          >详细</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 调度日志详细 -->
+    <el-dialog title="调度日志详细" :visible.sync="open" width="700px" append-to-body>
+      <el-form ref="form" :model="form" label-width="100px" size="mini">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="日志序号：">{{ form.jobLogId }}</el-form-item>
+            <el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="任务分组：">{{ form.jobGroup }}</el-form-item>
+            <el-form-item label="执行时间：">{{ form.createTime }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="调用方法：">{{ form.invokeTarget }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="日志信息：">{{ form.jobMessage }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="执行状态：">
+              <div v-if="form.status == 0">正常</div>
+              <div v-else-if="form.status == 1">失败</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="异常信息：" v-if="form.status == 1">{{ form.exceptionInfo }}</el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="open = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getJob} from "@/api/monitor/job";
+import { listJobLog, delJobLog, cleanJobLog } from "@/api/monitor/jobLog";
+
+export default {
+  name: "JobLog",
+  dicts: ['sys_common_status', 'sys_job_group'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 调度日志表格数据
+      jobLogList: [],
+      // 是否显示弹出层
+      open: false,
+      // 日期范围
+      dateRange: [],
+      // 表单参数
+      form: {},
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        jobName: undefined,
+        jobGroup: undefined,
+        status: undefined
+      }
+    };
+  },
+  created() {
+    const jobId = this.$route.query.jobId;
+    if (jobId !== undefined && jobId != 0) {
+      getJob(jobId).then(response => {
+        this.queryParams.jobName = response.data.jobName;
+        this.queryParams.jobGroup = response.data.jobGroup;
+        this.getList();
+      });
+    } else {
+      this.getList();
+    }
+  },
+  methods: {
+    /** 查询调度日志列表 */
+    getList() {
+      this.loading = true;
+      listJobLog(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.jobLogList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    // 返回按钮
+    handleClose() {
+      const obj = { path: "/monitor/job" };
+      this.$tab.closeOpenPage(obj);
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.jobLogId);
+      this.multiple = !selection.length;
+    },
+    /** 详细按钮操作 */
+    handleView(row) {
+      this.open = true;
+      this.form = row;
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const jobLogIds = this.ids;
+      this.$modal.confirm('是否确认删除调度日志编号为"' + jobLogIds + '"的数据项？').then(function() {
+        return delJobLog(jobLogIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 清空按钮操作 */
+    handleClean() {
+      this.$modal.confirm('是否确认清空所有调度日志数据项？').then(function() {
+        return cleanJobLog();
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("清空成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('/monitor/jobLog/export', {
+        ...this.queryParams
+      }, `log_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

vue/src/views/monitor/logininfor/index.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="登录地址" prop="ipaddr">
+        <el-input
+          v-model="queryParams.ipaddr"
+          placeholder="请输入登录地址"
+          clearable
+		  size="small"
+          style="width: 240px;"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户名称" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入用户名称"
+          clearable
+		  size="small"
+          style="width: 240px;"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="登录状态"
+          clearable
+          size="small"
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in dict.type.sys_common_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="登录时间">
+        <el-date-picker
+          v-model="dateRange"
+          size="small"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['monitor:logininfor:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          @click="handleClean"
+          v-hasPermi="['monitor:logininfor:remove']"
+        >清空</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['monitor:logininfor:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="访问编号" align="center" prop="infoId" />
+      <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
+      <el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
+      <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
+      <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
+      <el-table-column label="操作系统" align="center" prop="os" />
+      <el-table-column label="登录状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作信息" align="center" prop="msg" />
+      <el-table-column label="登录日期" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.loginTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { list, delLogininfor, cleanLogininfor } from "@/api/monitor/logininfor";
+
+export default {
+  name: "Logininfor",
+  dicts: ['sys_common_status'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      list: [],
+      // 日期范围
+      dateRange: [],
+      // 默认排序
+      defaultSort: {prop: 'loginTime', order: 'descending'},
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        ipaddr: undefined,
+        userName: undefined,
+        status: undefined
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询登录日志列表 */
+    getList() {
+      this.loading = true;
+      list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.list = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
+      this.handleQuery();
+    },
+    /** 多选框选中数据 */
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.infoId)
+      this.multiple = !selection.length
+    },
+    /** 排序触发事件 */
+    handleSortChange(column, prop, order) {
+      this.queryParams.orderByColumn = column.prop;
+      this.queryParams.isAsc = column.order;
+      this.getList();
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const infoIds = row.infoId || this.ids;
+      this.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项？').then(function() {
+        return delLogininfor(infoIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 清空按钮操作 */
+    handleClean() {
+      this.$modal.confirm('是否确认清空所有登录日志数据项？').then(function() {
+        return cleanLogininfor();
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("清空成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('monitor/logininfor/export', {
+        ...this.queryParams
+      }, `logininfor_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>
+

vue/src/views/monitor/online/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+      <el-form-item label="登录地址" prop="ipaddr">
+        <el-input
+          v-model="queryParams.ipaddr"
+          placeholder="请输入登录地址"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户名称" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入用户名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+
+    </el-form>
+    <el-table
+      v-loading="loading"
+      :data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
+      style="width: 100%;"
+    >
+      <el-table-column label="序号" type="index" align="center">
+        <template slot-scope="scope">
+          <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="会话编号" align="center" prop="tokenId" :show-overflow-tooltip="true" />
+      <el-table-column label="登录名称" align="center" prop="userName" :show-overflow-tooltip="true" />
+      <el-table-column label="部门名称" align="center" prop="deptName" />
+      <el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
+      <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
+      <el-table-column label="浏览器" align="center" prop="browser" />
+      <el-table-column label="操作系统" align="center" prop="os" />
+      <el-table-column label="登录时间" align="center" prop="loginTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.loginTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleForceLogout(scope.row)"
+            v-hasPermi="['monitor:online:forceLogout']"
+          >强退</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
+  </div>
+</template>
+
+<script>
+import { list, forceLogout } from "@/api/monitor/online";
+
+export default {
+  name: "Online",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      list: [],
+      pageNum: 1,
+      pageSize: 10,
+      // 查询参数
+      queryParams: {
+        ipaddr: undefined,
+        userName: undefined
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询登录日志列表 */
+    getList() {
+      this.loading = true;
+      list(this.queryParams).then(response => {
+        this.list = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 强退按钮操作 */
+    handleForceLogout(row) {
+      this.$modal.confirm('是否确认强退名称为"' + row.userName + '"的用户？').then(function() {
+        return forceLogout(row.tokenId);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("强退成功");
+      }).catch(() => {});
+    }
+  }
+};
+</script>
+

vue/src/views/monitor/operlog/index.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="系统模块" prop="title">
+        <el-input
+          v-model="queryParams.title"
+          placeholder="请输入系统模块"
+          clearable
+          size="small"
+          style="width: 240px;"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="操作人员" prop="operName">
+        <el-input
+          v-model="queryParams.operName"
+          placeholder="请输入操作人员"
+          clearable
+          size="small"
+          style="width: 240px;"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="类型" prop="businessType">
+        <el-select
+          v-model="queryParams.businessType"
+          placeholder="操作类型"
+          clearable
+          size="small"
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in dict.type.sys_oper_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="操作状态"
+          clearable
+          size="small"
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in dict.type.sys_common_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="操作时间">
+        <el-date-picker
+          v-model="dateRange"
+          size="small"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['monitor:operlog:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          @click="handleClean"
+          v-hasPermi="['monitor:operlog:remove']"
+        >清空</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['monitor:operlog:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="日志编号" align="center" prop="operId" />
+      <el-table-column label="系统模块" align="center" prop="title" />
+      <el-table-column label="操作类型" align="center" prop="businessType">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_oper_type" :value="scope.row.businessType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="请求方式" align="center" prop="requestMethod" />
+      <el-table-column label="操作人员" align="center" prop="operName" width="100" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
+      <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
+      <el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
+      <el-table-column label="操作状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作日期" align="center" prop="operTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.operTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleView(scope.row,scope.index)"
+            v-hasPermi="['monitor:operlog:query']"
+          >详细</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 操作日志详细 -->
+    <el-dialog title="操作日志详细" :visible.sync="open" width="700px" append-to-body>
+      <el-form ref="form" :model="form" label-width="100px" size="mini">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
+            <el-form-item
+              label="登录信息："
+            >{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
+            <el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="操作状态：">
+              <div v-if="form.status === 0">正常</div>
+              <div v-else-if="form.status === 1">失败</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="open = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog";
+
+export default {
+  name: "Operlog",
+  dicts: ['sys_oper_type', 'sys_common_status'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      list: [],
+      // 是否显示弹出层
+      open: false,
+      // 日期范围
+      dateRange: [],
+      // 默认排序
+      defaultSort: {prop: 'operTime', order: 'descending'},
+      // 表单参数
+      form: {},
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        title: undefined,
+        operName: undefined,
+        businessType: undefined,
+        status: undefined
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询登录日志 */
+    getList() {
+      this.loading = true;
+      list(this.addDateRange(this.queryParams, this.dateRange)).then( response => {
+          this.list = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    // 操作日志类型字典翻译
+    typeFormat(row, column) {
+      return this.selectDictLabel(this.dict.type.sys_oper_type, row.businessType);
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
+      this.handleQuery();
+    },
+    /** 多选框选中数据 */
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.operId)
+      this.multiple = !selection.length
+    },
+    /** 排序触发事件 */
+    handleSortChange(column, prop, order) {
+      this.queryParams.orderByColumn = column.prop;
+      this.queryParams.isAsc = column.order;
+      this.getList();
+    },
+    /** 详细按钮操作 */
+    handleView(row) {
+      this.open = true;
+      this.form = row;
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const operIds = row.operId || this.ids;
+      this.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项？').then(function() {
+        return delOperlog(operIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 清空按钮操作 */
+    handleClean() {
+      this.$modal.confirm('是否确认清空所有操作日志数据项？').then(function() {
+        return cleanOperlog();
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("清空成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('monitor/operlog/export', {
+        ...this.queryParams
+      }, `operlog_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>
+

vue/src/views/monitor/server/index.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="app-container">
+    <el-row>
+      <el-col :span="12" class="card-box">
+        <el-card>
+          <div slot="header"><span>CPU</span></div>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <table cellspacing="0" style="width: 100%;">
+              <thead>
+                <tr>
+                  <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">值</div></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">核心数</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12" class="card-box">
+        <el-card>
+          <div slot="header"><span>内存</span></div>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <table cellspacing="0" style="width: 100%;">
+              <thead>
+                <tr>
+                  <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">内存</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">JVM</div></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">总内存</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">使用率</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="24" class="card-box">
+        <el-card>
+          <div slot="header">
+            <span>服务器信息</span>
+          </div>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <table cellspacing="0" style="width: 100%;">
+              <tbody>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">服务器名称</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">操作系统</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">服务器IP</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">系统架构</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="24" class="card-box">
+        <el-card>
+          <div slot="header">
+            <span>Java虚拟机信息</span>
+          </div>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <table cellspacing="0" style="width: 100%;">
+              <tbody>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">Java名称</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">Java版本</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf"><div class="cell">启动时间</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">运行时长</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
+                </tr>
+                <tr>
+                  <td colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></td>
+                  <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
+                </tr>
+                <tr>
+                  <td colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></td>
+                  <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="24" class="card-box">
+        <el-card>
+          <div slot="header">
+            <span>磁盘状态</span>
+          </div>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <table cellspacing="0" style="width: 100%;">
+              <thead>
+                <tr>
+                  <th class="el-table__cell el-table__cell is-leaf"><div class="cell">盘符路径</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">总大小</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th>
+                  <th class="el-table__cell is-leaf"><div class="cell">已用百分比</div></th>
+                </tr>
+              </thead>
+              <tbody v-if="server.sysFiles">
+                <tr v-for="(sysFile, index) in server.sysFiles" :key="index">
+                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td>
+                  <td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getServer } from "@/api/monitor/server";
+
+export default {
+  name: "Server",
+  data() {
+    return {
+      // 服务器信息
+      server: []
+    };
+  },
+  created() {
+    this.getList();
+    this.openLoading();
+  },
+  methods: {
+    /** 查询服务器信息 */
+    getList() {
+      getServer().then(response => {
+        this.server = response.data;
+        this.$modal.closeLoading();
+      });
+    },
+    // 打开加载层
+    openLoading() {
+      this.$modal.loading("正在加载服务监控数据，请稍候！");
+    }
+  }
+};
+</script>

vue/src/views/redirect.vue

@@ -0,0 +1,12 @@
+<script>
+export default {
+  created() {
+    const { params, query } = this.$route
+    const { path } = params
+    this.$router.replace({ path: '/' + path, query })
+  },
+  render: function(h) {
+    return h() // avoid warning message
+  }
+}
+</script>

vue/src/views/register.vue

@@ -0,0 +1,271 @@
+<template>
+<div class="register">
+
+<div style="width:520px;padding:20px;">
+    <el-row :gutter="10">
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+            <div class="login-top">
+                <h1>物美智能 - 开源生活物联网平台</h1>
+                <h2>wumei smart open source iot platform</h2>
+            </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+            <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form" style="z-index:1000">
+                <h3 class="title">注册账号</h3>
+                <p style="text-align:center">账号可以用于学习和测试，请勿用于商业用途</p>
+                <el-form-item prop="username">
+                    <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
+                        <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+                    </el-input>
+                </el-form-item>
+                <el-form-item prop="phonenumber">
+                    <el-input v-model="registerForm.phonenumber" type="text" auto-complete="off" placeholder="手机号码">
+                        <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon" />
+                    </el-input>
+                </el-form-item>
+                <el-form-item prop="password">
+                    <el-input v-model="registerForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleRegister">
+                        <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+                    </el-input>
+                </el-form-item>
+                <el-form-item prop="confirmPassword">
+                    <el-input v-model="registerForm.confirmPassword" type="password" auto-complete="off" placeholder="确认密码" @keyup.enter.native="handleRegister">
+                        <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+                    </el-input>
+                </el-form-item>
+                <el-form-item prop="code" v-if="captchaOnOff">
+                    <el-input v-model="registerForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleRegister">
+                        <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+                    </el-input>
+                    <div class="register-code">
+                        <img :src="codeUrl" @click="getCode" class="register-code-img" />
+                    </div>
+                </el-form-item>
+                <el-form-item style="width:100%;">
+                    <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleRegister">
+                        <span v-if="!loading">注 册</span>
+                        <span v-else>注 册 中...</span>
+                    </el-button>
+                    <div style="float: right;margin-top:10px;">
+                        <a style="margin-right:20px;" target="_blank" href="http://wumei.live">返回官网</a>
+                        <router-link style="color:#fff;font-size:16px;" :to="'/login'">使用已有账户登录 >> </router-link>
+                    </div>
+                </el-form-item>
+            </el-form>
+        </el-col>
+
+    </el-row>
+</div>
+    <!--  底部  -->
+    <div class="el-register-footer">
+         <span>Copyright © 2018-2021 <a target="_blank" href="http://wumei.live">wumei smart</a> All Rights Reserved.</span>
+    </div>
+</div>
+</template>
+
+<script>
+import {
+    getCodeImg
+} from "@/api/login";
+import {
+    register
+} from '@/api/iot/tool';
+
+export default {
+    name: "Register",
+    data() {
+        const equalToPassword = (rule, value, callback) => {
+            if (this.registerForm.password !== value) {
+                callback(new Error("两次输入的密码不一致"));
+            } else {
+                callback();
+            }
+        };
+        return {
+            codeUrl: "",
+            registerForm: {
+                username: "",
+                phonenumber: "",
+                password: "",
+                confirmPassword: "",
+                code: "",
+                uuid: ""
+            },
+            registerRules: {
+                username: [{
+                        required: true,
+                        trigger: "blur",
+                        message: "请输入您的账号"
+                    },
+                    {
+                        min: 2,
+                        max: 20,
+                        message: '用户账号长度必须介于 2 和 20 之间',
+                        trigger: 'blur'
+                    }
+                ],
+                phonenumber: [{
+                        required: true,
+                        trigger: "blur",
+                        message: "请输入您的手机号码"
+                    },
+                    {
+                        min: 11,
+                        max: 11,
+                        message: '手机号码长度为11',
+                        trigger: 'blur'
+                    }
+                ],
+                password: [{
+                        required: true,
+                        trigger: "blur",
+                        message: "请输入您的密码"
+                    },
+                    {
+                        min: 5,
+                        max: 20,
+                        message: '用户密码长度必须介于 5 和 20 之间',
+                        trigger: 'blur'
+                    }
+                ],
+                confirmPassword: [{
+                        required: true,
+                        trigger: "blur",
+                        message: "请再次输入您的密码"
+                    },
+                    {
+                        required: true,
+                        validator: equalToPassword,
+                        trigger: "blur"
+                    }
+                ],
+                code: [{
+                    required: true,
+                    trigger: "change",
+                    message: "请输入验证码"
+                }]
+            },
+            loading: false,
+            captchaOnOff: true
+        };
+    },
+    created() {
+        this.getCode();
+    },
+    methods: {
+        getCode() {
+            getCodeImg().then(res => {
+                this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
+                if (this.captchaOnOff) {
+                    this.codeUrl = "data:image/gif;base64," + res.img;
+                    this.registerForm.uuid = res.uuid;
+                }
+            });
+        },
+        handleRegister() {
+            this.$refs.registerForm.validate(valid => {
+                if (valid) {
+                    this.loading = true;
+                    register(this.registerForm).then(res => {
+                        const username = this.registerForm.username;
+                        this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
+                            dangerouslyUseHTMLString: true,
+                            type: 'success'
+                        }).then(() => {
+                            this.$router.push("/login");
+                        }).catch(() => {});
+                    }).catch(() => {
+                        this.loading = false;
+                        if (this.captchaOnOff) {
+                            this.getCode();
+                        }
+                    })
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+.register {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    background: linear-gradient(303deg, #48c6ef 10%, #6f86d6 80%);
+}
+
+.login-top {
+    color: #fff;
+    text-align: center;
+    font-weight: bold;
+    margin-top: 100px;
+
+    h1 {
+        font-size: 30px;
+    }
+
+    h2 {
+        font-size: 24px;
+        margin-top: -12px;
+    }
+}
+
+.title {
+    margin: 0px auto 30px auto;
+    text-align: center;
+    color: #333;
+    font-size:24px;
+}
+
+.register-form {
+    border-radius: 6px;
+    background: #ffffff;
+    background-color: rgba(250, 250, 250, 0.2);
+    border: 1px solid #fff;
+    padding: 25px 25px 5px 25px;
+    margin:20px;
+
+    .el-input {
+        height: 38px;
+
+        input {
+            height: 38px;
+        }
+    }
+
+    .input-icon {
+        height: 39px;
+        width: 14px;
+        margin-left: 2px;
+    }
+}
+
+.register-code {
+    width: 33%;
+    height: 38px;
+    float: right;
+
+    img {
+        cursor: pointer;
+        vertical-align: middle;
+    }
+}
+
+.el-register-footer {
+    height: 40px;
+    line-height: 40px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    font-family: Arial;
+    font-size: 12px;
+    letter-spacing: 1px;
+}
+
+.register-code-img {
+    height: 38px;
+}
+</style>

vue/src/views/system/config/index.vue

@@ -0,0 +1,346 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="参数名称" prop="configName">
+        <el-input
+          v-model="queryParams.configName"
+          placeholder="请输入参数名称"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="参数键名" prop="configKey">
+        <el-input
+          v-model="queryParams.configKey"
+          placeholder="请输入参数键名"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="系统内置" prop="configType">
+        <el-select v-model="queryParams.configType" placeholder="系统内置" clearable size="small">
+          <el-option
+            v-for="dict in dict.type.sys_yes_no"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="dateRange"
+          size="small"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:config:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:config:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:config:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:config:export']"
+        >导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-refresh"
+          size="mini"
+          @click="handleRefreshCache"
+          v-hasPermi="['system:config:remove']"
+        >刷新缓存</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="参数主键" align="center" prop="configId" />
+      <el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" />
+      <el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
+      <el-table-column label="参数键值" align="center" prop="configValue" />
+      <el-table-column label="系统内置" align="center" prop="configType">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.configType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:config:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:config:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改参数配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="参数名称" prop="configName">
+          <el-input v-model="form.configName" placeholder="请输入参数名称" />
+        </el-form-item>
+        <el-form-item label="参数键名" prop="configKey">
+          <el-input v-model="form.configKey" placeholder="请输入参数键名" />
+        </el-form-item>
+        <el-form-item label="参数键值" prop="configValue">
+          <el-input v-model="form.configValue" placeholder="请输入参数键值" />
+        </el-form-item>
+        <el-form-item label="系统内置" prop="configType">
+          <el-radio-group v-model="form.configType">
+            <el-radio
+              v-for="dict in dict.type.sys_yes_no"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
+
+export default {
+  name: "Config",
+  dicts: ['sys_yes_no'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 参数表格数据
+      configList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 日期范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        configName: undefined,
+        configKey: undefined,
+        configType: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        configName: [
+          { required: true, message: "参数名称不能为空", trigger: "blur" }
+        ],
+        configKey: [
+          { required: true, message: "参数键名不能为空", trigger: "blur" }
+        ],
+        configValue: [
+          { required: true, message: "参数键值不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询参数列表 */
+    getList() {
+      this.loading = true;
+      listConfig(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.configList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        configId: undefined,
+        configName: undefined,
+        configKey: undefined,
+        configValue: undefined,
+        configType: "Y",
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加参数";
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.configId)
+      this.single = selection.length!=1
+      this.multiple = !selection.length
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const configId = row.configId || this.ids
+      getConfig(configId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改参数";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.configId != undefined) {
+            updateConfig(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addConfig(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const configIds = row.configId || this.ids;
+      this.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？').then(function() {
+          return delConfig(configIds);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/config/export', {
+        ...this.queryParams
+      }, `config_${new Date().getTime()}.xlsx`)
+    },
+    /** 刷新缓存按钮操作 */
+    handleRefreshCache() {
+      refreshCache().then(() => {
+        this.$modal.msgSuccess("刷新成功");
+      });
+    }
+  }
+};
+</script>

vue/src/views/system/dept/index.vue

@@ -0,0 +1,331 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
+      <el-form-item label="部门名称" prop="deptName">
+        <el-input
+          v-model="queryParams.deptName"
+          placeholder="请输入部门名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="部门状态" clearable size="small">
+          <el-option
+            v-for="dict in dict.type.sys_normal_disable"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:dept:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-sort"
+          size="mini"
+          @click="toggleExpandAll"
+        >展开/折叠</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="deptList"
+      row-key="deptId"
+      :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
+      <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
+      <el-table-column prop="status" label="状态" width="100">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:dept:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-plus"
+            @click="handleAdd(scope.row)"
+            v-hasPermi="['system:dept:add']"
+          >新增</el-button>
+          <el-button
+            v-if="scope.row.parentId != 0"
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:dept:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改部门对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="24" v-if="form.parentId !== 0">
+            <el-form-item label="上级部门" prop="parentId">
+              <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="部门名称" prop="deptName">
+              <el-input v-model="form.deptName" placeholder="请输入部门名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="显示排序" prop="orderNum">
+              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="负责人" prop="leader">
+              <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系电话" prop="phone">
+              <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="部门状态">
+              <el-radio-group v-model="form.status">
+                <el-radio
+                  v-for="dict in dict.type.sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  name: "Dept",
+  dicts: ['sys_normal_disable'],
+  components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 表格树数据
+      deptList: [],
+      // 部门树选项
+      deptOptions: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 查询参数
+      queryParams: {
+        deptName: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        parentId: [
+          { required: true, message: "上级部门不能为空", trigger: "blur" }
+        ],
+        deptName: [
+          { required: true, message: "部门名称不能为空", trigger: "blur" }
+        ],
+        orderNum: [
+          { required: true, message: "显示排序不能为空", trigger: "blur" }
+        ],
+        email: [
+          {
+            type: "email",
+            message: "'请输入正确的邮箱地址",
+            trigger: ["blur", "change"]
+          }
+        ],
+        phone: [
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询部门列表 */
+    getList() {
+      this.loading = true;
+      listDept(this.queryParams).then(response => {
+        this.deptList = this.handleTree(response.data, "deptId");
+        this.loading = false;
+      });
+    },
+    /** 转换部门数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.deptId,
+        label: node.deptName,
+        children: node.children
+      };
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        deptId: undefined,
+        parentId: undefined,
+        deptName: undefined,
+        orderNum: undefined,
+        leader: undefined,
+        phone: undefined,
+        email: undefined,
+        status: "0"
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      if (row != undefined) {
+        this.form.parentId = row.deptId;
+      }
+      this.open = true;
+      this.title = "添加部门";
+      listDept().then(response => {
+        this.deptOptions = this.handleTree(response.data, "deptId");
+      });
+    },
+    /** 展开/折叠操作 */
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      getDept(row.deptId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改部门";
+      });
+      listDeptExcludeChild(row.deptId).then(response => {
+        this.deptOptions = this.handleTree(response.data, "deptId");
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.deptId != undefined) {
+            updateDept(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addDept(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function() {
+        return delDept(row.deptId);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    }
+  }
+};
+</script>

vue/src/views/system/dict/data.vue

@@ -0,0 +1,400 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="字典名称" prop="dictType">
+        <el-select v-model="queryParams.dictType" size="small">
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.dictId"
+            :label="item.dictName"
+            :value="item.dictType"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="字典标签" prop="dictLabel">
+        <el-input
+          v-model="queryParams.dictLabel"
+          placeholder="请输入字典标签"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="数据状态" clearable size="small">
+          <el-option
+            v-for="dict in dict.type.sys_normal_disable"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:dict:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:dict:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:dict:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:dict:export']"
+        >导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-close"
+          size="mini"
+          @click="handleClose"
+        >关闭</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="字典编码" align="center" prop="dictCode" />
+      <el-table-column label="字典标签" align="center" prop="dictLabel">
+        <template slot-scope="scope">
+          <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{scope.row.dictLabel}}</span>
+          <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{scope.row.dictLabel}}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="字典键值" align="center" prop="dictValue" />
+      <el-table-column label="字典排序" align="center" prop="dictSort" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:dict:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:dict:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改参数配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="字典类型">
+          <el-input v-model="form.dictType" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="数据标签" prop="dictLabel">
+          <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
+        </el-form-item>
+        <el-form-item label="数据键值" prop="dictValue">
+          <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
+        </el-form-item>
+        <el-form-item label="样式属性" prop="cssClass">
+          <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
+        </el-form-item>
+        <el-form-item label="显示排序" prop="dictSort">
+          <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="回显样式" prop="listClass">
+          <el-select v-model="form.listClass">
+            <el-option
+              v-for="item in listClassOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in dict.type.sys_normal_disable"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";
+import { listType, getType } from "@/api/system/dict/type";
+
+export default {
+  name: "Data",
+  dicts: ['sys_normal_disable'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 字典表格数据
+      dataList: [],
+      // 默认字典类型
+      defaultDictType: "",
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 数据标签回显样式
+      listClassOptions: [
+        {
+          value: "default",
+          label: "默认"
+        },
+        {
+          value: "primary",
+          label: "主要"
+        },
+        {
+          value: "success",
+          label: "成功"
+        },
+        {
+          value: "info",
+          label: "信息"
+        },
+        {
+          value: "warning",
+          label: "警告"
+        },
+        {
+          value: "danger",
+          label: "危险"
+        }
+      ],
+      // 类型数据字典
+      typeOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        dictName: undefined,
+        dictType: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        dictLabel: [
+          { required: true, message: "数据标签不能为空", trigger: "blur" }
+        ],
+        dictValue: [
+          { required: true, message: "数据键值不能为空", trigger: "blur" }
+        ],
+        dictSort: [
+          { required: true, message: "数据顺序不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    const dictId = this.$route.params && this.$route.params.dictId;
+    this.getType(dictId);
+    this.getTypeList();
+  },
+  methods: {
+    /** 查询字典类型详细 */
+    getType(dictId) {
+      getType(dictId).then(response => {
+        this.queryParams.dictType = response.data.dictType;
+        this.defaultDictType = response.data.dictType;
+        this.getList();
+      });
+    },
+    /** 查询字典类型列表 */
+    getTypeList() {
+      listType().then(response => {
+        this.typeOptions = response.rows;
+      });
+    },
+    /** 查询字典数据列表 */
+    getList() {
+      this.loading = true;
+      listData(this.queryParams).then(response => {
+        this.dataList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        dictCode: undefined,
+        dictLabel: undefined,
+        dictValue: undefined,
+        cssClass: undefined,
+        listClass: 'default',
+        dictSort: 0,
+        status: "0",
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 返回按钮操作 */
+    handleClose() {
+      const obj = { path: "/system/dict" };
+      this.$tab.closeOpenPage(obj);
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.dictType = this.defaultDictType;
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加字典数据";
+      this.form.dictType = this.queryParams.dictType;
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.dictCode)
+      this.single = selection.length!=1
+      this.multiple = !selection.length
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const dictCode = row.dictCode || this.ids
+      getData(dictCode).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改字典数据";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.dictCode != undefined) {
+            updateData(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addData(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const dictCodes = row.dictCode || this.ids;
+      this.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？').then(function() {
+        return delData(dictCodes);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/dict/data/export', {
+        ...this.queryParams
+      }, `data_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

vue/src/views/system/dict/index.vue

@@ -0,0 +1,350 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="字典名称" prop="dictName">
+        <el-input
+          v-model="queryParams.dictName"
+          placeholder="请输入字典名称"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="字典类型" prop="dictType">
+        <el-input
+          v-model="queryParams.dictType"
+          placeholder="请输入字典类型"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="字典状态"
+          clearable
+          size="small"
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in dict.type.sys_normal_disable"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="dateRange"
+          size="small"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:dict:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:dict:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:dict:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:dict:export']"
+        >导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-refresh"
+          size="mini"
+          @click="handleRefreshCache"
+          v-hasPermi="['system:dict:remove']"
+        >刷新缓存</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="字典编号" align="center" prop="dictId" />
+      <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
+      <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
+            <span>{{ scope.row.dictType }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:dict:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:dict:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改参数配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="字典名称" prop="dictName">
+          <el-input v-model="form.dictName" placeholder="请输入字典名称" />
+        </el-form-item>
+        <el-form-item label="字典类型" prop="dictType">
+          <el-input v-model="form.dictType" placeholder="请输入字典类型" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in dict.type.sys_normal_disable"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
+
+export default {
+  name: "Dict",
+  dicts: ['sys_normal_disable'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 字典表格数据
+      typeList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 日期范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        dictName: undefined,
+        dictType: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        dictName: [
+          { required: true, message: "字典名称不能为空", trigger: "blur" }
+        ],
+        dictType: [
+          { required: true, message: "字典类型不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询字典类型列表 */
+    getList() {
+      this.loading = true;
+      listType(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.typeList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        dictId: undefined,
+        dictName: undefined,
+        dictType: undefined,
+        status: "0",
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加字典类型";
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.dictId)
+      this.single = selection.length!=1
+      this.multiple = !selection.length
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const dictId = row.dictId || this.ids
+      getType(dictId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改字典类型";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.dictId != undefined) {
+            updateType(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addType(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const dictIds = row.dictId || this.ids;
+      this.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function() {
+        return delType(dictIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/dict/type/export', {
+        ...this.queryParams
+      }, `type_${new Date().getTime()}.xlsx`)
+    },
+    /** 刷新缓存按钮操作 */
+    handleRefreshCache() {
+      refreshCache().then(() => {
+        this.$modal.msgSuccess("刷新成功");
+      });
+    }
+  }
+};
+</script>

vue/src/views/system/menu/index.vue

@@ -0,0 +1,454 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
+      <el-form-item label="菜单名称" prop="menuName">
+        <el-input
+          v-model="queryParams.menuName"
+          placeholder="请输入菜单名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable size="small">
+          <el-option
+            v-for="dict in dict.type.sys_normal_disable"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:menu:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-sort"
+          size="mini"
+          @click="toggleExpandAll"
+        >展开/折叠</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="menuList"
+      row-key="menuId"
+      :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
+      <el-table-column prop="icon" label="图标" align="center" width="100">
+        <template slot-scope="scope">
+          <svg-icon :icon-class="scope.row.icon" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
+      <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
+      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
+      <el-table-column prop="status" label="状态" width="80">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button 
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:menu:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-plus"
+            @click="handleAdd(scope.row)"
+            v-hasPermi="['system:menu:add']"
+          >新增</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:menu:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改菜单对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="上级菜单">
+              <treeselect
+                v-model="form.parentId"
+                :options="menuOptions"
+                :normalizer="normalizer"
+                :show-count="true"
+                placeholder="选择上级菜单"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="菜单类型" prop="menuType">
+              <el-radio-group v-model="form.menuType">
+                <el-radio label="M">目录</el-radio>
+                <el-radio label="C">菜单</el-radio>
+                <el-radio label="F">按钮</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" v-if="form.menuType != 'F'">
+            <el-form-item label="菜单图标">
+              <el-popover
+                placement="bottom-start"
+                width="460"
+                trigger="click"
+                @show="$refs['iconSelect'].reset()"
+              >
+                <IconSelect ref="iconSelect" @selected="selected" />
+                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
+                  <svg-icon
+                    v-if="form.icon"
+                    slot="prefix"
+                    :icon-class="form.icon"
+                    class="el-input__icon"
+                    style="height: 32px;width: 16px;"
+                  />
+                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+                </el-input>
+              </el-popover>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="菜单名称" prop="menuName">
+              <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="显示排序" prop="orderNum">
+              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.menuType != 'F'">
+            <el-form-item>
+              <span slot="label">
+                <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                是否外链
+              </span>
+              <el-radio-group v-model="form.isFrame">
+                <el-radio label="0">是</el-radio>
+                <el-radio label="1">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.menuType != 'F'">
+            <el-form-item prop="path">
+              <span slot="label">
+                <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                路由地址
+              </span>
+              <el-input v-model="form.path" placeholder="请输入路由地址" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.menuType == 'C'">
+            <el-form-item prop="component">
+              <span slot="label">
+                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                组件路径
+              </span>
+              <el-input v-model="form.component" placeholder="请输入组件路径" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.menuType != 'M'">
+            <el-form-item>
+              <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
+              <span slot="label">
+                <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                权限字符
+              </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.menuType == 'C'">
+            <el-form-item>
+              <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
+              <span slot="label">
+                <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                路由参数
+              </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.menuType == 'C'">
+            <el-form-item>
+              <span slot="label">
+                <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                是否缓存
+              </span>
+              <el-radio-group v-model="form.isCache">
+                <el-radio label="0">缓存</el-radio>
+                <el-radio label="1">不缓存</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.menuType != 'F'">
+            <el-form-item>
+              <span slot="label">
+                <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                显示状态
+              </span>
+              <el-radio-group v-model="form.visible">
+                <el-radio
+                  v-for="dict in dict.type.sys_show_hide"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.menuType != 'F'">
+            <el-form-item>
+              <span slot="label">
+                <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                菜单状态
+              </span>
+              <el-radio-group v-model="form.status">
+                <el-radio
+                  v-for="dict in dict.type.sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import IconSelect from "@/components/IconSelect";
+
+export default {
+  name: "Menu",
+  dicts: ['sys_show_hide', 'sys_normal_disable'],
+  components: { Treeselect, IconSelect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 菜单表格树数据
+      menuList: [],
+      // 菜单树选项
+      menuOptions: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否展开，默认全部折叠
+      isExpandAll: false,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 查询参数
+      queryParams: {
+        menuName: undefined,
+        visible: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        menuName: [
+          { required: true, message: "菜单名称不能为空", trigger: "blur" }
+        ],
+        orderNum: [
+          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
+        ],
+        path: [
+          { required: true, message: "路由地址不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    // 选择图标
+    selected(name) {
+      this.form.icon = name;
+    },
+    /** 查询菜单列表 */
+    getList() {
+      this.loading = true;
+      listMenu(this.queryParams).then(response => {
+        this.menuList = this.handleTree(response.data, "menuId");
+        this.loading = false;
+      });
+    },
+    /** 转换菜单数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.menuId,
+        label: node.menuName,
+        children: node.children
+      };
+    },
+    /** 查询菜单下拉树结构 */
+    getTreeselect() {
+      listMenu().then(response => {
+        this.menuOptions = [];
+        const menu = { menuId: 0, menuName: '主类目', children: [] };
+        menu.children = this.handleTree(response.data, "menuId");
+        this.menuOptions.push(menu);
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        menuId: undefined,
+        parentId: 0,
+        menuName: undefined,
+        icon: undefined,
+        menuType: "M",
+        orderNum: undefined,
+        isFrame: "1",
+        isCache: "0",
+        visible: "0",
+        status: "0"
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      this.getTreeselect();
+      if (row != null && row.menuId) {
+        this.form.parentId = row.menuId;
+      } else {
+        this.form.parentId = 0;
+      }
+      this.open = true;
+      this.title = "添加菜单";
+    },
+    /** 展开/折叠操作 */
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.getTreeselect();
+      getMenu(row.menuId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改菜单";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.menuId != undefined) {
+            updateMenu(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addMenu(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？').then(function() {
+        return delMenu(row.menuId);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    }
+  }
+};
+</script>

vue/src/views/system/notice/index.vue

@@ -0,0 +1,314 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="公告标题" prop="noticeTitle">
+        <el-input
+          v-model="queryParams.noticeTitle"
+          placeholder="请输入公告标题"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="操作人员" prop="createBy">
+        <el-input
+          v-model="queryParams.createBy"
+          placeholder="请输入操作人员"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="类型" prop="noticeType">
+        <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable size="small">
+          <el-option
+            v-for="dict in dict.type.sys_notice_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:notice:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:notice:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:notice:remove']"
+        >删除</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" align="center" prop="noticeId" width="100" />
+      <el-table-column
+        label="公告标题"
+        align="center"
+        prop="noticeTitle"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status" width="100">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建者" align="center" prop="createBy" width="100" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="100">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:notice:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:notice:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改公告对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="公告标题" prop="noticeTitle">
+              <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="公告类型" prop="noticeType">
+              <el-select v-model="form.noticeType" placeholder="请选择">
+                <el-option
+                  v-for="dict in dict.type.sys_notice_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="状态">
+              <el-radio-group v-model="form.status">
+                <el-radio
+                  v-for="dict in dict.type.sys_notice_status"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="内容">
+              <editor v-model="form.noticeContent" :min-height="192"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
+
+export default {
+  name: "Notice",
+  dicts: ['sys_notice_status', 'sys_notice_type'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 公告表格数据
+      noticeList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        noticeTitle: undefined,
+        createBy: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        noticeTitle: [
+          { required: true, message: "公告标题不能为空", trigger: "blur" }
+        ],
+        noticeType: [
+          { required: true, message: "公告类型不能为空", trigger: "change" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询公告列表 */
+    getList() {
+      this.loading = true;
+      listNotice(this.queryParams).then(response => {
+        this.noticeList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        noticeId: undefined,
+        noticeTitle: undefined,
+        noticeType: undefined,
+        noticeContent: undefined,
+        status: "0"
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.noticeId)
+      this.single = selection.length!=1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加公告";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const noticeId = row.noticeId || this.ids
+      getNotice(noticeId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改公告";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.noticeId != undefined) {
+            updateNotice(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addNotice(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const noticeIds = row.noticeId || this.ids
+      this.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {
+        return delNotice(noticeIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    }
+  }
+};
+</script>

vue/src/views/system/post/index.vue

@@ -0,0 +1,311 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="岗位编码" prop="postCode">
+        <el-input
+          v-model="queryParams.postCode"
+          placeholder="请输入岗位编码"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="岗位名称" prop="postName">
+        <el-input
+          v-model="queryParams.postName"
+          placeholder="请输入岗位名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="岗位状态" clearable size="small">
+          <el-option
+            v-for="dict in dict.type.sys_normal_disable"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:post:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:post:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:post:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:post:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="岗位编号" align="center" prop="postId" />
+      <el-table-column label="岗位编码" align="center" prop="postCode" />
+      <el-table-column label="岗位名称" align="center" prop="postName" />
+      <el-table-column label="岗位排序" align="center" prop="postSort" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:post:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:post:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改岗位对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="岗位名称" prop="postName">
+          <el-input v-model="form.postName" placeholder="请输入岗位名称" />
+        </el-form-item>
+        <el-form-item label="岗位编码" prop="postCode">
+          <el-input v-model="form.postCode" placeholder="请输入编码名称" />
+        </el-form-item>
+        <el-form-item label="岗位顺序" prop="postSort">
+          <el-input-number v-model="form.postSort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="岗位状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in dict.type.sys_normal_disable"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listPost, getPost, delPost, addPost, updatePost } from "@/api/system/post";
+
+export default {
+  name: "Post",
+  dicts: ['sys_normal_disable'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 岗位表格数据
+      postList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        postCode: undefined,
+        postName: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        postName: [
+          { required: true, message: "岗位名称不能为空", trigger: "blur" }
+        ],
+        postCode: [
+          { required: true, message: "岗位编码不能为空", trigger: "blur" }
+        ],
+        postSort: [
+          { required: true, message: "岗位顺序不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询岗位列表 */
+    getList() {
+      this.loading = true;
+      listPost(this.queryParams).then(response => {
+        this.postList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        postId: undefined,
+        postCode: undefined,
+        postName: undefined,
+        postSort: 0,
+        status: "0",
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.postId)
+      this.single = selection.length!=1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加岗位";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const postId = row.postId || this.ids
+      getPost(postId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改岗位";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.postId != undefined) {
+            updatePost(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addPost(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const postIds = row.postId || this.ids;
+      this.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function() {
+        return delPost(postIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/post/export', {
+        ...this.queryParams
+      }, `post_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

vue/src/views/system/role/authUser.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="app-container">
+     <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
+      <el-form-item label="用户名称" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入用户名称"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="手机号码" prop="phonenumber">
+        <el-input
+          v-model="queryParams.phonenumber"
+          placeholder="请输入手机号码"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="openSelectUser"
+          v-hasPermi="['system:role:add']"
+        >添加用户</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-circle-close"
+          size="mini"
+          :disabled="multiple"
+          @click="cancelAuthUserAll"
+          v-hasPermi="['system:role:remove']"
+        >批量取消授权</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-close"
+          size="mini"
+          @click="handleClose"
+        >关闭</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
+      <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
+      <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
+      <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-circle-close"
+            @click="cancelAuthUser(scope.row)"
+            v-hasPermi="['system:role:remove']"
+          >取消授权</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <select-user ref="select" :roleId="queryParams.roleId" @ok="handleQuery" />
+  </div>
+</template>
+
+<script>
+import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role";
+import selectUser from "./selectUser";
+
+export default {
+  name: "AuthUser",
+  dicts: ['sys_normal_disable'],
+  components: { selectUser },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中用户组
+      userIds: [],
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      userList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        roleId: undefined,
+        userName: undefined,
+        phonenumber: undefined
+      }
+    };
+  },
+  created() {
+    const roleId = this.$route.params && this.$route.params.roleId;
+    if (roleId) {
+      this.queryParams.roleId = roleId;
+      this.getList();
+    }
+  },
+  methods: {
+    /** 查询授权用户列表 */
+    getList() {
+      this.loading = true;
+      allocatedUserList(this.queryParams).then(response => {
+          this.userList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    // 返回按钮
+    handleClose() {
+      const obj = { path: "/system/role" };
+      this.$tab.closeOpenPage(obj);
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.userIds = selection.map(item => item.userId)
+      this.multiple = !selection.length
+    },
+    /** 打开授权用户表弹窗 */
+    openSelectUser() {
+      this.$refs.select.show();
+    },
+    /** 取消授权按钮操作 */
+    cancelAuthUser(row) {
+      const roleId = this.queryParams.roleId;
+      this.$modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？').then(function() {
+        return authUserCancel({ userId: row.userId, roleId: roleId });
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("取消授权成功");
+      }).catch(() => {});
+    },
+    /** 批量取消授权按钮操作 */
+    cancelAuthUserAll(row) {
+      const roleId = this.queryParams.roleId;
+      const userIds = this.userIds.join(",");
+      this.$modal.confirm('是否取消选中用户授权数据项？').then(function() {
+        return authUserCancelAll({ roleId: roleId, userIds: userIds });
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("取消授权成功");
+      }).catch(() => {});
+    }
+  }
+};
+</script>

vue/src/views/system/role/index.vue

@@ -0,0 +1,618 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input
+          v-model="queryParams.roleName"
+          placeholder="请输入角色名称"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="权限字符" prop="roleKey">
+        <el-input
+          v-model="queryParams.roleKey"
+          placeholder="请输入权限字符"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="角色状态"
+          clearable
+          size="small"
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in dict.type.sys_normal_disable"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="dateRange"
+          size="small"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:role:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:role:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:role:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:role:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="角色编号" prop="roleId" width="120" />
+      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="显示顺序" prop="roleSort" width="100" />
+      <el-table-column label="状态" align="center" width="100">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.status"
+            active-value="0"
+            inactive-value="1"
+            @change="handleStatusChange(scope.row)"
+          ></el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:role:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:role:remove']"
+          >删除</el-button>
+          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
+            <span class="el-dropdown-link">
+              <i class="el-icon-d-arrow-right el-icon--right"></i>更多
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
+                v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
+              <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
+                v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改角色配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input v-model="form.roleName" placeholder="请输入角色名称" />
+        </el-form-item>
+        <el-form-item prop="roleKey">
+          <span slot="label">
+            <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+            权限字符
+          </span>
+          <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
+        </el-form-item>
+        <el-form-item label="角色顺序" prop="roleSort">
+          <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in dict.type.sys_normal_disable"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="菜单权限">
+          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
+          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
+          <el-tree
+            class="tree-border"
+            :data="menuOptions"
+            show-checkbox
+            ref="menu"
+            node-key="id"
+            :check-strictly="!form.menuCheckStrictly"
+            empty-text="加载中，请稍候"
+            :props="defaultProps"
+          ></el-tree>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 分配角色数据权限对话框 -->
+    <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="角色名称">
+          <el-input v-model="form.roleName" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="权限字符">
+          <el-input v-model="form.roleKey" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="权限范围">
+          <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
+            <el-option
+              v-for="item in dataScopeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据权限" v-show="form.dataScope == 2">
+          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
+          <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
+          <el-tree
+            class="tree-border"
+            :data="deptOptions"
+            show-checkbox
+            default-expand-all
+            ref="dept"
+            node-key="id"
+            :check-strictly="!form.deptCheckStrictly"
+            empty-text="加载中，请稍候"
+            :props="defaultProps"
+          ></el-tree>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitDataScope">确 定</el-button>
+        <el-button @click="cancelDataScope">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus } from "@/api/system/role";
+import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
+import { treeselect as deptTreeselect, roleDeptTreeselect } from "@/api/system/dept";
+
+export default {
+  name: "Role",
+  dicts: ['sys_normal_disable'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 角色表格数据
+      roleList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否显示弹出层（数据权限）
+      openDataScope: false,
+      menuExpand: false,
+      menuNodeAll: false,
+      deptExpand: true,
+      deptNodeAll: false,
+      // 日期范围
+      dateRange: [],
+      // 数据范围选项
+      dataScopeOptions: [
+        {
+          value: "1",
+          label: "全部数据权限"
+        },
+        {
+          value: "2",
+          label: "自定数据权限"
+        },
+        {
+          value: "3",
+          label: "本部门数据权限"
+        },
+        {
+          value: "4",
+          label: "本部门及以下数据权限"
+        },
+        {
+          value: "5",
+          label: "仅本人数据权限"
+        }
+      ],
+      // 菜单列表
+      menuOptions: [],
+      // 部门列表
+      deptOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        roleName: undefined,
+        roleKey: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      // 表单校验
+      rules: {
+        roleName: [
+          { required: true, message: "角色名称不能为空", trigger: "blur" }
+        ],
+        roleKey: [
+          { required: true, message: "权限字符不能为空", trigger: "blur" }
+        ],
+        roleSort: [
+          { required: true, message: "角色顺序不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询角色列表 */
+    getList() {
+      this.loading = true;
+      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.roleList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 查询菜单树结构 */
+    getMenuTreeselect() {
+      menuTreeselect().then(response => {
+        this.menuOptions = response.data;
+      });
+    },
+    /** 查询部门树结构 */
+    getDeptTreeselect() {
+      deptTreeselect().then(response => {
+        this.deptOptions = response.data;
+      });
+    },
+    // 所有菜单节点数据
+    getMenuAllCheckedKeys() {
+      // 目前被选中的菜单节点
+      let checkedKeys = this.$refs.menu.getCheckedKeys();
+      // 半选中的菜单节点
+      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
+      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+      return checkedKeys;
+    },
+    // 所有部门节点数据
+    getDeptAllCheckedKeys() {
+      // 目前被选中的部门节点
+      let checkedKeys = this.$refs.dept.getCheckedKeys();
+      // 半选中的部门节点
+      let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
+      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+      return checkedKeys;
+    },
+    /** 根据角色ID查询菜单树结构 */
+    getRoleMenuTreeselect(roleId) {
+      return roleMenuTreeselect(roleId).then(response => {
+        this.menuOptions = response.menus;
+        return response;
+      });
+    },
+    /** 根据角色ID查询部门树结构 */
+    getRoleDeptTreeselect(roleId) {
+      return roleDeptTreeselect(roleId).then(response => {
+        this.deptOptions = response.depts;
+        return response;
+      });
+    },
+    // 角色状态修改
+    handleStatusChange(row) {
+      let text = row.status === "0" ? "启用" : "停用";
+      this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function() {
+        return changeRoleStatus(row.roleId, row.status);
+      }).then(() => {
+        this.$modal.msgSuccess(text + "成功");
+      }).catch(function() {
+        row.status = row.status === "0" ? "1" : "0";
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 取消按钮（数据权限）
+    cancelDataScope() {
+      this.openDataScope = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      if (this.$refs.menu != undefined) {
+        this.$refs.menu.setCheckedKeys([]);
+      }
+      this.menuExpand = false,
+      this.menuNodeAll = false,
+      this.deptExpand = true,
+      this.deptNodeAll = false,
+      this.form = {
+        roleId: undefined,
+        roleName: undefined,
+        roleKey: undefined,
+        roleSort: 0,
+        status: "0",
+        menuIds: [],
+        deptIds: [],
+        menuCheckStrictly: true,
+        deptCheckStrictly: true,
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.roleId)
+      this.single = selection.length!=1
+      this.multiple = !selection.length
+    },
+    // 更多操作触发
+    handleCommand(command, row) {
+      switch (command) {
+        case "handleDataScope":
+          this.handleDataScope(row);
+          break;
+        case "handleAuthUser":
+          this.handleAuthUser(row);
+          break;
+        default:
+          break;
+      }
+    },
+    // 树权限（展开/折叠）
+    handleCheckedTreeExpand(value, type) {
+      if (type == 'menu') {
+        let treeList = this.menuOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      } else if (type == 'dept') {
+        let treeList = this.deptOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      }
+    },
+    // 树权限（全选/全不选）
+    handleCheckedTreeNodeAll(value, type) {
+      if (type == 'menu') {
+        this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
+      } else if (type == 'dept') {
+        this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
+      }
+    },
+    // 树权限（父子联动）
+    handleCheckedTreeConnect(value, type) {
+      if (type == 'menu') {
+        this.form.menuCheckStrictly = value ? true: false;
+      } else if (type == 'dept') {
+        this.form.deptCheckStrictly = value ? true: false;
+      }
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.getMenuTreeselect();
+      this.open = true;
+      this.title = "添加角色";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const roleId = row.roleId || this.ids
+      const roleMenu = this.getRoleMenuTreeselect(roleId);
+      getRole(roleId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.$nextTick(() => {
+          roleMenu.then(res => {
+            let checkedKeys = res.checkedKeys
+            checkedKeys.forEach((v) => {
+                this.$nextTick(()=>{
+                    this.$refs.menu.setChecked(v, true ,false);
+                })
+            })
+          });
+        });
+        this.title = "修改角色";
+      });
+    },
+    /** 选择角色权限范围触发 */
+    dataScopeSelectChange(value) {
+      if(value !== '2') {
+        this.$refs.dept.setCheckedKeys([]);
+      }
+    },
+    /** 分配数据权限操作 */
+    handleDataScope(row) {
+      this.reset();
+      const roleDeptTreeselect = this.getRoleDeptTreeselect(row.roleId);
+      getRole(row.roleId).then(response => {
+        this.form = response.data;
+        this.openDataScope = true;
+        this.$nextTick(() => {
+          roleDeptTreeselect.then(res => {
+            this.$refs.dept.setCheckedKeys(res.checkedKeys);
+          });
+        });
+        this.title = "分配数据权限";
+      });
+    },
+    /** 分配用户操作 */
+    handleAuthUser: function(row) {
+      const roleId = row.roleId;
+      this.$router.push("/system/role-auth/user/" + roleId);
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.roleId != undefined) {
+            this.form.menuIds = this.getMenuAllCheckedKeys();
+            updateRole(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            this.form.menuIds = this.getMenuAllCheckedKeys();
+            addRole(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 提交按钮（数据权限） */
+    submitDataScope: function() {
+      if (this.form.roleId != undefined) {
+        this.form.deptIds = this.getDeptAllCheckedKeys();
+        dataScope(this.form).then(response => {
+          this.$modal.msgSuccess("修改成功");
+          this.openDataScope = false;
+          this.getList();
+        });
+      }
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const roleIds = row.roleId || this.ids;
+      this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function() {
+        return delRole(roleIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/role/export', {
+        ...this.queryParams
+      }, `role_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

vue/src/views/system/role/selectUser.vue

@@ -0,0 +1,140 @@
+<template>
+  <!-- 授权用户 -->
+  <el-dialog title="选择用户" :visible.sync="visible" width="800px" top="5vh" append-to-body>
+    <el-form :model="queryParams" ref="queryForm" :inline="true">
+      <el-form-item label="用户名称" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入用户名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="手机号码" prop="phonenumber">
+        <el-input
+          v-model="queryParams.phonenumber"
+          placeholder="请输入手机号码"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-table @row-click="clickRow" ref="table" :data="userList" @selection-change="handleSelectionChange" height="260px">
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
+        <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
+        <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
+        <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
+        <el-table-column label="状态" align="center" prop="status">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-row>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleSelectUser">确 定</el-button>
+      <el-button @click="visible = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { unallocatedUserList, authUserSelectAll } from "@/api/system/role";
+export default {
+  dicts: ['sys_normal_disable'],
+  props: {
+    // 角色编号
+    roleId: {
+      type: [Number, String]
+    }
+  },
+  data() {
+    return {
+      // 遮罩层
+      visible: false,
+      // 选中数组值
+      userIds: [],
+      // 总条数
+      total: 0,
+      // 未授权用户数据
+      userList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        roleId: undefined,
+        userName: undefined,
+        phonenumber: undefined
+      }
+    };
+  },
+  methods: {
+    // 显示弹框
+    show() {
+      this.queryParams.roleId = this.roleId;
+      this.getList();
+      this.visible = true;
+    },
+    clickRow(row) {
+      this.$refs.table.toggleRowSelection(row);
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.userIds = selection.map(item => item.userId);
+    },
+    // 查询表数据
+    getList() {
+      unallocatedUserList(this.queryParams).then(res => {
+        this.userList = res.rows;
+        this.total = res.total;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 选择授权用户操作 */
+    handleSelectUser() {
+      const roleId = this.queryParams.roleId;
+      const userIds = this.userIds.join(",");
+      if (userIds == "") {
+        this.$modal.msgError("请选择要分配的用户");
+        return;
+      }
+      authUserSelectAll({ roleId: roleId, userIds: userIds }).then(res => {
+        this.$modal.msgSuccess(res.msg);
+        if (res.code === 200) {
+          this.visible = false;
+          this.$emit("ok");
+        }
+      });
+    }
+  }
+};
+</script>

vue/src/views/system/user/authRole.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="app-container">
+    <h4 class="form-header h4">基本信息</h4>
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-row>
+        <el-col :span="8" :offset="2">
+          <el-form-item label="用户昵称" prop="nickName">
+            <el-input v-model="form.nickName" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" :offset="2">
+          <el-form-item label="登录账号" prop="phonenumber">
+            <el-input  v-model="form.userName" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <h4 class="form-header h4">角色信息</h4>
+    <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">
+      <el-table-column label="序号" type="index" align="center">
+        <template slot-scope="scope">
+          <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
+      <el-table-column label="角色编号" align="center" prop="roleId" />
+      <el-table-column label="角色名称" align="center" prop="roleName" />
+      <el-table-column label="权限字符" align="center" prop="roleKey" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
+
+    <el-form label-width="100px">
+      <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
+        <el-button type="primary" @click="submitForm()">提交</el-button>
+        <el-button @click="close()">返回</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getAuthRole, updateAuthRole } from "@/api/system/user";
+
+export default {
+  name: "AuthRole",
+  data() {
+    return {
+       // 遮罩层
+      loading: true,
+      // 分页信息
+      total: 0,
+      pageNum: 1,
+      pageSize: 10,
+      // 选中角色编号
+      roleIds:[],
+      // 角色信息
+      roles: [],
+      // 用户信息
+      form: {}
+    };
+  },
+  created() {
+    const userId = this.$route.params && this.$route.params.userId;
+    if (userId) {
+      this.loading = true;
+      getAuthRole(userId).then((response) => {
+        this.form = response.user;
+        this.roles = response.roles;
+        this.total = this.roles.length;
+        this.$nextTick(() => {
+          this.roles.forEach((row) => {
+            if (row.flag) {
+              this.$refs.table.toggleRowSelection(row);
+            }
+          });
+        });
+        this.loading = false;
+      });
+    }
+  },
+  methods: {
+    /** 单击选中行数据 */
+    clickRow(row) {
+      this.$refs.table.toggleRowSelection(row);
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.roleIds = selection.map((item) => item.roleId);
+    },
+    // 保存选中的数据编号
+    getRowKey(row) {
+      return row.roleId;
+    },
+    /** 提交按钮 */
+    submitForm() {
+      const userId = this.form.userId;
+      const roleIds = this.roleIds.join(",");
+      updateAuthRole({ userId: userId, roleIds: roleIds }).then((response) => {
+        this.$modal.msgSuccess("授权成功");
+        this.close();
+      });
+    },
+    /** 关闭按钮 */
+    close() {
+      const obj = { path: "/system/user" };
+      this.$tab.closeOpenPage(obj);
+    },
+  },
+};
+</script>

vue/src/views/system/user/index.vue

@@ -0,0 +1,675 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!--部门数据-->
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input
+            v-model="deptName"
+            placeholder="请输入部门名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container">
+          <el-tree
+            :data="deptOptions"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="tree"
+            default-expand-all
+            @node-click="handleNodeClick"
+          />
+        </div>
+      </el-col>
+      <!--用户数据-->
+      <el-col :span="20" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+          <el-form-item label="用户名称" prop="userName">
+            <el-input
+              v-model="queryParams.userName"
+              placeholder="请输入用户名称"
+              clearable
+              size="small"
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="手机号码" prop="phonenumber">
+            <el-input
+              v-model="queryParams.phonenumber"
+              placeholder="请输入手机号码"
+              clearable
+              size="small"
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select
+              v-model="queryParams.status"
+              placeholder="用户状态"
+              clearable
+              size="small"
+              style="width: 240px"
+            >
+              <el-option
+                v-for="dict in dict.type.sys_normal_disable"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="创建时间">
+            <el-date-picker
+              v-model="dateRange"
+              size="small"
+              style="width: 240px"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAdd"
+              v-hasPermi="['system:user:add']"
+            >新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="success"
+              plain
+              icon="el-icon-edit"
+              size="mini"
+              :disabled="single"
+              @click="handleUpdate"
+              v-hasPermi="['system:user:edit']"
+            >修改</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="danger"
+              plain
+              icon="el-icon-delete"
+              size="mini"
+              :disabled="multiple"
+              @click="handleDelete"
+              v-hasPermi="['system:user:remove']"
+            >删除</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="info"
+              plain
+              icon="el-icon-upload2"
+              size="mini"
+              @click="handleImport"
+              v-hasPermi="['system:user:import']"
+            >导入</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="warning"
+              plain
+              icon="el-icon-download"
+              size="mini"
+              @click="handleExport"
+              v-hasPermi="['system:user:export']"
+            >导出</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="50" align="center" />
+          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
+          <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
+          <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
+            <template slot-scope="scope">
+              <el-switch
+                v-model="scope.row.status"
+                active-value="0"
+                inactive-value="1"
+                @change="handleStatusChange(scope.row)"
+              ></el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            align="center"
+            width="160"
+            class-name="small-padding fixed-width"
+          >
+            <template slot-scope="scope" v-if="scope.row.userId !== 1">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:user:edit']"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:user:remove']"
+              >删除</el-button>
+              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
+                <span class="el-dropdown-link">
+                  <i class="el-icon-d-arrow-right el-icon--right"></i>更多
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
+                    v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
+                  <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
+                    v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </el-col>
+    </el-row>
+
+    <!-- 添加或修改用户配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="用户昵称" prop="nickName">
+              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="归属部门" prop="deptId">
+              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="手机号码" prop="phonenumber">
+              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
+              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
+              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="用户性别">
+              <el-select v-model="form.sex" placeholder="请选择">
+                <el-option
+                  v-for="dict in dict.type.sys_user_sex"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态">
+              <el-radio-group v-model="form.status">
+                <el-radio
+                  v-for="dict in dict.type.sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="岗位">
+              <el-select v-model="form.postIds" multiple placeholder="请选择">
+                <el-option
+                  v-for="item in postOptions"
+                  :key="item.postId"
+                  :label="item.postName"
+                  :value="item.postId"
+                  :disabled="item.status == 1"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="角色">
+              <el-select v-model="form.roleIds" multiple placeholder="请选择">
+                <el-option
+                  v-for="item in roleOptions"
+                  :key="item.roleId"
+                  :label="item.roleName"
+                  :value="item.roleId"
+                  :disabled="item.status == 1"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 用户导入对话框 -->
+    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+      <el-upload
+        ref="upload"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        drag
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip text-center" slot="tip">
+          <div class="el-upload__tip" slot="tip">
+            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
+          </div>
+          <span>仅允许导入xls、xlsx格式文件。</span>
+          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
+        </div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="upload.open = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/api/system/user";
+import { getToken } from "@/utils/auth";
+import { treeselect } from "@/api/system/dept";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  name: "User",
+  dicts: ['sys_normal_disable', 'sys_user_sex'],
+  components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      userList: null,
+      // 弹出层标题
+      title: "",
+      // 部门树选项
+      deptOptions: undefined,
+      // 是否显示弹出层
+      open: false,
+      // 部门名称
+      deptName: undefined,
+      // 默认密码
+      initPassword: undefined,
+      // 日期范围
+      dateRange: [],
+      // 岗位选项
+      postOptions: [],
+      // 角色选项
+      roleOptions: [],
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      // 用户导入参数
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        userName: undefined,
+        phonenumber: undefined,
+        status: undefined,
+        deptId: undefined
+      },
+      // 列信息
+      columns: [
+        { key: 0, label: `用户编号`, visible: true },
+        { key: 1, label: `用户名称`, visible: true },
+        { key: 2, label: `用户昵称`, visible: true },
+        { key: 3, label: `部门`, visible: true },
+        { key: 4, label: `手机号码`, visible: true },
+        { key: 5, label: `状态`, visible: true },
+        { key: 6, label: `创建时间`, visible: true }
+      ],
+      // 表单校验
+      rules: {
+        userName: [
+          { required: true, message: "用户名称不能为空", trigger: "blur" },
+          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
+        ],
+        nickName: [
+          { required: true, message: "用户昵称不能为空", trigger: "blur" }
+        ],
+        password: [
+          { required: true, message: "用户密码不能为空", trigger: "blur" },
+          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
+        ],
+        email: [
+          {
+            type: "email",
+            message: "'请输入正确的邮箱地址",
+            trigger: ["blur", "change"]
+          }
+        ],
+        phonenumber: [
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  created() {
+    this.getList();
+    this.getTreeselect();
+    this.getConfigKey("sys.user.initPassword").then(response => {
+      this.initPassword = response.msg;
+    });
+  },
+  methods: {
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true;
+      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.userList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 查询部门下拉树结构 */
+    getTreeselect() {
+      treeselect().then(response => {
+        this.deptOptions = response.data;
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id;
+      this.getList();
+    },
+    // 用户状态修改
+    handleStatusChange(row) {
+      let text = row.status === "0" ? "启用" : "停用";
+      this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function() {
+        return changeUserStatus(row.userId, row.status);
+      }).then(() => {
+        this.$modal.msgSuccess(text + "成功");
+      }).catch(function() {
+        row.status = row.status === "0" ? "1" : "0";
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        userId: undefined,
+        deptId: undefined,
+        userName: undefined,
+        nickName: undefined,
+        password: undefined,
+        phonenumber: undefined,
+        email: undefined,
+        sex: undefined,
+        status: "0",
+        remark: undefined,
+        postIds: [],
+        roleIds: []
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.userId);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    // 更多操作触发
+    handleCommand(command, row) {
+      switch (command) {
+        case "handleResetPwd":
+          this.handleResetPwd(row);
+          break;
+        case "handleAuthRole":
+          this.handleAuthRole(row);
+          break;
+        default:
+          break;
+      }
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.getTreeselect();
+      getUser().then(response => {
+        this.postOptions = response.posts;
+        this.roleOptions = response.roles;
+        this.open = true;
+        this.title = "添加用户";
+        this.form.password = this.initPassword;
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.getTreeselect();
+      const userId = row.userId || this.ids;
+      getUser(userId).then(response => {
+        this.form = response.data;
+        this.postOptions = response.posts;
+        this.roleOptions = response.roles;
+        this.form.postIds = response.postIds;
+        this.form.roleIds = response.roleIds;
+        this.open = true;
+        this.title = "修改用户";
+        this.form.password = "";
+      });
+    },
+    /** 重置密码按钮操作 */
+    handleResetPwd(row) {
+      this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        closeOnClickModal: false,
+        inputPattern: /^.{5,20}$/,
+        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间"
+      }).then(({ value }) => {
+          resetUserPwd(row.userId, value).then(response => {
+            this.$modal.msgSuccess("修改成功，新密码是：" + value);
+          });
+        }).catch(() => {});
+    },
+    /** 分配角色操作 */
+    handleAuthRole: function(row) {
+      const userId = row.userId;
+      this.$router.push("/system/user-auth/role/" + userId);
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.userId != undefined) {
+            updateUser(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addUser(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const userIds = row.userId || this.ids;
+      this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function() {
+        return delUser(userIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/user/export', {
+        ...this.queryParams
+      }, `user_${new Date().getTime()}.xlsx`)
+    },
+    /** 导入按钮操作 */
+    handleImport() {
+      this.upload.title = "用户导入";
+      this.upload.open = true;
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+      this.download('system/user/importTemplate', {
+      }, `user_template_${new Date().getTime()}.xlsx`)
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      this.upload.open = false;
+      this.upload.isUploading = false;
+      this.$refs.upload.clearFiles();
+      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
+      this.getList();
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit();
+    }
+  }
+};
+</script>

vue/src/views/system/user/profile/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="6" :xs="24">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>个人信息</span>
+          </div>
+          <div>
+            <div class="text-center">
+              <userAvatar :user="user" />
+            </div>
+            <ul class="list-group list-group-striped">
+              <li class="list-group-item">
+                <svg-icon icon-class="user" />用户名称
+                <div class="pull-right">{{ user.userName }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="phone" />手机号码
+                <div class="pull-right">{{ user.phonenumber }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="email" />用户邮箱
+                <div class="pull-right">{{ user.email }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="tree" />所属部门
+                <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="peoples" />所属角色
+                <div class="pull-right">{{ roleGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="date" />创建日期
+                <div class="pull-right">{{ user.createTime }}</div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="18" :xs="24">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>基本资料</span>
+          </div>
+          <el-tabs v-model="activeTab">
+            <el-tab-pane label="基本资料" name="userinfo">
+              <userInfo :user="user" />
+            </el-tab-pane>
+            <el-tab-pane label="修改密码" name="resetPwd">
+              <resetPwd :user="user" />
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import userAvatar from "./userAvatar";
+import userInfo from "./userInfo";
+import resetPwd from "./resetPwd";
+import { getUserProfile } from "@/api/system/user";
+
+export default {
+  name: "Profile",
+  components: { userAvatar, userInfo, resetPwd },
+  data() {
+    return {
+      user: {},
+      roleGroup: {},
+      postGroup: {},
+      activeTab: "userinfo"
+    };
+  },
+  created() {
+    this.getUser();
+  },
+  methods: {
+    getUser() {
+      getUserProfile().then(response => {
+        this.user = response.data;
+        this.roleGroup = response.roleGroup;
+        this.postGroup = response.postGroup;
+      });
+    }
+  }
+};
+</script>

vue/src/views/system/user/profile/resetPwd.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+    <el-form-item label="旧密码" prop="oldPassword">
+      <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
+    </el-form-item>
+    <el-form-item label="新密码" prop="newPassword">
+      <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
+    </el-form-item>
+    <el-form-item label="确认密码" prop="confirmPassword">
+      <el-input v-model="user.confirmPassword" placeholder="请确认密码" type="password" show-password/>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" size="mini" @click="submit">保存</el-button>
+      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { updateUserPwd } from "@/api/system/user";
+
+export default {
+  data() {
+    const equalToPassword = (rule, value, callback) => {
+      if (this.user.newPassword !== value) {
+        callback(new Error("两次输入的密码不一致"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      user: {
+        oldPassword: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined
+      },
+      // 表单校验
+      rules: {
+        oldPassword: [
+          { required: true, message: "旧密码不能为空", trigger: "blur" }
+        ],
+        newPassword: [
+          { required: true, message: "新密码不能为空", trigger: "blur" },
+          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
+        ],
+        confirmPassword: [
+          { required: true, message: "确认密码不能为空", trigger: "blur" },
+          { required: true, validator: equalToPassword, trigger: "blur" }
+        ]
+      }
+    };
+  },
+  methods: {
+    submit() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
+            this.$modal.msgSuccess("修改成功");
+          });
+        }
+      });
+    },
+    close() {
+      this.$tab.closePage();
+    }
+  }
+};
+</script>

vue/src/views/system/user/profile/userAvatar.vue

@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"  @close="closeDialog">
+      <el-row>
+        <el-col :xs="24" :md="12" :style="{height: '350px'}">
+          <vue-cropper
+            ref="cropper"
+            :img="options.img"
+            :info="true"
+            :autoCrop="options.autoCrop"
+            :autoCropWidth="options.autoCropWidth"
+            :autoCropHeight="options.autoCropHeight"
+            :fixedBox="options.fixedBox"
+            @realTime="realTime"
+            v-if="visible"
+          />
+        </el-col>
+        <el-col :xs="24" :md="12" :style="{height: '350px'}">
+          <div class="avatar-upload-preview">
+            <img :src="previews.url" :style="previews.img" />
+          </div>
+        </el-col>
+      </el-row>
+      <br />
+      <el-row>
+        <el-col :lg="2" :md="2">
+          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
+            <el-button size="small">
+              选择
+              <i class="el-icon-upload el-icon--right"></i>
+            </el-button>
+          </el-upload>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 2}" :md="2">
+          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
+        </el-col>
+        <el-col :lg="{span: 2, offset: 6}" :md="2">
+          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import store from "@/store";
+import { VueCropper } from "vue-cropper";
+import { uploadAvatar } from "@/api/system/user";
+
+export default {
+  components: { VueCropper },
+  props: {
+    user: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      // 是否显示弹出层
+      open: false,
+      // 是否显示cropper
+      visible: false,
+      // 弹出层标题
+      title: "修改头像",
+      options: {
+        img: store.getters.avatar, //裁剪图片的地址
+        autoCrop: true, // 是否默认生成截图框
+        autoCropWidth: 200, // 默认生成截图框宽度
+        autoCropHeight: 200, // 默认生成截图框高度
+        fixedBox: true // 固定截图框大小 不允许改变
+      },
+      previews: {}
+    };
+  },
+  methods: {
+    // 编辑头像
+    editCropper() {
+      this.open = true;
+    },
+    // 打开弹出层结束时的回调
+    modalOpened() {
+      this.visible = true;
+    },
+    // 覆盖默认的上传行为
+    requestUpload() {
+    },
+    // 向左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft();
+    },
+    // 向右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight();
+    },
+    // 图片缩放
+    changeScale(num) {
+      num = num || 1;
+      this.$refs.cropper.changeScale(num);
+    },
+    // 上传预处理
+    beforeUpload(file) {
+      if (file.type.indexOf("image/") == -1) {
+        this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
+      } else {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+          this.options.img = reader.result;
+        };
+      }
+    },
+    // 上传图片
+    uploadImg() {
+      this.$refs.cropper.getCropBlob(data => {
+        let formData = new FormData();
+        formData.append("avatarfile", data);
+        uploadAvatar(formData).then(response => {
+          this.open = false;
+          this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
+          store.commit('SET_AVATAR', this.options.img);
+          this.$modal.msgSuccess("修改成功");
+          this.visible = false;
+        });
+      });
+    },
+    // 实时预览
+    realTime(data) {
+      this.previews = data;
+    },
+    // 关闭窗口
+    closeDialog() {
+      this.options.img = store.getters.avatar
+      this.visible = false;
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.user-info-head {
+  position: relative;
+  display: inline-block;
+  height: 120px;
+}
+
+.user-info-head:hover:after {
+  content: '+';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: #eee;
+  background: rgba(0, 0, 0, 0.5);
+  font-size: 24px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: pointer;
+  line-height: 110px;
+  border-radius: 50%;
+}
+</style>

vue/src/views/system/user/profile/userInfo.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+    <el-form-item label="用户昵称" prop="nickName">
+      <el-input v-model="user.nickName" maxlength="30" />
+    </el-form-item> 
+    <el-form-item label="手机号码" prop="phonenumber">
+      <el-input v-model="user.phonenumber" maxlength="11" />
+    </el-form-item>
+    <el-form-item label="邮箱" prop="email">
+      <el-input v-model="user.email" maxlength="50" />
+    </el-form-item>
+    <el-form-item label="性别">
+      <el-radio-group v-model="user.sex">
+        <el-radio label="0">男</el-radio>
+        <el-radio label="1">女</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" size="mini" @click="submit">保存</el-button>
+      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { updateUserProfile } from "@/api/system/user";
+
+export default {
+  props: {
+    user: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      // 表单校验
+      rules: {
+        nickName: [
+          { required: true, message: "用户昵称不能为空", trigger: "blur" }
+        ],
+        email: [
+          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
+          {
+            type: "email",
+            message: "'请输入正确的邮箱地址",
+            trigger: ["blur", "change"]
+          }
+        ],
+        phonenumber: [
+          { required: true, message: "手机号码不能为空", trigger: "blur" },
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  methods: {
+    submit() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          updateUserProfile(this.user).then(response => {
+            this.$modal.msgSuccess("修改成功");
+          });
+        }
+      });
+    },
+    close() {
+      this.$tab.closePage();
+    }
+  }
+};
+</script>

vue/src/views/tool/build/CodeTypeDialog.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <el-dialog
+      v-bind="$attrs"
+      width="500px"
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      v-on="$listeners"
+      @open="onOpen"
+      @close="onClose"
+    >
+      <el-row :gutter="15">
+        <el-form
+          ref="elForm"
+          :model="formData"
+          :rules="rules"
+          size="medium"
+          label-width="100px"
+        >
+          <el-col :span="24">
+            <el-form-item label="生成类型" prop="type">
+              <el-radio-group v-model="formData.type">
+                <el-radio-button
+                  v-for="(item, index) in typeOptions"
+                  :key="index"
+                  :label="item.value"
+                  :disabled="item.disabled"
+                >
+                  {{ item.label }}
+                </el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="showFileName" label="文件名" prop="fileName">
+              <el-input v-model="formData.fileName" placeholder="请输入文件名" clearable />
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+
+      <div slot="footer">
+        <el-button @click="close">
+          取消
+        </el-button>
+        <el-button type="primary" @click="handelConfirm">
+          确定
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  inheritAttrs: false,
+  props: ['showFileName'],
+  data() {
+    return {
+      formData: {
+        fileName: undefined,
+        type: 'file'
+      },
+      rules: {
+        fileName: [{
+          required: true,
+          message: '请输入文件名',
+          trigger: 'blur'
+        }],
+        type: [{
+          required: true,
+          message: '生成类型不能为空',
+          trigger: 'change'
+        }]
+      },
+      typeOptions: [{
+        label: '页面',
+        value: 'file'
+      }, {
+        label: '弹窗',
+        value: 'dialog'
+      }]
+    }
+  },
+  computed: {
+  },
+  watch: {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      if (this.showFileName) {
+        this.formData.fileName = `${+new Date()}.vue`
+      }
+    },
+    onClose() {
+    },
+    close(e) {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs.elForm.validate(valid => {
+        if (!valid) return
+        this.$emit('confirm', { ...this.formData })
+        this.close()
+      })
+    }
+  }
+}
+</script>

vue/src/views/tool/build/DraggableItem.vue

@@ -0,0 +1,100 @@
+<script>
+import draggable from 'vuedraggable'
+import render from '@/utils/generator/render'
+
+const components = {
+  itemBtns(h, element, index, parent) {
+    const { copyItem, deleteItem } = this.$listeners
+    return [
+      <span class="drawing-item-copy" title="复制" onClick={event => {
+        copyItem(element, parent); event.stopPropagation()
+      }}>
+        <i class="el-icon-copy-document" />
+      </span>,
+      <span class="drawing-item-delete" title="删除" onClick={event => {
+        deleteItem(index, parent); event.stopPropagation()
+      }}>
+        <i class="el-icon-delete" />
+      </span>
+    ]
+  }
+}
+const layouts = {
+  colFormItem(h, element, index, parent) {
+    const { activeItem } = this.$listeners
+    let className = this.activeId === element.formId ? 'drawing-item active-from-item' : 'drawing-item'
+    if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered'
+    return (
+      <el-col span={element.span} class={className}
+        nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
+        <el-form-item label-width={element.labelWidth ? `${element.labelWidth}px` : null}
+          label={element.label} required={element.required}>
+          <render key={element.renderKey} conf={element} onInput={ event => {
+            this.$set(element, 'defaultValue', event)
+          }} />
+        </el-form-item>
+        {components.itemBtns.apply(this, arguments)}
+      </el-col>
+    )
+  },
+  rowFormItem(h, element, index, parent) {
+    const { activeItem } = this.$listeners
+    const className = this.activeId === element.formId ? 'drawing-row-item active-from-item' : 'drawing-row-item'
+    let child = renderChildren.apply(this, arguments)
+    if (element.type === 'flex') {
+      child = <el-row type={element.type} justify={element.justify} align={element.align}>
+              {child}
+            </el-row>
+    }
+    return (
+      <el-col span={element.span}>
+        <el-row gutter={element.gutter} class={className}
+          nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
+          <span class="component-name">{element.componentName}</span>
+          <draggable list={element.children} animation={340} group="componentsGroup" class="drag-wrapper">
+            {child}
+          </draggable>
+          {components.itemBtns.apply(this, arguments)}
+        </el-row>
+      </el-col>
+    )
+  }
+}
+
+function renderChildren(h, element, index, parent) {
+  if (!Array.isArray(element.children)) return null
+  return element.children.map((el, i) => {
+    const layout = layouts[el.layout]
+    if (layout) {
+      return layout.call(this, h, el, i, element.children)
+    }
+    return layoutIsNotFound()
+  })
+}
+
+function layoutIsNotFound() {
+  throw new Error(`没有与${this.element.layout}匹配的layout`)
+}
+
+export default {
+  components: {
+    render,
+    draggable
+  },
+  props: [
+    'element',
+    'index',
+    'drawingList',
+    'activeId',
+    'formConf'
+  ],
+  render(h) {
+    const layout = layouts[this.element.layout]
+
+    if (layout) {
+      return layout.call(this, h, this.element, this.index, this.drawingList)
+    }
+    return layoutIsNotFound()
+  }
+}
+</script>

vue/src/views/tool/build/IconsDialog.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="icon-dialog">
+    <el-dialog
+      v-bind="$attrs"
+      width="980px"
+      :modal-append-to-body="false"
+      v-on="$listeners"
+      @open="onOpen"
+      @close="onClose"
+    >
+      <div slot="title">
+        选择图标
+        <el-input
+          v-model="key"
+          size="mini"
+          :style="{width: '260px'}"
+          placeholder="请输入图标名称"
+          prefix-icon="el-icon-search"
+          clearable
+        />
+      </div>
+      <ul class="icon-ul">
+        <li
+          v-for="icon in iconList"
+          :key="icon"
+          :class="active===icon?'active-item':''"
+          @click="onSelect(icon)"
+        >
+          <i :class="icon" />
+          <div>{{ icon }}</div>
+        </li>
+      </ul>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import iconList from '@/utils/generator/icon.json'
+
+const originList = iconList.map(name => `el-icon-${name}`)
+
+export default {
+  inheritAttrs: false,
+  props: ['current'],
+  data() {
+    return {
+      iconList: originList,
+      active: null,
+      key: ''
+    }
+  },
+  watch: {
+    key(val) {
+      if (val) {
+        this.iconList = originList.filter(name => name.indexOf(val) > -1)
+      } else {
+        this.iconList = originList
+      }
+    }
+  },
+  methods: {
+    onOpen() {
+      this.active = this.current
+      this.key = ''
+    },
+    onClose() {},
+    onSelect(icon) {
+      this.active = icon
+      this.$emit('select', icon)
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.icon-ul {
+  margin: 0;
+  padding: 0;
+  font-size: 0;
+  li {
+    list-style-type: none;
+    text-align: center;
+    font-size: 14px;
+    display: inline-block;
+    width: 16.66%;
+    box-sizing: border-box;
+    height: 108px;
+    padding: 15px 6px 6px 6px;
+    cursor: pointer;
+    overflow: hidden;
+    &:hover {
+      background: #f2f2f2;
+    }
+    &.active-item{
+      background: #e1f3fb;
+      color: #7a6df0
+    }
+    > i {
+      font-size: 30px;
+      line-height: 50px;
+    }
+  }
+}
+.icon-dialog {
+  ::v-deep .el-dialog {
+    border-radius: 8px;
+    margin-bottom: 0;
+    margin-top: 4vh !important;
+    display: flex;
+    flex-direction: column;
+    max-height: 92vh;
+    overflow: hidden;
+    box-sizing: border-box;
+    .el-dialog__header {
+      padding-top: 14px;
+    }
+    .el-dialog__body {
+      margin: 0 20px 20px 20px;
+      padding: 0;
+      overflow: auto;
+    }
+  }
+}
+</style>

vue/src/views/tool/build/RightPanel.vue

@@ -0,0 +1,946 @@
+<template>
+  <div class="right-board">
+    <el-tabs v-model="currentTab" class="center-tabs">
+      <el-tab-pane label="组件属性" name="field" />
+      <el-tab-pane label="表单属性" name="form" />
+    </el-tabs>
+    <div class="field-box">
+      <a class="document-link" target="_blank" :href="documentLink" title="查看组件文档">
+        <i class="el-icon-link" />
+      </a>
+      <el-scrollbar class="right-scrollbar">
+        <!-- 组件属性 -->
+        <el-form v-show="currentTab==='field' && showField" size="small" label-width="90px">
+          <el-form-item v-if="activeData.changeTag" label="组件类型">
+            <el-select
+              v-model="activeData.tagIcon"
+              placeholder="请选择组件类型"
+              :style="{width: '100%'}"
+              @change="tagChange"
+            >
+              <el-option-group v-for="group in tagList" :key="group.label" :label="group.label">
+                <el-option
+                  v-for="item in group.options"
+                  :key="item.label"
+                  :label="item.label"
+                  :value="item.tagIcon"
+                >
+                  <svg-icon class="node-icon" :icon-class="item.tagIcon" />
+                  <span> {{ item.label }}</span>
+                </el-option>
+              </el-option-group>
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="activeData.vModel!==undefined" label="字段名">
+            <el-input v-model="activeData.vModel" placeholder="请输入字段名（v-model）" />
+          </el-form-item>
+          <el-form-item v-if="activeData.componentName!==undefined" label="组件名">
+            {{ activeData.componentName }}
+          </el-form-item>
+          <el-form-item v-if="activeData.label!==undefined" label="标题">
+            <el-input v-model="activeData.label" placeholder="请输入标题" />
+          </el-form-item>
+          <el-form-item v-if="activeData.placeholder!==undefined" label="占位提示">
+            <el-input v-model="activeData.placeholder" placeholder="请输入占位提示" />
+          </el-form-item>
+          <el-form-item v-if="activeData['start-placeholder']!==undefined" label="开始占位">
+            <el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示" />
+          </el-form-item>
+          <el-form-item v-if="activeData['end-placeholder']!==undefined" label="结束占位">
+            <el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示" />
+          </el-form-item>
+          <el-form-item v-if="activeData.span!==undefined" label="表单栅格">
+            <el-slider v-model="activeData.span" :max="24" :min="1" :marks="{12:''}" @change="spanChange" />
+          </el-form-item>
+          <el-form-item v-if="activeData.layout==='rowFormItem'" label="栅格间隔">
+            <el-input-number v-model="activeData.gutter" :min="0" placeholder="栅格间隔" />
+          </el-form-item>
+          <el-form-item v-if="activeData.layout==='rowFormItem'" label="布局模式">
+            <el-radio-group v-model="activeData.type">
+              <el-radio-button label="default" />
+              <el-radio-button label="flex" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="activeData.justify!==undefined&&activeData.type==='flex'" label="水平排列">
+            <el-select v-model="activeData.justify" placeholder="请选择水平排列" :style="{width: '100%'}">
+              <el-option
+                v-for="(item, index) in justifyOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="activeData.align!==undefined&&activeData.type==='flex'" label="垂直排列">
+            <el-radio-group v-model="activeData.align">
+              <el-radio-button label="top" />
+              <el-radio-button label="middle" />
+              <el-radio-button label="bottom" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="activeData.labelWidth!==undefined" label="标签宽度">
+            <el-input v-model.number="activeData.labelWidth" type="number" placeholder="请输入标签宽度" />
+          </el-form-item>
+          <el-form-item v-if="activeData.style&&activeData.style.width!==undefined" label="组件宽度">
+            <el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable />
+          </el-form-item>
+          <el-form-item v-if="activeData.vModel!==undefined" label="默认值">
+            <el-input
+              :value="setDefaultValue(activeData.defaultValue)"
+              placeholder="请输入默认值"
+              @input="onDefaultValueInput"
+            />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag==='el-checkbox-group'" label="至少应选">
+            <el-input-number
+              :value="activeData.min"
+              :min="0"
+              placeholder="至少应选"
+              @input="$set(activeData, 'min', $event?$event:undefined)"
+            />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag==='el-checkbox-group'" label="最多可选">
+            <el-input-number
+              :value="activeData.max"
+              :min="0"
+              placeholder="最多可选"
+              @input="$set(activeData, 'max', $event?$event:undefined)"
+            />
+          </el-form-item>
+          <el-form-item v-if="activeData.prepend!==undefined" label="前缀">
+            <el-input v-model="activeData.prepend" placeholder="请输入前缀" />
+          </el-form-item>
+          <el-form-item v-if="activeData.append!==undefined" label="后缀">
+            <el-input v-model="activeData.append" placeholder="请输入后缀" />
+          </el-form-item>
+          <el-form-item v-if="activeData['prefix-icon']!==undefined" label="前图标">
+            <el-input v-model="activeData['prefix-icon']" placeholder="请输入前图标名称">
+              <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('prefix-icon')">
+                选择
+              </el-button>
+            </el-input>
+          </el-form-item>
+          <el-form-item v-if="activeData['suffix-icon'] !== undefined" label="后图标">
+            <el-input v-model="activeData['suffix-icon']" placeholder="请输入后图标名称">
+              <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('suffix-icon')">
+                选择
+              </el-button>
+            </el-input>
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-cascader'" label="选项分隔符">
+            <el-input v-model="activeData.separator" placeholder="请输入选项分隔符" />
+          </el-form-item>
+          <el-form-item v-if="activeData.autosize !== undefined" label="最小行数">
+            <el-input-number v-model="activeData.autosize.minRows" :min="1" placeholder="最小行数" />
+          </el-form-item>
+          <el-form-item v-if="activeData.autosize !== undefined" label="最大行数">
+            <el-input-number v-model="activeData.autosize.maxRows" :min="1" placeholder="最大行数" />
+          </el-form-item>
+          <el-form-item v-if="activeData.min !== undefined" label="最小值">
+            <el-input-number v-model="activeData.min" placeholder="最小值" />
+          </el-form-item>
+          <el-form-item v-if="activeData.max !== undefined" label="最大值">
+            <el-input-number v-model="activeData.max" placeholder="最大值" />
+          </el-form-item>
+          <el-form-item v-if="activeData.step !== undefined" label="步长">
+            <el-input-number v-model="activeData.step" placeholder="步数" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-input-number'" label="精度">
+            <el-input-number v-model="activeData.precision" :min="0" placeholder="精度" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-input-number'" label="按钮位置">
+            <el-radio-group v-model="activeData['controls-position']">
+              <el-radio-button label="">
+                默认
+              </el-radio-button>
+              <el-radio-button label="right">
+                右侧
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="activeData.maxlength !== undefined" label="最多输入">
+            <el-input v-model="activeData.maxlength" placeholder="请输入字符长度">
+              <template slot="append">
+                个字符
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item v-if="activeData['active-text'] !== undefined" label="开启提示">
+            <el-input v-model="activeData['active-text']" placeholder="请输入开启提示" />
+          </el-form-item>
+          <el-form-item v-if="activeData['inactive-text'] !== undefined" label="关闭提示">
+            <el-input v-model="activeData['inactive-text']" placeholder="请输入关闭提示" />
+          </el-form-item>
+          <el-form-item v-if="activeData['active-value'] !== undefined" label="开启值">
+            <el-input
+              :value="setDefaultValue(activeData['active-value'])"
+              placeholder="请输入开启值"
+              @input="onSwitchValueInput($event, 'active-value')"
+            />
+          </el-form-item>
+          <el-form-item v-if="activeData['inactive-value'] !== undefined" label="关闭值">
+            <el-input
+              :value="setDefaultValue(activeData['inactive-value'])"
+              placeholder="请输入关闭值"
+              @input="onSwitchValueInput($event, 'inactive-value')"
+            />
+          </el-form-item>
+          <el-form-item
+            v-if="activeData.type !== undefined && 'el-date-picker' === activeData.tag"
+            label="时间类型"
+          >
+            <el-select
+              v-model="activeData.type"
+              placeholder="请选择时间类型"
+              :style="{ width: '100%' }"
+              @change="dateTypeChange"
+            >
+              <el-option
+                v-for="(item, index) in dateOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="activeData.name !== undefined" label="文件字段名">
+            <el-input v-model="activeData.name" placeholder="请输入上传文件字段名" />
+          </el-form-item>
+          <el-form-item v-if="activeData.accept !== undefined" label="文件类型">
+            <el-select
+              v-model="activeData.accept"
+              placeholder="请选择文件类型"
+              :style="{ width: '100%' }"
+              clearable
+            >
+              <el-option label="图片" value="image/*" />
+              <el-option label="视频" value="video/*" />
+              <el-option label="音频" value="audio/*" />
+              <el-option label="excel" value=".xls,.xlsx" />
+              <el-option label="word" value=".doc,.docx" />
+              <el-option label="pdf" value=".pdf" />
+              <el-option label="txt" value=".txt" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="activeData.fileSize !== undefined" label="文件大小">
+            <el-input v-model.number="activeData.fileSize" placeholder="请输入文件大小">
+              <el-select slot="append" v-model="activeData.sizeUnit" :style="{ width: '66px' }">
+                <el-option label="KB" value="KB" />
+                <el-option label="MB" value="MB" />
+                <el-option label="GB" value="GB" />
+              </el-select>
+            </el-input>
+          </el-form-item>
+          <el-form-item v-if="activeData.action !== undefined" label="上传地址">
+            <el-input v-model="activeData.action" placeholder="请输入上传地址" clearable />
+          </el-form-item>
+          <el-form-item v-if="activeData['list-type'] !== undefined" label="列表类型">
+            <el-radio-group v-model="activeData['list-type']" size="small">
+              <el-radio-button label="text">
+                text
+              </el-radio-button>
+              <el-radio-button label="picture">
+                picture
+              </el-radio-button>
+              <el-radio-button label="picture-card">
+                picture-card
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            v-if="activeData.buttonText !== undefined"
+            v-show="'picture-card' !== activeData['list-type']"
+            label="按钮文字"
+          >
+            <el-input v-model="activeData.buttonText" placeholder="请输入按钮文字" />
+          </el-form-item>
+          <el-form-item v-if="activeData['range-separator'] !== undefined" label="分隔符">
+            <el-input v-model="activeData['range-separator']" placeholder="请输入分隔符" />
+          </el-form-item>
+          <el-form-item v-if="activeData['picker-options'] !== undefined" label="时间段">
+            <el-input
+              v-model="activeData['picker-options'].selectableRange"
+              placeholder="请输入时间段"
+            />
+          </el-form-item>
+          <el-form-item v-if="activeData.format !== undefined" label="时间格式">
+            <el-input
+              :value="activeData.format"
+              placeholder="请输入时间格式"
+              @input="setTimeValue($event)"
+            />
+          </el-form-item>
+          <template v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.tag) > -1">
+            <el-divider>选项</el-divider>
+            <draggable
+              :list="activeData.options"
+              :animation="340"
+              group="selectItem"
+              handle=".option-drag"
+            >
+              <div v-for="(item, index) in activeData.options" :key="index" class="select-item">
+                <div class="select-line-icon option-drag">
+                  <i class="el-icon-s-operation" />
+                </div>
+                <el-input v-model="item.label" placeholder="选项名" size="small" />
+                <el-input
+                  placeholder="选项值"
+                  size="small"
+                  :value="item.value"
+                  @input="setOptionValue(item, $event)"
+                />
+                <div class="close-btn select-line-icon" @click="activeData.options.splice(index, 1)">
+                  <i class="el-icon-remove-outline" />
+                </div>
+              </div>
+            </draggable>
+            <div style="margin-left: 20px;">
+              <el-button
+                style="padding-bottom: 0"
+                icon="el-icon-circle-plus-outline"
+                type="text"
+                @click="addSelectItem"
+              >
+                添加选项
+              </el-button>
+            </div>
+            <el-divider />
+          </template>
+
+          <template v-if="['el-cascader'].indexOf(activeData.tag) > -1">
+            <el-divider>选项</el-divider>
+            <el-form-item label="数据类型">
+              <el-radio-group v-model="activeData.dataType" size="small">
+                <el-radio-button label="dynamic">
+                  动态数据
+                </el-radio-button>
+                <el-radio-button label="static">
+                  静态数据
+                </el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+
+            <template v-if="activeData.dataType === 'dynamic'">
+              <el-form-item label="标签键名">
+                <el-input v-model="activeData.labelKey" placeholder="请输入标签键名" />
+              </el-form-item>
+              <el-form-item label="值键名">
+                <el-input v-model="activeData.valueKey" placeholder="请输入值键名" />
+              </el-form-item>
+              <el-form-item label="子级键名">
+                <el-input v-model="activeData.childrenKey" placeholder="请输入子级键名" />
+              </el-form-item>
+            </template>
+
+            <el-tree
+              v-if="activeData.dataType === 'static'"
+              draggable
+              :data="activeData.options"
+              node-key="id"
+              :expand-on-click-node="false"
+              :render-content="renderContent"
+            />
+            <div v-if="activeData.dataType === 'static'" style="margin-left: 20px">
+              <el-button
+                style="padding-bottom: 0"
+                icon="el-icon-circle-plus-outline"
+                type="text"
+                @click="addTreeItem"
+              >
+                添加父级
+              </el-button>
+            </div>
+            <el-divider />
+          </template>
+
+          <el-form-item v-if="activeData.optionType !== undefined" label="选项样式">
+            <el-radio-group v-model="activeData.optionType">
+              <el-radio-button label="default">
+                默认
+              </el-radio-button>
+              <el-radio-button label="button">
+                按钮
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="activeData['active-color'] !== undefined" label="开启颜色">
+            <el-color-picker v-model="activeData['active-color']" />
+          </el-form-item>
+          <el-form-item v-if="activeData['inactive-color'] !== undefined" label="关闭颜色">
+            <el-color-picker v-model="activeData['inactive-color']" />
+          </el-form-item>
+
+          <el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选">
+            <el-switch v-model="activeData['allow-half']" />
+          </el-form-item>
+          <el-form-item v-if="activeData['show-text'] !== undefined" label="辅助文字">
+            <el-switch v-model="activeData['show-text']" @change="rateTextChange" />
+          </el-form-item>
+          <el-form-item v-if="activeData['show-score'] !== undefined" label="显示分数">
+            <el-switch v-model="activeData['show-score']" @change="rateScoreChange" />
+          </el-form-item>
+          <el-form-item v-if="activeData['show-stops'] !== undefined" label="显示间断点">
+            <el-switch v-model="activeData['show-stops']" />
+          </el-form-item>
+          <el-form-item v-if="activeData.range !== undefined" label="范围选择">
+            <el-switch v-model="activeData.range" @change="rangeChange" />
+          </el-form-item>
+          <el-form-item
+            v-if="activeData.border !== undefined && activeData.optionType === 'default'"
+            label="是否带边框"
+          >
+            <el-switch v-model="activeData.border" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-color-picker'" label="颜色格式">
+            <el-select
+              v-model="activeData['color-format']"
+              placeholder="请选择颜色格式"
+              :style="{ width: '100%' }"
+              @change="colorFormatChange"
+            >
+              <el-option
+                v-for="(item, index) in colorFormatOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="activeData.size !== undefined &&
+              (activeData.optionType === 'button' ||
+                activeData.border ||
+                activeData.tag === 'el-color-picker')"
+            label="选项尺寸"
+          >
+            <el-radio-group v-model="activeData.size">
+              <el-radio-button label="medium">
+                中等
+              </el-radio-button>
+              <el-radio-button label="small">
+                较小
+              </el-radio-button>
+              <el-radio-button label="mini">
+                迷你
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="activeData['show-word-limit'] !== undefined" label="输入统计">
+            <el-switch v-model="activeData['show-word-limit']" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-input-number'" label="严格步数">
+            <el-switch v-model="activeData['step-strictly']" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-cascader'" label="是否多选">
+            <el-switch v-model="activeData.props.props.multiple" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-cascader'" label="展示全路径">
+            <el-switch v-model="activeData['show-all-levels']" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-cascader'" label="可否筛选">
+            <el-switch v-model="activeData.filterable" />
+          </el-form-item>
+          <el-form-item v-if="activeData.clearable !== undefined" label="能否清空">
+            <el-switch v-model="activeData.clearable" />
+          </el-form-item>
+          <el-form-item v-if="activeData.showTip !== undefined" label="显示提示">
+            <el-switch v-model="activeData.showTip" />
+          </el-form-item>
+          <el-form-item v-if="activeData.multiple !== undefined" label="多选文件">
+            <el-switch v-model="activeData.multiple" />
+          </el-form-item>
+          <el-form-item v-if="activeData['auto-upload'] !== undefined" label="自动上传">
+            <el-switch v-model="activeData['auto-upload']" />
+          </el-form-item>
+          <el-form-item v-if="activeData.readonly !== undefined" label="是否只读">
+            <el-switch v-model="activeData.readonly" />
+          </el-form-item>
+          <el-form-item v-if="activeData.disabled !== undefined" label="是否禁用">
+            <el-switch v-model="activeData.disabled" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-select'" label="是否可搜索">
+            <el-switch v-model="activeData.filterable" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-select'" label="是否多选">
+            <el-switch v-model="activeData.multiple" @change="multipleChange" />
+          </el-form-item>
+          <el-form-item v-if="activeData.required !== undefined" label="是否必填">
+            <el-switch v-model="activeData.required" />
+          </el-form-item>
+
+          <template v-if="activeData.layoutTree">
+            <el-divider>布局结构树</el-divider>
+            <el-tree
+              :data="[activeData]"
+              :props="layoutTreeProps"
+              node-key="renderKey"
+              default-expand-all
+              draggable
+            >
+              <span slot-scope="{ node, data }">
+                <span class="node-label">
+                  <svg-icon class="node-icon" :icon-class="data.tagIcon" />
+                  {{ node.label }}
+                </span>
+              </span>
+            </el-tree>
+          </template>
+
+          <template v-if="activeData.layout === 'colFormItem'">
+            <el-divider>正则校验</el-divider>
+            <div
+              v-for="(item, index) in activeData.regList"
+              :key="index"
+              class="reg-item"
+            >
+              <span class="close-btn" @click="activeData.regList.splice(index, 1)">
+                <i class="el-icon-close" />
+              </span>
+              <el-form-item label="表达式">
+                <el-input v-model="item.pattern" placeholder="请输入正则" />
+              </el-form-item>
+              <el-form-item label="错误提示" style="margin-bottom:0">
+                <el-input v-model="item.message" placeholder="请输入错误提示" />
+              </el-form-item>
+            </div>
+            <div style="margin-left: 20px">
+              <el-button icon="el-icon-circle-plus-outline" type="text" @click="addReg">
+                添加规则
+              </el-button>
+            </div>
+          </template>
+        </el-form>
+        <!-- 表单属性 -->
+        <el-form v-show="currentTab === 'form'" size="small" label-width="90px">
+          <el-form-item label="表单名">
+            <el-input v-model="formConf.formRef" placeholder="请输入表单名（ref）" />
+          </el-form-item>
+          <el-form-item label="表单模型">
+            <el-input v-model="formConf.formModel" placeholder="请输入数据模型" />
+          </el-form-item>
+          <el-form-item label="校验模型">
+            <el-input v-model="formConf.formRules" placeholder="请输入校验模型" />
+          </el-form-item>
+          <el-form-item label="表单尺寸">
+            <el-radio-group v-model="formConf.size">
+              <el-radio-button label="medium">
+                中等
+              </el-radio-button>
+              <el-radio-button label="small">
+                较小
+              </el-radio-button>
+              <el-radio-button label="mini">
+                迷你
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="标签对齐">
+            <el-radio-group v-model="formConf.labelPosition">
+              <el-radio-button label="left">
+                左对齐
+              </el-radio-button>
+              <el-radio-button label="right">
+                右对齐
+              </el-radio-button>
+              <el-radio-button label="top">
+                顶部对齐
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="标签宽度">
+            <el-input-number v-model="formConf.labelWidth" placeholder="标签宽度" />
+          </el-form-item>
+          <el-form-item label="栅格间隔">
+            <el-input-number v-model="formConf.gutter" :min="0" placeholder="栅格间隔" />
+          </el-form-item>
+          <el-form-item label="禁用表单">
+            <el-switch v-model="formConf.disabled" />
+          </el-form-item>
+          <el-form-item label="表单按钮">
+            <el-switch v-model="formConf.formBtns" />
+          </el-form-item>
+          <el-form-item label="显示未选中组件边框">
+            <el-switch v-model="formConf.unFocusedComponentBorder" />
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
+    </div>
+
+    <treeNode-dialog :visible.sync="dialogVisible" title="添加选项" @commit="addNode" />
+    <icons-dialog :visible.sync="iconsVisible" :current="activeData[currentIconModel]" @select="setIcon" />
+  </div>
+</template>
+
+<script>
+import { isArray } from 'util'
+import draggable from 'vuedraggable'
+import TreeNodeDialog from './TreeNodeDialog'
+import { isNumberStr } from '@/utils/index'
+import IconsDialog from './IconsDialog'
+import {
+  inputComponents,
+  selectComponents,
+  layoutComponents
+} from '@/utils/generator/config'
+
+const dateTimeFormat = {
+  date: 'yyyy-MM-dd',
+  week: 'yyyy 第 WW 周',
+  month: 'yyyy-MM',
+  year: 'yyyy',
+  datetime: 'yyyy-MM-dd HH:mm:ss',
+  daterange: 'yyyy-MM-dd',
+  monthrange: 'yyyy-MM',
+  datetimerange: 'yyyy-MM-dd HH:mm:ss'
+}
+
+export default {
+  components: {
+    draggable,
+    TreeNodeDialog,
+    IconsDialog
+  },
+  props: ['showField', 'activeData', 'formConf'],
+  data() {
+    return {
+      currentTab: 'field',
+      currentNode: null,
+      dialogVisible: false,
+      iconsVisible: false,
+      currentIconModel: null,
+      dateTypeOptions: [
+        {
+          label: '日(date)',
+          value: 'date'
+        },
+        {
+          label: '周(week)',
+          value: 'week'
+        },
+        {
+          label: '月(month)',
+          value: 'month'
+        },
+        {
+          label: '年(year)',
+          value: 'year'
+        },
+        {
+          label: '日期时间(datetime)',
+          value: 'datetime'
+        }
+      ],
+      dateRangeTypeOptions: [
+        {
+          label: '日期范围(daterange)',
+          value: 'daterange'
+        },
+        {
+          label: '月范围(monthrange)',
+          value: 'monthrange'
+        },
+        {
+          label: '日期时间范围(datetimerange)',
+          value: 'datetimerange'
+        }
+      ],
+      colorFormatOptions: [
+        {
+          label: 'hex',
+          value: 'hex'
+        },
+        {
+          label: 'rgb',
+          value: 'rgb'
+        },
+        {
+          label: 'rgba',
+          value: 'rgba'
+        },
+        {
+          label: 'hsv',
+          value: 'hsv'
+        },
+        {
+          label: 'hsl',
+          value: 'hsl'
+        }
+      ],
+      justifyOptions: [
+        {
+          label: 'start',
+          value: 'start'
+        },
+        {
+          label: 'end',
+          value: 'end'
+        },
+        {
+          label: 'center',
+          value: 'center'
+        },
+        {
+          label: 'space-around',
+          value: 'space-around'
+        },
+        {
+          label: 'space-between',
+          value: 'space-between'
+        }
+      ],
+      layoutTreeProps: {
+        label(data, node) {
+          return data.componentName || `${data.label}: ${data.vModel}`
+        }
+      }
+    }
+  },
+  computed: {
+    documentLink() {
+      return (
+        this.activeData.document
+        || 'https://element.eleme.cn/#/zh-CN/component/installation'
+      )
+    },
+    dateOptions() {
+      if (
+        this.activeData.type !== undefined
+        && this.activeData.tag === 'el-date-picker'
+      ) {
+        if (this.activeData['start-placeholder'] === undefined) {
+          return this.dateTypeOptions
+        }
+        return this.dateRangeTypeOptions
+      }
+      return []
+    },
+    tagList() {
+      return [
+        {
+          label: '输入型组件',
+          options: inputComponents
+        },
+        {
+          label: '选择型组件',
+          options: selectComponents
+        }
+      ]
+    }
+  },
+  methods: {
+    addReg() {
+      this.activeData.regList.push({
+        pattern: '',
+        message: ''
+      })
+    },
+    addSelectItem() {
+      this.activeData.options.push({
+        label: '',
+        value: ''
+      })
+    },
+    addTreeItem() {
+      ++this.idGlobal
+      this.dialogVisible = true
+      this.currentNode = this.activeData.options
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <div class="custom-tree-node">
+          <span>{node.label}</span>
+          <span class="node-operation">
+            <i on-click={() => this.append(data)}
+              class="el-icon-plus"
+              title="添加"
+            ></i>
+            <i on-click={() => this.remove(node, data)}
+              class="el-icon-delete"
+              title="删除"
+            ></i>
+          </span>
+        </div>
+      )
+    },
+    append(data) {
+      if (!data.children) {
+        this.$set(data, 'children', [])
+      }
+      this.dialogVisible = true
+      this.currentNode = data.children
+    },
+    remove(node, data) {
+      const { parent } = node
+      const children = parent.data.children || parent.data
+      const index = children.findIndex(d => d.id === data.id)
+      children.splice(index, 1)
+    },
+    addNode(data) {
+      this.currentNode.push(data)
+    },
+    setOptionValue(item, val) {
+      item.value = isNumberStr(val) ? +val : val
+    },
+    setDefaultValue(val) {
+      if (Array.isArray(val)) {
+        return val.join(',')
+      }
+      if (['string', 'number'].indexOf(val) > -1) {
+        return val
+      }
+      if (typeof val === 'boolean') {
+        return `${val}`
+      }
+      return val
+    },
+    onDefaultValueInput(str) {
+      if (isArray(this.activeData.defaultValue)) {
+        // 数组
+        this.$set(
+          this.activeData,
+          'defaultValue',
+          str.split(',').map(val => (isNumberStr(val) ? +val : val))
+        )
+      } else if (['true', 'false'].indexOf(str) > -1) {
+        // 布尔
+        this.$set(this.activeData, 'defaultValue', JSON.parse(str))
+      } else {
+        // 字符串和数字
+        this.$set(
+          this.activeData,
+          'defaultValue',
+          isNumberStr(str) ? +str : str
+        )
+      }
+    },
+    onSwitchValueInput(val, name) {
+      if (['true', 'false'].indexOf(val) > -1) {
+        this.$set(this.activeData, name, JSON.parse(val))
+      } else {
+        this.$set(this.activeData, name, isNumberStr(val) ? +val : val)
+      }
+    },
+    setTimeValue(val, type) {
+      const valueFormat = type === 'week' ? dateTimeFormat.date : val
+      this.$set(this.activeData, 'defaultValue', null)
+      this.$set(this.activeData, 'value-format', valueFormat)
+      this.$set(this.activeData, 'format', val)
+    },
+    spanChange(val) {
+      this.formConf.span = val
+    },
+    multipleChange(val) {
+      this.$set(this.activeData, 'defaultValue', val ? [] : '')
+    },
+    dateTypeChange(val) {
+      this.setTimeValue(dateTimeFormat[val], val)
+    },
+    rangeChange(val) {
+      this.$set(
+        this.activeData,
+        'defaultValue',
+        val ? [this.activeData.min, this.activeData.max] : this.activeData.min
+      )
+    },
+    rateTextChange(val) {
+      if (val) this.activeData['show-score'] = false
+    },
+    rateScoreChange(val) {
+      if (val) this.activeData['show-text'] = false
+    },
+    colorFormatChange(val) {
+      this.activeData.defaultValue = null
+      this.activeData['show-alpha'] = val.indexOf('a') > -1
+      this.activeData.renderKey = +new Date() // 更新renderKey,重新渲染该组件
+    },
+    openIconsDialog(model) {
+      this.iconsVisible = true
+      this.currentIconModel = model
+    },
+    setIcon(val) {
+      this.activeData[this.currentIconModel] = val
+    },
+    tagChange(tagIcon) {
+      let target = inputComponents.find(item => item.tagIcon === tagIcon)
+      if (!target) target = selectComponents.find(item => item.tagIcon === tagIcon)
+      this.$emit('tag-change', target)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right-board {
+  width: 350px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding-top: 3px;
+  .field-box {
+    position: relative;
+    height: calc(100vh - 42px);
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+  .el-scrollbar {
+    height: 100%;
+  }
+}
+.select-item {
+  display: flex;
+  border: 1px dashed #fff;
+  box-sizing: border-box;
+  & .close-btn {
+    cursor: pointer;
+    color: #f56c6c;
+  }
+  & .el-input + .el-input {
+    margin-left: 4px;
+  }
+}
+.select-item + .select-item {
+  margin-top: 4px;
+}
+.select-item.sortable-chosen {
+  border: 1px dashed #409eff;
+}
+.select-line-icon {
+  line-height: 32px;
+  font-size: 22px;
+  padding: 0 4px;
+  color: #777;
+}
+.option-drag {
+  cursor: move;
+}
+.time-range {
+  .el-date-editor {
+    width: 227px;
+  }
+  ::v-deep .el-icon-time {
+    display: none;
+  }
+}
+.document-link {
+  position: absolute;
+  display: block;
+  width: 26px;
+  height: 26px;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  background: #409eff;
+  z-index: 1;
+  border-radius: 0 0 6px 0;
+  text-align: center;
+  line-height: 26px;
+  color: #fff;
+  font-size: 18px;
+}
+.node-label{
+  font-size: 14px;
+}
+.node-icon{
+  color: #bebfc3;
+}
+</style>

vue/src/views/tool/build/TreeNodeDialog.vue

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <el-dialog
+      v-bind="$attrs"
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      v-on="$listeners"
+      @open="onOpen"
+      @close="onClose"
+    >
+      <el-row :gutter="0">
+        <el-form
+          ref="elForm"
+          :model="formData"
+          :rules="rules"
+          size="small"
+          label-width="100px"
+        >
+          <el-col :span="24">
+            <el-form-item
+              label="选项名"
+              prop="label"
+            >
+              <el-input
+                v-model="formData.label"
+                placeholder="请输入选项名"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item
+              label="选项值"
+              prop="value"
+            >
+              <el-input
+                v-model="formData.value"
+                placeholder="请输入选项值"
+                clearable
+              >
+                <el-select
+                  slot="append"
+                  v-model="dataType"
+                  :style="{width: '100px'}"
+                >
+                  <el-option
+                    v-for="(item, index) in dataTypeOptions"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                    :disabled="item.disabled"
+                  />
+                </el-select>
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+      <div slot="footer">
+        <el-button
+          type="primary"
+          @click="handelConfirm"
+        >
+          确定
+        </el-button>
+        <el-button @click="close">
+          取消
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { isNumberStr } from '@/utils/index'
+
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      id: 100,
+      formData: {
+        label: undefined,
+        value: undefined
+      },
+      rules: {
+        label: [
+          {
+            required: true,
+            message: '请输入选项名',
+            trigger: 'blur'
+          }
+        ],
+        value: [
+          {
+            required: true,
+            message: '请输入选项值',
+            trigger: 'blur'
+          }
+        ]
+      },
+      dataType: 'string',
+      dataTypeOptions: [
+        {
+          label: '字符串',
+          value: 'string'
+        },
+        {
+          label: '数字',
+          value: 'number'
+        }
+      ]
+    }
+  },
+  computed: {},
+  watch: {
+    // eslint-disable-next-line func-names
+    'formData.value': function (val) {
+      this.dataType = isNumberStr(val) ? 'number' : 'string'
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData = {
+        label: undefined,
+        value: undefined
+      }
+    },
+    onClose() {},
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs.elForm.validate(valid => {
+        if (!valid) return
+        if (this.dataType === 'number') {
+          this.formData.value = parseFloat(this.formData.value)
+        }
+        this.formData.id = this.id++
+        this.$emit('commit', this.formData)
+        this.close()
+      })
+    }
+  }
+}
+</script>

vue/src/views/tool/build/index.vue

@@ -0,0 +1,783 @@
+<template>
+  <div class="container">
+    <div class="left-board">
+      <div class="logo-wrapper">
+        <div class="logo">
+          <img :src="logo" alt="logo"> Form Generator
+        </div>
+      </div>
+      <el-scrollbar class="left-scrollbar">
+        <div class="components-list">
+          <div class="components-title">
+            <svg-icon icon-class="component" />输入型组件
+          </div>
+          <draggable
+            class="components-draggable"
+            :list="inputComponents"
+            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
+            :clone="cloneComponent"
+            draggable=".components-item"
+            :sort="false"
+            @end="onEnd"
+          >
+            <div
+              v-for="(element, index) in inputComponents" :key="index" class="components-item"
+              @click="addComponent(element)"
+            >
+              <div class="components-body">
+                <svg-icon :icon-class="element.tagIcon" />
+                {{ element.label }}
+              </div>
+            </div>
+          </draggable>
+          <div class="components-title">
+            <svg-icon icon-class="component" />选择型组件
+          </div>
+          <draggable
+            class="components-draggable"
+            :list="selectComponents"
+            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
+            :clone="cloneComponent"
+            draggable=".components-item"
+            :sort="false"
+            @end="onEnd"
+          >
+            <div
+              v-for="(element, index) in selectComponents"
+              :key="index"
+              class="components-item"
+              @click="addComponent(element)"
+            >
+              <div class="components-body">
+                <svg-icon :icon-class="element.tagIcon" />
+                {{ element.label }}
+              </div>
+            </div>
+          </draggable>
+          <div class="components-title">
+            <svg-icon icon-class="component" /> 布局型组件
+          </div>
+          <draggable
+            class="components-draggable" :list="layoutComponents"
+            :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
+            draggable=".components-item" :sort="false" @end="onEnd"
+          >
+            <div
+              v-for="(element, index) in layoutComponents" :key="index" class="components-item"
+              @click="addComponent(element)"
+            >
+              <div class="components-body">
+                <svg-icon :icon-class="element.tagIcon" />
+                {{ element.label }}
+              </div>
+            </div>
+          </draggable>
+        </div>
+      </el-scrollbar>
+    </div>
+
+    <div class="center-board">
+      <div class="action-bar">
+        <el-button icon="el-icon-download" type="text" @click="download">
+          导出vue文件
+        </el-button>
+        <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">
+          复制代码
+        </el-button>
+        <el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
+          清空
+        </el-button>
+      </div>
+      <el-scrollbar class="center-scrollbar">
+        <el-row class="center-board-row" :gutter="formConf.gutter">
+          <el-form
+            :size="formConf.size"
+            :label-position="formConf.labelPosition"
+            :disabled="formConf.disabled"
+            :label-width="formConf.labelWidth + 'px'"
+          >
+            <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
+              <draggable-item
+                v-for="(element, index) in drawingList"
+                :key="element.renderKey"
+                :drawing-list="drawingList"
+                :element="element"
+                :index="index"
+                :active-id="activeId"
+                :form-conf="formConf"
+                @activeItem="activeFormItem"
+                @copyItem="drawingItemCopy"
+                @deleteItem="drawingItemDelete"
+              />
+            </draggable>
+            <div v-show="!drawingList.length" class="empty-info">
+              从左侧拖入或点选组件进行表单设计
+            </div>
+          </el-form>
+        </el-row>
+      </el-scrollbar>
+    </div>
+
+    <right-panel
+      :active-data="activeData"
+      :form-conf="formConf"
+      :show-field="!!drawingList.length"
+      @tag-change="tagChange"
+    />
+
+    <code-type-dialog
+      :visible.sync="dialogVisible"
+      title="选择生成类型"
+      :show-file-name="showFileName"
+      @confirm="generate"
+    />
+    <input id="copyNode" type="hidden">
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import beautifier from 'js-beautify'
+import ClipboardJS from 'clipboard'
+import render from '@/utils/generator/render'
+import RightPanel from './RightPanel'
+import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config'
+import { beautifierConf, titleCase } from '@/utils/index'
+import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html'
+import { makeUpJs } from '@/utils/generator/js'
+import { makeUpCss } from '@/utils/generator/css'
+import drawingDefalut from '@/utils/generator/drawingDefalut'
+import logo from '@/assets/logo/logo.png'
+import CodeTypeDialog from './CodeTypeDialog'
+import DraggableItem from './DraggableItem'
+
+let oldActiveId
+let tempActiveData
+
+export default {
+  components: {
+    draggable,
+    render,
+    RightPanel,
+    CodeTypeDialog,
+    DraggableItem
+  },
+  data() {
+    return {
+      logo,
+      idGlobal: 100,
+      formConf,
+      inputComponents,
+      selectComponents,
+      layoutComponents,
+      labelWidth: 100,
+      drawingList: drawingDefalut,
+      drawingData: {},
+      activeId: drawingDefalut[0].formId,
+      drawerVisible: false,
+      formData: {},
+      dialogVisible: false,
+      generateConf: null,
+      showFileName: false,
+      activeData: drawingDefalut[0]
+    }
+  },
+  created() {
+    // 防止 firefox 下 拖拽 会新打卡一个选项卡
+    document.body.ondrop = event => {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+  },
+  watch: {
+    // eslint-disable-next-line func-names
+    'activeData.label': function (val, oldVal) {
+      if (
+        this.activeData.placeholder === undefined
+        || !this.activeData.tag
+        || oldActiveId !== this.activeId
+      ) {
+        return
+      }
+      this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
+    },
+    activeId: {
+      handler(val) {
+        oldActiveId = val
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    const clipboard = new ClipboardJS('#copyNode', {
+      text: trigger => {
+        const codeStr = this.generateCode()
+        this.$notify({
+          title: '成功',
+          message: '代码已复制到剪切板，可粘贴。',
+          type: 'success'
+        })
+        return codeStr
+      }
+    })
+    clipboard.on('error', e => {
+      this.$message.error('代码复制失败')
+    })
+  },
+  methods: {
+    activeFormItem(element) {
+      this.activeData = element
+      this.activeId = element.formId
+    },
+    onEnd(obj, a) {
+      if (obj.from !== obj.to) {
+        this.activeData = tempActiveData
+        this.activeId = this.idGlobal
+      }
+    },
+    addComponent(item) {
+      const clone = this.cloneComponent(item)
+      this.drawingList.push(clone)
+      this.activeFormItem(clone)
+    },
+    cloneComponent(origin) {
+      const clone = JSON.parse(JSON.stringify(origin))
+      clone.formId = ++this.idGlobal
+      clone.span = formConf.span
+      clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件
+      if (!clone.layout) clone.layout = 'colFormItem'
+      if (clone.layout === 'colFormItem') {
+        clone.vModel = `field${this.idGlobal}`
+        clone.placeholder !== undefined && (clone.placeholder += clone.label)
+        tempActiveData = clone
+      } else if (clone.layout === 'rowFormItem') {
+        delete clone.label
+        clone.componentName = `row${this.idGlobal}`
+        clone.gutter = this.formConf.gutter
+        tempActiveData = clone
+      }
+      return tempActiveData
+    },
+    AssembleFormData() {
+      this.formData = {
+        fields: JSON.parse(JSON.stringify(this.drawingList)),
+        ...this.formConf
+      }
+    },
+    generate(data) {
+      const func = this[`exec${titleCase(this.operationType)}`]
+      this.generateConf = data
+      func && func(data)
+    },
+    execRun(data) {
+      this.AssembleFormData()
+      this.drawerVisible = true
+    },
+    execDownload(data) {
+      const codeStr = this.generateCode()
+      const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
+      this.$download.saveAs(blob, data.fileName)
+    },
+    execCopy(data) {
+      document.getElementById('copyNode').click()
+    },
+    empty() {
+      this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
+        () => {
+          this.drawingList = []
+        }
+      )
+    },
+    drawingItemCopy(item, parent) {
+      let clone = JSON.parse(JSON.stringify(item))
+      clone = this.createIdAndKey(clone)
+      parent.push(clone)
+      this.activeFormItem(clone)
+    },
+    createIdAndKey(item) {
+      item.formId = ++this.idGlobal
+      item.renderKey = +new Date()
+      if (item.layout === 'colFormItem') {
+        item.vModel = `field${this.idGlobal}`
+      } else if (item.layout === 'rowFormItem') {
+        item.componentName = `row${this.idGlobal}`
+      }
+      if (Array.isArray(item.children)) {
+        item.children = item.children.map(childItem => this.createIdAndKey(childItem))
+      }
+      return item
+    },
+    drawingItemDelete(index, parent) {
+      parent.splice(index, 1)
+      this.$nextTick(() => {
+        const len = this.drawingList.length
+        if (len) {
+          this.activeFormItem(this.drawingList[len - 1])
+        }
+      })
+    },
+    generateCode() {
+      const { type } = this.generateConf
+      this.AssembleFormData()
+      const script = vueScript(makeUpJs(this.formData, type))
+      const html = vueTemplate(makeUpHtml(this.formData, type))
+      const css = cssStyle(makeUpCss(this.formData))
+      return beautifier.html(html + script + css, beautifierConf.html)
+    },
+    download() {
+      this.dialogVisible = true
+      this.showFileName = true
+      this.operationType = 'download'
+    },
+    run() {
+      this.dialogVisible = true
+      this.showFileName = false
+      this.operationType = 'run'
+    },
+    copy() {
+      this.dialogVisible = true
+      this.showFileName = false
+      this.operationType = 'copy'
+    },
+    tagChange(newTag) {
+      newTag = this.cloneComponent(newTag)
+      newTag.vModel = this.activeData.vModel
+      newTag.formId = this.activeId
+      newTag.span = this.activeData.span
+      delete this.activeData.tag
+      delete this.activeData.tagIcon
+      delete this.activeData.document
+      Object.keys(newTag).forEach(key => {
+        if (this.activeData[key] !== undefined
+          && typeof this.activeData[key] === typeof newTag[key]) {
+          newTag[key] = this.activeData[key]
+        }
+      })
+      this.activeData = newTag
+      this.updateDrawingList(newTag, this.drawingList)
+    },
+    updateDrawingList(newTag, list) {
+      const index = list.findIndex(item => item.formId === this.activeId)
+      if (index > -1) {
+        list.splice(index, 1, newTag)
+      } else {
+        list.forEach(item => {
+          if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+body, html{
+  margin: 0;
+  padding: 0;
+  background: #fff;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+}
+
+input, textarea{
+  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+}
+
+.editor-tabs{
+  background: #121315;
+  .el-tabs__header{
+    margin: 0;
+    border-bottom-color: #121315;
+    .el-tabs__nav{
+      border-color: #121315;
+    }
+  }
+  .el-tabs__item{
+    height: 32px;
+    line-height: 32px;
+    color: #888a8e;
+    border-left: 1px solid #121315 !important;
+    background: #363636;
+    margin-right: 5px;
+    user-select: none;
+  }
+  .el-tabs__item.is-active{
+    background: #1e1e1e;
+    border-bottom-color: #1e1e1e!important;
+    color: #fff;
+  }
+  .el-icon-edit{
+    color: #f1fa8c;
+  }
+  .el-icon-document{
+    color: #a95812;
+  }
+}
+
+// home
+.right-scrollbar {
+  .el-scrollbar__view {
+    padding: 12px 18px 15px 15px;
+  }
+}
+.left-scrollbar .el-scrollbar__wrap {
+  box-sizing: border-box;
+  overflow-x: hidden !important;
+  margin-bottom: 0 !important;
+}
+.center-tabs{
+  .el-tabs__header{
+    margin-bottom: 0!important;
+  }
+  .el-tabs__item{
+    width: 50%;
+    text-align: center;
+  }
+  .el-tabs__nav{
+    width: 100%;
+  }
+}
+.reg-item{
+  padding: 12px 6px;
+  background: #f8f8f8;
+  position: relative;
+  border-radius: 4px;
+  .close-btn{
+    position: absolute;
+    right: -6px;
+    top: -6px;
+    display: block;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
+    color: #fff;
+    text-align: center;
+    z-index: 1;
+    cursor: pointer;
+    font-size: 12px;
+    &:hover{
+      background: rgba(210, 23, 23, 0.5)
+    }
+  }
+  & + .reg-item{
+    margin-top: 18px;
+  }
+}
+.action-bar{
+  & .el-button+.el-button {
+    margin-left: 15px;
+  }
+  & i {
+    font-size: 20px;
+    vertical-align: middle;
+    position: relative;
+    top: -1px;
+  }
+}
+
+.custom-tree-node{
+  width: 100%;
+  font-size: 14px;
+  .node-operation{
+    float: right;
+  }
+  i[class*="el-icon"] + i[class*="el-icon"]{
+    margin-left: 6px;
+  }
+  .el-icon-plus{
+    color: #409EFF;
+  }
+  .el-icon-delete{
+    color: #157a0c;
+  }
+}
+
+.left-scrollbar .el-scrollbar__view{
+  overflow-x: hidden;
+}
+
+.el-rate{
+  display: inline-block;
+  vertical-align: text-top;
+}
+.el-upload__tip{
+  line-height: 1.2;
+}
+
+$selectedColor: #f6f7ff;
+$lighterBlue: #409EFF;
+
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.components-list {
+  padding: 8px;
+  box-sizing: border-box;
+  height: 100%;
+  .components-item {
+    display: inline-block;
+    width: 48%;
+    margin: 1%;
+    transition: transform 0ms !important;
+  }
+}
+.components-draggable{
+  padding-bottom: 20px;
+}
+.components-title{
+  font-size: 14px;
+  color: #222;
+  margin: 6px 2px;
+  .svg-icon{
+    color: #666;
+    font-size: 18px;
+  }
+}
+
+.components-body {
+  padding: 8px 10px;
+  background: $selectedColor;
+  font-size: 12px;
+  cursor: move;
+  border: 1px dashed $selectedColor;
+  border-radius: 3px;
+  .svg-icon{
+    color: #777;
+    font-size: 15px;
+  }
+  &:hover {
+    border: 1px dashed #787be8;
+    color: #787be8;
+    .svg-icon {
+      color: #787be8;
+    }
+  }
+}
+
+.left-board {
+  width: 260px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100vh;
+}
+.left-scrollbar{
+  height: calc(100vh - 42px);
+  overflow: hidden;
+}
+.center-scrollbar {
+  height: calc(100vh - 42px);
+  overflow: hidden;
+  border-left: 1px solid #f1e8e8;
+  border-right: 1px solid #f1e8e8;
+  box-sizing: border-box;
+}
+.center-board {
+  height: 100vh;
+  width: auto;
+  margin: 0 350px 0 260px;
+  box-sizing: border-box;
+}
+.empty-info{
+  position: absolute;
+  top: 46%;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 18px;
+  color: #ccb1ea;
+  letter-spacing: 4px;
+}
+.action-bar{
+  position: relative;
+  height: 42px;
+  text-align: right;
+  padding: 0 15px;
+  box-sizing: border-box;;
+  border: 1px solid #f1e8e8;
+  border-top: none;
+  border-left: none;
+  .delete-btn{
+    color: #F56C6C;
+  }
+}
+.logo-wrapper{
+  position: relative;
+  height: 42px;
+  background: #fff;
+  border-bottom: 1px solid #f1e8e8;
+  box-sizing: border-box;
+}
+.logo{
+  position: absolute;
+  left: 12px;
+  top: 6px;
+  line-height: 30px;
+  color: #00afff;
+  font-weight: 600;
+  font-size: 17px;
+  white-space: nowrap;
+  > img{
+    width: 30px;
+    height: 30px;
+    vertical-align: top;
+  }
+  .github{
+    display: inline-block;
+    vertical-align: sub;
+    margin-left: 15px;
+    > img{
+      height: 22px;
+    }
+  }
+}
+
+.center-board-row {
+  padding: 12px 12px 15px 12px;
+  box-sizing: border-box;
+  & > .el-form {
+    // 69 = 12+15+42
+    height: calc(100vh - 69px);
+  }
+}
+.drawing-board {
+  height: 100%;
+  position: relative;
+  .components-body {
+    padding: 0;
+    margin: 0;
+    font-size: 0;
+  }
+  .sortable-ghost {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    &::before {
+      content: " ";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      height: 3px;
+      background: rgb(89, 89, 223);
+      z-index: 2;
+    }
+  }
+  .components-item.sortable-ghost {
+    width: 100%;
+    height: 60px;
+    background-color: $selectedColor;
+  }
+  .active-from-item {
+    & > .el-form-item{
+      background: $selectedColor;
+      border-radius: 6px;
+    }
+    & > .drawing-item-copy, & > .drawing-item-delete{
+      display: initial;
+    }
+    & > .component-name{
+      color: $lighterBlue;
+    }
+  }
+  .el-form-item{
+    margin-bottom: 15px;
+  }
+}
+.drawing-item{
+  position: relative;
+  cursor: move;
+  &.unfocus-bordered:not(.activeFromItem) > div:first-child  {
+    border: 1px dashed #ccc;
+  }
+  .el-form-item{
+    padding: 12px 10px;
+  }
+}
+.drawing-row-item{
+  position: relative;
+  cursor: move;
+  box-sizing: border-box;
+  border: 1px dashed #ccc;
+  border-radius: 3px;
+  padding: 0 2px;
+  margin-bottom: 15px;
+  .drawing-row-item {
+    margin-bottom: 2px;
+  }
+  .el-col{
+    margin-top: 22px;
+  }
+  .el-form-item{
+    margin-bottom: 0;
+  }
+  .drag-wrapper{
+    min-height: 80px;
+  }
+  &.active-from-item{
+    border: 1px dashed $lighterBlue;
+  }
+  .component-name{
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 12px;
+    color: #bbb;
+    display: inline-block;
+    padding: 0 6px;
+  }
+}
+.drawing-item, .drawing-row-item{
+  &:hover {
+    & > .el-form-item{
+      background: $selectedColor;
+      border-radius: 6px;
+    }
+    & > .drawing-item-copy, & > .drawing-item-delete{
+      display: initial;
+    }
+  }
+  & > .drawing-item-copy, & > .drawing-item-delete{
+    display: none;
+    position: absolute;
+    top: -10px;
+    width: 22px;
+    height: 22px;
+    line-height: 22px;
+    text-align: center;
+    border-radius: 50%;
+    font-size: 12px;
+    border: 1px solid;
+    cursor: pointer;
+    z-index: 1;
+  }
+  & > .drawing-item-copy{
+    right: 56px;
+    border-color: $lighterBlue;
+    color: $lighterBlue;
+    background: #fff;
+    &:hover{
+      background: $lighterBlue;
+      color: #fff;
+    }
+  }
+  & > .drawing-item-delete{
+    right: 24px;
+    border-color: #F56C6C;
+    color: #F56C6C;
+    background: #fff;
+    &:hover{
+      background: #F56C6C;
+      color: #fff;
+    }
+  }
+}
+
+</style>

vue/src/views/tool/gen/basicInfoForm.vue

@@ -0,0 +1,60 @@
+<template>
+  <el-form ref="basicInfoForm" :model="info" :rules="rules" label-width="150px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="表名称" prop="tableName">
+          <el-input placeholder="请输入仓库名称" v-model="info.tableName" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="表描述" prop="tableComment">
+          <el-input placeholder="请输入" v-model="info.tableComment" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="实体类名称" prop="className">
+          <el-input placeholder="请输入" v-model="info.className" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="作者" prop="functionAuthor">
+          <el-input placeholder="请输入" v-model="info.functionAuthor" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="备注" prop="remark">
+          <el-input type="textarea" :rows="3" v-model="info.remark"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      rules: {
+        tableName: [
+          { required: true, message: "请输入表名称", trigger: "blur" }
+        ],
+        tableComment: [
+          { required: true, message: "请输入表描述", trigger: "blur" }
+        ],
+        className: [
+          { required: true, message: "请输入实体类名称", trigger: "blur" }
+        ],
+        functionAuthor: [
+          { required: true, message: "请输入作者", trigger: "blur" }
+        ]
+      }
+    };
+  }
+};
+</script>

vue/src/views/tool/gen/editTable.vue

@@ -0,0 +1,233 @@
+<template>
+  <el-card>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="基本信息" name="basic">
+        <basic-info-form ref="basicInfo" :info="info" />
+      </el-tab-pane>
+      <el-tab-pane label="字段信息" name="columnInfo">
+        <el-table ref="dragTable" :data="columns" row-key="columnId" :max-height="tableHeight">
+          <el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag" />
+          <el-table-column
+            label="字段列名"
+            prop="columnName"
+            min-width="10%"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column label="字段描述" min-width="10%">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.columnComment"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="物理类型"
+            prop="columnType"
+            min-width="10%"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column label="Java类型" min-width="11%">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.javaType">
+                <el-option label="Long" value="Long" />
+                <el-option label="String" value="String" />
+                <el-option label="Integer" value="Integer" />
+                <el-option label="Double" value="Double" />
+                <el-option label="BigDecimal" value="BigDecimal" />
+                <el-option label="Date" value="Date" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="java属性" min-width="10%">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.javaField"></el-input>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="插入" min-width="5%">
+            <template slot-scope="scope">
+              <el-checkbox true-label="1" v-model="scope.row.isInsert"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="编辑" min-width="5%">
+            <template slot-scope="scope">
+              <el-checkbox true-label="1" v-model="scope.row.isEdit"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="列表" min-width="5%">
+            <template slot-scope="scope">
+              <el-checkbox true-label="1" v-model="scope.row.isList"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="查询" min-width="5%">
+            <template slot-scope="scope">
+              <el-checkbox true-label="1" v-model="scope.row.isQuery"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="查询方式" min-width="10%">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.queryType">
+                <el-option label="=" value="EQ" />
+                <el-option label="!=" value="NE" />
+                <el-option label=">" value="GT" />
+                <el-option label=">=" value="GTE" />
+                <el-option label="<" value="LT" />
+                <el-option label="<=" value="LTE" />
+                <el-option label="LIKE" value="LIKE" />
+                <el-option label="BETWEEN" value="BETWEEN" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="必填" min-width="5%">
+            <template slot-scope="scope">
+              <el-checkbox true-label="1" v-model="scope.row.isRequired"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="显示类型" min-width="12%">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.htmlType">
+                <el-option label="文本框" value="input" />
+                <el-option label="文本域" value="textarea" />
+                <el-option label="下拉框" value="select" />
+                <el-option label="单选框" value="radio" />
+                <el-option label="复选框" value="checkbox" />
+                <el-option label="日期控件" value="datetime" />
+                <el-option label="图片上传" value="imageUpload" />
+                <el-option label="文件上传" value="fileUpload" />
+                <el-option label="富文本控件" value="editor" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="字典类型" min-width="12%">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
+                <el-option
+                  v-for="dict in dictOptions"
+                  :key="dict.dictType"
+                  :label="dict.dictName"
+                  :value="dict.dictType">
+                  <span style="float: left">{{ dict.dictName }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
+              </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="生成信息" name="genInfo">
+        <gen-info-form ref="genInfo" :info="info" :tables="tables" :menus="menus"/>
+      </el-tab-pane>
+    </el-tabs>
+    <el-form label-width="100px">
+      <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
+        <el-button type="primary" @click="submitForm()">提交</el-button>
+        <el-button @click="close()">返回</el-button>
+      </el-form-item>
+    </el-form>
+  </el-card>
+</template>
+
+<script>
+import { getGenTable, updateGenTable } from "@/api/tool/gen";
+import { optionselect as getDictOptionselect } from "@/api/system/dict/type";
+import { listMenu as getMenuTreeselect } from "@/api/system/menu";
+import basicInfoForm from "./basicInfoForm";
+import genInfoForm from "./genInfoForm";
+import Sortable from 'sortablejs'
+
+export default {
+  name: "GenEdit",
+  components: {
+    basicInfoForm,
+    genInfoForm
+  },
+  data() {
+    return {
+      // 选中选项卡的 name
+      activeName: "columnInfo",
+      // 表格的高度
+      tableHeight: document.documentElement.scrollHeight - 245 + "px",
+      // 表信息
+      tables: [],
+      // 表列信息
+      columns: [],
+      // 字典信息
+      dictOptions: [],
+      // 菜单信息
+      menus: [],
+      // 表详细信息
+      info: {}
+    };
+  },
+  created() {
+    const tableId = this.$route.query && this.$route.query.tableId;
+    if (tableId) {
+      // 获取表详细信息
+      getGenTable(tableId).then(res => {
+        this.columns = res.data.rows;
+        this.info = res.data.info;
+        this.tables = res.data.tables;
+      });
+      /** 查询字典下拉列表 */
+      getDictOptionselect().then(response => {
+        this.dictOptions = response.data;
+      });
+      /** 查询菜单下拉列表 */
+      getMenuTreeselect().then(response => {
+        this.menus = this.handleTree(response.data, "menuId");
+      });
+    }
+  },
+  methods: {
+    /** 提交按钮 */
+    submitForm() {
+      const basicForm = this.$refs.basicInfo.$refs.basicInfoForm;
+      const genForm = this.$refs.genInfo.$refs.genInfoForm;
+      Promise.all([basicForm, genForm].map(this.getFormPromise)).then(res => {
+        const validateResult = res.every(item => !!item);
+        if (validateResult) {
+          const genTable = Object.assign({}, basicForm.model, genForm.model);
+          genTable.columns = this.columns;
+          genTable.params = {
+            treeCode: genTable.treeCode,
+            treeName: genTable.treeName,
+            treeParentCode: genTable.treeParentCode,
+            parentMenuId: genTable.parentMenuId
+          };
+          updateGenTable(genTable).then(res => {
+            this.$modal.msgSuccess(res.msg);
+            if (res.code === 200) {
+              this.close();
+            }
+          });
+        } else {
+          this.$modal.msgError("表单校验未通过，请重新检查提交内容");
+        }
+      });
+    },
+    getFormPromise(form) {
+      return new Promise(resolve => {
+        form.validate(res => {
+          resolve(res);
+        });
+      });
+    },
+    /** 关闭按钮 */
+    close() {
+      const obj = { path: "/tool/gen", query: { t: Date.now(), pageNum: this.$route.query.pageNum } };
+      this.$tab.closeOpenPage(obj);
+    }
+  },
+  mounted() {
+    const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
+    const sortable = Sortable.create(el, {
+      handle: ".allowDrag",
+      onEnd: evt => {
+        const targetRow = this.columns.splice(evt.oldIndex, 1)[0];
+        this.columns.splice(evt.newIndex, 0, targetRow);
+        for (let index in this.columns) {
+          this.columns[index].sort = parseInt(index) + 1;
+        }
+      }
+    });
+  }
+};
+</script>

vue/src/views/tool/gen/genInfoForm.vue

@@ -0,0 +1,299 @@
+<template>
+  <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item prop="tplCategory">
+          <span slot="label">生成模板</span>
+          <el-select v-model="info.tplCategory" @change="tplSelectChange">
+            <el-option label="单表（增删改查）" value="crud" />
+            <el-option label="树表（增删改查）" value="tree" />
+            <el-option label="主子表（增删改查）" value="sub" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item prop="packageName">
+          <span slot="label">
+            生成包路径
+            <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-input v-model="info.packageName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="moduleName">
+          <span slot="label">
+            生成模块名
+            <el-tooltip content="可理解为子系统名，例如 system" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-input v-model="info.moduleName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="businessName">
+          <span slot="label">
+            生成业务名
+            <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-input v-model="info.businessName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="functionName">
+          <span slot="label">
+            生成功能名
+            <el-tooltip content="用作类描述，例如 用户" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-input v-model="info.functionName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item>
+          <span slot="label">
+            上级菜单
+            <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <treeselect
+            :append-to-body="true"
+            v-model="info.parentMenuId"
+            :options="menus"
+            :normalizer="normalizer"
+            :show-count="true"
+            placeholder="请选择系统菜单"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="genType">
+          <span slot="label">
+            生成代码方式
+            <el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-radio v-model="info.genType" label="0">zip压缩包</el-radio>
+          <el-radio v-model="info.genType" label="1">自定义路径</el-radio>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="24" v-if="info.genType == '1'">
+        <el-form-item prop="genPath">
+          <span slot="label">
+            自定义路径
+            <el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-input v-model="info.genPath">
+            <el-dropdown slot="append">
+              <el-button type="primary">
+                最近路径快速选择
+                <i class="el-icon-arrow-down el-icon--right"></i>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click.native="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row v-show="info.tplCategory == 'tree'">
+      <h4 class="form-header">其他信息</h4>
+      <el-col :span="12">
+        <el-form-item>
+          <span slot="label">
+            树编码字段
+            <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-select v-model="info.treeCode" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in info.columns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item>
+          <span slot="label">
+            树父编码字段
+            <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-select v-model="info.treeParentCode" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in info.columns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item>
+          <span slot="label">
+            树名称字段
+            <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-select v-model="info.treeName" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in info.columns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row v-show="info.tplCategory == 'sub'">
+      <h4 class="form-header">关联信息</h4>
+      <el-col :span="12">
+        <el-form-item>
+          <span slot="label">
+            关联子表的表名
+            <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
+            <el-option
+              v-for="(table, index) in tables"
+              :key="index"
+              :label="table.tableName + '：' + table.tableComment"
+              :value="table.tableName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item>
+          <span slot="label">
+            子表关联的外键名
+            <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-select v-model="info.subTableFkName" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in subColumns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  components: { Treeselect },
+  props: {
+    info: {
+      type: Object,
+      default: null
+    },
+    tables: {
+      type: Array,
+      default: null
+    },
+    menus: {
+      type: Array,
+      default: []
+    },
+  },
+  data() {
+    return {
+      subColumns: [],
+      rules: {
+        tplCategory: [
+          { required: true, message: "请选择生成模板", trigger: "blur" }
+        ],
+        packageName: [
+          { required: true, message: "请输入生成包路径", trigger: "blur" }
+        ],
+        moduleName: [
+          { required: true, message: "请输入生成模块名", trigger: "blur" }
+        ],
+        businessName: [
+          { required: true, message: "请输入生成业务名", trigger: "blur" }
+        ],
+        functionName: [
+          { required: true, message: "请输入生成功能名", trigger: "blur" }
+        ],
+      }
+    };
+  },
+  created() {},
+  watch: {
+    'info.subTableName': function(val) {
+      this.setSubTableColumns(val);
+    }
+  },
+  methods: {
+    /** 转换菜单数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.menuId,
+        label: node.menuName,
+        children: node.children
+      };
+    },
+    /** 选择子表名触发 */
+    subSelectChange(value) {
+      this.info.subTableFkName = '';
+    },
+    /** 选择生成模板触发 */
+    tplSelectChange(value) {
+      if(value !== 'sub') {
+        this.info.subTableName = '';
+        this.info.subTableFkName = '';
+      }
+    },
+    /** 设置关联外键 */
+    setSubTableColumns(value) {
+      for (var item in this.tables) {
+        const name = this.tables[item].tableName;
+        if (value === name) {
+          this.subColumns = this.tables[item].columns;
+          break;
+        }
+      }
+    }
+  }
+};
+</script>

vue/src/views/tool/gen/importTable.vue

@@ -0,0 +1,122 @@
+<template>
+  <!-- 导入表 -->
+  <el-dialog title="导入表" :visible.sync="visible" width="800px" top="5vh" append-to-body>
+    <el-form :model="queryParams" ref="queryForm" :inline="true">
+      <el-form-item label="表名称" prop="tableName">
+        <el-input
+          v-model="queryParams.tableName"
+          placeholder="请输入表名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="表描述" prop="tableComment">
+        <el-input
+          v-model="queryParams.tableComment"
+          placeholder="请输入表描述"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-table @row-click="clickRow" ref="table" :data="dbTableList" @selection-change="handleSelectionChange" height="260px">
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column prop="tableName" label="表名称" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="tableComment" label="表描述" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="createTime" label="创建时间"></el-table-column>
+        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
+      </el-table>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-row>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleImportTable">确 定</el-button>
+      <el-button @click="visible = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { listDbTable, importTable } from "@/api/tool/gen";
+export default {
+  data() {
+    return {
+      // 遮罩层
+      visible: false,
+      // 选中数组值
+      tables: [],
+      // 总条数
+      total: 0,
+      // 表数据
+      dbTableList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        tableName: undefined,
+        tableComment: undefined
+      }
+    };
+  },
+  methods: {
+    // 显示弹框
+    show() {
+      this.getList();
+      this.visible = true;
+    },
+    clickRow(row) {
+      this.$refs.table.toggleRowSelection(row);
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.tables = selection.map(item => item.tableName);
+    },
+    // 查询表数据
+    getList() {
+      listDbTable(this.queryParams).then(res => {
+        if (res.code === 200) {
+          this.dbTableList = res.rows;
+          this.total = res.total;
+        }
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 导入按钮操作 */
+    handleImportTable() {
+      const tableNames = this.tables.join(",");
+      if (tableNames == "") {
+        this.$modal.msgError("请选择要导入的表");
+        return;
+      }
+      importTable({ tables: tableNames }).then(res => {
+        this.$modal.msgSuccess(res.msg);
+        if (res.code === 200) {
+          this.visible = false;
+          this.$emit("ok");
+        }
+      });
+    }
+  }
+};
+</script>

vue/src/views/tool/gen/index.vue

@@ -0,0 +1,333 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="表名称" prop="tableName">
+        <el-input
+          v-model="queryParams.tableName"
+          placeholder="请输入表名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="表描述" prop="tableComment">
+        <el-input
+          v-model="queryParams.tableComment"
+          placeholder="请输入表描述"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="dateRange"
+          size="small"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleGenTable"
+          v-hasPermi="['tool:gen:code']"
+        >生成</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-upload"
+          size="mini"
+          @click="openImportTable"
+          v-hasPermi="['tool:gen:import']"
+        >导入</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleEditTable"
+          v-hasPermi="['tool:gen:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['tool:gen:remove']"
+        >删除</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" align="center" width="55"></el-table-column>
+      <el-table-column label="序号" type="index" width="50" align="center">
+        <template slot-scope="scope">
+          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="表名称"
+        align="center"
+        prop="tableName"
+        :show-overflow-tooltip="true"
+        width="120"
+      />
+      <el-table-column
+        label="表描述"
+        align="center"
+        prop="tableComment"
+        :show-overflow-tooltip="true"
+        width="120"
+      />
+      <el-table-column
+        label="实体"
+        align="center"
+        prop="className"
+        :show-overflow-tooltip="true"
+        width="120"
+      />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
+      <el-table-column label="更新时间" align="center" prop="updateTime" width="160" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            icon="el-icon-view"
+            @click="handlePreview(scope.row)"
+            v-hasPermi="['tool:gen:preview']"
+          >预览</el-button>
+          <el-button
+            type="text"
+            size="small"
+            icon="el-icon-edit"
+            @click="handleEditTable(scope.row)"
+            v-hasPermi="['tool:gen:edit']"
+          >编辑</el-button>
+          <el-button
+            type="text"
+            size="small"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['tool:gen:remove']"
+          >删除</el-button>
+          <el-button
+            type="text"
+            size="small"
+            icon="el-icon-refresh"
+            @click="handleSynchDb(scope.row)"
+            v-hasPermi="['tool:gen:edit']"
+          >同步</el-button>
+          <el-button
+            type="text"
+            size="small"
+            icon="el-icon-download"
+            @click="handleGenTable(scope.row)"
+            v-hasPermi="['tool:gen:code']"
+          >生成代码</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <!-- 预览界面 -->
+    <el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body class="scrollbar">
+      <el-tabs v-model="preview.activeName">
+        <el-tab-pane
+          v-for="(value, key) in preview.data"
+          :label="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
+          :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
+          :key="key"
+        >
+        <pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+    <import-table ref="import" @ok="handleQuery" />
+  </div>
+</template>
+
+<script>
+import { listTable, previewTable, delTable, genCode, synchDb } from "@/api/tool/gen";
+import importTable from "./importTable";
+import hljs from "highlight.js/lib/highlight";
+import "highlight.js/styles/github-gist.css";
+hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
+hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
+hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"));
+hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"));
+hljs.registerLanguage("javascript", require("highlight.js/lib/languages/javascript"));
+hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));
+
+export default {
+  name: "Gen",
+  components: { importTable },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 唯一标识符
+      uniqueId: "",
+      // 选中数组
+      ids: [],
+      // 选中表数组
+      tableNames: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 表数据
+      tableList: [],
+      // 日期范围
+      dateRange: "",
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        tableName: undefined,
+        tableComment: undefined
+      },
+      // 预览参数
+      preview: {
+        open: false,
+        title: "代码预览",
+        data: {},
+        activeName: "domain.java"
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  activated() {
+    const time = this.$route.query.t;
+    if (time != null && time != this.uniqueId) {
+      this.uniqueId = time;
+      this.queryParams.pageNum = Number(this.$route.query.pageNum);
+      this.getList();
+    }
+  },
+  methods: {
+    /** 查询表集合 */
+    getList() {
+      this.loading = true;
+      listTable(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.tableList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 生成代码操作 */
+    handleGenTable(row) {
+      const tableNames = row.tableName || this.tableNames;
+      if (tableNames == "") {
+        this.$modal.msgError("请选择要生成的数据");
+        return;
+      }
+      if(row.genType === "1") {
+        genCode(row.tableName).then(response => {
+          this.$modal.msgSuccess("成功生成到自定义路径：" + row.genPath);
+        });
+      } else {
+        this.$download.zip("/tool/gen/batchGenCode?tables=" + tableNames, "wumei");
+      }
+    },
+    /** 同步数据库操作 */
+    handleSynchDb(row) {
+      const tableName = row.tableName;
+      this.$modal.confirm('确认要强制同步"' + tableName + '"表结构吗？').then(function() {
+        return synchDb(tableName);
+      }).then(() => {
+        this.$modal.msgSuccess("同步成功");
+      }).catch(() => {});
+    },
+    /** 打开导入表弹窗 */
+    openImportTable() {
+      this.$refs.import.show();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 预览按钮 */
+    handlePreview(row) {
+      previewTable(row.tableId).then(response => {
+        this.preview.data = response.data;
+        this.preview.open = true;
+        this.preview.activeName = "domain.java";
+      });
+    },
+    /** 高亮显示 */
+    highlightedCode(code, key) {
+      const vmName = key.substring(key.lastIndexOf("/") + 1, key.indexOf(".vm"));
+      var language = vmName.substring(vmName.indexOf(".") + 1, vmName.length);
+      const result = hljs.highlight(language, code || "", true);
+      return result.value || '&nbsp;';
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.tableId);
+      this.tableNames = selection.map(item => item.tableName);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    /** 修改按钮操作 */
+    handleEditTable(row) {
+      const tableId = row.tableId || this.ids[0];
+      this.$router.push({ path: '/tool/gen-edit/index', query: { tableId: tableId, pageNum: this.queryParams.pageNum } });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const tableIds = row.tableId || this.ids;
+      this.$modal.confirm('是否确认删除表编号为"' + tableIds + '"的数据项？').then(function() {
+        return delTable(tableIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    }
+  }
+};
+</script>

vue/src/views/tool/swagger/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <i-frame :src="url" />
+</template>
+<script>
+import iFrame from "@/components/iFrame/index";
+export default {
+  name: "Swagger",
+  components: { iFrame },
+  data() {
+    return {
+      url: process.env.VUE_APP_BASE_API + "/swagger-ui/index.html"
+    };
+  },
+};
+</script>