@ -1,8 +1,8 @@ |
|||||
VUE_APP_NODE_ENV=development |
VUE_APP_NODE_ENV=development |
||||
VUE_APP_BASE_URL=https://www.tall.wiki |
VUE_APP_BASE_URL=https://test.tall.wiki |
||||
VUE_APP_API_URL=https://www.tall.wiki/gateway |
VUE_APP_API_URL=https://test.tall.wiki/gateway1 |
||||
VUE_APP_MSG_URL=wss://www.tall.wiki/websocket/message/v4.0/ws |
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_QUESTION_PATH=https://test.tall.wiki/carbasics |
||||
VUE_APP_VERSION=v3.1.0 |
VUE_APP_VERSION=v3.1.0 |
||||
VUE_APP_PUBLIC_PATH=/carBasicCalendar/ |
VUE_APP_PUBLIC_PATH=/carBasicCalendar/ |
||||
|
@ -1,8 +1,8 @@ |
|||||
VUE_APP_NODE_ENV=production |
VUE_APP_NODE_ENV=production |
||||
VUE_APP_BASE_URL=https://www.tall.wiki |
VUE_APP_BASE_URL=https://test.tall.wiki |
||||
VUE_APP_API_URL=https://www.tall.wiki/gateway |
VUE_APP_API_URL=https://test.tall.wiki/gateway1 |
||||
VUE_APP_MSG_URL=wss://www.tall.wiki/websocket/message/v4.0/ws |
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_QUESTION_PATH=https://www.tall.wiki/carbasics |
||||
VUE_APP_VERSION=v3.1.0 |
VUE_APP_VERSION=v3.1.0 |
||||
VUE_APP_PUBLIC_PATH=/carBasicCalendar/ |
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) => { |
const install = (Vue, vm) => { |
||||
vm.$u.api = { ...vm.$u.api } || {}; |
vm.$u.api = { ...vm.$u.api } || {}; |
||||
//根据id获取项目信息
|
//根据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查询当前项目是不是 医院体验项目
|
// 根据项目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 }; |
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) => { |
const install = (Vue, vm) => { |
||||
vm.$u.api = { ...vm.$u.api } || {}; |
vm.$u.api = { ...vm.$u.api } || {}; |
||||
vm.$u.api.getGlobal = param => vm.$u.post(`${uni.$t.domain}/task/global`, param); |
vm.$u.api.getGlobal = param => vm.$u.post(`${carbasics}/task/global`, param); |
||||
vm.$u.api.getPermanent = param => vm.$u.post(`${uni.$t.domain}/task/permanent`, 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 }; |
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 |