Commit d3e8c09c authored by qzhxx's avatar qzhxx

Initial commit

parents
Pipeline #259 failed with stages
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.DS_Store
node_modules/
/dist/
/plat/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}
# hall
> manage
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
'use strict'
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})
'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
// publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
}
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const webpack =require('webpack')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'jquery':'jquery',
}
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'windows.jQuery':'jquery'
})
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},{
test:/\.less$/,
loader: 'vue-style-loader!css-loader!less-loader'
},
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: path.resolve(__dirname, '../static/favicon.ico'),
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
publicPath:'/plat/',
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon: path.resolve(__dirname, '../static/favicon.ico'),
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// keep module.id stable when vendor modules does not change
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
})
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/mall': {
target: "http://192.168.110.93/chnmuseum-party/",
changeOrigin: true,
pathRewrite: {
'^/mall': '/' // 重写接口
}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 3000, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../plat/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../plat'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
'use strict'
module.exports = {
NODE_ENV: '"production"'
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>虚拟营业厅</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
This diff is collapsed.
{
"name": "hall",
"version": "1.0.0",
"description": "manage",
"author": "yuyan <yuyan@wisenergy.com.cn>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"awe-dnd": "^0.3.1",
"axios": "^0.18.0",
"echarts": "^4.2.0-rc.2",
"element-ui": "^2.4.8",
"file-saver": "^2.0.0-rc.3",
"moment": "^2.22.2",
"ol": "^5.2.0",
"ol-ext": "^3.0.2",
"qrcode.vue": "^1.6.1",
"qs": "^6.5.2",
"qs-stringify": "^1.1.0",
"vue": "^2.5.2",
"vue-qr": "^1.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",
"xlsx": "^0.14.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.11",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jquery": "^3.3.1",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"style-loader": "^0.23.0",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^1.1.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</div>
</template>
<script>
export default {
name: 'App',
provide () {
return {
reload: this.reload
}
},
data () {
return {
isRouterAlive: true
}
},
methods: {
reload () {
this.isRouterAlive = false;
this.$nextTick(function () {
this.isRouterAlive = true;
})
},
},
}
</script>
<style>
@import "common/fonts/font.css";
#app {
width: 100%;
height: 100%;
/*min-width: 998px;*/
background: #f5f5f5;
overflow: hidden;
font-family: fz;
}
</style>
@font-face {
font-family: 'fSourceHanSansCN-Regular';
src: url('~@/common/fonts/SourceHanSansCN-Regular.otf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'SourceHanSansCN-Bold';
src: url('~@/common/fonts/SourceHanSansCN-Bold.otf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'SourceHanSansCN-Medium';
src: url('~@/common/fonts/SourceHanSansCN-Medium.otf');
font-weight: normal;
font-style: normal;
}
// import http from '../../config/httpServer'
// import {backToken} from '../../config/env'
import $ from 'jquery'
function keydown() {
$(document).keyup(function (event) {
if (event.keyCode == 13) {
$(".search").trigger("click");
}
});
}
// function getBranch() {
// // 归属网点列表渲染
// $.ajax({
// type: "get",
// url: "bankBranchInfo/getBankBox",
// authType: backToken,
// async:false,
// success: function (res) { //function1()
// console.log(res.data);
// return res.data
// }
// })
// console.log(22);
// http({
// method: 'get',
// url: 'bankBranchInfo/getBankBox',
// authType: backToken
// }).then((res) => {
// // _this.options = res.data.records;
// console.log(res.data);
// return res.data;
// }, (error) => {
// console.log(error)
// }
// )
// }
export const shortcuts = function () {
keydown()
}
<template>
<div class="title_con">
<p class="footer_title">&copy;2018 招商银行武汉分行出品</p>
</div>
</template>
<script>
export default {
data() {
return {
}
},
computed: {},
mounted() {
},
methods: {
},
}
</script>
<style lang="less">
@import '../../style/common';
.footer_title{
text-align: center;
font-size:14px;
font-weight:400;
color:rgba(0,0,0,0.45);
padding-top: 20px;
padding-bottom: 20px;
}
</style>
<template>
<div class="forgetPassword W100 H100">
<div class="content">
<h2>忘记密码</h2>
<p>如果您忘记密码,请您联系相关管理人员</p>
<p>联系电话:13924551212</p>
<p> 邮箱:325346534@zh.com</p>
</div>
</div>
</template>
<script>
export default {
data () {
return {}
},
methods: {
}
}
</script>
<style lang="less" >
@import '../../style/common';
.forgetPassword{
background:url("../../../static/images/pic/bg.png");
border: 1px solid transparent;
.content {
width: 22%;
height: 30%;
margin: 12% auto;
h2{
font-size:20px;
font-weight:500;
color:rgba(0,0,0,1);
text-align: center;
margin-bottom: 7%;
}
p{
font-size:18px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(0,0,0,1);
margin-bottom: 3%;
}
}
}
</style>
<template>
<div class="header_container" style="overflow:hidden;">
</div>
</template>
<script>
</script>
<style>
.header_container{
width: 100%;
height: 64px;
background-color: #dd44;
}
</style>
<template>
<div id="backlogin">
<div class="content">
<h1>虚拟营业厅管理平台</h1>
<h3>账户密码登录</h3>
<el-form id="form" :model="loginForm" :rules="rules" ref="loginForm">
<el-form-item prop="username">
<div class="line">
<img src="../../../static/images/icon/username.png" alt="">
<input type="text" placeholder="账户" v-model="loginForm.username" autofocus clearable>
</div>
</el-form-item>
<el-form-item prop="password">
<div class="line">
<img src="../../../static/images/icon/password.png" alt="">
<input type="password" placeholder="密码" v-model="loginForm.password" @keyup.enter="submitForm" clearable>
</div>
</el-form-item>
<el-form-item>
<div class="line">
<img src="../../../static/images/icon/verifyCode.png" alt="">
<input placeholder="验证码" v-model="loginForm.captcha" clearable>
<img :src="verifyCodeImg" alt="" class="verifyCodeImg">
<img src="../../../static/images/icon/refresh.png" alt="" class="verfyRefesh" @click="getVerifyCode">
</div>
</el-form-item>
<el-form-item prop="rem">
<!--<el-checkbox v-model="checked">自动登录</el-checkbox>-->
<router-link to="/forgetPassword" class="forget-password r-float"><span>忘记密码</span></router-link>
</el-form-item>
<el-form-item>
<el-button class="login" :disabled="flag" type="submit" @click="submitForm">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import { baseUrl } from '@/config/env'
import axios from 'axios'
let i = 0;
export default {
data() {
return {
checked: '',
loginForm: {
username: '',
password: '',
captcha:'',
},
CaptchaId:'',
verifyCodeImg:'',
rules: {
username: [
{required: true, message: '请输入用户名', trigger: 'blur,change'},
],
password: [
{required: true, message: '请输入密码', trigger: 'blur,change'}
]
},
flag:false,
}
},
mounted() {
this.initLogin();
// 获取验证码
this.getVerifyCode()
},
methods: {
getVerifyCode(){
axios({
method: 'get',
// url:'http://localhost:3001/api/verifyCode',
url:`${baseUrl}verifyCode1`,
responseType: 'arraybuffer'
}).then(res => {
this.CaptchaId = res.headers['captchaid'] || ''
this.verifyCodeImg = this.getUserPhoto(res)
})
},
getUserPhoto(res){
let uInt8Array = new Uint8Array(res.data);
let len = uInt8Array.length;
let binaryString = new Array(len);
while (len--) {
binaryString[len] = String.fromCharCode(uInt8Array[len]);
}
let data = window.btoa(binaryString.join(''));
let imageType = 'image/jpeg';
let imageUrl = "data:" + imageType + ";base64," + data
return imageUrl
},
initLogout() {
let vm = this;
let loginDate = vm.$qs.stringify({
username: vm.loginForm.username,
password: vm.loginForm.password,
captcha: vm.loginForm.captcha
});
let headers = {
CaptchaId: this.CaptchaId
}
vm.$https({
method: 'post',
url: 'ajaxLogin',
authType: this.token,
headers:headers
}, loginDate, '' , '' ).then((res) => {
if (res.data.status === 201 || res.data.status === 200) {
localStorage.setItem("checked", this.checked);
/*自动登录状态*/
localStorage.setItem('userId', res.data.employee.id);
/*登录用户*/
localStorage.setItem("backToken", res.data.token);
/*登录用户token签名*/
if (!res.data.employee.avatar || res.data.employee.avatar == "") {
res.data.employee.avatar = "./static/images/pic/usericon.png";
}
localStorage.setItem("bankBranchName", res.data.employee.bankBranchName); /*网点名称*/
localStorage.setItem("roleId", res.data.employee.roleId); /*角色id*/
localStorage.setItem('roleName', res.data.employee.roleName); /*角色名*/
localStorage.setItem("avatar", res.data.employee.avatar); /*头像*/
localStorage.setItem("username", res.data.employee.username); /*用户名*/
localStorage.setItem("bankBranchId", res.data.employee.bankBranchId); /*网点ID*/
localStorage.setItem("menuList", JSON.stringify(res.data.menuList)); /*菜单*/
vm.$message({
type: 'success',
message: res.data.message
});
setTimeout(function () {
vm.$router.push('/indexPage');
vm.flag = false;
}, 1000);
} else {
i = i+1;
vm.$message({
type: 'error',
message: res.data.message,
// message: '用户名或密码错误',
})
if (i >= 3) {
vm.$router.push('/forgetPassword');
i = 0;
return false;
}
this.flag = false;
this.getVerifyCode()
}
}).catch(function (err) {
this.flag = false;
console.log(err);
})
},
submitForm() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
if(!this.flag) {
this.flag = true;
this.initLogout();
}
} else {
this.flag = false;
return false;
}
})
},
initLogin() {
let checked = localStorage.getItem('checked');
if (checked == 'true') {
this.checked = true;
this.autoLogin();
} else {
this.checked = false;
}
},
autoLogin() {
let _this = this;
let backToken = localStorage.getItem('backToken');
if (backToken) {
this.$router.push('/indexPage');
_this.$https({
method: 'get',
url: 'public/authToken',
authType: this.backToken
}).then((res) => {
if (res.data.status == 200) {
_this.$router.push('/indexPage')
}
}, (error) => {
console.log(error)
}
)
}
}
}
}
</script>
<style lang="less">
@import '../../style/common';
#backlogin {
width: 100%;
height: 100%;
background: url("../../../static/images/pic/bg.png");
overflow: hidden;
.content {
width: 360px;
height: 393px;
margin: 10% auto;
h1 {
font-size: 36px;
font-weight: 600;
text-align: center;
color: rgba(24, 144, 255, 1);
font-family: SourceHanSansCN-Bold;
}
h3 {
font-size: 20px;
font-weight: 500;
color: rgba(0, 0, 0, 1);
margin: 8% 0% 5%;
text-align: center;
}
.el-form {
padding: 0px 10%;
.line {
width: 100%;
height: 100%;
border-radius: 4px;
border: 1px solid rgba(217, 217, 217, 1);
background: #fff;
input {
margin-left: 10px;
height: 100%;
width: 85%;
font-size: 18px;
background: transparent;
border: none;
}
::-webkit-input-placeholder { /* WebKit browsers */
font-size: 12px;
color: rgba(192, 196, 204, 1);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size: 12px;
color: rgba(192, 196, 204, 1);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size: 12px;
color: rgba(192, 196, 204, 1);
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
font-size: 12px;
color: rgba(192, 196, 204, 1);
}
img {
float: left;
width: 16px;
height: 16px;
margin: 10px 0 0 6px;
}
.verifyCodeImg{
position: absolute;
right: -160px;
top: -8px;
width: 150px;
height: 40px;
}
.verfyRefesh{
position: absolute;
right: -200px;
width: 22px;
height: 22px;
cursor: pointer;
}
}
input {
width: 100%;
height: 40px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
border: 1px solid rgba(217, 217, 217, 1);
}
.forget-password {
font-size: 14px;
font-weight: 400;
color: rgba(24, 144, 255, 1) !important;
}
}
.el-button {
width: 100%;
height: 40px;
background: rgba(24, 144, 255, 1);
border-radius: 4px;
color: #fff;
}
}
}
</style>
<template>
<div class="header_container" style="overflow:hidden;">
<el-dropdown class="adminlogo r-float H100" @command="handleCommand" trigger="click">
<div class="box">
<span class="el-dropdown-link">
{{loginInf.username}}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="editPwd">修改密码</el-dropdown-item>
<el-dropdown-item command="singout">退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span class="header_icon r-float">
<img class="bell" src="../../../static/images/icon/bell.png" alt="" />
<img :src="loginInf.avatar" class="avator" />
</span>
<el-dialog title="修改密码" class="hotEvent" :visible.sync="editManege" width="30%" :before-close="close">
<el-form :model="form" :rules="Rules" id="ruleo" ref="form" label-position="right" label-width="100px">
<el-form-item label="旧密码:" prop="oldPass">
<el-input type="password" size="small" v-model="form.oldPass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="新密码:" prop="newPass">
<el-input type="password" size="small" v-model="form.newPass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码:" prop="checkPass">
<el-input type="password" size="small" v-model="form.checkPass" auto-complete="off"></el-input>
</el-form-item>
<!--password-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="close">取消</el-button>
<el-button type="primary" size="mini" @click="submitForm">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
var validatePass = (rule, value, callback) => {
if (value == '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.form.newPass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
activeIndex: "",
loginInf: {},
editManege: false,
form: {
oldPass: '',
newPass: '',
checkPass: ''
},
Rules: {
oldPass: [
{required: true, message: '请输入旧密码', trigger: 'blur'}
],
newPass: [
{required: true, message: '请输入新密码', trigger: 'blur'},
{min: 6, message: '密码至少为6个字符', trigger: 'blur'},
{pattern: /^[a-zA-Z0-9_-]{0,20}$/, message: '请设置合格的密码(可用字母,数字,下划线,减号)'}
],
checkPass: [
{required: true, message: '请再次输入密码', trigger: 'blur'},
{validator: validatePass, trigger: 'blur'}
]
},
}
},
mounted() {
this.initData();
},
computed: {},
methods: {
initData () {
let inf={
avatar:'',
username:'',
}
inf.avatar = localStorage.getItem('avatar');
inf.username = localStorage.getItem('username');
this.loginInf=inf;
},
handleCommand(command) {
command == 'singout' ? this.singout() : this.editPwd();
},
singout() {
let vm = this;
vm.$https({
url: `logout?token=${localStorage.getItem('backToken')}`,
method: 'get',
}).then(res=>{
vm.removeSession()
if (res.status == 200) {
vm.$message({
type: 'success',
message: '退出登录!'
});
setTimeout(function () {
vm.$router.push('/');
},500);
}
})
},
removeSession () {
if (localStorage.getItem('backToken')) {
localStorage.clear();
}
},
editPwd() {
let _this = this;
for (let key in _this.form) {
_this.form[key] = null;
}
this.editManege = true;
},
submitForm() {
let _this = this;
let searchObj = {
"oldPassWord": _this.form.oldPass,
"password": _this.form.newPass
};
_this.$refs.form.validate((valid) => {
if (valid) {
_this.$https({
url: 'employee/editPwd',
method: 'put',
authType: this.backToken
}, _this.$qs.stringify(searchObj))
.then((res) => {
if (res.status == 200) {
_this.$message({
type: 'success',
message: res.data.message
});
_this.close();
_this.removeSession();
setTimeout(function () {
_this.$router.push('/');
},500);
} else {
_this.$message({
type: 'error',
message: res.data.message
});
}
}, (error) => {
_this.$message({
type: 'error',
message: error
});
}
)
} else {
return false;
}
});
},
close() {
this.editManege = false;
this.$refs['form'].resetFields();
},
}
}
</script>
<style lang="less">
@import '../../style/common';
.header_container {
width: 100%;
height: 63px;
background-color: #dd44;
.header_icon{
line-height:63px;
margin-right:20px;
img{
vertical-align: middle;
&.bell{margin-right:25px;}
&.avator{background-color:#1D6CAD;border-radius:50%;width:24px; height: 24px;}
}
}
.box {
cursor: pointer;
float: right;
margin-right: 25px;
margin-top: 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
/*!*弹窗*!*/
.el-dialog{
width: 600px;
background:rgba(255,255,255,1);
box-shadow:0px 4px 12px 0px rgba(0,0,0,0.2);
border-radius:4px;
.el-dialog__header{
padding: 15px;
border-bottom: 1px solid rgba(0,0,0,0.09);
}
.el-dialog__body{
padding: 0px 20px;
border: 1px solid transparent;
margin-top: 10px;
.form_box{
padding-bottom: 40px;
.el-form {
margin-bottom: 20px;
.el-form-item{
margin: 10px 50px 20px;
.el-form-item__content{
width: 280px;
}
}
.el-input{
width: 100%;
}
}
.dialog-footer{
border-top: 1px solid rgba(0,0,0,0.09);
padding-top: 8px;
.el-button{
margin-right: 10px;
padding: 8px 16px;
}
}
}
}
}
}
.el-table::before {
background-color: transparent;
}
</style>
<template>
<div>
<script :id=id type="text/plain"></script>
</div>
</template>
<script>
export default {
name: 'UE',
data () {
return {
editor: null
}
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
},
id: {
type: String
},
},
mounted() {
const _this = this;
this.editor = UE.getEditor(this.id, this.config); // 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。
});
},
methods: {
getUEContent() { // 获取内容方法
return this.editor.getContent()
},
getUEContentTxt() { // 获取纯文本内容方法
return this.editor.getContentTxt()
},
setUEContentTxt(param){
this.editor.setContent(param); // 确保UE加载完成后,放入内容。
}
},
destroyed() {
this.editor.destroy();
},
watch:{
// 'defaultMsg' (cur,old){
// this.defaultMsg = cur
// }
}
}
</script>
<template>
<div>
<script :id=id type="text/plain"></script>
</div>
</template>
<script>
export default {
name: 'UE',
data () {
return {
editor: null
}
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
},
id: {
type: String
},
},
mounted() {
const _this = this;
this.editor = UE.getEditor(this.id, this.config); // 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。
});
},
methods: {
getUEContent() { // 获取内容方法
return this.editor.getContent()
},
getUEContentTxt() { // 获取纯文本内容方法
return this.editor.getContentTxt()
},
setUEContentTxt(param){
this.editor.setContent(param); // 确保UE加载完成后,放入内容。
}
},
destroyed() {
this.editor.destroy();
},
watch:{
// 'defaultMsg' (cur,old){
// this.defaultMsg = cur
// }
}
}
</script>
/**
* Created by supervisor on 2018/2/28.
*/
let baseUrl="";
let weUrl = "";
let basefileUrl="";
let routerMode='history';
let backToken = "back";
let frontToken = "front";
let ProUrl = ""
let appHomeUrl = ""
let skipLinkUrl = ""
getBaseUrl();
function getBaseUrl(){
$.ajax({
url: "./static/json/api.json",
async: false,
success: function(data){
ProUrl = data.baseUrl || (window.location.protocol + '//' + window.location.host + '/');
appHomeUrl = data.appHomeUrl;
skipLinkUrl = data.skipLinkUrl;
}
})
}
if(process.env.NODE_ENV === 'development'){
baseUrl=ProUrl
}else if(process.env.NODE_ENV === 'production'){
baseUrl=ProUrl
}
export {
baseUrl,
weUrl,
appHomeUrl,
skipLinkUrl,
backToken,
frontToken,
basefileUrl,
routerMode
}
// process.env 是读取系统环境变量,在node命令窗口启动时设置相关的环境变量,NODE_ENV=development node来启动命令窗口
/**
* Created by supervisor on 2017/11/3.
*/
// import Vue from 'vue'
import axios from 'axios'
// import qs from 'qs'
import store from '../store'
import {Message, MessageBox, Loading} from 'element-ui';
import router from '../router'
import {baseUrl} from './env'
import MyLocalStorage from './myLocalStorage'
// Vue.use($msg)
//axios 拦截器 请求时的拦截
axios.interceptors.request.use(config=>{
// 发送请求之前做一些处理
store.commit('UPDATE_LOADING',true) //显示loading
// config.headers = {
// 'Content-Type': 'application/json'
// };
return config
},error => {
// 当请求异常时做一些处理
return new Promise.reject(error)
})
// 响应时拦截
axios.interceptors.response.use(response=>{
// 返回响应时做一些处理
return response
},error=>{
// 当响应异常时做一些处理
return Promise.resolve(error.response)
})
// let isOpen=false;
function errorState(status, data) {
store.commit('UPDATE_LOADING',false)
if(status === 500 && data.message.indexOf("token invalid")!==-1){
// if(status == 500 && data == "sessionTimeOut"){
if(store.state.isOpen){
return ;
}
store.commit('setIsOpen',true)
MessageBox.alert('您的登录过期,请重新登录!', '提示', {
confirmButtonText: '确定',
callback: () => {
//清除用户信息
localStorage.removeItem('backToken')
localStorage.removeItem('userId')
router.push({path: '/',query: {redirect: router.history.current.fullPath}})
}
});
}else if(status===401){
MessageBox.alert('您的用户权限已被禁用,请联系管理员!', '提示', {
confirmButtonText: '确定',
callback: () => {
//这个时候点击确定后清除用户信息
localStorage.removeItem('backToken')
localStorage.removeItem('userId')
router.push({path: '/',query: {redirect: router.history.current.fullPath}})
store.commit('isAdminInfo',false);
}
});
} else if (status === 500 && data.message.indexOf("not have permission") !== -1) {
// router.push({path: 'page403'})
Message.error("抱歉,你无权访问该页面!")
}else if (!data) {
Message.error("网络出小差咯~")
}
}
function successState(res) {
store.commit('UPDATE_LOADING',false) //隐藏loading
}
const httpServer = (opts,data,file,timeout)=>{
//如果是不需要登录就可以访问的接口 需要设置opts.open
let Public = {} //公共参数
let httpDefaultOpts={
method: opts.method,
url: baseUrl + opts.url,
timeout:timeout?timeout:20000,
params:Object.assign(Public,data),
data:data,
headers: opts.headers || {},
};
httpDefaultOpts.headers["Access-control-Allow-Origin"] = "*";
httpDefaultOpts.headers["Access-Control-Allow-Headers"] = "content-type,x-requested-with";
let authToken="";
if(opts.authType && opts.authType!=""){
// Authorization
if(opts.authType==="back"){
authToken=localStorage.getItem('backToken');
}else if(opts.authType==="front"){
authToken = localStorage.getItem("token") || MyLocalStorage.Cache.get('token');
}
httpDefaultOpts.headers["Authorization"]=authToken
}
if(opts.method==='get'){
delete httpDefaultOpts.data
httpDefaultOpts.params.timestamp_static = new Date().getTime();
// httpDefaultOpts.params.roleId = localStorage.getItem('roleId');
// httpDefaultOpts.params.bankBranchId = localStorage.getItem('bankBranchId');
}else{
delete httpDefaultOpts.params
if(file){
httpDefaultOpts.data=data;
// httpDefaultOpts.headers["X-Requested-With"]="multipart/form-data";
}
}
let promise = new Promise(function (resolve,reject) {
let loadingInstance = Loading.service({
fullscreen: true,
lock: true,
background: 'rgba(0,0,0,.5)',
text: 'Loading',
spinner: 'el-icon-loading'
})
let markIndex= setTimeout(function () {
loadingInstance.close();
},10000)
axios(httpDefaultOpts).then((res)=>{
loadingInstance.close();
clearTimeout(markIndex)
successState(res)
if(res){
resolve(res)
errorState(res.status, res.data)
}
}).catch((response)=>{
loadingInstance.close();
clearTimeout(markIndex)
console.log("catch")
if(response && response.response && response.response.status && response.response.data){
errorState(response.response.status, response.response.data)
}
reject(response)
if(response.response.data){
if(response.response.data.message){
Message.error(response.response.data.message)
}else{
Message.error("操作失败!")
}
}
})
})
return promise
}
export default httpServer
/**
* Created by supervisor on 2018/5/25.
*/
//定时 缓存
var MyLocalStorage ={
Cache : {
/**
* 总容量5M
* 存入缓存,支持字符串类型、json对象的存储
* 页面关闭后依然有效 ie7+都有效
* @param key 缓存key
* @param stringVal
* @time 数字 缓存有效时间(秒) 默认60s
* 注:localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。不能控制缓存时间,故此扩展
* */
put : function(key,stringVal,time){
try{
if(!localStorage){return false;}
if(!time || isNaN(time)){time=60;}
var cacheExpireDate = (new Date()-1)+time*1000;
var cacheVal = {val:stringVal,exp:cacheExpireDate};
localStorage.setItem(key,JSON.stringify(cacheVal));//存入缓存值
//console.log(key+":存入缓存,"+new Date(cacheExpireDate)+"到期");
}catch(e){}
},
/**获取缓存*/
get : function (key){
try{
if(!localStorage){return false;}
var cacheVal = localStorage.getItem(key);
var result = JSON.parse(cacheVal);
var now = new Date()-1;
if(!result){return null;}//缓存不存在
if(now>result.exp){//缓存过期
this.remove(key);
return "";
}
//console.log("get cache:"+key);
return result.val;
}catch(e){
this.remove(key);
return null;
}
},/**移除缓存,一般情况不手动调用,缓存过期自动调用*/
remove : function(key){
if(!localStorage){return false;}
localStorage.removeItem(key);
},/**清空所有缓存*/
clear : function(){
if(!localStorage){return false;}
localStorage.clear();
}
}//end Cache
}
export default MyLocalStorage
This diff is collapsed.
This diff is collapsed.
/**
* Created by cp on 2016/5/3.
*/
//十六进制颜色值域RGB格式颜色值之间的相互转换
//-------------------------------------
//十六进制颜色值的正则表达式
function ColorChange() {
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
/*RGB颜色转换为16进制*/
String.prototype.colorHex = function(){
var that = this;
if(/^(rgb|RGB)/.test(that)){
var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
var strHex = "#";
for(var i=0; i<aColor.length; i++){
var hex = Number(aColor[i]).toString(16);
if(hex === "0"){
hex += hex;
}
strHex += hex;
}
if(strHex.length !== 7){
strHex = that;
}
return strHex;
}else if(reg.test(that)){
var aNum = that.replace(/#/,"").split("");
if(aNum.length === 6){
return that;
}else if(aNum.length === 3){
var numHex = "#";
for(var i=0; i<aNum.length; i+=1){
numHex += (aNum[i]+aNum[i]);
}
return numHex;
}
}else{
return that;
}
};
//-------------------------------------------------
/*16进制颜色转为RGB格式*/
String.prototype.colorRgb = function(){
var sColor = this.toLowerCase();
if(sColor && reg.test(sColor)){
if(sColor.length === 4){
var sColorNew = "#";
for(var i=1; i<4; i+=1){
sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for(var i=1; i<7; i+=2){
sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
}
return "RGB(" + sColorChange.join(",") + ")";
}else{
return sColor;
}
};
/*16进制颜色转为RGB格式*/
String.prototype.colorRgba = function(al){
var sColor = this.toLowerCase();
if(sColor && reg.test(sColor)){
if(sColor.length === 4){
var sColorNew = "#";
for(var i=1; i<4; i+=1){
sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for(var i=1; i<7; i+=2){
sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
}
return "rgba(" + sColorChange.join(",") +","+al+ ")";
}else{
return sColor;
}
};
}
export {ColorChange}
/**
* Created by cp on 2016/11/22.
*/
import Style from 'ol/style/Style';
import Icon from 'ol/style/Icon';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Circle from 'ol/style/Circle';
import SnapGuides from 'ol-ext/interaction/SnapGuides';
import Collection from 'ol/Collection';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {OSM, Vector as VectorSource} from 'ol/source';
import Modify from 'ol/interaction/Modify';
import Draw, {createRegularPolygon, createBox} from 'ol/interaction/Draw';
import CircleStyle from 'ol/style/Circle';
//有一些类对外放出的不是一个对象,二是一个个的方法如
// import condition from 'ol/events/condition'; 错误的引用
import {click, pointerMove, altKeyOnly,shiftKeyOnly,singleClick} from 'ol/events/condition';//正确的引用
// var source = new VectorSource({wrapX: false});
function startDraw(mainMap,vueThis){
let map=mainMap.getMap();
let ol=mainMap.ol;
var tempObj={};
var drawFeatures = new Collection();
var featureOverlay = new VectorLayer({
source: new VectorSource({features: drawFeatures})
});
featureOverlay.setMap(map);
var modifyFeatures = new Collection();
//编辑
var modify = new Modify({
features: modifyFeatures,
deleteCondition: function(event) {
return shiftKeyOnly(event) &&
singleClick(event);
}
});
map.addInteraction(modify);
function setEditFeature(fes){
modifyFeatures.clear();
// for(var i=0;i<fes.length;i++){
var tempf= fes;
var oldstyle=tempf.getStyle();
tempf.set("oldStyle",oldstyle);
var oldGeom=tempf.getGeometry().clone();
tempf.set("oldGeom",oldGeom);
modifyFeatures.push(tempf);
// }
}
tempObj.setEditFeature=setEditFeature;
function remoAllEditDraw(calFunc,okFunc){
var drarr=drawFeatures.getArray();
var modifyArr=modifyFeatures.getArray();
if(drarr.length>0||modifyArr.length>0){
}else{
if(okFunc){
okFunc();
}
}
}
tempObj.remoAllEditDraw=remoAllEditDraw;
function cleanModifyOrDraw(){
clanLayer();
cleanModifyFunc();
removeDrawFunc();//清除上一次绘制的配置
}
tempObj.cleanModifyOrDraw=cleanModifyOrDraw;
function cleanAllFeature(succ){
showAlertW('确认清除?',null,function(){
cleanModifyOrDraw();
if(succ){
succ();
}
})
}
tempObj.cleanAllFeature=cleanAllFeature;
function showAlertW(count,calFunc,okFunc){
//删除活动事件
vueThis.$confirm(count, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
if(okFunc){
okFunc();
}
}).catch(() => {
if(calFunc){
calFunc();
}
});
}
function getModifyFeature(){
if(modifyFeatures){
return modifyFeatures.getArray() ;
}
return null;
}
tempObj.getModifyFeature=getModifyFeature;
function cleanModifyFunc(){
for(var kk=0;kk<modifyFeatures.getArray().length;kk++){
var f1=modifyFeatures.getArray()[kk];
var olsty=f1.get("oldStyle");
if(olsty){
f1.setStyle(olsty);
}
var oldGeom = f1.get("oldGeom");
if(oldGeom){
f1.setGeometry(oldGeom);
}
}
modifyFeatures.clear();
}
//停止编辑
function remoaveEditFeature(succ){
if(modifyFeatures&&modifyFeatures.getArray().length>0){
showAlertW('存在未保存的编辑,确认不保存?',null,function(){
cleanModifyFunc();
if(succ){
succ();
}
});
}
}
tempObj.remoaveEditFeature=remoaveEditFeature;
//绘制
var draw;
function clanLayer(){
featureOverlay.getSource().clear();
}
tempObj.clanLayer=clanLayer;
//Point,点 LineString线 Polygon 面 Square 矩形 Circle 圆 Box 盒子
function addInteraction(type,func) {
var drarr=drawFeatures.getArray();
var modifyArr=modifyFeatures.getArray();
if(drarr.length>0||modifyArr.length>0){
//绘制的时候 现在和地图中的事件添加 有冲突 导致清除之后 地图上的还有开始绘制的东西 ,后面想办法解决一下
showAlertW('存在未保存的编辑,确认不保存?',null,function(){
startDrawFunc(type);
if(func){
func();
}
});
}else{
startDrawFunc(type);
}
}
tempObj.addInteraction=addInteraction;
let geometryFunction;
function startDrawFunc(type){
removeDrawFunc();//清除上一次绘制的配置
cleanModifyFunc();//清除修改的部分
featureOverlay.getSource().clear();
if(type==vueThis.SQUARE||type==vueThis.BOX){
if(type==vueThis.SQUARE){
geometryFunction = createRegularPolygon(4);
}else{
geometryFunction = createBox();
}
//都是以原型的来绘制
draw = new Draw({
features: drawFeatures,
type:vueThis.DRAW_CIRCLE,
geometryFunction: geometryFunction
});
}else{
let tempType="";
if(type==vueThis.DRAW_TEXT){
tempType=vueThis.POINT_TYPE;
}else{
tempType=type;
}
draw = new Draw({
features: drawFeatures,
type:tempType
});
}
if(type==vueThis.POLYGON_TYPE||type==vueThis.LINE_STRING_TYPE){
var snapi = new SnapGuides();// {options} 参数可以进行设置
snapi.setDrawInteraction(draw);
map.addInteraction(snapi);
}
draw.on("drawend",function(event){
var drawF= event.feature;
modifyFeatures.push(drawF);
addFeatureFunc(drawF,type);
removeDrawFunc();
});
map.addInteraction(draw);
}
function setStyleInit(data,type){
//点
if(type==vueThis.POINT_TYPE){
vueThis.pointStyle=data;
}else if(type==vueThis.LINE_STRING_TYPE){
//线
vueThis.lineStyle=data;
}else{
vueThis.polygonStyle=data;
}
}
function addFeatureFunc(fe,type){
var data={};
data.strokeColor="#0099ff";
data.strokeWeight=3;
data.strokeAlpha=1
data.fillAlpha=0.7;
data.fillColor="#ffffff";
data.fileRadio=7;
data.imageSrc=null;
data.lineDash=1;
fe.set("featureType",type);
setStyleInit(data,type);
fe.on('singleclick', function(event){
if(callFunc){
callFunc(type,fe,event);
}
});
fe.set('singleclick',true);//标识该点存在点击事件
}
var callFunc=null;
function setCilckCallBack(callFuncItem){
callFunc=callFuncItem
}
tempObj.setCilckCallBack=setCilckCallBack;
function getExistEditFeature(){
var drarr=drawFeatures.getArray();
var modifyArr=modifyFeatures.getArray();
if(drarr.length>0||modifyArr.length>0){
return true;
}
return false;
}
tempObj.getExistEditFeature=getExistEditFeature;
//移除绘制
function removeDrawFunc(){
if(draw){
map.removeInteraction(draw);
}
}
tempObj.removeDrawFunc=removeDrawFunc;
return tempObj;
}
export {startDraw}
import {addProjection, addCoordinateTransforms, transform} from 'ol/proj';
import Point from 'ol/geom/Point';
import Feature from 'ol/Feature';
import {Tile as TileLayer, Vector as VectorLayer,Heatmap} from 'ol/layer';
import {OSM, Vector as VectorSource} from 'ol/source';
function startDataClass(mainMap){
let obj={};
// 设置参数
mainMap.setMaxMinZoom(4, 18);// 设置地图的显示级别范围
mainMap.startZoom = 0;// 设置地图的初始化显示级别
mainMap.init('map');
mainMap.setCenterAndZoom( [106.9370411668,27.7318344381],13); //修改地图中心点
let map=mainMap.getMap();
function createFe(data){
var n1=parseFloat(data.lon);
var n2=parseFloat(data.lat);
if(!n1||!n2){
return null;
}
var pa1=[];
pa1.push([n1,n2]);
var p1;
p1= new Point(pa1[0]);
p1.transform('EPSG:4326', 'EPSG:900913');
var f1= new Feature({
geometry: p1
});
return f1;
}
let heatmap;
function createHeatMap(data){
var source= new VectorSource();
for (let i=0;i<data.length;i++){
let f1=createFe(data[i]);
if(f1){
source.addFeature(f1);
}
}
//热度图
var blur = 15;
var radius = 5;
heatmap = new Heatmap({
source:source,
blur: parseInt(15, 10),
radius: parseInt(5, 10)
});
heatmap.set("name","heatmap");
heatmap.getSource().on('addfeature', function(event) {
var name = event.feature.get('name');
var magnitude = parseFloat(name.substr(2));
event.feature.set('weight', magnitude - 5);
});
heatmap.setVisible(false);
map.addLayer(heatmap);
}
// 弹出气泡方法 事件 obj 数据 layerName 图层名称
function popupWindow(evt, feature, layerName) {
let obj=feature.get("data");
if(!obj){
obj=feature;//说明是外部被动调用
}
var coordinate;
if(!evt){
//这时候需要定位 被动显示
// var coordinate = evt.event.coordinate;
var endCenter4326 = [obj.lon,obj.lat];
coordinate=transform(endCenter4326, 'EPSG:4326','EPSG:3857')
mainMap.setCenterAndZoom( endCenter4326,null);
}else{
//点击地图触发
coordinate = evt.event.coordinate;
}
mainMap.overlay.setPosition(transform(coordinate, 'EPSG:4326','EPSG:3857'));
}
obj.popupWindow=popupWindow;
return obj;
}
export {startDataClass}
This diff is collapsed.
/**
地图范围
*/
var mapMaxExtent=[-2.003750834E7, -2.003750834E7, 2.003750834E7,2.003750834E7];
/**
地图投影
*/
var mapPro="EPSG:900913";
/**
地图数据集
*/
var mapResoultion=[ 156543.03390625, 78271.516953125,39135.7584765625,19567.87923828125,9783.939619140625,4891.9698095703125 ,2445.9849047851562
,1222.9924523925781,611.4962261962891,305.74811309814453,152.87405654907226,76.43702827453613,38.218514137268066,19.109257068634033,
9.554628534317017,4.777314267158508,2.388657133579254,1.194328566789627,0.5971642833948135,0.2985821416974068,0.1492910708487034,0.0746455354243517,0.0373227677121759];
/**
创建地图
*/
import Map from 'ol/Map';
import View from 'ol/View';
import Tile from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import {addProjection, addCoordinateTransforms, transform} from 'ol/proj';
import ZoomSlider from 'ol/control/ZoomSlider';
import FullScreen from 'ol/control/FullScreen';
import Overlay from 'ol/Overlay';
import {getCenter,containsExtent,intersects} from 'ol/extent.js';
import {defaults as defaultControls, ZoomToExtent} from 'ol/control.js';
function createMap(){
let obj={};
var map;
let overlay ;
/**
创建图层
*/
function createBaseLayerUrl(layerName,ex,url){
var getLayer = new Tile({
zoomOffset : 3,
extent: ex,
projection:mapPro,
type : 'base',
title : layerName,
source: new XYZ({
tileSize:[256,256],
url:url
})
});
getLayer.set("name",layerName);
return getLayer;
}
let limitExtent=null;
function setLimitExtent(extent){
limitExtent=extent
}
obj.setLimitExtent=setLimitExtent;
var limitCenter=null;
function setLimitCenter(center){
limitCenter=center
}
obj.setLimitCenter=setLimitCenter;
function limtMoveFunc(){
map.on('moveend', function(event) {
let curentCenter=[map.getView().getCenter()[0],map.getView().getCenter()[1]];
let endExtent= map.getView().calculateExtent(map.getSize());
if(limitCenter){
let isChange=false;
if(limitCenter[0]<endExtent[0]||limitCenter[0]>endExtent[2]){
curentCenter[0]=limitCenter[0];
isChange=true;
}
if(limitCenter[1]<endExtent[1]||limitCenter[1]>endExtent[3]){
curentCenter[1]=limitCenter[1];
isChange=true;
}
if(isChange){
map.getView().animate({center: curentCenter});
}
}else if(limitExtent){
let endCenter= getCenter(limitExtent);
//如果包含则没有关系
if(intersects(endExtent,limitExtent)){
}else{
map.getView().animate({center: endCenter});
}
}
});
}
/**
添加地图事件
*/
function addMapEvent(){
//添加限制区域
limtMoveFunc();
//单击 并获取feature的属性
map.on('singleclick', function(event) {
var l1=event.coordinate;
var l2=transform(l1,mapPro, 'EPSG:4326')
var isShow=false;
closePopupWindow(); //点击的如果是地图的话 关闭弹出框 先把他关闭掉
map.forEachFeatureAtPixel(event.pixel, function(feature, layer){
// 为选中的到的feature发送自定义的mousemove消息
if(isShow){
return;
}
let canClick=feature.get('singleclick');
if(feature&&canClick){
feature.dispatchEvent({type: 'singleclick', event: event});
isShow=true;
}else{
}
});
});
var target = map.getTarget();
var jTarget = typeof target === "string" ? $("#"+target) : $(target);
var lastTarget;
//map移动事件
map.on('pointermove', function(event){
if (event.dragging) {
return;
}
var hit=false;
var tempe = map.forEachFeatureAtPixel(event.pixel, function (feature, layer) {
return feature;
});
if(tempe){
hit=true;
}
if(tempe){
tempe.dispatchEvent({type: 'onMouseMoveOver', event: event});
lastTarget=tempe;
}else if(lastTarget){
lastTarget.dispatchEvent({type: 'onMouseMoveOut', event: event});
lastTarget=null;
}
if (hit) {
jTarget.css("cursor", "pointer");
} else {
jTarget.css("cursor", "");
}
});
map.getViewport().addEventListener('mouseout', function(evt) {
jTarget.css("cursor", "");
});
//地图改变事件 地图移动以及地图 中心点改变
map.on('moveend', function(event) {
if(zoomFunc){
var cc3857=map.getView().getCenter();
var t1=[cc3857[0],cc3857[1]];
zoomFunc(transform(t1,mapPro, 'EPSG:4326'),map.getView().getZoom());
}
});
}
var zoomFunc;
// 地图移动方法
function setMapChangeFunc(callFunc){
zoomFunc=callFunc;
}
obj.setMapChangeFunc=setMapChangeFunc;
/**
设置地图中心点以及级别 setCenterAndZoom([116.7,39.1],18);
*/
function setCenterAndZoom(lonlat,zoom){
if(lonlat){
map.getView().setCenter(transform( lonlat, 'EPSG:4326', 'EPSG:3857'));
}
if(zoom){
map.getView().setZoom(zoom)
}
}
/**
最大最小级别
*/
var maxResolution=611.4962261962891;
var minResolution=0.0746455354243517;
function setMaxMinZoom(minL,maxL){
if(mapResoultion[minL]){
maxResolution=mapResoultion[minL]
}
if(mapResoultion[maxL]){
minResolution=mapResoultion[maxL]
}
}
//设置最大最小级别
obj.setMaxMinZoom=setMaxMinZoom;
var startZoom=5;
//设置当前缩放级别
function setStartZoom(value){
startZoom=value;
}
obj.setStartZoom=setStartZoom;
/**
设置中心点
*/
var startCenter= [0, 0];
function setStartCenter(value){
startCenter=value;
}
obj.setStartCenter=setStartCenter;
/**
初始化方法
*/
function init(targetStr) {
map = new Map({
layers : [
],
target: targetStr,
controls: defaultControls({
attributionOptions: ({
collapsible: false
})
}),
view: new View({
center: transform(startCenter, 'EPSG:4326', mapPro),
zoom:startZoom,
minZoom: 8,
maxZoom: 13,
projection:mapPro,
// maxResolution:maxResolution,
// minResolution:minResolution//0.2985821416974068
})
});
var zoomslider = new ZoomSlider();
map.addControl(zoomslider);
map.addControl(new FullScreen());
//弹出气泡
var container = document.getElementById('popup');
var closer = document.getElementById('popup-closer');
closer.onclick = function() {
closePopupWindow();
closer.blur();
return false;
}
overlay= new Overlay(/** @type {olx.OverlayOptions} */ ({
element: container,
autoPan: false,
autoPanAnimation: {
duration: 250
}
}));
map.addOverlay(overlay);
obj.overlay=overlay;
addMapEvent();
}
function closePopupWindow(){
overlay.setPosition(undefined);
}
obj.closePopupWindow=closePopupWindow;
//恢复地图初始窗台 rezoom boolean 是否恢复地图初始级别,reCenter 是否恢复地图中心点 boolean
function recovery(reZoom,reCeter){
if(reCeter){
map.getView().setCenter(transform( startCenter, 'EPSG:4326', 'EPSG:3857'));
}
if(reZoom){
map.getView().setZoom(startZoom)
}
}
//恢复初始化方法
obj.recovery=recovery;
//设置中心点和级别
obj.setCenterAndZoom=setCenterAndZoom;
obj.init=init;
function getMap(){
return map;
}
obj.getMap=getMap;
//绘制多边形
return obj;
}
//新增
export {createMap}
/**
* Created by cp on 2018/7/2.
*/
// 定义类
class LayerFuncServer {
constructor(vueThis) {
this.vm = vueThis;//类中变量
}
//类中函数
getLayerByMapId(mapId,succFunc,failFunc){
var param=this.getSearchQuery();
let vm = this.vm;
var tempToken =this.token;
vm.$https({
url: 'layer/getAllLayerByMapId',
method: 'get',authType:tempToken
}, param).then((res) => {
if(succFunc){
succFunc(res);
}
}, (error) => {
vm.$message({message: res.data.message, type: 'error'});
if(failFunc){
failFunc();
}
})
}
//获取当前查询参数
getSearchQuery(){
let searchObj = {
}
if(this.mapId){
searchObj.mapId=this.mapId;
}
return searchObj
}
setMapId(tempMapId){
this.mapId=tempMapId;
}
setToken(tempToken){
this.token=tempToken;
}
deleteLayer(layerId,succFunc,failFunc){
let vm=this.vm;
var tempToken =this.token;
//删除活动事件
vm.$confirm('此操作将删除该图层, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
vm.$https({
url:'/layer/delete?id='+layerId,
method:'delete',authType:tempToken,
},{})
.then((res) => {
let data=res.data;
//重新查询数据
if(res.data.status==200||res.data.status==201||res.data.status==203||res.data.status==204){
vm.$message({
type: 'success',
message: '删除成功!'
});
if(succFunc){
succFunc();
}
}else {
vm.$message({
type: 'fail',
message: data
});
}
},(error) => {
vm.$message({
type: 'fail',
message: "删除用户失败!"+error.response.data
});
}
)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
addLayer(searchObj,succFunc,failFunc) {
var vm= this.vm;
if(!searchObj.mapId){
searchObj.mapId=this.mapId;
}
var param= vm.$querystring.stringify(searchObj);
var tempToken =this.token;
if(searchObj.id&&searchObj.id!=""){
vm.$https({
url:'/layer/edit',
method:'put',authType:tempToken,
},param)
.then((res) => {
if(succFunc){
succFunc(res);
}
}, (error) => {
vm.$message({message: error.data.message, type: 'error'});
if(failFunc){
failFunc(error);
}
}
)
}else{
vm.$https({
url:'/layer/add',
method:'post',authType:tempToken,
}, param)
.then((res) => {
if(succFunc){
succFunc(res);
}
}, (error) => {
vm.$message({message: error.data.message, type: 'error'});
if(failFunc){
failFunc(error);
}
}
)
}
}
}
//静态变量
// Point.para = 'Allen';
export {LayerFuncServer};
/**
* Created by cp on 2016/8/25.
*/
var mapResoultion=[ 156543.03390625, 78271.516953125,39135.7584765625,19567.87923828125,9783.939619140625,4891.9698095703125 ,2445.9849047851562
,1222.9924523925781,611.4962261962891,305.74811309814453,152.87405654907226,76.43702827453613,38.218514137268066,19.109257068634033,
9.554628534317017,4.777314267158508,2.388657133579254,1.194328566789627,0.5971642833948135,0.2985821416974068,0.1492910708487034,0.0746455354243517,0.0373227677121759];
import WKT from 'ol/format/WKT';
import Icon from 'ol/style/Icon';
import CircleStyle from 'ol/style/Circle';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Text from 'ol/style/Text';
import Circle from 'ol/geom/Circle';
import Feature from 'ol/Feature';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {OSM, Vector as VectorSource} from 'ol/source';
function BaseLayer(map,maxL,minL,layerName,vueThis){
var map =map;
var obj={};
let layerId=layerName;
var maxResolution=611.4962261962891;
var minResolution=0.0373227677121759;
if(mapResoultion[maxL]){
maxResolution=mapResoultion[maxL]
}
if(mapResoultion[minL]){
minResolution=mapResoultion[minL]
}
var pLayer;
var pSource;
//面的图层
pLayer=getLyaersByName(layerName)
if(pLayer){
pSource=pLayer.getSource();
}
if(!pLayer){
pSource = new VectorSource();
pLayer = new VectorLayer({
zIndex:10,
id:layerName,
source: pSource,
minResolution:minResolution,
maxResolution:maxResolution
});
pLayer.set("name",layerName);
map.addLayer(pLayer);
}
function clean(){
pSource.clear();
}
obj.clean=clean;
function getLayer(){
return pLayer;
}
obj.getLayer=getLayer;
function addFeatureArr(dataArr){
$(dataArr).each(function(i,val) {
addfeature(val);
});
}
obj.addFeatureArr=addFeatureArr;
function getFeatureById(tempId){
var features=pSource.getFeatures();
var reArr=[];
for(var i=0;i<features.length;i++){
var f1=features[i];
var currId= f1.getId();
if(currId==tempId){
reArr.push(f1);
}
}
return reArr;
}
obj.getFeatureById=getFeatureById;
function removeFeatureById(tempid){
var reArr=[];
reArr=getFeatureById(tempid);
$(reArr).each(function(k,val) {
pSource.removeFeature(val);
})
}
obj.removeFeatureById=removeFeatureById;
//WKT转换
let wktFormat = new WKT();
function addfeature(data){
if(data.coordinate){
data.wkt=data.coordinate;
}
if(!data.wkt){
return ;
}
let feature ;
let styleObj={};
// {"strokeColor":"#F8FAFB","strokeWeight":9,"strokeAlpha":0.51,"fillAlpha":0.7,"fillColor":"#994B4B","fileRadio":18,"imageSrc":null,"lineDash":1,"type":"Polygon"}
data.isPoint=false;
feature = wktFormat.readFeature(data.wkt, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
if(data.type==vueThis.POINT_TYPE){
data.isPoint=true;
styleObj.icon=data.imageUrl;
styleObj.width=data.width;
styleObj.hight=data.hight;
} else{
styleObj=JSON.parse( '{"strokeColor":"#F8FAFB","strokeWeight":2,"strokeAlpha":0.51,"fillAlpha":0.7,"fillColor":"#994B4B","fileRadio":18,"imageSrc":null,"lineDash":1,"type":"Polygon"}');
}
feature.setId(data.id);//存数据库中的ID feature如果是从数据库中读取此ID必须有,不然会出现编辑错误
if(data.maxZoom){
feature.set("maxZoom",data.maxZoom);
}
data.layerId=layerId;
feature.set("data",data,false);//data改变不触发事件
feature.setStyle( getStyle(styleObj,data.isPoint));
pSource.addFeature(feature);
featureAddevent(feature);
}
//图层点击的回调方法
var clickCallBackFunc;
function setCallbackFunc(fun){
clickCallBackFunc=fun;
}
obj.setCallbackFunc=setCallbackFunc;
function featureAddevent(f1){
f1.on('singleclick', function(event){
//添加鼠标点击事件的方法
clickCallBackFunc(event,f1,layerName);
});
f1.set('singleclick',true);//标识改点存在点击事件
f1.on('onMouseOver', function(event){
//添加鼠标点击事件的方法
});
f1.on('onMouseOut', function(event){
//添加鼠标点击事件的方法
});
f1.on('onMouseMoveOver', function(event){
//添加鼠标点击事件的方法
if(tootipFunc){
tootipFunc(event,f1,layerName);
}
});
}
obj.addfeature=addfeature;
var tootipFunc;
function setShowTootip(func){
tootipFunc=func;
}
obj.setShowTootip=setShowTootip;
//面的样式
//面的样式
function getStyle(styleData,isPoint){
if(styleData.fillColor){
styleData.fillColor = styleData.fillColor.colorRgba(styleData.fillAlpha);
}
if(styleData.strokeColor){
styleData.strokeColor = styleData.strokeColor.colorRgba(styleData.strokeAlpha);
}
var tempPointStyle;
//如果是点;
let drawStyle;
if(isPoint){
if(styleData.icon&&styleData.icon!=""){
tempPointStyle= new Icon(({
anchor: [0.5, 0.5],
// size:[styleData.width,styleData.height],
src: styleData.icon,
opacity:1
}));
}else{
tempPointStyle=new CircleStyle({
radius:styleData.fileRadio,
fill: new Fill({
color: styleData.fillColor
}),
stroke: new Stroke({
color:styleData.strokeColor,
width: styleData.strokeWeight
})
})
}
drawStyle=new Style({
image:tempPointStyle
})
}else{
let storkobj={};
storkobj.color=styleData.strokeColor;
storkobj.width=styleData.strokeWeight;
if(styleData.lineDash&&styleData.lineDash!=null){
storkobj.lineDash=getLineDash(styleData.lineDash);
}
storkobj.lineCap="round";
drawStyle=new Style({
stroke: new Stroke(storkobj),
fill: new Fill({
color:styleData.fillColor
}),
})
}
return drawStyle;
}
function getLineDash(dashType){
let endArr=[0];
// vueThis.lineDashArr.forEach(function(item,index){
// if(dashType==item.type){
// endArr=item.dashArr;
// return false ;
// }
// })
return false;
// return endArr;
}
function setFontStyle(styObj){
var align ="center";
var baseline = "top";
var size ="14px";
var offsetX = 0;
var offsetY = 0;
var weight ="bold";
var rotation = 0;
var font = weight + ' ' + size + ' ' + "Verdana";
var fillColor = "#444444";
var outlineColor ="#ffffff";
var outlineWidth =1;
var fillAlpha=1;
var strokeAlpha=1;
styObj.fillColorRgba = fillColor.colorRgba(styObj.fillAlpha);
styObj.outlineColorRgba= outlineColor.colorRgba(styObj.strokeAlpha);
styObj.font = styObj.weight + ' ' + styObj.size+"px" + ' ' + "Verdana";
}
obj.setFontStyle=setFontStyle;
//赋予文字信息
var createTextStyle = function(data) {
let textLabel=data.name;
if(!textLabel||textLabel==""){
return null;
}
var fezoom=data.maxZoom;
if(fezoom){
var mapRe=map.getView().getResolution();
var feRe=mapResoultion[fezoom]
if(mapRe<feRe){
} else{
textLabel="";
}
}
let textFont =data.weight + ' ' + data.size+"px" + ' ' + data.font;
return new Text({
textAlign: data.align,
textBaseline: data.baseline,
font: textFont,
text: textLabel,
fill: new Fill({color: data.fillColor}),
stroke: new Stroke({color: data.outlineColor, width: data.outlineWidth}),
offsetX: data.offsetX,
offsetY: data.offsetY,
rotation: data.rotation
});
};
var getText = function(feature, resolution) {
var type ="normal";
var maxResolution = "1200";
var text = feature.get('name');
if (resolution > maxResolution) {
text = '';
} else if (type == 'hide') {
text = '';
} else if (type == 'shorten') {
text = text.trunc(12);
} else if (type == 'wrap') {
text = stringDivider(text, 16, '\n');
}
return text;
};
//判断图层是否存在
function getLyaersByName(layerName){
var arrGroup=map.getLayerGroup().getLayers().getArray();
for(var j=0;j<arrGroup.length;j++){
var tempobj=arrGroup[j];
//lk 图层组 className
//H 图层
var classType=tempobj.constructor.name;
var isArr=false;
if(tempobj.getLayers&&tempobj.getLayers()){
isArr=true;
}
if(!isArr){
//适量图层
if(tempobj.get("name")&&tempobj.get("name")==layerName){
//存在
return tempobj;
}
}else if(isArr){
//s数组
var arr1s=tempobj.getLayers().getArray();
for(var i=0;i<arr1s.length;i++){
var layer1=arr1s[i];
if(layer1.get("name")&&layer1.get("name")==layerName){
//存在
return layer1;
}
}
}
}
return null;
}
return obj;
}
export {BaseLayer}
.btn{ padding: 6px 10px; border-radius: 2px; cursor: pointer;}
.btn+.btn{
margin-left: 10px;
}
.mapClass{}
.ol-attribution a{color:#000;display:none}
#mapDict .ol-zoomslider:hover{display:none}
#mapDict .ol-zoomslider-thumb,
#map .ol-zoomslider-thumb,
.map-box .ol-zoomslider-thumb{display:none}
.ol-popup{position:absolute;background-color:#fff;-webkit-filter:drop-shadow(0 1px 4px rgba(0, 0, 0, .2));bottom:10px;left:-140px;min-width:280px;color:#333; border-radius: 4px; } /*overflow: hidden;*/
.ol-popup:after,.ol-popup:before{top:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}
.ol-popup:after{border-top-color:#fff;border-width:10px;left:140px;margin-left:-10px}
.ol-popup:before{border-top-color:#ccc;border-width:11px;left:140px;margin-left:-11px}
.ol-popup.portlet.box.blue{background:#fff;/*margin-left:-95px*/}
.ol-popup.portlet.box.blue .portlet-title{min-height:30px;background: #21a0ff;color: #fff;padding-left: 10px;}
.ol-popup.portlet.box.blue>.portlet-title>.caption{padding:6px 0 5px 0;}
.ol-popup.portlet.box.blue>.portlet-title>.caption span{font-size:16px}
.ol-popup.portlet.box.blue .portlet-title i.icon{width:30px;height:30px;margin-top:-6px}
#popup-content{background:#fff;padding:10px}
#popup-content p{ margin-bottom: 10px;}
#popup-content p code{ color: #666; padding-left: 10px;}
#popup-content .btn.btn-info{background-color:#207dca!important}
#popup-content img{float:right}
#poptitle{margin-right:40px;}
.ol-popup-closer{text-decoration:none;position:absolute;top:5px;right:8px}
/*.ol-popup-closer:after{content:"✖";color:#fff}*/
.ol-popup-closer:after{content:"×";color:#fff; font-weight: bold;}
/*.ol-full-screen{display:display}*/
code{border:0PX;background-color:#FFF;color:#333;font-family:microsoft yahei;box-shadow:0 0 0 rgba(0,0,0,.1)}
h4{font-size:16px}
body .gisgroup img{height:90px;}
#picUrl{float: right;margin-right:8px}
#picUrl a{display: inline-block;}
#dkLable{
position:absolute;top:0;right:2px;z-index: 999;background-color: rgba(255,255,255,.85);box-shadow: 0px 0px 5px rgba(0,0,0,.2); border-radius:8px;display:none;font-size:12px;
padding: 2px;
}
#dkLable .rebasis{display: inline-block;text-align: center;}
.ol-viewport{ overflow: visible !important;}
.ol-box {
box-sizing: border-box;
border-radius: 2px;
border: 2px solid blue;
}
.ol-mouse-position {
top: 8px;
right: 8px;
position: absolute;
}
.ol-scale-line {
background: rgba(0,60,136,0.3);
border-radius: 4px;
bottom: 8px;
left: 8px;
padding: 2px;
position: absolute;
}
.ol-scale-line-inner {
border: 1px solid #eee;
border-top: none;
color: #eee;
font-size: 10px;
text-align: center;
margin: 1px;
will-change: contents, width;
}
.ol-overlay-container {
will-change: left,right,top,bottom;
}
/*.ol-unsupported {*/
/*display: none;*/
/*}*/
.ol-viewport .ol-unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.ol-control {
position: absolute;
border-radius: 4px;
padding: 0;
}
.ol-control:hover {
background-color: rgba(255,255,255,0.6);
}
.ol-zoom {
/*top: 80px;*/
/*top: 74px;*/
top: 39px;
right: 7px;
}
.ol-rotate {
top: .5em;
right: .5em;
transition: opacity .25s linear, visibility 0s linear;
}
.ol-rotate.ol-hidden {
opacity: 0;
visibility: hidden;
transition: opacity .25s linear, visibility 0s linear .25s;
}
.ol-zoom-extent {
top: 4.643em;
left: .5em;
}
.ol-full-screen {
right: .5em;
top: .5em;
}
@media print {
.ol-control {
display: none;
}
}
.ol-control button {
display: block;
margin: 2px 0;
padding: 0;
color: white;
font-size: 1.14em;
font-weight: bold;
text-decoration: none;
text-align: center;
height: 30px;
width: 30px;
line-height: .4em;
background-color: rgba(0,60,136,0.5);
border: none;
border-radius: 2px;
}
/*.ol-control button.ol-full-screen-false{*/
/*position: absolute;*/
/*top:0;*/
/*right:0;*/
/*z-index: 1;*/
/*margin-top: -40px;*/
/*width: 27px;*/
/*height: 27px;*/
/*background-color: transparent !important;*/
/*border: 1px solid #fff;*/
/*border-radius: 25px;*/
/*}*/
.ol-control button::-moz-focus-inner {
border: none;
padding: 0;
}
.ol-zoom-extent button {
line-height: 1.4em;
}
.ol-compass {
display: block;
font-weight: normal;
font-size: 1.2em;
will-change: transform;
}
.ol-touch .ol-control button {
font-size: 1.5em;
}
.ol-touch .ol-zoom-extent {
top: 5.5em;
}
.ol-control button:hover,
.ol-control button:focus {
text-decoration: none;
background-color: #2469a4;
}
.ol-zoom .ol-zoom-in {
border-radius: 2px 2px 0 0;
}
.ol-zoom .ol-zoom-out {
border-radius: 0 0 2px 2px;
}
.ol-attribution {
text-align: right;
bottom: .5em;
right: .5em;
max-width: calc(100% - 1.3em);
}
.ol-attribution ul {
margin: 0;
padding: 0 .5em;
font-size: .7rem;
line-height: 1.375em;
color: #000;
text-shadow: 0 0 2px #fff;
}
.ol-attribution li {
display: inline;
list-style: none;
line-height: inherit;
}
.ol-attribution li:not(:last-child):after {
content: " ";
}
.ol-attribution img {
max-height: 2em;
max-width: inherit;
vertical-align: middle;
}
.ol-attribution ul, .ol-attribution button {
display: inline-block;
}
.ol-attribution.ol-collapsed ul {
display: none;
}
.ol-attribution.ol-logo-only ul {
display: block;
}
.ol-attribution:not(.ol-collapsed) {
background: rgba(255,255,255,0.8);
}
.ol-attribution.ol-uncollapsible {
bottom: 0;
right: 0;
border-radius: 4px 0 0;
height: 1.1em;
line-height: 1em;
}
.ol-attribution.ol-logo-only {
background: transparent;
bottom: .4em;
height: 1.1em;
line-height: 1em;
}
.ol-attribution.ol-uncollapsible img {
margin-top: -.2em;
max-height: 1.6em;
}
.ol-attribution.ol-logo-only button,
.ol-attribution.ol-uncollapsible button {
display: none;
}
.ol-zoomslider {
top: 10em;
right: .5em;
height: 200px;
}
.ol-zoomslider button {
position: relative;
height: 10px;
}
.ol-touch .ol-zoomslider {
top: 5.5em;
}
.ol-overviewmap {
right: 7px;
bottom: 7px;
}
.ol-overviewmap.ol-uncollapsible {
bottom: 0;
left: 0;
border-radius: 0 4px 0 0;
}
.ol-overviewmap .ol-overviewmap-map,
.ol-overviewmap button {
display: inline-block;
}
.ol-overviewmap .ol-overviewmap-map {
border: 1px solid #546B88;
height: 100px;
margin: 0;
width: 150px;
}
.ol-overviewmap:not(.ol-collapsed) button{
bottom: 0px;
right: 0px;
position: absolute;
}
.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
.ol-overviewmap.ol-uncollapsible button {
display: none;
}
.ol-overviewmap:not(.ol-collapsed) {
background: rgba(255,255,255,0);
height: 100px;
}
.ol-overviewmap-box {
border: 2px dotted rgba(0,60,136,0.7);
}
This diff is collapsed.
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import $ from 'jquery'
import moment from 'moment'
import Vuex from 'vuex'
import qs from 'qs'
import axios from 'axios'
import {baseUrl,weUrl,backToken,frontToken, appHomeUrl,skipLinkUrl} from './config/env'
import http from './config/httpServer'
import store from './store/'
import {shortcuts} from './common/js/commonJs'
import VueDND from 'awe-dnd'
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
//引入编辑器
import '../static/ueditor/ueditor.config.js'
import '../static/ueditor/ueditor.all.js'
import '../static/ueditor/themes/default/css/ueditor.min.css'
import '../static/ueditor/lang/zh-cn/zh-cn.js'
Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return moment(dataStr).format(pattern)
})
Vue.prototype.$querystring = qs//其他的代码用到比较多 就新增一个
Vue.prototype.$qs = qs
Vue.prototype.$http = axios
Vue.prototype.$https = http
Vue.prototype.$store = store
Vue.prototype.$baseUrl=baseUrl
Vue.prototype.$weUrl=weUrl
Vue.prototype.$appHomeUrl=appHomeUrl
Vue.prototype.$skipLinkUrl=skipLinkUrl
Vue.prototype.backToken=backToken
Vue.prototype.frontToken=frontToken
Vue.prototype.moment = moment
Vue.prototype.shortcuts = shortcuts;
Vue.use(VueDND)
Vue.use(ElementUI);
Vue.use(Vuex);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
<template>
<h1>展板分类</h1>
</template>
\ No newline at end of file
<template>
<h1>展板内容</h1>
</template>
\ No newline at end of file
<template>
<h1>展板版权</h1>
</template>
\ No newline at end of file
<template>
<h1>ddddd</h1>
</template>
\ No newline at end of file
This diff is collapsed.
<template>
<h1>视频分类</h1>
</template>
\ No newline at end of file
<template>
<h1>视频内容</h1>
</template>
\ No newline at end of file
This diff is collapsed.
<template>
<h1>视频汇出</h1>
</template>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<template>
<div class="Page403 H100">
<div class="page_box">
<div class="img l-float" ></div>
<div class="title r-float">
<p>403</p>
<p>抱歉,你无权访问该页面</p>
<el-button type="primary" @click="toIndex">返回首页</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
computed: {
},
mounted() {
},
components: {
},
methods: {
toIndex() {
this.$router.push('/indexPage');
}
}
}
</script>
<style lang="less">
@import '../../style/common';
.Page403{
background: #F0F2F5;
border: 1px solid transparent;
.page_box{
width: 60%;
height: 50%;
margin: 7% auto;
box-sizing: border-box;
.img{
width: 50%;
height: 100%;
margin-top: 5%;
background-image: url("../../../static/images/pic/img403.png");
background-repeat: no-repeat;
background-size: 70%;
}
.title{
width: 40%;
height: 100%;
padding-top: 10%;
p:nth-child(1){
font-size: 4rem;
}
p:nth-child(2){
font-size:20px;
font-weight:400;
color:rgba(0,0,0,0.45);
margin-bottom: 10px;
}
.el-button{
padding: 6px 13px;
}
}
}
}
</style>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment