提交 cd22c5b5 编写于 作者: 张磊's avatar 张磊

ex echart

上级 b3e11529
{
"env": {
"test": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
}
}
Android >= 4.0
iOS >= 7
\ No newline at end of file
# comment
deploy
node_modules
public
# https://editorconfig.org
root = true
[*]
charset = utf-8 #字符集utf-8
indent_style = space #缩进风格:空格
indent_size = 2 #缩进大小2
end_of_line = lf #换行符lf
insert_final_newline = true #结尾总是插入新的一行
trim_trailing_whitespace = true #行尾允许空格
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
\ No newline at end of file
NODE_ENV=dev
# baseUrl
BASE_URL=/learning-report/
# 路由 base
VUE_APP_BASE_ROUTE_URL=/learning-report
# 默认路由地址
VUE_APP_BASE_ROUTE=/
# 阿里云OSS对象存储地址
VUE_APP_OSS_URL=https://pica-h5-dev.yunqueyi.com/
# 模拟用户信息,如果有则发送模拟用户信息,只针对开发模式
# VUE_APP_MOCK_USER_INFO=eyJhdmF0YXIiOm51bGwsIm1vYmlsZSI6IjE4MTE3MDIzOTE2Iiwibmlja05hbWUiOiIxODEqKioqMzkxNiIsImlkZW50aWZ5U3RhdHVzIjpudWxsLCJ1c2VySWQiOiI2OTIzMDczNDM1ODQ2NjE1MDQiLCJsb2dpbkNoYW5uZWwiOiJtYW5pdWprLWNoYW5uZWwtY29uc3VtZXItYXBwIn0=
# 是否加密
VUE_APP_ENCRYPT=
# 是否开启 vConsole
VUE_APP_CONSOLE=true
# appid
VUE_APP_APPID=ab5cb3c1fd834ca1892cd7b3c6e57717
#生成骨架屏扫描地址(可选择本地)
VUE_APP_SKELETON='http://localhost:8083'
NUXT_ENV_APP=dev
NODE_ENV=production
# 自定义 VUE_APP_ENV
VUE_APP_ENV ='development'
VUE_APP_SERVICE_URL=https://dev-sc.yunqueyi.com
# 阿里云OSS对象存储地址
VUE_APP_OSS_URL=https://pica-h5-dev.yunqueyi.com/
# 模拟用户信息,如果有则发送模拟用户信息,只针对开发模式
VUE_APP_MOCK_USER_INFO=
# 是否加密
VUE_APP_ENCRYPT=
# 是否开启vConsole
VUE_APP_CONSOLE=true
# 是否开启打印 console.log
VUE_APP_HAS_CONSOLE=true
#OSS上传Bucket_Name
VUE_APP_BUCKET_NAME='pica-app-dev'
# appid
VUE_APP_APPID=wxf4e66242d31c81c2
NODE_ENV=dev
VUE_APP_ENV=development
VUE_APP_SERVICE_URL=https://dev-sc.yunqueyi.com
NUXT_ENV_APP=dev
# 模拟用户信息
VUE_APP_MOCK_USER_INFO=eyJhdmF0YXIiOm51bGwsIm1vYmlsZSI6IjE4MTE3MDIzOTE2Iiwibmlja05hbWUiOiIxODEqKioqMzkxNiIsImlkZW50aWZ5U3RhdHVzIjpudWxsLCJ1c2VySWQiOiI2OTIzMDczNDM1ODQ2NjE1MDQiLCJsb2dpbkNoYW5uZWwiOiJtYW5pdWprLWNoYW5uZWwtY29uc3VtZXItYXBwIn0=
VUE_APP_ENCRYPT=
VUE_APP_CONSOLE=true
# 本地开发环境
VUE_APP_IS_LOCAL=true
# appid
VUE_APP_APPID=wxf4e66242d31c81c2
# 本地token
VUE_APP_TOKEN=42789F2675384BFAB05EA57BDBED0E73
# mock的基础地址
VUE_APP_BASE_MOCK_URL=http://192.168.120.69:40001/mock/
# mock的工作空间地址
VUE_APP_MOCK_URL=12/
NODE_ENV=production
# 自定义 VUE_APP_ENV
VUE_APP_ENV ='production'
VUE_APP_SERVICE_URL=https://sc.yunqueyi.com
# 阿里云OSS对象存储地址
VUE_APP_OSS_URL=https://pica-h5.yunqueyi.com/
# 模拟用户信息,如果有则发送模拟用户信息,只针对开发模式
VUE_APP_MOCK_USER_INFO=
# 是否加密
VUE_APP_ENCRYPT=false
# 是否开启 vConsole
VUE_APP_CONSOLE=
# appid
VUE_APP_APPID=wx2c577552a2d28550
# app渠道
VUE_APP_CHANNEL=prod
# OSS 上传 Bucket_Name
VUE_APP_BUCKET_NAME='pica-app-prod'
#arms日志监控脚本
VUE_APP_ARMS=''
NODE_ENV=production
# 自定义 VUE_APP_ENV
VUE_APP_ENV ='testing'
VUE_APP_SERVICE_URL=https://test1-sc.yunqueyi.com
# 阿里云OSS对象存储地址
VUE_APP_OSS_URL=https://pica-h5-test.yunqueyi.com/
# 模拟用户信息,如果有则发送模拟用户信息,只针对开发模式
VUE_APP_MOCK_USER_INFO=
# 是否加密
VUE_APP_ENCRYPT=false
# 是否开启 vConsole
VUE_APP_CONSOLE=true
# 是否开启打印 console.log
VUE_APP_HAS_CONSOLE=true
# appid
VUE_APP_APPID=wxcaad75b7fff5659c
# APP 渠道
VUE_APP_CHANNEL=_test
# OSS上传Bucket_Name
VUE_APP_BUCKET_NAME='pica-app-test'
NODE_ENV=production
# 自定义 VUE_APP_ENV
VUE_APP_ENV ='uat'
VUE_APP_SERVICE_URL=https://uat-sc.yunqueyi.com
# 阿里云OSS对象存储地址
VUE_APP_OSS_URL=https://pica-h5-uat.yunqueyi.com/
# 模拟用户信息,如果有则发送模拟用户信息,只针对开发模式
VUE_APP_MOCK_USER_INFO=
# 是否加密
VUE_APP_ENCRYPT=false
# 是否开启vConsole
VUE_APP_CONSOLE=
# appid
VUE_APP_APPID=wx342ef0e5afee54a7
# OSS 上传 Bucket_Name
VUE_APP_BUCKET_NAME='pica-app-uat'
/h5-submodules-master
/node_modules
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true,
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// 全局变量
globals: {
'gdp': true,
},
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
rules: {
'no-console': 0,
'no-debugger':0,
'comma-spacing': [2, { // 控制逗号前面没有空格,后面必须有空格
'before': false,
'after': true
}],
'arrow-spacing': [2, { // 要求箭头函数前后有空格
'before': true,
'after': true
}],
'no-multi-spaces': 2,// 禁止使用多个空格,
'no-spaced-func': 2,// 禁止 function 标识符和括号之间出现空格,this.getList () 报错
'semi-spacing': [2, {// 强制分号之前不允许有空格
'before': false,
'after': true
}],
'space-infix-ops': 2,// 要求操作符前后必须有空格: 2 + 3 2 === 2 3 > 2
'spaced-comment': [2, 'always'], // 强制在注释中 // 或 /* 使用一致的空格
'array-bracket-spacing': [2, 'never'],// 指定数组的元素之间要以空格隔开(, 后面), never参数:[ 之后和 ] 之前不能带空格,always参数:[ 之后和 ] 之前必须带空格
"space-before-blocks": 2, // if/function等的大括号之前需要有空格
'no-undef-init': 2,// 禁止将变量初始化为 undefined,保存时会将let a = undefined变成let a
'semi': [2, 'always'],//强制结尾必须有分号;
'prefer-const': 2,// 要求使用 const 声明那些声明后不再被修改的变量
'quotes': [2, 'single'],//js中强制使用单引号
'no-multiple-empty-lines': [2, {// 不允许多个空行,最多一行
'max': 1
}],
'vue/order-in-components': ['error', {
'order': [
'el',
'name',
'parent',
'functional',
['delimiters', 'comments'],
['components', 'directives', 'filters'],
'extends',
'mixins',
'inheritAttrs',
'model',
['props', 'propsData'],
'data',
'computed',
'watch',
'LIFECYCLE_HOOKS',
'methods',
['template', 'render'],
'renderError'
]
}],
'vue/attributes-order': ['error', {
'order': [
'DEFINITION',
'LIST_RENDERING',
'CONDITIONALS',
'RENDER_MODIFIERS',
'GLOBAL',
'UNIQUE',
'TWO_WAY_BINDING',
'OTHER_DIRECTIVES',
'OTHER_ATTR',
'EVENTS',
'CONTENT'
]
}],
}
}
# Created by .ignore support plugin (hsz.mobi) .DS_Store
### Node template node_modules
# Logs /dist
logs .history/
*.log # local env files
update_*.sh
package-lock.json
# Log files
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
# Runtime data # Editor directories and files
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# parcel-bundler cache (https://parceljs.org/)
.cache
# next.js build output
.next
# nuxt.js build output
.nuxt
# Nuxt generate
dist
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless
# IDE / Editor
.idea .idea
.editorconfig .vscode
*.suo
# Service worker *.ntvs*
sw.* *.njsproj
*.sln
# Mac OSX *.sw?
.DS_Store
\ No newline at end of file .proxy.js
.version
log/
logs/
# .pica.prompts.js
log
logs
.version
module.exports = {
'autoRouter': false,
'registry': "http://192.168.110.93:4873/",
'type': "h5",
'projectName': "learning-report",
'autoConfig': true,
'transition': false,
'useHistoryRouter': true,
'rewriteHtml': false,
'renderToBranch': false,
'srcAlias': "mn-template",
};
FROM nginx
RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime &&\
echo "Asia/shanghai" > /etc/timezone
COPY error.html /usr/share/nginx/html/error.html
COPY nginx.conf /etc/nginx/nginx.conf
COPY dist/ /usr/vue/learning-report/dist/
RUN chmod -R +rw /usr/share/nginx/html/error.html &&\
chown -R nginx:nginx /usr/share/nginx/html/error.html &&\
chmod -R +rw /usr/vue/learning-report/dist/ &&\
chown -R nginx:nginx /usr/vue/learning-report/dist/
# nuxt-ssr # learning-report
> 请先查看每个目录的 md 文件
> nuxt ssr layout ## 启动
```shell script
npm run start
```
## Build Setup ## 编译打包
```shell script
#开发环境
npm run build:dev
#预发环境
npm run build:pre
#生产环境
npm run build:prod
#测试环境
npm run build:test
```
``` bash ## 插件配置
# install dependencies ```js
$ npm run install module.exports = {
// 插件配置项
pluginOptions: {
// 蛮牛配置
pica: {
// CDN扩展JS资源排序: ['lodash', 'vue', 'vuex']
jsSort: [],
// CDN扩展CSS资源排序: ['vant.css']
cssSort: [],
// 骨架屏渲染的路由(手动配置)
skeletonRoutes: [
{
path: '/demo',
name: 'Demo',
meta: {
skeleton: true
}
},
],
// 启用自动配置骨架屏渲染路由
enableAutoSkeletonRoutes: false,
// 路由模式
routeMode: 'history',
// 骨架屏一次渲染几个路由
dpsLimit: 5,
// dps骨架屏渲染本地服务配置
dpsServer: {}
},
// 图片压缩
tinypng: {
key: ''
},
// 自动路由配置
autoRouting: {
chunkNamePrefix: 'page-'
}
}
};
# serve with hot reload at localhost:3000 ```
$ npm run dev
# build for production and launch server ## dpsServer
# 有环境变量 非本地打包请自行带上ENV => dev, test, uat, prod ### port
$ ENV=上一行的变量 npm run build // eg: ENV=dev npm run build 服务监听端口,默认从8000开始查找可用端口
$ npm run start // 对于 start 命令,可以根据需求自行 更改PORT (有部署冲突的时候会改)
# generate static project // 暂时用不到 ### proxy
$ npm run generate 反向代理中间件配置 @See [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)
``` 如果需要自定义返回:
\ No newline at end of file ```js
{
proxy: {
'^/app-gateway': (req, res, next) => {
res.json({ code: 200, data: {} });
res.end();
}
}
}
```
## 图片压缩
> 需要在`vue.config.js`中配置`pluginOptions.tinypng.key`的值。
```shell script
npm run tinypng
```
## 调用生成器
```shell script
vue invoke pica
```
## 根据 pica.prompts 生成封闭式模板
```shell script
npm run core
```
## 使用骨架屏
> 框架默认已开启骨架屏渲染。请查看`vue.config.js`
### 自动根据路由配置
需要在路由页面文件配置`route`
```json
{
"meta": {
"skeleton": true
}
}
```
如需自定义骨架
```json
{
"meta": {
"skeleton": {
"name": "必须和路由定义的name一致",
"path": "匹配当前路由的正则",
"pathname": "访问路由的path地址,例如: /mn/demo",
"skeletonId": "骨架屏路由ID,唯一即可"
}
}
}
```
## Jenkinsfile 构建
在 Jenkinsfile 文件中 `versionType = 'Patch';`,versionType 默认为 Patch,为小版本更新,1.2.3 对应 Major.Minor.Patch。
```bash
npm run build:test versionType:Patch
```
## 后台API接口反向代理
### 本地
如果`VUE_APP_MOCK_USER_INFO`不为空则走代理到本地。并且会在接口地址前加上`/proxy`.
默认会把`/proxy`的接口代理到`http://localhost:8081。
如需修改,请查看项目根目录的`.proxy.js`文件
### 走网关
如果`VUE_APP_MOCK_USER_INFO`为空则走代理到网关。并且会在接口地址前加上`/proxy/app-gateway`.
会把`/proxy`的接口代理到`VUE_APP_SERVICE_URL`环境变量,如该变量为空则默认为``
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir);
}
module.exports = {
resolve: {
alias: {
'@': resolve('src'),
'mn-template': resolve('node_modules/@pica-cli/vue-cli-plugin-pica-cli-plugin/core/src')
}
}
};
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
'@babel/plugin-proposal-object-rest-spread'
]
};
<!-- 提示信息:报表专用 -->
<template>
<div class="tips-info-wrapper">
<span>{{content}}</span>
</div>
</template>
<script>
export default {
props: {
content: {
type: String,
default: '报表数据来源包括用户参加正式考试,不包含摸底考试'
}
}
}
</script>
<style lang="less" scoped>
.tips-info-wrapper {
height: 44px;
line-height: 44px;
font-size: 20px;
padding: 0 15px;
text-align: center;
span {
display: inline-block;
width: 100%;
font-size: 13px;
font-weight: 400;
color: #676869;
}
}
</style>
\ No newline at end of file
<!-- 提示信息 -->
<template>
<div class="tips-info-wrapper">
<span>{{content}}</span>
</div>
</template>
<script>
export default {
props: {
content: {
type: String,
default: '报表数据来源包括用户参加正式考试,不包含摸底考试'
}
}
}
</script>
<style lang="less" scoped>
.tips-info-wrapper {
height: 44px;
line-height: 44px;
font-size: 20px;
padding: 0 15px;
span {
display: inline-block;
width: 100%;
font-size: 13px;
font-weight: 400;
color: #676869;
border-bottom: 1px solid #F0F1F2;
}
}
</style>
\ No newline at end of file
<!-- Tabs组件 -->
<template>
<div class="common-tabs-wrapper" :class="{'fixed': needFixed}">
<div class="sub-wrapper" :class="{'fixed': needFixed}">
<ul class="common-tabs" id="tabsWrapperId">
<li :id="'tabsItem' + index"
v-show="(item === '总体概况'
|| item === '人群分析'
|| item === '课程分析' && projectInfo.existCourse === 1)
|| (item === '考试分析' && projectInfo.existExam === 1)
|| (item === '学习效果分析' && projectInfo.existEffect === 1)"
v-for="(item, index) in tapList"
:class="{'active': index === cIndex}"
:key="index"
@click="clickTab(index)"
>{{item}}</li>
</ul>
<span class="over"></span>
<span class="border"></span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
cIndex: 0,
tapList: [
"总体概况",
"人群分析",
"课程分析",
"考试分析",
"学习效果分析"
]
};
},
props: {
projectInfo: {
type: Object
},
needFixed: {
type: Boolean,
default: false
}
},
mounted() {},
methods: {
clickTab(index) {
this.cIndex = index;
this.$emit("tabClicked", index);
let tabsItemId = 'tabsItem' + index;
}
}
};
</script>
<style lang="less" scoped>
.common-tabs-wrapper {
.sub-wrapper {
display: flex;
position: relative;
width: 100%;
top: 0;
left: 0;
z-index: 1;
font-size: 13px;
width: 100%;
white-space: nowrap;
&.fixed {
position: fixed;
top: 70px;
width: 100%;
z-index: 1000000000;
background: #fff;
white-space: nowrap;
overflow-x: auto;
}
}
display: flex;
position: relative;
width: 100%;
top: 0;
left: 0;
z-index: 1000000000;
font-size: 13px;
.common-tabs {
width: 100%;
white-space: nowrap;
overflow-x: auto;
padding: 9px 0;
font-size: 13px;
// padding: 5px 0;
li {
display: inline-block;
height: 30px;
line-height: 30px;
font-size: 13px;
font-weight: 700;
margin: 0 6px;
color: #979899;
background: #f0f1f2;
padding: 0 12px;
border-radius: 30px;
&:first-child {
margin-left: 15px;
}
&:last-child {
margin-right: 15px;
}
&.active {
color: #449284;
background: #e3efed;
}
}
margin-top: 0;
}
.over {
display: block;
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
height: 9px;
z-index: 10000000;
background: #fff;
}
.border {
display: block;
width: 100%;
height: 1px;
bottom: 0px;
left: 0;
border-bottom: 1px solid #f0f1f2;
position: absolute;
z-index: 10000000;
}
}
</style>
<!-- 选择地区组件 -->
<template>
<div class="select-wrapper" @touchmove.prevent.stop>
<div class="mask" @click="cancelSelect" @touchmove.prevent.stop>
<div class="address-wrap" @click.stop @touchmove.prevent.stop>
<div class="tip-header">
<span class="cancel-btn" @click="cancelSelect">取消</span>
<h3>选择地区</h3>
<button class="submit-btn" @click="confirm">确定</button>
<!-- <button :disabled="isDisabled" class="submit-btn" @click="confirm">确定</button> -->
</div>
<div class="my-org" v-show="areaList.currentOrgList.length">
<span>我所在机构</span>
<ul >
<li
class="list"
v-for="(provinceItem, index) in areaList.currentOrgList"
:key="index"
:class="{ active: provinceItem.selected }"
@click="provinceSelect(provinceItem, index, true)"
>
<span>{{ provinceItem.label }}</span>
<span v-show="provinceItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
</div>
<div class="address-select">
<ul class="show-address-header">
<li :class="{ active: isShowProvince }" class="item" @click="tabAddressClick(1)">
{{
value.provinceName
? value.provinceName
: '请选择'
}}
</li>
<li
v-show="value.provinceName && value.provinceName != '全部' && rank > 1 && areaList.cityList.length"
:class="{ active: isShowCity }"
class="item"
@click="tabAddressClick(2)"
>{{ value.cityName ? value.cityName : '请选择' }}</li>
<li
v-show="value.cityName && rank > 2 && areaList.countyList.length"
:class="{ active: isShowCounty }"
class="item"
@click="tabAddressClick(3)"
>
{{
value.countyName ? value.countyName : '请选择'
}}
</li>
<li
v-show="value.countyName && rank > 3 && areaList.townList.length"
:class="{ active: isShowTown }"
class="item"
@click="tabAddressClick(4)"
>{{ value.townName ? value.townName : '请选择' }}</li>
<li
v-show="value.townName && rank > 4 && areaList.newOrgList.length"
:class="{ active: isShowOrg }"
class="item"
@click="tabAddressClick(5)"
>{{ value.newOrgName ? value.newOrgName : '请选择' }}</li>
</ul>
<div class="address-content" @touchmove.stop>
<ul v-show="isShowProvince" id="province">
<li
v-for="(provinceItem, index) in areaList.provinceList"
:key="index"
:class="{ active: provinceItem.selected }"
@click="provinceSelect(provinceItem, index)"
>
<span>{{ provinceItem.label }}</span>
<span v-show="provinceItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
<ul v-show="isShowCity" id="city">
<li
v-for="(cityItem, index) in areaList.cityList"
:key="index"
:class="{ active: cityItem.selected }"
@click="citySelect(cityItem, index)"
>
<span>{{ cityItem.label }}</span>
<span v-show="cityItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
<ul v-show="isShowCounty" id="county">
<li
v-for="(countyItem, index) in areaList.countyList"
:key="index"
:class="{ active: countyItem.selected }"
@click="countySelect(countyItem, index)"
>
<span>{{ countyItem.label }}</span>
<span v-show="countyItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
<ul v-show="isShowTown" id="town">
<li
v-for="(townItem, index) in areaList.townList"
:key="index"
:class="{ active: townItem.selected }"
@click="townSelect(townItem, index)"
>
<span>{{ townItem.label }}</span>
<span v-show="townItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
<ul v-show="isShowOrg" id="org">
<li
v-for="(orgItem, index) in areaList.newOrgList"
:key="index"
:class="{ active: orgItem.selected }"
@click="orgSelect(orgItem, index)"
>
<span>{{ orgItem.label }}</span>
<span v-show="orgItem.selected">
<img src="../../assets/images/sort-select-icon.png" />
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { getAreaOrOrgList } from "../../service";
export default {
name: "PicaArea",
data() {
return {
areaList: {
currentOrgList: [],
provinceList: [],
cityList: [],
countyList: [],
townList: [],
newOrgList: []
},
value: {
cityId: "",
cityName: "",
countyId: "",
countyName: "",
provinceId: "",
provinceName: "",
townId: "",
townName: "",
newOrgId: "",
newOrgName: "",
regionId: "",
areaDegree: 0,
},
isDisabled: true,
isShowProvince: true,
isShowCity: false,
isShowCounty: false,
isShowTown: false,
isShowOrg: false,
// 区域选择通用接口参数
queryParams: {
projectId: 374,
regionId: ""
},
currentOrgList: []
};
},
props: {
baseUrl: {
type: String,
default: ""
},
rank: {
type: Number | String,
default: 5
}
},
created() {
if (process.client) {
if (this.$route && this.$route.query) {
let cQuery = this.$route.query;
let hospitalIdList = cQuery.hospitalIdList || "";
this.queryParams.projectId = cQuery.projectId || "";
}
}
},
mounted() {
},
computed: {
...mapGetters({
projectId: "projectId",
provinceList: "provinceList"
})
},
watch: {
projectId(newVal) {
this.queryParams.projectId = newVal;
},
provinceList(newVal) {
newVal[0].selected = true;
this.value.provinceName = newVal[0].label;
this.value.areaDegree = newVal[0].degree;
this.value.regionId = newVal[0].id;
this.value.provinceId = newVal[0].id;
this.queryParams.regionId = newVal[0].id;
this.value.provinceName = newVal[0].label;
// this.areaList.provinceList = newVal;
// this.areaList.provinceList[0].selected = true;
// this.value.provinceName = this.areaList.provinceList[0].label;
// this.value.areaDegree = this.areaList.provinceList[0].degree;
// 包含所在机构
if(newVal[0].containHospitalFlag == 1) {
// this.value.provinceName = newVal[1].label;
// this.value.provinceName = '请选择';
this.areaList.currentOrgList = newVal.slice(0, 1);
this.areaList.provinceList = newVal.slice(1);
} else {
this.areaList.currentOrgList = [];
this.areaList.provinceList = newVal;
}
// this.value.provinceName = "全部";
}
},
methods: {
// 映射Store中的Actions
...mapActions({
setOrgList: "setOrgList",
}),
// 获取省列表
async getProvinceData(params) {
await getAreaOrOrgList(params).then(res => {
if (res.code === "000000") {
this.areaList.provinceList = (res.data && res.data.list) || [];
this.areaList.provinceList.map(a => {
if (a.id == this.value.provinceId) {
a.selected = true;
}
});
}
});
},
// 获取城市列表
async getCityData(params) {
await getAreaOrOrgList(params).then(res => {
if (res.code === "000000") {
this.areaList.cityList = (res.data && res.data.list) || [];
if (this.areaList.cityList.length === 0) {
this.isShowProvince = true;
this.isShowCity = false;
this.isDisabled = false;
}
this.areaList.cityList.map(a => {
if (a.id == this.value.cityId) {
a.selected = true;
}
});
}
});
},
// 获取区/县列表
async getCountyData(params) {
await getAreaOrOrgList(params).then(res => {
if (res.code === "000000") {
this.areaList.countyList = (res.data && res.data.list) || [];
if (this.areaList.countyList.length === 0) {
this.isShowProvince = false;
this.isShowCity = true;
this.isShowCounty = false;
this.isDisabled = false;
}
this.areaList.countyList.map(a => {
if (a.id == this.value.countyId) {
a.selected = true;
}
});
}
});
},
// 获取乡/镇列表
async getTownData(params) {
await getAreaOrOrgList(params).then(res => {
if (res.code === "000000") {
this.areaList.townList = (res.data && res.data.list) || [];
if (this.areaList.townList.length === 0) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = true;
this.isShowTown = false;
this.isDisabled = false;
}
this.areaList.townList.map(a => {
if (a.id == this.value.townId) {
a.selected = true;
}
});
}
});
},
// 获取最后一级的机构列表
async getOrgData(params) {
await getAreaOrOrgList(params).then(res => {
if (res.code === "000000") {
this.areaList.newOrgList = (res.data && res.data.list) || [];
if (this.areaList.newOrgList.length === 0) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
this.isShowTown = true;
this.isShowOrg = false;
this.isDisabled = false;
}
this.areaList.newOrgList.map(a => {
if (a.id == this.value.townId) {
a.selected = true;
}
});
}
});
},
// 选择省份的操作
provinceSelect(item, idx, isCurrent) {
this.value.regionId = item.id;
this.value.provinceId = item.id;
this.queryParams.regionId = item.id;
this.value.provinceName = item.label;
this.value.cityId = null;
this.value.cityName = "";
this.value.countyId = null;
this.value.countyName = "";
this.value.townId = null;
this.value.townName = "";
this.value.newOrgId = null;
this.value.newOrgName = ""
// 当前选中的样式
this.areaList.provinceList.map(a => (a.selected = false));
if(isCurrent) {
this.areaList.currentOrgList.map(a => (a.selected = true));
} else {
this.areaList.currentOrgList.map(a => (a.selected = false));
this.areaList.provinceList[idx].selected = true;
}
// this.areaList.provinceList.map(a => (a.selected = false));
// this.areaList.provinceList[idx].selected = true;
this.value.areaDegree = item.degree;
if (item.degree == 0) {
return;
}
//控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCounty = false;
this.isShowTown = false;
if (this.rank > 1 && item.degree != 5) {
this.isShowCity = true;
this.isDisabled = true;
this.getCityData(this.queryParams);
} else {
this.isShowProvince = true;
this.isShowCity = false;
this.isDisabled = false;
this.areaList.cityList = [];
this.areaList.countyList = [];
this.areaList.townList = [];
this.areaList.newOrgList = [];
}
},
// 选择市的操作
citySelect(item, idx) {
this.value.regionId = item.id;
this.value.cityId = item.id;
this.queryParams.regionId = item.id;
this.value.cityName = item.label;
this.value.countyId = null;
this.value.countyName = "";
this.value.townId = null;
this.value.townName = "";
this.value.newOrgId = null;
this.value.newOrgName = ""
// 当前选中的样式
this.areaList.cityList.map(a => (a.selected = false));
this.areaList.cityList[idx].selected = true;
this.value.areaDegree = item.degree;
if (item.degree == 0) {
return;
}
// 控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCity = false;
this.isShowTown = false;
if (this.rank > 2 && item.degree != 5) {
this.isShowCounty = true;
this.isDisabled = true;
this.getCountyData(this.queryParams);
} else {
this.isShowProvince = false;
this.isShowCity = true;
this.isShowCounty = false;
this.isDisabled = false;
this.areaList.countyList = [];
this.areaList.townList = [];
this.areaList.newOrgList = [];
}
},
// 选择区/县的操作
countySelect(item, idx) {
this.value.regionId = item.id;
this.value.countyId = item.id;
this.queryParams.regionId = item.id;
this.value.countyName = item.label;
this.value.townId = null;
this.value.townName = "";
this.value.newOrgId = null;
this.value.newOrgName = ""
// 当前选中的样式
this.areaList.countyList.map(a => (a.selected = false));
this.areaList.countyList[idx].selected = true;
this.value.areaDegree = item.degree;
if (item.degree == 0) {
return;
}
// 控制省市县乡数据展示与隐藏
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
if (this.rank > 3 && item.degree != 5) {
this.isShowTown = true;
this.isDisabled = true;
this.getTownData(this.queryParams);
} else {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = true;
this.isShowTown = false;
this.isDisabled = false;
this.areaList.townList = [];
this.areaList.newOrgList = [];
}
},
// 选择乡镇的操作
townSelect(item, idx) {
this.value.regionId = item.id;
this.value.townId = item.id;
this.queryParams.regionId = item.id;
this.value.townName = item.label;
this.value.newOrgId = null;
this.value.newOrgName = ""
this.value.areaDegree = item.degree;
if (item.degree == 0) {
return;
}
// 当前选中的样式
this.areaList.townList.map(a => (a.selected = false));
this.areaList.townList[idx].selected = true;
this.isDisabled = false;
if (this.rank > 4 && item.degree != 5) {
this.isShowTown = false;
this.isShowOrg = true;
this.isDisabled = true;
this.getOrgData(this.queryParams);
} else {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
this.isShowTown = true;
this.isDisabled = false;
this.areaList.newOrgList = [];
}
},
// 选择最后一级机构
orgSelect(item, idx) {
this.value.regionId = item.id;
this.value.newOrgId = item.id;
// this.queryParams.regionId = item.id;
this.value.newOrgName = item.label;
this.value.areaDegree = item.degree;
if (item.degree == 0) {
return;
}
// 当前选中的样式
this.areaList.newOrgList.map(a => (a.selected = false));
this.areaList.newOrgList[idx].selected = true;
this.isDisabled = false;
},
tabAddressClick(tab) {
if (tab === 1) {
this.isShowProvince = true;
this.isShowCity = false;
this.isShowCounty = false;
this.isShowTown = false;
this.isShowOrg = false;
} else if (tab === 2) {
this.isShowProvince = false;
this.isShowCity = true;
this.isShowCounty = false;
this.isShowTown = false;
this.isShowOrg = false;
} else if (tab === 3) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = true;
this.isShowTown = false;
this.isShowOrg = false;
} else if (tab === 4) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
this.isShowTown = true;
this.isShowOrg = false;
} else if (tab === 5) {
this.isShowProvince = false;
this.isShowCity = false;
this.isShowCounty = false;
this.isShowTown = false;
this.isShowOrg = true;
}
},
confirm() {
this.$emit("confirm", this.value);
},
cancelSelect() {
this.$emit("cancel", false);
}
}
};
</script>
<style lang="less" scoped>
.select-wrapper {
font-family: PingFangSC-Regular;
.mask {
position: fixed;
z-index: 1000000015;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(55, 56, 57, 0.6);
}
.address-wrap {
position: absolute;
width: 100%;
// height: 353px;
// height: 293px;
background-color: #ffffff;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
z-index: 1000000016;
.tip-header {
position: relative;
height: 58px;
line-height: 58px;
width: 100%;
font-size: 17px;
display: flex;
justify-content: space-between;
padding: 0 15px;
box-sizing: border-box;
.cancel-btn {
color: #999;
}
h3 {
font-size: 18px;
color: #373839;
font-weight: 400;
}
.submit-btn {
font-size: 17px;
outline: none;
border: 1px solid transparent;
background-color: transparent;
color: #449284 !important;
&:disabled {
color: #c7c8c9;
}
}
}
.address-select {
width: 100%;
height: auto;
/*height: 196px;*/
box-sizing: border-box;
.show-address-header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: relative;
padding-bottom: 4px;
margin: 0 7px;
&:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #f0f1f2;
color: #f0f1f2;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.item {
display: inline-block;
font-size: 15px;
line-height: 35px;
height: 35px;
padding: 0 8px;
// padding-right: 15px;
box-sizing: border-box;
max-width: 23%;
min-width: 50px;
text-align: left;
color: #676869;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
// flex: 1 0 auto;
&:last-of-type {
padding-right: 15px;
}
&.active {
color: #373839;
font-family: PingFangSC-Medium;
/*font-weight:500;*/
}
&.active:after {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
right: 0;
width: 10px;
height: 3px;
/*border-radius: 2px;*/
border-radius: 30%;
text-align: center;
background-color: #449284;
transform: translateX(-50%);
}
}
}
.address-content {
position: relative;
width: 100%;
// height: 100%;
height: 196px;
overflow: hidden;
box-sizing: border-box;
ul {
width: 100%;
height: 196px;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 13px;
-webkit-overflow-scrolling: touch;
position: static;
-webkit-transform: translateZ(0px);
li {
height: 35px;
line-height: 35px;
font-size: 15px;
width: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #676869;
cursor: pointer;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
&.active {
color: #449284;
}
img {
width: 10px;
height: 10px;
}
}
}
}
}
}
.my-org {
margin: 0 15px 15px;
& > span {
font-size: 12px;
color: #979899;
}
.list {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 4px;
span {
font-size: 15px;
color: #676869;
}
img {
width: 10px;
}
}
}
}
</style>
\ No newline at end of file
let dpsConfig = require('@pica-core/dps-config');
const externalsDpsConfig = {};
dpsConfig = {
...dpsConfig,
...externalsDpsConfig
};
module.exports = dpsConfig;
module.exports = [
/* {
name: 'payOrder',
url: 'payOrder'
}*/
];
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Error</title>
</head>
<body>
An error occurred on the server when processing the URL. Please contact the system administrator!
</body>
</html>
{"eb52be7e66c51a0984c4071656521581":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/arr-down-gray.png","d6d3c14b51ff6236db89d1a63b99e097":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/arr-down-white.png","cf1d8782d409a91bd21c1ca3d1033df8":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/arr-down.png","26006d17c4f0a1f7175db864fb29a884":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/arr-selected.png","514fb2bb937b9bef5160c1ed8f485a6a":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/arr-up.png","b81fd33e3bbbea474755d4e4eaf86c37":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/kf.png","9cbb287ec70ff079eedaa81b9afa5df1":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/left-array-black.png","86384dec95e51dce91ee681d2560f37b":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/left-arrow-black.png","1cedfe0e695b56a714919102ca2407c2":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/map-icon.png","7f50214c6a8d4452cf0d6d852fe3330f":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/no-content.png","c7395bde31d5fa141771aab25dce2e2c":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/org.png","9cb816774aac05197cab83f037012ad4":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/pub-time.png","4e865f4817ba4a0454d81095e689f86f":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/rank-1.png","fb0762ecc1e19e3ceb111178279ec626":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/rank-2.png","ea862d99ba6b214b086466a7fb8c77db":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/rank-3.png","4a96286e5b4bcdd65f31d2b36dbe9567":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/right-arrow-grey.png","26607cd1e8dc09440c5b14b432641b34":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/sort-select-icon.png","79ce3fe37ce625360ee9a6079f7f209c":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/tips-1.png","d65cd3a583f87a4774fde8e7a79e166a":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/tips-2.png","992acc8f370f9c252116feb06391a198":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/tips-3.png","db55b2e8292837771d9fd85cb0a66c36":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/what-content-1.png","94e55f41716cb13bda15884125000f8f":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/what-content-2.png","49a6ab331d5c7e8288d54aed12ccb51e":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/what-icon-1.png","6f2938a39189562e337e1d8d4260382b":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/what-icon-2.png","313e7ec48a9413b3c9143c6b1b2d022f":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/what-icon-title.png","0f452ea29b01b0f3d758462882c9f298":"/Users/evan/Desktop/pica/pica-learning-report/src/assets/images/what.png"}
\ No newline at end of file
module.exports = {
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/$1',
'^~/(.*)$': '<rootDir>/$1',
'^vue$': 'vue/dist/vue.common.js'
},
moduleFileExtensions: ['js', 'vue', 'json'],
transform: {
'^.+\\.js$': 'babel-jest',
'.*\\.(vue)$': 'vue-jest'
},
'collectCoverage': true,
'collectCoverageFrom': [
'<rootDir>/components/**/*.vue',
'<rootDir>/pages/**/*.vue'
]
}
<template>
<div>
<nuxt />
</div>
</template>
<style>
</style>
worker_processes auto;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#隐藏版本号
server_tokens off;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
gzip on;
client_max_body_size 20m;
server {
listen 80;
server_name_in_redirect off;
server_name *.picahealth.com;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /usr/vue/learning-report/dist/;
# if (-d $request_filename) {
# rewrite ^/(.*)([^/])$ https://$host/learning-report/$1$2/ permanent;
# }
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 404 405 500 502 503 504 /error.html;
location = /error.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
const path = require('path'); const path = require('path');
const axios = require('axios') const axios = require('axios');
const fs = require('fs'); const fs = require('fs');
const projectName=require('./package.json').name const projectName = require('./package.json').name;
const filePath = path.join(__dirname, 'src'); const filePath = path.join(__dirname, 'src');
// 先删除文件 // 先删除文件
function deleOldJson(){ function deleOldJson() {
const json_path = path.join(__dirname, 'src/menu_code.json'); const json_path = path.join(__dirname, 'src/menu_code.json');
try{ try{
fs.unlinkSync(json_path); fs.unlinkSync(json_path);
}catch(err){ }catch(err) {
console.log("没有json 文件") console.log('没有json 文件');
} }
}; }
deleOldJson() deleOldJson();
// 文件夹是不是存在 // 文件夹是不是存在
function isFileExisted(filePath) { function isFileExisted(filePath) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
...@@ -23,39 +22,40 @@ function isFileExisted(filePath) { ...@@ -23,39 +22,40 @@ function isFileExisted(filePath) {
return reject(false); return reject(false);
} else { } else {
return resolve(true); return resolve(true);
} }
}); });
}); });
} }
// 请求接口获取menucode // 请求接口获取menucode
function getMenuCode() { function getMenuCode() {
let url="https://sc.yunqueyi.com/basic-data/menuCode/fetch"; const url = 'https://sc.yunqueyi.com/basic-data/menuCode/fetch';
//let url="https://dev-sc.yunqueyi.com/basic-data/menuCode/fetch"; // let url="https://dev-sc.yunqueyi.com/basic-data/menuCode/fetch";
axios.get(url, {params:{"projectName":projectName}}) console.log(projectName);
axios.get(url, {params:{'projectName':projectName}})
.then(res => { .then(res => {
let resData=res.data; const resData = res.data;
if(resData.code=="000000"){ if(resData.code == '000000') {
if(!resData.data){ if(!resData.data) {
console.log("接口data 数据为空"); console.log('接口data 数据为空');
return return;
} }
console.log(resData.data.menuCodeDtoList);
return writerJsonFile(JSON.stringify(resData.data.menuCodeDtoList)); return writerJsonFile(JSON.stringify(resData.data.menuCodeDtoList));
}else{ }else{
console.log("获取接口失败"); console.log('获取接口失败');
} }
}).catch(error => { }).catch(error => {
console.error('请求menu接口失败error',error); console.error('请求menu接口失败error', error);
}); });
} }
// 写入json 文件 // 写入json 文件
function writerJsonFile(data) { function writerJsonFile(data) {
const wpath = filePath + '/menu_code.json'; const wpath = filePath + '/menu_code.json';
fs.writeFileSync(wpath, data); fs.writeFileSync(wpath, data);
console.log("写入文件成功"); console.log('写入文件成功');
} }
// 创建目录 // 创建目录
function createFiles(filePath) { function createFiles(filePath) {
return new Promise((resolve, reject) => {
fs.mkdir(filePath, function(err) { fs.mkdir(filePath, function(err) {
if(!err) { if(!err) {
getMenuCode(); getMenuCode();
...@@ -63,12 +63,10 @@ function createFiles(filePath) { ...@@ -63,12 +63,10 @@ function createFiles(filePath) {
console.log('创建目录失败'); console.log('创建目录失败');
} }
}); });
});
} }
isFileExisted(filePath).then(res => { isFileExisted(filePath).then(() => {
return getMenuCode(); return getMenuCode();
}).catch(err => { }).catch(() => {
// 没有文件创建文件 // 没有文件创建文件
createFiles(filePath); createFiles(filePath);
}); });
module.exports = {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: '云鹊医-学情报告',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui' },
{ name: 'screen-orientation', content: 'portrait' },
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
{ name: 'format-detection', content: 'telephone=no' },
{ name: 'full-screen', content: 'yes' },
{ name: 'x5-fullscreen', content: 'true' },
{ name: 'x5-fullscreen', content: 'true' },
{ name: 'referrer', content: 'never' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
// { rel: 'stylesheet', href: '/css/common.css' }
],
style: [
{ cssText: `
@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:PingFangSC-Regular,-apple-system-font,Source Han Sans,Helvetica Neue,sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}
`, type: 'text/css' }
],
__dangerouslyDisableSanitizers: ['script'],
script: [
{ innerHTML: `
!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
`, type: 'text/javascript', charset: 'utf-8'}
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
'vant/lib/index.css'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
{
src: '~/plugins/vue-inject',
ssr: false
}
],
/*
** Nuxt.js modules
*/
modules: [],
/*
** Build configuration
*/
router: {
base: '/lreport_ssr/', // 上下文根据自己的需求自行打开修改
// base: '/detection/' 上下文根据自己的需求自行打开修改
extendRoutes(routes, resolve){
if(process.env.NUXT_ENV_APP=="uat"){
var handleAllRouter=require("./src/public_uat_ssr.js");
let base=this.base;
let ObjParms={
routes:routes,
baseUrl:base,
fullHost:"https://phome.yunqueyi.com"
}
handleAllRouter(ObjParms);
}
}
},
build: {
postcss: {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
},
extractCSS: true,
filenames: {
app: ({ isDev }) => isDev ? '[name].js' : '[name].[chunkhash:7].js',
chunk: ({ isDev }) => isDev ? '[name].js' : '[name].[chunkhash:7].js',
css: ({ isDev }) => isDev ? '[name].css' : '[name].[contenthash:7].css',
img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[name].[hash:7].[ext]',
font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[name].[hash:7].[ext]',
video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[name].[hash:7].[ext]'
},
/*
** You can extend webpack config here
*/
extend(config, ctx) {
config.devtool = ['dev', 'test'].indexOf(process.env.NUXT_ENV_APP) !== -1 ? 'source-map' : false;
}
}
}
\ No newline at end of file
/* eslint-disable */
const fs = require('fs');
const path = require('path');
const program = require('commander');
const pathError = path.resolve(process.cwd(), './.error-log')
const ResetPathFile = require('@pica-core/reset-pathfile-plugin');
program
.command('mode <mode>')
.description('备份log日志')
.action(function (mode) {
// 判断.error-log文件是否存在
fs.stat(pathError, (err, stats) => {
// 如果不存在,就正常执行
if (err) {
console.log('正常执行!');
} else {
new ResetPathFile(mode, 1);
}
});
});
program
.command('check <value>')
.description('检查.error-log是否已删除')
.action(function (mode) {
// 判断.error-log文件是否存在
fs.stat(pathError, (err, stats) => {
// 如果不存在,就正常执行
if (err) {
console.log('正常执行!');
} else {
// 如果存在,执行下面的脚本
fs.unlink(pathError, (err) => {
if (err) throw err;
console.log('.error-log文件已被删除');
throw new Error('请联系运维同学去oss服务器手动copy版本控制相关文件');
});
}
});
});
program.parse(process.argv);
因为 它太大了无法显示 源差异 。您可以改为 查看blob
{ {
"name": "learning-report", "name": "learning-report",
"version": "1.0.0", "version": "0.1.0",
"description": "nuxt ssr layout",
"author": "souse",
"private": true, "private": true,
"scripts": { "scripts": {
"test": "jest", "serve": "pica-cli-service serve",
"dev": "cross-env NODE_ENV=development NUXT_ENV_APP=dev HOST=0.0.0.0 PORT=4001 nodemon server/index.js --watch server", "build": "pica-cli-service build",
"build": "NUXT_ENV_APP=${ENV} nuxt build", "lint": "pica-cli-service lint",
"start": "cross-env NUXT_ENV_APP=${ENV} HOST=0.0.0.0 PORT=3100 NODE_ENV=production node server/index.js", "add-all": "pica-cli-service add-all",
"generate": "nuxt generate" "build-skeleton": "pica-cli-service build-skeleton",
"build:dev": "pica-cli-service build --mode dev",
"build:prod": "pica-cli-service build --mode production",
"build:report": "pica-cli-service build --report",
"build:test": "pica-cli-service build --mode testing",
"build:uat": "pica-cli-service build --mode uat",
"core": "pica-cli-service core",
"img-md5": "pica-cli-service img-md5",
"page": "vue-cli-service page",
"skeleton": "pica-cli-service skeleton",
"tinypng": "pica-cli-service tinypng"
}, },
"dependencies": { "dependencies": {
"@pica-core/web-buried-point": "^1.0.19",
"@pica-kit/pica-topic-stencil": "^2.0.5",
"axios": "^0.19.2",
"clipboard": "^2.0.6",
"cookie-universal": "^2.0.16", "cookie-universal": "^2.0.16",
"core-js": "^3.19.3",
"cross-env": "^5.2.0", "cross-env": "^5.2.0",
"echarts": "^4.4.0", "dayjs": "^1.8.30",
"dsbridge": "^3.1.4",
"js-base64": "^2.5.1",
"lodash": "^4.17.15",
"md5": "^2.3.0",
"pica-guide-app": "^1.0.5",
"pica-h5-agreement": "^1.0.13",
"pica-h5-login": "^2.0.1",
"pica-topic-stencil": "2.0.12",
"pre-commit": "^1.2.2",
"vant": "^2.8.4",
"vconsole": "^3.3.4",
"vue": "^2.6.11",
"vue-clipboard2": "^0.3.1",
"vue-fragment": "^1.5.1",
"vue-router": "^3.3.1",
"vuescroll": "^4.15.1",
"vuex": "^3.1.1",
"web-buried-point": "^2.1.0",
"weixin-js-sdk": "^1.6.0",
"koa": "^2.6.2", "koa": "^2.6.2",
"nuxt": "^2.0.0", "nuxt": "^2.0.0",
"v-charts": "^1.19.0", "v-charts": "^1.19.0"
"vant": "^2.2.13",
"web-buried-point": "^2.1.0"
}, },
"devDependencies": { "devDependencies": {
"@nuxtjs/axios": "^5.5.4", "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
"@pica-cli/pica-cli-framework": "^1.0.11",
"@pica-cli/vue-cli-plugin-pica-cli-plugin": "~1.1.52",
"@pica-core/multiple-versions-plugin": "^1.0.4",
"@pica-core/reset-pathfile-plugin": "^1.0.4",
"@pica-core/web-buried-point": "^1.0.20",
"@pica-kit/page-model": "^1.0.5",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"babel-plugin-import": "^1.13.0",
"colors-console": "^1.0.3",
"css-loader": "^6.5.1",
"dotenv": "^8.2.0",
"draw-page-structure": "^1.0.8",
"eslint": "^6.7.2",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^6.2.2",
"fast-install-puppeteer": "^1.0.5",
"husky": "^3.0.9",
"less-loader": "^10.2.0",
"lint-staged": "^9.4.2",
"node-sass": "^4.13.1",
"postcss-px-to-viewport": "^1.1.1",
"prettier": "^2.3.2",
"prettier-eslint-cli": "^5.0.1",
"puppeteer": "^10.1.0",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"vue-skeleton-webpack-plugin": "^1.2.2",
"vue-template-compiler": "^2.6.11",
"webpack-bundle-analyzer": "^4.4.2",
"@vue/test-utils": "^1.0.0-beta.27", "@vue/test-utils": "^1.0.0-beta.27",
"babel-core": "7.0.0-bridge.0", "babel-core": "7.0.0-bridge.0",
"babel-jest": "^24.1.0", "babel-jest": "^24.1.0",
"jest": "^24.1.0", "jest": "^24.1.0",
"less": "^3.9.0", "less": "^3.9.0",
"less-loader": "^5.0.0",
"node-sass": "^4.13.0",
"nodemon": "^1.18.9", "nodemon": "^1.18.9",
"postcss-pxtorem": "^4.0.1", "postcss-pxtorem": "^4.0.1",
"qs": "^6.7.0", "qs": "^6.7.0",
"sass-loader": "^8.0.0",
"scss-loader": "^0.0.1", "scss-loader": "^0.0.1",
"vue-jest": "^3.0.3" "vue-jest": "^3.0.3"
} },
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"husky": {
"hooks": {
"pre-commit": "pica-cli-service img-md5 && lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
],
"src/**/*.{js,vue,html,css,scss,sass}": [
"prettier-eslint --write",
"git add"
]
},
"pica-cli-service": {}
} }
import Vue from 'vue'
import rocNative from '@/utils/jsbridge'
import echarts from 'echarts'
import { Toast } from 'vant';
import { BASE_URL } from '@/utils/enumerate';
import WebBuriedPoint, { sendBuriedData } from 'web-buried-point';
const { NUXT_ENV_APP } = process.env;
// Vue.use(WebBuriedPoint, {
// // component_tag: `467`,
// class_name: `learning_report`,
// url: `${BASE_URL[NUXT_ENV_APP]}/file/log/trace1`
// });
Vue.prototype.$sendBuriedData = sendBuriedData;
Vue.use(Toast);
// // "vconsole": "^3.3.4"
// import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
// new VConsole() // 初始化
Vue.prototype.$echarts = echarts
Vue.prototype.$rocNative = new rocNative();
\ No newline at end of file
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
viewportWidth: 375, // 视口的宽度,对应的时设计稿的宽度/2,一般为750
viewportHeight: 667, // 视口的高度,对应的是设计稿的高度(也可以不配置)
unitPrecision: 5, // 指定‘px’转换为视口单位值的小数位数(很多时候无法整除)
viewportUnit: 'vw', // 指定需要转换成的视口单位,建议使用vw
selectorBlankList: ['ignore', 'tab-bar'],
minPixelValue: 1,
mediaQuery: false,
exclude:[/Tabbar/]
}
}
};
## 增加骨架屏占位 Dom #skeleton
```html
<div id="skeleton"></div>
<div id="app"></div>
```
## 初始化时间记录
```js
(function (window) {
var dsBridge = window.dsBridge;
function logToLocaleString(method) {
var date = new Date();
console.log(date.toLocaleString() + ':' + date.getMilliseconds(), method);
}
window.onNativeLCEvent = logToLocaleString;
window.onload = function () {
dsBridge && dsBridge.call && dsBridge.call('onLCEvent', 'onload');
logToLocaleString('onload');
}
document.addEventListener('DOMContentLoaded', function () {
dsBridge && dsBridge.call && dsBridge.call('onLCEvent', 'DOMContentLoaded');
logToLocaleString('DOMContentLoaded');
});
document.addEventListener('readystatechange', function () {
if (document.readyState == 'interactive') {
dsBridge && dsBridge.call && dsBridge.call('onLCEvent', 'interactive');
logToLocaleString('interactive');
}
if (document.readyState == 'complete') {
dsBridge && dsBridge.call && dsBridge.call('onLCEvent', 'complete');
dsBridge && dsBridge.call && dsBridge.call('forceHideLoading');
logToLocaleString('complete');
}
})
}(window));
```
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="<%= VUE_APP_OSS_URL %>static/js/vue-2.6.11.js"></script>
<script src="<%= VUE_APP_OSS_URL %>static/js/vuex-3.4.0.js"></script>
<script src="<%= VUE_APP_OSS_URL %>static/js/vue-router-3.3.2.js"></script>
<script src="<%= VUE_APP_OSS_URL %>static/js/vant.min-2.12.26.js"></script>
<script src="<%= VUE_APP_OSS_URL %>static/js/axios-0.19.0.js"></script>
<script src="<%= VUE_APP_OSS_URL %>static/js/jsencrypt.min-3.0.0.js"></script>
<script src="<%= VUE_APP_OSS_URL %>static/js/crypto.min-4.0.0.js"></script>
<script src="<%= VUE_APP_OSS_URL %>static/js/vconsole-3.3.4.js"></script>
<script src="<%= VUE_APP_OSS_URL %>static/js/lodash-4.17.15.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts.min.js"></script>
</body>
</html>
const Koa = require('koa')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = new Koa()
// Import and Set Nuxt.js options
const config = require('../nuxt.config.js')
config.dev = !(app.env === 'production')
async function start() {
// Instantiate nuxt.js
const nuxt = new Nuxt(config)
const {
host = process.env.HOST || '10.177.11.247' || '127.0.0.1',
port = process.env.PORT || 3000
} = nuxt.options.server
// Build in development
if (config.dev) {
const builder = new Builder(nuxt)
await builder.build()
} else {
await nuxt.ready()
}
app.use((ctx) => {
ctx.status = 200
ctx.respond = false // Bypass Koa's built-in response handling
ctx.req.ctx = ctx // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash
nuxt.render(ctx.req, ctx.res)
})
app.listen(port, host)
consola.ready({
message: `Server listening on http://${host}:${port}`,
badge: true
})
}
start()
import Axios from 'axios';
import { Toast } from 'vant';
import { API_CONFIG, REPONSE_CODE } from '@/utils/enumerate';
const { VUE_ENV } = process.env; // server or client
const cookies = require('cookie-universal')();
// const baseUrl = localStorage.getItem('baseUrl');
// const instance = axios.create({
// baseURL: baseUrl,
// timeout: 30000,
// });
Axios.interceptors.request.use(
config => {
// 0. Do something before request is sent
// 1. can be add loading
// 2. make sure if need token
const method = config.method.toLocaleLowerCase();
if (method === 'post' || method === 'put' || method === 'delete') {}
if (config.withCredentials) {
// config.headers.token = '3EB9111164E84A45B5B00428D52BC966';
config.headers.token = cookies.get('lreporttoken') || '568E9A4C115F47649BDA1B0B70D4B4F9';
}
// config.timeout = 30000;
return config;
},
error => {
// when set loading close it
if (
error.code === 'ECONNABORTED' &&
error.message.indexOf('timeout') !== -1
) {
VUE_ENV === 'client' && Toast({ message: '系统繁忙,请稍后重新进入页面查询', duration: 1000 });
// VUE_ENV === 'client' && Toast({ message: '请求超时', duration: 1000 });
}
return Promise.reject(error);
}
)
export default function(options) {
if (typeof options !== 'object') {
throw new Error('make sure the params options is an Object...');
}
const cf = JSON.parse(JSON.stringify(API_CONFIG));
options = Object.assign(cf, options); // 合并 config
return new Promise((resolve, reject) => {
Axios(options)
.then(res => {
const { status, data } = res;
if (status !== 200) {
let cmsg = REPONSE_CODE[status];
let message = cmsg !== undefined ? cmsg : '系统异常。';
throw Error(message);
}
if (!data) throw Error('axios reponse data in not defined.');
if (data.code != '000000') {
// 如果要是有其他特殊需求在此处添加
console.log(`调用后台接口报错,CODE: ${data.code},MESSAGE: ${data.message}。`);
// console.log(`调用后台接口报错,CODE: ${data.code},MESSAGE: ${data.message}。`);
}
resolve(res.data);
})
.catch(error => {
VUE_ENV === 'client' && Toast({ message: '系统繁忙,请稍后重新进入页面查询', duration: 1000 });
// VUE_ENV === 'client' && Toast({ message: error.message, duration: 1000 });
// reject(error);
})
})
}
\ No newline at end of file
该目录建议放置所有请求资源代码,可根据业务划分与不同子目录。
import $http from 'mn-template/plugins/http';
// 获取亲友列表
export const listRelatives = () =>
$http({
method: 'get',
url: '/splitter/live/v2/list',
params: {
version: '3.2.1',
},
});
export const getWidgetList = async ({ id, token }) =>
$http({
method: 'get',
url: `/contents/template/${id}/widgetList?token=${token}&setEntry=true`,
});
export const getWidgetListTab = async ({ id }) =>
$http({
method: 'get',
url: `/contents/template/element/${id}/widgetList`,
});
export const selectAppModuleParam = async ({ id, token }) =>
$http({
method: 'get',
url: `/contents/contentAppModule/selectAppModuleParam?id=${id}&token=${token}&setEntry=true`,
withCredentials: true,
});
// 任务列表查询
export const getActivityDesc = async (data) =>
$http({
method: 'get',
url: `/campaign/admin/task/h5/activityInfo?id=${data.id}&token=${data.token}&setEntry=true`,
headers: {
token: data.token,
},
// withCredentials: true
});
// 新的任务列表查询
export const getNewActivityDesc = async (data) =>
$http({
method: 'get',
url: `/campaign/tims/timsActivityInfo?activityId=${data.id}&token=${
data.token
}&setEntry=true&random=${Math.random()}`,
headers: {
token: data.token,
},
});
export const checkQualification = async ({ token, role, rosterId }) =>
$http({
method: 'get',
url: `contents/template/checkQualification?token=${token}&setEntry=true&role=${role}&rosterId=${rosterId}`,
withCredentials: true,
});
export const checkToken = async (token) =>
$http({
method: 'get',
url: `campaign/admin/task/checkToken?token=${token}`,
withCredentials: true,
});
export const logPut = async (data) =>
$http({
method: 'PUT',
data: data,
url: 'log/',
});
export const getRole = async ({ token }) =>
$http({
method: 'get',
url: `/contents/template/getRole?token=${token}`,
headers: {
token,
},
// withCredentials: true
});
export const sayHello = async ({ token }) =>
$http({
method: 'POST',
// withCredentials: true,
headers: {
token,
},
data: {
token,
},
url: '/diplomat/oauth/sayhello?app_id=pica-crrs',
});
export const getAmountApi = async ({ a, b, c, d }) => {
// a:url b:get or post c:params
if (b == 'get') {
const param = JSON.parse(c);
let str, key;
for (key in param) {
str = str + key + '=' + param[key] + '&';
}
str = str.slice(0, str.length - 1);
return $http({
url: a + '?' + str,
});
} else if (b == 'post') {
return $http({
method: 'POST',
headers: {
token: d,
},
data: JSON.parse(c),
url: a,
});
}
};
export const checkHasAgreementApi = async ({ token }) =>
$http({
url: 'smartcontract/protocol/sign/check?type=3', // 3为云鹊医隐私协议
headers: {
token,
},
});
// 查看直播状态
export const checkLiveStatus = async (resourceId) =>
$http({
url: `campaign/subscribe/liveStatus?liveId=${resourceId}`,
});
// 查看doctorId
export const getDoctorId = async (token) =>
$http({
url: 'campaign/subscribe/getId',
headers: {
token,
},
});
// 校验预约和分享完成状态以及直播状态
export const checkFinishStatus = async (data) =>
$http({
// alert('token'+data.token)
// url: `/campaign/admin/tims/checkFinishStatus?type=${type}&resourcesId=${resourcesId}&doctorId=${doctorId}&setEntry=true`,
url: '/campaign/subscribe/checkFinishStatus',
method: 'POST',
headers: {
token: data.token,
},
data: {
type: data.type,
resourcesId: data.resourcesId,
doctorId: data.doctorId,
},
});
// 预约
export const getSubscribe = async (data) =>
$http({
// url: `/campaign/admin/tims/checkFinishStatus?type=${type}&resourcesId=${resourcesId}&doctorId=${doctorId}&setEntry=true`,
url: '/campaign/subscribe/',
method: 'POST',
headers: {
token: data.token,
},
data: {
type: data.type,
resourcesId: data.resourcesId,
doctorId: data.doctorId,
shareDoctorId: data.shareDoctorId,
subscribeUrl: data.subscribeUrl,
},
});
// 分享
export const getSubscribeShare = async (data) =>
$http({
url: '/campaign/subscribe/share',
method: 'POST',
headers: {
token: data.token,
},
data: {
type: data.type,
resourcesId: data.resourcesId,
doctorId: data.doctorId,
},
});
// 获取打卡状态 参数 activityId 活动id ,id 任务id
export const getClockStatus = (params) =>
$http({
url: `/campaign/clock/v1/${params.activityId}/status/${params.id}`,
method: 'get',
withCredentials: true,
});
// 去打卡 参数 activityId 活动id ,id 任务id
export const goToUpdateClock = (params) =>
$http({
url: 'campaign/clock/clock',
method: 'post',
data: params,
withCredentials: true,
});
// 获取doctorId
export const getDoctorIdObtain = async () =>
$http({
url: '/campaign/second-award/doctorId',
method: 'get',
withCredentials: true,
});
// 记录分享行为
export const recordShareAction = (params) =>
$http({
url: '/contents/template/share-log',
method: 'post',
data: params,
withCredentials: true,
});
// 根据邀请组件id返回口令
export const getCommand = async (params) =>
$http({
url: '/contents/template/invite-token',
method: 'get',
params: params,
withCredentials: false,
});
// 根据商品id批量查询商品信息
export const getGoodsDetailListByIds = async (ids) =>
$http({
url: 'store/medications/queryGoodsDetailListByIds',
method: 'post',
data: ids,
withCredentials: true,
});
// 获取和药代相关的积木id列表
export const getTemplateList = async (params) =>
$http({
url: '/broker/templateList',
method: 'get',
params: params,
withCredentials: false,
});
// 校验是否为药代身份并返回加密医生id
export const checkBroker = async (templateId) =>
$http({
url: `/broker/checkBroker?templateId=${templateId}`,
method: 'get',
withCredentials: true,
});
...@@ -2,225 +2,233 @@ ...@@ -2,225 +2,233 @@
<template> <template>
<div> <div>
<div class="chart-column-vtc"> <div class="chart-column-vtc">
<div v-show="isShow" :id="id" :style="{width: chartWidth, height: chartHeight}"></div> <div
<NoContent v-show="!isShow" :id="id" :style="{width: '100%', height: '220px'}"></NoContent> v-show="isShow"
:id="id"
:style="{ width: chartWidth, height: chartHeight }"
/>
<NoContent
v-show="!isShow"
:id="id"
:style="{ width: '100%', height: '220px' }"
/>
</div> </div>
<CommonNoMore v-show="isShow && dataList.length >= 10"></CommonNoMore> <CommonNoMore v-show="isShow && dataList.length >= 10" />
</div> </div>
</template> </template>
<script> <script>
let vm = null; let vm = null;
import CommonNoMore from "@/components/common/common-no-more"; import CommonNoMore from '@/components/common/common-no-more';
import NoContent from "@/components/bussiness/no-content"; import NoContent from '@/components/bussiness/no-content';
export default { export default {
components: { components: {
CommonNoMore, CommonNoMore,
NoContent NoContent,
}, },
props: { props: {
id: { id: {
type: String, type: String,
default: "chartColumnTCId" default: 'chartColumnTCId',
}, },
colors: { colors: {
type: Array, type: Array,
default: () => [ default: () => [
"#FFB01B", '#FFB01B',
"#39AF9A", '#39AF9A',
"#5D7092", '#5D7092',
"#FF9A4B", '#FF9A4B',
"#abb7bb", '#abb7bb',
"#76d2d2" '#76d2d2',
] ],
}, },
dataList: { dataList: {
type: Array, type: Array,
default: () => [] default: () => [],
} },
}, },
data() { data() {
return { return {
chartWidth: "100%", chartWidth: '100%',
chartHeight: "200px", chartHeight: '200px',
isShow: true isShow: true,
}; };
}, },
watch: { watch: {
dataList: { dataList: {
handler(newVal) { handler(newVal) {
if(newVal.length) { if (newVal.length) {
this.isShow = true; this.isShow = true;
let yAxisData = [], let yAxisData = [],
series0Data = [], series0Data = [],
series1Data = []; series1Data = [];
yAxisData = newVal.map(item => { yAxisData = newVal.map((item) => {
return this.shortName(item.classifyName) return this.shortName(item.classifyName);
}); });
series0Data = this.dataList.map(item => { series0Data = this.dataList.map((item) => {
return ((item.beforeRate || 0) * 100).toFixed(1); return ((item.beforeRate || 0) * 100).toFixed(1);
}); });
series1Data = this.dataList.map(item => { series1Data = this.dataList.map((item) => {
return ((item.afterRate || 0) * 100).toFixed(1); return ((item.afterRate || 0) * 100).toFixed(1);
}); });
if (process.client) { if (process.client) {
let clientWidth = const clientWidth =
window.outerWidth || window.outerWidth ||
document.body.clientWidth || document.body.clientWidth ||
document.documentElement.clientWidth; document.documentElement.clientWidth;
this.chartWidth = clientWidth + "px"; this.chartWidth = clientWidth + 'px';
this.chartHeight = 53 * this.dataList.length + "px"; this.chartHeight = 53 * this.dataList.length + 'px';
this.drawColumn(yAxisData, series0Data, series1Data); this.drawColumn(yAxisData, series0Data, series1Data);
} }
} else { } else {
this.isShow = false; this.isShow = false;
} }
}, },
deep: true deep: true,
} },
}, },
created() { created() {},
},
mounted() { mounted() {
vm = this; vm = this;
}, },
methods: { methods: {
// 绘制图表 // 绘制图表
drawColumn(yAxisData, series0Data, series1Data) { drawColumn(yAxisData, series0Data, series1Data) {
let chartColumn = this.$echarts.init(document.getElementById(this.id)); const chartColumn = this.$echarts.init(document.getElementById(this.id));
let options = { const options = {
color: vm.colors || [], color: vm.colors || [],
tooltip: { tooltip: {
trigger: "axis", trigger: 'axis',
axisPointer: { axisPointer: {
type: "shadow" type: 'shadow',
}, },
formatter: "{b}<br/>{a0}{c0}%<br/>{a1}{c1}%" formatter: '{b}<br/>{a0}{c0}%<br/>{a1}{c1}%',
}, },
legend: { legend: {
show: false, show: false,
top: 20, top: 20,
data: ["培训前正确率", "培训后正确率"], data: ['培训前正确率', '培训后正确率'],
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
// fontWeight: "bolder", // fontWeight: "bolder",
color: "#676869" color: '#676869',
} },
}, },
grid: { grid: {
top: "3%", top: '3%',
left: "5%", left: '5%',
right: "5%", right: '5%',
bottom: "3%", bottom: '3%',
containLabel: true, containLabel: true,
borderWidth: 0 borderWidth: 0,
}, },
lineStyle: { lineStyle: {
color: "#fff" color: '#fff',
}, },
xAxis: { xAxis: {
axisTick: false, axisTick: false,
type: "value", type: 'value',
minInterval: 1, minInterval: 1,
axisLabel: { axisLabel: {
show: false, show: false,
formatter: "{value}", formatter: '{value}',
textStyle: { textStyle: {
color: "#676869" color: '#676869',
} },
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#676869", color: '#676869',
width: 0 width: 0,
} },
}, },
splitLine: { splitLine: {
show: false show: false,
} },
}, },
yAxis: { yAxis: {
axisTick: false, axisTick: false,
type: "category", type: 'category',
data: yAxisData, data: yAxisData,
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#676869" color: '#676869',
}, },
splitLine: { splitLine: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
formatter: "{value}", formatter: '{value}',
textAlign: "left", textAlign: 'left',
textStyle: { textStyle: {
textAlign: "left", textAlign: 'left',
color: "#676869" color: '#676869',
} },
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#676869", color: '#676869',
width: 0 width: 0,
} },
}, },
}, },
series: [ series: [
{ {
name: "培训前正确率", name: '培训前正确率',
data: series0Data, data: series0Data,
// data: [12, 200, 150, 80, 70, 110, 130, 130], // data: [12, 200, 150, 80, 70, 110, 130, 130],
type: "bar", type: 'bar',
barWidth: 15, //柱图宽度 barWidth: 15, // 柱图宽度
label: { label: {
normal: { normal: {
align: 'left', align: 'left',
formatter: "{c}%", formatter: '{c}%',
show: true, show: true,
position: "inside" position: 'inside',
} },
} },
}, },
{ {
name: "培训后正确率", name: '培训后正确率',
data: series1Data, data: series1Data,
// data: [120, 20, 160, 80, 70, 110, 130, 130], // data: [120, 20, 160, 80, 70, 110, 130, 130],
type: "bar", type: 'bar',
barWidth: 15, //柱图宽度 barWidth: 15, // 柱图宽度
label: { label: {
normal: { normal: {
align: 'left', align: 'left',
formatter: "{c}%", formatter: '{c}%',
show: true, show: true,
position: "inside" position: 'inside',
} },
} },
} },
] ],
}; };
chartColumn.setOption(options); chartColumn.setOption(options);
let autoHeight = this.dataList.length * 53; // counst.length为柱状图的条数,即数据长度。35为我给每个柱状图的高度,50为柱状图x轴内容的高度(大概的)。 const autoHeight = this.dataList.length * 53; // counst.length为柱状图的条数,即数据长度。35为我给每个柱状图的高度,50为柱状图x轴内容的高度(大概的)。
chartColumn.getDom().style.height = autoHeight + "px"; chartColumn.getDom().style.height = autoHeight + 'px';
chartColumn.getDom().childNodes[0].style.height = autoHeight + "px"; chartColumn.getDom().childNodes[0].style.height = autoHeight + 'px';
chartColumn.getDom().childNodes[0].childNodes[0].setAttribute("height",autoHeight); chartColumn
chartColumn.getDom().childNodes[0].childNodes[0].style.height = autoHeight + "px"; .getDom()
chartColumn.resize(); .childNodes[0].childNodes[0].setAttribute('height', autoHeight);
chartColumn.getDom().childNodes[0].childNodes[0].style.height =
autoHeight + 'px';
chartColumn.resize();
}, },
shortName: function (value, length = 5, append = '...') { shortName: function (value, length = 5, append = '...') {
if (value && value.length > length) { if (value && value.length > length) {
return value.substring(0, length) + append return value.substring(0, length) + append;
} else { } else {
return value return value;
} }
}, },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.chart-column-vtc { .chart-column-vtc {
font-size: 14px; font-size: 14px;
} }
......
...@@ -2,38 +2,45 @@ ...@@ -2,38 +2,45 @@
<template> <template>
<div> <div>
<div class="chart-column-htc"> <div class="chart-column-htc">
<div v-show="isShow" :id="id" :style="{width: chartWidth, height: chartHeight}"></div> <div
<NoContent v-show="!isShow" :id="id" :style="{width: '100%', height: '220px'}"></NoContent> v-show="isShow"
:id="id"
:style="{ width: chartWidth, height: chartHeight }"
/>
<NoContent
v-show="!isShow"
:id="id"
:style="{ width: '100%', height: '220px' }"
/>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { format } from "path"; import NoContent from '@/components/bussiness/no-content';
import NoContent from "@/components/bussiness/no-content";
let vm = null, let vm = null,
chartColumn = null; chartColumn = null;
export default { export default {
components: { components: {
NoContent NoContent,
}, },
props: { props: {
dataList: { dataList: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
id: { id: {
type: String, type: String,
default: "chartColumnTCId" default: 'chartColumnTCId',
}, },
colors: { colors: {
type: Array, type: Array,
default: () => ["#FFB01B", "#39AF9A", "#5D7092", "#FF9A4B"] default: () => ['#FFB01B', '#39AF9A', '#5D7092', '#FF9A4B'],
} },
}, },
data() { data() {
return { return {
chartWidth: "300px", chartWidth: '300px',
chartHeight: "350px", chartHeight: '350px',
isShow: true, isShow: true,
}; };
}, },
...@@ -41,18 +48,18 @@ export default { ...@@ -41,18 +48,18 @@ export default {
watch: { watch: {
dataList: { dataList: {
handler(newVal) { handler(newVal) {
if(newVal.length) { if (newVal.length) {
this.isShow = true; this.isShow = true;
let yAxisData = [], let yAxisData = [],
series0Data = [], series0Data = [],
series1Data = []; series1Data = [];
yAxisData = newVal.map(item => { yAxisData = newVal.map((item) => {
return this.shortName(item.classifyName); return this.shortName(item.classifyName);
}); });
series0Data = this.dataList.map(item => { series0Data = this.dataList.map((item) => {
return ((item.beforeRate || 0) * 100).toFixed(1); return ((item.beforeRate || 0) * 100).toFixed(1);
}); });
series1Data = this.dataList.map(item => { series1Data = this.dataList.map((item) => {
return ((item.afterRate || 0) * 100).toFixed(1); return ((item.afterRate || 0) * 100).toFixed(1);
}); });
this.drawColumn( this.drawColumn(
...@@ -64,17 +71,17 @@ export default { ...@@ -64,17 +71,17 @@ export default {
this.isShow = false; this.isShow = false;
} }
}, },
deep: false deep: false,
} },
}, },
created() { created() {
if (process.client) { if (process.client) {
let clientWidth = const clientWidth =
window.outerWidth || window.outerWidth ||
document.body.clientWidth || document.body.clientWidth ||
document.documentElement.clientWidth; document.documentElement.clientWidth;
this.chartWidth = (clientWidth * 0.9).toFixed(1) + "px"; this.chartWidth = (clientWidth * 0.9).toFixed(1) + 'px';
} }
}, },
...@@ -86,128 +93,128 @@ export default { ...@@ -86,128 +93,128 @@ export default {
// 绘制图表 // 绘制图表
drawColumn(yAxisData, series0Data, series1Data) { drawColumn(yAxisData, series0Data, series1Data) {
chartColumn = this.$echarts.init(document.getElementById(this.id)); chartColumn = this.$echarts.init(document.getElementById(this.id));
let options = { const options = {
color: vm.colors, color: vm.colors,
tooltip: { tooltip: {
trigger: "axis", trigger: 'axis',
axisPointer: { axisPointer: {
type: "shadow" type: 'shadow',
}, },
formatter: "{b}<br/>{a0}{c0}%<br/>{a1}{c1}%" formatter: '{b}<br/>{a0}{c0}%<br/>{a1}{c1}%',
}, },
legend: { legend: {
top: 20, top: 20,
data: ["培训前正确率", "培训后正确率"], data: ['培训前正确率', '培训后正确率'],
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#676869" color: '#676869',
} },
}, },
grid: { grid: {
left: "3%", left: '3%',
right: "6%", right: '6%',
bottom: "6%", bottom: '6%',
containLabel: true containLabel: true,
}, },
lineStyle: { lineStyle: {
color: "#676869" color: '#676869',
}, },
xAxis: { xAxis: {
max: 100, max: 100,
axisTick: false, axisTick: false,
type: "value", type: 'value',
minInterval: 1, minInterval: 1,
axisLabel: { axisLabel: {
formatter: "{value}%", formatter: '{value}%',
textStyle: { textStyle: {
color: "#676869" color: '#676869',
} },
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#efefef", color: '#efefef',
width: 1 width: 1,
} },
}, },
//设置网格线颜色 // 设置网格线颜色
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: ["#efefef"], color: ['#efefef'],
width: 1, width: 1,
type: "solid" type: 'solid',
} },
} },
}, },
yAxis: { yAxis: {
axisTick: false, axisTick: false,
type: "category", type: 'category',
data: yAxisData, data: yAxisData,
// data: ["生活方\n式干预", "生活方\n式", "本科", "大专", "中专以下"], // data: ["生活方\n式干预", "生活方\n式", "本科", "大专", "中专以下"],
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#676869" color: '#676869',
}, },
axisLabel: { axisLabel: {
formatter: "{value}", formatter: '{value}',
textAlign: "left", textAlign: 'left',
textStyle: { textStyle: {
textAlign: "left", textAlign: 'left',
color: "#676869" color: '#676869',
} },
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#efefef", color: '#efefef',
width: 1 width: 1,
} },
} },
}, },
series: [ series: [
{ {
name: "培训前正确率", name: '培训前正确率',
data: series0Data, data: series0Data,
// data: [12, 200, 150, 80, 70, 110, 130], // data: [12, 200, 150, 80, 70, 110, 130],
type: "bar", type: 'bar',
barWidth: 15, //柱图宽度 barWidth: 15, // 柱图宽度
label: { label: {
normal: { normal: {
formatter: "{c}%", formatter: '{c}%',
show: false, show: false,
position: "inside" position: 'inside',
} },
} },
}, },
{ {
name: "培训后正确率", name: '培训后正确率',
data: series1Data, data: series1Data,
// data: [120, 20, 160, 80, 70, 110, 130], // data: [120, 20, 160, 80, 70, 110, 130],
type: "bar", type: 'bar',
barWidth: 15, //柱图宽度 barWidth: 15, // 柱图宽度
label: { label: {
normal: { normal: {
formatter: "{c}%", formatter: '{c}%',
show: false, show: false,
position: "inside" position: 'inside',
} },
} },
} },
] ],
}; };
chartColumn.setOption(options); chartColumn.setOption(options);
}, },
shortName: function(value, length = 5, append = "...") { shortName: function (value, length = 5, append = '...') {
if (value && value.length > length) { if (value && value.length > length) {
return value.substring(0, length) + append; return value.substring(0, length) + append;
} else { } else {
return value; return value;
} }
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.chart-column-htc { .chart-column-htc {
position: relative; position: relative;
top: -6px; top: -6px;
......
<!-- 柱状图-横向 --> <!-- 柱状图-横向 -->
<template> <template>
<div class="chart-pie"> <div class="chart-pie">
<div v-show="isShow" :id="id" :style="{width: chartWidth, height: chartHeight}"></div> <div
<NoContent v-show="!isShow" :id="id" :style="{width: '100%', height: '220px'}"></NoContent> v-show="isShow"
:id="id"
:style="{ width: chartWidth, height: chartHeight }"
/>
<NoContent
v-show="!isShow"
:id="id"
:style="{ width: '100%', height: '220px' }"
/>
</div> </div>
</template> </template>
<script> <script>
import { format } from "path"; import NoContent from '@/components/bussiness/no-content';
import NoContent from "@/components/bussiness/no-content";
let vm = null; let vm = null;
let certNameConfig = { const certNameConfig = {
'-1': '未获证人数', '-1': '未获证人数',
'1': '获优秀人数', 1: '获优秀人数',
'2': '获良好人数', 2: '获良好人数',
'3': '获及格人数', 3: '获及格人数',
'4': '获不及格人数', 4: '获不及格人数',
} };
export default { export default {
components: { components: {
NoContent NoContent,
}, },
props: { props: {
id: { id: {
type: String, type: String,
default: "chartColumnId" default: 'chartColumnId',
}, },
chartWidth: { chartWidth: {
type: String, type: String,
default: "100%" default: '100%',
}, },
chartHeight: { chartHeight: {
type: String, type: String,
default: "320px" default: '320px',
}, },
echartsData: { echartsData: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
certFlag: { certFlag: {
type: String | Number, type: Number,
default: 1 default: 1,
} },
}, },
data() { data() {
return { return {
legendData: [], legendData: [],
yAxisData: [], yAxisData: [],
seriesData: [], seriesData: [],
isShow: true isShow: true,
}; };
}, },
mounted() {
vm = this;
},
watch: { watch: {
echartsData: { echartsData: {
handler(newVal, oldValue) { handler(newVal) {
if(newVal.length) { if (newVal.length) {
this.isShow = true; this.isShow = true;
vm.legendData = []; vm.legendData = [];
vm.yAxisData = []; vm.yAxisData = [];
vm.seriesData = []; vm.seriesData = [];
let cData, certList, certLength = 0, certData = [], certId = 0, certName = '其它'; let cData,
certList,
certLength = 0,
certData = [];
// 将所有证书名称进行修改 // 将所有证书名称进行修改
for(let i = 0; i < newVal.length; i ++) { for (let i = 0; i < newVal.length; i++) {
for(let j = 0; j < newVal[i].certList.length; j ++) { for (let j = 0; j < newVal[i].certList.length; j++) {
if(vm.certFlag == 1 && newVal[i].certList[j].id != -1) { // 如果是单证书 if (vm.certFlag == 1 && newVal[i].certList[j].id != -1) {
newVal[i].certList[j].name = '已获证人数' // 如果是单证书
newVal[i].certList[j].name = '已获证人数';
} else { } else {
newVal[i].certList[j].name = certNameConfig[newVal[i].certList[j].id]; newVal[i].certList[j].name =
certNameConfig[newVal[i].certList[j].id];
} }
} }
} }
for(let i = newVal.length - 1; i >= 0; i --){ for (let i = newVal.length - 1; i >= 0; i--) {
certData = []; certData = [];
cData = newVal[i]; cData = newVal[i];
vm.yAxisData.push(cData.eduName); vm.yAxisData.push(cData.eduName);
// vm.legendData.push(cData.eduName); // vm.legendData.push(cData.eduName);
certLength = cData.certList.length; certLength = cData.certList.length;
for(let j = certLength - 1; j >= 0; j --) { for (let j = certLength - 1; j >= 0; j--) {
certList = cData.certList; certList = cData.certList;
certData.push(certList[j].value); certData.push(certList[j].value);
if(i == 0) { if (i == 0) {
vm.legendData.push(certList[j].name); vm.legendData.push(certList[j].name);
} }
} }
...@@ -94,95 +103,103 @@ export default { ...@@ -94,95 +103,103 @@ export default {
this.isShow = false; this.isShow = false;
} }
}, },
deep: true deep: true,
} },
},
mounted() {
vm = this;
}, },
methods: { methods: {
// 处理SeriesData // 处理SeriesData
handlerSeriesData(chartData) { handlerSeriesData(chartData) {
if(chartData.length === 0) { if (chartData.length === 0) {
vm.legendData = []; vm.legendData = [];
vm.yAxisData = []; vm.yAxisData = [];
vm.seriesData = []; vm.seriesData = [];
return return;
} }
let certLength = chartData[0].certList.length; const certLength = chartData[0].certList.length;
let sData = [] let sData = [];
for(let i = 0; i < certLength; i ++){ for (let i = 0; i < certLength; i++) {
sData = [] sData = [];
for(let j = 0; j < chartData.length; j ++){ for (let j = 0; j < chartData.length; j++) {
sData.push(chartData[j].certList[i].value) sData.push(chartData[j].certList[i].value);
} }
vm.seriesData.push({ vm.seriesData.push({
name: chartData[0].certList[i].name, name: chartData[0].certList[i].name,
type: "bar", type: 'bar',
stack: "总量", stack: '总量',
barWidth: 16, //柱图宽度 barWidth: 16, // 柱图宽度
data: sData.reverse() data: sData.reverse(),
}); });
} }
}, },
// 绘制图表 // 绘制图表
drawColumn() { drawColumn() {
let chartColumn = this.$echarts.init(document.getElementById(this.id)); const chartColumn = this.$echarts.init(document.getElementById(this.id));
let options = { const options = {
color: [ color: [
"#FFB01B", '#FFB01B',
"#39AF9A", '#39AF9A',
"#5D7092", '#5D7092',
"#FF9A4B", '#FF9A4B',
"#abb7bb", '#abb7bb',
"#76d2d2" '#76d2d2',
], ],
tooltip: { tooltip: {
trigger: "axis", trigger: 'axis',
axisPointer: { axisPointer: {
// 坐标轴指示器,坐标轴触发有效 // 坐标轴指示器,坐标轴触发有效
type: "shadow" // 默认为直线,可选为:'line' | 'shadow' type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
}, },
formatter: function (params) { formatter: function (params) {
// let relVal = params[0].name + "人数:"; // let relVal = params[0].name + "人数:";
let relVal = params[0].name + "人数"; let relVal = params[0].name + '人数';
let value = 0; let value = 0;
// for (let i = 0, l = params.length; i < l; i++) { // for (let i = 0, l = params.length; i < l; i++) {
// value += params[i].value; // value += params[i].value;
// } // }
for (let i = params.length -1; i >= 0; i --) { for (let i = params.length - 1; i >= 0; i--) {
value += params[i].value; value += params[i].value;
} }
relVal += value + "人"; relVal += value + '人';
let divList = []; const divList = [];
divList[0] = "<div style='background: #3BA0FF;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>"; divList[0] =
divList[1] = "<div style='background: #FF9A4B;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>"; '<div style=\'background: #3BA0FF;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;\'></div>';
divList[2] = "<div style='background: #FFB01B;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>"; divList[1] =
divList[3] = "<div style='background: #39AF9A;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>"; '<div style=\'background: #FF9A4B;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;\'></div>';
divList[4] = "<div style='background: #5D7092;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>"; divList[2] =
for (let j = 0; j < params.length; j ++) { '<div style=\'background: #FFB01B;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;\'></div>';
// for (let j = params.length - 1; j >= 0; j--) { divList[3] =
if(value != 0) { '<div style=\'background: #39AF9A;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;\'></div>';
divList[4] =
'<div style=\'background: #5D7092;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;\'></div>';
for (let j = 0; j < params.length; j++) {
// for (let j = params.length - 1; j >= 0; j--) {
if (value != 0) {
relVal += relVal +=
// "<br/>" + divList[j] + // "<br/>" + divList[j] +
"<br/>" + '<br/>' +
params[j].seriesName + params[j].seriesName +
"占比" + '占比' +
// "占比: " + // "占比: " +
( (
(100 * parseFloat(params[j].value)) / (100 * parseFloat(params[j].value)) /
parseFloat(value) parseFloat(value)
).toFixed(1) + ).toFixed(1) +
"%"; '%';
} else { } else {
relVal += relVal +=
"<br/>" + '<br/>' +
// "<br/>" + divList[j] + // "<br/>" + divList[j] +
params[j].seriesName + params[j].seriesName +
"占比"+ "0%"; '占比' +
// "占比: "+ "0%"; '0%';
// "占比: "+ "0%";
} }
} }
return relVal; return relVal;
} },
}, },
legend: { legend: {
top: 20, top: 20,
...@@ -191,78 +208,78 @@ export default { ...@@ -191,78 +208,78 @@ export default {
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
// fontWeight: "bolder", // fontWeight: "bolder",
color: "#676869" color: '#676869',
} },
}, },
grid: { grid: {
left: "3%", left: '3%',
right: "6%", right: '6%',
bottom: "3%", bottom: '3%',
containLabel: true containLabel: true,
}, },
lineStyle: { lineStyle: {
color: "#676869" color: '#676869',
}, },
xAxis: { xAxis: {
// min: 0, // min: 0,
// max: 'dataMax', // max: 'dataMax',
minInterval: 1, minInterval: 1,
axisTick: false, axisTick: false,
type: "value", type: 'value',
axisLabel: { axisLabel: {
formatter: "{value}", formatter: '{value}',
textStyle: { textStyle: {
color: "#676869" color: '#676869',
}, },
rotate: 45 rotate: 45,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#efefef", color: '#efefef',
width: 1 width: 1,
} },
}, },
//设置网格线颜色 // 设置网格线颜色
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: ["#efefef"], color: ['#efefef'],
width: 1, width: 1,
type: "solid" type: 'solid',
} },
} },
}, },
yAxis: { yAxis: {
axisTick: false, axisTick: false,
type: "category", type: 'category',
data: vm.yAxisData, data: vm.yAxisData,
// data: ["其他", "中专以下", "大专", "本科", "硕士", "博士"], // data: ["其他", "中专以下", "大专", "本科", "硕士", "博士"],
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#676869" color: '#676869',
}, },
axisLabel: { axisLabel: {
formatter: "{value}", formatter: '{value}',
textStyle: { textStyle: {
color: "#676869" color: '#676869',
} },
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#efefef", color: '#efefef',
width: 1 width: 1,
} },
} },
}, },
series: vm.seriesData series: vm.seriesData,
}; };
chartColumn.setOption(options, true); chartColumn.setOption(options, true);
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.chart-pie { .chart-pie {
position: relative; position: relative;
top: -6px; top: -6px;
......
<!-- 柱状图-竖向 --> <!-- 柱状图-竖向 -->
<template> <template>
<section class="chart-pie"> <section class="chart-pie">
<div v-show="isShow" :id="id" :style="{width: chartWidth, height: chartHeight}"></div> <div
<NoContent v-show="!isShow" :id="id" :style="{width: '100%', height: '220px'}"></NoContent> v-show="isShow"
:id="id"
:style="{ width: chartWidth, height: chartHeight }"
/>
<NoContent
v-show="!isShow"
:id="id"
:style="{ width: '100%', height: '220px' }"
/>
</section> </section>
</template> </template>
<script> <script>
import { format } from "path"; import NoContent from '@/components/bussiness/no-content';
import NoContent from "@/components/bussiness/no-content"; let chartColumn = null;
let vm = null, chartColumn = null;
export default { export default {
components: { components: {
NoContent NoContent,
}, },
props: { props: {
id: { id: {
type: String, type: String,
default: "chartColumnId" default: 'chartColumnId',
}, },
colors: { colors: {
type: Array, type: Array,
default: () => [ default: () => ['#FFB01B', '#39AF9A', '#5D7092', '#FF9A4B'],
"#FFB01B",
"#39AF9A",
"#5D7092",
"#FF9A4B",
]
}, },
dataList: { dataList: {
tpye: Array, type: Array,
default: () => [] default: () => [],
} },
}, },
data() { data() {
return { return {
chartWidth: "300px", chartWidth: '300px',
chartHeight: "235px", chartHeight: '235px',
xAxisData: [], xAxisData: [],
seriesData: [], seriesData: [],
options: { options: {
color: ['#FFB01B'], color: ['#FFB01B'],
tooltip: { tooltip: {
trigger: "axis", trigger: 'axis',
axisPointer: { axisPointer: {
type: "shadow" type: 'shadow',
}, },
formatter: '{b}分获得人数{c0}人' formatter: '{b}分获得人数{c0}人',
}, },
grid: { grid: {
top: "10%", top: '10%',
left: "3%", left: '3%',
right: "6%", right: '6%',
bottom: "6%", bottom: '6%',
containLabel: true containLabel: true,
}, },
lineStyle: { lineStyle: {
color: "#676869" color: '#676869',
}, },
yAxis: { yAxis: {
axisTick: false, axisTick: false,
type: "value", type: 'value',
minInterval: 1, minInterval: 1,
axisLabel: { axisLabel: {
formatter: "{value}", formatter: '{value}',
textStyle: { textStyle: {
color: "#676869" color: '#676869',
} },
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#efefef", color: '#efefef',
width: 1 width: 1,
} },
}, },
//设置网格线颜色 // 设置网格线颜色
splitLine: { splitLine: {
show: true, show: true,
lineStyle:{ lineStyle: {
color: ['#efefef'], color: ['#efefef'],
width: 1, width: 1,
type: 'solid' type: 'solid',
} },
   }, },
}, },
xAxis: { xAxis: {
axisTick: false, axisTick: false,
type: "category", type: 'category',
data: [], data: [],
// data: ["其他", "中专以下", "大专", "本科", "硕士"],
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#676869" color: '#676869',
}, },
axisLabel: { axisLabel: {
formatter: "{value}分", formatter: '{value}分',
textStyle: { textStyle: {
color: "#676869" color: '#676869',
} },
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#efefef", color: '#efefef',
width: 1 width: 1,
} },
}, },
label: { label: {
formatter: "{c}%", formatter: '{c}%',
// normal: { // normal: {
// formatter: "{c}%", // formatter: "{c}%",
// show: true, // show: true,
// position: "inside" // position: "inside"
// } // }
} },
}, },
series: [ series: [
{ {
name: "考试人数", name: '考试人数',
data: [], data: [],
// data: [120, 200, 150, 80, 70, 110, 130], // data: [120, 200, 150, 80, 70, 110, 130],
type: "bar", type: 'bar',
barWidth: 20 //柱图宽度 barWidth: 20, // 柱图宽度
} },
] ],
}, },
isShow: true isShow: true,
}; };
}, },
watch: { watch: {
dataList: { dataList: {
handler(newVal) { handler(newVal) {
if(newVal.length) { if (newVal.length) {
this.isShow = true; this.isShow = true;
this.xAxisData = newVal.map( item => { this.xAxisData = newVal.map((item) => {
return item.times return item.times;
}) });
this.seriesData = newVal.map( item => { this.seriesData = newVal.map((item) => {
return item.count return item.count;
}) });
this.options.xAxis.data = this.xAxisData; this.options.xAxis.data = this.xAxisData;
this.options.series[0].data = this.seriesData; this.options.series[0].data = this.seriesData;
chartColumn.setOption(this.options, true); chartColumn.setOption(this.options, true);
...@@ -144,20 +145,19 @@ export default { ...@@ -144,20 +145,19 @@ export default {
this.isShow = false; this.isShow = false;
} }
}, },
deep: true deep: true,
} },
}, },
created() { created() {
if (process.client) { if (process.client) {
let clientWidth = const clientWidth =
window.outerWidth || window.outerWidth ||
document.body.clientWidth || document.body.clientWidth ||
document.documentElement.clientWidth; document.documentElement.clientWidth;
this.chartWidth = (clientWidth * 0.9).toFixed(1) + 'px'; this.chartWidth = (clientWidth * 0.9).toFixed(1) + 'px';
} }
}, },
mounted() { mounted() {
vm = this;
this.drawColumn(); this.drawColumn();
}, },
methods: { methods: {
...@@ -165,12 +165,12 @@ export default { ...@@ -165,12 +165,12 @@ export default {
drawColumn() { drawColumn() {
chartColumn = this.$echarts.init(document.getElementById(this.id)); chartColumn = this.$echarts.init(document.getElementById(this.id));
chartColumn.setOption(this.options, true); chartColumn.setOption(this.options, true);
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.chart-pie { .chart-pie {
position: relative; position: relative;
top: -6px; top: -6px;
......
...@@ -2,79 +2,84 @@ ...@@ -2,79 +2,84 @@
<template> <template>
<div> <div>
<div class="chart-column-vtc"> <div class="chart-column-vtc">
<div v-show="isShow" :id="id" :style="{width: chartWidth, height: chartHeight}"></div> <div
<NoContent v-show="!isShow" :id="id" :style="{width: '100%', height: '220px'}"></NoContent> v-show="isShow"
:id="id"
:style="{ width: chartWidth, height: chartHeight }"
/>
<NoContent
v-show="!isShow"
:id="id"
:style="{ width: '100%', height: '220px' }"
/>
</div> </div>
<TipsInfoChart content="报告数据来源仅包含摸底考和正式考的课程培训"></TipsInfoChart> <TipsInfoChart content="报告数据来源仅包含摸底考和正式考的课程培训" />
</div> </div>
</template> </template>
<script> <script>
import { format } from "path"; import NoContent from '@/components/bussiness/no-content';
import NoContent from "@/components/bussiness/no-content"; import TipsInfoChart from '@/components/bussiness/tips-info-chart';
import TipsInfoChart from "@/components/bussiness/tips-info-chart"; let vm = null,
let vm = null, chartColumn = null; chartColumn = null;
export default { export default {
components: { components: {
TipsInfoChart, TipsInfoChart,
NoContent NoContent,
}, },
props: { props: {
dataList: { dataList: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
id: { id: {
type: String, type: String,
default: "chartColumnTCId" default: 'chartColumnTCId',
}, },
colors: { colors: {
type: Array, type: Array,
default: () => [ default: () => ['#FFB01B', '#39AF9A', '#5D7092', '#FF9A4B'],
"#FFB01B", },
"#39AF9A",
"#5D7092",
"#FF9A4B",
]
}
}, },
data() { data() {
return { return {
chartWidth: "300px", chartWidth: '300px',
chartHeight: "320px", chartHeight: '320px',
isShow: true, isShow: true,
}; };
}, },
created() {
if (process.client) {
let clientWidth =
window.outerWidth ||
document.body.clientWidth ||
document.documentElement.clientWidth;
this.chartWidth = (clientWidth * 0.9).toFixed(1) + 'px';
}
},
watch: { watch: {
dataList: { dataList: {
handler(newVal) { handler(newVal) {
if(newVal.length) { if (newVal.length) {
this.isShow = true; this.isShow = true;
let yAxisData = [], series0Data = [], series1Data = [] let yAxisData = [],
yAxisData = newVal.map( item => { series0Data = [],
return this.shortName(item.classifyName) series1Data = [];
}) yAxisData = newVal.map((item) => {
series0Data = this.dataList.map( item => { return this.shortName(item.classifyName);
return ((item.beforeRate|| 0) * 100).toFixed(1); });
}) series0Data = this.dataList.map((item) => {
series1Data = this.dataList.map( item => { return ((item.beforeRate || 0) * 100).toFixed(1);
return ((item.afterRate|| 0) * 100).toFixed(1); });
}) series1Data = this.dataList.map((item) => {
return ((item.afterRate || 0) * 100).toFixed(1);
});
this.drawColumn(yAxisData, series0Data, series1Data); this.drawColumn(yAxisData, series0Data, series1Data);
// this.drawColumn(yAxisData.splice(0, 5), series0Data.splice(0, 5), series1Data.splice(0, 5)); // this.drawColumn(yAxisData.splice(0, 5), series0Data.splice(0, 5), series1Data.splice(0, 5));
} else { } else {
this.isShow = false; this.isShow = false;
} }
}, },
deep: false deep: false,
},
},
created() {
if (process.client) {
const clientWidth =
window.outerWidth ||
document.body.clientWidth ||
document.documentElement.clientWidth;
this.chartWidth = (clientWidth * 0.9).toFixed(1) + 'px';
} }
}, },
mounted() { mounted() {
...@@ -85,113 +90,113 @@ export default { ...@@ -85,113 +90,113 @@ export default {
// 绘制图表 // 绘制图表
drawColumn(yAxisData, series0Data, series1Data) { drawColumn(yAxisData, series0Data, series1Data) {
chartColumn = this.$echarts.init(document.getElementById(this.id)); chartColumn = this.$echarts.init(document.getElementById(this.id));
let options = { const options = {
color: vm.colors, color: vm.colors,
tooltip: { tooltip: {
trigger: "axis", trigger: 'axis',
axisPointer: { axisPointer: {
type: "shadow" type: 'shadow',
}, },
// formatter: '{a}<br/>{b}<br/>{c}<br/>{a0}<br/>{a1}<br/>{b0}<br/>{b1}', // formatter: '{a}<br/>{b}<br/>{c}<br/>{a0}<br/>{a1}<br/>{b0}<br/>{b1}',
formatter: '{b}<br/>{a0}{c0}%<br/> {a1}{c1}%' formatter: '{b}<br/>{a0}{c0}%<br/> {a1}{c1}%',
}, },
legend: { legend: {
top: 20, top: 20,
data: ["培训前正确率", "培训后正确率"], data: ['培训前正确率', '培训后正确率'],
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
// fontWeight: "bolder", // fontWeight: "bolder",
color: "#676869" color: '#676869',
} },
}, },
grid: { grid: {
left: "3%", left: '3%',
right: "6%", right: '6%',
bottom: "6%", bottom: '6%',
containLabel: true containLabel: true,
}, },
lineStyle: { lineStyle: {
color: "#676869" color: '#676869',
}, },
yAxis: { yAxis: {
axisTick: false, axisTick: false,
type: "value", type: 'value',
minInterval: 1, minInterval: 1,
axisLabel: { axisLabel: {
formatter: "{value}%", formatter: '{value}%',
textStyle: { textStyle: {
color: "#676869" color: '#676869',
} },
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#efefef", color: '#efefef',
width: 1 width: 1,
} },
}, },
//设置网格线颜色 // 设置网格线颜色
splitLine: { splitLine: {
show: true, show: true,
lineStyle:{ lineStyle: {
color: ['#efefef'], color: ['#efefef'],
width: 1, width: 1,
type: 'solid' type: 'solid',
} },
   } },
}, },
xAxis: { xAxis: {
axisTick: false, axisTick: false,
type: "category", type: 'category',
// data: ["博士", "硕士", "本科", "大专", "中专以下", "其他"], // data: ["博士", "硕士", "本科", "大专", "中专以下", "其他"],
data: yAxisData, data: yAxisData,
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#676869" color: '#676869',
}, },
axisLabel: { axisLabel: {
formatter: "{value}", formatter: '{value}',
textStyle: { textStyle: {
color: "#676869" color: '#676869',
} },
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#efefef", color: '#efefef',
width: 1 width: 1,
} },
} },
}, },
series: [ series: [
{ {
name: "培训前正确率", name: '培训前正确率',
data: series0Data, data: series0Data,
// data: [120, 200, 150, 80, 70, 110, 130], // data: [120, 200, 150, 80, 70, 110, 130],
type: "bar", type: 'bar',
barWidth: 15 //柱图宽度 barWidth: 15, // 柱图宽度
}, },
{ {
name: "培训后正确率", name: '培训后正确率',
data: series1Data, data: series1Data,
// data: [120, 20, 160, 80, 70, 110, 130], // data: [120, 20, 160, 80, 70, 110, 130],
type: "bar", type: 'bar',
barWidth: 15 //柱图宽度 barWidth: 15, // 柱图宽度
} },
] ],
}; };
chartColumn.setOption(options); chartColumn.setOption(options);
}, },
shortName: function (value, length = 5, append = '...') { shortName: function (value, length = 5, append = '...') {
if (value && value.length > length) { if (value && value.length > length) {
return value.substring(0, length) + append return value.substring(0, length) + append;
} else { } else {
return value return value;
} }
}, },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.chart-column-vtc { .chart-column-vtc {
position: relative; position: relative;
top: -6px; top: -6px;
......
<!-- 柱状图-竖向 --> <!-- 柱状图-竖向 -->
<template> <template>
<section class="chart-pie"> <section class="chart-pie">
<div v-show="isShow" :id="id" :style="{width: chartWidth, height: chartHeight}"></div> <div
<NoContent v-show="!isShow" :id="id" :style="{width: '100%', height: '220px'}"></NoContent> v-show="isShow"
:id="id"
:style="{ width: chartWidth, height: chartHeight }"
/>
<NoContent
v-show="!isShow"
:id="id"
:style="{ width: '100%', height: '220px' }"
/>
</section> </section>
</template> </template>
<script> <script>
import { format } from "path"; import NoContent from '@/components/bussiness/no-content';
import NoContent from "@/components/bussiness/no-content"; let chartColumn = null;
let vm = null, chartColumn = null;
export default { export default {
components: { components: {
NoContent NoContent,
}, },
props: { props: {
id: { id: {
type: String, type: String,
default: "chartColumnId" default: 'chartColumnId',
}, },
colors: { colors: {
type: Array, type: Array,
default: () => [ default: () => [
"#FFB01B", '#FFB01B',
"#39AF9A", '#39AF9A',
"#5D7092", '#5D7092',
"#FF9A4B", '#FF9A4B',
"#abb7bb", '#abb7bb',
"#76d2d2" '#76d2d2',
] ],
}, },
dataList: { dataList: {
tpye: Array, type: Array,
default: () => [] default: () => [],
} },
}, },
data() { data() {
return { return {
chartWidth: "300px", chartWidth: '300px',
chartHeight: "235px", chartHeight: '235px',
xAxisData: [], xAxisData: [],
seriesData: [], seriesData: [],
options: { options: {
color: ['#39AF9A'], color: ['#39AF9A'],
tooltip: { tooltip: {
trigger: "axis", trigger: 'axis',
axisPointer: { axisPointer: {
// 坐标轴指示器,坐标轴触发有效 // 坐标轴指示器,坐标轴触发有效
type: "shadow" // 默认为直线,可选为:'line' | 'shadow' type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
}, },
formatter: '{b}完成人数{c0}人' formatter: '{b}完成人数{c0}人',
}, },
// legend: { // legend: {
// top: 20, // top: 20,
...@@ -60,123 +67,121 @@ export default { ...@@ -60,123 +67,121 @@ export default {
// } // }
// }, // },
grid: { grid: {
top: "10%", top: '10%',
left: "3%", left: '3%',
right: "6%", right: '6%',
bottom: "6%", bottom: '6%',
containLabel: true containLabel: true,
}, },
lineStyle: { lineStyle: {
color: "#676869" color: '#676869',
}, },
yAxis: { yAxis: {
axisTick: false, axisTick: false,
type: "value", type: 'value',
minInterval: 1, minInterval: 1,
axisLabel: { axisLabel: {
formatter: "{value}", formatter: '{value}',
textStyle: { textStyle: {
color: "#676869" color: '#676869',
} },
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#efefef", color: '#efefef',
width: 1 width: 1,
} },
}, },
//设置网格线颜色 // 设置网格线颜色
splitLine: { splitLine: {
show: true, show: true,
lineStyle:{ lineStyle: {
color: ['#efefef'], color: ['#efefef'],
width: 1, width: 1,
type: 'solid' type: 'solid',
} },
   } },
}, },
xAxis: { xAxis: {
axisTick: false, axisTick: false,
type: "category", type: 'category',
data: [], data: [],
// data: ["其他", "中专以下", "大专", "本科", "硕士"], // data: ["其他", "中专以下", "大专", "本科", "硕士"],
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#676869" color: '#676869',
}, },
axisLabel: { axisLabel: {
formatter: "{value}", formatter: '{value}',
textStyle: { textStyle: {
color: "#676869" color: '#676869',
} },
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#efefef", color: '#efefef',
width: 1 width: 1,
} },
}, },
}, },
series: [ series: [
{ {
name: "考试人数", name: '考试人数',
data: [], data: [],
// data: [120, 200, 150, 80, 70, 110, 130], // data: [120, 200, 150, 80, 70, 110, 130],
type: "bar", type: 'bar',
barWidth: 20 //柱图宽度 barWidth: 20, // 柱图宽度
} },
] ],
}, },
isShow: true isShow: true,
}; };
}, },
watch: { watch: {
dataList: { dataList: {
handler(newVal) { handler(newVal) {
if(newVal.length) { if (newVal.length) {
this.isShow = true; this.isShow = true;
let cList = newVal.slice(0, 5); const cList = newVal.slice(0, 5);
this.xAxisData = cList.map( item => { this.xAxisData = cList.map((item) => {
return item.timesStr return item.timesStr;
}) });
this.seriesData = cList.map( item => { this.seriesData = cList.map((item) => {
return item.count return item.count;
}) });
this.options.xAxis.data = this.xAxisData; this.options.xAxis.data = this.xAxisData;
this.options.series[0].data = this.seriesData; this.options.series[0].data = this.seriesData;
chartColumn.setOption(this.options, true); chartColumn.setOption(this.options, true);
} else { } else {
this.isShow = false; this.isShow = false;
} }
}, },
deep: true deep: true,
} },
}, },
created() { created() {
if (process.client) { if (process.client) {
let clientWidth = const clientWidth =
window.outerWidth || window.outerWidth ||
document.body.clientWidth || document.body.clientWidth ||
document.documentElement.clientWidth; document.documentElement.clientWidth;
this.chartWidth = (clientWidth * 0.9).toFixed(0) + 'px'; this.chartWidth = (clientWidth * 0.9).toFixed(0) + 'px';
} }
}, },
mounted() { mounted() {
vm = this;
this.drawColumn(); this.drawColumn();
}, },
methods: { methods: {
// 绘制图表 // 绘制图表
drawColumn() { drawColumn() {
chartColumn = this.$echarts.init(document.getElementById(this.id)); chartColumn = this.$echarts.init(document.getElementById(this.id));
chartColumn.setOption(this.options, true); chartColumn.setOption(this.options, true);
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.chart-pie { .chart-pie {
position: relative; position: relative;
top: -6px; top: -6px;
......
<!-- 柱状图-竖向 --> <!-- 柱状图-竖向 -->
<template> <template>
<section class="chart-pie"> <section class="chart-pie">
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div> <div
:id="id"
:style="{ width: chartWidth, height: chartHeight }"
/>
</section> </section>
</template> </template>
<script> <script>
import { format } from "path"; let chartColumn = null;
let vm = null, chartColumn = null;
export default { export default {
props: { props: {
id: { id: {
type: String, type: String,
default: "chartColumnId" default: 'chartColumnId',
}, },
colors: { colors: {
type: Array, type: Array,
default: () => [ default: () => [
"#FFB01B", '#FFB01B',
"#39AF9A", '#39AF9A',
"#5D7092", '#5D7092',
"#FF9A4B", '#FF9A4B',
"#abb7bb", '#abb7bb',
"#76d2d2" '#76d2d2',
] ],
}, },
dataList: { dataList: {
tpye: Array, type: Array,
default: () => [] default: () => [],
} },
}, },
data() { data() {
return { return {
chartWidth: "300px", chartWidth: '300px',
chartHeight: "235px", chartHeight: '235px',
xAxisData: [], xAxisData: [],
seriesData: [], seriesData: [],
options: { options: {
// color: this.colors, // color: this.colors,
tooltip: { tooltip: {
trigger: "axis", trigger: 'axis',
axisPointer: { axisPointer: {
type: "shadow" type: 'shadow',
} },
}, },
grid: { grid: {
top: "10%", top: '10%',
left: "3%", left: '3%',
right: "6%", right: '6%',
bottom: "6%", bottom: '6%',
containLabel: true containLabel: true,
}, },
lineStyle: { lineStyle: {
color: "#676869" color: '#676869',
}, },
yAxis: { yAxis: {
axisTick: false, axisTick: false,
type: "value", type: 'value',
minInterval: 1, minInterval: 1,
axisLabel: { axisLabel: {
formatter: "{value}", formatter: '{value}',
textStyle: { textStyle: {
color: "#676869" color: '#676869',
} },
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#efefef", color: '#efefef',
width: 1 width: 1,
} },
} },
}, },
xAxis: { xAxis: {
axisTick: false, axisTick: false,
type: "category", type: 'category',
data: [], data: [],
// data: ["其他", "中专以下", "大专", "本科", "硕士"], // data: ["其他", "中专以下", "大专", "本科", "硕士"],
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#676869" color: '#676869',
}, },
axisLabel: { axisLabel: {
formatter: "{value}", formatter: '{value}',
textStyle: { textStyle: {
color: "#676869" color: '#676869',
} },
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#efefef", color: '#efefef',
width: 1 width: 1,
} },
} },
}, },
series: [ series: [
{ {
name: "获优秀人数", name: '获优秀人数',
data: [], data: [],
// data: [120, 200, 150, 80, 70, 110, 130], // data: [120, 200, 150, 80, 70, 110, 130],
type: "bar", type: 'bar',
barWidth: 20 //柱图宽度 barWidth: 20, // 柱图宽度
} },
] ],
} },
}; };
}, },
watch: { watch: {
dataList: { dataList: {
handler(newVal) { handler(newVal) {
this.xAxisData = newVal.map( item => { this.xAxisData = newVal.map((item) => {
return item.timesStr return item.timesStr;
}) });
this.seriesData = newVal.map( item => { this.seriesData = newVal.map((item) => {
return item.count return item.count;
}) });
this.options.xAxis.data = this.xAxisData; this.options.xAxis.data = this.xAxisData;
this.options.series[0].data = this.seriesData; this.options.series[0].data = this.seriesData;
chartColumn.setOption(this.options, true); chartColumn.setOption(this.options, true);
}, },
deep: true deep: true,
} },
}, },
created() { created() {
if (process.client) { if (process.client) {
let clientWidth = const clientWidth =
window.outerWidth || window.outerWidth ||
document.body.clientWidth || document.body.clientWidth ||
document.documentElement.clientWidth; document.documentElement.clientWidth;
this.chartWidth = (clientWidth * 0.9).toFixed(0) + 'px'; this.chartWidth = (clientWidth * 0.9).toFixed(0) + 'px';
} }
}, },
mounted() { mounted() {
vm = this;
this.drawColumn(); this.drawColumn();
}, },
methods: { methods: {
...@@ -138,12 +139,12 @@ export default { ...@@ -138,12 +139,12 @@ export default {
drawColumn() { drawColumn() {
chartColumn = this.$echarts.init(document.getElementById(this.id)); chartColumn = this.$echarts.init(document.getElementById(this.id));
chartColumn.setOption(this.options, true); chartColumn.setOption(this.options, true);
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.chart-pie { .chart-pie {
position: relative; position: relative;
top: -6px; top: -6px;
......
<!-- 证书分布情况饼图 --> <!-- 证书分布情况饼图 -->
<template> <template>
<section class="chart-pie"> <section class="chart-pie">
<div :id="pieId" :style="{width: '360px', height: '220px'}"></div> <div
:id="pieId"
:style="{ width: '360px', height: '220px' }"
/>
</section> </section>
</template> </template>
<script> <script>
import { format } from "path";
import { echartColors } from '@/utils/index'
let vm = null; let vm = null;
export default { export default {
name: "certPie", name: 'CertPie',
props: { props: {
id: { id: {
type: String, type: String,
default: 'chartPieId' default: 'chartPieId',
}, },
pieData: { pieData: {
type: Array, type: Array,
default: () => [ default: () => [
{ value: 0, name: "优秀证书" }, { value: 0, name: '优秀证书' },
{ value: 0, name: "及格证书" }, { value: 0, name: '及格证书' },
{ value: 0, name: "未获证" } { value: 0, name: '未获证' },
] ],
} },
}, },
data() { data() {
return { return {
pieId: 'certPieId', pieId: 'certPieId',
chartHeight: "1000px", chartHeight: '1000px',
legendDataNotSelected: {}, legendDataNotSelected: {},
handledData: {}, handledData: {},
legendData: [], legendData: [],
seriesData: {} seriesData: {},
// 重置颜色,图标如果需要颜色,优先从用户提供的colors中依次提取,用户不提供,则根据默认的颜色进行选取 // 重置颜色,图标如果需要颜色,优先从用户提供的colors中依次提取,用户不提供,则根据默认的颜色进行选取
}; };
}, },
watch: { watch: {
pieData: { pieData: {
handler(newValue, oldValue) { handler(newValue) {
this.handlePieData(newValue); this.handlePieData(newValue);
this.drawPie(); this.drawPie();
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
vm = this; vm = this;
}, },
methods: { methods: {
handlePieData(pieData) { handlePieData(pieData) {
let legendDataNotSelected = {}, legendData = [], seriesData = []; const legendDataNotSelected = {},
pieData.forEach( (item, i) => { legendData = [],
if(!pieData[i].doneCount) { seriesData = [];
legendDataNotSelected[pieData[i].certName] = false pieData.forEach((item, i) => {
if (!pieData[i].doneCount) {
legendDataNotSelected[pieData[i].certName] = false;
} }
legendData.push(item.certName); legendData.push(item.certName);
seriesData.push({ name: item.certName, value: item.doneCount}); seriesData.push({ name: item.certName, value: item.doneCount });
}) });
this.legendDataNotSelected = legendDataNotSelected; this.legendDataNotSelected = legendDataNotSelected;
this.legendData = legendData; this.legendData = legendData;
this.seriesData = seriesData; this.seriesData = seriesData;
...@@ -70,16 +73,16 @@ export default { ...@@ -70,16 +73,16 @@ export default {
}, },
// 绘制图表 // 绘制图表
drawPie() { drawPie() {
let chartPie = vm.$echarts.init(document.getElementById(vm.pieId)); const chartPie = vm.$echarts.init(document.getElementById(vm.pieId));
let options = { const options = {
// color: echartColors, // color: echartColors,
tooltip: { tooltip: {
trigger: "item", trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)" formatter: '{a} <br/>{b} : {c} ({d}%)',
}, },
legend: { legend: {
type: "scroll", type: 'scroll',
orient: "vertical", orient: 'vertical',
// orient:'horizontal', // orient:'horizontal',
top: '30%', top: '30%',
left: '60%', left: '60%',
...@@ -89,49 +92,49 @@ export default { ...@@ -89,49 +92,49 @@ export default {
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
// fontWeight: "bolder", // fontWeight: "bolder",
color: "#8C8C8C" color: '#8C8C8C',
},
formatter: function (name) {
return name + ' ' + vm.fmtLengend(name);
}, },
formatter: function(name) {
return name + " " + vm.fmtLengend(name);
}
}, },
series: [ series: [
{ {
name: "证书分布情况1", name: '证书分布情况1',
type: "pie", type: 'pie',
label: { label: {
position: "inner", position: 'inner',
formatter: function(config) { formatter: function (config) {
// alert(JSON.stringify(config)) // alert(JSON.stringify(config))
return `${config}%`; return `${config}%`;
} },
}, },
radius: "65%", radius: '65%',
center: ["30%", "50%"], center: ['30%', '50%'],
data: vm.seriesData, // vm.pieData, data: vm.seriesData, // vm.pieData,
itemStyle: { itemStyle: {
emphasis: { emphasis: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)" shadowColor: 'rgba(0, 0, 0, 0.5)',
} },
} },
} },
] ],
}; };
chartPie.setOption(options, true); chartPie.setOption(options, true);
}, },
fmtLengend(name) { fmtLengend(name) {
let item = this.pieData.find(item => { const item = this.pieData.find((item) => {
return item.certName === name; return item.certName === name;
}); });
return (item && item.doneCount) || 0; return (item && item.doneCount) || 0;
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.chart-pie { .chart-pie {
position: relative; position: relative;
top: -6px; top: -6px;
......
<!-- 人员学历情况饼图 --> <!-- 人员学历情况饼图 -->
<template> <template>
<section class="chart-pie-edu"> <section class="chart-pie-edu">
<div v-show="isShow" :id="pieId" :style="{width: chartWidth, height: '220px'}"></div> <div
<NoContent v-show="!isShow" :id="pieId" :style="{width: '100%', height: '220px'}"></NoContent> v-show="isShow"
:id="pieId"
:style="{ width: chartWidth, height: '220px' }"
/>
<NoContent
v-show="!isShow"
:id="pieId"
:style="{ width: '100%', height: '220px' }"
/>
</section> </section>
</template> </template>
<script> <script>
import { format } from "path"; import NoContent from '@/components/bussiness/no-content';
import { echartColors } from '@/utils/index'
import NoContent from "@/components/bussiness/no-content";
let vm = null; let vm = null;
export default { export default {
name: "eduPie", name: 'EduPie',
components: { components: {
NoContent NoContent,
}, },
props: { props: {
dataList: { dataList: {
type: Array, type: Array,
default: () => [ default: () => [
{ value: 0, name: "优秀证书" }, { value: 0, name: '优秀证书' },
{ value: 0, name: "及格证书" }, { value: 0, name: '及格证书' },
{ value: 0, name: "未获证" } { value: 0, name: '未获证' },
] ],
}, },
}, },
data() { data() {
return { return {
chartWidth: '320px', chartWidth: '320px',
pieId: 'eduPieId', pieId: 'eduPieId',
chartHeight: "1000px", chartHeight: '1000px',
legendDataNotSelected: {}, legendDataNotSelected: {},
handledData: {}, handledData: {},
legendData: [], legendData: [],
seriesData: {}, seriesData: {},
count: 0, count: 0,
isShow: true isShow: true,
// 重置颜色,图标如果需要颜色,优先从用户提供的colors中依次提取,用户不提供,则根据默认的颜色进行选取 // 重置颜色,图标如果需要颜色,优先从用户提供的colors中依次提取,用户不提供,则根据默认的颜色进行选取
}; };
}, },
watch: { watch: {
dataList: { dataList: {
handler(newValue, oldValue) { handler(newValue) {
if (newValue.length) { if (newValue.length) {
this.isShow = true; this.isShow = true;
let clientWidth = const clientWidth =
window.outerWidth || window.outerWidth ||
document.body.clientWidth || document.body.clientWidth ||
document.documentElement.clientWidth; document.documentElement.clientWidth;
this.chartWidth = Math.ceil(clientWidth * 0.90) + 'px'; this.chartWidth = Math.ceil(clientWidth * 0.9) + 'px';
this.handlePieData(newValue); this.handlePieData(newValue);
this.drawPie(); this.drawPie();
} else { } else {
this.isShow = false; this.isShow = false;
} }
}, },
deep: true deep: true,
} },
}, },
created() { created() {
if (process.client) { if (process.client) {
...@@ -68,15 +72,18 @@ export default { ...@@ -68,15 +72,18 @@ export default {
mounted() {}, mounted() {},
methods: { methods: {
handlePieData(pieData) { handlePieData(pieData) {
let count = 0, legendDataNotSelected = {}, legendData = [], seriesData = []; let count = 0;
pieData.forEach( (item, i) => { const legendDataNotSelected = {},
if(!pieData[i].value) { seriesData = [],
legendDataNotSelected[pieData[i].name] = false legendData = [];
pieData.forEach((item, i) => {
if (!pieData[i].value) {
legendDataNotSelected[pieData[i].name] = false;
} }
legendData.push(item.name); legendData.push(item.name);
seriesData.push({ name: item.name, value: item.value}); seriesData.push({ name: item.name, value: item.value });
count += item.value; count += item.value;
}) });
this.legendDataNotSelected = legendDataNotSelected; this.legendDataNotSelected = legendDataNotSelected;
this.legendData = legendData; this.legendData = legendData;
this.seriesData = seriesData; this.seriesData = seriesData;
...@@ -96,28 +103,28 @@ export default { ...@@ -96,28 +103,28 @@ export default {
}, },
// 绘制图表 // 绘制图表
drawPie() { drawPie() {
let chartPie = vm.$echarts.init(document.getElementById(vm.pieId)); const chartPie = vm.$echarts.init(document.getElementById(vm.pieId));
let options = { const options = {
// color: echartColors, // color: echartColors,
title: { title: {
text: "总人数: " + vm.count, text: '总人数: ' + vm.count,
top: '10%', top: '10%',
left: '60%', left: '60%',
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
fontWeight: "bolder", fontWeight: 'bolder',
color: "#000000" color: '#000000',
} },
}, },
tooltip: { tooltip: {
trigger: "item", trigger: 'item',
// formatter: "{a} <br/>{b} : {c} ({d}%)" // formatter: "{a} <br/>{b} : {c} ({d}%)"
formatter: "{b}{c}" formatter: '{b}{c}人',
}, },
legend: { legend: {
type: "scroll", type: 'scroll',
orient: "vertical", orient: 'vertical',
// orient:'horizontal', // orient:'horizontal',
itemWidth: 9, itemWidth: 9,
itemHeight: 9, itemHeight: 9,
...@@ -130,50 +137,50 @@ export default { ...@@ -130,50 +137,50 @@ export default {
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
// fontWeight: "bolder", // fontWeight: "bolder",
color: "#8C8C8C" color: '#8C8C8C',
}, },
// icon: "image://./assets/images/left-array-black.png", //格式为'image://+icon文件地址',其中image::后的//不能省略 position: "inner", // icon: "image://./assets/images/left-array-black.png", //格式为'image://+icon文件地址',其中image::后的//不能省略 position: "inner",
formatter: function(name) { formatter: function (name) {
return name + " " + vm.fmtLengend(name); return name + ' ' + vm.fmtLengend(name);
} },
}, },
series: [ series: [
{ {
name: "证书分布情况", name: '证书分布情况',
type: "pie", type: 'pie',
label: { label: {
position: "inner", position: 'inner',
formatter: function(config) { formatter: function (config) {
// return `${config.percent}%`; // return `${config.percent}%`;
return `${config.percent.toFixed(1)}%`; return `${config.percent.toFixed(1)}%`;
} },
}, },
radius: "65%", radius: '65%',
center: ["30%", "50%"], center: ['30%', '50%'],
data: vm.seriesData, // vm.pieData, data: vm.seriesData, // vm.pieData,
itemStyle: { itemStyle: {
emphasis: { emphasis: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)" shadowColor: 'rgba(0, 0, 0, 0.5)',
} },
} },
} },
] ],
}; };
chartPie.setOption(options, true); chartPie.setOption(options, true);
}, },
fmtLengend(name) { fmtLengend(name) {
let item = this.dataList.find(item => { const item = this.dataList.find((item) => {
return item.name === name; return item.name === name;
}); });
return (item && item.value) || 0; return (item && item.value) || 0;
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.chart-pie-edu { .chart-pie-edu {
position: relative; position: relative;
top: -12px; top: -12px;
......
<!-- 人员职称情况饼图 --> <!-- 人员职称情况饼图 -->
<template> <template>
<section class="chart-pie"> <section class="chart-pie">
<div v-show="isShow" :id="pieId" :style="{width: chartWidth, height: '220px'}"></div> <div
<NoContent v-show="!isShow" :id="pieId" :style="{width: '100%', height: '220px'}"></NoContent> v-show="isShow"
:id="pieId"
:style="{ width: chartWidth, height: '220px' }"
/>
<NoContent
v-show="!isShow"
:id="pieId"
:style="{ width: '100%', height: '220px' }"
/>
</section> </section>
</template> </template>
<script> <script>
import { format } from "path"; import NoContent from '@/components/bussiness/no-content';
import { echartColors } from "@/utils/index";
import NoContent from "@/components/bussiness/no-content";
let vm = null; let vm = null;
export default { export default {
name: "titlePie", name: 'TitlePie',
components: { components: {
NoContent NoContent,
}, },
props: { props: {
pieData: { pieData: {
type: Array, type: Array,
default: () => [ default: () => [
{ value: 0, name: "优秀证书" }, { value: 0, name: '优秀证书' },
{ value: 0, name: "及格证书" }, { value: 0, name: '及格证书' },
{ value: 0, name: "未获证" } { value: 0, name: '未获证' },
] ],
}, },
dataList: { dataList: {
type: Array, type: Array,
default: () => [ default: () => [
{ value: 0, name: "优秀证书" }, { value: 0, name: '优秀证书' },
{ value: 0, name: "及格证书" }, { value: 0, name: '及格证书' },
{ value: 0, name: "未获证" } { value: 0, name: '未获证' },
] ],
}, },
}, },
data() { data() {
return { return {
chartWidth: '320px', chartWidth: '320px',
pieId: "titlePieId", pieId: 'titlePieId',
chartHeight: "1000px", chartHeight: '1000px',
legendDataNotSelected: {}, legendDataNotSelected: {},
handledData: {}, handledData: {},
legendData: [], legendData: [],
...@@ -49,22 +55,22 @@ export default { ...@@ -49,22 +55,22 @@ export default {
}, },
watch: { watch: {
dataList: { dataList: {
handler(newValue, oldValue) { handler(newValue) {
if (newValue.length) { if (newValue.length) {
this.isShow = true; this.isShow = true;
let clientWidth = const clientWidth =
window.outerWidth || window.outerWidth ||
document.body.clientWidth || document.body.clientWidth ||
document.documentElement.clientWidth; document.documentElement.clientWidth;
this.chartWidth = Math.ceil(clientWidth * 0.90) + 'px'; this.chartWidth = Math.ceil(clientWidth * 0.9) + 'px';
this.handlePieData(newValue); this.handlePieData(newValue);
this.drawPie(); this.drawPie();
} else { } else {
this.isShow = false; this.isShow = false;
} }
}, },
deep: true deep: true,
} },
}, },
created() { created() {
if (process.client) { if (process.client) {
...@@ -74,15 +80,18 @@ export default { ...@@ -74,15 +80,18 @@ export default {
mounted() {}, mounted() {},
methods: { methods: {
handlePieData(pieData) { handlePieData(pieData) {
let count = 0, legendDataNotSelected = {}, legendData = [], seriesData = []; let count = 0;
pieData.forEach( (item, i) => { const legendDataNotSelected = {},
if(!pieData[i].value) { legendData = [],
legendDataNotSelected[pieData[i].name] = false seriesData = [];
pieData.forEach((item, i) => {
if (!pieData[i].value) {
legendDataNotSelected[pieData[i].name] = false;
} }
legendData.push(item.name); legendData.push(item.name);
seriesData.push({ name: item.name, value: item.value}); seriesData.push({ name: item.name, value: item.value });
count += item.value; count += item.value;
}) });
this.legendDataNotSelected = legendDataNotSelected; this.legendDataNotSelected = legendDataNotSelected;
this.legendData = legendData; this.legendData = legendData;
this.seriesData = seriesData; this.seriesData = seriesData;
...@@ -102,84 +111,84 @@ export default { ...@@ -102,84 +111,84 @@ export default {
}, },
// 绘制图表 // 绘制图表
drawPie() { drawPie() {
let chartPie = vm.$echarts.init(document.getElementById(vm.pieId)); const chartPie = vm.$echarts.init(document.getElementById(vm.pieId));
let options = { const options = {
// color: echartColors, // color: echartColors,
title: { title: {
text: "总人数: " + vm.count, text: '总人数: ' + vm.count,
top: '10%', top: '10%',
left: '60%', left: '60%',
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
fontWeight: "bolder", fontWeight: 'bolder',
color: "#000000" color: '#000000',
} },
}, },
tooltip: { tooltip: {
trigger: "item", trigger: 'item',
// formatter: "{a} <br/>{b} : {c} ({d}%)" // formatter: "{a} <br/>{b} : {c} ({d}%)"
formatter: "{b}{c}" formatter: '{b}{c}人',
}, },
legend: { legend: {
type: "scroll", type: 'scroll',
// type: "plain", // 普通图例 // type: "plain", // 普通图例
orient: "vertical", orient: 'vertical',
itemWidth: 9, itemWidth: 9,
itemHeight: 9, itemHeight: 9,
borderRadius: 20, borderRadius: 20,
// orient:'horizontal', // orient:'horizontal',
top: '20%', top: '20%',
left: "60%", left: '60%',
bottom: 20, bottom: 20,
selected: this.legendDataNotSelected, selected: this.legendDataNotSelected,
data: vm.legendData, // ["优秀证书", "及格证书", "未获证"], data: vm.legendData, // ["优秀证书", "及格证书", "未获证"],
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#8C8C8C", color: '#8C8C8C',
},
formatter: function (name) {
return name + ' ' + vm.fmtLengend(name);
}, },
formatter: function(name) {
return name + " " + vm.fmtLengend(name);
},
}, },
series: [ series: [
{ {
name: "证书分布情况", name: '证书分布情况',
type: "pie", type: 'pie',
label: { label: {
position: "inner", position: 'inner',
formatter: function(config) { formatter: function (config) {
// return `${config.percent}%`; // return `${config.percent}%`;
return `${config.percent.toFixed(1)}%`; return `${config.percent.toFixed(1)}%`;
} },
}, },
radius: "65%", radius: '65%',
center: ["30%", "50%"], center: ['30%', '50%'],
data: vm.seriesData, // vm.pieData, data: vm.seriesData, // vm.pieData,
itemStyle: { itemStyle: {
emphasis: { emphasis: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)" shadowColor: 'rgba(0, 0, 0, 0.5)',
} },
} },
} },
] ],
}; };
chartPie.setOption(options, true); chartPie.setOption(options, true);
}, },
fmtLengend(name) { fmtLengend(name) {
let item = this.dataList.find(item => { const item = this.dataList.find((item) => {
return item.name === name; return item.name === name;
}); });
return (item && item.value) || 0; return (item && item.value) || 0;
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.chart-pie { .chart-pie {
position: relative; position: relative;
top: -6px; top: -6px;
......
<!-- 饼图 --> <!-- 饼图 -->
<template> <template>
<section class="chart-pie"> <section class="chart-pie">
<div v-show="isShow" :id="id" :style="{width: '100%', height: '220px'}"></div> <div
<NoContent v-show="!isShow" :id="id" :style="{width: '100%', height: '220px'}"></NoContent> v-show="isShow"
:id="id"
:style="{ width: '100%', height: '220px' }"
/>
<NoContent
v-show="!isShow"
:id="id"
:style="{ width: '100%', height: '220px' }"
/>
</section> </section>
</template> </template>
<script> <script>
import { echartColors } from '@/utils/index' import NoContent from '@/components/bussiness/no-content';
import NoContent from "@/components/bussiness/no-content";
let vm = null; let vm = null;
let chartPie = null; let chartPie = null;
let options = null; let options = null;
let certNameConfig = { const certNameConfig = {
'-1': '未获证人数', '-1': '未获证人数',
'1': '获优秀人数', 1: '获优秀人数',
'2': '获良好人数', 2: '获良好人数',
'3': '获及格人数', 3: '获及格人数',
'4': '获不及格人数', 4: '获不及格人数',
} };
export default { export default {
components: { components: {
NoContent NoContent,
}, },
props: { props: {
id: { id: {
type: String, type: String,
default: 'chartPieId' default: 'chartPieId',
}, },
pieData: { pieData: {
type: Array, type: Array,
default: () => [ default: () => [
{ value: 10, name: "优秀证书" }, { value: 10, name: '优秀证书' },
{ value: 10, name: "及格证书" }, { value: 10, name: '及格证书' },
{ value: 10, name: "未获证" } { value: 10, name: '未获证' },
] ],
}, },
certFlag: { certFlag: {
type: String | Number, type: Number,
default: 1 default: 1,
} },
}, },
data() { data() {
return { return {
chartHeight: "1000px", chartHeight: '1000px',
handledData: {}, handledData: {},
legendDataNotSelected: {}, legendDataNotSelected: {},
legendData: [], legendData: [],
seriesData: {}, seriesData: {},
isShow: true isShow: true,
}; };
}, },
watch: { watch: {
pieData: { pieData: {
handler(newValue, oldValue) { handler(newValue) {
// 如果有数据,则处理数据并显示图表 // 如果有数据,则处理数据并显示图表
if(newValue.length) { if (newValue.length) {
this.isShow = true; this.isShow = true;
for(let i = 0; i < newValue.length; i ++) { for (let i = 0; i < newValue.length; i++) {
if(this.certFlag == 1 && newValue[i].certId != -1) { if (this.certFlag == 1 && newValue[i].certId != -1) {
newValue[i].certName = '已获证人数' newValue[i].certName = '已获证人数';
} else { } else {
newValue[i].certName = certNameConfig[newValue[i].certId]; newValue[i].certName = certNameConfig[newValue[i].certId];
} }
} }
this.handlePieData(newValue); this.handlePieData(newValue);
...@@ -69,24 +76,25 @@ export default { ...@@ -69,24 +76,25 @@ export default {
} else { } else {
this.isShow = false; this.isShow = false;
} }
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
vm = this; vm = this;
}, },
methods: { methods: {
handlePieData(pieData) { handlePieData(pieData) {
let legendDataNotSelected = {}, legendData = [], seriesData = []; const legendDataNotSelected = {},
pieData.forEach( (item, i) => { legendData = [],
if(!pieData[i].doneCount) { seriesData = [];
legendDataNotSelected[pieData[i].certName] = false pieData.forEach((item, i) => {
if (!pieData[i].doneCount) {
legendDataNotSelected[pieData[i].certName] = false;
} }
legendData.push(item.certName); legendData.push(item.certName);
seriesData.push({ name: item.certName, value: item.doneCount}); seriesData.push({ name: item.certName, value: item.doneCount });
}) });
this.legendDataNotSelected = legendDataNotSelected; this.legendDataNotSelected = legendDataNotSelected;
this.legendData = legendData; this.legendData = legendData;
this.seriesData = seriesData; this.seriesData = seriesData;
...@@ -99,20 +107,20 @@ export default { ...@@ -99,20 +107,20 @@ export default {
}, },
// 绘制图表 // 绘制图表
drawPie() { drawPie() {
if(!chartPie) { if (!chartPie) {
chartPie = vm.$echarts.init(document.getElementById(vm.id)); chartPie = vm.$echarts.init(document.getElementById(vm.id));
} }
options = { options = {
// color: echartColors, // color: echartColors,
tooltip: { tooltip: {
trigger: "item", trigger: 'item',
// formatter: "{a} <br/>{b} : {c} ({d}%)" // formatter: "{a} <br/>{b} : {c} ({d}%)"
formatter: "{b}{c}" formatter: '{b}{c}人',
}, },
legend: { legend: {
type: "scroll", type: 'scroll',
orient: "vertical", orient: 'vertical',
// orient:'horizontal', // orient:'horizontal',
top: '25%', top: '25%',
left: '60%', left: '60%',
...@@ -122,48 +130,48 @@ export default { ...@@ -122,48 +130,48 @@ export default {
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
// fontWeight: "bolder", // fontWeight: "bolder",
color: "#8C8C8C" color: '#8C8C8C',
}, },
formatter: function(name) { formatter: function (name) {
return name; return name;
} },
}, },
series: [ series: [
{ {
name: "证书分布情况", name: '证书分布情况',
type: "pie", type: 'pie',
label: { label: {
position: "inner", position: 'inner',
formatter: function(config) { formatter: function (config) {
return `${config.percent.toFixed(1)}%`; return `${config.percent.toFixed(1)}%`;
} },
}, },
radius: "65%", radius: '65%',
center: ["30%", "50%"], center: ['30%', '50%'],
data: vm.seriesData, data: vm.seriesData,
itemStyle: { itemStyle: {
emphasis: { emphasis: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)" shadowColor: 'rgba(0, 0, 0, 0.5)',
} },
} },
} },
] ],
}; };
chartPie.setOption(options, true); chartPie.setOption(options, true);
}, },
fmtLengend(name) { fmtLengend(name) {
let item = this.pieData.find(item => { const item = this.pieData.find((item) => {
return item.certName === name; return item.certName === name;
}); });
return (item && item.doneCount) || 0; return (item && item.doneCount) || 0;
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.chart-pie { .chart-pie {
position: relative; position: relative;
top: -6px; top: -6px;
......
<!-- Tabs组件 --> <!-- Tabs组件 -->
<template> <template>
<div class="common-process"> <div class="common-process">
<span class="bar" :style="{'width': width, 'background': barColor}"></span> <span
<span class="desc">{{value}}{{unitName}}</span> class="bar"
:style="{ width: width, background: barColor }"
/>
<span class="desc">{{ value }}{{ unitName }}</span>
</div> </div>
</template> </template>
<script> <script>
...@@ -10,31 +13,31 @@ export default { ...@@ -10,31 +13,31 @@ export default {
props: { props: {
max: { max: {
type: Number, type: Number,
default: 100 default: 100,
}, },
value: { value: {
type: Number, type: Number,
default: 100 default: 100,
}, },
barColor: { barColor: {
type: String, type: String,
default: '#adadad' default: '#adadad',
}, },
unitName: { unitName: {
type: String, type: String,
default: '分钟' default: '分钟',
} },
}, },
computed: { computed: {
width() { width() {
return Math.round((this.value / this.max) * 300) + 'px' return Math.round((this.value / this.max) * 300) + 'px';
} },
}, },
methods: {} methods: {},
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.common-process { .common-process {
width: 100%; width: 100%;
height: 20px; height: 20px;
......
<template> <template>
<!-- 专项合作列表 --> <!-- 专项合作列表 -->
<section class="coop-container"> <section class="coop-container">
<div <div
v-for="(item , index) in dataList" v-for="(item, index) in dataList"
:key="index" :key="index"
class="coop-item" class="coop-item"
@click="jumpByPType(item)" @click="jumpByPType(item)"
...@@ -11,89 +11,94 @@ ...@@ -11,89 +11,94 @@
<img :src="item.attachmentUrl"> <img :src="item.attachmentUrl">
</div> </div>
<div class="coop-item-right"> <div class="coop-item-right">
<span class="coop-item-right-title">{{item.projectName}}</span> <span class="coop-item-right-title">{{ item.projectName }}</span>
<span class="coop-item-right-other"> <span class="coop-item-right-other">
<img src="../../assets/images/org.png" > <img src="../../assets/images/org.png">
{{item.organizationNameList | subOrgNames}} {{ item.organizationNameList | subOrgNames }}
</span> </span>
<span v-if="item.pType == 1" <span
class="coop-item-right-other"> v-if="item.pType == 1"
<img src="../../assets/images/pub-time.png" > class="coop-item-right-other"
{{item.oldTime}} >
<img src="../../assets/images/pub-time.png">
{{ item.oldTime }}
</span> </span>
<span v-else <span
v-else
class="coop-item-right-other" class="coop-item-right-other"
><img src="../../assets/images/pub-time.png" > ><img src="../../assets/images/pub-time.png">
{{item.projectBegintimeLong | formatTime}}-{{item.projectEndtimeLong | formatTime}} {{ item.projectBegintimeLong | formatTime }}-{{
item.projectEndtimeLong | formatTime
}}
</span> </span>
</div> </div>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
import { goNativePage, goPageByNative, parseTime } from "@/utils/index"; import { goNativePage, goPageByNative, parseTime } from '@/utils/index';
import { BASE_URL } from '@/utils/enumerate'; import { BASE_URL } from '@/utils/enumerate';
const { NUXT_ENV_APP } = process.env; const { NUXT_ENV_APP } = process.env;
export default { export default {
name: "coop-list-item", name: 'CoopListItem',
data() {
return {
bgColor: "green"
};
},
props: {
dataList: {
type: Array,
default: () => []
},
},
mounted() {},
filters: { filters: {
subOrgNames(orgNameList) { subOrgNames(orgNameList) {
let allName = orgNameList[0]; let allName = orgNameList[0];
for(let i = 1; i < orgNameList.length; i ++) { for (let i = 1; i < orgNameList.length; i++) {
allName += `/${orgNameList[i]}` allName += `/${orgNameList[i]}`;
} }
if (allName && allName.length > 13) { if (allName && allName.length > 13) {
return allName.substring(0, 13) + '...' return allName.substring(0, 13) + '...';
} else { } else {
return allName return allName;
} }
}, },
// 将字符串截短至指定长度,并用在最后追加特定字符串(例如:...) // 将字符串截短至指定长度,并用在最后追加特定字符串(例如:...)
shortNameL(value, length = 15, append = '...') { shortNameL(value, length = 15, append = '...') {
if (value && value.length > length) { if (value && value.length > length) {
return value.substring(0, length) + append return value.substring(0, length) + append;
} else { } else {
return value return value;
} }
}, },
// 格式化日期 // 格式化日期
formatTime: function (timeStamp, format = '{yyyy}.{mm}.{dd}') { formatTime: function (timeStamp, format = '{yyyy}.{mm}.{dd}') {
return parseTime(timeStamp, format) return parseTime(timeStamp, format);
}, },
},
props: {
dataList: {
type: Array,
default: () => [],
},
},
data() {
return {
bgColor: 'green',
};
}, },
mounted() {},
methods: { methods: {
jumpByPType(pInfo) { jumpByPType(pInfo) {
this.$sendBuriedData && this.$sendBuriedData({ this.$sendBuriedData &&
component_tag: `467#400141#${pInfo.id}#${pInfo.projectName}`, this.$sendBuriedData({
class_name: `learning_report`, component_tag: `467#400141#${pInfo.id}#${pInfo.projectName}`,
url: `${BASE_URL[NUXT_ENV_APP]}/file/log/trace1` class_name: 'learning_report',
}); url: `${BASE_URL[NUXT_ENV_APP]}/file/log/trace1`,
if(pInfo.pType == 1) { });
if (pInfo.pType == 1) {
goNativePage(this, pInfo); goNativePage(this, pInfo);
} else { } else {
goPageByNative(this, `/lreport_ssr/?projectId=${pInfo.id}`); goPageByNative(this, `/lreport_ssr/?projectId=${pInfo.id}`);
} }
} },
} },
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="scss">
.coop-container { .coop-container {
position: relative; position: relative;
margin: 0px 15px; margin: 0px 15px;
...@@ -175,26 +180,26 @@ export default { ...@@ -175,26 +180,26 @@ export default {
} }
} }
} }
.update-dialog-content{ .update-dialog-content {
padding: 0 15px; padding: 0 15px;
box-sizing: border-box; box-sizing: border-box;
.title{ .title {
text-align: center; text-align: center;
color: #373839; color: #373839;
font-size: 18px; font-size: 18px;
padding: 15px 0; padding: 15px 0;
line-height: 25px; line-height: 25px;
} }
.update-btn{ .update-btn {
text-align: center; text-align: center;
height: 55px; height: 55px;
line-height: 55px; line-height: 55px;
font-size: 16px; font-size: 16px;
color: #979899; color: #979899;
&.confirm-btn{ &.confirm-btn {
color: #449284; color: #449284;
} }
&.v-hairline-top::after{ &.v-hairline-top::after {
border-top-width: 1px; border-top-width: 1px;
} }
} }
...@@ -203,4 +208,3 @@ export default { ...@@ -203,4 +208,3 @@ export default {
// background-color: rgba(0,0,0,0.5); // background-color: rgba(0,0,0,0.5);
// } // }
</style> </style>
...@@ -6,48 +6,51 @@ ...@@ -6,48 +6,51 @@
<li>课程时长</li> <li>课程时长</li>
<li>人均学习时长</li> <li>人均学习时长</li>
</ul> </ul>
<ul v-if="dataList.length" class="list"> <ul
<li v-for="(item, index) in dataList" :key="index"> v-if="dataList.length"
<span>{{item.courseName | shortName}}</span> class="list"
<span>{{item.courseTime | convert}}</span> >
<span>{{item.averageTime | convert}}</span> <li
v-for="(item, index) in dataList"
:key="index"
>
<span>{{ item.courseName | shortName }}</span>
<span>{{ item.courseTime | convert }}</span>
<span>{{ item.averageTime | convert }}</span>
</li> </li>
</ul> </ul>
<NoContent v-show="!dataList.length"></NoContent> <NoContent v-show="!dataList.length" />
</div> </div>
</template> </template>
<script> <script>
import NoContent from "@/components/bussiness/no-content"; import NoContent from '@/components/bussiness/no-content';
export default { export default {
components: { components: {
NoContent NoContent,
},
props: {
dataList: {
type: Array,
default: () => []
}
}, },
filters: { filters: {
shortName: function (value, length = 8, append = '...') { shortName: function (value, length = 8, append = '...') {
if (value && value.length > length) { if (value && value.length > length) {
return value.substring(0, length) + append return value.substring(0, length) + append;
} else { } else {
return value return value;
} }
}, },
convert: function (value, unitName = '分钟') { convert: function (value, unitName = '分钟') {
if(!value) return 0 + unitName; if (!value) return 0 + unitName;
return Math.ceil(value / 60) + unitName return Math.ceil(value / 60) + unitName;
}, },
}, },
methods: { props: {
dataList: {
type: Array,
default: () => [],
},
}, },
methods: {},
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="scss">
.corse-times-list { .corse-times-list {
font-size: 14px; font-size: 14px;
.title { .title {
...@@ -101,4 +104,4 @@ export default { ...@@ -101,4 +104,4 @@ export default {
} }
} }
} }
</style> </style>
\ No newline at end of file
<!-- 课程时长统计 --> <!-- 课程时长统计 -->
<template> <template>
<div> <div>
<ul class="lr-course-times" v-show="maxDuration > avgDuration"> <ul
v-show="maxDuration > avgDuration"
class="lr-course-times"
>
<li> <li>
<p> <p>
课程总时长 课程总时长
<span>(所有课程数 {{totalSize}}门)</span> <span>(所有课程数 {{ totalSize }}门)</span>
</p> </p>
<ProcessBar :processDataObj="processDataObj" :maxValue="maxDuration | convert" :value="maxDuration | convert"></ProcessBar> <ProcessBar
:process-data-obj="processDataObj"
:max-value="maxDuration | convert"
:value="maxDuration | convert"
/>
</li> </li>
<li> <li>
<p>平均学习时长</p> <p>平均学习时长</p>
<ProcessBar barColor="#FFB01A" :processDataObj="processDataObj" :maxValue="maxDuration | convert" :value="avgDuration | convert"></ProcessBar> <ProcessBar
bar-color="#FFB01A"
:process-data-obj="processDataObj"
:max-value="maxDuration | convert"
:value="avgDuration | convert"
/>
</li> </li>
</ul> </ul>
<ul class="lr-course-times" v-show="avgDuration > maxDuration"> <ul
v-show="avgDuration > maxDuration"
class="lr-course-times"
>
<li> <li>
<p> <p>
课程总时长 课程总时长
<span>(所有课程数 {{totalSize}}门)</span> <span>(所有课程数 {{ totalSize }}门)</span>
</p> </p>
<ProcessBar :processDataObj="processDataObj" :maxValue="avgDuration | convert" :value="maxDuration | convert"></ProcessBar> <ProcessBar
:process-data-obj="processDataObj"
:max-value="avgDuration | convert"
:value="maxDuration | convert"
/>
</li> </li>
<li> <li>
<p>平均学习时长</p> <p>平均学习时长</p>
<ProcessBar barColor="#FFB01A" :processDataObj="processDataObj" :maxValue="avgDuration | convert" :value="avgDuration | convert"></ProcessBar> <ProcessBar
bar-color="#FFB01A"
:process-data-obj="processDataObj"
:max-value="avgDuration | convert"
:value="avgDuration | convert"
/>
</li> </li>
</ul> </ul>
</div> </div>
</template> </template>
<script> <script>
import ProcessBar from "@/components/common/pica-process"; import ProcessBar from '@/components/common/pica-process';
export default { export default {
filters: {
// 将秒转换成分钟
convert: function (value) {
if (!value) return 0;
return Math.ceil(value / 60);
},
},
components: {
ProcessBar,
},
props: { props: {
totalSize: { totalSize: {
type: Number | String, type: Number,
default: 0 default: 0,
}, },
maxDuration: { maxDuration: {
type: Number | String, type: Number,
default: 100 default: 100,
}, },
avgDuration: { avgDuration: {
type: Number | String, type: Number,
default: 100 default: 100,
}, },
processDataObj: { processDataObj: {
type: Object, type: Object,
default: () => { default: () => {
return { return {
maxValue: 100, maxValue: 100,
value: 0 value: 0,
} };
} },
}, },
}, },
filters: { methods: {},
// 将秒转换成分钟
convert: function (value, unitName = '分钟') {
if(!value) return 0;
return Math.ceil(value / 60);
},
},
components: {
ProcessBar,
},
methods: {}
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.lr-course-times { .lr-course-times {
margin: 20px 15px; margin: 20px 15px;
li { li {
......
...@@ -5,42 +5,46 @@ ...@@ -5,42 +5,46 @@
<li>考试名</li> <li>考试名</li>
<li>参与通过率</li> <li>参与通过率</li>
</ul> </ul>
<ul v-if="dataList.length" class="list"> <ul
<li v-for="(item, index) in dataList" :key="index"> v-if="dataList.length"
<span>{{item.examName | shortName}}</span> class="list"
<span>{{(item.joinRate * 100).toFixed(1)}}%</span> >
<li
v-for="(item, index) in dataList"
:key="index"
>
<span>{{ item.examName | shortName }}</span>
<span>{{ (item.joinRate * 100).toFixed(1) }}%</span>
</li> </li>
</ul> </ul>
<NoContent v-show="!dataList.length"></NoContent> <NoContent v-show="!dataList.length" />
</div> </div>
</template> </template>
<script> <script>
import NoContent from "@/components/bussiness/no-content"; import NoContent from '@/components/bussiness/no-content';
export default { export default {
components: { components: {
NoContent NoContent,
},
props: {
dataList: {
type: Array,
default: () => []
}
}, },
filters: { filters: {
shortName: function (value, length = 12, append = '...') { shortName: function (value, length = 12, append = '...') {
if (value && value.length > length) { if (value && value.length > length) {
return value.substring(0, length) + append return value.substring(0, length) + append;
} else { } else {
return value return value;
} }
}, },
}, },
methods: { props: {
dataList: {
} type: Array,
default: () => [],
},
},
methods: {},
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="scss">
.exam-list-wrapper { .exam-list-wrapper {
font-size: 14px; font-size: 14px;
.title { .title {
...@@ -89,4 +93,4 @@ export default { ...@@ -89,4 +93,4 @@ export default {
} }
} }
} }
</style> </style>
\ No newline at end of file
<!-- 完成项目考试分数情况 --> <!-- 完成项目考试分数情况 -->
<template> <template>
<div class="exam-score-wrapper"> <div class="exam-score-wrapper">
<TipsInfo></TipsInfo> <TipsInfo />
<ul class="title"> <ul class="title">
<li>考试分数(分)</li> <li>考试分数(分)</li>
<li>考试人数(个)</li> <li>考试人数(个)</li>
</ul> </ul>
<ul v-if="dataList.length" class="list"> <ul
<li v-for="(item, index) in dataList" :key="index"> v-if="dataList.length"
<span>{{item.timesStr}}</span> class="list"
<span>{{item.count}}</span> >
<li
v-for="(item, index) in dataList"
:key="index"
>
<span>{{ item.timesStr }}</span>
<span>{{ item.count }}</span>
</li> </li>
</ul> </ul>
<NoContent v-show="!dataList.length"></NoContent> <NoContent v-show="!dataList.length" />
</div> </div>
</template> </template>
<script> <script>
import TipsInfo from '@/components/bussiness/tips-info' import TipsInfo from '@/components/bussiness/tips-info';
import NoContent from "@/components/bussiness/no-content"; import NoContent from '@/components/bussiness/no-content';
export default { export default {
components: { components: {
TipsInfo, TipsInfo,
NoContent NoContent,
}, },
props: { props: {
dataList: { dataList: {
type: Array, type: Array,
default: () => [] default: () => [],
} },
}, },
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="scss">
.exam-score-wrapper { .exam-score-wrapper {
font-size: 14px; font-size: 14px;
.title { .title {
...@@ -42,7 +47,7 @@ export default { ...@@ -42,7 +47,7 @@ export default {
justify-content: center; justify-content: center;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
border-bottom: 1px solid #f0f1f2; border-bottom: 1px solid #f0f1f2;
// background: #e3efed; // background: #e3efed;
// border-radius: 6px 6px 0px 0px; // border-radius: 6px 6px 0px 0px;
li { li {
...@@ -84,4 +89,4 @@ export default { ...@@ -84,4 +89,4 @@ export default {
} }
} }
} }
</style> </style>
\ No newline at end of file
<!-- 完成项目考试次数情况 --> <!-- 完成项目考试次数情况 -->
<template> <template>
<div class="exam-times-wrapper"> <div class="exam-times-wrapper">
<TipsInfo></TipsInfo> <TipsInfo />
<ul class="title"> <ul class="title">
<li>考试次数(次)</li> <li>考试次数(次)</li>
<li>考试人数(个)</li> <li>考试人数(个)</li>
</ul> </ul>
<ul v-if="dataList.length" class="list"> <ul
<li v-for="(item, index) in dataList" :key="index"> v-if="dataList.length"
<span>{{item.times}}</span> class="list"
<span>{{item.count}}</span> >
<li
v-for="(item, index) in dataList"
:key="index"
>
<span>{{ item.times }}</span>
<span>{{ item.count }}</span>
</li> </li>
</ul> </ul>
<NoContent v-show="!dataList.length"></NoContent> <NoContent v-show="!dataList.length" />
</div> </div>
</template> </template>
<script> <script>
import TipsInfo from '@/components/bussiness/tips-info' import TipsInfo from '@/components/bussiness/tips-info';
import NoContent from "@/components/bussiness/no-content"; import NoContent from '@/components/bussiness/no-content';
export default { export default {
components: { components: {
TipsInfo, TipsInfo,
NoContent NoContent,
}, },
props: { props: {
dataList: { dataList: {
type: Array, type: Array,
default: () => [] default: () => [],
} },
}, },
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="scss">
.exam-times-wrapper { .exam-times-wrapper {
font-size: 14px; font-size: 14px;
.title { .title {
...@@ -41,7 +47,7 @@ export default { ...@@ -41,7 +47,7 @@ export default {
justify-content: center; justify-content: center;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
border-bottom: 1px solid #f0f1f2; border-bottom: 1px solid #f0f1f2;
// background: #e3efed; // background: #e3efed;
// border-radius: 6px 6px 0px 0px; // border-radius: 6px 6px 0px 0px;
li { li {
...@@ -83,4 +89,4 @@ export default { ...@@ -83,4 +89,4 @@ export default {
} }
} }
} }
</style> </style>
\ No newline at end of file
...@@ -11,14 +11,14 @@ ...@@ -11,14 +11,14 @@
<script> <script>
export default { export default {
name: "no-content", name: 'NoContent',
data() { data() {
return {}; return {};
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.nc-container { .nc-container {
display: flex; display: flex;
width: 100%; width: 100%;
...@@ -43,4 +43,3 @@ export default { ...@@ -43,4 +43,3 @@ export default {
} }
} }
</style> </style>
...@@ -2,85 +2,126 @@ ...@@ -2,85 +2,126 @@
<template> <template>
<div class="corse-times-list"> <div class="corse-times-list">
<ul class="title"> <ul class="title">
<li :class="{'active': cIndex === 0}" @click="tabClick(0)">{{ certFlag ? '已获证' : '已完成'}}</li> <li
<li :class="{'active': cIndex === 1}" @click="tabClick(1)">{{ certFlag ? '未获证' : '未完成'}}</li> :class="{ active: cIndex === 0 }"
<li :class="{'active': cIndex === 2}" @click="tabClick(2)">未参与</li> @click="tabClick(0)"
>
{{ certFlag ? '已获证' : '已完成' }}
</li>
<li
:class="{ active: cIndex === 1 }"
@click="tabClick(1)"
>
{{ certFlag ? '未获证' : '未完成' }}
</li>
<li
:class="{ active: cIndex === 2 }"
@click="tabClick(2)"
>
未参与
</li>
</ul> </ul>
<ul v-show="cIndex === 0" class="list"> <ul
<li v-for="(item, index) in certUserList" :key="index"> v-show="cIndex === 0"
<span>{{(item.doctorName || '- ' ) | shortName}}</span> class="list"
<span>{{(item.departmentName || '- ') | shortName}}</span> >
<span v-show="containOfficialFlag">成绩 {{item.score || '- '}}</span> <li
v-for="(item, index) in certUserList"
:key="index"
>
<span>{{ (item.doctorName || '- ') | shortName }}</span>
<span>{{ (item.departmentName || '- ') | shortName }}</span>
<span
v-show="containOfficialFlag"
>成绩 {{ item.score || '- ' }}</span>
</li> </li>
</ul> </ul>
<ul v-show="cIndex === 1" class="list"> <ul
<li v-for="(item, index) in noCertUserList" :key="index"> v-show="cIndex === 1"
<span>{{(item.doctorName || '- ') | shortName}}</span> class="list"
<span>{{(item.departmentName || '- ') | shortName}}</span> >
<li
v-for="(item, index) in noCertUserList"
:key="index"
>
<span>{{ (item.doctorName || '- ') | shortName }}</span>
<span>{{ (item.departmentName || '- ') | shortName }}</span>
<span v-show="containOfficialFlag">- </span> <span v-show="containOfficialFlag">- </span>
</li> </li>
</ul> </ul>
<ul v-show="cIndex === 2" class="list"> <ul
<li v-for="(item, index) in noJoinList" :key="index"> v-show="cIndex === 2"
<span>{{(item.doctorName || '- ') | shortName}}</span> class="list"
<span>{{(item.departmentName || '- ') | shortName}}</span> >
<li
v-for="(item, index) in noJoinList"
:key="index"
>
<span>{{ (item.doctorName || '- ') | shortName }}</span>
<span>{{ (item.departmentName || '- ') | shortName }}</span>
<span v-show="containOfficialFlag">- </span> <span v-show="containOfficialFlag">- </span>
</li> </li>
</ul> </ul>
<NoContent v-show="((cIndex === 0 && !certUserList.length) || (cIndex === 1 && !noCertUserList.length) || (cIndex === 2 && !noJoinList.length))"></NoContent> <NoContent
v-show="
(cIndex === 0 && !certUserList.length) ||
(cIndex === 1 && !noCertUserList.length) ||
(cIndex === 2 && !noJoinList.length)
"
/>
</div> </div>
</template> </template>
<script> <script>
import NoContent from "@/components/bussiness/no-content"; import NoContent from '@/components/bussiness/no-content';
export default { export default {
components: { components: {
NoContent NoContent,
}, },
data() { filters: {
return { shortName: function (value, length = 5, append = '...') {
cIndex: 0, if (value && value.length > length) {
hasClicked: [true, false, false] return value.substring(0, length) + append;
} } else {
return value;
}
},
}, },
props: { props: {
certUserList: { certUserList: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
noCertUserList: { noCertUserList: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
noJoinList: { noJoinList: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
tabIndex: { tabIndex: {
type: String | Number, type: Number,
default: 0 default: 0,
}, },
certFlag: { certFlag: {
type: String | Number, type: Number,
default: 0 default: 0,
}, },
containOfficialFlag: { containOfficialFlag: {
type: String | Number, type: Number,
default: 0 default: 0,
} },
},
data() {
return {
cIndex: 0,
hasClicked: [true, false, false],
};
}, },
watch: { watch: {
tabIndex(newVal) { tabIndex(newVal) {
this.cIndex = newVal; this.cIndex = newVal;
}
},
filters: {
shortName: function (value, length = 5, append = '...') {
if (value && value.length > length) {
return value.substring(0, length) + append
} else {
return value
}
}, },
}, },
methods: { methods: {
...@@ -91,11 +132,11 @@ export default { ...@@ -91,11 +132,11 @@ export default {
// this.$emit('orgDoctorTabChange', index); // this.$emit('orgDoctorTabChange', index);
// } // }
this.$emit('orgDoctorTabChange', index); this.$emit('orgDoctorTabChange', index);
} },
} },
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="scss">
.corse-times-list { .corse-times-list {
font-size: 14px; font-size: 14px;
.title { .title {
...@@ -105,7 +146,7 @@ export default { ...@@ -105,7 +146,7 @@ export default {
justify-content: space-between; justify-content: space-between;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
background: #F8F9FA; background: #f8f9fa;
li { li {
position: relative; position: relative;
top: 0; top: 0;
...@@ -131,7 +172,6 @@ export default { ...@@ -131,7 +172,6 @@ export default {
} }
} }
} }
} }
.list { .list {
font-size: 16px; font-size: 16px;
...@@ -156,4 +196,4 @@ export default { ...@@ -156,4 +196,4 @@ export default {
} }
} }
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div class="pop-notice-wrapper"> <div class="pop-notice-wrapper">
<div class="mask"></div> <div class="mask" />
<div class="content"> <div class="content">
<div class="top"> <div class="top">
<!-- <span class="title">{{noticeData.noticeTitle | shortName(20)}}</span> --> <!-- <span class="title">{{noticeData.noticeTitle | shortName(20)}}</span> -->
...@@ -10,8 +10,11 @@ ...@@ -10,8 +10,11 @@
{{ tipsContent }} {{ tipsContent }}
</span> </span>
</div> </div>
<div class="line"></div> <div class="line" />
<div class="bottom" @click="clickTips"> <div
class="bottom"
@click="clickTips"
>
<span>我知道了</span> <span>我知道了</span>
</div> </div>
</div> </div>
...@@ -20,39 +23,39 @@ ...@@ -20,39 +23,39 @@
<script> <script>
export default { export default {
data() { filters: {
return {}; shortContent(value, maxLength = 18) {
if (value && value.length > maxLength) {
return value.substr(0, maxLength) + '...';
}
},
}, },
props: { props: {
popText: { popText: {
type: String, type: String,
default: "" default: '',
}, },
btnText: { btnText: {
type: String, type: String,
default: "" default: '',
}, },
tipsContent: { tipsContent: {
type: String, type: String,
default: "是已获证人数/应参与人数*100%" default: '是已获证人数/应参与人数*100%',
} },
}, },
filters: { data() {
shortContent(value, maxLength = 18) { return {};
if(value && value.length > maxLength) {
return value.substr(0, maxLength) + '...'
}
}
}, },
methods: { methods: {
clickTips() { clickTips() {
this.$emit("clickTips"); this.$emit('clickTips');
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.pop-notice-wrapper { .pop-notice-wrapper {
position: fixed; position: fixed;
width: 100%; width: 100%;
...@@ -121,4 +124,3 @@ export default { ...@@ -121,4 +124,3 @@ export default {
} }
} }
</style> </style>
<!-- 完成天数排名组件 --> <!-- 完成天数排名组件 -->
<template> <template>
<div> <div>
<ul v-if="rankList.length" class="rank-item-days"> <ul
<li v-for="(item, index) in rankList" :key="index"> v-if="rankList.length"
class="rank-item-days"
>
<li
v-for="(item, index) in rankList"
:key="index"
>
<div class="order"> <div class="order">
<img v-if="index === 0 || index === 1 || index === 2" :src="getRankImgUrl(index)" alt=""> <img
<span v-else>{{index + 1}}</span> v-if="index === 0 || index === 1 || index === 2"
:src="getRankImgUrl(index)"
alt=""
>
<span v-else>{{ index + 1 }}</span>
</div> </div>
<div class="content"> <div class="content">
<p class="desc-3">{{item.subName | shortName}}</p> <p class="desc-3">
{{ item.subName | shortName }}
</p>
<!-- <p class="desc-2">完成人数 8860 | 参与人数 101</p> --> <!-- <p class="desc-2">完成人数 8860 | 参与人数 101</p> -->
</div> </div>
<div class="ratio"> <div class="ratio">
<p class="desc-1">{{(item.costTime || 0).toFixed(1) }}</p> <p class="desc-1">
<p class="desc-2">完成天数</p> {{ (item.costTime || 0).toFixed(1) }}
</p>
<p class="desc-2">
完成天数
</p>
</div> </div>
</li> </li>
</ul> </ul>
<NoContent v-show="!rankList.length"></NoContent> <NoContent v-show="!rankList.length" />
</div> </div>
</template> </template>
<script> <script>
import NoContent from "@/components/bussiness/no-content"; import NoContent from '@/components/bussiness/no-content';
export default { export default {
components: { components: {
NoContent NoContent,
},
props: {
rankList: {
type: Array,
default: () => []
}
}, },
filters: { filters: {
shortName: function (value, length = 12, append = '...') { shortName: function (value, length = 12, append = '...') {
if (value && value.length > length) { if (value && value.length > length) {
return value.substring(0, length) + append return value.substring(0, length) + append;
} else { } else {
return value return value;
} }
}, },
}, },
props: {
rankList: {
type: Array,
default: () => [],
},
},
methods: { methods: {
getRankImgUrl(index) { getRankImgUrl(index) {
return require(`../../assets/images/rank-${index + 1}.png`); return require(`../../assets/images/rank-${index + 1}.png`);
} },
}, },
} };
</script> </script>
<style scoped lang="less"> <style scoped lang="scss">
.rank-item-days { .rank-item-days {
margin: 0 15px; margin: 0 15px;
li { li {
...@@ -106,4 +121,4 @@ export default { ...@@ -106,4 +121,4 @@ export default {
color: #373839; color: #373839;
} }
} }
</style> </style>
\ No newline at end of file
<!-- 培训情况排名组件 --> <!-- 培训情况排名组件 -->
<template> <template>
<div> <div>
<ul v-if="rankList.length" class="rank-item"> <ul
<li v-for="(item, index) in rankList" :key="index"> v-if="rankList.length"
class="rank-item"
>
<li
v-for="(item, index) in rankList"
:key="index"
>
<div class="order"> <div class="order">
<img v-if="index === 0 || index === 1 || index === 2" :src="getRankImgUrl(index)" alt /> <img
<span v-else>{{index + 1}}</span> v-if="index === 0 || index === 1 || index === 2"
:src="getRankImgUrl(index)"
alt
>
<span v-else>{{ index + 1 }}</span>
</div> </div>
<div class="content"> <div class="content">
<span class="desc-1">{{item.subName | shortName}}</span> <span class="desc-1">{{ item.subName | shortName }}</span>
<span class="desc-2">{{certFlag ? '获证人数' : '完成人数'}} {{item.certCount}} | 参与人数 {{item.joinCount}}</span> <span
class="desc-2"
>{{ certFlag ? '获证人数' : '完成人数' }} {{ item.certCount }} |
参与人数 {{ item.joinCount }}</span>
</div> </div>
<div class="ratio"> <div class="ratio">
<span class="desc-1">{{(item.certRate * 100).toFixed(1)}}%</span> <span class="desc-1">{{ (item.certRate * 100).toFixed(1) }}%</span>
<span class="desc-2">{{certFlag ? '获证比例' : '完成比例'}}</span> <span class="desc-2">{{ certFlag ? '获证比例' : '完成比例' }}</span>
</div> </div>
</li> </li>
</ul> </ul>
<NoContent v-if="!rankList.length"></NoContent> <NoContent v-if="!rankList.length" />
</div> </div>
</template> </template>
<script> <script>
import NoContent from "@/components/bussiness/no-content"; import NoContent from '@/components/bussiness/no-content';
export default { export default {
components: { components: {
NoContent NoContent,
},
props: {
rankList: {
type: Array,
default: () => []
},
certFlag: {
type: String | Number,
default: 0
}
}, },
filters: { filters: {
shortName: function (value, length = 12, append = '...') { shortName: function (value, length = 12, append = '...') {
if (value && value.length > length) { if (value && value.length > length) {
return value.substring(0, length) + append return value.substring(0, length) + append;
} else { } else {
return value return value;
} }
}, },
}, },
props: {
rankList: {
type: Array,
default: () => [],
},
certFlag: {
type: Number,
default: 0,
},
},
methods: { methods: {
getRankImgUrl(index) { getRankImgUrl(index) {
return require(`../../assets/images/rank-${index + 1}.png`); return require(`../../assets/images/rank-${index + 1}.png`);
} },
} },
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="scss">
.rank-item { .rank-item {
margin: 0 15px; margin: 0 15px;
li { li {
...@@ -106,4 +119,4 @@ export default { ...@@ -106,4 +119,4 @@ export default {
color: #979899; color: #979899;
} }
} }
</style> </style>
\ No newline at end of file
<!-- 提示信息:报表专用 -->
<template>
<div class="tips-info-wrapper">
<span>{{ content }}</span>
</div>
</template>
<script>
export default {
props: {
content: {
type: String,
default: '报表数据来源包括用户参加正式考试,不包含摸底考试',
},
},
};
</script>
<style lang="scss" scoped>
.tips-info-wrapper {
height: 44px;
line-height: 44px;
font-size: 20px;
padding: 0 15px;
text-align: center;
span {
display: inline-block;
width: 100%;
font-size: 13px;
font-weight: 400;
color: #676869;
}
}
</style>
<!-- 提示信息 -->
<template>
<div class="tips-info-wrapper">
<span>{{ content }}</span>
</div>
</template>
<script>
export default {
props: {
content: {
type: String,
default: '报表数据来源包括用户参加正式考试,不包含摸底考试',
},
},
};
</script>
<style lang="scss" scoped>
.tips-info-wrapper {
height: 44px;
line-height: 44px;
font-size: 20px;
padding: 0 15px;
span {
display: inline-block;
width: 100%;
font-size: 13px;
font-weight: 400;
color: #676869;
border-bottom: 1px solid #f0f1f2;
}
}
</style>
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
<template> <template>
<div class="common-title-wrapper-point"> <div class="common-title-wrapper-point">
<ul class="mini"> <ul class="mini">
<li class="left">{{title}}</li> <li class="left">
{{ title }}
</li>
<li class="right"> <li class="right">
<span>培训前正确率</span> <span>培训前正确率</span>
<span>培训后正确率</span> <span>培训后正确率</span>
...@@ -15,13 +17,13 @@ export default { ...@@ -15,13 +17,13 @@ export default {
props: { props: {
title: { title: {
type: String, type: String,
default: "证书分布情况" default: '证书分布情况',
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.common-title-wrapper-point { .common-title-wrapper-point {
position: fixed; position: fixed;
width: 100%; width: 100%;
...@@ -60,21 +62,21 @@ export default { ...@@ -60,21 +62,21 @@ export default {
margin-left: 10px; margin-left: 10px;
&:nth-child(1)::before { &:nth-child(1)::before {
display: inline-block; display: inline-block;
content: ""; content: '';
width: 9px; width: 9px;
height: 9px; height: 9px;
margin-right: 3px; margin-right: 3px;
border-radius: 5px; border-radius: 5px;
background: #FFB01B; background: #ffb01b;
} }
&:nth-child(2)::before { &:nth-child(2)::before {
display: inline-block; display: inline-block;
content: ""; content: '';
width: 9px; width: 9px;
height: 9px; height: 9px;
margin-right: 3px; margin-right: 3px;
border-radius: 5px; border-radius: 5px;
background: #39AF9A; background: #39af9a;
} }
} }
} }
......
<!-- 区域与机构选择(表头)组件 -->
<template> <template>
<ul class="common-area-select"> <ul class="common-area-select">
<li class="center" @click="areaClick"> <li
<span><img class="map" src="../../assets/images/map-icon.png"/>{{areaName}}</span><img v-show="!showArea" src="../../assets/images/arr-down.png"/><img v-show="showArea" src="../../assets/images/arr-up.png"/> class="center"
@click="areaClick"
>
<span><img
class="map"
src="../../assets/images/map-icon.png"
>{{
areaName
}}</span><img
v-show="!showArea"
src="../../assets/images/arr-down.png"
><img
v-show="showArea"
src="../../assets/images/arr-up.png"
>
</li> </li>
</ul> </ul>
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; import { mapGetters } from 'vuex';
export default { export default {
props: { props: {
areaName: { areaName: {
type: String, type: String,
default: "全部" default: '全部',
}, },
showArea: { showArea: {
type: Boolean, type: Boolean,
...@@ -21,19 +34,19 @@ export default { ...@@ -21,19 +34,19 @@ export default {
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
areaDegree: 'areaDegree' areaDegree: 'areaDegree',
}), }),
}, },
methods: { methods: {
areaClick() { areaClick() {
this.$emit("areaClick"); this.$emit('areaClick');
}, },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.common-area-select { .common-area-select {
&.fixed { &.fixed {
position: fixed; position: fixed;
...@@ -63,9 +76,9 @@ export default { ...@@ -63,9 +76,9 @@ export default {
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;
color: #676869; color: #676869;
background: #F8F9FA; background: #f8f9fa;
&.gray { &.gray {
color: #C7C8C9; color: #c7c8c9;
} }
.map { .map {
position: relative; position: relative;
......
<!-- (最下面)更多信息组件 --> <!-- (最下面)更多信息组件 -->
<template> <template>
<div class="common-bottom-info"> <div class="common-bottom-info">
<span>{{infoMsg1}}</span> <span>{{ infoMsg1 }}</span>
<span>{{infoMsg2}}</span> <span>{{ infoMsg2 }}</span>
</div> </div>
</template> </template>
<script> <script>
...@@ -10,16 +10,16 @@ export default { ...@@ -10,16 +10,16 @@ export default {
props: { props: {
infoMsg1: { infoMsg1: {
type: String, type: String,
default: "更多报告信息请前往" default: '更多报告信息请前往',
}, },
infoMsg2: { infoMsg2: {
type: String, type: String,
default: "【云鹊医官网电脑端-工作站-学情报告】查看" default: '【云鹊医官网电脑端-工作站-学情报告】查看',
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.common-bottom-info { .common-bottom-info {
display: flex; display: flex;
width: 100%; width: 100%;
...@@ -40,4 +40,4 @@ export default { ...@@ -40,4 +40,4 @@ export default {
padding-top: 10px; padding-top: 10px;
} }
} }
</style> </style>
\ No newline at end of file
<!-- Card组件(支持两列、三列甚至四列) --> <!-- Card组件(支持两列、三列甚至四列) -->
<template> <template>
<div class="common-card" :class="{'bg': needBG}"> <div
<ul v-for="(item, index) in cardList" :key="index"> class="common-card"
<li :class="{'bgf': needBG}">{{item.count}}{{item.unitName}}</li> :class="{ bg: needBG }"
<li :class="{'bgf': needBG}">{{item.description}}</li> >
<ul
v-for="(item, index) in cardList"
:key="index"
>
<li :class="{ bgf: needBG }">
{{ item.count }}{{ item.unitName }}
</li>
<li :class="{ bgf: needBG }">
{{ item.description }}
</li>
</ul> </ul>
</div> </div>
</template> </template>
...@@ -12,18 +22,18 @@ export default { ...@@ -12,18 +22,18 @@ export default {
props: { props: {
cardList: { cardList: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
needBG: { needBG: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
methods: {} methods: {},
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.common-card { .common-card {
display: flex; display: flex;
margin: 30px 15px; margin: 30px 15px;
......
<!-- 通用Navbar --> <!-- 通用Navbar -->
<template> <template>
<section :class="isFixNavbar ? 'nav-top-new fixed' : 'nav-top-new'" :style="'height:' + navHeight"> <section
:class="isFixNavbar ? 'nav-top-new fixed' : 'nav-top-new'"
:style="'height:' + navHeight"
>
<div <div
class="nav-part-new" class="nav-part-new"
:style="'background:' + bgColor + ';' :style="
+ 'padding-top:' + paddingTop + ';border-bottom:' + borderStyle" 'background:' +
bgColor +
';' +
'padding-top:' +
paddingTop +
';border-bottom:' +
borderStyle
"
> >
<div class="nav-title-new"> <div class="nav-title-new">
<span class="nav-back" @click="goBack"> <span
<img v-show="isBlack" src="../../assets/images/left-arrow-black.png" alt=""> class="nav-back"
<img v-show="!isBlack" src="../../assets/images/left-arrow-black.png" alt=""> @click="goBack"
>
<img
v-show="isBlack"
src="../../assets/images/left-arrow-black.png"
alt=""
>
<img
v-show="!isBlack"
src="../../assets/images/left-arrow-black.png"
alt=""
>
</span> </span>
<span class="nav-title-new-title" v-show="bgColor!=='none'">{{title}}</span> <span
<span v-show="isShowShare" class="nav-share" @click="goShare"> v-show="bgColor !== 'none'"
class="nav-title-new-title"
>{{
title
}}</span>
<span
v-show="isShowShare"
class="nav-share"
@click="goShare"
>
<img <img
src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/eagle_plan/courses/Group17_hover%403x.png" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/eagle_plan/courses/Group17_hover%403x.png"
> >
</span> </span>
<span v-show="isShowKf && !isWeb" class="nav-share" @click="goKf"> <span
<img src="../../assets/images/kf.png" alt=""> v-show="isShowKf && !isWeb"
class="nav-share"
@click="goKf"
>
<img
src="../../assets/images/kf.png"
alt=""
>
</span> </span>
</div> </div>
</div> </div>
...@@ -27,68 +64,68 @@ ...@@ -27,68 +64,68 @@
<script> <script>
import { goKfFn } from '@/utils/kf'; import { goKfFn } from '@/utils/kf';
export default { export default {
name: "common-navbar-new", name: 'CommonNavbarNew',
data() {
return {
navbarHeight: 28,
contentHeight: 35,
fontSize: 37.5,
content: "",
shareImageUrl:
"https://file.yunqueyi.com/logo.png?version=" + new Date().getTime(),
isWeb: false
};
},
props: { props: {
bgColor: { bgColor: {
type: String, type: String,
default: "" default: '',
}, },
title: { title: {
type: String, type: String,
default: "暂无数据" default: '暂无数据',
}, },
// 是否fix定位 // 是否fix定位
isFixNavbar: { isFixNavbar: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
burialPoint: { burialPoint: {
default: "", default: '',
type: String type: String,
}, },
backMethod: { backMethod: {
type: String, type: String,
default: "native" // inner native default: 'native', // inner native
}, },
isShowShare: { isShowShare: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
isShowKf: { isShowKf: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
borderStyle: { borderStyle: {
type: String, type: String,
default: "0px solid #e7e7e7" default: '0px solid #e7e7e7',
}, },
isBlack: { isBlack: {
type: Boolean, type: Boolean,
default: true default: true,
} },
},
data() {
return {
navbarHeight: 28,
contentHeight: 35,
fontSize: 37.5,
content: '',
shareImageUrl:
'https://file.yunqueyi.com/logo.png?version=' + new Date().getTime(),
isWeb: false,
};
}, },
computed: { computed: {
navHeight() { navHeight() {
if (this.isFixNavbar) { if (this.isFixNavbar) {
return '54px'; return '54px';
} else { } else {
return (this.navbarHeight + this.contentHeight) / this.fontSize + "rem"; return (this.navbarHeight + this.contentHeight) / this.fontSize + 'rem';
} }
}, },
paddingTop() { paddingTop() {
return this.navbarHeight / this.fontSize + "rem"; return this.navbarHeight / this.fontSize + 'rem';
} },
}, },
created() { created() {
if (process.client) { if (process.client) {
...@@ -96,40 +133,39 @@ export default { ...@@ -96,40 +133,39 @@ export default {
} }
}, },
mounted() { mounted() {
let htmlDom = document.getElementsByTagName("html")[0].style.fontSize; const htmlDom = document.getElementsByTagName('html')[0].style.fontSize;
this.fontSize = htmlDom; this.fontSize = htmlDom;
}, },
methods: { methods: {
//返回 // 返回
goBack() { goBack() {
if(this.$rocNative.isWeb) { if (this.$rocNative.isWeb) {
this.$router.back(-1); this.$router.back(-1);
} else { } else {
this.$rocNative.goBack(); this.$rocNative.goBack();
} }
}, },
//分享 // 分享
goShare() { goShare() {
let url = location.href, this.$rocNative.shareWechat({
_this = this;
rocNative.shareWechat({
type: 6, type: 6,
shareId: 0, shareId: 0,
shareUrl: 'shareUrl', shareUrl: 'shareUrl',
title1: "this.shareTitle1", title1: 'this.shareTitle1',
title2: "this.shareTitle2", title2: 'this.shareTitle2',
shareImageUrl: "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime() shareImageUrl:
'https://file.yunqueyi.com/logo.png?version=' + new Date().getTime(),
}); });
}, },
goKf() { goKf() {
goKfFn({ goKfFn({
code: '0002' code: '0002',
}) });
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.back { .back {
position: absolute; position: absolute;
left: 0px; left: 0px;
...@@ -228,4 +264,4 @@ export default { ...@@ -228,4 +264,4 @@ export default {
width: 20px; width: 20px;
} }
} }
</style> </style>
\ No newline at end of file
<!-- 通用Navbar --> <!-- 通用Navbar -->
<template> <template>
<section :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight"> <section
:class="isFixNavbar ? 'nav-top fixed' : 'nav-top'"
:style="'height:' + navHeight"
>
<div <div
class="nav-part" class="nav-part"
:style="'background:' + bgColor + ';' :style="
+ 'padding-top:' + paddingTop + ';border-bottom:' + borderStyle" 'background:' +
bgColor +
';' +
'padding-top:' +
paddingTop +
';border-bottom:' +
borderStyle
"
> >
<div class="nav-title"> <div class="nav-title">
<span class="nav-back" @click="goBack"> <span
<img v-show="isBlack" src="../../assets/images/left-arrow-black.png" alt=""> class="nav-back"
<img v-show="!isBlack" src="../../assets/images/left-arrow-black.png" alt=""> @click="goBack"
>
<img
v-show="isBlack"
src="../../assets/images/left-arrow-black.png"
alt=""
>
<img
v-show="!isBlack"
src="../../assets/images/left-arrow-black.png"
alt=""
>
</span> </span>
<span class="nav-title-title" v-show="bgColor!=='none'">{{title}}</span> <span
<span v-show="isShowShare" class="nav-share" @click="goShare"> v-show="bgColor !== 'none'"
class="nav-title-title"
>{{
title
}}</span>
<span
v-show="isShowShare"
class="nav-share"
@click="goShare"
>
<img <img
src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/eagle_plan/courses/Group17_hover%403x.png" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/eagle_plan/courses/Group17_hover%403x.png"
> >
</span> </span>
<span v-show="isShowKf && !isWeb" class="nav-share" @click="goKf"> <span
<img src="../../assets/images/kf.png" alt=""> v-show="isShowKf && !isWeb"
class="nav-share"
@click="goKf"
>
<img
src="../../assets/images/kf.png"
alt=""
>
</span> </span>
</div> </div>
</div> </div>
...@@ -27,68 +64,68 @@ ...@@ -27,68 +64,68 @@
<script> <script>
import { goKfFn } from '@/utils/kf'; import { goKfFn } from '@/utils/kf';
export default { export default {
name: "common-navbar", name: 'CommonNavbar',
data() {
return {
navbarHeight: 28,
contentHeight: 35,
fontSize: 37.5,
content: "",
shareImageUrl:
"https://file.yunqueyi.com/logo.png?version=" + new Date().getTime(),
isWeb: false
};
},
props: { props: {
bgColor: { bgColor: {
type: String, type: String,
default: "" default: '',
}, },
title: { title: {
type: String, type: String,
default: "暂无数据" default: '暂无数据',
}, },
// 是否fix定位 // 是否fix定位
isFixNavbar: { isFixNavbar: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
burialPoint: { burialPoint: {
default: "", default: '',
type: String type: String,
}, },
backMethod: { backMethod: {
type: String, type: String,
default: "native" // inner native default: 'native', // inner native
}, },
isShowShare: { isShowShare: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
isShowKf: { isShowKf: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
borderStyle: { borderStyle: {
type: String, type: String,
default: "0px solid #e7e7e7" default: '0px solid #e7e7e7',
}, },
isBlack: { isBlack: {
type: Boolean, type: Boolean,
default: true default: true,
} },
},
data() {
return {
navbarHeight: 28,
contentHeight: 35,
fontSize: 37.5,
content: '',
shareImageUrl:
'https://file.yunqueyi.com/logo.png?version=' + new Date().getTime(),
isWeb: false,
};
}, },
computed: { computed: {
navHeight() { navHeight() {
if (this.isFixNavbar) { if (this.isFixNavbar) {
return '54px'; return '54px';
} else { } else {
return (this.navbarHeight + this.contentHeight) / this.fontSize + "rem"; return (this.navbarHeight + this.contentHeight) / this.fontSize + 'rem';
} }
}, },
paddingTop() { paddingTop() {
return this.navbarHeight / this.fontSize + "rem"; return this.navbarHeight / this.fontSize + 'rem';
} },
}, },
created() { created() {
if (process.client) { if (process.client) {
...@@ -96,29 +133,28 @@ export default { ...@@ -96,29 +133,28 @@ export default {
} }
}, },
mounted() { mounted() {
let htmlDom = document.getElementsByTagName("html")[0].style.fontSize; const htmlDom = document.getElementsByTagName('html')[0].style.fontSize;
this.fontSize = htmlDom; this.fontSize = htmlDom;
}, },
methods: { methods: {
//返回 // 返回
goBack() { goBack() {
if(this.$rocNative.isWeb) { if (this.$rocNative.isWeb) {
this.$router.back(-1); this.$router.back(-1);
} else { } else {
this.$rocNative.goBack(); this.$rocNative.goBack();
} }
}, },
//分享 // 分享
goShare() { goShare() {
let url = location.href, this.rocNative.shareWechat({
_this = this;
rocNative.shareWechat({
type: 6, type: 6,
shareId: 0, shareId: 0,
shareUrl: 'shareUrl', shareUrl: 'shareUrl',
title1: "this.shareTitle1", title1: 'this.shareTitle1',
title2: "this.shareTitle2", title2: 'this.shareTitle2',
shareImageUrl: "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime() shareImageUrl:
'https://file.yunqueyi.com/logo.png?version=' + new Date().getTime(),
}); });
}, },
goKf() { goKf() {
...@@ -126,13 +162,13 @@ export default { ...@@ -126,13 +162,13 @@ export default {
code: '0002', code: '0002',
type: 1, type: 1,
contentType: 1, contentType: 1,
contentName:this.title contentName: this.title,
}) });
} },
} },
} };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.back { .back {
position: absolute; position: absolute;
left: 0px; left: 0px;
...@@ -238,4 +274,4 @@ export default { ...@@ -238,4 +274,4 @@ export default {
width: 20px; width: 20px;
} }
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div class="common-loader loader--style3" title="2"> <div
<div class="loader-mask"></div> class="common-loader loader--style3"
title="2"
>
<div class="loader-mask" />
<svg <svg
version="1.1"
id="loader-1" id="loader-1"
version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" x="0px"
...@@ -11,7 +14,7 @@ ...@@ -11,7 +14,7 @@
width="40" width="40"
height="40" height="40"
viewBox="0 0 60 60" viewBox="0 0 60 60"
style="enable-background:new 0 0 80 80;" style="enable-background: new 0 0 80 80"
xml:space="preserve" xml:space="preserve"
> >
<path <path
...@@ -32,7 +35,7 @@ ...@@ -32,7 +35,7 @@
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="scss" scoped>
.common-loader { .common-loader {
.loader-mask { .loader-mask {
position: fixed; position: fixed;
......
<template> <template>
<section class="no-more"> <section class="no-more">
<span class="no-more-sub"></span> <span class="no-more-sub" />
<span class="no-more-text">{{noMoreText}}</span> <span class="no-more-text">{{ noMoreText }}</span>
<span class="no-more-sub"></span> <span class="no-more-sub" />
</section> </section>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
noMoreText: '到底啦' noMoreText: '到底啦',
} };
} },
} };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.no-more { .no-more {
display: flex; display: flex;
height: 62px; height: 62px;
...@@ -24,13 +24,13 @@ export default { ...@@ -24,13 +24,13 @@ export default {
align-items: center; align-items: center;
&-sub { &-sub {
width: 84px; width: 84px;
border: 1px solid #F7F7F7; border: 1px solid #f7f7f7;
border-bottom: 0; border-bottom: 0;
} }
&-text { &-text {
padding: 0 8px; padding: 0 8px;
font-size: 14px; font-size: 14px;
color: #BEC2CC; color: #bec2cc;
} }
} }
</style> </style>
<!-- Tabs组件 --> <!-- Tabs组件 -->
<template> <template>
<div class="common-show-all" @click.prevent="action"> <div
class="common-show-all"
@click.prevent="action"
>
<span> <span>
查看全部 查看全部
<img src="../../assets/images/right-arrow-grey.png"/> <img src="../../assets/images/right-arrow-grey.png">
</span> </span>
</div> </div>
</template> </template>
...@@ -12,22 +15,22 @@ export default { ...@@ -12,22 +15,22 @@ export default {
props: { props: {
title: { title: {
type: String, type: String,
default: "2019基础高血压管理" default: '2019基础高血压管理',
}, },
needRightBtn: { needRightBtn: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}, },
methods: { methods: {
action() { action() {
this.$emit('action') this.$emit('action');
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.common-show-all { .common-show-all {
display: flex; display: flex;
width: 100%; width: 100%;
...@@ -35,7 +38,6 @@ export default { ...@@ -35,7 +38,6 @@ export default {
line-height: 14px; line-height: 14px;
margin: 20px 0; margin: 20px 0;
text-align: center; text-align: center;
font-weight: 17px;
span { span {
flex: 1; flex: 1;
display: inline-block; display: inline-block;
......
...@@ -2,25 +2,25 @@ ...@@ -2,25 +2,25 @@
<template> <template>
<div <div
class="common-split-line" class="common-split-line"
:style="{'height': height, 'background-color': bgColor}" :style="{ height: height, 'background-color': bgColor }"
></div> />
</template> </template>
<script> <script>
export default { export default {
props: { props: {
height: { height: {
type: String, type: String,
default: '6px' default: '6px',
}, },
bgColor: { bgColor: {
type: String, type: String,
default: '#F8F9FA' default: '#F8F9FA',
} },
} },
} };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.common-split-line { .common-split-line {
margin: 20px 0; margin: 20px 0;
} }
......
...@@ -4,125 +4,142 @@ ...@@ -4,125 +4,142 @@
<article class="middle-warp"> <article class="middle-warp">
<div class="middle-item"> <div class="middle-item">
<div class="title"> <div class="title">
<img src="../../assets/images/what-icon-title.png" /> <img src="../../assets/images/what-icon-title.png">
<span>完成率</span> <span>完成率</span>
</div> </div>
<div class="content"> <div class="content">
<div class="box"> <div class="box">
<div class="top"> <div class="top">
<div > <div>
<div class="text"> <div class="text">
<span>{{certFlag ? '获证率' : '项目完成率'}}</span> <span>{{ certFlag ? '获证率' : '项目完成率' }}</span>
<img class="what" @click="tipsClick" src="../../assets/images/what.png" alt=""> <img
class="what"
src="../../assets/images/what.png"
alt=""
@click="tipsClick"
>
</div>
<div class="proportion">
{{ percentData.certificateRate | fixedNum }}%
</div> </div>
<div class="proportion">{{percentData.certificateRate | fixedNum}}%</div>
</div> </div>
<img src="../../assets/images/what-content-2.png" alt=""> <img
src="../../assets/images/what-content-2.png"
alt=""
>
</div> </div>
<div class="bottom"> <div class="bottom">
应参与人数 {{percentData.doctorCount | formatNum}} 应参与人数 {{ percentData.doctorCount | formatNum }}
</div> </div>
</div> </div>
<div class="box"> <div class="box">
<div class="top"> <div class="top">
<div> <div>
<div class="text"> <div class="text">
<span>参与完成率</span> <span>参与完成率</span>
<img class="what" @click="tipsClick2" src="../../assets/images/what.png" alt=""> <img
class="what"
src="../../assets/images/what.png"
alt=""
@click="tipsClick2"
>
</div>
<div class="proportion">
{{ shouldDate | fixedNum }}%
</div> </div>
<div class="proportion">{{ shouldDate | fixedNum}}%</div>
</div> </div>
<img src="../../assets/images/what-content-1.png" alt=""> <img
src="../../assets/images/what-content-1.png"
alt=""
>
</div> </div>
<div class="bottom"> <div class="bottom">
已参与人数 {{percentData.joinCount | formatNum}} 已参与人数 {{ percentData.joinCount | formatNum }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="footer"> <div class="footer">
已完成人数 {{percentData.finishCount | formatNum}} 已完成人数 {{ percentData.finishCount | formatNum }}
</div> </div>
</article> </article>
<!-- <article class="middle-warp"> <article
<div class="middle"> v-show="isSingleOrg"
<div class="title"> class="middle-org"
<span class="ratio">{{certFlag ? '获证率' : '项目完成率'}} >
<img @click="tipsClick" :class="{'top-10': isAndroid}" src="../../assets/images/what-icon-2.png" />
</span>
<span>
<img src="../../assets/images/tips-1.png" />
</span>
</div>
<div class="ratio">
<span>{{percentData.certificateRate | fixedNum}}%</span>
</div>
<div class="statics">
<span>{{certFlag ? '已获证人数' : '已完成人数'}} {{percentData.finishCount | formatNum}}</span>
<span>应参与人数 {{percentData.doctorCount | formatNum}}</span>
</div>
</div>
<div class="middle">
<div class="title">
<span class="ratio">{{ '参与完成率'}}
<img @click="tipsClick2" :class="{'top-10': isAndroid}" src="../../assets/images/what-icon-2.png" />
</span>
<span>
<img src="../../assets/images/tips-1.png" />
</span>
</div>
<div class="ratio">
<span>{{ shouldDate | fixedNum}}%</span>
</div>
<div class="statics">
<span>已完成人数 {{percentData.finishCount | formatNum}}</span>
<span>已参与人数 {{percentData.joinCount | formatNum}}</span>
</div>
</div>
</article> -->
<article v-show="isSingleOrg" class="middle-org">
<div class="title"> <div class="title">
<span>人员参与率</span> <span>人员参与率</span>
<span> <span>
<img src="../../assets/images/tips-2.png" /> <img src="../../assets/images/tips-2.png">
</span> </span>
</div> </div>
<div class="ratio"> <div class="ratio">
<span>{{percentData.doctorRate | fixedNum}}%</span> <span>{{ percentData.doctorRate | fixedNum }}%</span>
</div> </div>
<div class="statics"> <div class="statics">
<span class="grey">已参与人数 {{percentData.joinCount | formatNum}}</span> <span
<span class="grey">应参与人数 {{percentData.doctorCount | formatNum}}</span> class="grey"
>已参与人数 {{ percentData.joinCount | formatNum }}</span>
<span
class="grey"
>应参与人数 {{ percentData.doctorCount | formatNum }}</span>
</div> </div>
</article> </article>
<article v-show="!isSingleOrg" class="mini"> <article
v-show="!isSingleOrg"
class="mini"
>
<div class="item"> <div class="item">
<div class="wrapper"> <div class="wrapper">
<span> <span>
<div class="desc">人员参与率</div> <div class="desc">人员参与率</div>
<div class="ratio">{{percentData.doctorRate | fixedNum}}%</div> <div class="ratio">{{ percentData.doctorRate | fixedNum }}%</div>
</span> </span>
<img src="../../assets/images/tips-2.png" /> <img src="../../assets/images/tips-2.png">
</div> </div>
<span class="desc-num">已参与人数 {{percentData.joinCount | formatNum}}</span> <span
<span class="desc-num">应参与人数 {{percentData.doctorCount | formatNum}}</span> class="desc-num"
>已参与人数 {{ percentData.joinCount | formatNum }}</span>
<span
class="desc-num"
>应参与人数 {{ percentData.doctorCount | formatNum }}</span>
</div> </div>
<div class="item"> <div class="item">
<div class="wrapper"> <div class="wrapper">
<span> <span>
<div class="desc">机构参与率</div> <div class="desc">机构参与率</div>
<div class="ratio">{{percentData.hospitalRate | fixedNum}}%</div> <div class="ratio">{{ percentData.hospitalRate | fixedNum }}%</div>
</span> </span>
<img src="../../assets/images/tips-3.png" /> <img src="../../assets/images/tips-3.png">
</div> </div>
<span class="desc-num">已参与机构数 {{percentData.hospitalJoinCount | formatNum}}</span> <span
<span class="desc-num">应参与机构数 {{percentData.hospitalCount | formatNum}}</span> class="desc-num"
>已参与机构数 {{ percentData.hospitalJoinCount | formatNum }}</span>
<span
class="desc-num"
>应参与机构数 {{ percentData.hospitalCount | formatNum }}</span>
</div> </div>
</article> </article>
</section> </section>
</template> </template>
<script> <script>
export default { export default {
filters: {
formatNum(num) {
var str = (num || 0) + '';
return str
.split('')
.reverse()
.reduce((prev, next, index) => {
return (index % 3 ? next : next + ',') + prev;
});
},
fixedNum(num, fixed = 1) {
if (!num) return 0;
return (num * 100).toFixed(fixed);
},
},
props: { props: {
percentData: { percentData: {
type: Object, type: Object,
...@@ -135,71 +152,61 @@ export default { ...@@ -135,71 +152,61 @@ export default {
hospitalJoinCount: 0, hospitalJoinCount: 0,
certificateRate: 0, certificateRate: 0,
doctorRate: 0, doctorRate: 0,
hospitalRate: 0 hospitalRate: 0,
}; };
} },
}, },
isSingleOrg: { isSingleOrg: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
certFlag: { certFlag: {
type: Number | String, type: Number,
default: 0 default: 0,
} },
}, },
data() { data() {
return { return {
isAndroid: false isAndroid: false,
} };
}, },
computed:{ computed: {
shouldDate(){ shouldDate() {
return this.percentData.joinCount ? this.percentData.finishCount/this.percentData.joinCount : 0; return this.percentData.joinCount
} ? this.percentData.finishCount / this.percentData.joinCount
: 0;
},
}, },
watch: { watch: {
percentData: { percentData: {
handler(newValue, oldValue) { handler(newValue) {
return newValue; return newValue;
}, },
deep: true deep: true,
}
},
filters: {
formatNum(num) {
var str = (num || 0) + '' ;
return str.split("").reverse().reduce((prev, next, index) => {
return ((index % 3) ? next : (next + ',')) + prev;
})
}, },
fixedNum(num, fixed = 1) {
if(!num) return 0;
return (num * 100).toFixed(fixed)
}
}, },
created() { created() {
if(process.client) { if (process.client) {
this.isAndroid = this.$rocNative.isAndroid; this.isAndroid = this.$rocNative.isAndroid;
} }
}, },
methods: { methods: {
tipsClick() { tipsClick() {
let tipsContent = '是已完成人数/应参与人数*100%'; let tipsContent = '是已完成人数/应参与人数*100%';
if(this.certFlag) { if (this.certFlag) {
tipsContent = '是已获证人数/应参与人数*100%' tipsContent = '是已获证人数/应参与人数*100%';
} }
this.$emit('tipsClick', tipsContent) this.$emit('tipsClick', tipsContent);
}, },
tipsClick2() { tipsClick2() {
const tipsContent = '是已完成人数/已参与人数*100%'; const tipsContent = '是已完成人数/已参与人数*100%';
this.$emit('tipsClick', tipsContent) this.$emit('tipsClick', tipsContent);
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.common-swiper-item { .common-swiper-item {
font-size: 20px; font-size: 20px;
margin-top: 20px; margin-top: 20px;
...@@ -262,62 +269,62 @@ export default { ...@@ -262,62 +269,62 @@ export default {
} }
} }
} }
.middle-warp{ .middle-warp {
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
background: linear-gradient(136deg, #2FC6BA 0%, #36B6BF 100%); background: linear-gradient(136deg, #2fc6ba 0%, #36b6bf 100%);
box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.08);
border-radius: 8px; border-radius: 8px;
margin: 0 15px; margin: 0 15px;
padding: 16px 12px; padding: 16px 12px;
.middle-item{ .middle-item {
margin-bottom: 12px; margin-bottom: 12px;
.title{ .title {
display: flex; display: flex;
justify-content: normal; justify-content: normal;
align-items: center; align-items: center;
margin-bottom: 9px; margin-bottom: 9px;
img{ img {
width: 19px; width: 19px;
height: 19px; height: 19px;
margin-right: 4px; margin-right: 4px;
} }
} }
.content{ .content {
display: flex; display: flex;
color: #626262; color: #626262;
.box{ .box {
font-size: 12px; font-size: 12px;
background: #FEFFFE; background: #fefffe;
border-radius: 8px; border-radius: 8px;
padding: 16px 14px; padding: 16px 14px;
width: 50%; width: 50%;
&:first-child{ &:first-child {
margin-right: 11px; margin-right: 11px;
} }
.proportion{ .proportion {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
color: #439284; color: #439284;
margin-bottom: 18px; margin-bottom: 18px;
margin-top: 10px; margin-top: 10px;
} }
.top{ .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.text{ .text {
display: flex; display: flex;
align-items: center; align-items: center;
} }
} }
.bottom{ .bottom {
color: #9A9A9C; color: #9a9a9c;
} }
img{ img {
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.what{ .what {
width: 12px; width: 12px;
height: 12px; height: 12px;
margin-left: 4px; margin-left: 4px;
...@@ -325,13 +332,13 @@ export default { ...@@ -325,13 +332,13 @@ export default {
} }
} }
} }
.footer{ .footer {
background: #FEFFFE; background: #fefffe;
border-radius: 8px; border-radius: 8px;
padding: 11px 13px; padding: 11px 13px;
color: #9A9A9C; color: #9a9a9c;
font-size: 12px; font-size: 12px;
} }
} }
.middle-org { .middle-org {
display: block; display: block;
...@@ -341,9 +348,9 @@ export default { ...@@ -341,9 +348,9 @@ export default {
height: 98px; height: 98px;
margin-top: 10px; margin-top: 10px;
padding: 15px; padding: 15px;
box-shadow:0px 5px 15px 0px rgba(0,0,0,0.04); box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.04);
border-radius: 6px; border-radius: 6px;
border: 1px solid rgba(231,232,233,1); border: 1px solid rgba(231, 232, 233, 1);
.ratio { .ratio {
height: 21px; height: 21px;
line-height: 21px; line-height: 21px;
......
<!-- Tabs组件 --> <!-- Tabs组件 -->
<template> <template>
<div class="common-tabs-wrapper" :class="{'fixed': needFixed}"> <div
<div class="sub-wrapper" :class="{'fixed': needFixed}"> class="common-tabs-wrapper"
<ul class="common-tabs" id="tabsWrapperId"> :class="{ fixed: needFixed }"
<li :id="'tabsItem' + index" >
v-show="(item === '总体概况' <div
|| item === '人群分析' class="sub-wrapper"
|| item === '课程分析' && projectInfo.existCourse === 1) :class="{ fixed: needFixed }"
|| (item === '考试分析' && projectInfo.existExam === 1) >
|| (item === '学习效果分析' && projectInfo.existEffect === 1)" <ul
id="tabsWrapperId"
class="common-tabs"
>
<li
v-for="(item, index) in tapList" v-for="(item, index) in tapList"
:class="{'active': index === cIndex}" v-show="
item === '总体概况' ||
item === '人群分析' ||
(item === '课程分析' && projectInfo.existCourse === 1) ||
(item === '考试分析' && projectInfo.existExam === 1) ||
(item === '学习效果分析' && projectInfo.existEffect === 1)
"
:id="'tabsItem' + index"
:key="index" :key="index"
:class="{ active: index === cIndex }"
@click="clickTab(index)" @click="clickTab(index)"
>{{item}}</li> >
{{ item }}
</li>
</ul> </ul>
<!-- <span class="over"></span> --> <!-- <span class="over"></span> -->
<span class="border"></span> <span class="border" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
let scrollDom = [], maxScrollWidth = 375;
export default { export default {
data() {
return {
cIndex: 0,
tapList: [
"总体概况",
"人群分析",
"课程分析",
"考试分析",
"学习效果分析"
]
};
},
props: { props: {
projectInfo: { projectInfo: {
type: Object type: Object,
default: () => {},
}, },
needFixed: { needFixed: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
data() {
mounted() { return {
cIndex: 0,
tapList: ['总体概况', '人群分析', '课程分析', '考试分析', '学习效果分析'],
};
}, },
mounted() {},
methods: { methods: {
clickTab(index) { clickTab(index) {
this.cIndex = index; this.cIndex = index;
this.$emit("tabClicked", index); this.$emit('tabClicked', index);
// this.scrollTabs(index); // this.scrollTabs(index);
}, },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.common-tabs-wrapper { .common-tabs-wrapper {
.sub-wrapper { .sub-wrapper {
display: flex; display: flex;
...@@ -66,7 +73,7 @@ export default { ...@@ -66,7 +73,7 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
z-index: 1; z-index: 1;
font-size: 13px; font-size: 13px;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
&.fixed { &.fixed {
...@@ -109,7 +116,7 @@ export default { ...@@ -109,7 +116,7 @@ export default {
border-radius: 30px; border-radius: 30px;
&:first-child { &:first-child {
margin-left: 15px; margin-left: 15px;
} }
&:last-child { &:last-child {
margin-right: 15px; margin-right: 15px;
} }
......
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
<template> <template>
<div class="common-title-wrapper"> <div class="common-title-wrapper">
<ul class="mini"> <ul class="mini">
<li class="left">{{title}}</li> <li class="left">
{{ title }}
</li>
</ul> </ul>
</div> </div>
</template> </template>
...@@ -11,13 +13,13 @@ export default { ...@@ -11,13 +13,13 @@ export default {
props: { props: {
title: { title: {
type: String, type: String,
default: "证书分布情况" default: '证书分布情况',
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.common-title-wrapper { .common-title-wrapper {
position: fixed; position: fixed;
width: 100%; width: 100%;
......
...@@ -2,9 +2,17 @@ ...@@ -2,9 +2,17 @@
<template> <template>
<div class="common-title-wb-wrapper"> <div class="common-title-wb-wrapper">
<ul class="mini"> <ul class="mini">
<li class="left">{{title}}</li> <li class="left">
{{ title }}
</li>
<li class="right"> <li class="right">
<span @click="btnClick(0)" :class="{'active': cIndex === 0}">参与</span><span @click="btnClick(1)" :class="{'active': cIndex === 1}">完成</span> <span
:class="{ active: cIndex === 0 }"
@click="btnClick(0)"
>参与</span><span
:class="{ active: cIndex === 1 }"
@click="btnClick(1)"
>完成</span>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -14,28 +22,28 @@ export default { ...@@ -14,28 +22,28 @@ export default {
props: { props: {
title: { title: {
type: String, type: String,
default: "证书分布情况" default: '证书分布情况',
}, },
needRightBtn: { needRightBtn: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
data() { data() {
return { return {
cIndex: 0 cIndex: 0,
}; };
}, },
methods: { methods: {
btnClick(index) { btnClick(index) {
this.cIndex = index; this.cIndex = index;
this.$emit('btnClick', index); this.$emit('btnClick', index);
} },
} },
}; };
</script> </script>
<style lang="less"> <style lang="scss">
.common-title-wb-wrapper { .common-title-wb-wrapper {
height: 44px; height: 44px;
line-height: 44px; line-height: 44px;
...@@ -70,10 +78,10 @@ export default { ...@@ -70,10 +78,10 @@ export default {
font-weight: 700; font-weight: 700;
color: #979899; color: #979899;
padding: 8px 15px; padding: 8px 15px;
background: #F8F9FA; background: #f8f9fa;
&.active { &.active {
color: #449284; color: #449284;
background: #E3EFED; background: #e3efed;
} }
&:nth-child(1) { &:nth-child(1) {
border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;
......
<!-- 标题组件 - 带下拉选择 --> <!-- 标题组件 - 带下拉选择 -->
<template> <template>
<div class="common-title-wd-wrapper"> <div class="common-title-wd-wrapper">
<div v-show="isShowDropdown" class="mask" @click="isShowDropdown = !isShowDropdown"></div> <div
v-show="isShowDropdown"
class="mask"
@click="isShowDropdown = !isShowDropdown"
/>
<ul class="mini"> <ul class="mini">
<li class="left">{{title}}</li> <li class="left">
<li class="right" v-if="needRightBtn" @click="isShowDropdown = !isShowDropdown"> {{ title }}
<span>{{cDesc || (dataList[0] && dataList[0].desc)}}</span> </li>
<img src="../../assets/images/arr-down.png" alt /> <li
v-if="needRightBtn"
class="right"
@click="isShowDropdown = !isShowDropdown"
>
<span>{{ cDesc || (dataList[0] && dataList[0].desc) }}</span>
<img
src="../../assets/images/arr-down.png"
alt
>
</li> </li>
</ul> </ul>
<ul v-show="isShowDropdown" class="dropdown-menu"> <ul
<li v-for="(item, index) in dataList" :key="index" @click="selectSortItem(index)"> v-show="isShowDropdown"
<span :class="{'active': cIndex === index }">{{item.desc}}</span> class="dropdown-menu"
<img v-show="cIndex === index" src="../../assets/images/sort-select-icon.png" alt=""> >
<li
v-for="(item, index) in dataList"
:key="index"
@click="selectSortItem(index)"
>
<span :class="{ active: cIndex === index }">{{ item.desc }}</span>
<img
v-show="cIndex === index"
src="../../assets/images/sort-select-icon.png"
alt=""
>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -22,23 +46,23 @@ export default { ...@@ -22,23 +46,23 @@ export default {
props: { props: {
title: { title: {
type: String, type: String,
default: "共0条数据" default: '共0条数据',
}, },
needRightBtn: { needRightBtn: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
dataList: { dataList: {
type: Array, type: Array,
default: () => [] default: () => [],
} },
}, },
data() { data() {
return { return {
isShowDropdown: false, isShowDropdown: false,
cIndex: 0, cIndex: 0,
cDesc: '', cDesc: '',
cType: 1 cType: 1,
}; };
}, },
...@@ -49,12 +73,12 @@ export default { ...@@ -49,12 +73,12 @@ export default {
this.cDesc = this.dataList[index].desc; this.cDesc = this.dataList[index].desc;
this.cType = this.dataList[index].type; this.cType = this.dataList[index].type;
this.$emit('selectSortItem', this.cType); this.$emit('selectSortItem', this.cType);
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.common-title-wd-wrapper { .common-title-wd-wrapper {
position: fixed; position: fixed;
width: 100%; width: 100%;
...@@ -124,7 +148,7 @@ export default { ...@@ -124,7 +148,7 @@ export default {
line-height: 56px; line-height: 56px;
font-size: 14px; font-size: 14px;
color: #676869; color: #676869;
border-bottom: 1px solid #F0F1F2; border-bottom: 1px solid #f0f1f2;
img { img {
line-height: 56px; line-height: 56px;
width: 12px; width: 12px;
......
<!-- 标题组件 --> <!-- 标题组件 -->
<template> <template>
<ul class="common-title-with-what"> <ul class="common-title-with-what">
<li class="left">{{title}}<img @click="tipsClick" src="../../assets/images/what-icon-1.png" /></li> <li class="left">
{{ title
}}<img
src="../../assets/images/what-icon-1.png"
@click="tipsClick"
>
</li>
</ul> </ul>
</template> </template>
<script> <script>
...@@ -9,22 +15,22 @@ export default { ...@@ -9,22 +15,22 @@ export default {
props: { props: {
title: { title: {
type: String, type: String,
default: "证书分布情况" default: '证书分布情况',
}, },
needRightBtn: { needRightBtn: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
methods: { methods: {
tipsClick() { tipsClick() {
this.$emit('tipsClick') this.$emit('tipsClick');
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.common-title-with-what { .common-title-with-what {
font-size: 18px; font-size: 18px;
margin: 30px 15px 20px; margin: 30px 15px 20px;
......
<!-- 标题组件 --> <!-- 标题组件 -->
<template> <template>
<ul class="common-title"> <ul class="common-title">
<li class="left">{{title}}</li> <li class="left">
<li v-if="needRightBtn"></li> {{ title }}
</li>
<li v-if="needRightBtn" />
</ul> </ul>
</template> </template>
<script> <script>
...@@ -10,18 +12,18 @@ export default { ...@@ -10,18 +12,18 @@ export default {
props: { props: {
title: { title: {
type: String, type: String,
default: "证书分布情况" default: '证书分布情况',
}, },
needRightBtn: { needRightBtn: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
methods: {} methods: {},
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.common-title { .common-title {
margin: 30px 15px 20px; margin: 30px 15px 20px;
li { li {
......
<!-- 选择地区组件 --> <!-- 选择地区组件 -->
<template> <template>
<div class="select-wrapper" @touchmove.prevent.stop> <div
<div class="mask" @click="cancelSelect" @touchmove.prevent.stop> class="select-wrapper"
<div class="address-wrap" @click.stop @touchmove.prevent.stop> @touchmove.prevent.stop
>
<div
class="mask"
@click="cancelSelect"
@touchmove.prevent.stop
>
<div
class="address-wrap"
@click.stop
@touchmove.prevent.stop
>
<div class="tip-header"> <div class="tip-header">
<span class="cancel-btn" @click="cancelSelect">取消</span> <span
class="cancel-btn"
@click="cancelSelect"
>取消</span>
<h3>选择地区</h3> <h3>选择地区</h3>
<button class="submit-btn" @click="confirm">确定</button> <button
class="submit-btn"
@click="confirm"
>
确定
</button>
<!-- <button :disabled="isDisabled" class="submit-btn" @click="confirm">确定</button> --> <!-- <button :disabled="isDisabled" class="submit-btn" @click="confirm">确定</button> -->
</div> </div>
<div class="my-org" v-show="areaList.currentOrgList.length"> <div
v-show="areaList.currentOrgList.length"
class="my-org"
>
<span>我所在机构</span> <span>我所在机构</span>
<ul> <ul>
<li <li
class="list" v-for="(provinceItem, index) in areaList.currentOrgList"
v-for="(provinceItem, index) in areaList.currentOrgList" :key="index"
:key="index" class="list"
:class="{ active: provinceItem.selected }" :class="{ active: provinceItem.selected }"
@click="provinceSelect(provinceItem, index, true)" @click="provinceSelect(provinceItem, index, true)"
> >
<span>{{ provinceItem.label }}</span> <span>{{ provinceItem.label }}</span>
<span v-show="provinceItem.selected"> <span v-show="provinceItem.selected">
<img src="../../assets/images/sort-select-icon.png" /> <img src="../../assets/images/sort-select-icon.png">
</span> </span>
</li> </li>
</ul> </ul>
</div> </div>
<div class="address-select"> <div class="address-select">
<ul class="show-address-header"> <ul class="show-address-header">
<li :class="{ active: isShowProvince }" class="item" @click="tabAddressClick(1)"> <li
{{ :class="{ active: isShowProvince }"
value.provinceName class="item"
? value.provinceName @click="tabAddressClick(1)"
: '请选择' >
}} {{ value.provinceName ? value.provinceName : '请选择' }}
</li> </li>
<li <li
v-show="value.provinceName && value.provinceName != '全部' && rank > 1 && areaList.cityList.length" v-show="
value.provinceName &&
value.provinceName != '全部' &&
rank > 1 &&
areaList.cityList.length
"
:class="{ active: isShowCity }" :class="{ active: isShowCity }"
class="item" class="item"
@click="tabAddressClick(2)" @click="tabAddressClick(2)"
>{{ value.cityName ? value.cityName : '请选择' }}</li> >
{{ value.cityName ? value.cityName : '请选择' }}
</li>
<li <li
v-show="value.cityName && rank > 2 && areaList.countyList.length" v-show="value.cityName && rank > 2 && areaList.countyList.length"
:class="{ active: isShowCounty }" :class="{ active: isShowCounty }"
class="item" class="item"
@click="tabAddressClick(3)" @click="tabAddressClick(3)"
> >
{{ {{ value.countyName ? value.countyName : '请选择' }}
value.countyName ? value.countyName : '请选择'
}}
</li> </li>
<li <li
v-show="value.countyName && rank > 3 && areaList.townList.length" v-show="value.countyName && rank > 3 && areaList.townList.length"
:class="{ active: isShowTown }" :class="{ active: isShowTown }"
class="item" class="item"
@click="tabAddressClick(4)" @click="tabAddressClick(4)"
>{{ value.townName ? value.townName : '请选择' }}</li> >
{{ value.townName ? value.townName : '请选择' }}
</li>
<li <li
v-show="value.townName && rank > 4 && areaList.newOrgList.length" v-show="value.townName && rank > 4 && areaList.newOrgList.length"
:class="{ active: isShowOrg }" :class="{ active: isShowOrg }"
class="item" class="item"
@click="tabAddressClick(5)" @click="tabAddressClick(5)"
>{{ value.newOrgName ? value.newOrgName : '请选择' }}</li> >
{{ value.newOrgName ? value.newOrgName : '请选择' }}
</li>
</ul> </ul>
<div class="address-content" @touchmove.stop> <div
<ul v-show="isShowProvince" id="province"> class="address-content"
@touchmove.stop
>
<ul
v-show="isShowProvince"
id="province"
>
<li <li
v-for="(provinceItem, index) in areaList.provinceList" v-for="(provinceItem, index) in areaList.provinceList"
:key="index" :key="index"
...@@ -74,11 +111,14 @@ ...@@ -74,11 +111,14 @@
> >
<span>{{ provinceItem.label }}</span> <span>{{ provinceItem.label }}</span>
<span v-show="provinceItem.selected"> <span v-show="provinceItem.selected">
<img src="../../assets/images/sort-select-icon.png" /> <img src="../../assets/images/sort-select-icon.png">
</span> </span>
</li> </li>
</ul> </ul>
<ul v-show="isShowCity" id="city"> <ul
v-show="isShowCity"
id="city"
>
<li <li
v-for="(cityItem, index) in areaList.cityList" v-for="(cityItem, index) in areaList.cityList"
:key="index" :key="index"
...@@ -87,11 +127,14 @@ ...@@ -87,11 +127,14 @@
> >
<span>{{ cityItem.label }}</span> <span>{{ cityItem.label }}</span>
<span v-show="cityItem.selected"> <span v-show="cityItem.selected">
<img src="../../assets/images/sort-select-icon.png" /> <img src="../../assets/images/sort-select-icon.png">
</span> </span>
</li> </li>
</ul> </ul>
<ul v-show="isShowCounty" id="county"> <ul
v-show="isShowCounty"
id="county"
>
<li <li
v-for="(countyItem, index) in areaList.countyList" v-for="(countyItem, index) in areaList.countyList"
:key="index" :key="index"
...@@ -100,11 +143,14 @@ ...@@ -100,11 +143,14 @@
> >
<span>{{ countyItem.label }}</span> <span>{{ countyItem.label }}</span>
<span v-show="countyItem.selected"> <span v-show="countyItem.selected">
<img src="../../assets/images/sort-select-icon.png" /> <img src="../../assets/images/sort-select-icon.png">
</span> </span>
</li> </li>
</ul> </ul>
<ul v-show="isShowTown" id="town"> <ul
v-show="isShowTown"
id="town"
>
<li <li
v-for="(townItem, index) in areaList.townList" v-for="(townItem, index) in areaList.townList"
:key="index" :key="index"
...@@ -113,11 +159,14 @@ ...@@ -113,11 +159,14 @@
> >
<span>{{ townItem.label }}</span> <span>{{ townItem.label }}</span>
<span v-show="townItem.selected"> <span v-show="townItem.selected">
<img src="../../assets/images/sort-select-icon.png" /> <img src="../../assets/images/sort-select-icon.png">
</span> </span>
</li> </li>
</ul> </ul>
<ul v-show="isShowOrg" id="org"> <ul
v-show="isShowOrg"
id="org"
>
<li <li
v-for="(orgItem, index) in areaList.newOrgList" v-for="(orgItem, index) in areaList.newOrgList"
:key="index" :key="index"
...@@ -126,7 +175,7 @@ ...@@ -126,7 +175,7 @@
> >
<span>{{ orgItem.label }}</span> <span>{{ orgItem.label }}</span>
<span v-show="orgItem.selected"> <span v-show="orgItem.selected">
<img src="../../assets/images/sort-select-icon.png" /> <img src="../../assets/images/sort-select-icon.png">
</span> </span>
</li> </li>
</ul> </ul>
...@@ -137,11 +186,21 @@ ...@@ -137,11 +186,21 @@
</div> </div>
</template> </template>
<script> <script>
import { mapGetters, mapActions } from "vuex"; import { mapGetters, mapActions } from 'vuex';
import { getAreaOrOrgList } from "../../service"; import { getAreaOrOrgList } from '../../service';
export default { export default {
name: "PicaArea", name: 'PicaArea',
props: {
baseUrl: {
type: String,
default: '',
},
rank: {
type: Number,
default: 5,
},
},
data() { data() {
return { return {
areaList: { areaList: {
...@@ -150,20 +209,20 @@ export default { ...@@ -150,20 +209,20 @@ export default {
cityList: [], cityList: [],
countyList: [], countyList: [],
townList: [], townList: [],
newOrgList: [] newOrgList: [],
}, },
value: { value: {
cityId: "", cityId: '',
cityName: "", cityName: '',
countyId: "", countyId: '',
countyName: "", countyName: '',
provinceId: "", provinceId: '',
provinceName: "", provinceName: '',
townId: "", townId: '',
townName: "", townName: '',
newOrgId: "", newOrgId: '',
newOrgName: "", newOrgName: '',
regionId: "", regionId: '',
areaDegree: 0, areaDegree: 0,
}, },
isDisabled: true, isDisabled: true,
...@@ -175,42 +234,22 @@ export default { ...@@ -175,42 +234,22 @@ export default {
// 区域选择通用接口参数 // 区域选择通用接口参数
queryParams: { queryParams: {
projectId: 374, projectId: 374,
regionId: "" regionId: '',
}, },
currentOrgList: [] currentOrgList: [],
}; };
}, },
props: {
baseUrl: {
type: String,
default: ""
},
rank: {
type: Number | String,
default: 5
}
},
created() {
if (process.client) {
if (this.$route && this.$route.query) {
let cQuery = this.$route.query;
let hospitalIdList = cQuery.hospitalIdList || "";
this.queryParams.projectId = cQuery.projectId || "";
}
}
},
computed: { computed: {
...mapGetters({ ...mapGetters({
projectId: "projectId", projectId: 'projectId',
provinceList: "provinceList" provinceList: 'provinceList',
}) }),
}, },
watch: { watch: {
projectId(newVal) { projectId(newVal) {
this.queryParams.projectId = newVal; this.queryParams.projectId = newVal;
}, },
provinceList(newVal) { provinceList(newVal) {
newVal[0].selected = true; newVal[0].selected = true;
this.value.provinceName = newVal[0].label; this.value.provinceName = newVal[0].label;
this.value.areaDegree = newVal[0].degree; this.value.areaDegree = newVal[0].degree;
...@@ -226,7 +265,7 @@ export default { ...@@ -226,7 +265,7 @@ export default {
// this.value.areaDegree = this.areaList.provinceList[0].degree; // this.value.areaDegree = this.areaList.provinceList[0].degree;
// 包含所在机构 // 包含所在机构
if(newVal[0].containHospitalFlag == 1) { if (newVal[0].containHospitalFlag == 1) {
// this.value.provinceName = newVal[1].label; // this.value.provinceName = newVal[1].label;
// this.value.provinceName = '请选择'; // this.value.provinceName = '请选择';
this.areaList.currentOrgList = newVal.slice(0, 1); this.areaList.currentOrgList = newVal.slice(0, 1);
...@@ -236,21 +275,29 @@ export default { ...@@ -236,21 +275,29 @@ export default {
this.areaList.provinceList = newVal; this.areaList.provinceList = newVal;
} }
// this.value.provinceName = "全部"; // this.value.provinceName = "全部";
},
},
created() {
if (process.client) {
if (this.$route && this.$route.query) {
const cQuery = this.$route.query;
this.queryParams.projectId = cQuery.projectId || '';
}
} }
}, },
mounted() {},
methods: { methods: {
// 映射Store中的Actions // 映射Store中的Actions
...mapActions({ ...mapActions({
setOrgList: "setOrgList", setOrgList: 'setOrgList',
}), }),
// 获取省列表 // 获取省列表
async getProvinceData(params) { async getProvinceData(params) {
await getAreaOrOrgList(params).then(res => { await getAreaOrOrgList(params).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.areaList.provinceList = (res.data && res.data.list) || []; this.areaList.provinceList = (res.data && res.data.list) || [];
this.areaList.provinceList.map(a => { this.areaList.provinceList.map((a) => {
if (a.id == this.value.provinceId) { if (a.id == this.value.provinceId) {
a.selected = true; a.selected = true;
} }
...@@ -261,15 +308,15 @@ export default { ...@@ -261,15 +308,15 @@ export default {
// 获取城市列表 // 获取城市列表
async getCityData(params) { async getCityData(params) {
await getAreaOrOrgList(params).then(res => { await getAreaOrOrgList(params).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.areaList.cityList = (res.data && res.data.list) || []; this.areaList.cityList = (res.data && res.data.list) || [];
if (this.areaList.cityList.length === 0) { if (this.areaList.cityList.length === 0) {
this.isShowProvince = true; this.isShowProvince = true;
this.isShowCity = false; this.isShowCity = false;
this.isDisabled = false; this.isDisabled = false;
} }
this.areaList.cityList.map(a => { this.areaList.cityList.map((a) => {
if (a.id == this.value.cityId) { if (a.id == this.value.cityId) {
a.selected = true; a.selected = true;
} }
...@@ -280,8 +327,8 @@ export default { ...@@ -280,8 +327,8 @@ export default {
// 获取区/县列表 // 获取区/县列表
async getCountyData(params) { async getCountyData(params) {
await getAreaOrOrgList(params).then(res => { await getAreaOrOrgList(params).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.areaList.countyList = (res.data && res.data.list) || []; this.areaList.countyList = (res.data && res.data.list) || [];
if (this.areaList.countyList.length === 0) { if (this.areaList.countyList.length === 0) {
this.isShowProvince = false; this.isShowProvince = false;
...@@ -289,7 +336,7 @@ export default { ...@@ -289,7 +336,7 @@ export default {
this.isShowCounty = false; this.isShowCounty = false;
this.isDisabled = false; this.isDisabled = false;
} }
this.areaList.countyList.map(a => { this.areaList.countyList.map((a) => {
if (a.id == this.value.countyId) { if (a.id == this.value.countyId) {
a.selected = true; a.selected = true;
} }
...@@ -300,8 +347,8 @@ export default { ...@@ -300,8 +347,8 @@ export default {
// 获取乡/镇列表 // 获取乡/镇列表
async getTownData(params) { async getTownData(params) {
await getAreaOrOrgList(params).then(res => { await getAreaOrOrgList(params).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.areaList.townList = (res.data && res.data.list) || []; this.areaList.townList = (res.data && res.data.list) || [];
if (this.areaList.townList.length === 0) { if (this.areaList.townList.length === 0) {
this.isShowProvince = false; this.isShowProvince = false;
...@@ -310,7 +357,7 @@ export default { ...@@ -310,7 +357,7 @@ export default {
this.isShowTown = false; this.isShowTown = false;
this.isDisabled = false; this.isDisabled = false;
} }
this.areaList.townList.map(a => { this.areaList.townList.map((a) => {
if (a.id == this.value.townId) { if (a.id == this.value.townId) {
a.selected = true; a.selected = true;
} }
...@@ -321,8 +368,8 @@ export default { ...@@ -321,8 +368,8 @@ export default {
// 获取最后一级的机构列表 // 获取最后一级的机构列表
async getOrgData(params) { async getOrgData(params) {
await getAreaOrOrgList(params).then(res => { await getAreaOrOrgList(params).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.areaList.newOrgList = (res.data && res.data.list) || []; this.areaList.newOrgList = (res.data && res.data.list) || [];
if (this.areaList.newOrgList.length === 0) { if (this.areaList.newOrgList.length === 0) {
this.isShowProvince = false; this.isShowProvince = false;
...@@ -332,7 +379,7 @@ export default { ...@@ -332,7 +379,7 @@ export default {
this.isShowOrg = false; this.isShowOrg = false;
this.isDisabled = false; this.isDisabled = false;
} }
this.areaList.newOrgList.map(a => { this.areaList.newOrgList.map((a) => {
if (a.id == this.value.townId) { if (a.id == this.value.townId) {
a.selected = true; a.selected = true;
} }
...@@ -348,20 +395,20 @@ export default { ...@@ -348,20 +395,20 @@ export default {
this.queryParams.regionId = item.id; this.queryParams.regionId = item.id;
this.value.provinceName = item.label; this.value.provinceName = item.label;
this.value.cityId = null; this.value.cityId = null;
this.value.cityName = ""; this.value.cityName = '';
this.value.countyId = null; this.value.countyId = null;
this.value.countyName = ""; this.value.countyName = '';
this.value.townId = null; this.value.townId = null;
this.value.townName = ""; this.value.townName = '';
this.value.newOrgId = null; this.value.newOrgId = null;
this.value.newOrgName = "" this.value.newOrgName = '';
// 当前选中的样式 // 当前选中的样式
this.areaList.provinceList.map(a => (a.selected = false)); this.areaList.provinceList.map((a) => (a.selected = false));
if(isCurrent) { if (isCurrent) {
this.areaList.currentOrgList.map(a => (a.selected = true)); this.areaList.currentOrgList.map((a) => (a.selected = true));
} else { } else {
this.areaList.currentOrgList.map(a => (a.selected = false)); this.areaList.currentOrgList.map((a) => (a.selected = false));
this.areaList.provinceList[idx].selected = true; this.areaList.provinceList[idx].selected = true;
} }
// this.areaList.provinceList.map(a => (a.selected = false)); // this.areaList.provinceList.map(a => (a.selected = false));
...@@ -370,8 +417,8 @@ export default { ...@@ -370,8 +417,8 @@ export default {
if (item.degree == 0) { if (item.degree == 0) {
return; return;
} }
//控制省市县乡数据展示与隐藏 // 控制省市县乡数据展示与隐藏
this.isShowProvince = false; this.isShowProvince = false;
this.isShowCounty = false; this.isShowCounty = false;
this.isShowTown = false; this.isShowTown = false;
...@@ -397,13 +444,13 @@ export default { ...@@ -397,13 +444,13 @@ export default {
this.queryParams.regionId = item.id; this.queryParams.regionId = item.id;
this.value.cityName = item.label; this.value.cityName = item.label;
this.value.countyId = null; this.value.countyId = null;
this.value.countyName = ""; this.value.countyName = '';
this.value.townId = null; this.value.townId = null;
this.value.townName = ""; this.value.townName = '';
this.value.newOrgId = null; this.value.newOrgId = null;
this.value.newOrgName = "" this.value.newOrgName = '';
// 当前选中的样式 // 当前选中的样式
this.areaList.cityList.map(a => (a.selected = false)); this.areaList.cityList.map((a) => (a.selected = false));
this.areaList.cityList[idx].selected = true; this.areaList.cityList[idx].selected = true;
this.value.areaDegree = item.degree; this.value.areaDegree = item.degree;
if (item.degree == 0) { if (item.degree == 0) {
...@@ -436,11 +483,11 @@ export default { ...@@ -436,11 +483,11 @@ export default {
this.queryParams.regionId = item.id; this.queryParams.regionId = item.id;
this.value.countyName = item.label; this.value.countyName = item.label;
this.value.townId = null; this.value.townId = null;
this.value.townName = ""; this.value.townName = '';
this.value.newOrgId = null; this.value.newOrgId = null;
this.value.newOrgName = "" this.value.newOrgName = '';
// 当前选中的样式 // 当前选中的样式
this.areaList.countyList.map(a => (a.selected = false)); this.areaList.countyList.map((a) => (a.selected = false));
this.areaList.countyList[idx].selected = true; this.areaList.countyList[idx].selected = true;
this.value.areaDegree = item.degree; this.value.areaDegree = item.degree;
if (item.degree == 0) { if (item.degree == 0) {
...@@ -473,14 +520,14 @@ export default { ...@@ -473,14 +520,14 @@ export default {
this.queryParams.regionId = item.id; this.queryParams.regionId = item.id;
this.value.townName = item.label; this.value.townName = item.label;
this.value.newOrgId = null; this.value.newOrgId = null;
this.value.newOrgName = "" this.value.newOrgName = '';
this.value.areaDegree = item.degree; this.value.areaDegree = item.degree;
if (item.degree == 0) { if (item.degree == 0) {
return; return;
} }
// 当前选中的样式 // 当前选中的样式
this.areaList.townList.map(a => (a.selected = false)); this.areaList.townList.map((a) => (a.selected = false));
this.areaList.townList[idx].selected = true; this.areaList.townList[idx].selected = true;
this.isDisabled = false; this.isDisabled = false;
if (this.rank > 4 && item.degree != 5) { if (this.rank > 4 && item.degree != 5) {
...@@ -495,7 +542,7 @@ export default { ...@@ -495,7 +542,7 @@ export default {
this.isShowTown = true; this.isShowTown = true;
this.isDisabled = false; this.isDisabled = false;
this.areaList.newOrgList = []; this.areaList.newOrgList = [];
} }
}, },
// 选择最后一级机构 // 选择最后一级机构
...@@ -510,10 +557,9 @@ export default { ...@@ -510,10 +557,9 @@ export default {
} }
// 当前选中的样式 // 当前选中的样式
this.areaList.newOrgList.map(a => (a.selected = false)); this.areaList.newOrgList.map((a) => (a.selected = false));
this.areaList.newOrgList[idx].selected = true; this.areaList.newOrgList[idx].selected = true;
this.isDisabled = false; this.isDisabled = false;
}, },
tabAddressClick(tab) { tabAddressClick(tab) {
...@@ -550,214 +596,215 @@ export default { ...@@ -550,214 +596,215 @@ export default {
} }
}, },
confirm() { confirm() {
this.$emit("confirm", this.value); this.$emit('confirm', this.value);
}, },
cancelSelect() { cancelSelect() {
this.$emit("cancel", false); this.$emit('cancel', false);
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.select-wrapper { .select-wrapper {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
.mask { .mask {
position: fixed; position: fixed;
z-index: 1000000015; z-index: 1000000015;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
background: rgba(55, 56, 57, 0.6); background: rgba(55, 56, 57, 0.6);
} }
.address-wrap { .address-wrap {
position: absolute; position: absolute;
width: 100%;
// height: 353px;
// height: 293px;
background-color: #ffffff;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
z-index: 1000000016;
.tip-header {
position: relative;
height: 58px;
line-height: 58px;
width: 100%; width: 100%;
// height: 353px; font-size: 17px;
// height: 293px; display: flex;
background-color: #ffffff; justify-content: space-between;
padding: 0 15px;
box-sizing: border-box; box-sizing: border-box;
bottom: 0;
left: 0; .cancel-btn {
right: 0; color: #999;
z-index: 1000000016; }
.tip-header {
position: relative; h3 {
height: 58px; font-size: 18px;
line-height: 58px; color: #373839;
width: 100%; font-weight: 400;
}
.submit-btn {
font-size: 17px; font-size: 17px;
display: flex; outline: none;
justify-content: space-between; border: 1px solid transparent;
padding: 0 15px; background-color: transparent;
box-sizing: border-box; color: #449284 !important;
.cancel-btn { &:disabled {
color: #999; color: #c7c8c9;
} }
}
}
.address-select {
width: 100%;
height: auto;
/*height: 196px;*/
box-sizing: border-box;
h3 { .show-address-header {
font-size: 18px; width: 100%;
color: #373839; display: -webkit-box;
font-weight: 400; display: -webkit-flex;
display: flex;
position: relative;
padding-bottom: 4px;
margin: 0 7px;
&:after {
content: ' ';
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #f0f1f2;
color: #f0f1f2;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
} }
.submit-btn { .item {
font-size: 17px; display: inline-block;
outline: none; font-size: 15px;
border: 1px solid transparent; line-height: 35px;
background-color: transparent; height: 35px;
color: #449284 !important; padding: 0 8px;
// padding-right: 15px;
box-sizing: border-box;
max-width: 23%;
min-width: 50px;
text-align: left;
color: #676869;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
// flex: 1 0 auto;
&:last-of-type {
padding-right: 15px;
}
&.active {
color: #373839;
font-family: PingFangSC-Medium;
/*font-weight:500;*/
}
&:disabled { &.active:after {
color: #c7c8c9; content: ' ';
position: absolute;
left: 50%;
bottom: 0;
right: 0;
width: 10px;
height: 3px;
/*border-radius: 2px;*/
border-radius: 30%;
text-align: center;
background-color: #449284;
transform: translateX(-50%);
} }
} }
} }
.address-select { .address-content {
position: relative;
width: 100%; width: 100%;
height: auto; // height: 100%;
/*height: 196px;*/ height: 196px;
overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
.show-address-header { ul {
width: 100%; width: 100%;
display: -webkit-box; height: 196px;
display: -webkit-flex; overflow-y: auto;
display: flex; box-sizing: border-box;
position: relative; padding: 10px 13px;
padding-bottom: 4px; -webkit-overflow-scrolling: touch;
margin: 0 7px; position: static;
&:after { -webkit-transform: translateZ(0px);
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #f0f1f2;
color: #f0f1f2;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.item { li {
display: inline-block;
font-size: 15px;
line-height: 35px;
height: 35px; height: 35px;
padding: 0 8px; line-height: 35px;
// padding-right: 15px; font-size: 15px;
box-sizing: border-box; width: 100%;
max-width: 25%; overflow-x: hidden;
text-align: left;
color: #676869;
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
position: relative; color: #676869;
// flex: 1 0 auto; cursor: pointer;
&:last-of-type { box-sizing: border-box;
padding-right: 15px; display: -webkit-box;
} display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
&.active { &.active {
color: #373839; color: #449284;
font-family: PingFangSC-Medium;
/*font-weight:500;*/
} }
&.active:after { img {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
right: 0;
width: 10px; width: 10px;
height: 3px; height: 10px;
/*border-radius: 2px;*/
border-radius: 30%;
text-align: center;
background-color: #449284;
transform: translateX(-50%);
}
}
}
.address-content {
position: relative;
width: 100%;
// height: 100%;
height: 196px;
overflow: hidden;
box-sizing: border-box;
ul {
width: 100%;
height: 196px;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 13px;
-webkit-overflow-scrolling: touch;
position: static;
-webkit-transform: translateZ(0px);
li {
height: 35px;
line-height: 35px;
font-size: 15px;
width: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #676869;
cursor: pointer;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
&.active {
color: #449284;
}
img {
width: 10px;
height: 10px;
}
} }
} }
} }
} }
} }
.my-org { }
margin: 0 15px 15px; .my-org {
& > span { margin: 0 15px 15px;
font-size: 12px; & > span {
color: #979899; font-size: 12px;
color: #979899;
}
.list {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 4px;
span {
font-size: 15px;
color: #676869;
} }
.list { img {
display: flex; width: 10px;
flex-direction: row;
justify-content: space-between;
margin-top: 4px;
span {
font-size: 15px;
color: #676869;
}
img {
width: 10px;
}
} }
} }
} }
</style> }
\ No newline at end of file </style>
<!-- 选择机构组件 --> <!-- 选择机构组件 -->
<template> <template>
<div class="select-wrapper" @touchmove.prevent.stop> <div
<div class="mask" @click="cancel" @touchmove.prevent.stop> class="select-wrapper"
<div class="address-wrap" @click.stop @touchmove.prevent.stop> @touchmove.prevent.stop
>
<div
class="mask"
@click="cancel"
@touchmove.prevent.stop
>
<div
class="address-wrap"
@click.stop
@touchmove.prevent.stop
>
<div class="tip-header"> <div class="tip-header">
<span class="cancel-btn" @click="cancel">取消</span> <span
class="cancel-btn"
@click="cancel"
>取消</span>
<h3>选择机构</h3> <h3>选择机构</h3>
<span class="submit-btn" @click="confirm">确定</span> <span
class="submit-btn"
@click="confirm"
>确定</span>
</div> </div>
<div class="address-select"> <div class="address-select">
<ul class="show-address-header"> <ul class="show-address-header">
...@@ -14,7 +31,10 @@ ...@@ -14,7 +31,10 @@
请选择 请选择
</li> </li>
</ul> </ul>
<div class="address-content" @touchmove.stop> <div
class="address-content"
@touchmove.stop
>
<ul id="province"> <ul id="province">
<li <li
v-for="(orgItem, index) in dataList" v-for="(orgItem, index) in dataList"
...@@ -24,7 +44,7 @@ ...@@ -24,7 +44,7 @@
> >
<span>{{ orgItem.hospitalName }}</span> <span>{{ orgItem.hospitalName }}</span>
<span v-show="orgItem.selected"> <span v-show="orgItem.selected">
<img src="../../assets/images/sort-select-icon.png" /> <img src="../../assets/images/sort-select-icon.png">
</span> </span>
</li> </li>
</ul> </ul>
...@@ -35,62 +55,59 @@ ...@@ -35,62 +55,59 @@
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; import { mapGetters } from 'vuex';
export default { export default {
name: "PicaOrg", name: 'PicaOrg',
data() {
return {
dataList: [],
};
},
props: { props: {
baseUrl: { baseUrl: {
type: String, type: String,
default: "" default: '',
}, },
rank: { rank: {
type: Number | String, type: Number,
default: 4 default: 4,
} },
},
data() {
return {
dataList: [],
};
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
orgList: "orgList" orgList: 'orgList',
}) }),
}, },
watch: { watch: {
orgList: { orgList: {
handler(newList) { handler(newList) {
this.dataList = newList || []; this.dataList = newList || [];
this.dataList.map(a => { this.dataList.map((a) => {
a.selected = false; a.selected = false;
}); });
}, },
deep: true deep: true,
} },
},
created() {
}, },
created() {},
methods: { methods: {
orgSelect(item, idx) { orgSelect(item, idx) {
this.dataList[idx].selected = !this.dataList[idx].selected; this.dataList[idx].selected = !this.dataList[idx].selected;
this.$forceUpdate() this.$forceUpdate();
}, },
confirm() { confirm() {
this.$emit("confirm", this.dataList); this.$emit('confirm', this.dataList);
}, },
cancel() { cancel() {
this.$emit("cancel", false); this.$emit('cancel', false);
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.select-wrapper { .select-wrapper {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
...@@ -162,7 +179,7 @@ export default { ...@@ -162,7 +179,7 @@ export default {
padding-bottom: 4px; padding-bottom: 4px;
&:after { &:after {
content: " "; content: ' ';
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
...@@ -202,7 +219,7 @@ export default { ...@@ -202,7 +219,7 @@ export default {
} }
&.active:after { &.active:after {
content: " "; content: ' ';
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0; bottom: 0;
...@@ -270,4 +287,4 @@ export default { ...@@ -270,4 +287,4 @@ export default {
} }
} }
} }
</style> </style>
\ No newline at end of file
<!-- 进度条组件 --> <!-- 进度条组件 -->
<template> <template>
<div class="common-process"> <div class="common-process">
<span class="bar" :style="{'width': maxPocessWidth, 'background': barColor}"></span><span class="desc">{{value}}{{unitName}}</span> <span
class="bar"
:style="{ width: maxPocessWidth, background: barColor }"
/><span class="desc">{{ value }}{{ unitName }}</span>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
maxValue: { maxValue: {
type: Number | String, type: Number,
default: 100 default: 100,
}, },
value: { value: {
type: Number | String, type: Number,
default: 0 default: 0,
}, },
processDataObj: { processDataObj: {
type: Object, type: Object,
default: () => { default: () => {
return { return {
maxValue: 100, maxValue: 100,
value: 0 value: 0,
} };
} },
}, },
valueDescWidth: { valueDescWidth: {
type: Number | String, type: Number,
default: 124 default: 124,
}, },
barColor: { barColor: {
type: String, type: String,
default: '#39AF9A' default: '#39AF9A',
}, },
unitName: { unitName: {
type: String, type: String,
default: '分钟' default: '分钟',
}, },
processWidth: { processWidth: {
type: String, type: String,
default: '0px' default: '0px',
} },
}, },
data() { data() {
return { return {
maxPocessWidth: '0px' maxPocessWidth: '0px',
} };
}, },
watch: { watch: {
processDataObj: { processDataObj: {
handler(newVal) { handler() {
if(process.client) { if (process.client) {
let clientWidth = window.outerWidth || document.body.clientWidth || document.documentElement.clientWidth; const clientWidth =
let maxWidth = clientWidth - this.valueDescWidth; window.outerWidth ||
document.body.clientWidth ||
document.documentElement.clientWidth;
const maxWidth = clientWidth - this.valueDescWidth;
let ratio = 1; let ratio = 1;
// debugger // debugger
if(this.maxValue && this.maxValue < this.value) { if (this.maxValue && this.maxValue < this.value) {
ratio = this.maxValue / this.value; ratio = this.maxValue / this.value;
} }
if(this.value && this.maxValue > this.value) { if (this.value && this.maxValue > this.value) {
ratio = this.value / this.maxValue; ratio = this.value / this.maxValue;
} }
if(this.value < 1 || this.maxValue < 1 || ratio <= 0.01) { if (this.value < 1 || this.maxValue < 1 || ratio <= 0.01) {
this.maxPocessWidth = '1px' this.maxPocessWidth = '1px';
} else { } else {
this.maxPocessWidth = Math.round(ratio * maxWidth) + 'px' this.maxPocessWidth = Math.round(ratio * maxWidth) + 'px';
} }
} }
}, },
deep: true deep: true,
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.common-process { .common-process {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
......
import {
router,
store,
vueApp,
} from '@pica-cli/vue-cli-plugin-pica-cli-plugin/auto';
import Vue from 'vue';
import '@/router';
console.log('router, store, vueApp: ', Vue, router, store, vueApp);
[{"id":330,"url":"/banlance-detail","fullPath":"https://phome.yunqueyi.com/mall/banlance-detail","host":"https://phome.yunqueyi.com","menuCode":"7800350"},{"id":333,"url":"/bill-detail","fullPath":"https://phome.yunqueyi.com/mall/bill-detail","host":"https://phome.yunqueyi.com","menuCode":"7800353"},{"id":335,"url":"/bind-card","fullPath":"https://phome.yunqueyi.com/mall/bind-card","host":"https://phome.yunqueyi.com","menuCode":"7800355"},{"id":337,"url":"/capital","fullPath":"https://phome.yunqueyi.com/mall/capital","host":"https://phome.yunqueyi.com","menuCode":"7800357"},{"id":339,"url":"/cash-real","fullPath":"https://phome.yunqueyi.com/mall/cash-real","host":"https://phome.yunqueyi.com","menuCode":"7800359"},{"id":341,"url":"/check-serve","fullPath":"https://phome.yunqueyi.com/mall/check-serve","host":"https://phome.yunqueyi.com","menuCode":"7800361"},{"id":343,"url":"/consultation-capital","fullPath":"https://phome.yunqueyi.com/mall/consultation-capital","host":"https://phome.yunqueyi.com","menuCode":"7800363"},{"id":345,"url":"/custom-service","fullPath":"https://phome.yunqueyi.com/mall/custom-service","host":"https://phome.yunqueyi.com","menuCode":"7800365"},{"id":347,"url":"/doctor-detail","fullPath":"https://phome.yunqueyi.com/mall/doctor-detail","host":"https://phome.yunqueyi.com","menuCode":"7800367"},{"id":349,"url":"/doctor-manager","fullPath":"https://phome.yunqueyi.com/mall/doctor-manager","host":"https://phome.yunqueyi.com","menuCode":"7800369"},{"id":351,"url":"/fee-result","fullPath":"https://phome.yunqueyi.com/mall/fee-result","host":"https://phome.yunqueyi.com","menuCode":"7800371"},{"id":353,"url":"/find-med","fullPath":"https://phome.yunqueyi.com/mall/find-med","host":"https://phome.yunqueyi.com","menuCode":"7800373"},{"id":355,"url":"/fund-record","fullPath":"https://phome.yunqueyi.com/mall/fund-record","host":"https://phome.yunqueyi.com","menuCode":"7800375"},{"id":357,"url":"/goods","fullPath":"https://phome.yunqueyi.com/mall/goods","host":"https://phome.yunqueyi.com","menuCode":"7800377"},{"id":358,"url":"/invitation","fullPath":"https://phome.yunqueyi.com/mall/invitation","host":"https://phome.yunqueyi.com","menuCode":"7800378"},{"id":359,"url":"/med-detail","fullPath":"https://phome.yunqueyi.com/mall/med-detail","host":"https://phome.yunqueyi.com","menuCode":"7800379"},{"id":360,"url":"/med-list","fullPath":"https://phome.yunqueyi.com/mall/med-list","host":"https://phome.yunqueyi.com","menuCode":"7800380"},{"id":361,"url":"/monthly-report","fullPath":"https://phome.yunqueyi.com/mall/monthly-report","host":"https://phome.yunqueyi.com","menuCode":"7800381"},{"id":362,"url":"/my-card","fullPath":"https://phome.yunqueyi.com/mall/my-card","host":"https://phome.yunqueyi.com","menuCode":"7800382"},{"id":363,"url":"/opened-medication","fullPath":"https://phome.yunqueyi.com/mall/opened-medication","host":"https://phome.yunqueyi.com","menuCode":"7800383"},{"id":364,"url":"/pay","fullPath":"https://phome.yunqueyi.com/mall/pay","host":"https://phome.yunqueyi.com","menuCode":"7800384"},{"id":365,"url":"/pay-detail","fullPath":"https://phome.yunqueyi.com/mall/pay-detail","host":"https://phome.yunqueyi.com","menuCode":"7800385"},{"id":366,"url":"/pay-order","fullPath":"https://phome.yunqueyi.com/mall/pay-order","host":"https://phome.yunqueyi.com","menuCode":"7800386"},{"id":367,"url":"/protocol","fullPath":"https://phome.yunqueyi.com/mall/protocol","host":"https://phome.yunqueyi.com","menuCode":"7800387"},{"id":368,"url":"/push-pay","fullPath":"https://phome.yunqueyi.com/mall/push-pay","host":"https://phome.yunqueyi.com","menuCode":"7800388"},{"id":369,"url":"/search","fullPath":"https://phome.yunqueyi.com/mall/search","host":"https://phome.yunqueyi.com","menuCode":"7800389"},{"id":370,"url":"/search-bulk","fullPath":"https://phome.yunqueyi.com/mall/search-bulk","host":"https://phome.yunqueyi.com","menuCode":"7800390"},{"id":371,"url":"/service-detail","fullPath":"https://phome.yunqueyi.com/mall/service-detail","host":"https://phome.yunqueyi.com","menuCode":"7800391"},{"id":372,"url":"/set-pwd","fullPath":"https://phome.yunqueyi.com/mall/set-pwd","host":"https://phome.yunqueyi.com","menuCode":"7800392"},{"id":373,"url":"/shop-order","fullPath":"https://phome.yunqueyi.com/mall/shop-order","host":"https://phome.yunqueyi.com","menuCode":"7800393"},{"id":374,"url":"/store-certify","fullPath":"https://phome.yunqueyi.com/mall/store-certify","host":"https://phome.yunqueyi.com","menuCode":"7800394"},{"id":375,"url":"/trade-detail","fullPath":"https://phome.yunqueyi.com/mall/trade-detail","host":"https://phome.yunqueyi.com","menuCode":"7800395"},{"id":376,"url":"/unbind-card","fullPath":"https://phome.yunqueyi.com/mall/unbind-card","host":"https://phome.yunqueyi.com","menuCode":"7800396"},{"id":377,"url":"/verify-patient","fullPath":"https://phome.yunqueyi.com/mall/verify-patient","host":"https://phome.yunqueyi.com","menuCode":"7800397"},{"id":378,"url":"/address/add-address","fullPath":"https://phome.yunqueyi.com/mall/address/add-address","host":"https://phome.yunqueyi.com","menuCode":"7800398"},{"id":379,"url":"/address/address-list","fullPath":"https://phome.yunqueyi.com/mall/address/address-list","host":"https://phome.yunqueyi.com","menuCode":"7800399"},{"id":380,"url":"/check-serve/bluetooth","fullPath":"https://phome.yunqueyi.com/mall/check-serve/bluetooth","host":"https://phome.yunqueyi.com","menuCode":"7800400"},{"id":381,"url":"/check-serve/data","fullPath":"https://phome.yunqueyi.com/mall/check-serve/data","host":"https://phome.yunqueyi.com","menuCode":"7800401"},{"id":382,"url":"/check-serve/detail","fullPath":"https://phome.yunqueyi.com/mall/check-serve/detail","host":"https://phome.yunqueyi.com","menuCode":"7800402"},{"id":383,"url":"/check-serve/editChecker","fullPath":"https://phome.yunqueyi.com/mall/check-serve/editChecker","host":"https://phome.yunqueyi.com","menuCode":"7800403"},{"id":384,"url":"/check-serve/list","fullPath":"https://phome.yunqueyi.com/mall/check-serve/list","host":"https://phome.yunqueyi.com","menuCode":"7800404"},{"id":385,"url":"/check-serve/listv2","fullPath":"https://phome.yunqueyi.com/mall/check-serve/listv2","host":"https://phome.yunqueyi.com","menuCode":"7800405"},{"id":386,"url":"/check-serve/search","fullPath":"https://phome.yunqueyi.com/mall/check-serve/search","host":"https://phome.yunqueyi.com","menuCode":"7800406"},{"id":387,"url":"/check-serve/testbt","fullPath":"https://phome.yunqueyi.com/mall/check-serve/testbt","host":"https://phome.yunqueyi.com","menuCode":"7800407"},{"id":388,"url":"/consultation-capital/indexold","fullPath":"https://phome.yunqueyi.com/mall/consultation-capital/indexold","host":"https://phome.yunqueyi.com","menuCode":"7800408"},{"id":389,"url":"/fund-record/pannel","fullPath":"https://phome.yunqueyi.com/mall/fund-record/pannel","host":"https://phome.yunqueyi.com","menuCode":"7800409"},{"id":390,"url":"/goods/edit","fullPath":"https://phome.yunqueyi.com/mall/goods/edit","host":"https://phome.yunqueyi.com","menuCode":"7800410"},{"id":391,"url":"/goods/editv2","fullPath":"https://phome.yunqueyi.com/mall/goods/editv2","host":"https://phome.yunqueyi.com","menuCode":"7800411"},{"id":392,"url":"/goods/editv3","fullPath":"https://phome.yunqueyi.com/mall/goods/editv3","host":"https://phome.yunqueyi.com","menuCode":"7800412"},{"id":393,"url":"/goods/report","fullPath":"https://phome.yunqueyi.com/mall/goods/report","host":"https://phome.yunqueyi.com","menuCode":"7800413"},{"id":394,"url":"/invitation/invitation-share","fullPath":"https://phome.yunqueyi.com/mall/invitation/invitation-share","host":"https://phome.yunqueyi.com","menuCode":"7800414"},{"id":395,"url":"/med-list/sku-list","fullPath":"https://phome.yunqueyi.com/mall/med-list/sku-list","host":"https://phome.yunqueyi.com","menuCode":"7800415"},{"id":396,"url":"/order/detail","fullPath":"https://phome.yunqueyi.com/mall/order/detail","host":"https://phome.yunqueyi.com","menuCode":"7800416"},{"id":397,"url":"/order/list","fullPath":"https://phome.yunqueyi.com/mall/order/list","host":"https://phome.yunqueyi.com","menuCode":"7800417"},{"id":398,"url":"/order/logistics","fullPath":"https://phome.yunqueyi.com/mall/order/logistics","host":"https://phome.yunqueyi.com","menuCode":"7800418"},{"id":399,"url":"/search/medical","fullPath":"https://phome.yunqueyi.com/mall/search/medical","host":"https://phome.yunqueyi.com","menuCode":"7800419"},{"id":400,"url":"/store-certify/consts","fullPath":"https://phome.yunqueyi.com/mall/store-certify/consts","host":"https://phome.yunqueyi.com","menuCode":"7800420"},{"id":401,"url":"/store-certify/detail","fullPath":"https://phome.yunqueyi.com/mall/store-certify/detail","host":"https://phome.yunqueyi.com","menuCode":"7800421"},{"id":402,"url":"/verify-patient/list","fullPath":"https://phome.yunqueyi.com/mall/verify-patient/list","host":"https://phome.yunqueyi.com","menuCode":"7800422"},{"id":403,"url":"/verify-patient/search","fullPath":"https://phome.yunqueyi.com/mall/verify-patient/search","host":"https://phome.yunqueyi.com","menuCode":"7800423"},{"id":404,"url":"/check-serve/bluetooth/bluetooth-msg","fullPath":"https://phome.yunqueyi.com/mall/check-serve/bluetooth/bluetooth-msg","host":"https://phome.yunqueyi.com","menuCode":"7800424"},{"id":405,"url":"/","fullPath":"https://phome.yunqueyi.com/mall/","host":"https://phome.yunqueyi.com","menuCode":"7800425"},{"id":850,"url":"/bankList","fullPath":"https://phome.yunqueyi.com/mall/bankList","host":"https://phome.yunqueyi.com","menuCode":"7800871"},{"id":851,"url":"/zero","fullPath":"https://phome.yunqueyi.com/mall/zero","host":"https://phome.yunqueyi.com","menuCode":"7800872"},{"id":1317,"url":"/enchashment-result","fullPath":"https://phome.yunqueyi.com/mall/enchashment-result","host":"https://phome.yunqueyi.com","menuCode":"7801338"},{"id":1318,"url":"/order/offline","fullPath":"https://phome.yunqueyi.com/mall/order/offline","host":"https://phome.yunqueyi.com","menuCode":"7801339"}] [{"id":1387,"url":"/examscore","fullPath":"https://phome.yunqueyi.com/lreport_ssr/examscore","host":"https://phome.yunqueyi.com","menuCode":"7801412","title":null},{"id":1388,"url":"/examtimes","fullPath":"https://phome.yunqueyi.com/lreport_ssr/examtimes","host":"https://phome.yunqueyi.com","menuCode":"7801413","title":null},{"id":1389,"url":"/klgpoint","fullPath":"https://phome.yunqueyi.com/lreport_ssr/klgpoint","host":"https://phome.yunqueyi.com","menuCode":"7801414","title":null},{"id":1390,"url":"/prolist","fullPath":"https://phome.yunqueyi.com/lreport_ssr/prolist","host":"https://phome.yunqueyi.com","menuCode":"7801415","title":null},{"id":1391,"url":"/rankdays","fullPath":"https://phome.yunqueyi.com/lreport_ssr/rankdays","host":"https://phome.yunqueyi.com","menuCode":"7801416","title":null},{"id":1392,"url":"/rankedu","fullPath":"https://phome.yunqueyi.com/lreport_ssr/rankedu","host":"https://phome.yunqueyi.com","menuCode":"7801417","title":null},{"id":1393,"url":"/","fullPath":"https://phome.yunqueyi.com/lreport_ssr/","host":"https://phome.yunqueyi.com","menuCode":"7801418","title":null}]
\ No newline at end of file \ No newline at end of file
该目录放置Vue第三方插件初始化的文件。该目录会被自动加载。
例如:
```js
import Vue from 'vue';
import { Plugin } from 'vue-fragment';
Vue.use(Plugin);
Vue.property.$test = 'pica';
```
/**
* @name: appHooks
* @author: alan
* @date: 2021-09-13 17:05
* @description:appHooks
* @update: 2021-09-13 17:05
*/
export default {
data() {
return {};
},
created() {},
mounted() {},
};
import $http from 'mn-template/plugins/http';
// 设置axios默认属性
$http.setDefaults({
headers: {},
});
// 设置http配置信息 loading、error、clear、encrypt、mockUserInfo
$http.setOptions({
loading() {
console.log('我重写了默认的loading');
},
});
// 新增前置钩子
$http.addBeforeHook((config) => console.log('我是新增的前置钩子', config), 0);
// 新增后置钩子
$http.addAfterHook(
(response) => console.log('我是新增的后置钩子', response),
0
);
/**
* @name: vue-component
* @author: alan
* @date: 2021-11-16 18:03
* @description:vue-component
* @update: 2021-11-16 18:03
*/
import Vue from 'vue';
import PageModel from '@pica-kit/page-model';
import {
Dialog,
Toast,
Popup,
Icon,
Button,
Uploader,
List,
Loading,
Swipe,
SwipeItem,
} from 'vant';
import { BASE_URL } from '@/utils/enumerate';
import PicaGuideApp, { callApp } from 'pica-guide-app';
// import PicaTopicComment from '@pica-kit/pica-topic-comment';
import PicaTopicStencil from '@pica-kit/pica-topic-stencil';
import WebBuriedPoint, { sendBuriedData } from '@pica-core/web-buried-point';
import PicaH5Login from 'pica-h5-login';
import PicaH5Agreement from 'pica-h5-agreement';
import ClipboardJS from 'clipboard';
const cookies = require('cookie-universal')();
const WX_TYPE_MAP = {
dev: 1,
test: 15,
uat: 30,
prod: 5,
};
const app_env = ['dev', 'test'];
if (app_env.indexOf(process.env.NUXT_ENV_APP) != -1) {
console.log('当前运行环境 NUXT_ENV_APP =>', process.env.NUXT_ENV_APP);
const VConsole = require('vconsole');
new VConsole();
}
// Vue.use(PicaCallApp)
Vue.use(PicaGuideApp)
.use(PicaTopicStencil)
// .use(PicaTopicComment)
.use(PicaH5Login)
.use(PicaH5Agreement)
.use(Dialog)
.use(Toast)
.use(Icon)
.use(Popup)
.use(Loading)
.use(List)
.use(Button)
.use(Uploader)
.use(Swipe)
.use(SwipeItem)
.use(PageModel);
const { NUXT_ENV_APP } = process.env;
Vue.use(WebBuriedPoint, {
class_name: 'template_v2',
url: `${BASE_URL[NUXT_ENV_APP]}/file/log/trace1`,
});
Vue.prototype.$sendBuriedData = sendBuriedData;
Vue.prototype.$cookies = cookies;
Vue.prototype.$callApp = callApp;
Vue.prototype.ClipboardJS = ClipboardJS;
Vue.prototype.$WX_TYPE = WX_TYPE_MAP[NUXT_ENV_APP];
import Vue from 'vue';
import rocNative from '@/utils/jsbridge';
// import echarts from 'echarts';
import { Toast } from 'vant';
const echarts = window.echarts;
Vue.use(Toast);
Vue.prototype.$echarts = echarts;
Vue.prototype.$rocNative = new rocNative();
import axios from 'axios';
import { name } from '../package.json';
// 整理路由
const routerObj = {};
const titleObj = {};
let baseUrl = process.env.VUE_APP_BASE_ROUTE_URL || process.env.BASE_URL || '';
let fullHost = location.host || '';
if (fullHost.indexOf('uat-') != -1) {
fullHost = fullHost.replace('uat-', '');
}
if (fullHost.indexOf('http') == -1) {
fullHost = (window.location.protocol || 'https:') + '//' + fullHost;
}
let rMode = 'history';
if (window.location.hash) {
rMode = 'hash';
baseUrl = baseUrl || location.pathname;
}
let projectName = name;
// 处理路由children
function allRouter(ele, spath) {
for (var i = 0; i < ele.length; i++) {
if (ele[i].path) {
let key = '';
if (spath && spath != '/') {
key = spath + '/' + ele[i].path;
} else {
key = ele[i].path;
}
routerObj[key] = key;
titleObj[key] = ele[i].meta && ele[i].meta.title;
if (ele[i].children) {
allRouter(ele[i].children, ele[i].path);
}
}
}
}
// 处理路由
function handleAllRouter(parmsObj) {
parmsObj.mode = parmsObj.mode || rMode;
projectName = parmsObj.projectName || projectName;
baseUrl = parmsObj.baseUrl || baseUrl || '';
const fhost = parmsObj.fullHost || fullHost;
if (baseUrl.substr(baseUrl.length - 1, 1) == '/') {
baseUrl = baseUrl.substr(0, baseUrl.length - 1);
}
if (parmsObj.mode == 'hash') {
baseUrl = baseUrl + '/#';
}
allRouter(parmsObj.routerConfig, '');
const arr = [];
for (var key in routerObj) {
const optionObj = {};
optionObj.url = routerObj[key];
optionObj.fullPath = fhost + baseUrl + routerObj[key];
optionObj.host = fhost;
optionObj.title = titleObj[key];
arr.push(optionObj);
}
sendAllRouterInfo(arr);
}
// 发送请求
function sendAllRouterInfo(data) {
let url = '';
if (process.env.NODE_ENV == 'development') {
url = 'https://dev-sc.yunqueyi.com/basic-data/menuCode/upload';
} else if (process.env.VUE_APP_ENV == 'uat') {
url = 'https://sc.yunqueyi.com/basic-data/menuCode/upload';
}
if (!url) {
return;
}
const obj = {
projectName: projectName,
menuCodeDtoList: data,
};
console.log(obj);
axios({
method: 'post',
url: url,
data: obj,
})
.then((res) => {
console.log('请求接口成功了', res.data);
return;
})
.catch((err) => {
console.log('errerrerr', err);
return;
});
}
export default handleAllRouter;
var axios=require('axios');
// 整理路由
const routerObj={};
let baseUrl='';
let port = (process.env.PORT == "80" || process.env.PORT == "443" ) ? '' : (":"+process.env.PORT)
let fullHost=process.env.HOST+port;
let projectName=require("../package.json").name
//production
// 处理路由children
function allRouter(ele){
for(var i=0;i< ele.length;i++){
if(ele[i].path){
//let key= baseUrl+spath+(spath ? "/" : '')+ele[i].path;
let key= ele[i].path;
routerObj[key]= key;
}
}
};
// 处理路由
function handleAllRouter(ObjParms){
// baseUrl
baseUrl=ObjParms.baseUrl || '';
let fhost= ObjParms.fullHost||fullHost;
allRouter(ObjParms.routes,'');
if(baseUrl.substr(baseUrl.length-1,1)=="/"){
baseUrl=baseUrl.substr(0,baseUrl.length-1)
}
let arr=[];
for(var key in routerObj){
let optionObj={};
optionObj.url=routerObj[key];
optionObj.fullPath=fhost+baseUrl+routerObj[key]
optionObj.host=fhost;
arr.push(optionObj)
}
sendAllRouterInfo(arr)
};
// 发送请求
function sendAllRouterInfo(data){
let url="https://dev-sc.yunqueyi.com/basic-data/menuCode/upload";
if(process.env.NUXT_ENV_APP!="development"){
url="https://sc.yunqueyi.com/basic-data/menuCode/upload";
}
let obj={
projectName:projectName,
menuCodeDtoList:data
}
axios({
method: 'post',
url:url,
data: obj
}).then(res=>{
console.log("请求接口成功了",res.data)
return
}).catch(err=>{
console.log("请求接口失败了")
return
});
};
// 定制化路由
// [{
// path:"/capital",
// meta:{isMountedReport:true,callback:()=>{return []}}
// }]
module.exports= handleAllRouter
```js
import { router } from '@pica-cli/vue-cli-plugin-pica-cli-plugin/auto';
import Index from '@/views/home.vue';
const routerConfig = [
{
path: '/',
name: 'Index',
component: Index
},
{
path: '*',
redirect: process.env.VUE_APP_BASE_ROUTE
}
];
router.addRoutes(routerConfig);
```
```js
// vue.config.js
module.exports = {
transpileDependencies: [
'@pica-cli/vue-cli-plugin-pica-cli-plugin'
],
pluginOptions: {
pica: {
jsSort: [],
cssSort: [],
// 配置骨架屏路由
skeletonRoutes: [
{
path: '',
name: 'Index',
meta: {
skeleton: true
}
}
],
enableAutoSkeletonRoutes: false,
routeMode: 'history',
dpsLimit: 5
},
tinypng: {
key: ''
}
}
};
module.exports.publicPath = process.env.VUE_APP_OSS_URL + '/static' + process.env.BASE_URL;
```
import { router } from '@pica-cli/vue-cli-plugin-pica-cli-plugin/auto';
try {
const originalPush = router.prototype.push;
router.prototype.push = function push(location) {
return originalPush.call(this, location).catch((err) => err);
};
} catch (error) {
console.log(error);
}
const routerConfig = [
{
path: '*',
redirect: process.env.VUE_APP_BASE_ROUTE,
},
{
path: '/',
name: 'index',
meta: {
title: '学情报告',
},
component: () => import('@/views/index'),
},
{
path: '/examscore',
name: 'examscore',
meta: {
title: '完成项目考试分数情况',
},
component: () => import('@/views/examscore'),
},
{
path: '/examtimes',
name: 'examtimes',
meta: {
title: '完成项目考试次数情况',
},
component: () => import('@/views/examscore'),
},
{
path: '/klgpoint',
name: 'klgpoint',
meta: {
title: '培训前后知识点掌握情况',
},
component: () => import('@/views/klgpoint'),
},
{
path: '/prolist',
name: 'prolist',
meta: {
title: '专项合作',
},
component: () => import('@/views/prolist'),
},
{
path: '/rankdays',
name: 'rankdays',
meta: {
title: '完成天数排名',
},
component: () => import('@/views/rankdays'),
},
{
path: '/rankedu',
name: 'rankedu',
meta: {
title: '项目情况排名',
},
component: () => import('@/views/rankedu'),
},
];
router.addRoutes(routerConfig);
import qs from 'qs'; import qs from 'qs';
import request from './api'; import request from 'mn-template/plugins/http';
export const getHospital = async (params) => { export const getHospital = async (params) => {
let query = { pageNum: 1, pageSize: 1, ...params }; const query = { pageNum: 1, pageSize: 1, ...params };
const str = qs.stringify(query); const str = qs.stringify(query);
return request({ url: `/api-ws/hospitals/?${str}` }); return request({ url: `/api-ws/hospitals/?${str}` });
}; };
/** /**
* 通用获取区域或机构列表 * 通用获取区域或机构列表
*/ */
export const getAreaOrOrgList = async params => { export const getAreaOrOrgList = async (params) => {
return request({ return request({
method: 'get', method: 'get',
params: params, params: params,
withCredentials: true, withCredentials: true,
url: 'stats/region' url: 'stats/region',
}); });
}; };
/** /**
* 获取区域(一般是乡镇)下的机构列表 * 获取区域(一般是乡镇)下的机构列表
*/ */
export const getOrgListByTownId = async params => { export const getOrgListByTownId = async (params) => {
return request({ return request({
method: 'get', method: 'get',
params: params, params: params,
withCredentials: true, withCredentials: true,
url: '/basic-data/position/towns' url: '/basic-data/position/towns',
}); });
}; };
/** /**
* 总体情况-选择地区下 * 总体情况-选择地区下
*/ */
export const getGeneralData = async data => { export const getGeneralData = async (data) => {
return request({ return request({
method: 'post', method: 'post',
data: data, data: data,
withCredentials: true, withCredentials: true,
url: 'stats/report/general' url: 'stats/report/general',
}); });
}; };
/** /**
* 根据地区查询机构 * 根据地区查询机构
*/ */
export const getHospitalsByRegionId = async params => { export const getHospitalsByRegionId = async (params) => {
return request({ return request({
method: 'get', method: 'get',
params: params, params: params,
withCredentials: true, withCredentials: true,
url: 'stats/region/hospital' url: 'stats/region/hospital',
}); });
}; };
/** /**
* 人群分析 * 人群分析
*/ */
export const getUserAnalysis = async data => { export const getUserAnalysis = async (data) => {
return request({ return request({
// baseURL: 'http://10.177.11.156:10443/', // baseURL: 'http://10.177.11.156:10443/',
method: 'post', method: 'post',
data: data, data: data,
withCredentials: true, withCredentials: true,
url: 'stats/report/userAnalysis' url: 'stats/report/userAnalysis',
}); });
}; };
/** /**
* 根据地区查询地区下是否有机构 * 根据地区查询地区下是否有机构
*/ */
export const getHospitalsCNT = async params => { export const getHospitalsCNT = async (params) => {
return request({ return request({
method: 'get', method: 'get',
params: params, params: params,
withCredentials: true, withCredentials: true,
url: 'stats/region/hospitals/cnt' url: 'stats/region/hospitals/cnt',
}); });
}; };
/** /**
* 总体情况-选择机构下人员情况 * 总体情况-选择机构下人员情况
*/ */
export const getGeneralPersonal = async data => { export const getGeneralPersonal = async (data) => {
return request({ return request({
method: 'post', method: 'post',
data: data, data: data,
withCredentials: true, withCredentials: true,
url: 'stats/report/generalPersonal/' + data.pageCfg.type url: 'stats/report/generalPersonal/' + data.pageCfg.type,
// url: `stats/report/generalPersonal/${data.pageCfg.type}/${data.pageCfg.pageNo}/${data.pageCfg.pageSize}` // url: `stats/report/generalPersonal/${data.pageCfg.type}/${data.pageCfg.pageNo}/${data.pageCfg.pageSize}`
}); });
}; };
...@@ -98,12 +97,12 @@ export const getGeneralPersonal = async data => { ...@@ -98,12 +97,12 @@ export const getGeneralPersonal = async data => {
/** /**
* 总体情况-课程分析接口 * 总体情况-课程分析接口
*/ */
export const getGeneralCourse = async data => { export const getGeneralCourse = async (data) => {
return request({ return request({
method: 'post', method: 'post',
data: data, data: data,
withCredentials: true, withCredentials: true,
url: 'stats/report/course' url: 'stats/report/course',
// url: `stats/report/course/0/0` // url: `stats/report/course/0/0`
}); });
}; };
...@@ -111,96 +110,95 @@ export const getGeneralCourse = async data => { ...@@ -111,96 +110,95 @@ export const getGeneralCourse = async data => {
/** /**
* 总体情况-考试分析接口 * 总体情况-考试分析接口
*/ */
export const getGeneralExam = async data => { export const getGeneralExam = async (data) => {
return request({ return request({
method: 'post', method: 'post',
data: data, data: data,
withCredentials: true, withCredentials: true,
url: 'stats/report/exam' url: 'stats/report/exam',
}); });
}; };
/** /**
* 总体情况-考试分析考试列表 * 总体情况-考试分析考试列表
*/ */
export const getGeneralExamList = async data => { export const getGeneralExamList = async (data) => {
return request({ return request({
method: 'post', method: 'post',
data: data, data: data,
withCredentials: true, withCredentials: true,
url: 'stats/report/exam/list' url: 'stats/report/exam/list',
}); });
}; };
/** /**
* 总体情况-考试分析接口(单个机构) * 总体情况-考试分析接口(单个机构)
*/ */
export const getGeneralExamSingle = async params => { export const getGeneralExamSingle = async (params) => {
return request({ return request({
method: 'get', method: 'get',
params: params, params: params,
withCredentials: true, withCredentials: true,
url: 'stats/report/exam/' + params.projectId + '/' + params.hospitalId url: 'stats/report/exam/' + params.projectId + '/' + params.hospitalId,
}); });
}; };
/** /**
* 查询用户信息和权限 * 查询用户信息和权限
*/ */
export const getProjectInfo = async params => { export const getProjectInfo = async (params) => {
return request({ return request({
method: 'get', method: 'get',
params: params, params: params,
withCredentials: true, withCredentials: true,
url: 'stats/region/info' url: 'stats/region/info',
}); });
}; };
/** /**
* 学习效果分析 * 学习效果分析
*/ */
export const getStudyEffect = async data => { export const getStudyEffect = async (data) => {
return request({ return request({
method: 'post', method: 'post',
data: data, data: data,
withCredentials: true, withCredentials: true,
url: 'stats/report/studyEffect' url: 'stats/report/studyEffect',
}); });
}; };
/** /**
* 总体情况-项目情况排名 * 总体情况-项目情况排名
*/ */
export const getStudyRankData = async data => { export const getStudyRankData = async (data) => {
return request({ return request({
method: 'post', method: 'post',
data: data, data: data,
withCredentials: true, withCredentials: true,
url: 'stats/report/studyRank/' + data.pageCfg.type url: 'stats/report/studyRank/' + data.pageCfg.type,
}); });
}; };
/** /**
* 总体情况-完成天数排名 * 总体情况-完成天数排名
*/ */
export const getStudyTimeData = async data => { export const getStudyTimeData = async (data) => {
return request({ return request({
method: 'post', method: 'post',
data: data, data: data,
withCredentials: true, withCredentials: true,
url: 'stats/report/studyTime/' + data.pageCfg.type url: 'stats/report/studyTime/' + data.pageCfg.type,
}); });
}; };
/** /**
* 查询用户项目列表 * 查询用户项目列表
*/ */
export const getProjectList = async params => { export const getProjectList = async (params) => {
return request({ return request({
method: 'get', method: 'get',
params: params, params: params,
withCredentials: true, withCredentials: true,
url: 'portal/report/getReportListForApp' url: 'portal/report/getReportListForApp',
}); });
}; };
...@@ -11,7 +11,7 @@ export const state = () => ({ ...@@ -11,7 +11,7 @@ export const state = () => ({
areaDegree: 0, areaDegree: 0,
currentOrgList: [], currentOrgList: [],
originalFlag: 1, originalFlag: 1,
}) });
export const getters = { export const getters = {
projectId(state) { projectId(state) {
return state.projectId; return state.projectId;
...@@ -45,11 +45,11 @@ export const getters = { ...@@ -45,11 +45,11 @@ export const getters = {
}, },
currentOrgList(state) { currentOrgList(state) {
return state.currentOrgList; return state.currentOrgList;
}, },
originalFlag(state) { originalFlag(state) {
return state.originalFlag; return state.originalFlag;
}, },
} };
export const mutations = { export const mutations = {
SET_PROJECT_ID(state, projectId) { SET_PROJECT_ID(state, projectId) {
state.projectId = projectId; state.projectId = projectId;
...@@ -87,7 +87,7 @@ export const mutations = { ...@@ -87,7 +87,7 @@ export const mutations = {
SET_ORIGINAL_FLAG(state, originalFlag) { SET_ORIGINAL_FLAG(state, originalFlag) {
state.originalFlag = originalFlag; state.originalFlag = originalFlag;
}, },
} };
export const actions = { export const actions = {
setProjectId({ commit }, projectId) { setProjectId({ commit }, projectId) {
commit('SET_PROJECT_ID', projectId); commit('SET_PROJECT_ID', projectId);
...@@ -125,4 +125,4 @@ export const actions = { ...@@ -125,4 +125,4 @@ export const actions = {
setOriginalFlag({ commit }, originalFlag) { setOriginalFlag({ commit }, originalFlag) {
commit('SET_ORIGINAL_FLAG', originalFlag); commit('SET_ORIGINAL_FLAG', originalFlag);
}, },
} };
\ No newline at end of file
export default {
namespaced: true,
state: {
count: 0,
},
mutations: {
add(state, val = 1) {
state.count += val;
},
},
};
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
body {
background-color: $colorBackground;
// color: $color4;
}
a,
a:hover,
a:active,
a:focus {
text-decoration: none;
color: $color4;
}
input {
border: 0;
outline: none;
}
img {
display: block;
border: 0;
width: 100%;
height: 100%;
}
.clear:before,
.clear:after {
content: '';
display: block;
clear: both;
height: 0;
}
input::-webkit-input-placeholder {
color: $color10 !important;
}
input::-moz-placeholder {
color: $color10 !important;
}
input::-ms-input-placeholder {
color: $color10 !important;
}
input[type='search']::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.van-picker__toolbar {
height: 45px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px -4px 15px 0px rgba(0, 0, 0, 0.05);
}
.van-picker__columns {
background: rgba(255, 255, 255, 1);
box-shadow: 0px -4px 15px 0px rgba(0, 0, 0, 0.05);
}
.van-picker__confirm {
color: #15a4ac;
}
.van-picker__title {
font-size: 13px;
font-weight: 400;
color: rgba(131, 139, 152, 1);
}
.fixed-bottom-20 {
position: fixed;
bottom: 20px;
}
.van-toast__icon {
font-size: 25px;
}
.page-right-content {
position: absolute;
left: -40px;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.flex-between {
justify-content: space-between;
}
.flex-around {
justify-content: space-around;
}
.flex-center {
align-items: center;
justify-content: center;
}
.flex-expanded {
flex: 1;
}
.van-action-sheet__item {
&:not(:first-child) {
border-top: 1px solid rgba(216, 216, 216, 0.8);
}
}
.van-cell__left-icon,
.van-cell__right-icon {
line-height: 24px !important;
}
#app {
.__vuescroll .__refresh svg.start .active-path,
.__vuescroll .__load svg.start .active-path {
stroke: #c8c9cc;
}
.__vuescroll .__refresh svg path,
.__vuescroll .__refresh svg rect,
.__vuescroll .__load svg path,
.__vuescroll .__load svg rect {
fill: #c8c9cc;
}
.__vuescroll .__refresh,
.__vuescroll .__load {
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
color: rgba(0, 0, 0, 0.5);
}
.__vuescroll .__refresh svg,
.__vuescroll .__load svg {
height: 16px;
width: 16px;
}
}
.symbol-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.echarts-tip {
&-warp {
position: relative;
}
&-background {
background: #fbbd52;
padding: 1px 7px;
border-radius: 2px;
font-size: 13px;
}
&-triangle-down {
width: 0;
height: 0;
position: relative;
left: calc(50% - 4px);
top: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 3px solid #fbbd52;
}
}
html {
color: #000;
background: #fff;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html * {
outline: 0;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html,
body {
font-family: PingFangSC-Regular, -apple-system-font, Source Han Sans,
Helvetica Neue, sans-serif;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0;
}
/*
input, select, textarea {
font-size: 100%;
}
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,
img {
border: 0;
}
abbr,
acronym {
border: 0;
font-variant: normal;
}
del {
text-decoration: line-through;
}
address,
caption,
cite,
code,
dfn,
em,
th,
var {
font-style: normal;
font-weight: 500;
}
ol,
ul {
list-style: none;
}
caption,
th {
text-align: left;
}
/*
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: 500;
}
*/
q:before,
q:after {
content: '';
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
a:hover {
text-decoration: underline;
}
ins,
a {
text-decoration: none;
}
$color1: rgba(15, 28, 52, 1);
$color2: #58ffd2;
$color3: #ffbf38;
$color4: #15a4ac;
$color5: #83ffb5;
$color6: #eb4343;
$color7: #eb7c43;
$color8: linear-gradient(
360deg,
rgba(21, 164, 172, 1) 0%,
rgba(40, 210, 200, 1) 100%
);
$color9: #58ffd2;
$color10: #a4aab3;
$color11: #969dba;
$color12: #bbbbbb;
$color13: #ffab00;
$color14: #0000ff;
$color15: linear-gradient(
180deg,
rgba(255, 217, 125, 1) 0%,
rgba(255, 167, 17, 1) 100%
);
$color16: #d2d2d2;
$color17: #333333;
$color18: #999999;
$color19: linear-gradient(
90deg,
rgba(40, 210, 200, 1) 0%,
rgba(21, 164, 172, 1) 100%
);
$color20: #ff6e00;
$colorA: #4a90e2;
$colorB: #5ace6d;
$colorBackground: #f5f5f5;
$colorWhite: #fff;
$colorAqi1: #68cb00;
$colorAqi2: #ffc000;
$colorAqi3: #df2d00;
$colorAqi4: #6f0574;
.top-error-message {
top: 12%;
width: 80%;
}
...@@ -4,7 +4,7 @@ export const BASE_URL = { ...@@ -4,7 +4,7 @@ export const BASE_URL = {
dev: 'https://dev-sc.yunqueyi.com', dev: 'https://dev-sc.yunqueyi.com',
test: 'https://test1-sc.yunqueyi.com', test: 'https://test1-sc.yunqueyi.com',
uat: 'https://uat-sc.yunqueyi.com', uat: 'https://uat-sc.yunqueyi.com',
prod: 'https://sc.yunqueyi.com' prod: 'https://sc.yunqueyi.com',
}; };
export const SHARE_URL = { export const SHARE_URL = {
...@@ -12,22 +12,10 @@ export const SHARE_URL = { ...@@ -12,22 +12,10 @@ export const SHARE_URL = {
test: 'https://test1-phome.yunqueyi.com', test: 'https://test1-phome.yunqueyi.com',
uat: 'https://uat-phome.yunqueyi.com', uat: 'https://uat-phome.yunqueyi.com',
prod: 'https://phome.yunqueyi.com', prod: 'https://phome.yunqueyi.com',
} };
export function getShareUrl() { export function getShareUrl() {
return SHARE_URL[NUXT_ENV_APP] return SHARE_URL[NUXT_ENV_APP];
}
export const API_CONFIG = {
baseURL: BASE_URL[NUXT_ENV_APP],
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json;charset=UTF-8'
},
timeout: 10000,
withCredentials: false,
responseType: 'json',
method: 'get'
} }
export const REPONSE_CODE = { export const REPONSE_CODE = {
...@@ -41,6 +29,5 @@ export const REPONSE_CODE = { ...@@ -41,6 +29,5 @@ export const REPONSE_CODE = {
500: '服务器发生错误,请检查服务器。', 500: '服务器发生错误,请检查服务器。',
502: '网关错误。', 502: '网关错误。',
503: '服务不可用,服务器暂时过载或维护。', 503: '服务不可用,服务器暂时过载或维护。',
504: '网关超时。' 504: '网关超时。',
}; };
import { getShareUrl } from './enumerate' import { getShareUrl } from './enumerate';
export const getSearchByName = name => { export const getSearchByName = (name) => {
const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.href); const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.href);
return match && decodeURIComponent(match[1].replace(/\+/g, ' ')); return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}; };
export const getItem = name => { export const getItem = (name) => {
if (!name) return; if (!name) return;
const v = sessionStorage.getItem(name); const v = sessionStorage.getItem(name);
let val = null; let val = null;
...@@ -26,33 +26,33 @@ export const setItem = (name, value) => { ...@@ -26,33 +26,33 @@ export const setItem = (name, value) => {
sessionStorage.setItem(name, value); sessionStorage.setItem(name, value);
}; };
export const removeItem = name => { export const removeItem = (name) => {
if (!name) return; if (!name) return;
sessionStorage.removeItem(name); sessionStorage.removeItem(name);
}; };
export const echartColors = [ export const echartColors = [
"#F6BD16", '#F6BD16',
"#39AF9A", '#39AF9A',
"#5D7092", '#5D7092',
"#1865FF", '#1865FF',
"#6DC8EC", '#6DC8EC',
"#E8684A", '#E8684A',
"#FFB01B" '#FFB01B',
] ];
// 日期与时间解析函数 // 日期与时间解析函数
export function parseTime(time, cFormat) { export function parseTime(time, cFormat) {
if (arguments.length === 0) { if (arguments.length === 0) {
return null return null;
} }
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
let date let date;
if (typeof time === 'object') { if (typeof time === 'object') {
date = time date = time;
} else { } else {
if (('' + time).length === 10) time = parseInt(time) * 1000 if (('' + time).length === 10) time = parseInt(time) * 1000;
date = new Date(time) date = new Date(time);
} }
const formatObj = { const formatObj = {
y: date.getFullYear(), y: date.getFullYear(),
...@@ -61,55 +61,60 @@ export function parseTime(time, cFormat) { ...@@ -61,55 +61,60 @@ export function parseTime(time, cFormat) {
h: date.getHours(), h: date.getHours(),
i: date.getMinutes(), i: date.getMinutes(),
s: date.getSeconds(), s: date.getSeconds(),
a: date.getDay() a: date.getDay(),
} };
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key] let value = formatObj[key];
if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1] if (key === 'a')
return ['一', '二', '三', '四', '五', '六', '日'][value - 1];
if (result.length > 0 && value < 10) { if (result.length > 0 && value < 10) {
value = '0' + value value = '0' + value;
} }
return value || 0 return value || 0;
}) });
return time_str return time_str;
} }
// 跳转到新的学情报告页面 // 跳转到新的学情报告页面
export function goPageByNative(vm, pageSubUrl){ export function goPageByNative(vm, pageSubUrl) {
let url = getShareUrl() + pageSubUrl; const url = getShareUrl() + pageSubUrl;
let paramList = [ const paramList = [
{ {
"key":"pageUrl", key: 'pageUrl',
"value": url, value: url,
"type":4, type: 4,
"seqNo":1 seqNo: 1,
},{ },
"key":"showTitle", {
"value": false, key: 'showTitle',
"type":1, value: false,
"seqNo":2 type: 1,
},{ seqNo: 2,
"key":"title", },
"value": '', {
"type":1, key: 'title',
"seqNo":3 value: '',
} type: 1,
] seqNo: 3,
vm.$rocNative.dispatchEventByModuleCode && vm.$rocNative.dispatchEventByModuleCode({ },
];
vm.$rocNative.dispatchEventByModuleCode &&
vm.$rocNative.dispatchEventByModuleCode({
modeCode: 'M300', modeCode: 'M300',
jsonString: paramList jsonString: paramList,
}) });
} }
// 跳转到原生的学情详情页面 // 跳转到原生的学情详情页面
export function goNativePage(vm, config = {id: 1, authType: 1}){ export function goNativePage(vm) {
let paramList = [ const paramList = [
{ {
"key":"className", key: 'className',
// "value": 'com.picahealth.yunque.activitys.learnreport.learnreport2.NewLearnReportActivity###NewLearnReportVC.PicaDo', // "value": 'com.picahealth.yunque.activitys.learnreport.learnreport2.NewLearnReportActivity###NewLearnReportVC.PicaDo',
"value": 'com.picahealth.yunque.activitys.learnreport.MyLearnReportActivity###StudyCourseListViewController', value:
"type":4, 'com.picahealth.yunque.activitys.learnreport.MyLearnReportActivity###StudyCourseListViewController',
"seqNo":1 type: 4,
seqNo: 1,
}, },
// { // {
// "key":"id", // "key":"id",
...@@ -122,9 +127,10 @@ export function goNativePage(vm, config = {id: 1, authType: 1}){ ...@@ -122,9 +127,10 @@ export function goNativePage(vm, config = {id: 1, authType: 1}){
// "type": 1, // "type": 1,
// "seqNo": 3 // "seqNo": 3
// } // }
] ];
vm.$rocNative.dispatchEventByModuleCode && vm.$rocNative.dispatchEventByModuleCode({ vm.$rocNative.dispatchEventByModuleCode &&
vm.$rocNative.dispatchEventByModuleCode({
modeCode: 'M200', modeCode: 'M200',
jsonString: paramList jsonString: paramList,
}) });
} }
\ No newline at end of file
/* /*
* @Author: souse * @Author: souse
* @Date: 2019-08-12 18:08:07 * @Date: 2019-08-12 18:08:07
* @Last Modified by: souse * @Last Modified by: souse
* @Last Modified time: 2019-08-13 19:17:00 * @Last Modified time: 2019-08-13 19:17:00
* @Descript 和app交互的接口调用 单例模式 * @Descript 和app交互的接口调用 单例模式
...@@ -9,16 +9,26 @@ ...@@ -9,16 +9,26 @@
const ARRAY_CLASS = '[object Array]'; const ARRAY_CLASS = '[object Array]';
const _toString = Object.prototype.toString; const _toString = Object.prototype.toString;
/** /**
* set default options * set default options
*/ */
export const JsBridgeOptions = { export const JsBridgeOptions = {
GLOBAL_NAME: 'rocNative', GLOBAL_NAME: 'rocNative',
NATIVE_IOS_NAME: 'rociOS', NATIVE_IOS_NAME: 'rociOS',
NATIVE_ANDROID_NAME: '__rocAndroid', NATIVE_ANDROID_NAME: '__rocAndroid',
initMethodsWithCallBack: ['getToken', 'getUserInfo', 'getLocalData'], // value is string initMethodsWithCallBack: ['getToken', 'getUserInfo', 'getLocalData'], // value is string
initMethodsWithoutCallBack: ['gotoLogin', 'appInit', 'goBack', 'shareWechat', 'showNativeToast', 'dispatchEventByModuleCode', 'appBuryingPointEntrust', 'webLoadSuccess', 'sendBuriedPoint'] // value is string initMethodsWithoutCallBack: [
} 'gotoLogin',
'appInit',
'goBack',
'shareWechat',
'showNativeToast',
'dispatchEventByModuleCode',
'appBuryingPointEntrust',
'webLoadSuccess',
'sendBuriedPoint',
], // value is string
};
/** /**
* @description * @description
...@@ -37,24 +47,34 @@ export default class PicaJsBridge { ...@@ -37,24 +47,34 @@ export default class PicaJsBridge {
this._GLOBAL_NAME = options.GLOBAL_NAME; this._GLOBAL_NAME = options.GLOBAL_NAME;
this._NATIVE_IOS_NAME = options.NATIVE_IOS_NAME; this._NATIVE_IOS_NAME = options.NATIVE_IOS_NAME;
this._NATIVE_ANDROID_NAME = options.NATIVE_ANDROID_NAME; this._NATIVE_ANDROID_NAME = options.NATIVE_ANDROID_NAME;
this.isIOS = this._isIos(); this.isIOS = this._isIos();
this.isAndroid = this._isAndroid(); this.isAndroid = this._isAndroid();
this.isWeb = this._isWeb(); this.isWeb = this._isWeb();
if (_toString.call(initMethodsWithCallBack) === ARRAY_CLASS && initMethodsWithCallBack.length !== 0) { if (
_toString.call(initMethodsWithCallBack) === ARRAY_CLASS &&
initMethodsWithCallBack.length !== 0
) {
this.registerMethods(initMethodsWithCallBack, true); this.registerMethods(initMethodsWithCallBack, true);
} }
if (_toString.call(initMethodsWithoutCallBack) === ARRAY_CLASS && initMethodsWithoutCallBack.length !== 0) { if (
_toString.call(initMethodsWithoutCallBack) === ARRAY_CLASS &&
initMethodsWithoutCallBack.length !== 0
) {
this.registerMethods(initMethodsWithoutCallBack, false); this.registerMethods(initMethodsWithoutCallBack, false);
} }
this.mountToWindow(); this.mountToWindow();
} }
// is ios flag // is ios flag
_isIos() { _isIos() {
return !!(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers[this._NATIVE_IOS_NAME]); return !!(
window.webkit &&
window.webkit.messageHandlers &&
window.webkit.messageHandlers[this._NATIVE_IOS_NAME]
);
} }
// is android flag // is android flag
...@@ -73,27 +93,31 @@ export default class PicaJsBridge { ...@@ -73,27 +93,31 @@ export default class PicaJsBridge {
_this[method] = (param) => { _this[method] = (param) => {
return new Promise((response, reject) => { return new Promise((response, reject) => {
_this._callNative(method, param, function(result) { _this._callNative(method, param, function (result) {
response(result); response(result);
}) ? void 0 : reject(`${method} not handled.`); })
? void 0
: reject(`${method} not handled.`);
}); });
} };
} }
// register method widthout callback in window // register method widthout callback in window
_registerMethodWithoutMethod(method) { _registerMethodWithoutMethod(method) {
const _this = this; const _this = this;
_this[method] = (param) => { _this[method] = (param) => {
return new Promise((response, reject) => { return new Promise((response, reject) => {
_this._callNative(method, param, null) ? response('success') : reject(`${method} not handled.`); _this._callNative(method, param, null)
? response('success')
: reject(`${method} not handled.`);
}); });
} };
} }
// window call app method // window call app method
_callNative(name, param, callbackFn) { _callNative(name, param, callbackFn) {
let callbackId = 0, pm; let callbackId = 0;
if (typeof callbackFn === 'function') { if (typeof callbackFn === 'function') {
this._callbackId++; this._callbackId++;
...@@ -101,10 +125,10 @@ export default class PicaJsBridge { ...@@ -101,10 +125,10 @@ export default class PicaJsBridge {
this._callbakFns[callbackId] = callbackFn; this._callbakFns[callbackId] = callbackFn;
} }
pm = JSON.stringify({ const pm = JSON.stringify({
name, name,
callbackId: callbackId ? callbackId.toString() : '', callbackId: callbackId ? callbackId.toString() : '',
param: param || {} param: param || {},
}); });
if (this.isAndroid) { if (this.isAndroid) {
...@@ -122,11 +146,10 @@ export default class PicaJsBridge { ...@@ -122,11 +146,10 @@ export default class PicaJsBridge {
// app call window method // app call window method
__nativeCall(name, callbackId, result) { __nativeCall(name, callbackId, result) {
const wFun = window[callbackId]; const wFun = window[callbackId];
const fun = callbackId && this._callbakFns[callbackId]; const fun = callbackId && this._callbakFns[callbackId];
//add by zhangping // add by zhangping
if (wFun && typeof wFun === 'function') { if (wFun && typeof wFun === 'function') {
wFun(result); wFun(result);
return; return;
...@@ -140,20 +163,24 @@ export default class PicaJsBridge { ...@@ -140,20 +163,24 @@ export default class PicaJsBridge {
// batch register methods // batch register methods
registerMethods(methods = [], widthCallback) { registerMethods(methods = [], widthCallback) {
if (undefined === widthCallback) if (undefined === widthCallback)
throw Error('widthCallback flag not defined, registerMethods should take second param value(true/false) for is not has callback.'); throw Error(
'widthCallback flag not defined, registerMethods should take second param value(true/false) for is not has callback.'
if(this.isWeb) return; // Add By Anndy Yang );
methods.forEach(m => {
widthCallback === true ? this._registerMethod(m) : this._registerMethodWithoutMethod(m) if (this.isWeb) return; // Add By Anndy Yang
}); methods.forEach((m) => {
widthCallback === true
? this._registerMethod(m)
: this._registerMethodWithoutMethod(m);
});
} }
// async call app method do not need register // async call app method do not need register
asyncCallNative(method, param) { asyncCallNative(method, param) {
const _this = this; const _this = this;
return new Promise(resolve => { return new Promise((resolve) => {
_this._callNative(method, param, function(result) { _this._callNative(method, param, function (result) {
resolve(result); resolve(result);
}); });
}); });
...@@ -168,4 +195,4 @@ export default class PicaJsBridge { ...@@ -168,4 +195,4 @@ export default class PicaJsBridge {
mountToWindow() { mountToWindow() {
window[this._GLOBAL_NAME] = this; window[this._GLOBAL_NAME] = this;
} }
} }
\ No newline at end of file
// 跳转客服
import request from 'mn-template/plugins/http';
/*
*code ("0003-药械专线 0004-问诊专线 0007-会员专线 0002-教培专线 0005-招募专线 0001-基础业务")
*type 1-详情,2-ID、名称
*contentId 内容ID
*contentName 内容名称
*/
const getImUrl = (data) => {
return request({
withCredentials: true,
url: '/im/call/im/link',
method: 'post',
data: data,
});
};
function nativeGo(url) {
const paramList = [
{
key: 'pageUrl',
value: url,
type: 4,
seqNo: 1,
},
];
this.rocNative.dispatchEventByModuleCode({
modeCode: 'M300',
jsonString: paramList,
});
}
export const goKfFn = (params) => {
getImUrl(params)
.then((res) => {
if (res.code == '000000') {
nativeGo(res.data);
}
})
.catch((err) => {
console.log(err);
});
};
<template> <template>
<section class="exam-score-wrapper"> <section class="exam-score-wrapper">
<CommonHeader title="完成项目考试分数情况"></CommonHeader> <CommonHeader title="完成项目考试分数情况" />
<CommonTitleWithDropdown :dataList="dropdownList" :title="title" :needRightBtn="needRightBtn" @selectSortItem="selectSortItem"></CommonTitleWithDropdown> <CommonTitleWithDropdown
<ExamScoreList class="pdt-50" :dataList="dataList"></ExamScoreList> :data-list="dropdownList"
<CommonNoMore v-if="dataList.length >= 10" class="mt-10"></CommonNoMore> :title="title"
<Loading v-show="isShowLoading"></Loading> :need-right-btn="needRightBtn"
@selectSortItem="selectSortItem"
/>
<ExamScoreList
class="pdt-50"
:data-list="dataList"
/>
<CommonNoMore
v-if="dataList.length >= 10"
class="mt-10"
/>
<Loading v-show="isShowLoading" />
</section> </section>
</template> </template>
<script> <script>
const cookies = require("cookie-universal")(); const cookies = require('cookie-universal')();
import { getGeneralExam } from "@/service"; import { getGeneralExam } from '@/service';
import CommonHeader from "@/components/common/common-header"; import CommonHeader from '@/components/common/common-header';
import CommonTitleWithDropdown from "@/components/common/common-title-with-dropdown"; import CommonTitleWithDropdown from '@/components/common/common-title-with-dropdown';
import CommonNoMore from "@/components/common/common-no-more"; import CommonNoMore from '@/components/common/common-no-more';
import ExamScoreList from "@/components/bussiness/exam-score-list"; import ExamScoreList from '@/components/bussiness/exam-score-list';
import Loading from "@/components/common/common-loading"; import Loading from '@/components/common/common-loading';
import { mapGetters } from "vuex"; import { mapGetters } from 'vuex';
export default { export default {
components: { components: {
...@@ -24,99 +35,102 @@ export default { ...@@ -24,99 +35,102 @@ export default {
CommonTitleWithDropdown, CommonTitleWithDropdown,
CommonNoMore, CommonNoMore,
ExamScoreList, ExamScoreList,
Loading Loading,
}, },
data() { data() {
return { return {
isShowLoading: true, isShowLoading: true,
title: "共0条数据", title: '共0条数据',
needRightBtn: true, needRightBtn: true,
token: "", token: '',
// 查询概况数据 // 查询概况数据
queryGDParams: { queryGDParams: {
appSelectType: 2, appSelectType: 2,
beginDate: "", beginDate: '',
endDate: "", endDate: '',
hospitalIdList: [], hospitalIdList: [],
originalFlag: 2, // 默认值0:0不查看原始数据 originalFlag: 2, // 默认值0:0不查看原始数据
projectId: 374, projectId: 374,
regionId: "", regionId: '',
timeFlag: 1, timeFlag: 1,
pageNo: 0, pageNo: 0,
pageSize: 0, pageSize: 0,
sourceType: 1, sourceType: 1,
pageCfg: { pageCfg: {
type: 1 type: 1,
} },
}, },
allData: {}, allData: {},
dataList: [], dataList: [],
dropdownList: [{ dropdownList: [
desc: '1分', {
type: 1 desc: '1分',
},{ type: 1,
desc: '5分', },
type: 2 {
},{ desc: '5分',
desc: '10分', type: 2,
type: 3 },
}], {
desc: '10分',
type: 3,
},
],
}; };
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
originalFlag: "originalFlag", originalFlag: 'originalFlag',
}), }),
}, },
created() { created() {
if (process.client) { if (process.client) {
if(this.$route && this.$route.query) { if (this.$route && this.$route.query) {
let cQuery = this.$route.query const cQuery = this.$route.query;
this.queryGDParams.projectId = cQuery.projectId || ''; this.queryGDParams.projectId = cQuery.projectId || '';
this.queryGDParams.regionId = cQuery.regionId || ''; this.queryGDParams.regionId = cQuery.regionId || '';
let hospitalIdList = cQuery.hospitalIdList || '' const hospitalIdList = cQuery.hospitalIdList || '';
this.queryGDParams.hospitalIdList = hospitalIdList && hospitalIdList.split(',') || []; this.queryGDParams.hospitalIdList =
cookies.set("lreporttoken", cQuery.token || ''); (hospitalIdList && hospitalIdList.split(',')) || [];
cookies.set('lreporttoken', cQuery.token || '');
this.queryGDParams.originalFlag = cQuery.originalFlag; this.queryGDParams.originalFlag = cQuery.originalFlag;
this.getGeneralExam(this.queryGDParams); this.getGeneralExam(this.queryGDParams);
} }
} }
}, },
mounted() { mounted() {},
},
methods: { methods: {
// 考试分析 // 考试分析
async getGeneralExam(queryData) { async getGeneralExam(queryData) {
await getGeneralExam(queryData).then(res => { await getGeneralExam(queryData).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.isShowLoading = false; this.isShowLoading = false;
this.allData = res.data; this.allData = res.data;
this.dataList = res.data.examScoreList; this.dataList = res.data.examScoreList;
this.title = `共${this.dataList.length}条数据`; this.title = `共${this.dataList.length}条数据`;
} }
}); });
}, },
selectSortItem(type) { selectSortItem(type) {
if(type == 1) { if (type == 1) {
this.dataList = this.allData.examScoreList || []; this.dataList = this.allData.examScoreList || [];
} else if(type === 2) { } else if (type === 2) {
this.dataList = this.allData.fiveExamScoreList || []; this.dataList = this.allData.fiveExamScoreList || [];
} else if(type === 3) { } else if (type === 3) {
this.dataList = this.allData.tenExamScoreList || []; this.dataList = this.allData.tenExamScoreList || [];
} }
this.title = `共${this.dataList.length}条数据`; this.title = `共${this.dataList.length}条数据`;
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.exam-score-wrapper { .exam-score-wrapper {
.pdt-50 { .pdt-50 {
padding-top: 50px; padding-top: 50px;
} }
.mt-10 { .mt-10 {
margin-top: 10px !important; margin-top: 10px !important;
}
} }
</style> }
\ No newline at end of file </style>
<template> <template>
<section class="exam-times-wrapper"> <section class="exam-times-wrapper">
<CommonHeader title="完成项目考试次数情况"></CommonHeader> <CommonHeader title="完成项目考试次数情况" />
<CommonTitleMini :title="title" :needRightBtn="needRightBtn"></CommonTitleMini> <CommonTitleMini
<ExamTimesList class="pdt-50" :dataList="dataList"></ExamTimesList> :title="title"
<CommonNoMore v-if="dataList.length >= 10" class="mt-10"></CommonNoMore> :need-right-btn="needRightBtn"
<Loading v-show="isShowLoading"></Loading> />
<ExamTimesList
class="pdt-50"
:data-list="dataList"
/>
<CommonNoMore
v-if="dataList.length >= 10"
class="mt-10"
/>
<Loading v-show="isShowLoading" />
</section> </section>
</template> </template>
<script> <script>
const cookies = require("cookie-universal")(); const cookies = require('cookie-universal')();
import { getGeneralExam } from "@/service"; import { getGeneralExam } from '@/service';
import CommonHeader from "@/components/common/common-header"; import CommonHeader from '@/components/common/common-header';
import CommonTitleMini from "@/components/common/common-title-mini"; import CommonTitleMini from '@/components/common/common-title-mini';
import CommonNoMore from "@/components/common/common-no-more"; import CommonNoMore from '@/components/common/common-no-more';
import ExamTimesList from "@/components/bussiness/exam-times-list"; import ExamTimesList from '@/components/bussiness/exam-times-list';
import Loading from "@/components/common/common-loading"; import Loading from '@/components/common/common-loading';
import { mapGetters } from "vuex"; import { mapGetters } from 'vuex';
export default { export default {
components: { components: {
...@@ -24,77 +33,76 @@ export default { ...@@ -24,77 +33,76 @@ export default {
CommonTitleMini, CommonTitleMini,
CommonNoMore, CommonNoMore,
ExamTimesList, ExamTimesList,
Loading Loading,
}, },
data() { data() {
return { return {
isShowLoading: true, isShowLoading: true,
title: "共0条数据", title: '共0条数据',
needRightBtn: false, needRightBtn: false,
token: "", token: '',
// 查询概况数据 // 查询概况数据
queryGDParams: { queryGDParams: {
appSelectType: 1, appSelectType: 1,
beginDate: "", beginDate: '',
endDate: "", endDate: '',
hospitalIdList: [], hospitalIdList: [],
originalFlag: 2, // 默认值0:0不查看原始数据 originalFlag: 2, // 默认值0:0不查看原始数据
projectId: 374, projectId: 374,
regionId: "", regionId: '',
timeFlag: 1, timeFlag: 1,
pageNo: 0, pageNo: 0,
pageSize: 0, pageSize: 0,
sourceType: 1, sourceType: 1,
pageCfg: { pageCfg: {
type: 1 type: 1,
} },
}, },
dataList: [] dataList: [],
}; };
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
originalFlag: "originalFlag", originalFlag: 'originalFlag',
}), }),
}, },
created() { created() {
if (process.client) { if (process.client) {
if(this.$route && this.$route.query) { if (this.$route && this.$route.query) {
let cQuery = this.$route.query const cQuery = this.$route.query;
let hospitalIdList = cQuery.hospitalIdList || '' const hospitalIdList = cQuery.hospitalIdList || '';
this.queryGDParams.projectId = cQuery.projectId || ''; this.queryGDParams.projectId = cQuery.projectId || '';
this.queryGDParams.regionId = cQuery.regionId || ''; this.queryGDParams.regionId = cQuery.regionId || '';
this.queryGDParams.hospitalIdList = hospitalIdList && hospitalIdList.split(',') || []; this.queryGDParams.hospitalIdList =
cookies.set("lreporttoken", cQuery.token || ''); (hospitalIdList && hospitalIdList.split(',')) || [];
cookies.set('lreporttoken', cQuery.token || '');
this.queryGDParams.originalFlag = cQuery.originalFlag; this.queryGDParams.originalFlag = cQuery.originalFlag;
this.getGeneralExam(this.queryGDParams); this.getGeneralExam(this.queryGDParams);
} }
} }
}, },
mounted() { mounted() {},
},
methods: { methods: {
// 考试分析 // 考试分析
async getGeneralExam(queryData) { async getGeneralExam(queryData) {
await getGeneralExam(queryData).then(res => { await getGeneralExam(queryData).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.isShowLoading = false; this.isShowLoading = false;
this.dataList = res.data.examTimesList; this.dataList = res.data.examTimesList;
this.title = `共${this.dataList.length}条数据` this.title = `共${this.dataList.length}条数据`;
} }
}); });
}, },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.exam-times-wrapper { .exam-times-wrapper {
.pdt-50 { .pdt-50 {
padding-top: 50px; padding-top: 50px;
} }
.mt-10 { .mt-10 {
margin-top: 10px !important; margin-top: 10px !important;
}
} }
</style> }
\ No newline at end of file </style>
<template> <template>
<section class="container"> <section class="container">
<CommonHeader :title="projectInfo.projectName | shortName" :isShowKf="isShowKf"></CommonHeader> <CommonHeader
<CommonAreaSelect v-show="!isScroll" @areaClick="areaTabClick" :areaName="areaName" :showArea="isShowArea"> :title="projectInfo.projectName | shortName"
</CommonAreaSelect> :is-show-kf="isShowKf"
<CommonTaps :needFixed="isScroll" :projectInfo="projectInfo" @tabClicked="tabClicked"></CommonTaps> />
<CommonAreaSelect
v-show="!isScroll"
:area-name="areaName"
:show-area="isShowArea"
@areaClick="areaTabClick"
/>
<CommonTaps
:need-fixed="isScroll"
:project-info="projectInfo"
@tabClicked="tabClicked"
/>
<!-- 总体概况 --> <!-- 总体概况 -->
<div v-show="isScroll" class="pd-top-60"></div> <div
v-show="isScroll"
class="pd-top-60"
/>
<article v-show="cIndex === 0"> <article v-show="cIndex === 0">
<CommonSwiperItem :isSingleOrg="isSingleOrg" :percentData="allData.percentData || {}" :certFlag="projectInfo.certFlag" @tipsClick="tipsSwiperClick"></CommonSwiperItem> <CommonSwiperItem
:is-single-org="isSingleOrg"
:percent-data="allData.percentData || {}"
:cert-flag="projectInfo.certFlag"
@tipsClick="tipsSwiperClick"
/>
<div v-show="!isSingleOrg"> <div v-show="!isSingleOrg">
<CommonTitle v-if="projectInfo.certFlag" title="证书分布情况"></CommonTitle> <CommonTitle
<ChartPie v-if="projectInfo.certFlag" :certFlag="projectInfo.certFlag" id="certPieId2" :pieData="(allData && allData.certData)"></ChartPie> v-if="projectInfo.certFlag"
<CommonTitle v-if="projectInfo.certFlag" title="证书级别按学历分布情况"></CommonTitle> title="证书分布情况"
<ChartColumnStack v-if="projectInfo.certFlag" :certFlag="projectInfo.certFlag" :echartsData="echartsData"></ChartColumnStack> />
<CommonSplitLine></CommonSplitLine> <ChartPie
<CommonTitle title="项目情况排名"></CommonTitle> v-if="projectInfo.certFlag"
<RankingList :certFlag="projectInfo.certFlag" :rankList="studyRankList.slice(0, 5)"></RankingList> id="certPieId2"
<ShowAll v-show="studyRankList.length > 5" @action="gotoPage('/rankedu', true)"></ShowAll> :cert-flag="projectInfo.certFlag"
<CommonSplitLine></CommonSplitLine> :pie-data="allData && allData.certData"
<CommonTitleWithWhat @tipsClick="tipsRankingItemClick" title="完成天数排名"></CommonTitleWithWhat> />
<RankingItemDays :rankList="costRankList.slice(0, 5)"></RankingItemDays> <CommonTitle
<ShowAll v-show="costRankList.length > 5" @action="gotoPage('/rankdays')"></ShowAll> v-if="projectInfo.certFlag"
title="证书级别按学历分布情况"
/>
<ChartColumnStack
v-if="projectInfo.certFlag"
:cert-flag="projectInfo.certFlag"
:echarts-data="echartsData"
/>
<CommonSplitLine />
<CommonTitle title="项目情况排名" />
<RankingList
:cert-flag="projectInfo.certFlag"
:rank-list="studyRankList.slice(0, 5)"
/>
<ShowAll
v-show="studyRankList.length > 5"
@action="gotoPage('/rankedu', true)"
/>
<CommonSplitLine />
<CommonTitleWithWhat
title="完成天数排名"
@tipsClick="tipsRankingItemClick"
/>
<RankingItemDays :rank-list="costRankList.slice(0, 5)" />
<ShowAll
v-show="costRankList.length > 5"
@action="gotoPage('/rankdays')"
/>
</div> </div>
<div v-show="isSingleOrg"> <div v-show="isSingleOrg">
<CommonTitle title="培训机构情况"></CommonTitle> <CommonTitle title="培训机构情况" />
<OrgDoctorList @orgDoctorTabChange="orgDoctorTabChange" :certUserList="orgDoctorTabData.certUserList" :noCertUserList="orgDoctorTabData.noCertUserList" :noJoinList="orgDoctorTabData.noJoinList" :certFlag="projectInfo.certFlag" :containOfficialFlag="projectInfo.containOfficialFlag"></OrgDoctorList> <OrgDoctorList
:cert-user-list="orgDoctorTabData.certUserList"
:no-cert-user-list="orgDoctorTabData.noCertUserList"
:no-join-list="orgDoctorTabData.noJoinList"
:cert-flag="projectInfo.certFlag"
:contain-official-flag="projectInfo.containOfficialFlag"
@orgDoctorTabChange="orgDoctorTabChange"
/>
</div> </div>
<CommonBottomInfo></CommonBottomInfo> <CommonBottomInfo />
</article> </article>
<!-- 人群分析 --> <!-- 人群分析 -->
<article v-show="cIndex === 1"> <article v-show="cIndex === 1">
<CommonTitleWithBtn title="人员学历情况" @btnClick="analysisEduClick"></CommonTitleWithBtn> <CommonTitleWithBtn
<ChartPieEdu :dataList="analysisEduData"></ChartPieEdu> title="人员学历情况"
<CommonSplitLine></CommonSplitLine> @btnClick="analysisEduClick"
<CommonTitleWithBtn title="人员职称情况" @btnClick="analysisTitleClick"></CommonTitleWithBtn> />
<ChartPieTitle :dataList="analysisTitleData"></ChartPieTitle> <ChartPieEdu :data-list="analysisEduData" />
<CommonBottomInfo></CommonBottomInfo> <CommonSplitLine />
<CommonTitleWithBtn
title="人员职称情况"
@btnClick="analysisTitleClick"
/>
<ChartPieTitle :data-list="analysisTitleData" />
<CommonBottomInfo />
</article> </article>
<!-- 课程分析 --> <!-- 课程分析 -->
<article ref="courseAnalysitRef" v-show="(cIndex === 2) && (projectInfo.existCourse == 1)" style="padding-top: 8px;"> <article
<CourseTimesStat :totalSize="courseInfo.totalSize" :maxDuration="courseInfo.pCourseTotalTime" :avgDuration="courseInfo.pCourseAvg" :processDataObj="processDataObj"></CourseTimesStat> v-show="cIndex === 2 && projectInfo.existCourse == 1"
<CommonSplitLine></CommonSplitLine> ref="courseAnalysitRef"
<CommonTitle title="课程列表"></CommonTitle> style="padding-top: 8px"
<CourseTimesList :dataList="courseInfo.pCourseList"></CourseTimesList> 回归
<CommonBottomInfo :class="{'fixed-bottom-info': needFixedBottomInfo}"></CommonBottomInfo> >
<CourseTimesStat
:total-size="courseInfo.totalSize"
:max-duration="courseInfo.pCourseTotalTime"
:avg-duration="courseInfo.pCourseAvg"
:process-data-obj="processDataObj"
/>
<CommonSplitLine />
<CommonTitle title="课程列表" />
<CourseTimesList :data-list="courseInfo.pCourseList" />
<CommonBottomInfo :class="{ 'fixed-bottom-info': needFixedBottomInfo }" />
</article> </article>
<!-- 考试分析 --> <!-- 考试分析 -->
<article v-show="(cIndex === 3) && (projectInfo.existExam == 1)"> <article v-show="cIndex === 3 && projectInfo.existExam == 1">
<CommonCard :cardList="examCardList"></CommonCard> <CommonCard :card-list="examCardList" />
<CommonSplitLine></CommonSplitLine> <CommonSplitLine />
<div v-if="projectInfo.containOfficialFlag"> <div v-if="projectInfo.containOfficialFlag">
<CommonTitle title="完成项目考试次数情况"></CommonTitle> <CommonTitle title="完成项目考试次数情况" />
<ChartColumnVerticalTimes :dataList="(generalExamData.examTimesList || []).slice(0, 5)" id="chartCourseTimesId" :colors="colors"></ChartColumnVerticalTimes> <ChartColumnVerticalTimes
id="chartCourseTimesId"
:data-list="(generalExamData.examTimesList || []).slice(0, 5)"
:colors="colors"
/>
<!-- <ShowAll v-show="generalExamData.examTimesList.length" @action="gotoPage('/examtimes')" class="mt-10"></ShowAll> --> <!-- <ShowAll v-show="generalExamData.examTimesList.length" @action="gotoPage('/examtimes')" class="mt-10"></ShowAll> -->
<ShowAll v-show="generalExamData && generalExamData.examTimesList.length > 5" @action="gotoPage('/examtimes')" class="mt-10"></ShowAll> <ShowAll
<CommonSplitLine></CommonSplitLine> v-show="generalExamData && generalExamData.examTimesList.length > 5"
<CommonTitle title="完成项目考试分数情况"></CommonTitle> class="mt-10"
<ChartColumnVerticalScore id="chartCourseScoreId" :dataList="(generalExamData.examScoreList || []).slice(0, 5)"></ChartColumnVerticalScore> @action="gotoPage('/examtimes')"
<ShowAll v-show="generalExamData.examScoreList && generalExamData.examScoreList.length > 5" @action="gotoPage('/examscore')" class="mt-10"></ShowAll> />
<CommonSplitLine></CommonSplitLine> <CommonSplitLine />
<CommonTitle title="完成项目考试分数情况" />
<ChartColumnVerticalScore
id="chartCourseScoreId"
:data-list="(generalExamData.examScoreList || []).slice(0, 5)"
/>
<ShowAll
v-show="
generalExamData.examScoreList &&
generalExamData.examScoreList.length > 5
"
class="mt-10"
@action="gotoPage('/examscore')"
/>
<CommonSplitLine />
</div> </div>
<CommonTitle title="考试列表"></CommonTitle> <CommonTitle title="考试列表" />
<ExamList :dataList="examInfoList"></ExamList> <ExamList :data-list="examInfoList" />
<CommonBottomInfo :class="{'fixed-bottom-info': !projectInfo.containOfficialFlag && examInfoList.length < 4}"></CommonBottomInfo> <CommonBottomInfo
:class="{
'fixed-bottom-info':
!projectInfo.containOfficialFlag && examInfoList.length < 4,
}"
/>
</article> </article>
<!-- 学习效果分析 --> <!-- 学习效果分析 -->
<article v-show="(cIndex === 4) && (projectInfo.existEffect == 1)"> <article v-show="cIndex === 4 && projectInfo.existEffect == 1">
<CommonCard :needBG="needBG" :cardList="effectCardList"></CommonCard> <CommonCard
<CommonSplitLine></CommonSplitLine> :need-b-g="needBG"
<CommonTitle title="不同学历培训前后正确率对比"></CommonTitle> :card-list="effectCardList"
<ChartColumnVerticalTC :dataList="studyEffect.educationEffectList || []" id="chartColumnVerticalTC"></ChartColumnVerticalTC> />
<CommonSplitLine style="margin-top: 10px;"></CommonSplitLine> <CommonSplitLine />
<CommonTitle title="培训前后知识点掌握情况"></CommonTitle> <CommonTitle title="不同学历培训前后正确率对比" />
<ChartColumnHorizontalTC :dataList="(studyEffect.knowledgeEffectList || []).slice(0, 5)" id="ChartColumnVerticalTC2"></ChartColumnHorizontalTC> <ChartColumnVerticalTC
<ShowAll v-show="studyEffect.knowledgeEffectList && studyEffect.knowledgeEffectList.length > 5" @action="gotoPage('/klgpoint')" class="mt-10"></ShowAll> id="chartColumnVerticalTC"
<CommonBottomInfo></CommonBottomInfo> :data-list="studyEffect.educationEffectList || []"
/>
<CommonSplitLine style="margin-top: 10px" />
<CommonTitle title="培训前后知识点掌握情况" />
<ChartColumnHorizontalTC
id="ChartColumnVerticalTC2"
:data-list="(studyEffect.knowledgeEffectList || []).slice(0, 5)"
/>
<ShowAll
v-show="
studyEffect.knowledgeEffectList &&
studyEffect.knowledgeEffectList.length > 5
"
class="mt-10"
@action="gotoPage('/klgpoint')"
/>
<CommonBottomInfo />
</article> </article>
<PicaArea v-show="isShowArea" @confirm="areaConfirm" @cancel="areaCancel" :projectId="projectId" :token="token"></PicaArea> <PicaArea
<CommonLoading v-show="false"></CommonLoading> v-show="isShowArea"
<PopTips :tipsContent="tipsContent" @clickTips="clickTips" v-show="isShowTips"></PopTips> :project-id="projectId"
<Loading v-show="isShowLoading"></Loading> :token="token"
@confirm="areaConfirm"
@cancel="areaCancel"
/>
<CommonLoading v-show="false" />
<PopTips
v-show="isShowTips"
:tips-content="tipsContent"
@clickTips="clickTips"
/>
<Loading v-show="isShowLoading" />
</section> </section>
</template> </template>
<script> <script>
const cookies = require("cookie-universal")(); const cookies = require('cookie-universal')();
import { import { goPageByNative } from '@/utils';
goPageByNative import { mapGetters, mapActions } from 'vuex';
} from "@/utils";
import { mapGetters, mapActions } from "vuex";
import { import {
getAreaOrOrgList, getAreaOrOrgList,
getUserAnalysis, getUserAnalysis,
...@@ -103,47 +218,41 @@ import { ...@@ -103,47 +218,41 @@ import {
getGeneralPersonal, getGeneralPersonal,
getGeneralCourse, getGeneralCourse,
getGeneralExam, getGeneralExam,
getProjectInfo,
getGeneralExamList, getGeneralExamList,
getStudyEffect, getStudyEffect,
} from "@/service"; } from '@/service';
import CommonHeader from "@/components/common/common-header"; import CommonHeader from '@/components/common/common-header';
import CommonTitle from "@/components/common/common-title"; import CommonTitle from '@/components/common/common-title';
import CommonTitleWithWhat from "@/components/common/common-title-with-what"; import CommonTitleWithWhat from '@/components/common/common-title-with-what';
import CommonTitleWithBtn from "@/components/common/common-title-with-btn"; import CommonTitleWithBtn from '@/components/common/common-title-with-btn';
import CommonLoading from "@/components/common/common-loading"; import CommonLoading from '@/components/common/common-loading';
import CommonTaps from "@/components/common/common-tabs"; import CommonTaps from '@/components/common/common-tabs';
import CommonSwiperItem from "@/components/common/common-swiper-item"; import CommonSwiperItem from '@/components/common/common-swiper-item';
import CommonSplitLine from "@/components/common/common-split-line"; import CommonSplitLine from '@/components/common/common-split-line';
import RankingList from "@/components/bussiness/ranking-item"; import RankingList from '@/components/bussiness/ranking-item';
import ShowAll from "@/components/common/common-show-all"; import ShowAll from '@/components/common/common-show-all';
import CommonBottomInfo from "@/components/common/common-bottom-info"; import CommonBottomInfo from '@/components/common/common-bottom-info';
import RankingItemDays from "@/components/bussiness/ranking-item-days"; import RankingItemDays from '@/components/bussiness/ranking-item-days';
import ChartPie from "@/components/bussiness/charts/chart-pie"; import ChartPie from '@/components/bussiness/charts/chart-pie';
import ChartPieEdu from "@/components/bussiness/charts/chart-pie-edu"; import ChartPieEdu from '@/components/bussiness/charts/chart-pie-edu';
import ChartPieTitle from "@/components/bussiness/charts/chart-pie-title"; import ChartPieTitle from '@/components/bussiness/charts/chart-pie-title';
import ChartColumnStack from "@/components/bussiness/charts/chart-column-stack"; import ChartColumnStack from '@/components/bussiness/charts/chart-column-stack';
import ChartColumnVerticalTimes from "@/components/bussiness/charts/chart-column-vertical-times"; import ChartColumnVerticalTimes from '@/components/bussiness/charts/chart-column-vertical-times';
import ChartColumnVerticalScore from "@/components/bussiness/charts/chart-column-vertical-score"; import ChartColumnVerticalScore from '@/components/bussiness/charts/chart-column-vertical-score';
import ChartColumnVerticalTC from "@/components/bussiness/charts/chart-column-vertical-tc"; import ChartColumnVerticalTC from '@/components/bussiness/charts/chart-column-vertical-tc';
import ChartColumnHorizontalTC from "@/components/bussiness/charts/chart-column-horizontal-tc"; import ChartColumnHorizontalTC from '@/components/bussiness/charts/chart-column-horizontal-tc';
import PicaArea from "@/components/common/pica-area"; import PicaArea from '@/components/common/pica-area';
import PicaOrg from "@/components/common/pica-org"; import CommonAreaSelect from '@/components/common/common-area-select';
import CommonAreaSelect from "@/components/common/common-area-select"; import CourseTimesStat from '@/components/bussiness/course-times-stat';
import ProcessBar from "@/components/common/pica-process"; import CourseTimesList from '@/components/bussiness/course-times-list';
import CourseTimesStat from "@/components/bussiness/course-times-stat"; import OrgDoctorList from '@/components/bussiness/org-doctor-list';
import CourseTimesList from "@/components/bussiness/course-times-list"; import ExamList from '@/components/bussiness/exam-list';
import OrgDoctorList from "@/components/bussiness/org-doctor-list"; import PopTips from '@/components/bussiness/pop-tips';
import ExamList from "@/components/bussiness/exam-list"; import CommonCard from '@/components/common/common-card';
import PopTips from "@/components/bussiness/pop-tips"; import Loading from '@/components/common/common-loading';
import CommonCard from "@/components/common/common-card";
import Loading from "@/components/common/common-loading"; import { getGeneralData } from '@/service/index';
import {
getGeneralData
} from "@/service/index";
let timeOutId = null;
export default { export default {
components: { components: {
CommonHeader, CommonHeader,
...@@ -161,9 +270,7 @@ export default { ...@@ -161,9 +270,7 @@ export default {
RankingItemDays, RankingItemDays,
ChartColumnStack, ChartColumnStack,
PicaArea, PicaArea,
PicaOrg,
CommonAreaSelect, CommonAreaSelect,
ProcessBar,
CourseTimesStat, CourseTimesStat,
CourseTimesList, CourseTimesList,
CommonCard, CommonCard,
...@@ -177,7 +284,16 @@ export default { ...@@ -177,7 +284,16 @@ export default {
ChartColumnVerticalScore, ChartColumnVerticalScore,
PopTips, PopTips,
CommonTitleWithWhat, CommonTitleWithWhat,
Loading Loading,
},
filters: {
shortName: function (value, length = 15, append = '...') {
if (value && value.length > length) {
return value.substring(0, length) + append;
} else {
return value;
}
},
}, },
data() { data() {
return { return {
...@@ -190,69 +306,70 @@ export default { ...@@ -190,69 +306,70 @@ export default {
tipsContent: '', tipsContent: '',
areaName: '全部', areaName: '全部',
cIndex: 0, cIndex: 0,
colors: ["#39AF9A", "#FF9A4B", "#abb7bb", "#76d2d2"], colors: ['#39AF9A', '#FF9A4B', '#abb7bb', '#76d2d2'],
needBG: true, needBG: true,
effectCardList: [{ effectCardList: [
{
count: 65, count: 65,
unitName: "%", unitName: '%',
description: "培训前正确率" description: '培训前正确率',
}, },
{ {
count: 80, count: 80,
unitName: "%", unitName: '%',
description: "培训后正确率" description: '培训后正确率',
} },
], ],
allData: {}, allData: {},
studyRankList: [], studyRankList: [],
costRankList: [], costRankList: [],
projectId: "", projectId: '',
token: "568E9A4C115F47649BDA1B0B70D4B4F9", token: '568E9A4C115F47649BDA1B0B70D4B4F9',
isOrgStat: false, isOrgStat: false,
// 区域选择通用接口参数 // 区域选择通用接口参数
queryParams: { queryParams: {
projectId: 374, projectId: 374,
regionId: "" regionId: '',
}, },
// 查询概况数据 // 查询概况数据
queryGDParams: { queryGDParams: {
beginDate: "", beginDate: '',
endDate: "", endDate: '',
hospitalIdList: [], hospitalIdList: [],
originalFlag: 2, // 默认值2:1.查看原始数据 2.查看调整后的数据 originalFlag: 2, // 默认值2:1.查看原始数据 2.查看调整后的数据
projectId: 374, projectId: 374,
regionId: "", regionId: '',
timeFlag: 1, timeFlag: 1,
pageNo: 0, pageNo: 0,
pageSize: 0, pageSize: 0,
sourceType: 1, sourceType: 1,
pageCfg: { pageCfg: {
type: 1 type: 1,
} },
}, },
echartsData: null, echartsData: null,
analysisData: { analysisData: {
eduList: { eduList: {
join: [], join: [],
finish: [] finish: [],
}, },
titleList: { titleList: {
join: [], join: [],
finish: [] finish: [],
}, },
}, },
analysisEduData: [], analysisEduData: [],
analysisTitleData: [], analysisTitleData: [],
CNTParams: { CNTParams: {
projectId: 374, projectId: 374,
regionId: "" regionId: '',
}, },
hospitalCnt: 2, hospitalCnt: 2,
isSingleOrg: false, isSingleOrg: false,
orgDoctorTabData: { orgDoctorTabData: {
certUserList: [], certUserList: [],
noCertUserList: [], noCertUserList: [],
noJoinList: [] noJoinList: [],
}, },
projectInfo: { projectInfo: {
projectName: '项目名称', projectName: '项目名称',
...@@ -262,12 +379,12 @@ export default { ...@@ -262,12 +379,12 @@ export default {
existExam: 2, // 是否显示考试分析 1:显示 2:不显示 existExam: 2, // 是否显示考试分析 1:显示 2:不显示
roleType: 0, // 0:普通人 1:内部管理员 2:项目负责人 3:次级负责人 roleType: 0, // 0:普通人 1:内部管理员 2:项目负责人 3:次级负责人
status: 0, // 是否显示查看原始数据 1:显示 2:不显示 status: 0, // 是否显示查看原始数据 1:显示 2:不显示
containOfficialFlag: 0 // 0: 无正式考考试 1: 有正式考考试 containOfficialFlag: 0, // 0: 无正式考考试 1: 有正式考考试
}, },
courseInfo: { courseInfo: {
pCourseTotalTime: 0, pCourseTotalTime: 0,
pCourseAvg: 0, pCourseAvg: 0,
pCourseList: [] pCourseList: [],
}, },
generalExamData: { generalExamData: {
beforeExamCount: 4, beforeExamCount: 4,
...@@ -276,7 +393,7 @@ export default { ...@@ -276,7 +393,7 @@ export default {
examTimesList: [], examTimesList: [],
examScoreList: [], examScoreList: [],
fiveExamScoreList: [], fiveExamScoreList: [],
tenExamScoreList: [] tenExamScoreList: [],
}, },
examCardList: [], examCardList: [],
examInfoList: [], examInfoList: [],
...@@ -284,28 +401,17 @@ export default { ...@@ -284,28 +401,17 @@ export default {
beforeRate: 0, beforeRate: 0,
afterRate: 0, afterRate: 0,
educationEffectList: [], educationEffectList: [],
knowledgeEffectList: [] knowledgeEffectList: [],
},
processDataObj: {
}, },
processDataObj: {},
needFixedBottomInfo: false, needFixedBottomInfo: false,
}; };
}, },
filters: {
shortName: function (value, length = 15, append = '...') {
if (value && value.length > length) {
return value.substring(0, length) + append
} else {
return value
}
}
},
computed: { computed: {
...mapGetters({ ...mapGetters({
orgList: "orgList", orgList: 'orgList',
areaDegree: "areaDegree", areaDegree: 'areaDegree',
originalFlag: "originalFlag" originalFlag: 'originalFlag',
}), }),
}, },
asyncData() { asyncData() {
...@@ -313,14 +419,18 @@ export default { ...@@ -313,14 +419,18 @@ export default {
}, },
created() { created() {
if (process.client) { if (process.client) {
this.token = (this.$route && this.$route.query && this.$route.query.token) || this.token; this.token =
this.projectId = (this.$route && this.$route.query && this.$route.query.projectId) || 374; (this.$route && this.$route.query && this.$route.query.token) ||
this.token;
this.projectId =
(this.$route && this.$route.query && this.$route.query.projectId) ||
374;
this.queryGDParams.projectId = this.projectId; this.queryGDParams.projectId = this.projectId;
this.CNTParams.projectId = this.projectId; this.CNTParams.projectId = this.projectId;
this.queryParams.projectId = this.projectId; this.queryParams.projectId = this.projectId;
if (this.$rocNative.isWeb) { if (this.$rocNative.isWeb) {
this.setUserToken(this.token); this.setUserToken(this.token);
cookies.set("lreporttoken", this.token); cookies.set('lreporttoken', this.token);
this.setProjectId(this.projectId); this.setProjectId(this.projectId);
} else { } else {
this.getUserInfo(); this.getUserInfo();
...@@ -333,7 +443,13 @@ export default { ...@@ -333,7 +443,13 @@ export default {
this.getProjectInfo(this.queryParams); this.getProjectInfo(this.queryParams);
} }
window.addEventListener('scroll', () => { this.handleScroll() }, false); window.addEventListener(
'scroll',
() => {
this.handleScroll();
},
false
);
}, },
methods: { methods: {
handleScroll() { handleScroll() {
...@@ -350,7 +466,12 @@ export default { ...@@ -350,7 +466,12 @@ export default {
var doc = document; var doc = document;
var docE = doc.documentElement; var docE = doc.documentElement;
var body = doc.body; var body = doc.body;
return docE && docE.clientHeight || body && body.offsetHeight || window.innerHeight || 0; return (
(docE && docE.clientHeight) ||
(body && body.offsetHeight) ||
window.innerHeight ||
0
);
// return { // return {
// 'width': docE && docE.clientWidth || body && body.offsetWidth || window.innerWidth || 0, // 'width': docE && docE.clientWidth || body && body.offsetWidth || window.innerWidth || 0,
// 'height': docE && docE.clientHeight || body && body.offsetHeight || window.innerHeight || 0 // 'height': docE && docE.clientHeight || body && body.offsetHeight || window.innerHeight || 0
...@@ -368,47 +489,51 @@ export default { ...@@ -368,47 +489,51 @@ export default {
// getProjectInfo({ // getProjectInfo({
// projectId: this.projectId // projectId: this.projectId
// }).then(res => { // }).then(res => {
// if (res.code === "000000") { // if (res.code === "000000") {
// this.projectInfo = res.data; // this.projectInfo = res.data;
getAreaOrOrgList(params).then(res => { getAreaOrOrgList(params).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.projectInfo = res.data.doctorInfoRep; this.projectInfo = res.data.doctorInfoRep;
this.queryGDParams.originalFlag = res.data.doctorInfoRep.originalFlag; this.queryGDParams.originalFlag = res.data.doctorInfoRep.originalFlag;
if(!this.queryGDParams.regionId) { if (!this.queryGDParams.regionId) {
this.setOriginalFlag(res.data.doctorInfoRep.originalFlag); this.setOriginalFlag(res.data.doctorInfoRep.originalFlag);
} }
// 如果直接是5级,则将其进行拆分(区域ID与机构ID) // 如果直接是5级,则将其进行拆分(区域ID与机构ID)
let regionId = '', orgId = '', firstData = res.data.list[0]; let regionId = '',
if(firstData.degree == 5) { orgId = '';
let regionIdAndOrgId = firstData.id, lindex = regionIdAndOrgId.lastIndexOf('_'); const firstData = res.data.list[0];
regionId = regionIdAndOrgId.slice(0, lindex); if (firstData.degree == 5) {
orgId = regionIdAndOrgId.slice(lindex + 1); const regionIdAndOrgId = firstData.id,
} else { lindex = regionIdAndOrgId.lastIndexOf('_');
regionId = firstData.id || ''; regionId = regionIdAndOrgId.slice(0, lindex);
} orgId = regionIdAndOrgId.slice(lindex + 1);
this.queryGDParams.regionId = regionId; } else {
this.CNTParams.regionId = regionId; regionId = firstData.id || '';
let proviceList = (res.data && res.data.list) || []; }
let degree = (proviceList.length && proviceList[0].degree) || 0; this.queryGDParams.regionId = regionId;
this.areaName = (proviceList.length && proviceList[0].label) || '全部'; this.CNTParams.regionId = regionId;
this.queryParams.projectId = this.projectId; const proviceList = (res.data && res.data.list) || [];
this.queryParams.regionId = regionId; const degree = (proviceList.length && proviceList[0].degree) || 0;
if(proviceList.length && res.data.containHospitalFlag == 1) { this.areaName =
proviceList[0].containHospitalFlag = 1; (proviceList.length && proviceList[0].label) || '全部';
} this.queryParams.projectId = this.projectId;
this.setProvinceList(proviceList); this.queryParams.regionId = regionId;
this.setAreaDegree(degree); if (proviceList.length && res.data.containHospitalFlag == 1) {
if(firstData.degree == 5) { proviceList[0].containHospitalFlag = 1;
this.isSingleOrg = true; }
this.queryGDParams.hospitalIdList = []; this.setProvinceList(proviceList);
this.queryGDParams.hospitalIdList.push(orgId); this.setAreaDegree(degree);
this.getGeneralPersonal(this.queryGDParams); if (firstData.degree == 5) {
this.otherInterface(); this.isSingleOrg = true;
} else { this.queryGDParams.hospitalIdList = [];
this.getHospitalsCNT(this.CNTParams); this.queryGDParams.hospitalIdList.push(orgId);
} this.getGeneralPersonal(this.queryGDParams);
} this.otherInterface();
}); } else {
this.getHospitalsCNT(this.CNTParams);
}
}
});
// } // }
// }); // });
}, },
...@@ -417,16 +542,19 @@ export default { ...@@ -417,16 +542,19 @@ export default {
otherInterface() { otherInterface() {
setTimeout(() => { setTimeout(() => {
this.getUserAnalysis(this.queryGDParams); this.getUserAnalysis(this.queryGDParams);
this.projectInfo.existCourse == 1 && this.getGeneralCourse(this.queryGDParams); this.projectInfo.existCourse == 1 &&
this.projectInfo.existExam == 1 && this.getGeneralExam(this.queryGDParams); this.getGeneralCourse(this.queryGDParams);
this.projectInfo.existEffect == 1 && this.getStudyEffect(this.queryGDParams); this.projectInfo.existExam == 1 &&
this.getGeneralExam(this.queryGDParams);
this.projectInfo.existEffect == 1 &&
this.getStudyEffect(this.queryGDParams);
}, 100); }, 100);
}, },
// 根据地区查询地区下是否有机构 // 根据地区查询地区下是否有机构
getHospitalsCNT(params) { getHospitalsCNT(params) {
getHospitalsCNT(params).then(res => { getHospitalsCNT(params).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.hospitalCnt = res.data.hospitalCnt; this.hospitalCnt = res.data.hospitalCnt;
this.isSingleOrg = res.data.hospitalCnt === 1; this.isSingleOrg = res.data.hospitalCnt === 1;
if (this.isSingleOrg) { if (this.isSingleOrg) {
...@@ -444,8 +572,8 @@ export default { ...@@ -444,8 +572,8 @@ export default {
// 请求单个机构下的数据(总体概述的数据) // 请求单个机构下的数据(总体概述的数据)
getGeneralPersonal(params) { getGeneralPersonal(params) {
getGeneralPersonal(params).then(res => { getGeneralPersonal(params).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.isShowLoading = false; this.isShowLoading = false;
this.allData = res.data; this.allData = res.data;
this.studyRankList = this.allData.studyRank || []; this.studyRankList = this.allData.studyRank || [];
...@@ -463,11 +591,11 @@ export default { ...@@ -463,11 +591,11 @@ export default {
// 请求多个机构下的数据 // 请求多个机构下的数据
getGeneralData(queryData) { getGeneralData(queryData) {
getGeneralData(queryData).then(res => { getGeneralData(queryData).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.isShowLoading = false; this.isShowLoading = false;
this.allData = res.data; this.allData = res.data;
this.studyRankList = this.allData.studyRank || [] this.studyRankList = this.allData.studyRank || [];
this.costRankList = this.allData.costRank || []; this.costRankList = this.allData.costRank || [];
this.echartsData = res.data.eduData; this.echartsData = res.data.eduData;
} }
...@@ -476,8 +604,8 @@ export default { ...@@ -476,8 +604,8 @@ export default {
// 人群分析 // 人群分析
getUserAnalysis(queryData) { getUserAnalysis(queryData) {
getUserAnalysis(queryData).then(res => { getUserAnalysis(queryData).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.analysisData = res.data; this.analysisData = res.data;
this.analysisEduData = res.data.eduList.join; this.analysisEduData = res.data.eduList.join;
this.analysisTitleData = res.data.titleList.join; this.analysisTitleData = res.data.titleList.join;
...@@ -488,52 +616,53 @@ export default { ...@@ -488,52 +616,53 @@ export default {
// 考试分析 // 考试分析
getGeneralExam(queryData) { getGeneralExam(queryData) {
// 上面三个图标数据 // 上面三个图标数据
getGeneralExam(queryData).then(res => { getGeneralExam(queryData).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.generalExamData = res.data; this.generalExamData = res.data;
this.setExamTimesList(res.data.examTimesList) this.setExamTimesList(res.data.examTimesList);
this.setExamScoreList(res.data.examScoreList) this.setExamScoreList(res.data.examScoreList);
this.examCardList = [{ this.examCardList = [
{
count: res.data.afterExamCount, count: res.data.afterExamCount,
unitName: "门", unitName: '门',
description: "正式考试数" description: '正式考试数',
}, },
{ {
count: res.data.beforeExamCount, count: res.data.beforeExamCount,
unitName: "门", unitName: '门',
description: "模拟考试数" description: '模拟考试数',
}, },
{ {
count: res.data.examTitleCount, count: res.data.examTitleCount,
unitName: "道", unitName: '道',
description: "所有考题数" description: '所有考题数',
} },
]; ];
} }
}); });
// 下面一个列表数据 // 下面一个列表数据
getGeneralExamList(queryData).then(res => { getGeneralExamList(queryData).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.examInfoList = res.data.examInfoList || [] this.examInfoList = res.data.examInfoList || [];
} }
}); });
}, },
// 课程数据 // 课程数据
getGeneralCourse(params) { getGeneralCourse(params) {
getGeneralCourse(params).then(res => { getGeneralCourse(params).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.processDataObj = { this.processDataObj = {
maxDuration: res.data.pCourseTotalTime, maxDuration: res.data.pCourseTotalTime,
avgDuration: res.data.pCourseAvg avgDuration: res.data.pCourseAvg,
} };
this.processDataObj.maxDuration = res.data.pCourseTotalTime; this.processDataObj.maxDuration = res.data.pCourseTotalTime;
this.processDataObj.avgDuration = res.data.pCourseAvg; this.processDataObj.avgDuration = res.data.pCourseAvg;
this.courseInfo = res.data; this.courseInfo = res.data;
let viewportHeight = this.getViewportHeight(); const viewportHeight = this.getViewportHeight();
let courseLength = res.data.pCourseList.length; const courseLength = res.data.pCourseList.length;
// 上面的高度 468 每一条数据的高度 60 // 上面的高度 468 每一条数据的高度 60
if (viewportHeight > (468 + (courseLength - 1) * 60)) { if (viewportHeight > 468 + (courseLength - 1) * 60) {
this.needFixedBottomInfo = true; this.needFixedBottomInfo = true;
} }
} }
...@@ -542,8 +671,8 @@ export default { ...@@ -542,8 +671,8 @@ export default {
// 学习效果分析 // 学习效果分析
getStudyEffect(params) { getStudyEffect(params) {
getStudyEffect(params).then(res => { getStudyEffect(params).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.studyEffect = res.data; this.studyEffect = res.data;
this.effectCardList[0].count = (res.data.beforeRate * 100).toFixed(1); this.effectCardList[0].count = (res.data.beforeRate * 100).toFixed(1);
this.effectCardList[1].count = (res.data.afterRate * 100).toFixed(1); this.effectCardList[1].count = (res.data.afterRate * 100).toFixed(1);
...@@ -564,10 +693,23 @@ export default { ...@@ -564,10 +693,23 @@ export default {
// 确认选择区域 // 确认选择区域
areaConfirm(selData) { areaConfirm(selData) {
console.log(selData); console.log(selData);
if (selData.newOrgName || selData.townName || selData.countyName || selData.cityName || selData.provinceName) { if (
this.areaName = this.shortName(selData.newOrgName || selData.townName || selData.countyName || selData.cityName || selData.provinceName, 18) selData.newOrgName ||
} selData.townName ||
if(selData.areaDegree == 5) { selData.countyName ||
selData.cityName ||
selData.provinceName
) {
this.areaName = this.shortName(
selData.newOrgName ||
selData.townName ||
selData.countyName ||
selData.cityName ||
selData.provinceName,
18
);
}
if (selData.areaDegree == 5) {
this.orgConfirmNew(selData); this.orgConfirmNew(selData);
return; return;
} }
...@@ -577,7 +719,6 @@ export default { ...@@ -577,7 +719,6 @@ export default {
this.getHospitalsCNT(this.CNTParams); this.getHospitalsCNT(this.CNTParams);
this.isShowArea = false; this.isShowArea = false;
this.setAreaDegree(selData.areaDegree); this.setAreaDegree(selData.areaDegree);
}, },
// 取消选择区域 // 取消选择区域
...@@ -587,9 +728,11 @@ export default { ...@@ -587,9 +728,11 @@ export default {
// 确认选择机构 // 确认选择机构
orgConfirmNew(selData) { orgConfirmNew(selData) {
let regionIdAndOrgId = selData.regionId, lindex = regionIdAndOrgId.lastIndexOf('_'); const regionIdAndOrgId = selData.regionId,
let regionId = regionIdAndOrgId.slice(0, lindex), orgId = regionIdAndOrgId.slice(lindex + 1); lindex = regionIdAndOrgId.lastIndexOf('_');
let hospitalIds = [orgId]; const regionId = regionIdAndOrgId.slice(0, lindex),
orgId = regionIdAndOrgId.slice(lindex + 1);
const hospitalIds = [orgId];
this.isShowArea = false; this.isShowArea = false;
this.queryGDParams.regionId = regionId; this.queryGDParams.regionId = regionId;
this.CNTParams.regionId = regionId; this.CNTParams.regionId = regionId;
...@@ -599,7 +742,7 @@ export default { ...@@ -599,7 +742,7 @@ export default {
return; return;
} }
if (hospitalIds.length === 1) { if (hospitalIds.length === 1) {
this.hospitalCnt = 1 // todo this.hospitalCnt = 1; // todo
this.orgDoctorTabData.certUserList = []; this.orgDoctorTabData.certUserList = [];
this.orgDoctorTabData.noCertUserList = []; this.orgDoctorTabData.noCertUserList = [];
this.orgDoctorTabData.noJoinList = []; this.orgDoctorTabData.noJoinList = [];
...@@ -619,40 +762,44 @@ export default { ...@@ -619,40 +762,44 @@ export default {
// 通用跳转页面 // 通用跳转页面
gotoPage(subUrl, hasCert) { gotoPage(subUrl, hasCert) {
let subUrlAndParams = `${subUrl}?token=${this.token}&projectId=${this.queryGDParams.projectId}&regionId=${this.queryGDParams.regionId}&hospitalIdList=${this.queryGDParams.hospitalIdList.join(',')}&originalFlag=${this.originalFlag}` let subUrlAndParams = `${subUrl}?token=${this.token}&projectId=${
this.queryGDParams.projectId
}&regionId=${
this.queryGDParams.regionId
}&hospitalIdList=${this.queryGDParams.hospitalIdList.join(
','
)}&originalFlag=${this.originalFlag}`;
if (hasCert) { if (hasCert) {
subUrlAndParams += `&certFlag=${this.projectInfo.certFlag}` subUrlAndParams += `&certFlag=${this.projectInfo.certFlag}`;
} }
if (this.$rocNative.isWeb) { if (this.$rocNative.isWeb) {
this.$router.push(subUrlAndParams); this.$router.push(subUrlAndParams);
} else { } else {
let nativeUrl = `/lreport_ssr${subUrlAndParams}` const nativeUrl = `/lreport_ssr${subUrlAndParams}`;
goPageByNative(this, nativeUrl); goPageByNative(this, nativeUrl);
} }
}, },
// 人员学历情况切换按钮 // 人员学历情况切换按钮
analysisEduClick(index) { analysisEduClick(index) {
this.analysisEduData = this.analysisData.eduList[ this.analysisEduData =
index ? "finish" : "join" this.analysisData.eduList[index ? 'finish' : 'join'] || [];
] || [];
this.$forceUpdate(); this.$forceUpdate();
}, },
// 人员职称情况切换按钮 // 人员职称情况切换按钮
analysisTitleClick(index) { analysisTitleClick(index) {
this.analysisTitleData = this.analysisData.titleList[ this.analysisTitleData =
index ? "finish" : "join" this.analysisData.titleList[index ? 'finish' : 'join'] || [];
] || [];
this.$forceUpdate(); this.$forceUpdate();
}, },
// 与原生交互,获取用户信息 // 与原生交互,获取用户信息
getUserInfo() { getUserInfo() {
this.$rocNative.getUserInfo && this.$rocNative.getUserInfo &&
this.$rocNative.getUserInfo().then(params => { this.$rocNative.getUserInfo().then((params) => {
this.token = params.userToken; // 测试用时注释掉 this.token = params.userToken; // 测试用时注释掉
cookies.set("lreporttoken", this.token); cookies.set('lreporttoken', this.token);
this.setUserToken(this.token); this.setUserToken(this.token);
this.setProjectId(this.projectId); this.setProjectId(this.projectId);
this.getProjectInfo(this.queryParams); this.getProjectInfo(this.queryParams);
...@@ -661,48 +808,48 @@ export default { ...@@ -661,48 +808,48 @@ export default {
// 弹出提示信息一 // 弹出提示信息一
tipsRankingItemClick() { tipsRankingItemClick() {
this.tipsContent = '在线项目完成天数=完成项目时间-开始参与项目时间' this.tipsContent = '在线项目完成天数=完成项目时间-开始参与项目时间';
this.isShowTips = true this.isShowTips = true;
}, },
// 弹出提示信息二 // 弹出提示信息二
tipsSwiperClick(tipsContent) { tipsSwiperClick(tipsContent) {
this.tipsContent = tipsContent; //'是已获证人数/应参与人数*100%' this.tipsContent = tipsContent; // '是已获证人数/应参与人数*100%'
this.isShowTips = true this.isShowTips = true;
}, },
// 关闭提示信息 // 关闭提示信息
clickTips() { clickTips() {
this.isShowTips = false this.isShowTips = false;
}, },
// 文本截断 // 文本截断
shortName: function (value, length = 15, append = '...') { shortName: function (value, length = 15, append = '...') {
if (value && value.length > length) { if (value && value.length > length) {
return value.substring(0, length) + append return value.substring(0, length) + append;
} else { } else {
return value return value;
} }
}, },
// 映射Store中的Actions // 映射Store中的Actions
...mapActions({ ...mapActions({
setOrgList: "setOrgList", setOrgList: 'setOrgList',
setProjectId: "setProjectId", setProjectId: 'setProjectId',
setRegionId: "setRegionId", setRegionId: 'setRegionId',
setUserToken: "setUserToken", setUserToken: 'setUserToken',
setProvinceList: "setProvinceList", setProvinceList: 'setProvinceList',
setExamTimesList: "setExamTimesList", setExamTimesList: 'setExamTimesList',
setExamScoreList: "setExamScoreList", setExamScoreList: 'setExamScoreList',
setAreaDegree: "setAreaDegree", setAreaDegree: 'setAreaDegree',
setCurrentOrgList: 'setCurrentOrgList', setCurrentOrgList: 'setCurrentOrgList',
setOriginalFlag: 'setOriginalFlag' setOriginalFlag: 'setOriginalFlag',
}) }),
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.container { .container {
margin: 0 auto; margin: 0 auto;
font-size: 17px; font-size: 17px;
...@@ -715,7 +862,7 @@ export default { ...@@ -715,7 +862,7 @@ export default {
.m1 { .m1 {
width: 100%; width: 100%;
>div { > div {
width: 100%; width: 100%;
} }
} }
...@@ -734,5 +881,4 @@ export default { ...@@ -734,5 +881,4 @@ export default {
padding-top: 94px; padding-top: 94px;
} }
} }
</style> </style>
<template> <template>
<section class="klg-point-wrapper"> <section class="klg-point-wrapper">
<CommonHeader title="培训前后知识点掌握情况"></CommonHeader> <CommonHeader title="培训前后知识点掌握情况" />
<TitleKLGPoint :title="title"></TitleKLGPoint> <TitleKLGPoint :title="title" />
<TipsInfo :content="tipsContent"></TipsInfo> <TipsInfo :content="tipsContent" />
<ChartColumnHorizontalTCLong :dataList="knowledgeEffectList" class="mt-10"></ChartColumnHorizontalTCLong> <ChartColumnHorizontalTCLong
<Loading v-show="isShowLoading"></Loading> :data-list="knowledgeEffectList"
class="mt-10"
/>
<Loading v-show="isShowLoading" />
</section> </section>
</template> </template>
<script> <script>
const cookies = require("cookie-universal")(); const cookies = require('cookie-universal')();
import { getStudyEffect } from "@/service"; import { getStudyEffect } from '@/service';
import CommonHeader from "@/components/common/common-header"; import CommonHeader from '@/components/common/common-header';
import TitleKLGPoint from "@/components/bussiness/title-klg-point"; import TitleKLGPoint from '@/components/bussiness/title-klg-point';
import TipsInfo from '@/components/bussiness/tips-info' import TipsInfo from '@/components/bussiness/tips-info';
import ChartColumnHorizontalTCLong from "@/components/bussiness/charts/chart-column-horizontal-tc-long"; import ChartColumnHorizontalTCLong from '@/components/bussiness/charts/chart-column-horizontal-tc-long';
import Loading from "@/components/common/common-loading"; import Loading from '@/components/common/common-loading';
import { mapGetters } from "vuex"; import { mapGetters } from 'vuex';
export default { export default {
components: { components: {
...@@ -24,28 +27,28 @@ export default { ...@@ -24,28 +27,28 @@ export default {
TitleKLGPoint, TitleKLGPoint,
ChartColumnHorizontalTCLong, ChartColumnHorizontalTCLong,
TipsInfo, TipsInfo,
Loading Loading,
}, },
data() { data() {
return { return {
isShowLoading: true, isShowLoading: true,
title: "共0个知识点", title: '共0个知识点',
token: '', token: '',
queryGDParams: { queryGDParams: {
appSelectType: 2, //考试分析(1考试次数全部2考试分数全部) 学习效果分析(1正确率对比全部2知识点对比全部) appSelectType: 2, // 考试分析(1考试次数全部2考试分数全部) 学习效果分析(1正确率对比全部2知识点对比全部)
beginDate: "", beginDate: '',
endDate: "", endDate: '',
hospitalIdList: [], hospitalIdList: [],
originalFlag: 2, originalFlag: 2,
projectId: 374, projectId: 374,
regionId: "", regionId: '',
timeFlag: 1, timeFlag: 1,
pageNo: 0, pageNo: 0,
pageSize: 0, pageSize: 0,
sourceType: 1, sourceType: 1,
pageCfg: { pageCfg: {
type: 1 type: 1,
} },
}, },
tipsContent: '报告数据来源仅包含摸底考和正式考的课程培训', tipsContent: '报告数据来源仅包含摸底考和正式考的课程培训',
knowledgeEffectList: [], knowledgeEffectList: [],
...@@ -53,18 +56,19 @@ export default { ...@@ -53,18 +56,19 @@ export default {
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
originalFlag: "originalFlag", originalFlag: 'originalFlag',
}), }),
}, },
created() { created() {
if (process.client) { if (process.client) {
if (this.$route && this.$route.query) { if (this.$route && this.$route.query) {
let cQuery = this.$route.query; const cQuery = this.$route.query;
let hospitalIdList = cQuery.hospitalIdList || '' const hospitalIdList = cQuery.hospitalIdList || '';
this.queryGDParams.projectId = cQuery.projectId || ""; this.queryGDParams.projectId = cQuery.projectId || '';
this.queryGDParams.regionId = cQuery.regionId || ""; this.queryGDParams.regionId = cQuery.regionId || '';
this.queryGDParams.hospitalIdList = hospitalIdList && hospitalIdList.split(',') || []; this.queryGDParams.hospitalIdList =
cookies.set("lreporttoken", cQuery.token || ""); (hospitalIdList && hospitalIdList.split(',')) || [];
cookies.set('lreporttoken', cQuery.token || '');
this.queryGDParams.originalFlag = cQuery.originalFlag; this.queryGDParams.originalFlag = cQuery.originalFlag;
this.getStudyEffect(this.queryGDParams); this.getStudyEffect(this.queryGDParams);
} }
...@@ -73,21 +77,21 @@ export default { ...@@ -73,21 +77,21 @@ export default {
methods: { methods: {
// 学习效果分析 // 学习效果分析
async getStudyEffect(params) { async getStudyEffect(params) {
await getStudyEffect(params).then(res => { await getStudyEffect(params).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.isShowLoading = false; this.isShowLoading = false;
this.knowledgeEffectList = res.data.knowledgeEffectList || []; this.knowledgeEffectList = res.data.knowledgeEffectList || [];
this.title = `共${this.knowledgeEffectList.length}个知识点`; this.title = `共${this.knowledgeEffectList.length}个知识点`;
} }
}); });
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.klg-point-wrapper { .klg-point-wrapper {
.mt-10 { .mt-10 {
margin-top: 20px !important; margin-top: 20px !important;
}
} }
</style> }
\ No newline at end of file </style>
...@@ -2,41 +2,47 @@ ...@@ -2,41 +2,47 @@
<!-- 专项合作首页: 我参与的,其它项目 --> <!-- 专项合作首页: 我参与的,其它项目 -->
<div class="pro-list-container"> <div class="pro-list-container">
<!-- <CommonHeader :title="title"></CommonHeader> --> <!-- <CommonHeader :title="title"></CommonHeader> -->
<CommonHeaderNew borderStyle="1px solid #e7e7e7" :title="title" :isShowKf="isShowKf"></CommonHeaderNew> <CommonHeaderNew
<CoopListItem style="margin: 10px 0;" :dataList="projectList"></CoopListItem> border-style="1px solid #e7e7e7"
<Loading v-if="showLoading"/> :title="title"
:is-show-kf="isShowKf"
/>
<CoopListItem
style="margin: 10px 0"
:data-list="projectList"
/>
<Loading v-if="showLoading" />
</div> </div>
</template> </template>
<script> <script>
import CommonHeaderNew from "@/components/common/common-header-new"; import CommonHeaderNew from '@/components/common/common-header-new';
import CoopListItem from "@/components/bussiness/coop-list-item"; import CoopListItem from '@/components/bussiness/coop-list-item';
import Loading from "@/components/common/common-loading"; import Loading from '@/components/common/common-loading';
import { getProjectList } from "@/service"; import { getProjectList } from '@/service';
import { BASE_URL } from '@/utils/enumerate'; import { BASE_URL } from '@/utils/enumerate';
const { NUXT_ENV_APP } = process.env; const { NUXT_ENV_APP } = process.env;
const cookies = require("cookie-universal")(); const cookies = require('cookie-universal')();
export default { export default {
components: {
CommonHeaderNew,
CoopListItem,
Loading,
},
data() { data() {
return { return {
token: 'D8E0930EAB3E481B9CCA2ECBD2146BAD', token: 'D8E0930EAB3E481B9CCA2ECBD2146BAD',
showLoading: true, showLoading: true,
title: "学情报告", title: '学情报告',
projectList: [], projectList: [],
isShowKf: true isShowKf: true,
}; };
}, },
components: {
CommonHeaderNew,
CoopListItem,
Loading
},
created() { created() {
if (process.client) { if (process.client) {
var _this = this; var _this = this;
if (this.$rocNative.isWeb) { if (this.$rocNative.isWeb) {
cookies.set("lreporttoken", _this.token); cookies.set('lreporttoken', _this.token);
_this.getProjectList(); _this.getProjectList();
} else { } else {
_this.getUserInfo(); _this.getUserInfo();
...@@ -44,34 +50,35 @@ export default { ...@@ -44,34 +50,35 @@ export default {
} }
}, },
mounted() { mounted() {
this.$sendBuriedData && this.$sendBuriedData({ this.$sendBuriedData &&
action: 'ACTION_WEB_ENTER', this.$sendBuriedData({
component_tag: `467`, action: 'ACTION_WEB_ENTER',
class_name: `learning_report`, component_tag: '467',
url: `${BASE_URL[NUXT_ENV_APP]}/file/log/trace1` class_name: 'learning_report',
}); url: `${BASE_URL[NUXT_ENV_APP]}/file/log/trace1`,
});
}, },
methods: { methods: {
// 与原生交互,获取用户信息 // 与原生交互,获取用户信息
getUserInfo() { getUserInfo() {
this.$rocNative.getUserInfo && this.$rocNative.getUserInfo &&
this.$rocNative.getUserInfo().then(params => { this.$rocNative.getUserInfo().then((params) => {
this.token = params.userToken; this.token = params.userToken;
cookies.set("lreporttoken", this.token); cookies.set('lreporttoken', this.token);
this.getProjectList(); this.getProjectList();
}); });
}, },
// 课程数据 // 课程数据
getProjectList() { getProjectList() {
let params = { const params = {
token: this.token token: this.token,
} };
getProjectList(params).then(res => { getProjectList(params).then((res) => {
this.showLoading = true; this.showLoading = true;
if (res.code === "000000") { if (res.code === '000000') {
this.projectList = res.data && res.data.data || []; this.projectList = (res.data && res.data.data) || [];
setTimeout(() => { setTimeout(() => {
this.showLoading = false; this.showLoading = false;
}, 100); }, 100);
...@@ -81,12 +88,9 @@ export default { ...@@ -81,12 +88,9 @@ export default {
// }) // })
} }
}); });
} },
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped></style>
</style>
<template> <template>
<section class="rank-days-wrapper"> <section class="rank-days-wrapper">
<CommonHeader title="完成天数排名"></CommonHeader> <CommonHeader title="完成天数排名" />
<CommonTitleWithDropdown :title="listTitle" @selectSortItem="selectSortItem"></CommonTitleWithDropdown> <CommonTitleWithDropdown :title="listTitle" />
<RankingItemDays class="pdt-50" :rankList="rankList"></RankingItemDays> <RankingItemDays
<CommonNoMore v-if="rankList.length >= 10" class="mt-10"></CommonNoMore> class="pdt-50"
<Loading v-show="isShowLoading"></Loading> :rank-list="rankList"
/>
<CommonNoMore
v-if="rankList.length >= 10"
class="mt-10"
/>
<Loading v-show="isShowLoading" />
</section> </section>
</template> </template>
<script> <script>
const cookies = require("cookie-universal")(); const cookies = require('cookie-universal')();
import { getStudyTimeData } from "@/service"; import { getStudyTimeData } from '@/service';
import CommonHeader from "@/components/common/common-header"; import CommonHeader from '@/components/common/common-header';
import CommonTitleWithDropdown from "@/components/common/common-title-with-dropdown"; import CommonTitleWithDropdown from '@/components/common/common-title-with-dropdown';
import RankingItemDays from "@/components/bussiness/ranking-item-days"; import RankingItemDays from '@/components/bussiness/ranking-item-days';
import CommonNoMore from "@/components/common/common-no-more"; import CommonNoMore from '@/components/common/common-no-more';
import Loading from "@/components/common/common-loading"; import Loading from '@/components/common/common-loading';
import { mapGetters } from "vuex"; import { mapGetters } from 'vuex';
export default { export default {
components: { components: {
...@@ -24,7 +30,7 @@ export default { ...@@ -24,7 +30,7 @@ export default {
CommonTitleWithDropdown, CommonTitleWithDropdown,
RankingItemDays, RankingItemDays,
CommonNoMore, CommonNoMore,
Loading Loading,
}, },
data() { data() {
return { return {
...@@ -32,37 +38,37 @@ export default { ...@@ -32,37 +38,37 @@ export default {
listTitle: '共0条数据', listTitle: '共0条数据',
rankList: [], rankList: [],
queryGDParams: { queryGDParams: {
beginDate: "", beginDate: '',
endDate: "", endDate: '',
hospitalIdList: [], hospitalIdList: [],
originalFlag: 2, // 默认值0:0不查看原始数据 originalFlag: 2, // 默认值0:0不查看原始数据
projectId: 374, projectId: 374,
regionId: "", regionId: '',
timeFlag: 1, timeFlag: 1,
pageNo: 0, pageNo: 0,
pageSize: 0, pageSize: 0,
sourceType: 1, sourceType: 1,
pageCfg: { pageCfg: {
type: 1 type: 1,
} },
}, },
}; };
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
originalFlag: "originalFlag", originalFlag: 'originalFlag',
}), }),
}, },
created() { created() {
if (process.client) { if (process.client) {
let cQuery = this.$route.query; const cQuery = this.$route.query;
let hospitalIdList = cQuery.hospitalIdList || ""; const hospitalIdList = cQuery.hospitalIdList || '';
this.queryGDParams.projectId = cQuery.projectId || ""; this.queryGDParams.projectId = cQuery.projectId || '';
this.queryGDParams.regionId = cQuery.regionId || ""; this.queryGDParams.regionId = cQuery.regionId || '';
this.queryGDParams.hospitalIdList = this.queryGDParams.hospitalIdList =
(hospitalIdList && hospitalIdList.split(",")) || []; (hospitalIdList && hospitalIdList.split(',')) || [];
// cookies.remove("token"); // cookies.remove("token");
cookies.set("lreporttoken", cQuery.token || ""); cookies.set('lreporttoken', cQuery.token || '');
this.queryGDParams.originalFlag = cQuery.originalFlag; this.queryGDParams.originalFlag = cQuery.originalFlag;
this.getStudyTimeData(this.queryGDParams); this.getStudyTimeData(this.queryGDParams);
} }
...@@ -70,30 +76,24 @@ export default { ...@@ -70,30 +76,24 @@ export default {
methods: { methods: {
// 完成天数排名 // 完成天数排名
async getStudyTimeData(params) { async getStudyTimeData(params) {
await getStudyTimeData(params).then(res => { await getStudyTimeData(params).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.isShowLoading = false; this.isShowLoading = false;
this.rankList = res.data.costRank; this.rankList = res.data.costRank;
// this.listTitle = `共${this.rankList.length}个省` this.listTitle = `共${this.rankList.length}条数据`;
this.listTitle = `共${this.rankList.length}条数据`
} }
}); });
}, },
selectSortItem(type) { },
// this.queryGDParams.pageCfg.type = type;
// this.getStudyTimeData(this.queryGDParams);
}
}
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.rank-days-wrapper { .rank-days-wrapper {
.pdt-50 { .pdt-50 {
padding-top: 50px; padding-top: 50px;
} }
.mt-10 { .mt-10 {
margin-top: 10px !important; margin-top: 10px !important;
}
} }
</style> }
\ No newline at end of file </style>
<template> <template>
<section class="rank-edu-wrapper"> <section class="rank-edu-wrapper">
<CommonHeader title="项目情况排名"></CommonHeader> <CommonHeader title="项目情况排名" />
<CommonTitleWithDropdown :dataList="dropdownList" :title="title" :needRightBtn="needRightBtn" @selectSortItem="selectSortItem"></CommonTitleWithDropdown> <CommonTitleWithDropdown
<RankingList class="pdt-50" :certFlag="certFlag" :rankList="rankList"></RankingList> :data-list="dropdownList"
<CommonNoMore v-if="rankList.length >= 10" class="mt-10"></CommonNoMore> :title="title"
<Loading v-show="isShowLoading"></Loading> :need-right-btn="needRightBtn"
@selectSortItem="selectSortItem"
/>
<RankingList
class="pdt-50"
:cert-flag="certFlag"
:rank-list="rankList"
/>
<CommonNoMore
v-if="rankList.length >= 10"
class="mt-10"
/>
<Loading v-show="isShowLoading" />
</section> </section>
</template> </template>
<script> <script>
const cookies = require("cookie-universal")(); const cookies = require('cookie-universal')();
import { getStudyRankData } from "@/service"; import { getStudyRankData } from '@/service';
import CommonHeader from "@/components/common/common-header"; import CommonHeader from '@/components/common/common-header';
import CommonTitleWithDropdown from "@/components/common/common-title-with-dropdown"; import CommonTitleWithDropdown from '@/components/common/common-title-with-dropdown';
import CommonNoMore from "@/components/common/common-no-more"; import CommonNoMore from '@/components/common/common-no-more';
import RankingList from "@/components/bussiness/ranking-item"; import RankingList from '@/components/bussiness/ranking-item';
import Loading from "@/components/common/common-loading"; import Loading from '@/components/common/common-loading';
import { mapGetters } from "vuex"; import { mapGetters } from 'vuex';
export default { export default {
components: { components: {
...@@ -24,7 +36,7 @@ export default { ...@@ -24,7 +36,7 @@ export default {
CommonTitleWithDropdown, CommonTitleWithDropdown,
CommonNoMore, CommonNoMore,
RankingList, RankingList,
Loading Loading,
}, },
data() { data() {
return { return {
...@@ -33,60 +45,69 @@ export default { ...@@ -33,60 +45,69 @@ export default {
rankList: [], rankList: [],
needRightBtn: true, needRightBtn: true,
queryGDParams: { queryGDParams: {
beginDate: "", beginDate: '',
endDate: "", endDate: '',
hospitalIdList: [], hospitalIdList: [],
originalFlag: 2, // 默认值0:0不查看原始数据 originalFlag: 2, // 默认值0:0不查看原始数据
projectId: 374, projectId: 374,
regionId: "", regionId: '',
timeFlag: 1, timeFlag: 1,
pageNo: 0, pageNo: 0,
pageSize: 0, pageSize: 0,
sourceType: 1, sourceType: 1,
pageCfg: { pageCfg: {
type: 1 type: 1,
} },
}, },
dropdownList: [{ dropdownList: [
desc: '按获证人数排名', {
type: 1 desc: '按获证人数排名',
},{ type: 1,
desc: '按获证比例排名', },
type: 2 {
},{ desc: '按获证比例排名',
desc: '按参与人数排名', type: 2,
type: 3 },
}], {
certFlag: 0 desc: '按参与人数排名',
type: 3,
},
],
certFlag: 0,
}; };
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
originalFlag: "originalFlag", originalFlag: 'originalFlag',
}), }),
}, },
created() { created() {
if(process.client) { if (process.client) {
if(this.$route && this.$route.query) { if (this.$route && this.$route.query) {
let cQuery = this.$route.query const cQuery = this.$route.query;
let hospitalIdList = cQuery.hospitalIdList || '' const hospitalIdList = cQuery.hospitalIdList || '';
this.queryGDParams.projectId = cQuery.projectId || ''; this.queryGDParams.projectId = cQuery.projectId || '';
this.queryGDParams.regionId = cQuery.regionId || ''; this.queryGDParams.regionId = cQuery.regionId || '';
this.queryGDParams.hospitalIdList = hospitalIdList && hospitalIdList.split(',') || []; this.queryGDParams.hospitalIdList =
this.certFlag = cQuery.certFlag - 0 (hospitalIdList && hospitalIdList.split(',')) || [];
if(!this.certFlag) { this.certFlag = cQuery.certFlag - 0;
this.dropdownList = [{ if (!this.certFlag) {
desc: '按完成人数排名', this.dropdownList = [
type: 1 {
},{ desc: '按完成人数排名',
desc: '按完成比例排名', type: 1,
type: 2 },
},{ {
desc: '按参与人数排名', desc: '按完成比例排名',
type: 3 type: 2,
}] },
{
desc: '按参与人数排名',
type: 3,
},
];
} }
cookies.set("lreporttoken", cQuery.token || ''); cookies.set('lreporttoken', cQuery.token || '');
this.queryGDParams.originalFlag = cQuery.originalFlag; this.queryGDParams.originalFlag = cQuery.originalFlag;
this.getStudyRankData(this.queryGDParams); this.getStudyRankData(this.queryGDParams);
} }
...@@ -95,30 +116,29 @@ export default { ...@@ -95,30 +116,29 @@ export default {
methods: { methods: {
// 项目情况排名 // 项目情况排名
async getStudyRankData(params) { async getStudyRankData(params) {
await getStudyRankData(params).then(res => { await getStudyRankData(params).then((res) => {
if (res.code === "000000") { if (res.code === '000000') {
this.isShowLoading = false; this.isShowLoading = false;
this.rankList = res.data.studyRank; this.rankList = res.data.studyRank;
this.title = `共${this.rankList.length}条数据` this.title = `共${this.rankList.length}条数据`;
} }
}); });
}, },
selectSortItem(type) { selectSortItem(type) {
this.queryGDParams.pageCfg.type = type; this.queryGDParams.pageCfg.type = type;
this.getStudyRankData(this.queryGDParams); this.getStudyRankData(this.queryGDParams);
} },
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.rank-edu-wrapper { .rank-edu-wrapper {
.pdt-50 { .pdt-50 {
padding-top: 50px; padding-top: 50px;
} }
.mt-10 { .mt-10 {
margin-top: 10px !important; margin-top: 10px !important;
}
} }
}
</style> </style>
# STATIC
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your static files.
Each file inside this directory is mapped to `/`.
Thus you'd want to delete this README.md before deploying to production.
Example: `/static/robots.txt` is mapped as `/robots.txt`.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
@charset "utf-8";
html {
color: #000;
background: #fff;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
html * {
outline: 0;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
html,body {
font-family: PingFangSC-Regular, -apple-system-font, Source Han Sans, Helvetica Neue, sans-serif;
font-size: 20px;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0;
font-size: 20px;
}
/*
input, select, textarea {
font-size: 100%;
}
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
abbr, acronym {
border: 0;
font-variant: normal;
}
del {
text-decoration: line-through;
}
address, caption, cite, code, dfn, em, th, var {
font-style: normal;
font-weight: 500;
}
ol, ul {
list-style: none;
font-size: 20px;
}
caption, th {
text-align: left;
}
/*
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: 500;
}
*/
q:before, q:after {
content: '';
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
a:hover {
text-decoration: underline;
}
ins, a {
text-decoration: none;
}
.van-dropdown-menu__title {
color: red !important;
}
.van-ellipsis {
color: red !important;
}
;(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
console.warn('将根据已有的meta标签来设置缩放比例');
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content');
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下,仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px';
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = 12 * dpr + 'px';
}, false);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px';
}
return val;
}
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
}
})(window, window['lib'] || (window['lib'] = {}));
\ No newline at end of file
import { mount } from '@vue/test-utils'
import Logo from '@/components/Logo.vue'
describe('Logo', () => {
test('is a Vue instance', () => {
const wrapper = mount(Logo)
expect(wrapper.isVueInstance()).toBeTruthy()
})
})
// 跳转客服
import request from "@/service/api";
/*
*code ("0003-药械专线 0004-问诊专线 0007-会员专线 0002-教培专线 0005-招募专线 0001-基础业务")
*type 1-详情,2-ID、名称
*contentId 内容ID
*contentName 内容名称
*/
const getImUrl = (data) => {
return request({
withCredentials: true,
url: `/im/call/im/link`,
method: "post",
data: data,
});
};
function nativeGo(url) {
let paramList = [
{
key: "pageUrl",
value: url,
type: 4,
seqNo: 1,
},
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList,
});
}
export const goKfFn =(params) =>{
getImUrl(params).then((res) => {
if (res.code == '000000') {
nativeGo(res.data)
}
}).catch((err)=>{
console.log(err);
})
}
module.exports = {
transpileDependencies: [
/[/\\]node_modules[/\\][@\\]pica-cli[/\\]vue-cli-plugin-pica-cli-plugin[/\\]core/,
/[/\\]node_modules[/\\][@\\]pica-kit[/\\]page-model/
],
productionSourceMap: false,
pluginOptions: {
pica: {
jsSort: [],
cssSort: [],
skeletonRoutes: [],
enableAutoSkeletonRoutes: false,
routeMode: 'history',
dpsLimit: 5
},
tinypng: {
key: 'kYWBH2Ck5kn4BwJj8QqjcF0mZJBtZwNR'
}
},
chainWebpack: config => {
config.set('externals', {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
'vconsole': 'VConsole',
axios: 'axios',
vant: 'vant',
'crypto-js/crypto-js': 'CryptoJS',
'jsencrypt/bin/jsencrypt': 'JSEncrypt'
});
config.plugins.delete('prefetch');
config.plugins.delete('preload');
}
};
module.exports.publicPath = process.env.VUE_APP_ENV === 'development' && process.env.VUE_APP_IS_LOCAL ? process.env.BASE_URL : `${process.env.VUE_APP_OSS_URL}/static${process.env.BASE_URL}`;
因为 它太大了无法显示 源差异 。您可以改为 查看blob
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册