317 lines
10 KiB
Vue
317 lines
10 KiB
Vue
<script setup lang="ts">
|
|
import HomeHead from '@/views/home/components/HomeHead.vue'
|
|
import { timeStat,externalTimeStat } from '@/api/daikin/base'
|
|
import { formatDate } from '@/utils/format'
|
|
import { Chart1 } from './indexData'
|
|
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
|
|
import { Search } from '@element-plus/icons-vue'
|
|
const currentDate = new Date()
|
|
const currentDates = new Date()
|
|
const value1 = ref<[Date, Date]>([
|
|
currentDate.setMonth(currentDate.getMonth()),
|
|
new Date()
|
|
])
|
|
const states = reactive<any>({
|
|
startTime:formatDate(value1.value[0]).substring(0,10),
|
|
endTime: formatDate(value1.value[1]).substring(0,10),
|
|
// timeType:2,
|
|
})
|
|
const chartRef1 = ref()
|
|
const chartRef2 = ref()
|
|
const chartOption1 = ref({});
|
|
const chartOption2 = ref({});
|
|
const primary = ref(1)
|
|
const primarys = ref(2)
|
|
const activeName = ref('inside')
|
|
|
|
|
|
|
|
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
|
|
let xAxisData:any[]=[]
|
|
let siomesData:any[]=[]
|
|
data.forEach((item: { moduleName: any; visitCount: any; })=>{
|
|
xAxisData.push(item.moduleName)
|
|
siomesData.push(item.visitCount)
|
|
})
|
|
chartOption1.value = Chart1(xAxisData,siomesData)
|
|
}
|
|
|
|
const externalList = ref<any>([])
|
|
const getExternalTimeStat = async () => {
|
|
const { data } = await externalTimeStat(state)
|
|
externalList.value = data
|
|
let xAxisData:any[]=[]
|
|
let siomesData:any[]=[]
|
|
data.forEach((item: { moduleName: any; visitCount: any; })=>{
|
|
xAxisData.push(item.moduleName)
|
|
siomesData.push(item.visitCount)
|
|
})
|
|
chartOption2.value = Chart1(xAxisData,siomesData)
|
|
// chartOption2.value.height=3000
|
|
// chartOption2.value.width=1000
|
|
}
|
|
const ss = computed(() => [state.startTime, state.endTime, state.timeType])
|
|
watch(
|
|
() => unref(ss),
|
|
async (v) => {
|
|
console.log(state.type)
|
|
getDat()
|
|
getExternalTimeStat()
|
|
},
|
|
{ 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]
|
|
}
|
|
}
|
|
]
|
|
|
|
const handleClick = ({paneName}:any) => {
|
|
paneName === 'out' && getExternalTimeStat()
|
|
paneName === 'inside' && getDat()
|
|
}
|
|
|
|
const selValue =ref('')
|
|
</script>
|
|
|
|
<template>
|
|
<HomeHead class="top"></HomeHead>
|
|
<div class="w-full h-834px mt30px rd-20px bg-#fff p30px overflow-hidden">
|
|
<div class="min-h-30px ">
|
|
<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
|
|
>
|
|
<template v-if="activeName !== 'inside' && false">
|
|
<el-select v-model="selValue" class="ml-20px mt-[-4px]" placeholder="Select" size="small">
|
|
<el-option
|
|
v-for="item in externalList"
|
|
:key="item.moduleCode"
|
|
:label="item.moduleName"
|
|
:value="item.moduleCode"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
<!-- <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>
|
|
<el-tabs class="mt-20px" v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane label="本部足迹" name="inside">
|
|
<div class="mt20px 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="mt10px 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 key="yyy" ref="chartRef1" :option="chartOption1" />
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="外部足迹" name="out">
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<div >
|
|
<div class="mt20px w-full">
|
|
<span
|
|
class="cardfoot text-#000 p30px mx10px my10px text-center text-18px font-bold"
|
|
v-if="dataList"
|
|
v-for="i in externalList"
|
|
>
|
|
<span>{{ i.moduleName }}</span
|
|
><br />
|
|
<br />
|
|
<span class="mt10px">{{ i.visitCount }}</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="mt10px 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 key="xxxx" ref="chartRef2" :option="chartOption2" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.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;
|
|
}
|
|
::v-deep{
|
|
.el-tabs__item{
|
|
font-size: 16px !important;
|
|
}
|
|
}
|
|
</style>
|