guochanhua/jcjyhr/web/src/views/backend/dashboard.vue

<template>
    <div class="default-main">
        <!-- <div class="banner">
            <el-row :gutter="10">
                <el-col :md="24" :lg="18">
                    <div class="welcome suspension">
                        <img class="welcome-img" :src="headerSvg" alt="" />
                        <div class="welcome-text">
                            <div class="welcome-title">{{ adminInfo.nickname + t('utils.comma') + getGreet() }}</div>
                            <div class="welcome-note">{{ state.remark }}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :lg="6" class="hidden-md-and-down">
                    <div class="working">
                        <img class="working-coffee" :src="coffeeSvg" alt="" />
                        <div class="working-text">
                            {{ t('dashboard.You have worked today') }}<span class="time">{{ state.workingTimeFormat }}</span>
                        </div>
                        <div @click="onChangeWorkState()" class="working-opt working-rest">
                            {{ state.pauseWork ? t('dashboard.Continue to work') : t('dashboard.have a bit of rest') }}
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div> -->
        <el-row :gutter="20">
          <el-col :sm="12" :lg="12">
            <el-card style="height: calc(50% - 10px);">
              <div class="small-panel-box">
                  <div class="panel-title-box">
                    <div class="title">互认情况</div>
                    <div>
                      <el-radio-group v-model="radio2" size="small" @change="eventHandler($event)">
                        <el-radio-button label="周" value="1" />
                        <el-radio-button label="月" value="2" />
                      </el-radio-group>
                    </div>
                  </div>
                  <el-row :gutter="20">
                    <el-col :sm="12" :lg="8">
                        <div class="small-panel user-reg suspension" style="border-left: 2px solid #D9001B;border-top-left-radius: 0;border-bottom-left-radius: 0;">
                            <div class="small-panel-title">互认的患者</div>
                            <div class="small-panel-content">
                                <div class="content-left">
                                    <!-- <Icon color="#8595F4" size="20" name="fa fa-line-chart" /> -->
                                    <!-- <Icon color="#74A8B5" size="20" name="fa fa-users" /> -->
                                    <span id="user_reg_number">{{state.dashboardData?.hr?.patient}}</span>
                                    <span class="text">人次</span>
                                </div>
                                <!-- <div class="content-right">+14%</div> -->
                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="8">
                        <div class="small-panel file suspension" style="border-left: 2px solid #95f204;border-top-left-radius: 0;border-bottom-left-radius: 0;">
                            <div class="small-panel-title">互认的医学影像项目</div>
                            <div class="small-panel-content">
                                <div class="content-left">
                                    <!-- <Icon color="#AD85F4" size="20" name="fa fa-file-text" /> -->
                                    <span id="file_number">{{state.dashboardData?.hr?.jc}}</span>
                                    <span class="text">项</span>
                                </div>
                                <!-- <div class="content-right">+50%</div> -->
                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="8">
                        <div class="small-panel users suspension" style="border-left: 2px solid #02A7F0;border-top-left-radius: 0;border-bottom-left-radius: 0;">
                            <div class="small-panel-title">互认的检验项目</div>
                            <div class="small-panel-content">
                                <div class="content-left">
                                    <!-- <Icon color="#74A8B5" size="20" name="fa fa-users" /> -->
                                    <!-- <Icon color="#AD85F4" size="20" name="fa fa-file-text" /> -->
                                    <span id="users_number">{{state.dashboardData?.hr?.jy}}</span>
                                    <span class="text">项</span>
                                </div>
                                <!-- <div class="content-right">+28%</div> -->
                            </div>
                        </div>
                    </el-col>
                  </el-row>
              </div>
            </el-card>
            <el-card style="height: calc(50% - 10px);">
              <div class="small-panel-box is-active">
                  <div class="title">互认项目字典</div>
                  <el-row :gutter="20">
                      <el-col :sm="12" :lg="12" @click="goDict('1')">
                          <div class="small-panel user-reg suspension" style="border-left: 2px solid #EC808D;border-top-left-radius: 0;border-bottom-left-radius: 0;">
                              <div class="small-panel-title" style="text-align: center;">医学影像项目</div>
                              <div class="small-panel-content">
                                  <div class="content-left">
                                      <!-- <Icon color="#8595F4" size="20" name="fa fa-line-chart" /> -->
                                      <!-- <Icon color="#AD85F4" size="20" name="fa fa-file-text" /> -->
                                      <span id="user_reg_number">{{state.dashboardData?.dict?.jc}}</span>
                                      <span class="text">人次</span>
                                  </div>
                                  <!-- <div class="content-right">+14%</div> -->
                              </div>
                          </div>
                      </el-col>
                      <el-col :sm="12" :lg="12" @click="goDict('2')">
                          <div class="small-panel file suspension" style="border-left: 2px solid #C280FF;border-top-left-radius: 0;border-bottom-left-radius: 0;">
                              <div class="small-panel-title" style="text-align: center;">临床检验项目</div>
                              <div class="small-panel-content">
                                  <div class="content-left">
                                      <!-- <Icon color="#AD85F4" size="20" name="fa fa-file-text" /> -->
                                      <span id="file_number">{{state.dashboardData?.dict?.jy}}</span>
                                      <span class="text">项</span>
                                  </div>
                                  <!-- <div class="content-right">+50%</div> -->
                              </div>
                          </div>
                      </el-col>
                  </el-row>
              </div>
            </el-card>
          </el-col>
          <el-col :sm="12" :lg="12" style="padding-left: 0;">
            <el-card>
              <div class="small-panel-box">
                  <div class="title" style="display: flex;justify-content: space-between;align-items: center;">
                    <span>今日互认动态</span>
                    <span class="more" @click="goHRResult">更多>></span>
                  </div>
                  <div class="table-container" v-loading="!state.tableData">
                    <el-table :data="state.tableData" border class="top-table" header-cell-class-name="table-header-cell" showOverflowTooltip style="width: 100%;">
                      <!-- 列定义 -->
                      <el-table-column type="index" align="center" />
                      <!-- <el-table-column prop="create_time" label="互认的时间" width="100" align="center"></el-table-column> -->
                      <el-table-column prop="create_time" label="互认时间" width="81" align="center">
                        <template #default="scope">
                          <span>{{timeFormat(scope.row.create_time, 'hh:MM')}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="ORGNAME" label="所属机构" align="center"></el-table-column>
                      <el-table-column prop="NAME" label="姓名" width="60" align="center"></el-table-column>
                      <el-table-column prop="LAB_ITEMNAME" label="检验项目" align="center"></el-table-column>
                      <el-table-column prop="EXAM_ITEMNAME" label="检查项目" align="center"></el-table-column>
                      <el-table-column prop="HRORGNAME" label="互认机构" align="center"></el-table-column>
                    </el-table>
                    <Vue3SeamlessScroll class="seamless" :list="state.tableData" :loop="false" :hover="true" :step="0.4" :wheel="true" :isWatch="true">
                      <el-table
                          ref="tableRef" :fit="true" :data="state.tableData" class="bottom-table" header-cell-class-name="table-header-cell" stripe showOverflowTooltip 
                          style="width: 100%">
                            <!-- 表格列定义 -->
                            <el-table-column type="index" align="center" />
                            <!-- <el-table-column prop="create_time" label="互认的时间" width="100" align="center"></el-table-column> -->
                            <el-table-column prop="create_time" label="互认的时间" width="81" align="center">
                              <template #default="scope">
                                <span>{{timeFormat(scope.row.create_time, 'hh:MM')}}</span>
                              </template>
                            </el-table-column>
                            <el-table-column prop="ORGNAME" label="所属机构" align="center"></el-table-column>
                            <el-table-column prop="NAME" label="姓名" width="60" align="center"></el-table-column>
                            <el-table-column prop="LAB_ITEMNAME" label="检验项目" align="center"></el-table-column>
                            <el-table-column prop="EXAM_ITEMNAME" label="检查项目" align="center"></el-table-column>
                            <el-table-column prop="HRORGNAME" label="互认机构" align="center"></el-table-column>
                          
                            <!-- 其他列 -->
                      </el-table>
                    </Vue3SeamlessScroll>
                  
                  
                  </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-card>
          <div class="small-panel-box">
            <div class="title">参与互认的机构统计</div>
            <el-row :gutter="20">
                <el-col :sm="12" :lg="3" v-for="([key, value]) in state.dashboardData?.hr_ins && Object.entries(state.dashboardData?.hr_ins)" :key="key">
                    <div class="small-panel user-reg suspension">
                        <div class="small-panel-title">{{key}}</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <!-- <Icon color="#8595F4" size="20" name="fa fa-line-chart" /> -->
                                <span id="user_reg_number">{{value}}</span>
                                <span class="text">家</span>
                            </div>
                            <!-- <div class="content-right">+14%</div> -->
                        </div>
                    </div>
                </el-col>
            </el-row>
          </div>
        </el-card>
        <el-card>
          <div class="small-panel-box is-active">
            <div class="title" style="display: flex;justify-content: space-between;align-items: center;">
              <span>参与互认的机构</span>
              <div class="mt-4">
                <el-input
                  v-model="state.insNameValue"
                  style="max-width: 600px"
                  placeholder="请输入机构名称过滤"
                  class="input-with-select"
                  clearable
                >
                  <template #prepend>
                    <el-select v-model="state.insTypeValue" @change="handelTypeChange" placeholder="机构类型" clearable style="width: 115px">
                      <el-option v-for="(item, index) in state.insTypeOption" :key="index" :label="item.label" :value="item.label" />
                      <!-- <el-option label="Order No." value="2" /> -->
                      <!-- <el-option label="Tel" value="3" /> -->
                    </el-select>
                  </template>
                  <template #append>
                    <el-button :icon="Search" @click="handelSearch"/>
                  </template>
                </el-input>
              </div>
            </div>
            <el-row :gutter="20">
                <el-col :sm="12" :lg="6" v-for="(item, i) in state.all_ins" :key="i" @click="goInstitution(item)">
                    <div class="small-panel user-reg suspension ins-panel">
                        <div class="small-panel-title">{{item.name}}</div>
                        <div class="small-panel-type">机构类型:  {{item.institution_type}}</div>
                        <div class="small-panel-type">创建时间:  {{item.create_time}}</div>
                        <!-- <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#8595F4" size="20" name="fa fa-line-chart" />
                                <span id="user_reg_number">{{value}}</span>
                                <span class="text">家</span>
                            </div>
                        </div> -->
                    </div>
                </el-col>
            </el-row>
          </div>
        </el-card>
        
        <!-- <div class="growth-chart">
            <el-row :gutter="20">
                <el-col class="lg-mb-20" :xs="24" :sm="24" :md="12" :lg="9">
                    <el-card shadow="hover" :header="t('dashboard.Membership growth')">
                        <div class="user-growth-chart" :ref="chartRefs.set"></div>
                    </el-card>
                </el-col>
                <el-col class="lg-mb-20" :xs="24" :sm="24" :md="12" :lg="9">
                    <el-card shadow="hover" :header="t('dashboard.Annex growth')">
                        <div class="file-growth-chart" :ref="chartRefs.set"></div>
                    </el-card>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="6">
                    <el-card class="new-user-card" shadow="hover" :header="t('dashboard.New member')">
                        <div class="new-user-growth">
                            <el-scrollbar>
                                <div class="new-user-item">
                                    <img class="new-user-avatar" src="~assets/login-header.png" alt="" />
                                    <div class="new-user-base">
                                        <div class="new-user-name">妙码生花</div>
                                        <div class="new-user-time">12分钟前{{ t('dashboard.Joined us') }}</div>
                                    </div>
                                    <Icon class="new-user-arrow" color="#8595F4" name="fa fa-angle-right" />
                                </div>
                                <div class="new-user-item">
                                    <img class="new-user-avatar" src="~assets/login-header.png" alt="" />
                                    <div class="new-user-base">
                                        <div class="new-user-name">码上生花</div>
                                        <div class="new-user-time">12分钟前{{ t('dashboard.Joined us') }}</div>
                                    </div>
                                    <Icon class="new-user-arrow" color="#8595F4" name="fa fa-angle-right" />
                                </div>
                                <div class="new-user-item">
                                    <img class="new-user-avatar" src="~assets/login-header.png" alt="" />
                                    <div class="new-user-base">
                                        <div class="new-user-name">Admin</div>
                                        <div class="new-user-time">12分钟前{{ t('dashboard.Joined us') }}</div>
                                    </div>
                                    <Icon class="new-user-arrow" color="#8595F4" name="fa fa-angle-right" />
                                </div>
                                <div class="new-user-item">
                                    <img class="new-user-avatar" :src="fullUrl('/static/images/avatar.png')" alt="" />
                                    <div class="new-user-base">
                                        <div class="new-user-name">纯属虚构</div>
                                        <div class="new-user-time">12分钟前{{ t('dashboard.Joined us') }}</div>
                                    </div>
                                    <Icon class="new-user-arrow" color="#8595F4" name="fa fa-angle-right" />
                                </div>
                            </el-scrollbar>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div> -->

        <!-- <div class="growth-chart">
            <el-row :gutter="20">
                <el-col class="lg-mb-20" :xs="24" :sm="24" :md="24" :lg="12">
                    <el-card shadow="hover" :header="t('dashboard.Member source')">
                        <div class="user-source-chart" :ref="chartRefs.set"></div>
                    </el-card>
                </el-col>
                <el-col class="lg-mb-20" :xs="24" :sm="24" :md="24" :lg="12">
                    <el-card shadow="hover" :header="t('dashboard.Member last name')">
                        <div class="user-surname-chart" :ref="chartRefs.set"></div>
                    </el-card>
                </el-col>
            </el-row>
        </div> -->
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref, nextTick, onActivated, watch, onBeforeMount, onBeforeUnmount } from 'vue'
import headerSvg from '/@/assets/dashboard/header-1.svg'
import coffeeSvg from '/@/assets/dashboard/coffee.svg'
import { CountUp } from 'countup.js'
import * as echarts from 'echarts'
import { useNavTabs } from '/@/stores/navTabs'
import { useTemplateRefsList } from '@vueuse/core'
import { index, getDashboard, getHrpatientList, getInsType, getAllIns } from '/@/api/backend/dashboard'
import { useI18n } from 'vue-i18n'
import { Local } from '/@/utils/storage'
import { useAdminInfo } from '/@/stores/adminInfo'
import { WORKING_TIME } from '/@/stores/constant/cacheKey'
import { fullUrl, getGreet } from '/@/utils/common'
import { useEventListener } from '@vueuse/core'
import { setTimeout } from 'timers/promises'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { routePush } from '/@/utils/router'
import { timeFormat } from '/@/utils/common'
import { Search, Delete } from '@element-plus/icons-vue'

let workTimer: number

defineOptions({
    name: 'dashboard',
})
const classOptions = reactive({
    step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
    limitMoveNum: 10,//无缝滚动列表元素的长度，一般设置为列表的长度
    direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
 
});
const d = new Date()
const { t } = useI18n()
const navTabs = useNavTabs()
const adminInfo = useAdminInfo()
const chartRefs = useTemplateRefsList<HTMLDivElement>()

const state: {
    charts: any[]
    remark: string
    workingTimeFormat: string
    pauseWork: boolean
    dashboardData: any
    tableData: any[]
    lastId: string
    insNameValue: string
    insTypeValue: string
    insTypeOption: any[]
    stempDashboardData: any[]
    all_ins: any[]
} = reactive({
    charts: [],
    remark: 'dashboard.Loading',
    workingTimeFormat: '',
    pauseWork: false,
    dashboardData: {},
    tableData: [],
    lastId: '',
    insNameValue: '',
    insTypeValue: '',
    insTypeOption: [],
    stempDashboardData: [],
    all_ins: []
})
const radio2 = ref('1')
index().then((res) => {
    state.remark = res.data.remark
})
const fetchDashboard = () => {
    // 1 按周统计 2 按月统计
    getDashboard({type: radio2.value}).then((res) => {
        // state.stempDashboardData = res.data.all_ins
        state.dashboardData = res.data
        // state.dashboardData.all_ins = state.stempDashboardData.filter((item: any) => state.insNameValue ? item.name === state.insNameValue && item.institution_type === e : item.institution_type === e);
    })
}
const fetchAllIns = () => {
    getAllIns({type: state.insTypeValue, name: state.insNameValue}).then((res) => {
        state.all_ins = res.data.all_ins
    })
}
const fetchGetInsType = () => {
    getInsType().then((res) => {
        console.log(res)
        state.insTypeOption = res.data.map((item:any, index:any) => {
            return {
                label: item,
                value: index
            }
        })
        console.log(state.insTypeOption, '00909090')
    })
}
const handelTypeChange = (e: any) => {
    fetchAllIns()
    // state.dashboardData.all_ins = state.stempDashboardData.filter((item: any) => state.insNameValue ? item.name === state.insNameValue && item.institution_type === e : item.institution_type === e);
}
const handelSearch = () => {
    fetchAllIns()
    // if(state.insNameValue == '') {
    //     state.dashboardData.all_ins = state.stempDashboardData.filter((item: any) => state.insTypeValue ? item.institution_type === state.insTypeValue : item);
    //     return
    // }
    // state.dashboardData.all_ins = state.stempDashboardData.filter((item: any) => state.insTypeValue ? item.institution_type === state.insTypeValue && item.name === state.insNameValue : item.name === state.insNameValue);
}
const eventHandler = (e: string) => {
    radio2.value  = e
    fetchDashboard()
}
const fetchHrpatientList = () => {
    getHrpatientList({ID: state.lastId || 0 }).then((res) => {
        // state.tableData = res.data.list
        if (res.data.list.length > 0 && res.data.list.some((item: any) => !state.tableData.includes(item))) {
            state.tableData.push(...res.data.list.filter((item: any) => !state.tableData.includes(item)));
        }
        console.log(state.tableData.length)
        state.lastId = res.data.lastId
    })
}
const tableRef = ref<any>(null);
const goDict = (type: string) => {
    // type 1 影像互认字典 2 检验互认字典
    type === '1'?routePush('/admin/dict/examproject'):routePush('/admin/dict/labitem')
    // routePush('/admin/dict/labitem')
}
const goHRResult = () => {
    routePush('/admin/hospital/hrpatient')
}
const goInstitution = (item: any) => {
    routePush('/admin/hospital/hrpatient?name=' + item.name + '&code=' + item.institution_code)
}
const countUpFun = (id: string) => {
    nextTick(() => {
        let value = document.getElementById(id)?.innerText
        if (value) {
            new CountUp(id, parseInt(value), {
                startVal: 0,
                duration: 3,
            }).start()
        }
    })
}

const initCountUp = () => {
    countUpFun('user_reg_number')
    countUpFun('file_number')
    countUpFun('users_number')
    countUpFun('addons_number')
}

const initUserGrowthChart = () => {
    const userGrowthChart = echarts.init(chartRefs.value[0] as HTMLElement)
    const option = {
        grid: {
            top: 0,
            right: 0,
            bottom: 20,
            left: 0,
        },
        xAxis: {
            data: [
                t('dashboard.Monday'),
                t('dashboard.Tuesday'),
                t('dashboard.Wednesday'),
                t('dashboard.Thursday'),
                t('dashboard.Friday'),
                t('dashboard.Saturday'),
                t('dashboard.Sunday'),
            ],
        },
        yAxis: {},
        legend: {
            data: [t('dashboard.Visits'), t('dashboard.Registration volume')],
            textStyle: {
                color: '#73767a',
            },
        },
        series: [
            {
                name: t('dashboard.Visits'),
                data: [100, 160, 280, 230, 190, 200, 480],
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: '#8595F4',
                },
            },
            {
                name: t('dashboard.Registration volume'),
                data: [45, 180, 146, 99, 210, 127, 288],
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: '#F48595',
                    opacity: 0.5,
                },
            },
        ],
    }
    userGrowthChart.setOption(option)
    state.charts.push(userGrowthChart)
}

const initFileGrowthChart = () => {
    const fileGrowthChart = echarts.init(chartRefs.value[1] as HTMLElement)
    const option = {
        grid: {
            top: 30,
            right: 0,
            bottom: 20,
            left: 0,
        },
        tooltip: {
            trigger: 'item',
        },
        legend: {
            type: 'scroll',
            bottom: 15,
            data: (function () {
                var list = []
                for (var i = 1; i <= 12; i++) {
                    list.push(i + t('dashboard.month'))
                }
                return list
            })(),
            textStyle: {
                color: '#73767a',
            },
        },
        visualMap: {
            top: 'middle',
            right: 10,
            color: ['red', 'yellow'],
            calculable: true,
        },
        radar: {
            indicator: [
                { name: t('dashboard.picture') },
                { name: t('dashboard.file') },
                { name: t('dashboard.table') },
                { name: t('dashboard.Compressed package') },
            ],
        },
        series: (function () {
            var series = []
            for (var i = 1; i <= 12; i++) {
                series.push({
                    type: 'radar',
                    symbol: 'none',
                    lineStyle: {
                        width: 1,
                    },
                    emphasis: {
                        areaStyle: {
                            color: 'rgba(0,250,0,0.3)',
                        },
                    },
                    data: [
                        {
                            value: [(40 - i) * 10, (38 - i) * 4 + 60, i * 5 + 10, i * 20],
                            name: i + t('dashboard.month'),
                        },
                    ],
                })
            }
            return series
        })(),
    }
    fileGrowthChart.setOption(option)
    state.charts.push(fileGrowthChart)
}

const initUserSourceChart = () => {
    const UserSourceChart = echarts.init(chartRefs.value[2] as HTMLElement)
    const pathSymbols = {
        reindeer:
            'path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.824c6.031-1.952,15.182-0.165,19.498-3.937 c1.15-3.933-1.24-9.846-1.229-9.938c0.008-0.062-1.314-0.004-1.803-0.258c-1.119-0.771-6.531-3.75-0.17-3.33 c0.314-0.045,0.943,0.259,1.439,0.435c-0.289-1.694-0.92-0.144-3.311-1.946c0,0-1.1-0.855-1.764-1.98 c-0.836-1.09-2.01-2.825-2.992-4.031c-1.523-2.476,1.367,0.709,1.816,1.108c1.768,1.704,1.844,3.281,3.232,3.983 c0.195,0.203,1.453,0.164,0.926-0.468c-0.525-0.632-1.367-1.278-1.775-2.341c-0.293-0.703-1.311-2.326-1.566-2.711 c-0.256-0.384-0.959-1.718-1.67-2.351c-1.047-1.187-0.268-0.902,0.521-0.07c0.789,0.834,1.537,1.821,1.672,2.023 c0.135,0.203,1.584,2.521,1.725,2.387c0.102-0.259-0.035-0.428-0.158-0.852c-0.125-0.423-0.912-2.032-0.961-2.083 c-0.357-0.852-0.566-1.908-0.598-3.333c0.4-2.375,0.648-2.486,0.549-0.705c0.014,1.143,0.031,2.215,0.602,3.247 c0.807,1.496,1.764,4.064,1.836,4.474c0.561,3.176,2.904,1.749,2.281-0.126c-0.068-0.446-0.109-2.014-0.287-2.862 c-0.18-0.849-0.219-1.688-0.113-3.056c0.066-1.389,0.232-2.055,0.277-2.299c0.285-1.023,0.4-1.088,0.408,0.135 c-0.059,0.399-0.131,1.687-0.125,2.655c0.064,0.642-0.043,1.768,0.172,2.486c0.654,1.928-0.027,3.496,1,3.514 c1.805-0.424,2.428-1.218,2.428-2.346c-0.086-0.704-0.121-0.843-0.031-1.193c0.221-0.568,0.359-0.67,0.312-0.076 c-0.055,0.287,0.031,0.533,0.082,0.794c0.264,1.197,0.912,0.114,1.283-0.782c0.15-0.238,0.539-2.154,0.545-2.522 c-0.023-0.617,0.285-0.645,0.309,0.01c0.064,0.422-0.248,2.646-0.205,2.334c-0.338,1.24-1.105,3.402-3.379,4.712 c-0.389,0.12-1.186,1.286-3.328,2.178c0,0,1.729,0.321,3.156,0.246c1.102-0.19,3.707-0.027,4.654,0.269 c1.752,0.494,1.531-0.053,4.084,0.164c2.26-0.4,2.154,2.391-1.496,3.68c-2.549,1.405-3.107,1.475-2.293,2.984 c3.484,7.906,2.865,13.183,2.193,16.466c2.41,0.271,5.732-0.62,7.301,0.725c0.506,0.333,0.648,1.866-0.457,2.86 c-4.105,2.745-9.283,7.022-13.904,7.662c-0.977-0.194,0.156-2.025,0.803-2.247l1.898-0.03c0.596-0.101,0.936-0.669,1.152-1.139 c3.16-0.404,5.045-3.775,8.246-4.818c-4.035-0.718-9.588,3.981-12.162,1.051c-5.043,1.423-11.449,1.84-15.895,1.111 c-3.105,2.687-7.934,4.021-12.115,5.866c-3.271,3.511-5.188,8.086-9.967,10.414c-0.986,0.119-0.48-1.974,0.066-2.385l1.795-0.618 C-22.995,25.682-22.849,25.035-22.788,24.521z',
        plane: 'path://M1.112,32.559l2.998,1.205l-2.882,2.268l-2.215-0.012L1.112,32.559z M37.803,23.96 c0.158-0.838,0.5-1.509,0.961-1.904c-0.096-0.037-0.205-0.071-0.344-0.071c-0.777-0.005-2.068-0.009-3.047-0.009 c-0.633,0-1.217,0.066-1.754,0.18l2.199,1.804H37.803z M39.738,23.036c-0.111,0-0.377,0.325-0.537,0.924h1.076 C40.115,23.361,39.854,23.036,39.738,23.036z M39.934,39.867c-0.166,0-0.674,0.705-0.674,1.986s0.506,1.986,0.674,1.986 s0.672-0.705,0.672-1.986S40.102,39.867,39.934,39.867z M38.963,38.889c-0.098-0.038-0.209-0.07-0.348-0.073 c-0.082,0-0.174,0-0.268-0.001l-7.127,4.671c0.879,0.821,2.42,1.417,4.348,1.417c0.979,0,2.27-0.006,3.047-0.01 c0.139,0,0.25-0.034,0.348-0.072c-0.646-0.555-1.07-1.643-1.07-2.967C37.891,40.529,38.316,39.441,38.963,38.889z M32.713,23.96 l-12.37-10.116l-4.693-0.004c0,0,4,8.222,4.827,10.121H32.713z M59.311,32.374c-0.248,2.104-5.305,3.172-8.018,3.172H39.629 l-25.325,16.61L9.607,52.16c0,0,6.687-8.479,7.95-10.207c1.17-1.6,3.019-3.699,3.027-6.407h-2.138 c-5.839,0-13.816-3.789-18.472-5.583c-2.818-1.085-2.396-4.04-0.031-4.04h0.039l-3.299-11.371h3.617c0,0,4.352,5.696,5.846,7.5 c2,2.416,4.503,3.678,8.228,3.87h30.727c2.17,0,4.311,0.417,6.252,1.046c3.49,1.175,5.863,2.7,7.199,4.027 C59.145,31.584,59.352,32.025,59.311,32.374z M22.069,30.408c0-0.815-0.661-1.475-1.469-1.475c-0.812,0-1.471,0.66-1.471,1.475 s0.658,1.475,1.471,1.475C21.408,31.883,22.069,31.224,22.069,30.408z M27.06,30.408c0-0.815-0.656-1.478-1.466-1.478 c-0.812,0-1.471,0.662-1.471,1.478s0.658,1.477,1.471,1.477C26.404,31.885,27.06,31.224,27.06,30.408z M32.055,30.408 c0-0.815-0.66-1.475-1.469-1.475c-0.808,0-1.466,0.66-1.466,1.475s0.658,1.475,1.466,1.475 C31.398,31.883,32.055,31.224,32.055,30.408z M37.049,30.408c0-0.815-0.658-1.478-1.467-1.478c-0.812,0-1.469,0.662-1.469,1.478 s0.656,1.477,1.469,1.477C36.389,31.885,37.049,31.224,37.049,30.408z M42.039,30.408c0-0.815-0.656-1.478-1.465-1.478 c-0.811,0-1.469,0.662-1.469,1.478s0.658,1.477,1.469,1.477C41.383,31.885,42.039,31.224,42.039,30.408z M55.479,30.565 c-0.701-0.436-1.568-0.896-2.627-1.347c-0.613,0.289-1.551,0.476-2.73,0.476c-1.527,0-1.639,2.263,0.164,2.316 C52.389,32.074,54.627,31.373,55.479,30.565z',
        rocket: 'path://M-244.396,44.399c0,0,0.47-2.931-2.427-6.512c2.819-8.221,3.21-15.709,3.21-15.709s5.795,1.383,5.795,7.325C-237.818,39.679-244.396,44.399-244.396,44.399z M-260.371,40.827c0,0-3.881-12.946-3.881-18.319c0-2.416,0.262-4.566,0.669-6.517h17.684c0.411,1.952,0.675,4.104,0.675,6.519c0,5.291-3.87,18.317-3.87,18.317H-260.371z M-254.745,18.951c-1.99,0-3.603,1.676-3.603,3.744c0,2.068,1.612,3.744,3.603,3.744c1.988,0,3.602-1.676,3.602-3.744S-252.757,18.951-254.745,18.951z M-255.521,2.228v-5.098h1.402v4.969c1.603,1.213,5.941,5.069,7.901,12.5h-17.05C-261.373,7.373-257.245,3.558-255.521,2.228zM-265.07,44.399c0,0-6.577-4.721-6.577-14.896c0-5.942,5.794-7.325,5.794-7.325s0.393,7.488,3.211,15.708C-265.539,41.469-265.07,44.399-265.07,44.399z M-252.36,45.15l-1.176-1.22L-254.789,48l-1.487-4.069l-1.019,2.116l-1.488-3.826h8.067L-252.36,45.15z',
        train: 'path://M67.335,33.596L67.335,33.596c-0.002-1.39-1.153-3.183-3.328-4.218h-9.096v-2.07h5.371 c-4.939-2.07-11.199-4.141-14.89-4.141H19.72v12.421v5.176h38.373c4.033,0,8.457-1.035,9.142-5.176h-0.027 c0.076-0.367,0.129-0.751,0.129-1.165L67.335,33.596L67.335,33.596z M27.999,30.413h-3.105v-4.141h3.105V30.413z M35.245,30.413 h-3.104v-4.141h3.104V30.413z M42.491,30.413h-3.104v-4.141h3.104V30.413z M49.736,30.413h-3.104v-4.141h3.104V30.413z  M14.544,40.764c1.143,0,2.07-0.927,2.07-2.07V35.59V25.237c0-1.145-0.928-2.07-2.07-2.07H-9.265c-1.143,0-2.068,0.926-2.068,2.07 v10.351v3.105c0,1.144,0.926,2.07,2.068,2.07H14.544L14.544,40.764z M8.333,26.272h3.105v4.141H8.333V26.272z M1.087,26.272h3.105 v4.141H1.087V26.272z M-6.159,26.272h3.105v4.141h-3.105V26.272z M-9.265,41.798h69.352v1.035H-9.265V41.798z',
    }
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none',
            },
            formatter: function (params: any) {
                return params[0].name + ': ' + params[0].value
            },
        },
        xAxis: {
            data: [t('dashboard.Baidu'), t('dashboard.Direct access'), t('dashboard.take a plane'), t('dashboard.Take the high-speed railway')],
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: {
                color: '#e54035',
            },
        },
        yAxis: {
            splitLine: { show: false },
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: { show: false },
        },
        color: ['#e54035'],
        series: [
            {
                name: 'hill',
                type: 'pictorialBar',
                barCategoryGap: '-130%',
                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                itemStyle: {
                    opacity: 0.5,
                },
                emphasis: {
                    itemStyle: {
                        opacity: 1,
                    },
                },
                data: [123, 60, 25, 80],
                z: 10,
            },
            {
                name: 'glyph',
                type: 'pictorialBar',
                barGap: '-100%',
                symbolPosition: 'end',
                symbolSize: 50,
                symbolOffset: [0, '-120%'],
                data: [
                    {
                        value: 123,
                        symbol: pathSymbols.reindeer,
                        symbolSize: [60, 60],
                    },
                    {
                        value: 60,
                        symbol: pathSymbols.rocket,
                        symbolSize: [50, 60],
                    },
                    {
                        value: 25,
                        symbol: pathSymbols.plane,
                        symbolSize: [65, 35],
                    },
                    {
                        value: 80,
                        symbol: pathSymbols.train,
                        symbolSize: [50, 30],
                    },
                ],
            },
        ],
    }
    UserSourceChart.setOption(option)
    state.charts.push(UserSourceChart)
}

const initUserSurnameChart = () => {
    const userSurnameChart = echarts.init(chartRefs.value[3] as HTMLElement)
    const data = genData(50)
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: data.legendData,
            textStyle: {
                color: '#73767a',
            },
        },
        series: [
            {
                name: t('dashboard.full name'),
                type: 'pie',
                radius: '55%',
                center: ['40%', '50%'],
                data: data.seriesData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                },
            },
        ],
    }
    function genData(count: any) {
        // prettier-ignore
        const nameList = [
            '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
        ];
        const legendData = []
        const seriesData = []
        for (var i = 0; i < count; i++) {
            var name = Math.random() > 0.65 ? makeWord(4, 1) + '·' + makeWord(3, 0) : makeWord(2, 1)
            legendData.push(name)
            seriesData.push({
                name: name,
                value: Math.round(Math.random() * 100000),
            })
        }
        return {
            legendData: legendData,
            seriesData: seriesData,
        }
        function makeWord(max: any, min: any) {
            const nameLen = Math.ceil(Math.random() * max + min)
            const name = []
            for (var i = 0; i < nameLen; i++) {
                name.push(nameList[Math.round(Math.random() * nameList.length - 1)])
            }
            return name.join('')
        }
    }
    userSurnameChart.setOption(option)
    state.charts.push(userSurnameChart)
}

const echartsResize = () => {
    nextTick(() => {
        for (const key in state.charts) {
            state.charts[key].resize()
        }
    })
}

const onChangeWorkState = () => {
    const time = parseInt((new Date().getTime() / 1000).toString())
    const workingTime = Local.get(WORKING_TIME)
    if (state.pauseWork) {
        // 继续工作
        workingTime.pauseTime += time - workingTime.startPauseTime
        workingTime.startPauseTime = 0
        Local.set(WORKING_TIME, workingTime)
        state.pauseWork = false
        startWork()
    } else {
        // 暂停工作
        workingTime.startPauseTime = time
        Local.set(WORKING_TIME, workingTime)
        clearInterval(workTimer)
        state.pauseWork = true
    }
}

const startWork = () => {
    const workingTime = Local.get(WORKING_TIME) || { date: '', startTime: 0, pauseTime: 0, startPauseTime: 0 }
    const currentDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
    const time = parseInt((new Date().getTime() / 1000).toString())

    if (workingTime.date != currentDate) {
        workingTime.date = currentDate
        workingTime.startTime = time
        workingTime.pauseTime = workingTime.startPauseTime = 0
        Local.set(WORKING_TIME, workingTime)
    }

    let startPauseTime = 0
    if (workingTime.startPauseTime <= 0) {
        state.pauseWork = false
        startPauseTime = 0
    } else {
        state.pauseWork = true
        startPauseTime = time - workingTime.startPauseTime // 已暂停时间
    }

    let workingSeconds = time - workingTime.startTime - workingTime.pauseTime - startPauseTime

    state.workingTimeFormat = formatSeconds(workingSeconds)
    if (!state.pauseWork) {
        workTimer = window.setInterval(() => {
            workingSeconds++
            state.workingTimeFormat = formatSeconds(workingSeconds)
        }, 1000)
    }
}

const formatSeconds = (seconds: number) => {
    var secondTime = 0 // 秒
    var minuteTime = 0 // 分
    var hourTime = 0 // 小时
    var dayTime = 0 // 天
    var result = ''

    if (seconds < 60) {
        secondTime = seconds
    } else {
        // 获取分钟，除以60取整数，得到整数分钟
        minuteTime = Math.floor(seconds / 60)
        // 获取秒数，秒数取佘，得到整数秒数
        secondTime = Math.floor(seconds % 60)
        // 如果分钟大于60，将分钟转换成小时
        if (minuteTime >= 60) {
            // 获取小时，获取分钟除以60，得到整数小时
            hourTime = Math.floor(minuteTime / 60)
            // 获取小时后取佘的分，获取分钟除以60取佘的分
            minuteTime = Math.floor(minuteTime % 60)
            if (hourTime >= 24) {
                // 获取天数， 获取小时除以24，得到整数天
                dayTime = Math.floor(hourTime / 24)
                // 获取小时后取余小时，获取分钟除以24取余的分；
                hourTime = Math.floor(hourTime % 24)
            }
        }
    }

    result =
        hourTime +
        t('dashboard.hour') +
        ((minuteTime >= 10 ? minuteTime : '0' + minuteTime) + t('dashboard.minute')) +
        ((secondTime >= 10 ? secondTime : '0' + secondTime) + t('dashboard.second'))
    if (dayTime > 0) {
        result = dayTime + t('dashboard.day') + result
    }
    return result
}

onActivated(() => {
    echartsResize()
})
const intervalRef = ref<any>(null);
onMounted(() => {
    fetchDashboard()
    fetchAllIns()
    fetchHrpatientList()
    fetchGetInsType()
    intervalRef.value = setInterval(() => {
        fetchDashboard()
        fetchHrpatientList()
        fetchAllIns()
    }, 60000);
    // startWork()
    // initCountUp()
    // initUserGrowthChart()
    // initFileGrowthChart()
    // initUserSourceChart()
    // initUserSurnameChart()
    // useEventListener(window, 'resize', echartsResize)
})

onBeforeMount(() => {
    for (const key in state.charts) {
        state.charts[key].dispose()
    }
})

onUnmounted(() => {
    // alert('onUnmounted')
    clearInterval(workTimer)
    clearInterval(intervalRef.value)
})
onBeforeUnmount(() => {
    // alert('onBeforeUnmount')
})
watch(
    () => navTabs.state.tabFullScreen,
    () => {
        echartsResize()
    }
)
</script>

<style scoped lang="scss">
.welcome {
    background: #e1eaf9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 15px 20px !important;
    box-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.05);
    .welcome-img {
        height: 100px;
        margin-right: 10px;
        user-select: none;
    }
    .welcome-title {
        font-size: 1.5rem;
        line-height: 30px;
        color: var(--ba-color-primary-light);
    }
    .welcome-note {
        padding-top: 6px;
        font-size: 15px;
        color: var(--el-text-color-primary);
    }
}
.working {
    height: 130px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 100%;
    position: relative;
    &:hover {
        .working-coffee {
            -webkit-transform: translateY(-4px) scale(1.02);
            -moz-transform: translateY(-4px) scale(1.02);
            -ms-transform: translateY(-4px) scale(1.02);
            -o-transform: translateY(-4px) scale(1.02);
            transform: translateY(-4px) scale(1.02);
            z-index: 999;
        }
    }
    .working-coffee {
        transition: all 0.3s ease;
        width: 80px;
    }
    .working-text {
        display: block;
        width: 100%;
        font-size: 15px;
        text-align: center;
        color: var(--el-text-color-primary);
    }
    .working-opt {
        position: absolute;
        top: -40px;
        right: 10px;
        background-color: rgba($color: #000000, $alpha: 0.3);
        padding: 10px 20px;
        border-radius: 20px;
        color: var(--ba-bg-color-overlay);
        transition: all 0.3s ease;
        cursor: pointer;
        opacity: 0;
        z-index: 999;
        &:active {
            background-color: rgba($color: #000000, $alpha: 0.6);
        }
    }
    &:hover {
        .working-opt {
            opacity: 1;
            top: 0;
        }
        .working-done {
            opacity: 1;
            top: 50px;
        }
    }
}
.small-panel-box {
    // margin-top: 20px;
    // background: var(--ba-bg-color-overlay)
}
.small-panel {
    background-color: var(--ba-vars-color-gray);
    border-radius: var(--el-border-radius-base);
    
    padding: 15px 0;
    // margin-bottom: 20px;
    text-align: center;
    .small-panel-title {
        // color: #92969a;
        // color: var(--ba-vars-color-main-primary);
        font-size: 15px;
        font-weight: 500;
    }
    .small-panel-content {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-top: 5px;
        color: #2c3f5d;
        .content-left {
            font-size: 24px;
            color: #2B47A2;
            font-weight: var(--el-font-weight-primary);
            .icon {
                margin-right: 10px;
            }
            span {
                display: inline-block;
                font-size: 28px;
            }
        }
        .content-right {
            font-size: 18px;
            margin-left: auto;
        }
        .color-success {
            color: var(--el-color-success);
        }
        .color-warning {
            color: var(--el-color-warning);
        }
        .color-danger {
            color: var(--el-color-danger);
        }
        .color-info {
            color: var(--el-text-color-secondary);
        }
        .text { 
          font-size: 16px!important;
        }
    }
}
.ins-panel{
  border: 1px solid #2B47A2;
  margin-bottom: 20px;
  background-color: #fff;
  .small-panel-title {
    color: #2B47A2;
  }
}
.is-active {
  .small-panel {
    text-align: left;
    padding: 15px;
    // background: var(--ba-vars-color-tabs)
  }
  .small-panel:hover {
    background: var(--ba-vars-color-tabs-active);
    cursor: pointer;
  }
  .small-panel-title {
    // margin-bottom: 10px;
    // color: var(--ba-vars-color-main-primary);
    font-weight: 500;
  }
  .small-panel-type {
    line-height: 20px;
    margin: 5px 0;
  }
}
.seamless {
  width: 100%;
  height: 220px;
  overflow: hidden;
}
:deep .top-table .el-table__body-wrapper {
  display: none;
}
:deep .bottom-table .el-table__header-wrapper {
  display: none;
}

.growth-chart {
    margin-bottom: 20px;
}
.user-growth-chart,
.file-growth-chart {
    height: 260px;
}
.new-user-growth {
    height: 300px;
}

.user-source-chart,
.user-surname-chart {
    height: 400px;
}
.new-user-item {
    display: flex;
    align-items: center;
    padding: 20px;
    margin: 10px 15px;
    box-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.05);
    background-color: var(--ba-bg-color-overlay);
    .new-user-avatar {
        height: 48px;
        width: 48px;
        border-radius: 50%;
    }
    .new-user-base {
        margin-left: 10px;
        color: #2c3f5d;
        .new-user-name {
            font-size: 15px;
        }
        .new-user-time {
            font-size: 13px;
        }
    }
    .new-user-arrow {
        margin-left: auto;
    }
}
:deep(.el-card) {
    margin-bottom: 10px;
    box-shadow: none;
}
:deep(.el-card__body) {
    padding: 10px;
}

@media screen and (max-width: 425px) {
    .welcome-img {
        display: none;
    }
}
@media screen and (max-width: 1200px) {
    .lg-mb-20 {
        margin-bottom: 20px;
    }
}
html.dark {
    .welcome {
        background-color: var(--ba-bg-color-overlay);
    }
    .small-panel {
        background-color: var(--ba-bg-color-overlay);
        .small-panel-content {
            color: var(--el-text-color-regular);
        }
    }
    .new-user-item {
        .new-user-base {
            color: var(--el-text-color-regular);
        }
    }
}
.panel-title-box {
  display: flex;
  justify-content: space-between;
}
.title {
  border-left: 2px solid #C66237;
  padding: 0px 5px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 16px;
  .more {
    color: var(--ba-vars-color-main-primary);
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
  }
}
:deep(.el-tooltip__trigger) {
  background: #fff!important;
}
:deep(.el-input-group__append) {
  background: #fff;
}
.el-button :deep(.el-icon) {
  color: var(--ba-vars-color-main-primary);
}
:deep(.el-radio-button.is-active) {
  --el-radio-button-checked-bg-color: var(--ba-vars-color-main-primary)
}

</style>