vue2-client 0.1.0 → 1.1.0

package/src/pages/login/Login.vue

@@ -0,0 +1,194 @@
+<template>
+  <common-layout>
+    <div class="top">
+      <div class="header">
+        <img alt="logo" class="logo" src="@/assets/img/logo.png" />
+        <span class="title">{{ systemName }}</span>
+      </div>
+      <div class="desc">为物联网设备的兼容、监控和统计提供支持</div>
+    </div>
+    <div class="login">
+      <a-form @submit="onSubmit" :form="form">
+        <a-tabs size="large" :tabBarStyle="{textAlign: 'center'}" style="padding: 0 2px;">
+          <a-tab-pane tab="账户密码登录" key="1">
+            <a-alert
+              type="error"
+              :closable="true"
+              v-show="error"
+              :message="error"
+              showIcon
+              style="margin-bottom: 24px;" />
+            <a-form-item>
+              <a-input
+                autocomplete="autocomplete"
+                size="large"
+                placeholder="admin"
+                v-decorator="['name', {rules: [{ required: true, message: '请输入账户名', whitespace: true}]}]"
+              >
+                <a-icon slot="prefix" type="user" />
+              </a-input>
+            </a-form-item>
+            <a-form-item>
+              <a-input
+                size="large"
+                placeholder="888888"
+                autocomplete="autocomplete"
+                type="password"
+                v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]"
+              >
+                <a-icon slot="prefix" type="lock" />
+              </a-input>
+            </a-form-item>
+          </a-tab-pane>
+        </a-tabs>
+        <div>
+          <a-checkbox :checked="true" >自动登录</a-checkbox>
+        </div>
+        <a-form-item>
+          <a-button :loading="logging" style="width: 100%;margin-top: 24px" size="large" htmlType="submit" type="primary">登录</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+  </common-layout>
+</template>
+
+<script>
+import CommonLayout from '@/layouts/CommonLayout'
+import { getRoutesConfig, login } from '@/services/user'
+import { setAuthorization } from '@/utils/request'
+import { loadRoutes, funcToRouter } from '@/utils/routerUtil'
+import { mapMutations } from 'vuex'
+import JSEncrypt from 'jsencrypt'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import Vue from 'vue'
+import Mock from 'mockjs'
+import { positions } from '@/mock/common'
+const { homePage } = require('@/config')
+// import { router } from '@/mock/user/routes'
+
+export default {
+  name: 'Login',
+  components: { CommonLayout },
+  data () {
+    return {
+      logging: false,
+      error: '',
+      form: this.$form.createForm(this)
+    }
+  },
+  computed: {
+    systemName () {
+      return this.$store.state.setting.systemName
+    }
+  },
+  methods: {
+    ...mapMutations('account', ['setUser', 'setPermissions', 'setRoles']),
+    onSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err) => {
+        if (!err) {
+          this.logging = true
+          const name = this.form.getFieldValue('name')
+          const password = this.form.getFieldValue('password')
+          login(name, password).then(this.afterLogin)
+        }
+      })
+    },
+    afterLogin (res) {
+      const name = this.form.getFieldValue('name')
+      const password = this.form.getFieldValue('password')
+      this.logging = false
+      const loginRes = res.states
+      if (loginRes === '登录成功') {
+        const encrypt = new JSEncrypt()
+        encrypt.setPublicKey('MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCqPvovSfXcwBbW8cKMCgwqNpsYuzF8RPAPFb7LGsnVo44JhM/xxzDyzoYtdfNmtbIuKVi9PzIsyp6rg+09gbuI6UGwBZ5DWBDBMqv5MPdOF5dCQkB2Bbr5yPfURPENypUz+pBFBg41d+BC+rwRiXELwKy7Y9caD/MtJyHydj8OUwIDAQAB')
+        const data = encrypt.encrypt(JSON.stringify({ username: name, password: password }))
+        localStorage.setItem(ACCESS_TOKEN, data)
+        // 获取路由配置
+        getRoutesConfig(data).then(result => {
+          Vue.$login.login(result).then(() => {
+            const user = Object.assign({
+              username: result.ename,
+              name: result.name,
+              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
+              address: '西安市',
+              position: positions[0]
+            }, result)
+            this.setUser(user)
+            this.setPermissions([{ id: 'queryForm', operation: ['add', 'edit'] }])
+            this.setRoles([{ id: 'admin', operation: ['add', 'edit', 'delete'] }])
+            let timestamp = new Date().getTime()// 当前的时间戳
+            timestamp = timestamp + 60 * 60 * 1000
+            // 格式化时间获取年月日, 登陆过期时间
+            const dateAfter = new Date(timestamp)
+            setAuthorization({ token: data, expireAt: dateAfter })
+            loadRoutes(funcToRouter(user.functions))
+            this.$router.push(homePage).catch(() => {})
+            this.$message.success(Mock.mock('@TIMEFIX').CN + '，欢迎回来', 3)
+          })
+        })
+      } else {
+        this.error = loginRes
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .common-layout{
+    .top {
+      text-align: center;
+      .header {
+        height: 44px;
+        line-height: 44px;
+        a {
+          text-decoration: none;
+        }
+        .logo {
+          height: 44px;
+          vertical-align: top;
+          margin-right: 16px;
+        }
+        .title {
+          font-size: 33px;
+          color: @title-color;
+          font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+          font-weight: 600;
+          position: relative;
+          top: 2px;
+        }
+      }
+      .desc {
+        font-size: 14px;
+        color: @text-color-second;
+        margin-top: 12px;
+        margin-bottom: 40px;
+      }
+    }
+    .login{
+      width: 368px;
+      margin: 0 auto;
+      @media screen and (max-width: 576px) {
+        width: 95%;
+      }
+      @media screen and (max-width: 320px) {
+        .captcha-button{
+          font-size: 14px;
+        }
+      }
+      .icon {
+        font-size: 24px;
+        color: @text-color-second;
+        margin-left: 16px;
+        vertical-align: middle;
+        cursor: pointer;
+        transition: color 0.3s;
+
+        &:hover {
+          color: @primary-color;
+        }
+      }
+    }
+  }
+</style>

package/src/pages/login/index.js

@@ -0,0 +1,2 @@
+import Login from './Login'
+export default Login

package/src/pages/report/ReportTable.js

@@ -0,0 +1,125 @@
+export default {
+  name: 'ReportTable',
+  functional: true,
+  render (h, content) {
+    if (!content.props.tableData) {
+      console.log('没有报表数据')
+      return
+    }
+    console.log('content=>', content)
+    const html = reportCompute(h, content.props.tableData)
+    console.log('html=>', html)
+    // 报表整体高度和宽度
+    const reportClass = `h-${html.h} w-${html.w}`
+    const report = (
+      <div id='ReportTableHome'>
+        <div id='reportTable' class={reportClass}>
+          {html.el}
+        </div>
+      </div>
+    )
+    return report
+  }
+}
+/**
+ * class类生成
+ * @param w 宽
+ * @param h 高
+ * @param l left
+ * @param t top
+ * @returns {string}
+ */
+function generClass ({ w = 1, h = 1, l, t }) {
+  return `w-${w} h-${h} l-${l} t-${t}`
+}
+/**
+ *  判断是否是个Number数据
+ * @param value
+ * @returns {boolean}
+ */
+function typeNumber (value) {
+  return Object.prototype.toString.call(value) === '[object Number]'
+}
+/**
+ * 判断是否是个object数据
+ * @param value
+ * @returns {boolean}
+ */
+function typeObject (value) {
+  return Object.prototype.toString.call(value) === '[object Object]'
+}
+/**
+ * 判断是否是个Array数据
+ * @param value
+ * @returns {boolean}
+ */
+function typeArray (value) {
+  return Object.prototype.toString.call(value) === '[object Array]'
+}
+/**
+ * 一行数据转换html函数
+ * @param h vue的h
+ * @param row 一行json数据
+ * @param left 起始left距离
+ * @param top 起始top距离
+ * @returns {{el: Array, h: number}}
+ */
+function rowCompute (h, row, left, top) {
+  if (typeObject(row)) {
+    const el = []
+    const keys = Object.keys(row).filter((res) => res != 'span')
+    let heigth = 0
+    for (const key of keys.values()) {
+      const value = row[key]['value'] ? row[key]['value'] : row[key]
+      const style = { l: left, t: top + heigth }
+      style.w = row[key]['span'] ? row[key]['span'] : 1
+      const nextL = left + style.w
+      const nextT = top + heigth
+      const divObject = rowCompute(h, value, nextL, nextT)
+      el.push(divObject.el)
+      style.h = divObject.h ? divObject.h : 1
+      heigth += style.h
+      const attrs = { class: generClass(style) + ' title' }
+      const div = <div {...attrs}>{key == 'value' ? value : key}</div>
+      el.push(div)
+    }
+    return { h: heigth, el: el }
+  } else if (typeArray(row)) {
+    const el = []
+    for (const [i, value] of row.entries()) {
+      const style = { l: (left + i), t: top, w: 1, h: 1 }
+      const extraClass = typeNumber(value) ? 'bold' : 'title'
+      const attrs = { class: generClass(style) + ` ${extraClass}` }
+      const div = <div {...attrs}>{value}</div>
+      el.push(div)
+    }
+    return { h: 1, el: el }
+  }
+}
+/**
+ * 完整报表数据转换html函数
+ * @param h vue的h
+ * @param jsonArr json数组
+ * @returns {{el: Array, h: number}}
+ */
+function reportCompute (h, jsonArr) {
+  const html = []
+  let heigth = 0
+  let width = 0
+  for (const [index, row] of jsonArr.entries()) {
+    const rowHtml = rowCompute(h, row, 0, index)
+    // 取第一行的宽度作为整个报表的宽度
+    if (index == 0) {
+      const reg = /w-\d\s/
+      for (const vNode of rowHtml.el) {
+        if (!vNode.data || !vNode.data.class) continue
+        const c = vNode.data.class
+        const w = c.match(reg)[0].split('-')[1]
+        width += (w - 0)
+      }
+    }
+    heigth += rowHtml.h
+    html.push(rowHtml.el)
+  }
+  return { el: html, h: heigth, w: width }
+}

package/src/pages/report/ReportTableHome.vue

@@ -0,0 +1,28 @@
+<template>
+  <report-table :tableData="tableData"></report-table>
+</template>
+
+<script>
+  import { post } from '@/services/api/restTools'
+  import ReportTable from '@/pages/report/ReportTable'
+  export default {
+    name: 'ReportTableHome',
+    components: { ReportTable },
+    data () {
+      return {
+        tableData: null
+      }
+    },
+    created () {
+    },
+    mounted () {
+      this.getData()
+    },
+    methods: {
+      async getData () {
+        this.tableData = await post('webmeterapi/reportTest', {})
+        console.log('数据=>', JSON.stringify(this.tableData))
+      }
+    }
+  }
+</script>

package/src/pages/resourceManage/resourceManageMain.vue

@@ -0,0 +1,55 @@
+<!--<template>-->
+  <!--<div id="resourceManageMain">-->
+    <!--<a-tabs>-->
+      <!--<a-tab-pane key="1" force-render>-->
+        <!--<span slot="tab"><a-icon type="apartment" />资源管理</span>-->
+        <!--Content of Tab Pane 1-->
+      <!--</a-tab-pane>-->
+      <!--<a-tab-pane key="2" tab="功能管理" force-render>-->
+        <!--Content of Tab Pane 2-->
+      <!--</a-tab-pane>-->
+      <!--<a-tab-pane key="3" tab="部门管理" force-render>-->
+        <!--Content of Tab Pane 3-->
+      <!--</a-tab-pane>-->
+    <!--</a-tabs>-->
+  <!--</div>-->
+<!--</template>-->
+
+<script>
+  import { mapState } from 'vuex'
+  import { getResourceFunction } from '@/base-client/plugins/GetLoginInfoService'
+
+  export default {
+    name: 'resourceManageMain',
+    computed: {
+      ...mapState('account', ['login'])
+    },
+    data () {
+      return {
+        resFun: []
+      }
+    },
+    created () {
+    },
+    async mounted () {
+      const fun = await getResourceFunction()
+      console.log('->', fun)
+      this.resFun = this.searchFun(fun, '资源功能')
+    },
+    methods: {
+      searchFun (fun, name) {
+        if (fun.length > 0) {
+          if (fun[0].name == name) {
+            return fun[0].children
+          } else {
+            return this.searchFun(fun[0].children, name)
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+
+</style>