趋势图

<template>
    <div v-if="dialogShow" class="wrap" ref="dialog">
        <!-- 趋势图 -->
        <!-- 这里不传也可以模拟 -->
        <chart :optionsData="resData" :title_name="title_name" :colorData="colorData" :gradeDate="gradeDate" :starttime="starttime" :endtime="endtime"></chart>
    </div>
</template>
<script setup>
// script里面加setup,组件无需注册，无需return
// 趋势图
import { defineComponent, ref, reactive, onMounted, onBeforeUnmount, computed, inject } from 'vue';
import chart from '../com/Chart/index.vue'
import { ewsData } from '/@/api/station/data'; //接口
import { useTrendreviewStore, } from '/@/store/modules/trendreview';
import { storeToRefs } from 'pinia';
import { awaitWrap } from '/@/utils/asycnUtil';
import dayjs from 'dayjs';

const dialog = ref();
const isClickDialog = ref(false);
const gradeDate = ref('2022-06-10');
const dialogShow = ref(true);
const title_name = ref('EWS评分');
let timer;
// ecahrts数据，父组件传数据，子组件处理数据
// const resData = ref([
//     { 
//         id: 1, 
//         name: '4:00 AM', 
//         value: 1,  //数据结构改变
//         gradeTime: "2022-06 7:48:54 PM", //数据结构改变 
//          这里
//         data: [
                // ['gradeTime', 'value']
//         ]
//         detail: [
//             { item_name: 'RR', item_value: '85' },
//             { item_name: 'TEMP', item_value: '20' },
//             { item_name: 'BP-S', item_value: '20'},
//             { item_name: 'HR', item_value: '20' },
//             { item_name: '意识(AVPU)', item_value: '清醒' }
//         ] 
//     },
//     { 
//         id: 2, 
//         name: '8:00 AM', 
//         value: 3, 
//         gradeTime: "2022-06 7:50:54 PM", 
//         detail: [
//             { item_name: 'R1', item_value: '85' },
//             { item_name: 'TEMP', item_value: '20' },
//             { item_name: 'BP-S', item_value: '20'},
//             { item_name: 'HR', item_value: '20' }, 
//             { item_name: '意识(AVPU)', item_value: '不清晰' }
//         ] 
//     },
//     { 
//         id: 3, 
//         name: '12:00 AM', 
//         value: 4, 
//         gradeTime: "2022-06 7:52:54 PM", 
//         detail:[
//             { item_name: 'R2', item_value: '85' },
//             { item_name: 'TEMP', item_value: '20' },
//             { item_name: 'BP-S', item_value: '20'},
//             { item_name: 'HR', item_value: '20' }, 
//             { item_name: '意识(AVPU)', item_value: '模糊' }
//         ]  
//     },
//     { 
//         id: 4, 
//         name: '16:00 PM', 
//         value: 5, 
//         gradeTime: "2022-06 7:54:54 PM", 
//         detail: [
//             { item_name: 'R3', item_value: '85' },
//             { item_name: 'TEMP', item_value: '20' },
//             { item_name: 'BP-S', item_value: '20'},
//             { item_name: 'HR', item_value: '20' }, 
//             { item_name: '意识(AVPU)', item_value: '无反应' }
//         ] 
//     },
//     { 
//         id: 5, 
//         name: '20:00 PM', 
//         value: 9, 
//         gradeTime: "2022-06 7:56:54 PM", 
//         detail: [
//             { item_name: 'R4', item_value: '85' },
//             { item_name: 'TEMP', item_value: '20' },
//             { item_name: 'BP-S', item_value: '20'},
//             { item_name: 'HR', item_value: '20' }, 
//             { item_name: '意识(AVPU)', item_value: '哈哈哈哈' }
//         ] 
//     },
//     { 
//         id: 6, 
//         name: '24:00 PM', 
//         value: 13, 
//         gradeTime: "2022-06 7:58:54 PM", 
//         detail: [
//             { item_name: 'R5', item_value: '85' },
//             { item_name: 'TEMP', item_value: '20' },
//             { item_name: 'BP-S', item_value: '20'},
//             { item_name: 'HR', item_value: '20' }, 
//             { item_name: '意识(AVPU)', item_value: '嘿嘿嘿' }
//         ] 
//     },
// ]);
const resData = ref([]);
// echarts根据y值范围设置不同颜色
const colorData = ref([
    {area: [0, 1], color: 'white'},
    {area: [1, 5], color: 'green'},
    {area: [5, 7], color: 'yellow'},
    {area: [7, 14], color: 'red'},
])
onMounted(() => {
    getData();
    // ref = dialog 监听到有click事件、关闭窗口
    // dialog.value.addEventListener('click',(e) => {
    //     isClickDialog.value = true
    // })
    // const stopTime = 3000000;
    // timer = setTimeout(() => {
    //     if(!isClickDialog.value){
    //         dialogShow.value = false;
    //         clearTimeout(timer);
    //     }
    // } ,stopTime)
})
// 清除定时器
// onBeforeUnmount(() => {
//     clearTimeout(timer);
// })

// ewsData请求所需要的传参
const useTrendreview = useTrendreviewStore()
const bedInfo = inject('bedInfo')
let type = [
    {
        name: 'MWES',
        value: 0
    },
    {
        name: 'NEWS',
        value: 1
    },
    {
        name: 'NEWS2',
        value: 2
    }
]
const bedArr = bedInfo.bedItem
const queryData = {
    bedno: bedArr.bedno,
    deptid: bedArr.belongdepartmentid,
    type: 2,
}

// 需要传给子组件,必须定义ref
const starttime = ref('');
const endtime = ref('');
// 请求接口数据
async function getData() {
    try {
        let {data} = await ewsData (queryData);
        // 获取起始时间
        starttime.value = data[0].starttime;
        endtime.value = data[0].endtime;
        // 根据data的格式,解析成需要的格式
        resData.value = data.map((item,index) => {
            return {
                id:index + 1,
                data: [item.scoretime, item.score],
                value: item.score,
                gradeTime: item.scoretime,
                detail:item.patEWSItems.map((el, i) => {
                    const flag = [0,3,7].includes(i);
                    if(flag){
                        el.range = el.scorename
                    }
                    return {item_name:el.item,item_value:el.range?el.range+'':'- -'}
                })
            }
        });
    } catch (error) {
        console.log(error || '操作失败');
    }
}
</script>
<style lang="less" scoped>
    .wrap {
        
    }
</style>