This commit is contained in:
zhaotiantian
2023-12-01 18:21:40 +08:00
parent 9ab26f4915
commit 2319af2203
13 changed files with 931 additions and 867 deletions
+5
View File
@@ -0,0 +1,5 @@
import { get } from '../../api/request'
enum Api {
server='/health-emergency/emergency/tblUserHelp/statistics'
}
export const list = (params) => get(Api.server, params)
+85 -64
View File
@@ -1,88 +1,109 @@
<template>
<div>
<public-title title="服务详情数据"/>
<div class="inner">
<div class="type-time">
<span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span>
</div>
<div class="server-container">
<div class="server-item" v-for="(item,index) in dataLists" :key="index">
<span>{{item.title}}</span>
<span>{{item.iphone}}</span>
</div>
</div>
<div>
<public-title title="服务详情数据"/>
<div class="inner">
<div class="type-time">
<span
v-for="(item, index) in typeTime"
:key="index"
:class="selectIndex === index ? 'select' : 'unSelect'"
@click="handleSelect(index)"
>{{ item.name }}</span
>
</div>
<div class="server-container">
<div v-for="(item, index) in dataLists" :key="index" class="server-item">
<span>{{ item.title }}</span>
<span>{{ item.iphone }}</span>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PublicTitle from "../publicTitle.vue";
import {onMounted, ref} from 'vue';
import PublicTitle from '../publicTitle.vue';
import {list} from './left.api';
const typeTime = ref([
{
name:'全部',
value:'all',
},{
name:'本年',
value:'year',
},
{
name:'本月',
value:'month',
},
{
name:'本周',
value:'week',
}
])
{
name: '全部',
value: 'all',
},
{
name: '本年',
value: 'year',
},
{
name: '本月',
value: 'month',
},
{
name: '本周',
value: 'week',
},
]);
const dataLists = ref([
{
title:'最新呼入电话',
iphone:'18394578789'
title: '最新呼入电话',
iphone: '18394578789',
},
{
title:'最新呼入电话',
iphone:'18394578789'
title: '最新呼入电话',
iphone: '18394578789',
},
{
title:'最新呼入电话',
iphone:'18394578789'
title: '最新呼入电话',
iphone: '18394578789',
},
{
title:'最新呼入电话',
iphone:'18394578789'
title: '最新呼入电话',
iphone: '18394578789',
},
])
const selectIndex = ref(0)
]);
const selectIndex = ref(0);
onMounted(() => {
list({
condition: '',
}).then(() => {
function handleSelect(index:number){
});
});
function handleSelect(index: number) {
selectIndex.value = index;
}
</script>
<style scoped lang="less">
.inner {
height: calc(100% - 40px);
.server-container{
color: #A3A4A4;
padding-top: 4%;
height: 88%;
display: grid;
align-items: start;
.server-item{
font-size: 16px;
span{
display: inline-block;
width: 50%;
font-weight: bold;
}
span:nth-child(1){
text-align: left;
padding-left: 5%;
}
span:nth-child(2){
text-align: right;
padding-right: 6%;
}
height: calc(100% - 40px);
.server-container {
color: #a3a4a4;
padding-top: 4%;
height: 88%;
display: grid;
align-items: start;
.server-item {
font-size: 16px;
span {
display: inline-block;
width: 50%;
font-weight: bold;
}
span:nth-child(1) {
text-align: left;
padding-left: 5%;
}
span:nth-child(2) {
text-align: right;
padding-right: 6%;
}
}
}
}
</style>
</style>
+95 -84
View File
@@ -1,97 +1,108 @@
<template>
<div>
<public-title title="体检数据"/>
<public-title title="体检数据" />
<div class="inner">
<div class="type-time">
<span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span>
</div>
<div class="physical-container">
<div class="physical-item">
<span>10444</span>
<span>兴隆圆医院</span>
<div class="type-time">
<span
:class="selectIndex === index ? 'select' : 'unSelect'"
v-for="(item, index) in typeTime"
:key="index"
@click="handleSelect(index)"
>{{ item.name }}</span
>
</div>
<div class="physical-item">
<span>144</span>
<span>兴隆圆医院</span>
<div class="physical-container">
<div class="physical-item">
<span>10444</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>344</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144</span>
<span>延安</span>
</div>
</div>
<div class="physical-item">
<span>344</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144</span>
<span>延安</span>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PublicTitle from "../publicTitle.vue";
const typeTime = ref([
{
name:'全部',
value:'all',
},{
name:'本年',
value:'year',
},
{
name:'本月',
value:'month',
},
{
name:'本周',
value:'week',
}
])
const physical = ref();
const selectIndex = ref(0)
function handleSelect(index:number){
selectIndex.value = index;
}
import { ref } from 'vue';
import PublicTitle from '../publicTitle.vue';
const typeTime = ref([
{
name: '全部',
value: 'all',
},
{
name: '本年',
value: 'year',
},
{
name: '本月',
value: 'month',
},
{
name: '本周',
value: 'week',
},
]);
const physical = ref();
const selectIndex = ref(0);
function handleSelect(index: number) {
selectIndex.value = index;
}
</script>
<style scoped lang="less">
.inner {
height: calc(100% - 40px);
.physical-container{
width: 96%;
height: 92%;
padding-top: 2%;
display: flex;
flex-wrap: wrap;
align-content: space-around;
.physical-item{
width: 33%;
height: 46%;
color: #FFFFFF;
display: flex;
flex-direction: column;
span:nth-child(1){
font-size: 22px;
font-weight: bold;
.inner {
height: calc(100% - 40px);
.physical-container {
width: 96%;
height: 92%;
padding-top: 2%;
display: flex;
flex-wrap: wrap;
align-content: space-around;
.physical-item {
width: 33%;
height: 46%;
color: #ffffff;
display: flex;
flex-direction: column;
span:nth-child(1) {
font-size: 22px;
font-weight: bold;
}
span:nth-child(2) {
font-size: 16px;
}
}
.physical-item:nth-child(1),
.physical-item:nth-child(2),
.physical-item:nth-child(3) {
background: url('../../assets/images/physical-top.png') no-repeat;
background-size: 100% 100%;
}
.physical-item:nth-child(4),
.physical-item:nth-child(5),
.physical-item:nth-child(6) {
background: url('../../assets/images/physical-bottom.png') no-repeat;
background-size: 100% 100%;
}
}
span:nth-child(2){
font-size: 16px;
}
}
.physical-item:nth-child(1),.physical-item:nth-child(2),.physical-item:nth-child(3){
background: url("../../assets/images/physical-top.png") no-repeat;
background-size: 100% 100%;
}
.physical-item:nth-child(4),.physical-item:nth-child(5),.physical-item:nth-child(6){
background: url("../../assets/images/physical-bottom.png") no-repeat;
background-size: 100% 100%;
}
}
}
</style>
</style>
+185 -182
View File
@@ -1,200 +1,203 @@
<template>
<div>
<public-title title="主诉分类"/>
<div class="inner">
<div class="title">
<div class="type-check">
<span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index"
@click="handleSelect(index)">{{ item.name }}</span>
<div>
<public-title title="主诉分类" />
<div class="inner">
<div class="title">
<div class="type-check">
<span
:class="selectIndex === index ? 'select' : 'unSelect'"
v-for="(item, index) in typeTime"
:key="index"
@click="handleSelect(index)"
>{{ item.name }}</span
>
</div>
<div class="type-all">
<a-select v-model:value="typesSelect" class="type-select">
<a-select-option value="全部数据">全部数据</a-select-option>
<a-select-option value="jack">Jack</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option>
</a-select>
</div>
</div>
<div class="line-chart" ref="chiefChart"></div>
</div>
<div class="type-all">
<a-select v-model:value="typesSelect" class="type-select" >
<a-select-option value="全部数据">全部数据</a-select-option>
<a-select-option value="jack">Jack</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option>
</a-select>
</div>
</div>
<div class="line-chart" ref="chiefChart"></div>
</div>
</div>
</template>
<script setup lang="ts">
import {ref, onMounted} from 'vue';
import PublicTitle from "../publicTitle.vue";
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
import PublicTitle from '../publicTitle.vue';
import * as echarts from 'echarts';
const typesSelect = ref('全部数据')
const typeTime = ref([
{
name: '男',
value: 'man',
}, {
name: '女',
value: 'women',
},
])
const selectIndex = ref(0)
const chiefChart = ref<HTMLElement>()
onMounted(() => {
let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
let ydata = [120, 200, 150, 80, 70, 110, 130];
initChart(xdata, ydata)
})
const typesSelect = ref('全部数据');
const typeTime = ref([
{
name: '男',
value: 'man',
},
{
name: '',
value: 'women',
},
]);
const selectIndex = ref(0);
const chiefChart = ref<HTMLElement>();
onMounted(() => {
let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
let ydata = [120, 200, 150, 80, 70, 110, 130];
initChart(xdata, ydata);
});
function initChart(xData, ydata) {
let myChart = echarts.init(chiefChart.value)
let options = {
grid: {
top: '10%',
left: '8%',
right: '8%',
bottom: '20%'
},
xAxis: {
type: 'category',
data: xData,
axisLabel: {
color: '#FFFFFF',
fontSize: 14,
},
},
yAxis: {
type: 'value',
axisLabel: {
color: '#FFFFFF',
fontSize: 14,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(217, 231, 255, 0.2)'
}
}
},
series: [
{
data: ydata,
type: 'bar',
barWidth: '20%',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#008CFF'},
{offset: 1, color: '#33CBFE'}
]
)
}
}
]
}
myChart.setOption(options)
window.addEventListener('resize', () => {
myChart.resize();
});
}
function initChart(xData, ydata) {
let myChart = echarts.init(chiefChart.value);
let options = {
grid: {
top: '10%',
left: '8%',
right: '8%',
bottom: '20%',
},
xAxis: {
type: 'category',
data: xData,
axisLabel: {
color: '#FFFFFF',
fontSize: 14,
},
},
yAxis: {
type: 'value',
axisLabel: {
color: '#FFFFFF',
fontSize: 14,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(217, 231, 255, 0.2)',
},
},
},
series: [
{
data: ydata,
type: 'bar',
barWidth: '20%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#008CFF' },
{ offset: 1, color: '#33CBFE' },
]),
},
},
],
};
myChart.setOption(options);
window.addEventListener('resize', () => {
myChart.resize();
});
}
function handleSelect(index) {
selectIndex.value = index
}
function handleSelect(index) {
selectIndex.value = index;
}
</script>
<style scoped lang="less">
.inner {
height: calc(100% - 40px);
.title {
width: 100%;
display: flex;
align-items: center;
justify-content: right;
padding: 2% 0;
.inner {
height: calc(100% - 40px);
.title {
width: 100%;
display: flex;
align-items: center;
justify-content: right;
padding: 2% 0;
.type-check {
color: #ffffff;
width: 15%;
display: flex;
justify-content: space-around;
.type-check {
color: #ffffff;
width: 15%;
display: flex;
justify-content: space-around;
span {
padding: 0 2%;
cursor: pointer;
font-size: 16px;
}
span {
padding: 0 2%;
cursor: pointer;
font-size: 16px;
}
.select {
color: #45A2FF;
position: relative;
.select {
color: #45a2ff;
position: relative;
&:after {
content: '';
position: absolute;
display: block;
width: 100%;
left: 0;
bottom: -12px;
height: 6px;
background: url("../../assets/images/light.png") no-repeat;
background-size: 100% 100%;
&:after {
content: '';
position: absolute;
display: block;
width: 100%;
left: 0;
bottom: -12px;
height: 6px;
background: url('../../assets/images/light.png') no-repeat;
background-size: 100% 100%;
}
}
.unSelect {
color: #a3a4a4;
}
}
.type-all {
width: 18%;
color: #ffffff;
.type-select {
width: 94%;
color: #008cff;
}
}
}
.line-chart {
margin: 0 auto;
width: 96%;
height: 80%;
}
}
.unSelect {
color: #A3A4A4;
}
}
.type-all {
width: 18%;
color: #ffffff;
.type-select {
width: 94%;
color: #008CFF;
}
}
}
.line-chart {
margin: 0 auto;
width: 96%;
height: 80%;
}
}
</style>
<style lang="less">
.ant-select-dropdown{
background-color: #00152b!important;
border-right: 1px solid #1b7ef2;
border-left: 1px solid #1b7ef2;
border-bottom: 1px solid #1b7ef2;
}
.ant-select-item{
color: #1b7ef2!important;
}
//框背景色
.ant-select:not(.ant-select-customize-input) .ant-select-selector{
color: #1b7ef2!important;
background-color: transparent!important;
border: 1px solid #1b7ef2 !important;
}
.ant-select-item-option-selected{
color: #ffffff!important;
}
// 选中字体颜色
.ant-select-selection-item{
color: #1b7ef2!important;
}
.ant-select-item-option-active{
background-color:transparent!important;
}
.ant-select-item-option-active:hover{
background-color: #002e64!important;
}
// 箭头颜色
.ant-select-arrow {
color: #1b7ef2 !important;
}
.ant-select-item-option-selected:not(.ant-select-item-option-disabled){
background-color:#002e64!important;
}
</style>
.ant-select-dropdown {
background-color: #00152b !important;
border-right: 1px solid #1b7ef2;
border-left: 1px solid #1b7ef2;
border-bottom: 1px solid #1b7ef2;
}
.ant-select-item {
color: #1b7ef2 !important;
}
//框背景色
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
color: #1b7ef2 !important;
background-color: transparent !important;
border: 1px solid #1b7ef2 !important;
}
.ant-select-item-option-selected {
color: #ffffff !important;
}
// 选中字体颜色
.ant-select-selection-item {
color: #1b7ef2 !important;
}
.ant-select-item-option-active {
background-color: transparent !important;
}
.ant-select-item-option-active:hover {
background-color: #002e64 !important;
}
// 箭头颜色
.ant-select-arrow {
color: #1b7ef2 !important;
}
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
background-color: #002e64 !important;
}
</style>