接口
This commit is contained in:
zhaotiantian
@@ -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)
|
||||
@@ -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>
|
||||
|
||||
@@ -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
@@ -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>
|
||||
|
||||
@@ -1,318 +1,322 @@
|
||||
<template>
|
||||
<div class="terminal-container">
|
||||
<public-title title="健康终端报警" :isShowMore="true" @clickMore="handleDialog"/>
|
||||
<div class="inner">
|
||||
<vue3-seamless-scroll :list="policeLists" class="scroll" :hover="true" :limitScrollNum="7">
|
||||
<div class="item" v-for="(item, index) in policeLists" :key="index">
|
||||
<span>{{item.name}}</span>
|
||||
<span>{{item.abnormal}}</span>
|
||||
<div class="time-icon">
|
||||
<span>{{item.time}}</span>
|
||||
<span class="terminal-icon" @click="handlePolice"></span>
|
||||
</div>
|
||||
<div class="terminal-container">
|
||||
<public-title title="健康终端报警" :isShowMore="true" @clickMore="handleDialog" />
|
||||
<div class="inner">
|
||||
<vue3-seamless-scroll :list="policeLists" class="scroll" :hover="true" :limitScrollNum="7">
|
||||
<div class="item" v-for="(item, index) in policeLists" :key="index">
|
||||
<span>{{ item.name }}</span>
|
||||
<span>{{ item.abnormal }}</span>
|
||||
<div class="time-icon">
|
||||
<span>{{ item.time }}</span>
|
||||
<span class="terminal-icon" @click="handlePolice"></span>
|
||||
</div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
<Dialog :openVis="open" width="65%" title="健康终端报警列表" @close="handleClose">
|
||||
<template #container>
|
||||
<div class="dialog-con">
|
||||
<a-table :dataSource="dataSource" :columns="columns" :scroll="{ y: '56vh' }" :pagination="false" />
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
<Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
|
||||
<template #container>
|
||||
<div class="police-con">
|
||||
<div class="con-item">
|
||||
<span>姓名：</span>
|
||||
<span>{{ userInfo.name }}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>二级单位：</span>
|
||||
<span>{{ userInfo.unit }}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>手机号码：</span>
|
||||
<span>{{ userInfo.iphone }}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>异常事件：</span>
|
||||
<span>{{ userInfo.abnormal }}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>发生时间：</span>
|
||||
<span>{{ userInfo.time }}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>发生地点：</span>
|
||||
<span>{{ userInfo.address }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
<Dialog :openVis="open" width="65%" title="健康终端报警列表" @close="handleClose">
|
||||
<template #container>
|
||||
<div class="dialog-con">
|
||||
<a-table :dataSource="dataSource" :columns="columns" :scroll="{y:'56vh'}" :pagination=false />
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
<Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
|
||||
<template #container>
|
||||
<div class="police-con">
|
||||
<div class="con-item">
|
||||
<span>姓名：</span>
|
||||
<span>{{userInfo.name}}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>二级单位：</span>
|
||||
<span>{{userInfo.unit}}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>手机号码：</span>
|
||||
<span>{{userInfo.iphone}}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>异常事件：</span>
|
||||
<span>{{userInfo.abnormal}}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>发生时间：</span>
|
||||
<span>{{userInfo.time}}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>发生地点：</span>
|
||||
<span>{{userInfo.address}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import PublicTitle from "../publicTitle.vue";
|
||||
import Dialog from '../dialog/Dialog.vue';
|
||||
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
||||
const policeLists = ref([
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
}
|
||||
])
|
||||
const open = ref<boolean>(false);
|
||||
const openInfor = ref<boolean>(false);
|
||||
const userInfo = ref({
|
||||
name:'王苗',
|
||||
unit:'长庆油田',
|
||||
iphone:'1897263745',
|
||||
abnormal:'体温异常',
|
||||
time:'2023-11-23 16:23',
|
||||
address:'陕西省西安市'
|
||||
});
|
||||
|
||||
const dataSource=ref([
|
||||
{
|
||||
key: '1',
|
||||
name: '胡彦斌',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
}, {
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
}, {
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
}, {
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
}, {
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
}, {
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
]);
|
||||
|
||||
const columns= ref([
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
align:'center',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '单位信息',
|
||||
dataIndex: 'age',
|
||||
align:'center',
|
||||
key: 'age',
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'address',
|
||||
align:'center',
|
||||
key: 'address',
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'address1',
|
||||
align:'center',
|
||||
key: 'address1',
|
||||
},
|
||||
{
|
||||
title: '异常事件',
|
||||
dataIndex: 'address2',
|
||||
align:'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '异常值',
|
||||
dataIndex: 'address2',
|
||||
align:'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '发生时间',
|
||||
dataIndex: 'address2',
|
||||
align:'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '发生地点',
|
||||
dataIndex: 'address2',
|
||||
align:'center',
|
||||
key: 'address2',
|
||||
}
|
||||
import { ref } from 'vue';
|
||||
import PublicTitle from '../publicTitle.vue';
|
||||
import Dialog from '../dialog/Dialog.vue';
|
||||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
||||
const policeLists = ref([
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
]);
|
||||
function handleDialog(){
|
||||
open.value = true
|
||||
}
|
||||
function handleClose(){
|
||||
open.value = false
|
||||
}
|
||||
function handlePolice(){
|
||||
openInfor.value = true
|
||||
}
|
||||
function handlePoliceClose(){
|
||||
openInfor.value = false
|
||||
}
|
||||
const open = ref<boolean>(false);
|
||||
const openInfor = ref<boolean>(false);
|
||||
const userInfo = ref({
|
||||
name: '王苗',
|
||||
unit: '长庆油田',
|
||||
iphone: '1897263745',
|
||||
abnormal: '体温异常',
|
||||
time: '2023-11-23 16:23',
|
||||
address: '陕西省西安市',
|
||||
});
|
||||
|
||||
const dataSource = ref([
|
||||
{
|
||||
key: '1',
|
||||
name: '胡彦斌',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
]);
|
||||
|
||||
const columns = ref([
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
align: 'center',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '单位信息',
|
||||
dataIndex: 'age',
|
||||
align: 'center',
|
||||
key: 'age',
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'address',
|
||||
align: 'center',
|
||||
key: 'address',
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'address1',
|
||||
align: 'center',
|
||||
key: 'address1',
|
||||
},
|
||||
{
|
||||
title: '异常事件',
|
||||
dataIndex: 'address2',
|
||||
align: 'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '异常值',
|
||||
dataIndex: 'address2',
|
||||
align: 'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '发生时间',
|
||||
dataIndex: 'address2',
|
||||
align: 'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '发生地点',
|
||||
dataIndex: 'address2',
|
||||
align: 'center',
|
||||
key: 'address2',
|
||||
},
|
||||
]);
|
||||
function handleDialog() {
|
||||
open.value = true;
|
||||
}
|
||||
function handleClose() {
|
||||
open.value = false;
|
||||
}
|
||||
function handlePolice() {
|
||||
openInfor.value = true;
|
||||
}
|
||||
function handlePoliceClose() {
|
||||
openInfor.value = false;
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.scroll {
|
||||
width: 90%;
|
||||
height: 88%;
|
||||
overflow: hidden;
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 3% 0;
|
||||
span{
|
||||
color:#ffffff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.time-icon {
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.terminal-icon {
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url("../../assets/images/terminal.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor:pointer;
|
||||
}
|
||||
justify-content: center;
|
||||
.scroll {
|
||||
width: 90%;
|
||||
height: 88%;
|
||||
overflow: hidden;
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 3% 0;
|
||||
span {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.time-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.terminal-icon {
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url('../../assets/images/terminal.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dialog-con{
|
||||
background-color: #00152B;
|
||||
border: 1px solid #129BFF;
|
||||
}
|
||||
.police-con{
|
||||
color: #ffffff;
|
||||
background-color: #00152B;
|
||||
border: 1px solid #129BFF;
|
||||
padding: 2% 0 2% 5%;
|
||||
.con-item{
|
||||
padding: 1.3% 0;
|
||||
span:nth-child(1){
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
text-align: right;
|
||||
}
|
||||
span:nth-child(2){
|
||||
padding-left: 2%;
|
||||
}
|
||||
.dialog-con {
|
||||
background-color: #00152b;
|
||||
border: 1px solid #129bff;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
.police-con {
|
||||
color: #ffffff;
|
||||
background-color: #00152b;
|
||||
border: 1px solid #129bff;
|
||||
padding: 2% 0 2% 5%;
|
||||
.con-item {
|
||||
padding: 1.3% 0;
|
||||
span:nth-child(1) {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
text-align: right;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
padding-left: 2%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title title="基层医疗点远程会诊"/>
|
||||
<public-title title="基层医疗点远程会诊" />
|
||||
<div class="inner">
|
||||
<div class="inner-item"></div>
|
||||
<div class="inner-item"></div>
|
||||
@@ -10,37 +10,36 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
import PublicTitle from "../publicTitle.vue";
|
||||
import PublicTitle from '../publicTitle.vue';
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-content: space-around;
|
||||
padding-top: 2%;
|
||||
.inner-item{
|
||||
width: 48%;
|
||||
height: 46%;
|
||||
.inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-content: space-around;
|
||||
padding-top: 2%;
|
||||
.inner-item {
|
||||
width: 48%;
|
||||
height: 46%;
|
||||
}
|
||||
.inner-item:nth-child(1) {
|
||||
background: url('../../assets/images/doctors1.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.inner-item:nth-child(2) {
|
||||
background: url('../../assets/images/doctors2.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.inner-item:nth-child(3) {
|
||||
background: url('../../assets/images/doctors3.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.inner-item:nth-child(4) {
|
||||
background: url('../../assets/images/doctors4.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.inner-item:nth-child(1){
|
||||
background: url("../../assets/images/doctors1.png")no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.inner-item:nth-child(2){
|
||||
background: url("../../assets/images/doctors2.png")no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.inner-item:nth-child(3){
|
||||
background: url("../../assets/images/doctors3.png")no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.inner-item:nth-child(4){
|
||||
background: url("../../assets/images/doctors4.png")no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,83 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title title="长庆油田大病人数"/>
|
||||
<public-title title="长庆油田大病人数" />
|
||||
<div class="inner" ref="healthChart"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import PublicTitle from "../publicTitle.vue";
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import PublicTitle from '../publicTitle.vue';
|
||||
|
||||
const healthChart = 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(healthChart.value)
|
||||
let options = {
|
||||
title:{
|
||||
text:'总人数\n',
|
||||
subtext: '1980',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
fontSize:18,
|
||||
color: '#ffffff',
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 28,
|
||||
},
|
||||
},
|
||||
color:['#0098FA','#0CD9B5','#3B72AD'],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
bottom: '0',
|
||||
left: 'center',
|
||||
icon: 'circle',
|
||||
textStyle:{
|
||||
color:'#ffffff',
|
||||
fontSize:16,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['50%', '80%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inner',
|
||||
formatter: '{d}%',
|
||||
color:'#ffffff',
|
||||
fontSize:16
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '高危人数' },
|
||||
{ value: 735, name: '中危人数' },
|
||||
{ value: 580, name: '可控人数' },
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(options)
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
const healthChart = 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(healthChart.value);
|
||||
let options = {
|
||||
title: {
|
||||
text: '总人数\n',
|
||||
subtext: '1980',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
color: '#ffffff',
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 28,
|
||||
},
|
||||
},
|
||||
color: ['#0098FA', '#0CD9B5', '#3B72AD'],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
bottom: '0',
|
||||
left: 'center',
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['50%', '80%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inner',
|
||||
formatter: '{d}%',
|
||||
color: '#ffffff',
|
||||
fontSize: 16,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '高危人数' },
|
||||
{ value: 735, name: '中危人数' },
|
||||
{ value: 580, name: '可控人数' },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
</style>
|
||||
.inner {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -490,4 +490,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,67 +1,62 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="dialog"
|
||||
v-model:visible="props.openVis"
|
||||
:title="props.title"
|
||||
:width="props.width"
|
||||
:maskClosable="true"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<slot name="container"></slot>
|
||||
<template #footer></template>
|
||||
</a-modal>
|
||||
<a-modal class="dialog" v-model:visible="props.openVis" :title="props.title" :width="props.width" :maskClosable="true" @cancel="handleCancel">
|
||||
<slot name="container"></slot>
|
||||
<template #footer></template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
const emit = defineEmits(['close'])
|
||||
const props = defineProps({
|
||||
width:{
|
||||
type: String
|
||||
},
|
||||
openVis:{
|
||||
type:Boolean
|
||||
},
|
||||
title:{
|
||||
type:String
|
||||
}
|
||||
})
|
||||
function handleCancel(){
|
||||
emit('close')
|
||||
}
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
const emit = defineEmits(['close']);
|
||||
const props = defineProps({
|
||||
width: {
|
||||
type: String,
|
||||
},
|
||||
openVis: {
|
||||
type: Boolean,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
function handleCancel() {
|
||||
emit('close');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.dialog{
|
||||
.ant-modal-title{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
background: url("../../assets/images/dialog.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff!important;
|
||||
padding-left: 2%;
|
||||
}
|
||||
.ant-modal-header{
|
||||
padding: 0!important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.ant-modal-header,.ant-modal-content{
|
||||
background-color: transparent!important;
|
||||
}
|
||||
.ant-modal-body{
|
||||
padding: 0!important;
|
||||
}
|
||||
.ant-modal-close-x,.anticon {
|
||||
color: #999999!important;
|
||||
}
|
||||
.ant-modal-footer{
|
||||
border-top: none!important;
|
||||
}
|
||||
.ant-modal-wrap{
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.dialog {
|
||||
.ant-modal-title {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
background: url('../../assets/images/dialog.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff !important;
|
||||
padding-left: 2%;
|
||||
}
|
||||
.ant-modal-header {
|
||||
padding: 0 !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.ant-modal-header,
|
||||
.ant-modal-content {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.ant-modal-body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.ant-modal-close-x,
|
||||
.anticon {
|
||||
color: #999999 !important;
|
||||
}
|
||||
.ant-modal-footer {
|
||||
border-top: none !important;
|
||||
}
|
||||
.ant-modal-wrap {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user