组件调整
This commit is contained in:
zhaotiantian
@@ -1,76 +1,76 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title :title="props.title">
|
||||
<template #right>
|
||||
{{ props.tips }}
|
||||
</template>
|
||||
</public-title>
|
||||
<div class="inner" ref="healthChart"></div>
|
||||
</div>
|
||||
<div>
|
||||
<public-title :title="props.title">
|
||||
<template #right>
|
||||
{{ props.tips }}
|
||||
</template>
|
||||
</public-title>
|
||||
<div class="inner" ref="healthChart"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import { useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
|
||||
import { screenPie } from '/@/components/item-d/pieCharts.ts';
|
||||
import { onMounted, ref, unref, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import {useHealth} from '/@/components/body-d-right/bodyRightHooks.ts';
|
||||
import {screenPie} from '/@/components/item-d/pieCharts.ts';
|
||||
import {onMounted, ref, unref, watch, defineProps} from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tips: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
const healthChart = ref<HTMLElement>();
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tips: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
const healthChart = ref<HTMLElement>();
|
||||
|
||||
const { setSpin, spinning } = useSpin();
|
||||
const {setSpin, spinning} = useSpin();
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
init();
|
||||
}
|
||||
);
|
||||
|
||||
const { healthData, getValue, setHealth } = useHealth();
|
||||
|
||||
async function init() {
|
||||
// setHealth(props.data);
|
||||
// const yData = unref(getValue);
|
||||
// let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
|
||||
initChart(props.data, 78, props.color);
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
init();
|
||||
}
|
||||
);
|
||||
|
||||
function initChart(chartData, total, color) {
|
||||
let myChart = echarts.init(healthChart.value);
|
||||
let options = screenPie(chartData, total, color);
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
const {healthData, getValue, setHealth} = useHealth();
|
||||
|
||||
async function init() {
|
||||
// setHealth(props.data);
|
||||
// const yData = unref(getValue);
|
||||
// let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
|
||||
initChart(props.data, 78, props.color);
|
||||
}
|
||||
|
||||
function initChart(chartData, total, color) {
|
||||
let myChart = echarts.init(healthChart.value);
|
||||
let options = screenPie(chartData, total, color, '{d}%');
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.inner {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export function screenPie(chartData, total, color) {
|
||||
export function screenPie(chartData, total, color, formatter) {
|
||||
return {
|
||||
title: {
|
||||
text: '总人数',
|
||||
@@ -31,7 +31,7 @@ export function screenPie(chartData, total, color) {
|
||||
top: 'center',
|
||||
orient: 'vertical',
|
||||
icon: 'circle',
|
||||
itemGap: 26,
|
||||
itemGap: 16,
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 16,
|
||||
@@ -46,7 +46,7 @@ export function screenPie(chartData, total, color) {
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inner',
|
||||
formatter: '{d}%',
|
||||
formatter: formatter,
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
},
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<template v-for="(item, index) in dataList" :key="`list${index}`">
|
||||
<item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color"/>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue';
|
||||
import ItemD from '/@/components/item-d/item-d.vue';
|
||||
|
||||
const dataList = ref([
|
||||
{
|
||||
title: '心率',
|
||||
data: [
|
||||
{name: '正常', value: 234},
|
||||
{name: '警戒', value: 204},
|
||||
{name: '危险', value: 34},
|
||||
],
|
||||
color: ['#0098FA', '#FF6648', '#FB466C'],
|
||||
tips: '正常范围60~100次/分',
|
||||
},
|
||||
{
|
||||
title: '血氧',
|
||||
data: [
|
||||
{name: '正常', value: 234},
|
||||
{name: '警戒', value: 204},
|
||||
{name: '危险', value: 34},
|
||||
],
|
||||
color: ['#0098FA', '#FF6648', '#FB466C'],
|
||||
tips: '血氧饱和度范围95%~100%',
|
||||
},
|
||||
{
|
||||
title: '压力',
|
||||
data: [
|
||||
{name: '正常', value: 234},
|
||||
{name: '放松', value: 204},
|
||||
{name: '中等', value: 34},
|
||||
{name: '偏高', value: 78},
|
||||
],
|
||||
color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
|
||||
tips: '',
|
||||
},
|
||||
{
|
||||
title: '体温',
|
||||
data: [
|
||||
{name: '37.2', value: 234},
|
||||
{name: '37.2-38', value: 204},
|
||||
{name: '>38', value: 34},
|
||||
],
|
||||
color: ['#0098FA', '#0CD9B5', '#3B72AD'],
|
||||
tips: '',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -6,7 +6,7 @@ export function sleepCharts() {
|
||||
top: '15%',
|
||||
left: '8%',
|
||||
right: '3%',
|
||||
bottom: '18%',
|
||||
bottom: '20%',
|
||||
},
|
||||
legend: {
|
||||
data: ['清醒', '浅睡', '深睡'],
|
||||
@@ -68,7 +68,7 @@ export function useHealth() {
|
||||
const healthData = ref([
|
||||
{
|
||||
name: '5000以下',
|
||||
value: '0',
|
||||
value: '23',
|
||||
type: '1',
|
||||
type_dictText: '恶性肿瘤',
|
||||
},
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
:pagination="tableInfo.pagination"
|
||||
:rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
|
||||
>
|
||||
<template #address="{text}">
|
||||
<template #address="{text,record}">
|
||||
<div class="police-times">
|
||||
<span class="police-text">{{ text }}</span>
|
||||
<span class="police-icon"></span>
|
||||
<span class="police-text">{{ record.address }}</span>
|
||||
<span class="police-icon" @click="handlePoliceDetail(record)"></span>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
@@ -59,7 +59,6 @@ const tableInfo = ref({
|
||||
},
|
||||
{
|
||||
title: '住址',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
align: 'center',
|
||||
slots: {customRender: 'address'}
|
||||
@@ -68,9 +67,13 @@ const tableInfo = ref({
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 2,
|
||||
total: 2,
|
||||
total: 10,
|
||||
},
|
||||
});
|
||||
|
||||
function handlePoliceDetail(record) {
|
||||
console.log(record)
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner-screen {
|
||||
|
||||
@@ -1,56 +1,56 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title title="步数" />
|
||||
<div class="inner" ref="healthChart"></div>
|
||||
</div>
|
||||
<div>
|
||||
<public-title title="步数"/>
|
||||
<div class="inner" ref="healthChart"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, unref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { getHealthDataList } from '/@/components/body-d-right/right.api';
|
||||
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import { useHealth } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
|
||||
import { screenPie } from '/@/components/item-d/pieCharts.ts';
|
||||
import {ref, unref, onMounted} from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import {getHealthDataList} from '/@/components/body-d-right/right.api';
|
||||
import {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import {useHealth} from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
|
||||
import {screenPie} from '/@/components/item-d/pieCharts.ts';
|
||||
|
||||
const { setSpin, spinning } = useSpin();
|
||||
const healthChart = ref<HTMLElement>();
|
||||
const {setSpin, spinning} = useSpin();
|
||||
const healthChart = ref<HTMLElement>();
|
||||
|
||||
const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
const { healthData, getValue, setHealth } = useHealth();
|
||||
const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
const {healthData, getValue, setHealth} = useHealth();
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
const { code, result } = await getHealthDataList({});
|
||||
setSpin(true);
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setHealth(result);
|
||||
const yData = unref(getValue);
|
||||
let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
|
||||
initChart(unref(healthData), total);
|
||||
} catch {
|
||||
initChart(unref(healthData), 0);
|
||||
}
|
||||
async function init() {
|
||||
try {
|
||||
const {code, result} = await getHealthDataList({});
|
||||
setSpin(true);
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setHealth(result);
|
||||
const yData = unref(getValue);
|
||||
let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
|
||||
initChart(unref(healthData), '89');
|
||||
} catch {
|
||||
initChart(unref(healthData), 0);
|
||||
}
|
||||
}
|
||||
|
||||
function initChart(chartData, total) {
|
||||
let myChart = echarts.init(healthChart.value);
|
||||
let options = screenPie(chartData, total, color.value);
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
function initChart(chartData, total) {
|
||||
let myChart = echarts.init(healthChart.value);
|
||||
let options = screenPie(chartData, total, color.value, '{c}');
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.inner {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user