├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── LICENSE ├── README.md ├── build ├── build.js ├── check-versions.js ├── logo.png ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js ├── webpack.prod.conf.js └── webpack.test.conf.js ├── config ├── dev.env.js ├── index.js ├── prod.env.js └── test.env.js ├── index.html ├── package.json ├── src ├── App.scss ├── App.vue ├── assets │ ├── fonts │ │ ├── icomoon.eot │ │ ├── icomoon.svg │ │ ├── icomoon.ttf │ │ └── icomoon.woff │ ├── image │ │ ├── 32px.png │ │ ├── 40px.png │ │ ├── add.png │ │ ├── add1.png │ │ ├── bg.jpg │ │ ├── board.png │ │ ├── board1.png │ │ ├── checked.png │ │ ├── del.png │ │ ├── edit.png │ │ ├── icon.png │ │ ├── icon1.png │ │ ├── img.png │ │ ├── left.png │ │ ├── logo.png │ │ ├── logoh.png │ │ ├── plugin.png │ │ ├── search.png │ │ ├── seeChart.png │ │ ├── set.png │ │ ├── set2.png │ │ ├── throbber.gif │ │ └── 添加图表1.png │ ├── logo-min.jpg │ └── logo.jpg ├── components │ ├── admin │ │ ├── cluster │ │ │ ├── node-list.scss │ │ │ ├── node-list.vue │ │ │ ├── queue-list.scss │ │ │ └── queue-list.vue │ │ └── plugin │ │ │ ├── create-plugin.vue │ │ │ ├── plugin-edit.vue │ │ │ ├── plugin-list.scss │ │ │ └── plugin-list.vue │ ├── alarm │ │ ├── buildrule │ │ │ ├── action-item.scss │ │ │ ├── action-item.vue │ │ │ ├── build-step1.scss │ │ │ ├── build-step1.vue │ │ │ ├── build-step2.scss │ │ │ ├── build-step2.vue │ │ │ ├── build-step3.scss │ │ │ ├── build-step3.vue │ │ │ ├── rule-item.scss │ │ │ └── rule-item.vue │ │ ├── event-detail-block.scss │ │ ├── event-detail-block.vue │ │ ├── event-rule-block.scss │ │ ├── event-rule-block.vue │ │ ├── rule-detail-modal.scss │ │ ├── rule-detail-modal.vue │ │ └── select-template.vue │ ├── charts │ │ ├── chart-list.scss │ │ ├── chart-list.vue │ │ ├── chart-table.scss │ │ ├── chart-table.vue │ │ ├── line-chart-block.scss │ │ ├── line-chart-block.vue │ │ ├── simple-table.scss │ │ └── simple-table.vue │ ├── common │ │ ├── multiple-select │ │ │ ├── multiple-select.scss │ │ │ └── multiple-select.vue │ │ ├── select-transfer.scss │ │ └── select-transfer.vue │ ├── console │ │ ├── chart-add.scss │ │ ├── chart-add.vue │ │ ├── chart-tag.scss │ │ └── chart-tag.vue │ ├── global-menu │ │ ├── global-menu.scss │ │ ├── global-menu.vue │ │ ├── sidebar-menu-shrink.vue │ │ └── sidebar-menu.vue │ ├── header │ │ ├── index.js │ │ ├── index.scss │ │ └── index.vue │ ├── layout-basic │ │ ├── index.js │ │ ├── index.scss │ │ └── index.vue │ ├── manage │ │ ├── create-user-group.vue │ │ ├── user-list.scss │ │ └── user-list.vue │ ├── metric │ │ ├── chart-tag.scss │ │ ├── chart-tag.vue │ │ ├── metric-set.scss │ │ └── metric-set.vue │ ├── monitor │ │ ├── create-host-group.vue │ │ ├── group-detail-strategy.scss │ │ ├── group-detail-strategy.vue │ │ ├── host-list.scss │ │ ├── host-list.vue │ │ ├── line-chart-item.scss │ │ ├── line-chart-item.vue │ │ ├── line-chart-list.scss │ │ ├── line-chart-list.vue │ │ ├── line-chart-single.scss │ │ └── line-chart-single.vue │ ├── page │ │ ├── calendar-select.scss │ │ ├── calendar-select.vue │ │ ├── paging.vue │ │ ├── sort-page.scss │ │ └── sort-page.vue │ └── step │ │ ├── step-vertical-square.scss │ │ ├── step-vertical-square.vue │ │ ├── step-vertical.scss │ │ └── step-vertical.vue ├── directives │ └── clickoutside.js ├── libs │ ├── bus.js │ └── utils.js ├── main.js ├── mixins │ └── core.js ├── models │ ├── index.js │ └── service.js ├── router │ ├── admin.vue │ ├── config.js │ ├── index.js │ └── main.vue ├── styles │ ├── base.scss │ ├── common.scss │ ├── components │ │ ├── box-header.scss │ │ ├── main-container.scss │ │ └── table-list.scss │ └── index.scss └── views │ ├── admin-cluster │ ├── cluster.scss │ └── cluster.vue │ ├── admin-log │ ├── admin-log.scss │ └── admin-log.vue │ ├── admin-manage │ ├── admin-user-list.scss │ └── admin-user-list.vue │ ├── admin-monitor │ ├── product-host.scss │ └── product-host.vue │ ├── admin-plugin │ ├── admin-plugin-list.scss │ ├── admin-plugin-list.vue │ ├── plugin-detail.scss │ └── plugin-detail.vue │ ├── admin-product │ ├── admin-product.scss │ ├── admin-product.vue │ ├── product-detail.scss │ └── product-detail.vue │ ├── admin-script │ ├── admin-script-list.scss │ └── admin-script-list.vue │ ├── admin-template │ ├── create-template.scss │ ├── create-template.vue │ ├── template-list.scss │ └── template-list.vue │ ├── alarm │ ├── alarm-event-list.scss │ ├── alarm-event-list.vue │ ├── alarm-strategy-list.scss │ ├── alarm-strategy-list.vue │ ├── build-strategy.scss │ ├── build-strategy.vue │ ├── event-detail.scss │ └── event-detail.vue │ ├── console │ ├── panel-detail.scss │ ├── panel-detail.vue │ ├── panel-list.scss │ └── panel-list.vue │ ├── login │ ├── login-index.scss │ ├── login-index.vue │ ├── login.scss │ ├── login.vue │ ├── product.scss │ └── product.vue │ ├── manage │ ├── manage-user-list.scss │ ├── manage-user-list.vue │ ├── user-group-detail.scss │ ├── user-group-detail.vue │ ├── user-group-list.scss │ └── user-group-list.vue │ ├── metric │ ├── metric-dashboard.scss │ ├── metric-dashboard.vue │ ├── metric-list.scss │ └── metric-list.vue │ └── monitor │ ├── group-detail.scss │ ├── group-detail.vue │ ├── host-detail.scss │ ├── host-detail.vue │ ├── host-plugin.scss │ ├── host-plugin.vue │ ├── monitor-group.scss │ ├── monitor-group.vue │ ├── monitor-host.scss │ └── monitor-host.vue ├── static ├── .gitkeep ├── favicon.ico └── image │ ├── 32px.png │ ├── 40px.png │ ├── add.png │ ├── add1.png │ ├── bg.jpg │ ├── board.png │ ├── board1.png │ ├── checked.png │ ├── del.png │ ├── edit.png │ ├── icon.png │ ├── icon1.png │ ├── img.png │ ├── left.png │ ├── logo.png │ ├── logoh.png │ ├── plugin.png │ ├── search.png │ ├── seeChart.png │ ├── set.png │ ├── set2.png │ ├── throbber.gif │ └── 添加图表1.png └── test ├── e2e ├── custom-assertions │ └── elementCount.js ├── nightwatch.conf.js ├── runner.js └── specs │ └── test.js └── unit ├── .eslintrc ├── index.js ├── karma.conf.js └── specs └── Hello.spec.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["istanbul"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | src/store 4 | src/models 5 | src/directives/*.js 6 | src/libs -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | extends: 'airbnb-base', 13 | // required to lint *.vue files 14 | plugins: [ 15 | 'html' 16 | ], 17 | // check if imports actually resolve 18 | 'settings': { 19 | 'import/resolver': { 20 | 'webpack': { 21 | 'config': 'build/webpack.base.conf.js' 22 | } 23 | } 24 | }, 25 | // add your custom rules here 26 | 'rules': { 27 | "no-console": 0, 28 | // don't require .vue extension when importing 29 | 'import/extensions': ['error', 'always', { 30 | 'js': 'never', 31 | 'vue': 'never' 32 | }], 33 | // allow optionalDependencies 34 | 'import/no-extraneous-dependencies': ['error', { 35 | 'optionalDependencies': ['test/unit/index.js'] 36 | }], 37 | // allow debugger during development 38 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | test/unit/coverage 8 | test/e2e/reports 9 | selenium-debug.log 10 | 11 | # Editor directories and files 12 | .idea 13 | *.suo 14 | *.ntvs* 15 | *.njsproj 16 | *.sln 17 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # owl 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8011 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | 20 | # run unit tests 21 | npm run unit 22 | 23 | # run e2e tests 24 | npm run e2e 25 | 26 | # run all tests 27 | npm test 28 | ``` 29 | 30 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 31 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // if you are using ts-loader, setting this to true will make tyescript errors show up during build 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/build/logo.png -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader', 51 | publicPath: '../../', 52 | }) 53 | } else { 54 | return ['vue-style-loader'].concat(loaders) 55 | } 56 | } 57 | 58 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 59 | return { 60 | css: generateLoaders(), 61 | postcss: generateLoaders(), 62 | less: generateLoaders('less'), 63 | sass: generateLoaders('sass', { indentedSyntax: true }), 64 | scss: generateLoaders('sass'), 65 | stylus: generateLoaders('stylus'), 66 | styl: generateLoaders('stylus') 67 | } 68 | } 69 | 70 | // Generate loaders for standalone style files (outside of .vue) 71 | exports.styleLoaders = function (options) { 72 | const output = [] 73 | const loaders = exports.cssLoaders(options) 74 | 75 | for (const extension in loaders) { 76 | const loader = loaders[extension] 77 | output.push({ 78 | test: new RegExp('\\.' + extension + '$'), 79 | use: loader 80 | }) 81 | } 82 | 83 | return output 84 | } 85 | 86 | exports.createNotifierCallback = () => { 87 | const notifier = require('node-notifier') 88 | 89 | return (severity, errors) => { 90 | if (severity !== 'error') return 91 | 92 | const error = errors[0] 93 | const filename = error.file && error.file.split('!').pop() 94 | 95 | notifier.notify({ 96 | title: packageConfig.name, 97 | message: severity + ': ' + error.name, 98 | subtitle: filename || '', 99 | icon: path.join(__dirname, 'logo.png') 100 | }) 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | const createLintingRule = () => ({ 12 | test: /\.(js|vue)$/, 13 | loader: 'eslint-loader', 14 | enforce: 'pre', 15 | include: [resolve('src'), resolve('test')], 16 | options: { 17 | formatter: require('eslint-friendly-formatter'), 18 | emitWarning: !config.dev.showEslintErrorsInOverlay 19 | } 20 | }) 21 | 22 | module.exports = { 23 | context: path.resolve(__dirname, '../'), 24 | entry: { 25 | app: './src/main.js' 26 | }, 27 | output: { 28 | path: config.build.assetsRoot, 29 | filename: '[name].js', 30 | publicPath: process.env.NODE_ENV === 'production' 31 | ? config.build.assetsPublicPath 32 | : config.dev.assetsPublicPath 33 | }, 34 | resolve: { 35 | extensions: ['.js', '.vue', '.json'], 36 | alias: { 37 | 'vue$': 'vue/dist/vue.esm.js', 38 | '@': resolve('src'), 39 | } 40 | }, 41 | module: { 42 | rules: [ 43 | ...(config.dev.useEslint ? [createLintingRule()] : []), 44 | { 45 | test: /\.vue$/, 46 | loader: 'vue-loader', 47 | options: vueLoaderConfig 48 | }, 49 | { 50 | test: /\.js$/, 51 | loader: 'babel-loader', 52 | include: [resolve('src'), resolve('test')] 53 | }, 54 | { 55 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 56 | loader: 'url-loader', 57 | options: { 58 | limit: 10000, 59 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 60 | } 61 | }, 62 | { 63 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 64 | loader: 'url-loader', 65 | options: { 66 | limit: 10000, 67 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 68 | } 69 | }, 70 | { 71 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 72 | loader: 'url-loader', 73 | options: { 74 | limit: 800000, 75 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 76 | } 77 | } 78 | ] 79 | }, 80 | node: { 81 | // prevent webpack from injecting useless setImmediate polyfill because Vue 82 | // source contains it (although only uses it if it's native). 83 | setImmediate: false, 84 | // prevent webpack from injecting mocks to Node native modules 85 | // that does not make sense for the client 86 | dgram: 'empty', 87 | fs: 'empty', 88 | net: 'empty', 89 | tls: 'empty', 90 | child_process: 'empty' 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const baseWebpackConfig = require('./webpack.base.conf') 7 | const HtmlWebpackPlugin = require('html-webpack-plugin') 8 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 9 | const portfinder = require('portfinder') 10 | 11 | const HOST = process.env.HOST 12 | const PORT = process.env.PORT && Number(process.env.PORT) 13 | 14 | const devWebpackConfig = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: config.dev.devtool, 20 | 21 | // these devServer options should be customized in /config/index.js 22 | devServer: { 23 | clientLogLevel: 'warning', 24 | historyApiFallback: true, 25 | hot: true, 26 | compress: true, 27 | host: HOST || config.dev.host, 28 | port: PORT || config.dev.port, 29 | open: config.dev.autoOpenBrowser, 30 | overlay: config.dev.errorOverlay 31 | ? { warnings: false, errors: true } 32 | : false, 33 | publicPath: config.dev.assetsPublicPath, 34 | proxy: config.dev.proxyTable, 35 | quiet: true, // necessary for FriendlyErrorsPlugin 36 | watchOptions: { 37 | poll: config.dev.poll, 38 | } 39 | }, 40 | plugins: [ 41 | new webpack.DefinePlugin({ 42 | 'process.env': require('../config/dev.env') 43 | }), 44 | new webpack.HotModuleReplacementPlugin(), 45 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 46 | new webpack.NoEmitOnErrorsPlugin(), 47 | // https://github.com/ampedandwired/html-webpack-plugin 48 | new HtmlWebpackPlugin({ 49 | filename: 'index.html', 50 | template: 'index.html', 51 | inject: true 52 | }), 53 | ] 54 | }) 55 | 56 | module.exports = new Promise((resolve, reject) => { 57 | portfinder.basePort = process.env.PORT || config.dev.port 58 | portfinder.getPort((err, port) => { 59 | if (err) { 60 | reject(err) 61 | } else { 62 | // publish the new Port, necessary for e2e tests 63 | process.env.PORT = port 64 | // add port to devServer config 65 | devWebpackConfig.devServer.port = port 66 | 67 | // Add FriendlyErrorsPlugin 68 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 69 | compilationSuccessInfo: { 70 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 71 | }, 72 | onErrors: config.dev.notifyOnErrors 73 | ? utils.createNotifierCallback() 74 | : undefined 75 | })) 76 | 77 | resolve(devWebpackConfig) 78 | } 79 | }) 80 | }) 81 | -------------------------------------------------------------------------------- /build/webpack.test.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // This is the webpack config used for unit tests. 3 | 4 | const utils = require('./utils') 5 | const webpack = require('webpack') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | 9 | const webpackConfig = merge(baseWebpackConfig, { 10 | // use inline sourcemap for karma-sourcemap-loader 11 | module: { 12 | rules: utils.styleLoaders() 13 | }, 14 | devtool: '#inline-source-map', 15 | resolveLoader: { 16 | alias: { 17 | // necessary to to make lang="scss" work in test when using vue-loader's ?inject option 18 | // see discussion at https://github.com/vuejs/vue-loader/issues/724 19 | 'scss-loader': 'sass-loader' 20 | } 21 | }, 22 | plugins: [ 23 | new webpack.DefinePlugin({ 24 | 'process.env': require('../config/test.env') 25 | }) 26 | ] 27 | }) 28 | 29 | // no need for app entry during tests 30 | delete webpackConfig.entry 31 | 32 | module.exports = webpackConfig 33 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.2.7 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8011, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | // Use Eslint Loader? 24 | // If true, your code will be linted during bundling and 25 | // linting errors and warnings will be shown in the console. 26 | useEslint: true, 27 | // If true, eslint errors and warnings will also be shown in the error overlay 28 | // in the browser. 29 | showEslintErrorsInOverlay: false, 30 | 31 | /** 32 | * Source Maps 33 | */ 34 | 35 | // https://webpack.js.org/configuration/devtool/#development 36 | devtool: 'eval-source-map', 37 | 38 | // If you have problems debugging vue-files in devtools, 39 | // set this to false - it *may* help 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 41 | cacheBusting: true, 42 | 43 | // CSS Sourcemaps off by default because relative paths are "buggy" 44 | // with this option, according to the CSS-Loader README 45 | // (https://github.com/webpack/css-loader#sourcemaps) 46 | // In our experience, they generally work as expected, 47 | // just be aware of this issue when enabling this option. 48 | cssSourceMap: false, 49 | }, 50 | 51 | build: { 52 | // Template for index.html 53 | index: path.resolve(__dirname, '../dist/index.html'), 54 | 55 | // Paths 56 | assetsRoot: path.resolve(__dirname, '../dist'), 57 | assetsSubDirectory: 'static', 58 | assetsPublicPath: './', 59 | 60 | /** 61 | * Source Maps 62 | */ 63 | 64 | productionSourceMap: false, 65 | // https://webpack.js.org/configuration/devtool/#production 66 | devtool: '#source-map', 67 | 68 | // Gzip off by default as many popular static hosts such as 69 | // Surge or Netlify already gzip all static assets for you. 70 | // Before setting to `true`, make sure to: 71 | // npm install --save-dev compression-webpack-plugin 72 | productionGzip: false, 73 | productionGzipExtensions: ['js', 'css'], 74 | 75 | // Run the build command with an extra argument to 76 | // View the bundle analyzer report after build finishes: 77 | // `npm run build --report` 78 | // Set to `true` or `false` to always turn it on or off 79 | bundleAnalyzerReport: process.env.npm_config_report 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const devEnv = require('./dev.env') 4 | 5 | module.exports = merge(devEnv, { 6 | NODE_ENV: '"testing"' 7 | }) 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | OWL 6 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "owl", 3 | "version": "1.0.0", 4 | "description": "owl system", 5 | "author": "junbing.guo ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 11 | "e2e": "node test/e2e/runner.js", 12 | "test": "npm run unit && npm run e2e", 13 | "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs", 14 | "build": "node build/build.js" 15 | }, 16 | "dependencies": { 17 | "apischema": "0.0.28", 18 | "async-validator": "^1.6.8", 19 | "axios": "^0.15.3", 20 | "highcharts": "^5.0.14", 21 | "highcharts-custom-events": "^2.0.20", 22 | "iview": "2.14.3", 23 | "js-cookie": "^2.1.4", 24 | "lodash": "^4.17.4", 25 | "md5": "^2.2.1", 26 | "normalize.css": "^5.0.0", 27 | "vue": "^2.5.13", 28 | "vue-router": "^3.0.1" 29 | }, 30 | "devDependencies": { 31 | "autoprefixer": "^7.1.2", 32 | "babel-core": "^6.22.1", 33 | "babel-eslint": "^7.1.1", 34 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 35 | "babel-loader": "^7.1.1", 36 | "babel-plugin-istanbul": "^4.1.1", 37 | "babel-plugin-syntax-jsx": "^6.18.0", 38 | "babel-plugin-transform-runtime": "^6.22.0", 39 | "babel-plugin-transform-vue-jsx": "^3.5.0", 40 | "babel-preset-env": "^1.3.2", 41 | "babel-preset-stage-2": "^6.22.0", 42 | "babel-register": "^6.22.0", 43 | "chai": "^4.1.2", 44 | "chalk": "^2.0.1", 45 | "chromedriver": "^2.27.2", 46 | "copy-webpack-plugin": "^4.0.1", 47 | "cross-env": "^5.0.1", 48 | "cross-spawn": "^5.0.1", 49 | "css-loader": "^0.28.0", 50 | "eslint": "^3.19.0", 51 | "eslint-config-airbnb-base": "^11.3.0", 52 | "eslint-friendly-formatter": "^3.0.0", 53 | "eslint-import-resolver-webpack": "^0.8.3", 54 | "eslint-loader": "^1.7.1", 55 | "eslint-plugin-html": "^3.0.0", 56 | "eslint-plugin-import": "^2.7.0", 57 | "extract-text-webpack-plugin": "^3.0.0", 58 | "file-loader": "^1.1.4", 59 | "friendly-errors-webpack-plugin": "^1.6.1", 60 | "html-webpack-plugin": "^2.30.1", 61 | "inject-loader": "^3.0.0", 62 | "karma": "^1.4.1", 63 | "karma-coverage": "^1.1.1", 64 | "karma-mocha": "^1.3.0", 65 | "karma-phantomjs-launcher": "^1.0.2", 66 | "karma-phantomjs-shim": "^1.4.0", 67 | "karma-sinon-chai": "^1.3.1", 68 | "karma-sourcemap-loader": "^0.3.7", 69 | "karma-spec-reporter": "0.0.31", 70 | "karma-webpack": "^2.0.2", 71 | "mocha": "^3.2.0", 72 | "nightwatch": "^0.9.12", 73 | "node-notifier": "^5.1.2", 74 | "node-sass": "^4.5.3", 75 | "optimize-css-assets-webpack-plugin": "^3.2.0", 76 | "ora": "^1.2.0", 77 | "phantomjs-prebuilt": "^2.1.14", 78 | "portfinder": "^1.0.13", 79 | "postcss-import": "^11.0.0", 80 | "postcss-loader": "^2.0.8", 81 | "rimraf": "^2.6.0", 82 | "sass-loader": "^6.0.3", 83 | "selenium-server": "^3.0.1", 84 | "semver": "^5.3.0", 85 | "shelljs": "^0.7.6", 86 | "sinon": "^4.0.0", 87 | "sinon-chai": "^2.8.0", 88 | "uglifyjs-webpack-plugin": "^1.1.1", 89 | "url-loader": "^0.5.8", 90 | "vue-loader": "^14.2.1", 91 | "vue-style-loader": "^3.0.1", 92 | "vue-template-compiler": "^2.5.13", 93 | "webpack": "^3.6.0", 94 | "webpack-bundle-analyzer": "^2.12.0", 95 | "webpack-dev-server": "^2.9.1", 96 | "webpack-merge": "^4.1.0" 97 | }, 98 | "engines": { 99 | "node": ">= 4.0.0", 100 | "npm": ">= 3.0.0" 101 | }, 102 | "browserslist": [ 103 | "> 1%", 104 | "last 2 versions", 105 | "not ie <= 8" 106 | ] 107 | } 108 | -------------------------------------------------------------------------------- /src/App.scss: -------------------------------------------------------------------------------- 1 | // layout 2 | @media screen and ( max-width:1024px ){ 3 | html{ 4 | min-width:1024px; 5 | min-height:580px; 6 | } 7 | .bodyStyle{ 8 | height:100%; 9 | width:100%; 10 | overflow: hidden; 11 | // background-image:url('assets/image/bg.jpg'); 12 | // background-repeat: no-repeat; 13 | background-size:100% 100%; 14 | // box-sizing:border-box; 15 | } 16 | } 17 | .bodyStyle { 18 | background-image: url('assets/image/bg.jpg'); 19 | background-repeat: no-repeat; 20 | background-size: cover; 21 | box-sizing: border-box; 22 | position: absolute; 23 | top: 0; 24 | bottom: 0; 25 | left: 0; 26 | right: 0; 27 | width: 100%; 28 | height: 100%; 29 | } 30 | .body-style-product { 31 | background: #f2f6ec; 32 | box-sizing: border-box; 33 | // position: absolute; 34 | // top: 0; 35 | // bottom: 0; 36 | // left: 0; 37 | // right: 0; 38 | width: 100%; 39 | height: 100%; 40 | } 41 | .parent-router { 42 | position: relative; 43 | width: 100%; 44 | height: auto; 45 | min-width: 1280px; 46 | } 47 | .parent-router-header { 48 | position: relative; 49 | width: 100%; 50 | margin-bottom: 55px; 51 | z-index: 100; 52 | } -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 33 | 37 | 38 | -------------------------------------------------------------------------------- /src/assets/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/fonts/icomoon.eot -------------------------------------------------------------------------------- /src/assets/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/fonts/icomoon.ttf -------------------------------------------------------------------------------- /src/assets/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/fonts/icomoon.woff -------------------------------------------------------------------------------- /src/assets/image/32px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/32px.png -------------------------------------------------------------------------------- /src/assets/image/40px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/40px.png -------------------------------------------------------------------------------- /src/assets/image/add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/add.png -------------------------------------------------------------------------------- /src/assets/image/add1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/add1.png -------------------------------------------------------------------------------- /src/assets/image/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/bg.jpg -------------------------------------------------------------------------------- /src/assets/image/board.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/board.png -------------------------------------------------------------------------------- /src/assets/image/board1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/board1.png -------------------------------------------------------------------------------- /src/assets/image/checked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/checked.png -------------------------------------------------------------------------------- /src/assets/image/del.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/del.png -------------------------------------------------------------------------------- /src/assets/image/edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/edit.png -------------------------------------------------------------------------------- /src/assets/image/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/icon.png -------------------------------------------------------------------------------- /src/assets/image/icon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/icon1.png -------------------------------------------------------------------------------- /src/assets/image/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/img.png -------------------------------------------------------------------------------- /src/assets/image/left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/left.png -------------------------------------------------------------------------------- /src/assets/image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/logo.png -------------------------------------------------------------------------------- /src/assets/image/logoh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/logoh.png -------------------------------------------------------------------------------- /src/assets/image/plugin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/plugin.png -------------------------------------------------------------------------------- /src/assets/image/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/search.png -------------------------------------------------------------------------------- /src/assets/image/seeChart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/seeChart.png -------------------------------------------------------------------------------- /src/assets/image/set.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/set.png -------------------------------------------------------------------------------- /src/assets/image/set2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/set2.png -------------------------------------------------------------------------------- /src/assets/image/throbber.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/throbber.gif -------------------------------------------------------------------------------- /src/assets/image/添加图表1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/image/添加图表1.png -------------------------------------------------------------------------------- /src/assets/logo-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/logo-min.jpg -------------------------------------------------------------------------------- /src/assets/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/src/assets/logo.jpg -------------------------------------------------------------------------------- /src/components/admin/cluster/node-list.scss: -------------------------------------------------------------------------------- 1 | .node-list { 2 | padding: 0 10px; 3 | &-title { 4 | font-weight: bold; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/components/admin/cluster/node-list.vue: -------------------------------------------------------------------------------- 1 | 5 | 32 | 162 | -------------------------------------------------------------------------------- /src/components/admin/cluster/queue-list.scss: -------------------------------------------------------------------------------- 1 | .queue-list { 2 | padding: 0 10px; 3 | &-title { 4 | font-weight: bold; 5 | } 6 | .ok-count { 7 | .ivu-badge-count { 8 | background: #19be6b !important; 9 | } 10 | } 11 | .alert-count { 12 | .ivu-badge-count { 13 | background: #ed3f14 !important; 14 | } 15 | } 16 | .unknow-count { 17 | .ivu-badge-count { 18 | background: #ff9900 !important; 19 | } 20 | } 21 | .nodata-count { 22 | .ivu-badge-count { 23 | background: #bbbec4 !important; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/components/admin/plugin/plugin-list.scss: -------------------------------------------------------------------------------- 1 | .plugin-list { 2 | width: 100%; 3 | // padding: 6px 10px 6px; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/alarm/buildrule/action-item.scss: -------------------------------------------------------------------------------- 1 | .action-item-view { 2 | width:100%; 3 | border:1px dashed #dce1e7; 4 | padding: 5px 5px 0; 5 | margin-bottom: 10px; 6 | textarea.ivu-input { 7 | font-size: 12px; 8 | } 9 | .show-x .ivu-select-dropdown { 10 | overflow-y: scroll; 11 | overflow-x: visible; 12 | } 13 | } -------------------------------------------------------------------------------- /src/components/alarm/buildrule/build-step1.scss: -------------------------------------------------------------------------------- 1 | .build-step-one { 2 | .brule-body-panel-rlueblock { 3 | width: 100%; 4 | // border-bottom: 1px dashed #e0e4ea; 5 | } 6 | .rule-block { 7 | width: 100%; 8 | } 9 | .brule-body-panel-footer { 10 | width: 100%; 11 | } 12 | .empty { 13 | width: 50%; 14 | height: 29px; 15 | border-right: 1px dashed #e0e4ea; 16 | } 17 | .brule-body-panel-footer-btn { 18 | width: 100%; 19 | text-align: center; 20 | } 21 | .build-des { 22 | textarea.ivu-input { 23 | font-size: 12px; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/components/alarm/buildrule/build-step2.scss: -------------------------------------------------------------------------------- 1 | .my-transfer { 2 | .ivu-transfer-list { 3 | width: 40%; 4 | } 5 | .ivu-transfer-operation { 6 | width: 20%; 7 | margin: 0; 8 | text-align: center; 9 | .ivu-btn { 10 | margin: 0 auto; 11 | } 12 | .ivu-btn:first-child { 13 | margin-bottom: 12px; 14 | } 15 | } 16 | } 17 | .span-title { 18 | font-size: 12px; 19 | } -------------------------------------------------------------------------------- /src/components/alarm/buildrule/build-step3.scss: -------------------------------------------------------------------------------- 1 | .my-transfer { 2 | .ivu-transfer-list { 3 | width: 40%; 4 | } 5 | .ivu-transfer-operation { 6 | width: 20%; 7 | margin: 0; 8 | text-align: center; 9 | .ivu-btn { 10 | margin: 0 auto; 11 | } 12 | .ivu-btn:first-child { 13 | margin-bottom: 12px; 14 | } 15 | } 16 | } 17 | .build-step3 { 18 | .build-dev-tag { 19 | padding: 8px 24px; 20 | margin-right: 10px; 21 | font-size: 14px; 22 | color: #464c5b; 23 | background-color: #eaeef2; 24 | } 25 | } -------------------------------------------------------------------------------- /src/components/alarm/buildrule/build-step3.vue: -------------------------------------------------------------------------------- 1 | 5 | 26 | 185 | -------------------------------------------------------------------------------- /src/components/alarm/buildrule/rule-item.scss: -------------------------------------------------------------------------------- 1 | .rule-item-view { 2 | width:100%; 3 | border:1px dashed #dce1e7; 4 | padding: 5px 5px 0; 5 | margin-bottom: 10px; 6 | .rule-title { 7 | width: 60px; 8 | padding-top: 1px; 9 | } 10 | .rule-title-label { 11 | background: #e7e7e7; 12 | color: #7d7d7d; 13 | display: block; 14 | width: 40px; 15 | height: 32px; 16 | line-height: 31px; 17 | font-size: 15px; 18 | text-align: center; 19 | margin-right: 10px; 20 | border-radius: 4px; 21 | position: relative; 22 | } 23 | .view-mid{ 24 | box-sizing: border-box; 25 | width:100%; 26 | height: auto; 27 | // padding: 10px; 28 | .error-info-text { 29 | position: absolute; 30 | top: 100%; 31 | left: 0; 32 | line-height: 1; 33 | padding-top: 6px; 34 | color: #ed3f14; 35 | white-space: nowrap; 36 | word-wrap: normal; 37 | } 38 | } 39 | .metric-main { 40 | .float-left { 41 | display: inline-block; 42 | } 43 | .info-word { 44 | color: #2d8cf0; 45 | } 46 | } 47 | .metric-block { 48 | height: 32px; 49 | line-height: 32px; 50 | margin-bottom: 28px; 51 | } 52 | .float-item { 53 | height: 32px; 54 | line-height: 32px; 55 | } 56 | .tag-block { 57 | color: #495060; 58 | display: inline-block; 59 | height: 22px; 60 | line-height: 20px; 61 | padding: 0 8px; 62 | border: 1px solid #e9eaec; 63 | border-radius: 3px; 64 | background: #f7f7f7; 65 | font-size: 12px; 66 | vertical-align: middle; 67 | opacity: 1; 68 | overflow: hidden; 69 | i { 70 | display: inline-block; 71 | font-size: 14px; 72 | transform: scale(1.42857143) rotate(0); 73 | cursor: pointer; 74 | margin-left: 8px; 75 | color: #666; 76 | opacity: .66; 77 | position: relative; 78 | top: 1px; 79 | cursor: pointer; 80 | } 81 | } 82 | .ivu-form-item-label { 83 | // background-color: #eaeef2; 84 | } 85 | .view-tag-item { 86 | .ivu-form-item-label { 87 | // font-size: 14px; 88 | // padding: 20px 12px 20px 0; 89 | // background-color: #f4f7fb; 90 | } 91 | } 92 | .ivu-form-item-label { 93 | // font-size: 14px; 94 | } 95 | .tag-content { 96 | // position: relative; 97 | // padding: 10px; 98 | // border: 1px solid #dce1e7; 99 | // background-color: #f4f7fb; 100 | } 101 | .view-mid-r-control{ 102 | box-sizing: border-box; 103 | padding-left:13px; 104 | border-bottom: 1px dashed #e0e4ea; 105 | button { 106 | color:#43a3fb; 107 | } 108 | } 109 | .character { 110 | display: inline-block; 111 | margin-left: 9px; 112 | margin-right: 9px; 113 | font-size: 14px; 114 | color: #9ea7b4; 115 | } 116 | .ivu-form-item-required .ivu-form-item-label:before { 117 | content: ''; 118 | display: inline-block; 119 | margin-right: 0; 120 | line-height: 1; 121 | font-family: SimSun; 122 | font-size: 12px; 123 | color: #ed3f14; 124 | } 125 | .ivu-auto-complete.ivu-select-dropdown { 126 | max-height: 200px; 127 | } 128 | } 129 | .layout { 130 | .layout-title { 131 | padding: 15px 0; 132 | background-color: #f4f7fb; 133 | text-align: center; 134 | } 135 | .layout-left { 136 | float: left; 137 | padding-right: 20px; 138 | width: 120px; 139 | } 140 | .layout-center { 141 | margin-left: 120px; 142 | padding: 10px 0; 143 | } 144 | } -------------------------------------------------------------------------------- /src/components/alarm/event-detail-block.scss: -------------------------------------------------------------------------------- 1 | .event-detail-box { 2 | position: relative; 3 | // padding-bottom: 5px; 4 | .event-detail-block { 5 | width: 100%; 6 | position: relative; 7 | border:1px solid #dce1e7; 8 | padding: 5px 5px 0; 9 | // margin-bottom: 10px; 10 | &.success { 11 | border-color: #19be6b; 12 | } 13 | &.close { 14 | // max-height: 135px; 15 | // overflow: hidden; 16 | } 17 | .event-detail-title { 18 | font-size: 14px; 19 | } 20 | .event-detail-item { 21 | border:1px dashed #dce1e7; 22 | padding: 5px; 23 | margin-bottom: 10px; 24 | } 25 | .float-item { 26 | height: 32px; 27 | line-height: 32px; 28 | } 29 | } 30 | .view-all-btn { 31 | position: absolute; 32 | left: 50%; 33 | margin-left: -8px; 34 | bottom: 7px; 35 | z-index: 9; 36 | background: #fff; 37 | } 38 | .ivu-btn { 39 | &.success { 40 | border: 2px solid #19be6b; 41 | } 42 | &.failure { 43 | border: 2px solid #f16543; 44 | } 45 | } 46 | } 47 | .show-user-modal { 48 | .show-user-title { 49 | border-bottom:1px solid #dce1e7; 50 | padding: 5px; 51 | margin-bottom: 10px; 52 | font-size: 14px; 53 | &-label { 54 | font-weight: bold; 55 | } 56 | } 57 | .show-content-title { 58 | padding: 10px; 59 | font-weight: bold; 60 | } 61 | textarea.ivu-input { 62 | font-size: 12px; 63 | } 64 | &.success { 65 | .ivu-input { 66 | border: 2px solid #19be6b; 67 | } 68 | } 69 | &.failure { 70 | .ivu-input { 71 | border: 2px solid #f16543; 72 | } 73 | 74 | } 75 | } -------------------------------------------------------------------------------- /src/components/alarm/event-rule-block.scss: -------------------------------------------------------------------------------- 1 | .event-rule-block { 2 | width:100%; 3 | border:1px dashed #dce1e7; 4 | padding: 5px; 5 | margin-bottom: 10px; 6 | .rule-title { 7 | width: 60px; 8 | padding-top: 1px; 9 | } 10 | .rule-title-label { 11 | background: #e7e7e7; 12 | color: #7d7d7d; 13 | display: block; 14 | width: 40px; 15 | height: 32px; 16 | line-height: 31px; 17 | font-size: 15px; 18 | text-align: center; 19 | margin-right: 10px; 20 | border-radius: 4px; 21 | position: relative; 22 | } 23 | .view-mid{ 24 | box-sizing: border-box; 25 | width:100%; 26 | height: auto; 27 | // padding: 10px; 28 | } 29 | .metric-main { 30 | .float-left { 31 | display: inline-block; 32 | } 33 | } 34 | .metric-block { 35 | height: 32px; 36 | line-height: 32px; 37 | // margin-bottom: 28px; 38 | } 39 | .float-item { 40 | height: 32px; 41 | line-height: 32px; 42 | } 43 | .tag-block { 44 | color: #495060; 45 | display: inline-block; 46 | height: 22px; 47 | line-height: 20px; 48 | padding: 0 8px; 49 | border: 1px solid #e9eaec; 50 | border-radius: 3px; 51 | background: #f7f7f7; 52 | font-size: 12px; 53 | vertical-align: middle; 54 | opacity: 1; 55 | overflow: hidden; 56 | i { 57 | display: inline-block; 58 | font-size: 14px; 59 | transform: scale(1.42857143) rotate(0); 60 | cursor: pointer; 61 | margin-left: 8px; 62 | color: #666; 63 | opacity: .66; 64 | position: relative; 65 | top: 1px; 66 | cursor: pointer; 67 | } 68 | } 69 | .view-mid-r-control{ 70 | box-sizing: border-box; 71 | padding-left:13px; 72 | border-bottom: 1px dashed #e0e4ea; 73 | button { 74 | color:#43a3fb; 75 | } 76 | } 77 | .character { 78 | display: inline-block; 79 | margin-left: 9px; 80 | margin-right: 9px; 81 | font-size: 14px; 82 | color: #9ea7b4; 83 | } 84 | .ivu-form-item-required .ivu-form-item-label:before { 85 | content: ''; 86 | display: inline-block; 87 | margin-right: 0; 88 | line-height: 1; 89 | font-family: SimSun; 90 | font-size: 12px; 91 | color: #ed3f14; 92 | } 93 | .ivu-auto-complete.ivu-select-dropdown { 94 | max-height: 200px; 95 | } 96 | } 97 | .layout { 98 | .layout-title { 99 | padding: 15px 0; 100 | background-color: #f4f7fb; 101 | text-align: center; 102 | } 103 | .layout-left { 104 | float: left; 105 | padding-right: 20px; 106 | width: 120px; 107 | } 108 | .layout-center { 109 | margin-left: 120px; 110 | padding: 10px 0; 111 | } 112 | } -------------------------------------------------------------------------------- /src/components/alarm/rule-detail-modal.scss: -------------------------------------------------------------------------------- 1 | .rule-detail-modal { 2 | .hidden { 3 | .ivu-table-cell { 4 | .ivu-poptip { 5 | width: 100%; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | overflow: hidden; 9 | } 10 | span { 11 | // text-overflow: ellipsis; 12 | // white-space: nowrap; 13 | // overflow: hidden; 14 | } 15 | .ivu-poptip-rel { 16 | // text-overflow: ellipsis; 17 | // white-space: nowrap; 18 | // overflow: hidden; 19 | } 20 | // .ivu-poptip-popper { 21 | // width: 300px; 22 | // } 23 | .word-break { 24 | word-wrap: break-word; 25 | white-space: normal; 26 | max-width: 300px; 27 | } 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /src/components/alarm/select-template.vue: -------------------------------------------------------------------------------- 1 | 6 | 31 | 184 | -------------------------------------------------------------------------------- /src/components/charts/chart-list.scss: -------------------------------------------------------------------------------- 1 | /* --------chart-view-lit---------- */ 2 | .chartBox { 3 | box-sizing: border-box; 4 | padding-bottom: 10px; 5 | float:left; 6 | } -------------------------------------------------------------------------------- /src/components/charts/chart-table.scss: -------------------------------------------------------------------------------- 1 | /* ---------edit-chart-move--------- */ 2 | .chart-table { 3 | width: 100%; 4 | height: 100%; 5 | // min-height: 500px; 6 | position: relative; 7 | background: #FFF; 8 | border: 1px solid #d8dce1; 9 | padding: 10px; 10 | margin-bottom: 10px; 11 | .table-title { 12 | font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; 13 | font-size: 14px; 14 | } 15 | .edit { 16 | // position: absolute; 17 | // right: 40px; 18 | // top: 5px; 19 | // z-index: 10; 20 | padding-right: 40px; 21 | .set-icon { 22 | display: inline-block; 23 | cursor: pointer; 24 | font-size: 14px; 25 | margin-left: 15px; 26 | color: #5aacff; 27 | border: 0 none; 28 | background: transparent; 29 | } 30 | .list-icon { 31 | float: left; 32 | margin-right: 10px; 33 | } 34 | .show-icon { 35 | cursor: pointer; 36 | float: right; 37 | font-size: 14px; 38 | } 39 | } 40 | .chart-select { 41 | position: absolute; 42 | left: 40px; 43 | top: 25px; 44 | z-index: 10; 45 | font-size: 14px; 46 | .chart-select-btn { 47 | margin-right: 10px; 48 | cursor: pointer; 49 | &.active { 50 | color: #5aacff; 51 | } 52 | } 53 | } 54 | /*没有数据显示*/ 55 | .null { 56 | position: absolute; 57 | top: 50%; 58 | width: 100%; 59 | text-align: center; 60 | font-size: 24px; 61 | font-weight: 600; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/components/charts/line-chart-block.scss: -------------------------------------------------------------------------------- 1 | /* ---------edit-chart-move--------- */ 2 | .line-chart-block { 3 | width: 100%; 4 | height: 100%; 5 | // min-height: 500px; 6 | position: relative; 7 | background: #FFF; 8 | border: 1px solid #d8dce1; 9 | margin-bottom: 10px; 10 | padding-bottom: 3px; 11 | .line-area { 12 | box-sizing: border-box; 13 | background: #FFF; 14 | min-height: 400px; 15 | span.highcharts-title { 16 | display: block !important; 17 | width: 50%; 18 | font-size: 14px !important; 19 | overflow: hidden; 20 | word-wrap: break-word !important; 21 | white-space: pre-wrap !important; 22 | } 23 | } 24 | .edit { 25 | position: absolute; 26 | right: 40px; 27 | top: 15px; 28 | z-index: 10; 29 | .set-icon { 30 | display: inline-block; 31 | cursor: pointer; 32 | font-size: 14px; 33 | margin-left: 15px; 34 | color: #5aacff; 35 | border: 0 none; 36 | background: transparent; 37 | } 38 | .list-icon { 39 | float: left; 40 | margin-right: 10px; 41 | } 42 | .show-icon { 43 | cursor: pointer; 44 | float: right; 45 | font-size: 14px; 46 | } 47 | } 48 | .chart-select { 49 | position: absolute; 50 | left: 40px; 51 | top: 25px; 52 | z-index: 10; 53 | font-size: 14px; 54 | .chart-select-btn { 55 | margin-right: 10px; 56 | cursor: pointer; 57 | &.active { 58 | color: #5aacff; 59 | } 60 | } 61 | } 62 | /*没有数据显示*/ 63 | .null { 64 | position: absolute; 65 | top: 50%; 66 | width: 100%; 67 | text-align: center; 68 | font-size: 24px; 69 | font-weight: 600; 70 | } 71 | } 72 | .line-chart-block-modal { 73 | .line-area { 74 | box-sizing: border-box; 75 | background: #FFF; 76 | min-height: 400px; 77 | span.highcharts-title { 78 | display: block !important; 79 | width: 50%; 80 | font-size: 14px !important; 81 | overflow: hidden; 82 | word-wrap: break-word !important; 83 | white-space: pre-wrap !important; 84 | } 85 | } 86 | } -------------------------------------------------------------------------------- /src/components/charts/simple-table.scss: -------------------------------------------------------------------------------- 1 | .my-table-list { 2 | position: relative; 3 | max-height: 320px; 4 | overflow-y: scroll; 5 | font-size: 12px; 6 | tfoot { 7 | td { 8 | text-align: center; 9 | } 10 | } 11 | .show-list-table { 12 | border-collapse: collapse; 13 | border-spacing: 0; 14 | width: 100%; 15 | border-spacing: 2px; 16 | border: 1px solid #e9eaec; 17 | margin: 10px 0; 18 | .ivu-table-cell {} 19 | th { 20 | background-color: #f8f8f9; 21 | height: 32px; 22 | box-sizing: border-box; 23 | text-align: left; 24 | text-overflow: ellipsis; 25 | vertical-align: middle; 26 | border-bottom: 1px solid #e9eaec; 27 | } 28 | tbody tr { 29 | // height: 40px; 30 | border-bottom: 1px solid #e9eaec; 31 | } 32 | td { 33 | height: 40px; 34 | vertical-align: middle; 35 | text-align: left; 36 | &.center-word { 37 | text-align: center; 38 | } 39 | } 40 | .table-row-cursor { 41 | cursor: pointer; 42 | } 43 | } 44 | } -------------------------------------------------------------------------------- /src/components/charts/simple-table.vue: -------------------------------------------------------------------------------- 1 | 4 | 27 | 108 | -------------------------------------------------------------------------------- /src/components/common/multiple-select/multiple-select.scss: -------------------------------------------------------------------------------- 1 | .multiple-select { 2 | .seclect-main { 3 | width: 100%; 4 | } 5 | .search-content { 6 | width: 100%; 7 | border: 1px solid #D7DDE4; 8 | border-radius: 4px; 9 | padding: 4px 0; 10 | background: #fff; 11 | &.disabled { 12 | background: #eee; 13 | .ivu-tag { 14 | .ivu-icon { 15 | cursor: not-allowed; 16 | } 17 | } 18 | } 19 | .ivu-tag { 20 | margin: 1px 3px; 21 | cursor: default; 22 | } 23 | } 24 | .selectd-list { 25 | float: left; 26 | .reset-btn { 27 | color: #aaa; 28 | } 29 | } 30 | .ms-input { 31 | border: none; 32 | outline: none; 33 | padding: 0 10px; 34 | line-height: 24px; 35 | height: 24px; 36 | // background: #ddd; 37 | &:disabled { 38 | background: transparent; 39 | } 40 | &::-webkit-input-placeholder { /* WebKit browsers */ 41 | color: #bbbec4; 42 | } 43 | &::-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 44 | color: #bbbec4; 45 | } 46 | &::-moz-placeholder { /* Mozilla Firefox 19+ */ 47 | color: #bbbec4; 48 | } 49 | &::-ms-input-placeholder { /* Internet Explorer 10+ */ 50 | color: #bbbec4; 51 | } 52 | } 53 | .type-area { 54 | float: left; 55 | width: 100%; 56 | overflow: hidden; 57 | box-sizing: content-box; 58 | .ms-input { 59 | width: inherit; 60 | } 61 | } 62 | .key-title { 63 | padding: 3px 5px; 64 | &.divided { 65 | border-top: 1px solid #e9eaec; 66 | } 67 | } 68 | .button-to-search { 69 | float: left; 70 | box-sizing: content-box; 71 | } 72 | .key-dropdown { 73 | // max-height: 200px; 74 | // overflow-y: auto; 75 | .key-dropdown-search { 76 | min-width: 120px; 77 | text-align: center; 78 | padding-top: 5px; 79 | } 80 | .key-dropdown-list { 81 | max-height: 200px; 82 | overflow-y: auto; 83 | } 84 | } 85 | .ivu-dropdown { 86 | width: 100%; 87 | } 88 | .ivu-dropdown-rel { 89 | width: inherit; 90 | } 91 | .ivu-select-dropdown { 92 | width: auto; 93 | } 94 | } 95 | 96 | -------------------------------------------------------------------------------- /src/components/common/select-transfer.scss: -------------------------------------------------------------------------------- 1 | .select-transfer { 2 | .seclect-main { 3 | width: 100%; 4 | } 5 | .search-content { 6 | width: 100%; 7 | border: 1px solid #D7DDE4; 8 | border-radius: 4px; 9 | padding: 4px 0; 10 | background: #fff; 11 | &.disabled { 12 | background: #eee; 13 | } 14 | .ivu-tag { 15 | margin: 0 3px; 16 | } 17 | } 18 | .selectd-list { 19 | float: left; 20 | .show-key-value { 21 | } 22 | .reset-btn { 23 | color: #aaa; 24 | } 25 | } 26 | .ms-input { 27 | border: none; 28 | outline: none; 29 | padding: 0 10px; 30 | line-height: 22px; 31 | height: 22px; 32 | // background: #ddd; 33 | &:disabled { 34 | background: transparent; 35 | } 36 | &::-webkit-input-placeholder { /* WebKit browsers */ 37 | color: #bbbec4; 38 | } 39 | &::-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 40 | color: #bbbec4; 41 | } 42 | &::-moz-placeholder { /* Mozilla Firefox 19+ */ 43 | color: #bbbec4; 44 | } 45 | &::-ms-input-placeholder { /* Internet Explorer 10+ */ 46 | color: #bbbec4; 47 | } 48 | } 49 | .type-area { 50 | float: left; 51 | width: 100%; 52 | overflow: hidden; 53 | box-sizing: content-box; 54 | .key-dropdown { 55 | // max-height: 200px; 56 | // overflow-y: auto; 57 | .key-dropdown-search { 58 | min-width: 120px; 59 | text-align: center; 60 | padding-top: 5px; 61 | } 62 | .key-dropdown-list { 63 | max-height: 200px; 64 | overflow-y: auto; 65 | } 66 | } 67 | .ivu-dropdown { 68 | width: 100%; 69 | } 70 | .ms-input { 71 | width: inherit; 72 | } 73 | .ivu-dropdown-rel { 74 | width: inherit; 75 | } 76 | .ivu-select-dropdown { 77 | width: auto; 78 | } 79 | } 80 | .key-title { 81 | padding: 3px 5px; 82 | &.divided { 83 | border-top: 1px solid #e9eaec; 84 | } 85 | } 86 | .button-to-search { 87 | float: left; 88 | box-sizing: content-box; 89 | } 90 | } 91 | 92 | -------------------------------------------------------------------------------- /src/components/console/chart-add.scss: -------------------------------------------------------------------------------- 1 | .chart-add { 2 | .ivu-modal-mask { 3 | z-index: 899; 4 | } 5 | .ivu-modal-wrap { 6 | z-index: 899; 7 | } 8 | /*搜索栏样式*/ 9 | .search-data { 10 | width: 100%; 11 | padding: 5px 15px; 12 | box-sizing: border-box; 13 | overflow: hidden; 14 | background: #f5f7f9; 15 | } 16 | .search-data-title { 17 | margin-left: 10px; 18 | } 19 | .data-body { 20 | padding: 10px 20px; 21 | box-sizing: border-box; 22 | // height: 69%; 23 | // max-height: 800px; 24 | // overflow: auto; 25 | } 26 | .element-item { 27 | padding-top: 20px; 28 | border-top: 1px dashed #dfe7f2; 29 | } 30 | .ivu-form-item .ivu-form-item { 31 | margin-bottom: 24px; 32 | } 33 | .host-form-item { 34 | .ivu-form-item-content { 35 | line-height: 1; 36 | } 37 | } 38 | } 39 | 40 | // .setdata { 41 | // height: 100%; 42 | // position: relative; 43 | // } 44 | -------------------------------------------------------------------------------- /src/components/console/chart-tag.scss: -------------------------------------------------------------------------------- 1 | .chart-tag { 2 | .without-bottom { 3 | margin-bottom: 0; 4 | } 5 | .ivu-select-dropdown { 6 | max-height: 100px; 7 | } 8 | .error-info-text { 9 | position: absolute; 10 | top: 100%; 11 | left: 0; 12 | line-height: 1; 13 | padding-top: 6px; 14 | color: #ed3f14; 15 | white-space: nowrap; 16 | word-wrap: normal; 17 | } 18 | .error-text { 19 | color: #ed3f14; 20 | line-height: 1.5; 21 | } 22 | } 23 | // ivu-select-dropdown ivu-select-dropdown-transfer ivu-auto-complete -------------------------------------------------------------------------------- /src/components/global-menu/global-menu.scss: -------------------------------------------------------------------------------- 1 | .ivu-shrinkable-menu { 2 | width: 100%; 3 | height: 100%; 4 | padding-top: 60px; 5 | transition: all .3s; 6 | .ivu-menu-vertical.ivu-menu-light:after { 7 | background: transparent; 8 | } 9 | .ivu-menu-submenu-title .ivu-icon, .ivu-menu-item .ivu-icon { 10 | width: 16px; 11 | } 12 | .ivu-menu-vertical { 13 | height: 100%; 14 | overflow: auto; 15 | .ivu-menu-item { 16 | &:hover { 17 | background: #ebf7ff; 18 | } 19 | } 20 | .ivu-menu-submenu-title { 21 | &:hover { 22 | background: #ebf7ff; 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/components/global-menu/global-menu.vue: -------------------------------------------------------------------------------- 1 | 5 | 23 | 109 | -------------------------------------------------------------------------------- /src/components/global-menu/sidebar-menu-shrink.vue: -------------------------------------------------------------------------------- 1 | 29 | 69 | -------------------------------------------------------------------------------- /src/components/global-menu/sidebar-menu.vue: -------------------------------------------------------------------------------- 1 | 5 | 28 | 129 | -------------------------------------------------------------------------------- /src/components/header/index.js: -------------------------------------------------------------------------------- 1 | import tHeader from './index.vue'; 2 | 3 | export default tHeader; 4 | -------------------------------------------------------------------------------- /src/components/header/index.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/index.scss"; 2 | 3 | .cursor-pointer { 4 | cursor: pointer; 5 | } 6 | .main-header { 7 | position: relative; 8 | z-index: 11; 9 | height: 60px; 10 | font-family: PingFangSC-Regular, "Microsoft Yahei"; 11 | background: #fff; 12 | // border-bottom: 1px solid #dddee1; 13 | box-shadow: 0 2px 1px 1px rgba(100, 100, 100, .1); 14 | .navicon-con { 15 | display: inline-block; 16 | margin: 6px; 17 | .ivu-btn-text:focus { 18 | box-shadow: none; 19 | } 20 | } 21 | .logo-con { 22 | height: 60px; 23 | padding: 8px; 24 | text-align: center; 25 | img { 26 | display: inline-block; 27 | width: auto; 28 | height: 44px; 29 | } 30 | } 31 | // .header-avator-con { 32 | // position: absolute; 33 | // top: 0; 34 | // right: 0; 35 | // @include size(auto, 100%); 36 | // .user-dropdown { 37 | // &-menu-con { 38 | // display: inline-block; 39 | // padding: 18px 0; 40 | // .main-user-name { 41 | // display: inline-block; 42 | // overflow: hidden; 43 | // text-align: right; 44 | // text-overflow: ellipsis; 45 | // word-break: keep-all; 46 | // white-space: nowrap; 47 | // vertical-align: middle; 48 | // } 49 | // } 50 | // &-innercon { 51 | // height: 100%; 52 | // padding-right: 16px; 53 | // } 54 | // } 55 | // } 56 | .bread-con { 57 | display: inline-block; 58 | // height: 100%; 59 | @include size(auto, 100%); 60 | } 61 | .personal-center { 62 | display: inline-block; 63 | // height: 100%; 64 | @include size(auto, 100%); 65 | .ivu-row-flex { 66 | height: 100%; 67 | } 68 | } 69 | .hnav-icon { 70 | // float: right; 71 | display: inline-block; 72 | box-sizing: border-box; 73 | font-size: 14px; 74 | padding: 0 15px; 75 | margin: 0 5px; 76 | // height: 55px; 77 | text-align: center; 78 | // line-height: 55px; 79 | // vertical-align: middle; 80 | cursor: pointer; 81 | } 82 | .hnav-icon:hover { 83 | color: #4683de; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/components/layout-basic/index.js: -------------------------------------------------------------------------------- 1 | import layoutBasic from './index.vue'; 2 | 3 | export default layoutBasic; 4 | -------------------------------------------------------------------------------- /src/components/layout-basic/index.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/index.scss"; 2 | 3 | .lock-screen-back { 4 | position: fixed; 5 | top: 50%; 6 | left: 50%; 7 | z-index: -1; 8 | border-radius: 50%; 9 | box-shadow: 0 0 0 0 #667aa6 inset; 10 | transition: all .3s; 11 | transform: translate(-50%, -50%); 12 | } 13 | 14 | .main { 15 | position: absolute; 16 | @include size(100%, 100%); 17 | .unlock-con { 18 | position: absolute; 19 | top: 50%; 20 | left: 50%; 21 | z-index: 11000; 22 | width: 0; 23 | height: 0; 24 | } 25 | .sidebar-menu-con { 26 | position: fixed; 27 | top: 0; 28 | left: 0; 29 | z-index: 21; 30 | height: 100%; 31 | transition: width .3s; 32 | border-right: 1px solid #dddee1; 33 | } 34 | .layout-text { 35 | position: absolute; 36 | display: inline-block; 37 | white-space: nowrap; 38 | } 39 | .main-hide-text .layout-text { 40 | display: none; 41 | } 42 | &-content-container { 43 | position: relative; 44 | } 45 | &-header-con { 46 | position: fixed; 47 | z-index: 20; 48 | box-sizing: border-box; 49 | display: block; 50 | @include size(100%, 60px); 51 | padding-left: 200px; 52 | // box-shadow: 0 2px 1px 1px rgba(100, 100, 100, .1); 53 | transition: padding .3s; 54 | } 55 | &-breadcrumb { 56 | padding: 8px 15px 0; 57 | } 58 | &-menu-left { 59 | height: 100%; 60 | background: #464c5b; 61 | transition: all .3s; 62 | } 63 | .single-page-con { 64 | position: absolute; 65 | top: 60px; 66 | right: 0; 67 | bottom: 0; 68 | z-index: 1; 69 | overflow: auto; 70 | transition: left .3s; 71 | &.unshrinked { 72 | min-width: 1080px; 73 | } 74 | &.shrinked { 75 | min-width: 1220px; 76 | } 77 | .single-page { 78 | margin: 10px; 79 | } 80 | } 81 | &-copy { 82 | padding: 10px 0 20px; 83 | color: #9ea7b4; 84 | text-align: center; 85 | } 86 | } 87 | 88 | .taglist-moving-animation-move { 89 | transition: transform .3s; 90 | } 91 | 92 | .logo-con { 93 | height: 60px; 94 | padding: 8px; 95 | text-align: center; 96 | cursor: pointer; 97 | // border-bottom: 1px solid #dddee1; 98 | // box-shadow: 0 2px 1px 1px rgba(100, 100, 100, .1); 99 | position: fixed; 100 | top: 0; 101 | left: 0; 102 | z-index: 901; 103 | img { 104 | display: inline-block; 105 | @include size(auto, 44px); 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /src/components/layout-basic/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 36 | 164 | -------------------------------------------------------------------------------- /src/components/manage/user-list.scss: -------------------------------------------------------------------------------- 1 | .user-list { 2 | .ok-count { 3 | .ivu-badge-count { 4 | background: #19be6b !important; 5 | } 6 | } 7 | .alert-count { 8 | .ivu-badge-count { 9 | background: #ed3f14 !important; 10 | } 11 | } 12 | .unknow-count { 13 | .ivu-badge-count { 14 | background: #ff9900 !important; 15 | } 16 | } 17 | .nodata-count { 18 | .ivu-badge-count { 19 | background: #bbbec4 !important; 20 | } 21 | } 22 | // ---------------------- 23 | // status 24 | .type{ 25 | position: relative; 26 | box-sizing: border-box; 27 | display: inline-block; 28 | padding-left: 15px; 29 | } 30 | .type:before { 31 | position: absolute; 32 | content: ""; 33 | top:18px; 34 | left: 1px; 35 | width:8px; 36 | height:8px; 37 | border-radius: 8px; 38 | } 39 | .high-bool:before{ 40 | background-color: #f36363; 41 | } 42 | .mid-bool:before{ 43 | background-color: #ff9000; 44 | } 45 | .low-bool:before{ 46 | background-color:#ffca29; 47 | } 48 | .suc-bool:before{ 49 | background-color:#00ff00; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/components/metric/chart-tag.scss: -------------------------------------------------------------------------------- 1 | .chart-tag-metric { 2 | .without-bottom { 3 | margin-bottom: 0; 4 | } 5 | .ivu-select-dropdown { 6 | max-height: 300px; 7 | } 8 | } 9 | // ivu-select-dropdown ivu-select-dropdown-transfer ivu-auto-complete -------------------------------------------------------------------------------- /src/components/metric/metric-set.scss: -------------------------------------------------------------------------------- 1 | .metric-set { 2 | /*搜索栏样式*/ 3 | .search-data { 4 | width: 100%; 5 | padding: 5px 15px; 6 | box-sizing: border-box; 7 | overflow: hidden; 8 | background: #f5f7f9; 9 | } 10 | .search-data-title { 11 | margin-left: 10px; 12 | } 13 | .metric-form { 14 | padding: 10px 20px; 15 | box-sizing: border-box; 16 | // height: 69%; 17 | // max-height: 400px; 18 | // overflow: auto; 19 | } 20 | .operate-area { 21 | border-top: 1px solid #dfe7f2; 22 | border-bottom: 1px solid #dfe7f2; 23 | padding: 5px 0; 24 | .operate-area-title { 25 | padding: 5px 0; 26 | font-size: 14px; 27 | font-weight: bold; 28 | } 29 | } 30 | .element-item { 31 | padding-top: 20px; 32 | border-top: 1px dashed #dfe7f2; 33 | } 34 | .ivu-form-item .ivu-form-item { 35 | margin-bottom: 24px; 36 | } 37 | .host-form-item { 38 | .ivu-form-item-content { 39 | line-height: 1; 40 | } 41 | } 42 | } 43 | 44 | // .setdata { 45 | // height: 100%; 46 | // position: relative; 47 | // } 48 | -------------------------------------------------------------------------------- /src/components/monitor/group-detail-strategy.scss: -------------------------------------------------------------------------------- 1 | .group-detail-strategy { 2 | &-title { 3 | font-weight: bold; 4 | } 5 | .rule-list { 6 | // status 7 | .ok-count { 8 | .ivu-badge-count { 9 | background: #19be6b !important; 10 | } 11 | } 12 | .alert-count { 13 | .ivu-badge-count { 14 | background: #ed3f14 !important; 15 | } 16 | } 17 | .unknow-count { 18 | .ivu-badge-count { 19 | background: #ff9900 !important; 20 | } 21 | } 22 | .nodata-count { 23 | .ivu-badge-count { 24 | background: #bbbec4 !important; 25 | } 26 | } 27 | // status 28 | .type{ 29 | position: relative; 30 | box-sizing: border-box; 31 | display: inline-block; 32 | padding-left: 15px; 33 | } 34 | .type:before { 35 | position: absolute; 36 | content: ""; 37 | top:18px; 38 | left: 1px; 39 | width:8px; 40 | height:8px; 41 | border-radius: 8px; 42 | } 43 | .high-bool:before{ 44 | background-color: #f36363; 45 | } 46 | .mid-bool:before{ 47 | background-color: #ff9000; 48 | } 49 | .low-bool:before{ 50 | background-color:#ffca29; 51 | } 52 | .suc-bool:before{ 53 | background-color:#00ff00; 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/components/monitor/group-detail-strategy.vue: -------------------------------------------------------------------------------- 1 | 5 | 29 | 183 | -------------------------------------------------------------------------------- /src/components/monitor/host-list.scss: -------------------------------------------------------------------------------- 1 | .common-host-list { 2 | width: 100%; 3 | padding: 6px 10px 6px; 4 | .host-list { 5 | // margin-top: 16px; 6 | .ivu-badge-count { 7 | z-index: 9; 8 | } 9 | .ok-count { 10 | .ivu-badge-count { 11 | background: #19be6b !important; 12 | } 13 | } 14 | .alert-count { 15 | .ivu-badge-count { 16 | background: #ed3f14 !important; 17 | } 18 | } 19 | .unknow-count { 20 | .ivu-badge-count { 21 | background: #ff9900 !important; 22 | } 23 | } 24 | .nodata-count { 25 | .ivu-badge-count { 26 | background: #bbbec4 !important; 27 | } 28 | } 29 | .add-count { 30 | .ivu-badge-count { 31 | background: #2d8cf0 !important; 32 | } 33 | } 34 | .ivu-tag { 35 | // height: auto; 36 | // line-height: 1; 37 | margin: 0 4px 0 0; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/components/monitor/line-chart-item.scss: -------------------------------------------------------------------------------- 1 | /* ---------edit-chart-move--------- */ 2 | .line-chart-item { 3 | width: 100%; 4 | height: 100%; 5 | // min-height: 500px; 6 | position: relative; 7 | background: #FFF; 8 | border: 1px solid #d8dce1; 9 | margin-bottom: 10px; 10 | padding-bottom: 3px; 11 | .line-area { 12 | box-sizing: border-box; 13 | background: #FFF; 14 | min-height: 400px; 15 | span.highcharts-title { 16 | display: block !important; 17 | width: 50%; 18 | font-size: 14px !important; 19 | overflow: hidden; 20 | word-wrap: break-word !important; 21 | white-space: pre-wrap !important; 22 | } 23 | } 24 | .edit { 25 | position: absolute; 26 | right: 40px; 27 | top: 15px; 28 | z-index: 10; 29 | .set-icon { 30 | display: inline-block; 31 | cursor: pointer; 32 | font-size: 14px; 33 | margin-left: 15px; 34 | color: #5aacff; 35 | border: 0 none; 36 | background: transparent; 37 | } 38 | .list-icon { 39 | float: left; 40 | margin-right: 10px; 41 | } 42 | .show-icon { 43 | cursor: pointer; 44 | float: right; 45 | font-size: 14px; 46 | } 47 | } 48 | .chart-select { 49 | position: absolute; 50 | left: 40px; 51 | top: 25px; 52 | z-index: 10; 53 | font-size: 14px; 54 | .chart-select-btn { 55 | margin-right: 10px; 56 | cursor: pointer; 57 | &.active { 58 | color: #5aacff; 59 | } 60 | } 61 | } 62 | /*没有数据显示*/ 63 | .null { 64 | position: absolute; 65 | top: 50%; 66 | width: 100%; 67 | text-align: center; 68 | font-size: 24px; 69 | font-weight: 600; 70 | } 71 | } 72 | .line-chart-block-modal { 73 | .line-area { 74 | box-sizing: border-box; 75 | background: #FFF; 76 | min-height: 400px; 77 | span.highcharts-title { 78 | display: block !important; 79 | width: 50%; 80 | font-size: 14px !important; 81 | overflow: hidden; 82 | word-wrap: break-word !important; 83 | white-space: pre-wrap !important; 84 | } 85 | } 86 | } -------------------------------------------------------------------------------- /src/components/monitor/line-chart-list.scss: -------------------------------------------------------------------------------- 1 | /* --------chart-view-lit---------- */ 2 | .line-chart-list { 3 | .chartBox { 4 | box-sizing: border-box; 5 | margin-bottom: 10px; 6 | float:left; 7 | &.hover { 8 | .highcharts-crosshair { 9 | visibility: visible; 10 | } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/monitor/line-chart-single.scss: -------------------------------------------------------------------------------- 1 | /* --------chart-view-lit---------- */ 2 | .line-chart-single { 3 | .chartBox { 4 | box-sizing: border-box; 5 | margin-bottom: 10px; 6 | width: 100%; 7 | &.hover { 8 | .highcharts-crosshair { 9 | visibility: visible; 10 | } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/page/calendar-select.scss: -------------------------------------------------------------------------------- 1 | .calendar-select{ 2 | display: inline-block; 3 | .choose-date{ 4 | display: inline-block; 5 | } 6 | .refresh-area { 7 | display: inline-block; 8 | color: #2d8cf0; 9 | } 10 | } -------------------------------------------------------------------------------- /src/components/page/paging.vue: -------------------------------------------------------------------------------- 1 | 27 | 92 | -------------------------------------------------------------------------------- /src/components/page/sort-page.scss: -------------------------------------------------------------------------------- 1 | .sort-page { 2 | display: inline-block; 3 | } -------------------------------------------------------------------------------- /src/components/page/sort-page.vue: -------------------------------------------------------------------------------- 1 | 4 | 12 | 67 | -------------------------------------------------------------------------------- /src/components/step/step-vertical-square.scss: -------------------------------------------------------------------------------- 1 | .step-vertical-square { 2 | width: 100%; 3 | position: relative; 4 | .step-bar { 5 | width: 100%; 6 | position: relative; 7 | margin-bottom: 3px; 8 | .step-header { 9 | cursor: pointer; 10 | margin: -3px 0 16px; 11 | font-size: 14px; 12 | } 13 | .step-icon { 14 | display: inline-block; 15 | min-width: 26px; 16 | height: 26px; 17 | line-height: 24px; 18 | margin-right: 8px; 19 | padding: 0 5px; 20 | // text-align: center; 21 | // border-radius: 50%; 22 | font-size: 14px; 23 | border: 1px solid #ccc; 24 | color: #ccc; 25 | } 26 | .step-status-icon { 27 | display: inline-block; 28 | width: 26px; 29 | height: 26px; 30 | line-height: 24px; 31 | margin-right: 8px; 32 | text-align: center; 33 | border-radius: 50%; 34 | // font-size: 14px; 35 | border: 1px solid #ccc; 36 | color: #ccc; 37 | // background-color: #2d8cf0; 38 | } 39 | .step-title { 40 | color: #999; 41 | display: inline-block; 42 | // margin-bottom: 4px; 43 | margin-top: 2px; 44 | padding-right: 10px; 45 | font-size: 14px; 46 | font-weight: 700; 47 | background: #fff; 48 | } 49 | .main-box { 50 | border-left: 3px solid #e9eaec; 51 | padding: 16px 8px 16px 32px; 52 | margin-left: 12px; 53 | margin-top: -16px; 54 | transition: border .5s ease; 55 | transform-origin: top; 56 | } 57 | &:last-child { 58 | .main-box { 59 | border: none; 60 | margin-left: 15px; 61 | } 62 | } 63 | &.open.done, &.close.done { 64 | .step-icon { 65 | border: 1px solid #2d8cf0; 66 | color: #fff; 67 | background-color: #2d8cf0; 68 | } 69 | } 70 | &.open.success, &.close.success { 71 | .step-icon { 72 | border: 1px solid #19be6b; 73 | color: #19be6b; 74 | // background-color: #19be6b; 75 | } 76 | } 77 | &.open.hidden-text, &.close.hidden-text { 78 | .step-icon { 79 | color: rgba(0, 0, 0, 0) !important; 80 | } 81 | } 82 | &.close { 83 | .step-icon { 84 | border: 1px solid #ccc; 85 | color: #ccc; 86 | } 87 | .step-title { 88 | color: #999; 89 | } 90 | .main-box { 91 | height: 0; 92 | // margin-top: -16px; 93 | padding-bottom: 0; 94 | overflow: hidden; 95 | } 96 | } 97 | &.open { 98 | .step-icon { 99 | border: 1px solid #2d8cf0; 100 | color: #2d8cf0; 101 | } 102 | .step-title { 103 | color: #666; 104 | } 105 | .main-box { 106 | height: auto; 107 | border-color: #2d8cf0; 108 | } 109 | } 110 | } 111 | } -------------------------------------------------------------------------------- /src/components/step/step-vertical-square.vue: -------------------------------------------------------------------------------- 1 | 5 | 24 | 113 | -------------------------------------------------------------------------------- /src/components/step/step-vertical.scss: -------------------------------------------------------------------------------- 1 | .step-vertical { 2 | width: 100%; 3 | position: relative; 4 | .step-bar { 5 | width: 100%; 6 | position: relative; 7 | margin-bottom: 3px; 8 | .step-header { 9 | cursor: pointer; 10 | margin: -3px 0 16px; 11 | font-size: 14px; 12 | } 13 | .step-icon { 14 | display: inline-block; 15 | min-width: 26px; 16 | height: 26px; 17 | line-height: 24px; 18 | margin-right: 8px; 19 | text-align: center; 20 | border-radius: 50%; 21 | font-size: 14px; 22 | border: 1px solid #ccc; 23 | color: #ccc; 24 | } 25 | .step-status-icon { 26 | display: inline-block; 27 | width: 26px; 28 | height: 26px; 29 | line-height: 24px; 30 | margin-right: 8px; 31 | text-align: center; 32 | border-radius: 50%; 33 | // font-size: 14px; 34 | border: 1px solid #ccc; 35 | color: #ccc; 36 | // background-color: #2d8cf0; 37 | } 38 | .step-title { 39 | color: #999; 40 | display: inline-block; 41 | // margin-bottom: 4px; 42 | margin-top: 2px; 43 | padding-right: 10px; 44 | font-size: 14px; 45 | font-weight: 700; 46 | background: #fff; 47 | } 48 | .main-box { 49 | border-left: 3px solid #e9eaec; 50 | padding: 16px 8px 16px 32px; 51 | margin-left: 12px; 52 | margin-top: -16px; 53 | transition: border .5s ease; 54 | transform-origin: top; 55 | } 56 | &:last-child { 57 | .main-box { 58 | border: none; 59 | margin-left: 15px; 60 | } 61 | } 62 | &.open.done, &.close.done { 63 | .step-icon { 64 | border: 1px solid #2d8cf0; 65 | color: #fff; 66 | background-color: #2d8cf0; 67 | } 68 | } 69 | &.open.success, &.close.success { 70 | .step-icon { 71 | border: 1px solid #19be6b; 72 | color: #fff; 73 | background-color: #19be6b; 74 | } 75 | } 76 | &.open.hidden-text, &.close.hidden-text { 77 | .step-icon { 78 | color: rgba(0, 0, 0, 0) !important; 79 | } 80 | } 81 | &.close { 82 | .step-icon { 83 | border: 1px solid #ccc; 84 | color: #ccc; 85 | } 86 | .step-title { 87 | color: #999; 88 | } 89 | .main-box { 90 | height: 0; 91 | // margin-top: -16px; 92 | padding-bottom: 0; 93 | overflow: hidden; 94 | } 95 | } 96 | &.open { 97 | .step-icon { 98 | border: 1px solid #2d8cf0; 99 | color: #2d8cf0; 100 | } 101 | .step-title { 102 | color: #666; 103 | } 104 | .main-box { 105 | height: auto; 106 | border-color: #2d8cf0; 107 | } 108 | } 109 | } 110 | } -------------------------------------------------------------------------------- /src/components/step/step-vertical.vue: -------------------------------------------------------------------------------- 1 | 5 | 23 | 112 | -------------------------------------------------------------------------------- /src/directives/clickoutside.js: -------------------------------------------------------------------------------- 1 | export default { 2 | bind(el, binding, vnode) { 3 | function documentHandler(e) { 4 | if (el.contains(e.target)) { 5 | return false; 6 | } 7 | if (binding.expression) { 8 | binding.value(e); 9 | } 10 | } 11 | el.__vueClickOutside__ = documentHandler; 12 | document.addEventListener('click', documentHandler); 13 | }, 14 | update() { 15 | 16 | }, 17 | unbind(el, binding) { 18 | document.removeEventListener('click', el.__vueClickOutside__); 19 | delete el.__vueClickOutside__; 20 | } 21 | }; 22 | 23 | -------------------------------------------------------------------------------- /src/libs/bus.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Cookies from 'js-cookie'; 3 | import md5 from 'md5'; 4 | // import cookie from 'js-cookie'; 5 | // eslint-disable-next-line 6 | Date.prototype.setStart = function() { 7 | this.setHours(0); 8 | this.setMinutes(0); 9 | this.setSeconds(0); 10 | }; 11 | // eslint-disable-next-line 12 | Date.prototype.setEnd = function() { 13 | this.setHours(23); 14 | this.setMinutes(59); 15 | this.setSeconds(59); 16 | }; 17 | 18 | export default new Vue({ 19 | data() { 20 | return { 21 | selectDate: [], // 选中的时间段 22 | emailReg: /^[a-zA-Z0-9]{1,10}@[a-zA-Z0-9]{1,5}\.[a-zA-Z0-9]{1,5}$/, 23 | // 创建策略信息 24 | buildRuleInfo: { 25 | triggers: [], 26 | actions: [], 27 | }, 28 | backtoRulelist: '', // 返回策略列表页信息 29 | role: md5(1), 30 | // 创建图表信息 31 | chartAddInfo: { 32 | metricTarget: [], 33 | }, 34 | }; 35 | }, 36 | methods: { 37 | // 获取初始化时间，默认最近一周 38 | getDefaultDate() { 39 | let start = this.getDays(-7); 40 | let end = this.getDays(0); 41 | start.setStart(); 42 | end.setEnd(); 43 | // let start = this.getHoursTime(-1); 44 | // let end = this.getHoursTime(0); 45 | start = this.timeFormate(start, 'yyyy-MM-dd hh:mm:ss'); 46 | end = this.timeFormate(end, 'yyyy-MM-dd hh:mm:ss'); 47 | this.selectDate = [start, end]; 48 | }, 49 | getHoursTime(hours) { 50 | const today = new Date().getTime(); 51 | const date = new Date(today + (hours * 60 * 60 * 1000)); 52 | return date; 53 | }, 54 | // 初始化日期 55 | getDays(days) { 56 | const today = new Date().getTime(); 57 | const date = new Date(today + (days * 24 * 60 * 60 * 1000)); 58 | return date; 59 | }, 60 | formatDate(date, type) { 61 | const yy = date.getFullYear(); 62 | const dateM = date.getMonth() + 1; 63 | const mm = dateM > 9 ? dateM : `0${dateM}`; 64 | const dateD = date.getDate(); 65 | const dd = dateD > 9 ? dateD : `0${dateD}`; 66 | if (type) { 67 | return `${yy}${type}${mm}${type}${dd}`; 68 | } 69 | return `${yy}${mm}${dd}`; 70 | }, 71 | timeFormate(date, fmt) { 72 | const time = new Date(date); 73 | let fm = fmt; 74 | // fmt 自定义格式,如：yy-MM-dd 75 | let week = ''; 76 | switch (time.getDay()) { 77 | case 0: 78 | week = '周日'; 79 | break; 80 | case 1: 81 | week = '周一'; 82 | break; 83 | case 2: 84 | week = '周二'; 85 | break; 86 | case 3: 87 | week = '周三'; 88 | break; 89 | case 4: 90 | week = '周四'; 91 | break; 92 | case 5: 93 | week = '周五'; 94 | break; 95 | case 6: 96 | week = '周六'; 97 | break; 98 | default: 99 | week = ''; 100 | break; 101 | } 102 | const o = { 103 | 'M+': time.getMonth() + 1, // 月份 104 | 'd+': time.getDate(), // 日 105 | 'h+': time.getHours(), // 小时 106 | 'm+': time.getMinutes(), // 分 107 | 's+': time.getSeconds(), // 秒 108 | 'q+': Math.floor((time.getMonth() + 3) / 3), // 季度 109 | S: time.getMilliseconds(), // 毫秒 110 | w: week, 111 | }; 112 | if (/(y+)/.test(fm)) { 113 | fm = fm.replace(RegExp.$1, (time.getFullYear().toString()).substr(4 - RegExp.$1.length)); 114 | } 115 | Object.keys(o).forEach((k) => { 116 | if (new RegExp(`(${k})`).test(fm)) { 117 | fm = fm.replace(RegExp.$1, (RegExp.$1.length === 1) ? 118 | (o[k]) : ((`00${o[k]}`).substr((`${o[k]}`).length))); 119 | } 120 | }); 121 | return fm; 122 | }, 123 | isEmptyObject(obj) { 124 | if (obj) { 125 | let name = ''; 126 | // eslint-disable-next-line 127 | for (name in obj) { return false; } 128 | return true; 129 | } 130 | return true; 131 | }, 132 | validateEmail(rule, value, callback) { 133 | if (value === '') { 134 | callback(new Error('请输入邮箱')); 135 | } else if (!this.emailReg.test(value)) { 136 | callback(new Error('邮箱格式不正确')); 137 | } else { 138 | callback(); 139 | } 140 | }, 141 | getNumStr(num) { 142 | if (num >= 1000) { 143 | const kbNum = num / 1000; 144 | if (kbNum >= 1000) { 145 | const mbNum = kbNum / 1000; 146 | if (mbNum > 1000) { 147 | const gbNum = mbNum / 1000; 148 | if (gbNum > 1000) { 149 | const tbNum = gbNum / 1000; 150 | if (tbNum > 1000) { 151 | const pbNum = tbNum / 1000; 152 | return `${pbNum.toFixed(2)}PB`; 153 | } 154 | return `${tbNum.toFixed(2)}TB`; 155 | } 156 | return `${gbNum.toFixed(2)}GB`; 157 | } 158 | return `${mbNum.toFixed(2)}MB`; 159 | } 160 | return `${kbNum.toFixed(2)}KB`; 161 | } 162 | return num.toFixed(2); 163 | }, 164 | }, 165 | created() { 166 | this.getDefaultDate(); 167 | }, 168 | computed: { 169 | isAdmin() { 170 | return this.role === Cookies.get('owl_role'); 171 | }, 172 | }, 173 | }); 174 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue'; 4 | import iView from 'iview'; 5 | import 'normalize.css'; 6 | import 'iview/dist/styles/iview.css'; 7 | import App from './App'; 8 | import router from './router'; 9 | 10 | Vue.use(iView); 11 | Vue.config.productionTip = false; 12 | 13 | /* eslint-disable no-new */ 14 | new Vue({ 15 | el: '#app', 16 | router, 17 | template: '', 18 | components: { App }, 19 | }); 20 | // eslint-disable-next-line 21 | Date.prototype.setStart = function() { 22 | this.setHours(0); 23 | this.setMinutes(0); 24 | this.setSeconds(0); 25 | }; 26 | // eslint-disable-next-line 27 | Date.prototype.setEnd = function() { 28 | this.setHours(23); 29 | this.setMinutes(59); 30 | this.setSeconds(59); 31 | }; 32 | -------------------------------------------------------------------------------- /src/mixins/core.js: -------------------------------------------------------------------------------- 1 | import md5 from 'md5'; 2 | 3 | export default { 4 | data() { 5 | return { 6 | roleMd5: md5(1), // 1是管理员,0是普通用户 7 | }; 8 | }, 9 | created() { 10 | this.getInitPage(); 11 | }, 12 | methods: { 13 | setInitPage(num) { 14 | const pageInfo = localStorage.getItem('owl_page_info'); 15 | const pageMap = pageInfo ? JSON.parse(pageInfo) : {}; 16 | pageMap.console_panel_list = num; 17 | localStorage.setItem('owl_page_info', JSON.stringify(pageMap)); 18 | }, 19 | getInitPage() { 20 | const pageInfo = localStorage.getItem('owl_page_info'); 21 | if (pageInfo) { 22 | const pageMap = JSON.parse(pageInfo); 23 | // const pageSize = pageMap.console_panel_list; 24 | const pageSize = pageMap.pageSize; 25 | if (pageSize) { 26 | this.filter.page_size = pageSize; 27 | } 28 | } 29 | }, 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /src/models/index.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Created by guojunbing on 2017/04/05,使用两个axios实例,有products和无products。 4 | */ 5 | import apischema from 'apischema'; 6 | import axios from 'axios'; 7 | // import Cookies from 'js-cookie'; 8 | import { Message } from 'iview'; 9 | import router from '../router/index'; 10 | 11 | const serviceInfo = { url: '', loginServer: '' }; 12 | 13 | switch (process.env.NODE_ENV) { 14 | case 'production': 15 | // eslint-disable-next-line 16 | serviceInfo.url = `${CONFIG.proUrl}/api/v1`; 17 | // eslint-disable-next-line 18 | serviceInfo.loginServer = CONFIG.proUrl; 19 | break; 20 | case 'development': 21 | // eslint-disable-next-line 22 | serviceInfo.url = `${CONFIG.devUrl}/api/v1`; 23 | // eslint-disable-next-line 24 | serviceInfo.loginServer = CONFIG.devUrl; 25 | break; 26 | default: 27 | // eslint-disable-next-line 28 | serviceInfo.url = `${CONFIG.devUrl}/api/v1`; 29 | // eslint-disable-next-line 30 | serviceInfo.loginServer = CONFIG.devUrl; 31 | break; 32 | } 33 | const http = axios.create({ 34 | baseURL: serviceInfo.url, 35 | headers: { 36 | 'Content-Type': 'application/json', 37 | Accept: 'application/json', 38 | }, 39 | withCredentials: true, 40 | // 2.登录以后,对token过期进行校验,以及token权限进行校验 41 | validateStatus(status) { 42 | if (status === 403) { 43 | Message.warning({ 44 | content: '您没有权限，请联系管理员', 45 | duration: 5, 46 | top: 66, 47 | closable: true, 48 | }); 49 | } 50 | return status; 51 | }, 52 | }); 53 | 54 | // 1.添加请求拦截器,初次进入页面没有tokcn的情况,前往talking页面登录 55 | // http.interceptors.request.use((config) => { 56 | // const obj = config; 57 | // // obj.headers.Authorization = Cookies.get('token'); 58 | // return obj; 59 | // }, error => Promise.reject(error)); 60 | 61 | // 添加响应拦截器 62 | http.interceptors.response.use((response) => { 63 | if (response.status === 200) { 64 | if (response.data.code === 401) { 65 | if (response.data.link) { 66 | Message.warning('认证失败，请先登录!'); 67 | window.location.href = response.data.link; 68 | } else { 69 | router.push({ 70 | path: '/index/timeout', 71 | }); 72 | } 73 | } 74 | } else if (response.data.code === 401) { 75 | // token过期,前往talking进行登录 76 | if (response.data.link) { 77 | Message.warning('认证失败，请先登录!'); 78 | window.location.href = response.data.link; 79 | } else { 80 | router.push({ 81 | path: '/index/timeout', 82 | }); 83 | } 84 | } 85 | return response; 86 | }, error => Promise.reject(error), 87 | ); 88 | 89 | const schema = apischema({ http }); 90 | // export default apischema({ http }); 91 | 92 | export { serviceInfo, schema }; 93 | -------------------------------------------------------------------------------- /src/router/admin.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | import Cookies from 'js-cookie'; 4 | import md5 from 'md5'; 5 | import Main from './main'; 6 | import Admin from './admin'; 7 | import { menu, adminMenu, otherRouter } from './config'; 8 | 9 | // 设置子路由 10 | menu.forEach((m) => { 11 | // eslint-disable-next-line 12 | m.component = Main; 13 | }); 14 | // 管理员页面 15 | adminMenu.forEach((am) => { 16 | // eslint-disable-next-line 17 | am.component = Admin; 18 | }); 19 | 20 | Vue.use(Router); 21 | 22 | const router = new Router({ 23 | routes: [...otherRouter, ...menu, ...adminMenu], 24 | }); 25 | // 权限判断 26 | const roleStr = md5(1); 27 | router.beforeEach((to, from, next) => { 28 | const role = Cookies.get('owl_role'); 29 | if (to.path.indexOf('admin') > -1) { 30 | if (role === roleStr) { 31 | next(); 32 | } else { 33 | next(false); 34 | } 35 | } else { 36 | next(); 37 | } 38 | }); 39 | export default router; 40 | -------------------------------------------------------------------------------- /src/router/main.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | -------------------------------------------------------------------------------- /src/styles/base.scss: -------------------------------------------------------------------------------- 1 | // Text indent, margins, and paddings from 0-50px in 1px increments 2 | // e.g. in-10 - {text-indent: 10px} 3 | // e.g. p-10 - {padding: 10px} 4 | // e.g. mt-20 - {margin-top: 20px} 5 | $spacing-property-map: ( 6 | m: margin, 7 | mt: margin-top, 8 | mr: margin-right, 9 | ml: margin-left, 10 | mb: margin-bottom, 11 | p: padding, 12 | pt: padding-top, 13 | pb: padding-bottom, 14 | pl: padding-left, 15 | pr: padding-right, 16 | ); 17 | 18 | @for $size from 0 through 50 { 19 | $val: $size; 20 | .in-#{$val} { text-indent: 1px * $val; } 21 | 22 | @each $keyword, $property in $spacing-property-map { 23 | .#{$keyword}-#{$val} { 24 | #{$property}: $val * 1px !important; 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /src/styles/common.scss: -------------------------------------------------------------------------------- 1 | @charset 'utf-8'; 2 | /*RESET v3*/ 3 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, cite, img, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 4 | border: 0; 5 | /*font: inherit;*/ 6 | margin: 0; 7 | padding: 0; 8 | font-weight: normal; 9 | vertical-align: baseline; 10 | } 11 | html, body{ 12 | height:100%; 13 | } 14 | html{ 15 | /*10 ÷ 16 × 100% = 62.5% 16 | * 1rem = 10px; 17 | * 移动端改变字体时简单易用 18 | */ 19 | /*font-size:20px;*/ 20 | font-size: 62.5%; 21 | /*width:62.5%;*/ 22 | /*height:62.5%;*/ 23 | } 24 | body { 25 | min-width: 1280px; 26 | font-family:'Microsoft Yahei'; 27 | } 28 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | button { 32 | outline: none; 33 | cursor:pointer; 34 | } 35 | ol,ul{ 36 | margin: 0; 37 | padding: 0; 38 | } 39 | ol, ul, li { 40 | list-style: none; 41 | } 42 | i, em { 43 | font-style: normal; 44 | } 45 | blockquote { 46 | quotes: none; 47 | } 48 | blockquote:before, blockquote:after { 49 | content: ''; 50 | content: none; 51 | } 52 | a { 53 | outline: none; 54 | text-decoration: none; 55 | text-decoration:none; 56 | text-decoration: none; 57 | } 58 | 59 | select, option{ 60 | font-family: inherit; 61 | } 62 | option { 63 | appearance:none; 64 | -moz-appearance: none; /* Firefox */ 65 | -webkit-appearance:none; /* Safari 和 Chrome */ 66 | } 67 | .noselect{ 68 | -webkit-user-select: none; 69 | user-select: none; 70 | } 71 | .clear { 72 | clear: both; 73 | } 74 | 75 | .clearfix:before,.clearfix:after{ 76 | content:""; 77 | display:table; 78 | } 79 | .clearfix:after{ 80 | clear:both; 81 | } 82 | .clearfix{ 83 | *zoom:1; 84 | } 85 | ::-webkit-scrollbar { 86 | width: 8px; 87 | height: 8px; 88 | } 89 | 90 | ::-webkit-scrollbar-thumb { 91 | border-radius: 10px; 92 | background: #a9a9a9; 93 | } 94 | .scroll{ 95 | box-sizing: border-box; 96 | min-height: 30px; 97 | overflow-y: auto; 98 | overflow-x: hidden; 99 | } 100 | .scroll::-webkit-scrollbar { 101 | width: 8px; 102 | } 103 | .scroll::-webkit-scrollbar-track { 104 | background-color: #ffffff; 105 | } /* 滚动条的滑轨背景颜色 */ 106 | 107 | .scroll::-webkit-scrollbar-thumb { 108 | background-color: #999; 109 | } /* 滑块颜色 */ 110 | 111 | .scroll::-webkit-scrollbar-button { 112 | background-color: #ffffff; 113 | } /* 滑轨两头的监听按钮颜色 */ 114 | 115 | .common-float-left { 116 | float: left; 117 | } 118 | .float-left { 119 | float: left; 120 | } 121 | .common-float-right { 122 | float: right; 123 | } 124 | .float-right { 125 | float: right; 126 | } 127 | .text-center { 128 | text-align: center; 129 | } 130 | .shadow-background{ 131 | position: fixed; 132 | left:0; 133 | top:0; 134 | z-index: 200; 135 | width:100%; 136 | height:100%; 137 | background-color:rgba(32,35,53,0.6); 138 | } 139 | .cursor-pointer { 140 | cursor: pointer; 141 | } 142 | .ivu-input-icon { 143 | cursor: pointer; 144 | } 145 | .ivu-select-dropdown-transfer { 146 | max-height: 180px !important; 147 | } 148 | // table特殊格式 149 | .ivu-table td { 150 | .ivu-table-cell { 151 | .status { 152 | position: relative; 153 | line-height: 1; 154 | i { 155 | display: inline-block; 156 | width: 6px; 157 | height: 6px; 158 | border-radius: 6px; 159 | margin-right: 3px; 160 | margin-bottom: 3px; 161 | vertical-align: middle; 162 | &.fail-status { 163 | background: #fe7847; 164 | } 165 | &.normal-status { 166 | background: #1fce6d; 167 | } 168 | &.disable-status { 169 | background: #f6a234; 170 | } 171 | &.new-status { 172 | background: #5697f1; 173 | } 174 | } 175 | } 176 | } 177 | .error-font { 178 | color: #ED6A6A; 179 | } 180 | } 181 | .un-required.ivu-form-item-required .ivu-form-item-label:before { 182 | content: '' !important; 183 | display: inline-block; 184 | margin-right: 4px; 185 | line-height: 1; 186 | font-family: SimSun; 187 | font-size: 12px; 188 | color: #ed3f14; 189 | } 190 | .brule { 191 | .ivu-input[disabled], fieldset[disabled] .ivu-input { 192 | color: #495060; 193 | } 194 | .ivu-select-disabled .ivu-select-selection { 195 | color: #495060; 196 | } 197 | .ivu-input-number-input[disabled] { 198 | color: #495060; 199 | } 200 | } 201 | .demo-spin-icon-load { 202 | animation: ani-demo-spin 1s linear infinite; 203 | } 204 | @keyframes ani-demo-spin { 205 | from { transform: rotate(0deg);} 206 | 50% { transform: rotate(180deg);} 207 | to { transform: rotate(360deg);} 208 | } -------------------------------------------------------------------------------- /src/styles/components/box-header.scss: -------------------------------------------------------------------------------- 1 | .box { 2 | .box-header { 3 | box-sizing: border-box; 4 | width: 100%; 5 | height: 50px; 6 | line-height: 50px; 7 | padding: 0 20px; 8 | color: #464c5b; 9 | background-color: #fff; 10 | &.t-fixed { 11 | min-width: 1024px; 12 | position: fixed; 13 | top: 55px; 14 | background: #fff; 15 | z-index: 200; 16 | } 17 | } 18 | 19 | .box-header-title { 20 | display: inline-block; 21 | height: 100%; 22 | margin-right: 39px; 23 | font-size: 16px; 24 | font-weight: bold; 25 | line-height: 50px; 26 | } 27 | 28 | .box-border-r { 29 | border-right: 1px solid #dfe7f2; 30 | } 31 | 32 | .box-border-l { 33 | border-left: 1px solid #dfe7f2; 34 | } 35 | .box-header-tool { 36 | float: right; 37 | height: 50px; 38 | line-height: 50px; 39 | font-size: 14px; 40 | } 41 | 42 | .box-header-tool>input { 43 | display: inline-block; 44 | box-sizing: border-box; 45 | height: 36px; 46 | margin-left: 14px; 47 | border: 2px solid #dfe7f2; 48 | border-radius: 5px; 49 | padding-left: 5px; 50 | padding-right: 24px; 51 | } 52 | 53 | .box-header-tool>span { 54 | box-sizing: border-box; 55 | display: inline-block; 56 | height: 36px; 57 | margin-left: 14px; 58 | padding: 0 24px; 59 | line-height: 30px; 60 | border: 2px solid #dfe7f2; 61 | cursor: pointer; 62 | border-radius: 5px; 63 | } 64 | } -------------------------------------------------------------------------------- /src/styles/components/main-container.scss: -------------------------------------------------------------------------------- 1 | .main-container { 2 | // margin-top: 55px; 3 | .common-detail-top-fixed { 4 | position: fixed; 5 | z-index: 11; 6 | top: 60px; 7 | box-sizing: border-box; 8 | // width: 100%; 9 | right: 0; 10 | transition: left .3s; 11 | @at-root .shrinked & { 12 | left: 60px; 13 | } 14 | @at-root .unshrinked & { 15 | left: 200px; 16 | } 17 | } 18 | .tabs-fixed { 19 | &.ivu-tabs { 20 | overflow: visible; 21 | } 22 | .ivu-tabs-bar { 23 | position: fixed; 24 | top: 110px; 25 | z-index: 10; 26 | // width: 100%; 27 | padding-top: 10px; 28 | background: #fff; 29 | right: 0; 30 | transition: left .3s; 31 | @at-root .shrinked & { 32 | left: 60px; 33 | } 34 | @at-root .unshrinked & { 35 | left: 200px; 36 | } 37 | } 38 | .ivu-tabs-content { 39 | margin-top: 50px; 40 | padding: 6px 10px 0; 41 | height: auto; 42 | height: 100%; 43 | overflow: visible; 44 | .ivu-tabs-tabpane { 45 | height: 100%; 46 | overflow: visible; 47 | } 48 | } 49 | } 50 | } 51 | .main-list-content { 52 | width: 100%; 53 | padding: 6px 10px 6px; 54 | position: relative; 55 | -webkit-box-sizing: border-box; 56 | } -------------------------------------------------------------------------------- /src/styles/components/table-list.scss: -------------------------------------------------------------------------------- 1 | /* 规则列表样式 */ 2 | .table-list { 3 | width: 100%; 4 | box-sizing: border-box; 5 | .view-detail { 6 | color: #2d8cf0; 7 | cursor: pointer; 8 | } 9 | &-header { 10 | // width: 100%; 11 | position: relative; 12 | .float-left { 13 | position: relative; 14 | } 15 | } 16 | .box-content-title, .box-content-body{ 17 | background-color: #f4f7fb; 18 | border: 1px solid #dfe7f2; 19 | } 20 | .box-content-title{ 21 | font-size:14px; 22 | .title-th { 23 | border-right: 1px solid #dfe7f2; 24 | padding-left: 10px; 25 | color:#464c5b; 26 | font-weight: 700; 27 | height: 45px; 28 | line-height: 45px; 29 | &:last-child { 30 | border: none; 31 | } 32 | } 33 | } 34 | // ---------------------- 35 | .box-content-body{ 36 | font-size:12px; 37 | background: #fff; 38 | border-top: none; 39 | border-bottom: none; 40 | // line-height: 44px; 41 | .box-content-item { 42 | padding: 10px 0; 43 | box-sizing: border-box; 44 | border-bottom: 1px solid #dfe7f2; 45 | // cursor: pointer; 46 | .cursor-pointer { 47 | cursor: pointer; 48 | } 49 | &.disabled { 50 | // background: #bbbec4; 51 | background: #f8f8f9; 52 | cursor: not-allowed !important; 53 | } 54 | .ivu-icon, .ivu-badge { 55 | cursor: pointer; 56 | } 57 | &:hover { 58 | .operate-item { 59 | display: block; 60 | } 61 | } 62 | } 63 | .operate-item { 64 | display: none; 65 | .ivu-icon { 66 | &:hover { 67 | color: #39f; 68 | } 69 | } 70 | .ivu-tooltip-rel { 71 | // vertical-align: middle; 72 | } 73 | } 74 | .body-td { 75 | word-wrap: break-word; 76 | text-overflow: ellipsis; 77 | white-space: nowrap; 78 | // box-sizing: border-box; 79 | &.hedden-td { 80 | overflow: hidden; 81 | } 82 | &.hidden-td { 83 | overflow: hidden; 84 | } 85 | &.width-limit { 86 | .ivu-poptip { 87 | width: 100%; 88 | } 89 | .ivu-poptip-rel { 90 | max-width: 100%; 91 | span { 92 | width: 100%; 93 | display: inline-block; 94 | overflow: hidden; 95 | word-wrap: break-word; 96 | text-overflow: ellipsis; 97 | white-space: nowrap; 98 | // box-sizing: border-box; 99 | } 100 | } 101 | .ivu-poptip-popper { 102 | z-index: 8; 103 | } 104 | } 105 | } 106 | .ivu-col{ 107 | vertical-align: middle; 108 | padding: 0 10px; 109 | } 110 | } 111 | .footer { 112 | margin-top: 10px; 113 | } 114 | // ------------table---------- 115 | .ivu-table-small th { 116 | height: 45px; 117 | .ivu-table-cell { 118 | font-size: 14px; 119 | span { 120 | color: #464c5b; 121 | font-weight: 700; 122 | } 123 | } 124 | } 125 | .ivu-table-header { 126 | background-color: #f4f7fb; 127 | th { 128 | background-color: #f4f7fb; 129 | } 130 | } 131 | .cursor-ivu-row { 132 | cursor: pointer; 133 | &.disabled { 134 | td { 135 | // background: #f3f3f3; 136 | // *:not(sup) { 137 | // color: #ccc !important; 138 | // } 139 | // background: #f8f8f9; 140 | cursor: not-allowed !important; 141 | } 142 | } 143 | } 144 | .show-ivu-row { 145 | &.disabled { 146 | td { 147 | // background: #f3f3f3; 148 | // *:not(sup) { 149 | // color: #ccc !important; 150 | // } 151 | // background: #f8f8f9; 152 | cursor: not-allowed !important; 153 | } 154 | } 155 | } 156 | .ivu-table-cell { 157 | padding-right: 10px; 158 | padding-left: 10px; 159 | .ivu-icon { 160 | cursor: pointer; 161 | } 162 | .width-limit { 163 | .ivu-poptip { 164 | width: 100%; 165 | } 166 | .ivu-poptip-rel { 167 | max-width: 100%; 168 | span { 169 | width: 100%; 170 | display: inline-block; 171 | overflow: hidden; 172 | word-wrap: break-word; 173 | text-overflow: ellipsis; 174 | white-space: nowrap; 175 | // box-sizing: border-box; 176 | } 177 | } 178 | .ivu-poptip-popper { 179 | z-index: 8; 180 | } 181 | } 182 | } 183 | .ivu-table-column-center { 184 | .ivu-checkbox-wrapper { 185 | margin-right: 0; 186 | } 187 | } 188 | } -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import 'common.scss'; 2 | @import 'base.scss'; 3 | @import 'components/box-header.scss'; 4 | @import 'components/main-container.scss'; 5 | @import 'components/table-list.scss'; 6 | // @import 'fonts/reset.scss'; 7 | // @import 'fonts/ownfont.scss'; 8 | // @import 'fonts/newfont.css'; 9 | // @import 'components/calendar-select.scss'; 10 | 11 | @mixin size($width, $height: $width) { 12 | width: $width; 13 | height: $height; 14 | } 15 | -------------------------------------------------------------------------------- /src/views/admin-cluster/cluster.scss: -------------------------------------------------------------------------------- 1 | .cluster { 2 | position: relative; 3 | width: 100%; 4 | .ivu-form-item-required .ivu-form-item-label:before { 5 | content: ''; 6 | display: inline-block; 7 | margin-right: 0; 8 | line-height: 1; 9 | font-family: SimSun; 10 | font-size: 12px; 11 | color: #ed3f14; 12 | } 13 | .float-item { 14 | height: 32px; 15 | line-height: 32px; 16 | } 17 | .metric-block { 18 | height: 32px; 19 | line-height: 32px; 20 | margin-bottom: 28px; 21 | } 22 | .common-detail-top { 23 | height: 50px; 24 | padding: 0 20px; 25 | background-color: #fff; 26 | line-height: 50px; 27 | font-size: 14px; 28 | border-bottom: 1px solid #ced3d9; 29 | .common-detail-top-title { 30 | color: #5697f1; 31 | cursor: pointer; 32 | } 33 | } 34 | .reminder-word { 35 | color: #ced3d9; 36 | } 37 | .common-detail-margin { 38 | margin-top: 50px; 39 | position: relative; 40 | } 41 | .tabs-fixed { 42 | .ivu-tabs-content { 43 | padding: 6px 0 0; 44 | } 45 | } 46 | .common-detail-body { 47 | box-sizing: border-box; 48 | padding: 20px 20px 0; 49 | &-title { 50 | font-size: 14px; 51 | font-weight: 700; 52 | margin-bottom: 10px; 53 | } 54 | } 55 | .ok-count { 56 | .ivu-badge-count { 57 | background: #19be6b !important; 58 | } 59 | } 60 | .alert-count { 61 | .ivu-badge-count { 62 | background: #ed3f14 !important; 63 | } 64 | } 65 | .unknow-count { 66 | .ivu-badge-count { 67 | background: #ff9900 !important; 68 | } 69 | } 70 | .nodata-count { 71 | .ivu-badge-count { 72 | background: #bbbec4 !important; 73 | } 74 | } 75 | 76 | } 77 | .event-process-modal { 78 | .event-process { 79 | padding: 0 20px 10px; 80 | &-title { 81 | font-size: 14px; 82 | font-weight: 700; 83 | margin-bottom: 10px; 84 | } 85 | } 86 | .step-vertical .step-bar:last-child .main-box { 87 | padding-bottom: 0px; 88 | } 89 | .ivu-modal-body { 90 | max-height: 255px; 91 | overflow-y: scroll; 92 | } 93 | } -------------------------------------------------------------------------------- /src/views/admin-cluster/cluster.vue: -------------------------------------------------------------------------------- 1 | 5 | 30 | 63 | -------------------------------------------------------------------------------- /src/views/admin-log/admin-log.scss: -------------------------------------------------------------------------------- 1 | .admin-log-list { 2 | width: 100%; 3 | // padding: 6px 10px 6px; 4 | .pop-show-content { 5 | max-height: 200px; 6 | pre { 7 | margin: 3px 0; 8 | white-space: pre-wrap; /*css-3*/ 9 | white-space: -moz-pre-wrap; /*Mozilla,since1999*/ 10 | white-space: -pre-wrap; /*Opera4-6*/ 11 | white-space: -o-pre-wrap; /*Opera7*/ 12 | word-wrap: break-word; /*InternetExplorer5.5+*/ 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/views/admin-manage/admin-user-list.scss: -------------------------------------------------------------------------------- 1 | .admin-user-list { 2 | } -------------------------------------------------------------------------------- /src/views/admin-monitor/product-host.scss: -------------------------------------------------------------------------------- 1 | .product-host-container { 2 | width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /src/views/admin-monitor/product-host.vue: -------------------------------------------------------------------------------- 1 | 4 | 9 | 29 | -------------------------------------------------------------------------------- /src/views/admin-plugin/admin-plugin-list.scss: -------------------------------------------------------------------------------- 1 | .admin-plugin-list { 2 | width: 100%; 3 | // padding: 6px 10px 6px; 4 | } 5 | -------------------------------------------------------------------------------- /src/views/admin-plugin/plugin-detail.scss: -------------------------------------------------------------------------------- 1 | .plugin-detail { 2 | .common-detail-top { 3 | position: fixed; 4 | z-index: 10; 5 | top: 55px; 6 | box-sizing: border-box; 7 | // width: 100%; 8 | right: 0; 9 | height: 55px; 10 | padding: 0 20px; 11 | background-color: #fff; 12 | line-height: 55px; 13 | font-size: 14px; 14 | border-bottom: 1px solid #ced3d9; 15 | transition: left .3s; 16 | @at-root .shrinked & { 17 | left: 60px; 18 | } 19 | @at-root .unshrinked & { 20 | left: 200px; 21 | } 22 | .common-detail-top-title { 23 | color: #5697f1; 24 | cursor: pointer; 25 | } 26 | } 27 | .table-list { 28 | margin-top: 50px; 29 | } 30 | } -------------------------------------------------------------------------------- /src/views/admin-product/admin-product.scss: -------------------------------------------------------------------------------- 1 | .admin-product { 2 | width: 100%; 3 | // padding: 6px 10px 6px; 4 | .product-list { 5 | // margin-top: 16px; 6 | .ok-count { 7 | .ivu-badge-count { 8 | background: #19be6b !important; 9 | } 10 | } 11 | .alert-count { 12 | .ivu-badge-count { 13 | background: #ed3f14 !important; 14 | } 15 | } 16 | .unknow-count { 17 | .ivu-badge-count { 18 | background: #ff9900 !important; 19 | } 20 | } 21 | .nodata-count { 22 | .ivu-badge-count { 23 | background: #bbbec4 !important; 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/views/admin-product/product-detail.scss: -------------------------------------------------------------------------------- 1 | .product-detail { 2 | position: relative; 3 | width: 100%; 4 | .ivu-form-item-required .ivu-form-item-label:before { 5 | content: ''; 6 | display: inline-block; 7 | margin-right: 0; 8 | line-height: 1; 9 | font-family: SimSun; 10 | font-size: 12px; 11 | color: #ed3f14; 12 | } 13 | .float-item { 14 | height: 32px; 15 | line-height: 32px; 16 | } 17 | .metric-block { 18 | height: 32px; 19 | line-height: 32px; 20 | margin-bottom: 28px; 21 | } 22 | .common-detail-top { 23 | height: 50px; 24 | padding: 0 20px; 25 | background-color: #fff; 26 | line-height: 50px; 27 | font-size: 14px; 28 | border-bottom: 1px solid #ced3d9; 29 | .common-detail-top-title { 30 | color: #5697f1; 31 | cursor: pointer; 32 | } 33 | } 34 | .reminder-word { 35 | color: #ced3d9; 36 | } 37 | .common-detail-margin { 38 | margin-top: 50px; 39 | position: relative; 40 | } 41 | .tabs-fixed { 42 | .ivu-tabs-content { 43 | padding: 6px 0 0; 44 | } 45 | } 46 | .common-detail-body { 47 | box-sizing: border-box; 48 | padding: 20px 20px 0; 49 | &-title { 50 | font-size: 14px; 51 | font-weight: 700; 52 | margin-bottom: 10px; 53 | } 54 | } 55 | .ok-count { 56 | .ivu-badge-count { 57 | background: #19be6b !important; 58 | } 59 | } 60 | .alert-count { 61 | .ivu-badge-count { 62 | background: #ed3f14 !important; 63 | } 64 | } 65 | .unknow-count { 66 | .ivu-badge-count { 67 | background: #ff9900 !important; 68 | } 69 | } 70 | .nodata-count { 71 | .ivu-badge-count { 72 | background: #bbbec4 !important; 73 | } 74 | } 75 | 76 | } 77 | .event-process-modal { 78 | .event-process { 79 | padding: 0 20px 10px; 80 | &-title { 81 | font-size: 14px; 82 | font-weight: 700; 83 | margin-bottom: 10px; 84 | } 85 | } 86 | .step-vertical .step-bar:last-child .main-box { 87 | padding-bottom: 0px; 88 | } 89 | .ivu-modal-body { 90 | max-height: 255px; 91 | overflow-y: scroll; 92 | } 93 | } -------------------------------------------------------------------------------- /src/views/admin-product/product-detail.vue: -------------------------------------------------------------------------------- 1 | 5 | 31 | 80 | -------------------------------------------------------------------------------- /src/views/admin-script/admin-script-list.scss: -------------------------------------------------------------------------------- 1 | .admin-script-list { 2 | width: 100%; 3 | // padding: 6px 10px 6px; 4 | } 5 | -------------------------------------------------------------------------------- /src/views/admin-template/create-template.scss: -------------------------------------------------------------------------------- 1 | .create-template { 2 | position: relative; 3 | width: 100%; 4 | .ivu-form-item-required .ivu-form-item-label:before { 5 | content: ''; 6 | display: inline-block; 7 | margin-right: 0; 8 | line-height: 1; 9 | font-family: SimSun; 10 | font-size: 12px; 11 | color: #ed3f14; 12 | } 13 | .ivu-form-item-label { 14 | // font-size: 14px; 15 | } 16 | .ivu-date-picker { 17 | vertical-align: middle; 18 | line-height: 32px; 19 | } 20 | .ivu-input-number, 21 | .ivu-poptip-rel { 22 | vertical-align: middle; 23 | line-height: 32px; 24 | } 25 | .float-item { 26 | height: 32px; 27 | line-height: 32px; 28 | } 29 | .metric-block { 30 | height: 32px; 31 | line-height: 32px; 32 | margin-bottom: 28px; 33 | } 34 | 35 | 36 | .brule-top { 37 | position: fixed; 38 | z-index: 10; 39 | top: 55px; 40 | box-sizing: border-box; 41 | // width: 100%; 42 | right: 0; 43 | height: 55px; 44 | padding: 0 24px 0 30px; 45 | background-color: #fff; 46 | line-height: 55px; 47 | font-size: 16px; 48 | border-bottom: 2px solid #ced3d9; 49 | transition: left .3s; 50 | @at-root .shrinked & { 51 | left: 60px; 52 | } 53 | @at-root .unshrinked & { 54 | left: 200px; 55 | } 56 | .brule-top-title { 57 | color: #5697f1; 58 | cursor: pointer; 59 | } 60 | } 61 | .reminder-word { 62 | color: #ced3d9; 63 | } 64 | .brule-margin { 65 | margin-top: 55px; 66 | height: 100%; 67 | } 68 | 69 | .brule-body { 70 | box-sizing: border-box; 71 | width: 100%; 72 | padding: 28px 29px 0 30px; // background-color: #f5f7f9; 73 | .subody { 74 | width: 100%; 75 | height: auto; 76 | background-color: #ffffff; 77 | } 78 | .subody-top { 79 | box-sizing: border-box; 80 | width: 100%; 81 | height: 54px; 82 | padding-left: 30px; 83 | line-height: 54px; 84 | font-size: 16px; 85 | color: #464c5b; 86 | border-bottom: 1px solid #ebeef1; 87 | } 88 | .subody-panel { 89 | box-sizing: border-box; 90 | width: 100%; 91 | padding: 30px; 92 | color: #464c5b; 93 | background-color: #ffffff; 94 | border-right: 1px solid #ebeef1; 95 | border-left: 1px solid #ebeef1; 96 | } 97 | .subody-panel-filter { 98 | .ivu-col { 99 | padding-right: 15px; 100 | } 101 | .ivu-form-item-label, 102 | .ivu-input { 103 | // font-size: 14px; 104 | } 105 | .ivu-form-item-label { 106 | padding: 10px 0; 107 | } 108 | .ivu-input-disabled { 109 | background-color: #e5e8ee; 110 | color: #464c5b; 111 | } 112 | } 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/views/admin-template/template-list.scss: -------------------------------------------------------------------------------- 1 | .template-list { 2 | .main-list-content { 3 | width: 100%; 4 | .ivu-tabs { 5 | overflow-y: auto; 6 | } 7 | .rule-list { 8 | // status 9 | .ok-count { 10 | .ivu-badge-count { 11 | background: #19be6b !important; 12 | } 13 | } 14 | .alert-count { 15 | .ivu-badge-count { 16 | background: #ed3f14 !important; 17 | } 18 | } 19 | .unknow-count { 20 | .ivu-badge-count { 21 | background: #ff9900 !important; 22 | } 23 | } 24 | .nodata-count { 25 | .ivu-badge-count { 26 | background: #bbbec4 !important; 27 | } 28 | } 29 | // status 30 | .type{ 31 | position: relative; 32 | box-sizing: border-box; 33 | display: inline-block; 34 | padding-left: 15px; 35 | } 36 | .type:before { 37 | position: absolute; 38 | content: ""; 39 | top:18px; 40 | left: 1px; 41 | width:8px; 42 | height:8px; 43 | border-radius: 8px; 44 | } 45 | .high-bool:before{ 46 | background-color: #f36363; 47 | } 48 | .mid-bool:before{ 49 | background-color: #ff9000; 50 | } 51 | .low-bool:before{ 52 | background-color:#ffca29; 53 | } 54 | .suc-bool:before{ 55 | background-color:#00ff00; 56 | } 57 | } 58 | } 59 | } -------------------------------------------------------------------------------- /src/views/alarm/alarm-event-list.scss: -------------------------------------------------------------------------------- 1 | .alarm-event { 2 | .main-list-content { 3 | width: 100%; 4 | .ivu-tabs { 5 | overflow-y: auto; 6 | } 7 | } 8 | .event-list { 9 | .ok-count { 10 | .ivu-badge-count { 11 | background: #19be6b !important; 12 | } 13 | } 14 | .alert-count { 15 | .ivu-badge-count { 16 | background: #ed3f14 !important; 17 | } 18 | } 19 | .unknow-count { 20 | .ivu-badge-count { 21 | background: #ff9900 !important; 22 | } 23 | } 24 | .nodata-count { 25 | .ivu-badge-count { 26 | background: #bbbec4 !important; 27 | } 28 | } 29 | // ---------------------- 30 | // status 31 | .type{ 32 | position: relative; 33 | box-sizing: border-box; 34 | display: inline-block; 35 | padding-left: 15px; 36 | } 37 | .type:before { 38 | position: absolute; 39 | content: ""; 40 | top:18px; 41 | left: 1px; 42 | width:8px; 43 | height:8px; 44 | border-radius: 8px; 45 | } 46 | .high-bool:before{ 47 | background-color: #f36363; 48 | } 49 | .mid-bool:before{ 50 | background-color: #ff9000; 51 | } 52 | .low-bool:before{ 53 | background-color:#ffca29; 54 | } 55 | .suc-bool:before{ 56 | background-color:#00ff00; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/views/alarm/alarm-strategy-list.scss: -------------------------------------------------------------------------------- 1 | .alarm-strategy { 2 | .common-detail-top { 3 | // font-size: 14px; 4 | background-color: #fff; 5 | // height: 50px; 6 | // line-height: 50px; 7 | // padding: 0 20px; 8 | // border-bottom: 1px solid #ced3d9; 9 | } 10 | .main-list-content { 11 | width: 100%; 12 | // padding: 6px 10px 6px; 13 | .ivu-tabs { 14 | overflow-y: auto; 15 | } 16 | .rule-list { 17 | .ivu-badge { 18 | cursor: pointer; 19 | } 20 | // status 21 | .ok-count { 22 | .ivu-badge-count { 23 | background: #19be6b !important; 24 | } 25 | } 26 | .alert-count { 27 | .ivu-badge-count { 28 | background: #ed3f14 !important; 29 | } 30 | } 31 | .unknow-count { 32 | .ivu-badge-count { 33 | background: #ff9900 !important; 34 | } 35 | } 36 | .nodata-count { 37 | .ivu-badge-count { 38 | background: #bbbec4 !important; 39 | } 40 | } 41 | // status 42 | .type{ 43 | position: relative; 44 | box-sizing: border-box; 45 | display: inline-block; 46 | padding-left: 15px; 47 | } 48 | .type:before { 49 | position: absolute; 50 | content: ""; 51 | top:18px; 52 | left: 1px; 53 | width:8px; 54 | height:8px; 55 | border-radius: 8px; 56 | } 57 | .high-bool:before{ 58 | background-color: #f36363; 59 | } 60 | .mid-bool:before{ 61 | background-color: #ff9000; 62 | } 63 | .low-bool:before{ 64 | background-color:#ffca29; 65 | } 66 | .suc-bool:before{ 67 | background-color:#00ff00; 68 | } 69 | } 70 | } 71 | } -------------------------------------------------------------------------------- /src/views/alarm/build-strategy.scss: -------------------------------------------------------------------------------- 1 | .build-rule { 2 | position: relative; 3 | width: 100%; 4 | .ivu-form-item-required .ivu-form-item-label:before { 5 | content: ''; 6 | display: inline-block; 7 | margin-right: 0; 8 | line-height: 1; 9 | font-family: SimSun; 10 | font-size: 12px; 11 | color: #ed3f14; 12 | } 13 | .ivu-form-item-label { 14 | // font-size: 14px; 15 | } 16 | .ivu-date-picker { 17 | vertical-align: middle; 18 | line-height: 32px; 19 | } 20 | .ivu-input-number, 21 | .ivu-poptip-rel { 22 | vertical-align: middle; 23 | line-height: 32px; 24 | } 25 | .float-item { 26 | height: 32px; 27 | line-height: 32px; 28 | } 29 | .metric-block { 30 | height: 32px; 31 | line-height: 32px; 32 | margin-bottom: 28px; 33 | } 34 | 35 | .brule-top { 36 | position: fixed; 37 | z-index: 10; 38 | top: 55px; 39 | box-sizing: border-box; 40 | // width: 100%; 41 | right: 0; 42 | height: 55px; 43 | padding: 0 24px 0 30px; 44 | background-color: #fff; 45 | line-height: 55px; 46 | font-size: 16px; 47 | border-bottom: 2px solid #ced3d9; 48 | transition: left .3s; 49 | @at-root .shrinked & { 50 | left: 60px; 51 | } 52 | @at-root .unshrinked & { 53 | left: 200px; 54 | } 55 | .brule-top-title { 56 | color: #5697f1; 57 | cursor: pointer; 58 | } 59 | } 60 | .reminder-word { 61 | color: #ced3d9; 62 | } 63 | .brule-margin { 64 | margin-top: 55px; 65 | height: 100%; 66 | } 67 | 68 | .brule-body { 69 | box-sizing: border-box; 70 | width: 100%; 71 | padding: 28px 29px 0 30px; // background-color: #f5f7f9; 72 | .subody { 73 | width: 100%; 74 | height: auto; 75 | background-color: #ffffff; 76 | } 77 | .subody-top { 78 | box-sizing: border-box; 79 | width: 100%; 80 | height: 54px; 81 | padding-left: 30px; 82 | line-height: 54px; 83 | font-size: 16px; 84 | color: #464c5b; 85 | border-bottom: 1px solid #ebeef1; 86 | } 87 | .subody-panel { 88 | box-sizing: border-box; 89 | width: 100%; 90 | padding: 30px; 91 | color: #464c5b; 92 | background-color: #ffffff; 93 | border-right: 1px solid #ebeef1; 94 | border-left: 1px solid #ebeef1; 95 | } 96 | .subody-panel-filter { 97 | .ivu-col { 98 | padding-right: 15px; 99 | } 100 | .ivu-form-item-label { 101 | padding: 10px 0; 102 | } 103 | .ivu-input-disabled { 104 | background-color: #e5e8ee; 105 | color: #464c5b; 106 | } 107 | } 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /src/views/alarm/event-detail.scss: -------------------------------------------------------------------------------- 1 | .event-detail { 2 | position: relative; 3 | width: 100%; 4 | .ivu-form-item-required .ivu-form-item-label:before { 5 | content: ''; 6 | display: inline-block; 7 | margin-right: 0; 8 | line-height: 1; 9 | font-family: SimSun; 10 | font-size: 12px; 11 | color: #ed3f14; 12 | } 13 | .ivu-date-picker { 14 | vertical-align: middle; 15 | line-height: 32px; 16 | } 17 | .ivu-input-number, 18 | .ivu-poptip-rel { 19 | vertical-align: middle; 20 | line-height: 32px; 21 | } 22 | .float-item { 23 | height: 32px; 24 | line-height: 32px; 25 | } 26 | .metric-block { 27 | height: 32px; 28 | line-height: 32px; 29 | margin-bottom: 28px; 30 | } 31 | .brule-top { 32 | position: fixed; 33 | z-index: 10; 34 | top: 55px; 35 | box-sizing: border-box; 36 | // width: 100%; 37 | height: 55px; 38 | padding: 0 24px 0 30px; 39 | background-color: #fff; 40 | line-height: 55px; 41 | font-size: 16px; 42 | border-bottom: 2px solid #ced3d9; 43 | right: 0; 44 | transition: left .3s; 45 | @at-root .shrinked & { 46 | left: 60px; 47 | } 48 | @at-root .unshrinked & { 49 | left: 200px; 50 | } 51 | .brule-top-title { 52 | color: #5697f1; 53 | cursor: pointer; 54 | } 55 | } 56 | .reminder-word { 57 | color: #ced3d9; 58 | } 59 | .brule-margin { 60 | margin-top: 55px; 61 | // height: 100%; 62 | } 63 | 64 | .brule-body { 65 | box-sizing: border-box; 66 | // width: 100%; 67 | padding: 20px 20px 0; // background-color: #f5f7f9; 68 | &-title { 69 | font-size: 14px; 70 | font-weight: 700; 71 | margin-bottom: 10px; 72 | } 73 | // .subody { 74 | // width: 100%; 75 | // height: auto; 76 | // background-color: #ffffff; 77 | // } 78 | // .subody-top { 79 | // box-sizing: border-box; 80 | // width: 100%; 81 | // height: 54px; 82 | // padding-left: 30px; 83 | // line-height: 54px; 84 | // font-size: 16px; 85 | // color: #464c5b; 86 | // border-bottom: 1px solid #ebeef1; 87 | // } 88 | // .subody-panel { 89 | // box-sizing: border-box; 90 | // width: 100%; 91 | // padding: 30px; 92 | // color: #464c5b; 93 | // background-color: #ffffff; 94 | // border-right: 1px solid #ebeef1; 95 | // border-left: 1px solid #ebeef1; 96 | // } 97 | // .subody-panel-filter { 98 | // .ivu-col { 99 | // padding-right: 15px; 100 | // } 101 | // .ivu-form-item-label { 102 | // padding: 10px 0; 103 | // } 104 | // .ivu-input-disabled { 105 | // background-color: #e5e8ee; 106 | // color: #464c5b; 107 | // } 108 | // } 109 | } 110 | .add-more-alarm { 111 | text-align: center; 112 | // border-bottom: 1px solid #ced3d9; 113 | margin-bottom: 10px; 114 | // padding-bottom: 10px; 115 | } 116 | 117 | } 118 | .event-process-modal { 119 | .event-process { 120 | padding: 0 20px 10px; 121 | &-title { 122 | font-size: 14px; 123 | font-weight: 700; 124 | margin-bottom: 10px; 125 | } 126 | } 127 | .step-vertical .step-bar:last-child .main-box { 128 | padding-bottom: 0px; 129 | } 130 | .ivu-modal-body { 131 | max-height: 255px; 132 | overflow-y: scroll; 133 | } 134 | } -------------------------------------------------------------------------------- /src/views/console/panel-detail.scss: -------------------------------------------------------------------------------- 1 | .panel-detail { 2 | .common-detail-top { 3 | height: 100px; 4 | background-color: #fff; 5 | line-height: 50px; 6 | font-size: 14px; 7 | .common-detail-top-item { 8 | padding: 0 20px; 9 | border-bottom: 1px solid #ced3d9; 10 | } 11 | .common-detail-top-title { 12 | color: #5697f1; 13 | cursor: pointer; 14 | } 15 | } 16 | .table-list { 17 | margin-top: 100px; 18 | } 19 | } -------------------------------------------------------------------------------- /src/views/console/panel-list.scss: -------------------------------------------------------------------------------- 1 | .panel-list { 2 | width: 100%; 3 | .common-detail-top { 4 | font-size: 14px; 5 | background-color: #fff; 6 | // height: 50px; 7 | // line-height: 50px; 8 | // padding: 0 20px; 9 | // border-bottom: 1px solid #ced3d9; 10 | margin-bottom: 10px; 11 | .common-detail-top-title { 12 | color: #5697f1; 13 | cursor: pointer; 14 | } 15 | } 16 | .table-list { 17 | // margin-top: 50px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/views/login/login-index.scss: -------------------------------------------------------------------------------- 1 | .login-index { 2 | position: absolute; 3 | top: 50%; 4 | left: 50%; 5 | margin-top: -160px; 6 | margin-left: -150px; 7 | .login-box { 8 | width: 300px; 9 | height: 320px; 10 | background: rgba(5, 28, 82, 0.9); 11 | padding: 30px 20px 0; 12 | // border: 1px solid #5e70ab; 13 | box-shadow: 1px 1px 5px rgba(5, 28, 2, 0.9); 14 | } 15 | .footer { 16 | width: 100%; 17 | text-align: center; 18 | color: #FFF; 19 | margin: 30px 0; 20 | font-weight: 100; 21 | } 22 | .logo { 23 | width: 100%; 24 | height: 25px; 25 | background: url('../../assets/image/logo.png') no-repeat; 26 | background-size: contain; 27 | background-position: center center; 28 | } 29 | .notice { 30 | color: #e96062; 31 | min-height: 25px; 32 | line-height: 25px; 33 | margin-top: 30px; 34 | margin-bottom: 10px; 35 | font-size: 14px; 36 | } 37 | .form-box { 38 | width: 100%; 39 | } 40 | .form-box>div { 41 | margin-bottom: 20px; 42 | overflow: hidden; 43 | } 44 | .user>input, 45 | .psd>input, 46 | .email>input { 47 | width: 100%; 48 | height: 30px; 49 | border: 1px solid #fff; 50 | box-sizing: border-box; 51 | padding: 0 10px; 52 | font-size: 14px; 53 | color: #657180; 54 | } 55 | .user>input:focus, 56 | .psd>input:focus, 57 | .email>input:focus { 58 | border: 1px solid #13b4ff; 59 | } 60 | .set { 61 | padding-top: 10px; 62 | &>a { 63 | float: right; 64 | color: #13b4ff; 65 | text-decoration: underline; 66 | cursor: pointer; 67 | } 68 | &>input { 69 | float: left; 70 | margin-top: 1px; 71 | margin-right: 6px; 72 | } 73 | &>label { 74 | color: #7889c3; 75 | float: left; 76 | } 77 | } 78 | .form-box>.submit { 79 | margin-top: 30px; 80 | } 81 | .submit>input { 82 | width: 100%; 83 | height: 30px; 84 | color: #FFF; 85 | background: #13b4ff; 86 | cursor: pointer; 87 | font-size: 14px; 88 | font-weight: 100; 89 | } 90 | .psd-notice { 91 | margin-top: 50px; 92 | } 93 | .psd-notice>p { 94 | color: #FFF; 95 | font-size: 14px; 96 | font-weight: 100; 97 | } 98 | .psd-notice>p>b { 99 | color: #13b4ff; 100 | font-size: 14px; 101 | font-weight: 400; 102 | cursor: pointer; 103 | } 104 | .email { 105 | margin: 40px 0 10px; 106 | } 107 | .email>p { 108 | color: #13b4ff; 109 | // margin-top: -10px; 110 | // height: 25px; 111 | font-size: 12px; 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /src/views/login/login.scss: -------------------------------------------------------------------------------- 1 | .login { 2 | } 3 | -------------------------------------------------------------------------------- /src/views/login/login.vue: -------------------------------------------------------------------------------- 1 | 4 | 12 | 70 | -------------------------------------------------------------------------------- /src/views/login/product.scss: -------------------------------------------------------------------------------- 1 | .product { 2 | // position: relative; 3 | // top: 50%; 4 | // left: 50%; 5 | // margin-top: -135px; 6 | // margin-left: -145px; 7 | width: 100%; 8 | min-height: 100%; 9 | .product-box { 10 | width: 400px; 11 | // min-height: 290px; 12 | background: rgba(255, 255, 255, 0.9); 13 | margin: 100px auto 0; 14 | // padding: 0 0 30px; 15 | border: 1px solid #ddd; 16 | border-radius: 5px; 17 | box-shadow: 1px 1px 5px rgba(100, 100, 100, 0.9); 18 | } 19 | .product-list { 20 | width: 100%; 21 | } 22 | .product-item { 23 | width: 100%; 24 | border-bottom: 1px solid #ddd; 25 | padding: 20px; 26 | font-size: 16px; 27 | font-weight: bold; 28 | text-align: center; 29 | cursor: pointer; 30 | } 31 | .footer { 32 | width: 100%; 33 | text-align: center; 34 | color: #aaa; 35 | padding: 30px 0; 36 | font-weight: 100; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/views/login/product.vue: -------------------------------------------------------------------------------- 1 | 4 | 29 | 156 | -------------------------------------------------------------------------------- /src/views/manage/manage-user-list.scss: -------------------------------------------------------------------------------- 1 | .manage-user-list {} -------------------------------------------------------------------------------- /src/views/manage/manage-user-list.vue: -------------------------------------------------------------------------------- 1 | 5 | 10 | 35 | -------------------------------------------------------------------------------- /src/views/manage/user-group-detail.scss: -------------------------------------------------------------------------------- 1 | .user-group-detail { 2 | .common-detail-top { 3 | height: 50px; 4 | padding: 0 20px; 5 | background-color: #fff; 6 | line-height: 50px; 7 | font-size: 14px; 8 | border-bottom: 1px solid #ced3d9; 9 | &.success { 10 | background-color: #19be6b; 11 | } 12 | &.failure { 13 | background-color: #ed3f14; 14 | } 15 | .common-detail-top-title { 16 | color: #5697f1; 17 | cursor: pointer; 18 | } 19 | } 20 | .common-detail-margin { 21 | padding-top: 50px; 22 | } 23 | } -------------------------------------------------------------------------------- /src/views/manage/user-group-detail.vue: -------------------------------------------------------------------------------- 1 | 5 | 21 | 68 | -------------------------------------------------------------------------------- /src/views/manage/user-group-list.scss: -------------------------------------------------------------------------------- 1 | .user-group-list { 2 | } -------------------------------------------------------------------------------- /src/views/metric/metric-dashboard.scss: -------------------------------------------------------------------------------- 1 | .metric-dashboard { 2 | width: 100%; 3 | // padding: 6px 10px 6px; 4 | .box-content { 5 | position: relative; 6 | } 7 | .table-list { 8 | } 9 | .chartBox { 10 | width: 100%; 11 | float: left; 12 | } 13 | .chartBoxMul { 14 | width: 100%; 15 | float: left; 16 | } 17 | .common-detail-top-title { 18 | font-size: 16px; 19 | color: #5697f1; 20 | cursor: pointer; 21 | } 22 | .chart-das { 23 | height: 100%; 24 | .border-area { 25 | // border: 1px solid #d6d6d6; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/views/metric/metric-list.scss: -------------------------------------------------------------------------------- 1 | .metric-list { 2 | width: 100%; 3 | // padding: 6px 10px 6px; 4 | .table-list { 5 | .box-content-item { 6 | &.selected { 7 | background-color: #e0f0f7!important; 8 | } 9 | } 10 | } 11 | .cursor-ivu-row { 12 | &.selected { 13 | td { 14 | background-color: #e0f0f7!important; 15 | } 16 | } 17 | } 18 | } 19 | .screen-show-data { 20 | // width: 335px; 21 | margin-right: 24px; 22 | position: fixed; 23 | z-index: 1010; 24 | top: 120px; 25 | right: 0px; 26 | .tag-area { 27 | max-height: 320px; 28 | overflow-y: scroll; 29 | } 30 | .tag-item { 31 | border: 1px solid #d6d6d6; 32 | padding: 5px; 33 | margin-bottom: 5px; 34 | } 35 | .key-title-sub { 36 | // text-transform: uppercase; 37 | font-size: 13px; 38 | font-weight: bold; 39 | color: #444; 40 | border-bottom: 1px solid #d6d6d6; 41 | padding-bottom: 4px; 42 | margin-bottom: 4px; 43 | } 44 | } -------------------------------------------------------------------------------- /src/views/monitor/group-detail.scss: -------------------------------------------------------------------------------- 1 | .group-detail { 2 | position: relative; 3 | width: 100%; 4 | .ivu-form-item-required .ivu-form-item-label:before { 5 | content: ''; 6 | display: inline-block; 7 | margin-right: 0; 8 | line-height: 1; 9 | font-family: SimSun; 10 | font-size: 12px; 11 | color: #ed3f14; 12 | } 13 | .float-item { 14 | height: 32px; 15 | line-height: 32px; 16 | } 17 | .metric-block { 18 | height: 32px; 19 | line-height: 32px; 20 | margin-bottom: 28px; 21 | } 22 | .common-detail-top { 23 | height: 50px; 24 | padding: 0 20px; 25 | background-color: #fff; 26 | line-height: 50px; 27 | font-size: 14px; 28 | border-bottom: 1px solid #ced3d9; 29 | &.success { 30 | background-color: #19be6b; 31 | } 32 | &.failure { 33 | background-color: #ed3f14; 34 | } 35 | .common-detail-top-title { 36 | color: #5697f1; 37 | cursor: pointer; 38 | } 39 | } 40 | .reminder-word { 41 | color: #ced3d9; 42 | } 43 | .common-detail-margin { 44 | margin-top: 50px; 45 | position: relative; 46 | .tabs-fixed { 47 | .ivu-tabs-content { 48 | padding: 6px 0 0; 49 | } 50 | .tab-strategy-content { 51 | padding: 6px 10px 0; 52 | } 53 | } 54 | } 55 | .common-detail-body { 56 | box-sizing: border-box; 57 | padding: 20px 20px 0; 58 | &-title { 59 | font-size: 14px; 60 | font-weight: 700; 61 | margin-bottom: 10px; 62 | } 63 | } 64 | .ok-count { 65 | .ivu-badge-count { 66 | background: #19be6b !important; 67 | } 68 | } 69 | .alert-count { 70 | .ivu-badge-count { 71 | background: #ed3f14 !important; 72 | } 73 | } 74 | .unknow-count { 75 | .ivu-badge-count { 76 | background: #ff9900 !important; 77 | } 78 | } 79 | .nodata-count { 80 | .ivu-badge-count { 81 | background: #bbbec4 !important; 82 | } 83 | } 84 | 85 | } 86 | .event-process-modal { 87 | .event-process { 88 | padding: 0 20px 10px; 89 | &-title { 90 | font-size: 14px; 91 | font-weight: 700; 92 | margin-bottom: 10px; 93 | } 94 | } 95 | .step-vertical .step-bar:last-child .main-box { 96 | padding-bottom: 0px; 97 | } 98 | .ivu-modal-body { 99 | max-height: 255px; 100 | overflow-y: scroll; 101 | } 102 | } -------------------------------------------------------------------------------- /src/views/monitor/group-detail.vue: -------------------------------------------------------------------------------- 1 | 5 | 34 | 103 | -------------------------------------------------------------------------------- /src/views/monitor/host-detail.scss: -------------------------------------------------------------------------------- 1 | .host-detail { 2 | .common-detail-top { 3 | // height: 100px; 4 | // line-height: 50px; 5 | background-color: #fff; 6 | font-size: 14px; 7 | .common-detail-top-item { 8 | padding: 10px 20px; 9 | border-bottom: 1px solid #ced3d9; 10 | } 11 | .common-detail-top-title { 12 | color: #5697f1; 13 | cursor: pointer; 14 | } 15 | } 16 | .table-list { 17 | margin-top: 100px; 18 | } 19 | } -------------------------------------------------------------------------------- /src/views/monitor/host-plugin.scss: -------------------------------------------------------------------------------- 1 | .host-plugin { 2 | .common-detail-top { 3 | height: 50px; 4 | line-height: 50px; 5 | background-color: #fff; 6 | font-size: 14px; 7 | .common-detail-top-item { 8 | padding: 0 20px; 9 | border-bottom: 1px solid #ced3d9; 10 | } 11 | .common-detail-top-title { 12 | color: #5697f1; 13 | cursor: pointer; 14 | } 15 | } 16 | .table-list { 17 | margin-top: 50px; 18 | } 19 | } -------------------------------------------------------------------------------- /src/views/monitor/host-plugin.vue: -------------------------------------------------------------------------------- 1 | 5 | 20 | 69 | -------------------------------------------------------------------------------- /src/views/monitor/monitor-group.scss: -------------------------------------------------------------------------------- 1 | .monitor-group { 2 | width: 100%; 3 | // padding: 6px 10px 6px; 4 | .group-list { 5 | // margin-top: 16px; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/views/monitor/monitor-host.scss: -------------------------------------------------------------------------------- 1 | .monitor-host { 2 | width: 100%; 3 | // padding: 6px 10px 6px; 4 | } 5 | -------------------------------------------------------------------------------- /src/views/monitor/monitor-host.vue: -------------------------------------------------------------------------------- 1 | 4 | 9 | 34 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/.gitkeep -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/favicon.ico -------------------------------------------------------------------------------- /static/image/32px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/32px.png -------------------------------------------------------------------------------- /static/image/40px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/40px.png -------------------------------------------------------------------------------- /static/image/add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/add.png -------------------------------------------------------------------------------- /static/image/add1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/add1.png -------------------------------------------------------------------------------- /static/image/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/bg.jpg -------------------------------------------------------------------------------- /static/image/board.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/board.png -------------------------------------------------------------------------------- /static/image/board1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/board1.png -------------------------------------------------------------------------------- /static/image/checked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/checked.png -------------------------------------------------------------------------------- /static/image/del.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/del.png -------------------------------------------------------------------------------- /static/image/edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/edit.png -------------------------------------------------------------------------------- /static/image/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/icon.png -------------------------------------------------------------------------------- /static/image/icon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/icon1.png -------------------------------------------------------------------------------- /static/image/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/img.png -------------------------------------------------------------------------------- /static/image/left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/left.png -------------------------------------------------------------------------------- /static/image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/logo.png -------------------------------------------------------------------------------- /static/image/logoh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/logoh.png -------------------------------------------------------------------------------- /static/image/plugin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/plugin.png -------------------------------------------------------------------------------- /static/image/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/search.png -------------------------------------------------------------------------------- /static/image/seeChart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/seeChart.png -------------------------------------------------------------------------------- /static/image/set.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/set.png -------------------------------------------------------------------------------- /static/image/set2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/set2.png -------------------------------------------------------------------------------- /static/image/throbber.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/throbber.gif -------------------------------------------------------------------------------- /static/image/添加图表1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalkingData/owl-frontend/296c2632bcdf0b5a493ce1362945420d7a941abc/static/image/添加图表1.png -------------------------------------------------------------------------------- /test/e2e/custom-assertions/elementCount.js: -------------------------------------------------------------------------------- 1 | // A custom Nightwatch assertion. 2 | // the name of the method is the filename. 3 | // can be used in tests like this: 4 | // 5 | // browser.assert.elementCount(selector, count) 6 | // 7 | // for how to write custom assertions see 8 | // http://nightwatchjs.org/guide#writing-custom-assertions 9 | exports.assertion = function (selector, count) { 10 | this.message = 'Testing if element <' + selector + '> has count: ' + count; 11 | this.expected = count; 12 | this.pass = function (val) { 13 | return val === this.expected; 14 | } 15 | this.value = function (res) { 16 | return res.value; 17 | } 18 | this.command = function (cb) { 19 | var self = this; 20 | return this.api.execute(function (selector) { 21 | return document.querySelectorAll(selector).length; 22 | }, [selector], function (res) { 23 | cb.call(self, res); 24 | }); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /test/e2e/nightwatch.conf.js: -------------------------------------------------------------------------------- 1 | require('babel-register') 2 | var config = require('../../config') 3 | 4 | // http://nightwatchjs.org/gettingstarted#settings-file 5 | module.exports = { 6 | src_folders: ['test/e2e/specs'], 7 | output_folder: 'test/e2e/reports', 8 | custom_assertions_path: ['test/e2e/custom-assertions'], 9 | 10 | selenium: { 11 | start_process: true, 12 | server_path: require('selenium-server').path, 13 | host: '127.0.0.1', 14 | port: 4444, 15 | cli_args: { 16 | 'webdriver.chrome.driver': require('chromedriver').path 17 | } 18 | }, 19 | 20 | test_settings: { 21 | default: { 22 | selenium_port: 4444, 23 | selenium_host: 'localhost', 24 | silent: true, 25 | globals: { 26 | devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port) 27 | } 28 | }, 29 | 30 | chrome: { 31 | desiredCapabilities: { 32 | browserName: 'chrome', 33 | javascriptEnabled: true, 34 | acceptSslCerts: true 35 | } 36 | }, 37 | 38 | firefox: { 39 | desiredCapabilities: { 40 | browserName: 'firefox', 41 | javascriptEnabled: true, 42 | acceptSslCerts: true 43 | } 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /test/e2e/runner.js: -------------------------------------------------------------------------------- 1 | // 1. start the dev server using production config 2 | process.env.NODE_ENV = 'testing'; 3 | var server = require('../../build/dev-server.js'); 4 | 5 | server.ready.then(() => { 6 | // 2. run the nightwatch test suite against it 7 | // to run in additional browsers: 8 | // 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings" 9 | // 2. add it to the --env flag below 10 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox` 11 | // For more information on Nightwatch's config file, see 12 | // http://nightwatchjs.org/guide#settings-file 13 | var opts = process.argv.slice(2); 14 | if (opts.indexOf('--config') === -1) { 15 | opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js']); 16 | } 17 | if (opts.indexOf('--env') === -1) { 18 | opts = opts.concat(['--env', 'chrome']); 19 | } 20 | 21 | var spawn = require('cross-spawn'); 22 | var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' }); 23 | 24 | runner.on('exit', function (code) { 25 | server.close(); 26 | process.exit(code); 27 | }); 28 | 29 | runner.on('error', function (err) { 30 | server.close(); 31 | throw err; 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /test/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // For authoring Nightwatch tests, see 2 | // http://nightwatchjs.org/guide#usage 3 | 4 | module.exports = { 5 | 'default e2e tests': function test(browser) { 6 | // automatically uses dev Server port from /config.index.js 7 | // default: http://localhost:8080 8 | // see nightwatch.conf.js 9 | const devServer = browser.globals.devServerURL; 10 | 11 | browser 12 | .url(devServer) 13 | .waitForElementVisible('#app', 5000) 14 | .assert.elementPresent('.hello') 15 | .assert.containsText('h1', 'Welcome to Your Vue.js App') 16 | .assert.elementCount('img', 1) 17 | .end(); 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "expect": true, 7 | "sinon": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | Vue.config.productionTip = false; 4 | 5 | // require all test files (files that ends with .spec.js) 6 | const testsContext = require.context('./specs', true, /\.spec$/); 7 | testsContext.keys().forEach(testsContext); 8 | 9 | // require all src files except main.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/); 13 | srcContext.keys().forEach(srcContext); 14 | -------------------------------------------------------------------------------- /test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | // This is a karma config file. For more details see 2 | // http://karma-runner.github.io/0.13/config/configuration-file.html 3 | // we are also using it with karma-webpack 4 | // https://github.com/webpack/karma-webpack 5 | 6 | var webpackConfig = require('../../build/webpack.test.conf'); 7 | 8 | module.exports = function (config) { 9 | config.set({ 10 | // to run in additional browsers: 11 | // 1. install corresponding karma launcher 12 | // http://karma-runner.github.io/0.13/config/browsers.html 13 | // 2. add it to the `browsers` array below. 14 | browsers: ['PhantomJS'], 15 | frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'], 16 | reporters: ['spec', 'coverage'], 17 | files: ['./index.js'], 18 | preprocessors: { 19 | './index.js': ['webpack', 'sourcemap'] 20 | }, 21 | webpack: webpackConfig, 22 | webpackMiddleware: { 23 | noInfo: true, 24 | }, 25 | coverageReporter: { 26 | dir: './coverage', 27 | reporters: [ 28 | { type: 'lcov', subdir: '.' }, 29 | { type: 'text-summary' }, 30 | ] 31 | }, 32 | }); 33 | }; 34 | -------------------------------------------------------------------------------- /test/unit/specs/Hello.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Hello from '@/components/Hello'; 3 | 4 | describe('Hello.vue', () => { 5 | it('should render correct contents', () => { 6 | const Constructor = Vue.extend(Hello); 7 | const vm = new Constructor().$mount(); 8 | expect(vm.$el.querySelector('.hello h1').textContent) 9 | .to.equal('Welcome to Your Vue.js App'); 10 | }); 11 | }); 12 | --------------------------------------------------------------------------------