Skip to content

P
pet-business-web
Commit abbec2fd authored by 陈明豪's avatar 陈明豪
Browse files
Options

数据统计-业务数据统计-前端部分

parent 257bb42b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 2719 additions and 45 deletions
src/router/index.js
View file @ abbec2fd
......@@ -324,6 +324,13 @@ export const constantRoutes = [
component: () => import('@/views/data-statistics/pet-data-statistics/pet-data-statistics.vue'),
name: 'PetDataStatistics',
meta: { title: '宠主数据统计', icon: 'component' }
},
{
path: 'service-data-statistics',
props: true,
component: () => import('@/views/data-statistics/service-statistics/service-statistics.vue'),
name: 'PetDataStatistics',
meta: { title: '业务数据统计', icon: 'component' }
}
]
},
......
src/views/data-statistics/echars-components/china-map-bigger.vue 0 → 100644
View file @ abbec2fd
<template>
<div ref="mapChart" class="chinaecharts" />
</template>
<script>
import china from '@/assets/json/china.json'
export default {
name: 'ChinaMapBigger',
props: ['mapData', 'sum', 'unit', 'title'],
data() {
return {
}
},
watch: {},
mounted() {
this.$echarts.registerMap('china', { geoJSON: china })
this.mapFn()
},
methods: {
mapFn() {
const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.mapChart)
mapChart.setOption({
backgroundColor: '', // 背景颜色
// borderWidth: 4, // 设置外层边框
// borderColor: '#f8911b',
title: {
text: _this.title,
left: 'left',
textStyle: {
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
color: '#333333'
// margin-bottom: 20px,
}
},
// 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
visualMap: {
// 左下角定义 在选中范围中的视觉元素 渐变地区颜色
type: 'piecewise', // 类型为分段型
top: 'bottom',
show: false, // 右下角label显示
// calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
right: 10,
splitNumber: 6,
seriesIndex: [0],
itemWidth: 20, // 每个图元的宽度
itemGap: 2, // 每两个图元之间的间隔距离，单位为px
pieces: [
// 自定义每一段的范围，以及每一段的文字
{ gte: 10000, label: '10000人以上', color: '#BCDBB4' }, // 不指定 max，表示 max 为无限大（Infinity）。
{
gte: 1000,
lte: 9999,
label: '1000-9999人',
color: '#BCDBB4'
},
{
gte: 500,
lte: 999,
label: '500-999人',
color: '#BCDBB4'
},
{
gte: 100,
lte: 499,
label: '100-499人',
color: '#BCDBB4'
},
{
gte: 1,
lte: 99,
label: '1-99人',
color: '#BCDBB4'
},
{ lte: 0, label: '无', color: '#fff' } // 不指定 min，表示 min 为无限大（-Infinity）。
],
textStyle: {
color: '#737373'
}
},
// 提示框，鼠标移入
tooltip: {
show: true, // 鼠标移入是否触发数据
trigger: 'item', // 出发方式
formatter: (item) => {
const unit = _this.unit
const percent = item.data.value / _this.sum * 100
return `<div>
${item.data.name}
<br>
${item.data.value}${unit} (${percent}%)
</div>`
}
},
// 配置地图样式
geo: {
top: '25%',
show: true,
zoom: 1.4,
map: 'china',
silent: true,
aspectScale: 0.75, // 长宽比,默认0.75
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
// areaColor: 'yellow',
borderWidth: 2, // 设置外层边框
borderColor: '#000'
// shadowColor: 'red', //#A0A2A5 外边框阴影色
// shadowBlur: 10, //外边框阴影
// opacity: 1
}
}
},
// 配置地图的数据，并且显示
series: [
{
top: '25%',
// center: ['20%'],
name: '地图',
type: 'map', // 地图种类
map: 'china', // 地图类型。
data: _this.mapData,
itemStyle: {
normal: {
label: {
show: false // 默认是否显示份名称
},
areaStyle: {
color: '#FAFAFA' // 默认的地图板块颜色
},
borderWidth: 1,
borderColor: '#D9D9D9'
}
},
// 点击选择样式
select: {
disabled: false, // 可以被选中
// 字体样式
label: {
color: '#fff',
show: false
},
// 背景样式
itemStyle: {
borderWidth: 1, // 图形描边的宽度。
borderColor: '#707070', // 图形描边的颜色。
areaColor: '#8DCC7F'
}
},
// 当鼠标放上
emphasis: {
label: {
show: false,
color: '#fff'
},
itemStyle: {
borderWidth: 1, // 图形描边的宽度。
borderColor: '#707070', // 图形描边的颜色。
areaColor: '#8DCC7F'
}
},
zoom: 1.4, // 放大比例
label: {
// 图形上的文本标签，可用于说明图形的一些数据信息
show: true
}
}
// {
// type: 'scatter',
// showEffectOn: 'render', // 配置什么时候显示特效
// coordinateSystem: 'geo', // 该系列使用的坐标系
// symbolSize: 10, // 标记的大小
// data: [{ name: '宜昌', value: [111.3, 30.7, 130] }],
// zlevel: 99999
// }
]
})
window.addEventListener('resize', () => {
// 自动渲染echarts
mapChart.resize()
})
}
}
}
</script>
<style scoped>
.chinaecharts {
width: 100%;
height: 673px;
/*background-color: #333;*/
}
</style>
src/views/data-statistics/echars-components/china-map.vue
View file @ abbec2fd
......@@ -6,7 +6,7 @@
import china from '@/assets/json/china.json'
export default {
name: 'ChinaMap',
props: ['mapData', 'sum', 'unit'],
props: ['mapData', 'sum', 'unit', 'title'],
data() {
return {
......@@ -28,7 +28,7 @@ export default {
// borderWidth: 4, // 设置外层边框
// borderColor: '#f8911b',
title: {
text: '医院所在城市分析',
text: _this.title,
left: 'left',
textStyle: {
fontSize: 12,
......
src/views/data-statistics/echars-components/oneLineChart.vue 0 → 100644
View file @ abbec2fd
<template>
<div ref="towLine" class="towLineCharts" />
</template>
<script>
export default {
name: 'OneLineChart',
props: {
// x轴坐标
xData: {
default: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
// y轴数据 1
yData: {
default: {
label: '',
data: [],
line_color: '',
area_color: '',
unit: ''
}
}
},
data() {
return {}
},
watch: {},
mounted() {
this.setECharts()
},
methods: {
setECharts() {
const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.towLine)
mapChart.setOption({
title: {
left: 'left',
text: '诊疗次数统计',
textStyle: {
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
color: '#333333'
// margin-bottom: 20px,
}
},
grid: {
x: 80,
x2: 15,
y2: 50
},
xAxis: {
type: 'category',
boundaryGap: true,
data: _this.xData
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}' + _this.yData.unit
}
// containLabel: true
},
legend: {
x: 'right',
y: 'top',
data: [
_this.yData.label
]
},
// 悬浮框样式
tooltip: {
show: true, // 鼠标移入是否触发数据
trigger: 'axis', // 出发方式
formatter: (axis) => {
const label1 = _this.yData.label
const unit1 = _this.yData.unit
const color1 = _this.yData.line_color
return `<div>
<div>${axis[0].name}</div>
<div style="display: flex">
<div style="background-color: ${color1};width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
<span>${label1}</span>
<span style="margin-left: 5px;color: ${color1}">${axis[0].value || 0}(${unit1})</span>
</div>
</div>`
}
},
series: [
{
name: _this.yData.label,
data: _this.yData.data,
// symbolSize: 5, // 设置折线上圆点大小
// symbol: 'circle', // 设置拐点为实心圆
type: 'line',
smooth: true,
// 折线下区域的颜色
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: _this.yData.area_color // 0% 处的颜色
}, {
offset: 1, color: '#fff' // 100% 处的颜色
}]
)
},
// 折线的样式
itemStyle: {
color: _this.yData.line_color
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#333333',
fontSize: 12,
fontWeight: 400
},
formatter: '{c}' + _this.yData.unit
}
}
],
emphasis: {
disabled: true
}
})
window.addEventListener('resize', function() {
mapChart.resize()
})
}
}
}
</script>
<style scoped>
.towLineCharts {
width: 100%;
height: 422px;
}
</style>
src/views/data-statistics/echars-components/pileUpChart.vue 0 → 100644
View file @ abbec2fd
<template>
<div ref="pileUp" class="pileUpCharts" />
</template>
<script>
export default {
name: 'PileUpChart',
props: ['yData1', 'yData2', 'yData3'],
data() {
return {}
},
watch: {},
mounted() {
this.setEChart()
},
methods: {
setEChart() {
const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.pileUp)
mapChart.setOption({
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
grid: {
x: 80,
x2: 15,
y2: 30,
y: 40
},
legend: {
x: 'right',
y: 'top'
// data: [
// _this.yData.label
// ]
},
tooltip: {
show: true, // 鼠标移入是否触发数据
trigger: 'axis', // 出发方式
axisPointer: {
type: 'shadow'
},
formatter: (axis) => {
console.log('堆叠', axis)
return `<div>
<div>${axis[0].name}</div>
<div style="display: flex">
<div style="background-color: ${axis[0].color};width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
<span>${axis[0].seriesName}</span>
<span style="margin-left: 5px;color: ${axis[0].color}">${axis[0].value}(次)</span>
</div>
<div style="display: flex">
<div style="background-color: ${axis[1].color};width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
<span>${axis[1].seriesName}</span>
<span style="margin-left: 5px;color: ${axis[1].color}">${axis[1].value}(次)</span>
</div>
<div style="display: flex">
<div style="background-color: ${axis[2].color};width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
<span>${axis[2].seriesName}</span>
<span style="margin-left: 5px;color: ${axis[2].color}">${axis[2].value}(次)</span>
</div>
</div>`
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}' + '次'
}
},
series: [
{
data: _this.yData1,
type: 'bar',
stack: 'x',
barWidth: '12px',
name: '辅助检查',
color: '#3870CD'
},
{
data: _this.yData2,
type: 'bar',
stack: 'x',
barWidth: '12px',
name: '辅助治疗',
color: '#3AA2D0'
},
{
data: _this.yData3,
type: 'bar',
stack: 'x',
barWidth: '12px',
name: '住院治疗',
itemStyle: {
normal: {
barBorderRadius: [20, 20, 0, 0]
}
},
color: '#5FB54B'
}
]
})
}
}
}
</script>
<style scoped>
.pileUpCharts {
width: 100%;
height: 298px;
}
</style>
src/views/data-statistics/echars-components/radar-chart-one-line-bigger.vue 0 → 100644
View file @ abbec2fd
<template>
<div ref="radarMap" class="radarChart">
雷达
</div>
</template>
<script>
export default {
name: 'RadarChartOneLineBigger',
props: ['title', 'yData', 'name', 'indicator', 'lineStartColor', 'lineEndColor', 'areaStartColor', 'areaEndColor'],
data() {
return {}
},
watch: {},
mounted() {
this.setCharts()
},
methods: {
setCharts() {
const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.radarMap)
mapChart.setOption({
title: {
left: 'left',
text: _this.title,
textStyle: {
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
color: '#333333'
}
},
tooltip: {
show: true
},
legend: {
data: [_this.name],
left: 'right',
textStyle: { // 图例的公用文本样式。
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
color: '#666'
}
},
radar: {
// shape: 'circle',
center: ['50%', '65%'],
radius: 180,
// indicator: [
// { name: '一星诊疗机构', max: 50 },
// { name: '二星诊疗机构', max: 50 },
// { name: '三星诊疗机构', max: 50 },
// { name: '四星诊疗机构', max: 50 },
// { name: '五星诊疗机构', max: 50 }
// ],
indicator: _this.indicator,
axisName: { // (圆外的标签)雷达图每个指示器名称的配置项。
color: '#666666',
fontSize: 12,
fontWeight: 400,
fontFamily: 'Microsoft YaHei'
}
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: _this.yData,
name: _this.name,
symbol: 'emptyCircle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', emptyCircle
symbolSize: 6,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient( // 设置渐变色
0, 0, 0, 1,
[
{ offset: 0, color: _this.lineStartColor },
{ offset: 1, color: _this.lineEndColor }
]
)
},
// 雷达图辐射区域的样式
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: _this.areaStartColor },
{ offset: 1, color: _this.areaEndColor }
]
)
}
}
]
}
]
})
}
}
}
</script>
<style scoped>
.radarChart {
width: 100%;
height: 584px;
}
</style>
src/views/data-statistics/echars-components/radar-chart-one-linel.vue 0 → 100644
View file @ abbec2fd
<template>
<div ref="radarMap" class="radarChart">
雷达
</div>
</template>
<script>
export default {
name: 'RadarChartOneLine',
props: ['title', 'yData', 'name', 'indicator', 'lineStartColor', 'lineEndColor', 'areaStartColor', 'areaEndColor'],
data() {
return {}
},
watch: {},
mounted() {
this.setCharts()
},
methods: {
setCharts() {
const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.radarMap)
mapChart.setOption({
title: {
left: 'left',
text: _this.title,
textStyle: {
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
color: '#333333'
}
},
tooltip: {
show: true
},
legend: {
data: [_this.name],
left: 'right',
textStyle: { // 图例的公用文本样式。
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
color: '#666'
}
},
radar: {
// shape: 'circle',
center: ['50%', '55%'],
radius: 85,
// indicator: [
// { name: '一星诊疗机构', max: 50 },
// { name: '二星诊疗机构', max: 50 },
// { name: '三星诊疗机构', max: 50 },
// { name: '四星诊疗机构', max: 50 },
// { name: '五星诊疗机构', max: 50 }
// ],
indicator: _this.indicator,
axisName: { // (圆外的标签)雷达图每个指示器名称的配置项。
color: '#666666',
fontSize: 12,
fontWeight: 400,
fontFamily: 'Microsoft YaHei'
}
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: _this.yData,
name: _this.name,
symbol: 'emptyCircle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', emptyCircle
symbolSize: 6,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient( // 设置渐变色
0, 0, 0, 1,
[
{ offset: 0, color: _this.lineStartColor },
{ offset: 1, color: _this.lineEndColor }
]
)
},
// 雷达图辐射区域的样式
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: _this.areaStartColor },
{ offset: 1, color: _this.areaEndColor }
]
)
}
}
]
}
]
})
}
}
}
</script>
<style scoped>
.radarChart {
width: 100%;
height: 468px;
}
</style>
src/views/data-statistics/echars-components/twoLineChartYNoUnit.vue
View file @ abbec2fd
......@@ -4,7 +4,7 @@
<script>
export default {
name: 'TwoLineChart',
name: 'TwoLineChartNoUnit',
props: {
// 标题
title: {
......@@ -68,16 +68,20 @@ export default {
// margin-bottom: 20px,
}
},
grid: {
x: 50,
x2: 15
},
xAxis: {
type: 'category',
boundaryGap: true,
data: _this.xData
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}' + _this.yData1.unit
}
type: 'value'
// axisLabel: {
// formatter: '{value}' + _this.yData1.unit
// }
},
legend: {
x: 'right',
......@@ -101,14 +105,14 @@ export default {
return `<div>
<div>${axis[0].name}</div>
<div style="display: flex">
<div style="background-color: ${color1};width: 10px;height: 10px;margin-top: 5px;margin-right:5px;border-radius: 10px"></div>
<div style="background-color: ${color1};width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
<span>${label1}(${unit1})</span>
<span style="margin-left: 5px">${axis[0].value}</span>
<span style="margin-left: 5px;color: ${color1}">${axis[0].value}</span>
</div>
<div style="display: flex">
<div style="background-color: ${color2};width: 10px;height: 10px;margin-top: 5px;margin-right:5px;border-radius: 10px"></div>
<div style="background-color: ${color2};width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
<span>${label2}(${unit2})</span>
<span style="margin-left: 5px">${axis[1].value}</span>
<span style="margin-left: 5px;color: ${color2}">${axis[1].value}</span>
</div>
</div>`
}
......@@ -121,7 +125,6 @@ export default {
// symbol: 'circle', // 设置拐点为实心圆
type: 'line',
smooth: true,
stack: 'x', // y轴是否从零开始
// 折线下区域的颜色
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
......@@ -141,7 +144,6 @@ export default {
data: _this.yData2.data,
type: 'line',
smooth: true,
stack: 'x',
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: _this.yData2.area_color // 0% 处的颜色
......
src/views/data-statistics/hospital-data-statistics/hospital-data-statistics.vue
View file @ abbec2fd
......@@ -166,7 +166,7 @@
<el-row :gutter="24" class="row2">
<el-col :span="9">
<div class="cardDiv" style="padding-bottom: 0">
<china-map :map-data="mapData" unit="家" :sum="1000" />
<china-map :map-data="mapData" unit="家" :sum="1000" title="医院所在城市分析" />
</div>
</el-col>
<el-col :span="6">
......
src/views/data-statistics/other-components/percentTool.vue
View file @ abbec2fd
<template>
<div>
<div v-if="percent > 0" :class="className">
<div class="noRotateProgress">
<el-progress
v-if="percent > 0"
type="circle"
color="red"
width="90"
:percentage="percentReal"
:stroke-width="strokeWidth"
stroke-linecap="square"
:format="formatPercent"
/>
<progress-color />
</div>
</div>
<div v-else :class="className+'_invert'">
<div class="rotateYProgress">
<el-progress
v-else
style="transform: rotateY(180deg);"
type="circle"
color="#ebeef5"
:percentage="100 - percentReal"
width="90"
:percentage="percentReal"
:stroke-width="strokeWidth"
stroke-linecap="square"
:format="formatPercent"
define-back-color="red"
/>
<progress-color />
</div>
</div>
</div>
</template>
<script>
import ProgressColor from '@/views/data-statistics/other-components/progress-color.vue'
export default {
name: 'PercentTool',
props: {
percent: {
type: Number,
default: 0
}
},
components: { ProgressColor },
props: ['percent', 'className'],
data() {
return {
percentReal: 0,
strokeWidth: 20
strokeWidth: 9
// className: 'green_percent'
}
},
watch: {
......@@ -67,6 +72,115 @@ export default {
}
</script>
<style scoped>
<style scoped lang="scss">
.purple_percent {
::v-deep .el-progress-circle {
svg > path:nth-child(2) {
stroke: url(#youxiao); // 该url() 中填入的是, 对应组件中的 id 名
}
}
::v-deep .el-progress__text {
font-size: 22px !important;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #4F69EB, #7F37D1);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
padding-top: 3px;
padding-left: 8px;
}
}
.green_percent {
::v-deep .el-progress-circle {
svg > path:nth-child(2) {
stroke: url(#changqi); // 该url() 中填入的是, 对应组件中的 id 名
}
}
::v-deep .el-progress__text {
font-size: 22px !important;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #3490CE, #5FB54B);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
padding-top: 3px;
padding-left: 8px;
}
}
.orange_percent {
::v-deep .el-progress-circle {
svg > path:nth-child(2) {
stroke: url(#yuchuzhi); // 该url() 中填入的是, 对应组件中的 id 名
}
}
::v-deep .el-progress__text {
font-size: 22px !important;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #DE6859, #DB8747);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
padding-top: 3px;
padding-left: 8px;
}
}
.purple_percent_invert {
::v-deep .el-progress-circle {
svg > path:nth-child(2) {
stroke: url(#youxiao); // 该url() 中填入的是, 对应组件中的 id 名
}
}
::v-deep .el-progress__text {
font-size: 22px !important;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #4F69EB, #7F37D1);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
padding-top: 3px;
padding-left: 8px;
}
}
.green_percent_invert {
::v-deep .el-progress-circle {
svg > path:nth-child(2) {
stroke: url(#changqi); // 该url() 中填入的是, 对应组件中的 id 名
}
}
::v-deep .el-progress__text {
font-size: 22px !important;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #3490CE, #5FB54B);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
padding-top: 3px;
padding-left: 8px;
}
}
.orange_percent_invert {
::v-deep .el-progress-circle {
svg > path:nth-child(2) {
stroke: url(#yuchuzhi); // 该url() 中填入的是, 对应组件中的 id 名
}
}
::v-deep .el-progress__text {
font-size: 22px !important;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #DE6859, #DB8747);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
padding-top: 3px;
padding-left: 8px;
}
}
.rotateYProgress {
::v-deep .el-progress{
padding-top: 20px;
}
::v-deep .el-progress__text {
transform: rotateY(-180deg);
padding-top: 0;
}
}
.noRotateProgress {
padding-top: 20px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment