35 changed files with 1735 additions and 285 deletions
@ -1,8 +1,8 @@ |
|||
VUE_APP_NODE_ENV=development |
|||
VUE_APP_BASE_URL=https://www.tall.wiki |
|||
VUE_APP_API_URL=https://www.tall.wiki/gateway |
|||
VUE_APP_BASE_URL=https://test.tall.wiki |
|||
VUE_APP_API_URL=https://test.tall.wiki/gateway1 |
|||
VUE_APP_MSG_URL=wss://www.tall.wiki/websocket/message/v4.0/ws |
|||
VUE_APP_PROJECT_PATH=https://www.tall.wiki/carBasicTall |
|||
VUE_APP_QUESTION_PATH=https://www.tall.wiki/carbasics |
|||
VUE_APP_PROJECT_PATH=https://test.tall.wiki/carBasicTall |
|||
VUE_APP_QUESTION_PATH=https://test.tall.wiki/carbasics |
|||
VUE_APP_VERSION=v3.1.0 |
|||
VUE_APP_PUBLIC_PATH=/carBasicCalendar/ |
|||
|
|||
@ -1,8 +1,8 @@ |
|||
VUE_APP_NODE_ENV=production |
|||
VUE_APP_BASE_URL=https://www.tall.wiki |
|||
VUE_APP_API_URL=https://www.tall.wiki/gateway |
|||
VUE_APP_BASE_URL=https://test.tall.wiki |
|||
VUE_APP_API_URL=https://test.tall.wiki/gateway1 |
|||
VUE_APP_MSG_URL=wss://www.tall.wiki/websocket/message/v4.0/ws |
|||
VUE_APP_PROJECT_PATH=https://www.tall.wiki/carBasicTall |
|||
VUE_APP_PROJECT_PATH=https://test.tall.wiki/carBasicTall |
|||
VUE_APP_QUESTION_PATH=https://www.tall.wiki/carbasics |
|||
VUE_APP_VERSION=v3.1.0 |
|||
VUE_APP_PUBLIC_PATH=/carBasicCalendar/ |
|||
|
|||
@ -1,19 +1,22 @@ |
|||
const apiUrl = process.env.VUE_APP_API_URL; |
|||
export const carbasics = `${apiUrl}/carbasics/v4.0`; |
|||
|
|||
const install = (Vue, vm) => { |
|||
vm.$u.api = { ...vm.$u.api } || {}; |
|||
//根据id获取项目信息
|
|||
vm.$u.api.findProjectById = param => vm.$u.post(`${uni.$t.domain}/project/findProjectById`, param); |
|||
vm.$u.api.findProjectById = param => vm.$u.post(`${carbasics}/project/findProjectById`, param); |
|||
|
|||
//创建分享连接
|
|||
vm.$u.api.createShare = param => vm.$u.post(`${uni.$t.domain}/share/create`, param); |
|||
vm.$u.api.createShare = param => vm.$u.post(`${carbasics}/share/create`, param); |
|||
|
|||
//点击分享连接
|
|||
vm.$u.api.clickShare = param => vm.$u.post(`${uni.$t.domain}/share/click`, param); |
|||
vm.$u.api.clickShare = param => vm.$u.post(`${carbasics}/share/click`, param); |
|||
|
|||
//查询医院是否填写了调查问卷
|
|||
vm.$u.api.queryNotWrite = param => vm.$u.post(`${uni.$t.domain}/questionnaire/queryNotWrite`, param); |
|||
vm.$u.api.queryNotWrite = param => vm.$u.post(`${carbasics}/questionnaire/queryNotWrite`, param); |
|||
|
|||
// 根据项目id查询当前项目是不是 医院体验项目
|
|||
vm.$u.api.getByProject = param => vm.$u.post(`${uni.$t.domain}/organization/getByProject`, param); |
|||
vm.$u.api.getByProject = param => vm.$u.post(`${carbasics}/organization/getByProject`, param); |
|||
}; |
|||
|
|||
export default { install }; |
|||
|
|||
@ -1,17 +1,19 @@ |
|||
const url = process.env.VUE_APP_API_URL; |
|||
export const carbasics = `${url}/carbasics/v4.0`; |
|||
const install = (Vue, vm) => { |
|||
vm.$u.api = { ...vm.$u.api } || {}; |
|||
vm.$u.api.getGlobal = param => vm.$u.post(`${uni.$t.domain}/task/global`, param); |
|||
vm.$u.api.getPermanent = param => vm.$u.post(`${uni.$t.domain}/task/permanent`, param); |
|||
vm.$u.api.getGlobal = param => vm.$u.post(`${carbasics}/task/global`, param); |
|||
vm.$u.api.getPermanent = param => vm.$u.post(`${carbasics}/task/permanent`, param); |
|||
//根据时间基准点和角色查找定期任务
|
|||
vm.$u.api.getRegularTask = param => vm.$u.post(`${uni.$t.domain}/task/regular`, param); |
|||
vm.$u.api.getRegularTask = param => vm.$u.post(`${carbasics}/task/regular`, param); |
|||
//修改任务状态
|
|||
vm.$u.api.updateTaskType = param => vm.$u.post(`${uni.$t.domain}/task/type`, param); |
|||
vm.$u.api.updateTaskType = param => vm.$u.post(`${carbasics}/task/type`, param); |
|||
//新建任务
|
|||
vm.$u.api.saveTask = param => vm.$u.post(`${uni.$t.domain}/task/save`, param); |
|||
vm.$u.api.saveTask = param => vm.$u.post(`${carbasics}/task/save`, param); |
|||
//克隆任务
|
|||
vm.$u.api.cloneTask = param => vm.$u.post(`${uni.$t.domain}/task/clone`, param); |
|||
vm.$u.api.cloneTask = param => vm.$u.post(`${carbasics}/task/clone`, param); |
|||
//模糊查询 查找项目下的任务
|
|||
vm.$u.api.queryTaskOfProject = param => vm.$u.post(`${uni.$t.domain}/task/queryTaskOfProject`, param); |
|||
vm.$u.api.queryTaskOfProject = param => vm.$u.post(`${carbasics}/task/queryTaskOfProject`, param); |
|||
}; |
|||
|
|||
export default { install }; |
|||
|
|||
@ -0,0 +1,42 @@ |
|||
<template> |
|||
<view class="role-box"> |
|||
<view class="role flex items-center justify-between"> |
|||
<view class="flex items-center"> |
|||
<img src="@/static/news/role.png" style="width: 44rpx; height: 44rpx" alt="" /> |
|||
<view class="ml-2 role-name">医生</view> |
|||
</view> |
|||
<u-icon name="arrow-down" color="#4F8BFF" size="34"></u-icon> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.role-name { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #5991ff; |
|||
} |
|||
.role { |
|||
height: 92rpx; |
|||
background: #e4edff; |
|||
box-shadow: 0px 0px 6rpx 0 #eeeeee; |
|||
border-radius: 24r 24r 0px 0px; |
|||
padding: 24rpx; |
|||
opacity: 1; |
|||
} |
|||
.role-box { |
|||
width: 686rpx; |
|||
margin: 32rpx; |
|||
height: 236rpx; |
|||
background: #ffffff; |
|||
box-shadow: 0px 4px 20px 0px rgba(39, 59, 97, 0.08); |
|||
border-radius: 24r; |
|||
opacity: 1; |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 228 KiB |
|
After Width: | Height: | Size: 500 KiB |
@ -0,0 +1,443 @@ |
|||
<template> |
|||
<div class="flex flex-col"> |
|||
<view class="bg-white flex flex-col" style="padding: 0" v-if="onceList.length"> |
|||
<div class="w-full" style="max-height: 342px; overflow-y: scroll; padding: 16px 16px 0 16px"> |
|||
<div class="w-full ver-box" v-for="item in onceList" :key="item.id"> |
|||
<div class="flex ver-title items-center justify-between"> |
|||
<div class="flex" style="font-size: 16px; font-weight: bold"> |
|||
<div class="mr-2">{{ item.department }}</div> |
|||
<div>{{ item.position }}</div> |
|||
</div> |
|||
<div class="over-hidden" style="color: #70798c; text-align: right; font-size: 12px; font-weight: bold; width: 40%"> |
|||
{{ item.hospitalName }} |
|||
</div> |
|||
</div> |
|||
<div class="flex flex-row flex-nowrap ver-content"> |
|||
<div> |
|||
<div class="con-tip mt-2 mb-3">姓名</div> |
|||
<div class="con-tip">手机号</div> |
|||
</div> |
|||
<div> |
|||
<div class="con-tip mt-2 mb-3"> |
|||
{{ item.name }} |
|||
</div> |
|||
<div class="con-tip"> |
|||
{{ item.phone }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div v-if="item.auditStatus === 0" class="ver-over"> |
|||
<img src="./img/0.png" style="height: 80px; width: 59px" alt="" /> |
|||
</div> |
|||
<div v-else-if="item.auditStatus === 1" class="ver-over"> |
|||
<img src="./img/1.png" style="height: 80px; width: 59px" alt="" /> |
|||
</div> |
|||
<div v-else-if="item.auditStatus === 2" class="ver-over"> |
|||
<img src="./img/2.png" style="height: 80px; width: 59px" alt="" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</view> |
|||
<view class="bg-white"> |
|||
<div class="apply-title w-full my-2">“暴风眼”（Typhoneye）小程序账户登记</div> |
|||
<div class="apply-control mb-2">“暴风眼”（Typhoneye）是急诊急救数字化管理平台基础版的简称。</div> |
|||
<div class="apply-control mb-2"> |
|||
“暴风眼”质控模式践行“以病人为核心”的理念，医疗资源围绕病人运转，尽量减少病人不必要的“无效位移”和“无效等待”。 |
|||
</div> |
|||
<div class="apply-control mb-2">您的参与对我们非常重要，有问题请联系首页客服：</div> |
|||
<div class="w-full flex justify-center"> |
|||
<img src="./img/kefu.jpg" style="width: 130px; margin: 8px auto" @click="showImg = true" /> |
|||
</div> |
|||
</view> |
|||
<view class="bg-white"> |
|||
<div class="w-full item-title flex align-start">医院</div> |
|||
<div class="w-full hos-box"> |
|||
<u-radio-group v-model="value" class="w-full" wrap @change="onChange"> |
|||
<div v-for="(item, index) in hosList" :key="index" class="mb-3 flex justify-between title"> |
|||
{{ item.name }} |
|||
<u-radio :name="item.name"> </u-radio> |
|||
</div> |
|||
</u-radio-group> |
|||
<view v-if="value === '其他'" style="width: calc(100% - 32rpx)" class="pb-3 title"> |
|||
<u-input class="w-full" @blur="iptBlur" border v-model="hosName" placeholder="请输入..." /> |
|||
</view> |
|||
</div> |
|||
</view> |
|||
<view class="bg-white"> |
|||
<div class="w-full item-title flex align-start">部门/职位</div> |
|||
<div class="w-full post-box"> |
|||
<!-- <u-input v-model="departmentName" type="text" border disabled @click="showDep = true" placeholder="选择部门" class="mr-4" /> |
|||
<u-input v-model="posiName" type="text" border disabled @click="showPositions" placeholder="选择职位" /> --> |
|||
<view class="mb-3 flex justify-between" @click="showDep = true"> |
|||
<view class="title">部门</view> |
|||
<view> |
|||
{{ departmentName }} |
|||
<u-icon class="ml-2" name="arrow-down" color="#70798c"></u-icon> |
|||
</view> |
|||
</view> |
|||
<view class="flex justify-between" @click="showPositions"> |
|||
<view class="title">职位</view> |
|||
<view> |
|||
{{ posiName }} |
|||
<u-icon class="ml-2" name="arrow-down" color="#70798c"></u-icon> |
|||
</view> |
|||
</view> |
|||
</div> |
|||
</view> |
|||
<view class="bg-white"> |
|||
<div class="w-full item-title flex align-start">信息</div> |
|||
<div class="w-full info-box"> |
|||
<!-- <u-input v-model="departmentName" type="text" border disabled @click="showDep = true" placeholder="选择部门" class="mr-4" /> |
|||
<u-input v-model="posiName" type="text" border disabled @click="showPositions" placeholder="选择职位" /> --> |
|||
<view class="flex items-center justify-between" @click="showDep = true"> |
|||
<view class="mb-1 title">姓名</view> |
|||
<view> |
|||
<u-input placeholder="请输入" input-align="right" v-model="FilledBy"></u-input> |
|||
</view> |
|||
</view> |
|||
<view class="flex justify-between" @click="showPositions"> |
|||
<view class="title">手机号</view> |
|||
<view> |
|||
<span>{{ FilledTel }}</span> |
|||
</view> |
|||
</view> |
|||
</div> |
|||
</view> |
|||
<!-- <view class="bg-white mb-2 flex items-center justify-between"> |
|||
<div class="col-title">姓名</div> |
|||
<div> |
|||
<u-input placeholder="请输入" border input-align="right" v-model="FilledBy"></u-input> |
|||
</div> |
|||
</view> |
|||
<view class="bg-white mb-2 flex items-center justify-between"> |
|||
<div class="col-title">手机号</div> |
|||
<div> |
|||
<span>{{ FilledTel }}</span> |
|||
</div> |
|||
</view> --> |
|||
<u-button shape="circle" :disabled="waiting" type="primary" :custom-style="submitBtn" @click="submit">提交申请</u-button> |
|||
<u-select |
|||
v-model="showDep" |
|||
:list="departmentList" |
|||
value-name="departmentCode" |
|||
label-name="departmentName" |
|||
@confirm="handleChange" |
|||
></u-select> |
|||
<u-select v-model="showPos" :list="positions" value-name="positionCode" label-name="positionName" @confirm="handleChangePos"></u-select> |
|||
<div class="img-box flex items-center" v-if="showImg" @click="showImg = false"> |
|||
<img src="./img/kefu.jpg" class="w-full h-full" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState } from 'vuex'; |
|||
export default { |
|||
name: 'Apply', |
|||
components: {}, |
|||
props: {}, |
|||
data() { |
|||
return { |
|||
value: '', |
|||
onceList: [], // 已经提交过的数组 |
|||
hosList: [], |
|||
departmentList: [], |
|||
positions: [], |
|||
hosName: '', // 医院选择的其他输入框 |
|||
departmentName: '', // 部门名称 |
|||
departmentCode: '', // 部门code |
|||
posiName: '', // 职位名称 |
|||
posiCode: '', // 职位Code |
|||
FilledBy: '', // 姓名 |
|||
FilledTel: '', // 手机号 |
|||
waiting: false, |
|||
showImg: false, |
|||
showDep: false, |
|||
showPos: false, |
|||
submitBtn: { |
|||
height: '46px', |
|||
margin: '32rpx 32rpx 48px 32rpx', |
|||
background: 'linear-gradient(136deg, #7BC0FF 0%, #4D88FF 100%)', |
|||
}, |
|||
}; |
|||
}, |
|||
computed: { |
|||
...mapState('user', ['user']), |
|||
}, |
|||
methods: { |
|||
// 选择职位select，先判断是否选择了部门 |
|||
showPositions() { |
|||
if (!this.departmentCode) { |
|||
this.$t.ui.showToast('请先选择部门'); |
|||
} else { |
|||
this.showPos = true; |
|||
} |
|||
}, |
|||
// 查询已经提交过的申请 |
|||
async getMyApply() { |
|||
try { |
|||
const param = { |
|||
auditStatus: '', |
|||
name: '', |
|||
}; |
|||
const res = await this.$u.api.queryMyApply(param); |
|||
this.onceList = res; |
|||
} catch (error) { |
|||
this.$t.ui.showToast('网络异常,查询申请列表失败,请稍后重试'); |
|||
} |
|||
}, |
|||
// 获取医院列表 |
|||
async getHosList() { |
|||
try { |
|||
const res = await this.$u.api.queryHospital({}); |
|||
const other = { name: '其他' }; |
|||
res.push(other); |
|||
this.hosList = res; |
|||
console.log('this.hosList: ', this.hosList); |
|||
} catch (error) { |
|||
this.$t.ui.showToast('网络异常,请稍后重试'); |
|||
} |
|||
}, |
|||
// 获取部门与职位 |
|||
async getPosList() { |
|||
try { |
|||
const param = { name: this.hosName ? this.hosName : this.value }; |
|||
const res = await this.$u.api.queryDepartment(param); |
|||
this.departmentList = res; |
|||
console.log('this.departmentList: ', this.departmentList); |
|||
} catch (error) { |
|||
this.$t.ui.showToast('网络异常,请稍后重试'); |
|||
} |
|||
}, |
|||
// 判断医院单选,切换时,清空 其他输入框 |
|||
onChange(e) { |
|||
if (e === '其他') { |
|||
this.hosName = ''; |
|||
} |
|||
this.getPosList(); |
|||
}, |
|||
// 医院的其他输入框失去焦点时,重新请求部门的接口 |
|||
iptBlur() { |
|||
this.getPosList(); |
|||
}, |
|||
// 修改部门选项 |
|||
handleChange(e) { |
|||
this.departmentName = e[0].label; |
|||
this.departmentCode = e[0].value; |
|||
for (let i = 0; i < this.departmentList.length; i++) { |
|||
const item = this.departmentList[i]; |
|||
if (item.departmentCode === e[0].value) { |
|||
this.positions = item.positions; |
|||
} |
|||
} |
|||
this.posiName = ''; |
|||
this.posiCode = ''; |
|||
}, |
|||
// 修改职位选项 |
|||
handleChangePos(e) { |
|||
this.posiName = e[0].label; |
|||
this.posiCode = e[0].value; |
|||
}, |
|||
// 提交数据 |
|||
async submit() { |
|||
this.waiting = true; |
|||
try { |
|||
if (!this.hosName && this.value === '其他') { |
|||
this.$t.ui.showToast('请输入医院名称'); |
|||
this.waiting = false; |
|||
return; |
|||
} |
|||
if (!this.value) { |
|||
this.$t.ui.showToast('请选择医院'); |
|||
this.waiting = false; |
|||
return; |
|||
} |
|||
if (!this.departmentName) { |
|||
this.$t.ui.showToast('请选择部门'); |
|||
this.waiting = false; |
|||
return; |
|||
} |
|||
if (!this.posiName) { |
|||
this.$t.ui.showToast('请选择职位'); |
|||
this.waiting = false; |
|||
return; |
|||
} |
|||
if (!this.FilledBy) { |
|||
this.$t.ui.showToast('请填写姓名'); |
|||
this.waiting = false; |
|||
return; |
|||
} |
|||
if (!this.FilledTel) { |
|||
this.$t.ui.showToast('请填写手机号'); |
|||
this.waiting = false; |
|||
return; |
|||
} |
|||
const param = { |
|||
departmentCode: this.departmentCode, |
|||
departmentName: this.departmentName, |
|||
hospitalName: this.hosName ? this.hosName : this.value, |
|||
positionCode: this.posiCode, |
|||
positionName: this.posiName, |
|||
submitter: this.FilledBy, |
|||
submitterPhone: this.FilledTel, |
|||
}; |
|||
const res = await this.$u.api.submitAccount(param); |
|||
this.$t.ui.showToast('提交成功'); |
|||
this.departmentCode = ''; |
|||
this.departmentName = ''; |
|||
// this.hosName = ''; // 医院其他输入框 |
|||
this.posiCode = ''; |
|||
this.posiName = ''; |
|||
// this.FilledBy = ''; // 姓名 |
|||
this.getMyApply(); |
|||
uni.pageScrollTo({ |
|||
scrollTop: 0, |
|||
duration: 100, |
|||
}); |
|||
this.waiting = false; |
|||
} catch (error) { |
|||
this.$t.ui.showToast('网络异常,请稍后重试'); |
|||
this.waiting = false; |
|||
} |
|||
}, |
|||
}, |
|||
watch: {}, |
|||
|
|||
// 页面周期函数--监听页面加载 |
|||
onLoad() { |
|||
if (this.user.phone) { |
|||
this.FilledTel = this.user.phone; |
|||
} |
|||
this.getMyApply(); |
|||
this.getHosList(); |
|||
this.getPosList(); |
|||
}, |
|||
// 页面周期函数--监听页面初次渲染完成 |
|||
onReady() {}, |
|||
// 页面周期函数--监听页面显示(not-nvue) |
|||
onShow() {}, |
|||
// 页面周期函数--监听页面隐藏 |
|||
onHide() {}, |
|||
// 页面周期函数--监听页面卸载 |
|||
onUnload() {}, |
|||
// 页面处理函数--监听用户下拉动作 |
|||
// onPullDownRefresh() { uni.stopPullDownRefresh(); }, |
|||
// 页面处理函数--监听用户上拉触底 |
|||
// onReachBottom() {}, |
|||
// 页面处理函数--监听页面滚动(not-nvue) |
|||
// onPageScroll(event) {}, |
|||
// 页面处理函数--用户点击右上角分享 |
|||
// onShareAppMessage(options) {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.title { |
|||
color: #70798c; |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
} |
|||
.bg-white { |
|||
background-color: white; |
|||
/* margin-bottom: 12px; */ |
|||
padding: 16px; |
|||
} |
|||
.img-box { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
background: rgba(0, 0, 0, 0.45); |
|||
z-index: 1000; |
|||
} |
|||
.over-hidden { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
.ver-over { |
|||
height: 80px; |
|||
width: 60px; |
|||
text-align: center; |
|||
line-height: 56px; |
|||
position: absolute; |
|||
right: 12px; |
|||
bottom: 16px; |
|||
} |
|||
.con-tip { |
|||
font-size: 16px; |
|||
color: #70798c; |
|||
min-width: 80px; |
|||
} |
|||
.ver-content { |
|||
padding: 16px; |
|||
height: 100px; |
|||
} |
|||
.ver-box { |
|||
border-left: 6rpx solid #1bb299; |
|||
box-shadow: 0 0 12px 1px #eee; |
|||
border-radius: 10rpx; |
|||
margin-bottom: 16px; |
|||
position: relative; |
|||
} |
|||
.hos-box { |
|||
height: auto; |
|||
border-left: 6rpx solid #4f8bff; |
|||
box-shadow: 0 0 12px 1px #eee; |
|||
border-radius: 10rpx; |
|||
/* margin-bottom: 16px; */ |
|||
position: relative; |
|||
padding: 24rpx 0 0rpx 20rpx; |
|||
} |
|||
.post-box { |
|||
height: auto; |
|||
border-left: 6rpx solid #1bb299; |
|||
box-shadow: 0 0 12px 1px #eee; |
|||
border-radius: 10rpx; |
|||
position: relative; |
|||
padding: 24rpx 20rpx; |
|||
} |
|||
.info-box { |
|||
height: auto; |
|||
border-left: 6rpx solid #ff8833; |
|||
box-shadow: 0 0 12px 1px #eee; |
|||
border-radius: 10rpx; |
|||
position: relative; |
|||
padding: 8rpx 20rpx 24rpx 20rpx; |
|||
} |
|||
.ver-title { |
|||
height: 52px; |
|||
border-bottom: 1px solid #eee; |
|||
color: #3e3d4d; |
|||
font-weight: bold; |
|||
padding: 0 16px; |
|||
} |
|||
/deep/.ant-select { |
|||
width: 45%; |
|||
} |
|||
.item-title { |
|||
height: 40px; |
|||
/* border-bottom: 1px solid #eee; */ |
|||
font-weight: bold; |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
color: #3e3d4d; |
|||
} |
|||
.col-title { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
} |
|||
.apply-title { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: #333; |
|||
text-align: center; |
|||
} |
|||
.apply-control { |
|||
font-size: 14px; |
|||
color: #666; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,294 @@ |
|||
<template> |
|||
<div class="title-box bg-white fill-width"> |
|||
<!-- <a-tabs v-model="timeValue" @change="changeTab" size="small"> |
|||
<a-tab-pane :key="0" tab="24h"></a-tab-pane> |
|||
<a-tab-pane :key="1" tab="周"></a-tab-pane> |
|||
<a-tab-pane :key="2" tab="月"></a-tab-pane> |
|||
<a-tab-pane :key="3" tab="季"></a-tab-pane> |
|||
<a-tab-pane :key="4" tab="年"></a-tab-pane> |
|||
</a-tabs> --> |
|||
<u-subsection :list="list" :current="timeValue" @change="changeTab"></u-subsection> |
|||
<div class="time-box"> |
|||
<a-date-picker @change="changeDay" v-if="timeValue === 0" :popup-style="popupStyle"> |
|||
<div style="color: #4b8aff; text-align: center; padding-left: 8px"> |
|||
< |
|||
{{ text }} |
|||
> |
|||
</div> |
|||
</a-date-picker> |
|||
<a-week-picker @change="changeWeek" v-else-if="timeValue === 1" :popup-style="popupStyle"> |
|||
<div style="color: #4b8aff; text-align: center; padding-left: 8px"> |
|||
< |
|||
{{ text }} |
|||
> |
|||
</div> |
|||
</a-week-picker> |
|||
<a-month-picker @change="changeMonth" v-else-if="timeValue === 2" :popup-style="popupStyle"> |
|||
<div style="color: #4b8aff; text-align: center; padding-left: 8px"> |
|||
< |
|||
{{ text }} |
|||
> |
|||
</div> |
|||
</a-month-picker> |
|||
<div v-else-if="timeValue === 3" style="color: #4b8aff; text-align: center; padding-left: 8px" @click="showCal = !showCal"> |
|||
< |
|||
{{ text }} |
|||
> |
|||
</div> |
|||
<div class="calendar-box" :style="{ height: timeValue === 3 && showCal ? '160px' : '0' }"> |
|||
<div class="ant-calendar-year-panel-header"> |
|||
<a type="left" class="ant-calendar-year-panel-prev-decade-btn" @click="quarterYear--" /> |
|||
<span>{{ quarterYear }}</span> |
|||
<a type="right" class="ant-calendar-year-panel-next-decade-btn" @click="quarterYear++" /> |
|||
</div> |
|||
<div class="ant-calendar-year-panel-tbody d-flex flex-column justify-space-between" style="height: 120px"> |
|||
<div |
|||
class="quarter-box" |
|||
@click="changeQuarter(0, '第一季度')" |
|||
:style="{ background: isActive === 0 ? '#40a9ff' : '', color: isActive === 0 ? '#fff' : '' }" |
|||
> |
|||
第一季度 |
|||
</div> |
|||
<div |
|||
class="quarter-box" |
|||
@click="changeQuarter(1, '第二季度')" |
|||
:style="{ background: isActive === 1 ? '#40a9ff' : '', color: isActive === 1 ? '#fff' : '' }" |
|||
> |
|||
第二季度 |
|||
</div> |
|||
<div |
|||
class="quarter-box" |
|||
@click="changeQuarter(2, '第三季度')" |
|||
:style="{ background: isActive === 2 ? '#40a9ff' : '', color: isActive === 2 ? '#fff' : '' }" |
|||
> |
|||
第三季度 |
|||
</div> |
|||
<div |
|||
class="quarter-box" |
|||
@click="changeQuarter(3, '第四季度')" |
|||
:style="{ background: isActive === 3 ? '#40a9ff' : '', color: isActive === 3 ? '#fff' : '' }" |
|||
> |
|||
第四季度 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<a-date-picker @panelChange="changeYear" v-if="timeValue === 4" format="YYYY" mode="year" :popup-style="popupStyle"> |
|||
<div style="color: #4b8aff; text-align: center; padding-left: 8px"> |
|||
< |
|||
{{ text }} |
|||
> |
|||
</div> |
|||
</a-date-picker> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'Title', |
|||
data() { |
|||
return { |
|||
// text: '过去24小时' |
|||
list: ['24h', '周', '月', '季', '年'], |
|||
text: '近24h', |
|||
startTime: 0, |
|||
endTime: 0, |
|||
timeUnit: 0, |
|||
timeValue: 0, |
|||
quarterYear: new Date().getFullYear(), |
|||
popupStyle: { |
|||
left: '0 !important', |
|||
top: '0 !important', |
|||
position: 'relative', |
|||
}, |
|||
showCal: false, |
|||
isActive: 0, |
|||
}; |
|||
}, |
|||
watch: { |
|||
endTime() { |
|||
this.$emit('getTime', this.startTime, this.endTime, this.timeUnit); |
|||
}, |
|||
quarterYear(val) { |
|||
if (this.isActive === 0) { |
|||
this.text = val + '-第一季度'; |
|||
this.startTime = this.$moment(`${val}-01-01 00:00:00`).valueOf(); |
|||
this.endTime = this.$moment(`${val}-3-31 23:59:59`).valueOf(); |
|||
} else if (this.isActive === 1) { |
|||
this.text = val + '-第二季度'; |
|||
this.startTime = this.$moment(`${val}-04-01 00:00:00`).valueOf(); |
|||
this.endTime = this.$moment(`${val}-6-30 23:59:59`).valueOf(); |
|||
} else if (this.isActive === 2) { |
|||
this.text = val + '-第三季度'; |
|||
this.startTime = this.$moment(`${val}-07-01 00:00:00`).valueOf(); |
|||
this.endTime = this.$moment(`${val}-9-30 23:59:59`).valueOf(); |
|||
} else if (this.isActive === 3) { |
|||
this.text = val + '-第四季度'; |
|||
this.startTime = this.$moment(`${val}-10-01 00:00:00`).valueOf(); |
|||
this.endTime = this.$moment(`${val}-12-31 23:59:59`).valueOf(); |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
// changeTab(e) { |
|||
// this.$emit('getTime', e); |
|||
// }, |
|||
// 时间选择 |
|||
changeTab(e) { |
|||
console.log('e: ', e); |
|||
// this.endTime = new Date().valueOf(); |
|||
this.showCal = false; |
|||
this.timeUnit = e; |
|||
if (e === 0) { |
|||
// 天 |
|||
// 获取当前天的开始时间 |
|||
const dayDateStart = this.$moment(new Date().valueOf()).format('YYYY-MM-DD 00:00:00'); |
|||
// 获取当前天的结束时间 |
|||
const dayDateEnd = this.$moment(new Date().valueOf()).format('YYYY-MM-DD 23:59:59'); |
|||
// 默认开始时间为今天0点的前一个小时 |
|||
this.startTime = this.$moment(dayDateStart).valueOf() - 3600 * 1000; |
|||
// 默认结束时间为今天23点59分59秒的后一个小时 |
|||
this.endTime = this.$moment(dayDateEnd).valueOf(); |
|||
this.text = '近24h'; |
|||
} else if (e === 1) { |
|||
// 周 |
|||
this.startTime = new Date().valueOf() - 7 * 24 * 3600 * 1000; |
|||
const weekDateStart = this.$moment(new Date()).week(this.$moment(new Date()).week()).startOf('week').format('YYYY-MM-DD 00:00:00'); |
|||
this.startTime = this.$moment(weekDateStart).valueOf() - 24 * 3600 * 1000; |
|||
this.endTime = this.$moment(weekDateStart).valueOf() + 6 * 24 * 3600 * 1000; |
|||
this.text = '近一周'; |
|||
} else if (e === 2) { |
|||
// 月 |
|||
this.startTime = |
|||
this.$moment(this.$moment(new Date().valueOf()).startOf('month').format('YYYY-MM-DD HH:mm:ss')).valueOf() - 3600 * 1000; |
|||
this.endTime = |
|||
this.$moment(this.$moment(new Date().valueOf()).endOf('month').format('YYYY-MM-DD 23:59:59')).valueOf() + 3600 * 1000; |
|||
this.text = '近一月'; |
|||
} else if (e === 3) { |
|||
// 季 |
|||
this.startTime = new Date().valueOf() - 90 * 24 * 3600 * 1000; |
|||
const num = this.$moment().quarter() - 0; |
|||
if (num === 1) { |
|||
this.startTime = this.$moment(`${this.quarterYear}-01-01 00:00:00`).valueOf(); |
|||
this.endTime = this.$moment(`${this.quarterYear}-3-31 23:59:59`).valueOf(); |
|||
} else if (num === 2) { |
|||
this.startTime = this.$moment(`${this.quarterYear}-04-01 00:00:00`).valueOf(); |
|||
this.endTime = this.$moment(`${this.quarterYear}-6-30 23:59:59`).valueOf(); |
|||
} else if (num === 3) { |
|||
this.startTime = this.$moment(`${this.quarterYear}-07-01 00:00:00`).valueOf(); |
|||
this.endTime = this.$moment(`${this.quarterYear}-9-30 23:59:59`).valueOf(); |
|||
} else if (num === 4) { |
|||
this.startTime = this.$moment(`${this.quarterYear}-10-01 00:00:00`).valueOf(); |
|||
this.endTime = this.$moment(`${this.quarterYear}-12-31 23:59:59`).valueOf(); |
|||
} |
|||
|
|||
this.text = '近一季度'; |
|||
} else if (e === 4) { |
|||
// 年 |
|||
const yearDate = this.$moment().year(); |
|||
this.startTime = this.$moment(`${yearDate}-01-01 00:00:00`).valueOf() - 30 * 24 * 3600 * 1000; |
|||
this.endTime = this.$moment(`${yearDate}-12-31 23:59:59`).valueOf(); |
|||
this.text = '近一年'; |
|||
} |
|||
console.log(this.text); |
|||
// this.$emit('getTime', e); |
|||
}, |
|||
// 改变天 |
|||
changeDay(e, dateString) { |
|||
this.text = dateString; |
|||
this.startTime = this.$moment(`${this.text} 00:00:00`).valueOf() - 3600 * 1000; |
|||
this.endTime = this.$moment(`${this.text} 23:59:59`).valueOf(); |
|||
}, |
|||
// 改变周 |
|||
changeWeek(e, dateString) { |
|||
this.text = dateString; |
|||
const startValue = this.$moment(e._d).week(this.$moment(e._d).week()).startOf('week').format('YYYY-MM-DD 00:00:00'); // 获取所选日期所在周的第一天 |
|||
this.startTime = this.$moment(startValue).valueOf() - 24 * 3600 * 1000; |
|||
this.endTime = this.startTime + 7 * 24 * 3600 * 1000; |
|||
}, |
|||
// 改变月 |
|||
changeMonth(e, dateString) { |
|||
this.text = dateString; |
|||
console.log('e, dateString: ', e, dateString); |
|||
this.startTime = this.$moment(this.$moment(e._d).startOf('month').format('YYYY-MM-DD HH:mm:ss')).valueOf() - 3600 * 1000; |
|||
this.endTime = this.$moment(this.$moment(e._d).endOf('month').format('YYYY-MM-DD 23:59:59')).valueOf() + 3600 * 1000; |
|||
}, |
|||
// 修改季度 |
|||
changeQuarter(num, str) { |
|||
this.isActive = num; |
|||
this.text = this.quarterYear + '-' + str; |
|||
|
|||
if (num === 0) { |
|||
this.startTime = this.$moment(`${this.quarterYear}-01-01 00:00:00`).valueOf(); |
|||
this.endTime = this.$moment(`${this.quarterYear}-3-31 23:59:59`).valueOf(); |
|||
} else if (num === 1) { |
|||
this.startTime = this.$moment(`${this.quarterYear}-04-01 00:00:00`).valueOf(); |
|||
this.endTime = this.$moment(`${this.quarterYear}-6-30 23:59:59`).valueOf(); |
|||
} else if (num === 2) { |
|||
this.startTime = this.$moment(`${this.quarterYear}-07-01 00:00:00`).valueOf(); |
|||
this.endTime = this.$moment(`${this.quarterYear}-9-30 23:59:59`).valueOf(); |
|||
} else if (num === 3) { |
|||
this.startTime = this.$moment(`${this.quarterYear}-10-01 00:00:00`).valueOf(); |
|||
this.endTime = this.$moment(`${this.quarterYear}-12-31 23:59:59`).valueOf(); |
|||
} |
|||
|
|||
setTimeout(() => { |
|||
this.showCal = false; |
|||
}, 80); |
|||
}, |
|||
// 修改年份 |
|||
changeYear(e) { |
|||
this.text = this.$moment(e).format('YYYY'); |
|||
this.startTime = this.$moment(`${this.text}-01-01 00:00:00`).valueOf() - 30 * 24 * 3600 * 1000; |
|||
this.endTime = this.$moment(`${this.text}-12-31 23:59:59`).valueOf(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
/* .title-box { |
|||
height: 84px; |
|||
width: 100%; |
|||
text-align: center; |
|||
} |
|||
/deep/.ant-tabs-bar { |
|||
margin: 0 0 8px 0; |
|||
border-bottom: none; |
|||
} |
|||
*/ |
|||
.time-box { |
|||
text-align: center; |
|||
margin: auto; |
|||
position: relative; |
|||
} |
|||
/deep/.ant-tabs-nav { |
|||
margin-right: auto; |
|||
} |
|||
/deep/.ant-tabs-tab { |
|||
margin-right: 0; |
|||
text-align: center; |
|||
} |
|||
/deep/.ant-tabs-nav { |
|||
width: 100%; |
|||
} |
|||
/deep/.ant-tabs-nav div { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.calendar-box { |
|||
position: absolute; |
|||
background-color: #fff; |
|||
border-radius: 8px; |
|||
box-shadow: 0 0 5px #ddd; |
|||
z-index: 10; |
|||
left: 50%; |
|||
margin-left: -140px; |
|||
width: 280px; |
|||
transition: all 0.2s; |
|||
overflow: hidden; |
|||
} |
|||
.quarter-box { |
|||
line-height: 30px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,104 @@ |
|||
<template> |
|||
<div class="flex flex-nowrap flex-col bg-white"> |
|||
<u-collapse default-active-key="1" class="mb-2" :bordered="false" style="width: 100%" expand-icon-position="right"> |
|||
<u-collapse-item key="1" :title="header" :style="customStyle"> |
|||
<!-- <view class="bg-white"> --> |
|||
<Title @getTime="getTime" /> |
|||
<!-- </view> --> |
|||
<view bordered class="mt-2" v-for="item in list" :key="item"> |
|||
123 |
|||
<!-- <runway v-if="item === 'run'" :start-time="startTime" :end-time="endTime" /> |
|||
<DNT v-else-if="item === 'DNT'" :start-time="startTime" :end-time="endTime" /> |
|||
<DPT v-else-if="item === 'DPT'" :start-time="startTime" :end-time="endTime" /> |
|||
<Operation v-else-if="item === '手术方式'" :start-time="startTime" :end-time="endTime" /> |
|||
<Hospital v-else-if="item === '来院方式'" :start-time="startTime" :end-time="endTime" /> --> |
|||
</view> |
|||
<view bordered class="mt-2"> |
|||
456 |
|||
<!-- <Data :start-time="startTime" :end-time="endTime" /> --> |
|||
</view> |
|||
</u-collapse-item> |
|||
</u-collapse> |
|||
<!-- <u-collapse class="mb-2" :bordered="false" style="width: 100%" expand-icon-position="right"> |
|||
<template #expandIcon="props"> |
|||
<a-icon type="down" :rotate="props.isActive ? 0 : -180" /> |
|||
</template> |
|||
<a-collapse-panel key="1" header="单项数据统计" :style="customStyle"> |
|||
<lineBarChart /> |
|||
</a-collapse-panel> |
|||
</u-collapse> |
|||
<u-collapse class="mb-2" :bordered="false" style="width: 100%" expand-icon-position="right"> |
|||
<template #expandIcon="props"> |
|||
<a-icon type="down" :rotate="props.isActive ? 0 : -180" /> |
|||
</template> |
|||
<a-collapse-panel key="1" header="各地市数据对比" :style="customStyle"> |
|||
<cityChart /> |
|||
</a-collapse-panel> |
|||
</u-collapse> --> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Title from './components/Title.vue'; |
|||
export default { |
|||
name: 'Statistics', |
|||
components: { Title }, |
|||
props: {}, |
|||
data() { |
|||
return { |
|||
customStyle: 'background: #fff;border-radius: 4px;border: 0;overflow: hidden', |
|||
list: ['run', 'DNT', 'DPT', '手术方式', '来院方式'], |
|||
startTime: 0, |
|||
endTime: 0, |
|||
header: '', |
|||
}; |
|||
}, |
|||
computed: {}, |
|||
methods: { |
|||
getTime(startTime, endTime) { |
|||
this.startTime = startTime; |
|||
this.endTime = endTime; |
|||
}, |
|||
}, |
|||
watch: {}, |
|||
|
|||
// 页面周期函数--监听页面加载 |
|||
onLoad() { |
|||
this.startTime = this.$moment(this.$moment(new Date().valueOf()).format('YYYY-MM-DD 00:00:00')).valueOf() - 3600 * 1000; |
|||
this.endTime = this.$moment(this.$moment(new Date().valueOf()).format('YYYY-MM-DD 23:59:59')).valueOf() + 3600 * 1000; |
|||
// if (this.ptProps.projectRole - 0 === 0) { |
|||
this.header = '本院统计'; |
|||
// } else if (this.ptProps.projectRole - 0 === 1) { |
|||
// this.header = '本市统计'; |
|||
// } else if (this.ptProps.projectRole - 0 === 2) { |
|||
// this.header = '本省统计'; |
|||
// } else { |
|||
// this.header = '数据统计'; |
|||
// } |
|||
}, |
|||
// 页面周期函数--监听页面初次渲染完成 |
|||
onReady() {}, |
|||
// 页面周期函数--监听页面显示(not-nvue) |
|||
onShow() {}, |
|||
// 页面周期函数--监听页面隐藏 |
|||
onHide() {}, |
|||
// 页面周期函数--监听页面卸载 |
|||
onUnload() {}, |
|||
// 页面处理函数--监听用户下拉动作 |
|||
// onPullDownRefresh() { uni.stopPullDownRefresh(); }, |
|||
// 页面处理函数--监听用户上拉触底 |
|||
// onReachBottom() {}, |
|||
// 页面处理函数--监听页面滚动(not-nvue) |
|||
// onPageScroll(event) {}, |
|||
// 页面处理函数--用户点击右上角分享 |
|||
// onShareAppMessage(options) {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.bg-white { |
|||
background-color: white; |
|||
margin-bottom: 12px; |
|||
padding: 16px; |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 559 B |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 813 B |
|
After Width: | Height: | Size: 31 KiB |
Loading…
Reference in new issue