接口
This commit is contained in:
zhaotiantian
+185
-182
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user