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
})
})
}
.home{ background:url(./home_bg.jpg) no-repeat; width: 960px; height: 600px; margin: 0 auto; padding:15px 30px 25px 30px;}
.home2{ background:url(./home_bg.jpg) no-repeat; width: 960px; height: 600px; margin: 0 auto;}
.header{ height: 65px; background:url(guang.png) no-repeat 0 24px; background-size: 100% auto; position: relative;}
.header .nav{ float: left; width: 100px; padding-top: 15px;}
.header .nav img{ width: 30px; height: 30px;}
.header .title{ text-align: center; line-height: 40px;font-size: 22px; color: #CBEDFF; font-weight: 400; float: left; width: 700px;}
.header .area{ float: left; width: 100px; position:relative;}
.header .area .areabtn{ width: 80px; height: 30px; float: right; border: 1px solid #0261a1; padding-right: 18px; padding-left: 10px; background: #01609f; color: #fff; text-align: center; line-height: 28px; font-size: 14px; border-radius: 5px; background:#01609e url(tipdown.png) no-repeat 60px center; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
.header .area .arealist{ position:absolute; right:0; top:36px; height:236px; overflow:hidden; overflow-y:scroll; width: 100px; background: #00609F; color: #97B8D5; position: absolute; z-index: 10; border-radius: 4px; padding: 5px 0 5px 8px; }
.header .area .arealist ul{}
.header .area .arealist ul li{ line-height:25px;padding-left: 5px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap; padding-right: 10px;}
.lefter{ float: left; width: 300px;}
.topone{ height:80px; width: 300px; background: rgba(6,38,84,0.4); box-shadow: 0 0 5px rgba(22,152,216,0.5) inset; padding: 5px 19px; text-align: center; margin-bottom: 12px;}
.toptwo{ height:195px; width: 300px; background: rgba(6,38,84,0.4); box-shadow: 0 0 5px rgba(22,152,216,0.5) inset; padding:0px; text-align: center; margin-bottom: 12px;}
.topthr{ height:195px; width: 300px; background: rgba(6,38,84,0.4); box-shadow: 0 0 5px rgba(22,152,216,0.5) inset; padding:0px; text-align: center; margin-bottom: 2px;}
.middeler{ float: left; width: 300px; padding: 0 10px;}
.righter{ float: right; width: 300px;}
.topnav2{ position: absolute; right: 0px; width: 100px; top: 0; text-align: center; color: #80A0BE; font-size: 8px;}
.middtop{ height: 287px; margin-bottom: 12px;}
.middbot{ height: 280px; background: rgba(6,38,84,0.4); box-shadow: 0 0 5px rgba(22,152,216,0.5) inset; height:195px; padding:0px; text-align: center; margin-bottom: 12px;}
.topmodel{ float: left; width: 50%; text-align: center;}
.topmodel h3{ color: #42ccff;font-size: 22px!important; line-height: 35px; font-weight: normal;}
.topmodel p{ color: #97B8D5; font-size: 12px; line-height: 16px;}
.toptitle{ position: relative; background:url(title-bg.png) no-repeat left bottom; background-size: 70% auto; height: 40px; line-height: 40px; color: #eee; padding-left: 10px; font-size: 12px; text-align: left; margin-bottom:3px}
.toptitle span{ color: #97B8D8;}
.topnav{ position: absolute; right: 0px; width: 100px; top: 0; text-align: center; color: #223753; font-size: 8px;}
.topnav span{ color: #0097FD; padding: 0 5px; font-size: 12px;}
.topnav span.clk{ color: #42CCFF;}
.toplinem{ height: 150px;}
.toplinem .topline{ line-height: 21px; color: #97B8D5; text-align: left; padding-left: 10px; padding-right: 10px;}
.toplinem .topline span{ float: right;}
.toplinem .topline i{ padding: 0 6px; line-height: 12px;display: inline-block; height:8px; border-radius: 1px; background: #3FDCB7; margin-right: 6px; font-size: 10px;}
.toplinem .topline i.i1{ background:#3FDCB7}
.toplinem .topline i.i2{ background:#37C6D0}
.toplinem .topline i.i3{ background:#61A5F5}
.toplinem .topline i.i4{ background:#F3D7BC}
.toplinem .topline i.i5{ background:#FBF7AB}
.toplinem .topline i.i6{ background:#BCF8C6}
.toplinem .topline i.i7{ background:#8DEDA2}
.thrmain{ height: 160px; line-height: 20px;}
.usercontainer{ background:url(./login_Bg1.jpg) no-repeat;}
.thrmain ul{ height: 160px; line-height: 20px;}
.thrmain ul li{ float: left; width: 50%; color: #97B8D5; text-align: left; padding-left: 10px; padding-right: 10px;}
.thrmain ul li span{ float: right;}
.pagetwo{background:#272b37; width: 960px; height: 600px; margin: 0 auto; padding:5px}
.header2{ height: 62px; position: relative;}
.header2 .nav{ float: left; width: 200px; padding-top: 15px;}
.header2 .nav img{ width: 30px; height: 30px;}
.header2 .title{ text-align: center; line-height: 40px;font-size: 22px; color: #FFFFFF; font-weight: 400; float: left; width: 550px;}
.header2 .title .tp{ font-size: 20px;}
.header2 .title p{font-size:16px; line-height: 16px; margin-top: -5px;}
.header2 .area{ float: right; width: 200px; text-align:right; padding-right: 5px;}
.header2 .area .name{ clear: both; line-height: 30px; color:#B3BFD2; text-align: right; padding-right: 5px;}
.el-button--primary{ color: #fff; width: 50px; background-color: #FF69B4; border-color: #FF69B4;}
.card-dark {background: rgba(0, 0, 0, 0.21) none repeat scroll 0% 0%; border: 1px solid #000;position: relative; border-radius:5px;}
.clear10{ clear: both; height: 10px;}
.card-01{ float: left; width: 470px; height: 165px;}
.card1-mod{ float: left; width: 233px; padding: 10px; height: 165px;}
.card1-mod h2{ clear: both; line-height: 25px; font-size: 14px; color: #fff; font-weight: normal;}
.card1-mod .cmtitle{ clear: both; height: 40px; line-height: 40px;}
.card1-mod .cmtitle span{ color: #15C436; font-size: 18px;}
.card1-mod .cmtitle span.center{ padding-left: 50px;}
.card1-mod .cmtitle span.span1{ color: #eee; font-size: 10px;}
.card1-mod .cmtitle span.span2{ color:#B3BFD2;font-size: 12px;}
.card1-mod .cmtitle span.tag-blue {background: #05296a; border-radius: 50%; padding: 0 3px; border: 1px #1158c3 solid; font-size: 12px;color: #4da0c7;}
.card1-mod .cmtitle span.tag-green {background: #15C436; border-radius: 50%; padding: 0 3px; border: 1px #15C436 solid; font-size: 12px;color: #15C436;}
.card1-mod-2{ width: 400px; padding: 10px; height: 80px;}
.card1-mod-2 h2{ clear: both; line-height: 25px; font-size: 14px; color: #fff; font-weight: normal;}
.card1-mod-2 .cmtitle{ clear: both; height: 40px; line-height: 40px; padding-left: 150px;}
.card1-mod-2 .cmtitle span{ color: #15C436; font-size: 18px;}
.card1-mod-2 .cmtitle span.span1{ color: #eee; font-size: 10px;}
.card1-mod-2 .cmtitle span.span2{ color:#B3BFD2;font-size: 12px;}
.card1-mod-2 .cmtitle span.tag-blue {background: #05296a; border-radius: 50%; padding: 0 3px;border: 1px #1158c3 solid; font-size: 12px; color: #4da0c7;}
.card22-mod{ float: left; width: 300px; padding: 10px; height: 165px; color: #fff;}
.card22-mod .modtitle2{ clear: both; line-height: 25px; color: #B3BFD2;}
.card22-mod .modtitle2 span{ padding: 0 5px; color: #0097FD;}
.card22-mod .modtitle2 span.myclk{color: #42CCFF; font-weight: 600; font-size: 14px}
.card22-mod h2{ line-height: 30px; color: #FFFFFF; font-size: 13px; font-weight: normal; }
.card22-mod p{ line-height: 25px; color: #B3BFD2; font-size: 12px; font-weight: normal;}
.card22-mod .cmt{clear: both; height: 40px; line-height: 40px; margin-bottom: 30px;}
.card22-mod .cmt2{clear: both; height: 40px; line-height: 40px; margin-bottom: 4px;}
.card22-mod .cmt span{ color: #15C436; font-size: 18px;}
.card22-mod .cmt span.span1{ color: #eee; font-size: 10px;}
.card22-mod .cmt span.tag-blue {background: #05296a; border-radius: 50%; padding: 0 3px;border: 1px #1158c3 solid; font-size: 12px; color: #4da0c7;}
.card22-mod .cmt span.tag-green {background: #234631; border-radius: 50%; padding: 0 2px; border: 1px #15C436 solid; font-size: 12px;color: #15C436;}
.card33-mod{ float: left; width: 160px; padding: 10px; height: 165px; color: #fff;}
.card1-mod .cmtitle span.tag-huan { background: #095661; border: 1px #2698A8 solid; color: #78BDDE; border-radius: 50%; padding: 0 3px;font-size: 12px;}
.cmtline{ clear: both; height: 70px; padding-top: 10px;}
.cmtline p{color: #B3BFD2;}
.cmtline p span{color: #B3BFD2; float: right; width: 80px;}
.cmtline p span em{background: #095661; border: 1px #2698A8 solid; color: #78BDDE; border-radius: 50%; padding: 0 3px;font-size: 12px;}
.cmtline2{ clear: both; height: 70px; padding-top: 10px;}
.cmtline2 p{color: #B3BFD2;}
.cmtline2 p span{color: #B3BFD2; float: right;}
.cmtline2 p span em{background: #095661; border: 1px #2698A8 solid; color: #78BDDE; border-radius: 50%; padding: 0 3px;font-size: 12px;}
.card-02{ float: right; width: 470px; height: 165px; position: relative;}
.dotline{ width: 1px; border-left: 1px dotted #4C5E77; position: absolute; left: 225px; top: 18px; height: 130px;}
.card2-mod{float: left; width: 233px; padding: 5px; height: 165px; position: relative;}
.card2-mod .modtitle2{ clear: both; line-height: 25px; color: #B3BFD2;}
.card2-mod .modtitle2 span{ padding: 0 5px; color: #0097FD;}
.card2-mod .modtitle2 span.myclk{color: #42CCFF; font-weight: 600; font-size: 14px}
.card-03{ float: left; width: 150px; height: 310px; padding:10px 10px 0px 10px; overflow: hidden; overflow-y: scroll;}
.card-03 ul{width: 100%;}
.card-03 ul li{font-size: 14px;width: 100%; text-align: left; color: #B3BFD2; padding-left: 15px; margin-bottom: 9px; height: 50px; line-height: 50px; background: #1a1d25; border: 1px #13161d solid; border-radius: 25px;}
.card-03 ul li.clk{color: #fff; background: -webkit-linear-gradient(left, #0097fd, #4fb6fb);}
.card-04{ float: left; width: 470px; height: 310px; margin-left: 10px;}
.card3title1{ position: absolute; top: 5px; left:15px; height: 25px; line-height: 25px;font-size: 13px; color: #B3BFD2; z-index:999}
.card3title2{ position: absolute; top: 5px; right:5px; height: 25px; line-height: 25px; color: #B3BFD2; z-index:999}
.card3title1 span,.card3title2 span{ color: #0097FD; padding: 0 5px; font-size: 13px;}
.card3title1 span.myclk,.card3title2 span.myclk{ color: #42CCFF}
.card3title1 span.span01{ color: #B3BFD2; padding: 0;}
.card3title2 span.span01{ color: #B3BFD2; padding: 0;}
.card3main{ padding-top: 40px; padding-left: 5px; color: #fff;}
.card-05{ float: right; width: 310px; height: 310px;}
.card5title{ position: absolute; left:0px; top:0px; padding-top: 5px; line-height: 25px; color: #f1f1f1; width: 100%; padding-left: 6px;}
.card5title span{padding: 0 5px; color: #0097FD;}
.card5title span.myclk{color:#42CCFF}
.card5title span.line{color:#B3BFD2}
.card5main{margin-top: 30px; height: 260px; overflow: hidden; overflow-y: scroll;}
.card5main2{margin-top: 30px; height: 270px; overflow: hidden;}
.table01{ color: #B3BFD2;}
.table01 th{color: #B3BFD2; font-weight: normal; line-height: 20px; padding-bottom: 5px;border-bottom:1px dashed #3B4453;}
.table01 td{color: #B3BFD2; font-weight: normal; text-align: center; line-height: 29px; border-bottom:1px dashed #3B4453;}
.table01 td.underline{text-decoration: underline;}
.table01 td span{background-color: #293145;border: 1px solid #3f485e;border-radius: 15px; color: #B3BFD2;display: inline-block;font-size: 10px;height: 14px;line-height: 14px; text-align: center; min-width: 10px; box-sizing: content-box; padding: 0 2px;}
.table02{ width: 100%; color: #B3BFD2;}
.table02 td{ text-align: center; height: 21px; line-height: 21px;}
.table02 td span{width: 120px; background: #42CCFF; display: block; border-radius: 8px; height: 16px; color: #fff; line-height: 16px;}
.table02 td span.span01{width: 120px; background: #3AAEB9}
.table02 td span.span02{width: 120px; background: #3A82B9}
.table02 td span.span03{width: 120px; background: #204B77}
.table02 td span.span11{width: 90px; background: #3AAEB9}
.table02 td span.span22{width: 90px; background: #3A82B9; text-align: center;}
.table02 td span.span33{width: 90px; background: #204B77}
.table02 td span.nv{ background: #3A82B9;}
.table02 td span.sp01{width: 90px;}
.table02 td i{ width: 10px;}
.table{ width: 100%; }
.fixedThead{display: block;width: 100%;}
.scrollTbody{ display: block; height: 225px; overflow: auto; width: 100%; }
.table tr{display:inline-table; width: 100%; }
.table03{ width: 100%; color: #B3BFD2;}
.table03 td{ height: 30px;}
.overl{ line-height: 30px; font-size: 12px; color: #B3BFD2;}
.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;}
.mywrapitem{width: 100%;height: 60px;}
.itemtitle{width: 100px;height: 100%;float: left;font-size: 13px;padding-left: 10px;}
.itemplace{width: 180px;height: 100%;float: left;}
.itemplace ul{}
.itemplace ul li{width: 35px;display: inline-block;font-size: 12px;height: 25px;line-height: 25px;float: left; overflow: hidden;}
.color1{color: #42ccff;}
.color2{color: #FF7277;}
.color3{ color: #15C436;}
#color4{}
\ No newline at end of file
*{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>
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide>
<div class="home">
<div class="header">
<div class="nav" @click="exitFn"><img src="../assets/icon_nav_cell.png"></div>
<div class="title">上海市疾病预防控制管理服务云平台</div>
<div class="area" @click="cityFn()">
<div class="areabtn">{{cityname}}</div>
<div class="arealist" v-show="iscity">
<ul>
<li @click="changeCity(item.value,item.label,index,item.YLGM)" v-for="(item, index) in OptionsPlace"
:key="index" class="Placecls">{{item.label}}</li>
</ul>
</div>
</div>
</div>
<!----左边---->
<div class="lefter">
<div class="topone">
<div class="topmodel">
<h3>{{left1}}</h3>
<p>高血压患者<br />当前死亡后随访人数</p>
</div>
<div class="topmodel">
<h3>{{left2}}</h3>
<p>糖尿病患者<br />当前死亡后随访人数</p>
</div>
</div>
<div class="toptwo">
<div class="toptitle">高血压当前死亡后随访人数<span>(人)</span>
<div class="topnav" v-if="threeCode == 1"><span class="clk topbocolor" @click="changecolor(0)">Top</span>
| <span class="topbocolor" @click="changecolor(1)">Bottom</span></div>
<div class="topnav2" v-if="threeCode == 2" @click="getShow(0)">市排名 {{rank1}}</div>
<div class="topnav2" v-if="threeCode == 3" @click="getShow(0)">市/区 ({{rankplace1[0]}}/{{rankplace1[1]}})</div>
<HypertensionDie ref="HypertenCom" :propTest="propTest" :hyperplacetemp="hyperplacetemp" :hyperplacevalue="hyperplacevalue"
:PlaceCode="PlaceCode" :ranklist1="ranklist1"></HypertensionDie>
</div>
</div>
<div class="topthr">
<div class="toptitle">糖尿病当前死亡后随访人数<span>(人)</span>
<div class="topnav" v-if="threeCode == 1"><span class="clk topbocolor" @click="changecolor(2)">Top</span>|<span
class="topbocolor" @click="changecolor(3)">Bottom</span></div>
<div class="topnav2" v-if="threeCode == 2" @click="getShow(1)">市排名 {{rank2}}</div>
<div class="topnav2" v-if="threeCode == 3" @click="getShow(1)">市/区 ({{rankplace2[0]}}/{{rankplace2[1]}})</div>
<div class="mywraper" v-if="hereshow">
<div class="mywrapitem">
<div class="itemtitle">市前10社区:</div>
<div class="itemplace">
<ul>
<li v-for="(item, index) in reversweetBar2" :key="index" v-if="index< 10" 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 reversweetBar" :key="index" v-if="index< 10" class="itemulli">{{item}}</li>
</ul>
</div>
</div>
</div>
</div>
<div class="thrmain" v-if="threeCode == 1">
<ul class="width50">
<li v-for="(item, index) in sweetBar" :key="index" v-if="index <8" class="cls01">
<span>{{item.value}}</span>{{index+1}}{{item.place}}
</li>
</ul>
<ul class="width50">
<li v-for="(item, index) in sweetBar" :key="index" v-if="8<index " class="cls01">
<span>{{item.value}}</span>{{index+1}}{{item.place}}
</li>
</ul>
</div>
<div class="thrmain" v-if="threeCode == 2">
<ul class="width100">
<li class="cls02" v-for="(item, index) in sweetBar" :key="index" v-if="index<10">
<span>{{item.value}}</span>{{index + 1}}{{item.place}}
</li>
</ul>
</div>
<div class="thrmain" v-show="threeCode == 3">
<div id="thrmain"></div>
</div>
</div>
</div>
<!----中间---->
<div class="middeler">
<div class="middtop">
<CenterCircle :supervisionall="supervisionall"></CenterCircle>
</div>
<div class="middbot">
<div class="toptitle">高血压血压记录自动上传比例<span>(%)</span>
<div class="topnav" v-if="threeCode == 1"><span class="clk topbocolor" @click="changecolor(4)">Top</span>|<span
class="topbocolor" @click="changecolor(5)">Bottom</span></div>
<div class="topnav2" v-if="threeCode == 2" @click="getShow(2)">市排名 {{rank3}}</div>
<div class="topnav2" v-if="threeCode == 3" @click="getShow(2)">市/区 ({{rankplace3[0]}}/{{rankplace3[1]}})</div>
<HyperPercent ref="HyperperCom" :hyperAutoplacetemp="hyperAutoplacetemp" :hyperAutoplacevalue="hyperAutoplacevalue"
:ranklist3="ranklist3"></HyperPercent>
</div>
</div>
</div>
<!----右边---->
<div class="righter">
<div class="topone">
<div class="topmodel">
<h3>{{right1}}</h3>
<p>医疗机构登记报告<br />信息化情况(肿瘤)</p>
</div>
<div class="topmodel">
<h3>{{right2}}</h3>
<p>医疗机构登记报告<br />信息化情况(心脑)</p>
</div>
</div>
<div class="toptwo">
<div class="toptitle">重点监管指标</div>
<div class="toplinem">
<div class="topline"><span>{{supervisionlist1}}%</span><i class="i1"></i>高血压患者累计死后随访比</div>
<div class="topline"><span>{{supervisionlist2}}%</span><i class="i2"></i>糖尿病患者累计死后随访比</div>
<div class="topline"><span>{{supervisionlist3}}%</span><i class="i3"></i>糖尿病患者糖化血红蛋白自动上传比例</div>
<div class="topline"><span>{{supervisionlist4}}%</span><i class="i4"></i>高血压患者血压记录自动上传比例</div>
<div class="topline"><span>{{supervisionlist5}}%</span><i class="i5"></i>年内按计划随访高血压患者完成比例</div>
<div class="topline"><span>{{supervisionlist6}}%</span><i class="i6"></i>年内按计划随访糖尿病患者完成比例</div>
<div class="topline"><span>{{supervisionlist7}}%</span><i class="i7"></i>首诊测压血压异常率</div>
</div>
</div>
<div class="topthr">
<div class="toptitle">糖尿病糖化血红蛋白自动上传比例<span>(%)</span>
<div class="topnav" v-if="threeCode == 1"><span class="clk topbocolor" @click="changecolor(6)">Top</span>|<span
class="topbocolor" @click="changecolor(7)">Bottom</span></div>
<div class="topnav2" v-if="threeCode == 2" @click="getShow(3)">市排名 {{rank4}}</div>
<div class="topnav2" v-if="threeCode == 3" @click="getShow(3)">市/区 ({{rankplace4[0]}}/{{rankplace4[1]}})</div>
<DiaBites ref="DiaBitesCom" :sweetAutoplacetemp="sweetAutoplacetemp" :sweetAutoplacevalue="sweetAutoplacevalue" :ranklist4="ranklist4"></DiaBites>
</div>
</div>
</div>
</div>
</swiper-slide>
<swiper-slide>
<screenTwoPag1 v-if="screenTagshow == 1" @screenTwoPagefunc="changeScreenTwo" :PlaceCode="PlaceCode"></screenTwoPag1>
<screenTwoPag2 v-else-if="screenTagshow == 2" @screenTwoPagefunc="changeScreenTwo" :PlaceCode="PlaceCode"></screenTwoPag2>
<screenTwoPag3 v-else-if="screenTagshow == 3" @screenTwoPagefunc="changeScreenTwo" :PlaceCode="PlaceCode"></screenTwoPag3>
<screenTwoPag4 v-else-if="screenTagshow == 4" @screenTwoPagefunc="changeScreenTwo" :PlaceCode="PlaceCode"></screenTwoPag4>
<screenTwoPag5 v-else-if="screenTagshow == 5" @screenTwoPagefunc="changeScreenTwo" :PlaceCode="PlaceCode"></screenTwoPag5>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
import UserLogin from './UserLogin'
import HypertensionDie from './UserJoin/HypertensionDie'
import CenterCircle from './UserJoin/CenterCircle'
import DiaBites from './UserJoin/diabites'
import HyperPercent from './UserJoin/HyperPercent'
import MiddleBar from './UserJoin/MiddleBar'
import RightUpBar from './UserJoin/RightUpBar'
import screenTwoPag1 from './UserJoin/screenTwoPag1'
import screenTwoPag2 from './UserJoin/screenTwoPag2'
import screenTwoPag3 from './UserJoin/screenTwoPag3'
import screenTwoPag4 from './UserJoin/screenTwoPag4'
import screenTwoPag5 from './UserJoin/screenTwoPag5'
import {
commonMethod,
otherMethod
} from '@/api/home.js'
export default {
name: 'Home',
data() {
return {
rank1: 0,
rank2: 0,
rank3: 0,
rank4: 0,
ranklist1: [],
ranklist2: [],
ranklist3: [],
ranklist4: [],
rankplace1: [],
rankplace2: [],
rankplace3: [],
rankplace4: [],
iscity: false,
cityname: '上海市',
objParam: {},
themeID: '44',
themeID2: '41',
token: '',
msg: '',
propTest: 99999,
PlaceIndex: 0,
placeFlag: true,
// 请求数据变量 ↓
left1: 0,
left2: 0,
right1: 0,
right2: 0,
// 高血压 --- 当前死亡后随访 数据赋值
hyperBar: [],
hyperplacetemp: [],
hyperplacevalue: [],
// 高血压 --- 自动上传 数据赋值
hyperAutoBar: [],
hyperAutoplacetemp: [],
hyperAutoplacevalue: [],
// 糖尿病 数据赋值
sweetBar: [],
reversweetBar2: [], // 正序排列
reversweetBar: [],
sweetplacetemp: [],
sweetplacevalue: [],
// 糖尿病 --- 自动上传 数据赋值
sweetAutoBar: [],
sweetAutoplacetemp: [],
sweetAutoplacevalue: [],
// 右侧重点监管指标列表变量 顺序依次对应
supervisionlist1: 0,
supervisionlist2: 0,
supervisionlist3: 0,
supervisionlist4: 0,
supervisionlist5: 0,
supervisionlist6: 0,
supervisionlist7: 0,
supervisionall: [],
// 请求数据变量 ↑
threeCode: 1, // 控制左下角的显示状态
hereshow: false,
screenTagshow: 1, // 用于显示 屏2 某一个具体页面的
isShow: true,
hometabshow: false,
swiperOptions: {
pagination: '.swiper-pagination',
paginationClickable: true
},
DiachangeFlag: 0,
DiabitesDate: [],
OptionsPlace: [],
PlaceCode: "",
option: {
grid: {
left: 50,
right: 40,
bottom: 50,
top: 30,
},
dataZoom: {
start: 0, //默认为0
end: 50, //默认为100
type: 'slider',
show: true,
xAxisIndex: [0],
handleSize: 0, //滑动条的 左右2个滑动条的大小
height: 8, //组件高度
left: 20, //左边的距离
right: 20, //右边的距离
bottom: 70, //右边的距离
backgroundColor: '#ccc', //两边未选中的滑动条区域的颜色
showDataShadow: true, //是否显示数据阴影 默认auto
filterMode: 'filter',
},
xAxis: {
name: "(月)",
nameLocation: 'center',
nameTextStyle: {
fontSize: 10,
padding: [-7, 0, 0, 235]
},
type: 'category',
axisLine: {
lineStyle: {
color: '#97B8D5',
type: 'solid'
}
},
axisLabel: {
interval: 0,
rotate: 70,
textStyle: {
color: '#97B8D5',
fontSize: 10
}
},
splitLine: {
show: false,
onZero: false
},
axisTick: {
show: false
},
data: []
},
yAxis: {
name: '(岁)',
type: 'value',
axisLabel: {
textStyle: {
color: '#97B8D5',
fontSize: 10
},
formatter: function(value) {
if (value >= 35 && value <= 44) {
return "35-44";
} else if (value >= 45 && value <= 54) {
return "45-54";
}
if (value >= 55 && value <= 64) {
return "55-64";
} else if (value >= 65 && value <= 74) {
return "65-74";
} else if (value >= 75 && value <= 84) {
return "75-84";
} else if (value >= 85) {
return "85以上";
} else {
return "";
}
}
},
axisLine: {
lineStyle: {
color: '#97B8D5',
type: 'solid'
},
},
splitLine: {
show: false
},
axisTick: {
show: false
}
},
dataZoom: [{
type: 'inside',
startValue: 0,
filterMode: 'empty',
endValue: 14
}],
series: [{
name: '无',
type: 'scatter',
itemStyle: {
normal: {
color: function(param) {
var num = param.data[1];
if (num <= 54.999) {
return 'rgba(9,144,35,1)'
} else if (num >= 55 && num <= 73.999) {
return 'rgba(9,144,35,0.7)'
} else if (num >= 84) {
return 'rgba(9,144,35,0.4)'
}
},
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: [
]
}, ]
},
value: '',
PlaceLevel: 'XZQH',
cityArea: 1
}
},
methods: {
exitFn() {
this.$router.push({
path: '/Index'
});
},
cityFn() {
this.iscity = this.iscity ? false : true
},
changeCity(param, pname, index, YLGM) {
console.log('当前地区代码:' + param)
console.log('当前医疗机构代码:' + YLGM);
this.PlaceCode = param > 3100 ? param : ''
this.cityname = pname
// 在此通过 选中地址来对页面操作
if (param == 3100) {
console.log("选中上海");
// 选中上海的情况
this.isShow = true
this.hereshow = false
// 切换右上角选择器后,左下角的状态显示
this.threeCode = 1
this.PlaceLevel = 'XZQH'
this.cityArea = 1
console.log('param1');
this.themeID = 44
//点击回到"市-区"分级
let param9 = {
"dataDetailId": 1,
"wd": [],
"group": this.PlaceLevel
}
console.log("执行!!!!");
// this.placeFlag = true
otherMethod(param9).then(res => {
console.log(res)
this.OptionsPlace = [{
'value': '3100',
'label': '上海市'
}]
res.data.forEach(item => {
let valobj = {
'value': '',
'label': '',
'YLGM': ''
}
// console.log(item.XZQHBM);
if (item.XZQHBM > 310) {
valobj.value = item.XZQHBM
valobj.label = item.XZQHJC
this.OptionsPlace.push(valobj)
}
})
// document.querySelectorAll('Placecls')[0].classList.remove('placeclk')
}).catch(err => {
console.log("--市-区接口报错--");
})
this.$refs.HypertenCom.parentHandleclick(2);
this.$refs.HyperperCom.parentHandleclick(2);
this.$refs.DiaBitesCom.parentHandleclick(2);
this.homeinit()
} else if (!YLGM) {
console.log("选中市区"); // 实际上是展示乡镇
this.threeCode = 2
this.cityArea = 2
//点击得到 "区分级"
console.log('param2');
this.PlaceLevel = 'YLJGDM'
console.log(param);
this.themeID = 45
this.isShow = false
this.PlaceIndex = index
let wd = [{
'name': 'XZQH',
'value': param,
'type': '1'
},
{
"name": "YLJGDM",
"value": YLGM,
"type": "1"
}
]
// {"dataDetailId":2,"wd":"[{\"name\":\"XZQH\",\"value\":\"310116000000\",\"type\":\"1\"},{\"name\":\"YLJGDM\",\"value\":\"42502198200\",\"type\":\"1\"}]","group":"YWSJ"}
// {"dataDetailId":2,"wd":"[{\"name\":\"XZQH\",\"value\":\"310101000000\",\"type\":\"1\"},{\"name\":\"YLJGDM\",\"value\":\"\",\"type\":\"1\"}]","group":"YLJGDM"}
let param9 = {
"dataDetailId": 2,
"wd": JSON.stringify(wd),
"group": this.PlaceLevel
}
console.log(JSON.stringify(param9));
otherMethod(param9).then(res => {
// console.log('Line415: '+JSON.stringify(res));
// console.log('城市-----' + param)
//if(this.placeFlag){
this.OptionsPlace = [{
'value': '3100',
'label': '上海市'
}]
res.data.forEach(item => {
let valobj = {
'value': '',
'label': '',
'YLGM': ''
}
valobj.label = item.YLJGJC // 名字
valobj.value = param // 31010200000
valobj.YLGM = item.YLJGBM // 医疗机构代码
this.OptionsPlace.push(valobj)
})
// console.log(JSON.stringify(this.OptionsPlace));
//this.placeFlag = false
//}
}).catch(err => {
console.log("--切换区域报错--");
})
this.homeinit()
} else if (YLGM) {
// console.log('param: ' + param);
// console.log('YLGM: ' + YLGM);
// console.log(this.OptionsPlace);
this.threeCode = 3
// console.log("选中乡镇: "+param);
this.cityArea = 3
this.PlaceLevel = 'YWSJ'
this.themeID = 44
this.isShow = true
let mytest1 = [{
"name": "YWSJ",
"endTime": "2019-02",
"type": "2",
"startTime": "2019-02",
"compare": "between"
}, {
"name": "XZQH",
"value": param,
"type": "1"
}, {
"name": "YLJGDM",
"value": YLGM,
"type": "1"
}, {
"name": "CUS1",
"value": "1116",
"type": "1"
}]
let testparam1 = {
"dataDetailId": "3",
"wd": JSON.stringify(mytest1)
}
otherMethod(testparam1).then(res => {
if (res.data.length > 0) {
this.rankplace1[0] = res.data[0].RANK
this.rankplace1[1] = res.data[1].RANK
} else {
this.rankplace1[0] = '-'
this.rankplace1[1] = '-'
}
})
let mytest2 = [{
"name": "YWSJ",
"endTime": "2019-02",
"type": "2",
"startTime": "2019-02",
"compare": "between"
}, {
"name": "XZQH",
"value": param,
"type": "1"
}, {
"name": "YLJGDM",
"value": YLGM,
"type": "1"
}, {
"name": "CUS1",
"value": "1117",
"type": "1"
}]
let testparam2 = {
"dataDetailId": "3",
"wd": JSON.stringify(mytest2)
}
otherMethod(testparam2).then(res => {
if (res.data.length > 0) {
this.rankplace2[0] = res.data[0].RANK
this.rankplace2[1] = res.data[1].RANK
} else {
this.rankplace2[0] = '-'
this.rankplace2[1] = '-'
}
})
let mytest3 = [{
"name": "YWSJ",
"endTime": "2019-02",
"type": "2",
"startTime": "2019-02",
"compare": "between"
}, {
"name": "XZQH",
"value": param,
"type": "1"
}, {
"name": "YLJGDM",
"value": YLGM,
"type": "1"
}, {
"name": "CUS1",
"value": "1116",
"type": "1"
}]
let testparam3 = {
"dataDetailId": "3",
"wd": JSON.stringify(mytest3)
}
otherMethod(testparam3).then(res => {
if (res.data.length > 0) {
this.rankplace3[0] = res.data[0].RANK
this.rankplace3[1] = res.data[1].RANK
} else {
this.rankplace3[0] = '-'
this.rankplace3[1] = '-'
}
})
let mytest4 = [{
"name": "YWSJ",
"endTime": "2019-02",
"type": "2",
"startTime": "2019-02",
"compare": "between"
}, {
"name": "XZQH",
"value": param,
"type": "1"
}, {
"name": "YLJGDM",
"value": YLGM,
"type": "1"
}, {
"name": "CUS1",
"value": "1116",
"type": "1"
}]
let testparam4 = {
"dataDetailId": "3",
"wd": JSON.stringify(mytest4)
}
otherMethod(testparam4).then(res => {
if (res.data.length > 0) {
this.rankplace4[0] = res.data[0].RANK
this.rankplace4[1] = res.data[1].RANK
} else {
this.rankplace4[0] = '-'
this.rankplace4[1] = '-'
}
})
// let wd = [{
// 'name': 'XZQH',
// 'value': param,
// 'type': '1'
// },
// {
// "name":"YLJGDM",
// "value":YLGM,
// "type":"1"
// }]
// let param9 = {
// "dataDetailId": 2,
// "wd": JSON.stringify(wd),
// "group": this.PlaceLevel
// }
// console.log("执行!!!!");
// otherMethod(param9).then(res => {
// console.log('Line459: '+JSON.stringify(res));
// console.log(JSON.stringify(param9));
//
// // document.querySelectorAll('Placecls')[0].classList.remove('placeclk')
// }).catch(err => {
// console.log("--市-区接口报错--");
// })
this.homeinit()
// console.log(JSON.stringify(this.sweetAutoplacetemp))
// console.log(JSON.stringify(this.sweetAutoplacevalue))
this.$refs.HypertenCom.parentHandleclick(2);
this.$refs.HyperperCom.parentHandleclick(2);
this.$refs.DiaBitesCom.parentHandleclick(2);
// console.log(this.OptionsPlace);
}
},
homeinit() {
let _this = this
//测试定义接口
let wd = [{
'name': 'YWSJ',
'startTime': '2018-01',
'endTime': '2018-12',
'compare': 'between',
'type': '2'
},
{
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
},
]
let param = {
"themeId": _this.themeID,
"wd": JSON.stringify(wd),
"group": this.PlaceLevel
}
//高血压 以及 糖尿病死亡随访人数获取 以及 echarts图表传值
console.log(param);
console.log(JSON.stringify(param));
console.log(12312312);
let T = {
"themeId": 44,
"wd": [{
"name": "YWSJ",
"startTime": "2018-01",
"endTime": "2018-12",
"compare": "between",
"type": "2",
}, {
"name": "XZQH",
"value": "310101000000",
"type": "1",
}],
"group": 'YWSJ',
}
commonMethod(T).then(res => {
// console.log('resssssss: '+ JSON.stringify(res));
})
commonMethod(param).then(res => {
this.sweetBar = []
// console.log(JSON.stringify(res));
res.data.content.forEach(item => {
let obj = {
place: '',
value: 0
}
let sweetobj = {
place: '',
value: 0
}
let autoHyperObj = {
place: '',
value: 0
}
let autoSweetObj = {
place: '',
value: 0
}
// console.log(JSON.stringify(item));
if (this.cityArea == 1) {
obj.place = item.XZQH_TEXT ? item.XZQH_TEXT : " "
sweetobj.place = item.XZQH_TEXT ? item.XZQH_TEXT : " "
autoHyperObj.place = item.XZQH_TEXT ? item.XZQH_TEXT : " "
autoSweetObj.place = item.XZQH_TEXT ? item.XZQH_TEXT : " "
} else if (this.cityArea == 2) {
obj.place = item.YLJGDM_EX2 ? item.YLJGDM_EX2 : "地名缺失"
sweetobj.place = item.YLJGDM_EX2 ? item.YLJGDM_EX2 : "地名缺失"
autoHyperObj.place = item.YLJGDM_EX2 ? item.YLJGDM_EX2 : "地名缺失"
autoSweetObj.place = item.YLJGDM_EX2 ? item.YLJGDM_EX2 : "地名缺失"
} else {
obj.place = item.YWSJ ? item.YWSJ.substring(5, 7) + '月' : "月份缺失"
sweetobj.place = item.YWSJ ? item.YWSJ.substring(5, 7) + '月' : "月份缺失"
autoHyperObj.place = item.YWSJ ? item.YWSJ.substring(5, 7) + '月' : "月份缺失"
autoSweetObj.place = item.YWSJ ? item.YWSJ.substring(5, 7) + '月' : "月份缺失"
}
// sweetobj.place = item.XZQH_TEXT ? item.XZQH_TEXT : " "
// autoHyperObj.place = item.XZQH_TEXT ? item.XZQH_TEXT : " "
// autoSweetObj.place = item.XZQH_TEXT ? item.XZQH_TEXT : " "
item.zbxx.forEach(item2 => {
if (item2.ZBID == "1116") {
obj.value = item2.ZXZ
}
if (item2.ZBID == "1117") {
sweetobj.value = item2.ZXZ
}
if (item2.ZBID == "1063") {
// console.log( item2.ZXZ);
autoHyperObj.value = item2.ZXZ
}
if (item2.ZBID == "1069") {
// console.log(JSON.stringify(item2));
autoSweetObj.value = item2.ZXZ
}
//糖尿病 ---自动上传数据赋值
})
// 高血压死亡回访 数据压栈
this.hyperBar.push(obj)
// 糖尿病死亡回访 数据压栈
this.sweetBar.push(sweetobj)
// 高血压自动上传 数据压栈
this.hyperAutoBar.push(autoHyperObj)
// 糖尿病自动上传 数据压栈
this.sweetAutoBar.push(autoSweetObj)
})
// console.log(JSON.stringify(this.hyperAutoBar));
// console.log(this.PlaceCode);
// 此处的设置为空数组 是为了防止切换地区时候的 再次数据请求(push)让最终数据重复。
this.hyperplacevalue = []
this.hyperplacetemp = []
this.hyperAutoplacetemp = []
this.hyperAutoplacevalue = []
this.sweetAutoplacetemp = []
this.sweetAutoplacevalue = []
// 高血压数据清洗
// console.log('--------------------------')
// console.log(this.hyperBar)
if (this.threeCode == 3) {
this.hyperBar.sort((prev, next) => {
return parseInt(prev.place.substring(0, 2)) - parseInt(next.place.substring(0, 2))
})
this.hyperBar.forEach((item, index) => {
// this.left1 += parseInt(item.value)
this.hyperplacetemp.push(item.place)
this.hyperplacevalue.push(item.value)
// cityname rank1
})
} else {
this.hyperBar.sort((prev, next) => {
return next.value - prev.value
}).forEach((item, index) => {
// this.left1 += parseInt(item.value)
this.hyperplacetemp.push(item.place)
this.hyperplacevalue.push(item.value)
// cityname rank1
})
}
// 区发生变动的时候 令组件重新渲染
this.hyperBar = []
// 糖尿病当前死亡随访人数 子排序 以及 计算出死亡总人数
// sweetBar 是当前home页面数据, 因为左下角的列表数据就是用 sweetBar v-for渲染出来的
// 它不可以在此处被置为空,在函数开始的时候置空即可
// 这里也不需要 分开 地区变量 与 数值变量
if (this.threeCode == 3) {
this.option.xAxis.data = []
this.option.series[0].data = []
this.sweetBar.sort((prev, next) => {
return parseInt(prev.place.substring(0, 2)) - parseInt(next.place.substring(0, 2))
}).forEach(item => {
this.option.xAxis.data.push(item.place)
this.option.series[0].data.push(item.value)
})
console.log(JSON.stringify(this.sweetBar));
this.$echarts.init(document.getElementById("thrmain")).setOption(this.option, true)
} else {
this.sweetBar.sort((prev, next) => {
return next.value - prev.value
})
}
console.log(this.sweetBar);
if (this.threeCode != 3) {
this.reversweetBar = []
this.reversweetBar2 = []
this.sweetBar.forEach(item => {
this.reversweetBar2.push(item.place)
this.reversweetBar.push(item.place)
})
console.log(this.reversweetBar2);
this.reversweetBar.reverse()
}
console.log(this.reversweetBar2);
// console.log(JSON.stringify(this.sweetBar));
// console.log(JSON.stringify(this.reversweetBar.reverse()));
// 高血压患者 血压记录自动上传比例 数据清洗
if (this.threeCode == 3) {
this.hyperAutoBar.sort((prev, next) => {
return parseInt(prev.place.substring(0, 2)) - parseInt(next.place.substring(0, 2))
}).forEach(item => {
this.hyperAutoplacetemp.push(item.place)
this.hyperAutoplacevalue.push(item.value)
})
} else {
this.hyperAutoBar.sort((prev, next) => {
return next.value - prev.value
}).forEach(item => {
this.hyperAutoplacetemp.push(item.place)
this.hyperAutoplacevalue.push(item.value)
})
}
this.hyperAutoBar = []
// 糖尿病 糖化血蛋白记录自动上传比例 数据清洗
if (this.threeCode == 3) {
this.sweetAutoBar.sort((prev, next) => {
return parseInt(prev.place.substring(0, 2)) - parseInt(next.place.substring(0, 2))
})
console.log(this.sweetAutoBar);
this.sweetAutoBar.reverse().forEach(item => {
this.sweetAutoplacetemp.push(item.place)
this.sweetAutoplacevalue.push(item.value)
})
let tempArr = [],
tempAllArr;
console.log(this.sweetAutoplacetemp);
this.sweetAutoplacetemp.forEach((item, index) => {
tempAllArr = [this.sweetAutoplacetemp[index], this.sweetAutoplacevalue[index]]
})
} else {
this.sweetAutoBar.sort((prev, next) => {
return prev.value - next.value
}).forEach(item => {
this.sweetAutoplacetemp.push(item.place)
this.sweetAutoplacevalue.push(item.value)
})
}
if (this.threeCode != 3) {
this.ranklist1 = this.hyperplacetemp
this.ranklist2 = this.reversweetBar
this.ranklist3 = this.hyperAutoplacetemp
this.ranklist4 = this.sweetAutoplacetemp
}
this.ranklist1.forEach((item, index) => {
// console.log(item);
// console.log(this.cityname);
if (item == this.cityname) {
this.rank1 = index + 1
}
})
this.ranklist2.forEach((item, index) => {
// console.log(item);
// console.log(this.cityname);
if (item == this.cityname) {
this.rank2 = index + 1
}
})
this.ranklist3.forEach((item, index) => {
// console.log(item);
// console.log(this.cityname);
if (item == this.cityname) {
this.rank3 = index + 1
}
})
this.ranklist4.forEach((item, index) => {
// console.log(item);
// console.log(this.cityname);
if (item == this.cityname) {
this.rank4 = index + 1
}
})
// console.log(this.ranklist1);
// console.log(this.ranklist2);
// console.log(this.ranklist3);
// console.log(this.ranklist4);
this.$echarts.init(document.getElementById("thrmain")).setOption(this.option, true)
// console.log(JSON.stringify(this.sweetAutoplacetemp))
// console.log(JSON.stringify(this.sweetAutoplacevalue))
this.sweetAutoBar = []
}).catch(err => {
console.log("--测试定义接口报错--");
})
// 右侧重点监管指标列表变量 顺序依次对应
// 此处请求的也是 44 但请求的不是分组, 而是总体
console.log(this.PlaceLevel);
console.log(this.PlaceCode);
this.supervisionall = []
commonMethod({
"themeId": _this.themeID,
"wd": JSON.stringify(wd),
"group": this.PlaceLevel
}).then(res => {
// console.log(JSON.stringify(res));
res.data.content.forEach(item => {
item.zbxx.forEach(item2 => {
if (item2.ZBID == "1116") {
this.left1 = item2.ZXZ
}
if (item2.ZBID == "1117") {
this.left2 = item2.ZXZ
}
if (item2.ZBID == "1110") {
this.supervisionlist1 = parseFloat(item2.ZXZ).toFixed(1)
}
if (item2.ZBID == "1113") {
this.supervisionlist2 = parseFloat(item2.ZXZ).toFixed(1)
}
if (item2.ZBID == "1069") {
this.supervisionlist3 = parseFloat(item2.ZXZ).toFixed(1)
}
if (item2.ZBID == "1063") {
this.supervisionlist4 = parseFloat(item2.ZXZ).toFixed(1)
}
if (item2.ZBID == "1057") {
this.supervisionlist5 = parseFloat(item2.ZXZ).toFixed(1)
}
if (item2.ZBID == "1060") {
this.supervisionlist6 = parseFloat(item2.ZXZ).toFixed(1)
}
if (item2.ZBID == "1017") {
this.supervisionlist7 = parseFloat(item2.ZXZ).toFixed(1)
}
})
})
this.supervisionall.push(parseFloat(this.supervisionlist1))
this.supervisionall.push(parseFloat(this.supervisionlist2))
this.supervisionall.push(parseFloat(this.supervisionlist3))
this.supervisionall.push(parseFloat(this.supervisionlist4))
this.supervisionall.push(parseFloat(this.supervisionlist5))
this.supervisionall.push(parseFloat(this.supervisionlist6))
this.supervisionall.push(parseFloat(this.supervisionlist7))
// console.log(JSON.stringify(this.supervisionall));
console.log(this.supervisionall);
})
// 右上角 医疗机构等记 报告(肿癌、心脑) 人数获取 以及 echarts图表传值
let wd41 = [{
"name": "YWSJ",
"endTime": "2018-12",
"type": "2",
"startTime": "2018-01",
"compare": "between"
},
{
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
},
]
//var zbcode="MBZFX_016";单独读取
let param41 = {
"themeId": 41,
"wd": JSON.stringify(wd41),
"group": this.PlaceLevel
}
// commonMethod(param41).then(res => {
// res.data.content[0].zbxx.forEach(item => {
// if (item.ZBID == "1002") {
// this.right1 = item.ZXZ
// }
// if (item.ZBID == "1011") {
// this.right2 = item.ZXZ
// }
// })
// }).catch(err => {
// console.log("--右上角 医疗机构等记接口报错--");
// })
},
cicyinti() {
let param9 = {
"dataDetailId": 1,
"wd": [],
"group": this.PlaceLevel
}
otherMethod(param9).then(res => {
this.OptionsPlace = [{
'value': '3100',
'label': '上海市'
}]
res.data.forEach(item => {
let valobj = {
'value': '',
'label': '',
'YLGM': ''
}
if (item.XZQHBM > 310) {
valobj.value = item.XZQHBM
valobj.label = item.XZQHJC
}
this.OptionsPlace.push(valobj)
// console.log(JSON.stringify(this.OptionsPlace));
})
}).catch(err => {
console.log("--初始化获取地区报错--");
})
},
getShow(ShowCode) {
if (ShowCode == 0) {
// 左上角服务
this.$refs.HypertenCom.parentHandleclick(3);
} else if (ShowCode == 1) {
// 此处只为左下角的图服务,因为其在home页,非组件内
// 判断是否为奇次点击
this.hometabshow = !this.hometabshow
if (this.hometabshow) {
// 显示
this.hereshow = true
} else {
// 隐藏
this.hereshow = false
}
} else if (ShowCode == 2) {
// 为右下角糖尿病 折线图 服务
this.$refs.HyperperCom.parentHandleclick(3);
} else if (ShowCode == 3) {
// 为 右下角糖尿病 柱状图 服务
this.$refs.DiaBitesCom.parentHandleclick(3);
}
},
changecolor(ColorNum) {
// 颜色变更 ‘0,1’ ‘2,3’ ‘4,5’ 为一组,以此类推
if (ColorNum === 0 || ColorNum === 1) {
this.$refs.HypertenCom.parentHandleclick(1);
} else if (ColorNum === 2 || ColorNum === 3) {
console.log(JSON.stringify(this.sweetBar));
if (this.DiachangeFlag % 2 == 0) {
this.sweetBar.sort((prev, next) => {
return prev.value - next.value
})
} else {
this.sweetBar.sort((prev, next) => {
return next.value - prev.value
})
}
this.DiachangeFlag++
} else if (ColorNum === 4 || ColorNum === 5) {
this.$refs.HyperperCom.parentHandleclick(1);
} else {
this.$refs.DiaBitesCom.parentHandleclick(1);
}
// 样式变化
// 判断奇偶, 此处监听奇数执行
if (ColorNum % 2 == 0) {
// 奇数添加样式
document.querySelectorAll('.topbocolor')[ColorNum].classList.add('clk')
// 偶数删除样式
document.querySelectorAll('.topbocolor')[ColorNum + 1].classList.remove('clk')
console.log(ColorNum);
} else {
// 偶数添加样式
document.querySelectorAll('.topbocolor')[ColorNum].classList.add('clk')
// 奇数减去样式
document.querySelectorAll('.topbocolor')[ColorNum - 1].classList.remove('clk')
}
},
// 接受子组件传递来的参数信息,并切换屏二数据
changeScreenTwo(data) {
// 获取子组件传递来的数据 用以操作home页组件
this.screenTagshow = data
localStorage.setItem("ScreenPage", this.screenTagshow)
}
},
mounted() {
var myDate = new Date();
let temp = myDate.getMonth() + 1
if (temp < 10) {
temp = '0' + temp
}
localStorage.setItem("EndTime", '2020-' + temp)
// this.value = localStorage.getItem("EndTime")?localStorage.getItem("EndTime"):this.value
// this.nowdate = localStorage.getItem("EndTime")?localStorage.getItem("EndTime"):this.nowdate
// localStorage.setItem("StartTime",myDate.getFullYear()+'-01')
this.homeinit()
this.cicyinti()
const obj = setInterval(() => {
const dom = document.getElementById("thrmain")
if (dom) {
const myChart = this.$echarts.init(dom)
if (this.option && typeof this.option === "object") {
myChart.setOption(this.option, true)
}
clearInterval(obj)
}
}, 200)
},
components: {
UserLogin,
HypertensionDie,
CenterCircle,
DiaBites,
HyperPercent,
MiddleBar,
RightUpBar,
screenTwoPag1,
screenTwoPag2,
screenTwoPag3,
screenTwoPag4,
screenTwoPag5
}
}
</script>
<style lang="stylus" scoped>
// swiper 穿透代码
.home>>>.swiper-pagination
position relative
height 40px
top 15px
.home>>> .swiper-pagination-bullet-active
background blue
.home>>> .swiper-slide
height 550px
// 选择器样式穿透
.home>>> .el-input.el-input--suffix > input
background-color #025E9F
border 1px solid #025E9F
color #ffffff
padding-right 0
width 82%
.home>>> .el-input__suffix
top: 6px;
left: 40px;
.home>>> .el-input__icon
position relative
top -5px
.home >>>.el-select-dropdown.el-popper
position relative
top 44px
// 右上角选择器 样式穿透
#elementcasc >>> .el-cascader-panel
width 100px
background #000
.el-cascader-panel
width 100px
background #000
#elementcasc >>> .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path
color #1ab394
width 185px
background #000
.thrmain ul{ height: 160px; line-height: 20px;float:left}
.thrmain ul.width50{ height: 160px; line-height: 20px; float:left; width: 50%;}
.thrmain ul.width100{ height: 160px; line-height: 20px; width: 100%;}
.thrmain ul li{ float: left; width: 50%; color: #97B8D5; text-align:left; padding-left:10px; padding-right:10px;}
.thrmain ul li.cls01{ width: 100%; height:18px; font-size: 12px; line-height: 18px;}
.thrmain ul.width100 li.cls02{width: 100%;height: 15px;font-size: 12px;line-height: 15px;}
.thrmain ul li span{ float: right;}
#thrmain{ height: 160px; width:300px}
.placeclk{ color:#FFF; font-size:14px; font-weight:600}
</style>
<template>
<div class="home2">
<div class="popu" @click="popUp" v-show="ispopu"><img height="214" width="358" src="../assets/popUp.png"></div>
<div class="nav">
<div class="exit" @click="exitFn"><img height="24" width="24" src="../assets/icon_nav_cell.png"></div>
<ul>
<li class="clk">
<img height="24" width="24" src="../assets/6-hover.png">
<p>首页</p>
</li>
<li @click="tohome">
<img height="24" width="24" src="../assets/1.png">
<p>慢病管理</p>
</li>
<li @click="popUp">
<img height="24" width="24" src="../assets/2.png">
<p>免疫规划</p>
</li>
<li @click="popUp">
<img height="24" width="24" src="../assets/3.png">
<p>传染病监测</p>
</li>
<li @click="popUp">
<img height="24" width="24" src="../assets/4.png">
<p>结核病管理</p>
</li>
<li @click="popUp">
<img height="24" width="24" src="../assets/5.png">
<p>综合业务</p>
</li>
</ul>
</div>
<div class="indexm">
<div class="toper">
<div class="toperleft">上海市疾病预防控制管理服务云平台</div>
<div class="toperight">
<div class="inputdiv"><input type="text"><img height="20" width="20" src="../assets/search.png"></div>
<div class="imgdiv">
<img height="18" width="18" src="../assets/user.png">
市疾控,截止:2020-5
<img height="18" width="18" src="../assets/sao.png">
<img height="18" width="18" src="../assets/filter.png">
</div>
</div>
</div>
<div class="model3">
<div class="m3title">慢病管理</div>
<div class="m3title2">
<i></i>
<span>在管人数</span>|
<span>同期</span>
</div>
<div class="m3number">
<span class="m3number-font">210</span>/
<span class="m3number-font">320</span>
<strong></strong>
<span class="tag-blue"></span>
<span>24.4 %</span>
<span><img src="../assets/up.png" class="imgup"></span>
</div>
<div class="m3message">
<div class="m3messagefont">年内已管理人数<span>150.2</span></div>
<div class="m3messagefont">规范管理人数<span>102.5</span></div>
</div>
</div>
<div class="model3 model3m">
<div class="m3title">免疫规划</div>
<div class="m3title2">
<i></i>
<span>在管人数</span>|
<span>同期</span>
</div>
<div class="m3number">
<span class="m3number-font">210</span>/
<span class="m3number-font">320</span>
<strong></strong>
<span class="tag-blue"></span>
<span>24.4 %</span>
<span><img src="../assets/up.png" class="imgup"></span>
</div>
<div class="m3message">
<div class="m3messagefont">年内已管理人数<span>150.2</span></div>
<div class="m3messagefont">规范管理人数<span>102.5</span></div>
</div>
</div>
<div class="model3">
<div class="m3title">传染病监测</div>
<div id="echartsperson"></div>
</div>
<div class="modleleft">
<div class="m3title">结核病管理</div>
<div id="echart2"></div>
</div>
<div class="modleright">
<div class="m3title">综合业务</div>
<div class="card5main2">
<table class="table01 table" width="100%" border="0">
<thead class="fixedThead">
<tr>
<th width="22"></th>
<th width="38">各区</th>
<th>管理人·万<br />/同·%</th>
<th>疑似常率<br />/同·%</th>
<th>管理率<br />/偏·%</th>
</tr>
</thead>
<tbody class="scrollTbody">
<tr>
<td width="22">1</td>
<td width="38">闵行</td>
<td>53.1 / 10.1<img src="../assets/up.png" class="imgup"></td>
<td>72.1 / 13.1<img src="../assets/up.png" class="imgup"></td>
<td>3.32 / 10.4<img src="../assets/up.png" class="imgup"></td>
</tr>
<tr>
<td width="22">2</td>
<td width="38">徐汇</td>
<td>47.2 / 9.61<img src="../assets/up.png" class="imgup"></td>
<td>52.2 / 16.4<img src="../assets/up.png" class="imgup"></td>
<td>1.63 / 11.7<img src="../assets/up.png" class="imgup"></td>
</tr>
<tr>
<td width="22">3</td>
<td width="38">浦东</td>
<td>45.8 / 7.43<img src="../assets/up.png" class="imgup"></td>
<td>49.3 / 12.5<img src="../assets/up.png" class="imgup"></td>
<td>5.53 / 10.2<img src="../assets/up.png" class="imgup"></td>
</tr>
<tr>
<td width="22">4</td>
<td width="38">静安</td>
<td>53.1 / 6.74<img src="../assets/down.png" class="imgup"></td>
<td>46.2 / 25.1<img src="../assets/down.png" class="imgup"></td>
<td>7.73 / 2.34<img src="../assets/down.png" class="imgup"></td>
</tr>
<tr>
<td width="22">5</td>
<td width="38">普陀</td>
<td>47.2 / 5.37<img src="../assets/down.png" class="imgup"></td>
<td>33.4 / 31.2<img src="../assets/down.png" class="imgup"></td>
<td>9.63 / 18.2<img src="../assets/down.png" class="imgup"></td>
</tr>
<tr>
<td width="22">6</td>
<td width="38">崇明</td>
<td>45.8 / 5.09<img src="../assets/up.png" class="imgup"></td>
<td>37.3 / 9.23<img src="../assets/up.png" class="imgup"></td>
<td>6.72 / 16.2<img src="../assets/up.png" class="imgup"></td>
</tr>
<tr>
<td width="22">7</td>
<td width="38">杨浦</td>
<td>53.1 / 4.68<img src="../assets/up.png" class="imgup"></td>
<td>36.2 / 12.4<img src="../assets/up.png" class="imgup"></td>
<td>6.44 / 6.23<img src="../assets/up.png" class="imgup"></td>
</tr>
<tr>
<td width="22">8</td>
<td width="38">松江</td>
<td>47.2 / 4.01<img src="../assets/up.png" class="imgup"></td>
<td>25.9 / 10.3<img src="../assets/up.png" class="imgup"></td>
<td>7.13 / 5.67<img src="../assets/up.png" class="imgup"></td>
</tr>
<tr>
<td width="22">9</td>
<td width="38">宝山</td>
<td>45.8 / 3.56<img src="../assets/up.png" class="imgup"></td>
<td>34.1 / 9.87<img src="../assets/up.png" class="imgup"></td>
<td>8.10 / 8.12<img src="../assets/up.png" class="imgup"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
import { commonMethod,otherMethod } from '@/api/home.js'
export default {
name: 'Index',
data() {
return {
rank1: 0,
data_x:['浦东','静安','徐汇','普陀','虹口','闵行','杨浦','松江','宝山','青浦','奉贤','崇明','黄埔','长宁','金山'],
gxyseriesA:[10,23,21],
gxyseriesB:[2,4,1],
gxyseriesC:[22,12,14],
hyperBar: [],
ispopu:false,
hyperplacetemp: [],
hyperplacevalue: [],
option2: {
tooltip: {
position: [50, 50],
padding: 10,
trigger: 'axis'
},
dataZoom: {
start: 0, //默认为0
end: 50, //默认为100
type: 'slider',
show: true ,
xAxisIndex: [0] ,
handleSize: 20 , //滑动条的 左右2个滑动条的大小
height: 5 , //组件高度
left: 50, //左边的距离
right: 50, //右边的距离
bottom: 40, //右边的距离
backgroundColor: '#ccc', //两边未选中的滑动条区域的颜色
showDataShadow: true, //是否显示数据阴影 默认auto
handleStyle: {
borderColor: "#CBBCDB",
borderWidth: "1",
shadowBlur: 1,
background: "#000",
shadowColor: "#000",
},
filterMode: 'filter',
},
legend: {
textStyle: {
color: '#8393A9',
fontSize: 10,
},
left: 40,
width: 380,
top: '0',
itemHeight: 12,
itemWidth: 14,
itemGap: 5,
height: 50,
data: ["结核病管理指标","同期值","结核病指标1同比", "结核病指标2同比"],
align: 'left',
selectedMode: true,
},
grid: {
top: 80,
bottom: 45,
left: 50
},
xAxis: [{
type: 'category',
data: ['浦东','静安','徐汇','普陀','虹口','闵行','杨浦','松江','宝山','青浦','奉贤','崇明','黄埔','长宁','金山'],
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
},
}
],
dataZoom: [{
type: 'inside',
startValue: 0,
filterMode: 'empty',
endValue: 14
}],
series: [{
name: '结核病管理指标',
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#01C5C5'
},
{
offset: 1,
color: '#01C5C5'
}
]
)
}
},
data:[98,85,78,74,59,86,47,58,69,80,86,92,93,88,95],
},
{
name: '同期值',
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#1C4B79'
},
{
offset: 1,
color: '#1C4B79'
}
]
)
}
},
data:[87,83,63,41,59,36,77,88,69,78,41,56,43,24,65],
},
{
name: '结核病指标1同比',
type: 'line',
itemStyle: {
color:'#FFC17D',
},
data: [92,72,82,42,75,86,67,28,69,80,41,62,43,74,95],
barWidth: null,
},
{
name: '结核病指标2同比',
type: 'line',
itemStyle: {
color:'#4ECE7A',
},
data: [61,21,53,24,15,46,27,38,19,10,31,12,23,64,55],
barWidth: null,
}
]
},
option3:{
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
top: 20,
bottom: 15,
left: 15,
containLabel: true
},
xAxis: [
{
type: 'value',
axisLabel: {
textStyle: {
color: '#97B8D5',//坐标值得具体的颜色
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#6A6B6C',//左边线的颜色
width:'2'//坐标线的宽度
}
},
splitLine:{
show:false, //去掉网格线
},
}
],
yAxis: [
{
type: 'category',
axisTick: {
show: true,
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#6A6B6C',//左边线的颜色
width:'1'//坐标线的宽度
}
},
axisLabel : {
formatter: '{value}',
textStyle: {
color: '#97B8D5'
}
},
data: ['传染病监测与报告指标4', '传染病监测与报告指标3', '传染病监测与报告指标2', '传染病监测与报告指标1',]
}
],
series: [
{
barWidth : 12,
name: '人数',
type: 'bar',
itemStyle:{
normal: {
barBorderRadius: 5,
color: new this.$echarts.graphic.LinearGradient(
0, 1, 1, 0, [
{
offset: 0,
color: '#4497EC'
},
{
offset: 1,
color: '#02E7F8'
},
])
},
},
label: {
show: true,
position: 'inside'
},
data: [24.2,50.2,27.9,57.3]
},
]
},
}
},
methods: {
tohome() {
this.$router.push({
path: '/Home'
});
},
popUp() {
//alert('测试弹窗')
this.ispopu = !this.ispopu
},
exitFn() {
this.$router.push({
path: '/'
});
},
homeinit() {
let _this = this
}
},
mounted() {
this.homeinit()
const obj = setInterval(() => {
const dom = document.getElementById("echart2")
if (dom) {
const myChart = this.$echarts.init(dom)
if (this.option2 && typeof this.option2 === "object") {
myChart.setOption(this.option2, true)
}
clearInterval(obj)
}
}, 200)
const obj2 = setInterval(() => {
const dom = document.getElementById("echartsperson")
if (dom) {
const myChart = this.$echarts.init(dom)
if (this.option3 && typeof this.option3 === "object") {
myChart.setOption(this.option3, true)
}
clearInterval(obj2)
}
}, 200)
},
components: {
}
}
</script>
<style lang="stylus" scoped>
.nav{width:70px;height:600px;background:rgba(0,47,106,0.1);box-shadow:0px 1px 12px 0px rgba(0,70,152,1); float: left;}
.nav .exit{ height: 58px; width:70px; text-align: center; padding-top: 15px;}
.nav ul{ clear: both; width: 70px;}
.nav ul li{ clear: both; width: 70px; height: 50px; text-align: center; padding-top: 3px; margin-bottom: 26px;}
.nav ul li.clk{ background: #46afff;}
.nav ul li.clk p{ color: #fff;}
.nav ul li p{ color: #97B8D5;}
.indexm{ float: right; width: 874px; height: 600px; padding-right: 14px;}
.indexm .toper{ clear: both; height: 58px; margin-bottom: 10px; }
.toperleft{ height: 58px; float: left; line-height: 58px; color: #fff; font-size: 18px; padding-left: 5px; width: 430px;}
.toperight{ width: 410px; float: left;}
.inputdiv{ width: 150px; float: left; padding-top: 15px; position: relative;}
.inputdiv img{ position: absolute; left: 5px; top: 17px;}
.inputdiv input{ width: 150px;height:26px;background:rgba(151,184,213,0.9);border-radius:8px;opacity:0.15; border: 0;}
.imgdiv{ width: 250px; float: left; padding-top: 17px; position: relative; padding-left: 20px; text-align: right; line-height: 20px;color:rgba(151,184,213,1);}
.imgdiv img{ vertical-align: middle; margin: 0 5px;}
.model3{width:280px;height:185px;background:rgba(0,47,106,0.1);box-shadow:0px 1px 6px 0px rgba(14,88,176,1); float: left; position: relative; margin-bottom: 30px;}
.model3m{ margin: 0 10px;}
.m3title{ position: absolute; left: 10px; line-height: 30px; font-size: 14px; color: #fff;}
.modleleft{ float: left; width:569px; height: 300px;background:rgba(0,47,106,0.1); position: relative;box-shadow:0px 1px 6px 0px rgba(14,88,176,1);}
.modleright{ float: right; width:280px; height: 300px;background:rgba(0,47,106,0.1); position: relative;box-shadow:0px 1px 6px 0px rgba(14,88,176,1);}
.m3title2{ position: absolute; left: 10px; top: 30px; line-height: 30px; font-size: 12px; color: #fff; color: #97B8D5;}
.m3title2 i{ width: 3px; height: 12px; background: #007AFF; color: #0097FD;display: inline-block;}
.m3title2 span{ padding: 0 5px; color: #97B8D5;}
.m3number{ position: absolute; left: 30px; top: 65px; line-height: 65px; font-size: 12px; color: #fff; color: #97B8D5;}
.m3number span{ padding: 0 3px; color: #97B8D5;}
.m3number-font{font-size:28px;color: #4FD9FF !important;}
.tag-blue{ background: #05296a;border-radius: 20%;padding:0 2px; border: 1px #1158c3 solid;font-size: 12px;color: #4da0c7;}
.imgup{ max-width:10px; max-height:18px}
.m3message{position: absolute; left: 10px; top: 140px; line-height: 18px; font-size: 12px; color: #fff;}
.m3messagefont{ font-size:12px; color: #97B8D5;}
.m3message span{padding:0 15px;float:right;color:#2680FF;}
#echartsperson{ width:280px; height:160px; margin-top:25px;}
.popu{
width: 100%;
height: 100%;
position: fixed;
top: 0; text-align: center;
left: 0; z-index: 999;
background-color:rgba(1,1,1,0.5)
}
.popu img{ margin-top: 193px;}
#echart2{ width: 560px; height: 250px; margin-top: 50px;}
</style>
\ No newline at end of file
<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'
},
legend: {
textStyle: {
color: '#8393A9',
fontSize: 12,
},
left: 70,
width: 380,
top: '0',
itemHeight: 12,
itemWidth: 14,
itemGap: 5,
height: 50,
data: ['管理/签约人群正常随访一次的人数', '去年管理/签约人群正常随访一次的人数', '管·年随访率/去年', '签·年随访率/去年', '管·随访完成比/去年', '签·随访完成比/去年'],
align: 'left',
selectedMode: true
},
grid: {
// left: 30,
// right: 30,
top: 80,
bottom: 0,
},
xAxis: [{
type: 'category',
data: this.data_x,
axisLine: {
lineStyle: {
color: '#8393A9',
type: 'solid'
},
},
axisLabel: {
interval: 0,
rotate: 45,
textStyle: {
color: function(value, index) {
return '#B3BFD2';
}
},
},
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: true
}
},
{
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: true
},
}
],
series: [{
name: '管理/签约人群正常随访一次的人数',
type: 'bar',
stack: '1',
itemStyle: {
normal: {}
},
barWidth: null,
data: null,
},
{
name: '管理/签约人群正常随访一次的人数',
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
color: '#4093E9'
}
},
data: this.data_qy_cyrs,
stack: "1"
},
{
name: '管理/签约人群正常随访一次的人数',
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
color: '#2A5B78'
}
},
silent: true,
data: this.data_gl_cyrs,
stack: "1"
},
{
name: '去年管理/签约人群正常随访一次的人数',
type: 'bar',
stack: '2',
itemStyle: {
normal: {}
},
barWidth: null,
data: null,
},
{
name: '去年管理/签约人群正常随访一次的人数',
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
color: '#00BEBE'
}
},
data: this.data_qy_cyrs_qn,
stack: "2"
},
{
name: '去年管理/签约人群正常随访一次的人数',
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
color: '#115D5D'
}
},
silent: true,
data: this.data_gl_cyrs_qn,
stack: "2"
},
{
name: '管·年随访率/去年',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 0
}
},
itemStyle: {
normal: {}
},
data: null,
},
{
name: '管·年随访率/去年',
type: 'line',
smooth: true,
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: true,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#0D828B'
}
},
z: 11,
data: this.data_g_ycl_qn
},
{
name: '签·年随访率/去年',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 0
}
},
itemStyle: {
normal: {}
},
data: null,
},
{
name: '签·年随访率/去年',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#FFC24D'
}
},
z: 12,
data: this.data_q_ycl
},
{
name: '签·年随访率/去年',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#997A3E'
}
},
z: 11,
data: this.data_q_ycl_qn
},
{
name: '签·随访完成比/去年',
type: 'line',
yAxisIndex: 1,
symbol: 'circle',
lineStyle: {
normal: {
width: 0
}
},
itemStyle: {
normal: {}
},
z: 15,
data: null
},
{
name: '签·随访完成比/去年',
type: 'line',
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 5,
smooth: 0.1,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#EEC55B'
}
},
z: 14,
data: this.data_g_ycl,
},
{
name: '签·随访完成比/去年',
type: 'line',
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 5,
smooth: 0.1,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#907C45'
}
},
z: 15,
data: this.data_g_ycl_qn,
},
]
}
}
},
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[1].data = this.data_qy_cyrs
this.option.series[2].data = this.data_gl_cyrs
this.option.series[4].data = this.data_qy_cyrs_qn
this.option.series[5].data = this.data_gl_cyrs_qn
this.option.series[7].data = this.data_g_ycl
this.option.series[8].data = this.data_g_ycl_qn
this.option.series[10].data = this.data_q_ycl
this.option.series[11].data = this.data_q_ycl_qn
this.option.series[13].data = this.data_g_ycl
this.option.series[14].data = this.data_g_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="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
<template>
<!-- 慢病管理 -->
<div class="pagetwo" @click="showtab(5)">
<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" @click="CityGetBack()" v-if="BeginCode">返回</el-button>
<el-button size="mini" @click="changeReplay()" 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>
<!---- 第一个模块---->
<div class="card-dark card-01">
<div class="card1-mod" v-show="DieaNo != 3">
<h2>管·在管人数(实/同)</h2>
<div class="cmtitle">
<span>{{(gtopdata.ZXZ/10000).toFixed(1)}}</span>
<span class="span1">/</span>
<span>{{(gtopdata.TBZ/10000).toFixed(1)}}</span>
<span class="span2"></span>
<span class="tag-blue"></span>
<span class="span2">{{gtopdata.TBL}}</span>
<span class="el-icon-bottom">&nbsp;</span>
</div>
<div class="cmtline">
<p><span>{{(gglrs/10000).toFixed(1)}}</span>年内已管理人数</p>
<p><span>{{(ggfrs/10000).toFixed(1)}}</span>规范管理人数</p>
<p><span>{{(gxjdata.ZXZ)}}/{{(gxjdata.TBZ)}}</span>新建数(累计/本周)</p>
<p><span>{{(agsfdata.ZXZ)}}/{{(agsfdata.TBZ)}}</span>失访数(累计/本周) </p>
</div>
</div>
<div class="card1-mod" v-show="DieaNo != 3">
<h2>签·在管人数(实/同)</h2>
<div class="cmtitle">
<span>{{(qtopdata.ZXZ/10000).toFixed(1)}}</span>
<span class="span1">/</span>
<span>{{(qtopdata.TBZ/10000).toFixed(1)}}</span>
<span class="span2"></span>
<span class="tag-blue"></span>
<span class="span2">{{qtopdata.TBL}}</span>
<span class="el-icon-bottom">&nbsp;</span>
</div>
<div class="cmtline">
<p><span>{{(qglrs/10000).toFixed(1)}}</span>年内已管理人数</p>
<p><span>{{(qgfrs/10000).toFixed(1)}}</span>规范管理人数</p>
<p><span>{{(qxjdata.ZXZ)}}/{{(qxjdata.TBZ)}}</span>新建数(累计/本周)</p>
<p><span>{{(qsfdata.ZXZ)}}/{{(qsfdata.TBZ)}}</span>失访数(累计/本周)</p>
</div>
</div>
<div class="card1-mod" v-show="DieaNo == 3">
<h2>初访完成数(实/同)</h2>
<div class="cmtitle">
<span>{{wcdata.ZXZ}}</span>
<span class="span1">/</span>
<span>{{wcdata.TBZ}}</span>
<span class="span2"></span>
<span class="tag-blue"></span>
<span class="span2">{{wcdata.TBL}}</span>
<span class="el-icon-bottom">&nbsp;</span>
</div>
<div class="overl">初访完成率 {{wclv}}%</div>
</div>
<div class="card1-mod" v-show="DieaNo == 3">
<div id="pag1canser"></div>
</div>
</div>
<div class="card-dark card-02">
<div class="dotline"></div>
<div class="card2-mod">
<div class="modtitle2">
<span @click="DieaChange(1)" :class="DieaNo==1?'myclk':''">高血压</span>|
<span @click="DieaChange(2)" :class="DieaNo==2?'myclk':''">糖尿病</span>|
<span @click="DieaChange(3)" :class="DieaNo==3?'myclk':''">肿瘤</span>
</div>
<div class="page-left-top1" v-show="DieaNo==1 || DieaNo==2">
<table class="table02" width="100%" border="0">
<tr>
<td width="20%">&nbsp;</td>
<td width="50%">管·在管人数</td>
<td width="30%">同·%</td>
</tr>
<tr>
<td width="20%"><i class="el-icon-user-solid color1"></i></td>
<td width="50%"><span :style="widthChange(gxbdata1.ZXZ,gxbdata0.ZXZ,1)">{{(gxbdata1.ZXZ/10000).toFixed(1)}}</span></td>
<td width="30%">{{parseFloat(gxbdata1.TBL).toFixed(1)}} <i class="el-icon-bottom color3"></i></td>
</tr>
<tr>
<td width="20%"><i class="el-icon-s-check color2"></i></td>
<td width="50%"><span :style="widthChange(gxbdata1.ZXZ,gxbdata0.ZXZ,2)" class="nv">{{(gxbdata0.ZXZ/10000).toFixed(1)}}</span></td>
<td width="30%">{{parseFloat(gxbdata0.TBL).toFixed(1)}} <i class="el-icon-bottom color3"></i></td>
</tr>
<tr>
<td width="20%">&nbsp;</td>
<td width="50%">签·在管人数</td>
<td width="30%">同·%</td>
</tr>
<tr>
<td width="20%"><i class="el-icon-user-solid color1"></i></td>
<td width="50%"><span :style="widthChange(qxbdata1.ZXZ,qxbdata0.ZXZ,1)">{{(qxbdata1.ZXZ/10000).toFixed(1)}}</span></td>
<td width="30%">{{parseFloat(qxbdata1.TBL).toFixed(1)}} <i class="el-icon-bottom color3"></i></td>
</tr>
<tr>
<td width="20%"><i class="el-icon-s-check color2"></i></td>
<td width="50%"><span :style="widthChange(qxbdata1.ZXZ,qxbdata0.ZXZ,2)" class="nv">{{(qxbdata0.ZXZ/10000).toFixed(1)}}</span></td>
<td width="30%">{{parseFloat(qxbdata0.TBL).toFixed(1)}} <i class="el-icon-bottom color3"></i></td>
</tr>
</table>
</div>
<div class="page-left-top1" v-show="DieaNo==3">
<div id="chartsright"></div>
<div id="chartstxt">
<p>初访完成比:{{parseFloat(wclv).toFixed(1)}}%</p>
<p>知情同意接受随访服务比:{{parseFloat(zqlv).toFixed(1)}}%</p>
<p>规范管理率:{{parseFloat(gflv).toFixed(1)}}%</p>
</div>
</div>
</div>
<div class="card2-mod" v-show="DieaNo==1 || DieaNo==2">
<div class="modtitle2">年龄结构</div>
<div id="rightupbar2"></div>
</div>
<div class="card2-mod" v-show="DieaNo==3">
<table class="table02 table03" width="100%" border="0">
<tr>
<td width="30%">&nbsp;</td>
<td width="45%">病例数/同期</td>
<td width="25%">同比·%</td>
</tr>
<tr>
<td width="30%">完成初访</td>
<td width="45%"><span class="span11">{{wcdata.ZXZ?parseFloat(wcdata.ZXZ).toFixed(1):0}}万 /
{{wclvdata.TBZ?wclvdata.TBZ:0}}</span></td>
<td width="25%%">{{wclvdata.TBL?parseFloat(wclvdata.TBL).toFixed(1):0}} <i class="el-icon-bottom color3">&nbsp;</i></td>
</tr>
<tr>
<td width="30%">知情同意</td>
<td width="45%"><span class="span22">{{zqlvdata.ZXZ?parseFloat(zqlvdata.ZXZ).toFixed(1):0}}万 /
{{zqlvdata.TBZ?zqlvdata.TBZ:0}}</span></td>
<td width="25%">{{zqlvdata.TBL?parseFloat(zqlvdata.TBL).toFixed(1):0}} <i class="el-icon-bottom color3">&nbsp;</i></td>
</tr>
<tr>
<td width="30%">随访存活</td>
<td width="45%"><span class="span33">{{chdata.ZXZ?parseFloat(chdata.ZXZ).toFixed(1):0}}万 /
{{chdata.TBZ?chdata.TBZ:0}}</span></td>
<td width="25%">{{chdata.TBL?parseFloat(chdata.TBL).toFixed(1):0}} <i class="el-icon-bottom color3">&nbsp;</i></td>
</tr>
</table>
</div>
</div>
<div class="clear10"></div>
<div class="card-dark card-03">
<ul>
<li @click="pageChage(1)" class="clk"><i class="el-icon-s-cooperation"></i> 慢病管理</li>
<li @click="pageChage(2)"><i class="el-icon-bangzhu"></i> 管理效果</li>
<li @click="pageChage(3)"><i class="el-icon-service"></i> 服务质量</li>
<li @click="pageChage(4)"><i class="el-icon-first-aid-kit"></i> 早发现</li>
<li @click="pageChage(5)"><i class="el-icon-odometer"></i> 慢病监测</li>
</ul>
</div>
<div class="card-dark card-04">
<div class="card3title1" v-show="DieaNo==1 || DieaNo==2">
<span @click="groupChange(1)" :class="groupNo==1?'myclk':''" v-if="communhidden">{{commun}}</span><a v-if="communhidden">|</a>
<span @click="groupChange(2)" :class="groupNo==2?'myclk':''">时间</span>
</div>
<div class="card3title1" v-show="DieaNo==3">各区</div>
<div class="card3title2" v-show="DieaNo==1 || DieaNo==2">
<span @click="bingChange(1)" :class="bingNo==1?'myclk':''">随访</span>|
<span @click="bingChange(2)" :class="bingNo==2?'myclk':''">监测</span>|
<span @click="bingChange(3)" :class="bingNo==3?'myclk':''">服药</span>|
<span @click="bingChange(4)" :class="bingNo==4?'myclk':''">就诊</span>
</div>
<div class="card3main">
<div id="middlebarbox1"></div>
</div>
</div>
<div class="card-dark card-05">
<div class="card5title">{{tablename}}</div>
<div class="card5main2">
<table class="table01 table" width="100%" border="0">
<thead class="fixedThead">
<tr>
<th width="38"></th>
<th width="48">{{thname}}</th>
<th @click.stop="showtab(1)">管/签<br />{{rightlist1}}·%</th>
<th @click.stop="showtab(2)">管/签<br />{{rightlist2}}·%</th>
<th v-if="rightlist3" @click.stop="showtab(3)">管/签<br />{{rightlist3}}·%</th>
</tr>
</thead>
<div class="uplib" v-if="showtabnum == 1">
指标名称:<br>{{pagedisname}}患者{{rightlist1}}<br>
计算公式:<br>年内正常随访过一次的高血压患者人数/年内应管理高血压患者人数
</div>
<div class="uplib" v-if="showtabnum == 2">
指标名称:<br>{{pagedisname}}患者{{rightlist2}}<br>
计算公式:<br>年内按照要求进行高血压患者健康管理的人数/年内管理高血压患者人数×100%
</div>
<div class="uplib" v-if="showtabnum == 3">
指标名称:<br>{{pagedisname}}患者{{rightlist3}}<br>
计算公式:<br>目前已随访人次数/在管高血压患者年内应随访次数
</div>
<tbody class="scrollTbody">
<tr v-for="(item, index) in tableAll" :key="index">
<td width="38"><span>{{index+1}}</span></td>
<td width="48" @click="changecity(item.code, item.name, item.YLDM)" class="underline">{{item.name}}</td>
<td>{{item.tag1}} / {{item.tag2}}</td>
<td>{{item.tag3}} / {{item.tag4}}</td>
<td v-if="rightlist3">{{item.tag5}} / {{item.tag6}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import {
commonMethod,
otherMethod
} from '@/api/home.js'
export default {
name: 'screenpage1',
data() {
return {
groupNo: 1,
bingNo: 1,
commun: '各区',
communhidden: true,
tablename: '各区',
thname: '各区',
areaname: '',
value: '2019-09',
nowdate: '2019-09',
startTime: '2019-01',
sel: '筛选',
option: {
tooltip: {
show: false,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 130,
y: 10,
itemGap: 10,
data: ['三级占比', '二级占比'],
textStyle: {
color: '#fff',
fontSize: 12
}
},
series: [{
name: '1',
type: 'pie',
clockWise: false,
radius: [45, 37],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
data: [{
value: 44,
name: '三级占比',
itemStyle: {
normal: {
color: '#3AAEB9'
}
}
},
{
value: 55,
name: 'invisible',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
}
}
]
},
{
name: '2',
type: 'pie',
clockWise: false,
radius: [36, 28],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
data: [{
value: 42.5,
name: '二级占比',
itemStyle: {
normal: {
color: '#42CCFF'
}
}
},
{
value: 100 - 43.7,
name: 'invisible',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
}
}
]
},
{
name: '2',
type: 'pie',
clockWise: false,
radius: [27, 19],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
data: [{
value: 42.5,
name: '二级占比',
itemStyle: {
normal: {
color: '#3F81BB'
}
}
},
{
value: 100 - 43.7,
name: 'invisible',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
}
}
]
}
]
},
option2: {
color: ['#42ccff', '#3F81BB'],
series: [{
itemStyle: {
normal: {
label: {
show: true,
formatter: '{b} : {c} ({d}%)'
},
labelLine: {
show: true
}
}
},
name: '',
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
label: {
normal: {
position: 'inner',
show: false,
},
},
data: [{
value: 10,
name: '已处理',
color: "red",
areaStyle: {
normal: {
backgroundColor: '#42ccff'
}
}
},
{
value: 90,
name: '待处理',
color: "red",
areaStyle: {
normal: {
backgroundColor: '#3F81BB'
}
}
},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
},
option3: {
tooltip: {
/*返回需要的信息*/
formatter: function(param) {
console.log();
// clog
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 13px;padding-bottom: 7px;margin-bottom: 7px;"> ' + param.seriesName + '('+param.name+')' +':'+ param.value +'人</div>';
}
},
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: this.agedatax,
}],
series: [{
name: '管理人群',
type: 'bar',
stack: '总量',
label: {
normal: {
show: false,
fontSize: 10,
offset: [20, 0]
}
},
barWidth: 10,
data: this.agedatayg
},
{
name: '签约人群',
type: 'bar',
stack: '总量',
label: {
normal: {
show: false,
fontSize: 10,
offset: [45, 0]
}
},
barWidth: 10,
data: this.agedatayq
}
]
},
data_x: [],
gxyseriesA: [],
gxyseriesB: [],
gxyseriesC: [],
gxyseriesD: [],
gxyseriesE: [],
gxyseriesF: [],
gxyseriesG: [],
gxyseriesH: [],
tableAll: [],
option4: {
tooltip: {
position: [50, 50],
padding: 10,
trigger: 'axis',
formatter: function(params) {
// console.log(params.length)
// console.log('打印params长度')
// console.log(params)
if (params[0].seriesName == '管理/签约人群正常随访一次的人数') {
var res = '<ul class="f12 pl10 pr15">';
res += '<li class="f13"> ' + params[0].axisValue + '区</li>';
res += '<li>管理/签约人群年内正常随访过一次的高血压患者人数:' + params[0].data + '/' + params[1].data + '万</li>';
res += '<li>去年管理/签约人群年内正常随访过一次的高血压患者人数:' + params[2].data + '/' + params[3].data + '万</li>';
res += '<li>管.高血压患者随访率/去年:' + params[4].data + '/' + params[5].data + '%</li>';
res += '<li>签.高血压患者随访率/去年:' + params[6].data + '/' + params[7].data + '%</li>';
res += '</ul>';
} else if (params[0].seriesName == '管理/签约人群血压自动上传记录数') {
var res = '<ul class="f12 pl10 pr15">';
res += '<li class="f13"> ' + params[0].axisValue + '区</li>';
res += '<li>管理/签约人群年内高血压患者血压自动上传记录数:' + params[0].data + '/' + params[1].data + '万</li>';
res += '<li>去年管理/签约人群年内高血压患者血压自动上传记录数:' + params[2].data + '/' + params[3].data + '万</li>';
res += '<li>管.高血压患者血压记录自动上传比例/去年:' + params[4].data + '/' + params[5].data + '%</li>';
res += '<li>签.高血压患者血压记录自动上传比例/去年:' + params[6].data + '/' + params[7].data + '%</li>';
res += '</ul>';
} else if (params[0].seriesName == '管理/签约人群药物治疗人数') {
var res = '<ul class="f12 pl10 pr15">';
res += '<li class="f13"> ' + params[0].axisValue + '区</li>';
res += '<li>管理/签约人群年内已管理的高血压患者中接受药物治疗的人数:' + params[0].data + '/' + params[0].data + '万</li>';
res += '<li>去年管理/签约人群年内已管理的高血压患者中接受药物治疗的人数:' + params[1].data + '/' + params[1].data + '万</li>';
res += '<li>管.高血压患者药物治疗率/去年:' + params[2].data + '/' + params[2].data + '%</li>';
res += '<li>签.高血压患者药物治疗率/去年:' + params[3].data + '/' + params[3].data + '%</li>';
res += '</ul>';
} else {
var res = '<ul class="f12 pl10 pr15">';
res += '<li class="f13"> ' + params[0].axisValue + '区</li>';
res += '<li>管理/签约人群年内已管理的高血压患者中就诊人数:' + params[0].data + '/' + params[1].data + '万</li>';
res += '<li>去年管理/签约人群年内已管理的高血压患者中就诊人数:' + params[2].data + '/' + params[3].data + '万</li>';
res += '<li>管.高血压患者就诊率/去年:' + params[4].data + '/' + params[5].data + '%</li>';
res += '<li>签.高血压患者就诊率/去年:' + params[6].data + '/' + params[7].data + '%</li>';
res += '</ul>';
}
return res
}
},
dataZoom: {
start: 0, //默认为0
end: 50, //默认为100
type: 'slider',
show: true ,
xAxisIndex: [0] ,
handleSize: 20 , //滑动条的 左右2个滑动条的大小
height: 5 , //组件高度
left: 50, //左边的距离
right: 50, //右边的距离
bottom: 40, //右边的距离
backgroundColor: '#ccc', //两边未选中的滑动条区域的颜色
showDataShadow: true, //是否显示数据阴影 默认auto
handleStyle: {
borderColor: "#CBBCDB",
borderWidth: "1",
shadowBlur: 1,
background: "#000",
shadowColor: "#000",
},
filterMode: 'filter',
},
legend: {
textStyle: {
color: '#8393A9',
fontSize: 10,
},
left: 40,
width: 380,
top: '0',
itemHeight: 12,
itemWidth: 14,
itemGap: 5,
height: 50,
data: ["管理/签约人群正常随访一次的人数", "去年管理/签约人群正常随访一次的人数", "管·年随访率/去年", "签·年随访率/去年", "管·规范管理率/去年", "签·规范管理率/去年",
"管·随访完成比/去年", "签·随访完成比/去年"
],
align: 'left',
selectedMode: true
},
grid: {
top: 80,
bottom: 45,
left: 50
},
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
},
}
],
dataZoom: [{
type: 'inside',
startValue: 0,
filterMode: 'empty',
endValue: 14
}],
series: [{
name: '管理/签约人群正常随访一次的人数',
type: 'bar',
stack: '1',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#4093E9'
},
{
offset: 1,
color: '#4093E9'
}
]
)
}
},
data: this.gxyseriesA,
barWidth: null,
},
{
name: '去年管理/签约人群正常随访一次的人数',
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#099023'
},
{
offset: 1,
color: '#099023'
}
]
)
}
},
data: this.gxyseriesB,
stack: "1"
},
{
name: '管·年随访率/去年',
type: 'line',
stack: '2',
itemStyle: {},
data: [],
barWidth: null,
},
{
name: '签·年随访率/去年',
type: 'line',
barWidth: 8,
itemStyle: {
normal: {
color: '#00BEBE'
}
},
data: [],
stack: "2"
},
{
name: '管·规范管理率/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#00BEBE'
}
},
itemStyle: {},
data: this.gxyseriesE,
},
{
name: '签·规范管理率/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#00D1DA'
}
},
z: 12,
data: this.gxyseriesF,
},
{
name: '管·随访完成比/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 0
}
},
itemStyle: {},
data: this.gxyseriesG,
},
{
name: '签·随访完成比/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#FFC24D'
}
},
z: 12,
data: this.gxyseriesH,
},
]
},
themeidnow: 13,
themeID: 7, // 慢病在管ID
themeID2: 13, // 慢病高血压
themeID3: 19, // 慢病管理 糖尿病
themeID4: 10, // 慢病管理 肿瘤
pageNo: 1,
DieaNo: 1,
gtopdata: [],
qtopdata: [],
agdata: [],
aqdata: [],
gxjdata: [],
qxjdata: [],
agxjdata: [],
aqxjdata: [],
gsfdata: [],
qsfdata: [],
agsfdata: [],
aqsfdata: [],
gglrs: 0,
qglrs: 0,
ggfrs: 0,
qgfrs: 0,
ggxydata: [],
qgxydata: [],
gtnbdata: [],
qtnbdata: [],
gxbdata0: [],
agxbdata0: [],
gxbdata1: [],
agxbdata1: [],
qxbdata0: [],
aqxbdata0: [],
qxbdata1: [],
aqxbdata1: [],
agedatax: [],
agedatayg: [],
agedatayq: [],
agegl: [],
ageqy: [],
wcdata: [],
wclv: 0,
wczbz: 0,
wwczbz: 0,
zqlv: 0,
gflv: 0,
wclvdata: [],
zqlvdata: [],
gflvdata: [],
chdata: [],
BarType: "XZQH",
BarSelect: 1,
dieaName: '血压',
rightlist1: '规范管理率',
rightlist2: '随访率',
rightlist3: '随访比',
selectStarttime: localStorage.getItem("EndTime"),
BeginCode: false,
PlaceYLGM: '',
areaclick: true,
BackCLick: true,
SheQuCode: 1,
lastStatus: {},
PlaceCode: '',
closeareaclick: true,
showtabnum:0,
pagedisname:'高血压'
}
},
methods: {
showtab(num){
this.showtabnum = num
},
CityGetBack() {
console.log("this.SheQuCode :" + this.SheQuCode);
if (this.SheQuCode == 2) {
// 使用 this.SheQuCode 的值来判断现在处于的区镇状态
// 此时 处于第一次点击下的状态
this.commun = "各区"
this.thname = "各区"
this.communhidden = true
this.PlaceCode = ''
this.BarType = 'XZQH'
this.BackCLick = false
this.areaclick = true
this.closeareaclick = true
this.areaname = ''
setTimeout(() => {
this.BeginCode = false
}, 800)
console.log("现在处于一级状态");
}
if (this.SheQuCode == 3) {
// 使用 this.SheQuCode 的值来判断现在处于的区镇状态
// 此时 处于第二次点击下的状态
console.log("现在处于二级状态");
this.communhidden = true
this.PlaceCode = this.lastStatus.PlaceCode
this.BarType = this.lastStatus.BarType
this.BeginCode = this.lastStatus.BeginCode
this.BackCLick = this.lastStatus.BackCLick
this.areaclick = true
this.SheQuCode = 2
this.tablename = "社区"
this.thname = "医院"
console.log(this.lastStatus);
}
this.homeinit()
this.reApplyCharts()
this.bottominit()
},
pageChage(page) {
this.$emit('screenTwoPagefunc', page)
},
widthChange(param1, param2, type) {
let p1 = parseInt(param1)
let p2 = parseInt(param2)
if (p1 == 0 && p2 == 0) {
return 'width:1%'
}
if (type == 1) {
if (p1 > p2) {
return 'width:100%'
} else {
let bfb = parseFloat(p1 / p2) * 100
return 'width:' + bfb + '%'
}
} else {
if (p1 < p2) {
return 'width:100%'
} else {
let bfb = parseFloat(p2 / p1) * 100
return 'width:' + bfb + '%'
}
}
},
changeReplay() {
var myDate = new Date();
let tempmonth = myDate.getMonth()
if(tempmonth<10){
tempmonth = '0'+tempmonth
}
// 用于 重置时间 入参
let DateNow = '' + myDate.getFullYear()+'-' + tempmonth + '-01'
this.themeID = 7
this.BarType = 'XZQH'
this.communhidden = true
this.PlaceCode = ''
this.BackCLick = false
this.areaclick = true
this.closeareaclick = true
this.BeginCode = false
this.areaname = ''
this.tablename = "各区"
this.thname = "各区"
this.nowdate = DateNow
this.selectStarttime = DateNow
this.value = DateNow.substr(0,7)
this.DieaNo = 1
this.bingNo = 1
this.BarSelect = 1
this.dataSearch(DateNow)
console.log(111);
console.log(this.nowdate)
console.log(this.selectStarttime);
},
groupChange(num) {
this.groupNo = num
if (num == 1) {
this.BarType = 'XZQH'
this.tablename = "各区"
this.thname = "各区"
} else {
this.BarType = 'YWSJ'
this.tablename = "时间"
this.thname = "月份"
}
// 切换区后 执行方法渲染数据
this.bottominit()
},
dataSearch(value) {
console.log(value)
localStorage.setItem("EndTime", value)
this.DieaChange(this.DieaNo)
this.startTime = value.slice(0, 4) + '-01'
if (value) {
this.nowdate = value
this.selectStarttime = value
this.homeinit()
this.reApplyCharts()
this.bottominit()
// this.DieaChange(this.DieaNo)
}
},
bingChange(num) {
this.bingNo = num
this.BarSelect = num
this.bottominit()
},
exitFn() {
this.$router.push({
path: '/'
});
},
// cansertopShow
DieaChange(num) {
let _this = this
_this.DieaNo = num
if(num == 1){
this.pagedisname = '高血压'
}else if(num == 2){
this.pagedisname = '糖尿病'
}else{
this.pagedisname = '肿瘤'
}
console.log(_this.DieaNo);
_this.agedatayq = []
_this.agedatayg = []
if (_this.DieaNo == 1) {
console.log(_this.agdata)
this.themeidnow = 13 // 柱状图请求ID
this.bottominit() // 数据请求、柱状图图标渲染
_this.gtopdata = _this.agdata[0]
_this.qtopdata = _this.aqdata[0]
_this.gxjdata = _this.agxjdata[0]
_this.qxjdata = _this.aqxjdata[0]
_this.gsfdata = _this.agsfdata[0]
_this.qsfdata = _this.aqsfdata[0]
_this.gxbdata0 = _this.agxbdata0[0]
_this.gxbdata1 = _this.agxbdata1[0]
_this.qxbdata0 = _this.aqxbdata0[0]
_this.qxbdata1 = _this.aqxbdata1[0]
_this.ggxydata.forEach((item, index) => {
if (item.ZBID == 1048) {
_this.gglrs = item.ZXZ
}
if (item.ZBID == 1054) {
_this.ggfrs = item.ZXZ
}
})
_this.qgxydata.forEach((item, index) => {
if (item.ZBID == 1048) {
_this.qglrs = item.ZXZ
console.log('年内已管理人数: ' + this.qglrs);
}
if (item.ZBID == 1054) {
_this.qgfrs = item.ZXZ
console.log('规范管理人数: ' + this.qgfrs);
}
})
//
_this.ageqy.forEach((item, index) => {
_this.agedatayq.push(item.zbxx[0].ZXZ)
})
_this.agegl.forEach((item, index) => {
_this.agedatayg.push(item.zbxx[0].ZXZ)
})
} else if (_this.DieaNo == 2) {
console.log("糖尿病输出");
this.themeidnow = 19 // 底部柱状图ID
this.bottominit() // 数据请求、柱状图图标渲染
_this.gtopdata = _this.agdata[1]
_this.qtopdata = _this.aqdata[1]
_this.gxjdata = _this.agxjdata[1]
_this.qxjdata = _this.aqxjdata[1]
_this.gsfdata = _this.agsfdata[1]
_this.qsfdata = _this.aqsfdata[1]
_this.gxbdata0 = _this.agxbdata0[1]
_this.gxbdata1 = _this.agxbdata1[1]
_this.qxbdata0 = _this.aqxbdata0[1]
_this.qxbdata1 = _this.aqxbdata1[1]
console.log(_this.agdata[1])
console.log(_this.aqdata[1])
console.log(this.agxjdata[1])
console.log(this.aqxjdata[1])
console.log(this.agsfdata[1])
console.log(this.aqsfdata[1])
console.log(_this.agxbdata0[1])
console.log(_this.agxbdata1[1])
console.log(_this.aqxbdata0[1])
console.log(_this.aqxbdata1[1])
_this.gtnbdata.forEach((item, index) => {
// console.log(JSON.stringify(item));
// console.log(JSON.stringify(item.ZBID));
if (item.ZBID == 1051) {
console.log(JSON.stringify(item));
_this.gglrs = item.ZXZ
}
if (item.ZBID == 1056) {
_this.ggfrs = item.ZXZ
}
})
_this.qtnbdata.forEach((item, index) => {
if (item.ZBID == 1051) {
console.log(555555555555555555);
_this.qglrs = item.ZXZ
}
if (item.ZBID == 1056) {
_this.qgfrs = item.ZXZ
}
})
//
_this.ageqy.forEach((item, index) => {
_this.agedatayq.push(item.zbxx[1].ZXZ)
})
_this.agegl.forEach((item, index) => {
_this.agedatayg.push(item.zbxx[1].ZXZ)
})
} else {
this.themeidnow = 10
this.bottominit()
let _this = this
setTimeout(function(){_this.zhongliu()},500)
}
// if(1){
// _this.option3.yAxis[0].data = this.agedatax
// _this.option3.series[0].data = this.agedatayg
// _this.option3.series[1].data = this.agedatayq
// _this.$echarts.init(document.getElementById("rightupbar2")).setOption(this.option3, true)
// }
},
homeinit() {
this.agedatax = []
this.agedatayg = []
this.agedatayq = []
let _this = this
let wd = [{
"name": "XZQH",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"type": "2",
"compare": "between"
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let param = {
"themeId": _this.themeID,
"wd": JSON.stringify(wd),
// "group": this.BarType
} //zbcode : zbcode
// console.log(param);
commonMethod(param).then(res => {
// console.log('慢病管理在管')
// console.log(res);
_this.agdata = res.data.content[0].zbxx
// console.log(JSON.stringify(_this.agdata))
_this.gtopdata = _this.agdata[0]
// console.log(JSON.stringify(_this.agdata));
// console.log(JSON.stringify(_this.gtopdata.ZXZ));
// console.log(JSON.stringify(_this.gtopdata.TBZ));
// console.log(JSON.stringify(_this.gtopdata.TBL));
//
}).catch(err => {
console.log("--慢病管理在管报错--");
})
//{\"name\":\"QYBZ\",\"value\":\"1\",\"type\":\"1\"}不加这个管
let wdq = [{
"name": "XZQH",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"type": "2",
"compare": "between",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
},{
"name": "QYBZ",
"value": "1",
"type": "1",
}]
let paramq = {
"themeId": _this.themeID,
"wd": JSON.stringify(wdq),
// "group": this.BarType,
} //zbcode : zbcode
// console.log(_this.themeID);
commonMethod(paramq).then(res => {
// console.log('慢病管理在签')
// console.log(res)
_this.aqdata = res.data.content[0].zbxx
_this.qtopdata = _this.aqdata[0]
// console.log("" + qtopdata);
}).catch(err => {
console.log("--慢病管理在签报错--");
})
let wdxj = [{
"name": "XZQH",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"type": "2",
"compare": "between"
}, {
"name": "XJ",
"value": "XJ",
"type": "1",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let paramxj = {
"themeId": _this.themeID,
"wd": JSON.stringify(wdxj),
// "group": this.BarType,
}
commonMethod(paramxj).then(res => {
// 1045
// console.log(JSON.stringify(res));
_this.agxjdata = res.data.content[0].zbxx
_this.gxjdata = _this.agxjdata[0]
// console.log("管新建数 累计 " + _this.gxjdata.ZXZ);
// console.log(this.PlaceCode);
// console.log("失访数(累计) " + _this.qxjdata.ZXZ);
// console.log("管新建数 本周" + _this.gxjdata.TBZ);
// console.log("失访数/本周 " + _this.qxjdata.TBZ);
}).catch(err => {
console.log("--慢病管理新建-管报错--");
})
let wdxjq = [{
"name": "QYBZ",
"value": "1",
"type": "1",
}, {
"name": "XZQH",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"type": "2",
"compare": "between"
}, {
"name": "XJ",
"value": "XJ",
"type": "1",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let paramxjq = {
"themeId": _this.themeID,
"wd": JSON.stringify(wdxjq),
// "group": this.BarType,
}
commonMethod(paramxjq).then(res => {
// console.log('慢病管理新建-签')
// console.log(JSON.stringify(res))
_this.aqxjdata = res.data.content[0].zbxx
_this.qxjdata = _this.aqxjdata[0]
}).catch(err => {
console.log("--慢病管理新建-签报错--");
})
// console.log(this.PlaceCode);
let wdsf = [{
"name": "XZQH",
"type": "2",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between"
}, {
"name": "SF",
"value": "SF",
"type": "1",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let paramsf = {
"themeId": _this.themeID,
"wd": JSON.stringify(wdsf),
// "group": this.BarType,
}
commonMethod(paramsf).then(res => {
// console.log('慢病管理失访-管')
// console.log(res)
res.data.content[0].zbxx.forEach(item=>{
console.log(item.ZBID);
if(item.ZBID == "1045"){
_this.agsfdata = item
}
})
// console.log( _this.agsfdata);
_this.gsfdata = _this.aqsfdata[0]
// console.log("签失访数累计 " + _this.gsfdata.ZXZ);
// console.log("签失访数本周 " + _this.gsfdata.TBZ);
}).catch(err => {
console.log("--慢病管理失访-管报错--");
})
let wdsfq = [{
"name": "XZQH",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"type": "2",
"compare": "between"
}, {
"name": "QYBZ",
"value": "1",
"type": "1",
}, {
"name": "SF",
"value": "SF",
"type": "1",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let paramsfq = {
"themeId": _this.themeID,
"wd": JSON.stringify(wdsfq),
// "group": this.BarType
}
commonMethod(paramsfq).then(res => {
// console.log('慢病管理失访-签')
// console.log(res)
_this.aqsfdata = res.data.content[0].zbxx
_this.qsfdata = _this.aqsfdata[0]
console.log(222222);
}).catch(err => {
console.log("--慢病管理失访-签报错--");
})
//var zbcode="MBZFX_016";单独读取
let wd2 = [{
"name": "XZQH",
"type": "2",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let param2 = {
"themeId": _this.themeID2,
"wd": JSON.stringify(wd2),
// "group": this.BarType
}
commonMethod(param2).then(res => {
// console.log('慢病管理高血压-管')
// console.log(res)
_this.ggxydata = res.data.content[0].zbxx
_this.ggxydata.forEach((item, index) => {
if (item.ZBID == 1048) {
_this.gglrs = item.ZXZ
console.log("年内以管理人数 " + this.gglrs);
}
if (item.ZBID == 1054) {
_this.ggfrs = item.ZXZ
console.log("规范管理人数 " + this.ggfrs);
}
})
}).catch(err => {
console.log("--慢病管理高血压报错--");
})
let wd2q = [{
"name": "XZQH",
"type": "2",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
}, {
"name": "QYBZ",
"value": "1",
"type": "1",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let param2q = {
"themeId": _this.themeID2,
"wd": JSON.stringify(wd2q),
// "group": this.BarType
}
commonMethod(param2q).then(res => {
// console.log('慢病管理高血压-签')
// console.log(res)
_this.qgxydata = res.data.content[0].zbxx
_this.qgxydata.forEach((item, index) => {
if (item.ZBID == 1051 && this.areaname != '') {
console.log(555555555555555555);
_this.qglrs = item.ZXZ
}
if (item.ZBID == 1054 && this.areaname != '') {
_this.qgfrs = item.ZXZ
}
})
}).catch(err => {
console.log("--慢病管理高血压报错--");
})
//var zbcode="MBZFX_016";单独读取
let wdtnbg = [{
"name": "XZQH",
"type": "2",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let paramtnbg = {
"themeId": _this.themeID3,
"wd": JSON.stringify(wdtnbg),
// "group": this.BarType
}
commonMethod(paramtnbg).then(res => {
// console.log('慢病管理糖尿病-管')
// console.log(res)
_this.gtnbdata = res.data.content[0].zbxx
}).catch(err => {
console.log("--慢病管理糖尿病报错--");
})
let wdtnbq = [{
"name": "XZQH",
"type": "2",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
}, {
"name": "QYBZ",
"value": "1",
"type": "1",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let paramtnbq = {
"themeId": _this.themeID3,
"wd": JSON.stringify(wdtnbq),
// "group": this.BarType
}
commonMethod(paramtnbq).then(res => {
// console.log('慢病管理糖尿病-签')
// console.log(res)
_this.qtnbdata = res.data.content[0].zbxx
}).catch(err => {
console.log("--慢病管理糖尿病报错--");
})
/********************************************************************************************************************************************/
let wdxb = [{
"name": "XZQH",
"type": "2",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
}, {
"name": "XB",
"value": "0",
"type": "1",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let paramxb = {
"themeId": _this.themeID,
"wd": JSON.stringify(wdxb),
// "group": this.BarType
}
commonMethod(paramxb).then(res => {
// console.log('女性别-管')
// console.log(res)
_this.agxbdata0 = res.data.content[0].zbxx
_this.gxbdata0 = _this.agxbdata0[0]
}).catch(err => {
console.log("--女性别报错--");
})
let wdxb1 = [{
"name": "XZQH",
"type": "2",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
}, {
"name": "XB",
"value": "1",
"type": "1",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let paramxb1 = {
"themeId": _this.themeID,
"wd": JSON.stringify(wdxb1),
// "group": this.BarType
}
commonMethod(paramxb1).then(res => {
// console.log('男性别-管')
// console.log(res)
_this.agxbdata1 = res.data.content[0].zbxx
_this.gxbdata1 = _this.agxbdata1[0]
}).catch(err => {
console.log("--男性别报错--");
})
let wdxbq = [{
"name": "XZQH",
"type": "2",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
}, {
"name": "QYBZ",
"value": "1",
"type": "1",
}, {
"name": "XB",
"value": "0",
"type": "1",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let paramxbq = {
"themeId": _this.themeID,
"wd": JSON.stringify(wdxbq),
// "group": this.BarType
}
commonMethod(paramxbq).then(res => {
// console.log('女性别-签---')
// console.log(res)
_this.aqxbdata0 = res.data.content[0].zbxx
_this.qxbdata0 = _this.aqxbdata0[0]
}).catch(err => {
console.log("--女性别报错--");
})
let wdxbq1 = [{
"name": "XZQH",
"type": "2",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
}, {
"name": "QYBZ",
"value": "1",
"type": "1",
}, {
"name": "XB",
"value": "1",
"type": "1",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let paramxbq1 = {
"themeId": _this.themeID,
"wd": JSON.stringify(wdxbq1),
// "group": this.BarType
}
commonMethod(paramxbq1).then(res => {
// console.log('男性别-签---')
// console.log(res)
_this.aqxbdata1 = res.data.content[0].zbxx
_this.qxbdata1 = _this.aqxbdata1[0]
}).catch(err => {
console.log("--男性别报错--");
})
/********************************************************************************************************************************************/
let wdnl = [{
"name": "XZQH",
"type": "2",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let paramnl = {
"themeId": _this.themeID,
"wd": JSON.stringify(wdnl),
"group": "NL"
}
commonMethod(paramnl).then(res => {
// console.log('年龄-管--')
// console.log(res)
_this.agegl = res.data.content
_this.agegl.forEach((item, index) => {
item.NL ? _this.agedatax.push(item.NL) : ''
})
// console.log(_this.agedatax)
}).catch(err => {
console.log("--年龄报错--");
})
let wdnl2 = [{
"name": "XZQH",
"type": "2",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
}, {
"name": "QYBZ",
"value": "1",
"type": "1",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let paramnl2 = {
"themeId": _this.themeID,
"wd": JSON.stringify(wdnl2),
"group": "NL"
}
commonMethod(paramnl2).then(res => {
// console.log('年龄-签agedatayq--')
// console.log(JSON.stringify(paramnl2));
// console.log(res)
_this.ageqy = res.data.content
_this.ageqy.forEach((item, index) => {
_this.agedatayq.push(item.zbxx[0].ZXZ)
})
_this.agegl.forEach((item, index) => {
_this.agedatayg.push(item.zbxx[0].ZXZ)
})
// console.log(this.agedatax)
// console.log(this.agedatayg)
// console.log(this.agedatayq)
let temp1 = [],
temp2 = [],
temp3 = [],
Temp = []
for (var i = 0; i < this.agedatax.length; i++) {
let agestructObj = {
age: 'v',
g_age: 'v',
q_age: 'v'
}
agestructObj.age = this.agedatax[i]
agestructObj.g_age = this.agedatayg[i]
agestructObj.q_age = this.agedatayq[i]
Temp.push(agestructObj)
}
Temp.sort((prev, next) => {
return parseInt(next.age.slice(0, 2)) - parseInt(prev.age.slice(0, 2))
})
Temp.forEach(item => {
temp1.push(item.age)
temp2.push(item.g_age)
temp3.push(item.q_age)
})
// _this.option3.yAxis[0].data = _this.agedatax
// _this.option3.series[0].data = this.agedatayg
// _this.option3.series[1].data = this.agedatayq
this.option3.yAxis[0].data = temp1
this.option3.series[0].data = temp2
this.option3.series[1].data = temp3
// console.log(temp1)
// console.log(temp2)
// console.log(temp3)
// console.log(JSON.stringify(Temp));
// setTimeout(function(){
// _this.$echarts.init(document.getElementById("rightupbar2")).setOption(this.option3, true)
const obj2 = setInterval(() => {
const dom = document.getElementById("rightupbar2")
if (dom) {
const myChart2 = this.$echarts.init(dom)
if (this.option3 && typeof this.option3 === "object") {
myChart2.setOption(this.option3, true)
}
clearInterval(obj2)
}
}, 400)
// },500)
}).catch(err => {
console.log("--年龄报错--");
})
},
zhongliu() {
console.log("肿瘤的上方圆形图表输出");
let _this = this
this.rightlist1 = '初访完成比/同·%'
this.rightlist2 = '知情同意接受随访比/偏·%'
this.rightlist3 = '规范管理率/同·%'
let wd = [{
"name": "XZQH",
"type": "2",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let param = {
"themeId": _this.themeID4,
"wd": JSON.stringify(wd),
}
commonMethod(param).then(res => {
// console.log('慢病管理肿瘤')
console.log(JSON.stringify(res))
let datalist = res.data.content[0].zbxx
datalist.forEach((item, index) => {
if (item.ZBID == 1038) {
_this.wcdata = item
console.log(item);
}
if (item.ZBID == 1037) {
_this.wclv = item.ZXZ ? item.ZXZ : 0
_this.wczbz = item.ZXZ ? item.ZXZ : 0
_this.wwczbz = 100 - item.ZXZ ? item.ZXZ : 0
_this.wclvdata = item
}
if (item.ZBID == 1041) {
_this.zqlv = item.ZXZ ? item.ZXZ : 0
_this.zqlvdata = item
}
if (item.ZBID == 1042) {
_this.gflv = item.ZXZ ? item.ZXZ : 0
_this.gflvdata = item
}
if (item.ZBID == 1043) {
_this.chdata = item
}
})
// tableAll
_this.option2.series[0].data[0].value = _this.wczbz
_this.option2.series[0].data[1].value = _this.wwczbz
_this.$echarts.init(document.getElementById("pag1canser")).setOption(_this.option2, true)
_this.option.series[0].data[0].value = _this.wclv
_this.option.series[0].data[1].value = 100 - _this.wclv
_this.option.series[1].data[0].value = _this.zqlv
_this.option.series[1].data[1].value = 100 - _this.zqlv
_this.option.series[2].data[0].value = _this.gflv
_this.option.series[2].data[1].value = 100 - _this.gflv
_this.$echarts.init(document.getElementById("chartsright")).setOption(_this.option, true)
// console.log(_this.option)
}).catch(err => {
console.log("--慢病管理肿瘤报错--");
})
},
changecity(code, name, yldm) {
if (this.areaclick && this.closeareaclick) {
this.commun = "社区"
console.log("此处是第一次点击");
console.log("diann");
this.areaname = name
this.PlaceCode = code
this.BackCLick = true
this.BarType = 'YLJGDM'
this.BeginCode = 1
this.areaclick = false
this.lastStatus.PlaceCode = this.PlaceCode
this.lastStatus.BackCLick = this.BackCLick
this.lastStatus.BarType = this.BarType
this.lastStatus.BeginCode = this.BeginCode
this.lastStatus.areaclick = this.areaclick
// console.log(this.lastStatus);
// console.log(this.PlaceCode);
this.homeinit()
this.reApplyCharts()
this.bottominit()
this.SheQuCode = 2
this.tablename = '社区'
this.thname = '医院'
console.log(111);
return false
}
if (this.SheQuCode == 2) {
// console.log("此处是第二次点击");
// console.log("显示市区");
// console.log(yldm);
console.log(111);
this.closeareaclick = false
// this.PlaceCode = yldm
this.areaname = name
this.communhidden = false
this.BarType = 'YWSJ'
this.homeinit()
this.reApplyCharts()
this.bottominit()
this.SheQuCode = 3
this.tablename = '时间'
this.thname = '月份'
return false
}
},
bottominit() {
let _this = this
let wd, param,wdq, paramq
//console.log(this.areaclick);
if (this.areaclick && this.closeareaclick) {
// console.log('初次渲染:展示二级区');
wd = [{
"name": "YWSJ",
"type": "2",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
}]
param = {
"themeId": this.themeidnow,
"wd": JSON.stringify(wd),
"group": this.BarType,
},
wdq = [{
"name": "YWSJ",
"type": "2",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
},{
"name":"QYBZ",
"value":"1",
"type":"1",
}]
paramq = {
"themeId": this.themeidnow,
"wd": JSON.stringify(wd),
"group": this.BarType,
}
console.log("this.BarType :" + this.BarType);
} else if (this.SheQuCode == 2) {
console.log('第一次点击:展示三级镇');
wd = [{
"name": "YWSJ",
"type": "2",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
},
{
"name": "XZQH",
"value": this.PlaceCode,
"type": "1",
}
]
param = {
"themeId": this.themeidnow,
"wd": JSON.stringify(wd),
"group": this.BarType,
}
wdq = [{
"name": "YWSJ",
"type": "2",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
},
{
"name": "XZQH",
"value": this.PlaceCode,
"type": "1",
},
{
"name":"QYBZ",
"value":"1",
"type":"1",
}
]
paramq = {
"themeId": this.themeidnow,
"wd": JSON.stringify(wd),
"group": this.BarType,
}
console.log("this.BarType :" + this.BarType);
} else if (this.SheQuCode = 3) {
console.log('第二次点击:展示区镇 时间数据');
console.log("this.BarType :" + this.BarType);
this.closeareaclick = true
wd = [{
"name": "YWSJ",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
"type": "2",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1",
}]
param = {
"themeId": this.themeidnow,
"wd": JSON.stringify(wd),
"group": this.BarType,
}
wdq = [{
"name": "YWSJ",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"compare": "between",
"type": "2",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1",
},{
"name":"QYBZ",
"value":"1",
"type":"1",
}]
paramq = {
"themeId": this.themeidnow,
"wd": JSON.stringify(wd),
// "group": this.BarType,
}
}
console.log(JSON.stringify(param));
commonMethod(param).then(res => {
// console.log('底部')
// console.log(res);
// console.log(JSON.stringify(res))
let temptableAll = res.data.content
// console.log(temptableAll[0]);
// if (temptableAll[0].YWSJ) {console.log(222);}
if (temptableAll[0] && temptableAll[0].YWSJ) {
temptableAll.sort((prev, next) => {
return parseInt(prev.YWSJ.substring(5, 7)) - parseInt(next.YWSJ.substring(5, 7))
})
}
// console.log(temptableAll);
// console.log(res.data.content);
_this.data_x = []
_this.tableAll = []
_this.gxyseriesA = []
_this.gxyseriesB = []
_this.gxyseriesC = []
_this.gxyseriesD = []
_this.gxyseriesE = []
_this.gxyseriesF = []
_this.gxyseriesG = []
_this.gxyseriesH = []
// console.log(this.BarSelect);
if (this.BarSelect == 1) {
// 随访 - 标签数据获取
// console.log('我是随访');
res.data.content.forEach((item, index) => {
let obj = {
name: '',
code: '',
tag1: '',
tag2: '',
tag3: '',
tag4: '',
tag5: '',
tag6: '',
YLDM: ''
}
// console.log(item.XZQH);
if (item.YWSJ) {
obj.name = item.YWSJ.substring(5, 7) + '月'
} else {
if (item.XZQH_TEXT) {
obj.name = item.XZQH_TEXT
} else if (item.YLJGDM_EX2) {
obj.name = item.YLJGDM_EX2
} else {
obj.name = '数据缺失'
}
}
obj.code = item.XZQH
obj.YLDM = item.YLJGDM
// console.log(obj);
// console.log(item);
let NameTemp
if (_this.groupNo == 1) {
NameTemp = item.XZQH_TEXT ? item.XZQH_TEXT : item.YLJGDM_EX2
_this.data_x.push(obj.name)
} else {
NameTemp = item.YWSJ.substring(6, 7) + '月' ? item.YWSJ.substring(6, 7) + '月' : item.YLJGDM_EX2.substring(
6, 7) + '月'
_this.data_x.push(NameTemp)
}
if (!this.PlaceCode) {
item.zbxx.forEach((item2, index2) => {
console.log(JSON.stringify(item2));
if (item2.ZBID == '1058' || item2.ZBID == '1050') {
_this.gxyseriesA.push(parseFloat(item2.ZXZ / 10000))
_this.gxyseriesB.push(item2.TBZ)
}
if (item2.ZBID == '1053' || item2.ZBID == '1055') {
_this.gxyseriesC.push(item2.ZXZ)
_this.gxyseriesD.push(item2.ZXZ)
// console.log(item2);
obj.tag1 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
obj.tag2 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
if (item2.ZBID == '1047' || item2.ZBID == '1050') {
_this.gxyseriesE.push(item2.ZXZ)
_this.gxyseriesF.push(item2.ZXZ)
obj.tag3 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
obj.tag4 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
if (item2.ZBID == '1057' || item2.ZBID == '1060') {
_this.gxyseriesG.push(item2.ZXZ)
_this.gxyseriesH.push(item2.ZXZ)
obj.tag5 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
obj.tag6 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
})
_this.tableAll.push(obj)
} else {
// console.log('PlaceCode :' + this.PlaceCode);
// console.log('YLJGDM :' + item.YLJGDM);
// if (this.PlaceCode == item.YLJGDM) {
item.zbxx.forEach((item2, index2) => {
if (item2.ZBID == '1058' || item2.ZBID == '1050') {
// console.log(item2.ZBID);
// console.log(item2.ZXZ);
_this.gxyseriesA.push(parseFloat(item2.ZXZ / 10000))
_this.gxyseriesB.push(item2.TBZ)
}
if (item2.ZBID == '1053' || item2.ZBID == '1055') {
// console.log(item2.ZBID);
_this.gxyseriesC.push(item2.ZXZ)
_this.gxyseriesD.push(item2.ZXZ)
obj.tag1 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
obj.tag2 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
if (item2.ZBID == '104' || item2.ZBID == '1060') {
// console.log(item2.ZBID);
_this.gxyseriesE.push(item2.ZXZ)
_this.gxyseriesF.push(item2.ZXZ)
obj.tag3 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
obj.tag4 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
if (item2.ZBID == '1057' || item2.ZBID == '1061') {
// console.log(item2.ZBID);
_this.gxyseriesG.push(item2.ZXZ)
_this.gxyseriesH.push(item2.ZXZ)
obj.tag5 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
obj.tag6 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
})
_this.tableAll.push(obj)
// }
}
})
// console.log(JSON.stringify(_this.tableAll));
// DieaNo : 1-高血压 2-糖尿病
// groupNo :1-各区 2- 时间
let legendMy = [`管理/签约人群正常随访一次的人数`, `去年管理/签约人群正常随访一次的人数`, `管·年随访率/去年`, `签·年随访率/去年`, `管·规范管理率/去年`,
`签·规范管理率/去年`, `管·随访完成比/去年`, `签·随访完成比/去年`
]
if (this.groupNo == 1) {
// console.log(2222);
legendMy = [`管理/签约人群正常随访一次的人数`, `去年管理/签约人群正常随访一次的人数`, `管·年随访率/去年`, `签·年随访率/去年`, `管·规范管理率/去年`,
`签·规范管理率/去年`, `管·随访完成比/去年`, `签·随访完成比/去年`
]
} else if (this.groupNo == 2) {
// console.log(12312312334234);
legendMy = [`管理/签约人群正常随访一次的人数`, `去年管理/签约人群正常随访一次的人数`, `管·年随访率/去年`, `签·年随访率/去年`, `签·随访完成比/去年`]
}
_this.option4.legend.data = legendMy
legendMy.forEach((item, index) => {
_this.option4.series[index].name = item
})
_this.option4.series[0].data = _this.gxyseriesA
_this.option4.series[1].data = _this.gxyseriesB
_this.option4.series[2].data = _this.gxyseriesC
_this.option4.series[3].data = _this.gxyseriesD
_this.option4.series[4].data = _this.gxyseriesE
_this.option4.series[5].data = _this.gxyseriesF
_this.option4.series[6].data = _this.gxyseriesG
_this.option4.series[7].data = _this.gxyseriesH
_this.option4.xAxis[0].data = _this.data_x
//console.log(JSON.stringify(_this.option4.xAxis[0].data));
_this.$echarts.init(document.getElementById("middlebarbox1")).setOption(_this.option4, true)
this.rightlist1 = '规范管理率'
this.rightlist2 = '随访率'
this.rightlist3 = '随访比'
} else if (this.BarSelect == 2) {
// 监测 - 标签数据获取
res.data.content.forEach((item, index) => {
let obj = {
name: '',
code: '',
tag1: '',
tag2: '',
tag3: '',
tag4: '',
tag5: '',
tag6: ''
}
if (item.YWSJ) {
obj.name = item.YWSJ.substring(5, 7) + '月'
} else {
if (item.XZQH_TEXT) {
obj.name = item.XZQH_TEXT
} else if (item.YLJGDM_EX2) {
obj.name = item.YLJGDM_EX2
} else {
obj.name = '数据缺失'
}
}
obj.code = item.XZQH
if (_this.groupNo == 1) {
_this.data_x.push(obj.name)
} else {
_this.data_x.push(item.YWSJ.substring(6, 7) + '月')
}
item.zbxx.forEach((item2, index2) => {
// console.log(JSON.stringify(item2));
if (item2.ZBID == '1048' || item2.ZBID == '1064') {
// console.log(item2.ZXZ);
_this.gxyseriesA.push(item2.ZXZ)
_this.gxyseriesB.push(item2.TBZ)
}
if (item2.ZBID == '1063' || item2.ZBID == '1055') {
_this.gxyseriesC.push(item2.ZXZ)
_this.gxyseriesD.push(item2.ZXZ)
console.log(JSON.stringify(item2));
console.log(item2.ZXZ);
obj.tag1 = item2.ZXZ ? item2.ZXZ : 0
obj.tag2 = item2.ZXZ ? item2.ZXZ : 0
}
if (item2.ZBID == '1094' || item2.ZBID == '1060') {
_this.gxyseriesE.push(item2.ZXZ)
_this.gxyseriesF.push(item2.ZXZ)
obj.tag3 = item2.ZXZ ? item2.ZXZ : 0
obj.tag4 = item2.ZXZ ? item2.ZXZ : 0
}
})
_this.tableAll.push(obj)
})
// _this.option4.series[0].name ="6666"
let legendMy = [`管理/签约人群${this.dieaName}自动上传记录数`, `去年管理/签约人群${this.dieaName}自动上传记录数`,
`管·${this.dieaName}自动上传比/去年`, `签·${this.dieaName}自动上传比/去年`, `管·同型半胱氨酸检测率/去年`, `签·同型半胱氨酸检测率/去年`
]
_this.option4.legend.data = legendMy
legendMy.forEach((item, index) => {
_this.option4.series[index].name = item
})
_this.option4.series[0].data = _this.gxyseriesA
_this.option4.series[1].data = _this.gxyseriesB
_this.option4.series[2].data = _this.gxyseriesC
_this.option4.series[3].data = _this.gxyseriesD
_this.option4.series[4].data = _this.gxyseriesE
_this.option4.series[5].data = _this.gxyseriesF
_this.option4.xAxis[0].data = _this.data_x
legendMy.forEach((item, index) => {
_this.option4.series[index].name = item
})
_this.$echarts.init(document.getElementById("middlebarbox1")).setOption(_this.option4, true)
this.rightlist1 = '血压自动上传比'
this.rightlist2 = '同型半胱氨酸比'
this.rightlist3 = ''
} else if (this.BarSelect == 3) {
// 服药 - 标签数据获取
res.data.content.forEach((item, index) => {
let obj = {
name: '',
tag1: '',
tag2: '',
tag3: '',
tag4: '',
tag5: '',
tag6: ''
}
if (item.YWSJ) {
obj.name = item.YWSJ.substring(5, 7) + '月'
} else {
if (item.XZQH_TEXT) {
obj.name = item.XZQH_TEXT
} else if (item.YLJGDM_EX2) {
obj.name = item.YLJGDM_EX2
} else {
obj.name = '数据缺失'
}
}
//_this.data_x.push(item.XZQH_TEXT)
if (_this.groupNo == 1) {
_this.data_x.push(obj.name)
} else {
_this.data_x.push(item.YWSJ.substring(6, 7) + '月')
}
item.zbxx.forEach((item2, index2) => {
if (item2.ZBID == '1072' || item2.ZBID == '1074') {
_this.gxyseriesA.push(parseFloat(item2.ZXZ / 10000))
_this.gxyseriesB.push(item2.TBZ)
obj.tag1 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
obj.tag2 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
if (item2.ZBID == '1073' || item2.ZBID == '1075') {
_this.gxyseriesC.push(item2.ZXZ)
_this.gxyseriesD.push(item2.ZXZ)
obj.tag3 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
obj.tag4 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
})
_this.tableAll.push(obj)
})
let legendMy = [`管理/签约人群药物治疗人数`, `去年管理/签约人群药物治疗人数`,
`管·药物治疗率/去年`, `签·药物治疗率/去年`
]
_this.option4.legend.data = legendMy
legendMy.forEach((item, index) => {
_this.option4.series[index].name = item
})
_this.option4.series[0].data = _this.gxyseriesA
_this.option4.series[1].data = _this.gxyseriesB
_this.option4.series[2].data = _this.gxyseriesC
_this.option4.series[3].data = _this.gxyseriesD
_this.option4.series[4].data = _this.gxyseriesE
_this.option4.series[5].data = _this.gxyseriesF
_this.option4.xAxis[0].data = _this.data_x
_this.$echarts.init(document.getElementById("middlebarbox1")).setOption(_this.option4, true)
this.rightlist1 = '药物治疗人数·万'
this.rightlist2 = '药物治疗率·%'
this.rightlist3 = ''
} else if (this.BarSelect == 4) {
// 就诊 - 标签数据获取
res.data.content.forEach((item, index) => {
let obj = {
name: '',
tag1: '',
tag2: '',
tag3: '',
tag4: '',
tag5: '',
tag6: ''
}
if (item.YWSJ) {
obj.name = item.YWSJ.substring(5, 7) + '月'
} else {
if (item.XZQH_TEXT) {
obj.name = item.XZQH_TEXT
} else if (item.YLJGDM_EX2) {
obj.name = item.YLJGDM_EX2
} else {
obj.name = '数据缺失'
}
}
//_this.data_x.push(item.XZQH_TEXT)
if (_this.groupNo == 1) {
_this.data_x.push(obj.name)
} else {
_this.data_x.push(item.YWSJ.substring(6, 7) + '月')
}
item.zbxx.forEach((item2, index2) => {
if (item2.ZBID == '1081' || item2.ZBID == '1084') {
_this.gxyseriesA.push(item2.ZXZ)
_this.gxyseriesB.push(item2.TBZ)
}
if (item2.ZBID == '1083' || item2.ZBID == '1086') {
_this.gxyseriesC.push(item2.ZXZ)
_this.gxyseriesD.push(item2.ZXZ)
obj.tag1 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
obj.tag2 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
if (item2.ZBID == '1095' || item2.ZBID == '1098') {
_this.gxyseriesE.push(item2.ZXZ)
_this.gxyseriesF.push(item2.ZXZ)
obj.tag3 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
obj.tag4 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
})
_this.tableAll.push(obj)
})
let legendMy = [`管理/签约人群就诊人次数`, `去年管理/签约人群就诊人次数`,
`管·就诊率/去年`, `签·就诊率/去年`, `管·住院率/去年`, `签·住院率/去年`
]
_this.option4.legend.data = legendMy
legendMy.forEach((item, index) => {
_this.option4.series[index].name = item
})
_this.option4.series[0].data = _this.gxyseriesA
_this.option4.series[1].data = _this.gxyseriesB
_this.option4.series[2].data = _this.gxyseriesC
_this.option4.series[3].data = _this.gxyseriesD
_this.option4.series[4].data = _this.gxyseriesE
_this.option4.series[5].data = _this.gxyseriesF
_this.option4.xAxis[0].data = _this.data_x
_this.$echarts.init(document.getElementById("middlebarbox1")).setOption(_this.option4, true)
this.rightlist1 = '就诊率'
this.rightlist2 = '住院率'
this.rightlist3 = ''
}
// console.log(' data_x:' + _this.data_x)
_this.option4.xAxis[0].data = _this.data_x
_this.$echarts.init(document.getElementById("middlebarbox1")).setOption(_this.option4, true)
}).catch(err => {
console.log("--慢病管理肿瘤底部报错--");
})
},
reApplyCharts() {
// 右侧图
const obj = setInterval(() => {
const dom = document.getElementById("chartsright")
if (dom) {
const myChart1 = this.$echarts.init(dom)
if (this.option && typeof this.option === "object") {
myChart1.setOption(this.option, true)
}
clearInterval(obj)
}
}, 200)
// 肿瘤饼图
const obj2 = setInterval(() => {
const dom = document.getElementById("pag1canser")
if (dom) {
const myChart2 = this.$echarts.init(dom)
if (this.option2 && typeof this.option2 === "object") {
myChart2.setOption(this.option2, true)
}
clearInterval(obj2)
}
}, 200)
const obj4 = setInterval(() => {
const dom = document.getElementById("middlebarbox1")
if (dom) {
const myChart = this.$echarts.init(dom)
if (this.option4 && typeof this.option4 === "object") {
myChart.setOption(this.option4, true)
}
clearInterval(obj4)
}
}, 200)
}
},
mounted() {
this.homeinit()
this.reApplyCharts()
this.bottominit()
localStorage.setItem("ScreenPage", 1)
},
components: {}
}
</script>
<style lang="stylus" scoped>
.myclk {color: #e4f4ff;font-weight: 600;font-size: 14px;}
#chartsright {width: 100px;height: 120px;float: left;}
#chartstxt {width: 120px;height: 100px;float: left;padding-top: 15px;}
#chartstxt p {clear: both;line-height: 22px;color: #B3BFD2;padding-right: 6px;}
#pag1canser {width: 220px;height: 150px;padding-top: 20px;}
#rightupbar2 {width: 220px;height: 130px;}
#middlebarbox1 {width: 455px;height: 280px}
.area>>>.el-input--mini .el-input__inner {padding: 0;text-align: center;color: #FFF;border: 1px solid #409EFF;background-color: #409EFF;}
.area>>>.el-input--mini .el-input__inner::-webkit-input-placeholder {color: #FFF;}
.area>>>.el-input--mini {width: 60px; margin-left: 8px;}
.area>>>.el-input__icon.el-icon-date { display: none}
.area>>>.el-input__icon {display: none}
.uplib{width: 100%;height: 80px;position:absolute;top:76px;right:0;left:0;background:rgba(51, 51, 51, 0.9);padding:10px}
</style>
This source diff could not be displayed because it is too large. You can view the blob instead.
<template>
<!-- 服务质量 -->
<div class="pagetwo" @click="showtabpage3(0)">
<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" @click="CityGetBack()" v-if="this.BeginCode != 1">返回</el-button>
<el-button size="mini" @click="changeReplay()" 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>
<!----第一个模块---->
<div class="card-dark card-01">
<div class="card1-mod">
<h2>管·患者当前死亡后随访人数</h2>
<div class="cmtitle"><span class="center">{{topgdata.ZXZ?topgdata.ZXZ:0}}</span><span class="span2"></span></div>
<div class="cmtline2">
<p><span>{{topgdata.ZXZ?topgdata.ZXZ:0}}</span>本周新增死亡后随访人数</p>
<p><span>{{topgyeardiedata.ZXZ?topgyeardiedata.ZXZ:0}}</span>年内累计死亡后随访人数</p>
<p><span>{{parseFloat(topgyeardiepredata.ZXZ?topgyeardiepredata.ZXZ:0).toFixed(1)}}%</span>年内累计死亡后随访比例</p>
</div>
</div>
<div class="card1-mod">
<h2>签·患者当前死亡后随访人数</h2>
<div class="cmtitle"><span class="center">{{topqdata.ZXZ?topqdata.ZXZ:0}}</span><span class="span2"></span></div>
<div class="cmtline2">
<p><span>{{topqdata.ZXZ?topqdata.ZXZ:0}}</span>本周新增死亡后随访人数</p>
<p><span>{{topqyeardiedata.ZXZ?topqyeardiedata.ZXZ:0}}</span>年内累计死亡后随访人数</p>
<p><span>{{parseFloat(topqyeardiepredata.ZXZ?topqyeardiepredata.ZXZ:0).toFixed(1)}}%</span>年内累计死亡后随访比例</p>
</div>
</div>
</div>
<div class="card-dark card-02">
<div class="card2-mod card2-mod1" v-show="pageNo<5">
<div class="modtitle2">
<span @click="DieaChange(1)" :class="DieaNo==1?'myclk':''">高血压</span>|
<span @click="DieaChange(2)" :class="DieaNo==2?'myclk':''">糖尿病</span>
</div>
<div id="pag3charts1"></div>
<div class="datalist" v-show="DieaNo==1">
<p>管·血压零偏好占比:{{parseFloat(finalPerg.ZXZ?finalPerg.ZXZ:0).toFixed(1)}}%</p>
<p>签·血压零偏好占比:{{parseFloat(finalPerq.ZXZ?finalPerq.ZXZ:0).toFixed(1)}}%</p>
</div>
<div class="datalist" v-show="DieaNo==2">
<p>管·糖尿零偏好占比:{{parseFloat(finalPerg.ZXZ?finalPerg.ZXZ:0).toFixed(1)}}%</p>
<p>签·糖尿零偏好占比:{{parseFloat(finalPerq.ZXZ?finalPerq.ZXZ:0).toFixed(1)}}%</p>
<p>管·糖化零偏好占比:{{parseFloat(finalPerg2.ZXZ?finalPerg2.ZXZ:0).toFixed(1)}}%</p>
<p>签·糖化零偏好占比:{{parseFloat(finalPerq2.ZXZ?finalPerq2.ZXZ:0).toFixed(1)}}%</p>
</div>
</div>
<div class="card2-mod card2-mod2">
<table class="table02" width="100%" border="0">
<tr>
<td width="60%">累计条数/本周新增 </td>
<td width="40%">同比·%</td>
</tr>
<tr>
<td width="60%"><span>{{(parseFloat(topgdata2.ZXZ?topgdata2.ZXZ:0)/10000).toFixed(1)}}万 / {{(parseFloat(topgdata2.ZZZ?topgdata2.ZZZ:0)/10000).toFixed(1)}}</span></td>
<td width="40%">{{topgdata2.TBL?topgdata2.TBL:0}} <i class="el-icon-top color2"></i></td>
</tr>
<tr>
<td width="60%"><span class="span01">{{(parseFloat(topqdata2.ZXZ?topqdata2.ZXZ:0)/10000).toFixed(1)}}万 / {{(parseFloat(topqdata2.ZZZ?topqdata2.ZZZ:0)/10000).toFixed(1)}}</span></td>
<td width="40%">{{topqdata2.TBL?topqdata2.TBL:0}} <i class="el-icon-top color2"></i></td>
</tr>
<tr v-show="DieaNo==2">
<td width="60%"><span>{{(parseFloat(topgdata22.ZXZ?topgdata22.ZXZ:0)/10000).toFixed(1)}}万 / {{(parseFloat(topgdata22.ZZZ?topgdata22.ZZZ:0)/10000).toFixed(1)}}</span></td>
<td width="40%">{{topgdata22.TBL?topgdata22.TBL:0}} <i class="el-icon-top color2"></i></td>
</tr>
<tr v-show="DieaNo==2">
<td width="60%"><span class="span01">{{(parseFloat(topqdata23.ZXZ?topqdata23.ZXZ:0)/10000).toFixed(1)}}万 / {{(parseFloat(topqdata23.ZZZ?topqdata23.ZZZ:0)/10000).toFixed(1)}}</span></td>
<td width="40%">{{topqdata23.TBL?topqdata23.TBL:0}} <i class="el-icon-top color2"></i></td>
</tr>
</table>
</div>
</div>
<div class="clear10"></div>
<div class="card-dark card-03">
<ul>
<li @click="pageChage(1)"><i class="el-icon-s-cooperation"></i> 慢病管理</li>
<li @click="pageChage(2)"><i class="el-icon-bangzhu"></i> 管理效果</li>
<li @click="pageChage(3)" class="clk"><i class="el-icon-service"></i> 服务质量</li>
<li @click="pageChage(4)"><i class="el-icon-first-aid-kit"></i> 早发现</li>
<li @click="pageChage(5)"><i class="el-icon-odometer"></i> 慢病监测</li>
</ul>
</div>
<div class="card-dark card-04">
<div class="card3title1" v-show="showTab">{{arname}}</div>
<div class="card3title1" v-show="!showTab">
<span :class="tempsf==1?'myclk':''" @click="showsuifang(1)" v-if="communshow">{{arname}}</span><a v-if="communshow">|</a>
<span :class="tempsf==2?'myclk':''" @click="showsuifang(2)">时间</span>
</div>
<div class="card3title2" v-show="DieaNo == 1">
<span @click="bingChange(1)" :class="bingNo==1?'myclk':''" v-if="tempdie">死后随访</span>
<span v-if="tempdie" class="span01">|</span>
<span @click="bingChange(2)" :class="bingNo==2?'myclk':''">高糖共患</span>
<span class="span01">|</span>
<span @click="bingChange(3)" :class="bingNo==3?'myclk':''">并发症</span>
</div>
<div class="card3title2" v-show="DieaNo==2">
<span @click="bingChange(1)" :class="bingNo==1?'myclk':''">死后随访</span>
<span class="span01">|</span>
<span @click="bingChange(3)" :class="bingNo==3?'myclk':''">并发症</span>
</div>
<div class="card3main" id="pag3card3main"></div>
</div>
<div class="card-dark card-05">
<div class="card5title">{{tablename}}</div>
<div class="card5main">
<table class="table01 table" width="100%" border="0">
<thead class="fixedThead">
<tr v-show="bingNo==1">
<th width="38"></th>
<th width="48">{{thname}}</th>
<th width="68" @click.stop="showtabpage3(1)">管/签当前死<br />后随访数·万</th>
<th width="68" @click.stop="showtabpage3(2)">管/签本周新<br />增死后随访数</th>
<th width="68" @click.stop="showtabpage3(3)">管/签累计死<br />后随访比·%</th>
</tr>
<tr v-show="bingNo==2">
<th width="38"></th>
<th width="48">{{thname}}</th>
<th width="60" @click.stop="showtabpage3(1)">管/签<br />未标记率·%</th>
<th width="84" @click.stop="showtabpage3(2)">管/签批量<br />异常随访率·%</th>
<th width="60" @click.stop="showtabpage3(3)">管/签指标<br />不一致率·%</th>
</tr>
<tr v-show="bingNo==3">
<th width="38"></th>
<th width="48">{{thname}}</th>
<th width="100" @click.stop="showtabpage3(7)">管/签并存临床<br />情况未标记率·%</th>
<th width="100" @click.stop="showtabpage3(8)">管/签并存临床<br />情况未标记率·%</th>
</tr>
</thead>
<div class="uplib" v-if="showtabnum == 1">
<div v-if="bingNo==1">
指标名称:<br>{{pagedisname}}患者年内当前{{middlename}}比例<br>
计算公式:<br>年内累计死亡日期后存在随访记录的在管{{pagedisname}}患者人数/[10月1日后有死亡报卡的{{pagedisname}}管理患者死亡人数+10月1日前死亡但仍在管的患者]
</div>
<div v-if="bingNo==2">
指标名称:<br>{{middlename}}患者未标记率<br>
计算公式:<br>高血压患者合并糖尿病者病史未标记人数/高血压糖尿病共患者总人数×100%
</div>
</div>
<div class="uplib" v-if="showtabnum == 2">
<div v-if="bingNo==1">
指标名称:<br>{{pagedisname}}患者年内本周新增{{middlename}}比例<br>
计算公式:<br>年内累计死亡日期后存在随访记录的在管{{pagedisname}}患者人数/[10月1日后有死亡报卡的{{pagedisname}}管理患者死亡人数+10月1日前死亡但仍在管的患者]
</div>
<div v-if="bingNo==2">
指标名称:<br>批量异常随访率<br>
计算公式:<br>批量异常随访人次数/随访总人次数×100%
</div>
</div>
<div class="uplib" v-if="showtabnum == 3">
<div v-if="bingNo==1">
指标名称:<br>{{pagedisname}}患者并存临床情况未标记率<br>
计算公式:<br>同一患者同一天在糖尿病、高血压库中均有的随访身高/体重/血压等指标不一致人次数/共患随访总人次数×100%
</div>
<div v-if="bingNo==2">
指标名称 <br>共患患者身高/体重/血压指标不一致率<br>
计算公式:<br>同一患者同一天在糖尿病、高血压库中均有的随访身高/体重/血压等指标不一致人次数/共患随访总人次数×100%
</div>
</div>
<div class="uplib" v-if="showtabnum == 7">
<div v-if="bingNo==3">
指标名称:<br>{{pagedisname}}患者并存临床情况未标记率<br>
计算公式:<br>({{pagedisname}}患者并临床情况总人数-健康档案系统中{{pagedisname}}患者并存临床情况已标记人数)/{{pagedisname}}患者并临床情况总人数×100%
</div>
</div>
<div class="uplib" v-if="showtabnum == 8">
<div v-if="bingNo==3">
指标名称:<br>{{pagedisname}}患者并发症未标记率<br>
计算公式:<br>({{pagedisname}}患者并发症总人数-健康档案系统中{{pagedisname}}患者并发症已标记人数)/{{pagedisname}}患者并发症总人数×100%
</div>
</div>
<tbody class="scrollTbody">
<tr v-show="bingNo==1" v-for="(item, index) in listArrayFinal" :key="index">
<td width="38"><span>{{index+1}}</span></td>
<td width="48" @click="changecity(item.code,item.name)" class="underline">{{item.name}}</td>
<td width="68">{{item.tag1 + `/` + item.tag2}}</td>
<td width="68">{{item.tag3 + `/` + item.tag4}}</td>
<td width="68">{{item.tag5 + `/` + item.tag6}}</td>
</tr>
<tr v-show="bingNo==2" v-for="(item, index) in listArrayFinal" :key="index">
<td width="38"><span>{{index+1}}</span></td>
<td width="48" @click="changecity(item.code,item.name)" class="underline">{{item.name}}</td>
<td width="68">{{item.tag1 + `/` + item.tag2}}</td>
<td width="68">{{item.tag3 + `/` + item.tag4}}</td>
<td width="68">{{item.tag5 + `/` + item.tag6}}</td>
</tr>
<tr v-show="bingNo==3" v-for="(item, index) in listArrayFinal" :key="index">
<td width="38"><span>{{index+1}}</span></td>
<td width="48" @click="changecity(item.code,item.name)" class="underline">{{item.name}}</td>
<td width="100">{{item.tag1 + `/` + item.tag2}}</td>
<td width="100">{{item.tag3 + `/` + item.tag4}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import {
commonMethod,
otherMethod
} from '@/api/home.js'
export default {
name: 'screenpage3',
data() {
return {
pageNo: 3,
showtabnum:0,
pagedisname: "高血压",
middlename: "死后随访",
themeID: '22',
arname: '各区',
communshow: true,
tablename: '各区',
thname: '各区',
DieaNo: 1,
tempsf: 1,
tempdie: true,
showDea: true, // 作用于疾病 隐藏或者显示
showTab: false, // 作用域 各区/ 时间的隐藏显示
showdie: true, // 作用于死后随访
g_person_die: [],
q_person_die: [],
g_person_dieTBZ: [],
q_person_dieTBZ: [],
g_diePercent: [],
q_diePercent: [],
areaname: '',
areaname2: '',
value: '2019-09',
nowdate: '2019-09',
startTime: '2019-01',
selectStarttime: localStorage.getItem("EndTime"),
sel: '筛选',
data_x: [],
option: {
tooltip: {
show: false,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: -230,
y: 10,
itemGap: 10,
data: ['三级占比', '二级占比'],
textStyle: {
color: '#fff',
fontSize: 12
}
},
series: [{
name: '1',
type: 'pie',
clockWise: false,
radius: [33, 25],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
data: [{
value: 0,
name: '三级占比',
itemStyle: {
normal: {
color: '#42CCFF'
}
}
},
{
value: 0,
name: 'invisible',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
}
}
]
},
{
name: '2',
type: 'pie',
clockWise: false,
radius: [40, 32],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
data: [{
value: 0,
name: '二级占比',
itemStyle: {
normal: {
color: '#3F81BB'
}
}
},
{
value: 0,
name: 'invisible',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
}
}
]
}
]
},
option2: {
tooltip: {
trigger: 'axis',
position: [50, 50],
padding: 10,
axisPointer: {
type: 'none'
},
formatter: function(params) {
// console.log(params.length)
// console.log('打印params长度')
// console.log(params)
if (params[0].seriesName == '管理/签约人群累计死后随访人数') {
var res = '<ul class="f12 pl10 pr15">';
res += '<li class="f13"> ' + params[0].axisValue + '区</li>';
res += '<li>管理/签约人群年内累计死亡日期后存在随访记录的在管<br/>高血压患者人数:' + params[0].data + '/' + params[1].data +
'万</li>';
res += '<li>去年管理/签约人群年内累计死亡日期后存在随访记录的在<br/>管高血压患者人数:' + params[2].data + '/' + params[2].data +
'万</li>';
res += '<li>管.高血压患者年内累计死亡后随访比例/去年:' + params[3].data + '/' + params[3].data + '%</li>';
res += '<li>签.高血压患者年内累计死亡后随访比例/去年:' + params[4].data + '/' + params[5].data + '%</li>';
res += '</ul>';
} else if (params[0].seriesName == '管理/签约人群病史未标记人数') {
var res = '<ul class="f12 pl10 pr15">';
res += '<li class="f13"> ' + params[0].axisValue + '区</li>';
res += '<li>管理/签约人群年内累计死亡日期后存在随访记录的在管<br/>高血压患者人数:' + params[0].data + '/' + params[1].data +
'万</li>';
res += '<li>去年管理/签约人群年内累计死亡日期后存在随访记录的在<br/>管高血压患者人数:' + params[2].data + '/' + params[3].data +
'万</li>';
res += '<li>管.高血压患者年内累计死亡后随访比例/去年:' + params[4].data + '/' + params[5].data + '%</li>';
res += '<li>签.高血压患者年内累计死亡后随访比例/去年:' + params[6].data + '/' + params[7].data + '%</li>';
res += '</ul>';
} else {
var res = '<ul class="f12 pl10 pr15">';
res += '<li class="f13"> ' + params[0].axisValue + '区</li>';
res += '<li>管理/签约人群高血压患者并临床情况<br/>未标记数:' + params[0].data + '/' + params[1].data + '万</li>';
res += '<li>去年管理/签约人群高血压患者并临床情况<br/>未标记数:' + params[2].data + '/' + params[2].data + '万</li>';
res += '<li>管.高血压患者并存临床情况未标记率/去年:' + params[3].data + '/' + params[3].data + '%</li>';
res += '<li>签.高血压患者并存临床情况未标记率/去年:' + params[4].data + '/' + params[5].data + '%</li>';
res += '</ul>';
}
return res
}
},
dataZoom: {
start: 0, //默认为0
end: 50, //默认为100
type: 'slider',
show: true ,
xAxisIndex: [0] ,
handleSize: 20 , //滑动条的 左右2个滑动条的大小
height: 5 , //组件高度
left: 50, //左边的距离
right: 45, //右边的距离
bottom: 40, //右边的距离
backgroundColor: '#ccc', //两边未选中的滑动条区域的颜色
showDataShadow: true, //是否显示数据阴影 默认auto
handleStyle: {
borderColor: "#CBBCDB",
borderWidth: "1",
shadowBlur: 1,
background: "#000",
shadowColor: "#000",
},
filterMode: 'filter',
},
legend: {
textStyle: {
color: '#8393A9',
fontSize: 10,
},
left: 30,
width: 400,
top: '0',
itemHeight: 10,
itemWidth: 14,
itemGap: 5,
height: 50,
align: 'left',
selectedMode: true,
},
grid: {
top: 80,
bottom: 45,
left: 50
},
xAxis: [{
type: 'category',
data: [],
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
},
}
],
dataZoom: [{
type: 'inside',
startValue: 0,
filterMode: 'empty',
endValue: 14
}],
series: []
},
topgdata: [], //管· 患者当前死亡后随访人数
topgdata2:[],
topgdata22:[],
topqdata: [], //签· 患者当前死亡后随访人数
topqdata2:[],
topqdata23:[],
circledatag1: [],
circledataq1: [],
circledatag2: [],
circledataq2: [],
bingNo: 1,
BarType: "XZQH",
finalPerg: 0,
finalPerq: 0,
finalPerg2: 0,
finalPerq2: 0,
topgweekdiedata: [], //管·周新增死亡人数
topqweekdiedata: [], //签 周新增死亡人数
topgyeardiedata: [], //管·年总死亡人数
topqyeardiedata: [], //签·年总死亡人数
topgyeardiepredata: [], //管·年总死亡人数随访比例
topqyeardiepredata: [], //签·年总死亡人数随访比例
topqzdldata: [], //签·血压异常者诊断率
bottomList_1: [], //
bottomList_2: [], // 当前死亡后随访人数
listArray: [], //右下角列表数组
listArray2: [],
listArrayFinal: [],
Gbotdata: [],
Qbotdata: [],
data101: [],
data102: [],
data103: [],
data104: [],
data105: [],
data106: [],
data201: [],
data202: [],
data203: [],
data204: [],
data205: [],
data206: [],
data207: [],
data208: [],
data209: [],
data210: [],
data301: [],
data302: [],
data303: [],
data304: [],
data305: [],
data306: [],
BeginCode: 1,
lastStatus: {},
PlaceCode: ''
}
},
methods: {
showtabpage3(num){
this.showtabnum = num
console.log(this.showtabnum);
},
CityGetBack() {
console.log('执行事件前this.BeginCode: ' + this.BeginCode);
console.log("this.diastype :" + this.diastype);
this.communshow = true
if (this.BeginCode == 3) {
// 使用 this.BeginCode 的值来判断现在处于的区镇状态
// 此时 处于第一次点击下的状态
this.PlaceCode = ''
this.BarType = 'XZQH'
this.BeginCode = 1
this.areaname = ''
this.tablename = '各区'
this.thname = '各区'
this.arname = '各区'
// this.BeginCode = false
console.log("现在处于一级状态");
}
if (this.BeginCode == 4) {
// 使用 this.BeginCode 的值来判断现在处于的区镇状态
// 此时 处于第二次点击下的状态
// console.log("现在处于二级状态");
this.PlaceCode = this.lastStatus.PlaceCode
this.BarType = this.lastStatus.BarType
this.BeginCode = 2
this.tablename = '医院'
this.thname = '医院'
this.arname = '社区'
this.areaname = this.areaname2
// this.BeginCode = this.lastStatus.BeginCode
// this.BackCLick = this.lastStatus.BackCLick
// this.areaclick = true
// this.BeginCode = 2
console.log(this.lastStatus);
}
console.log('执行事件后this.BeginCode: ' + this.BeginCode);
this.homeinit()
},
changeReplay() {
var myDate = new Date();
let tempmonth = myDate.getMonth()
if(tempmonth<10){
tempmonth = '0'+tempmonth
}
// 用于 重置时间 入参
let DateNow = '' + myDate.getFullYear()+'-' + tempmonth + '-01'
console.log(DateNow);
//this.pageChage(2)
this.themeID = 22
this.PlaceCode = ''
this.areaname = ''
this.tablename = '各区'
this.thname = '各区'
this.BarType = 'XZQH'
this.arname = '各区'
this.BeginCode = 1
this.selectStarttime = DateNow
this.showTab = true
// this.homeinit()
this.dataSearch(DateNow)
},
pageChage(page) {
this.$emit('screenTwoPagefunc', page)
},
dataSearch(value) {
var myDate = new Date();
myDate.getYear();
localStorage.setItem("EndTime", value)
this.startTime = value.slice(0, 4) + '-01'
if (value) {
this.nowdate = value.slice(0, 7)
this.selectStarttime = value.slice(0, 7)
console.log(this.nowdate);
console.log(this.selectStarttime);
this.homeinit()
}
},
showsuifang(num) {
if (num == 1) {
this.tempsf = 1
this.tempdie = true
this.BarType = 'XZQH'
} else {
this.tempsf = 2
this.tempdie = false
this.BarType = 'YWSJ'
}
this.homeinit()
},
changecity(code, name) {
console.log("code: " + code)
console.log('执行事件前this.BeginCode: ' + this.BeginCode);
if (this.BeginCode == 4) {
return false
}
this.areaname = name
//当 this.BeginCode == 4 的时候 ,证明已经到了最底层,故不再请求方法
// console.log(code);
this.PlaceCode = code
if (this.BeginCode == 1) {
// 点击区 -- 展示城镇信息
this.BarType = 'YLJGDM'
// 用于记录当前的 区镇的入参状态
this.lastStatus.PlaceCode = this.PlaceCode
this.lastStatus.BarType = this.BarType
this.lastStatus.BeginCode = this.BeginCode
this.lastStatus.areaclick = this.areaclick
this.tablename = '医院'
this.thname = '医院'
this.arname = '社区'
this.BeginCode = 2 // 当begin值为1的时候可以触发点击事件,点击事件执行后,
this.areaname2 = name
// 我们就需要把状态码置为2 在下文的判断中以请求 乡镇 的数据信息
console.log(JSON.stringify(this.lastStatus));
console.log(this.PlaceCode);
}
//console.log('这是地区的code码:' + code);
this.areaname = name
this.homeinit()
if (this.BeginCode == 4) {
this.tablename = '时间'
this.thname = '月份'
this.communshow = false
this.areaname = this.areaname2 + this.areaname
}
if (this.BeginCode == 3) {
this.areaname = this.areaname2
}
console.log('执行事件后this.BeginCode: ' + this.BeginCode);
},
//切换底部echarts的tab
bingChange(num) {
this.bingNo = num
if (num == 1) {
this.showTab = true
this.middlename = "死后随访"
this.homeinit()
} else if (num == 2) {
this.showTab = false
this.middlename = "高糖共患"
this.homeinit()
} else {
this.showTab = false
this.middlename = "并发症"
this.homeinit()
}
},
exitFn() {
this.$router.push({
path: '/'
});
},
homeinit() {
let _this = this
//服务质量上管-高血压
let wd = [{
"name": "YWSJ",
"endTime": this.selectStarttime,
"type": "2",
"startTime": this.startTime,
"compare": "between"
},
{
"name": "XZQH",
"value": _this.PlaceCode,
"type": "1"
},
]
let param = {
"themeId": _this.themeID,
"wd": JSON.stringify(wd)
}
//服务质量上签-高血压
let wd2 = [{
"name": "YWSJ",
"endTime": this.selectStarttime,
"type": "2",
"startTime": this.startTime,
"compare": "between"
},
{
"name": "QYBZ",
"value": "1",
"type": "1"
},
{
"name": "XZQH",
"value": _this.PlaceCode,
"type": "1"
}
]
let param2 = {
"themeId": _this.themeID,
"wd": JSON.stringify(wd2)
}
//请求各区管
let wd3 = [{
"name": "YWSJ",
"endTime": this.selectStarttime,
"type": "2",
"startTime": this.startTime,
"compare": "between"
},
{
"name": "XZQH",
"value": _this.PlaceCode,
"type": "1"
}
]
let param3 = {
"themeId": _this.themeID,
"wd": JSON.stringify(wd3),
"group": _this.BarType
}
let wd4 = [{
"name": "YWSJ",
"endTime": this.selectStarttime,
"type": "2",
"startTime": this.startTime,
"compare": "between"
},
{
"name": "QYBZ",
"value": "1",
"type": "1"
},
{
"name": "XZQH",
"value": _this.PlaceCode,
"type": "1"
}
]
let param4 = {
"themeId": _this.themeID,
"wd": JSON.stringify(wd4),
"group": _this.BarType
}
// console.log(this.BeginCode);
if (this.BeginCode == 2) {
this.BeginCode = 3
this.BarType = 'YWSJ'
} else if (this.BeginCode == 3) {
this.BeginCode = 4
}
commonMethod(param).then(res => {
console.log('服务质量----');
console.log(res.data);
if(res.data.content.length>0){
res.data.zbdic.forEach((item, index) => {
if(this.DieaNo==1){
// 患者当前死亡后随访人数
if (item.CODE == 'FWZL_016') {
_this.topgdata = res.data.content[0].zbxx[index]
}
if (item.CODE == 'FWZL_019') {
_this.topgdata2 = res.data.content[0].zbxx[index]
}
if (item.CODE == 'FWZL_025') {
_this.topgdata22 = res.data.content[0].zbxx[index]
}
//年内累计死亡随访人数
if (item.CODE == 'FWZL_011') {
_this.topgyeardiedata = res.data.content[0].zbxx[index]
}
// 年总死亡人数随访比例
if (item.CODE == 'FWZL_010') {
_this.topgyeardiepredata = res.data.content[0].zbxx[index]
}
//首诊测压血压异常者诊断为高血压的人数
// 血压零偏好
if (item.CODE == 'FWZL_018') {
_this.finalPerg = res.data.content[0].zbxx[index]
}
if (item.CODE == 'FWZL_019') {
_this.circledatag1 = res.data.content[0].zbxx[index]
}
if (item.CODE == 'FWZL_020') {
_this.circledatag2 = res.data.content[0].zbxx[index]
}
}else{
// 患者当前死亡后随访人数
if (item.CODE == 'FWZL_017') {
_this.topgdata = res.data.content[0].zbxx[index]
}
//年内累计死亡随访人数
if (item.CODE == 'FWZL_014') {
_this.topgyeardiedata = res.data.content[0].zbxx[index]
}
// 年总死亡人数随访比例
if (item.CODE == 'FWZL_013') {
_this.topgyeardiepredata = res.data.content[0].zbxx[index]
}
//首诊测压血压异常者诊断为高血压的人数
// 血压零偏好
if (item.CODE == 'FWZL_021') {
_this.finalPerg = res.data.content[0].zbxx[index]
}
if (item.CODE == 'FWZL_024') {
_this.finalPerg2 = res.data.content[0].zbxx[index]
}
if (item.CODE == 'FWZL_022') {
_this.circledatag1 = res.data.content[0].zbxx[index]
}
if (item.CODE == 'FWZL_023') {
_this.circledatag2 = res.data.content[0].zbxx[index]
}
}
})
_this.option.series[0].data[0].value = _this.finalPerg.ZXZ?_this.finalPerg.ZXZ:0
_this.option.series[0].data[1].value = 100 - _this.finalPerg.ZXZ?_this.finalPerg.ZXZ:0
_this.option.series[1].data[0].value = _this.finalPerq.ZXZ?_this.finalPerq.ZXZ:0
_this.option.series[1].data[1].value = 100 - _this.finalPerq.ZXZ?_this.finalPerq.ZXZ:0
}else{
_this.topgdata = 0
_this.topgyeardiedata = 0
_this.topgyeardiepredata =0
_this.finalPerg = 0
_this.circledatag1 = 0
_this.circledatag2 = 0
_this.option.series[0].data[0].value = 0
_this.option.series[0].data[1].value = 0
_this.option.series[1].data[0].value = 0
_this.option.series[1].data[1].value = 0
}
_this.$echarts.init(document.getElementById("pag3charts1")).setOption(_this.option, true)
}).catch(err => {
console.log("--测试定义接口报错--");
})
//服务质量上签-高血压
commonMethod(param2).then(res => {
console.log('服务质量签----');
console.log(res.data);
if(res.data.content.length>0){
if (this.themeID == 22) {
res.data.zbdic.forEach((item, index) => {
//首诊测压人数
if (item.CODE == 'FWZL_016') {
_this.topqdata = res.data.content[0].zbxx[index]
}
if (item.CODE == 'FWZL_019') {
_this.topqdata2 = res.data.content[0].zbxx[index]
}
if (item.CODE == 'FWZL_025') {
_this.topqdata23 = res.data.content[0].zbxx[index]
}
//年内累计死亡随访人数
if (item.CODE == 'FWZL_011') {
_this.topqyeardiedata = res.data.content[0].zbxx[index]
}
// 年总死亡人数随访比例
if (item.CODE == 'FWZL_010') {
_this.topqyeardiepredata = res.data.content[0].zbxx[index]
}
// 高血压零偏好占比 签
if (item.CODE == 'FWZL_018') {
_this.finalPerq = res.data.content[0].zbxx[index]
}
})
} else {
res.data.zbdic.forEach((item, index) => {
// 签 糖尿病数据
if (item.CODE == 'FWZL_017') {
_this.topqdata = res.data.content[0].zbxx[index]
}
//年内累计死亡随访人数
if (item.CODE == '"FWZL_011"') {
_this.topqyeardiedata = res.data.content[0].zbxx[index]
}
// 年总死亡人数随访比例
if (item.CODE == 'FWZL_013') {
_this.topqyeardiepredata = res.data.content[0].zbxx[index]
}
if (item.CODE == 'FWZL_021') {
_this.finalPerq = res.data.content[0].zbxx[index]
}
if (item.CODE == 'FWZL_024') {
_this.finalPerq2 = res.data.content[0].zbxx[index]
}
if (item.CODE == 'FWZL_022') {
_this.circledatag1 = res.data.content[0].zbxx[index]
}
if (item.CODE == 'FWZL_023') {
_this.circledatag2 = res.data.content[0].zbxx[index]
}
})
}
_this.option.series[0].data[0].value = _this.finalPerg.ZXZ
_this.option.series[0].data[1].value = 100 - _this.finalPerg.ZXZ
_this.option.series[1].data[0].value = _this.finalPerq.ZXZ
_this.option.series[1].data[1].value = 100 - _this.finalPerq.ZXZ
}else{
_this.topqdata = 0
_this.topqyeardiedata = 0
_this.topqyeardiepredata = 0
_this.finalPerq = 0
_this.circledatag1 = 0
_this.circledatag2= 0
_this.option.series[0].data[0].value = 0
_this.option.series[0].data[1].value = 0
_this.option.series[1].data[0].value = 0
_this.option.series[1].data[1].value = 0
}
_this.$echarts.init(document.getElementById("pag3charts1")).setOption(_this.option, true)
}).catch(err => {
console.log("--测试定义接口报错--");
})
//请求各区管
console.log(861);
commonMethod(param3).then(res => {
console.log('各区管打印')
console.log(res.data)
_this.Gbotdata = res.data
_this.data_x = []
if(res.data.content.length>0){
let tempList = res.data.content// 用于存储请求得到的数据, 以便按照月份排序
console.log(tempList);
if (tempList[0].YWSJ) {
// console.log(this.BarType);
// console.log(tempList);
tempList.sort(function(prev, next) {
return parseInt(prev.YWSJ.substring(5, 7)) - parseInt(next.YWSJ.substring(5, 7))
})
}
console.log(877);
tempList.forEach(item => {
if (_this.tempsf == 1) {
if (item.XZQH_TEXT) {
_this.data_x.push(item.XZQH_TEXT)
// console.log(item.XZQH_TEXT);
}
if (item.YLJGDM_EX2) {
_this.data_x.push(item.YLJGDM_EX2)
// console.log(item.YLJGDM_EX2);
}
if (item.YWSJ) {
_this.data_x.push(item.YWSJ.substring(5, 7) + "月")
// console.log(item.YWSJ.substring(5, 7) + "月");
}
} else {
if (item.XZQH_TEXT) {
_this.data_x.push(item.XZQH_TEXT)
}
if (item.YLJGDM_EX2) {
_this.data_x.push(item.YLJGDM_EX2)
}
if (item.YWSJ) {
_this.data_x.push(item.YWSJ.substring(5, 7) + "月")
}
}
})
}else{
}
// console.log("赋值完毕第一时间: " + _this.data_x);
//请求各区签
commonMethod(param4).then(res => {
// console.log('各区签打印')
// console.log(res)
_this.Qbotdata = res.data
_this.listArrayFinal = []
console.log(res.data.content)
if (res.data.content.length > 0) {
let tempList = [] // 用于存储请求得到的数据, 以便按照月份排序
tempList = res.data.content
console.log(tempList[0]);
if (tempList[0].YWSJ) {
// console.log(this.BarType);
// console.log(tempList);
tempList.sort(function(prev, next) {
return parseInt(prev.YWSJ.substring(5, 7)) - parseInt(next.YWSJ.substring(5, 7))
})
}
// console.log(_this.bingNo);
if (_this.bingNo == 1) {
// console.log(_this.data_x);
tempList.forEach((item, index) => {
let obj = {
name: '',
code: '',
tag1: '0',
tag2: '0',
tag3: '0',
tag4: '0',
tag5: '0',
tag6: '0'
}
if (item.YWSJ) {
obj.name = item.YWSJ.substring(5, 7) + '月'
} else {
obj.name = item.XZQH_TEXT ? item.XZQH_TEXT : item.YLJGDM_EX2
}
obj.code = item.XZQH
console.log(item);
item.zbxx.forEach((item2, index2) => {
//管理人群累计死后随访人数
//去年管理人群累计死后随访人数
// console.log(item2);
// console.log(item2.TBZ);
// console.log(item2.ZXZ);
if (item2.ZBID == '1116') {
// console.log(item2);
_this.data101.push(item2.ZXZ)
_this.data103.push(item2.TBZ)
obj.tag1 = _this.Gbotdata.content[index].zbxx[index2].ZXZ ? parseFloat(_this.Gbotdata.content[index].zbxx[index2].ZXZ).toFixed(1) : 0
obj.tag2 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
_this.data102.push(item2.ZXZ)
_this.data104.push(item2.TBZ)
}
//去年管理人群累计死后随访人数
if (item2.ZBID == '1111') {
_this.data105.push(item2.ZXZ)
obj.tag3 = _this.Gbotdata.content[index].zbxx[index2].ZXZ ? parseFloat(_this.Gbotdata.content[index].zbxx[index2].ZXZ).toFixed(1) : 0
obj.tag4 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
//去年签约人群累计死后随访人数
if (item2.ZBID == '1110') {
_this.data106.push(item2.TBZ)
obj.tag5 = _this.Gbotdata.content[index].zbxx[index2].ZXZ ? parseFloat(_this.Gbotdata.content[index].zbxx[index2].ZXZ).toFixed(1) : 0
obj.tag6 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
})
_this.listArrayFinal.push(obj)
})
let series = [{
name: '管理/签约人群累计死后随访人数', //管
type: 'bar',
stack: '1',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#4195EE'
},
{
offset: 1,
color: '#4195EE'
}
]
)
}
},
barWidth: null,
data: _this.data101
},
{
name: '管理/签约人群累计死后随访人数', //签
type: 'bar',
stack: '1',
itemStyle: {
normal: {
color: '#4195EE'
}
},
barWidth: null,
data: _this.data102
},
{
name: '去年管理/签约人群累计死后随访人数', // 管
type: 'bar',
stack: '2',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#00D6DF'
},
{
offset: 1,
color: '#00D6DF'
}
]
)
}
},
barWidth: null,
data: _this.data103
},
{
name: '去年管理/签约人群累计死后随访人数', //签
type: 'bar',
stack: '2',
itemStyle: {
normal: {
color: '#00D6DF'
}
},
barWidth: null,
data: _this.data104
},
{
name: '管·累计死后随访比/去年',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#FFC54E'
},
{
offset: 1,
color: '#FFC54E'
}
]
)
}
},
z: 12,
data: _this.data105
},
{
name: '签·累计死后随访比/去年',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#FFC54E'
}
},
z: 12,
data: _this.data106
}
]
// console.log(" 柱状图横坐标: " + _this.data_x);
_this.option2.xAxis[0].data = _this.data_x
_this.option2.series = series
// console.log(_this.bingNo)
_this.$echarts.init(document.getElementById("pag3card3main")).setOption(_this.option2, true)
} else if (_this.bingNo == 2) {
tempList.forEach((item, index) => {
let obj = {
name: '',
code: '',
tag1: '0',
tag2: '0',
tag3: '0',
tag4: '0',
tag5: '0',
tag6: '0'
}
if (item.YWSJ) {
obj.name = item.YWSJ.substring(5, 7) + "月"
} else {
obj.name = item.XZQH_TEXT ? item.XZQH_TEXT : item.YLJGDM_EX2
}
obj.code = item.XZQH
item.zbxx.forEach((item2, index2) => {
//管理人群累计死后随访人数
if (item2.ZBID == '1127') {
_this.data201.push(item2.ZXZ)
_this.data203.push(item2.TBZ)
obj.tag1 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
if (_this.Qbotdata.content[index].zbxx[index2].ZBID == '1127') {
_this.data202.push(item2.ZXZ)
_this.data204.push(item2.TBZ)
obj.tag2 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
if (item2.ZBID == '1136') {
_this.data205.push(item2.ZXZ)
_this.data206.push(item2.TBZ)
obj.tag3 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
if (item2.ZBID == '1136') {
_this.data207.push(item2.ZXZ)
_this.data208.push(item2.TBZ)
obj.tag4 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
if (item2.ZBID == '1139') {
_this.data209.push(item2.ZXZ)
_this.data210.push(item2.TBZ)
obj.tag5 = item2.TBL ? parseFloat(item2.TBL).toFixed(1) : 0
obj.tag6 = item2.TBL ? parseFloat(item2.TBL).toFixed(1) : 0
}
})
_this.listArrayFinal.push(obj)
})
let series = [{
name: '管理/签约人群病史未标记人数', //管
type: 'bar',
stack: '1',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#FFC54E'
},
{
offset: 1,
color: '#FFC54E'
}
]
)
}
},
barWidth: null,
data: _this.data201
},
{
name: '管理/签约人群病史未标记人数', //签
type: 'bar',
stack: '1',
itemStyle: {
normal: {
color: '#4195EE'
}
},
barWidth: null,
data: _this.data202
},
{
name: '去年管理/签约人群病史未标记人数', // 管
type: 'bar',
stack: '2',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#00D6DF'
},
{
offset: 1,
color: '#00D6DF'
}
]
)
}
},
barWidth: null,
data: _this.data203
},
{
name: '去年管理/签约人群病史未标记人数', //签
type: 'bar',
stack: '2',
itemStyle: {
normal: {
color: '#00D6DF'
}
},
barWidth: null,
data: _this.data204
},
{
name: '管·未标记率/去年',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#FFC54E'
},
{
offset: 1,
color: '#FFC54E'
}
]
)
}
},
z: 12,
data: _this.data205
},
{
name: '签·未标记率/去年',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#FFC54E'
}
},
z: 12,
data: _this.data206
},
{
name: '管·批量异常随访率/去年',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#3FDCB7'
},
{
offset: 1,
color: '#3FDCB7'
}
]
)
}
},
z: 12,
data: _this.data207
},
{
name: '签·批量异常随访率/去年',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#3FDCB7'
}
},
z: 12,
data: _this.data208
},
{
name: '管·指标不一致率/去年',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#3FDCB7'
},
{
offset: 1,
color: '#3FDCB7'
}
]
)
}
},
z: 12,
data: _this.data209
},
{
name: '签·指标不一致率/去年',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#3FDCB7'
}
},
z: 12,
data: _this.data210
}
]
_this.option2.xAxis[0].data = _this.data_x
_this.option2.series = series
console.log(_this.bingNo)
_this.$echarts.init(document.getElementById("pag3card3main")).setOption(_this.option2, true)
} else {
tempList.forEach((item, index) => {
let obj = {
name: '',
tag1: '0',
code: '',
tag2: '0',
tag3: '0',
tag4: '0',
tag5: '0',
tag6: '0'
}
if (item.YWSJ) {
obj.name = item.YWSJ.substring(5, 7) + "月"
} else {
obj.name = item.XZQH_TEXT ? item.XZQH_TEXT : item.YLJGDM_EX2
}
obj.code = item.XZQH
item.zbxx.forEach((item2, index2) => {
//管理人群累计死后随访人数
//去年管理人群累计死后随访人数
if (item2.ZBID == '1131') {
_this.data301.push(item2.ZXZ)
_this.data303.push(item2.TBZ)
obj.tag1 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
//签约人群累计死后随访人数
//去年签约人群累计死后随访人数
if (_this.Qbotdata.content[index].zbxx[index2].ZBID == '1131') {
_this.data302.push(item2.ZXZ)
_this.data304.push(item2.TBZ)
obj.tag2 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
//去年管理人群累计死后随访人数
if (item2.ZBID == '1110') {
_this.data305.push(item2.ZXZ)
obj.tag5 = item2.TBL ? parseFloat(item2.TBL).toFixed(1) : 0
obj.tag3 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
//去年签约人群累计死后随访人数
if (_this.Qbotdata.content[index].zbxx[index2].ZBID == '1110') {
_this.data306.push(item2.TBZ)
obj.tag6 = item2.TBL ? parseFloat(item2.TBL).toFixed(1) : 0
obj.tag4 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
}
})
_this.listArrayFinal.push(obj)
})
let series = [{
name: '管理/签约人群并存临床情况未标记数', //管
type: 'bar',
stack: '1',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#4195EE'
},
{
offset: 1,
color: '#4195EE'
}
]
)
}
},
barWidth: null,
data: _this.data301
},
{
name: '管理/签约人群并存临床情况未标记数', //签
type: 'bar',
stack: '1',
itemStyle: {
normal: {
color: '#4195EE'
}
},
barWidth: null,
data: _this.data302
},
{
name: '去年管理/签约人群并存临床情况未标记数', // 管
type: 'bar',
stack: '2',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#00D6DF'
},
{
offset: 1,
color: '#00D6DF'
}
]
)
}
},
barWidth: null,
data: _this.data303
},
{
name: '去年管理/签约人群并存临床情况未标记数', //签
type: 'bar',
stack: '2',
itemStyle: {
normal: {
color: '#00D6DF'
}
},
barWidth: null,
data: _this.data304
},
{
name: '管·并存临床情况未标记率/去年',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#FFC54E'
},
{
offset: 1,
color: '#FFC54E'
}
]
)
}
},
z: 12,
data: _this.data305
},
{
name: '签·并存临床情况未标记率/去年',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#FFC54E'
}
},
z: 12,
data: _this.data306
}
]
_this.option2.xAxis[0].data = _this.data_x
_this.option2.series = series
// console.log(_this.bingNo)
_this.$echarts.init(document.getElementById("pag3card3main")).setOption(_this.option2, true)
}
} else{
_this.data101 = []
_this.data103 = []
_this.data102 = []
_this.data104 = []
_this.data105 = []
_this.data106 = []
_this.listArrayFinal = []
_this.option2.xAxis[0].data = []
_this.option2.series.forEach( item =>{
item.data = []
})
// console.log(_this.bingNo)
_this.$echarts.init(document.getElementById("pag3card3main")).setOption(_this.option2, true)
}
}).catch(err => {
console.log("--分组报错--");
})
}).catch(err => {
console.log("--测试定义管报错--");
})
},
DieaChange(Num) {
let _this = this
_this.DieaNo = Num
_this.bingChange(1)
if (_this.DieaNo == 1) {
this.pagedisname = "高血压" // 疾病赋值
_this.themeID = 22
_this.homeinit()
_this.showDea = true
_this.bingNo = 1
} else {
_this.themeID = 25
this.pagedisname = "糖尿病" // 疾病赋值
_this.homeinit()
_this.showDea = false
}
}
},
mounted() {
//开始加载...
this.DieaChange(1)
const obj = setInterval(() => {
const dom = document.getElementById("pag3charts1")
if (dom) {
const myChart = this.$echarts.init(dom)
if (this.option && typeof this.option === "object") {
myChart.setOption(this.option, true)
}
clearInterval(obj)
}
}, 200)
const obj2 = setInterval(() => {
const dom2 = document.getElementById("pag3card3main")
if (dom2) {
const myChart2 = this.$echarts.init(dom2)
if (this.option2 && typeof this.option2 === "object") {
myChart2.setOption(this.option2, true)
}
clearInterval(obj2)
}
}, 200)
},
components: {}
}
</script>
<style lang="stylus" scoped>
.cmtline{ padding-top: 30px;}
#pag3charts1{ width:120px; height:120px; float:left; position:absolute; left: -15px;}
#pag3card3main{ width:455px; height:320px}
.card3title1{ color:#fff }
.myclk{ font-weight:600; color:#42ccff; pointer-events:none}
.datalist{ position: absolute; left: 100px; top: 55px;}
.datalist p{ clear:both; line-height: 24px; font-size: 12px; color: #B3BFD2;}
.card2-mod{width: 200px;height: 160px; padding-top: 6px;}
.card2-mod1{width: 265px;}
.card2-mod2{ padding-top: 30px; height: 125px;}
.card2-modts{ padding-top:30px; width:200px}
.card2-modtr{ width:260px}
.table02{}
.table02 td{ height:25px;}
.myclk{pointer-events: none;}
.area >>> .el-input--mini .el-input__inner{padding:0; text-align:center; color: #FFF; border:1px solid #409EFF; background-color: #409EFF;}
.area >>> .el-input--mini .el-input__inner::-webkit-input-placeholder {color: #FFF;}
.area >>> .el-input--mini{ width: 60px; margin-left: 8px;}
.area >>> .el-input__icon.el-icon-date{display:none}
.area >>> .el-input__icon{display:none}
.table01 td.underline {
text-decoration: underline;
width: 50px;
}
.uplib{ width:100%;overflow: hidden; position:absolute; top:76px; right:0; left:0; background:rgba(51, 51, 51, 0.9); padding:10px}
</style>
<template>
<div class="pagetwo" @click="showtab(5)">
<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" @click="CityGetBack()" v-if="this.BeginCode != 1">返回</el-button>
<el-button size="mini" @click="changeReplay()" 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>
<div class="card-dark card-01">
<div class="card1-mod" v-show="DieaNo==1">
<h2>管·首诊测压人数(实/同)</h2>
<div class="cmtitle">
<span>{{(parseFloat(topgdata.ZXZ?topgdata.ZXZ:0)/10000).toFixed(1)}}</span>
<span class="span1">/</span>
<span>{{(parseFloat(topgdata.TBZ?topgdata.TBZ:0)/10000).toFixed(1)}}</span>
<span class="tag-blue"></span>
<span class="span2">{{topgdata.TBL?topgdata.TBL:0}}</span>
<span class="el-icon-bottom">&nbsp;</span>
</div>
<div class="cmtline cmtline2">
<p>本周新增{{topgdata.ZZZ?topgdata.ZZZ:0}}</p>
</div>
</div>
<div class="card1-mod" v-show="DieaNo==1">
<h2>签·首诊测压人数(实/同)</h2>
<div class="cmtitle">
<span>{{(parseFloat(topqdata.ZXZ?topqdata.ZXZ:0)/10000).toFixed(1)}}</span>
<span class="span1">/</span>
<span>{{(parseFloat(topqdata.TBZ?topqdata.TBZ:0)/10000).toFixed(1)}}</span>
<span class="tag-blue"></span>
<span class="span2">{{topqdata.TBL?topqdata.TBL:0}}</span>
<span class="el-icon-bottom">&nbsp;</span>
</div>
<div class="cmtline cmtline2">
<p>本周新增{{topqdata.ZZZ?topqdata.ZZZ:0}}</p>
</div>
</div>
<div class="card1-mod-2" v-show="DieaNo==2">
<h2>管·易患人群血压规范监测人数(实/同)</h2>
<div class="cmtitle">
<span>{{topgyfdata.ZXZ?topgyfdata.ZXZ:0}}</span>
<span class="span1">/</span>
<span>{{(parseFloat(topgyfdata.TBZ?topgyfdata.TBZ:0)/10000).toFixed(1)}}</span>
<span class="tag-blue"></span>
<span class="span2">{{topgyfdata.TBL?topgyfdata.TBL:0}}</span>
<span class="el-icon-bottom">&nbsp;</span>
</div>
</div>
<div class="card1-mod-2" v-show="DieaNo==2">
<h2>签·易患人群血压规范监测人数(实/同)</h2>
<div class="cmtitle">
<span>{{topqyfdata.ZXZ}}</span>
<span class="span1">/</span>
<span>{{(parseFloat(topqyfdata.TBZ?topqyfdata.TBZ:0)/10000).toFixed(1)}}</span>
<span class="tag-blue"></span>
<span class="span2">{{topqyfdata.TBL?topqyfdata.TBL:0}}</span>
<span class="el-icon-bottom">&nbsp;</span>
</div>
</div>
</div>
<div class="card-dark card-02">
<div class="card2-mod card2-modtr">
<div class="modtitle2">
<span @click="DieaChange(1)" :class="DieaNo==1?'myclk':''">首诊测压</span> |
<span @click="DieaChange(2)" :class="DieaNo==2?'myclk':''">易患监测</span>
</div>
<div id="charts1"></div>
<div class="datalist" v-show="DieaNo==1">
<p>管·血压异常率:{{parseFloat(topgycldata.ZXZ?topgycldata.ZXZ:0).toFixed(1)}}%</p>
<p>管·血压异常者诊断率:{{parseFloat(topgzdldata.ZXZ?topgzdldata.ZXZ:0).toFixed(1)}}%</p>
<p>签·血压异常率:{{parseFloat(topqycldata.ZXZ?topqycldata.ZXZ:0).toFixed(1)}}%</p>
<p>签·血压异常者诊断率:{{parseFloat(topqzdldata.ZXZ?topqzdldata.ZXZ:0).toFixed(1)}}%</p>
</div>
<div class="datalist" v-show="DieaNo==2">
<p>管·规范监测率:{{parseFloat(topggfdata.ZXZ?topggfdata.ZXZ:0).toFixed(1)}}%</p>
<p>签·规范监测率:{{parseFloat(topqgfdata.ZXZ?topqgfdata.ZXZ:0).toFixed(1)}}%</p>
</div>
</div>
<div class="card2-mod card2-modts" v-show="DieaNo==1">
<table class="table02" width="100%" border="0">
<tr>
<td width="60%">累计条数/本周新增 </td>
<td width="40%">同比·%</td>
</tr>
<tr>
<td width="60%"><span>{{(parseFloat(topgycrdata.ZXZ?topgycrdata.ZXZ:0)/10000).toFixed(1)}} /
{{(parseFloat(topgycrdata.TBZ?topgycrdata.TBZ:0)/10000).toFixed(1)}}</span></td>
<td width="40%">{{Math.abs(parseFloat(topgycrdata.TBL?topgycrdata.TBL:0))}}
<i v-if="topgycrdata.TBL>0" class="el-icon-top color2"></i>
<i v-else class="el-icon-bottom color1"></i>
</td>
</tr>
<tr>
<td width="60%"><span class="span01">{{(parseFloat(topgycrgxydata.ZXZ?topgycrgxydata.ZXZ:0)/10000).toFixed(1)}}
/
{{(parseFloat(topgycrgxydata.TBZ?topgycrgxydata.TBZ:0)/10000).toFixed(1)}}</span></td>
<td width="40%">{{Math.abs(parseFloat(topgycrgxydata.TBL?topgycrgxydata.TBL:0))}}
<i v-if="topgycrgxydata.TBL>0" class="el-icon-top color2"></i>
<i v-else class="el-icon-bottom color1"></i>
</td>
</tr>
<tr>
<td width="60%"><span class="span02">{{(parseFloat(topqycrdata.ZXZ?topqycrdata.ZXZ:0)/10000).toFixed(1)}} /
{{(parseFloat(topqycrdata.TBZ?topqycrdata.TBZ:0)/10000).toFixed(1)}}</span></td>
<td width="40%">{{Math.abs(parseFloat(topqycrdata.TBL?topqycrdata.TBL:0))}}
<i v-if="topqycrdata.TBL>0" class="el-icon-top color2"></i>
<i v-else class="el-icon-bottom color1"></i>
</td>
</tr>
<tr>
<td width="60%"><span class="span03">{{(parseFloat(topqycrgxydata.ZXZ?topqycrgxydata.ZXZ:0)/10000).toFixed(1)}}
/
{{(parseFloat(topqycrgxydata.TBZ?topqycrgxydata.TBZ:0)/10000).toFixed(1)}}</span></td>
<td width="40%">{{Math.abs(parseFloat(topqycrgxydata.TBL?topqycrgxydata.TBL:0))}}
<i v-if="topqycrgxydata.TBL>0" class="el-icon-top color2"></i>
<i v-else class="el-icon-bottom color1"></i>
</td>
</tr>
</table>
</div>
<div class="card2-mod card2-modts" v-show="DieaNo==2">
<table class="table02" width="100%" border="0">
<tr>
<td width="60%">累计条数/本周新增 </td>
<td width="40%">同比·%</td>
</tr>
<tr>
<td width="60%"><span>{{(parseFloat(topgyfdata.ZXZ?topgyfdata.ZXZ:0)/10000).toFixed(1)}} 万 /
{{(parseFloat(topgyfdata.TBZ?topgyfdata.TBZ:0)/10000).toFixed(1)}}</span></td>
<td width="40%">{{Math.abs(parseFloat(topgyfdata.TBL?topgyfdata.TBL:0))}} <i class="el-icon-top color2"></i></td>
</tr>
<tr>
<td width="60%"><span class="span01">{{(parseFloat(topqyfdata.ZXZ?topqyfdata.ZXZ:0)/10000).toFixed(1)}} 万 /
{{(parseFloat(topqyfdata.TBZ?topqyfdata.TBZ:0)/10000).toFixed(1)}}</span></td>
<td width="40%">{{Math.abs(parseFloat(topqyfdata.TBL?topqyfdata.TBL:0))}} <i class="el-icon-top color2"></i></td>
</tr>
</table>
</div>
</div>
<div class="clear10"></div>
<div class="card-dark card-03">
<ul>
<li @click="pageChage(1)"><i class="el-icon-s-cooperation"></i> 慢病管理</li>
<li @click="pageChage(2)"><i class="el-icon-bangzhu"></i> 管理效果</li>
<li @click="pageChage(3)"><i class="el-icon-service"></i> 服务质量</li>
<li @click="pageChage(4)" class="clk"><i class="el-icon-first-aid-kit"></i> 早发现</li>
<li @click="pageChage(5)"><i class="el-icon-odometer"></i> 慢病监测</li>
</ul>
</div>
<div class="card-dark card-04">
<div class="card3title1" v-show="bingNo==1">
<span @click="groupChange(1)" :class="groupNo==1?'myclk':''">{{aename}}</span> <span v-if="showtime" style="color: #7C8594;padding: 0;">|</span>
<span @click="groupChange(2)" :class="groupNo==2?'myclk':''" v-if="showtime" style="padding: 0;">时间</span>
</div>
<div class="card3title1" v-show="bingNo==2">各区</div>
<div class="card3title2" v-if="showTab">
<span @click="bingChange(1)" :class="bingNo==1?'myclk':''">异常</span>|
<span @click="bingChange(2)" :class="bingNo==2?'myclk':''">诊断</span>
</div>
<div class="card3main">
<div id="middlebarbox4">
<!-- 二屏中间图表 -->
</div>
</div>
</div>
<div class="card-dark card-05">
<div class="card5title">{{tablename}}</div>
<div class="card5main">
<table class="table01 table" width="100%" border="0">
<thead class="fixedThead">
<tr>
<th width="38"></th>
<th width="48">{{thname}}</th>
<th @click.stop="showtab(1)">管·{{rightlist1}}</th>
<th @click.stop="showtab(2)">签·{{rightlist1}}</th>
</tr>
</thead>
<div class="uplib" v-if="showtabnum == 1 && DieaNo == 1 && this.bingNo == 1">
指标名称:<br>{{rightlist1.substring(0,4)}}异常率/管<br>
计算公式:<br>进行{{rightlist1.substring(0,4)}}的血压异常人数/{{rightlist1.substring(0,4)}}人数×100%
</div>
<div class="uplib" v-if="showtabnum == 2 && DieaNo == 1 && this.bingNo == 1">
指标名称:<br>{{rightlist1.substring(0,4)}}异常率/签<br>
计算公式:<br>进行{{rightlist1.substring(0,4)}}的血压异常人数/{{rightlist1.substring(0,4)}}人数×100%
</div>
<div class="uplib" v-if="showtabnum == 1 && DieaNo == 1 && this.bingNo == 2">
指标名称:<br>{{rightlist1.substring(0,4)}}异常者诊断率/管<br>
计算公式:<br>首诊测压血压异常者诊断为高血压的人数/进行首诊测压的血压异常人数×100%
</div>
<div class="uplib" v-if="showtabnum == 2 && DieaNo == 1 && this.bingNo == 2">
指标名称:<br>{{rightlist1.substring(0,4)}}异常者诊断率/管<br>
计算公式:<br>首诊测压血压异常者诊断为高血压的人数/进行首诊测压的血压异常人数×100%
</div>
<div class="uplib" v-if="showtabnum == 1 && DieaNo == 2">
指标名称:<br>{{rightlist1.substring(0,4)}}异常率/管<br>
计算公式:<br>每年有两次血压监测记录的高血压易患人数/检测出的高血压易患人群总人数×100%
</div>
<div class="uplib" v-if="showtabnum == 2 && DieaNo == 2">
指标名称:<br>{{rightlist1.substring(0,4)}}异常率/签<br>
计算公式:<br>每年有两次血压监测记录的高血压易患人数/检测出的高血压易患人群总人数×100%
</div>
<tbody class="scrollTbody">
<tr v-for="(item, index) in tableAll" :key="index">
<td width="38"><span>{{index+1}}</span></td>
<td width="48" @click="changecity(item.code,item.name)" class="underline">{{item.name}}</td>
<td>{{item.tag1}} / {{item.tag2}} <i class="el-icon-top color2"></i></td>
<td>{{item.tag3}} / {{item.tag4}} <i class="el-icon-top color2"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import {
commonMethod,
otherMethod
} from '@/api/home.js'
export default {
name: 'screenpage4',
data() {
return {
showtabnum:0,
rightlist1:'首诊异常率/偏',
aename: '各区',
tablename: '各区',
thname: '各区',
BeginCode: 1, // 用于判断当前的市级 状态
groupNo: 1,
bingNo: 1,
areaname: '',
areaname2: '',
showtime: true,
gxyycl: 0,
startTime: '2019-01',
value: '2019-09',
nowdate: '2019-09',
sel: '筛选',
gxyyzdl: 0,
qxyycl: 0,
BarType: "XZQH",
showTab: true, // 当点击易患监测的时候,隐藏柱状图右上角两个标签
value2: '',
qxyyzdl: 0,
ggfl: 0,
qgfl: 0,
DieaNo: 1,
objParam: {},
themeID: '4',
themeID2: '5',
pageNo: 4,
topgdata: [], //管·首诊测压人数(实/同)
topqdata: [], //签·首诊测压人数(实/同)
topgycldata: [], //管·血压异常率
topgycrdata: [], //首诊测压的血压异常人数
topgzdldata: [], //管·血压异常者诊断率
topgycrgxydata: [], //首诊测压血压异常者诊断为高血压的人数
topqycldata: [], //签·血压异常率
topqycrdata: [], //首诊测压的血压异常人数
topqzdldata: [], //签·血压异常者诊断率
topqycrgxydata: [], //首诊测压血压异常者诊断为高血压的人数
topgyfdata: [],
topqyfdata: [],
topggfdata: [],
topqgfdata: [],
tableg: [],
tableq: [],
tableAll: [],
option: {
tooltip: {
show: false,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [{
name: '0',
type: 'pie',
clockWise: false,
radius: [38, 30],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
data: [{
value: 55,
itemStyle: {
normal: {
color: '#42CCFF'
}
}
},
{
value: 100 - 55,
name: 'invisible',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
}
}
]
},
{
name: '1',
type: 'pie',
clockWise: false,
radius: [30, 22],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
data: [{
value: 55,
itemStyle: {
normal: {
color: '#3AAEB9'
}
}
},
{
value: 100 - 55,
name: 'invisible',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
}
}
]
},
{
name: '2',
type: 'pie',
clockWise: false,
radius: [22, 14],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
data: [{
value: 42.5,
itemStyle: {
normal: {
color: '#3A82B9'
}
}
},
{
value: 100 - 42.5,
name: 'invisible',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
}
}
]
},
{
name: '3',
type: 'pie',
clockWise: false,
radius: [14, 6],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
data: [{
value: 42.5,
itemStyle: {
normal: {
color: '#204B77'
}
}
},
{
value: 100 - 42.5,
name: 'invisible',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
}
}
]
}
]
},
data_x: [],
dataY01: [],
dataY02: [],
dataY03: [],
dataY04: [],
dataY05: [],
dataY06: [],
dataY07: [],
dataY08: [],
selectStarttime: localStorage.getItem("EndTime"),
lastStatus: {},
PlaceCode: '',
option2: {
tooltip: {
trigger: 'axis',
position: [50, 50],
padding: 10,
axisPointer: {
type: 'none'
},
//trigger: 'item',
formatter: function(params) {
// console.log(params.length)
// console.log('打印params长度')
// console.log(params)
if (params[0].seriesName == '管理/签约人群首诊测压人数') {
var res = '<ul class="f12 pl10 pr15">';
res += '<li class="f13"> ' + params[0].axisValue + '区</li>';
res += '<li>管理/签约人群年内进行首诊测压的人数:' + params[0].data + '/' + params[1].data + '万</li>';
res += '<li>去年管理/签约人群年内进行首诊测压的人数:' + params[2].data + '/' + params[3].data + '万</li>';
res += '<li>管.首诊测压血压异常率/去年:' + params[4].data + '/' + params[5].data + '%</li>';
res += '<li>签.首诊测压血压异常率/去年:' + params[6].data + '/' + params[7].data + '%</li>';
res += '</ul>';
} else {
var res = '<ul class="f12 pl10 pr15">';
res += '<li class="f13"> ' + params[0].axisValue + '区</li>';
res += '<li>管理/签约人群每年有两次血压监测记录的高血压易患人数:' + params[0].data + '/' + params[1].data + '万</li>';
res += '<li>去年管理/签约人群每年有两次血压监测记录的高血压易患人数:' + params[2].data + '/' + params[3].data + '万</li>';
res += '<li>管.高血压易患人群血压规范监测率/去年:' + params[4].data + '/' + params[5].data + '%</li>';
res += '<li>签.高血压易患人群血压规范监测率/去年:' + params[6].data + '/' + params[7].data + '%</li>';
res += '</ul>';
}
return res
}
},
dataZoom: {
start: 0, //默认为0
end: 50, //默认为100
type: 'slider',
show: true ,
xAxisIndex: [0] ,
handleSize: 20 , //滑动条的 左右2个滑动条的大小
height: 5 , //组件高度
left: 50, //左边的距离
right: 45, //右边的距离
bottom: 40, //右边的距离
backgroundColor: '#ccc', //两边未选中的滑动条区域的颜色
showDataShadow: true, //是否显示数据阴影 默认auto
handleStyle: {
borderColor: "#CBBCDB",
borderWidth: "1",
shadowBlur: 1,
background: "#000",
shadowColor: "#000",
},
filterMode: 'filter',
},
legend: {
textStyle: {
color: '#8393A9',
fontSize: 10
},
left: 30,
width: 380,
top: '0',
itemHeight: 10,
itemWidth: 14,
itemGap: 5,
height: 50,
//data: ["管理/签约人群首诊测压人数", "去年管理/签约人群首诊测压人数", "管·首诊测压血压异常率/去年", "签·首诊测压血压异常率/去年"],
align: 'left',
selectedMode: true
},
grid: {
top: 80,
bottom: 45,
left: 50
},
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
},
}
],
dataZoom: [{
type: 'inside',
startValue: 0,
filterMode: 'empty',
endValue: 14
}],
series: []
}
}
},
methods: {
showtab(num){
this.showtabnum = num
console.log(this.showtabnum)
},
dataSearch(value) {
console.log(value)
var myDate = new Date();
myDate.getYear();
localStorage.setItem("EndTime", value)
this.startTime = value.slice(0, 4) + '-01'
//console.log(this.startTime)
if (value) {
this.nowdate = value
this.selectStarttime = value
this.homeinit()
this.homebot()
}
},
pageChage(page) {
this.$emit('screenTwoPagefunc', page)
},
CityGetBack() {
console.log("this.BeginCode :" + this.BeginCode);
console.log("this.diastype :" + this.diastype);
if (this.BeginCode == 2) {
// 使用 this.BeginCode 的值来判断现在处于的区镇状态
// 此时 处于第一次点击下的状态
this.PlaceCode = ''
this.BarType = 'XZQH'
this.BeginCode = 1
this.areaname = ''
this.tablename = '各区'
this.thname = '各区'
console.log("现在处于一级状态");
}
if (this.BeginCode == 3) {
// 使用 this.BeginCode 的值来判断现在处于的区镇状态
// 此时 处于第二次点击下的状态
// console.log("现在处于二级状态");
this.PlaceCode = this.lastStatus.PlaceCode
this.BarType = this.lastStatus.BarType
this.BeginCode = 2
this.aename = '社区'
this.tablename = '医院'
this.thname = '医院'
this.areaname = this.areaname2
console.log(this.lastStatus);
}
this.homeinit()
this.homebot()
},
groupChange(num) {
this.groupNo = num
if (num == 1) {
this.BarType = "XZQH"
if (this.DieaNo == 1) {
this.showTab = true
}
if (this.BeginCode == 2) {
} else {
this.homebot()
}
} else {
this.showTab = false
this.BarType = "YWSJ"
this.homebot()
}
},
bingChange(num) {
this.bingNo = num
console.log(this.bingNo)
if (num == 1) {
this.showtime = true
} else {
this.showtime = false
}
this.homebot()
},
exitFn() {
this.$router.push({
path: '/'
});
},
changeReplay() {
//this.pageChage(2)
var myDate = new Date();
let tempmonth = myDate.getMonth()
if (tempmonth < 10) {
tempmonth = '0' + tempmonth
}
// 用于 重置时间 入参
let DateNow = '' + myDate.getFullYear() + '-' + tempmonth
console.log(DateNow);
this.themeID = 4
this.themeID2 =5
this.PlaceCode = ''
this.BarType = 'XZQH'
this.BeginCode = 1
this.areaname = ''
this.startTime = DateNow
this.value = DateNow
this.nowdate = DateNow
this.value = DateNow.substr(0,7)
this.tablename = '各区'
this.thname = '各区'
this.dataSearch(DateNow)
// this.homeinit()
this.homebot()
},
// cansertopShow
DieaChange(num) {
let _this = this
this.DieaNo = num?num:1
console.log(this.DieaNo);
if (this.DieaNo == 1) {
this.rightlist1 = '首诊异常率/偏'
console.log('703');
_this.option.series[0].data[0].value = parseInt(_this.topgycldata.ZXZ)
_this.option.series[0].data[1].value = 100 - parseInt(_this.topgycldata.ZXZ)
_this.option.series[1].data[0].value = parseInt(_this.topgzdldata.ZXZ)
_this.option.series[1].data[1].value = 100 - parseInt(_this.topgzdldata.ZXZ)
_this.option.series[2].data[0].value = parseInt(_this.topqycldata.ZXZ)
_this.option.series[2].data[1].value = 100 - parseInt(_this.topqycldata.ZXZ)
_this.option.series[3].data[0].value = parseInt(_this.topqzdldata.ZXZ)
_this.option.series[3].data[1].value = 100 - parseInt(_this.topqzdldata.ZXZ)
this.showTab = true
} else {
console.log('714');
this.rightlist1 = '规范检测率/同'
_this.bingNo = 1
_this.showtime = true
_this.option.series[0].data[0].value = parseInt(_this.topggfdata.ZXZ)
_this.option.series[0].data[1].value = 100 - parseInt(_this.topggfdata.ZXZ)
_this.option.series[1].data[0].value = parseInt(_this.topqgfdata.ZXZ)
_this.option.series[1].data[1].value = 100 - parseInt(_this.topqgfdata.ZXZ)
_this.option.series[2].data[0].value = parseInt(_this.topqycldata.ZXZ)
_this.option.series[2].data[1].value = 100 - parseInt(_this.topqycldata.ZXZ)
_this.option.series[3].data[0].value = parseInt(_this.topqzdldata.ZXZ)
_this.option.series[3].data[1].value = 100 - parseInt(_this.topqzdldata.ZXZ)
this.showTab = false
}
console.log('是否打印进来了,,,,,')
console.log(_this.option.series)
this.homebot()
_this.$echarts.init(document.getElementById("charts1")).setOption(this.option, true)
},
changecity(code, name) {
console.log(code)
if (this.BeginCode == 3) {
return false
}
this.areaname = name
//当 this.BeginCode == 4 的时候 ,证明已经到了最底层,故不再请求方法
// console.log(code);
this.PlaceCode = code
if (this.BeginCode == 1) {
// 点击区 -- 展示城镇信息
this.BarType = 'YLJGDM'
// 用于记录当前的 区镇的入参状态
this.lastStatus.PlaceCode = this.PlaceCode
this.lastStatus.BarType = this.BarType
this.lastStatus.BeginCode = this.BeginCode
this.lastStatus.areaclick = this.areaclick
this.areaname2 = name
this.aename = '社区'
this.tablename = '医院'
this.thname = '医院'
this.BeginCode = 2 // 当begin值为1的时候可以触发点击事件,点击事件执行后,
// 我们就需要把状态码置为2 在下文的判断中以请求 乡镇 的数据信息
console.log(JSON.stringify(this.lastStatus));
console.log(this.PlaceCode);
} else if (this.BeginCode == 2) {
this.BarType = 'YWSJ'
this.BeginCode = 3
this.tablename = '时间'
this.thname = '月份'
console.log(2);
}
console.log('这是地区的code码:' + code);
this.areaname = name
this.PlaceCode = code
this.homeinit()
this.homebot()
},
homeinit() {
let _this = this
//{\"name\":\"QYBZ\",\"value\":\"1\",\"type\":\"1\"}不加这个管
let wd = [{
"name": "YWSJ",
"startTime": this.startTime,
"endTime": this.selectStarttime,
"type": "2",
"compare": "between",
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
//var zbcode="MBZFX_016";单独读取
let param = {
"themeId": _this.themeID,
"wd": JSON.stringify(wd),
// "group": this.BarType
}
console.log(JSON.stringify(param));
commonMethod(param).then(res => {
console.log('早发现上部分管')
console.log(res.data)
if (res.data.content.length>0) {
res.data.zbdic.forEach((item, index) => {
//首诊测压人数
if (item.ZBID == '1016') {
_this.topgdata = res.data.content[0].zbxx[index]
}
//首诊测压血压异常率
if (item.ZBID == '1017') {
_this.topgycldata = res.data.content[0].zbxx[index]
}
//首诊测压的血压异常人数
if (item.CODE == 'MBZFX_006') {
_this.topgycrdata = res.data.content[0].zbxx[index]
}
//首诊测压血压异常者诊断率
if (item.CODE == 'MBZFX_009') {
_this.topgzdldata = res.data.content[0].zbxx[index]
}
//首诊测压血压异常者诊断为高血压的人数
if (item.CODE == 'MBZFX_010') {
_this.topgycrgxydata = res.data.content[0].zbxx[index]
}
//健康管理对象规范登记率
if (item.CODE == 'MBZFX_014') {
_this.topggfdata = res.data.content[0].zbxx[index]
}
//高血压易患人群血压规范监测率
if (item.CODE == 'MBZFX_015') {
_this.topgyfdata = res.data.content[0].zbxx[index]
}
})
_this.gxyycl = _this.topgycldata.ZXZ
_this.gxyyzdl = _this.topgzdldata.ZXZ
_this.ggfl = _this.topggfdata.ZXZ
} else{
_this.gxyycl = 0
_this.gxyyzdl = 0
_this.ggfl = 0
_this.topgdata = 0
_this.topgycldat = 0
_this.topgycrdat = 0
_this.topgzdldat = 0
_this.topgycrgx = 0
_this.topggfdata = 0
_this.topgyfdata = 0
_this.topgycldata = 0
_this.topgycrdata = 0
_this.topgzdldata = 0
_this.topgycrgxydat = 0
_this.topggfdata = 0
_this.topgyfdata = 0
}
}).catch(err => {
console.log("--早发现上部分管报错834--");
})
//{\"name\":\"QYBZ\",\"value\":\"1\",\"type\":\"1\"}加了是签
let wd2 = [{
"name": "YWSJ",
"endTime": this.selectStarttime,
"type": "2",
"startTime": this.startTime,
"compare": "between"
},
{
"name": "QYBZ",
"value": "1",
"type": "1"
},
{
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}
]
//var zbcode="MBZFX_016";单独读取
let param2 = {
"themeId": _this.themeID,
"wd": JSON.stringify(wd2),
// "group": this.BarType
}
console.log(JSON.stringify(param2));
commonMethod(param2).then(res => {
// console.log('早发现上部分签')
console.log(res);
if(res.data.content.length>0){
res.data.zbdic.forEach((item, index) => {
// console.log(item);
//首诊测压人数
if (item.CODE == 'MBZFX_004') {
_this.topqdata = res.data.content[0].zbxx[index]?res.data.content[0].zbxx[index]:0
}
//首诊测压血压异常率
if (item.CODE == 'MBZFX_005') {
_this.topqycldata = res.data.content[0].zbxx[index]?res.data.content[0].zbxx[index]:0
}
//首诊测压的血压异常人数
if (item.CODE == 'MBZFX_006') {
_this.topqycrdata = res.data.content[0].zbxx[index]?res.data.content[0].zbxx[index]:0
}
//首诊测压血压异常者诊断率
if (item.CODE == 'MBZFX_009') {
_this.topqzdldata = res.data.content[0].zbxx[index]?res.data.content[0].zbxx[index]:0
}
//首诊测压血压异常者诊断为高血压的人数
if (item.CODE == 'MBZFX_010') {
_this.topqycrgxydata = res.data.content[0].zbxx[index]?res.data.content[0].zbxx[index]:0
}
//健康管理对象规范登记率
if (item.CODE == 'MBZFX_014') {
_this.topqgfdata = res.data.content[0].zbxx[index]?res.data.content[0].zbxx[index]:0
}
//高血压易患人群血压规范监测率
if (item.CODE == 'MBZFX_015') {
_this.topqyfdata = res.data.content[0].zbxx[index]?res.data.content[0].zbxx[index]:0
}
})
console.log('913');
_this.qxyycl = _this.topqycldata.ZXZ?_this.topqycldata.ZXZ:0
_this.qxyyzdl = _this.topqzdldata.ZXZ?_this.topqzdldata.ZXZ:0
_this.qgfl = _this.topqgfdata.ZXZ?_this.topqgfdata.ZXZ:0
_this.option.series[0].data[0].value = parseInt(_this.topgycldata.ZXZ?_this.topgycldata.ZXZ:0)
_this.option.series[0].data[1].value = 100 - parseInt(_this.topgycldata.ZXZ?_this.topgycldata.ZXZ:0)
_this.option.series[1].data[0].value = parseInt(_this.topgzdldata.ZXZ?_this.topgzdldata.ZXZ:0)
_this.option.series[1].data[1].value = 100 - parseInt(_this.topgzdldata.ZXZ?_this.topgzdldata.ZXZ:0)
_this.option.series[2].data[0].value = parseInt(_this.topqycldata.ZXZ?_this.topqycldata.ZXZ:0)
_this.option.series[2].data[1].value = 100 - parseInt(_this.topqycldata.ZXZ?_this.topqycldata.ZXZ:0)
_this.option.series[3].data[0].value = parseInt(_this.topqzdldata.ZXZ?_this.topqzdldata.ZXZ:0)
_this.option.series[3].data[1].value = 100 - parseInt(_this.topqzdldata.ZXZ?_this.topqzdldata.ZXZ:0)
_this.$echarts.init(document.getElementById("charts1")).setOption(this.option, true)
}else{
console.log('925');
_this.option.series[0].data[0].value = 0
_this.option.series[0].data[1].value = 0
_this.option.series[1].data[0].value = 0
_this.option.series[1].data[1].value = 0
_this.option.series[2].data[0].value = 0
_this.option.series[2].data[1].value = 0
_this.option.series[3].data[0].value = 0
_this.option.series[3].data[1].value = 0
_this.topqdata = 0
_this.topqycldata = 0
_this.topqycrdata = 0
_this.topqzdldata = 0
_this.topqycrgxydata = 0
_this.topqgfdata = 0
_this.topqyfdata = 0
}
_this.$echarts.init(document.getElementById("charts1")).setOption(this.option, true)
}).catch(err => {
console.log("--早发现上部分签报错--");
})
},
homebot() {
let _this = this
/******************下半部分**管*******************/
let wd3 = [{
"name": "YWSJ",
"endTime": this.selectStarttime,
"type": "2",
"startTime": this.startTime,
"compare": "between"
},
{
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}
]
let param3 = {
"themeId": _this.themeID2,
"wd": JSON.stringify(wd3),
"group": this.BarType
}
commonMethod(param3).then(res => {
// console.log('早发现---底部管')
// 用于在下文 对管数据进行赋值 可搜索 tableg
this.tableg = res.data.content
}).catch(err => {
console.log("--测试定义接口报错--");
})
/******************下半部分**签*******************/
let wd4 = [{
"name": "YWSJ",
"endTime": this.selectStarttime,
"type": "2",
"startTime": this.startTime,
"compare": "between"
},
{
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
},
{
"name": "QYBZ",
"value": "1",
"type": "1"
}
]
//var zbcode="MBZFX_016";单独读取
let param4 = {
"themeId": _this.themeID2,
"wd": JSON.stringify(wd4),
"group": this.BarType
}
_this.dataY01 = []
_this.dataY02 = []
_this.dataY03 = []
_this.dataY04 = []
_this.dataY05 = []
_this.dataY06 = []
_this.dataY07 = []
_this.dataY08 = []
_this.data_x = []
_this.tableAll = []
commonMethod(param4).then(res => {
// console.log('早发现---底部签')
this.tableq = res.data.content
console.log(this.tableq);
// _this.tableAll.sort(function(prev, next){
// return parseInt(prev.name.substring(0,2)) - parseInt(next.name.substring(0,2))
// })
if (this.BarType == 'YWSJ') {
this.tableq.sort(function(prev, next) {
return parseInt(prev.YWSJ.substring(5, 7)) - parseInt(next.YWSJ.substring(5, 7))
})
}
console.log(this.tableq);
this.tableq.forEach((item, index) => {
let obj = {
name: '',
code: '',
tag1: '0',
tag2: '0',
tag3: '0',
tag4: '0'
}
if (item.YWSJ) {
obj.name = item.YWSJ.substring(5, 7) + '月'
} else {
obj.name = item.XZQH_TEXT ? item.XZQH_TEXT : item.YLJGDM_EX2
obj.name = obj.name ? obj.name.replace('社区', '') : '返回空'
}
//obj.name = item.XZQH_TEXT ? item.XZQH_TEXT : item.YWSJ.substring(6, 7) + '月'
obj.code = item.XZQH
//绘制顶部图标x轴
if (this.BarType != 'YWSJ') {
// _this.data_x.push(obj.name)
}
_this.data_x.push(obj.name)
item.zbxx.forEach((item2, index2) => {
//console.log(item2.PZL);
if (item2.ZBID == '1016') {
this.dataY01.push(this.tableg[index].zbxx[index2].ZXZ ? this.tableg[index].zbxx[index2].ZXZ : 0)
this.dataY02.push(this.tableg[index].zbxx[index2].TBZ ? this.tableg[index].zbxx[index2].TBZ : 0)
this.dataY03.push(item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0)
this.dataY04.push(item2.PZL ? parseFloat(item2.PZL).toFixed(1) : 0)
}
if (item2.ZBID == '1017') {
//这里的管不对
obj.tag1 = this.tableg[index].zbxx[index2].ZXZ ? parseFloat(this.tableg[index].zbxx[index2].ZXZ).toFixed(1) : 0
obj.tag2 = this.tableg[index].zbxx[index2].PZL ? parseFloat(this.tableg[index].zbxx[index2].PZL).toFixed(1) : 0
//签
obj.tag3 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0
obj.tag4 = item2.PZL ? parseFloat(item2.PZL).toFixed(1) : 0
this.dataY05.push(this.tableg[index].zbxx[index2].ZXZ ? parseFloat(this.tableg[index].zbxx[index2].ZXZ).toFixed(1) : 0)
this.dataY06.push(item2.TBZ ? parseFloat(item2.TBZ).toFixed(1) : 0)
//签
this.dataY07.push(item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0)
this.dataY08.push(item2.TBZ ? parseFloat(item2.TBZ).toFixed(1) : 0)
}
//20200612新增判断
if (_this.DieaNo == 1) {
if (_this.bingNo == 1) {
if (item2.ZBID == '1111') {
this.dataY01.push(this.tableg[index].zbxx[index2].ZXZ ? this.tableg[index].zbxx[index2].ZXZ : 0)
this.dataY02.push(this.tableg[index].zbxx[index2].PZL ? this.tableg[index].zbxx[index2].PZL : 0)
}
if (item2.ZBID == '1110') {
this.dataY03.push(item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0)
this.dataY04.push(item2.PZL ? parseFloat(item2.PZL).toFixed(1) : 0)
}
} else {
if (item2.ZBID == '1111') {
this.dataY01.push(this.tableg[index].zbxx[index2].ZXZ ? this.tableg[index].zbxx[index2].ZXZ : 0)
this.dataY02.push(this.tableg[index].zbxx[index2].PZL ? this.tableg[index].zbxx[index2].PZL : 0)
}
if (item2.ZBID == '1110') {
this.dataY03.push(item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0)
this.dataY04.push(item2.PZL ? parseFloat(item2.PZL).toFixed(1) : 0)
}
}
} else if (_this.DieaNo == 2) {
if (item2.ZBID == '1111') {
this.dataY01.push(this.tableg[index].zbxx[index2].ZXZ ? this.tableg[index].zbxx[index2].ZXZ : 0)
this.dataY02.push(this.tableg[index].zbxx[index2].PZL ? this.tableg[index].zbxx[index2].PZL : 0)
}
if (item2.ZBID == '1110') {
this.dataY03.push(item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : 0)
this.dataY04.push(item2.PZL ? parseFloat(item2.PZL).toFixed(1) : 0)
}
}
})
_this.tableAll.push(obj)
})
//默认进来首诊测压
let series01 = [{
name: '管理/签约人群首诊测压人数',
type: 'bar',
stack: '1',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#4093E9'
},
{
offset: 1,
color: '#4093E9'
}
]
)
}
},
data: this.dataY01,
barWidth: null
},
{
name: '管理/签约人群首诊测压人数',
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
color: '#4093E9'
}
},
data: this.dataY02,
stack: "1"
},
{
name: '去年管理/签约人群首诊测压人数',
type: 'bar',
stack: '2',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#00BEBE'
},
{
offset: 1,
color: '#00BEBE'
}
]
)
}
},
data: this.dataY03,
barWidth: null
},
{
name: '去年管理/签约人群首诊测压人数',
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
color: '#00BEBE'
}
},
data: this.dataY04,
stack: "2"
},
{
name: '管·首诊测压血压异常率/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 0
}
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#00D1DA'
},
{
offset: 0.5,
color: '#00D1DA'
},
{
offset: 0.5,
color: '#666'
},
{
offset: 1,
color: '#666'
}
]
)
}
},
data: this.dataY05
},
{
name: '管·首诊测压血压异常率/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#00D1DA'
}
},
z: 12,
data: this.dataY06
},
{
name: '签·首诊测压血压异常率/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 0
}
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#FFC24D'
},
{
offset: 0.5,
color: '#FFC24D'
},
{
offset: 0.5,
color: '#666'
},
{
offset: 1,
color: '#666'
}
]
)
}
},
data: this.dataY07
},
{
name: '签·首诊测压血压异常率/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#FFC24D'
}
},
z: 12,
data: this.dataY08
}
]
//易患监测
let series02 = [{
name: '管理/签约易患人群血压规范监测数',
type: 'bar',
stack: '1',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#4093E9'
},
{
offset: 1,
color: '#4093E9'
}
]
)
}
},
data: this.dataY01,
barWidth: null,
},
{
name: '管理/签约易患人群血压规范监测数',
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
color: '#4093E9'
}
},
data: this.dataY02,
stack: "1"
},
{
name: '去年管理/签约易患人群血压规范监测数',
type: 'bar',
stack: '2',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#00BEBE'
},
{
offset: 1,
color: '#00BEBE'
}
]
)
}
},
data: this.dataY03,
barWidth: null,
},
{
name: '去年管理/签约易患人群血压规范监测数',
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
color: '#00BEBE'
}
},
data: this.dataY04,
stack: "2"
},
{
name: '管·易患人群血压规范监测率/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 0
}
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#00D1DA'
},
{
offset: 0.5,
color: '#00D1DA'
},
{
offset: 0.5,
color: '#666'
},
{
offset: 1,
color: '#666'
}
]
)
}
},
data: this.dataY05,
},
{
name: '管·易患人群血压规范监测率/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#00D1DA'
}
},
z: 12,
data: this.dataY06,
},
{
name: '签·易患人群血压规范监测率/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 0
}
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#FFC24D'
},
{
offset: 0.5,
color: '#FFC24D'
},
{
offset: 0.5,
color: '#666'
},
{
offset: 1,
color: '#666'
}
]
)
}
},
data: this.dataY07,
},
{
name: '签·易患人群血压规范监测率/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#FFC24D'
}
},
z: 12,
data: this.dataY08
}
]
//易患监测
let series03 = [{
name: '管理/签约人群首诊测压诊断人数',
type: 'bar',
stack: '1',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#4093E9'
},
{
offset: 1,
color: '#4093E9'
}
]
)
}
},
data: this.dataY01,
barWidth: null,
},
{
name: '管理/签约人群首诊测压诊断人数',
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
color: '#4093E9'
}
},
data: this.dataY02,
stack: "1"
},
{
name: '去年管理/签约人群首诊测压诊断人数',
type: 'bar',
stack: '2',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#00BEBE'
},
{
offset: 1,
color: '#00BEBE'
}
]
)
}
},
data: this.dataY03,
barWidth: null,
},
{
name: '去年管理/签约人群首诊测压诊断人数',
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
color: '#00BEBE'
}
},
data: this.dataY04,
stack: "2"
},
{
name: '管·首诊测压血压异常者诊断率/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 0
}
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#00D1DA'
},
{
offset: 0.5,
color: '#00D1DA'
},
{
offset: 0.5,
color: '#666'
},
{
offset: 1,
color: '#666'
}
]
)
}
},
data: this.dataY05,
},
{
name: '管·首诊测压血压异常者诊断率/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#00D1DA'
}
},
z: 12,
data: this.dataY06,
},
{
name: '签·首诊测压血糖异常者诊断率/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 0
}
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#FFC24D'
},
{
offset: 0.5,
color: '#FFC24D'
},
{
offset: 0.5,
color: '#666'
},
{
offset: 1,
color: '#666'
}
]
)
}
},
data: this.dataY07,
},
{
name: '签·首诊测压血糖异常者诊断率/去年',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#FFC24D'
}
},
z: 12,
data: this.dataY08
}
]
_this.option2.xAxis[0].data = _this.data_x
if (_this.DieaNo == 1) {
if (_this.bingNo == 1) {
_this.option2.series = series01
} else {
_this.option2.series = series03
}
} else if (_this.DieaNo == 2) {
//_this.groupNo==1 各区,2时间
_this.option2.series = series02
}
_this.$echarts.init(document.getElementById("middlebarbox4")).setOption(_this.option2, true)
}).catch(err => {
console.log("--2底部报错签--");
})
}
},
mounted() {
console.log('--------------------------');
console.log(this.PlaceCode);
console.log('--------------------------');
this.homeinit()
this.homebot()
const obj = setInterval(() => {
const dom = document.getElementById("charts1")
if (dom) {
const myChart = this.$echarts.init(dom)
if (this.option && typeof this.option === "object") {
myChart.setOption(this.option, true)
}
clearInterval(obj)
}
}, 200)
const obj2 = setInterval(() => {
const dom2 = document.getElementById("middlebarbox4")
if (dom2) {
const myChart = this.$echarts.init(dom2)
if (this.option2 && typeof this.option2 === "object") {
myChart.setOption(this.option2, true)
}
clearInterval(obj2)
}
}, 200)
},
components: {}
}
</script>
<style lang="stylus" scoped>
.card3title1{ color: #fff;}
#charts1{ width:80px; height:120px; float:left;}
.datalist{ float:left; width: 165px; padding-top:23px;}
.datalist p{ clear:both; line-height: 25px; font-size: 12px; color: #B3BFD2;}
.card2-modts{ padding-top:30px; width:200px}
.card2-modtr{ width:260px}
.table02{}
.table02 td{ height:25px;}
#middlebarbox4{width:455px;height:280px}
.area >>> .el-input--mini .el-input__inner{padding:0; text-align:center; color: #FFF; border:1px solid #409EFF; background-color: #409EFF;}
.area >>> .el-input--mini .el-input__inner::-webkit-input-placeholder {color: #FFF;}
.cmtline2{ padding-top: 60px; margin-left: 8px;}
.area >>> .el-input--mini{ width: 60px; margin-left: 8px;}
.area >>> .el-input__icon.el-icon-date{display:none}
.area >>> .el-input__icon{display:none}
.uplib{ width:100%;overflow: hidden; position:absolute; top:56px; right:0; left:0; background:rgba(51, 51, 51, 0.9); padding:10px}
</style>
<template>
<div class="pagetwo" @click="showtab(5)">
<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" @click="CityGetBack()" v-if="this.BeginCode != 1">返回</el-button>
<el-button size="mini" @click="changeReplay()" 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>
<!----第一个模块---->
<div class="card-dark card-01">
<div class="card22-mod">
<h2>医疗机构登记报告分析</h2>
<p>信息化业务开展机构数 / 非信息化业务开展机构数</p>
<div class="cmt">
<span>{{msgopendata.ZXZ?msgopendata.ZXZ:0}}</span>
<span class="span1"></span>
<span class="tag-blue"></span>
<span class="span1">{{msgopendata.TBL?msgopendata.TBL:0}}%</span>
<span class="span1">/</span>
<span>{{msgclosedata.ZXZ?msgclosedata.ZXZ:0}}</span>
<span class="span1"></span>
<span class="tag-blue"></span>
<span class="span1">{{msgclosedata.TBL?msgclosedata.TBL:0}}%</span>
</div>
<p>开展机构总数 {{opentotal?opentotal:0}}</p>
</div>
<div class="card33-mod">
<div class="page5left" id="pag5-left1" v-show="ChartsNo == 1">1</div>
<div class="page5left" id="pag5-left2" v-show="ChartsNo == 2">2</div>
</div>
</div>
<div class="card-dark card-02">
<div class="card22-mod">
<div class="modtitle2">
<span @click="DieaChange(1)" :class="ChartsNo==1?'myclk':''">肿瘤</span> |
<span @click="DieaChange(2)" :class="ChartsNo==2?'myclk':''">心脑血管</span>
</div>
<p>信息化登记报告数 / 非信息化登记报告数</p>
<div class="cmt ">
<span>{{orgopendata.ZXZ?orgopendata.ZXZ:0}}</span>
<span class="span1"></span>
<span class="tag-blue"></span>
<span class="span1">{{orgopendata.TBL?orgopendata.TBL:0}}%</span>
<span class="span1">/</span>
<span>{{orgclosedata.ZXZ?orgclosedata.ZXZ:0}}</span>
<span class="span1"></span>
<span class="tag-blue"></span>
<span class="span1">{{orgclosedata.TBL?orgclosedata.TBL:0}}%</span>
</div>
<p>开展机构总数 {{orgtotal?orgtotal:0}}</p>
</div>
<div class="card33-mod">
<div class="page5left" id="pag5-right1" v-show="ChartsNo == 1"></div>
<div class="page5left" id="pag5-right2" v-show="ChartsNo == 2"></div>
</div>
</div>
<div class="clear10"></div>
<div class="card-dark card-03">
<ul>
<li @click="pageChage(1)"><i class="el-icon-s-cooperation"></i> 慢病管理</li>
<li @click="pageChage(2)"><i class="el-icon-bangzhu"></i> 管理效果</li>
<li @click="pageChage(3)"><i class="el-icon-service"></i> 服务质量</li>
<li @click="pageChage(4)"><i class="el-icon-first-aid-kit"></i> 早发现</li>
<li @click="pageChage(5)" class="clk"><i class="el-icon-odometer"></i> 慢病监测</li>
</ul>
</div>
<div class="card-dark card-04">
<div class="card3title1">登记报告分析</div>
<div class="card3title2" v-show="ChartsNo == 2">
<span @click="dengjiChange(1)" :class="djNo==1?'myclk':''">全部</span> |
<span @click="dengjiChange(2)" :class="djNo==2?'myclk':''">三级</span> |
<span @click="dengjiChange(3)" :class="djNo==3?'myclk':''">二级</span> |
<span @click="dengjiChange(4)" :class="djNo==4?'myclk':''">一级</span>
</div>
<div class="card3main">
<div id="middlebarbox5"></div>
</div>
</div>
<div class="card-dark card-05">
<div class="card5title">
<span @click="bingChange(1)" :class="bingNo==1?'myclk':''">开展情况</span>
<span class="line">|</span>
<span @click="bingChange(2)" v-show="ChartsNo==1" :class="bingNo==2?'myclk':''">病理期别</span>
<span class="line" v-show="ChartsNo==1">|</span>
<span @click="bingChange(3)" :class="bingNo==3?'myclk':''">漏报情况</span>
</div>
<div class="card5main">
<table class="table01 table" width="100%" border="0">
<thead class="fixedThead">
<tr>
</tr>
<tr v-show="bingNo==1">
<th width="38"></th>
<th width="48">{{thname}}</th>
<th @click.stop="showtab(1)">开展情况</th>
<th @click.stop="showtab(2)">登记数·万/同·%</th>
</tr>
<tr v-show="bingNo==2">
<th width="38"></th>
<th width="48">{{thname}}</th>
<th>明确病理比例/同·%</th>
<th>明确期别比例/同·%</th>
</tr>
<tr v-show="bingNo==3">
<th width="38"></th>
<th width="48">{{thname}}</th>
<th @click.stop="showtab(3)">漏报率/同·%</th>
<th @click.stop="showtab(4)">报告信息错误比例/同·%</th>
</tr>
</thead>
<div v-if="this.ChartsNo == 2">
<div class="uplib" v-if="showtabnum == 1">
1、指标名称:<br>医疗机构登记报告业务开展情况(心脑血管)<br>
指标定义:<br>是否登记报告心脑血管急性事件法定内容<br>
2、指标名称:<br>医疗机构登记报告信息化情况(心脑血管)<br>
指标定义:<br>是否按法定要求通过疾病预防控制信息系统进行登记报告<br>
</div>
<div class="uplib" v-if="showtabnum == 2">
1、指标名称:<br>医疗机构登记报告事件数(心脑血管)<br>
指标定义:<br>是否登记报告心脑血管急性事件法定内容<br>
2、指标名称:<br>医疗机构通过信息系统登记报告事件数(心脑血管)<br>
指标定义:<br>年内通过疾病预防控制信息系统登记报告心脑血管急性事件数<br>
</div>
<div class="uplib" v-if="showtabnum == 3">
指标名称:<br>医疗机构心脑血管急性事件应报未报的事件数<br>
</div>
<div class="uplib" v-if="showtabnum == 4">
指标名称:<br>医疗机构心脑血管急性事件漏报率<br>
计算公式:<br>医疗机构应报未报的事件数/(医疗机构已报的事件数+医疗机构应报未报的事件数)×100%
</div>
</div>
<tbody class="scrollTbody">
<tr v-for="(item, index) in tabledata" :key="index">
<td width="38"><span>{{index+1}}</span></td>
<td width="48" @click="changecity(item.areacode,item.name)" class="underline">{{item.name}}</td>
<td>{{item.tag1}} / {{item.tag2}} <i class="el-icon-top color2"></i></td>
<td>{{item.tag3}} / {{item.tag4}} <i class="el-icon-top color2"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import Header from './Header'
import {
commonMethod,
otherMethod
} from '@/api/home.js'
export default {
name: 'screenpage5',
data() {
return {
showtabnum:0,
areaname: '',
themeID: 22,
themeID2: 16,
DieaNo: 1,
thname: '各区',
startTime: '2019-01',
selectStarttime: localStorage.getItem("EndTime"),
djNo: 1,
value2: '',
pageNo: 5,
bingNo: 1,
ChartsNo: 1,
option1: {
color: ['#42ccff', '#3F81BB'],
series: [{
itemStyle: {
normal: {
label: {
show: true,
formatter: '{b} : {c} ({d}%)'
},
labelLine: {
show: true
}
}
},
name: '访问来源',
type: 'pie',
radius: '65%', //饼图大小
center: ['50%', '50%'],
label: {
normal: {
position: 'inner',
show: false,
},
},
data: [{
value: 76,
name: '已处理',
color: "red",
areaStyle: {
normal: {
backgroundColor: '#42ccff'
}
}
},
{
value: 24,
name: '待处理',
color: "red",
areaStyle: {
normal: {
backgroundColor: '#3F81BB'
}
}
},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
},
option2: {
color: ['#42ccff', '#3F81BB'],
series: [{
itemStyle: {
normal: {
label: {
show: true,
formatter: '{b} : {c} ({d}%)'
},
labelLine: {
show: true
}
}
},
name: '访问来源',
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
label: {
normal: {
position: 'inner',
show: false,
},
},
data: [{
value: 45,
name: '已处理',
color: "red",
areaStyle: {
normal: {
backgroundColor: '#42ccff'
}
}
},
{
value: 55,
name: '待处理',
color: "red",
areaStyle: {
normal: {
backgroundColor: '#3F81BB'
}
}
},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
},
option3: {
tooltip: {
show: true,
trigger: "item",
position: [50, 0],
formatter: "<table class='pl10'>" +
"<tr><td></td><td>信息化登记报告数.万</td><td>非信息化登记报告数.个</td></tr>" +
"<tr><td><span style=' height: 10px; width: 14px; display: inline-table; background-color: #49A6F6; margin-right:4px'></span>三级</td><td align=center>1</td><td align=center>2</td></tr>" +
"<tr><td><span style=' height: 10px; width: 14px; display: inline-table; background-color: #00C6A7; margin-right:4px'></span>二级</td><td align=center>1</td><td align=center>3</td></tr>" +
"<tr><td><span style=' height: 10px; width: 14px; display: inline-table; background-color: #FEF7AA; margin-right:4px'></span>一级</td><td align=center>2</td><td align=center>3</td></tr>" +
"</table>"
},
color: ['#49A6F6', '#00C6A7', '#FEF7AA'],
legend: {
bottom: 2,
left: 0,
textStyle: {
color: '#B3BFD2',
fontSize: 10,
},
itemHeight: 8,
itemWidth: 8,
data: ['三级', '二级', '一级']
},
grid: {
top: '6%',
bottom: '55%',
left: "50%",
containLabel: false
},
yAxis: [{
type: 'category',
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
inside: true,
textStyle: {
color: '#B3BFD2',
fontSize: 12,
},
show: true
},
data: ["信息化", '非信息化']
}],
xAxis: [{
show: false
}],
series: [{
name: '信息化',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: ['25%', '45%'],
center: ["50%", "50%"],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
data: [{
value: this.msgone,
name: '一级',
itemStyle: {
normal: {
color: '#FEF7AA',
},
}
},
{
value: this.msgtwo,
name: '二级',
itemStyle: {
normal: {
color: '#00C6A7',
},
}
},
{
value: this.msgthr,
name: '三级',
itemStyle: {
normal: {
color: '#49A6F6',
},
}
},
{
value: this.msgtotale * 0.5,
name: '',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
}
},
]
},
{
name: '非信息化',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: ['50%', '70%'],
center: ["50%", "50%"],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
data: [{
value: this.nmsgone,
name: '一级',
itemStyle: {
normal: {
color: '#FEF7AA',
},
},
},
{
value: this.nmsgtwo,
name: '二级',
itemStyle: {
normal: {
color: '#00C6A7',
},
}
},
{
value: this.nmsgthr,
name: '三级',
itemStyle: {
normal: {
color: '#49A6F6',
},
}
},
{
value: this.nmsgtotale * 0.5,
name: '',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
}
}
]
}
]
},
option4: {
tooltip: {
show: true,
trigger: "item",
position: ['-150', '10'],
formatter: "<table class='pl10'>" +
"<tr><td></td><td>信息化登记报告数.万</td><td>非信息化登记报告数.个</td></tr>" +
"<tr><td><span style=' height: 10px; width: 14px; display: inline-table; background-color: #49A6F6; margin-right:4px'></span>三级</td><td align=center>0</td><td align=center>1</td></tr>" +
"<tr><td><span style=' height: 10px; width: 14px; display: inline-table; background-color: #00C6A7; margin-right:4px'></span>二级</td><td align=center>2</td><td align=center>4</td></tr>" +
"<tr><td><span style=' height: 10px; width: 14px; display: inline-table; background-color: #FEF7AA; margin-right:4px'></span>一级</td><td align=center>5</td><td align=center>3</td></tr>" +
"</table>"
},
color: ['#49A6F6', '#00C6A7', '#FEF7AA'],
legend: {
bottom: 2,
left: 0,
textStyle: {
color: '#B3BFD2',
fontSize: 10,
},
itemHeight: 8,
itemWidth: 8,
data: ['三级', '二级', '一级']
},
grid: {
top: '6%',
bottom: '55%',
left: "50%",
containLabel: false
},
yAxis: [{
type: 'category',
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
inside: true,
textStyle: {
color: '#8393A9',
fontSize: 10,
},
show: true
},
data: ["信息化", '非信息化']
}],
xAxis: [{
show: false
}],
series: [{
name: '信息化',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: ['25%', '45%'],
center: ["50%", "50%"],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
data: [{
value: this.orgone,
name: '一级',
itemStyle: {
normal: {
color: '#FEF7AA',
},
}
}, {
value: this.orgtwo,
name: '二级',
itemStyle: {
normal: {
color: '#00C6A7',
},
}
}, {
value: this.orgthr,
name: '三级',
itemStyle: {
normal: {
color: '#49A6F6',
},
}
}, {
value: this.orgtotale * 0.5,
name: '',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
}
}]
},
{
name: '非信息化',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: ['50%', '70%'],
center: ["50%", "50%"],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
data: [{
value: this.norgone,
name: '一级',
itemStyle: {
normal: {
color: '#FEF7AA'
}
}
}, {
value: this.norgtwo,
name: '二级',
itemStyle: {
normal: {
color: '#00C6A7'
}
}
}, {
value: this.norgthr,
name: '三级',
itemStyle: {
normal: {
color: '#49A6F6'
}
}
}, {
value: this.norgtotale * 0.5,
name: '',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
}
}]
}
]
},
msgdata: [],
msgopendata: [],
msgclosedata: [],
tabledata: [],
opentotal: 0,
orgdata: [],
orgopendata: [],
orgclosedata: [],
orgtotal: 0,
msgbfb: 0,
orgbfb: 0,
orgtotale: 0,
norgtotale: 0,
msgtotale: 0,
nmsgtotale: 0,
msgone: 0,
msgtwo: 0,
msgthr: 0,
nmsgone: 0,
nmsgtwo: 0,
nmsgthr: 0,
orgone: 0,
orgtwo: 0,
orgthr: 0,
norgone: 0,
norgtwo: 0,
djdata01: [25, 67, 44, 42, 22, 34, 15, 47, 32, 20, 12, 34, 2, 4, 6, 22],
djdata02: [65, 17, 24, 42, 22, 34, 15, 17, 32, 20, 12, 34, 2, 44, 6, 22],
djdata03: [25, 67, 34, 42, 22, 14, 15, 17, 32, 20, 12, 34, 2, 4, 6, 22],
djdata04: [25, 17, 44, 42, 42, 34, 15, 27, 32, 20, 12, 34, 32, 4, 6, 22],
djdata05: [15, 67, 14, 12, 22, 24, 15, 17, 32, 10, 12, 14, 2, 4, 6, 22],
djdata06: [25, 67, 44, 42, 22, 34, 45, 17, 32, 20, 12, 34, 2, 4, 6, 22],
norgthr: 0,
BeginCode: 1, // 用于判断当前的市级 状态
lastStatus: {},
BarType: "XZQH",
PlaceCode: '',
value: '2019-09',
nowdate: '2019-09',
sel: '筛选',
option5: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
position: ['20%', '20%'],
formatter: function(params) {
console.log(params.length)
console.log('打印params长度')
console.log(params)
if (params.length == 6) {
var res = '<ul class="f12 pl10 pr15">';
res += '<li class="f13"> ' + params[0].axisValue + '区</li>';
res += '<li>非信息化登记数/去年:' + params[0].data + '/' + params[1].data + '万</li>';
res += '<li>明确病理占比:' + params[2].data + '%</li>';
res += '<li>明确期别占比:' + params[3].data + '%</li>';
res += '<li>肿瘤登记漏报率:' + params[4].data + '%</li>';
res += '<li>肿瘤报告信息错误比例:' + params[5].data + '%</li>';
res += '</ul>';
} else {
var res = '<ul class="f12 pl10 pr15">';
res += '<li class="f13"> ' + params[0].axisValue + '区</li>';
res += '<li>非信息化登记数/去年:' + params[1].data + '万</li>';
res += '<li>急性事件漏报率:' + params[2].data + '%</li>';
res += '</ul>';
}
return res
}
},
dataZoom: {
start: 0, //默认为0
end: 50, //默认为100
type: 'slider',
show: true ,
xAxisIndex: [0] ,
handleSize: 20 , //滑动条的 左右2个滑动条的大小
height: 5 , //组件高度
left: 50, //左边的距离
right: 50, //右边的距离
bottom: 240, //右边的距离
backgroundColor: '#ccc', //两边未选中的滑动条区域的颜色
showDataShadow: true, //是否显示数据阴影 默认auto
handleStyle: {
borderColor: "#CBBCDB",
borderWidth: "1",
shadowBlur: 1,
background: "#000",
shadowColor: "#000",
},
filterMode: 'filter',
},
legend: {
top: 10,
textStyle: {
color: '#8393A9',
fontSize: 11
},
itemGap: 5,
itemWidth: 15,
itemHeight: 10
},
grid: {
top: 80,
bottom: 45,
left: 50
},
xAxis: [{
type: 'category',
data: ['静安', '金山', '浦东', '黄浦', '松江', '普陀', '闵行', '崇明', '宝山', '青浦', '长宁', '徐汇', '嘉定', '杨浦', '奉贤', '虹口'],
axisLine: {
lineStyle: {
color: '#8393A9',
type: 'solid'
}
},
axisLabel: {
interval: 0,
rotate: 45,
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',
fontSize: 10
}
},
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: '#8393A9',
fontSize: 10
}
},
axisLine: {
show: true,
lineStyle: {
color: '#8393A9',
type: 'solid'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
}
],
dataZoom: [{
type: 'inside',
startValue: 0,
filterMode: 'empty',
endValue: 14
}],
series: []
}
}
},
methods: {
showtab(num){
this.showtabnum = num
console.log(this.showtabnum)
},
CityGetBack() {
console.log("this.BeginCode :" + this.BeginCode);
console.log("this.diastype :" + this.diastype);
if (this.BeginCode == 2) {
// 使用 this.BeginCode 的值来判断现在处于的区镇状态
// 此时 处于第一次点击下的状态
this.PlaceCode = ''
this.BarType = 'XZQH'
this.BeginCode = 1
this.areaname = ''
this.thname = '各区'
console.log("现在处于一级状态");
}
if (this.BeginCode == 3) {
// 使用 this.BeginCode 的值来判断现在处于的区镇状态
// 此时 处于第二次点击下的状态
// console.log("现在处于二级状态");
this.PlaceCode = this.lastStatus.PlaceCode
this.BarType = this.lastStatus.BarType
this.BeginCode = 2
console.log(this.lastStatus);
}
this.homeinit()
this.homebot()
},
changecity(code, name) {
if (this.BeginCode == 1) {
// 点击区 -- 展示城镇信息
this.BarType = 'YLJGDM'
// 用于记录当前的 区镇的入参状态
this.lastStatus.PlaceCode = this.PlaceCode
this.lastStatus.BarType = this.BarType
this.lastStatus.BeginCode = this.BeginCode
this.BeginCode = 2 // 当begin值为1的时候可以触发点击事件,点击事件执行后,
// 我们就需要把状态码置为2 在下文的判断中以请求 乡镇 的数据信息
// console.log(JSON.stringify(this.lastStatus));
// console.log(this.PlaceCode);
this.thname = '医院'
console.log(1);
} else if (this.BeginCode == 2) {
//不需要下钻
return false
this.BarType = 'YWSJ'
this.BeginCode = 3
console.log(2);
this.thname = '医院'
}
this.homeinit()
this.homebot()
this.PlaceCode = code
this.areaname = name
console.log(code);
console.log(this.BeginCode);
},
dataSearch(value) {
var myDate = new Date();
myDate.getYear();
localStorage.setItem("EndTime", value)
this.startTime = value.slice(0, 4) + '-01'
if (value) {
this.nowdate = value
this.selectStarttime = value
this.homeinit()
this.homebot()
}
},
pageChage(page) {
this.$emit('screenTwoPagefunc', page)
},
exitFn() {
this.$router.push({
path: '/'
});
},
DieaChange(num) {
let _this = this
this.ChartsNo = num
this.bingNo = 1
this.djNo = 1
console.log(this.ChartsNo);
_this.homeinit()
},
bingChange(num) {
this.bingNo = num
this.homebot()
},
changeReplay() {
var myDate = new Date();
let tempmonth = myDate.getMonth()
if (tempmonth < 10) {
tempmonth = '0' + tempmonth
}
// 用于 重置时间 入参
let DateNow = '' + myDate.getFullYear() + '-' + tempmonth + '-01'
console.log(DateNow);
this.themeID = 22
this.PlaceCode = ''
this.BarType = 'XZQH'
this.BeginCode = 1
this.areaname = ''
this.thname = '各区'
this.nowdate = DateNow
this.selectStarttime = DateNow
this.value = DateNow.substr(0,7)
this.dataSearch(DateNow)
this.homebot()
this.option5.series.forEach(item=>{
item.data = []
})
console.log(this.option5.series);
this.$echarts.init(document.getElementById("middlebarbox5")).setOption(this.option5, true)
},
dengjiChange(num) {
this.djNo = num
this.homeinit()
},
homeinit() {
let _this = this
let wd = [{
"name": "YWSJ",
"endTime": this.selectStarttime,
"type": "2",
"startTime": this.startTime,
"compare": "between"
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
//var zbcode="MBZFX_016";单独读取
let param = {
"themeId": _this.themeID,
"wd": JSON.stringify(wd),
}
commonMethod(param).then(res => {
// console.log('慢病监测-肿瘤')
console.log(res)
if(res.data.content.length>0){
_this.msgdata = res.data.content[0].zbxx
_this.msgdata.forEach((item, index) => {
if (item.ZBID == "1001") {
_this.msgopendata = item
}
if (item.ZBID == "1002") {
_this.msgclosedata = item
}
if (item.ZBID == "1003") {
_this.orgopendata = item
}
if (item.ZBID == "1004") {
_this.orgclosedata = item
}
if (item.ZBID == "1007") {
_this.msgbfb = item.ZXZ
}
if (item.ZBID == "1104") {
_this.orgbfb = item.ZXZ
}
})
_this.option1.series[0].data[0].value = _this.msgbfb
_this.option1.series[0].data[1].value = 100 - _this.msgbfb
_this.option2.series[0].data[0].value = _this.orgbfb
_this.option2.series[0].data[1].value = 100 - _this.orgbfb
}else{
_this.msgopendata = 0
_this.msgclosedata = 0
_this.orgopendata = 0
_this.orgclosedata = 0
_this.msgbfb = 0
_this.orgbfb = 0
_this.option1.series[0].data[0].value = 0
_this.option1.series[0].data[1].value = 0
_this.option2.series[0].data[0].value = 0
_this.option2.series[0].data[1].value = 0
}
_this.$echarts.init(document.getElementById("pag5-left1")).setOption(_this.option1, true)
_this.$echarts.init(document.getElementById("pag5-right1")).setOption(_this.option2, true)
}).catch(err => {
console.log("--慢病监测肿瘤报错--");
})
let wd3 = [{
"name": "YWSJ",
"endTime": this.selectStarttime,
"type": "2",
"startTime": this.startTime,
"compare": "between"
}, {
"name": "XZQH",
"value": this.PlaceCode,
"type": "1"
}]
let param3 = {
"themeId": _this.themeID,
"wd": JSON.stringify(wd3)
}
console.log(param3);
commonMethod(param3).then(res => {
// console.log('慢病监测======心脑血管=========')
let zbdata = res.data.content.length > 0 ? res.data.content[0].zbxx : []
_this.msgdata.forEach((item, index) => {
if (item.ZBID == "1009") {
_this.msgone = item.BZZ
_this.msgtwo = item.ZXZ
_this.msgthr = item.ZZZ
_this.msgtotale = item.BZZ + item.ZXZ + item.ZZZ
}
if (item.ZBID == "1010") {
_this.nmsgone = item.BZZ
_this.nmsgtwo = item.ZXZ
_this.nmsgthr = item.ZZZ
_this.nmsgtotale = item.BZZ + item.ZXZ + item.ZZZ
}
if (item.ZBID == "1011") {
_this.orgone = item.BZZ
_this.orgtwo = item.ZXZ
_this.orgthr = item.ZZZ
_this.orgtotale = item.BZZ + item.ZXZ + item.ZZZ
}
if (item.ZBID == "1012") {
_this.norgone = item.BZZ
_this.norgtwo = item.ZXZ
_this.norgthr = item.ZZZ
_this.norgtotale = item.BZZ + item.ZXZ + item.ZZZ
}
})
_this.msgtotale = _this.msgtotale ? _this.msgtotale : 15
_this.nmsgtotale = _this.nmsgtotale ? _this.nmsgtotale : 15
_this.option3.series[0].data[0].value = _this.msgone ? _this.msgone : 10
_this.option3.series[0].data[1].value = _this.msgtwo ? _this.msgtwo : 10
_this.option3.series[0].data[2].value = _this.msgthr ? _this.msgthr : 10
_this.option3.series[0].data[3].value = _this.msgtotale * 0.5
_this.option3.series[1].data[0].value = _this.nmsgone ? _this.nmsgone : 10
_this.option3.series[1].data[1].value = _this.nmsgtwo ? _this.nmsgtwo : 10
_this.option3.series[1].data[2].value = _this.nmsgthr ? _this.nmsgthr : 10
_this.option3.series[1].data[3].value = _this.nmsgtotale * 0.5
_this.$echarts.init(document.getElementById("pag5-left2")).setOption(_this.option3, true)
_this.orgtotale = _this.orgtotale ? _this.orgtotale : 15
_this.norgtotale = _this.norgtotale ? _this.norgtotale : 15
_this.option4.series[0].data[0].value = _this.orgone ? _this.orgone : 10
_this.option4.series[0].data[1].value = _this.orgtwo ? _this.orgtwo : 10
_this.option4.series[0].data[2].value = _this.orgthr ? _this.orgthr : 10
_this.option4.series[0].data[3].value = _this.orgtotale * 0.5
_this.option4.series[1].data[0].value = _this.norgone ? _this.norgone : 10
_this.option4.series[1].data[1].value = _this.norgtwo ? _this.norgtwo : 10
_this.option4.series[1].data[2].value = _this.norgthr ? _this.norgthr : 10
_this.option4.series[1].data[3].value = _this.norgtotale * 0.5
_this.$echarts.init(document.getElementById("pag5-right2")).setOption(_this.option4, true)
if (_this.ChartsNo == 1) {
let series = [{
name: '登记数/去年',
type: 'bar',
barWidth: null,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#4093E9'
},
{
offset: 1,
color: '#4093E9'
}
]
)
}
},
data: [15, 27, 24, 22, 41, 47, 24, 42, 21, 42, 47, 24, 42, 67, 24, 42]
},
{
name: '登记数/去年',
type: 'bar',
barWidth: 6,
itemStyle: {
normal: {
color: '#4093E9'
}
},
data: [45, 67, 44, 12, 45, 67, 44, 12, 45, 67, 44, 12, 45, 67, 44, 12]
},
{
name: '明确病理占比',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 5,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#099023'
}
},
data: [45, 17, 42, 22, 34, 2, 4, 6, 22, 42, 22, 34, 2, 4, 6, 22]
},
{
name: '明确期别占比',
type: 'line',
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 5,
smooth: false,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#FF8E00'
}
},
data: [45, 17, 42, 22, 34, 25, 17, 32, 22, 22, 34, 2, 4, 6, 22, 22]
},
{
name: '肿瘤登记漏报率',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 5,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#42CCFF'
}
},
data: [25, 61, 42, 22, 34, 25, 17, 32, 22, 22, 34, 2, 4, 6, 34, 12]
},
{
name: '肿瘤报告信息错误比例',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 5,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#D44E53'
}
},
data: [25, 67, 44, 42, 22, 34, 15, 17, 32, 20, 12, 34, 2, 4, 6, 22]
}
]
_this.option5.series = series
_this.$echarts.init(document.getElementById("middlebarbox5")).setOption(_this.option5, true)
} else {
let series = [{
name: '登记数/去年',
type: 'bar',
barWidth: null,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#115D5D'
},
{
offset: 0.5,
color: '#115D5D'
},
{
offset: 0.5,
color: '#4093E9'
},
{
offset: 1,
color: '#4093E9'
}
]
)
}
},
data: _this.djdata01
},
{
name: '登记数/去年',
type: 'bar',
barWidth: 6,
itemStyle: {
normal: {
color: '#4093E9'
}
},
data: _this.djdata02
},
{
name: '急性事件漏报率',
type: 'line',
smooth: false,
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 5,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: "#42CCFF"
}
},
data: _this.djdata03
}
]
_this.djdata01 = []
_this.djdata02 = []
_this.djdata03 = []
_this.djdata04 = []
_this.djdata05 = []
//切换全部,一级二级三级的
if (_this.djNo == 1) {
for (let i = 0; i < 16; i++) {
_this.djdata01.push(parseInt(Math.random() * 10))
_this.djdata02.push(parseInt(Math.random() * 10))
_this.djdata03.push(parseInt(Math.random() * 10))
_this.djdata04.push(parseInt(Math.random() * 10))
_this.djdata05.push(parseInt(Math.random() * 10))
}
} else if (_this.djNo == 2) {
for (let i = 0; i < 16; i++) {
_this.djdata01.push(parseInt(Math.random() * 18))
_this.djdata02.push(parseInt(Math.random() * 18))
_this.djdata03.push(parseInt(Math.random() * 18))
_this.djdata04.push(parseInt(Math.random() * 18))
_this.djdata05.push(parseInt(Math.random() * 18))
}
} else {
for (let i = 0; i < 16; i++) {
_this.djdata01.push(parseInt(Math.random() * 30))
_this.djdata02.push(parseInt(Math.random() * 30))
_this.djdata03.push(parseInt(Math.random() * 30))
_this.djdata04.push(parseInt(Math.random() * 30))
_this.djdata05.push(parseInt(Math.random() * 30))
}
}
_this.option5.series = series
_this.$echarts.init(document.getElementById("middlebarbox5")).setOption(_this.option5, true)
}
}).catch(err => {
console.log("--慢病监测心脑血管报错--");
})
},
homebot() {
let _this = this
let wd4 = [{
"name": "YWSJ",
"endTime": this.selectStarttime,
"type": "2",
"startTime": this.startTime,
"compare": "between"
},
{
"name": "QYBZ",
"value": "1",
"type": "1"
},
{
"name": "XZQH",
"value": _this.PlaceCode,
"type": "1"
}
]
let param4 = {
"themeId": _this.themeID,
"wd": JSON.stringify(wd4),
"group": _this.BarType
}
console.log(_this.BarType);
console.log(_this.PlaceCode);
_this.tabledata = []
commonMethod(param4).then(res => {
// console.log('慢病管理底部----->>>>')
console.log(res)
let obj = {
name: '',
tag1: '0.0',
tag2: '0.0',
tag3: '0.0',
tag4: '0.0',
areacode: 'v'
}
res.data.content.forEach((item, index) => {
let obj = {
name: '',
tag1: '0.0',
tag2: '0.0',
tag3: '0.0',
tag4: '0.0',
areacode: 'v'
}
if (item.YWSJ) {
obj.name = item.YWSJ.substring(5, 7) + '月'
} else {
obj.name = item.XZQH_TEXT ? item.XZQH_TEXT : item.YLJGDM_EX2
obj.name = obj.name ? obj.name.replace('社区', '') : '返回空'
}
obj.areacode = item.XZQH
console.log(item);
item.zbxx.forEach((item2, index2) => {
//管理人群累计死后随访人数
//去年管理人群累计死后随访人数
if (_this.bingNo == 1) {
if (item2.ZBID == '1110') {
obj.tag1 = item2.TBL ? parseFloat(item2.TBL).toFixed(1) : '0.0'
}
if (item2.ZBID == '1111') {
obj.tag2 = item2.TBL ? parseFloat(item2.TBL).toFixed(1) : '0.0'
}
if (item2.ZBID == '1112') {
obj.tag3 = item2.TBL ? parseFloat(item2.TBL).toFixed(1) : '0.0'
}
if (item2.ZBID == '1113') {
obj.tag4 = item2.TBL ? parseFloat(item2.TBL).toFixed(1) : '0.0'
}
} else if (_this.bingNo == 2) {
if (item2.ZBID == '1111') {
obj.tag1 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : '0.0'
obj.tag2 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : '0.0'
obj.tag3 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : '0.0'
obj.tag4 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : '0.0'
// obj.areacode = item2.XZQH ? parseFloat(item2.XZQH).toFixed(1) : 0
}
} else {
if (item2.ZBID == '1112') {
obj.tag1 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : '0.0'
obj.tag2 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : '0.0'
obj.tag3 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : '0.0'
obj.tag4 = item2.ZXZ ? parseFloat(item2.ZXZ).toFixed(1) : '0.0'
// obj.areacode = item2.XZQH ? parseFloat(item2.XZQH).toFixed(1) : 0
}
}
})
_this.tabledata.push(obj)
})
}).catch(err => {
console.log("--慢病监测心脑血管报错--");
})
}
},
mounted() {
this.homeinit()
this.homebot()
// 肿瘤- 左图
const obj1 = setInterval(() => {
const dom = document.getElementById("pag5-left1")
if (dom) {
const myChart1 = this.$echarts.init(dom)
if (this.option1 && typeof this.option1 === "object") {
myChart1.setOption(this.option1, true)
}
clearInterval(obj1)
}
}, 200)
// 肿瘤- 右图
const obj2 = setInterval(() => {
const dom = document.getElementById("pag5-right1")
if (dom) {
const myChart2 = this.$echarts.init(dom)
if (this.option2 && typeof this.option2 === "object") {
myChart2.setOption(this.option2, true)
}
clearInterval(obj2)
}
}, 200)
// 心脑血管 左图
const obj3 = setInterval(() => {
const dom = document.getElementById("pag5-left2")
if (dom) {
const myChart3 = this.$echarts.init(dom)
if (this.option3 && typeof this.option3 === "object") {
myChart3.setOption(this.option3, true)
}
clearInterval(obj3)
}
}, 200)
// 心脑血管 右图
const obj4 = setInterval(() => {
const dom = document.getElementById("pag5-right2")
if (dom) {
const myChart4 = this.$echarts.init(dom)
if (this.option4 && typeof this.option4 === "object") {
myChart4.setOption(this.option4, true)
}
clearInterval(obj4)
}
}, 200)
const obj5 = setInterval(() => {
const dom = document.getElementById("middlebarbox5")
if (dom) {
const myChart5 = this.$echarts.init(dom)
if (this.option5 && typeof this.option5 === "object") {
myChart5.setOption(this.option5, true)
}
clearInterval(obj5)
}
}, 200)
},
components: {
Header
}
}
</script>
<style lang="stylus" scoped>
.card33-mod .pl10{ font-size: 12px;}
.card33-mod .pl10 td{ padding: 0 10px;}
.echarts-square{ height: 10px; width: 14px; display: inline-table;}
.page5left{ width:150px; height:150px }
#middlebarbox5{width:455px;height:280px}
.area >>> .el-input--mini .el-input__inner{padding:0; text-align:center; color: #FFF; border:1px solid #409EFF; background-color: #409EFF;}
.area >>> .el-input--mini .el-input__inner::-webkit-input-placeholder {color: #FFF;}
.area >>> .el-input--mini{ width: 60px; margin-left: 8px;}
.area >>> .el-input__icon.el-icon-date{display:none}
.area >>> .el-input__icon{display:none}
</style>
// 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