Commit f5f885f4 by lihu541

'疾控项目'

parents
{
"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/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
src/components/userJoin/cc.json
src/components/userJoin/new_file.json
package.json
// 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": {}
}
}
# ShangHaiDisService
#### Description
上海市疾病预防控制服务项目
#### Software Architecture
Software architecture description
#### Installation
1. xxxx
2. xxxx
3. xxxx
#### Instructions
1. xxxx
2. xxxx
3. xxxx
#### Contribution
1. Fork the repository
2. Create Feat_xxx branch
3. Commit your code
4. Create Pull Request
#### Gitee Feature
1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
4. The most valuable open source project [GVP](https://gitee.com/gvp)
5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
# ShangHaiDisService
#### 介绍
上海市疾病预防控制服务项目
#### 软件架构
软件架构说明
#### 安装教程
1. xxxx
2. xxxx
3. xxxx
#### 使用说明
1. xxxx
2. xxxx
3. xxxx
#### 参与贡献
1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request
#### 码云特技
1. 使用 Readme\_XXX.md 来支持不同的语言,例如 Readme\_en.md, Readme\_zh.md
2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目,是码云综合评定出的优秀开源项目
5. 码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
'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')
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'),
'^':resolve('static')
}
},
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]')
}
}
]
},
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
}),
// 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: {
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,
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')
//const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // 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, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: '',
assetsDir:'./',
assetsPublicPath: '',
configureWebpack:{
output:{
filename:'./js/[name].js',
chunkFilename:'./js/[name].js'
}
},
/**
* Source Maps
*/
productionSourceMap: true,
// 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>
<link rel="shortcut icon" href="#" />
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
This source diff could not be displayed because it is too large. You can view the blob instead.
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
import request from '@/utils/request'
/****
*首页接口
******/
const webUrl = 'http://223.166.12.29:8999/diseaseControlManage/';
//公用接口
export function commonMethod(param) {
return request({
url:webUrl+'api/common/queryTheme',
method:'post',
headers:{
'Content-Type':'application/json; charset=UTF-8',
"Accept": "*/*",
"MyToken":localStorage.getItem('token')
},
data:JSON.stringify(param)
})
}
//特殊接口
export function otherMethod(param) {
return request({
url:webUrl+'api/common/queryDatadetail',
method:'post',
headers:{
'Content-Type':'application/json; charset=UTF-8',
"Accept": "*/*",
"MyToken":localStorage.getItem('token')
},
data:JSON.stringify(param)
})
}
import request from '@/utils/request'
//登录、修改密码
const webUrl = 'http://223.166.12.29:8999/diseaseControlManage/';
export function login(loginID, loginPas) {
return request({
url:webUrl+'api/login/doLogin',
method:'post',
headers:{
'Content-Type':'application/json',
"Accept": "*/*"
},
data:JSON.stringify({
"uid":loginID,
"pwd":loginPas
})
})
}
//修改密码
export function updatePassword(uid,pwdold,pwdnew) {
return request({
url:webUrl+'api/login/updatePassWord',
method:'post',
headers:{
'Content-Type':'application/json',
"Accept": "*/*"
},
data:JSON.stringify({
"uid":uid,
"pwdold":pwdold,
"pwdnew":pwdnew
})
})
}
*{box-sizing: border-box;}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; font-family: 'MicrosoftJhengHei'}
body, button, input, select, textarea { font-size:12px; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
a:active { color: inherit;}
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
@font-face {
font-family: 'iconfont'; /* project id 129360 */
src: url('//at.alicdn.com/t/font_129360_4mesgl4imvbtvs4i.eot');
src: url('//at.alicdn.com/t/font_129360_4mesgl4imvbtvs4i.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_129360_4mesgl4imvbtvs4i.woff') format('woff'),
url('//at.alicdn.com/t/font_129360_4mesgl4imvbtvs4i.ttf') format('truetype'),
url('//at.alicdn.com/t/font_129360_4mesgl4imvbtvs4i.svg#iconfont') format('svg');
}
i {
font-family: 'iconfont';
font-style: normal;
}
<template>
<div class="usercontainer">
<!-- <div class=""></div> -->
<div class="userlogdom">
<p class="lgtitle">上海市疾病预防控制管理服务云平台</p>
<el-input v-model="loginID" placeholder="账 号" clearable></el-input>
<el-input v-model="loginPas" placeholder="密 码" show-password></el-input>
<el-input v-model="MACIP" value="MAC:35:38:33:33:31:30" :disabled="true"> </el-input>
<div class="PassAbout">
<div class="MemoryPass">
<el-checkbox v-model="checked">记住密码</el-checkbox>
</div>
<div class="ChangePass">
<router-link to="/UserRepass">修改密码</router-link> <i class="el-icon-warning-outline"></i>
</div>
</div>
<el-button type="primary" @click="Login()">登录</el-button>
</div>
</div>
</template>
<script>
import {login} from '@/api/userlogin.js'
export default {
data() {
return {
loginID: '',
loginPas: '',
errormsg:'',
MACIP:'MAC:35:38:33:33:31:30',
checked: false,
value2:''
}
},
methods:{
Login(){
if(!this.loginID){
this.$message.error('用户名不可为空');
return false
}
if(!this.loginPas){
this.$message.error('用户密码不可为空');
return false
}
let _this = this
// 用户登录
login(this.loginID, this.loginPas).then( res=>{
console.log(res)
if(res.code==1){
localStorage.setItem('token', res.data.token);
localStorage.setItem('userinfo', res.data.userInfo);
this.$router.push({path: './Index'});
}else{
_this.$message.error(res.msg);
}
if(res.msg == "操作成功"){
//单选框被选中时,将 local 存储
if(this.checked){
// local 存储 用户登录返回的所有数据(不包含密码)
// local 存储 用户密码
localStorage.setItem('userID', this.loginID);
localStorage.setItem('userPas', this.loginPas);
localStorage.setItem('ifselect', true);
}
// 登陆成功, 路由跳转
this.$router.push({path: './Index'});
}else{
let errormsg = res.msg
_this.$message.error(`${errormsg}`);
}
}).catch( err=>{
console.log("登录报错!");
})
}
},
mounted() {
if(localStorage.getItem('userID') && localStorage.getItem('userPas')){
// 若 local 存在即自动跳转
// 获取密码与账户
this.loginID = localStorage.getItem('userID')
this.loginPas = localStorage.getItem('userPas')
this.checked = localStorage.getItem('ifselect')
console.log(localStorage.getItem('ifselect'));
// let localUserID = JSON.parse(localStorage.getItem('UserMessage')).data.userInfo.userId
// let localUserPas = localStorage.getItem('UserPass')
// login(localUserID, localUserPas).then( res=>{
// console.log(res.msg);
// if(res.msg == "操作成功"){
// // 登陆成功, 路由跳转
// this.$message.success(`检测到缓存,即将自动跳转!`);
// setTimeout(()=>{this.$router.push({path: './Home'})},1500)
// }else{
// let errormsg = res.msg
// this.$message.error(`${errormsg}`);
// }
// })
}else{
// console.log(localUserID);
// console.log(localUserPas);
// this.$message.error(`暂无local或local被清除,请手动登录!`);
}
}
}
</script>
<style lang="stylus" scoped>
.userlogdom >>> ::-webkit-input-placeholder
color: #777;
font-size: 14px;
.userlogdom >>> .el-input
width 250px
display block
margin 10px auto
.userlogdom >>> .el-checkbox__label
color #fff
.userlogdom >>> .el-button
width 250px
height 40px
display block
margin 15px auto 0
.usercontainer
width 100%
height 600px
overflow hidden
.userlogdom
width 600px
height 500px
margin 90px auto 0
.lgtitle
width 100%
text-align center
height 35px
line-height 35px
margin-top 60px
padding-bottom 76px
font-size 28px
color #54daf8
text-shadow 0 2px 2px #000
.PassAbout
width 250px
height 30px
margin 0 auto
.MemoryPass
float left
.ChangePass
float right
color #FFF
a
color #FFF
text-decoration none
&:hover
cursor pointer
color #FFF
text-decoration underline
</style>
<template>
<div id="centercircle"></div>
<!-- 中间饼图 -->
</template>
<script>
export default {
name: 'centercircle',
props: {
supervisionall: Array
},
data() {
return {
msg: '',
MyList: ['高血压患者累计死后随访比', '糖尿病患者累计死后随访比', '糖尿病患者糖化血红蛋白自动上传比例', '高血压患者血压记录自动上传比例', '年内按计划随访高血压患者完成比例'],
option: {
title: {
// text: '重点监管指标',
left: 'center'
},
tooltip: {
trigger: 'item'
},
color: ["#37C6D0", "#3FDCB7", "#8DEDA2", "#BCF8C6", "#FBF7AB", "#F3D7BC", "#61A5F5"],
legend: {
orient: 'vertical',
left: 'left',
data: ['高血压患者', '糖尿病患者累计死后随访比', '糖尿病患者糖化血红蛋白自动上传比例', '高血压患者血压记录自动上传比例', '年内按计划随访高血压患者完成比例'],
textStyle: {
color: '#FFF' // 图例文字颜色
}
},
series: [{
name: '份额',
type: 'pie',
hoverAnimation: false,
center: ['50%', '50%'],
radius: [30, 80],
roseType: 'area',
label: {
normal: {
show: true
}
},
labelLine: {
normal: {
show: true,
length: 5,
length2: 10,
}
},
data: [{
value: 33.5,
name: '33.5%', //高血压患者累计死后随访比
},
{
value: 10,
name: '10%', //高血压患者累计死后随访比
},
{
value: 23.4,
name: '23.4%' //糖尿病患者糖化血红蛋白自动上传比例
},
{
value: 13.5,
name: '13.5%' //高血压患者血压记录自动上传比例
},
{
value: 15.8,
name: '15.4%' //年内按计划随访高血压患者完成比例
}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
}
}
},
methods: {},
mounted() {
const obj = setInterval(() => {
let objArr = []
console.log(JSON.stringify(this.supervisionall));
for (var i = 0; i < this.supervisionall.length; i++) {
let objdata = {
'value': 0,
'name': ''
}
objdata.value = this.supervisionall[i]
objdata.name = this.supervisionall[i] + '%'
// 释放后 则显示legend
// objdata.name = this.MyList[i]
objArr.push(objdata)
}
console.log(JSON.stringify(objArr));
console.log(this.supervisionall);
this.option.series[0].data = objArr
this.option.data = this.MyList
const dom = document.getElementById("centercircle")
if (dom) {
const myChart = this.$echarts.init(dom)
if (this.option && typeof this.option === "object") {
myChart.setOption(this.option, true)
}
clearInterval(obj)
}
}, 1700)
},
watch: {
supervisionall() {
console.log(this.supervisionall);
let objArr = []
console.log(JSON.stringify(this.supervisionall));
for (var i = 0; i < this.supervisionall.length; i++) {
let objdata = {
'value': 0,
'name': ''
}
objdata.value = this.supervisionall[i]
objdata.name = this.supervisionall[i] + '%'
// 释放后 则显示legend
// objdata.name = this.MyList[i]
objArr.push(objdata)
}
console.log(JSON.stringify(objArr));
console.log(this.supervisionall);
this.option.series[0].data = objArr
this.option.data = this.MyList
const dom = document.getElementById("centercircle")
if (dom) {
const myChart = this.$echarts.init(dom)
if (this.option && typeof this.option === "object") {
myChart.setOption(this.option, true)
}
}
}
}
}
</script>
<style lang="stylus" scoped>
#centercircle
width 280px
height 270px
</style>
<template>
<div class="header2">
<div class="nav" @click="exitFn"><img src="../../assets/icon_nav_cell.png"></div>
<div class="title">
<div class="tp">上海市疾病预防控制管理服务云平台(慢性病防治)</div>
<p>{{areaname}}</p>
</div>
<div class="area">
<!--el-button size="mini" type="primary">返回</el-button-->
<el-button size="mini" type="primary">重置</el-button>
<el-date-picker
v-model="value"
type="month"
@change="dataSearch"
align="left"
size='mini'
format="yyyy-MM"
value-format="yyyy-MM"
:placeholder="sel">
</el-date-picker>
<div class="name"><i class="el-icon-s-custom el-icon--left"></i>市疾控 截止:{{nowdate}}</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default{
name: 'services',
props:{
themeId2:Number
},
data(){
return {
areaname:'',
value:'2020-04',
nowdate:'2020-04',
sel:'筛选'
}
},
methods:{
exitFn(){
this.$router.push({path: '/'});
},
dataSearch(value){
console.log('--==--')
console.log(value)
var myDate = new Date();
myDate.getYear();
localStorage.setItem("EndTime",value)
if(value){
this.nowdate = value
}
}
},
mounted(){
this.value = localStorage.getItem("EndTime")?localStorage.getItem("EndTime"):this.value
this.nowdate = localStorage.getItem("EndTime")?localStorage.getItem("EndTime"):this.nowdate
}
}
</script>
<style lang="stylus" scoped>
.area >>> .el-input--mini .el-input__inner{padding:0; text-align:center; color: #FFF; border:1px solid #409EFF; width: 65px; background-color: #409EFF;}
.area >>> .el-input--mini .el-input__inner::-webkit-input-placeholder {color: #FFF;}
.area >>> .el-input--mini{ width: 60px;}
.area >>> .el-input__icon.el-icon-date{display:none}
.area >>> .el-input__icon{display:none}
</style>
\ No newline at end of file
<template>
<div>
<div id="hyperpercent"></div>
<!-- 中下部高血压 中下方图表 -->
<div class="mywraper" v-if="hereshow">
<div class="mywrapitem">
<div class="itemtitle">市前10社区:</div>
<div class="itemplace">
<ul style="">
<li v-for="(item, index) in ranklist3" v-if="index<10" :key="index" class="itemulli">{{item}}</li>
</ul>
</div>
</div>
<div class="mywrapitem">
<div class="itemtitle">市后10社区:</div>
<div class="itemplace">
<ul><li v-for="(item, index) in reverhyperplacetemp" :key="index" v-if="index< 10" class="itemulli">{{item}}</li></ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'hyperpercent',
props: { hyperAutoplacetemp: Array, hyperAutoplacevalue: Array ,ranklist3: Array},
data() {
return {
msg: '我是hyper',
hereshow: false,
hypertabshow: true,
reverhyperplacetemp:[],
option: {
color: ["#39DFAB"],
dataZoom: {
start: 0, //默认为0
end: 50, //默认为100
type: 'slider',
show: true ,
xAxisIndex: [0] ,
handleSize: 20 , //滑动条的 左右2个滑动条的大小
height: 5 , //组件高度
left: 30, //左边的距离
right: 10, //右边的距离
bottom: 55, //右边的距离
backgroundColor: '#ccc', //两边未选中的滑动条区域的颜色
showDataShadow: true, //是否显示数据阴影 默认auto
handleStyle: {
borderColor: "#CBBCDB",
borderWidth: "1",
shadowBlur: 1,
background: "#000",
shadowColor: "#000",
},
filterMode: 'filter',
},
grid: {
top: 20,
left: 30,
right: 10
},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
textStyle: {
fontSize: 10
},
position: [50, 0]
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#97B8D5',
type: 'solid'
},
},
axisLabel: {
interval: 0,
rotate: 50,
textStyle: {
color: '#97B8D5',
fontSize: 10
}
},
splitLine: {
show: false,
onZero: false
},
axisTick: {
show: false
},
data: ['古美', '江川', '马桥', '梅陇', '浦江', '新虹', '浦锦', '吴泾', '七宝', '莘庄', '颛桥']
},
yAxis: {
type: 'value',
show: true,
axisLabel: {
textStyle: {
color: '#97B8D5',
fontSize: 10
},
},
axisLine: {
lineStyle: {
color: '#97B8D5',
type: 'solid'
},
},
splitLine: {
show: false
},
axisTick: {
show: false
}
},
dataZoom: [{
type: 'inside',
startValue: 0,
filterMode: 'empty',
endValue: 14
}],
series: [{
data: [95, 84, 80, 62, 45, 51, 48, 40, 34, 38, 28],
type: 'line',
smooth: true,
symbol: 'none',
itemStyle: {
normal: {
lineStyle: {
width: 1,
type: 'solid' //'dotted'虚线 'solid'实线
}
}
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(23,100,100,1)' // 0% 处的颜色
}, {
offset: 0.5,
color: 'rgba(23,100,100,0.5)' // 100% 处的颜色
}, {
offset: 1,
color: 'rgba(23,100,100,0)' // 100% 处的颜色
},
],
global: false // 缺省为 false
}
}
}]
}
}
},
methods: {
parentHandleclick(e) {
// console.log(e);
if (e == 1) {
// 状态码 1 用于颠倒坐标轴作用
this.option.xAxis.data.reverse()
this.option.series[0].data.reverse()
const myChart = this.$echarts.init(document.getElementById("hyperpercent"))
if (this.option && typeof this.option === "object") {
myChart.setOption(this.option, true)
}
} else if (e == 2) {
// 状态码 2 是用于点击之后 重新渲染图表 因此弹出层不再需要,将其置为否
this.hereshow = false
// 再次渲染 echarts
const myChart = this.$echarts.init(document.getElementById("hyperpercent"))
if (this.option && typeof this.option === "object") {
myChart.setOption(this.option, true)
}
} else if (e == 3) {
// 状态码 3 用于弹出层相关逻辑
// this.hypertabshow 时弹出层开关 ,用以判断显示与隐藏的时机
if (this.hypertabshow) {
this.hereshow = true
this.reverhyperplacetemp = []
this.ranklist3.forEach(item=>{
this.reverhyperplacetemp.push(item)
})
this.reverhyperplacetemp.reverse()
console.log(this.reverhyperplacetemp);
} else {
this.hereshow = false
}
// 开关置反
this.hypertabshow = !this.hypertabshow
} else if (e == 4) {
// 用于选择 市区 的时候,重新渲染当前图表页面
console.log("重新渲染=================================================================================");
this.option.xAxis[0].data = this.hyperAutoplacetemp
this.option.series[0].data = this.hyperAutoplacevalue
this.$echarts.init(document.getElementById("hyper")).setOption(this.option, true)
}
}
},
mounted() {
this.option.xAxis.data = this.hyperAutoplacetemp
this.option.series[0].data = this.hyperAutoplacevalue
const obj = setInterval(() => {
const dom = document.getElementById("hyperpercent")
if (dom) {
const myChart = this.$echarts.init(dom)
if (this.option && typeof this.option === "object") {
myChart.setOption(this.option, true)
}
clearInterval(obj)
}
}, 1000)
},
watch: {
hyperAutoplacetemp() {
this.option.xAxis.data = this.hyperAutoplacetemp
this.option.series[0].data = this.hyperAutoplacevalue
this.$echarts.init(document.getElementById("hyperpercent")).setOption(this.option, true)
}
}
}
</script>
<style lang="stylus" scoped>
#hyperpercent{width:260px;height:180px}
</style>
<template>
<div>
<div id="hyper"></div>
<!-- 高血压患者死亡 柱状图表 -->
<div class="mywraper" v-if="hereshow">
<div class="mywrapitem">
<div class="itemtitle">市前10社区:</div>
<div class="itemplace">
<ul style="">
<li v-for="(item, index) in ranklist1" v-if="index<10" :key="index" class="itemulli">{{item}}</li>
</ul>
</div>
</div>
<div class="mywrapitem">
<div class="itemtitle">市后10社区:</div>
<div class="itemplace">
<ul><li v-for="(item, index) in reverhyperplacetemp" :key="index" v-if="index< 10" class="itemulli">{{item}}</li></ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:{ hyperplacevalue: Array, hyperplacetemp: Array ,ranklist1: Array},
data() {
return {
msg: '',
hereshow:false,
hypertensiontabshow: true,
ListPlace:[],
ListValue:[],
reverhyperplacetemp:[],
option : {
color: ["#44A2ED"],
dataZoom: {
start: 0, //默认为0
end: 50, //默认为100
type: 'slider',
show: true ,
xAxisIndex: [0] ,
handleSize: 20 , //滑动条的 左右2个滑动条的大小
height: 5 , //组件高度
left: 10, //左边的距离
right: 10, //右边的距离
bottom: 25, //右边的距离
backgroundColor: '#ccc', //两边未选中的滑动条区域的颜色
showDataShadow: true, //是否显示数据阴影 默认auto
handleStyle: {
borderColor: "#CBBCDB",
borderWidth: "1",
shadowBlur: 1,
background: "#000",
shadowColor: "#000",
},
filterMode: 'filter',
},
grid: {
top: 20,
left:5,
right:0,
bottom:30
},
xAxis: [{
name:"",
nameLocation:'center',
nameTextStyle:{
color:'#97B8D5',
fontSize:10,
padding: [-7, 0, 0, 280]
},
type: 'category',
axisLine: {
lineStyle: {
color: 'rgba(6,38,84,0.4)',
type: 'solid'
}
},
axisLabel: {
interval: 0,
rotate:70,
textStyle: {
color:'#97B8D5',
fontSize : 10
}
},
splitLine: {
show: false,
onZero: false
},
axisTick: {
show: false
},
data:this.hyperplacetemp
}],
yAxis: [{
type: 'value',
show: false
}],
dataZoom: [{
type: 'inside',
startValue: 0,
filterMode: 'empty',
endValue: 14
}],
series: [{
name:'',
type: 'bar',
label:{
normal:{
show: true,
position: 'top',
fontSize : 10
}
},
barWidth: 7,
data:this.hyperplacevalue
}]
}
}
},
methods: {
parentHandleclick(e) {
// console.log(e);
if(e == 1){
// 状态码 1 数据位置颠倒
this.option.xAxis[0].data.reverse()
this.option.series[0].data.reverse()
const myChart = this.$echarts.init(document.getElementById("hyper"))
if (this.option && typeof this.option === "object") {
myChart.setOption(this.option, true)
}
}else if(e == 2){
this.hereshow = false
const myChart = this.$echarts.init(document.getElementById("hyper"))
if (this.option && typeof this.option === "object") {
myChart.setOption(this.option, true)
}
}else if(e == 3){
// 状态码 3 用于弹出层相关逻辑
// this.hypertensiontabshow 时弹出层开关 ,用以判断显示与隐藏的时机
if(this.hypertensiontabshow){
this.hereshow = true
this.ranklist1.forEach(item=>{
this.reverhyperplacetemp.push(item)
})
this.reverhyperplacetemp.reverse()
}else{
this.hereshow = false
}
// 开关置反
this.hypertensiontabshow = !this.hypertensiontabshow
}else if(e == 4){
// 用于选择 市区 的时候,重新渲染当前图表页面
this.ListPlace = this.hyperplacetemp
this.ListValue = this.hyperplacevalue
this.option.xAxis[0].data = this.ListPlace
this.option.series[0].data = this.ListValue
const myChart = this.$echarts.init(document.getElementById("hyper"))
myChart.setOption(this.option, true)
}
}
},
mounted(){
const obj = setInterval(() => {
const dom = document.getElementById("hyper")
if (dom) {
this.option.xAxis[0].data = this.hyperplacetemp
this.option.series[0].data = this.hyperplacevalue
const myChart = this.$echarts.init(dom)
if (this.option && typeof this.option === "object") {
myChart.setOption(this.option, true)
}
clearInterval(obj)
}
}, 1000)
},
watch:{
hyperplacetemp() {
this.option.xAxis[0].data = this.hyperplacetemp
this.option.series[0].data = this.hyperplacevalue
this.$echarts.init(document.getElementById("hyper")).setOption(this.option, true)
}
}
}
</script>
<style lang="stylus" scoped>
#hyper
width 280px
height 150px
</style>
<template>
<div id="middlebarbox">
<!-- 二屏中间图表 -->
</div>
</template>
<script>
export default{
name: 'middlebar',
data(){
return {
data_x:[],
data_gl_cyrs: [],
data_qy_cyrs: [],
data_gl_cyrs_qn: [],
data_qy_cyrs_qn: [],
data_g_ycl: [],
data_q_ycl: [],
data_g_ycl_qn: [],
data_q_ycl_qn: [],
option: {
tooltip: {
position:[50,50],
padding: 10,
trigger: 'item',
formatter: function (params) {
if("line" === params.seriesType){
return ;
}
var res = "<div style='width:320px;font-size: 12px;display: contents'>";
res +="<ul style='padding: 0 10px'>";
res +="<li class='f14'>"+params.name+title0+"</li>";
res +="<li>管理/签约人群年内进行首诊测压的人数:32.1/28.5万</li>";
res +="<li>去年管理/签约人群年内进行首诊测压的人数:30.3/23.2万</li>";
res +="<li>管.首诊测压血压异常率/去年:8.1%/10.2%</li>";
res +="<li>签.首诊测压血压异常率/去年:4.1%/5.2%</li>";
res +="</ul>";
res +="</div>";
return res
}
},
legend: {textStyle: {color: '#8393A9',fontSize: 10,},left:70,width:380,top: '0',itemHeight: 12,itemWidth: 14,itemGap:5,height:50,data:["管理/签约人群首诊测压人数","去年管理/签约人群首诊测压人数","管·首诊测压血压异常率/去年","签·首诊测压血压异常率/去年"],align: 'left',selectedMode:true},
grid: {top: 80,bottom: 45},
xAxis: [
{
type: 'category',
data: this.data_x,
axisLine: {lineStyle: {color: '#8393A9',type: 'solid',}},
axisLabel: {interval: 0,rotate:60,textStyle: {fontSize:10,color: function(value,index){return '#8393A9';}}},
splitLine: {show: false,onZero: false},
axisTick: {show: false},
}
],
yAxis: [
{
type: 'value',
name: '数量(万)',
min:0,
axisLabel: {textStyle:{color: '#8393A9',type: 'solid'}},
axisLine: {show: true,lineStyle: {color: '#8393A9',type: 'solid'}},
splitLine: {show: false},
axisTick: {show: false}
},
{
type: 'value',
name: '%',
max:100,
min:0,
splitNumber:5,
axisLabel: {textStyle: {color: function(value,index){return '#747d8d'},type: 'solid'}},
axisLine: {show: true,lineStyle: {color: '#8393A9',type: 'solid'}},
splitLine: {show: false},
axisTick: {show: false},
}
],
series: [
{
name: '管理/签约人群首诊测压人数',
type: 'bar',
stack: '1',
itemStyle: {},
barWidth: null,
data: null,
},
{
name:'管理/签约人群首诊测压人数',
type:'bar',
barWidth: 8,
itemStyle: {normal: {color: '#4093E9'}},
data: this.data_qy_cyrs,
stack:"1"
},
{
name: '去年管理/签约人群首诊测压人数',
type: 'bar',
stack: '2',
itemStyle: {},
barWidth: null,
data: null,
},
{
name:'去年管理/签约人群首诊测压人数',
type:'bar',
barWidth: 8,
itemStyle: {normal: {color: '#00BEBE'}},
data: this.data_qy_cyrs_qn,
stack:"2"
},
{
name: '管·首诊测压血压异常率/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {normal: {width: 0}},
itemStyle: {},
data: null,
},
{
name:'管·首诊测压血压异常率/去年',
type:'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {normal: {width: 2}},
itemStyle: {normal: {color: '#00D1DA'}},
z: 12,
data:this.data_g_ycl
},
{
name: '签·首诊测压血压异常率/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {normal: {width: 0}},
itemStyle: {},
data: null,
},
{
name:'签·首诊测压血压异常率/去年',
type:'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {normal: {width: 2}},
itemStyle: {normal: {color: '#FFC24D'}},
z: 12,
data:this.data_q_ycl
},
]
}
}
},
methods:{
getXais(){
let _this = this
/************
for(var i=1;i<=12;i++){
_this.data_x.push( i + "月" );
}
for (var i=0;i<_this.data_x.length;i++) {
_this.data_gl_cyrs.push(Math.random()*50);
_this.data_qy_cyrs.push(Math.random()*50);
_this.data_gl_cyrs_qn.push(Math.random()*50);
_this.data_qy_cyrs_qn.push(Math.random()*50);
_this.data_g_ycl.push(Math.random()*50);
_this.data_q_ycl.push(Math.random()*60);
_this.data_g_ycl_qn.push(Math.random()*50);
_this.data_q_ycl_qn.push(Math.random()*60);
}
*******************/
this.option.xAxis[0].data = this.data_x
this.option.series[0].data = this.data_qy_cyrs
this.option.series[1].data = this.data_gl_cyrs
this.option.series[2].data = this.data_qy_cyrs_qn
this.option.series[3].data = this.data_gl_cyrs_qn
this.option.series[4].data = this.data_g_ycl
this.option.series[5].data = this.data_g_ycl_qn
this.option.series[6].data = this.data_q_ycl
this.option.series[7].data = this.data_q_ycl_qn
const obj = setInterval(() => {
const dom = document.getElementById("middlebarbox")
if (dom) {
const myChart = this.$echarts.init(dom)
if (this.option && typeof this.option === "object") {
myChart.setOption(this.option, true)
}
clearInterval(obj)
}
}, 200)
}
},
mounted(){
this.getXais()
}
}
</script>
<style lang="stylus" scoped>
#middlebarbox
width 455px
height 280px
</style>
<template>
<div id="rightupbar"></div>
</template>
<script>
export default {
name: 'rightupbar',
props:{
G_ageList:Array,
Q_ageList:Array
},
data(){
return {
option: {
color: ["#4F95A1","#E5896D"],
legend: {top:0,right:0,bottom:10,itemWidth:10,itemHeight:10,textStyle:{color:'#B3BFD2',fontSize:10},data: [ '管理人群', '签约人群(千人)']},
grid: {top: 17,bottom:0,left:50,right:0},
xAxis: [{type: 'value',show: false}],
yAxis: [
{
type: 'category',
axisLine:{ show: false },
axisTick: { show: false },
axisLabel: { textStyle: { color:'#B3BFD2', fontSize : 10, } },
splitLine: { show: false, onZero: false },
data: ['84岁以上', '75-84岁', '65-74岁', '55-64岁', '45-54岁', '35-44岁'],
}],
series: [
{
name: '管理人群',
type: 'bar',
stack: '总量',
label:{ normal:{ show: true, fontSize : 10, offset:[5, 0] } },
barWidth: 11,
data: [82.4, 10.7, 85.4, 10.2, 14.1, 18.81]
},
{
name: '签约人群(千人)',
type: 'bar',
stack: '总量',
label:{ normal:{ show: true, fontSize : 10, offset:[25, 0] } },
barWidth: 11,
data: [35.4, 45.4, 55.4, 22.2, 12.5, 10.57]
}
]
}
}
},
methods: {
},
mounted(){
const obj = setInterval(() => {
const dom = document.getElementById("rightupbar")
if (dom) {
const myChart = this.$echarts.init(dom)
if (this.option && typeof this.option === "object") {
myChart.setOption(this.option, true)
}
clearInterval(obj)
}
console.log(this.G_ageList);
console.log(this.Q_ageList);
}, 2200)
console.log(1);
}
}
</script>
<style lang="stylus" scoped>
#rightupbar
width 220px
height 130px
</style>
<template>
<div id="servicebox"></div>
</template>
<script>
export default{
name: 'services',
data(){
return {
}
},
methods:{
},
mounted(){
}
}
</script>
<style lang="stylus" scoped>
#servicebox
width 210px
height 128px
</style>
\ No newline at end of file
<template>
<div class="usercontainer">
<div class="userlogdom">
<p class="lgtitle">密码修改</p>
<el-input v-model="loginID" placeholder="请输入原用户名" clearable></el-input>
<el-input v-model="loginPas" placeholder="请输入原密码" show-password></el-input>
<el-input v-model="loginNewPass1" placeholder="请输入新密码" show-password> </el-input>
<el-input v-model="loginNewPass2" placeholder="请确认新密码" show-password> </el-input>
<div class="btncontainer">
<el-button type="primary" class="btn1" @click="ReUserPass()">确定</el-button>
<el-button type="primary" class="btn2"><router-link to="/">取消</router-link></el-button>
</div>
</div>
</div>
</template>
<script>
import {updatePassword} from '@/api/userlogin'
export default {
data() {
return {
loginID: '',
loginPas: '',
loginNewPass1: '',
loginNewPass2: '',
MACIP:'MAC:35:38:33:33:31:30',
checked: false
}
},
methods:{
// 修改用户密码
ReUserPass(){
let _this = this
if(!this.loginID){
this.$message({message: `账号不可为空!`,type: 'error'});
return false
}
if(!this.loginPas){
this.$message({message: `原密码不可为空!`,type: 'error'});
return false
}
if(!this.loginNewPass1){
this.$message({message: `新密码不可为空!`,type: 'error'});
return false
}
if(this.loginNewPass1 != this.loginNewPass2){
this.$message({message: `两次密码不一致!`,type: 'error'});
return false
}
if(!(this.loginNewPass1 == this.loginNewPass2)){
this.$message({message: `两次密码不一致!`,type: 'error'});
return false
}
updatePassword(_this.loginID,_this.loginPas,_this.loginNewPass1).then( res =>{
let tempmsg = res.msg
if(res.msg == "密码修改成功"){
this.$message({message: '密码修改成功',type: 'success'});
}else{
this.$message({message: `${tempmsg}`,type: 'error'});
}
this.$router.push({path: './'});
}).catch( err =>{
console.log("Error");
})
}
}
}
</script>
<style lang="stylus" scoped>
.userlogdom >>> ::-webkit-input-placeholder
color: #777;
font-size: 14px;
.userlogdom >>> .el-input
width 300px
display block
margin 10px auto
.userlogdom >>> .el-checkbox__label
color #fff
.btncontainer >>> .el-button
height 40px
padding 0
display block
.usercontainer
width 100%
height 600px
background-image url('../../assets/login_Bg1.jpg')
overflow hidden
.userlogdom
width 600px
height 500px
margin 90px auto 0
.lgtitle
width 100%
text-align center
height 35px
line-height 35px
margin-top 60px
padding-bottom 76px
font-size 28px
color #54daf8
text-shadow 0 2px 2px #000
.btncontainer
width 300px
height 60px
margin 30px auto
a
display block
width 140px
height 35px
text-decoration none
line-height 35px
color #fff
text-align center
&>button
display block
width 140px
height 35px
.btn1
float left
.btn2
float right
</style>
<template>
<div>
<div id="diabites"></div>
<div class="mywraper" v-if="hereshow">
<div class="mywrapitem">
<div class="itemtitle">市前10社区:</div>
<div class="itemplace">
<ul style="">
<li v-for="(item, index) in ranklist4" v-if="index<10" :key="index" class="itemulli">{{item}}</li>
</ul>
</div>
</div>
<div class="mywrapitem">
<div class="itemtitle">市后10社区:</div>
<div class="itemplace">
<ul><li v-for="(item, index) in reversweetAutoplacetemp" :key="index" v-if="index< 10" class="itemulli">{{item}}</li></ul>
</div>
</div>
</div>
</div>
<!-- 右下角糖尿病 柱状图表 -->
</template>
<script>
export default {
name: 'diabites',
props: { sweetAutoplacetemp: Array, sweetAutoplacevalue: Array ,ranklist4: Array},
data() {
return {
msg: '',
hereshow: false,
diabitestabshow: true,
reversweetAutoplacetemp:[],
mc_q: ['古美', '江川', '马桥', '梅陇', '浦江', '新虹', '浦锦', '吴泾', '七宝', '莘庄'],
mc_h: ['彭浦', '真如', '堡镇', '罗泾', '青村', '白鹤', '宝山', '白玉', '程家桥', '定海'],
option: {
color: ["#44A2ED"],
dataZoom: {
// start: 0, //默认为0
// end: 100, //默认为100
startValue:0,
endValue:10,
type: 'inside',
show: true,
yAxisIndex: [0],
handleSize: 20, //滑动条的 左右2个滑动条的大小
height: 180, //组件高度
left: 35, //左边的距离
right: 240, //右边的距离
bottom: 30, //右边的距离
backgroundColor: '#ccc', //两边未选中的滑动条区域的颜色
showDataShadow: true, //是否显示数据阴影 默认auto
zoomOnMouseWheel:true,
moveOnMouseMove:true,
handleStyle: {
borderColor: "#CBBCDB",
borderWidth: "2",
shadowBlur: 1,
background: "#000",
shadowColor: "#000",
},
//filterMode: 'empty',
},
grid: {
top: 5,
bottom: 25,
left: 40,
right: 30
},
xAxis: [{
type: 'value',
show: false
}],
yAxis: [{
name: "",
show: true,
type: 'category',
axisLine: {
show: false
},
axisLabel: {
interval: 0,
textStyle: {
color: '#97B8D5',
fontSize: 10
}
},
splitLine: {
show: false,
onZero: false
},
axisTick: {
show: false
},
data: ['彭浦', '真如', '堡镇', '罗泾', '青村', '白鹤', '宝山', '白玉', '程家桥', '定海']
}],
series: [{
name: '',
type: 'bar',
label: {
normal: {
show: true,
position: 'right',
fontSize: 10
}
},
barWidth: 6,
data: [15.2, 17.6, 20.0, 22.0, 24.5, 26.0, 29.7, 31.1, 32.2, 34.9, 37.3, 42.5]
}]
}
}
},
methods: {
parentHandleclick(e) {
// console.log(e);
if (e == 1) {
console.log(e);
// 状态码 1 数据位置颠倒
// 状态码 1 用于颠倒坐标轴作用
this.option.yAxis[0].data.reverse()
this.option.series[0].data.reverse()
const myChart = this.$echarts.init(document.getElementById("diabites"))
if (this.option && typeof this.option === "object") {
myChart.setOption(this.option, true)
}
} else if (e == 2) {
console.log(e);
// 状态码 2 是用于点击之后 重新渲染图表 因此弹出层不再需要,将其置为否
this.hereshow = false
// 再次渲染 echarts
const myChart = this.$echarts.init(document.getElementById("diabites"))
if (this.option && typeof this.option === "object") {
myChart.setOption(this.option, true)
}
console.log(this.option.yAxis[0].data);
console.log(this.option.series[0].data);
} else if (e == 3) {
console.log(e);
// 状态码 3 用于弹出层相关逻辑
// this.diabitestabshow 时弹出层开关 ,用以判断显示与隐藏的时机
if (this.diabitestabshow) {
this.hereshow = true
this.ranklist4.forEach(item=>{
this.reversweetAutoplacetemp.push(item)
})
this.reversweetAutoplacetemp.reverse()
} else {
this.hereshow = false
}
// 开关置反
this.diabitestabshow = !this.diabitestabshow
}
}
},
mounted() {
// console.log(JSON.stringify(this.sweetAutoplacevalue));
// console.log(JSON.stringify(this.sweetAutoplacetemp));
this.option.yAxis[0].data = this.sweetAutoplacetemp
this.option.series[0].data = this.sweetAutoplacevalue
const obj = setInterval(() => {
const dom = document.getElementById("diabites")
if (dom) {
const myChart = this.$echarts.init(dom)
if (this.option && typeof this.option === "object") {
myChart.setOption(this.option, true)
}
clearInterval(obj)
}
}, 1000)
},
watch: {
sweetAutoplacetemp() {
this.option.yAxis[0].data = this.sweetAutoplacetemp
this.option.series[0].data = this.sweetAutoplacevalue
console.log(this.option.yAxis[0].data);
console.log(this.option.series[0].data);
this.$echarts.init(document.getElementById("diabites")).setOption(this.option, true)
}
}
}
</script>
<style lang="stylus" scoped>
#diabites{width:280px; height:175px;}
.mywraper{width: 285px;height: 120px;opacity: .7;z-index:9999;position: absolute;top: 30px;right:0;background: #000000;transform: scale(0.9);margin-top: 5px;}
</style>
<!DOCTYPE html>
<html>
<body>
<div id="echats01"></div>
<script type="text/javascript">
var dom01 = document.getElementById("echats01");
var myChart01 = echarts.init(dom01);
var app = {};
option = null;
chart1();
function chart1() {
//图表一
;
//实例化图表
if(option && typeof option === "object") {
myChart01.setOption(option, true);
};
//end
}
</script>
</body>
</html>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
// 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 Axios from 'axios'
import ElementUI from 'element-ui';
import VueAxios from 'vue-axios'
import VueAweSwiper from 'vue-awesome-swiper'
import Echarts from 'echarts'
// 样式引入
import '@/assets/reset.css'
import '@/assets/home.css'
import 'swiper/css/swiper.css'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI,VueAxios, Axios);
Vue.use(VueAweSwiper,Echarts)
Vue.config.productionTip = false
Vue.prototype.$echarts = Echarts
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Index from '@/components/Index'
import UserRepass from '@/components/userJoin/UserRepass'
import UserLogin from '@/components/UserLogin'
Vue.use(Router)
export default new Router({
mode: 'history',
base: '/jkgl/',
routes: [
{
path: '/',
name: 'UserLogin',
component: UserLogin
},
{
path: '/Home',
name: 'Home',
component: Home
},
{
path: '/Index',
name: 'Index',
component: Index
},{
path: '/UserRepass',
name: 'UserRepass',
component: UserRepass
}
]
})
import axios from 'axios'
import { Notification, MessageBox } from 'element-ui'
// 创建axios实例
const service = axios.create({
baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url
timeout: 500000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
config => {
config.headers['Content-Type'] = 'application/json'
return config
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
const code = response.status
if (code < 200 || code > 300) {
Notification.error({
title: response.message
})
return Promise.reject('error')
} else {
return response.data
}
},
error => {
let code = 0
try {
code = error.response.data.status
} catch (e) {
if (error.toString().indexOf('Error: timeout') !== -1) {
Notification.error({
title: '网络请求超时',
duration: 5000
})
return Promise.reject(error)
}
}
if (code) {
if (code === 401) {
MessageBox.confirm(
'登录状态已过期,您可以继续留在该页面,或者重新登录',
'系统提示',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
})
} else if (code === 403) {
console.log('网址错误')
} else {
const errorMsg = error.response.data.message
if (errorMsg !== undefined) {
Notification.error({
title: errorMsg,
duration: 5000
})
}
}
} else {
Notification.error({
title: '接口请求失败',
duration: 5000
})
}
return Promise.reject(error)
}
)
export default service
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