haiwei-module-admin 1.0.0

package/src/views/home/components/bottom/index.vue

@@ -0,0 +1,217 @@
+<template>
+  <nm-box header title="柱状图" icon="chart-bar">
+    <template v-slot:toolbar-before>
+      <el-date-picker
+        size="mini"
+        style="width: 221px !important;"
+        v-model="date"
+        type="daterange"
+        align="right"
+        valueFormat="yyyy-MM-dd"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      ></el-date-picker>
+    </template>
+    <template v-slot:toolbar>
+      <nm-button icon="refresh" />
+    </template>
+    <div ref="chart" style="width:100%;height:100%"></div>
+  </nm-box>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      chart: null,
+      date: [],
+      xData: ['芝罘区', '福山区', '莱山区', '牟平区', '海阳市', '莱阳市', '蓬莱市', '栖霞市', '龙口市', '长岛县', '招远市', '莱州市', '开发区', '高新区', '昆嵛山', '龙海', '机场', '核电'],
+      y1Data: [10758, 3975, 2980, 1831, 2122, 3018, 3525, 1729, 2764, 380, 3988, 2333, 3596, 453, 365, 9, 67, 48],
+      y2Data: [28, 4.4, 5.9, 0.9, 0.7, 1.1, 2.1, 0.4, 1.9, 3.8, 1.6, 0.7, 5.7, 6.1]
+    }
+  },
+  computed: {
+    options() {
+      return {
+        grid: {
+          left: '5%',
+          right: '5%',
+          top: '20%',
+          bottom: '10%'
+        },
+        title: {
+          show: false
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: ['监控数量', '监控密度'],
+          right: '3%',
+          top: '5%',
+          itemWidth: 11,
+          itemHeight: 11,
+          textStyle: {
+            fontSize: 13
+          }
+        },
+        toolbox: {
+          show: false
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: true,
+            show: true,
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              fontSize: 15,
+              margin: 8,
+              interval: 0,
+              formatter: function(val) {
+                return val.split('').join('\n')
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                type: 'solid',
+                color: '#4e608b',
+                width: '1'
+              }
+            },
+            data: this.xData
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            scale: true,
+            name: '',
+            axisLine: {
+              show: false
+            },
+            splitNumber: 4,
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              lineStyle: {
+                // 使用深浅的间隔色
+                color: '#4e608b'
+              }
+            },
+            axisLabel: {
+              fontSize: 13,
+              margin: 12
+            },
+            max: 12000,
+            min: 0,
+            boundaryGap: [0.2, 0.2]
+          },
+          {
+            type: 'value',
+            scale: true,
+            axisLine: {
+              show: false
+            },
+            splitNumber: 3,
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              fontSize: 13,
+              margin: 12
+            },
+            splitLine: {
+              lineStyle: {
+                // 使用深浅的间隔色
+                color: '#4e608b'
+              }
+            },
+            name: '',
+            max: 30,
+            min: 0,
+            boundaryGap: [0.2, 0.2]
+          }
+        ],
+        series: [
+          {
+            name: '监控数量',
+            type: 'bar',
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  color: '#1dacfe'
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: '#4889fb' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#15b3ff' // 100% 处的颜色
+                    }
+                  ],
+                  false
+                )
+              }
+            },
+            barWidth: '40%',
+            yAxisIndex: 0,
+            data: this.y1Data
+          },
+          {
+            name: '监控密度',
+            yAxisIndex: 1,
+            color: '#ffd300',
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  color: '#ffd300'
+                }
+              }
+            },
+            lineStyle: {
+              color: '#ffd300'
+            },
+            type: 'line',
+            data: this.y2Data
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.chart)
+      this.chart = chart
+      this.chart.setOption(this.options)
+      window.addEventListener('resize', function() {
+        chart.resize()
+      })
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>

package/src/views/home/components/top-left/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <nm-box v-bind="box">
+    <template v-slot:toolbar>
+      <nm-button icon="refresh" @click="refresh" />
+    </template>
+    <ve-line :data="chartData"></ve-line>
+  </nm-box>
+</template>
+<script>
+// 接口
+const api = $api.admin.auditInfo
+
+export default {
+  data() {
+    return {
+      box: {
+        title: '最近一周审计日志数量',
+        icon: 'chart-line',
+        header: true,
+        border: true
+      },
+      chartData: {
+        columns: ['日期', '数量'],
+        rows: []
+      }
+    }
+  },
+  methods: {
+    async refresh() {
+      this.chartData.rows = []
+      const data = await api.queryLatestWeekPv()
+      let rows = []
+      data.map(m => {
+        rows.push({ 日期: m.key, 数量: m.value })
+      })
+      this.chartData.rows = rows
+    }
+  },
+  created() {
+    this.refresh()
+  }
+}
+</script>

package/src/views/home/components/top-right/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <nm-box header title="折线图" icon="chart-line">
+    <template v-slot:toolbar-before>
+      <el-date-picker
+        size="mini"
+        style="width: 221px !important;"
+        v-model="date"
+        type="daterange"
+        align="right"
+        valueFormat="yyyy-MM-dd"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      ></el-date-picker>
+    </template>
+    <template v-slot:toolbar>
+      <nm-button icon="refresh" />
+    </template>
+    <div ref="chart" style="width:100%;height:100%"></div>
+  </nm-box>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      chart: null,
+      date: []
+    }
+  },
+  computed: {
+    options() {
+      return {
+        backgroundColor: '#FFF',
+        grid: {
+          top: '9%',
+          bottom: '19%',
+          left: '6%',
+          right: '4%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          label: {
+            show: true
+          }
+        },
+        xAxis: {
+          boundaryGap: true, // 默认，坐标轴留白策略
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false,
+            alignWithLabel: true
+          },
+          data: ['武汉', '襄阳', '黄冈', '荆门', '十堰', '随州', '鄂州', '恩施', '宜昌', '孝感', '咸宁', '仙桃', '潜江', '天门', '黄石', '荆州', '神农架']
+        },
+        yAxis: {
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: 'rgba(33,148,246,0.2)'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: 'rgb(245,250,254)'
+            }
+          }
+        },
+        series: [
+          {
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 7,
+            lineStyle: {
+              color: 'rgb(33,148,246)',
+              shadowBlur: 12,
+              shadowColor: 'rgb(33,148,246,0.9)',
+              shadowOffsetX: 1,
+              shadowOffsetY: 1
+            },
+            itemStyle: {
+              color: 'rgb(33,148,246)',
+              borderWidth: 1,
+              borderColor: '#FFF'
+            },
+            label: {
+              show: false,
+              distance: 1,
+              emphasis: {
+                show: true,
+                offset: [25, -2],
+                color: '#FFF',
+                padding: [8, 20, 8, 6],
+                // width:60,
+                height: 36,
+                formatter: function(params) {
+                  var name = params.name
+                  var value = params.data
+                  var str = name + '\n数据量：' + value
+                  return str
+                },
+                rich: {
+                  bg: {
+                    width: 78,
+                    // height:42,
+                    color: '#FFF',
+                    padding: [20, 0, 20, 10]
+                  },
+                  br: {
+                    width: '100%',
+                    height: '100%'
+                  }
+                }
+              }
+            },
+            data: [2000, 1800, 2800, 900, 1600, 2000, 3000, 2030, 1356, 1900, 4000, 3000, 2000, 3000, 4200, 3200, 3800]
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.chart)
+      this.chart = chart
+      this.chart.setOption(this.options)
+      window.addEventListener('resize', function() {
+        chart.resize()
+      })
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>

package/src/views/home/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <nm-container scrollbar>
+    <nm-box-row height="400px">
+      <nm-box-col :span="12">
+        <top-left />
+      </nm-box-col>
+      <nm-box-col :span="12">
+        <top-right />
+      </nm-box-col>
+    </nm-box-row>
+    <nm-box-row height="500px">
+      <nm-box-col :span="24">
+        <bottom />
+      </nm-box-col>
+    </nm-box-row>
+  </nm-container>
+</template>
+<script>
+import page from './page'
+import TopLeft from './components/top-left'
+import TopRight from './components/top-right'
+import Bottom from './components/bottom'
+export default {
+  name: page.name,
+  components: { TopLeft, TopRight, Bottom }
+}
+</script>

package/src/views/home/page.js

@@ -0,0 +1,15 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '首页'
+  this.icon = 'home'
+  this.name = 'home'
+  this.path = '/admin/home'
+  this.icon = 'home'
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page

package/src/views/icon/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <nm-container>
+    <nm-box v-bind="box">
+      <template v-slot:toolbar>
+        <el-color-picker v-model="color" size="small" style="position: absolute;top:3px;left:-40px" />
+        <el-input class="nm-icon-picker-panel-filter" v-model="filter" placeholder="请输入英文或中文名称" clearable></el-input>
+      </template>
+      <div v-for="icon in filterList" :key="icon" class="nm-admin-icon-item">
+        <div class="icon">
+          <nm-icon :name="icon" :style="{ color }" />
+        </div>
+        <span class="text">{{ icon }}</span>
+      </div>
+    </nm-box>
+  </nm-container>
+</template>
+<script>
+import page from './page'
+
+export default {
+  name: page.name,
+  data() {
+    return {
+      list: [],
+      color: '#333',
+      filter: '',
+      box: {
+        header: true,
+        title: '图标',
+        icon: 'icon',
+        page: true,
+        fullscreen: true
+      }
+    }
+  },
+  computed: {
+    filterList() {
+      if (!this.filter) {
+        return this.list
+      }
+
+      let list = []
+      this.list.forEach(icon => {
+        if (icon.indexOf(this.filter) > -1 || icon.indexOf(this.filter) > -1) {
+          list.push(icon)
+        }
+      })
+      return list
+    }
+  },
+  created() {
+    var symbols = document.querySelectorAll('body>svg>symbol')
+    symbols.forEach(m => {
+      this.list.push(m.id.replace('icon-', ''))
+    })
+  },
+  destroyed() {
+    this.list = null
+  }
+}
+</script>
+<style lang="scss">
+.nm-admin-icon-item {
+  margin: 5px;
+  padding: 5px;
+  text-align: center;
+  width: 80px;
+  height: 80px;
+  border: 1px solid #ccc;
+  float: left;
+  .icon {
+    margin: 3px 0 10px 0;
+    font-size: 2.5em;
+    cursor: pointer;
+    transition: all 0.25s ease-in;
+
+    &:hover {
+      transform: scale(1.2);
+      color: #f39c12;
+    }
+  }
+
+  .text,
+  .code {
+    display: block;
+    font-size: 12px;
+  }
+  .text {
+    margin-bottom: 3px;
+  }
+}
+</style>

package/src/views/icon/page.js

@@ -0,0 +1,15 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '图标预览'
+  this.icon = 'icon'
+  this.name = 'admin_icon'
+  this.path = '/admin/icon'
+})()
+
+/** 路由信息 */
+export const route = {
+  page,
+  component: () => import(/* webpackChunkName: "admin.icon" */ './index')
+}
+
+export default page

package/src/views/log/login-log/cols.js

@@ -0,0 +1,43 @@
+export default [
+  {
+    name: 'id',
+    label: '编号',
+    show: false
+  },
+  {
+    name: 'platformName',
+    label: '登录平台'
+  },
+  {
+    name: 'loginModeName',
+    label: '登录方式'
+  },
+  {
+    name: 'userName',
+    label: '用户名'
+  },
+  {
+    name: 'email',
+    label: '邮箱'
+  },
+  {
+    name: 'phone',
+    label: '手机号'
+  },
+  {
+    name: 'loginTime',
+    label: '登录时间'
+  },
+  {
+    name: 'ip',
+    label: 'IP'
+  },
+  {
+    name: 'success',
+    label: '结果'
+  },
+  {
+    name: 'userAgent',
+    label: 'UA'
+  }
+]

package/src/views/log/login-log/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <nm-container>
+    <nm-list ref="list" v-bind="list">
+      <!--查询条件-->
+      <template v-slot:querybar>
+        <el-form-item label="账户编号：" prop="accountId">
+          <el-input v-model="list.model.accountId" clearable />
+        </el-form-item>
+        <el-form-item label="登录平台：" prop="platform">
+          <nm-platform-select v-model="list.model.platform" clearable />
+        </el-form-item>
+        <el-form-item label="登录方式：" prop="loginMode">
+          <nm-login-mode-select v-model="list.model.loginMode" clearable />
+        </el-form-item>
+      </template>
+
+      <template v-slot:header-toolbar>
+        <nm-date-range-picker size="mini" :start.sync="list.model.startDate" :end.sync="list.model.endDate" @change="refresh" />
+      </template>
+
+      <template v-slot:col-success="{ row }">
+        <el-tag v-if="row.success" type="success" effect="dark" size="mini">成功</el-tag>
+        <el-tooltip v-else effect="dark" :content="row.error" placement="top">
+          <el-tag type="danger" effect="dark" size="mini">失败</el-tag>
+        </el-tooltip>
+      </template>
+    </nm-list>
+  </nm-container>
+</template>
+<script>
+import page from './page'
+import cols from './cols'
+
+// 接口
+const api = $api.admin.log
+
+export default {
+  name: page.name,
+  data() {
+    return {
+      list: {
+        title: page.title,
+        action: api.queryLogin,
+        noOperation: true,
+        model: {
+          accountId: '',
+          platform: '',
+          loginMode: '',
+          startDate: null,
+          endDate: null
+        },
+        cols,
+        /**导出配置 */
+        exportOptions: {
+          /**启用导出按钮 */
+          enabled: true,
+          /**导出数据的方法 */
+          action: api.exportLogin,
+          /**启用高级配置 */
+          advanced: true,
+          /**导出按钮位置 */
+          btnLocation: 'querybar',
+          /**导出按钮权限编码 */
+          btnCode: page.buttons.export.code,
+          /**默认是否显示标题 */
+          showTitle: true,
+          /**默认是否显示版权信息 */
+          showCopyright: true,
+          /**默认是否显示列名 */
+          showColName: true,
+          /**默认是否显示导出日期 */
+          showExportDate: true,
+          /**默认是否显示导出人 */
+          showExportPeople: true
+        }
+      },
+      buttons: page.buttons
+    }
+  },
+  methods: {
+    refresh() {
+      this.$refs.list.refresh()
+    }
+  }
+}
+</script>