update：大屏调整
This commit is contained in:
zk
@@ -82,31 +82,180 @@ export function useSpin() {
|
||||
|
||||
export const hospitalList = [
|
||||
{
|
||||
title: '兴隆医院',
|
||||
key: 'tangdu',
|
||||
},
|
||||
{
|
||||
title: '泾河医院',
|
||||
name: '泾河医院',
|
||||
key: 'zhigong',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
title: '宁夏宝石花医院',
|
||||
name: '兴隆医院',
|
||||
key: 'tangdu',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
name: '宁夏宝石花医院',
|
||||
key: 'yangehu',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
title: '庆阳医院',
|
||||
key: 'changan',
|
||||
},
|
||||
{
|
||||
title: '延安市人民医院',
|
||||
name: '延安市人民医院',
|
||||
key: 'yananshi',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
title: '西京医院',
|
||||
name: '西京医院',
|
||||
key: 'xijing',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
name: '庆阳医院',
|
||||
key: 'changan',
|
||||
value: '',
|
||||
},
|
||||
];
|
||||
|
||||
export function useHospitalList() {
|
||||
const radarList = ref(hospitalList);
|
||||
|
||||
function setRadarList(res) {
|
||||
radarList.value.forEach((item) => {
|
||||
const { key } = item;
|
||||
item.value = res[key];
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
radarList,
|
||||
setRadarList,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @Description:体检医院雷达图
|
||||
* @date 2023/6/27
|
||||
* @param indicator:名称及最大值
|
||||
* @param countList:数据项
|
||||
*/
|
||||
export const radarCharts = ({ indicator, countList }) => {
|
||||
return {
|
||||
// tooltip: {
|
||||
// backgroundColor: 'rgba(50,50,50,0.7)',
|
||||
// borderColor: 'rgba(50,50,50,0.7)',
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
|
||||
// confine: true,
|
||||
// enterable: true, //鼠标是否可以移动到tooltip区域内
|
||||
// valueFormatter: (params) => {},
|
||||
// },
|
||||
grid: {
|
||||
top: '1%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '1%',
|
||||
containLabel: true,
|
||||
},
|
||||
radar: {
|
||||
name: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
shape: 'polygon',
|
||||
center: ['50%', '50%'],
|
||||
radius: '65%',
|
||||
//坐标系起始角度，也就是第一个指示器轴的角度。
|
||||
startAngle: 360,
|
||||
scale: true,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#597589',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#597589', // 设置网格的颜色
|
||||
},
|
||||
},
|
||||
indicator: indicator,
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
axisName: {
|
||||
formatter: function (params) {
|
||||
let dataIndex = indicator.findIndex((item) => item.name === params);
|
||||
return `${params}\n${countList[dataIndex]}`;
|
||||
},
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '50%'], // 默认全局居中
|
||||
radius: '0%',
|
||||
},
|
||||
angleAxis: {
|
||||
min: 0,
|
||||
interval: 5,
|
||||
clockwise: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
radiusAxis: {
|
||||
min: 0,
|
||||
interval: 20,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '本年度健康体检',
|
||||
type: 'radar',
|
||||
symbol: 'circle', // 拐点的样式，还可以取值'rect','angle'等
|
||||
symbolSize: 10, // 拐点的大小
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#05D5FF',
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#05D5FF',
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#05D5FF',
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: countList,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
export function barOption(xData, ydata) {
|
||||
function maxCount() {
|
||||
if (ydata.length) {
|
||||
|
||||
@@ -4,30 +4,32 @@
|
||||
<div class="inner">
|
||||
<div class="type-time">
|
||||
<span
|
||||
:class="selectIndex === index ? 'select' : 'unSelect'"
|
||||
v-for="(item, index) in timeTab"
|
||||
:key="index"
|
||||
:class="selectIndex === index ? 'select' : 'unSelect'"
|
||||
@click="handleSelect(index)"
|
||||
>{{ item.name }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="physical-container">
|
||||
<a-spin :spinning="spinning" class="spin"></a-spin>
|
||||
<div class="physical-item" v-for="(item, i) in hospitalList" :key="i" :class="[i < 3 ? 'b1' : 'b2']">
|
||||
<div class="ct">
|
||||
<div class="value">{{ countData[item.key] || '/' }}</div>
|
||||
<div class="label">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="RadarCharts"></div>
|
||||
<!-- <div class="physical-item" v-for="(item, i) in hospitalList" :key="i" :class="[i < 3 ? 'b1' : 'b2']">-->
|
||||
<!-- <div class="ct">-->
|
||||
<!-- <div class="value">{{ countData[item.key] || '/' }}</div>-->
|
||||
<!-- <div class="label">{{ item.title }}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import PublicTitle from '../publicTitle.vue';
|
||||
import { getDetail } from '/@/components/body-d-left/left.api';
|
||||
import { hospitalList, useSpin, timeTab } from '/@/components/body-d-left/bodyLeftHooks';
|
||||
import { hospitalList, useSpin, timeTab, useHospitalList, radarCharts } from '/@/components/body-d-left/bodyLeftHooks';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const { setSpin, spinning } = useSpin();
|
||||
const selectIndex = ref(0);
|
||||
@@ -44,7 +46,7 @@
|
||||
getList();
|
||||
});
|
||||
|
||||
const countData = ref({});
|
||||
const { radarList, setRadarList } = useHospitalList();
|
||||
|
||||
async function getList() {
|
||||
setSpin(true);
|
||||
@@ -54,20 +56,33 @@
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
countData.value = result[0] || {};
|
||||
setRadarList(result[0]);
|
||||
initChart();
|
||||
} catch {
|
||||
setSpin(!spinning.value);
|
||||
}
|
||||
}
|
||||
|
||||
function initChart() {
|
||||
const myChart = echarts.init(document.querySelector('.RadarCharts'));
|
||||
let countList = radarList.value.map((item) => item.value);
|
||||
let max = Math.max(...countList);
|
||||
const indicator = radarList.value.map((item) => ({ name: item.name, max: max }));
|
||||
const option = radarCharts({ indicator, countList });
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
<style lang="less" scoped>
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
|
||||
.physical-container {
|
||||
width: 96%;
|
||||
height: 92%;
|
||||
padding-top: 6%;
|
||||
height: 100%;
|
||||
//padding-top: 6%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
@@ -79,6 +94,11 @@
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.RadarCharts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.physical-item {
|
||||
width: 33%;
|
||||
height: 46%;
|
||||
|
||||
@@ -133,7 +133,7 @@ export const legendList = [
|
||||
{ img: legend3, text: '救护车' },
|
||||
{ img: legend4, text: '合作医院' },
|
||||
{ img: legend5, text: '地方医院' },
|
||||
{ img: legend6, text: '直升机' },
|
||||
// { img: legend6, text: '直升机' },
|
||||
];
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user