vue2-client 0.1.1 → 1.2.0

package/src/layouts/PageView.vue

@@ -0,0 +1,55 @@
+<template>
+  <page-layout :desc="desc" :linkList="linkList">
+    <div v-if="this.extraImage && !isMobile" slot="extra" class="extraImg">
+      <img :src="extraImage" alt="extraImage"/>
+    </div>
+    <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
+      <router-view ref="page" />
+    </page-toggle-transition>
+  </page-layout>
+</template>
+
+<script>
+import PageLayout from './PageLayout'
+import PageToggleTransition from '../components/transition/PageToggleTransition'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'PageView',
+  components: { PageToggleTransition, PageLayout },
+  data () {
+    return {
+      page: {}
+    }
+  },
+  computed: {
+    ...mapState('setting', ['isMobile', 'multiPage', 'animate']),
+    desc () {
+      return this.page.desc
+    },
+    linkList () {
+      return this.page.linkList
+    },
+    extraImage () {
+      return this.page.extraImage
+    }
+  },
+  mounted () {
+    this.page = this.$refs.page
+  },
+  updated () {
+    this.page = this.$refs.page
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .extraImg{
+    margin-top: -60px;
+    text-align: center;
+    width: 195px;
+    img{
+      width: 100%;
+    }
+  }
+</style>

package/src/layouts/SinglePageView.vue

@@ -0,0 +1,74 @@
+<template>
+  <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
+    <template v-if="login">
+      <iframe
+        id="singlepageview"
+        @load="load"
+        :src="url"
+        frameborder="0"
+        ref="singlepage">
+      </iframe>
+    </template>
+  </page-toggle-transition>
+</template>
+
+<script>
+import PageToggleTransition from '../components/transition/PageToggleTransition'
+import { ACCESS_TOKEN } from '@vue2-client/store/mutation-types'
+import { mapState, mapMutations } from 'vuex'
+
+export default {
+  name: 'SinglePageView',
+  components: { PageToggleTransition },
+  props: {
+    singlePageUrl: {
+      type: Object,
+      default: () => {
+        return { url: '' }
+      }
+    }
+  },
+  data () {
+    return {
+      url: '../singlepage/page.html',
+      // singlePageUrl: null,
+      iframe: {}
+    }
+  },
+  computed: {
+    ...mapState('setting', ['multiPage', 'animate']),
+    ...mapState('account', ['login'])
+  },
+  mounted () {
+    if (!this.login) {
+      this.setLogin(JSON.parse(sessionStorage.getItem(process.env.VUE_APP_LOGIN_KEY)))
+    }
+  },
+  methods: {
+    ...mapMutations('account', ['setLogin']),
+    load () {
+      this.iframe = this.$refs.singlepage.contentWindow
+      const appdata = {
+        singleValues: this.$appdata.getSingleValues(),
+        params: this.$appdata.getParams()
+      }
+      const data = {
+        token: localStorage.getItem(ACCESS_TOKEN),
+        login: this.login,
+        appdata: appdata,
+        page: this.singlePageUrl.url
+      }
+      console.log('发送参数', data)
+      this.iframe.postMessage(data, '*')
+    }
+  }
+}
+</script>
+
+<style lang="less">
+#singlepageview {
+  width: 100%;
+  height: calc(100vh - 117px);
+  border: none;
+}
+</style>

package/src/layouts/footer/PageFooter.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="footer">
+    <div class="links">
+      <a target="_blank" :key="index" :href="item.link ? item.link : 'javascript: void(0)'" v-for="(item, index) in linkList">
+        <a-icon v-if="item.icon" :type="item.icon"/>{{ item.name }}
+      </a>
+    </div>
+    <div class="copyright">
+      Copyright<a-icon type="copyright" />{{ copyright }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PageFooter',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['copyright', 'linkList']
+}
+</script>
+
+<style lang="less" scoped>
+  .footer{
+    padding: 48px 16px 24px;
+    /*margin: 48px 0 24px;*/
+    text-align: center;
+    .copyright{
+      color: @text-color-second;
+      font-size: 14px;
+      i {
+          margin: 0 4px;
+      }
+    }
+    .links{
+      margin-bottom: 8px;
+      a:not(:last-child) {
+        margin-right: 40px;
+      }
+      a{
+        color: @text-color-second;
+        -webkit-transition: all .3s;
+        transition: all .3s;
+      }
+    }
+  }
+</style>

package/src/layouts/header/AdminHeader.vue

@@ -0,0 +1,109 @@
+<template>
+  <a-layout-header :class="[headerTheme, 'admin-header']">
+    <div :class="['admin-header-wide', layout, pageWidth]">
+      <router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', headerTheme]">
+        <img width="32" src="@/assets/img/logo.png" />
+        <h1 v-if="!isMobile">{{ systemName }}</h1>
+      </router-link>
+      <a-divider v-if="isMobile" type="vertical" />
+      <a-icon v-if="layout !== 'head'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
+      <div v-if="layout !== 'side' && !isMobile" class="admin-header-menu" :style="`width: ${menuWidth};`">
+        <i-menu class="head-menu" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
+      </div>
+      <div :class="['admin-header-right', headerTheme]">
+        <header-search class="header-item" @active="val => searchActive = val" />
+        <a-tooltip class="header-item" title="清理查询缓存" placement="bottom" >
+          <a @click="handleToClearCache">
+            <a-icon type="reload" />
+          </a>
+        </a-tooltip>
+        <a-tooltip class="header-item" title="帮助文档" placement="bottom" >
+          <a href="https://iczer.gitee.io/vue-antd-admin-docs/" target="_blank">
+            <a-icon type="question-circle-o" />
+          </a>
+        </a-tooltip>
+        <header-notice class="header-item"/>
+        <header-avatar class="header-item"/>
+        <a-dropdown class="lang header-item">
+          <div>
+            <a-icon type="global"/> {{ langAlias }}
+          </div>
+          <a-menu @click="val => setLang(val.key)" :selected-keys="[lang]" slot="overlay">
+            <a-menu-item v-for=" lang in langList" :key="lang.key">{{ lang.key.toLowerCase() + ' ' + lang.name }}</a-menu-item>
+          </a-menu>
+        </a-dropdown>
+      </div>
+    </div>
+  </a-layout-header>
+</template>
+
+<script>
+import HeaderSearch from './HeaderSearch'
+import HeaderNotice from './HeaderNotice'
+import HeaderAvatar from './HeaderAvatar'
+import IMenu from '@vue2-client/components/menu/menu'
+import { mapState, mapMutations } from 'vuex'
+import { Modal } from 'ant-design-vue'
+import { indexedDB } from '@vue2-client/utils/indexedDB'
+
+export default {
+  name: 'AdminHeader',
+  components: { IMenu, HeaderAvatar, HeaderNotice, HeaderSearch },
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['collapsed', 'menuData'],
+  data () {
+    return {
+      langList: [
+        { key: 'CN', name: '简体中文', alias: '简体' },
+        { key: 'HK', name: '繁體中文', alias: '繁體' },
+        { key: 'US', name: 'English', alias: 'English' }
+      ],
+      searchActive: false
+    }
+  },
+  computed: {
+    ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang', 'pageWidth']),
+    headerTheme () {
+      if (this.layout == 'side' && this.theme.mode == 'dark' && !this.isMobile) {
+        return 'light'
+      }
+      return this.theme.mode
+    },
+    langAlias () {
+      const lang = this.langList.find(item => item.key == this.lang)
+      return lang.alias
+    },
+    menuWidth () {
+      const { layout, searchActive } = this
+      const headWidth = layout === 'head' ? '100% - 188px' : '100%'
+      const extraWidth = searchActive ? '600px' : '400px'
+      return `calc(${headWidth} - ${extraWidth})`
+    }
+  },
+  methods: {
+    toggleCollapse () {
+      this.$emit('toggleCollapse')
+    },
+    onSelect (obj) {
+      this.$emit('menuSelect', obj)
+    },
+    handleToClearCache () {
+      Modal.confirm({
+        title: '信息',
+        content: '您确定要清除查询配置缓存吗？',
+        onOk: () => {
+          indexedDB.clear(() => {
+            location.reload()
+          })
+        },
+        onCancel () {}
+      })
+    },
+    ...mapMutations('setting', ['setLang'])
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "index";
+</style>

package/src/layouts/header/HeaderAvatar.vue

@@ -0,0 +1,60 @@
+<template>
+  <a-dropdown>
+    <div class="header-avatar" style="cursor: pointer">
+      <a-avatar class="avatar" size="small" shape="circle" :src="user.avatar"/>
+      <span class="name">{{ user.name }}</span>
+    </div>
+    <a-menu :class="['avatar-menu']" slot="overlay">
+      <a-menu-item>
+        <a-icon type="user" />
+        <span>个人中心</span>
+      </a-menu-item>
+      <a-menu-item>
+        <a-icon type="setting" />
+        <span>设置</span>
+      </a-menu-item>
+      <a-menu-divider />
+      <a-menu-item @click="logout">
+        <a-icon style="margin-right: 8px;" type="poweroff" />
+        <span>退出登录</span>
+      </a-menu-item>
+    </a-menu>
+  </a-dropdown>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { logout } from '@vue2-client/services/user'
+
+export default {
+  name: 'HeaderAvatar',
+  computed: {
+    ...mapGetters('account', ['user'])
+  },
+  methods: {
+    logout () {
+      logout()
+      this.$router.push('/login')
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .header-avatar{
+    display: inline-flex;
+    .avatar, .name{
+      align-self: center;
+    }
+    .avatar{
+      margin-right: 8px;
+    }
+    .name{
+      font-weight: 500;
+    }
+  }
+  .avatar-menu{
+    width: 150px;
+  }
+
+</style>

package/src/layouts/header/HeaderNotice.vue

@@ -0,0 +1,97 @@
+<template>
+  <a-dropdown :trigger="['click']" v-model="show">
+    <div slot="overlay">
+      <a-spin :spinning="loading">
+        <a-tabs class="dropdown-tabs" :tabBarStyle="{textAlign: 'center'}" :style="{width: '297px'}">
+          <a-tab-pane tab="通知" key="1">
+            <a-list>
+              <a-list-item :key="item.id" class="tab-pane" v-for=" item in exception">
+                <a-list-item-meta :title="'设备号'+ item.e_f_device_id" :description="item.e_f_error_msg" @click="read(item)">
+                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
+                </a-list-item-meta>
+              </a-list-item>
+            </a-list>
+          </a-tab-pane>
+          <a-tab-pane tab="消息" key="2">
+            <a-list class="tab-pane"></a-list>
+          </a-tab-pane>
+          <a-tab-pane tab="待办" key="3">
+            <a-list class="tab-pane"></a-list>
+          </a-tab-pane>
+        </a-tabs>
+      </a-spin>
+    </div>
+    <span @click="fetchNotice" class="header-notice">
+      <a-badge class="notice-badge" :count=" exception.length">
+        <a-icon :class="['header-notice-icon']" type="bell" />
+      </a-badge>
+    </span>
+  </a-dropdown>
+</template>
+
+<script>
+import { post } from '@vue2-client/services/api/restTools'
+export default {
+  name: 'HeaderNotice',
+  data () {
+    return {
+      loading: false,
+      show: false,
+      exception: []
+    }
+  },
+  computed: {
+  },
+  created () {
+    this.refresh()
+  },
+  methods: {
+    read (item) {
+      post('/webmeterapi/saveSingleTable', { data: { tablename: 't_iot_device_exception', param: { id: item.e_id, f_is_read: 1 } } }).then(res => {
+        this.refresh()
+      })
+    },
+    refresh () {
+      post('/webmeterapi/commonQuery', { queryParamsName: 'deviceExceptionQueryParams', conditionParams: { e_f_is_read: 0 }, pageNo: 1, pageSize: 999999 }).then(res => {
+        this.exception = res.data
+      })
+    },
+    fetchNotice () {
+      if (this.loading) {
+        this.loading = false
+        return
+      }
+      this.loadding = true
+      setTimeout(() => {
+        this.loadding = false
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .header-notice{
+    display: inline-block;
+    transition: all 0.3s;
+    span {
+      vertical-align: initial;
+    }
+    .notice-badge{
+      color: inherit;
+      .header-notice-icon{
+        font-size: 16px;
+        padding: 4px;
+      }
+    }
+  }
+  .dropdown-tabs{
+    background-color: @base-bg-color;
+    box-shadow: 0 2px 8px @shadow-color;
+    border-radius: 4px;
+    .tab-pane{
+      padding: 0 24px 12px;
+      min-height: 250px;
+    }
+  }
+</style>

package/src/layouts/header/HeaderSearch.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="header-search">
+    <a-icon type="search" class="search-icon" @click="enterSearchMode"/>
+    <a-auto-complete
+      ref="input"
+      :getPopupContainer="e => {return e.parentNode || document.body}"
+      :dataSource="dataSource"
+      :class="['search-input', searchMode ? 'enter' : 'leave']"
+      placeholder="站内搜索"
+      @blur="leaveSearchMode"
+    >
+    </a-auto-complete>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderSearch',
+  data () {
+    return {
+      dataSource: ['选项一', '选项二'],
+      searchMode: false
+    }
+  },
+  methods: {
+    enterSearchMode () {
+      this.searchMode = true
+      this.$emit('active', true)
+      setTimeout(() => this.$refs.input.focus(), 300)
+    },
+    leaveSearchMode () {
+      this.searchMode = false
+      setTimeout(() => this.$emit('active', false), 300)
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .header-search{
+    .search-icon{
+      font-size: 16px;
+      cursor: pointer;
+    }
+    .search-input{
+      border: 0;
+      border-bottom: 1px solid @border-color-split;
+      transition: width 0.3s ease-in-out;
+      input{
+        border: 0;
+        box-shadow: 0 0 0 0;
+      }
+      &.leave{
+        width: 0px;
+        input{
+          display: none;
+        }
+      }
+      &.enter{
+        width: 200px;
+        input:focus{
+          box-shadow: 0 0 0 0;
+        }
+      }
+    }
+  }
+</style>

package/src/layouts/header/index.less

@@ -0,0 +1,92 @@
+.admin-header{
+  padding: 0;
+  z-index: 2;
+  box-shadow: @shadow-down;
+  position: relative;
+  background: @base-bg-color;
+  .head-menu{
+    height: 64px;
+    line-height: 64px;
+    vertical-align: middle;
+    box-shadow: none;
+  }
+  &.dark{
+    background: @header-bg-color-dark;
+    color: white;
+  }
+  &.night{
+    .head-menu{
+      background: @base-bg-color;
+    }
+  }
+  .admin-header-wide{
+    padding-left: 24px;
+    &.head.fixed{
+      max-width: 1400px;
+      margin: auto;
+      padding-left: 0;
+    }
+    &.side{
+      padding-right: 12px;
+    }
+    .logo {
+      height: 64px;
+      line-height: 58px;
+      vertical-align: top;
+      display: inline-block;
+      padding: 0 12px 0 24px;
+      cursor: pointer;
+      font-size: 20px;
+      color: inherit;
+      &.pc{
+        padding: 0 12px 0 0;
+      }
+      img {
+        vertical-align: middle;
+      }
+      h1{
+        color: inherit;
+        display: inline-block;
+        font-size: 16px;
+      }
+    }
+    .trigger {
+      font-size: 20px;
+      line-height: 64px;
+      padding: 0 24px;
+      cursor: pointer;
+      transition: color .3s;
+      &:hover{
+        color: @primary-color;
+      }
+    }
+    .admin-header-menu{
+      display: inline-block;
+    }
+    .admin-header-right{
+      float: right;
+      display: flex;
+      color: inherit;
+      .header-item{
+        color: inherit;
+        padding: 0 12px;
+        cursor: pointer;
+        align-self: center;
+        a{
+          color: inherit;
+          i{
+            font-size: 16px;
+          }
+        }
+      }
+      each(@theme-list, {
+        &.@{value} .header-item{
+          &:hover{
+            @class: ~'hover-bg-color-@{value}';
+            background-color: @@class;
+          }
+        }
+      })
+    }
+  }
+}