update
This commit is contained in:
zk
@@ -1,12 +1,9 @@
|
||||
<template>
|
||||
<div class="terminal-container">
|
||||
<public-title title="睡眠">
|
||||
<template #right>平均睡眠时长：6小时30分</template>
|
||||
</public-title>
|
||||
<public-title title="睡眠" />
|
||||
<div class="inner">
|
||||
<div class="title">
|
||||
<span class="count">6.5h</span>
|
||||
<span class="lightSleep">深睡2.4小时 浅睡4.1小时</span>
|
||||
<span class="lightSleep">平均睡眠 {{ nums.avg }} 深睡 {{ nums.avgLong }} 浅睡 {{ nums.avgShort }}</span>
|
||||
</div>
|
||||
<div class="sleepChart" ref="sleepChart"></div>
|
||||
</div>
|
||||
@@ -15,23 +12,55 @@
|
||||
<script setup lang="ts">
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks';
|
||||
import { ref, onMounted, unref } from 'vue';
|
||||
import { sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { formatStr, sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
|
||||
import { getSleep } from '/@/components/secondaryScreen/commonApi.ts';
|
||||
|
||||
const props = defineProps({
|
||||
orgCode: String,
|
||||
type: String,
|
||||
});
|
||||
const sleepChart = ref<HTMLElement>();
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
const { healthData, getValue, setHealth } = useHealth();
|
||||
watch(props, () => {
|
||||
init();
|
||||
});
|
||||
const nums = ref({
|
||||
avgShort: '',
|
||||
avgLong: '',
|
||||
avg: '',
|
||||
});
|
||||
|
||||
function init() {
|
||||
initChart();
|
||||
async function init() {
|
||||
const params = {
|
||||
orgCode: props.orgCode,
|
||||
type: props.type,
|
||||
};
|
||||
const { code, result } = await getSleep(params);
|
||||
if (code == 200 && result.length > 0) {
|
||||
let time = result?.map((item) => item.dataDate);
|
||||
let short = result?.map((item) => item.avgShortDuration);
|
||||
let long = result?.map((item) => item.avgLongDuration);
|
||||
let awake = result?.map((item) => item.awakeDuration);
|
||||
let avg = result?.map((item) => item.averageDuration);
|
||||
initChart({ time, short, long, awake, type: props.type });
|
||||
const len = time.length;
|
||||
if (!len > 0) {
|
||||
return;
|
||||
}
|
||||
nums.value = {
|
||||
avgShort: formatStr({ list: short, len }),
|
||||
avgLong: formatStr({ list: long, len }),
|
||||
avg: formatStr({ list: avg, len }), //平均
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function initChart() {
|
||||
function initChart({ time, short, long, awake, type }) {
|
||||
let myChart = echarts.init(sleepChart.value);
|
||||
let options = sleepCharts();
|
||||
let options = sleepCharts({ time, short, long, awake, type });
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
@@ -61,4 +90,4 @@
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -1,119 +1,174 @@
|
||||
import {computed, ref} from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { minuteToStr } from '/@/utils/utils.ts';
|
||||
|
||||
export function sleepCharts() {
|
||||
function timeFormat(type, list) {
|
||||
const o = {
|
||||
week: 'MM-DD',
|
||||
month: 'MM-DD',
|
||||
year: 'MM',
|
||||
};
|
||||
if (list) {
|
||||
return list.map((item) => dayjs(item).format(o[type]));
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
//时间转换
|
||||
export function formatStr({ list, len }) {
|
||||
let sum =
|
||||
list.reduce((all, cur) => {
|
||||
return all + cur;
|
||||
}, 0) / len;
|
||||
|
||||
return minuteToStr(sum);
|
||||
}
|
||||
|
||||
export function sleepCharts({ time, short, long, awake, type }) {
|
||||
return {
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '8%',
|
||||
right: '3%',
|
||||
bottom: '20%',
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0%',
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
textStyle: {
|
||||
align: 'left', // 使用左对齐样式显示tooltip文本
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['清醒', '浅睡', '深睡'],
|
||||
textStyle: {
|
||||
color: '#ffffff'
|
||||
color: '#ffffff',
|
||||
},
|
||||
top: 0,
|
||||
left: '55%',
|
||||
},
|
||||
color: ['#14B3F8', '#6D7BEB', '#5451DC'],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
data: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22'],
|
||||
axisLabel: {
|
||||
color: '#ffffff',
|
||||
formatter: (item, i) => {
|
||||
if (i == 0 || i == time.length - 1 || i == Math.floor(time.length / 2)) return item;
|
||||
},
|
||||
},
|
||||
data: timeFormat(type, time),
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#696969'
|
||||
}
|
||||
}
|
||||
color: '#696969',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '清醒',
|
||||
type: 'bar',
|
||||
data: [
|
||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
],
|
||||
data: awake,
|
||||
},
|
||||
{
|
||||
name: '浅睡',
|
||||
type: 'bar',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
],
|
||||
data: short,
|
||||
},
|
||||
{
|
||||
name: '深睡',
|
||||
type: 'bar',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
],
|
||||
}
|
||||
]
|
||||
data: long,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
export function useHealth() {
|
||||
const healthData = ref([
|
||||
//步数
|
||||
export function useStep() {
|
||||
const stepData = ref([
|
||||
{
|
||||
name: '5000以下',
|
||||
value: '23',
|
||||
type: '1',
|
||||
type: 'lessThanFiveThousand',
|
||||
type_dictText: '恶性肿瘤',
|
||||
},
|
||||
{
|
||||
name: '5000~1w',
|
||||
value: '2',
|
||||
type: '2',
|
||||
type: 'fiveThousandToTenThousand',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
{
|
||||
name: '1~1.5w',
|
||||
value: '34',
|
||||
type: '3',
|
||||
type: 'TenThousandToFifteenThousand',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
{
|
||||
name: '1.5w~2w',
|
||||
value: '43',
|
||||
type: '3',
|
||||
type: 'FifteenToTwentyThousand',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
{
|
||||
name: '2以上',
|
||||
value: '43',
|
||||
type: '3',
|
||||
type: 'TwentyThousandOrMore',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
]);
|
||||
const getValue = computed(() => healthData.value.map((item) => item.value));
|
||||
const getName = computed(() => healthData.value.map((item) => item.name));
|
||||
|
||||
function setHealth(data) {
|
||||
data?.map((item1) => {
|
||||
healthData.value.map((item2) => {
|
||||
if (item1.type == item2.type) {
|
||||
item2.value = item1.count;
|
||||
}
|
||||
});
|
||||
function setStep(data) {
|
||||
stepData.value.map((item) => {
|
||||
item.value = data[item.type] || 0;
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
healthData,
|
||||
getValue,
|
||||
getName,
|
||||
setHealth,
|
||||
stepData,
|
||||
setStep,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export const monitorColumns = [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'eventType_dictText',
|
||||
key: 'eventType_dictText',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '异常时间',
|
||||
dataIndex: 'warnTime',
|
||||
key: 'warnTime',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '定位',
|
||||
key: 'address',
|
||||
align: 'center',
|
||||
slots: { customRender: 'address' },
|
||||
width: 40,
|
||||
},
|
||||
];
|
||||
@@ -1,178 +1,188 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title title="预警"/>
|
||||
<div class="inner-screen">
|
||||
<a-table
|
||||
class="ant-table-striped"
|
||||
:dataSource="tableInfo.dataSource"
|
||||
:columns="tableInfo.columns"
|
||||
:pagination="tableInfo.pagination"
|
||||
:rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
|
||||
>
|
||||
<template #address="{text,record}">
|
||||
<div class="police-times">
|
||||
<span class="police-text">{{ record.address }}</span>
|
||||
<span class="police-icon" @click="handlePoliceDetail(record)"></span>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
<div>
|
||||
<public-title title="预警" />
|
||||
<div class="inner-screen">
|
||||
<a-table
|
||||
:scroll="{
|
||||
y: tableHeight,
|
||||
}"
|
||||
style="overflow-y: auto"
|
||||
:columns="monitorColumns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="pagination"
|
||||
:rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
|
||||
class="ant-table-striped"
|
||||
>
|
||||
<template #address="{ text, record }">
|
||||
<div class="police-times" @click="handlePoliceDetail(record)">
|
||||
<span class="position"></span>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { getMonitorList } from '/@/components/secondaryScreen/commonApi.ts';
|
||||
import { monitorColumns } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
|
||||
import $bus from '/@/utils/bus.ts';
|
||||
import { earlyWarning } from '/@/utils/busConstant.ts';
|
||||
|
||||
const tableInfo = ref({
|
||||
dataSource: [
|
||||
{
|
||||
key: '1',
|
||||
name: '胡彦斌',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '住址',
|
||||
key: 'address',
|
||||
align: 'center',
|
||||
slots: {customRender: 'address'}
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 2,
|
||||
total: 10,
|
||||
},
|
||||
});
|
||||
const tableHeight = ref(0);
|
||||
const dataSource = ref([]);
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
onChange: pageChange,
|
||||
});
|
||||
|
||||
function handlePoliceDetail(record) {
|
||||
console.log(record)
|
||||
}
|
||||
function handlePoliceDetail(record) {
|
||||
$bus.emit(earlyWarning, record);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
setHeight();
|
||||
window.addEventListener('resize', setHeight);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', setHeight);
|
||||
});
|
||||
|
||||
function setHeight() {
|
||||
tableHeight.value = document.querySelector('.inner-screen').getBoundingClientRect().height - 60;
|
||||
}
|
||||
|
||||
async function init() {
|
||||
const { pageSize, current } = pagination.value;
|
||||
const { code, result } = await getMonitorList({ pageSize, pageNo: current });
|
||||
if (code == 200) {
|
||||
dataSource.value = [...result.records, ...result.records.map((item, i) => ({ ...item, id: item.id + i }))];
|
||||
pagination.value.total = result.total * 2;
|
||||
}
|
||||
}
|
||||
|
||||
function pageChange(page, pageS) {
|
||||
pagination.value.current = page;
|
||||
pagination.value.pageSize = pageS;
|
||||
init();
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner-screen {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
margin: 20px 0;
|
||||
<style lang="less" scoped>
|
||||
.inner-screen {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
margin: 20px 0;
|
||||
|
||||
.police-times {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.police-times {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer !important;
|
||||
|
||||
.police-text {
|
||||
padding-right: 20px;
|
||||
.position {
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url('/@/assets/img/position.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-thead) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
background-color: transparent;
|
||||
//pointer-events: none;
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody > tr > td) {
|
||||
border-bottom: none;
|
||||
padding: 6px 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-table-row:hover) {
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.police-icon {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url('/@/assets/images/terminal.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
//奇行
|
||||
.ant-table-striped :deep(.table-striped) td {
|
||||
background-color: #0a0a0c;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-thead) {
|
||||
display: none !important;
|
||||
}
|
||||
//偶行
|
||||
.ant-table-striped :deep(.table-default) td {
|
||||
color: #ffffff;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
//奇行-hover
|
||||
:deep(.ant-table-tbody > tr.ant-table-row.table-striped:hover > td, .ant-table-tbody > tr > td.table-striped) {
|
||||
background-color: #0a0a0c !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody > tr > td) {
|
||||
border-bottom: none;
|
||||
}
|
||||
//偶行-hover
|
||||
:deep(.ant-table-tbody > tr.ant-table-row.table-default:hover > td, .ant-table-tbody > tr > td.table-default) {
|
||||
color: #ffffff;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
:deep(.ant-table-row:hover) {
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
// 分页
|
||||
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
|
||||
background-color: #1f2935;
|
||||
color: #8291a9;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ant-table-striped :deep(.table-striped) td {
|
||||
background-color: #0a0a0c;
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.ant-pagination-item) {
|
||||
background-color: #1f2935;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ant-table-striped :deep(.table-default) td {
|
||||
color: #ffffff;
|
||||
}
|
||||
// 当前页选中的样式
|
||||
:deep(.ant-pagination-item-active) {
|
||||
background-color: #0081ff;
|
||||
}
|
||||
|
||||
// 分页
|
||||
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
|
||||
background-color: #1f2935;
|
||||
color: #8291a9;
|
||||
border: none;
|
||||
}
|
||||
:deep(.ant-pagination-item-active a) {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:deep(.ant-pagination-item) {
|
||||
background-color: #1f2935;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
:deep(.ant-pagination-item a) {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
// 当前页选中的样式
|
||||
:deep(.ant-pagination-item-active) {
|
||||
background-color: #0081ff;
|
||||
}
|
||||
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
|
||||
color: #ffffff;
|
||||
background-color: #1f2935;
|
||||
}
|
||||
|
||||
:deep(.ant-pagination-item-active a) {
|
||||
color: #ffffff;
|
||||
}
|
||||
// 省略样式
|
||||
:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:deep(.ant-pagination-item a) {
|
||||
color: #ffffff;
|
||||
}
|
||||
// 省略鼠标移入样式
|
||||
:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
|
||||
color: #ffffff;
|
||||
background-color: #1f2935;
|
||||
}
|
||||
|
||||
// 省略样式
|
||||
:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
// 省略鼠标移入样式
|
||||
:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
// 下一页
|
||||
:deep(.ant-pagination-next .ant-pagination-item-link) {
|
||||
background-color: #1f2935;
|
||||
color: #8291a9;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
// 下一页
|
||||
:deep(.ant-pagination-next .ant-pagination-item-link) {
|
||||
background-color: #1f2935;
|
||||
color: #8291a9;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,56 +1,62 @@
|
||||
<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 { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import { useStep } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
|
||||
import { screenPie } from '/@/components/item-d/pieCharts.ts';
|
||||
import { getStep } from '/@/components/secondaryScreen/commonApi.ts';
|
||||
|
||||
const {setSpin, spinning} = useSpin();
|
||||
const healthChart = ref<HTMLElement>();
|
||||
const props = defineProps({
|
||||
orgCode: String,
|
||||
type: String,
|
||||
});
|
||||
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 { stepData, getValue, setStep } = useStep();
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
const {code, result} = await getHealthDataList({});
|
||||
setSpin(true);
|
||||
if (code != 200) {
|
||||
return;
|
||||
async function init() {
|
||||
try {
|
||||
const params = {
|
||||
orgCode: props.orgCode,
|
||||
type: props.type,
|
||||
};
|
||||
const { code, result } = await getStep(params);
|
||||
setSpin(true);
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setStep(result);
|
||||
initChart(unref(stepData), '15000');
|
||||
} catch {
|
||||
initChart(unref(stepData), 0);
|
||||
}
|
||||
}
|
||||
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, '{c}');
|
||||
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);
|
||||
}
|
||||
</style>
|
||||
.inner {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user