manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/login.vue

<template>
    <div @click="tologin">登录</div>
    <h2> {{ store.name }}</h2>
    <h1 @click="changeName">修改名称</h1>
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
    <div @click="networkRequest()">点击发起网络请求</div>
    <div class="abc fonsSize30">测试sass样式</div>
    <div class="text-pink-200">1111</div>
    <div :style="{ width: '1230px', height: '350px' }">
        <Echarts :option="option" />
    </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import Echarts from '@/components/ReEcharts/index.vue';
import { useRoute, useRouter } from 'vue-router'
import { useStore } from "../store/index";
import { post } from '@/utils/request'

const router = useRouter()
const store = useStore()
function tologin() {
    router.push({
        name: 'index'
    })
}
function changeName(): void {
    store.name = '索索'
}

async function networkRequest(): Promise<void> {
    console.log('发起请求')
    const requestUrl = '/user/loginAdmin'
    const data = {
        username: '18130408100',
        password: '220926'
    }
    // proxy.$post(requestUrl, data)
    // .then((response: any) => {
    //     console.log(response, '<=== 请求返回的数据')
    // })
    const res = await post(requestUrl, data)
    console.log(res, '<=== 请求返回的数据')
}


interface Tree {
    label: string
    children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
    console.log(data)
}

const data: Tree[] = [
    {
        label: 'Level one 1',
        children: [
            {
                label: 'Level two 1-1',
                children: [
                    {
                        label: 'Level three 1-1-1',
                    },
                ],
            },
        ],
    },
    {
        label: 'Level one 2',
        children: [
            {
                label: 'Level two 2-1',
                children: [
                    {
                        label: 'Level three 2-1-1',
                    },
                ],
            },
            {
                label: 'Level two 2-2',
                children: [
                    {
                        label: 'Level three 2-2-1',
                    },
                ],
            },
        ],
    },
    {
        label: 'Level one 3',
        children: [
            {
                label: 'Level two 3-1',
                children: [
                    {
                        label: 'Level three 3-1-1',
                    },
                ],
            },
            {
                label: 'Level two 3-2',
                children: [
                    {
                        label: 'Level three 3-2-1',
                    },
                ],
            },
        ],
    },
]

const defaultProps = {
    children: 'children',
    label: 'label',
}

const option = reactive({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
            label: {
                show: true
            }
        }
    },
    grid: {
        left: '4%',
        top: '15%',
        right: '4%',
        bottom: '10%'
    },
    legend: {
        data: ['昨日总人数', '今日实时人数'],
        top: '4%',
        color: '#1FC3CE',
        fontSize: 14,
        selected: { 昨日使用率: false } // 不需要显示的设置为false
    },
    xAxis: {
        data: [
            '会议室1',
            '会议室2',
            '会议室3',
            '会议室4',
            '会议室5',
            '会议室6',
            '会议室7',
            '会议室8',
            '会议室9'
        ],
        axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
                color: '#eee',
                width: 1
            }
        },
        axisTick: {
            show: true, //隐藏X轴刻度
            alignWithLabel: true
        },
        axisLabel: {
            show: true,
            color: '#333', //X轴文字颜色
            fontSize: 14
        }
    },
    yAxis: [
        {
            type: 'value',
            name: '人数',
            nameTextStyle: {
                color: '#333',
                fontSize: 14
            },
            splitLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: '#eee'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true,
                color: '#333',
                fontSize: 14
            }
        }
    ],
    series: [
        {
            name: '昨日总人数',
            type: 'bar',
            barWidth: 18,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0, // 右
                    y: 1, // 下
                    x2: 0, // 左
                    y2: 0, // 上
                    colorStops: [
                        {
                            offset: 0,
                            color: '#F89898' // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: '#F56C6C' // 100% 处的颜色
                        }
                    ]
                }
            },
            data: [24, 45, 43, 35, 76, 154, 86, 42, 68]
        },
        {
            name: '今日实时人数',
            type: 'bar',
            barWidth: 18,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0, // 右
                    y: 1, // 下
                    x2: 0, // 左
                    y2: 0, // 上
                    colorStops: [
                        {
                            offset: 0,
                            color: '#52A7FF' // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: '#409EFF' // 100% 处的颜色
                        }
                    ]
                }
            },
            data: [133, 23, 114, 67, 89, 35, 67, 96, 90]
        }
    ]
});

</script>

<style lang="scss" scoped></style>