Skip to content

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

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

parent 257bb42b
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 = [ ...@@ -324,6 +324,13 @@ export const constantRoutes = [
component: () => import('@/views/data-statistics/pet-data-statistics/pet-data-statistics.vue'), component: () => import('@/views/data-statistics/pet-data-statistics/pet-data-statistics.vue'),
name: 'PetDataStatistics', name: 'PetDataStatistics',
meta: { title: '宠主数据统计', icon: 'component' } 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 @@ ...@@ -6,7 +6,7 @@
import china from '@/assets/json/china.json' import china from '@/assets/json/china.json'
export default { export default {
name: 'ChinaMap', name: 'ChinaMap',
props: ['mapData', 'sum', 'unit'], props: ['mapData', 'sum', 'unit', 'title'],
data() { data() {
return { return {
...@@ -28,7 +28,7 @@ export default { ...@@ -28,7 +28,7 @@ export default {
// borderWidth: 4, // 设置外层边框 // borderWidth: 4, // 设置外层边框
// borderColor: '#f8911b', // borderColor: '#f8911b',
title: { title: {
text: '医院所在城市分析', text: _this.title,
left: 'left', left: 'left',
textStyle: { textStyle: {
fontSize: 12, 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 @@ ...@@ -4,7 +4,7 @@
<script> <script>
export default { export default {
name: 'TwoLineChart', name: 'TwoLineChartNoUnit',
props: { props: {
// 标题 // 标题
title: { title: {
...@@ -68,16 +68,20 @@ export default { ...@@ -68,16 +68,20 @@ export default {
// margin-bottom: 20px, // margin-bottom: 20px,
} }
}, },
grid: {
x: 50,
x2: 15
},
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: true, boundaryGap: true,
data: _this.xData data: _this.xData
}, },
yAxis: { yAxis: {
type: 'value', type: 'value'
axisLabel: { // axisLabel: {
formatter: '{value}' + _this.yData1.unit // formatter: '{value}' + _this.yData1.unit
} // }
}, },
legend: { legend: {
x: 'right', x: 'right',
...@@ -101,14 +105,14 @@ export default { ...@@ -101,14 +105,14 @@ export default {
return `<div> return `<div>
<div>${axis[0].name}</div> <div>${axis[0].name}</div>
<div style="display: flex"> <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>${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>
<div style="display: flex"> <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>${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>
</div>` </div>`
} }
...@@ -121,7 +125,6 @@ export default { ...@@ -121,7 +125,6 @@ export default {
// symbol: 'circle', // 设置拐点为实心圆 // symbol: 'circle', // 设置拐点为实心圆
type: 'line', type: 'line',
smooth: true, smooth: true,
stack: 'x', // y轴是否从零开始
// 折线下区域的颜色 // 折线下区域的颜色
areaStyle: { areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
...@@ -141,7 +144,6 @@ export default { ...@@ -141,7 +144,6 @@ export default {
data: _this.yData2.data, data: _this.yData2.data,
type: 'line', type: 'line',
smooth: true, smooth: true,
stack: 'x',
areaStyle: { areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: _this.yData2.area_color // 0% 处的颜色 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 @@ ...@@ -166,7 +166,7 @@
<el-row :gutter="24" class="row2"> <el-row :gutter="24" class="row2">
<el-col :span="9"> <el-col :span="9">
<div class="cardDiv" style="padding-bottom: 0"> <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> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
......
src/views/data-statistics/other-components/percentTool.vue
View file @ abbec2fd
<template> <template>
<div> <div>
<div v-if="percent > 0" :class="className">
<div class="noRotateProgress">
<el-progress <el-progress
v-if="percent > 0"
type="circle" type="circle"
color="red" width="90"
:percentage="percentReal" :percentage="percentReal"
:stroke-width="strokeWidth" :stroke-width="strokeWidth"
stroke-linecap="square"
:format="formatPercent" :format="formatPercent"
/> />
<progress-color />
</div>
</div>
<div v-else :class="className+'_invert'">
<div class="rotateYProgress">
<el-progress <el-progress
v-else style="transform: rotateY(180deg);"
type="circle" type="circle"
color="#ebeef5" width="90"
:percentage="100 - percentReal" :percentage="percentReal"
:stroke-width="strokeWidth" :stroke-width="strokeWidth"
stroke-linecap="square"
:format="formatPercent" :format="formatPercent"
define-back-color="red"
/> />
<progress-color />
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import ProgressColor from '@/views/data-statistics/other-components/progress-color.vue'
export default { export default {
name: 'PercentTool', name: 'PercentTool',
props: { components: { ProgressColor },
percent: { props: ['percent', 'className'],
type: Number,
default: 0
}
},
data() { data() {
return { return {
percentReal: 0, percentReal: 0,
strokeWidth: 20 strokeWidth: 9
// className: 'green_percent'
} }
}, },
watch: { watch: {
...@@ -67,6 +72,115 @@ export default { ...@@ -67,6 +72,115 @@ export default {
} }
</script> </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> </style>
src/views/data-statistics/service-statistics/service-statistics.vue
View file @ abbec2fd
<template> <template>
<div>业务统计</div> <div>
<div v-if="isPlatformRole" class="fatherDiv">
<el-row :gutter="24">
<el-col :span="12">
<el-row :gutter="24">
<el-col :span="24">
<div style="width: 100%;background-color: #FFFFFF" class="cardDiv">
<div class="cardTitle">
业务信息统计
</div>
<el-row :gutter="14">
<el-col :span="6">
<div class="service_info_statistics service_info_statistics_device">
<div style="display: flex;">
<div class="numberColor">76</div>
<div class="fontColor">台</div>
</div>
<div class="bottomText">
<img src="../../../assets/data_statistics/yewu_icon_shebei.png" height="24" width="24">
<div class="bottom_font">
平台服务设备
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="service_info_statistics service_info_statistics_project">
<div style="display: flex;">
<div class="numberColor">827</div>
<div class="fontColor">项</div>
</div>
<div class="bottomText">
<img src="../../../assets/data_statistics/yewu_icon_xiangmu.png" height="24" width="24">
<div class="bottom_font">
平台服务项目
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="service_info_statistics service_info_statistics_order">
<div style="display: flex;">
<div class="numberColor">3,421</div>
<div class="fontColor">次</div>
</div>
<div class="bottomText">
<img src="../../../assets/data_statistics/yewu_icon_cishu.png" height="24" width="24">
<div class="bottom_font">
服务项目预约总次数
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="service_info_statistics service_info_statistics_income">
<div style="display: flex;">
<div class="numberColor">348,936,33</div>
<div class="fontColor">元</div>
</div>
<div class="bottomText">
<img src="../../../assets/data_statistics/yewu_icon_shouyi.png" height="24" width="24">
<div class="bottom_font">
服务项目总收益
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<el-row :gutter="24" class="row2">
<el-col :span="24">
<div class="cardDiv" style="padding-bottom: 0">
<two-line-chart-no-unit :y-data1="yData1" :y-data2="yData2" title="本年客户统计" />
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="12">
<div class="cardDiv" style="padding-bottom: 0">
<china-map-bigger :map-data="mapData" unit="台" :sum="1000" title="平台服务设备地区分布" />
</div>
</el-col>
</el-row>
<el-row :gutter="24" class="row2">
<el-col :span="6">
<div class="cardDiv">
<div class="cardTitle" style="margin-bottom: 29px">
平台服务项目预约次数排行
</div>
<div v-for="(item, key) in orderRank" :key="key" class="orderRankDiv">
<div class="rank_name_font">
<overlong-tool :text="item.name" :max="30" />
</div>
<el-row>
<el-col :span="20">
<el-progress
:percentage="item.percent"
:stroke-width="9"
:show-text="false"
class="orderRankProgress"
/>
</el-col>
<el-col :span="4">
<div class="orderRankFont">
{{ item.total }}次
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="cardDiv">
<div class="cardTitle" style="margin-bottom: 29px">
平台服务设备服务次数排行
</div>
<div v-for="(item, key) in deviceRank" :key="key" class="deviceRankDiv">
<div class="rank_name_font">
<overlong-tool :text="item.name" :max="30" />
</div>
<el-row>
<el-col :span="20">
<el-progress
:percentage="item.percent"
:stroke-width="9"
:show-text="false"
class="deviceRankProgress"
/>
</el-col>
<el-col :span="4">
<div class="deviceRankFont">
{{ item.total }}次
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="cardDiv" style="padding-bottom: 0">
<radar-chart-one-line
title="现有服务项目单价分布"
name="服务项目单价"
:y-data="projectUnitPriceDistributionRadarData.yData"
:indicator="projectUnitPriceDistributionRadarData.indicator"
:line-start-color="projectUnitPriceDistributionRadarData.lineStartColor"
:line-end-color="projectUnitPriceDistributionRadarData.lineEndColor"
:area-start-color="projectUnitPriceDistributionRadarData.areaStartColor"
:area-end-color="projectUnitPriceDistributionRadarData.areaEndColor"
/>
</div>
</el-col>
<el-col :span="6">
<div class="cardDiv" style="padding-bottom: 0">
<radar-chart-one-line
title="服务项目收益分布"
name="预约次数"
:y-data="projectIncomeDistributionRadarData.yData"
:indicator="projectIncomeDistributionRadarData.indicator"
:line-start-color="projectIncomeDistributionRadarData.lineStartColor"
:line-end-color="projectIncomeDistributionRadarData.lineEndColor"
:area-start-color="projectIncomeDistributionRadarData.areaStartColor"
:area-end-color="projectIncomeDistributionRadarData.areaEndColor"
/>
</div>
</el-col>
</el-row>
<el-row class="row2">
<el-col :span="24">
<div class="cardDiv">
<div class="cardTitle">
医院授权到期信息
</div>
<el-divider class="dividerLine" />
<el-table :data="tableData" style="width: 100%">
<el-table-column label="序号" min-width="20px" show-overflow-tooltip type="index" />
<el-table-column sortable label="检查项目" show-overflow-tooltip prop="projectName" />
<el-table-column sortable label="设备名称" show-overflow-tooltip prop="deviceName" />
<el-table-column sortable label="支付金额" show-overflow-tooltip prop="pay" />
<el-table-column sortable label="操作医院" show-overflow-tooltip prop="operateHospital" />
<el-table-column sortable label="提交时间" show-overflow-tooltip prop="subTime" />
<el-table-column sortable label="宠物昵称" show-overflow-tooltip prop="petName" />
<el-table-column sortable label="宠物保险" show-overflow-tooltip prop="petWarranty" />
<el-table-column sortable label="宠主姓名" show-overflow-tooltip prop="petOwnerName" />
<el-table-column sortable label="宠主手机号" show-overflow-tooltip prop="petOwnerPhone" />
<el-table-column label="状态" show-overflow-tooltip prop="status" />
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
v-hasPermi="['business:banner:query']"
icon="el-icon-document"
plain
size="mini"
style="width: 50px; border-radius: 4px 4px 4px 4px;border: 1px solid #5fb54b;"
type="success"
@click="handleDetail(scope.row)"
>详情
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getBannerList"
/>
</div>
</el-col>
</el-row>
</div>
<div v-else class="fatherDiv">
<el-row :gutter="24">
<!--业务信息统计-->
<el-col :span="12">
<div style="width: 100%;background-color: #FFFFFF" class="cardDiv">
<div class="cardTitle">
客户信息统计
</div>
<el-row :gutter="14">
<el-col :span="6">
<div class="service_info_statistics service_info_statistics_hasServicePerson">
<div style="display: flex;">
<div class="numberColor">319,393</div>
<div class="fontColor">人</div>
</div>
<div class="bottomText">
<img src="../../../assets/data_statistics/caiwu_icon_chongzhu.png" height="24" width="24">
<div class="bottom_font">
已服务宠主
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="service_info_statistics service_info_statistics_hasServicePet">
<div style="display: flex;">
<div class="numberColor">9,393</div>
<div class="fontColor">只</div>
</div>
<div class="bottomText">
<img src="../../../assets/data_statistics/caiwu_icon_chongwu.png" height="24" width="24">
<div class="bottom_font">
已服务宠物
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="service_info_statistics service_info_statistics_heal">
<div style="display: flex;">
<div class="numberColor">2,123</div>
<div class="fontColor">次</div>
</div>
<div class="bottomText">
<img src="../../../assets/data_statistics/caiwu_icon_zhenliao.png" height="24" width="24">
<div class="bottom_font">
注册宠物数量
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="service_info_statistics service_info_statistics_income">
<div style="display: flex;">
<div class="numberColor">348,936,33</div>
<div class="fontColor">元</div>
</div>
<div class="bottomText">
<img src="../../../assets/data_statistics/yewu_icon_shouyi.png" height="24" width="24">
<div class="bottom_font">
业务收益总额
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
<!--各项占比数据-->
<el-col :span="4">
<div class="percentDiv cardDiv">
<div class="cardTitle" style="margin-bottom: 0">
6月诊治次数较上期环比
</div>
<percent-tool :percent="90" class-name="purple_percent" />
</div>
</el-col>
<el-col :span="4">
<div class="percentDiv cardDiv">
<div class="cardTitle" style="margin-bottom: 0">
6月诊治次数较去年同比
</div>
<percent-tool :percent="58" class-name="green_percent" />
</div>
</el-col>
<el-col :span="4">
<div class="percentDiv cardDiv">
<div class="cardTitle" style="margin-bottom: 0">
6月诊治次数较年度平均值
</div>
<percent-tool :percent="-37" class-name="orange_percent" />
</div>
</el-col>
</el-row>
<el-row :gutter="24" class="row2">
<el-col :span="16">
<div class="cardDiv">
<one-line-chart
:y-data="oneLineChartData"
/>
<pile-up-chart
:y-data1="[110, 212, 218, 143, 149, 110]"
:y-data2="[125, 143, 131, 115, 110, 222]"
:y-data3="[101, 222, 282, 43, 49, 234]"
/>
</div>
</el-col>
<el-col :span="8">
<div class="cardDiv">
<div class="cardTitle">
业务数据统计
</div>
<div class="serviceCard">
<div class="title">
本月业务数据总览
</div>
<div class="underLine" />
<el-row :gutter="20" class="serviceRow">
<el-col :span="12">
<div class="contentDiv">
<el-row :gutter="10">
<el-col :span="12">
<div class="valueContent">
<div class="numberContent">
112
</div>
<div class="unitContent">
次
</div>
</div>
<div class="titleContent">
门诊诊察
</div>
</el-col>
<el-col :span="12">
<div class="imgDiv">
<img src="../../../assets/data_statistics/caiwu_icon_zhencha.png" height="44" width="44">
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="12">
<div class="contentDiv">
<el-row :gutter="10">
<el-col :span="12">
<div class="valueContent">
<div class="numberContent">
49
</div>
<div class="unitContent">
次
</div>
</div>
<div class="titleContent">
辅助检查
</div>
</el-col>
<el-col :span="12">
<div class="imgDiv">
<img src="../../../assets/data_statistics/caiwu_icon_jiancha.png" height="44" width="44">
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<el-row :gutter="20" class="serviceRow">
<el-col :span="12">
<div class="contentDiv">
<el-row :gutter="10">
<el-col :span="12">
<div class="valueContent">
<div class="numberContent">
7
</div>
<div class="unitContent">
次
</div>
</div>
<div class="titleContent">
辅助治疗
</div>
</el-col>
<el-col :span="12">
<div class="imgDiv">
<img src="../../../assets/data_statistics/caiwu_icon_fuzhu.png" height="44" width="44">
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="12">
<div class="contentDiv">
<el-row :gutter="10">
<el-col :span="12">
<div class="valueContent">
<div class="numberContent">
16
</div>
<div class="unitContent">
只
</div>
</div>
<div class="titleContent">
住院治疗
</div>
</el-col>
<el-col :span="12">
<div class="imgDiv">
<img src="../../../assets/data_statistics/caiwu_icon_zhuyuan.png" height="44" width="44">
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
<div class="serviceCard">
<div class="title">
本年业务数据总览
</div>
<div class="underLine" />
<el-row :gutter="20" class="serviceRow">
<el-col :span="12">
<div class="contentDiv">
<el-row :gutter="10">
<el-col :span="12">
<div class="valueContent">
<div class="numberContent">
1,212
</div>
<div class="unitContent">
次
</div>
</div>
<div class="titleContent">
门诊诊察
</div>
</el-col>
<el-col :span="12">
<div class="upPercentDiv">
+15.9% <img src="../../../assets/data_statistics/caiwu_icon_sheng.png" height="12" width="8">
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="12">
<div class="contentDiv">
<el-row :gutter="10">
<el-col :span="12">
<div class="valueContent">
<div class="numberContent">
4,119
</div>
<div class="unitContent">
次
</div>
</div>
<div class="titleContent">
辅助检查
</div>
</el-col>
<el-col :span="12">
<div class="upPercentDiv">
+15.9% <img src="../../../assets/data_statistics/caiwu_icon_sheng.png" height="12" width="8">
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<el-row :gutter="20" class="serviceRow">
<el-col :span="12">
<div class="contentDiv">
<el-row :gutter="10">
<el-col :span="12">
<div class="valueContent">
<div class="numberContent">
1,017
</div>
<div class="unitContent">
次
</div>
</div>
<div class="titleContent">
辅助治疗
</div>
</el-col>
<el-col :span="12">
<!-- <div class="downPercentDiv">-->
<!-- +15.9% <img src="../../../assets/data_statistics/caiwu_icon_sheng.png" height="12" width="8">-->
<!-- </div>-->
<div class="downPercentDiv">
-15.9% <img src="../../../assets/data_statistics/caiwu_icon_zjiang.png" height="12" width="8">
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="12">
<div class="contentDiv">
<el-row :gutter="10">
<el-col :span="12">
<div class="valueContent">
<div class="numberContent">
1,116
</div>
<div class="unitContent">
只
</div>
</div>
<div class="titleContent">
住院治疗
</div>
</el-col>
<el-col :span="12">
<div class="downPercentDiv">
-15.9% <img src="../../../assets/data_statistics/caiwu_icon_zjiang.png" height="12" width="8">
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="24" class="row2">
<el-col :span="8">
<div class="cardDiv">
<div class="cardTitle">
医院授权到期信息
</div>
<el-divider class="dividerLine" />
<el-table :data="checkProjectRank" style="width: 100%">
<el-table-column label="排名" min-width="60px" align="center" show-overflow-tooltip type="index">
<template slot-scope="scope">
<div v-if="scope.$index + 1 <= 3">
<img v-if="scope.$index + 1 === 1" src="../../../assets/data_statistics/caiwu_icon_paiming1.png" height="24" width="24">
<img v-if="scope.$index + 1 === 2" src="../../../assets/data_statistics/caiwu_icon_paiming2.png" height="24" width="24">
<img v-if="scope.$index + 1 === 3" src="../../../assets/data_statistics/caiwu_icon_paiming3.png" height="24" width="24">
</div>
<div v-else>
{{ scope.$index + 1 === 10 ? '': '0' }}{{ scope.$index + 1 }}
</div>
</template>
</el-table-column>
<el-table-column label="检查项目" min-width="120px" show-overflow-tooltip prop="name" />
<el-table-column label="服务次数" show-overflow-tooltip prop="count" />
<el-table-column label="总服务金额(元)" show-overflow-tooltip prop="sum" />
</el-table>
</div>
</el-col>
<el-col :span="8">
<div class="cardDiv">
<div class="cardTitle">
治疗项目服务次数统计
</div>
<el-divider class="dividerLine" />
<el-table :data="healProjectRank" style="width: 100%">
<el-table-column label="排名" min-width="60px" align="center" show-overflow-tooltip type="index">
<template slot-scope="scope">
<div v-if="scope.$index + 1 <= 3">
<img v-if="scope.$index + 1 === 1" src="../../../assets/data_statistics/caiwu_icon_paiming1.png" height="24" width="24">
<img v-if="scope.$index + 1 === 2" src="../../../assets/data_statistics/caiwu_icon_paiming2.png" height="24" width="24">
<img v-if="scope.$index + 1 === 3" src="../../../assets/data_statistics/caiwu_icon_paiming3.png" height="24" width="24">
</div>
<div v-else>
{{ scope.$index + 1 === 10 ? '': '0' }}{{ scope.$index + 1 }}
</div>
</template>
</el-table-column>
<el-table-column label="治疗项目" min-width="120px" show-overflow-tooltip prop="name" />
<el-table-column label="服务次数" show-overflow-tooltip prop="count" />
<el-table-column label="总服务金额(元)" show-overflow-tooltip prop="sum" />
</el-table>
</div>
</el-col>
<el-col :span="8">
<div class="cardDiv">
<radar-chart-one-line-bigger
title="就诊宠物品种分析"
name="就诊数量"
:y-data="[33, 29, 33]"
:indicator="[
{ name: '猫', max: 50},
{ name: '狗', max: 50},
{ name: '异宠', max: 50}
]"
line-start-color="#3490CE"
line-end-color="#5FB54B"
area-start-color="rgba(52,144,206,0.3)"
area-end-color="rgba(95,181,75,0.3)"
/>
</div>
</el-col>
</el-row>
<el-row :gutter="24" class="row2">
<el-col :span="24">
<div class="cardDiv">
<div class="cardTitle">
病例记录
</div>
<el-divider class="dividerLine" />
<el-table :data="recordTableData" style="width: 100%">
<el-table-column label="序号" min-width="20px" show-overflow-tooltip type="index" />
<el-table-column sortable label="病历号" show-overflow-tooltip prop="recordId" />
<el-table-column sortable label="主治兽医" show-overflow-tooltip prop="attendingPhysician" />
<el-table-column sortable label="所属科室" show-overflow-tooltip prop="dept" />
<el-table-column sortable label="宠主姓名" show-overflow-tooltip prop="petOwnerName" />
<el-table-column sortable label="宠主手机号" show-overflow-tooltip prop="petOwnerPhone" />
<el-table-column sortable label="宠物昵称" show-overflow-tooltip prop="petName" />
<el-table-column sortable label="宠物保险" show-overflow-tooltip prop="petWarranty" />
<el-table-column sortable label="创建日期" show-overflow-tooltip prop="createTime" />
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
v-hasPermi="['business:banner:query']"
icon="el-icon-document"
plain
size="mini"
style="width: 50px; border-radius: 4px 4px 4px 4px;border: 1px solid #5fb54b;"
type="success"
@click="handleDetail(scope.row)"
>详情
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getBannerList"
/>
</div>
</el-col>
</el-row>
</div>
</div>
</template> </template>
<script> <script>
import ChinaMapBigger from '@/views/data-statistics/echars-components/china-map-bigger.vue'
import TwoLineChartNoUnit from '@/views/data-statistics/echars-components/twoLineChartYNoUnit.vue'
import OverlongTool from '@/views/data-statistics/other-components/overlong-tool.vue'
import RadarChartOneLine from '@/views/data-statistics/echars-components/radar-chart-one-linel.vue'
import PercentTool from '@/views/data-statistics/other-components/percentTool.vue'
import OneLineChart from '@/views/data-statistics/echars-components/oneLineChart.vue'
import PileUpChart from '@/views/data-statistics/echars-components/pileUpChart.vue'
import RadarChartOneLineBigger from '@/views/data-statistics/echars-components/radar-chart-one-line-bigger.vue'
export default { export default {
name: 'ServiceStatistics' name: 'ServiceStatistics',
components: { RadarChartOneLineBigger, PileUpChart, OneLineChart, PercentTool, RadarChartOneLine, OverlongTool, TwoLineChartNoUnit, ChinaMapBigger },
data() {
return {
isPlatformRole: true,
mapData: [
{
name: '北京',
value: 200
},
{
name: '天津',
value: 0
},
{
name: '上海',
value: 200
},
{
name: '重庆',
value: 0
},
{
name: '河北',
value: 0
},
{
name: '河南',
value: 0
},
{
name: '云南',
value: 0
},
{
name: '辽宁',
value: 0
},
{
name: '黑龙江',
value: 0
},
{
name: '湖南',
value: 40
},
{
name: '安徽',
value: 10
},
{
name: '山东',
value: 60
},
{
name: '新疆',
value: 0
},
{
name: '江苏',
value: 0
},
{
name: '浙江',
value: 0
},
{
name: '江西',
value: 90
},
{
name: '湖北',
value: 70
},
{
name: '广西',
value: 0
},
{
name: '甘肃',
value: 0
},
{
name: '山西',
value: 0
},
{
name: '内蒙古',
value: 10
},
{
name: '陕西',
value: 0
},
{
name: '吉林',
value: 0
},
{
name: '福建',
value: 60
},
{
name: '贵州',
value: 0
},
{
name: '广东',
value: 800
},
{
name: '青海',
value: 1
},
{
name: '西藏',
value: 1
},
{
name: '四川',
value: 0
},
{
name: '宁夏',
value: 0
},
{
name: '海南',
value: 0
},
{
name: '台湾',
value: 0
},
{
name: '香港',
value: 0
},
{
name: '澳门',
value: 0
},
{
name: '南海诸岛',
value: 0
}
],
yData1: {
label: '总收益',
data: [332, 313, 123, 332, 111, 227, 432, 923, 81, 92, 111, 222],
line_color: '#3490CE',
area_color: 'rgba(52,144,206,0.3)',
unit: '千元'
},
yData2: {
label: '预约次数',
data: [112, 322, 222, 111, 213, 111, 222, 123, 225, 112, 222, 111],
line_color: '#5FB54B',
area_color: 'rgba(95,181,75,0.3)',
unit: '次'
},
orderRank: [
{
name: '微信创伤修复',
percent: 100,
total: 214
},
{
name: '绝育',
percent: 90,
total: 114
},
{
name: '影像检查',
percent: 50,
total: 84
},
{
name: '胃镜检查',
percent: 20,
total: 24
}
],
deviceRank: [
{
name: 'PRS 300C VET运动版动物DR',
percent: 100,
total: 214
},
{
name: 'PRS动物DR',
percent: 90,
total: 114
},
{
name: 'RTS 3060 影像检查',
percent: 50,
total: 84
},
{
name: 'INTEL I9 YUN 检查',
percent: 20,
total: 24
}
],
projectUnitPriceDistributionRadarData: {
indicator: [
{ name: '0~100元', max: 50 },
{ name: '100~300元', max: 50 },
{ name: '300~500元', max: 50 },
{ name: '500~1000元', max: 50 },
{ name: '1000元以上', max: 50 }
],
yData: [33, 25, 50, 38, 40],
lineStartColor: '#7245D9',
lineEndColor: '#5A5FE6',
areaStartColor: 'rgba(114, 69, 217, 0.3)',
areaEndColor: 'rgba(90, 95, 230, 0.3)'
},
projectIncomeDistributionRadarData: {
indicator: [
{ name: '0~100元', max: 50 },
{ name: '100~300元', max: 50 },
{ name: '300~500元', max: 50 },
{ name: '500~1000元', max: 50 },
{ name: '1000元以上', max: 50 }
],
yData: [23, 15, 30, 48, 20],
lineStartColor: '#3994C1',
lineEndColor: '#5BB158',
areaStartColor: 'rgba(57, 148, 193, 0.3)',
areaEndColor: 'rgba(91, 177, 88, 0.3)'
},
tableData: [
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
},
{
projectName: '常规医学影响检查',
deviceName: 'PRS 300C VET运动版动物DR',
pay: '330.00元',
operateHospital: '乖乖宠物医院（八里台店）',
subTime: '2023/04/01 12:26',
petName: '小白',
petWarranty: '已购保险',
petOwnerName: '李佳奇',
petOwnerPhone: '13434567897',
status: 1
}
],
recordTableData: [
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
},
{
recordId: '【兽2023】1100APR2310142',
attendingPhysician: '欧阳夏天',
dept: '宠物外科',
petOwnerName: '李佳奇',
petOwnerPhone: '13423454432',
petName: '小白',
petWarranty: '已购保险',
createTime: '2023/09/09'
}
],
queryParams: {
pageNum: 1,
pageSize: 20
},
total: 20,
oneLineChartData: {
label: '诊疗次数',
data: [396, 298, 333, 580, 0, 289, null, null, null, null, null, null],
line_color: '#5FB54B',
area_color: '#5FB54B',
unit: '次'
},
checkProjectRank: [
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
}
],
healProjectRank: [
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
},
{
name: '微型宠物医学影像检查 - DR',
count: 13264,
sum: 123123
}
]
}
},
created() {
},
methods: {
}
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.fatherDiv {
background-color: #F4F4F4;
padding-top: 24px
}
.cardDiv {
padding: 20px;
background-color: #FFFFFF;
}
.row2 {
margin-top: 24px;
}
.percentDiv {
width: 100%;
height: 181px;
text-align: center;
}
.cardTitle {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #333333;
margin-bottom: 20px;
}
.service_info_statistics {
width: 100%;
height: 103px;
padding-top: 20px;
padding-left: 16px;
//padding-right: 16px;
}
.service_info_statistics_device {
background-image: url("../../../assets/data_statistics/yewu_imgshebei.png");
background-size: 100% 103px;
.numberColor {
font-size: 24px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #5FB54B, #2AAD9A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.fontColor {
padding-top: 5px;
padding-left: 2px;
font-size: 12px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #5FB54B, #2AAD9A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.bottomText {
padding-top: 15px;
display: flex;
.bottom_font {
//line-height: 24px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 30px;
color: #333333;
margin-left: 5px;
}
}
}
.service_info_statistics_hasServicePerson {
background-image: url("../../../assets/data_statistics/caiwu_img_chongzhu.png");
background-size: 100% 103px;
.numberColor {
font-size: 24px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #5FB54B, #2AAD9A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.fontColor {
padding-top: 5px;
padding-left: 2px;
font-size: 12px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #5FB54B, #2AAD9A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.bottomText {
padding-top: 15px;
display: flex;
.bottom_font {
//line-height: 24px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 30px;
color: #333333;
margin-left: 5px;
}
}
}
.service_info_statistics_project {
background-image: url("../../../assets/data_statistics/yewu_img_xiangmu.png");
background-size: 100% 103px;
.numberColor {
font-size: 24px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #5561E6, #7B3CD3);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.fontColor {
padding-top: 5px;
padding-left: 2px;
font-size: 12px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #5561E6, #7B3CD3);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.bottomText {
padding-top: 15px;
display: flex;
.bottom_font {
//line-height: 24px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 30px;
color: #333333;
margin-left: 5px;
}
}
}
.service_info_statistics_hasServicePet {
background-image: url("../../../assets/data_statistics/caiwu_img_chongwu.png");
background-size: 100% 103px;
.numberColor {
font-size: 24px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #5561E6, #7B3CD3);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.fontColor {
padding-top: 5px;
padding-left: 2px;
font-size: 12px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #5561E6, #7B3CD3);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.bottomText {
padding-top: 15px;
display: flex;
.bottom_font {
//line-height: 24px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 30px;
color: #333333;
margin-left: 5px;
}
}
}
.service_info_statistics_order {
background-image: url("../../../assets/data_statistics/yewu_img_cishu.png");
background-size: 100% 103px;
.numberColor {
font-size: 24px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #39A3CF, #386FCD);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.fontColor {
padding-top: 5px;
padding-left: 2px;
font-size: 12px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #39A3CF, #386FCD);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.bottomText {
padding-top: 15px;
display: flex;
.bottom_font {
//line-height: 24px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 30px;
color: #333333;
margin-left: 5px;
}
}
}
.service_info_statistics_heal {
background-image: url("../../../assets/data_statistics/caiwu_mg_zhenliao.png");
background-size: 100% 103px;
.numberColor {
font-size: 24px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #39A3CF, #386FCD);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.fontColor {
padding-top: 5px;
padding-left: 2px;
font-size: 12px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #39A3CF, #386FCD);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.bottomText {
padding-top: 15px;
display: flex;
.bottom_font {
//line-height: 24px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 30px;
color: #333333;
margin-left: 5px;
}
}
}
.service_info_statistics_income {
background-image: url("../../../assets/data_statistics/yewu_mg_shouyi.png");
background-size: 100% 103px;
.numberColor {
font-size: 24px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #DB9147, #DB4747);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.fontColor {
padding-top: 5px;
padding-left: 2px;
font-size: 12px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #DB9147, #DB4747);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.bottomText {
padding-top: 15px;
display: flex;
.bottom_font {
//line-height: 24px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 30px;
color: #333333;
margin-left: 5px;
}
}
}
.orderRankDiv {
margin-bottom: 35px;
.rank_name_font {
//width: 210px;
//height: 19px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
//line-height: 17px;
color: #666666;
//opacity: 1;
}
.orderRankProgress {
margin-top: 18px;
::v-deep .el-progress-bar__inner{
background-color: unset;
background-image: linear-gradient(to right, #DE6859 , #DB8647);
}
}
.orderRankFont {
//width: 100px;
//height: 21px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 45px;
color: #333333;
//opacity: 1;
padding-left: 15px;
}
}
.deviceRankDiv {
margin-bottom: 35px;
.rank_name_font {
//width: 210px;
//height: 19px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
//line-height: 17px;
color: #666666;
//opacity: 1;
}
.deviceRankProgress {
margin-top: 18px;
::v-deep .el-progress-bar__inner{
background-color: unset;
background-image: linear-gradient(to right, #3490CE , #5FB54B);
}
}
.deviceRankFont {
//width: 100px;
//height: 21px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 45px;
color: #333333;
//opacity: 1;
padding-left: 15px;
}
}
.dividerLine {
margin-top: 14px;
margin-bottom: 24px;
}
.percentDiv {
width: 100%;
height: 181px;
text-align: center;
}
.serviceCard {
width: 100%;
height: 320px;
border: 1px solid #E5E5E5;
padding: 20px;
margin-top: 30px;
.title {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 17px;
color: #333333;
}
.underLine {
margin-top: 6px;
width: 24px;
height: 3px;
background: linear-gradient(180deg, #3490CE 0%, #5FB54B 100%);
border-radius: 2px;
}
.serviceRow {
margin-top: 20px;
.contentDiv {
width: 100%;
height: 106px;
background-color: #F4F4F4;
padding: 20px;
.imgDiv {
margin-top: 9px;
text-align: right;
}
.valueContent {
display: flex;
.numberContent {
font-size: 24px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #333333;
}
.unitContent {
padding-top: 10px;
padding-left: 5px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #333333;
}
}
.titleContent {
margin-top: 20px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333333;
}
.upPercentDiv {
padding-top: 8px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #5FB54B;
text-align: right;
}
.downPercentDiv {
padding-top: 8px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #DB4747;
text-align: right;
}
}
}
}
</style> </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