504 lines
14 KiB
Vue
504 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import HomeHead from '@/views/home/components/HomeHead.vue'
|
|
import {
|
|
timeStat,
|
|
externalTimeStat,
|
|
fetchmoduleStatExternalPage
|
|
} 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 pageInfo = reactive({
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
total: 10
|
|
})
|
|
const moduleCode = ref()
|
|
const visitDay = ref()
|
|
const waibuKd = ref()
|
|
const inseideDetail = ref([])
|
|
const outDetail = ref([])
|
|
const getInsideListPage = async () => {
|
|
const res: any = await fetchmoduleStatExternalPage({
|
|
waibuKd: waibuKd.value,
|
|
visitDay: visitDay.value,
|
|
moduleCode: moduleCode.value,
|
|
pageNum: pageInfo.currentPage,
|
|
pageSize: pageInfo.pageSize
|
|
})
|
|
inseideDetail.value = res?.rows || []
|
|
pageInfo.total = res?.total || 0
|
|
}
|
|
const getListPage = async () => {
|
|
const res: any = await fetchmoduleStatExternalPage({
|
|
waibuKd: waibuKd.value,
|
|
visitDay: visitDay.value,
|
|
moduleCode: moduleCode.value,
|
|
pageNum: pageInfo.currentPage,
|
|
pageSize: pageInfo.pageSize
|
|
})
|
|
outDetail.value = res?.rows || []
|
|
pageInfo.total = res?.total || 0
|
|
}
|
|
|
|
getListPage()
|
|
// getInsideListPage()
|
|
|
|
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 externalObj = 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; moduleCode: any }) => {
|
|
externalObj.value[item.moduleCode] = item.moduleName
|
|
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) => {
|
|
pageInfo.currentPage = 1
|
|
pageInfo.pageSize = 10
|
|
pageInfo.total = 0
|
|
paneName === 'out' && getExternalTimeStat()
|
|
paneName === 'inside' && getDat()
|
|
paneName === 'out-detail' && getListPage()
|
|
paneName === 'inside-detail' && getInsideListPage()
|
|
}
|
|
|
|
const selValue = ref('')
|
|
</script>
|
|
|
|
<template>
|
|
<HomeHead class="top"></HomeHead>
|
|
<div class="w-full h-850px mt30px rd-20px bg-#fff p30px overflow-hidden">
|
|
<div class="min-h-30px flex items-center">
|
|
<span class="text-#000 mr-10px">日期: </span>
|
|
<div class="max-w-350px flex items-center">
|
|
<el-date-picker
|
|
v-if="['inside', 'out'].includes(activeName)"
|
|
v-model="value1"
|
|
type="daterange"
|
|
range-separator="到"
|
|
start-placeholder="开始时间"
|
|
end-placeholder="结束时间"
|
|
@change="timenFirst"
|
|
:shortcuts="shortcuts"
|
|
/>
|
|
<el-date-picker
|
|
v-else
|
|
v-model="visitDay"
|
|
type="date"
|
|
value-format="YYYY-MM-DD"
|
|
placeholder="选择日期"
|
|
/>
|
|
</div>
|
|
<div class="mx-4 flex items-center">
|
|
<span class="text-#000 mr-10px">模块: </span>
|
|
<el-select
|
|
v-if="'out-detail' === activeName"
|
|
v-model="moduleCode"
|
|
placeholder="选择模块"
|
|
>
|
|
<el-option
|
|
v-for="item in externalList"
|
|
:key="item.id"
|
|
:label="item.moduleName"
|
|
:value="item.moduleCode"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="text-#000 mr-10px w-50px">供方: </span>
|
|
<el-input
|
|
v-model="waibuKd"
|
|
placeholder="请输入供方昵称或代码"
|
|
></el-input>
|
|
</div>
|
|
<el-button
|
|
type="primary"
|
|
:icon="Search"
|
|
size="small"
|
|
class="ml20px mt--5px"
|
|
@click="handleClick({ paneName: activeName })"
|
|
>搜索</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 v-if="false" label="本部足迹-明细" name="inside-detail">
|
|
<div v-if="activeName === 'inside-detail'" class="h-720px">
|
|
<div class="w100% h-full overflow-auto">
|
|
<el-table
|
|
:data="inseideDetail"
|
|
style="width: 100%; margin-bottom: 20px"
|
|
row-key="id"
|
|
border
|
|
default-expand-all
|
|
:header-cell-style="{
|
|
background: '#2A7BF7',
|
|
color: '#fff',
|
|
height: '60px',
|
|
lineHeight: '60px',
|
|
textAlign: 'center',
|
|
'font-size': '24px'
|
|
}"
|
|
:cell-style="{ 'text-align': 'center', 'overflow-y': 'auto' }"
|
|
>
|
|
<el-table-column prop="deptName" label="排序" />
|
|
<el-table-column
|
|
prop="cateName"
|
|
label="所属分类"
|
|
show-overflow-tooltip
|
|
>
|
|
<template #default="scope">
|
|
<span v-if="scope"></span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="title"
|
|
label="标题名称"
|
|
show-overflow-tooltip
|
|
/>
|
|
<el-table-column
|
|
label="文件列表"
|
|
prop="filePath"
|
|
show-overflow-tooltip
|
|
/>
|
|
<el-table-column label="排序" prop="sort" show-overflow-tooltip />
|
|
<el-table-column label="查看范围" prop="userIdList">
|
|
<template #default="scope">
|
|
<el-button type="primary" class="button" @click=""
|
|
>查看范围</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="absolute bottom-2px right-30px z-20 bg-#fff">
|
|
<el-pagination
|
|
v-model:current-page="pageInfo.currentPage"
|
|
v-model:page-size="pageInfo.pageSize"
|
|
layout="prev, pager, next, jumper"
|
|
:total="pageInfo.total"
|
|
@size-change="getInsideListPage"
|
|
@current-change="getInsideListPage"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="外部足迹" name="out"> </el-tab-pane>
|
|
<el-tab-pane label="外部足迹-明细" name="out-detail">
|
|
<div class="h-720px">
|
|
<div class="w100% h-full overflow-auto">
|
|
<el-table
|
|
:data="outDetail"
|
|
style="width: 100%; margin-bottom: 20px"
|
|
row-key="id"
|
|
border
|
|
default-expand-all
|
|
:header-cell-style="{
|
|
background: '#2A7BF7',
|
|
color: '#fff',
|
|
height: '60px',
|
|
lineHeight: '60px',
|
|
textAlign: 'center',
|
|
'font-size': '24px'
|
|
}"
|
|
:cell-style="{ 'text-align': 'center', 'overflow-y': 'auto' }"
|
|
>
|
|
<el-table-column prop="userId" label="供方ID" />
|
|
<el-table-column
|
|
prop="nickName"
|
|
label="供方昵称"
|
|
show-overflow-tooltip
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="title"
|
|
label="访问模块"
|
|
show-overflow-tooltip
|
|
>
|
|
<template #default="{ row }">
|
|
<span>{{ externalObj[row.moduleCode] || '' }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="访问计数"
|
|
prop="visitCount"
|
|
show-overflow-tooltip
|
|
/>
|
|
<el-table-column
|
|
label="访问时间"
|
|
prop="visitDay"
|
|
show-overflow-tooltip
|
|
/>
|
|
</el-table>
|
|
</div>
|
|
<div class="absolute bottom-2px right-30px z-20 bg-#fff">
|
|
<el-pagination
|
|
v-model:current-page="pageInfo.currentPage"
|
|
v-model:page-size="pageInfo.pageSize"
|
|
layout="prev, pager, next, jumper"
|
|
:total="pageInfo.total"
|
|
@size-change="getListPage"
|
|
@current-change="getListPage"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</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="externalList"
|
|
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="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>
|