├── .babelrc
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── 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
├── config
    ├── dev.env.js
    ├── index.js
    ├── prod.env.js
    └── test.env.js
├── index.html
├── package-lock.json
├── package.json
├── project_code_structure.png
├── src
    ├── App.vue
    ├── assets
    │   ├── data
    │   │   ├── dataForDynamicThreeD.json
    │   │   ├── dataTreeNodeName.json
    │   │   └── demoData
    │   │   │   ├── fakeData.json
    │   │   │   └── housePrice.json
    │   ├── img
    │   │   ├── add.png
    │   │   ├── close.png
    │   │   ├── close_eye.png
    │   │   ├── demo_data_aa.png
    │   │   ├── his_data.png
    │   │   ├── mind_map.png
    │   │   ├── open_eye.png
    │   │   ├── private_data.png
    │   │   ├── service.png
    │   │   ├── test1.jpg
    │   │   ├── test1_paper.png
    │   │   ├── test2.jpg
    │   │   ├── test2_paper.png
    │   │   ├── test3.png
    │   │   ├── test3_paper.png
    │   │   ├── test4.jpg
    │   │   └── test4_paper.png
    │   └── webService
    │   │   └── GWR_war.war
    ├── bus
    │   └── messageBus.js
    ├── components
    │   ├── DataSelector.vue
    │   ├── DataViewer.vue
    │   ├── Home.vue
    │   ├── MapViewer.vue
    │   ├── ParDefiner.vue
    │   ├── RightSideForDataView.vue
    │   ├── RightSideForDescription.vue
    │   ├── RightSideForResult.vue
    │   ├── firstPage.vue
    │   ├── firstPage
    │   │   ├── DynamicThreed.vue
    │   │   └── slides.vue
    │   ├── login
    │   │   ├── coverForReset.vue
    │   │   ├── coverForSign.vue
    │   │   └── coverForlogin.vue
    │   └── rightSideForResult
    │   │   ├── MapForResult.vue
    │   │   ├── chartAnalysis.vue
    │   │   ├── computeLog.vue
    │   │   └── precision.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── store
    │   └── store.js
    └── style
    │   ├── app.scss
    │   ├── coverLogin.scss
    │   ├── dataSelector.scss
    │   ├── dataViewer.scss
    │   ├── firstPage.scss
    │   ├── home.scss
    │   ├── main_style.scss
    │   ├── parDefiner.scss
    │   └── rightSideForResult.scss
├── static
    ├── .gitkeep
    └── dataTreeNodeName.json
└── test
    ├── e2e
        ├── custom-assertions
        │   └── elementCount.js
        ├── nightwatch.conf.js
        ├── runner.js
        └── specs
        │   └── test.js
    └── unit
        ├── .eslintrc
        ├── jest.conf.js
        ├── setup.js
        └── specs
            └── HelloWorld.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-vue-jsx", "transform-runtime"],
12 |   "env": {
13 |     "test": {
14 |       "presets": ["env", "stage-2"],
15 |       "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
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 | 


--------------------------------------------------------------------------------
/.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 | .vscode
14 | *.suo
15 | *.ntvs*
16 | *.njsproj
17 | *.sln
18 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## GTWR计算平台说明
 2 | 
 3 | GTWR计算平台，本网站意图辅助用户进行GWR或GTWR的在线计算，支持计算参数自定义、原始数据及计算结果的多维度可视化。该平台主要包括以下几个主要功能模块：
 4 | 
 5 | * 首屏展播：基于echarts-al制作3D动态可视化效果，突出平台主要内容与地理回归相关；利用轮播图展示GTWR计算的相关应用案例，包含案例来源文章基本信息、文章链接、主要图表等内容。
 6 | * 原始数据预览：平台提供示例数据，它们根据数据集分类组织为树形结构，平台支持对数据集中每一份单独属性数据的预览，预览包括数据具体内容、数据在地图上的空间可视化两部分。
 7 | * 原始数据计算：平台支持自定义计算参数，参数可选择原始数据中的数据属性，也可手动输入固定常量；开始计算后如果参数设置不完全、计算参数设置不正确或计算接口调用失败，平台都会给出错误的计算日志；如果计算成功，除计算过程的计算日志之后，还会曝光计算结果图表展示、计算结果精度评定两个入口，其中计算结果图表展示模块包含地图可视化、数据图表两部分，数据图表部分支持用户添加图表容器、自定义图表参数。
 8 | 
 9 | 以上功能的实现依赖于Java Servlet、Leaflet地图API、Echarts图表库和Vue前端框架，平台代码仓库地址为：[https://github.com/GTWR/gtwr_vue](https://github.com/GTWR/gtwr_vue),执行过程为:
10 | 
11 | 1. 下载JDK，安装并配置Java环境；下载Tomcat，安装并配置Tomcat环境，配置后打开tomcat服务。[windows环境下tomcat下载安装教程地址](https://www.cnblogs.com/beginner-boy/p/7806680.html)，[Mac环境下tomcat下载安装教程地址](https://blog.csdn.net/feng2qing/article/details/60968548)
12 |     **注意**:  平台默认tomcat端口为8080，若端口不为8080，则需要在代码库中[gtwr_vue/src/components/ParDefiner.vue](https://github.com/GTWR/gtwr_vue/blob/master/src/components/ParDefiner.vue)中compute函数中修改变量requestUrl中端口的定义。
13 | 2. 下载node,npm以及cnpm，[node安装配置教程地址](http://www.runoob.com/nodejs/nodejs-install-setup.html)，[npm安装配置教程地址](http://www.runoob.com/nodejs/nodejs-npm.html)
14 | 3. 在[gtwr的代码库：https://github.com/GTWR/gtwr_vue](https://github.com/GTWR/gtwr_vue)中下载平台源代码
15 | 4. 将代码库路径[gtwr/src/assets/webservice/gwr_war.war](https://github.com/GTWR/gtwr_vue/tree/master/src/assets/webService)中的gwr_war.war文件放置在tomcat安装文件下webapps中
16 | 5. 在终端中打开源代码文件路径，执行如下代码安装平台依赖：
17 |     ```
18 |     cnpm install //安装平台的依赖工具包
19 |     npm run dev //运行平台代码，会自动打开浏览器展示前端界面
20 |     ```
21 | 
22 | 以上的安装配置过程能够保证平台正常展示，而平台代码的修改需要熟悉代码库的代码结构，其结构如下：
23 | 
24 | <img src="project_code_structure.png" width="100%">
25 | 
26 | 组件中引用的样式文件，在组件``<script>``标签开头的样式文件引用处已表明
27 | 
28 | 


--------------------------------------------------------------------------------
/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 TypeScript 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/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/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 |       })
 52 |     } else {
 53 |       return ['vue-style-loader'].concat(loaders)
 54 |     }
 55 |   }
 56 | 
 57 |   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 58 |   return {
 59 |     css: generateLoaders(),
 60 |     postcss: generateLoaders(),
 61 |     less: generateLoaders('less'),
 62 |     sass: generateLoaders('sass', { indentedSyntax: true }),
 63 |     scss: generateLoaders('sass'),
 64 |     stylus: generateLoaders('stylus'),
 65 |     styl: generateLoaders('stylus')
 66 |   }
 67 | }
 68 | 
 69 | // Generate loaders for standalone style files (outside of .vue)
 70 | exports.styleLoaders = function (options) {
 71 |   const output = []
 72 |   const loaders = exports.cssLoaders(options)
 73 | 
 74 |   for (const extension in loaders) {
 75 |     const loader = loaders[extension]
 76 |     output.push({
 77 |       test: new RegExp('\\.' + extension + '$'),
 78 |       use: loader
 79 |     })
 80 |   }
 81 | 
 82 |   return output
 83 | }
 84 | 
 85 | exports.createNotifierCallback = () => {
 86 |   const notifier = require('node-notifier')
 87 | 
 88 |   return (severity, errors) => {
 89 |     if (severity !== 'error') return
 90 | 
 91 |     const error = errors[0]
 92 |     const filename = error.file && error.file.split('!').pop()
 93 | 
 94 |     notifier.notify({
 95 |       title: packageConfig.name,
 96 |       message: severity + ': ' + error.name,
 97 |       subtitle: filename || '',
 98 |       icon: path.join(__dirname, 'logo.png')
 99 |     })
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/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 | var webpack = require("webpack")
  7 | function resolve (dir) {
  8 |   return path.join(__dirname, '..', dir)
  9 | }
 10 | 
 11 | 
 12 | 
 13 | module.exports = {
 14 |   context: path.resolve(__dirname, '../'),
 15 |   entry: {
 16 |     app: './src/main.js'
 17 |   },
 18 |   output: {
 19 |     path: config.build.assetsRoot,
 20 |     filename: '[name].js',
 21 |     publicPath: process.env.NODE_ENV === 'production'
 22 |       ? config.build.assetsPublicPath
 23 |       : config.dev.assetsPublicPath
 24 |   },
 25 |   resolve: {
 26 |     extensions: ['.js', '.vue', '.json'],
 27 |     alias: {
 28 |       'vue$': 'vue/dist/vue.esm.js',
 29 |       '@': resolve('src'),
 30 |     }
 31 |   },
 32 |   module: {
 33 |     rules: [
 34 |       {
 35 |         test: /\.vue$/,
 36 |         loader: 'vue-loader',
 37 |         options: vueLoaderConfig
 38 |       },
 39 |       {
 40 |         test: /\.js$/,
 41 |         loader: 'babel-loader',
 42 |         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
 43 |       },
 44 |       {
 45 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 46 |         loader: 'url-loader',
 47 |         options: {
 48 |           limit: 10000,
 49 |           name: utils.assetsPath('img/[name].[hash:7].[ext]')
 50 |         }
 51 |       },
 52 |       {
 53 |         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
 54 |         loader: 'url-loader',
 55 |         options: {
 56 |           limit: 10000,
 57 |           name: utils.assetsPath('media/[name].[hash:7].[ext]')
 58 |         }
 59 |       },
 60 |       {
 61 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 62 |         loader: 'url-loader',
 63 |         options: {
 64 |           limit: 10000,
 65 |           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
 66 |         }
 67 |       },
 68 |       {
 69 |         test: /\.sass$/,
 70 |         loaders: ['style', 'css', 'sass']
 71 |       },
 72 |       {
 73 |         test: /\.csv$/,
 74 |         loader: 'csv-loader',
 75 |         options: {
 76 |           dynamicTyping: true,
 77 |           header: true,
 78 |           skipEmptyLines: true
 79 |         }
 80 |       },
 81 |       {
 82 |         test: /\.json$/,
 83 |         loader: 'json-loader'
 84 |       }
 85 |     ]
 86 |   },
 87 |     externals: {
 88 |    'AMap': 'AMap',
 89 | },//地图组件
 90 |   node: {
 91 |     // prevent webpack from injecting useless setImmediate polyfill because Vue
 92 |     // source contains it (although only uses it if it's native).
 93 |     setImmediate: false,
 94 |     // prevent webpack from injecting mocks to Node native modules
 95 |     // that does not make sense for the client
 96 |     dgram: 'empty',
 97 |     fs: 'empty',
 98 |     net: 'empty',
 99 |     tls: 'empty',
100 |     child_process: 'empty'
101 |   },
102 |   plugins: [
103 | new webpack.optimize.CommonsChunkPlugin('common.js'),
104 | new webpack.ProvidePlugin({
105 | jQuery: "jquery",
106 | $: "jquery"
107 | })
108 | ]
109 | }
110 | 


--------------------------------------------------------------------------------
/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 path = require('path')
 7 | const baseWebpackConfig = require('./webpack.base.conf')
 8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11 | const portfinder = require('portfinder')
12 | 
13 | const HOST = process.env.HOST
14 | const PORT = process.env.PORT && Number(process.env.PORT)
15 | 
16 | const devWebpackConfig = merge(baseWebpackConfig, {
17 |   module: {
18 |     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
19 |   },
20 |   // cheap-module-eval-source-map is faster for development
21 |   devtool: config.dev.devtool,
22 | 
23 |   // these devServer options should be customized in /config/index.js
24 |   devServer: {
25 |     clientLogLevel: 'warning',
26 |     historyApiFallback: {
27 |       rewrites: [
28 |         { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
29 |       ],
30 |     },
31 |     hot: true,
32 |     contentBase: false, // since we use CopyWebpackPlugin.
33 |     compress: true,
34 |     host: HOST || config.dev.host,
35 |     port: PORT || config.dev.port,
36 |     open: config.dev.autoOpenBrowser,
37 |     overlay: config.dev.errorOverlay
38 |       ? { warnings: false, errors: true }
39 |       : false,
40 |     publicPath: config.dev.assetsPublicPath,
41 |     proxy: config.dev.proxyTable,
42 |     quiet: true, // necessary for FriendlyErrorsPlugin
43 |     watchOptions: {
44 |       poll: config.dev.poll,
45 |     }
46 |   },
47 |   plugins: [
48 |     new webpack.DefinePlugin({
49 |       'process.env': require('../config/dev.env')
50 |     }),
51 |     new webpack.HotModuleReplacementPlugin(),
52 |     new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
53 |     new webpack.NoEmitOnErrorsPlugin(),
54 |     // https://github.com/ampedandwired/html-webpack-plugin
55 |     new HtmlWebpackPlugin({
56 |       filename: 'index.html',
57 |       template: 'index.html',
58 |       inject: true
59 |     }),
60 |     // copy custom static assets
61 |     new CopyWebpackPlugin([
62 |       {
63 |         from: path.resolve(__dirname, '../static'),
64 |         to: config.dev.assetsSubDirectory,
65 |         ignore: ['.*']
66 |       }
67 |     ])
68 |   ]
69 | })
70 | 
71 | module.exports = new Promise((resolve, reject) => {
72 |   portfinder.basePort = process.env.PORT || config.dev.port
73 |   portfinder.getPort((err, port) => {
74 |     if (err) {
75 |       reject(err)
76 |     } else {
77 |       // publish the new Port, necessary for e2e tests
78 |       process.env.PORT = port
79 |       // add port to devServer config
80 |       devWebpackConfig.devServer.port = port
81 | 
82 |       // Add FriendlyErrorsPlugin
83 |       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84 |         compilationSuccessInfo: {
85 |           messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
86 |         },
87 |         onErrors: config.dev.notifyOnErrors
88 |         ? utils.createNotifierCallback()
89 |         : undefined
90 |       }))
91 | 
92 |       resolve(devWebpackConfig)
93 |     }
94 |   })
95 | })
96 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const utils = require('./utils')
  4 | const webpack = require('webpack')
  5 | const config = require('../config')
  6 | const merge = require('webpack-merge')
  7 | const baseWebpackConfig = require('./webpack.base.conf')
  8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
  9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 13 | 
 14 | const env = process.env.NODE_ENV === 'testing'
 15 |   ? require('../config/test.env')
 16 |   : require('../config/prod.env')
 17 | 
 18 | const webpackConfig = merge(baseWebpackConfig, {
 19 |   module: {
 20 |     rules: utils.styleLoaders({
 21 |       sourceMap: config.build.productionSourceMap,
 22 |       extract: true,
 23 |       usePostCSS: true
 24 |     })
 25 |   },
 26 |   devtool: config.build.productionSourceMap ? config.build.devtool : false,
 27 |   output: {
 28 |     path: config.build.assetsRoot,
 29 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 30 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 31 |   },
 32 |   plugins: [
 33 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 34 |     new webpack.DefinePlugin({
 35 |       'process.env': env
 36 |     }),
 37 |     new UglifyJsPlugin({
 38 |       uglifyOptions: {
 39 |         compress: {
 40 |           warnings: false
 41 |         }
 42 |       },
 43 |       sourceMap: config.build.productionSourceMap,
 44 |       parallel: true
 45 |     }),
 46 |     // extract css into its own file
 47 |     new ExtractTextPlugin({
 48 |       filename: utils.assetsPath('css/[name].[contenthash].css'),
 49 |       // Setting the following option to `false` will not extract CSS from codesplit chunks.
 50 |       // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
 51 |       // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
 52 |       // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
 53 |       allChunks: true,
 54 |     }),
 55 |     // Compress extracted CSS. We are using this plugin so that possible
 56 |     // duplicated CSS from different components can be deduped.
 57 |     new OptimizeCSSPlugin({
 58 |       cssProcessorOptions: config.build.productionSourceMap
 59 |         ? { safe: true, map: { inline: false } }
 60 |         : { safe: true }
 61 |     }),
 62 |     // generate dist index.html with correct asset hash for caching.
 63 |     // you can customize output by editing /index.html
 64 |     // see https://github.com/ampedandwired/html-webpack-plugin
 65 |     new HtmlWebpackPlugin({
 66 |       filename: process.env.NODE_ENV === 'testing'
 67 |         ? 'index.html'
 68 |         : config.build.index,
 69 |       template: 'index.html',
 70 |       inject: true,
 71 |       minify: {
 72 |         removeComments: true,
 73 |         collapseWhitespace: true,
 74 |         removeAttributeQuotes: true
 75 |         // more options:
 76 |         // https://github.com/kangax/html-minifier#options-quick-reference
 77 |       },
 78 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 79 |       chunksSortMode: 'dependency'
 80 |     }),
 81 |     // keep module.id stable when vendor modules does not change
 82 |     new webpack.HashedModuleIdsPlugin(),
 83 |     // enable scope hoisting
 84 |     new webpack.optimize.ModuleConcatenationPlugin(),
 85 |     // split vendor js into its own file
 86 |     new webpack.optimize.CommonsChunkPlugin({
 87 |       name: 'vendor',
 88 |       minChunks (module) {
 89 |         // any required modules inside node_modules are extracted to vendor
 90 |         return (
 91 |           module.resource &&
 92 |           /\.js$/.test(module.resource) &&
 93 |           module.resource.indexOf(
 94 |             path.join(__dirname, '../node_modules')
 95 |           ) === 0
 96 |         )
 97 |       }
 98 |     }),
 99 |     // extract webpack runtime and module manifest to its own file in order to
100 |     // prevent vendor hash from being updated whenever app bundle is updated
101 |     new webpack.optimize.CommonsChunkPlugin({
102 |       name: 'manifest',
103 |       minChunks: Infinity
104 |     }),
105 |     // This instance extracts shared chunks from code splitted chunks and bundles them
106 |     // in a separate chunk, similar to the vendor chunk
107 |     // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
108 |     new webpack.optimize.CommonsChunkPlugin({
109 |       name: 'app',
110 |       async: 'vendor-async',
111 |       children: true,
112 |       minChunks: 3
113 |     }),
114 | 
115 |     // copy custom static assets
116 |     new CopyWebpackPlugin([
117 |       {
118 |         from: path.resolve(__dirname, '../static'),
119 |         to: config.build.assetsSubDirectory,
120 |         ignore: ['.*']
121 |       }
122 |     ])
123 |   ]
124 | })
125 | 
126 | if (config.build.productionGzip) {
127 |   const CompressionWebpackPlugin = require('compression-webpack-plugin')
128 | 
129 |   webpackConfig.plugins.push(
130 |     new CompressionWebpackPlugin({
131 |       asset: '[path].gz[query]',
132 |       algorithm: 'gzip',
133 |       test: new RegExp(
134 |         '\\.(' +
135 |         config.build.productionGzipExtensions.join('|') +
136 |         ')$'
137 |       ),
138 |       threshold: 10240,
139 |       minRatio: 0.8
140 |     })
141 |   )
142 | }
143 | 
144 | if (config.build.bundleAnalyzerReport) {
145 |   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
146 |   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
147 | }
148 | 
149 | module.exports = webpackConfig
150 | 


--------------------------------------------------------------------------------
/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.3.1
 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 | 
16 |     // Various Dev Server settings
17 |     host: 'localhost', // can be overwritten by process.env.HOST
18 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
19 |     autoOpenBrowser: true,
20 |     errorOverlay: true,
21 |     notifyOnErrors: true,
22 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
23 | 
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'cheap-module-eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     cssSourceMap: true
37 |   },
38 | 
39 |   build: {
40 |     // Template for index.html
41 |     index: path.resolve(__dirname, '../dist/index.html'),
42 | 
43 |     // Paths
44 |     assetsRoot: path.resolve(__dirname, '../dist'),
45 |     assetsSubDirectory: 'static',
46 |     assetsPublicPath: '/',
47 | 
48 |     /**
49 |      * Source Maps
50 |      */
51 | 
52 |     productionSourceMap: true,
53 |     // https://webpack.js.org/configuration/devtool/#production
54 |     devtool: '#source-map',
55 | 
56 |     // Gzip off by default as many popular static hosts such as
57 |     // Surge or Netlify already gzip all static assets for you.
58 |     // Before setting to `true`, make sure to:
59 |     // npm install --save-dev compression-webpack-plugin
60 |     productionGzip: false,
61 |     productionGzipExtensions: ['js', 'css'],
62 | 
63 |     // Run the build command with an extra argument to
64 |     // View the bundle analyzer report after build finishes:
65 |     // `npm run build --report`
66 |     // Set to `true` or `false` to always turn it on or off
67 |     bundleAnalyzerReport: process.env.npm_config_report
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/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 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <link href="//unpkg.com/leaflet@1.2.0/dist/leaflet.css" rel="stylesheet"/>
 7 |     <script src ="//unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
 8 |     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 9 |     <script src='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script>
10 |     <link href='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />
11 |     <title>gtwr_portal</title>
12 |     <style type="text/css">
13 |       body,html{
14 |         margin: 0;
15 |         padding: 0;
16 |         width: 100%;
17 |         height: 100%;
18 |       }
19 |     </style>
20 |   </head>
21 |   <body>
22 |     <div id="app" ></div>
23 |     <!-- built files will be auto injected -->
24 |   </body>
25 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "gtwr_portal",
  3 |   "version": "1.0.0",
  4 |   "description": "A Vue.js project",
  5 |   "author": "gemma",
  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": "jest --config test/unit/jest.conf.js --coverage",
 11 |     "e2e": "node test/e2e/runner.js",
 12 |     "test": "npm run unit && npm run e2e",
 13 |     "build": "node --max_old_space_size=8000 build/build.js"
 14 |   },
 15 |   "dependencies": {
 16 |     "axios": "^0.18.0",
 17 |     "cookie-parser": "^1.4.3",
 18 |     "express": "^4.16.4",
 19 |     "install": "^0.12.2",
 20 |     "jquery": "^3.3.1",
 21 |     "multer": "^1.3.1",
 22 |     "nodemon": "^1.18.4",
 23 |     "swiper": "^4.2.0",
 24 |     "vtip": "^1.0.6",
 25 |     "vue": "^2.5.2",
 26 |     "vue-awesome-swiper": "^3.1.3",
 27 |     "vue-concise-slider": "^2.4.8",
 28 |     "vue-resource": "^1.5.1",
 29 |     "vue-router": "^3.0.1"
 30 |   },
 31 |   "devDependencies": {
 32 |     "autoprefixer": "^7.1.2",
 33 |     "babel-core": "^6.22.1",
 34 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
 35 |     "babel-jest": "^21.0.2",
 36 |     "babel-loader": "^7.1.4",
 37 |     "babel-plugin-dynamic-import-node": "^1.2.0",
 38 |     "babel-plugin-syntax-jsx": "^6.18.0",
 39 |     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
 40 |     "babel-plugin-transform-runtime": "^6.22.0",
 41 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
 42 |     "babel-preset-env": "^1.3.2",
 43 |     "babel-preset-es2015": "^6.24.1",
 44 |     "babel-preset-stage-2": "^6.22.0",
 45 |     "babel-register": "^6.22.0",
 46 |     "jquery": "^3.3.1",
 47 |     "chalk": "^2.0.1",
 48 |     "chromedriver": "^2.27.2",
 49 |     "copy-webpack-plugin": "^4.0.1",
 50 |     "cross-spawn": "^5.0.1",
 51 |     "css-loader": "^0.28.0",
 52 |     "csv-loader": "^2.1.1",
 53 |     "echarts": "4.1.0",
 54 |     "echarts-gl": "^1.1.0",
 55 |     "extract-text-webpack-plugin": "^3.0.0",
 56 |     "file-loader": "^1.1.4",
 57 |     "friendly-errors-webpack-plugin": "^1.6.1",
 58 |     "html-webpack-plugin": "^2.30.1",
 59 |     "jest": "^22.0.4",
 60 |     "jest-serializer-vue": "^0.3.0",
 61 |     "json-loader": "^0.5.7",
 62 |     "leaflet": "^1.3.1",
 63 |     "nightwatch": "^0.9.12",
 64 |     "node-notifier": "^5.1.2",
 65 |     "node-sass": "^4.8.3",
 66 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
 67 |     "ora": "^1.2.0",
 68 |     "portfinder": "^1.0.13",
 69 |     "postcss-import": "^11.0.0",
 70 |     "postcss-loader": "^2.0.8",
 71 |     "postcss-url": "^7.2.1",
 72 |     "rimraf": "^2.6.0",
 73 |     "sass-loader": "^6.0.7",
 74 |     "selenium-server": "^3.0.1",
 75 |     "semver": "^5.3.0",
 76 |     "shelljs": "^0.7.6",
 77 |     "uglifyjs-webpack-plugin": "^1.1.1",
 78 |     "url-loader": "^0.5.8",
 79 |     "vue-hot-reload-api": "^2.3.0",
 80 |     "vue-html-loader": "^1.2.4",
 81 |     "vue-jest": "^1.0.2",
 82 |     "vue-loader": "^13.3.0",
 83 |     "vue-style-loader": "^3.1.2",
 84 |     "vue-template-compiler": "^2.5.2",
 85 |     "vuex": "^3.0.1",
 86 |     "webpack": "^3.6.0",
 87 |     "webpack-bundle-analyzer": "^2.9.0",
 88 |     "webpack-dev-server": "^2.9.1",
 89 |     "webpack-merge": "^4.1.0"
 90 |   },
 91 |   "engines": {
 92 |     "node": ">= 6.0.0",
 93 |     "npm": ">= 3.0.0"
 94 |   },
 95 |   "browserslist": [
 96 |     "> 1%",
 97 |     "last 2 versions",
 98 |     "not ie <= 8"
 99 |   ]
100 | }
101 | 


--------------------------------------------------------------------------------
/project_code_structure.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/project_code_structure.png


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app" class="wrap">
  3 |     <!-- Start header -->
  4 |     <header class="header">
  5 |       <p><span>GTWR </span>云计算平台</p>
  6 |       <div v-if="username==''">
  7 |         <div class="login-container">
  8 |           <a class="loginLink" @click="login()" v-tip="msgForUserLogin">用户登录</a>
  9 |           <a class="loginLink"> / </a>
 10 |           <a class="loginLink" :class="{active : active == true && username==''}" @click="selected()" v-tip="msgForNonLogin">匿名登录</a>
 11 | 	      </div>
 12 |       </div>
 13 |       <div v-else>
 14 |         <div class="login-container">
 15 |           <div class=userLogin>你好，{{username}} </div>
 16 |           <div class=exit @click="exit()" v-tip="msgForCancel">注销</div>
 17 |         </div>
 18 |      </div>
 19 |     </header>
 20 |     <!-- End  header -->
 21 |     <!-- Start 页面主体 -->
 22 |     <div class="main-content">
 23 |         <router-view></router-view>
 24 |     </div>
 25 |     <!-- End 页面主体 -->
 26 |     <!-- Start 登录遮罩 -->
 27 |     <cover-login v-show="login_show"></cover-login>
 28 |     <cover-sign v-show="sign_show"></cover-sign>
 29 |     <cover-reset v-show="reset_show"></cover-reset>
 30 |     <!-- End 登录遮罩 -->
 31 |   </div>
 32 | </template>
 33 | 
 34 | <script>
 35 | require('./style/app.scss')
 36 | import {mapState} from 'vuex'
 37 | import messageBus from './bus/messageBus.js'
 38 | import coverLogin from './components/login/coverForlogin.vue'
 39 | import coverSign from './components/login/coverForSign.vue'
 40 | import coverReset from './components/login/coverForReset.vue'
 41 | 
 42 | export default {
 43 |   name: 'App',
 44 |   data(){
 45 |   	return{
 46 |       active:false,
 47 |       login_show: false,
 48 |       sign_show: false,
 49 |       reset_show: false,
 50 |       img_par_show: false,
 51 |       msgForUserLogin:'点击后以用户名和密码登录系统，此处也是新用户注册、密码重设的入口',
 52 |       msgForNonLogin:'点击之后直接进入平台主界面，以游客方式使用平台',
 53 |       msgForCancel:'点击后可注销当前用户，以匿名方式登录'
 54 |   	}
 55 |   },
 56 |   mounted(){
 57 |     this.getShowPar();
 58 |   },
 59 |   computed:{
 60 |     ...mapState({
 61 | 				username: state => state.username
 62 | 		})
 63 |   },
 64 |   methods:{
 65 |     //获取cover遮罩是否显示的参数
 66 |     getShowPar:function(){
 67 |       let self = this;
 68 |       messageBus.$on('login-cover-show',function(val){
 69 |         self.login_show = val;
 70 |       });
 71 |       messageBus.$on('sign-cover-show',function(val){
 72 |         self.sign_show = val;
 73 |       });
 74 |       messageBus.$on('reset-cover-show',function(val){
 75 |         self.reset_show = val;
 76 |       });
 77 |     },
 78 |     //显示登录cover
 79 |     login:function(){
 80 |       this.login_show = true;
 81 |       this.active = this.username==''?true:false;
 82 |     },
 83 |     //登录成功，进入home页面
 84 |     selected(){
 85 |       this.$router.push({path:"/home"});
 86 |       this.active = true;
 87 |     },
 88 |     //注销
 89 |     exit:function(){
 90 |       this.$store.commit('username','');
 91 |       this.active = true;
 92 |     }
 93 |   },
 94 |   components:{
 95 |     coverLogin,
 96 |     coverSign,
 97 |     coverReset
 98 |   }
 99 | }
100 | </script>
101 | 
102 | <style>
103 | 
104 | </style>
105 | 


--------------------------------------------------------------------------------
/src/assets/data/dataTreeNodeName.json:
--------------------------------------------------------------------------------
 1 | [{
 2 | 	"name":"Canada house price",
 3 | 	"centerPosition":[],
 4 | 	"zoom": 10,
 5 | 	"dataContent": "housePrice",
 6 | 	"url":"../assets/data/demoData/",
 7 | 	"children": [
 8 | 		{"name":"Oprice","decribeName":"原始房价数据"},
 9 | 		{"name":"Constant","decribeName":"常量"},
10 | 		{"name":"Living","decribeName":"居住环境"},
11 | 		{"name":"Quality","decribeName":"空气质量"},
12 | 		{"name":"Structure","decribeName":"基础设施"},
13 | 		{"name":"Renovation","decribeName":"装修情况"},
14 | 		{"name":"Condiction","decribeName":"传导"},
15 | 		{"name":"Greenspace","decribeName":"绿化面积"},
16 | 		{"name":"Traffic","decribeName":"交通情况"},
17 | 		{"name":"VIEW","decribeName":"视野环境"}
18 | 	]
19 | },{
20 | 	"name":"GWR test data",
21 | 	"dataContent":"fakeData",
22 | 	"centerPosition":[],
23 | 	"zoom":17,
24 | 	"url":"../assets/data/demoData/",
25 | 	"children":[
26 | 		{"name":"PctBach","decribeName":"参数1"},
27 | 		{"name":"TotPop90","decribeName":"参数2"},
28 | 		{"name":"PctRural","decribeName":"参数3"}
29 | 	]
30 | }]


--------------------------------------------------------------------------------
/src/assets/data/demoData/fakeData.json:
--------------------------------------------------------------------------------
  1 | [{
  2 |     "type": "FeatureCollection" ,
  3 |     "name": "fakeData",
  4 |     "features": [
  5 |         {
  6 |             "type": "Feature",
  7 |             "properties": {
  8 |                 "name":1,
  9 |                 "X":114.289,
 10 |                 "Y":30.5882,
 11 |                 "PctBach":1,
 12 |                 "TotPop90":1,
 13 |                 "PctRural":3
 14 |             },
 15 |             "geometry": {
 16 |                 "type": "Point",
 17 |                 "coordinates": [114.289,30.5882]
 18 |             }
 19 |         },{
 20 |             "type": "Feature",
 21 |             "properties": {
 22 |                 "name":2,
 23 |                 "X":114.289,
 24 |                 "Y":30.5883,
 25 |                 "PctBach":2,
 26 |                 "TotPop90":2,
 27 |                 "PctRural":2
 28 |             },
 29 |             "geometry": {
 30 |                 "type": "Point",
 31 |                 "coordinates": [114.289,30.5883]
 32 |             }
 33 |         },{
 34 |             "type": "Feature",
 35 |             "properties": {
 36 |                 "name":3,
 37 |                 "X":114.289,
 38 |                 "Y":30.5883,
 39 |                 "PctBach":3,
 40 |                 "TotPop90":1,
 41 |                 "PctRural":1
 42 |             },
 43 |             "geometry": {
 44 |                 "type": "Point",
 45 |                 "coordinates": [114.289,30.5883]
 46 |             }
 47 |         },{
 48 |             "type": "Feature",
 49 |             "properties": {
 50 |                 "name":4,
 51 |                 "X":114.289,
 52 |                 "Y":30.5884,
 53 |                 "PctBach":4,
 54 |                 "TotPop90":2,
 55 |                 "PctRural":5
 56 |             },
 57 |             "geometry": {
 58 |                 "type": "Point",
 59 |                 "coordinates": [114.289,30.5884]
 60 |             }
 61 |         },{
 62 |             "type": "Feature",
 63 |             "properties": {
 64 |                 "name":5,
 65 |                 "X":114.288,
 66 |                 "Y":30.5882,
 67 |                 "PctBach":5,
 68 |                 "TotPop90":2,
 69 |                 "PctRural":1
 70 |             },
 71 |             "geometry": {
 72 |                 "type": "Point",
 73 |                 "coordinates": [114.288,30.5882]
 74 |             }
 75 |         },{
 76 |             "type": "Feature",
 77 |             "properties": {
 78 |                 "name":6,
 79 |                 "X":114.288,
 80 |                 "Y":30.5881,
 81 |                 "PctBach":6,
 82 |                 "TotPop90":1,
 83 |                 "PctRural":2
 84 |             },
 85 |             "geometry": {
 86 |                 "type": "Point",
 87 |                 "coordinates": [114.288,30.5881]
 88 |             }
 89 |         },{
 90 |             "type": "Feature",
 91 |             "properties": {
 92 |                 "name":7,
 93 |                 "X":114.288,
 94 |                 "Y":30.5881,
 95 |                 "PctBach":7,
 96 |                 "TotPop90":2,
 97 |                 "PctRural":3
 98 |             },
 99 |             "geometry": {
100 |                 "type": "Point",
101 |                 "coordinates": [114.288,30.5881]
102 |             }
103 |         },{
104 |             "type": "Feature",
105 |             "properties": {
106 |                 "name":8,
107 |                 "X":114.288,
108 |                 "Y":30.5882,
109 |                 "PctBach":8,
110 |                 "TotPop90":1,
111 |                 "PctRural":1
112 |             },
113 |             "geometry": {
114 |                 "type": "Point",
115 |                 "coordinates": [114.288,30.5882]
116 |             }
117 |         },{
118 |             "type": "Feature",
119 |             "properties": {
120 |                 "name":9,
121 |                 "X":114.288,
122 |                 "Y":30.5878,
123 |                 "PctBach":9,
124 |                 "TotPop90":3,
125 |                 "PctRural":2
126 |             },
127 |             "geometry": {
128 |                 "type": "Point",
129 |                 "coordinates": [114.288,30.5878]
130 |             }
131 |         },{
132 |             "type": "Feature",
133 |             "properties": {
134 |                 "name":10,
135 |                 "X":114.288,
136 |                 "Y":30.5878,
137 |                 "PctBach":10,
138 |                 "TotPop90":1,
139 |                 "PctRural":4
140 |             },
141 |             "geometry": {
142 |                 "type": "Point",
143 |                 "coordinates": [114.288,30.5878]
144 |             }
145 |         },{
146 |             "type": "Feature",
147 |             "properties": {
148 |                 "name":11,
149 |                 "X":114.288,
150 |                 "Y":30.5878,
151 |                 "PctBach":11,
152 |                 "TotPop90":2,
153 |                 "PctRural":2
154 |             },
155 |             "geometry": {
156 |                 "type": "Point",
157 |                 "coordinates": [114.288,30.5878]
158 |             }
159 |         },{
160 |             "type": "Feature",
161 |             "properties": {
162 |                 "name":12,
163 |                 "X":114.288,
164 |                 "Y":30.588,
165 |                 "PctBach":12,
166 |                 "TotPop90":2,
167 |                 "PctRural":1
168 |             },
169 |             "geometry": {
170 |                 "type": "Point",
171 |                 "coordinates": [114.288,30.588]
172 |             }
173 |         },{
174 |             "type": "Feature",
175 |             "properties": {
176 |                 "name":13,
177 |                 "X":114.288,
178 |                 "Y":30.588,
179 |                 "PctBach":13,
180 |                 "TotPop90":5,
181 |                 "PctRural":2
182 |             },
183 |             "geometry": {
184 |                 "type": "Point",
185 |                 "coordinates": [114.288,30.588]
186 |             }
187 |         },{
188 |             "type": "Feature",
189 |             "properties": {
190 |                 "name":14,
191 |                 "X":114.288,
192 |                 "Y":30.5878,
193 |                 "PctBach":14,
194 |                 "TotPop90":1,
195 |                 "PctRural":3
196 |             },
197 |             "geometry": {
198 |                 "type": "Point",
199 |                 "coordinates": [114.288,30.5878]
200 |             }
201 |         },{
202 |             "type": "Feature",
203 |             "properties": {
204 |                 "name":15,
205 |                 "X":114.288,
206 |                 "Y":30.5881,
207 |                 "PctBach":15,
208 |                 "TotPop90":2,
209 |                 "PctRural":2
210 |             },
211 |             "geometry": {
212 |                 "type": "Point",
213 |                 "coordinates": [114.288,30.5881]
214 |             }
215 |         },{
216 |             "type": "Feature",
217 |             "properties": {
218 |                 "name":16,
219 |                 "X":114.289,
220 |                 "Y":30.5882,
221 |                 "PctBach":16,
222 |                 "TotPop90":2,
223 |                 "PctRural":1
224 |             },
225 |             "geometry": {
226 |                 "type": "Point",
227 |                 "coordinates": [114.289,30.5882]
228 |             }
229 |         },{
230 |             "type": "Feature",
231 |             "properties": {
232 |                 "name":17,
233 |                 "X":114.289,
234 |                 "Y":30.5882,
235 |                 "PctBach":17,
236 |                 "TotPop90":1,
237 |                 "PctRural":3
238 |             },
239 |             "geometry": {
240 |                 "type": "Point",
241 |                 "coordinates": [114.289,30.5882]
242 |             }
243 |         },{
244 |             "type": "Feature",
245 |             "properties": {
246 |                 "name":18,
247 |                 "X":114.288,
248 |                 "Y":30.5883,
249 |                 "PctBach":18,
250 |                 "TotPop90":2,
251 |                 "PctRural":2
252 |             },
253 |             "geometry": {
254 |                 "type": "Point",
255 |                 "coordinates": [114.288,30.5883]
256 |             }
257 |         },{
258 |             "type": "Feature",
259 |             "properties": {
260 |                 "name":19,
261 |                 "X":114.288,
262 |                 "Y":30.5881,
263 |                 "PctBach":19,
264 |                 "TotPop90":1,
265 |                 "PctRural":1
266 |             },
267 |             "geometry": {
268 |                 "type": "Point",
269 |                 "coordinates": [114.288,30.5881]
270 |             }
271 |         },{
272 |             "type": "Feature",
273 |             "properties": {
274 |                 "name":20,
275 |                 "X":114.288,
276 |                 "Y":30.5881,
277 |                 "PctBach":20,
278 |                 "TotPop90":1,
279 |                 "PctRural":2
280 |             },
281 |             "geometry": {
282 |                 "type": "Point",
283 |                 "coordinates": [114.288,30.5881]
284 |             }
285 |         }
286 |     ]
287 | }]


--------------------------------------------------------------------------------
/src/assets/img/add.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/add.png


--------------------------------------------------------------------------------
/src/assets/img/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/close.png


--------------------------------------------------------------------------------
/src/assets/img/close_eye.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/close_eye.png


--------------------------------------------------------------------------------
/src/assets/img/demo_data_aa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/demo_data_aa.png


--------------------------------------------------------------------------------
/src/assets/img/his_data.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/his_data.png


--------------------------------------------------------------------------------
/src/assets/img/mind_map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/mind_map.png


--------------------------------------------------------------------------------
/src/assets/img/open_eye.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/open_eye.png


--------------------------------------------------------------------------------
/src/assets/img/private_data.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/private_data.png


--------------------------------------------------------------------------------
/src/assets/img/service.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/service.png


--------------------------------------------------------------------------------
/src/assets/img/test1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/test1.jpg


--------------------------------------------------------------------------------
/src/assets/img/test1_paper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/test1_paper.png


--------------------------------------------------------------------------------
/src/assets/img/test2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/test2.jpg


--------------------------------------------------------------------------------
/src/assets/img/test2_paper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/test2_paper.png


--------------------------------------------------------------------------------
/src/assets/img/test3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/test3.png


--------------------------------------------------------------------------------
/src/assets/img/test3_paper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/test3_paper.png


--------------------------------------------------------------------------------
/src/assets/img/test4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/test4.jpg


--------------------------------------------------------------------------------
/src/assets/img/test4_paper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/img/test4_paper.png


--------------------------------------------------------------------------------
/src/assets/webService/GWR_war.war:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/src/assets/webService/GWR_war.war


--------------------------------------------------------------------------------
/src/bus/messageBus.js:
--------------------------------------------------------------------------------
1 | // refer page: https://github.com/vuejs/vue/issues/2873
2 | 
3 | import Vue from 'vue'
4 | var messageBus = new Vue();
5 | export default messageBus;


--------------------------------------------------------------------------------
/src/components/DataSelector.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="data-selector">
  3 |     <header class="title"><p>计算数据选择</p></header>
  4 |     <!--数据列表-->
  5 |     <div class="data-list" id="data-list">
  6 |       <div v-for="data,index in data_list">       
  7 |         <div class="parent_node">
  8 |           <img :src="data.src">
  9 |           <b>{{data.name}}</b>
 10 |         </div>   
 11 |         <div class="child_list">
 12 |           <div class="data_drag_container" v-if="data.name == '私有数据'" style="position: relative;">        
 13 |             <img class="normalFace" src="../assets/img/add.png" height="30" width="30">
 14 |                 <input  type="file"  id="file"  onchange="upload(this)" >
 15 |             <p>拖拽本地文件到此处</p>   
 16 |           </div>          
 17 |           <div v-for="child,index1 in data.data_type" >
 18 |               <div class="child_node">          
 19 |                   <p :data-parentIndex="index1" :class="{highlight: childIndex == index1}">
 20 |                     <img class="child_node_img" :src='ImgParentNodeSrc'>
 21 |                     {{child.name}}
 22 |                     <button v-show="($route.path.toString().indexOf('/computeresult/')==-1) && computeSuccess.computeSuccess && index1==computeSuccess.computeChildIndex && index == computeSuccess.computeParentIndex" @click="showComputeResult()" >查看计算结果</button>
 23 |                   </p>
 24 |               </div>
 25 |               <div class="grand_son_list2">
 26 |                 <div class="grand_son_list">
 27 |                   <div v-for="grandson,index2 in child.children" class="grand_son_node">
 28 |                     <p> 
 29 |                       <img :src='ImgChildNodeSrc'>
 30 |                       {{grandson.decribeName}} {{grandson.name}}
 31 |                       <button :class="{highlight:  parentIndex == index && childIndex==index1 && grandsonIndex==index2 && viewOrdescription == 0 }" @click="showDataView(index,index1,index2)">预览</button>
 32 |                       <button :class="{highlight:  parentIndex == index && childIndex==index1 && grandsonIndex==index2 && viewOrdescription == 1}" @click="showDataDesCription(index,index1,index2)">说明</button>
 33 |                     </p>
 34 |                   </div>
 35 |                 </div>
 36 |               </div>
 37 |           </div>
 38 |         </div> 
 39 |       </div>
 40 |     </div>
 41 |     <!--数据列表end-->
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 | require('../style/dataSelector.scss')
 47 | import {mapState} from 'vuex'
 48 | import messageBus from '../bus/messageBus';
 49 | 
 50 | export default {
 51 |   name: 'DataSelector',
 52 |   data () {
 53 |     return {
 54 |       parentIndex: 0,
 55 |       childIndex:0,
 56 |       grandsonIndex:0,
 57 |       viewOrdescription: 0,
 58 |       ImgChildNodeSrc:require('../assets/img/service.png'),
 59 |       ImgParentNodeSrc:require('../assets/img/mind_map.png'),
 60 |     }
 61 |   },
 62 |   mounted(){
 63 |     //控制点击节点，收起列表的动画
 64 |     $(document).ready(function (){  
 65 |         //找到所有的span，并且点击span以后，控制一下元素div的显示和隐藏  
 66 |         $(".parent_node").click(function (){  
 67 |           $(this).next().toggle("slow");  
 68 |         });   
 69 |         //初始化时隐藏状态  
 70 |         $(".child_list").each(function (index,domEle){  
 71 |           $(domEle).show("slow");  
 72 |         });
 73 |         $(".child_node").click(function (){  
 74 |           $(this).next().toggle("slow");  
 75 |         });
 76 |         $(".grand_son_list").each(function (index,domEle){  
 77 |           $(domEle).show("slow");  
 78 |         });
 79 |     });
 80 |   },
 81 |   computed:{
 82 |     ...mapState({
 83 |       computeSuccess: state => state.ComputeResultBtnShow,
 84 |       data_list: state => state.data_list,
 85 |       par_list:state=>state.par_list
 86 |     })
 87 |   },
 88 |   methods:{
 89 |     /**
 90 |      * 预览按钮
 91 |      * @param index   父节点索引,示例数据/本地数据
 92 |      * @param index1  数据节点索引，具体的数据名称
 93 |      * @param index2  属性节点索引，具体数据中的属性名称
 94 |      */
 95 |     showDataView:function(index,index1,index2){
 96 |       this.$router.push({path:'/home'});
 97 |       this.IndexChange(index,index1,index2);
 98 |       this.viewOrdescription = 0;
 99 |     },
100 |     showDataDesCription:function(index,index1,index2){
101 |       this.$router.push({path:'/description'});
102 |       this.IndexChange(index,index1,index2);
103 |       this.viewOrdescription = 1;
104 |     },
105 |     //传输目前选择的节点的index到vuex
106 |     IndexChange:function(index,index1,index2){
107 |       this.parentIndex = index;
108 |       this.childIndex = index1;
109 |       this.grandsonIndex = index2;
110 |       this.$store.dispatch('parentIndexAction' , this.parentIndex);
111 |       this.$store.dispatch('childIndexAction' , this.childIndex);
112 |       this.$store.dispatch('grandSonIndexAction' , this.grandsonIndex);
113 |     },
114 |     //数据节点上查看计算结果的按钮响应函数
115 |     showComputeResult:function(){
116 |       this.$router.push({path:'/computeresult/computeLog'});
117 |     }
118 |   }
119 | }
120 | function upload(input) {
121 |   //支持chrome IE10
122 |   if (window.FileReader) {
123 |     let file = input.files[0],reader = new FileReader();
124 |     filename = file.name.split(".")[0];
125 |     reader.onload = function() {
126 |       console.log(this.result)
127 |       alert(this.result);
128 |     }
129 |     reader.readAsText(file);
130 |   } 
131 |   //支持IE 7 8 9 10
132 |   else if (typeof window.ActiveXObject != 'undefined'){
133 |     let xmlDoc; 
134 |     xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
135 |     xmlDoc.async = false; 
136 |     xmlDoc.load(input.value); 
137 |     alert(xmlDoc.xml); 
138 |   } 
139 |   //支持FF
140 |   else if (document.implementation && document.implementation.createDocument) { 
141 |     let xmlDoc; 
142 |     xmlDoc = document.implementation.createDocument("", "", null); 
143 |     xmlDoc.async = false; 
144 |     xmlDoc.load(input.value); 
145 |     alert(xmlDoc.xml);
146 |   } else { 
147 |     alert('error'); 
148 |   } 
149 | }
150 | 
151 | 
152 | 
153 | </script>


--------------------------------------------------------------------------------
/src/components/DataViewer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="data-container">
 3 |   	<header class="title"><p>计算数据内容</p></header><!-- /header -->
 4 |   	<div class="data-head">
 5 |       <table>
 6 |         <tr>
 7 |           <th v-for="key in Object.keys(dataA[0].features[0].properties).length>11 ? (Object.keys(dataA[0].features[0].properties)).slice(0,11) : Object.keys(dataA[0].features[0].properties)">{{key}}</th>
 8 |         </tr>
 9 | 	  </table>
10 | 	 </div>
11 | 	 <div class="data-table" id="data-table">
12 | 	  <table id="t1">
13 |         <tbody>
14 |           <tr v-for="line in dataA[0].features" :id="SpaceFilter(line.properties.name)" @click="InteractWithMap(line.properties.name,line)">
15 |             <td v-for="key in Object.keys(line.properties).length>11 ? (Object.keys(line.properties)).slice(0,11) : Object.keys(line.properties)">{{line.properties[key]}}</td>
16 |           </tr>
17 |         </tbody>
18 |       </table>
19 |     </div>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | require('../style/dataViewer.scss')
25 | import {mapState} from 'vuex'
26 | import messageBus from '../bus/messageBus.js'
27 | 
28 | export default {
29 |   name: 'DataViewer',
30 |   data () {
31 |     return {
32 |       titlename:'', 
33 |       proCol:[]    
34 |     }
35 |   },
36 |   mounted(){
37 |     this.getEventData();
38 |   },
39 |   computed:{
40 |     ...mapState({
41 |       parentNodeIndex: state => state.parent_node_index,
42 |       childNodeIndex: state => state.child_node_index
43 | 	  }),
44 |     dataA(){
45 |       return this.$store.state.data_list[this.parentNodeIndex].data_type[this.childNodeIndex].url;
46 |     },
47 |   },
48 |   methods:{
49 |     //绘制表格
50 |   	getEventData(){
51 |   		const that = this;
52 |   		messageBus.$on('event-to-chart',function(val){
53 |         this.titlename=val 
54 |         let id = '#'+that.SpaceFilter(this.titlename),
55 |             $objTr = $(id), 
56 |             t1 = document.getElementById('t1');
57 |         for(var i=0;i<t1.rows.length;i++){
58 |           t1.rows[i].style.backgroundColor='';
59 |         } 
60 |         $objTr.css("background-color","#DCDCDC"); //jquery方法,使表格中的滚动条滚动到指定位置，同时改变背景色
61 |         let tableContainer = $("#data-table"),
62 |             scrollLocation = $objTr.offset().top-tableContainer.offset().top+tableContainer.scrollTop();//计算滚动的位置
63 |         tableContainer.animate({scrollTop:scrollLocation},"slow"); //定位tr 
64 |       });
65 |   	},
66 |     /**
67 |      * 字符串格式化，将name中包含空格的字符串进行格式化，如New Mexico=>New-Mexico
68 |      * @param String string [description] name字符串
69 |      */
70 |     SpaceFilter:function(string){
71 |       if (typeof string === 'string') {
72 |         if(string.indexOf(" ") != -1) {
73 |             let string_ = string.replace(' ','_');
74 |             return string_;
75 |         }
76 |       }
77 |       return string;
78 |     },
79 |     /**
80 |      * 与地图交互，传输数据
81 |      * @param string name [description] 数据行的name，用于标识不同的数据行
82 |      * @param string line [description] 传输到地图端用于地图高亮的数据
83 |      */
84 |     InteractWithMap:function(name,line){
85 |       let t1 = document.getElementById('t1');
86 |       for(let i=0;i<t1.rows.length;i++){
87 |         t1.rows[i].style.backgroundColor='';
88 |       } 
89 |       let id = '#'+name,//点击数据行的id
90 |           $objTr = $(id); //找到数据行的dom 
91 |       $objTr.css("background-color","#DCDCDC"); //设置点击行的css
92 |       messageBus.$emit('from-table-to-map',line)
93 |     }
94 |   }
95 | }
96 | </script>
97 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <div class="left-side">
 4 |         <data-selector></data-selector>
 5 |         <par-definer></par-definer>
 6 |     </div>
 7 |     <div class="right-side">
 8 |       <router-view></router-view>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import dataSelector from './DataSelector'
15 | import parDefiner from './ParDefiner'
16 | require('../style/home.scss')
17 | 
18 | export default {
19 |   name: 'Home',
20 |   data () {
21 |     return {
22 |     }
23 |   },
24 |   mounted(){
25 |     this.$router.push({path:'/home'})
26 |   },
27 |   components:{
28 |     dataSelector,
29 |     parDefiner
30 |   }
31 | }
32 | </script>
33 | 


--------------------------------------------------------------------------------
/src/components/MapViewer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   	<div id="leafmap" style="width:100%;height:100%;z-index:1"></div> 
  3 | </template>
  4 | 
  5 | <script>
  6 | import Leaflet from 'leaflet'
  7 | import {mapState} from 'vuex'
  8 | import messageBus from '../bus/messageBus.js'
  9 | require('../style/main_style.scss')
 10 | 
 11 | var bgMapUrl = 'https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ2VtbWFhYWEiLCJhIjoiY2o2a2N5dzB1MWd1ZTMzcnlqMDhkM3ZjYyJ9.0vVVkY9k7t8z0e3uqMgQnQ';
 12 | 
 13 | export default {
 14 |   name: 'MapViewer',
 15 |   data () {
 16 |     return {
 17 |       	map: null,
 18 |         layer:null,
 19 |         highlightFromTable:null,
 20 |         legendLayer:null,
 21 |         legendColor:['#FFEDA0','#FED976','#FEB24C', '#FD8D3C','#FC4E2A','#E31A1C','#BD0026','#800026'],
 22 |         highlightLayerStyle:{
 23 |           weight: 3,
 24 |           color: 'lightseagreen',
 25 |           dashArray: '',
 26 |           fillOpacity: 0.7
 27 |         }
 28 |     }
 29 |   },
 30 |   mounted(){
 31 |   	this.initMap();
 32 |     this.addDataViewOnMap();
 33 |     this.listenToTable();
 34 |   },
 35 |   computed:{
 36 |     ...mapState({
 37 |       parentNodeIndex: state => state.parent_node_index,
 38 |       childNodeIndex: state => state.child_node_index,
 39 |       grandSonNodeIndex: state => state.grandson_node_index,
 40 |     }),
 41 |     dataA(){return this.$store.state.data_list[this.parentNodeIndex].data_type[this.childNodeIndex].url;},//节点数据，例如房价数据
 42 |     par(){return this.$store.state.data_list[this.parentNodeIndex].data_type[this.childNodeIndex].children[this.grandSonNodeIndex].name;},    //当前选择的参数，数据属性
 43 |     viewZoom(){return this.$store.state.data_list[this.parentNodeIndex].data_type[this.childNodeIndex].zoom;},    //当前数据适宜的缩放尺度
 44 |     centerPosition(){return this.$store.state.data_list[this.parentNodeIndex].data_type[this.childNodeIndex].centerPosition;},    //当前数据适宜的中心
 45 |     maxVal(){return this.$store.state.data_list[this.parentNodeIndex].data_type[this.childNodeIndex].children[this.grandSonNodeIndex].max;},    //当前数据属性对应的最大值
 46 |     minVal(){return this.$store.state.data_list[this.parentNodeIndex].data_type[this.childNodeIndex].children[this.grandSonNodeIndex].min;},    //当前数据属性对应的最小值
 47 |   },
 48 |   watch:{
 49 | 	  par:'addDataViewOnMap'
 50 |   },
 51 |   methods:{
 52 | 	  //初始化地图
 53 |   	initMap:function(){
 54 |   		if(!this.map){
 55 |         this.map = L.map('leafmap').setView([50.505,-108.09],3);
 56 |         L.tileLayer(bgMapUrl).addTo(this.map);
 57 |       }
 58 |   	},
 59 | 	  //添加数据属性的可视化图层
 60 |     addDataViewOnMap:function(){
 61 |       this.layer && this.layer.remove();
 62 |       this.map.setView(this.centerPosition,this.viewZoom)
 63 |       let that = this;
 64 |       this.layer = L.geoJson(this.dataA,{
 65 |         pointToLayer: function(feature,latlng){
 66 |           return L.circleMarker(latlng,that.pointStyle(feature,that.par))
 67 |         },
 68 |         onEachFeature: this.onEachFeature
 69 |       }) 
 70 |       this.layer.addTo(this.map);	
 71 |       this.legendLayer && this.legendLayer.remove();
 72 |       this.addLegend();  
 73 |     },
 74 |     //添加地图图例
 75 |     addLegend: function(){
 76 |       let distance = (this.maxVal - this.minVal)/8, self = this;
 77 |       this.legendLayer = L.control({position: 'bottomright'});
 78 |       this.legendLayer.onAdd = function(map) {
 79 |         let div = L.DomUtil.create('div', 'map_legend'),
 80 |             grades = self.minVal < self.maxVal ? [self.minVal.toFixed(2), (self.minVal+distance).toFixed(2), (self.minVal+distance*2).toFixed(2), (self.minVal+distance*3).toFixed(2), (self.minVal+distance*4).toFixed(2), (self.minVal+distance*5).toFixed(2), (self.minVal+distance*6).toFixed(2), (self.minVal+distance*7).toFixed(2),(self.maxVal).toFixed(2)]:[self.minVal.toFixed(2), (self.maxVal).toFixed(2)],
 81 |             labels = [], from, to;
 82 |         for (let i = 0; i < grades.length; i++) {
 83 |           from = grades[i];
 84 |           to = grades[i + 1];
 85 |           to && labels.push('<i class="map_legend_div" style="background:' + self.legendColor[i] + '"></i><i class="map_legend_font"> ' + from + '&ndash;' + to+'</i>');
 86 |         }
 87 |         div.innerHTML = labels.join('<br>');
 88 |         return div;
 89 |       };
 90 |       this.legendLayer.addTo(this.map);
 91 |     },
 92 | 	  /**
 93 |      * 设置数据点分层设色的颜色
 94 |      * @param float d [description] 数据点属性值
 95 |      */
 96 |     GetColor:function(d) {
 97 |       let distance = (this.maxVal - this.minVal)/8
 98 |       return d > this.maxVal+distance*7 ? this.legendColor[7] :
 99 |              d > this.minVal+distance*6  ? this.legendColor[6] :
100 |              d > this.minVal+distance*5  ? this.legendColor[5] :
101 |              d > this.minVal+distance*4  ? this.legendColor[4] :
102 |              d > this.minVal+distance*3   ? this.legendColor[3] :
103 |              d > this.minVal+distance*2   ? this.legendColor[2] :
104 |              d > this.minVal+distance   ? this.legendColor[1] : this.legendColor[0];
105 |     },
106 |     //设置数据点显示的样式
107 |     pointStyle:function(feature,par){
108 |       return {
109 |             radius: 3,
110 |             fillColor: this.GetColor(feature.properties[par],par),
111 |             weight: 0,
112 |             opacity: 1,
113 |             fillOpacity: 0.8
114 |       }
115 |     },
116 |     //鼠标滑过特征图块，高亮显示
117 |     highlightFeature:function(e) {
118 |       let layer = e.target;
119 |       layer.setStyle(this.highlightLayerStyle);
120 |       !L.Browser.ie && !L.Browser.opera && !L.Browser.edge && layer.bringToFront();
121 |     },
122 |     //鼠标移出，还原样式
123 |     resetHighlight:function(e) {
124 |       this.layer.resetStyle(e.target);
125 |     },
126 | 	  //设置监听
127 |     onEachFeature:function(feature, layer) {
128 |         layer.on({
129 |             mouseover: this.highlightFeature,
130 |             mouseout: this.resetHighlight,
131 |             click: this.handleClick
132 |         });
133 |     },
134 |     //鼠标点击传输数据到dataViewer组件
135 |     handleClick:function(e){
136 |       let layer = e.target,prop = layer.feature.properties.name,self=this;
137 |       this.highlightFromTable && this.highlightFromTable.remove();//清空已经高亮的图层
138 |       self.highlightFromTable = L.geoJson(layer.feature,{
139 |         pointToLayer: function(feature,latlng){
140 |           return L.circleMarker(latlng,self.pointStyle(feature,self.par))
141 |         }
142 |       }).addTo(self.map)
143 |       self.highlightFromTable.setStyle(self.highlightLayerStyle);
144 | 	    messageBus.$emit('event-to-chart',prop);
145 |       
146 |     },
147 |     //监听从dataviewer中点击数据行所传输的数据，并在地图上显示点击数据行所对应的图块
148 |     listenToTable:function(){
149 |       const that = this;
150 |       messageBus.$on('from-table-to-map',function(val){
151 |         that.highlightFromTable && that.highlightFromTable.remove();//清空已经高亮的图层     
152 |         const temp = that;
153 |         that.highlightFromTable = L.geoJson(val,{   //叠加点击数据行对一个的小图块
154 |           pointToLayer: function(feature,latlng){
155 |             return L.circleMarker(latlng,temp.pointStyle(feature,temp.par))
156 |           }
157 |         }).addTo(that.map)
158 |         that.highlightFromTable.setStyle(that.highlightLayerStyle);
159 |       });
160 |     }
161 |   }
162 | }
163 | 
164 | </script>
165 | 
166 | 


--------------------------------------------------------------------------------
/src/components/ParDefiner.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="par-container">
  3 | 	<header class="title"><p>计算参数设置</p></header><!-- /header -->
  4 |     <div class="GWRtab" >
  5 | 		<button :class="{active: tab==1}" @click="gtwr">GTWR</button>
  6 | 		<button :class="{active: tab==2}" @click="gwr">GWR</button>
  7 | 	</div>
  8 | 	<div class="par-list">	   
  9 | 		<div v-if="tab==1">
 10 | 		    <div v-for="(par,index) in par_list1">
 11 | 		    	<span class="par-title">{{par.name}}：</span>
 12 | 				<input placeholder="输入参数" v-model="par.value" >
 13 | 				<select v-model="par.value">
 14 | 					<option v-for="item in index == 6 ? par_list1[6].options: index == 7 ? par_list1[7].options:varList">{{item}}</option>
 15 | 				</select>
 16 | 		        <p>参数说明：{{par.content}}</p>
 17 | 	   		</div>
 18 | 		</div>
 19 | 			 <div v-else>
 20 | 						<div v-for="(par,index) in par_list2">
 21 | 						<span class="par-title">{{par.name}}：</span>
 22 | 						<input placeholder="输入参数" v-model="par.value" >
 23 | 						<select v-show="par.name!='bandWidth'" v-model="par.value"><option v-for="item in varList">{{item}}</option></select>
 24 | 		        <p>参数说明：{{par.content}}</p>
 25 | 	   	   </div>
 26 | 	   	 </div>		  
 27 | 			<div style="background:white;width:100px;height:18px;border:none;margin-left: 206px">
 28 | 				<div id="proBar" style="height:30px;width:0%;background-color:rgba(0,0,0,0.8);color:rgba(0,0,0,0.8);border-radius: 3px;margin-left: 18px;">
 29 | 					<span style="display: inline-block;position: relative;"></span>
 30 | 				</div>
 31 | 			</div> 
 32 | 		<button class="submit" style="vertical-align:middle" @click="compute"><span>开始计算</span></button> 		
 33 | 	</div>  
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 | require('../style/parDefiner.scss')
 39 | import {mapState} from 'vuex'
 40 | import messageBus from '../bus/messageBus.js'
 41 | 
 42 | var $ = require("jquery")
 43 | export default {
 44 |   name: 'ParDefiner',
 45 |   data () {
 46 |     return {
 47 | 			tab:1,
 48 | 			par_list1:[
 49 | 				{name:'因变量', value:'', content:'GTWR模型的dependent variable'},
 50 | 				{name:'解释变量', value:'', content:'GTWR模型的explanatory variable'},
 51 | 				{name:'X - 坐标', value:'', content:'点或面板数据的x坐标，表示空间信息'},
 52 | 				{name:'Y - 坐标', value:'', content:'点或面板数据的y坐标，表示空间信息'},
 53 | 				{name:'时间维度', value:'', content:'点或面板数据的时间戳，表示时态信息'},
 54 | 				{name:'时空距比', value:'', content:'可自定义，也可自动优化生成'},
 55 | 				{name:'带宽方法', value:'', content:'选择计算带宽的方法，如AICc等',options:['交叉验证法','AIC准则','贝叶斯信息准则']},
 56 | 				{name:'核方法', value:'', content:'内核类型决定是固定距离还是可变的',options:['固定常量','可变函数']},
 57 | 			],
 58 | 			par_list2:[
 59 | 				{name:'X - 坐标',node:'X', value:'',content:'点或面板数据的x坐标，表示空间信息'},
 60 | 				{name:'Y - 坐标',node:'Y',  value:'',content:'点或面板数据的y坐标，表示空间信息'},
 61 | 				{name:'pctRural',node:'PctRural',  value:'',content:'暂无该参数的相关描述'},
 62 | 				{name:'pctbach',node:'PctBach',  value:'',content:'暂无该参数的相关描述'},
 63 | 				{name:'totPop90',node:'TotPop90',  value:'',content:'暂无该参数的相关描述'},
 64 | 				{name:'bandWidth', node:'bandWidth', value:0, content:'输入带宽'},
 65 | 			]
 66 |     }
 67 |   },
 68 | 	computed:{
 69 | 			...mapState({
 70 | 				parentNodeIndex: state => state.parent_node_index,
 71 | 				childNodeIndex: state => state.child_node_index,
 72 | 				computeLogRecord: state => state.computeLogRecord
 73 | 			}),
 74 | 			computeData(){return this.$store.state.data_list[this.parentNodeIndex].data_type[this.childNodeIndex].url;},
 75 | 			viewZoom(){return this.$store.state.data_list[this.parentNodeIndex].data_type[this.childNodeIndex].zoom;},//当前数据适宜的缩放尺度
 76 | 			centerPosition(){return this.$store.state.data_list[this.parentNodeIndex].data_type[this.childNodeIndex].centerPosition;},//当前数据适宜的中心		
 77 | 			varList(){return Object.keys(this.$store.state.data_list[this.parentNodeIndex].data_type[this.childNodeIndex].url[0].features[0].properties);},//数据属性列表
 78 |   },
 79 |   methods:{
 80 | 		//整合计算数据，判断参数是否设置完全和正确，整合初始计算数据
 81 | 		organizeComputeData: function(parArray){
 82 | 				let data = [],dataObj = {},originData = this.computeData[0].features;
 83 | 				for(let ind=0;ind<parArray.length;ind++){if(!parArray[ind].value) {return {errCode:1000};break;}}//判断参数是否设置完全
 84 | 				try{
 85 | 						for(let i=0;i<originData.length;i++){
 86 | 							let obj = {}; obj.properties = {};
 87 | 							for(let j=0;j<parArray.length-1;j++){
 88 | 								obj.properties[parArray[j].node] = originData[i].properties[parArray[j].value];
 89 | 							}
 90 | 							data.push(obj)
 91 | 						}
 92 | 						dataObj.features = data;
 93 | 						return dataObj;
 94 | 				}catch(e){return {errCode:1001};}
 95 | 		},
 96 | 		//判断计算参数是否设置正确，或者设置完整
 97 | 		judgeParSetting: function(data){
 98 | 			return data.hasOwnProperty('errCode')? false:true;
 99 | 		},
100 | 		//处理开始计算后的路由切换、按钮动画等内容
101 | 		handleComputeProcessing:function(){
102 | 				this.$store.dispatch('computeSuccessAction' , [false,this.parentNodeIndex,this.childNodeIndex]);//清空“查看计算结果按钮”
103 | 				$("#proBar").addClass('btn-animation');//按钮动画
104 | 				this.$router.push({path:'/computeresult/computeLog'});//切换路由到计算日志面板
105 | 				messageBus.$emit('judge-right-container-tab','log');
106 | 				messageBus.$emit('compute-again',true);
107 | 		},
108 | 		//"开始计算"按钮响应函数
109 |   	compute:function(){
110 | 			let parArray = this.tab == 1 ? this.par_list1: this.par_list2,
111 | 			computeOriginData = this.organizeComputeData(parArray),
112 | 			computeParSetting = this.judgeParSetting(computeOriginData),
113 | 			bandWidth = this.tab == 2 ? this.par_list2[this.par_list2.length-1].value:0,
114 | 			requestUrl = this.tab == 1 ? 'http://localhost:8080/GWR_war/GTWRService':'http://localhost:8080/GWR_war/GWRService',
115 | 			requestPar = this.tab == 2 ? {computeData: JSON.stringify(computeOriginData),bandWidth:bandWidth} : {computeData: JSON.stringify(computeOriginData)},
116 | 			result = {data: {"type": "FeatureCollection" ,"features":[]},minVal: null,maxVal: null,centerPosition: this.centerPosition,zoom: this.viewZoom,};
117 | 			(window.sessionStorage.getItem('computeLog') || window.sessionStorage.getItem('computeLog') == '') && window.sessionStorage.removeItem('computeLog');
118 | 			(window.sessionStorage.getItem('computeResultForChart') || window.sessionStorage.getItem('computeResultForChart') == '') && window.sessionStorage.removeItem('computeResultForChart');
119 | 			this.$store.dispatch('computeLogRecordAction', null);
120 | 			this.handleComputeProcessing();
121 | 			messageBus.$emit('compute-again-compute-result-reflesh',true);
122 | 			if(computeParSetting){			
123 | 				this.tab == 2 ? this.gwrComputeRequest(requestUrl,requestPar,result):this.gtwrComputeRequest(result);
124 | 			}else{
125 | 				this.$store.dispatch('computeLogRecordAction', computeOriginData.errCode == 1000 ? [{result:"Parameters setting is not completed，computing failed"},{result:'Please set the blank parameters'}]:computeOriginData.errCode == 1001?[{result:"Parameters are wrong，computing failed"},{result:'Please check every parameter'}]:'');
126 | 			}
127 | 		},
128 | 		//gtwr计算
129 | 		gtwrComputeRequest:function(result){
130 | 			if(this.computeData[0].features[0].properties.hasOwnProperty('Pprice')){
131 | 				try{
132 | 					let response = this.computeData[0].features, arr = [];
133 | 					for(let i=0;i<response.length;i++){
134 | 						arr.push(response[i].properties.Pprice);
135 | 						let obj = {
136 | 							"type": "Feature",
137 | 							"properties": response[i].properties,
138 | 							"geometry": {
139 | 								"type": "Point",
140 | 								"coordinates": [response[i].properties.Longtitude, response[i].properties.Latitude]
141 | 							}
142 | 						};
143 | 						obj.properties.yhat = response[i].properties.Pprice;
144 | 						result.data.features.push(obj);
145 | 					}
146 | 					result.minVal = Math.min.apply(null,arr);
147 | 					result.maxVal = Math.max.apply(null,arr);
148 | 					this.$store.dispatch('computeResultAction' , result);
149 | 					let logMsg = [{number:"Step 1",line:"Parsing data and parsing parameter settings",result:''},{number:"Step 2",line:"Parsing coordinates of spatial points",result:''},{number:"Step 3",line:"Calculating GTWR predicted result",result:''},{number:"",line:"",result:'computing success'}];
150 | 					logMsg.push({tip:'点击右侧“图表展示”按钮查看计算结果'})
151 | 					this.$store.dispatch('computeLogRecordAction', logMsg); //计算成功，计算日志显示
152 | 				}catch(e){
153 | 					this.$store.dispatch('computeLogRecordAction', [{result:"GTWR computing failed"}]); //计算失败，计算日志显示
154 | 				}
155 | 			}else{
156 | 				this.$store.dispatch('computeLogRecordAction', [{result:"GTWR computing failed"}]); //计算失败，计算日志显示
157 | 			}	
158 | 		},
159 | 		/** 
160 | 		 * gwr计算请求
161 | 		 * @param requestUrl  请求链接
162 | 		 * @param requestPar  请求参数
163 | 		 * @param result      支持图表展示的计算结果初始化
164 | 		*/
165 | 		gwrComputeRequest: function(requestUrl,requestPar,result){
166 | 			let self = this, arr=[];
167 | 			try{
168 | 				$.ajax({
169 | 						url: requestUrl,type: "GET",dataType: "json",data: requestPar,
170 | 						success: function(response){  
171 | 							if(self.computeLogRecord!=null){self.$store.dispatch('computeLogRecordAction', null);}
172 | 							if(response && response[0].hasOwnProperty('log') && !response[0].log ){
173 | 								for(let i=0;i<response.length-1;i++){
174 | 									arr.push(response[i].yhat);
175 | 									let obj = {
176 | 										"type": "Feature",
177 | 										"properties": Object.assign(response[i],self.computeData[0].features[i].properties),
178 | 										"geometry": {
179 | 											"type": "Point",
180 | 											"coordinates": [response[i].x, response[i].y]
181 | 										}
182 | 									};
183 | 									result.data.features.push(obj);
184 | 								}
185 | 								result.minVal = Math.min.apply(null,arr);
186 | 								result.maxVal = Math.max.apply(null,arr);
187 | 								self.$store.dispatch('computeResultAction' , result);
188 | 								let logMsg = JSON.parse(response[response.length-1].log);
189 | 								logMsg.push({tip:'点击右侧“图表展示”按钮查看计算结果'})
190 | 								self.$store.dispatch('computeLogRecordAction', logMsg); //计算成功，计算日志显示
191 | 							}else{
192 | 								self.$store.dispatch('computeLogRecordAction', response); //计算失败，计算日志显示
193 | 							}			
194 | 						},
195 | 						error: function(xhr,status,error){
196 | 							self.$store.dispatch('computeLogRecordAction', [{result:xhr.statusText}]);//gwr后台程序调用错误，计算日志显示
197 | 						}
198 | 				});
199 | 			}catch(e){
200 | 				this.$store.dispatch('computeLogRecordAction',[{result:"This data can't be used to do gwr computing，computing failed"},{result:'Please change other data'}]);
201 | 			}
202 | 		},
203 |   	gtwr:function(){
204 |         this.tab=1
205 | 		},
206 | 		gwr:function(){
207 | 				this.tab=2
208 | 		}
209 |   }
210 | }
211 | </script>
212 | 


--------------------------------------------------------------------------------
/src/components/RightSideForDataView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="right-container">
 3 |     <div class="map-container">  
 4 |       <map-viewer></map-viewer>
 5 |     </div>
 6 |     <data-viewer></data-viewer>
 7 |     <div style="clear:both"></div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import mapViewer from './MapViewer'
13 | import dataViewer from './DataViewer'
14 | import messageBus from '../bus/messageBus';
15 | require('../style/main_style.scss')
16 | 
17 | export default {
18 |   name: 'RightSideForDataView',
19 |   data () {
20 |     return {
21 |     }
22 |   },
23 |   components:{
24 |     dataViewer,
25 |     mapViewer
26 |   }
27 | }
28 | </script>
29 | 


--------------------------------------------------------------------------------
/src/components/RightSideForDescription.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="right-container-descrip">
 3 |     <div class="right-container-descrip-info">
 4 |       <header class="title"><p>数据内容描述</p></header><!-- /header -->
 5 |       <div class="right-container-descrip-info_detail">
 6 |         <p v-for="item in info">
 7 |           <span class="title">{{item.name}}:</span>
 8 |           <span class="content">{{item.content}}</span>
 9 |         </p>
10 |       </div>
11 |     </div>
12 |     <div class="right-container-descrip-extent">
13 |       <header class="title"><p>数据空间范围</p></header><!-- /header -->
14 |       <div class="right-container-descrip-extent_map">
15 |         <div class="right-container-descrip-extent_map_top"><span>North Bound</span><p>{{LogVal[1].toFixed(2)}}</p></div>
16 |         <div class="right-container-descrip-extent_map_mid">
17 |           <div class="left-cor"><span>West Bound</span><p>{{latVal[0].toFixed(2)}}</p></div>
18 |           <div id="extent-map" ></div>
19 |           <div class="right-cor"><span>East Bound</span><p>{{latVal[1].toFixed(2)}}</p></div>
20 |         </div>  
21 |         <div class="right-container-descrip-extent_map_bot"><span>South Bound</span><p>{{LogVal[0].toFixed(2)}}</p></div>
22 |       </div>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | import Leaflet from 'leaflet'
29 | import {mapState} from 'vuex'
30 | import messageBus from '../bus/messageBus';
31 | require('../style/main_style.scss')
32 | 
33 | var bgMapUrl = 'https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ2VtbWFhYWEiLCJhIjoiY2o2a2N5dzB1MWd1ZTMzcnlqMDhkM3ZjYyJ9.0vVVkY9k7t8z0e3uqMgQnQ';
34 | 
35 | export default {
36 |   name: 'RightSideForDataView',
37 |   data () {
38 |     return {
39 |       map: null,
40 |       info:[{
41 |         name:'Title',
42 |         content:'Attributes for MRB_E2RF1 Catchements by Major River Basins in the Conterminous United States: Level 3 Nutrient Ecoregions'
43 |       },{
44 |         name:'Date',
45 |         content:'2011'
46 |       },{
47 |         name:'Date Type',
48 |         content:'publication date'
49 |       },{
50 |         name:'code',
51 |         content:''
52 |       },{
53 |         name:'Hierachy level',
54 |         content:'This tabular data set represents the area of each level 3 nutrient ecoregion in square meters compiled for every MRB_E2RF1 catchment of the Major River Basins'
55 |       },{
56 |         name:'Purpose',
57 |         content:'referenced chatacteristics of watersheds, including contaminant sources and factors influencing terrestrial and stream transport'
58 |       },{
59 |         name:'status',
60 |         content:'Complete'
61 |       }]
62 |     }
63 |   },
64 |   computed:{
65 |     ...mapState({
66 |       parentNodeIndex: state => state.parent_node_index,
67 |       childNodeIndex: state => state.child_node_index,
68 |       grandSonNodeIndex: state => state.grandson_node_index,
69 |     }), 
70 |     LogVal(){return this.$store.state.data_list[this.parentNodeIndex].data_type[this.childNodeIndex].children[this.grandSonNodeIndex].Logitude;},    //当前数据属性对应的最大值
71 |     latVal(){return this.$store.state.data_list[this.parentNodeIndex].data_type[this.childNodeIndex].children[this.grandSonNodeIndex].latitude;},    //当前数据属性对应的最小值viewZoom(){return this.$store.state.data_list[this.parentNodeIndex].data_type[this.childNodeIndex].zoom;},    //当前数据适宜的缩放尺度
72 |     viewZoom(){return this.$store.state.data_list[this.parentNodeIndex].data_type[this.childNodeIndex].zoom;},    //当前数据适宜的缩放尺度
73 |     centerPosition(){return this.$store.state.data_list[this.parentNodeIndex].data_type[this.childNodeIndex].centerPosition;},    //当前数据适宜的中心
74 |   },
75 |   mounted(){
76 |     this.initMap();
77 |     this.grawExtent();
78 |   },
79 |   methods:{
80 |     //初始化地图
81 |   	initMap:function(){
82 |   		if(!this.map){
83 |         this.map = L.map('extent-map').setView([50.505,-108.09],3);
84 |         L.tileLayer(bgMapUrl).addTo(this.map);
85 |         this.map.setView(this.centerPosition,(this.viewZoom-2));
86 |       }
87 |     },
88 |     //绘制区域
89 |     grawExtent:function(){
90 |       // define rectangle geographical bounds
91 |       let bounds = [[this.latVal[0], this.LogVal[0]], [this.latVal[1], this.LogVal[1]]];
92 |       // create an orange rectangle
93 |       L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(this.map);
94 |     }
95 |   }
96 | }
97 | </script>
98 | 


--------------------------------------------------------------------------------
/src/components/RightSideForResult.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="result-canel">
 3 |       <div class="content">
 4 |         <router-view></router-view>
 5 |       </div>    
 6 |       <div class="tab" id="tab" @click="switchTab">
 7 |           <button class="result-switch-tab" id="log" v-tip="tipForComputeLog">计算日志</button>
 8 |           <button class="result-switch-tab" id="chart" v-show="computeSuccess" v-tip="tipForChart">图表展示</button>         
 9 |           <button class="result-switch-tab" id="precision" v-show="computeSuccess" v-tip="tipForPrecision">精度评价</button>
10 |       </div>
11 |     </div>
12 | </template>
13 | 
14 | <script>
15 | require('../style/rightSideForResult.scss')
16 | import {mapState} from 'vuex'
17 | import messageBus from '../bus/messageBus';
18 | import chartAnalysis from '../components/rightSideForResult/chartAnalysis.vue'
19 | import computeLog from '../components/rightSideForResult/computeLog.vue'
20 | import precision from '../components/rightSideForResult/precision.vue'
21 | 
22 | export default {
23 |   name: 'RightSideForResult',
24 |   data () {
25 |     return {
26 |       tipForChart: '计算结果可视化面板',
27 |       tipForComputeLog: '计算过程的日志打印面板',
28 |       tipForPrecision:'计算结果精度评价面板'
29 |     }
30 |   },
31 |   components:{
32 |     precision,
33 |     chartAnalysis,
34 |     computeLog
35 |   },
36 |   mounted(){
37 |     this.$router.push({path:'/computeresult/computeLog'});//初试加载中页面路由指向计算日志模块
38 |     document.getElementById("log").style.border="2px solid lightseagreen";
39 |     this.listenComputeAgainTabHighlight();
40 |   },
41 |   computed:{
42 |     ...mapState({
43 |       computeSuccess: state => state.ComputeResultBtnShow.computeSuccess,
44 |       rightContainerShow: state => state.rightContainerShow
45 |     })
46 |   },
47 |   methods:{
48 |     //重新计算之后更改右侧tab高亮
49 |     listenComputeAgainTabHighlight:function(){
50 |       messageBus.$on('judge-right-container-tab',(par)=>{
51 |         par && this.handleBtnBorder(par);
52 |       })
53 |     },
54 |     //切换tab跳转到对应的页面
55 |     switchTab:function(e){
56 |       let rootUrl = '/computeresult/';
57 |       this.handleBtnBorder(e.target.id);//按钮高亮
58 |       switch(e.target.id){
59 |         case 'chart':
60 |           this.$router.push({path:rootUrl+'chartAnalysis'});
61 |           break;
62 |         case 'log':
63 |           this.$router.push({path:rootUrl+'computeLog'})
64 |           break;
65 |         case 'precision':
66 |           this.$router.push({path:rootUrl+'precision'})
67 |       }
68 |     },
69 |     /**
70 |      * 调整按钮边框
71 |      * @param String id [description] tab切换按钮的id
72 |      */
73 |     handleBtnBorder:function(id){
74 |       let tab = document.getElementsByClassName('result-switch-tab');
75 |       for (let i = 0; i< tab.length; i++) {
76 |         if (tab[i].id != id) {
77 |           tab[i].style.border="none"
78 |         } else{
79 |           tab[i].style.border="2px solid lightseagreen"
80 |         };
81 |       }
82 |     }
83 |   }
84 | }
85 | </script>
86 | 


--------------------------------------------------------------------------------
/src/components/firstPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <div id="hello">
 4 |       <dynamic></dynamic>
 5 |     </div>
 6 |     <div class="intro-text">
 7 |       <p class="title">GTWR云计算平台</p>
 8 |       <router-link to="/demo" class="link">点击此处可浏览更多GTWR应用案例</router-link>
 9 |     </div>
10 |   </div>
11 | </template>
12 |     
13 | <script>
14 | require('../style/firstPage.scss')
15 | import dynamic from '../components/firstPage/DynamicThreed.vue'
16 | 
17 | export default {
18 |   name: 'firstPage', 
19 |   data () {
20 |     return {  
21 |     }
22 |   },
23 |   components: {
24 |     dynamic
25 |   }
26 | }
27 | </script>


--------------------------------------------------------------------------------
/src/components/firstPage/DynamicThreed.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div id="hello">
  3 |       <div id="dynamic"></div>
  4 |     </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | require('../../style/firstPage.scss')
  9 | import echarts from 'echarts'
 10 | import 'echarts-gl'
 11 | import linedata from '../../assets/data/dataForDynamicThreeD.json'
 12 | 
 13 | export default {
 14 |   name: 'DynamicThreed', 
 15 |   data () {
 16 |     return {
 17 |       myChart:null,
 18 |       linedata: null
 19 |     }
 20 |   },
 21 |   mounted(){
 22 |     let self = this;
 23 |     this.dynamicThreeD();
 24 |     //适应屏幕大小绘图
 25 |     window.onresize = function(){
 26 |         setTimeout(function(){
 27 |             self.myChart.resize();
 28 |         },200)
 29 |     }
 30 |   },
 31 |   beforeDestroy(){
 32 |     this.myChart.clear();
 33 |   },
 34 |   methods:{
 35 |     //投影转换，经纬度计算
 36 |     coltowgs:function(LONCOL, LATCOL) {
 37 |         let lat1 = 30.6666667,
 38 |             lat2 = 31.8833333,
 39 |             lon1 = 120.866667,
 40 |             lon2 = 122.2,
 41 |             accuracy = 500,
 42 |             latStart = Math.min(lat1, lat2),
 43 |             lonStart = Math.min(lon1, lon2),
 44 |             deltaLon = accuracy * 360 / (2 * Math.PI * 6371004 * Math.cos((lat1 + lat2) * Math.PI / 360)),
 45 |             deltaLat = accuracy * 360 / (2 * Math.PI * 6371004),
 46 |             HBLON = LONCOL * deltaLon + (lonStart - deltaLon / 2),
 47 |             HBLAT = LATCOL * deltaLat + (latStart - deltaLat / 2)
 48 |         return [HBLON, HBLAT]
 49 |     },
 50 |     //绘制三维动态可视化效果
 51 |     dynamicThreeD:function(){
 52 |         let dom = document.getElementById("dynamic"),app = {},option;
 53 |         this.myChart = echarts.init(dom);
 54 |         mapboxgl.accessToken ='pk.eyJ1IjoiZ2VtbWFhYWEiLCJhIjoiY2o2a2N5dzB1MWd1ZTMzcnlqMDhkM3ZjYyJ9.0vVVkY9k7t8z0e3uqMgQnQ';
 55 |         option = {
 56 |             baseOption: {
 57 |                 timeline: {
 58 |                     axisType: 'category',
 59 |                     orient: 'vertical',
 60 |                     autoPlay: true,
 61 |                     inverse: true,
 62 |                     playInterval: 300,
 63 |                     left: null,
 64 |                     right: 0,
 65 |                     top: null,
 66 |                     bottom: 50,
 67 |                     width: 55,
 68 |                     height: null,
 69 |                     show:false,
 70 |                     label: {
 71 |                         normal: {
 72 |                             textStyle: {color: '#fff'}
 73 |                         },
 74 |                         emphasis: {
 75 |                             textStyle: {color: '#aaa'}
 76 |                         }
 77 |                     },
 78 |                     symbol: 'circle',
 79 |                     lineStyle: {color: '#555'},
 80 |                     checkpointStyle: {
 81 |                         color: '#bbb',
 82 |                         borderColor: '#777',
 83 |                         borderWidth: 2
 84 |                     },
 85 |                     controlStyle: {
 86 |                         normal: {
 87 |                             color: '#666',
 88 |                             borderColor: '#666'
 89 |                         },
 90 |                         emphasis: {
 91 |                             color: '#aaa',
 92 |                             borderColor: '#aaa'
 93 |                         }
 94 |                     },
 95 |                     data: []
 96 |                 },
 97 |                 visualMap: {
 98 |                     show: false,
 99 |                     calculable: true,
100 |                     realtime: false,
101 |                     inRange: {color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']},
102 |                     outOfRange: {colorAlpha: 0}
103 |                 },
104 |                 mapbox: {
105 |                     center: [120.5393, 31.323070],
106 |                     zoom: 9,
107 |                     minZoom:8,
108 |                     maxZoom:11,
109 |                     pitch: 45,
110 |                     bearing: -0,
111 |                     style: 'mapbox://styles/mapbox/satellite-v9',
112 |                     boxHeight: 25,
113 |                     postEffect: {
114 |                         enable: true,
115 |                         SSAO: {
116 |                             enable: true,
117 |                             radius: 2,
118 |                             intensity: 1.5
119 |                         }
120 |                     },
121 |                     shading:'color',
122 |                 },
123 |                 series: [{
124 |                     type: 'bar3D',
125 |                     shading: 'realistic',
126 |                     coordinateSystem: 'mapbox',
127 |                     barSize: 0.16,
128 |                     silent: true
129 |                 }]
130 |             },
131 |             options: []
132 |         }
133 |         for (let n = 0; n < linedata[2].length; n++) {
134 |             option.baseOption.timeline.data.push(linedata[2][n]);
135 |             let timedata = linedata[0][n],data = [];
136 |             for (let i = 0; i < timedata.length; i += 1) {
137 |                 let loncol = linedata[0][n][i][0],
138 |                     latcol = linedata[0][n][i][1],
139 |                     count = linedata[0][n][i][2],
140 |                     coor = this.coltowgs(loncol, latcol);
141 |                 data.push({
142 |                     'value': [coor[0], coor[1], count]
143 |                 })
144 |             }
145 |             data.push({
146 |                 'value': [120, 30, linedata[1]]
147 |             })
148 |             option.options.push({
149 |                 visualMap: {max: linedata[1]},
150 |                 series: [{data: data}]
151 |             });
152 |         }
153 |         if (option && typeof option === "object") {
154 |             this.myChart.setOption(option, true);
155 |         }
156 |     }
157 |   }
158 | }
159 | </script>


--------------------------------------------------------------------------------
/src/components/firstPage/slides.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="width:100%;height:100%" class="slides">
  3 |     <div class="slides_container" v-for="cur in [0,1,2,3]" v-show="slideShow[cur]" >
  4 |       <div class="slides_container_top">
  5 |         <div class="slides_container_top_img"><img :src="slidesContent[cur].imgSrc" class="slides_container_top_img_img"></div>
  6 |         <div class="slides_container_top_chartContainertop">
  7 |           <div :id="ChartId[cur][0]" class="slides_container_top_chartContainertop_chart"></div>
  8 |           <div :id="ChartId[cur][1]" class="slides_container_top_chartContainertop_chart"></div>
  9 |         </div>
 10 |       </div>
 11 |       <div class="slides_container_bottom">
 12 |         <div class="slides_container_bottom_left">
 13 |           <div class="slides_container_bottom_left_paper"><img :src="slidesContent[cur].paperSrc" class="slides_container_bottom_left_paper_img"></div>
 14 |           <div class="slides_container_bottom_left_abstract">{{(slidesContent[cur].abstract).slice(0,700)}}...<a target="_blank" :href="slidesContent[cur].paperLink">more</a></div>
 15 |         </div>
 16 |         <div class="slides_container_bottom_chart" :id="ChartId[cur][2]"></div> 
 17 |       </div>
 18 |     </div>
 19 |     <div class="playBtn">
 20 |       <button v-for="n in [0,1,2,3]" class="circle" @click="carousel(n)" :class="{on: index === n}"></button>
 21 |     </div>  
 22 |   </div> 
 23 | </template>
 24 | 
 25 | <script>
 26 | import echarts from 'echarts'
 27 | require('../../style/firstPage.scss')
 28 | 
 29 | export default {
 30 |   name: 'slides', 
 31 |   data () {
 32 |     return {
 33 |       imgs:null,
 34 |       slide:null,
 35 |       index:0,
 36 |       show:true,
 37 |       inv:5000,
 38 |       slideShow:[true,false,false,false],
 39 |       ChartId:[['chart0','chart1','chart2'],['chart3','chart4','chart5'],['chart6','chart7','chart8'],['chart9','chart10','chart11']],
 40 |       slidesContent:[
 41 |         {
 42 |           paperLink:"https://ac.els-cdn.com/S003442571730593X/1-s2.0-S003442571730593X-main.pdf?_tid=ceb21736-eb82-4109-8210-58ad341e6587&acdnat=1542623829_06e159cf1c08654469fa0ed06b43565e",
 43 |           imgSrc:require('../../assets/img/test1.jpg'),
 44 |           paperSrc:require('../../assets/img/test1_paper.png'),
 45 |           abstract:"The use of satellite-retrieved aerosol optical depth (AOD) data and statistical modeling provides a promising approach to estimating PM2.5 concentrations for a large region. However, few studies have conducted high spatial resolution assessments of ground-level PM2.5 for China at the national scale, due to the limitations of high-resolution AOD products. To generate high-resolution PM2.5 for the entirety of mainland China, a combined 3 km AOD dataset was produced by blending the newly released 3 km-resolution Moderate Resolution Imaging Spectroradiometer (MODIS) Dark Target AOD data with the 10 km-resolution MODIS Deep Blue AOD data. Using this dataset, surface PM2.5 measurements, and ancillary information, a space-time regression model that is an improved geographically and temporally weighted regression (GTWR) with an interior point algorithm (IPA)-based efficient mechanism for selecting optimal parameter values,was developed to estimate a large set of daily PM2.5 concentrations. Comparisons with the popular spatiotemporal models (daily geographically weighted regression and two-stage model) indicated that the proposed GTWR model, with an R2 of 0.80 in cross-validation (CV), performs notably better than the two other models, which have an R2 in CV of 0.71 and 0.72, respectively. The use of the combined 3-km high resolution AOD data was found not only to present detailed particle gradients, but also to enhance model performance (CV R2 is only 0.32 for the non-combined AOD data). Furthermore, the GTWR’s ability to predict PM2.5 for days without PM2.5-AOD paired samples and to generate historical PM2.5 estimates was demonstrated. As a result, fine-scale PM2.5 maps over China were generated, and several PM2.5 hotspots were identified. Therefore, it becomes possible to generate daily high-resolution PM2.5 estimates over a large area using GTWR, due to its synergy of spatial and temporal dimensions in the data and its ability to extend the temporal coverage of PM2.5 observations",
 46 |         },
 47 |         {
 48 |           paperLink:"https://ac.els-cdn.com/S0269749118303567/1-s2.0-S0269749118303567-main.pdf?_tid=e7274526-2e98-4d4f-9dee-d986cb2feec2&acdnat=1542623896_035f6bd60cd498d92a930a0315995485",
 49 |           imgSrc:require('../../assets/img/test2.jpg'),
 50 |           paperSrc:require('../../assets/img/test2_paper.png'),
 51 |           abstract:"Air pollution, being especially severe in the fast-growing developing world, continues to post a threat to public health. Yet, few studies are capable of quantifying well how different groups of people in different places experience different levels of air pollution at the global scale. In this paper, we use worldwide Chinese as a lens to quantify the spatiotemporal variations and geographic differences in PM2.5 exposures using unprecedented mobile phone big data and air pollution records. The results show that Chinese in South and East Asia suffer relatively serious PM2.5 exposures, where the Chinese in China have the highest PM2.5 exposures (52.8 mg/m3/year), which is fourfold higher than the exposures in the United States (10.7mg/m3/year). Overall, the Chinese in Asian cities (35.5mg/m3/year) experienced the most serious PM2.5 exposures when compared with the Chinese in the cities of other continents. These results, partly presented as a spatiotemporally explicit map of PM2.5 exposures for worldwide Chinese, help researchers and governments to consider how to address the effects of air pollution on public health with respect to different population groups and geographic locations",
 52 |         },
 53 |         {
 54 |           paperLink:"http://europepmc.org/backend/ptpmcrender.fcgi?accid=PMC5923615&blobtype=pdf",
 55 |           imgSrc:require('../../assets/img/test3.png'),
 56 |           paperSrc:require('../../assets/img/test3_paper.png'),
 57 |           abstract:"Extremely high fine particulate matter (PM2.5) concentration has been a topic of special concern in recent years because of its important and sensitive relation with health risks. However, many previous PM2.5 exposure assessments have practical limitations, due to the assumption that population distribution or air pollution levels are spatially stationary and temporally constant and people move within regions of generally the same air quality throughout a day or other time periods. To deal with this challenge, we propose a novel method to achieve the real-time estimation of population exposure to PM2.5 in China by integrating mobile-phone locating-request (MPL) big data and station-based PM2.5 observations. Nationwide experiments show that the proposed method can yield the estimation of population exposure to PM2.5 concentrations and cumulative inhaled PM2.5 masses with a 3-h updating frequency. Compared with the census-based method, it introduced the dynamics of population distribution into the exposure estimation, thereby providing an improved way to better assess the population exposure to PM2.5 at different temporal scales. Additionally, the proposed method and dataset can be easily extended to estimate other ambient pollutant exposures such as PM10, O3, SO2, and NO2, and may hold potential utilities in supporting the environmental exposure assessment and related policy-driven environmental actions",
 58 |         },
 59 |         {
 60 |           paperLink:"https://ac.els-cdn.com/S0048969718312257/1-s2.0-S0048969718312257-main.pdf?_tid=31cd4f0d-f60c-4e2a-8582-62b8905f8316&acdnat=1542624148_686a7ec5f28e79cb0cbdaf85d6795609",
 61 |           imgSrc:require('../../assets/img/test4.jpg'),
 62 |           paperSrc:require('../../assets/img/test4_paper.png'),
 63 |           abstract:"A growing body of evidence has proven that urban greenspace is beneficial to improve peoples physical and mental health. However, knowledge of population exposure to urban greenspace across different spatiotemporal scales remains unclear. Moreover, the majority of existing environmental assessments are unable to quantify how residents enjoy their ambient greenspace during their daily life. To deal with this challenge, we proposed a dynamic method to assess urban greenspace exposure with the integration of mobile-phone locating-request (MPL) data and high-spatial-resolution remote sensing images. This method was further applied to 30 major cit- ies in China by assessing cities' dynamic greenspace exposure levels based on residents' surrounding areas with different buffer scales (0.5 km, 1 km, and 1.5 km). Results showed that regarding residents' 0.5-km surrounding environment, Wenzhou and Hangzhou were found to be with the greenest exposure experience, whereas Zheng- zhou and Tangshan were the least ones. The obvious diurnal and daily variations of population exposure to their surrounding greenspace were also identified to be highly correlated with the distribution pattern of urban greenspace and the dynamics of human mobility. Compared with two common measurements of urban greenspace (green coverage rate and green area per capita), the developed method integrated the dynamics of population distribution and geographic locations of urban greenspace into the exposure assessment, thereby pre- senting a more reasonable way to assess population exposure to urban greenspace. Additionally, this dynamic framework could hold potential utilities in supporting urban planning studies and environmental health studies and advancing our understanding of the magnitude of population exposure to greenspace at different spatiotem- poral scales",
 64 |         }
 65 |       ],
 66 |     }
 67 |   },
 68 |   mounted(){
 69 |     this.run();
 70 |     this.drawChart();
 71 |     this.slide = document.getElementsByClassName('slides')[0];
 72 |     this.imgs = document.getElementsByTagName('table');
 73 |   },
 74 |   methods:{
 75 |     carousel:function(n){
 76 |       this.slideShow.splice(this.index,1,false);
 77 |       this.index = n;
 78 |       this.slideShow.splice(this.index,1,true);
 79 |     },
 80 |     run:function(){
 81 |       let self = this;
 82 |       this.invId = setInterval(()=>{
 83 |         self.slideShow.splice(self.index,1,false);
 84 |         self.index+=1;
 85 |         if (self.index == self.slidesContent.length) {
 86 |           self.index = 0
 87 |         }
 88 |         self.slideShow.splice(self.index,1,true);
 89 |       }, this.inv);     
 90 |     },
 91 |     drawChart:function(){
 92 |       let height = $('.slides_container_top_chartContainertop').css('height');
 93 |       height = parseInt(height.slice(0,height.length-2));
 94 |       $('#chart3').css('height',height/2);
 95 |       $('#chart4').css('height',height/2);
 96 |       $('#chart6').css('height',height/2);
 97 |       $('#chart7').css('height',height/2);
 98 |       $('#chart9').css('height',height/2);
 99 |       $('#chart10').css('height',height/2);
100 |       for(let index = 0;index<12;index++){
101 |         let string  = 'chart'+index,
102 |             scatterChart = document.getElementById(string),
103 |             myChart = echarts.init(scatterChart);
104 |         let option = {
105 |             xAxis: {scale: true},
106 |             yAxis: {scale: true},
107 |             tooltip : {trigger: 'item'},
108 |             series: [{
109 |                 type: 'scatter',
110 |                 data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
111 |                     [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
112 |                     [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
113 |                     [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
114 |                     [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
115 |                     [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
116 |                     [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
117 |                     [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
118 |                     [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
119 |                     [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
120 |                     [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
121 |                     [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
122 |                     [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
123 |                     [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
124 |                     [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
125 |                     [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
126 |                     [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
127 |                     [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
128 |                     [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
129 |                     [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
130 |                     [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
131 |                     [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
132 |                     [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
133 |                     [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
134 |                     [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
135 |                     [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
136 |                     [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
137 |                     [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
138 |                     [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
139 |                     [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
140 |                     [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
141 |                     [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
142 |                     [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
143 |                     [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
144 |                     [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
145 |                     [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
146 |                     [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
147 |                     [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
148 |                     [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
149 |                     [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
150 |                     [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
151 |                     [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
152 |                     [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
153 |                     [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
154 |                     [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
155 |                     [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
156 |                     [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
157 |                     [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
158 |                     [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
159 |                     [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
160 |                     [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
161 |                     [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
162 |                 ],
163 |             }]
164 |         };
165 |         myChart.setOption(option, true);
166 |       }
167 |     }
168 |   }
169 | }
170 | </script>


--------------------------------------------------------------------------------
/src/components/login/coverForReset.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cover-login">
  3 |     <div class="box-container">
  4 |       <div class="main">
  5 |         <hr color="lightgrey"/>
  6 |         <header class="login-title"><b>忘记密码</b></header>
  7 |         <div class="login">
  8 |             <input type="text" placeholder="请输入手机号" v-model= "LUserPhone" @blur="checkLPhone"><br/>
  9 |             <input type="text"  placeholder="请输入验证码" class="yanzhengma_input" v-model="picLyanzhengma" />
 10 |             <input type="button"  @click="createCode"  class="verification"  v-model="checkCode"/>
 11 |             <div>
 12 |               <input class="yanzhengma_input" type="text"  placeholder="短信验证码" />
 13 |               <button @click="send"    class="send_msg" >
 14 |               <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span>
 15 |               <span v-if="!sendMsgDisabled">获取验证码</span></button>
 16 |             </div>
 17 |             <input type="text" v-if="pwdType" placeholder="请输入新密码" class="content_input" v-model="LUserPsd" @blur="checkLPsd" >
 18 |             <input type="password"  placeholder="请输入新密码" class="content_input" v-model="LUserPsd" @blur="checkLPsd"  v-else><br>
 19 |   			<img :src="seen ? seenImg : unseenImg"  @click="changeType()" class="eye_img" style="top:205px"/>    
 20 | 
 21 | 			<input type="text" v-if="pwd_Type" placeholder="请再次输入新密码" class="content_new_input" v-model="LUser_Psd" @blur="checkL_Psd" >
 22 |             <input type="password"  placeholder="请再次输入新密码" class="content_new_input" v-model="LUser_Psd" @blur="checkL_Psd"  v-else><br> 
 23 |   			<img :src="see ? seeImg : unseeImg"  @click="change_Type()" class="eye_img" style="top:255px"/>
 24 |             <button @click="get_view"    class="reset_button"><span>确认并提交</span></button> 
 25 |         </div> 
 26 |       </div>
 27 |     </div>
 28 |     <img src="../../assets/img/close.png" height="20" width="20" @click="submitPar">
 29 |   </div>
 30 | </template>
 31 | <script>
 32 | var code="";
 33 | require('../../style/coverLogin.scss')
 34 | import messageBus from '../../bus/messageBus.js'
 35 | 
 36 | export default {
 37 |   name: 'coverForReset',
 38 |   data () {
 39 |     return {
 40 |         from:'system',
 41 |         coupon:{},
 42 |         id:'',
 43 |         name:'',
 44 |         address:'',
 45 |         message:'',
 46 |         userPhone:'',
 47 |         dialog: false,
 48 |         LUserPhone:'',
 49 |         LUserPsd:'',
 50 |         LUser_Psd:'',
 51 |         picLyanzhengma:'',
 52 |         checkCode:'', 
 53 |         time: 60, // 发送验证码倒计时
 54 |         sendMsgDisabled: false,
 55 |         seen:'',
 56 |   		unseenImg:require('../../assets/img/close_eye.png'),//看不见
 57 |   		seenImg:require('../../assets/img/open_eye.png'),//看得见密码
 58 |   		pwdType:false, //此时文本框隐藏，显示密码框 
 59 |   		see:'',
 60 |   		unseeImg:require('../../assets/img/close_eye.png'),//看不见
 61 |   		seeImg:require('../../assets/img/open_eye.png'),//看得见密码
 62 |   		pwd_Type:false, //此时文本框隐藏，显示密码框 
 63 |     }
 64 |   },
 65 |   mounted(){
 66 |     if (this.$route.query.from){
 67 |         this.form = this.$route.query.from
 68 |     }
 69 |     if (this.$route.query.id){
 70 |         this.form = this.$route.query.id
 71 |     }
 72 |     if (this.$route.query.from === 'system'){
 73 |         this.initCouponInfo()
 74 |     }
 75 |   },
 76 |   created(){
 77 |     this.createCode();
 78 |   },
 79 |   methods:{
 80 |         //密码的显示隐藏
 81 |         changeType:function(){
 82 |             this.seen = !this.seen;//小眼睛的变化
 83 |             this.pwdType=!this.pwdType;//跟着小眼睛变化，密码框隐藏显示文本框，内容就显示了
 84 |         },
 85 |         submitPar:function(){          
 86 |             messageBus.$emit('reset-cover-show',false);//关闭遮罩层与忘记密码面板
 87 |         },
 88 |         change_Type:function(){
 89 |             this.see = !this.see;//小眼睛的变化
 90 |             this.pwd_Type=!this.pwd_Type;//跟着小眼睛变化，密码框隐藏显示文本框，内容就显示了
 91 |         }, 
 92 |         send:function() {
 93 |             let me = this;
 94 |             me.sendMsgDisabled = true;
 95 |             let interval = window.setInterval(function() {
 96 |             if ((me.time--) <= 0) {
 97 |                 me.time = 60;
 98 |                 me.sendMsgDisabled = false;
 99 |                 window.clearInterval(interval);
100 |             }
101 |             }, 1000);
102 |         },
103 |         checkUserPhone:function(){
104 |             if(this.userPhone == ''){
105 |                 console.log(111)
106 |                 $(".hiddenTanchuang").removeClass('hiddenTanchuang')
107 |             }
108 |         },
109 |         hiddenTanchuang(){
110 |             $(".tanchuang").addClass("hiddenTanchuang")
111 |         },       
112 |         // 验证登陆手机号格式
113 |         checkLPhone:function(){
114 |             if(this.LUserPhone == ''){
115 |                 $(".login_content1 span:eq(0)").removeClass("disappear");
116 |                 $(".login_content1 span:eq(0)").text("请输入手机号。")
117 | 
118 |             }else if(this.LUserPhone.search(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/)==0){
119 |                 $(".login_content1 span:eq(0)").addClass("disappear")
120 |                 return true;
121 | 
122 |             }else{
123 |                 $(".login_content1 span:eq(0)").removeClass("disappear");
124 |                 $(".login_content1 span:eq(0)").text("请输入正确手机号。")
125 |             }
126 |         },
127 |         //验证登陆密码格式
128 |         checkLPsd:function(){
129 |             if(this.LUserPsd == ''){
130 |                 $(".login_content1 span:eq(1)").text("请输入密码");
131 |                 $(".login_content1 span:eq(1)").removeClass("disappear")
132 | 
133 |             }else if(this.LUserPsd.search(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/) == 0){
134 |                 $(".login_content1 span:eq(1)").addClass("disappear")
135 |                 return true;
136 |             }else{
137 |                 $(".login_content1 span:eq(1)").removeClass("disappear");
138 |                 $(".login_content1 span:eq(1)").text("密码必须6-20位，包含字母与数字")
139 |             }
140 |         },
141 |         //验证登陆密码格式
142 |         checkL_Psd:function(){
143 |             if(this.LUserPsd == ''){
144 |                 $(".login_content1 span:eq(1)").text("请输入密码");
145 |                 $(".login_content1 span:eq(1)").removeClass("disappear")
146 | 
147 |             }else if(this.LUserPsd.search(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/) == 0){
148 |                 $(".login_content1 span:eq(1)").addClass("disappear")
149 |                 return true;
150 |             }else{
151 |                 $(".login_content1 span:eq(1)").removeClass("disappear");
152 |                 $(".login_content1 span:eq(1)").text("密码必须6-20位，包含字母与数字")
153 |             }
154 |         },
155 |         // 图片验证码
156 |         createCode(){          
157 |             this.code = "";//先清空验证码的输入
158 |             this.checkCode = "";
159 |             this.picLyanzhengma = "";           
160 |             let codeLength = 4, //验证码的长度             
161 |                 random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');  
162 |             for(let i = 0; i < codeLength; i++) {               
163 |                 let index = Math.floor(Math.random()*36);   //取得随机数的索引（0~35）               
164 |                 this.code += random[index];  //根据索引取得随机数加到code上 
165 |             }            
166 |             this.checkCode = this.code; //把code值赋给验证码  
167 |         },  
168 |         get_view:function(){
169 |             messageBus.$emit('reset-cover-show',false);
170 |             this.$router.push({path:"/home"});
171 |         },
172 |     }
173 | }
174 | </script>
175 | 


--------------------------------------------------------------------------------
/src/components/login/coverForSign.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cover-login">
  3 |     <div class="box-container">
  4 |       <div class="main">
  5 |         <hr color="lightgrey"/>
  6 |         <header class="login-title"><b>新用户注册</b></header>
  7 |         <div class="login">
  8 |             <input type="text" placeholder="请输入手机号"   v-model= "LUserPhone" @blur="checkLPhone"><br/>
  9 |             <input type="text" v-if="pwdType" placeholder="请输入密码"  v-model="LUserPsd" @blur="checkLPsd" >   
 10 |             <input type="password"  placeholder="请输入密码"  v-model="LUserPsd" @blur="checkLPsd" v-else>
 11 |             <img :src="seen ? seenImg : unseenImg"  @click="changeType()" class="eye_img" /> 
 12 |             <input type="text" placeholder="输入用户名..."   v-model="username">
 13 |             <input type="text"  placeholder="请输入验证码" class="yanzhengma_input" v-model="picLyanzhengma">
 14 |             <input type="button"  @click="createCode"  class="verification"  v-model="checkCode">
 15 |             <div>
 16 |                   <input class="yanzhengma_input" type="text"  placeholder="短信验证码" />
 17 |                   <button @click="send"    class="send_msg" >
 18 |                   <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span>
 19 |                   <span v-if="!sendMsgDisabled">获取验证码</span></button>
 20 |             </div>
 21 |             <button @click="getview"    class="regist_button"><span>注册</span></button> 
 22 |         </div> 
 23 |       </div>
 24 |     </div>
 25 |     <img src="../../assets/img/close.png" height="20" width="20" @click="submitPar">
 26 |   </div>
 27 | </template>
 28 | <script>
 29 | var code="";
 30 | require('../../style/coverLogin.scss')
 31 | import messageBus from '../../bus/messageBus.js'
 32 | 
 33 | export default {
 34 |   name: 'coverForSign',
 35 |   data () {
 36 |     return {
 37 |         from:'system',
 38 |         coupon:{},
 39 |         id:'',
 40 |         username:'',
 41 |         message:'',
 42 |         userPhone:'',
 43 |         dialog: false,
 44 |         LUserPhone:'',
 45 |         LUserPsd:'',
 46 |         picLyanzhengma:'',
 47 |         checkCode:'', 
 48 |         time: 60, // 发送验证码倒计时
 49 |         sendMsgDisabled: false,
 50 |         seen:'',
 51 |         unseenImg:require('../../assets/img/close_eye.png'),//看不见
 52 |         seenImg:require('../../assets/img/open_eye.png'),//看得见密码
 53 |         pwdType:false, //此时文本框隐藏，显示密码框 
 54 |     }
 55 |   },
 56 |   mounted(){
 57 |     if (this.$route.query.from){
 58 |       this.form = this.$route.query.from
 59 |     }
 60 |     if (this.$route.query.id){
 61 |       this.form = this.$route.query.id
 62 |     }
 63 |     if (this.$route.query.from === 'system'){
 64 |       this.initCouponInfo()
 65 |     }
 66 |   },
 67 |   created()
 68 |   {
 69 |     this.createCode();
 70 |   },
 71 |   methods:{
 72 |   	//密码的显示隐藏
 73 |   	changeType:function(){
 74 |       this.seen = !this.seen;//小眼睛的变化
 75 |       this.pwdType=!this.pwdType;//跟着小眼睛变化，密码框隐藏显示文本框，内容就显示了
 76 |     },
 77 |     submitPar:function(){     
 78 |       messageBus.$emit('sign-cover-show',false);//关闭遮罩层与注册面板
 79 |     },
 80 |     send:function() {
 81 |       let me = this;
 82 |       me.sendMsgDisabled = true;
 83 |       let interval = window.setInterval(function() {
 84 |        if ((me.time--) <= 0) {
 85 |         me.time = 60;
 86 |         me.sendMsgDisabled = false;
 87 |         window.clearInterval(interval);
 88 |        }
 89 |       }, 1000);
 90 |     },
 91 |     checkUserPhone:function(){
 92 |       if(this.userPhone == ''){
 93 |         console.log(111)
 94 |         $(".hiddenTanchuang").removeClass('hiddenTanchuang')
 95 |       }
 96 |     },
 97 |     hiddenTanchuang(){
 98 |       $(".tanchuang").addClass("hiddenTanchuang")
 99 |     },     
100 |     // 验证登陆手机号格式
101 |     checkLPhone:function(){
102 |         if(this.LUserPhone == ''){
103 |             $(".login_content1 span:eq(0)").removeClass("disappear");
104 |             $(".login_content1 span:eq(0)").text("请输入手机号。")
105 |         }else if(this.LUserPhone.search(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/)==0){
106 |             $(".login_content1 span:eq(0)").addClass("disappear")
107 |             return true;
108 |         }else{
109 |             $(".login_content1 span:eq(0)").removeClass("disappear");
110 |             $(".login_content1 span:eq(0)").text("请输入正确手机号。")
111 |         }
112 |     },
113 |     //验证登陆密码格式
114 |     checkLPsd:function(){
115 |         if(this.LUserPsd == ''){
116 |             $(".login_content1 span:eq(1)").text("请输入密码");
117 |             $(".login_content1 span:eq(1)").removeClass("disappear")
118 |         }else if(this.LUserPsd.search(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/) == 0){
119 |             $(".login_content1 span:eq(1)").addClass("disappear")
120 |             return true;
121 |         }else{
122 |             $(".login_content1 span:eq(1)").removeClass("disappear");
123 |             $(".login_content1 span:eq(1)").text("密码必须6-20位，包含字母与数字")
124 |         }
125 |     },
126 |     // 图片验证码
127 |     createCode(){
128 |         this.code = "";
129 |         this.checkCode = "";
130 |         this.picLyanzhengma = ""; 
131 |         let codeLength = 4, 
132 |         random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');  
133 |         for(let i = 0; i < codeLength; i++) {
134 |             let index = Math.floor(Math.random()*36);   
135 |             this.code += random[index];   
136 |         }
137 |         this.checkCode = this.code; 
138 |     },  
139 |     getview:function(){
140 |       messageBus.$emit('sign-cover-show',false);
141 |       this.$router.push({path:"/home"});
142 |       this.$store.commit('username',this.username);
143 |     },
144 |   }
145 | }
146 | </script>
147 | 


--------------------------------------------------------------------------------
/src/components/login/coverForlogin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="cover-login">
 3 |     <div class="box-container">
 4 |       <div class="main">
 5 |         <hr color="lightgrey"/>
 6 |         <header class="login-title"><b>欢迎登录</b></header>
 7 |         <div class="login">
 8 |             <input type="text"   placeholder="输入用户名..."  v-model="username"><br/>
 9 |             <input type="text"  v-if="pwd_type"  placeholder="输入密码">
10 |             <input type="password" placeholder="输入密码" v-else>
11 |             <img :src="see ? seeImg : unseeImg"  @click="change_type()" class="eye_img" />
12 |             <button @click="submitPar" ><span>登录</span></button>
13 |             <div>
14 |               <a @click="reset" style="float:right">忘记密码？</a>
15 |               <a @click="sign"  style="float:left">注册</a>
16 |             </div>
17 |         </div>  
18 |       </div>
19 |     </div>
20 |     <img src="../../assets/img/close.png" height="20" width="20" @click="submitPar">
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | import messageBus from '../../bus/messageBus.js'
26 | require('../../style/coverLogin.scss')
27 | import {mapState} from 'vuex'
28 | 
29 | export default {
30 | 	name: 'coverForLogin',
31 |   data () {
32 |     return {
33 |       see:'',
34 |       unseeImg:require('../../assets/img/close_eye.png'),//看不见
35 |       seeImg:require('../../assets/img/open_eye.png'),//看得见密码
36 |       pwd_type:false, //此时文本框隐藏，显示密码框 
37 |       username:this.$store.state.username
38 |     }
39 |   },
40 |   mounted(){
41 |   },
42 |   methods:{
43 |     //密码的显示隐藏
44 |     change_type:function(){
45 |       this.see = !this.see;//小眼睛的变化
46 |       this.pwd_type=!this.pwd_type;//跟着小眼睛变化，密码框隐藏显示文本框，内容就显示了
47 |     },
48 |     submitPar:function(){
49 |         messageBus.$emit('login-cover-show',false);//关闭遮罩层与登录面板
50 |         this.$store.commit('username',this.username);
51 |         this.$router.push({path:"/home"});
52 |     },
53 |     sign:function(){     
54 |       messageBus.$emit('login-cover-show',false);//关闭遮罩层与登录忘记密码面板
55 |       messageBus.$emit('reset-cover-show',false);     
56 |       messageBus.$emit('sign-cover-show',true);//打开注册页面
57 |     },
58 |     reset:function(){      
59 |       messageBus.$emit('login-cover-show',false);//关闭遮罩层与登录注册面板
60 |       messageBus.$emit('sign-cover-show',false);     
61 |       messageBus.$emit('reset-cover-show',true);//打开忘记密码页面
62 |     }
63 |   }   
64 | }
65 | </script>
66 | 


--------------------------------------------------------------------------------
/src/components/rightSideForResult/MapForResult.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div id="leafMapResultPart" style="width:100%;height:100%;"></div> 
  3 | </template>
  4 | 
  5 | <script>
  6 | import Leaflet from 'leaflet'
  7 | import {mapState} from 'vuex'
  8 | import Vue from "vue"
  9 | import messageBus from '../../bus/messageBus.js'
 10 | require('../../style/main_style.scss')
 11 | 
 12 | var bgMapUrl11 = 'https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ2VtbWFhYWEiLCJhIjoiY2o2a2N5dzB1MWd1ZTMzcnlqMDhkM3ZjYyJ9.0vVVkY9k7t8z0e3uqMgQnQ';
 13 | 
 14 | export default {
 15 |   name: 'mapForResult',
 16 |   data () {
 17 |     return {
 18 |       	map: null,
 19 |         layer:null,
 20 |         highlightFromTable:null,
 21 |         legendLayer:null,
 22 |         legendColor:['#FFEDA0','#FED976','#FEB24C', '#FD8D3C','#FC4E2A','#E31A1C','#BD0026','#800026'],
 23 |         highlightLayerStyle:{
 24 |           weight: 3,
 25 |           color: 'lightseagreen',
 26 |           dashArray: '',
 27 |           fillOpacity: 0.7
 28 |         }
 29 |     }
 30 |   },
 31 |   mounted(){
 32 |     if(this.computeResult){
 33 |       this.initMap();
 34 |       this.addDataViewOnMap();
 35 |     }
 36 |   },
 37 |   computed:{
 38 |     ...mapState({
 39 |       computeResult: state => state.computeResult
 40 |     }),
 41 |   },
 42 |   watch:{
 43 |     computeResult:'addDataViewOnMap'
 44 |   },
 45 |   methods:{
 46 |     //初始化地图
 47 |   	initMap:function(){
 48 |       if(!this.map){
 49 |     		this.map = L.map('leafMapResultPart').setView([50.505,-108.09],3);
 50 |     		L.tileLayer(bgMapUrl11).addTo(this.map);
 51 |       }
 52 |     },
 53 | 	  //添加数据属性的可视化图层
 54 |     addDataViewOnMap:function(){
 55 |       this.layer && this.layer.remove();
 56 |       this.map.setView(this.computeResult.centerPosition,this.computeResult.zoom)
 57 |       let that = this;
 58 |       this.layer = L.geoJson(this.computeResult.data,{
 59 |         pointToLayer: function(feature,latlng){
 60 |           return L.circleMarker(latlng,that.pointStyle(feature))
 61 |         },
 62 |         onEachFeature: this.onEachFeature
 63 |       }) 
 64 |       this.layer.addTo(this.map);
 65 |       this.legendLayer && this.legendLayer.remove();
 66 |       this.addLegend();	  
 67 |     },
 68 |     //添加地图图例
 69 |     addLegend: function(){
 70 |       let minVal = this.computeResult.minVal,
 71 |       maxVal = this.computeResult.maxVal,
 72 |       distance = (maxVal - minVal)/8, self = this;
 73 |       this.legendLayer = L.control({position: 'bottomright'});   
 74 |       this.legendLayer.onAdd = function(map) {
 75 |         let div = L.DomUtil.create('div', 'map_legend'),
 76 |             grades = minVal<maxVal?[minVal.toFixed(2), (minVal+distance).toFixed(2), (minVal+distance*2).toFixed(2), (minVal+distance*3).toFixed(2), (minVal+distance*4).toFixed(2), (minVal+distance*5).toFixed(2), (minVal+distance*6).toFixed(2), (minVal+distance*7).toFixed(2),maxVal.toFixed(2)]:[minVal.toFixed(2),maxVal.toFixed(2)],
 77 |             labels = [], from, to;
 78 |         for (let i = 0; i < grades.length; i++) {
 79 |           from = grades[i];
 80 |           to = grades[i + 1];
 81 |           to && labels.push('<i class="map_legend_div" style="background:' + self.legendColor[i] + '"></i><i class="map_legend_font"> ' + from + '&ndash;' + to+'</i>');
 82 |         }
 83 |         div.innerHTML = labels.join('<br>');
 84 |         return div;
 85 |       };
 86 |       this.legendLayer.addTo(this.map);
 87 |     },
 88 | 	  //设置数据点分层设色的颜色
 89 |     GetColor:function(d) {
 90 |       let minVal = this.computeResult.minVal,maxVal = this.computeResult.maxVal,distance = (maxVal - minVal)/8;
 91 |       return d > maxVal+distance*7 ? this.legendColor[7] :
 92 |              d > minVal+distance*6  ? this.legendColor[6] :
 93 |              d > minVal+distance*5  ? this.legendColor[5] :
 94 |              d > minVal+distance*4  ? this.legendColor[4] :
 95 |              d > minVal+distance*3   ? this.legendColor[3] :
 96 |              d > minVal+distance*2   ? this.legendColor[2] :
 97 |              d > minVal+distance   ? this.legendColor[1] : this.legendColor[0];
 98 |     },
 99 |     //设置数据点显示的样式
100 |     pointStyle:function(feature){
101 |       return {
102 |             radius: 3,
103 |             fillColor: this.GetColor(feature.properties.yhat),
104 |             weight: 0,
105 |             opacity: 1,
106 |             fillOpacity: 0.8
107 |       }
108 |     },
109 |     //鼠标滑过特征图块，高亮显示
110 |     highlightFeature:function(e) {
111 |       let layer = e.target;
112 |       layer.setStyle(this.highlightLayerStyle);
113 |       !L.Browser.ie && !L.Browser.opera && !L.Browser.edge && layer.bringToFront();
114 |     },
115 |     //鼠标移出，还原样式
116 |     resetHighlight:function(e) {
117 |       this.layer.resetStyle(e.target);
118 |     },
119 |     //设置监听
120 |     onEachFeature:function(feature, layer) {
121 |         layer.on({
122 |             mouseover: this.highlightFeature,
123 |             mouseout: this.resetHighlight,
124 |             click: this.handleClick
125 |         });
126 |     },
127 |     //鼠标点击传输数据生成对应的图表
128 |     handleClick:function(e){
129 |       let layer = e.target,prop = layer.feature.properties,self=this;     
130 |       this.highlightFromTable && this.highlightFromTable.remove();//清空已经高亮的图层
131 |       this.highlightFromTable = L.geoJson(layer.feature,{
132 |         pointToLayer: function(feature,latlng){
133 |           return L.circleMarker(latlng,self.pointStyle(feature,self.par))
134 |         }
135 |       }).addTo(self.map)
136 |       this.highlightFromTable.setStyle(this.highlightLayerStyle);     
137 |       messageBus.$emit('data-for-chart',prop);//传输数据到chart中，支持图表联动
138 |     }
139 |   }
140 | }
141 | </script>
142 | 


--------------------------------------------------------------------------------
/src/components/rightSideForResult/chartAnalysis.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="chartAnalysis">
  3 |     <div class="chartAnalysis_map"><map-result></map-result></div>
  4 |     <table style="width:100%" id="chart-table">
  5 |         <tr v-for="trInd in containerRow">
  6 |             <td v-for="index in containerCol[trInd]">
  7 |                 <!-- 图块显示文字，点击文字可以设置图表参数  trInd==0?[0,1,2]:trInd==1?[3,4,5]:[]-->
  8 |                 <div class="add-chart-container" @click="addChartContainer(index)" v-show="addChartContainerShow[index]" v-tip="addChartContainerMsg">+</div>
  9 |                 <!-- 设置图表参数 -->
 10 |                 <div class="chart-par-setting" v-show="chartParSetShow[index]">
 11 |                     <p>选择数据图表横纵坐标</p>
 12 |                     <a>图表标题: </a>
 13 |                     <input v-model="par['chart'+index]['title']" placeholder="图表标题，选填"><br/>
 14 |                     <a>图表类型: </a>
 15 |                     <select v-model="par['chart'+index]['chartType']"><option v-for="item in chartType">{{item}}</option></select><br/>
 16 |                     <a>横坐标: </a>
 17 |                     <select v-model="par['chart'+index]['heng']"><option v-for="item in Object.keys(computeResult[0].properties)">{{item}}</option></select><br/>
 18 |                     <a>纵坐标1: </a>
 19 |                     <select v-model="par['chart'+index]['zong1']"><option v-for="item in Object.keys(computeResult[0].properties)">{{item}}</option></select><br/>
 20 |                     <a>纵坐标2: </a>
 21 |                     <select v-model="par['chart'+index]['zong2']"><option v-for="item in Object.keys(computeResult[0].properties)">{{item}}</option></select><br/>
 22 |                     <button @click="parSettingSubmit(index,par['chart'+index]['title'],par['chart'+index]['heng'],par['chart'+index]['zong1'],par['chart'+index]['zong2'],par['chart'+index]['chartType'])">完成</button>
 23 |                 </div>
 24 |                 <!-- 显示，绘制图表 -->
 25 |                 <div :id="chartPanelId(index)" class="chart" v-show="chartPanelShow[index]"></div>
 26 |             </td>
 27 |         </tr>
 28 |     </table>    
 29 | </div> 
 30 | </template>
 31 | 
 32 | <script>
 33 | import echarts from 'echarts'
 34 | import mapResult from './MapForResult'
 35 | import {mapState} from 'vuex'
 36 | import messageBus from '../../bus/messageBus.js'
 37 | require('../../style/rightSideForResult.scss')
 38 | 
 39 | export default {
 40 |     name: 'chartAnalysis',
 41 |     data () {
 42 |         return {
 43 |             containerCol: [],//图表表格容器的列数
 44 |             containerRow:[0,1],//图表表格容器的行数
 45 |             dataFromMap:null, //map中传过来的图表数据
 46 |             chartPanelShow:[],//图表面板显示
 47 |             chartParSetShow:[],//图表参数显示
 48 |             addChartContainerShow:[],//添加图标容器面板显示
 49 |             chartType:['scatter','bar'],//支持的图表类型
 50 |             par:{},//图表参数存储对象
 51 |             myChart:[],//图表容器
 52 |             addZongMsg:'点击此处添加第二维纵坐标',
 53 |             addChartContainerMsg:'点击此处添加图表容器'
 54 |         }
 55 |     },
 56 |     components:{
 57 |         mapResult
 58 |     },
 59 |     beforeMount(){
 60 |         //初始化生成图表参数
 61 |         for(let i=0,string;i<6;i++){
 62 |             string = 'chart'+i;
 63 |             this.par[string] = {
 64 |                 title: null,
 65 |                 chartType: null,
 66 |                 heng: null,
 67 |                 zong1: null,
 68 |                 zong2: null
 69 |             }
 70 |             this.chartPanelShow.push(true);
 71 |             this.addChartContainerShow.push(false);
 72 |             this.chartParSetShow.push(false);
 73 |             this.myChart.push(null);
 74 |         }
 75 |         this.chartPanelShow.splice(this.chartPanelShow.length-1,1,false);
 76 |         this.addChartContainerShow.splice(this.addChartContainerShow.length-1,1,true)
 77 |         //初始化生成图表列数
 78 |         for(let i=0;i<this.containerRow.length;i++){
 79 |             this.containerCol.push([3*i,3*i+1,3*i+2])
 80 |         }
 81 |         if(window.sessionStorage.getItem('computeResultForChart')){
 82 |             let initData = JSON.parse(window.sessionStorage.getItem('computeResultForChart')),chartKey;
 83 |             this.chartPanelShow = initData.chartPanelShowStorage;
 84 |             this.chartParSetShow = initData.chartParSetShowStorage;
 85 |             this.containerCol = initData.containerColStorage;
 86 |             this.containerRow = initData.containerRowStorage;
 87 |             this.addChartContainerShow = initData.addChartContainerShowStorage;
 88 |             if(this.myChart.length < this.chartPanelShow.length){
 89 |                 for(let i=0;i<(this.myChart.length-this.chartPanelShow.length);i++){
 90 |                     this.myChart.push(null);
 91 |                 }
 92 |             }
 93 |             this.par = Object.assign({}, initData.chartPar);
 94 |         };
 95 |     },
 96 |     mounted(){
 97 |         this.listenValue();
 98 |         // this.initChart();
 99 |         // this.listenComputeAgain();
100 |         window.sessionStorage.getItem('computeResultForChart') ? this.initChartBaseOnStorage() : this.initChart();
101 |         // !window.sessionStorage.getItem('computeResultForChart') && this.initChart()
102 |     },
103 |     computed:{
104 |         ...mapState({
105 |             parentNodeIndex: state => state.parent_node_index,
106 |             childNodeIndex: state => state.child_node_index,
107 |             computeResult: state => state.computeResult.data.features
108 |         })
109 |     },
110 |     methods:{
111 |         //监听重新计算
112 |         listenComputeAgain:function(){
113 |             let self = this;
114 |             messageBus.$on('compute-again',(par)=>{
115 |                 par && self.initChart();
116 |             });
117 |         },
118 |         //添加图表容器
119 |         addChartContainer:function(){
120 |             let rowLen = this.containerRow.length-1,//行数
121 |             colLastArr = this.containerCol[rowLen],//最后一行列的索引数组
122 |             colLastEle = colLastArr[colLastArr.length-1];//最后一行最后一列的索引
123 |             if(this.containerCol[rowLen].length == 3 ){
124 |                 this.containerRow.push(this.containerRow[rowLen]+1);//添加图表表格容器行
125 |                 this.containerCol.push([]);//添加图表表格容器列
126 |             }
127 |             this.containerCol[this.containerCol.length-1].push(colLastEle+1);//添加图表表格容器列新元素
128 |             this.chartParSetShow.splice(this.chartParSetShow.length-1,1,true);//加号面板显示参数设置
129 |             this.chartParSetShow.push(false);//添加图表参数显示参数
130 |             this.addChartContainerShow.splice(this.addChartContainerShow.length-1,1,false);//加号面板加号隐藏
131 |             this.addChartContainerShow.push(true);//添加图标容器面板显示参数
132 |             this.chartPanelShow.push(false);//添加图表显示参数
133 |             this.par['chart'+(colLastEle+1)]={
134 |                 title: null,
135 |                 chartType: null,
136 |                 heng: null,
137 |                 zong1: null,
138 |                 zong2: null
139 |             };//添加图表参数存储对象
140 |             this.myChart.push(null);//添加图表容器
141 |             this.handleSession();
142 |         },
143 |         //依据sessionStorage初始化图表内容
144 |         initChartBaseOnStorage:function(){
145 |             let chartKey = Object.keys(this.par);
146 |             for(let f=0;f<chartKey.length;f++){
147 |                 let chart_par_spec = this.par[chartKey[f]],par_arr_temp = [];
148 |                 this.drawChart(f,chart_par_spec.title,chart_par_spec.heng,chart_par_spec.zong1,chart_par_spec.zong2,chart_par_spec.chartType);
149 |             }
150 |         },
151 |         //更新数组
152 |         updateArr:function(arr,newarr){
153 |             for(let i=0;i<arr.length;i++){
154 |                 arr.splice(i,1,newarr[i]);
155 |             }
156 |             for(let i=arr.length;i<newarr.length;i++){
157 |                 arr.push(newarr[i]);
158 |             }
159 |         },
160 |         //将图表设置存储入sessionStorage
161 |         handleSession:function(){
162 |             let sessionJson = {
163 |                 containerColStorage:this.containerCol,containerRowStorage:this.containerRow,
164 |                 chartPanelShowStorage:this.chartPanelShow,chartParSetShowStorage:this.chartParSetShow,
165 |                 addChartContainerShowStorage:this.addChartContainerShow,//chartContainerStorage:chartContainer,
166 |                 chartPar:this.par};
167 |             window.sessionStorage.setItem('computeResultForChart',JSON.stringify(sessionJson));
168 |         },
169 |         //初始化图表
170 |         initChart: function(){
171 |             let heng_arr = Object.keys(this.computeResult[0].properties),
172 |             zong1 = 'yhat', zong2 = null;
173 |             for(let i=0;i<this.chartPanelShow.length;i++){
174 |                 let heng = heng_arr[i],title = heng+'-'+zong1;
175 |                 this.drawChart(i,title,heng,zong1,zong2,this.chartType[0]);
176 |                 this.par['chart'+i] = {
177 |                     title: title,
178 |                     chartType: this.chartType[0],
179 |                     heng: heng,
180 |                     zong1: zong1,
181 |                     zong2: zong2
182 |                 }
183 |             }
184 |         },
185 |         //监听地图点击事件传来的数据
186 |         listenValue:function(){
187 |             let self = this;
188 |             messageBus.$on('data-for-chart',(prop)=>{    
189 |                 self.dataFromMap = prop;
190 |                 for(let i=0;i<self.myChart.length;i++){
191 |                     let title = self.par['chart'+i]['title'],
192 |                         heng = self.par['chart'+i]['heng'],
193 |                         zong1 = self.par['chart'+i]['zong1'],
194 |                         zong2 = self.par['chart'+i]['zong2'],
195 |                         chartType = self.par['chart'+i]['chartType'];
196 |                     self.myChart[i] && self.drawChart(i,title,heng,zong1,zong2,chartType)//地图与数据表联动
197 |                 }
198 |             });
199 |         },
200 |         //设置图表容器id
201 |         chartPanelId:function(index){
202 |             return 'chart-panel'+index;
203 |         },
204 |         /**
205 |          * 提交图表参数设置
206 |          * @param index        图表容器索引，标定图表绘制的容器
207 |          * @param title        图表标题
208 |          * @param heng         图表横坐标
209 |          * @param zong1/zong2  图表纵坐标
210 |          * @param chartType    图表类型
211 |          */
212 |         parSettingSubmit:function(index,title,heng,zong1,zong2,chartType){      
213 |             if(heng && (zong1 || zong2) && chartType){
214 |                 this.chartPanelShow.splice(index,1,true);
215 |                 this.chartParSetShow.splice(index,1,false);
216 |                 this.addChartContainerShow.splice(index,1,false);
217 |                 this.drawChart(index,title,heng,zong1,zong2,chartType);
218 |                 !title && alert('没有选择图表标题哦~~');
219 |                 this.handleSession();
220 |             }else{
221 |                 alert('图表的横纵坐标等必要参数没有设置完全哦~~')
222 |             }
223 |         },
224 |         //图表绘制
225 |         drawChart:function(index,title,heng,zong1,zong2,chartType){
226 |             let strId = 'chart-panel'+index,
227 |                 scatterChart = document.getElementById(strId),
228 |                 app = {},data1=[],data2=[],series=[],self=this,yAxisName='',option,xAxisType;
229 |             this.myChart.splice(index,1,echarts.init(scatterChart));
230 |             for(let i=0;i<this.computeResult.length;i++){
231 |                 zong1 && data1.push([this.computeResult[i].properties[heng],this.computeResult[i].properties[zong1]]);
232 |                 zong2 && data2.push([this.computeResult[i].properties[heng],this.computeResult[i].properties[zong2]]);
233 |             }
234 |             zong1 && data1 && series.push({name:zong1,type:chartType,symbolSize:4,data:data1});
235 |             zong2 && data2 && series.push({name:zong2,type:chartType,symbolSize:4,data:data2});
236 |             if(zong1 && !zong2){yAxisName = zong1;}
237 |             if(zong2 && !zong1){yAxisName = zong2;}
238 |             if(zong2 && zong1){yAxisName = zong1+'/'+zong2;}
239 |             this.dataFromMap && series.push({
240 |                 type: 'effectScatter',
241 |                 itemStyle:{color:'#FC4E2A'},
242 |                 symbolSize: 10,
243 |                 data: [[this.dataFromMap[heng],this.dataFromMap[zong1]],[this.dataFromMap[heng],this.dataFromMap[zong2]]],
244 |             });
245 |             xAxisType = chartType == 'bar'? 'category':'value';
246 |             option = {
247 |                 title : {text: title},
248 |                 tooltip : {trigger: 'item'},
249 |                 grid: {x:40,bottom:45},
250 |                 toolbox: {show: true, feature: {
251 |                     dataZoom: {},
252 |                     saveAsImage: {},
253 |                     myTool: {
254 |                         show: true,
255 |                         title: '删除图表',
256 |                         icon: 'path://M176.662 817.173c-8.19 8.471-7.96 21.977 0.51 30.165 8.472 8.19 21.978 7.96 30.166-0.51l618.667-640c8.189-8.472 7.96-21.978-0.511-30.166-8.471-8.19-21.977-7.96-30.166 0.51l-618.666 640z M795.328 846.827c8.19 8.471 21.695 8.7 30.166 0.511 8.471-8.188 8.7-21.694 0.511-30.165l-618.667-640c-8.188-8.471-21.694-8.7-30.165-0.511-8.471 8.188-8.7 21.694-0.511 30.165l618.666 640z',
257 |                         onclick:function(){
258 |                             self.chartPanelShow.splice(index,1,false);
259 |                             self.chartParSetShow.splice(index,1,true);
260 |                             self.addChartContainerShow.splice(index,1,false);
261 |                             self.myChart.splice(index,1,null);
262 |                             self.handleSession();
263 |                         }
264 |                     }}},
265 |                 xAxis : [{name:heng,nameLocation:'center',nameGap:25,type : 'category',scale:true,splitNumber:4}],
266 |                 yAxis : [{name:yAxisName,type : 'value',scale:true}],
267 |                 legend: [{data: [zong1,zong2],right:0,top:30}],
268 |                 series : series
269 |             };
270 |             this.myChart[index].setOption(option, true);
271 |         }
272 |     }
273 | }
274 | </script>
275 | 


--------------------------------------------------------------------------------
/src/components/rightSideForResult/computeLog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <!-- <div class="tipForChartOpen">点击此处可预览计算结果可视化</div> -->
 4 |     <div id="code">
 5 |         <span class="comments">*{{new Date().toString()}} 计算日志 */</span>
 6 |         <div id="log-content"></div>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | require('../../style/rightSideForResult.scss')
13 | import messageBus from '../../bus/messageBus.js'
14 | import {mapState} from 'vuex'
15 | 
16 | export default {
17 |   name: 'computeLog',
18 |   data () {
19 |     return {
20 |       success:true
21 |     }
22 |   },
23 |   computed:{
24 |     ...mapState({
25 |       parent_node_index:state => state.parent_node_index,
26 |       child_node_index:state => state.child_node_index,
27 |       computeLog:state => state.computeLogRecord,
28 |       computeSucOrNot: state => state.ComputeResultBtnShow.computeSuccess
29 |     })
30 |   },
31 |   mounted(){
32 |     window.sessionStorage.getItem('computeLog') && $('#log-content').html($(window.sessionStorage.getItem('computeLog')));  
33 |     this.listenComputeLog();
34 |     this.listenComputeAgain();  
35 |   },
36 |   watch:{
37 | 	  computeLog:'listenComputeLog'
38 |   },
39 |   methods:{
40 |     //监听重新计算的信息
41 |     listenComputeAgain: function(){
42 |       messageBus.$on('compute-again-compute-result-reflesh',(msg)=>{
43 |         msg && $('#log-content').html('');
44 |       })    
45 |     },
46 |     //监听计算之后得到的计算日志消息
47 |     listenComputeLog:function(){
48 |       this.success = (this.computeLog && this.computeLog[0].hasOwnProperty('result') && this.computeLog[0].result) || (this.computeLog && this.computeLog[this.computeLog.length-1].result && this.computeLog[this.computeLog.length-1].result.indexOf('failed')!=-1) ? false: true;
49 |       this.computeLog && !(window.sessionStorage.getItem('computeLog')) && this.printLog(this.computeLog,1000);
50 |       let arr=[this.success,this.parent_node_index,this.child_node_index]
51 |       this.$store.dispatch('computeSuccessAction' , arr);//传递计算是否成功的消息，控制结果展示点击按钮的disable属性
52 |       // if(this.computeSucOrNot){ 
53 |       //   $('.tipForChartOpen').show("slow");
54 |       // }else{
55 |       //   $('.tipForChartOpen').hide();
56 |       // }
57 |     },
58 |     //打印日志
59 |     printLog:function(log, speed) {
60 |       $('#log-content').html('');
61 |       let i = 0,self = this;
62 |       window.sessionStorage.getItem('computeLog') && window.sessionStorage.removeItem('computeLog');
63 |       let interval = setInterval(function(){
64 |         let div1 = log[i].number ? '<p class="keyword">'+log[i].number+'</p>':'',
65 |             div2 = log[i].line ? '<p class="value">'+log[i].line+'</p>':'',
66 |             div3 = log[i].result ? '<p class="error">'+log[i].result+'</p>':'',
67 |             div4 = log[i].tip ? '<p class="comments" id="turnToChartPage">'+log[i].tip+'</p>':'',
68 |             record = window.sessionStorage.getItem('computeLog'),
69 |             storage = record ? record+div1+div2+div3:div1+div2+div3;
70 |         window.sessionStorage.setItem('computeLog',storage);
71 |         $('#log-content').append(div1+div2+div3+div4);
72 |         if(document.getElementById("turnToChartPage")){
73 |           let div = document.getElementById("turnToChartPage");
74 |           div.addEventListener('click',function(){
75 |             self.$router.push({path:'/computeresult/chartAnalysis'});
76 |             messageBus.$emit('judge-right-container-tab','chart');
77 |           },false);
78 |         }
79 |         i += 1;
80 |         i >= log.length && clearInterval(interval);
81 |       },speed);
82 |     },
83 |   }
84 | }
85 | </script>


--------------------------------------------------------------------------------
/src/components/rightSideForResult/precision.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="precision_container">
 3 |     <div class="precision_container_chart">
 4 |       <header class="title"><p>计算精度图表</p></header><!-- /header -->
 5 |     </div>
 6 |     <div class="precision_container_description">
 7 |       <header class="title"><p>计算精度描述</p></header><!-- /header -->
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | require('../../style/rightSideForResult.scss')
14 | import messageBus from '../../bus/messageBus.js'
15 | import {mapState} from 'vuex'
16 | 
17 | export default {
18 |   name: 'computeLog',
19 |   data () {
20 |     return {
21 |       
22 |     }
23 |   },
24 |   computed:{
25 |     ...mapState({
26 |       
27 |     })
28 |   },
29 |   mounted(){
30 |     
31 |   },
32 |   watch:{
33 | 	  
34 |   },
35 |   methods:{
36 | 
37 |   }
38 | }
39 | </script>


--------------------------------------------------------------------------------
/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 App from './App'
 5 | import router from './router'
 6 | import store from './store/store'
 7 | import $ from 'jquery'
 8 | import VueResource from 'vue-resource'
 9 | 
10 | import Vtip from 'vtip'
11 | import 'vtip/lib/index.min.css'
12 | 
13 | Vue.use(VueResource)
14 | Vue.use(Vtip.directive)// 注册指令使用
15 | Vue.prototype.$tip = Vtip.tip// 工具函数调用
16 | Vue.config.productionTip = false
17 | 
18 | /* eslint-disable no-new */
19 | 
20 | new Vue({
21 |   el: '#app',
22 |   router,
23 |   store,
24 |   components: { App },
25 |   template: '<App/>',
26 | })
27 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import login from '@/components/firstPage'
 4 | import Home from '@/components/Home'
 5 | import RightSideForDataView from '@/components/RightSideForDataView'
 6 | import RightSideForDescription from '@/components/RightSideForDescription'
 7 | import RightSideForResult from '@/components/RightSideForResult'
 8 | import chartAnalysis from '@/components/rightSideForResult/chartAnalysis'
 9 | import computeLog from '@/components/rightSideForResult/computeLog'
10 | import precision from '@/components/rightSideForResult/precision'
11 | import slides from '@/components/firstPage/slides'
12 | 
13 | Vue.use(Router)
14 | 
15 | 
16 | export default new Router({
17 |   mode: 'history',
18 |   scrollBehavior (to, from, savedPosition) {
19 |     if (savedPosition) {
20 |       return savedPosition
21 |     } else {
22 |       if (from.meta.keepAlive) {
23 |         from.meta.savedPosition = document.body.scrollTop
24 |       }
25 |       return { x: 0, y: to.meta.savedPosition || 0 }
26 |     }
27 |   },
28 |   routes: [
29 |     {
30 |       path: '/',
31 |       redirect:'/login'
32 |     },
33 |     {
34 |       path:'/login',
35 |       component: login,
36 |     },
37 |     {
38 |       path:'/demo',
39 |       component: slides
40 |     },
41 |     {
42 |       path:'/',
43 |       component:Home,
44 |       children:[
45 |         {
46 |           path: "home",
47 |           component: RightSideForDataView
48 |         },
49 |         {
50 |           path: "description",
51 |           component: RightSideForDescription
52 |         },
53 |         {
54 |           path:'computeresult',
55 |           component: RightSideForResult,
56 |           children:[
57 |             {
58 |               path:"computeLog",
59 |               component: computeLog,
60 |             },
61 | 			      {
62 |               path:"chartAnalysis",
63 |               component: chartAnalysis,
64 |             },
65 |             {
66 |               path:'precision',
67 |               component: precision
68 |             }
69 |           ]
70 |         }
71 |       ]
72 |     }
73 |   ]
74 | })
75 | 


--------------------------------------------------------------------------------
/src/store/store.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import Vuex from 'vuex'
  3 | import demoLogo from '../assets/img/demo_data_aa.png'
  4 | import privateLogo from '../assets/img/private_data.png'
  5 | Vue.use(Vuex);
  6 | 
  7 | //计算分层设色的最大值和最小值；设置当前数据的中心位置
  8 | var dataTreeNodeName = require('../assets/data/dataTreeNodeName.json');//要获取的json文件
  9 | for(let i=0;i<dataTreeNodeName.length;i++){
 10 | 	let lonArr = [],latArr=[];
 11 | 	if(dataTreeNodeName[i].dataContent){
 12 | 		const demo = require('../assets/data/demoData/'+dataTreeNodeName[i].dataContent+'.json');
 13 | 		dataTreeNodeName[i].url = demo;
 14 | 		for(let j=0;j<dataTreeNodeName[i].children.length;j++){
 15 | 			const pro = dataTreeNodeName[i].children[j].name;
 16 | 			let arr = [],xArr=[],yArr=[];
 17 | 			for(let m=0;m<demo[0].features.length;m++){
 18 | 				arr.push(demo[0].features[m].properties[pro]);
 19 | 				lonArr.push(demo[0].features[m].geometry.coordinates[0]);
 20 | 				latArr.push(demo[0].features[m].geometry.coordinates[1]);
 21 | 			}
 22 | 			dataTreeNodeName[i].children[j].max=Math.max.apply(null,arr);
 23 | 			dataTreeNodeName[i].children[j].min=Math.min.apply(null,arr);
 24 | 			dataTreeNodeName[i].children[j].latitude=[Math.min.apply(null,latArr),Math.max.apply(null,latArr)];
 25 | 			dataTreeNodeName[i].children[j].Logitude=[Math.min.apply(null,lonArr),Math.max.apply(null,lonArr)];
 26 | 		}
 27 | 	}
 28 | 	dataTreeNodeName[i].centerPosition[0] = (Math.max.apply(null,latArr)+Math.min.apply(null,latArr))/2;
 29 | 	dataTreeNodeName[i].centerPosition[1] = (Math.max.apply(null,lonArr)+Math.min.apply(null,lonArr))/2;
 30 | }
 31 | 
 32 | //公共状态
 33 | const state = {
 34 | 	username:'', //登录用户名
 35 | 	parent_node_index:0, //选中数据父节点，示例数据/本地数据
 36 | 	child_node_index:0, //选中的数据节点，house price/fake data
 37 | 	grandson_node_index:0, //选中的数据属性，price/living
 38 | 	//数据内容
 39 | 	data_list:[
 40 | 	  	{
 41 | 	      	name:'示例数据',
 42 | 	      	data_type:dataTreeNodeName,
 43 | 		    src:demoLogo,
 44 | 	    },
 45 | 		{
 46 | 	      	name:'私有数据',
 47 | 	      	data_type:[],
 48 | 		    src:privateLogo,	
 49 | 		    children:[
 50 | 		    ]		
 51 | 		}
 52 | 	],
 53 | 	computeResult:null, //GWR/GTWR计算结果
 54 | 	ComputeResultBtnShow:{   //数据节点中查看计算结果图表展示的按钮
 55 | 		computeSuccess:false,
 56 | 		computeParentIndex:null,
 57 | 		computeChildIndex:null
 58 | 	},
 59 | 	computeLogRecord:null, //计算日志
 60 | }
 61 | 
 62 | const mutations = {
 63 | 	parentIndexMutation:function(state,msg){
 64 | 		state.parent_node_index = msg;
 65 | 	},
 66 | 	childIndexMutation:function(state,msg){
 67 | 		state.child_node_index = msg;
 68 | 	},
 69 | 	grandSonIndexMutation:function(state,msg){
 70 | 		state.grandson_node_index = msg;
 71 | 	},
 72 | 	username:function(state,msg){
 73 | 		state.username=msg;
 74 | 	},
 75 | 	computeResultMutation:function(state,msg){
 76 | 		state.computeResult = msg;
 77 | 	},
 78 | 	computeSuccessMutation: function(state,msg){
 79 | 		state.ComputeResultBtnShow.computeSuccess = msg[0];
 80 | 		state.ComputeResultBtnShow.computeParentIndex = msg[1];
 81 | 		state.ComputeResultBtnShow.computeChildIndex = msg[2];
 82 | 	},
 83 | 	computeLogRecordMutation: function(state,msg){
 84 | 		state.computeLogRecord = msg;
 85 | 	}
 86 | }
 87 | 
 88 | const actions = {
 89 | 	parentIndexAction:function({commit},msg){
 90 | 		commit('parentIndexMutation',msg)
 91 | 	},
 92 | 	childIndexAction:function({commit},msg){
 93 | 		commit('childIndexMutation',msg)
 94 | 	},
 95 | 	grandSonIndexAction:function({commit},msg){
 96 | 		commit('grandSonIndexMutation',msg)
 97 | 	},
 98 | 	computeResultAction:function({commit},msg){
 99 | 		commit('computeResultMutation',msg)
100 | 	},
101 | 	computeSuccessAction:function({commit},msg){
102 | 		commit('computeSuccessMutation',msg)
103 | 	},
104 | 	computeLogRecordAction:function({commit},msg){
105 | 		commit('computeLogRecordMutation',msg)
106 | 	}
107 | }
108 | 
109 | export default new Vuex.Store({
110 |     state,
111 |     mutations,
112 |     actions
113 | });


--------------------------------------------------------------------------------
/src/style/app.scss:
--------------------------------------------------------------------------------
 1 | @import 'main_style.scss';
 2 | 
 3 | .wrap{
 4 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
 5 |   -webkit-font-smoothing: antialiased;
 6 |   -moz-osx-font-smoothing: grayscale;
 7 |   color: #2c3e50;
 8 |   width: 100%;
 9 |   height: 100%;
10 |   margin: 0;
11 |   
12 |   .header{
13 | 	  z-index: 1000;
14 |     height: 55px;
15 |     width: 100%;
16 |     background-color: white;
17 |     box-shadow: $shadow_card, $shadow_card;
18 |     display: flex;
19 |     position:absolute;
20 |     align-items:center;
21 |     justify-content: space-between;
22 |     p{
23 |       margin:auto 10px;
24 |       font-family: 'Yu Gothic UI Semibold';
25 |       font-size: 22px;
26 |       span{
27 |         color: $title_color;
28 |         font-weight: bold;
29 |       }
30 |     }
31 |     .login-container{
32 |       .loginLink{
33 |         font-size: 12px;
34 |         color:$title_color;
35 |         margin-right: 10px;
36 |         text-decoration: none;
37 |         cursor:pointer;
38 |       }   
39 |       .active{
40 |       color:#38f;
41 |       } 
42 |       .userLogin{
43 |         font-size: 12px;
44 |         color:black;
45 |         margin-right:10px;
46 |         float:left;
47 |       }
48 |       .exit{
49 |         font-size: 12px;
50 |         color:$title_color;
51 |         margin-right: 10px;
52 |         float:left;
53 |         cursor:pointer;
54 |       }
55 |     }
56 |   }
57 |   .main-content{
58 |     position: absolute;
59 |     top:55px;
60 |     bottom: 0px;
61 |     width: 100%;
62 |     display: flex;
63 |   }
64 | }


--------------------------------------------------------------------------------
/src/style/coverLogin.scss:
--------------------------------------------------------------------------------
  1 | @import 'main_style.scss';
  2 | $margin: 15px;
  3 | 
  4 | .cover-login{
  5 | 	position: absolute;
  6 | 	width: 100%;
  7 | 	height: 100%;
  8 | 	background-color: rgba(0,0,0,0.4);
  9 | 	z-index:1000;
 10 | 	display: flex;
 11 | 	justify-content: center;
 12 | 	align-items: center;
 13 | 	img{
 14 | 		position: absolute;
 15 | 		top: 20px;
 16 | 		right:20px;
 17 | 	}
 18 | 	.box-container{
 19 | 		position:absolute;
 20 | 		width:350px - $margin * 2;
 21 | 		height: auto;
 22 | 		background-color: white;
 23 | 		box-shadow: $shadow_card,$shadow_card;
 24 | 		padding: $margin * 2;
 25 | 		padding-right:$margin * 3;
 26 | 		.main{
 27 | 			width: 100%;
 28 | 			height: 100%;
 29 | 			position: relative;
 30 | 			display: flex;
 31 | 			justify-content:center;
 32 | 			hr{
 33 | 				position: absolute;
 34 | 				top: 0px;
 35 | 				width: 100%;
 36 | 			}
 37 | 			.login-title{
 38 | 				position: absolute;
 39 | 				background-color: white;
 40 | 				color:$title_color;
 41 | 				width: 100px;
 42 | 				height: 2em;
 43 | 				top:0;
 44 | 				text-align: center;
 45 | 				b{
 46 | 					line-height: 1em;
 47 | 					margin-top: 5px;
 48 | 				}
 49 | 			}
 50 | 			.login{
 51 | 				height: 100%;
 52 | 				width: 100%;
 53 | 				text-align: center;
 54 | 				margin-top: $margin * 2;
 55 | 				input{
 56 | 					margin-top: $margin;
 57 | 					width: 99%;
 58 | 					height: 30px;
 59 | 				}
 60 | 				button{
 61 | 					margin-top: $margin;
 62 | 					width: 100%;
 63 | 			    	height: 40px;
 64 | 			    	border-radius: 4px;
 65 | 			    	background-color: $title_color;
 66 | 			     	border: none;
 67 | 			    	color: #FFFFFF;
 68 | 			     	cursor: pointer;
 69 | 				}
 70 | 				.eye_img{
 71 | 					position: absolute;
 72 | 					top: 105px;
 73 | 					right:20px;
 74 | 					width: 30px;
 75 | 				    height: 20px;
 76 | 				}
 77 | 				.yanzhengma_input{
 78 | 					margin-top: $margin;
 79 | 					float: left;
 80 | 					width: 69%;
 81 | 					height: 30px;
 82 | 					display: inline;
 83 | 				}
 84 | 				.verification{
 85 | 					-webkit-appearance: button;
 86 | 					width:28%;
 87 | 				    margin-left:1%;
 88 | 					height: 35px;
 89 | 					display: inline;
 90 | 					float: right;
 91 | 					border-radius: 4px;
 92 | 					background-color: white;
 93 | 					outline: none;
 94 | 				}
 95 | 				div{
 96 | 					margin-top: $margin;
 97 | 					text-decoration: underline;
 98 | 					color: $title_color;
 99 | 					font-size: 0.8em;
100 | 					overflow: hidden;
101 | 					clear: both;
102 | 				}
103 | 				.disappear{
104 | 				     visibility:hidden;
105 | 				}				
106 | 				.send_msg{
107 | 				    width:28%;
108 | 				    margin-left: 1%;
109 | 					height: 35px;
110 | 					border: none;
111 | 					outline: none;
112 | 				}
113 | 				button::-moz-focus-inner,
114 | 				input[type="button"]::-moz-focus-inner { border:none; padding:0; }
115 | 			} 
116 | 		}
117 | 	}
118 | }
119 | 
120 | 


--------------------------------------------------------------------------------
/src/style/dataSelector.scss:
--------------------------------------------------------------------------------
  1 | @import 'main_style.scss';
  2 | .data-selector{
  3 |   background-color: white;
  4 |   box-shadow: $shadow_card,$shadow_card;
  5 |   width: 100%;
  6 |   display: flex;
  7 |   flex-direction: column;
  8 |   .data-list{
  9 |   	margin-left:10px;
 10 |   	.parent_node{
 11 |   		margin-top: 5px;
 12 |   		transition: all 0.5s;
 13 |   		width: $left-side-width - 40;
 14 |   		cursor: pointer;
 15 |   		img{
 16 |   			vertical-align: middle;
 17 |         	width: 20px;
 18 |   		}
 19 |   		b{
 20 |   			vertical-align: middle;
 21 |   		}
 22 |   	}
 23 |   	.parent_node:hover{
 24 |   		background-color: $hover_color;
 25 |   	}
 26 |   	.parent_node span{
 27 |   		float: right;
 28 |   	}
 29 |   	.child_list{
 30 |   		margin-left: 20px;
 31 | 		width: $left-side-width - 55;
 32 | 		#file{
 33 | 			opacity:0; position: absolute;top: 11px;left: 5px;padding-left: 100px;width:150px;cursor:pointer;height: 50px;
 34 | 		}
 35 |   		p{
 36 | 			margin: 5px;
 37 |   		}
 38 |       	span{
 39 |         	float: right;
 40 | 		}
 41 | 		.child_node{
 42 | 			.highlight{
 43 | 				background-color:#F5F5F5;
 44 | 			}
 45 | 			button{
 46 | 				font-size: 0.8em;
 47 | 				width: 7em;
 48 | 				margin:0;
 49 | 				padding:0;
 50 | 				border-radius: 2px;
 51 | 				border:none;
 52 | 				outline:none;
 53 | 				background-color: lightseagreen;
 54 | 				color: #FFFFFF;
 55 | 			  }
 56 | 		}
 57 | 		.child_node_img{
 58 | 			width: 15px;
 59 | 		}
 60 |       .grand_son_list{
 61 |         margin-left: 20px;
 62 |         font-size: 13px;
 63 |         img{
 64 |           width: 13px;
 65 |         }
 66 |         button{
 67 |           font-size: 0.8em;
 68 |           width: 2.5em;
 69 |           margin:0;
 70 |           padding:0;
 71 |           border-radius: 2px;
 72 |           border:none;
 73 |           outline:none;
 74 |           background-color: lightseagreen;
 75 |           color: #FFFFFF;
 76 |         }
 77 |          //按钮高亮样式
 78 |         .highlight{
 79 |               border:2px solid dodgerblue;
 80 |         }
 81 |       }
 82 |   	}
 83 |   }
 84 | 
 85 |   .data_drag_container{
 86 |   	height: 80px;
 87 |   	background-color: rgba(0,0,0,0.05);
 88 |   	border: 1px dashed rgba(0,0,0,0.7);
 89 |   	margin: 10px;
 90 |   	text-align: center;
 91 |   	img{
 92 |   		margin-top: 20px;
 93 |   	}
 94 |   	p{
 95 | 		margin-top: 0px;
 96 |   	}
 97 |   }
 98 | }
 99 | 
100 | 
101 | .black_overlay{  
102 |  display: none;  
103 |  position: absolute;  
104 |  top: 0%;  
105 |  left: 0%;  
106 |  width: 100%;  
107 |  height: 100%;  
108 |  background-color: black;  
109 |  z-index:1001;  
110 |  -moz-opacity: 0.8;  
111 |  opacity:.80;  
112 |  filter: alpha(opacity=80);  
113 | }  
114 | .white_content {  
115 |  display: none;  
116 |  position: absolute;  
117 |  top: 10%;  
118 |  left: 10%;  
119 |  width: 80%;  
120 |  height: 80%;  
121 |  border: 16px solid lightblue;  
122 |  background-color: white;  
123 |  z-index:1002;  
124 |  overflow: auto;  
125 | }  
126 | .white_content_small {  
127 |  display: none;  
128 |  position: absolute;  
129 |  top: 20%;  
130 |  left: 30%;  
131 |  width: 40%;  
132 |  height: 50%;  
133 |  border: 16px solid lightblue;  
134 |  background-color: white;  
135 |  z-index:1002;  
136 |  overflow: auto;  
137 | }  
138 | 
139 | 
140 | 
141 | 
142 | 
143 | 


--------------------------------------------------------------------------------
/src/style/dataViewer.scss:
--------------------------------------------------------------------------------
  1 | @import 'main_style.scss';
  2 | 
  3 | .data-container{
  4 |   background-color: white;
  5 |   box-shadow: $shadow_card,$shadow_card;
  6 |   width: 100%;
  7 |   margin-top: $card-margin_padding;
  8 |   display: flex;
  9 |   flex-direction: column;
 10 |   height:40%;
 11 |   min-height: 200px;
 12 |   table{
 13 |     margin-left:10px;
 14 |     border: 1px solid #F5F5F5;
 15 |     margin:$card-margin_padding;
 16 |     border-collapse: collapse;
 17 |     width:95%;
 18 |     text-align: center;
 19 |     td,th{
 20 |       border: 1px solid #F5F5F5;
 21 |     }
 22 |     th{
 23 |       background-color: $title_color;
 24 |     }
 25 |     tr{
 26 |       height: 30px;
 27 |     }
 28 |     tr:hover{
 29 |       background-color: #F5F5F5;
 30 |     }
 31 |   }   
 32 | }
 33 | 
 34 | .data-head{
 35 |   background-color: white;
 36 |   box-shadow: $shadow_card,$shadow_card;
 37 |   width: 100%;
 38 |   margin-top: $card-margin_padding;
 39 |   display: flex;
 40 |   flex-direction: column;
 41 |   table{
 42 |     margin-left:10px;
 43 |     border: 1px solid #F5F5F5;
 44 |     margin:$card-margin_padding;
 45 |     border-collapse: collapse;
 46 |     width:97%;
 47 |     text-align: center;
 48 |     td,th{
 49 |       border: 1px solid #F5F5F5;
 50 |     }
 51 |     th{
 52 |       background-color: $title_color;
 53 |     }
 54 |     tr{
 55 |       height: 30px;
 56 |     }
 57 |     tr:hover{
 58 |       background-color: #F5F5F5;
 59 |     }
 60 |   }   
 61 | }
 62 | 
 63 | 
 64 | .data-table{
 65 |   background-color: white;
 66 |   box-shadow: $shadow_card,$shadow_card;
 67 |   width: 100%;
 68 |    height:250px;
 69 |   overflow-y:scroll;
 70 |   margin-top: $card-margin_padding;
 71 |   display: flex;
 72 |   flex-direction: column;
 73 |   table{
 74 |     margin-left:10px;
 75 |     border: 1px solid #F5F5F5;
 76 |     margin:$card-margin_padding;
 77 |     border-collapse: collapse;
 78 |     width:97%;
 79 |     text-align: center;
 80 |     td,th{
 81 |       border: 1px solid #F5F5F5;
 82 |     }
 83 |     th{
 84 |       background-color: $title_color;
 85 |     }
 86 |     tr{
 87 |       height: 30px;
 88 |     }
 89 |     tr:hover{
 90 |       background-color: #F5F5F5;
 91 |     }
 92 |   }   
 93 | }
 94 | .data-table>table, .data-head>table {
 95 |     table-layout: fixed;
 96 | }
 97 | .data-container .data-table{
 98 |     flex-grow : 1;
 99 |     overflow-y : scroll;
100 | }
101 | 


--------------------------------------------------------------------------------
/src/style/firstPage.scss:
--------------------------------------------------------------------------------
  1 | @import 'main_style.scss';
  2 | 
  3 | $title_font_size:27px;
  4 | $shadow_card_1:0 2px 2px 0 $black_for_shadow;
  5 | 
  6 | .container{
  7 |   width: 100%;
  8 |   height: 100%;
  9 |   #hello{
 10 |     width: 100%;
 11 |     height: 100%;
 12 |     overflow: hidden;
 13 |     #dynamic{
 14 |       height: 100%;
 15 |       width: 100%;
 16 |     }
 17 |   }
 18 |   .intro-text{
 19 |     display: flex;
 20 |     justify-content: center;
 21 |     .title{
 22 |       position: absolute;
 23 |       height: 50px;
 24 |       width: 427px;
 25 |       top: 20%;
 26 |       left: 0;
 27 |       right: 0;
 28 |       margin: 0 auto;
 29 |       color:white;
 30 |       font-size: $title_font_size * 2;
 31 |     }
 32 |     .link{
 33 |       color:lightseagreen;
 34 |       position: absolute;
 35 |       display: block;
 36 |       height: 50px;
 37 |       width: 320px;
 38 |       top: 95%;
 39 |       left: 0;
 40 |       right: 0;
 41 |       margin: 0 auto;
 42 |       font-weight: bold;
 43 |       font-size: 20px;
 44 |     }
 45 |   }  
 46 | } 
 47 | 
 48 | .slides{
 49 |   height: 100%;
 50 |   width: 100%;
 51 |   overflow: hidden;
 52 |   display: flex;
 53 |   justify-content:center;
 54 |   .playBtn{
 55 |     position: absolute;
 56 |     bottom: 10px;
 57 |     margin:0px auto; 
 58 |     .circle{
 59 |       width:11px;
 60 |       height:11px;
 61 |       background-color: gray;
 62 |       margin-right: 20px;
 63 |       border-radius: 5.5px;
 64 |       border:none;
 65 |     }
 66 |     .circle:active,.circle:hover,.on{
 67 |       background-color:$title_color;
 68 |     }
 69 |   }
 70 |   &_container{
 71 |     display: flex;
 72 |     flex-direction: column;
 73 |     width: 100%;
 74 |     height: 100%;
 75 |     position: absolute;
 76 |     &_top{
 77 |       flex: 1;
 78 |       display: flex;
 79 |       &_img{
 80 |         flex: 1;
 81 |         text-align: center;
 82 |         box-shadow: $shadow_card_1,$shadow_card_1;
 83 |         &_img{
 84 |           height: 100%;
 85 |           width: 100%;
 86 |         }
 87 |       }
 88 |       &_chartContainertop{
 89 |         flex: 0 0 310px;
 90 |         height: 100%;
 91 |         display: flex;
 92 |         flex-direction: column;
 93 |         &_chart{
 94 |           width: 310px;
 95 |           height: 50%;
 96 |           box-shadow: $shadow_card_1,$shadow_card_1;
 97 |         }
 98 |       }
 99 |     }
100 |     &_bottom{
101 |       flex: 0 0 260px;
102 |       display: flex;
103 |       &_chart{
104 |         flex: 0 0 310px;
105 |         width: 310px;
106 |         height: 260px;
107 |         box-shadow: $shadow_card_1,$shadow_card_1;
108 |       }
109 |       &_left{
110 |         flex: 1;
111 |         display: flex;
112 |         &_paper{
113 |           flex: 0 0 450px;
114 |           width: 50%;
115 |           padding: 5px;
116 |           box-shadow: $shadow_card_1,$shadow_card_1;
117 |           &_img{
118 |             width: 100%;
119 |             height: 100%;
120 |             border: 1px solid lightgray;
121 |           }
122 |         }
123 |         &_abstract{
124 |             flex: 1;
125 |             padding: 10px;
126 |             box-shadow: $shadow_card_1,$shadow_card_1;
127 |         }
128 |       }
129 |     }
130 | 
131 |   }
132 | }
133 | 
134 | 


--------------------------------------------------------------------------------
/src/style/home.scss:
--------------------------------------------------------------------------------
 1 | @import 'main_style.scss';
 2 | 
 3 | .home{
 4 | 	height: 100%;
 5 | 	width: 100%;
 6 | 	display: flex;
 7 | 	.left-side{
 8 | 	  flex: 0 0 $left-side-width;
 9 | 	  padding: $card-margin_padding;
10 | 	  border-right: 1px solid $black_for_shadow;
11 | 	  overflow:auto; 
12 | 	}
13 | 	.right-side{
14 | 	  flex: 1;
15 | 	  padding:$card-margin_padding;
16 | 	  overflow-y:auto; 
17 | 	}
18 | }
19 | 
20 | 
21 | @media screen and (max-width: 800px) {
22 |   .left-side{display: none; }
23 | }


--------------------------------------------------------------------------------
/src/style/main_style.scss:
--------------------------------------------------------------------------------
  1 | $black_for_shadow: rgba(0,0,0,0.1);
  2 | $shadow_card:0 1px 1px 0 $black_for_shadow;
  3 | $title_color:lightseagreen;
  4 | $card-margin_padding: 7px;
  5 | $title_height:30px;
  6 | $left_sider_container_height:600px;
  7 | $left-side-width: 350px;
  8 | $hover_color:#f5f5f5;
  9 | $grey: rgba(0,0,0,0.5);
 10 | 
 11 | @mixin container($height){
 12 |   background-color: white;
 13 |   box-shadow: $shadow_card,$shadow_card;
 14 |   width: 100%;
 15 |   height: $height;
 16 | }
 17 | 
 18 | .title{
 19 |     height: $title_height;
 20 |     p{
 21 |       color:$title_color;
 22 |       font-size: 17px;
 23 |       font-weight: bold;
 24 |       margin: 5px 10px;
 25 |     }   
 26 | }
 27 | 
 28 | .map-container{
 29 |   @include container(60%);
 30 |   min-height: 400px; 
 31 | }
 32 | 
 33 | // 地图图例
 34 | .map_legend { 
 35 |   text-align: left; 
 36 |   color: #555; 
 37 |   background-color: white;
 38 |   padding: 8px;
 39 |   border-radius: 5px; 
 40 |   box-shadow:$shadow_card,$shadow_card; 
 41 |   .map_legend_div { width: 18px; height: 12px; opacity: 0.7; display: inline-block;}
 42 |   .map_legend_font{font: 14px Arial, Helvetica, sans-serif;}
 43 | } 
 44 | 
 45 | .right-container{
 46 |   display: flex;
 47 |   flex-direction:column;
 48 |   height: 100%; 
 49 | }
 50 | 
 51 | .right-container-descrip{
 52 |   @include container(99%);
 53 |   display: flex;
 54 |   flex-direction: column;
 55 |   height: 100%;
 56 |   width: 99.5%;
 57 |   &-info{
 58 |     flex: 0 0 320px;
 59 |     box-shadow: $shadow_card,$shadow_card; 
 60 |     display: flex;
 61 |     flex-direction: column;
 62 |     height: 100%;
 63 |     overflow: scroll;
 64 |     header{
 65 |       flex: 0 0 10px;
 66 |       p{
 67 |         color:$title_color;
 68 |         font-size: 17px;
 69 |         font-weight: bold;
 70 |         margin: 2px 10px;
 71 |       } 
 72 |     }
 73 |     &_detail{
 74 |       padding: 0 $card-margin_padding + 4px;
 75 |       flex: 1;
 76 |       p{
 77 |         margin-top: 5px;
 78 |         margin-bottom: 10px;
 79 |         line-height: 20px;
 80 |       }
 81 |       .title{
 82 |         width: 110px;
 83 |         font-weight: bold;
 84 |       }
 85 |       .content{
 86 |         width: 60%;
 87 |       }
 88 |     }
 89 |   }
 90 |   &-extent{
 91 |     margin-top: $card-margin_padding;
 92 |     flex: 1;
 93 |     box-shadow: $shadow_card,$shadow_card;
 94 |     display: flex;
 95 |     flex-direction: column;
 96 |     height: 100%;
 97 |     header{
 98 |       flex: 0 0 10px;
 99 |       p{
100 |         color:$title_color;
101 |         font-size: 17px;
102 |         font-weight: bold;
103 |         margin: 2px 10px;
104 |       } 
105 |     }
106 |     &_map{
107 |       padding: 0 $card-margin_padding + 4px;
108 |       flex: 1;
109 |       display: flex;
110 |       flex-direction: column;
111 |       span{
112 |         font-weight: bold;
113 |       }
114 |       p{
115 |         width: 70px;
116 |         padding:1px;
117 |         height: 20px;
118 |         margin: 0 auto;
119 |         border: 1px solid lightgray;
120 |       }
121 |       &_top,&_bot{
122 |         flex: 0 0 50px;
123 |         text-align: center;
124 |       }
125 |       &_mid{
126 |         flex:1;
127 |         display: flex;
128 |         .left-cor,.right-cor{
129 |           flex: 0 0 100px;
130 |           text-align: center;
131 |           padding-top: 10%;
132 |         }
133 |         #extent-map{
134 |           flex: 1;
135 |           height: 100%;
136 |         }
137 |       }
138 |     }
139 |   }
140 | }
141 | 
142 | .cover{
143 |   position: absolute;
144 |   width: 100%;
145 |   height: 100%;
146 |   background-color: rgba(0,0,0,0.4);
147 |   z-index:1000;
148 |   img{
149 |     position: absolute;
150 |     top: 20px;
151 |     right:20px;
152 |   }
153 | }


--------------------------------------------------------------------------------
/src/style/parDefiner.scss:
--------------------------------------------------------------------------------
 1 | @import 'main_style.scss';
 2 | 
 3 | .par-container{
 4 |   @include container($left_sider_container_height);
 5 |   margin-top: $card-margin_padding;
 6 |   display: flex;
 7 |   flex-direction: column;
 8 |   .par-list{
 9 |     margin-left:10px;
10 |     .par-title{
11 |       display:inline-block;
12 |       width:80px;
13 |       text-align:left;
14 |     }
15 |     input{
16 |       width: $left-side-width - 110;
17 |     }
18 |     select{
19 |       width: 20px;
20 |       margin-left: -26px;
21 |       border: none;
22 |       outline: none;
23 |       background-color: rgba(255,255,255,0);
24 |     }
25 |     p{
26 |       line-height: 10px;
27 |       color:$grey;
28 |       font-size:14px;
29 |     }
30 |     .submit{
31 |       width: 100px;
32 |       height: 30px;
33 |       float: right;
34 |       margin-right: 5%;
35 |       margin-top: -18px;
36 |       display: inline-block;
37 |       border-radius: 4px;
38 |       background-color: rgba(0,139,139,0.8);
39 |       border: none;
40 |       color: #FFFFFF;
41 |       cursor: pointer;
42 |     }
43 |     .submit span {
44 |       cursor: pointer;
45 |       display: inline-block;
46 |       position: relative;
47 |       transition: 0.5s;
48 |     }
49 |   }
50 |   
51 |   .GWRtab{
52 |     text-align: center;
53 |     button{
54 |       color: lightseagreen;
55 |       font-size: 15px;
56 |       font-weight: bold;
57 |   		background-color: white;
58 |   		border: none;
59 |   		font-size: 16px;
60 |       width: 150px;
61 |       margin-top:5px;
62 |       margin-bottom:5px;
63 |       outline:none;
64 |       cursor: pointer;
65 |     }
66 |     .active{
67 |       border:2px solid dodgerblue;
68 |     }
69 |   }
70 | 
71 | }
72 | 
73 | .btn-animation{
74 |   animation: btnAnimation 5s linear;
75 | }
76 | @keyframes btnAnimation{
77 |   from{
78 |     width: 0px;
79 |   }
80 |   to{
81 |     width: 100px;
82 |   }
83 | }


--------------------------------------------------------------------------------
/src/style/rightSideForResult.scss:
--------------------------------------------------------------------------------
  1 | @import 'main_style.scss';
  2 | .result-canel{
  3 |   height: 100%;
  4 |   width: 100%;
  5 |   display: flex;
  6 |   .content{
  7 |     box-shadow: $shadow_card,$shadow_card;
  8 |   	flex:1;
  9 |   }
 10 |   .tab{
 11 |   	flex: 0 0 40px;
 12 |   	text-align: center;
 13 |   	.last-btn{
 14 |   		box-shadow: $shadow_card,$shadow_card;
 15 |   		background-color: white;
 16 |   		border: none;
 17 |   		font-size: 16px;
 18 |   		height: 150px;
 19 |   	}
 20 |   	button{
 21 |   		@extend .last-btn;
 22 |   		border-bottom: 1px dashed rgba(0,0,0,0.5);
 23 |       outline:none;
 24 |   	}
 25 |   }
 26 | }
 27 | 
 28 | @mixin chartBar($width,$height){
 29 |   width: $width;
 30 |   height: $height;
 31 |   margin-bottom: $card-margin_padding;
 32 |   box-shadow: $shadow_card,$shadow_card;
 33 | }
 34 | .chartAnalysis{
 35 |   width: 100%;
 36 |   height: 100%;
 37 |   min-width: 934px;
 38 |   overflow-y: scroll;
 39 |   &_map{
 40 |     height: 400px;
 41 |     width: 99.5%;
 42 |   }
 43 |   td{
 44 |     min-width: 310px;
 45 |     height:233px;
 46 |     box-shadow: $shadow_card,$shadow_card;
 47 |     padding-right: 0px;
 48 |     .add-chart-container{
 49 |       width: 100%;
 50 |       height: 100%;
 51 |       text-align: center;
 52 |       line-height: 233px;
 53 |       vertical-align: middle;
 54 |       color: lightgray;
 55 |       font-size: 200px;
 56 |       font-weight: bold;
 57 |     }
 58 |     .chart{
 59 |       width:310px;
 60 |       height: 248px;
 61 |       padding-right: 0px;
 62 |     }
 63 |     .chart-par-setting{
 64 |       width: 100%;
 65 |       height: 100%;
 66 |       margin-left: $card-margin_padding*2;
 67 |       p{
 68 |         color:$title_color;
 69 |       }
 70 |       a{
 71 |         display: inline-block;
 72 |         width: 75px;
 73 |       }
 74 |       input{
 75 |         width: 180px;
 76 |         margin-left: $card-margin_padding -4px;
 77 |       }
 78 |       select{
 79 |         border: 0.5px solid lightgray;
 80 |         outline: none;
 81 |         background-color: rgba(0,0,0,0);
 82 |         width: 188px;
 83 |       }
 84 |       img{
 85 |         width: 10px;
 86 |         height: 10px;
 87 |         z-index: 3;
 88 |       }
 89 |       button{
 90 |         width: 100px;
 91 |         height: 30px;
 92 |         display: inline-block;
 93 |         border-radius: 4px;
 94 |         background-color: $title_color;
 95 |         border: none;
 96 |         color: #FFFFFF;
 97 |         cursor: pointer;
 98 |         margin-top: $card-margin_padding*5;
 99 |         margin-left: 35%;
100 |       }
101 |     }
102 |   }
103 | }
104 | 
105 | #code{
106 |   padding: $card-margin_padding;
107 |   color:black;
108 |   font-family:"Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","sans-serif";
109 |   font-size:13px;
110 |   line-height: 20px;
111 |   .keyword{color:#7f0055;font-weight:bold}
112 |   .placeholder{margin-left:15px}
113 |   .comments{color:#3f7f5f}
114 |   .value{color:orange;}
115 |   .error{color:red;}
116 | }
117 | 
118 | .precision_container{
119 |   width: 100%;
120 |   height: 100%;
121 |   &_chart{
122 |     @include chartBar(99%,60%);
123 |   }
124 |   &_description{
125 |     margin-top:  $card-margin_padding*2;
126 |     @include chartBar(99%, 36%);
127 |   }
128 | }
129 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GTWR/gtwr_vue/7df2732d759510ce9f94aaf9e5a46d646f653395/static/.gitkeep


--------------------------------------------------------------------------------
/static/dataTreeNodeName.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"dataName":"house price",
 3 | 	"properties": [
 4 | 		{"name":"Price"},
 5 | 		{"name":"constant"},
 6 | 		{"name":"Living"},
 7 | 		{"name":"quality"},
 8 | 		{"name":"structure"},
 9 | 		{"name":"renovation"},
10 | 		{"name":"condiction"},
11 | 		{"name":"greenspace"},
12 | 		{"name":"Traffic"},
13 | 		{"name":"VIEW"}
14 | 	]
15 | }


--------------------------------------------------------------------------------
/test/e2e/custom-assertions/elementCount.js:
--------------------------------------------------------------------------------
 1 | // A custom Nightwatch assertion.
 2 | // The assertion name is the filename.
 3 | // Example usage:
 4 | //
 5 | //   browser.assert.elementCount(selector, count)
 6 | //
 7 | // For more information on custom assertions see:
 8 | // http://nightwatchjs.org/guide#writing-custom-assertions
 9 | 
10 | exports.assertion = function (selector, count) {
11 |   this.message = 'Testing if element <' + selector + '> has count: ' + count
12 |   this.expected = count
13 |   this.pass = function (val) {
14 |     return val === this.expected
15 |   }
16 |   this.value = function (res) {
17 |     return res.value
18 |   }
19 |   this.command = function (cb) {
20 |     var self = this
21 |     return this.api.execute(function (selector) {
22 |       return document.querySelectorAll(selector).length
23 |     }, [selector], function (res) {
24 |       cb.call(self, res)
25 |     })
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/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 | 
 4 | const webpack = require('webpack')
 5 | const DevServer = require('webpack-dev-server')
 6 | 
 7 | const webpackConfig = require('../../build/webpack.prod.conf')
 8 | const devConfigPromise = require('../../build/webpack.dev.conf')
 9 | 
10 | let server
11 | 
12 | devConfigPromise.then(devConfig => {
13 |   const devServerOptions = devConfig.devServer
14 |   const compiler = webpack(webpackConfig)
15 |   server = new DevServer(compiler, devServerOptions)
16 |   const port = devServerOptions.port
17 |   const host = devServerOptions.host
18 |   return server.listen(port, host)
19 | })
20 | .then(() => {
21 |   // 2. run the nightwatch test suite against it
22 |   // to run in additional browsers:
23 |   //    1. add an entry in test/e2e/nightwatch.conf.js under "test_settings"
24 |   //    2. add it to the --env flag below
25 |   // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
26 |   // For more information on Nightwatch's config file, see
27 |   // http://nightwatchjs.org/guide#settings-file
28 |   let opts = process.argv.slice(2)
29 |   if (opts.indexOf('--config') === -1) {
30 |     opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
31 |   }
32 |   if (opts.indexOf('--env') === -1) {
33 |     opts = opts.concat(['--env', 'chrome'])
34 |   }
35 | 
36 |   const spawn = require('cross-spawn')
37 |   const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
38 | 
39 |   runner.on('exit', function (code) {
40 |     server.close()
41 |     process.exit(code)
42 |   })
43 | 
44 |   runner.on('error', function (err) {
45 |     server.close()
46 |     throw err
47 |   })
48 | })
49 | 


--------------------------------------------------------------------------------
/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 (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 |     "jest": true
4 |   },
5 |   "globals": { 
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/test/unit/jest.conf.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | 
 3 | module.exports = {
 4 |   rootDir: path.resolve(__dirname, '../../'),
 5 |   moduleFileExtensions: [
 6 |     'js',
 7 |     'json',
 8 |     'vue'
 9 |   ],
10 |   moduleNameMapper: {
11 |     '^@/(.*)$': '<rootDir>/src/$1'
12 |   },
13 |   transform: {
14 |     '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
15 |     '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
16 |   },
17 |   testPathIgnorePatterns: [
18 |     '<rootDir>/test/e2e'
19 |   ],
20 |   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
21 |   setupFiles: ['<rootDir>/test/unit/setup'],
22 |   mapCoverage: true,
23 |   coverageDirectory: '<rootDir>/test/unit/coverage',
24 |   collectCoverageFrom: [
25 |     'src/**/*.{js,vue}',
26 |     '!src/main.js',
27 |     '!src/router/index.js',
28 |     '!**/node_modules/**'
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/test/unit/setup.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | 
3 | Vue.config.productionTip = false
4 | 


--------------------------------------------------------------------------------
/test/unit/specs/HelloWorld.spec.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import HelloWorld from '@/components/HelloWorld'
 3 | 
 4 | describe('HelloWorld.vue', () => {
 5 |   it('should render correct contents', () => {
 6 |     const Constructor = Vue.extend(HelloWorld)
 7 |     const vm = new Constructor().$mount()
 8 |     expect(vm.$el.querySelector('.hello h1').textContent)
 9 |       .toEqual('Welcome to Your Vue.js App')
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------