daikins/.svn/pristine/eb/eb1562ef688e6eedc332b327222299b9af5a5efa.svn-base

<script setup lang="ts">
import HomeHead from "@/views/home/components/HomeHead.vue";
import { timeStat } from '@/api/daikin/base';
import { formatDate } from '@/utils/format';
import { Chart1 } from "./indexData";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
const currentDate = new Date();
const currentDates = new Date();
const value1 = ref<[Date, Date]>([
    currentDate.setMonth(currentDate.getMonth()),
    new Date()
])
const value2 = ref<[Date, Date]>([
    currentDates.setMonth(currentDates.getMonth()),
    new Date()
])
const { chartRef: chartRef1, option: chartOption1, states } = Chart1()
const primary = ref(1)
const primarys = ref(2)


const clickButton = (id) => {
    primary.value = id
    state.timeType = id
}
const clickButtons = (id) => {
    primarys.value = id
    states.timeType = id
}
const timenFirst = (value) => {
    console.log(value)
    state.startTime = formatDate(value[0]).substring(0, 10)
    state.endTime = formatDate(value[1]).substring(0, 10)
    states.startTime = formatDate(value[0]).substring(0, 10)
    states.endTime = formatDate(value[1]).substring(0, 10)
}
const timenFirsts = (value) => {
    console.log(value)

}

const state = reactive<any>({
    startTime: formatDate(value1.value[0]).substring(0, 10),
    endTime: formatDate(value1.value[1]).substring(0, 10),
    // timeType:1
})
const dataList = ref()
const getDat = async () => {
    const { data } = await timeStat(state)
    dataList.value = data
}
const ss = computed(() => [state.startTime, state.endTime, state.timeType]);
watch(() => unref(ss),
    async (v) => {
        console.log(state.type)
        getDat()

    },
    { immediate: true, deep: true },
)

onMounted(() => {
    // getDat()
    console.log(formatDate(value1.value[0]).substring(0, 10))
})
const shortcuts = [
        {
            text: '今天',
            value: () => {
                let start = new Date()
                let end = new Date()
                start.setHours(0, 0, 0)
                end.setHours(23, 59, 59)
                return [start, end]
            }
        },
        // {
        //     text: '昨天',
        //     value: () => {
        //         let start = new Date()
        //         let end = new Date()
        //         start.setTime(start.getTime() - 3600 * 1000 * 24)
        //         end.setTime(end.getTime() - 3600 * 1000 * 24)
        //         start.setHours(0, 0, 0)
        //         end.setHours(23, 59, 59)
        //         return [start, end]
        //     }
        // },
        {
            text: '近7天',
            value: () => {
                let start = new Date()
                let end = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                end.setTime(end.getTime() - 3600 * 1000 * 24)
                start.setHours(0, 0, 0)
                end.setHours(23, 59, 59)
                return [start, end]
            }
        },
        {
            text: '近15天',
            value: () => {
                let start = new Date()
                let end = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
                end.setTime(end.getTime() - 3600 * 1000 * 24)
                start.setHours(0, 0, 0)
                end.setHours(23, 59, 59)
                return [start, end]
            }
        },
        {
            text: '近30天',
            value: () => {
                let start = new Date()
                let end = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                end.setTime(end.getTime() - 3600 * 1000 * 24)
                start.setHours(0, 0, 0)
                end.setHours(23, 59, 59)
                return [start, end]
            }
        },
        {
            text: '近3月',
            value: () => {
                let start = new Date()
                let end = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                end.setTime(end.getTime() - 3600 * 1000 * 24)
                start.setHours(0, 0, 0)
                end.setHours(23, 59, 59)
                return [start, end]
            }
        },
    ]



</script>

<template>
    <HomeHead class="top"></HomeHead>
    <div class="w-full h-834px mt30px rd-20px bg-#fff p30px">

        <div>
            <span class="text-#000">日期: </span>
            <el-config-provider :locale="zhCn">
                <el-date-picker v-model="value1" type="daterange" range-separator="到" start-placeholder="开始时间"
                    end-placeholder="结束时间" size="small" @change="timenFirst" :shortcuts="shortcuts" />

            </el-config-provider>
            <el-button type="primary" :icon="Search" size="small" class="ml20px mt--5px">搜素</el-button>
            <!-- <el-button :type="primary == 1 ? 'primary' : ''" :icon="Search" class="!ml100px mt--5px"
                @click="clickButton(1)">本日</el-button>
            <el-button :type="primary == 2 ? 'primary' : ''" :icon="Search" class="!ml30px mt--5px"
                @click="clickButton(2)">本周</el-button>
            <el-button :type="primary == 3 ? 'primary' : ''" :icon="Search" class="!ml30px mt--5px"
                @click="clickButton(3)">本月</el-button> -->
        </div>

        <div class="mt50px w-full">


            <span class="cardfoot text-#000 p30px mx10px my10px text-center text-18px font-bold" v-if="dataList"
                v-for="i in dataList">
                <span>{{ i.moduleName }}</span><br>
                <br>
                <span class="mt10px">{{ i.visitCount }}</span>
            </span>

        </div>


        <div class="mt50px w-full">
            <!-- <div class="relative w-full h-50px flex">
                <el-button :type="primarys == 2 ? 'primary' : ''" :icon="Search" class="!ml30px mt--5px"
                    @click="clickButtons(2)">本周</el-button>
                <el-button :type="primarys == 3 ? 'primary' : ''" :icon="Search" class="!ml30px mt--5px"
                    @click="clickButtons(3)">本月</el-button>
                <div class="absolute right-60px w300px ">
                    <el-config-provider :locale="zhCn">
                        <el-date-picker v-model="value2" type="daterange" range-separator="-" start-placeholder="开始时间"
                            end-placeholder="结束时间" size="small" @change="timenFirsts" />
                    </el-config-provider>
                </div>


            </div> -->
            <div class="w-full h-400px">
                <VChart ref="chartRef1" :option="chartOption1" />
            </div>
        </div>



    </div>
</template>

<style lang="less">
.cardfoot {
    display: inline-block;
    height: 120px;
    width: 220px;
    background-image: url('@/assets/images/bg-card.svg');
    background-size: cover;
    border-radius: 18px;
    box-shadow: 0px 6px 10px -2px rgba(43, 42, 42, 0.25)
}

.cardfoot:hover {
    background-color: #fff;
    box-shadow: 0px 9px 20px 7px rgba(92, 78, 218, 0.25);
    color: #2042b4;
}



.top {
    position: absolute;
    right: 30px;
    top: -92px;
}
</style>