vue2-client 0.1.0 → 1.1.0

package/src/utils/themeUtil.js

@@ -0,0 +1,102 @@
+const client = require('webpack-theme-color-replacer/client')
+const { theme } = require('../config')
+const { getMenuColors, getAntdColors, getThemeToggleColors, getFunctionalColors } = require('../utils/colors')
+const { ANTD } = require('../config/default')
+
+function getThemeColors (color, $theme) {
+  const _color = color || theme.color
+  const mode = $theme || theme.mode
+  const replaceColors = getThemeToggleColors(_color, mode)
+  const themeColors = [
+    ...replaceColors.mainColors,
+    ...replaceColors.subColors,
+    ...replaceColors.menuColors,
+    ...replaceColors.contentColors,
+    ...replaceColors.rgbColors,
+    ...replaceColors.functionalColors.success,
+    ...replaceColors.functionalColors.warning,
+    ...replaceColors.functionalColors.error
+  ]
+  return themeColors
+}
+
+function changeThemeColor (newColor, $theme) {
+  const promise = client.changer.changeColor({ newColors: getThemeColors(newColor, $theme) })
+  return promise
+}
+
+function modifyVars (color) {
+  const _color = color || theme.color
+  const palettes = getAntdColors(_color, theme.mode)
+  const menuColors = getMenuColors(_color, theme.mode)
+  const { success, warning, error } = getFunctionalColors(theme.mode)
+  const primary = palettes[5]
+  return {
+    'primary-color': primary,
+    'primary-1': palettes[0],
+    'primary-2': palettes[1],
+    'primary-3': palettes[2],
+    'primary-4': palettes[3],
+    'primary-5': palettes[4],
+    'primary-6': palettes[5],
+    'primary-7': palettes[6],
+    'primary-8': palettes[7],
+    'primary-9': palettes[8],
+    'primary-10': palettes[9],
+    'info-color': primary,
+    'success-color': success[5],
+    'warning-color': warning[5],
+    'error-color': error[5],
+    'alert-info-bg-color': palettes[0],
+    'alert-info-border-color': palettes[2],
+    'alert-success-bg-color': success[0],
+    'alert-success-border-color': success[2],
+    'alert-warning-bg-color': warning[0],
+    'alert-warning-border-color': warning[2],
+    'alert-error-bg-color': error[0],
+    'alert-error-border-color': error[2],
+    'processing-color': primary,
+    'menu-dark-submenu-bg': menuColors[0],
+    'layout-header-background': menuColors[1],
+    'layout-trigger-background': menuColors[2],
+    'btn-danger-bg': error[4],
+    'btn-danger-border': error[4],
+    ...ANTD.theme[theme.mode]
+  }
+}
+
+function loadLocalTheme (localSetting) {
+  if (localSetting && localSetting.theme) {
+    let { color, mode } = localSetting.theme
+    color = color || theme.color
+    mode = mode || theme.mode
+    changeThemeColor(color, mode)
+  }
+}
+
+/**
+ * 获取本地保存的配置
+ * @param load {boolean} 是否加载配置中的主题
+ * @returns {Object}
+ */
+function getLocalSetting (loadTheme) {
+  let localSetting = {}
+  try {
+    const localSettingStr = localStorage.getItem(process.env.VUE_APP_SETTING_KEY)
+    localSetting = JSON.parse(localSettingStr)
+  } catch (e) {
+    console.error(e)
+  }
+  if (loadTheme) {
+    loadLocalTheme(localSetting)
+  }
+  return localSetting
+}
+
+module.exports = {
+  getThemeColors,
+  changeThemeColor,
+  modifyVars,
+  loadLocalTheme,
+  getLocalSetting
+}

package/src/utils/util.js

@@ -0,0 +1,134 @@
+import enquireJs from 'enquire.js'
+
+export function isDef (v) {
+  return v !== undefined && v !== null
+}
+
+export function formatDate (dateStr, fmt) {
+  if (dateStr == null) {
+    return '--'
+  }
+  let date
+  if (dateStr === 'now') {
+    date = new Date()
+  } else {
+    date = new Date(dateStr)
+  }
+  const o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds(),
+    'q+': Math.floor((date.getMonth() + 3) / 3),
+    'S': date.getMilliseconds()
+  }
+  if (!fmt) {
+    fmt = 'yyyy-MM-dd hh:mm:ss'
+  }
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+  }
+  for (const k in o) {
+    if (new RegExp('(' + k + ')').test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
+    }
+  }
+  return fmt
+}
+
+export function timeCompare (date1, date2) {
+  const date11 = new Date(date1)
+  const date22 = new Date(date2)
+  return date11.time > date22.time ? 1 : -1
+}
+
+/**
+ * Remove an item from an array.
+ */
+export function remove (arr, item) {
+  if (arr.length) {
+    const index = arr.indexOf(item)
+    if (index > -1) {
+      return arr.splice(index, 1)
+    }
+  }
+}
+
+export function isRegExp (v) {
+  return _toString.call(v) === '[object RegExp]'
+}
+
+export function enquireScreen (call) {
+  const handler = {
+    match: function () {
+      call && call(true)
+    },
+    unmatch: function () {
+      call && call(false)
+    }
+  }
+  enquireJs.register('only screen and (max-width: 767.99px)', handler)
+}
+
+export function showXml (str) {
+  let text = str
+
+  // 去掉多余的空格
+  text = '\n' + text.replace(/(<\w+)(\s.*?>)/g, function ($0, name, props) {
+    return name + props.replace(/\s+(\w+=)/g, ' $1')
+  }).replace(/>\s*?</g, '>\n<')
+
+  // 把注释编码
+  text = text.replace(/\n/g, '\r').replace(/<!--(.+?)-->/g, function ($0, text) {
+    var ret = '<!--' + escape(text) + '-->'
+    return ret
+  }).replace(/\r/g, '\n')
+
+  // 调整格式
+  const rgx = /\n(<(([^?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/mg
+  const nodeStack = []
+  const output = text.replace(rgx, function ($0, all, name, isBegin, isCloseFull1, isCloseFull2, isFull1, isFull2) {
+    const isClosed = (isCloseFull1 === '/') || (isCloseFull2 === '/') || (isFull1 === '/') || (isFull2 === '/')
+    let prefix = ''
+    if (isBegin === '!') {
+      prefix = getPrefix(nodeStack.length)
+    } else {
+      if (isBegin !== '/') {
+        prefix = getPrefix(nodeStack.length)
+        if (!isClosed) {
+          nodeStack.push(name)
+        }
+      } else {
+        nodeStack.pop()
+        prefix = getPrefix(nodeStack.length)
+      }
+    }
+    return '\n' + prefix + all
+  })
+  let outputText = output.substring(1)
+
+  // 把注释还原并解码，调格式
+  outputText = outputText.replace(/\n/g, '\r').replace(/(\s*)<!--(.+?)-->/g, function ($0, prefix, text) {
+    if (prefix.charAt(0) === '\r') { prefix = prefix.substring(1) }
+    text = unescape(text).replace(/\r/g, '\n')
+    return '\n' + prefix + '<!--' + text.replace(/^\s*/mg, prefix) + '-->'
+  })
+  // alert(outputText);
+
+  outputText =	outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n')
+
+  return outputText
+}
+
+function getPrefix (prefixIndex) {
+  const span = '    '
+  const output = []
+  for (let i = 0; i < prefixIndex; ++i) {
+    output.push(span)
+  }
+
+  return output.join('')
+}
+
+const _toString = Object.prototype.toString

package/tests/unit/ReportTable.spec.js

@@ -0,0 +1,15 @@
+import { mount } from '@vue/test-utils'
+import ReportTable from '@/pages/report/ReportTable'
+import { reportData } from '@/mock/common/reportData'
+
+// 报表组件测试域
+describe('ReportTable', () => {
+  it('render', () => {
+    const wrapper = mount(ReportTable, {
+      propsData: {
+        tableData: reportData
+      }
+    })
+    expect(wrapper.find('#ReportTableHome')).not.toBeNull()
+  })
+})

package/vue.config.js

@@ -0,0 +1,152 @@
+const path = require('path')
+const webpack = require('webpack')
+const ThemeColorReplacer = require('webpack-theme-color-replacer')
+const { getThemeColors, modifyVars } = require('./src/utils/themeUtil')
+const { resolveCss } = require('./src/utils/theme-color-replacer-extend')
+const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+const productionGzipExtensions = ['js', 'css']
+const isProd = process.env.NODE_ENV === 'production'
+
+const assetsCDN = {
+  // webpack build externals
+  externals: {
+    vue: 'Vue',
+    'vue-router': 'VueRouter',
+    vuex: 'Vuex',
+    axios: 'axios',
+    nprogress: 'NProgress',
+    clipboard: 'ClipboardJS',
+    '@antv/data-set': 'DataSet',
+    'js-cookie': 'Cookies'
+  },
+  css: [
+  ],
+  js: [
+    '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
+    '//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js',
+    '//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',
+    '//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
+    '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js',
+    '//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js',
+    '//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js',
+    '//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js'
+  ]
+}
+
+const server = 'http://121.36.106.17:8400'
+// const local = 'http://localhost:8445/webmeter'
+const local = 'http://123.60.214.109:8405/webmeter'
+
+module.exports = {
+  devServer: {
+    // development server port 8000
+    port: 8001,
+    // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
+    proxy: {
+      '/rs': {
+        target: server,
+        ws: false,
+        changeOrigin: true
+      },
+      '/image': {
+        target: server,
+        ws: false,
+        changeOrigin: true
+      },
+      '/webapps': {
+        target: server,
+        ws: false,
+        changeOrigin: true
+      },
+      'iot/webmeterapi': {
+        pathRewrite: { '^/iot/webmeterapi': '/rs/logic' },
+        target: local,
+        changeOrigin: true
+      },
+      '/webmeterapi': {
+        pathRewrite: { '^/webmeterapi': '/rs/logic' },
+        target: local,
+        changeOrigin: true
+      },
+      '/webmeteruploadapi': {
+        pathRewrite: { '^/webmeteruploadapi': '/rs/file' },
+        target: local,
+        changeOrigin: true
+      },
+      '/webmetersql': {
+        pathRewrite: { '^/webmetersql': '/rs/sql' },
+        target: local,
+        changeOrigin: true
+      }
+    }
+  },
+  pluginOptions: {
+    'style-resources-loader': {
+      preProcessor: 'less',
+      patterns: [path.resolve(__dirname, './src/theme/theme.less')]
+    }
+  },
+  configureWebpack: config => {
+    config.entry.app = ['babel-polyfill', 'whatwg-fetch', './src/main.js']
+    config.performance = {
+      hints: false
+    }
+    config.plugins.push(
+      new ThemeColorReplacer({
+        fileName: 'css/theme-colors-[contenthash:8].css',
+        matchColors: getThemeColors(),
+        injectCss: true,
+        resolveCss
+      })
+    )
+    // Ignore all locale files of moment.js
+    config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
+    // 生产环境下将资源压缩成gzip格式
+    if (isProd) {
+      // add `CompressionWebpack` plugin to webpack plugins
+      config.plugins.push(new CompressionWebpackPlugin({
+        algorithm: 'gzip',
+        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
+        threshold: 10240,
+        minRatio: 0.8
+      }))
+    }
+    // if prod, add externals
+    if (isProd) {
+      config.externals = assetsCDN.externals
+    }
+  },
+  chainWebpack: config => {
+    // 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突
+    if (isProd) {
+      config.plugin('optimize-css')
+        .tap(args => {
+            args[0].cssnanoOptions.preset[1].colormin = false
+          return args
+        })
+    }
+    // 生产环境下使用CDN
+    if (isProd) {
+      config.plugin('html')
+        .tap(args => {
+          args[0].cdn = assetsCDN
+        return args
+      })
+    }
+  },
+  css: {
+    loaderOptions: {
+      less: {
+        lessOptions: {
+          modifyVars: modifyVars(),
+          javascriptEnabled: true
+        }
+      }
+    }
+  },
+  publicPath: process.env.VUE_APP_PUBLIC_PATH,
+  outputDir: 'dist',
+  assetsDir: 'static',
+  productionSourceMap: false
+}

package/webpack.config.js

@@ -0,0 +1,12 @@
+'use strict'
+const path = require('path')
+
+module.exports = {
+  context: path.resolve(__dirname, './'),
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      '@': path.resolve('src')
+    }
+  }
+}

package/src/api/business.js

@@ -1,30 +0,0 @@
-const businessApi = {
-  /** 指令详情页 **/
-  //    获取指令详情
-  getInstructDetails: '/webmeter/meterManageInstructDetails',
-  //    取消发送指令
-  cancelSendInstruct: '/webmeter/meterManageCancelSendInstruct',
-  //    重新发送指令
-  againSendInstruct: '/webmeter/meterManageAgainSendInstruct',
-  /** 档案详情页 **/
-  //    查询档案详情信息
-  meterManageDetail: '/webmeter/meterManageDetail',
-  //    查询业务操作记录
-  meterManageDetailWorkFlow: '/webmeter/meterManageDetailWorkFlow',
-  //    保存开关阀指令
-  saveValveControl: '/webmeter/meterManageSaveValveControl',
-  //    查询用气记录
-  getSimpleHandList: '/webmeter/meterManageSimpleHandList',
-  //    查询抄表记录
-  getSimpleMetereadList: '/webmeter/meterManageSimpleMetereadList',
-  //    查询充值记录
-  getSimpleSellGasList: '/webmeter/meterManageSimpleSellGasList',
-  //    查询异常记录
-  getSimpleExceptionList: '/webmeter/meterManageSimpleExceptionList',
-  //    查询指令记录
-  getSimpleInstructList: '/webmeter/meterManageSimpleInstructList',
-  //    查询统计信息
-  meterManageCount: '/webmeter/meterManageCount'
-}
-
-export { businessApi }

package/src/api/common.js

@@ -1,6 +0,0 @@
-const commonApi = {
-  // 获取表格列配置
-  getColumnsJson: '/webmeterapi/getColumns'
-}
-
-export { commonApi }

package/src/components/Criteria/Criteria.vue

@@ -1,191 +0,0 @@
-<template>
-  <div id="Criteria" class="table-page-search-wrapper">
-    <div v-show="criteriaShow" ref="drawerContainer"></div>
-    <a-form-model :model="model" layout="inline">
-      <a-row :gutter="24">
-        <a-col :sm="24" :md="12" :xl="6">
-          <slot name="condition1" :model="model"></slot>
-        </a-col>
-        <a-col :sm="24" :md="12" :xl="6">
-          <slot name="condition2" :model="model"></slot>
-        </a-col>
-        <a-col :md="24" :xl="12">
-          <span class="table-page-search-submitButtons">
-            <a-drawer
-              title="详细筛选"
-              placement="top"
-              :visible="criteriaShow"
-              :get-container="() => {return $refs.drawerContainer}"
-              :wrap-style="{ position: 'absolute' }"
-              :header-style="{textAlign: 'center'}"
-              @close="closeDrawer()">
-              <a-form-model :model="model" layout="inline">
-                <a-row :gutter="24">
-                  <slot name="conditionMore" :model="model"></slot>
-                </a-row>
-              </a-form-model>
-            </a-drawer>
-            <a-space>
-              <a-button type="dashed" class="detailed-condition" v-if="showDetailed" @click="showDrawer()" @click.once="initialLoadCondition()">详细筛选</a-button>
-              <a-button type="primary" :icon="searchIcon" @click="search()">查询</a-button>
-              <a-button :icon="redoIcon" @click="clear()">重置</a-button>
-              <slot name="button"></slot>
-            </a-space>
-          </span>
-        </a-col>
-      </a-row>
-    </a-form-model>
-  </div>
-</template>
-
-<script>
-  export default {
-    props: {
-      // 控制是否显示详细查询
-      showDetailed: {
-        type: Boolean,
-        default: true
-      },
-      // 搜索图标 如需加图标 直接穿字符串值就行 如  <criteria search-icon="search">
-      searchIcon: {
-        type: String,
-        default: 'search'
-      },
-      // 重置图标 如需加图标 直接穿字符串值就行 如  <criteria redo-icon="redo">
-      redoIcon: {
-        type: String,
-        default: 'redo'
-      }
-    },
-    mounted () {
-      this.initialLoadCondition()
-    },
-    data () {
-      return {
-        // 保存用户输入的数据
-        model: {},
-        // 配置的条件内容
-        conditions: {},
-        // 最终产生的查询条件
-        condition: '',
-        // 用于验证的字符数组
-        character: ['and', 'exec', 'insert', 'select', 'delete', 'update', 'count', 'chr', 'mid', 'master', 'truncate', 'char', 'declare'],
-        // 控制多余查询条件显示与否
-        criteriaShow: false
-      }
-    },
-    methods: {
-      // 初始化组件条件, 从标签取查询条件
-      initialLoadCondition () {
-        const elements = this.$el.querySelectorAll('[variable]')
-        console.log(elements)
-        for (let i = 0; i < elements.length; i++) {
-          const el = elements[i]
-          const name = el.getAttribute('variable')
-          this.$set(this.model, name, '')
-
-          const condition = el.getAttribute('condition')
-          if (condition) {
-            // this.conditions放的是查询条件
-            this.conditions[name] = condition
-          }
-        }
-      },
-      search () {
-        try {
-          // 拼接前台条件
-          this.condition = this.buildFrontCondition()
-          const args = { condition: this.condition, model: this.model }
-          this.$emit('condition-changed', args)
-          return args
-        } catch (e) {
-          // 如果是查询条件非法，警告
-          if (e === '查询条件包含非法字符,请重输') {
-            alert('查询条件包含非法字符,请重输')
-          } else {
-            throw e
-          }
-        }
-      },
-      // 拼接前台条件
-      buildFrontCondition () {
-        let condition = ' 1=1 '
-        for (const name in this.conditions) {
-          if (typeof this.model[name] == 'string') {
-            this.model[name] = String(this.model[name]).trim()
-          }
-          const value = this.model[name]
-          // 检查是否包含敏感的SQL字符
-          if (this.checkValue(value)) {
-            /*eslint-disable */
-            throw '查询条件包含非法字符,请重输'
-          }
-          if (this.conditions[name].includes('$parent') && value && (value + '').length > 0) {
-            const sqlStr = this.getSql(value, this.conditions[name])
-            if (sqlStr) {
-              condition += ' and ' + sqlStr.split('{}').join(this.packCondition(sqlStr, this.model[name]) + '')
-            }
-          } else if (value && (value + '').length > 0) {
-            // 查看条件中包含几个{}插入符
-            let len = this.conditions[name].match(/{}/g).length
-            if (len == 1) {
-              condition += ' and ' + this.conditions[name].split('{}').join(this.packCondition(this.conditions[name], this.model[name]) + '')
-            } else if (len > 1) {
-              let conditionsStr = this.conditions[name]
-              for (let i = 0; i < len; i++) {
-                conditionsStr = conditionsStr.replace('{}', this.packCondition(this.conditions[name], this.model[name][i]))
-              }
-              condition += ' and ' + conditionsStr
-            }
-          }
-        }
-        // 通知外部查询条件变化了
-        return condition
-      },
-      // val: 调取函数时，需要的参数。exp：掉去函数的字符串
-      getSql (val, exp) {
-        return eval('this.' + exp)
-      },
-      packCondition (str, param) {
-        // console.log('查询条件: ', str, param)
-        if (param instanceof Array) {
-          return param.length > 1 ? this.recombine(param) : (str.indexOf(' in ') > 0 ? this.recombine(param) : param)
-        } else {
-          return param
-        }
-      },
-      recombine (param) {
-        // 条件拼接数据，多用于in （）。将数组转成字符串时加上单引号处理
-        let str = ''
-        if (param && param.length > 0) {
-          param.forEach((p) => {
-            str += `'${p}',`
-          })
-        }
-        return `(${str.substring(0, str.length - 1)})`
-      },
-      checkValue (val) {
-        // 只有字符串才校验
-        if (!val || typeof (val) !== 'string') {
-          return false
-        }
-        for (let i = 0; i < this.character.length; i++) {
-          if (val.toLowerCase().indexOf(this.character[i]) !== -1) {
-            return true
-          }
-        }
-        return false
-      },
-      showDrawer() {
-        this.criteriaShow = true
-      },
-      closeDrawer() {
-        this.criteriaShow = false
-      },
-      // 清空查询条件
-      clear () {
-        this.model = {}
-      }
-    }
-  }
-</script>